/* ═══════════════════════════════════════════════════════════════════════ Ported verbatim from www/sites/all/themes/business/css/override.css — this is the live site's actual design system, not a new one. Only the sections actually used by the pages built so far are included; add more verbatim sections here as more pages get rebuilt. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Theme colors (--bs-primary/-info/-success/-warning/-danger and their -rgb pairs), --cl-blue-soft and --cl-coral used to be redeclared here too — dropped since dashboard_css_urls() (includes/layout.php) always loads the compiled Bootstrap/Claude design-system bundle before this file, which already defines all of them from coursesite/src/assets/claude/_variables.scss and _bootswatch.scss. Redeclaring them here just let this file silently drift out of sync with that one source of truth (it loads last, so its copy would win). Brand colors live in _variables.scss now — see $brand-red/$brand-navy. */ --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --r-md: 12px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 1.25rem; --r-pill: 999px; --ease-snap: ease; --dur-fast: 180ms; --dur-base: 260ms; } [data-bs-theme="light"] { --bg-page-gradient: linear-gradient(135deg, #eaf2fb 0%, #f6f8fc 55%, #dfeaf8 100%); --bg-card-gradient: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%); --shadow-card: 0 .35rem .9rem rgba(0,0,0,.06); --shadow-hover: 0 1rem 2rem rgba(0,0,0,.12); /* --tint-*-soft vars: also dropped from here for the same reason as the :root block above — the loaded bundle's copies (derived from $primary/ $info/$success/$warning) already apply. */ /* Bootstrap's own default (--bs-body-bg: #fff) leaves every element that paints itself with this var (.site-header, .cd-status-card, etc.) flat white in light mode instead of the same gradient the page body uses. */ --bs-body-bg: var(--bg-page-gradient); } /* [data-bs-theme="dark"] used to redeclare its own copies of every one of these tokens here too — dropped for the same reason as the light block above: the compiled bundle's [data-bs-theme="dark"] rule (_bootswatch.scss, fed by claude/_variables-dark.scss) already sets all of them from the same $primary/$secondary source of truth, and loads before this file. The one real bug that duplication caused: --bs-border-color had drifted to rgba(255,255,255,.049) here vs the bundle's rgba(255,255,255,.08) — silently thinner dark-mode borders than the design system intends. */ html, body { font-family: var(--bs-font-sans-serif); -webkit-font-smoothing: antialiased; } html { /* Some pages are taller than the viewport (a scrollbar appears) and some aren't (no scrollbar) — without this, navigating between them shifted the whole page left/right by the scrollbar's width. overflow-y:scroll is the universal-support fallback; scrollbar-gutter reserves the same space without forcing the bar to always be visibly drawn on browsers that support it. overflow-x:hidden (horizontal-scroll guard) lives here too, not on body — html already has a non-"visible" overflow-y above, which disables the browser's usual body->viewport overflow propagation. With overflow-x set on body instead, body becomes its own scrolling/clipping container distinct from the real viewport, and every position:sticky element inside it (e.g. .cd-sidebar) stops sticking to the viewport at all. */ overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable; } body { background: var(--bg-page-gradient); min-height: 100vh; margin: 0; color: var(--bs-body-color); /* Explicitly undoes coursesite/src/assets/scss/theme.scss's own `body{overflow-x:hidden}` — that compiled bundle is shared onto every page here too (see dashboard_css_urls() in includes/layout.php, loaded in before this file), and its rule would otherwise re-introduce exactly the sticky-breaking bug the html{} rule above fixed, since it targets body directly rather than html. Harmless to leave as-is in the Vue SPA itself (it has no html{} override, so the browser auto-propagates that rule to the viewport there) — this override only matters here, where html already has one. `clip`, not `visible`: course-detail.php's/home.php's scroll-triggered entrance animations (.course-scroll-animate + animate__fadeInLeft / animate__fadeInRight) translateX() elements in from off-screen. With `visible`, that transform's overflow bubbles past body — which isn't a scroll container — up to a mobile browser's pannable layout viewport while the animation runs, dragging position:fixed content (the "Start Learning" cd-fixed-cta bar) sideways with it even though html has overflow-x:hidden. `clip` still isn't a scroll container (so position:sticky descendants keep tracking the real viewport, same as `visible`), but it does clip that transform overflow right at body's edge instead of letting it bubble up and become pannable. */ overflow-x: clip; } .card { background: var(--bg-card-gradient); border-color: var(--bs-border-color); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); } main { /* No position/z-index here on purpose — giving main its own stacking context used to trap everything painted inside it (including position:fixed descendants like .cd-fixed-cta, whose z-index is only compared *within* that context) at a single z-index:1 slot when compared against unpositioned siblings like