: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-coloured 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; }
/* 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
`