/* ============================================================================= ProTrain landing pages — shared palette + Bootstrap button skin ----------------------------------------------------------------------------- Extracted from the retired protrain-landing-resp-base.css when the ten remaining ProTrain content pages were re-parented from their standalone `resp_base.html.twig` layout onto the site-wide `base.html.twig` (2026 navigation overhaul — one global navigation, not two). WHY THIS FILE STILL EXISTS. Each of those ten pages has its own stylesheet, and every one of them leans on this purple palette 24–59 times. Dropping the variables with the old layout would have left ten pages full of unresolved `var(--primary-color)` references. WHAT WAS DELIBERATELY LEFT BEHIND: • the whole `.navbar-component__*`, `.footer-component__*`, `.breadcrumb-component__*` and `.loader-wrapper` chrome — that markup is gone; the global header, footer and breadcrumb replace it; • `body { font-family: 'Lora', serif; padding-top: 70px; ... }` — the pages now inherit the site's Roboto type scale, and the 70px offset existed only to clear the old FIXED navbar. The global header is sticky, so keeping it would have opened a 70px gap under the header. These variable names are unprefixed and therefore global. They were verified not to collide with anything in design-system/tokens.css or base.css. Do not add new ones here — new work should use the qc- design tokens. ========================================================================== */ :root { --primary-color: #6a3db3; /* Primary purple */ --secondary-color: #4a3078; /* Darker purple */ --accent-color: #9d7fde; /* Lighter purple / highlight */ --light-color: #ffffff; --dark-color: #333333; --bg-color: #f8f7fc; /* Light greyish purple background */ --text-color: #2c2c2c; --border-color: #e0e0e5; } /* Bootstrap button skin used by the content of these pages. */ .protrain-page .btn { border-radius: 4px; padding: 10px 20px; font-weight: 600; transition: all 0.3s ease; } .protrain-page .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .protrain-page .btn-primary:hover, .protrain-page .btn-primary:focus { background-color: var(--secondary-color); border-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(106, 61, 179, 0.3); } .protrain-page .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); } .protrain-page .btn-outline-primary:hover { background-color: var(--primary-color); color: var(--light-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(106, 61, 179, 0.2); } .protrain-page .btn-touch-active { transform: scale(0.98) !important; opacity: 0.9; } /* Page background. Scoped to the page wrapper rather than so it cannot fight the global chrome the way the old body-level rule did. */ .protrain-page { background-color: var(--bg-color); color: var(--text-color); } @media (prefers-reduced-motion: reduce) { .protrain-page .btn, .protrain-page .btn-primary:hover, .protrain-page .btn-outline-primary:hover { transition: none; transform: none; } }