:root { --background: 210 33% 98%; --foreground: 217 48% 20%; --card: 0 0% 100%; --card-foreground: 217 48% 20%; --muted: 210 20% 95%; --muted-foreground: 216 14% 30%; --primary: 217 48% 20%; --primary-foreground: 0 0% 100%; --accent: 207 55% 40%; --accent-foreground: 0 0% 100%; --secondary: 207 55% 40%; --secondary-foreground: 0 0% 100%; --border: 214 32% 91%; --input: 214 32% 91%; --destructive: 0 72% 51%; --success: 160 84% 26%; --warning: 37 92% 31%; --navy: 217 48% 20%; --blue: 207 55% 40%; --radius: 0.625rem; } .dark { /* Lifted from 8% → 14% so dark-mode product screenshots (which use their own ~6–9% dark surfaces) stand off the page rather than blending into it. Cards/muted/border re-tiered to keep visible elevation between surface layers. */ --background: 220 18% 14%; --foreground: 210 33% 95%; --card: 220 16% 18%; --card-foreground: 210 33% 95%; --muted: 220 14% 22%; --muted-foreground: 216 14% 74%; --primary: 210 33% 95%; --primary-foreground: 220 20% 8%; /* Raised from 48% → 62% so accent-as-text clears 4.5:1 on dark card (#272b35: 5.25) and dark muted (#303540: 4.55). Accent-bg buttons use a darker hardcoded override below. */ --accent: 207 55% 62%; --accent-foreground: 0 0% 100%; --secondary: 207 55% 62%; --secondary-foreground: 0 0% 100%; --border: 220 14% 28%; --input: 220 14% 28%; /* Lifted for dark-bg contrast: success/warning as text on dark cards must clear 4.5:1. */ --success: 160 84% 50%; --warning: 37 92% 62%; } /* ── Dark-mode: accent-colored button backgrounds ────────────────────────── --accent is lifted to 62% for text-on-dark-surface legibility, but that makes it too light for white text (contrast < 4.5:1). Override the bg for any element that uses hsl(var(--accent)) as its background so buttons keep a dark-enough fill to pass 4.5:1 with white text (L=40% → 5.62:1). */ .dark .bg-\[hsl\(var\(--accent\)\)\] { background-color: hsl(207 55% 40%); } /* ── Dark-mode: solid-success-green backgrounds ───────────────────────────── Light-mode --success (#0b7a55 at L=26%) is fine; dark --success is lifted to L=50% for text legibility, but as a solid badge/button background it fails 4.5:1 with white text (#14eba3 on white = 1.56). Override to a darker teal (L=26% = #0b7a55) so white text hits 5.35:1. */ .dark .bg-\[hsl\(var\(--success\)\)\] { background-color: hsl(160 84% 26%); } * { box-sizing: border-box; } /* as a layout-transparent wrapper. Both hero mechanisms (the rotating hero_photo macro and the fixed-pair partials/_theme_hero_image.jinja) wrap their in a so the browser can pick ONE file from a prefers-color-scheme . That wrapper must not participate in layout: an inline shrinks to content, which would break the `w-full h-full` inline use the fixed-pair partial documents. `display: contents` removes the box while leaving the resource-selection behavior — which the HTML image algorithm runs independently of CSS — completely intact. */ picture.as-hero-pic { display: contents; } /* Theme-aware hero image swap. Stack two elements absolutely on top of each other and toggle visibility based on the `.dark` class on . Both stay in flow so the active one paints immediately on theme change with no reload flash. Use via partials/_theme_hero_image.jinja. */ .theme-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease; } .theme-hero-light { opacity: 1; } .theme-hero-dark { opacity: 0; } .dark .theme-hero-light { opacity: 0; } .dark .theme-hero-dark { opacity: 1; } /* Same theme-aware swap for inline product mocks (feature pages) */ .theme-mock-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity 200ms ease; } .theme-mock-light { opacity: 1; } .theme-mock-dark { opacity: 0; } .dark .theme-mock-light { opacity: 0; } .dark .theme-mock-dark { opacity: 1; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; } .text-gradient { background: linear-gradient(135deg, hsl(var(--navy)) 0%, hsl(var(--blue)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dark .text-gradient { background: linear-gradient(135deg, hsl(210 33% 95%) 0%, hsl(207 55% 65%) 100%); -webkit-background-clip: text; background-clip: text; } .bg-gradient-accent { background: linear-gradient(135deg, hsl(var(--navy)) 0%, hsl(var(--blue)) 100%); } /* In dark mode the default gradient (navy → blue) blends into the dark page background, making CTAs look washed out. Lift both stops to keep the button visually punchy on a dark surface while staying on-brand. */ .dark .bg-gradient-accent { background: linear-gradient(135deg, hsl(214 60% 32%) 0%, hsl(199 70% 45%) 100%); } .bg-gradient-accent-light { background: linear-gradient(135deg, hsla(var(--navy) / 0.05) 0%, hsla(var(--blue) / 0.05) 100%); } .dark .bg-gradient-accent-light { background: linear-gradient(135deg, hsla(var(--blue) / 0.08) 0%, hsla(var(--navy) / 0.08) 100%); } /* Accessible focus ring */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; border-radius: 4px; } /* Skip link */ /* WCAG-standard visually-hidden pattern. The older left: -9999px trick could cause horizontal overflow on some mobile browsers and surface the link as a stray underlined "Skip to main content" line. */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus-visible { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 8px 16px; background: hsl(var(--accent)); color: white; border-radius: 4px; font-weight: 600; z-index: 9999; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: hsl(var(--muted)); } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.4); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.6); } /* Accessible checkmark icon — meets WCAG 1.4.11 non-text contrast ≥3:1 on both light (--card: white) and dark card surfaces. #16a34a fails light cards; hsl(160 84% 29%) is the --success token and passes 3:1 on white. */ .check-icon { color: hsl(var(--success)); } .dark .check-icon { color: hsl(160 70% 52%); } /* Form error state — dark-mode-aware color for WCAG 1.4.3 (≥4.5:1) */ .form-error { color: hsl(var(--destructive)); } .dark .form-error { color: hsl(0 72% 68%); } /* Card helper */ .as-card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); } /* Course carousel — hide scrollbar on webkit + firefox */ .course-carousel { scrollbar-width: thin; } .course-carousel::-webkit-scrollbar { height: 8px; } .course-carousel::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; } .course-carousel::-webkit-scrollbar-track { background: transparent; } /* Lock body scroll while the mobile menu is open. The class is toggled by main.js when the hamburger is tapped. */ html.mobile-menu-open, body.mobile-menu-open { overflow: hidden; touch-action: none; } /* ── Accessible nav dropdowns (JS-driven disclosure) ───────────────────────── _header.jinja's four desktop dropdowns (Features, Products, per-item submenus, language picker) are `
` wrapping a `