: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% 29%; --warning: 37 92% 44%; --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%; --accent: 207 55% 48%; --accent-foreground: 0 0% 100%; --secondary: 207 55% 48%; --secondary-foreground: 0 0% 100%; --border: 220 14% 28%; --input: 220 14% 28%; } * { box-sizing: border-box; } /* 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; }