/* ============================================================
core.bundle.css — GENERATED, DO NOT EDIT
------------------------------------------------------------
Built from public/css/core/core.css and the files it imports,
by deploy/build-css.php. Edit those; run the script again.
It exists because @import cannot be cache-busted: css() can
only version the file it is handed, so a change to a part
left the manifest untouched and browsers kept serving the
old CSS against new markup.
============================================================ */
/* ──────────────────────────────────────────────────────────
01-reset.css
────────────────────────────────────────────────────────── */
/* ============================================================
01-reset.css — Modern reset
Part of the CAET Mentors Common CSS core. Do not add project rules here.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
margin: 0;
}
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
body {
min-height: 100vh;
min-height: 100dvh;
text-rendering: optimizeSpeed;
line-height: var(--lh-body);
}
/* Media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img, video { height: auto; }
/*
| Only fill an SVG that has not said otherwise.
|
| A bare `svg { fill: currentColor }` overrides the fill="none"
| PRESENTATION ATTRIBUTE, because CSS always beats presentation
| attributes regardless of specificity. Every hand-written inline icon
| that declared fill="none" and drew with strokes therefore rendered as
| a solid black blob — which is exactly how the document icon on the
| study material cards shipped.
|
| :not([fill]) leaves those alone and still gives an unmarked SVG a
| sensible default.
*/
svg:not([fill]) { fill: currentColor; }
/* Forms inherit type */
input, button, textarea, select {
font: inherit;
color: inherit;
}
button { background: none; border: none; padding: 0; cursor: pointer; }
textarea { resize: vertical; }
/* Tables */
table { border-collapse: collapse; border-spacing: 0; }
/* Anchors */
a { color: inherit; text-decoration: none; }
/* Headings shouldn't be orphaned */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Hidden attribute must win */
[hidden] { display: none !important; }
/* ── Focus: visible ring on every interactive element (doctrine 02 §1, rule 5) ── */
:focus { outline: none; }
:focus-visible {
outline: var(--focus-w) solid var(--focus-ring);
outline-offset: var(--focus-offset);
border-radius: var(--r-sm);
}
/* Skip link for keyboard users */
.skip-link {
position: absolute;
left: var(--s-4);
top: -100%;
z-index: var(--z-max);
padding: var(--s-3) var(--s-5);
background: var(--brand-700);
color: var(--on-brand);
border-radius: var(--r-md);
transition: top var(--dur-2) var(--ease);
}
.skip-link:focus-visible { top: var(--s-4); }
/* Selection */
::selection { background: var(--brand-200); color: var(--brand-900); }
/* Scrollbar — subtle, themed */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--r-full);
border: 2px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }
/* Motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ──────────────────────────────────────────────────────────
02-tokens.css
────────────────────────────────────────────────────────── */
/* ============================================================
02-tokens.css — THE design tokens. Light theme (:root).
------------------------------------------------------------
This file and 03-theme-dark.css are the ONLY places a raw
colour value may appear anywhere in the codebase.
(Doctrine 02 §1, Iron Rule 1.)
============================================================ */
:root {
color-scheme: light;
/* ── Brand: deep academic navy ───────────────────────────── */
--brand-900: #0A1633;
--brand-800: #10224D;
--brand-700: #173066;
--brand-600: #1E3E85;
--brand-500: #2B55A8;
--brand-400: #4A76C9;
--brand-300: #7EA0DE;
--brand-200: #B9CCEE;
--brand-100: #E4EDF9;
--brand-050: #F2F7FD;
/* ── Accent: warm gold. A spice, not a base. ─────────────── */
--gold-700: #8A6516;
--gold-600: #B3841F;
--gold-500: #D4A850;
--gold-400: #E4C381;
--gold-200: #F4E6C4;
--gold-100: #FBF5E7;
/* ── Exam track accents (overridden per `exams` row) ─────── */
--exam-caet: #1E3E85;
--exam-jee: #0F766E;
--exam-neet: #B91C4B;
--exam-caet-soft: #E4EDF9;
--exam-jee-soft: #D7F0EC;
--exam-neet-soft: #FCE3EA;
/* ── Semantic ────────────────────────────────────────────── */
--success: #15803D; --success-soft: #DCFCE7; --success-text: #14532D;
--warning: #B45309; --warning-soft: #FEF3C7; --warning-text: #78350F;
--danger: #B91C1C; --danger-soft: #FEE2E2; --danger-text: #7F1D1D;
--info: #0369A1; --info-soft: #E0F2FE; --info-text: #075985;
/* ── Absolutes ───────────────────────────────────────────── */
/* Theme-independent by definition. Use ONLY where the value must
not flip with the theme: a switch knob, a tooltip on a dark
bubble, print output. Never as a page or text colour. */
--white: #FFFFFF;
--black: #000000;
/* ── Neutrals ────────────────────────────────────────────── */
--bg: #FFFFFF;
--bg2: #F7F9FC;
--bg3: #EDF1F7;
--card-bg: #FFFFFF;
--overlay: rgba(10, 22, 51, .55);
--border: #DCE3ED;
--border-strong: #C2CCDA;
--text: #0F172A;
--text-2: #334155;
--muted: #64748B;
--muted-2: #94A3B8;
--on-brand: #FFFFFF;
/* Surfaces that stay dark in BOTH themes — footer, sidebars, the
brand CTA band. Their foreground colours therefore cannot be --text
(which flips), so they get their own pair. */
--on-dark: #C7D3EA;
--on-dark-muted: #8FA3C4;
--on-dark-line: rgba(255, 255, 255, .12);
--sidebar-bg: var(--brand-900);
--sidebar-text: var(--on-dark);
--sidebar-active-bg: rgba(255, 255, 255, .08);
/* ── Elevation ───────────────────────────────────────────── */
/* Layered rather than single-shadow: a tight contact shadow plus a
wide ambient one. One blurred shadow reads as a sticker; two read
as an object sitting on a surface. */
--sh-1: 0 1px 2px rgba(15, 23, 42, .06);
--sh-2: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -4px rgba(15, 23, 42, .10);
--sh-3: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 40px -8px rgba(15, 23, 42, .16);
--sh-4: 0 4px 8px rgba(15, 23, 42, .06), 0 32px 72px -16px rgba(15, 23, 42, .22);
--sh-brand: 0 2px 6px rgba(30, 62, 133, .18), 0 14px 36px -8px rgba(30, 62, 133, .32);
--sh-gold: 0 2px 6px rgba(138, 101, 22, .18), 0 14px 36px -8px rgba(179, 132, 31, .30);
--sh-inset: inset 0 1px 2px rgba(15, 23, 42, .06);
/* ── Surfaces ────────────────────────────────────────────── */
/* Raised surfaces that are not simply --card-bg. A mature interface
has three or four distinguishable planes, not two. */
--surface-1: #FFFFFF;
--surface-2: #FBFCFE;
--surface-3: #F4F7FB;
--surface-sunken: #EEF2F8;
/* Frosted panels — the header, and anything floating over content. */
--glass-bg: rgba(255, 255, 255, .78);
--glass-border: rgba(255, 255, 255, .55);
--glass-blur: 14px;
/* Hairline that reads as a crease rather than a drawn line. */
--hairline: rgba(15, 23, 42, .08);
/* ── Signature gradients ─────────────────────────────────── */
/* Named, so a gradient used in three places cannot drift into three
slightly different gradients. */
--grad-brand: linear-gradient(135deg, #10224D 0%, #1E3E85 52%, #2B55A8 100%);
--grad-deep: linear-gradient(160deg, #0A1633 0%, #10224D 45%, #173066 100%);
--grad-gold: linear-gradient(135deg, #B3841F 0%, #D4A850 55%, #E4C381 100%);
--grad-sunrise: linear-gradient(120deg, #1E3E85 0%, #2B55A8 38%, #B3841F 100%);
--grad-sheen: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
/* ── Radius ──────────────────────────────────────────────── */
--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
/* ── Spacing — 4px base ──────────────────────────────────── */
--s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
--s-16: 64px; --s-20: 80px; --s-24: 96px;
/* ── Typography ──────────────────────────────────────────── */
--ff-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--ff-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
--fs-xs: clamp(.72rem, .70rem + .10vw, .78rem);
--fs-sm: clamp(.82rem, .80rem + .12vw, .88rem);
--fs-base: clamp(.94rem, .91rem + .15vw, 1.00rem);
--fs-lg: clamp(1.05rem, 1.00rem + .25vw, 1.13rem);
--fs-xl: clamp(1.15rem, 1.08rem + .35vw, 1.25rem);
--fs-2xl: clamp(1.35rem, 1.24rem + .55vw, 1.50rem);
--fs-3xl: clamp(1.60rem, 1.42rem + .90vw, 1.88rem);
--fs-4xl: clamp(1.90rem, 1.62rem + 1.40vw, 2.25rem);
--fs-5xl: clamp(2.30rem, 1.85rem + 2.25vw, 3.00rem);
--lh-display: 1.15;
--lh-heading: 1.30;
--lh-body: 1.65;
--lh-prose: 1.75;
--fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800;
--tracking-tight: -.02em;
--tracking-wide: .04em;
--tracking-eyebrow: .10em;
/* ── Motion ──────────────────────────────────────────────── */
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
/* ── Layout ──────────────────────────────────────────────── */
--container: 1200px;
--container-wide: 1400px;
--container-narrow: 900px;
--container-prose: 72ch;
--gutter: var(--s-4);
--gutter-lg: var(--s-8);
--header-h: 72px;
--section-y: var(--s-16);
--section-y-lg: var(--s-20);
/* ── Focus ring ──────────────────────────────────────────── */
--focus-ring: var(--brand-500);
--focus-w: 2px;
--focus-offset: 2px;
/* ── Z-index scale ───────────────────────────────────────── */
--z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
--z-modal: 400; --z-toast: 500; --z-max: 999;
}
@media (min-width: 1024px) {
:root { --gutter: var(--gutter-lg); --section-y: var(--section-y-lg); }
}
/* ──────────────────────────────────────────────────────────
03-theme-dark.css
────────────────────────────────────────────────────────── */
/* ============================================================
03-theme-dark.css — Dark theme, TOKEN OVERRIDES ONLY.
------------------------------------------------------------
Doctrine 02 §1, Iron Rule 4: dark mode is achieved by
reassigning tokens. No component ever gets its own dark rule.
If a component needs a dark-specific fix, the token is wrong.
Two activation paths, both supported:
1. Explicit choice → html[data-theme="dark"]
2. System default → prefers-color-scheme, unless the user
has explicitly chosen light
============================================================ */
/* The dark palette, declared once. */
:root {
--dk-bg: #0D1117;
--dk-bg2: #161B22;
--dk-bg3: #21262D;
--dk-card-bg: #161B22;
--dk-overlay: rgba(0, 0, 0, .70);
--dk-border: #30363D;
--dk-border-strong: #444C56;
--dk-text: #E6EDF3;
--dk-text-2: #C3CDD9;
--dk-muted: #8B949E;
--dk-muted-2: #6E7681;
/* Brand shades lifted for contrast on dark ground */
--dk-brand-600: #4A76C9;
--dk-brand-500: #6B92DA;
--dk-brand-200: #23365C;
--dk-brand-100: #1A2846;
--dk-brand-050: #151F35;
--dk-gold-600: #E4C381;
--dk-gold-500: #D4A850;
--dk-gold-100: #2A2416;
--dk-exam-caet: #6B92DA;
--dk-exam-jee: #2DD4BF;
--dk-exam-neet: #F87171;
--dk-exam-caet-soft: #1A2846;
--dk-exam-jee-soft: #0F2E2A;
--dk-exam-neet-soft: #3A1620;
--dk-success: #4ADE80; --dk-success-soft: #14301F; --dk-success-text: #86EFAC;
--dk-warning: #FBBF24; --dk-warning-soft: #33260A; --dk-warning-text: #FCD34D;
--dk-danger: #F87171; --dk-danger-soft: #3A1616; --dk-danger-text: #FCA5A5;
--dk-info: #38BDF8; --dk-info-soft: #0C2A3D; --dk-info-text: #7DD3FC;
--dk-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
--dk-sh-2: 0 4px 14px rgba(0, 0, 0, .45);
--dk-sh-3: 0 2px 4px rgba(0, 0, 0, .40), 0 16px 40px -8px rgba(0, 0, 0, .58);
--dk-sh-4: 0 4px 8px rgba(0, 0, 0, .42), 0 32px 72px -16px rgba(0, 0, 0, .66);
--dk-sh-gold: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 36px -8px rgba(212, 168, 80, .22);
/* Dark surfaces climb TOWARDS the light as they rise, the opposite of
the light theme. A raised panel on a dark ground reads as lifted
only if it is lighter than what is behind it; shadow alone does
almost nothing. */
--dk-surface-1: #161B22;
--dk-surface-2: #1C222B;
--dk-surface-3: #232A34;
--dk-surface-sunken: #0B0F14;
--dk-glass-bg: rgba(22, 27, 34, .74);
--dk-glass-border: rgba(255, 255, 255, .08);
--dk-hairline: rgba(255, 255, 255, .07);
/* Gradients are re-mixed rather than reused: the light-theme brand
gradient is far too bright against a dark page. */
--dk-grad-brand: linear-gradient(135deg, #0F1E42 0%, #17305F 52%, #1E3E85 100%);
--dk-grad-deep: linear-gradient(160deg, #080D1C 0%, #0D1730 45%, #12224A 100%);
--dk-grad-sunrise: linear-gradient(120deg, #17305F 0%, #1E3E85 38%, #8A6516 100%);
--dk-sh-brand: 0 8px 28px rgba(0, 0, 0, .55);
--dk-sh-inset: inset 0 1px 2px rgba(0, 0, 0, .35);
--dk-sidebar-bg: #070B14;
--dk-focus-ring: #6B92DA;
}
/* The assignment. Kept in one place so the two activation paths
can never drift apart — edit the palette above, not here. */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--dk-bg);
--bg2: var(--dk-bg2);
--bg3: var(--dk-bg3);
--card-bg: var(--dk-card-bg);
--overlay: var(--dk-overlay);
--border: var(--dk-border);
--border-strong: var(--dk-border-strong);
--text: var(--dk-text);
--text-2: var(--dk-text-2);
--muted: var(--dk-muted);
--muted-2: var(--dk-muted-2);
--brand-600: var(--dk-brand-600);
--brand-500: var(--dk-brand-500);
--brand-200: var(--dk-brand-200);
--brand-100: var(--dk-brand-100);
--brand-050: var(--dk-brand-050);
--gold-600: var(--dk-gold-600);
--gold-500: var(--dk-gold-500);
--gold-100: var(--dk-gold-100);
--exam-caet: var(--dk-exam-caet);
--exam-jee: var(--dk-exam-jee);
--exam-neet: var(--dk-exam-neet);
--exam-caet-soft: var(--dk-exam-caet-soft);
--exam-jee-soft: var(--dk-exam-jee-soft);
--exam-neet-soft: var(--dk-exam-neet-soft);
--success: var(--dk-success); --success-soft: var(--dk-success-soft); --success-text: var(--dk-success-text);
--warning: var(--dk-warning); --warning-soft: var(--dk-warning-soft); --warning-text: var(--dk-warning-text);
--danger: var(--dk-danger); --danger-soft: var(--dk-danger-soft); --danger-text: var(--dk-danger-text);
--info: var(--dk-info); --info-soft: var(--dk-info-soft); --info-text: var(--dk-info-text);
--sh-1: var(--dk-sh-1);
--sh-2: var(--dk-sh-2);
--sh-3: var(--dk-sh-3);
--sh-brand: var(--dk-sh-brand);
--sh-inset: var(--dk-sh-inset);
--sidebar-bg: var(--dk-sidebar-bg);
--focus-ring: var(--dk-focus-ring);
}
/* System preference, only when the user has not explicitly chosen light. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: var(--dk-bg);
--bg2: var(--dk-bg2);
--bg3: var(--dk-bg3);
--card-bg: var(--dk-card-bg);
--overlay: var(--dk-overlay);
--border: var(--dk-border);
--border-strong: var(--dk-border-strong);
--text: var(--dk-text);
--text-2: var(--dk-text-2);
--muted: var(--dk-muted);
--muted-2: var(--dk-muted-2);
--brand-600: var(--dk-brand-600);
--brand-500: var(--dk-brand-500);
--brand-200: var(--dk-brand-200);
--brand-100: var(--dk-brand-100);
--brand-050: var(--dk-brand-050);
--gold-600: var(--dk-gold-600);
--gold-500: var(--dk-gold-500);
--gold-100: var(--dk-gold-100);
--exam-caet: var(--dk-exam-caet);
--exam-jee: var(--dk-exam-jee);
--exam-neet: var(--dk-exam-neet);
--exam-caet-soft: var(--dk-exam-caet-soft);
--exam-jee-soft: var(--dk-exam-jee-soft);
--exam-neet-soft: var(--dk-exam-neet-soft);
--success: var(--dk-success); --success-soft: var(--dk-success-soft); --success-text: var(--dk-success-text);
--warning: var(--dk-warning); --warning-soft: var(--dk-warning-soft); --warning-text: var(--dk-warning-text);
--danger: var(--dk-danger); --danger-soft: var(--dk-danger-soft); --danger-text: var(--dk-danger-text);
--info: var(--dk-info); --info-soft: var(--dk-info-soft); --info-text: var(--dk-info-text);
--sh-1: var(--dk-sh-1);
--sh-2: var(--dk-sh-2);
--sh-3: var(--dk-sh-3);
--sh-4: var(--dk-sh-4);
--sh-brand: var(--dk-sh-brand);
--sh-gold: var(--dk-sh-gold);
--sh-inset: var(--dk-sh-inset);
--surface-1: var(--dk-surface-1);
--surface-2: var(--dk-surface-2);
--surface-3: var(--dk-surface-3);
--surface-sunken: var(--dk-surface-sunken);
--glass-bg: var(--dk-glass-bg);
--glass-border: var(--dk-glass-border);
--hairline: var(--dk-hairline);
--grad-brand: var(--dk-grad-brand);
--grad-deep: var(--dk-grad-deep);
--grad-sunrise: var(--dk-grad-sunrise);
--sidebar-bg: var(--dk-sidebar-bg);
--focus-ring: var(--dk-focus-ring);
}
}
/* Smooth the switch without animating page load. */
:root.theme-ready body,
:root.theme-ready .c-card,
:root.theme-ready .c-panel,
:root.theme-ready .c-input,
:root.theme-ready .c-table th,
:root.theme-ready .c-table td {
transition: background-color var(--dur-3) var(--ease),
border-color var(--dur-3) var(--ease),
color var(--dur-3) var(--ease);
}
::selection { background: var(--brand-200); color: var(--text); }
/* ──────────────────────────────────────────────────────────
04-typography.css
────────────────────────────────────────────────────────── */
/* ============================================================
04-typography.css — Type scale, headings, prose, tables, code
============================================================ */
body {
font-family: var(--ff-body);
font-size: var(--fs-base);
font-weight: var(--fw-normal);
line-height: var(--lh-body);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .t-display {
font-family: var(--ff-heading);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
.t-display { font-size: var(--fs-5xl); font-weight: var(--fw-extra); line-height: var(--lh-display); }
h1, .t-h1 { font-size: var(--fs-4xl); }
h2, .t-h2 { font-size: var(--fs-3xl); }
h3, .t-h3 { font-size: var(--fs-2xl); }
h4, .t-h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h5, .t-h5 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h6, .t-h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
/* ── Supporting text roles ───────────────────────────────── */
.t-eyebrow {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--brand-600);
}
.t-lead { font-size: var(--fs-lg); color: var(--text-2); line-height: var(--lh-prose); }
.t-small { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }
.t-muted { color: var(--muted); }
.t-strong { font-weight: var(--fw-semibold); color: var(--text); }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.t-mono { font-family: var(--ff-mono); font-size: .92em; }
.t-balance { text-wrap: balance; }
.t-center { text-align: center; }
.t-clamp-1, .t-clamp-2, .t-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.t-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.t-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.t-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
/* ── Links ───────────────────────────────────────────────── */
a.c-link {
color: var(--brand-600);
font-weight: var(--fw-medium);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--brand-600) 35%, transparent);
text-underline-offset: 3px;
transition: text-decoration-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
a.c-link:hover { text-decoration-color: currentColor; }
/* ── Prose: long-form content (notes, chapter text, CMS body) ─ */
.c-prose {
max-width: var(--container-prose);
line-height: var(--lh-prose);
color: var(--text-2);
}
.c-prose > * + * { margin-top: var(--s-5); }
.c-prose h2 { margin-top: var(--s-12); }
.c-prose h3 { margin-top: var(--s-10); }
.c-prose h4 { margin-top: var(--s-8); }
.c-prose h2, .c-prose h3, .c-prose h4 { color: var(--text); }
.c-prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.c-prose strong { color: var(--text); font-weight: var(--fw-semibold); }
.c-prose ul, .c-prose ol { padding-left: var(--s-6); }
.c-prose li + li { margin-top: var(--s-2); }
.c-prose li::marker { color: var(--muted-2); }
.c-prose img { border-radius: var(--r-md); border: 1px solid var(--border); }
.c-prose hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-10); }
.c-prose blockquote {
border-left: 3px solid var(--gold-500);
padding: var(--s-1) 0 var(--s-1) var(--s-5);
color: var(--text-2);
font-style: italic;
}
/* Callouts for "common misconception" / "exam angle" blocks */
.c-callout {
border: 1px solid var(--border);
border-left: 3px solid var(--brand-600);
background: var(--bg2);
border-radius: var(--r-md);
padding: var(--s-4) var(--s-5);
}
.c-callout--warn { border-left-color: var(--warning); background: var(--warning-soft); }
.c-callout--tip { border-left-color: var(--gold-600); background: var(--gold-100); }
.c-callout__title {
font-family: var(--ff-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
margin-bottom: var(--s-2);
color: var(--text);
}
/* ── Code & formulae ─────────────────────────────────────── */
code, kbd, samp {
font-family: var(--ff-mono);
font-size: .9em;
}
:not(pre) > code {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: .12em .4em;
color: var(--text);
}
pre {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--s-4);
overflow-x: auto;
line-height: 1.55;
}
kbd {
background: var(--bg);
border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: var(--r-sm);
padding: .1em .45em;
font-size: .85em;
color: var(--text-2);
}
/* KaTeX rendered blocks may exceed the measure on mobile */
.c-math-block { overflow-x: auto; padding-block: var(--s-2); }
mark {
background: var(--gold-200);
color: var(--text);
padding: .05em .25em;
border-radius: var(--r-sm);
}
/* ── Table (prose context; component version in 06) ──────── */
.c-prose table { width: 100%; font-size: var(--fs-sm); }
.c-prose th, .c-prose td {
border-bottom: 1px solid var(--border);
padding: var(--s-3);
text-align: left;
}
.c-prose th { font-weight: var(--fw-semibold); color: var(--text); background: var(--bg2); }
/* ── Semantic text colours ───────────────────────────────── */
.t-danger { color: var(--danger); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-brand { color: var(--brand-600); }
/* ──────────────────────────────────────────────────────────
05-layout.css
────────────────────────────────────────────────────────── */
/* ============================================================
05-layout.css — Container, grid, primitives, section rhythm
Mobile-first. Every rule assumes 360px before it assumes 1440.
============================================================ */
/* ── Container ───────────────────────────────────────────── */
.l-container,
.l-container-wide,
.l-container-narrow {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter);
}
.l-container { max-width: var(--container); }
.l-container-wide { max-width: var(--container-wide); }
.l-container-narrow { max-width: var(--container-narrow); }
/* ── Section rhythm ──────────────────────────────────────── */
.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: var(--s-12); }
.l-section--alt { background: var(--bg2); }
.l-section--brand { background: var(--brand-900); color: var(--on-brand); }
.l-section--brand h1, .l-section--brand h2, .l-section--brand h3 { color: var(--on-brand); }
/* ── Stack: vertical rhythm between children ─────────────── */
.l-stack > * + * { margin-top: var(--s-4); }
.l-stack-sm > * + * { margin-top: var(--s-2); }
.l-stack-lg > * + * { margin-top: var(--s-6); }
.l-stack-xl > * + * { margin-top: var(--s-10); }
/* ── Cluster: horizontal group that wraps ────────────────── */
.l-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
align-items: center;
}
.l-cluster--sm { gap: var(--s-2); }
.l-cluster--lg { gap: var(--s-5); }
.l-cluster--between { justify-content: space-between; }
.l-cluster--end { justify-content: flex-end; }
.l-cluster--center { justify-content: center; }
.l-cluster--top { align-items: flex-start; }
/* ── Grid: auto-responsive card grids ────────────────────── */
.l-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px) {
.l-grid-2, .l-grid-3, .l-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.l-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Content-driven grid — never produces a too-narrow column */
.l-grid-auto {
display: grid;
gap: var(--s-6);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.l-grid-auto--sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
/* ── Sidebar: content + rail, collapses to one column ────── */
.l-sidebar { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
.l-sidebar { grid-template-columns: 280px minmax(0, 1fr); }
.l-sidebar--right { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* ── Split: two panes, stacks on mobile ──────────────────── */
.l-split { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
.l-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.l-split--wide-left { grid-template-columns: 1.3fr 1fr; }
.l-split--wide-right { grid-template-columns: 1fr 1.3fr; }
}
/* ── Section header: eyebrow + title + subtitle + action ─── */
.l-section-head {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--s-8);
}
.l-section-head__text { max-width: 62ch; }
.l-section-head__text > * + * { margin-top: var(--s-2); }
.l-section-head--center {
flex-direction: column;
align-items: center;
text-align: center;
}
.l-section-head--center .l-section-head__text { margin-inline: auto; }
/* ── Scroll containers: tables, diagrams, code (doctrine) ── */
.l-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* ── Aspect boxes ────────────────────────────────────────── */
.l-ratio-16-9 { aspect-ratio: 16 / 9; max-width: 100%; }
.l-ratio-4-5 { aspect-ratio: 4 / 5; max-width: 100%; }
.l-ratio-1-1 { aspect-ratio: 1 / 1; max-width: 100%; }
/* ── Sticky ──────────────────────────────────────────────── */
.l-sticky {
position: sticky;
top: calc(var(--header-h) + var(--s-4));
z-index: var(--z-sticky);
}
/* ── Divider ─────────────────────────────────────────────── */
.l-divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-8); }
/* ── Screen-reader only ──────────────────────────────────── */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Divider spacing variants */
.l-divider--tight { margin-block: var(--s-2); }
.l-divider--sm { margin-block: var(--s-3); }
/* Flash region at the top of a public page */
.l-flash-top { padding-top: var(--s-6); }
/* ════════════════════════════════════════════════════════════
EDITORIAL LAYOUT
------------------------------------------------------------
Uniform grids are what make a page read as a template. These
give a section a shape: one thing dominant, others supporting,
with deliberate asymmetry and overlap.
Use sparingly. Their value is contrast against the plain
grids, and a page where every band is asymmetric is just as
monotonous as one where none is.
════════════════════════════════════════════════════════════ */
/* ── Bento: a feature tile with satellites ─────────────────── */
.l-bento {
display: grid;
gap: var(--s-5);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .l-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.l-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
.l-bento > .is-feature { grid-column: span 2; grid-row: span 2; }
.l-bento > .is-wide { grid-column: span 2; }
.l-bento > .is-tall { grid-row: span 2; }
}
/* ── Split with an offset column ───────────────────────────── */
.l-split--offset { align-items: start; }
@media (min-width: 1024px) {
.l-split--offset { grid-template-columns: 1.05fr .95fr; }
.l-split--offset > :last-child { margin-top: var(--s-16); }
}
/* Wider media column, for a panel that carries artwork. */
@media (min-width: 1024px) {
.l-split--media { grid-template-columns: .9fr 1.1fr; }
.l-split--narrow { grid-template-columns: 1.25fr .75fr; }
}
/* ── Overlap: pull a panel up over the band above ──────────── */
.l-overlap { margin-top: calc(var(--s-16) * -1); position: relative; z-index: 2; }
.l-overlap--sm { margin-top: calc(var(--s-10) * -1); }
/* The band being overlapped needs room at the bottom, or the
panel covers its content instead of its padding. */
.l-section--overlapped { padding-bottom: calc(var(--section-y) + var(--s-16)); }
/* ── Full-bleed band inside a normal page flow ─────────────── */
.l-band { position: relative; isolation: isolate; overflow: hidden; }
.l-band--deep {
background: var(--grad-deep);
color: var(--on-brand);
}
.l-band--brand {
background: var(--grad-brand);
color: var(--on-brand);
}
.l-band--deep h1, .l-band--deep h2, .l-band--deep h3,
.l-band--brand h1, .l-band--brand h2, .l-band--brand h3 { color: var(--on-brand); }
.l-band--deep p, .l-band--brand p { color: var(--on-dark); }
.l-band--sunken { background: var(--surface-sunken); }
/* ── Edge-to-edge scrolling strip ──────────────────────────── */
/* For a row of cards that should run off the screen edge on mobile
rather than squeezing into the gutter. */
.l-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 78vw);
gap: var(--s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
scrollbar-width: none;
padding-bottom: var(--s-2);
}
.l-rail::-webkit-scrollbar { display: none; }
.l-rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) {
.l-rail {
grid-auto-flow: row;
grid-template-columns: repeat(var(--rail-cols, 3), minmax(0, 1fr));
grid-auto-columns: auto;
overflow: visible;
padding-inline: 0;
margin-inline: 0;
}
.l-rail--4 { --rail-cols: 4; }
}
/* ──────────────────────────────────────────────────────────
06-graphics.css
────────────────────────────────────────────────────────── */
/* ============================================================
06-graphics.css — decorative primitives and the icon system
------------------------------------------------------------
Everything in here is ORNAMENT. Nothing positions content,
nothing carries meaning, and every single rule may be deleted
without breaking a page — it would only look plainer.
That constraint is the point. Decoration that load-bears is
how a design system rots: someone needs a gradient, reaches
for the layout class that happens to have one, and now the
ornament cannot be changed. Keep the line hard.
Prefix: .g-* (graphics) — decorative only
.c-icon* — the icon component
Conventions
· Ornament is aria-hidden in the markup and pointer-events:none
here, so it never steals a click or reaches a screen reader.
· Every decorative colour derives from a token via color-mix,
so it follows the theme and the exam accent with no
dark-mode duplicate.
· Anything that animates is disabled under
prefers-reduced-motion at the bottom of this file.
============================================================ */
/* ════════════════════════════════════════════════════════════
ICON
════════════════════════════════════════════════════════════ */
/* Sized in em so an icon tracks the text it sits beside. Drop to
a fixed size only inside a tile, where the box sets the scale. */
.c-icon {
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
vertical-align: -.16em;
color: inherit;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Optical sizes for standalone use, where em would inherit something
irrelevant from a parent. */
.c-icon--xs { width: 14px; height: 14px; }
.c-icon--sm { width: 16px; height: 16px; }
.c-icon--md { width: 20px; height: 20px; }
.c-icon--lg { width: 24px; height: 24px; }
.c-icon--xl { width: 32px; height: 32px; }
.c-icon--2xl { width: 44px; height: 44px; stroke-width: 1.4; }
/* Heavier stroke reads better at small sizes on low-DPI screens. */
.c-icon--bold { stroke-width: 2.1; }
.c-icon--thin { stroke-width: 1.4; }
/* A filled icon — used only where a glyph is a mark rather than a
symbol: a rating star, a play button, a quote. */
.c-icon--filled { fill: currentColor; stroke: none; }
/* ── Icon tile ───────────────────────────────────────────────
The workhorse of feature lists: a soft rounded square holding
an icon, tinted from whatever accent is in scope. */
.c-icon-tile {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--tile-accent, var(--brand-600)) 12%, transparent);
color: var(--tile-accent, var(--brand-600));
flex-shrink: 0;
transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.c-icon-tile--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.c-icon-tile--lg { width: 60px; height: 60px; border-radius: var(--r-lg); }
.c-icon-tile--round { border-radius: var(--r-full); }
/* Solid variant for a dark surface or a strong call to action. */
.c-icon-tile--solid {
background: var(--tile-accent, var(--brand-600));
color: var(--on-brand);
}
/* Outlined variant — quieter, for long lists where 12 filled tiles
would be noise. */
.c-icon-tile--outline {
background: var(--card-bg);
border: 1px solid color-mix(in srgb, var(--tile-accent, var(--brand-600)) 28%, var(--border));
}
/* Tint a tile per exam or per subject by setting one variable on an
ancestor: style="--tile-accent: var(--exam-jee)". */
.c-icon-tile--gold { --tile-accent: var(--gold-600); }
.c-icon-tile--success { --tile-accent: var(--success); }
.c-icon-tile--info { --tile-accent: var(--info); }
.c-icon-tile--danger { --tile-accent: var(--danger); }
.c-icon-tile--exam { --tile-accent: var(--exam-accent, var(--brand-600)); }
/* Card hover lifts its tile a touch — cheap, and it makes a grid of
cards feel responsive rather than static. */
.c-card--link:hover .c-icon-tile { transform: translateY(-2px); }
/* ════════════════════════════════════════════════════════════
DECORATIVE LAYERS
Applied to an empty, aria-hidden element inside a positioned
parent. They fill it and sit behind content.
════════════════════════════════════════════════════════════ */
/* The positioning context. Put this on the section. */
.g-canvas { position: relative; isolation: isolate; }
.g-canvas > .l-container,
.g-canvas > .l-container-wide,
.g-canvas > .l-container-narrow { position: relative; z-index: 1; }
/* Shared behaviour for every backdrop layer. */
.g-mesh, .g-grid, .g-dots, .g-rays, .g-blob, .g-orb, .g-pattern {
position: absolute;
pointer-events: none;
z-index: 0;
}
/* ── Mesh: soft overlapping colour washes. The default page
backdrop — warm gold low-right, cool brand high-left. ── */
.g-mesh {
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 8% 6%,
color-mix(in srgb, var(--brand-400) 20%, transparent), transparent 70%),
radial-gradient(ellipse 50% 45% at 92% 78%,
color-mix(in srgb, var(--gold-500) 16%, transparent), transparent 70%),
radial-gradient(ellipse 70% 60% at 50% 110%,
color-mix(in srgb, var(--brand-600) 10%, transparent), transparent 70%);
}
.g-mesh--soft { opacity: .55; }
.g-mesh--strong { opacity: 1; }
/* Exam-tinted mesh: inherits --exam-accent from [data-exam]. */
.g-mesh--exam {
background:
radial-gradient(ellipse 60% 50% at 10% 4%,
color-mix(in srgb, var(--exam-accent, var(--brand-500)) 22%, transparent), transparent 70%),
radial-gradient(ellipse 55% 50% at 90% 82%,
color-mix(in srgb, var(--exam-accent, var(--brand-500)) 12%, transparent), transparent 70%);
}
/* ── Grid: engineering-drawing lines, faded at the edges.
Reads as "technical" without a single literal. ── */
.g-grid {
inset: 0;
--g-cell: 52px;
background-image:
linear-gradient(color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
background-size: var(--g-cell) var(--g-cell);
mask-image: radial-gradient(ellipse 70% 65% at 50% 38%, rgba(0, 0, 0, .75), transparent 72%);
}
.g-grid--tight { --g-cell: 28px; }
.g-grid--wide { --g-cell: 88px; }
/* Fades from the top edge instead of the centre — for a band that
sits directly under the header. */
.g-grid--top { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%); }
/* ── Dots: a quieter field than the grid. Good behind portraits
and anywhere the grid would fight with a photo. ── */
.g-dots {
inset: 0;
--g-cell: 22px;
background-image: radial-gradient(
color-mix(in srgb, var(--muted-2) 55%, transparent) 1.2px, transparent 1.2px);
background-size: var(--g-cell) var(--g-cell);
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0, 0, 0, .6), transparent 75%);
}
/* ── Rays: a slow conic sweep. One per page, maximum — it is the
loudest thing in this file. ── */
.g-rays {
inset: -30% -10%;
background: conic-gradient(from 200deg at 50% 50%,
transparent 0deg,
color-mix(in srgb, var(--brand-400) 14%, transparent) 40deg,
transparent 80deg,
color-mix(in srgb, var(--gold-500) 12%, transparent) 150deg,
transparent 200deg,
color-mix(in srgb, var(--brand-500) 10%, transparent) 290deg,
transparent 340deg);
mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .55), transparent 65%);
animation: g-turn 90s linear infinite;
}
@keyframes g-turn { to { transform: rotate(360deg); } }
/* ── Blob / orb: blurred colour mass. Place with inline
positioning on the element, since every use differs. ── */
.g-blob {
width: 30rem;
height: 30rem;
border-radius: 45% 55% 62% 38% / 52% 44% 56% 48%;
background: color-mix(in srgb, var(--blob-accent, var(--brand-500)) 28%, transparent);
filter: blur(72px);
opacity: .5;
animation: g-drift 26s var(--ease) infinite;
}
.g-blob--gold { --blob-accent: var(--gold-500); }
.g-blob--exam { --blob-accent: var(--exam-accent, var(--brand-500)); }
.g-blob--sm { width: 18rem; height: 18rem; filter: blur(54px); }
@keyframes g-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(3%, -4%, 0) scale(1.06); }
66% { transform: translate3d(-3%, 3%, 0) scale(.96); }
}
.g-orb {
border-radius: var(--r-full);
background: radial-gradient(circle at 34% 30%,
color-mix(in srgb, var(--blob-accent, var(--brand-400)) 46%, transparent),
transparent 68%);
filter: blur(8px);
}
/* ── Patterns: repeating marks for a band or a card back. ── */
.g-pattern { inset: 0; opacity: .5; }
.g-pattern--diagonal {
background-image: repeating-linear-gradient(
-45deg,
color-mix(in srgb, var(--border) 85%, transparent) 0 1px,
transparent 1px 11px);
}
.g-pattern--cross {
--g-cell: 26px;
background-image:
linear-gradient(color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px);
background-size: var(--g-cell) var(--g-cell);
background-position: center;
mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .5), transparent 70%);
}
/* For the dark brand band, where --border would vanish. */
.g-pattern--on-dark {
background-image: repeating-linear-gradient(
-45deg,
var(--on-dark-line) 0 1px,
transparent 1px 13px);
opacity: 1;
}
/* ════════════════════════════════════════════════════════════
SURFACE FINISHES
Applied to a real element, not a backdrop layer.
════════════════════════════════════════════════════════════ */
/* A one-pixel highlight along the top edge. The single cheapest
thing that makes a dark panel look lit rather than flat. */
.g-sheen { position: relative; }
.g-sheen::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--white) 26%, transparent) 22%,
color-mix(in srgb, var(--white) 26%, transparent) 78%,
transparent);
pointer-events: none;
}
/* Gradient hairline — a divider that fades out at both ends rather
than butting into the container edge. */
.g-hairline {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
margin-block: var(--s-10);
}
.g-hairline--on-dark {
background: linear-gradient(90deg, transparent, var(--on-dark-line) 18%, var(--on-dark-line) 82%, transparent);
}
/* Eyebrow with a short rule beside it. */
.g-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.g-eyebrow::before {
content: "";
width: 28px;
height: 2px;
border-radius: var(--r-full);
background: var(--eyebrow-accent, var(--gold-500));
flex-shrink: 0;
}
.g-eyebrow--center { justify-content: center; }
.g-eyebrow--center::after {
content: "";
width: 28px;
height: 2px;
border-radius: var(--r-full);
background: var(--eyebrow-accent, var(--gold-500));
flex-shrink: 0;
}
/* Accent swash under one word of a headline. Wrap the word:
structure */
.g-underline {
position: relative;
display: inline-block;
white-space: nowrap;
}
.g-underline::after {
content: "";
position: absolute;
left: -.06em;
right: -.06em;
bottom: .04em;
height: .32em;
border-radius: var(--r-full);
background: color-mix(in srgb, var(--gold-500) 42%, transparent);
z-index: -1;
}
.g-underline--brand::after { background: color-mix(in srgb, var(--brand-400) 36%, transparent); }
/* Brand gradient across display text. Falls back to a solid colour
where background-clip:text is unsupported. */
.g-gradient-text {
color: var(--brand-600);
background: linear-gradient(112deg, var(--brand-600), var(--brand-400) 52%, var(--gold-600));
-webkit-background-clip: text;
background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.g-gradient-text { color: transparent; }
}
/* Ornamental corner brackets — a certificate cue. Use once, on
something that deserves it. */
.g-corner { position: relative; }
.g-corner::before,
.g-corner::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border: 2px solid color-mix(in srgb, var(--gold-500) 70%, transparent);
pointer-events: none;
}
.g-corner::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-sm); }
.g-corner::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-sm); }
/* Concentric rings behind a focal element — a stat, a seal. */
.g-rings {
position: absolute;
inset: 50% auto auto 50%;
width: 260px;
height: 260px;
transform: translate(-50%, -50%);
border-radius: var(--r-full);
border: 1px solid color-mix(in srgb, var(--brand-400) 26%, transparent);
pointer-events: none;
}
.g-rings::before,
.g-rings::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
border-radius: var(--r-full);
border: 1px solid color-mix(in srgb, var(--brand-400) 18%, transparent);
}
.g-rings::before { width: 150%; height: 150%; }
.g-rings::after { width: 210%; height: 210%; border-color: color-mix(in srgb, var(--brand-400) 10%, transparent); }
/* Hover lift, for anything that is not already a .c-card--link. */
.g-lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.g-lift:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
/* ════════════════════════════════════════════════════════════
REDUCED MOTION
One place, so adding an animation above cannot forget it.
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.g-rays,
.g-blob { animation: none; }
.g-lift:hover,
.c-card--link:hover .c-icon-tile { transform: none; }
}
/* ════════════════════════════════════════════════════════════
SURFACE TREATMENTS (added with the editorial layer)
════════════════════════════════════════════════════════════ */
/* ── Glass ─────────────────────────────────────────────────── */
/* For the header and anything floating over scrolling content.
The solid fallback comes first so a browser without backdrop
support gets an opaque panel rather than unreadable text. */
.g-glass {
background: var(--surface-1);
border-bottom: 1px solid var(--hairline);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.g-glass {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
}
/* ── Gradient border ───────────────────────────────────────── */
/* A 1px gradient edge, drawn with two backgrounds clipped to the
padding and border boxes. Works on any radius, unlike a
border-image, and leaves the fill free for the card's own colour. */
.g-edge {
position: relative;
background:
linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
var(--edge-grad, var(--grad-brand)) border-box;
border: 1px solid transparent;
}
.g-edge--gold { --edge-grad: var(--grad-gold); }
.g-edge--soft {
background:
linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(135deg,
color-mix(in srgb, var(--brand-400) 55%, transparent),
color-mix(in srgb, var(--gold-500) 40%, transparent)) border-box;
}
/* ── Spotlight ─────────────────────────────────────────────── */
.g-spot {
position: absolute;
inset: auto;
width: 40rem;
height: 40rem;
border-radius: var(--r-full);
background: radial-gradient(circle at 50% 50%,
color-mix(in srgb, var(--spot-accent, var(--brand-400)) 26%, transparent) 0%,
transparent 62%);
pointer-events: none;
filter: blur(4px);
}
.g-spot--gold { --spot-accent: var(--gold-500); }
.g-spot--exam { --spot-accent: var(--exam-accent, var(--brand-400)); }
/* ── Shine on hover ────────────────────────────────────────── */
/* A highlight that sweeps once across a card. Subtle enough to read as
material rather than as an animation. */
.g-shine { position: relative; overflow: hidden; }
.g-shine::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg,
transparent 38%,
color-mix(in srgb, var(--white) 22%, transparent) 48%,
transparent 58%);
transform: translateX(-120%);
transition: transform 700ms var(--ease-out);
pointer-events: none;
}
.g-shine:hover::after { transform: translateX(120%); }
/* ── Section dividers ──────────────────────────────────────── */
/* A curved transition between two bands, drawn in CSS so it takes the
colour of whatever it is placed against. */
.g-arc {
position: absolute;
left: 0;
right: 0;
height: 72px;
background: var(--arc-fill, var(--bg));
pointer-events: none;
}
.g-arc--top { top: -1px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.g-arc--bottom { bottom: -1px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.g-arc--alt { --arc-fill: var(--bg2); }
/* Angled cut, for a harder transition than the arc. */
.g-slant {
position: absolute;
left: 0;
right: 0;
height: 80px;
background: var(--arc-fill, var(--bg));
pointer-events: none;
}
.g-slant--bottom { bottom: -1px; clip-path: polygon(0 100%, 100% 22%, 100% 100%); }
.g-slant--top { top: -1px; clip-path: polygon(0 0, 100% 0, 100% 78%); }
/* ── Reveal on scroll ──────────────────────────────────────── */
/* ui.js adds .is-hidden-until-seen itself, so a page with the script
blocked never hides anything. Nothing here is applied by markup. */
.is-hidden-until-seen {
opacity: 0;
transform: translateY(18px);
transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
will-change: opacity, transform;
}
.is-seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.is-hidden-until-seen { opacity: 1; transform: none; transition: none; }
.g-shine::after { display: none; }
}
/* ──────────────────────────────────────────────────────────
07-controls.css
────────────────────────────────────────────────────────── */
/* ============================================================
07-controls.css — things the user operates
------------------------------------------------------------
Buttons, form fields, badges, chips, avatars, progress and\n the theme toggle. If it takes input, shows state, or is\n clicked in isolation, it belongs here.\n\n Everything here is a leaf: it never lays out other\n components, and it carries no page-level knowledge.
============================================================ */
/* ════════════════════════════════════════════════════════════
BUTTON
════════════════════════════════════════════════════════════ */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-5);
min-height: 44px; /* a11y: touch target */
border: 1px solid transparent;
border-radius: var(--r-md);
font-family: var(--ff-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
color var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
transform var(--dur-1) var(--ease);
}
.c-btn:active:not(:disabled) { transform: translateY(1px); }
.c-btn:disabled, .c-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.c-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.c-btn--primary {
background: var(--brand-600);
color: var(--on-brand);
box-shadow: var(--sh-1);
}
.c-btn--primary:hover:not(:disabled) { background: var(--brand-700); box-shadow: var(--sh-brand); }
.c-btn--secondary {
background: var(--card-bg);
border-color: var(--border-strong);
color: var(--text);
}
.c-btn--secondary:hover:not(:disabled) { border-color: var(--brand-600); color: var(--brand-600); }
.c-btn--gold {
background: var(--gold-500);
color: var(--brand-900);
box-shadow: var(--sh-1);
}
.c-btn--gold:hover:not(:disabled) { background: var(--gold-400); }
.c-btn--ghost { background: transparent; color: var(--text-2); }
.c-btn--ghost:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
.c-btn--danger { background: var(--danger); color: var(--on-brand); }
.c-btn--danger:hover:not(:disabled) { filter: brightness(.92); }
.c-btn--link {
background: none; padding-inline: 0; min-height: auto;
color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px;
}
.c-btn--sm { padding: var(--s-2) var(--s-3); min-height: 36px; font-size: var(--fs-xs); }
.c-btn--lg { padding: var(--s-4) var(--s-8); min-height: 52px; font-size: var(--fs-base); }
.c-btn--block { width: 100%; }
.c-btn--icon { padding: var(--s-3); min-width: 44px; }
.c-btn--icon.c-btn--sm { padding: var(--s-2); min-width: 36px; }
/* Loading state — content hidden, spinner shown, width preserved */
/* pointer-events:none blocks :hover, so no !important is needed here */
.c-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.c-btn.is-loading::after {
content: "";
position: absolute;
width: 16px; height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: var(--r-full);
color: var(--on-brand);
animation: c-spin .6s linear infinite;
}
.c-btn--secondary.is-loading::after,
.c-btn--ghost.is-loading::after { color: var(--text); }
@keyframes c-spin { to { transform: rotate(360deg); } }
/* ════════════════════════════════════════════════════════════
FORM
════════════════════════════════════════════════════════════ */
.c-field { display: block; }
.c-field + .c-field { margin-top: var(--s-5); }
.c-label {
display: block;
margin-bottom: var(--s-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
}
.c-label__req { color: var(--danger); margin-left: 2px; }
.c-input, .c-select, .c-textarea {
width: 100%;
padding: var(--s-3) var(--s-4);
min-height: 44px;
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
color: var(--text);
font-size: var(--fs-base);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.c-input::placeholder, .c-textarea::placeholder { color: var(--muted-2); }
.c-input:hover, .c-select:hover, .c-textarea:hover { border-color: var(--muted); }
.c-input:focus, .c-select:focus, .c-textarea:focus {
border-color: var(--brand-500);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
outline: none;
}
.c-input:disabled, .c-select:disabled, .c-textarea:disabled {
background: var(--bg3); color: var(--muted); cursor: not-allowed;
}
.c-textarea { min-height: 110px; line-height: var(--lh-body); }
.c-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--s-4) center;
padding-right: var(--s-10);
}
.c-hint { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
.c-error { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); }
.c-field.has-error .c-input,
.c-field.has-error .c-select,
.c-field.has-error .c-textarea { border-color: var(--danger); }
.c-field.has-error .c-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
/* Input with leading icon / addon */
.c-input-group { position: relative; display: flex; align-items: center; }
.c-input-group__icon {
position: absolute; left: var(--s-4);
width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.c-input-group__icon ~ .c-input { padding-left: var(--s-10); }
/* Checkbox & radio */
.c-check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.c-check input[type="checkbox"], .c-check input[type="radio"] {
width: 20px; height: 20px; margin: 0; flex-shrink: 0;
accent-color: var(--brand-600);
cursor: pointer;
}
.c-check__label { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
/* Switch */
.c-switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.c-switch__track {
width: 44px; height: 24px; flex-shrink: 0;
background: var(--border-strong);
border-radius: var(--r-full);
position: relative;
transition: background-color var(--dur-2) var(--ease);
}
.c-switch__track::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; background: var(--white);
border-radius: var(--r-full); box-shadow: var(--sh-1);
transition: transform var(--dur-2) var(--ease);
}
.c-switch input:checked + .c-switch__track { background: var(--brand-600); }
.c-switch input:checked + .c-switch__track::after { transform: translateX(20px); }
.c-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-switch input:focus-visible + .c-switch__track {
outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset);
}
/* OTP input row */
.c-otp { display: flex; gap: var(--s-3); justify-content: center; }
.c-otp__box {
width: 48px; height: 56px;
text-align: center;
font-family: var(--ff-heading);
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--card-bg);
color: var(--text);
}
.c-otp__box:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent); outline: none; }
/* ════════════════════════════════════════════════════════════
BADGE · CHIP · PILL
════════════════════════════════════════════════════════════ */
.c-badge {
display: inline-flex; align-items: center; gap: var(--s-1);
padding: var(--s-1) var(--s-3);
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1.5;
background: var(--bg3);
color: var(--text-2);
white-space: nowrap;
}
.c-badge--brand { background: var(--brand-100); color: var(--brand-700); }
.c-badge--gold { background: var(--gold-100); color: var(--gold-700); }
.c-badge--success { background: var(--success-soft); color: var(--success-text); }
.c-badge--warning { background: var(--warning-soft); color: var(--warning-text); }
.c-badge--danger { background: var(--danger-soft); color: var(--danger-text); }
.c-badge--info { background: var(--info-soft); color: var(--info-text); }
.c-badge--exam { background: var(--exam-soft, var(--brand-100)); color: var(--exam-accent, var(--brand-700)); }
.c-badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); }
/* Status dot — never colour alone (a11y); pair with text */
.c-dot { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; }
/* Filter chip */
.c-chip {
display: inline-flex; align-items: center; gap: var(--s-2);
padding: var(--s-2) var(--s-4);
min-height: 36px;
border: 1px solid var(--border-strong);
border-radius: var(--r-full);
background: var(--card-bg);
color: var(--text-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: all var(--dur-2) var(--ease);
}
.c-chip:hover { border-color: var(--brand-400); color: var(--brand-600); }
.c-chip.is-active {
background: var(--brand-600);
border-color: var(--brand-600);
color: var(--on-brand);
}
.c-chip__count { font-variant-numeric: tabular-nums; opacity: .7; font-size: var(--fs-xs); }
/* ════════════════════════════════════════════════════════════
AVATAR
════════════════════════════════════════════════════════════ */
.c-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--r-full);
background: var(--brand-100);
color: var(--brand-700);
font-family: var(--ff-heading);
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
overflow: hidden;
flex-shrink: 0;
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.c-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.c-avatar--xl { width: 88px; height: 88px; font-size: var(--fs-2xl); }
/* Faculty portrait — 4:5 with duotone hover (doctrine 02 §3) */
.c-portrait {
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
overflow: hidden;
background: var(--bg3);
position: relative;
}
.c-portrait img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-3) var(--ease), filter var(--dur-3) var(--ease);
}
.c-card--link:hover .c-portrait img { transform: scale(1.03); }
/* ════════════════════════════════════════════════════════════
PROGRESS
════════════════════════════════════════════════════════════ */
.c-progress {
height: 8px;
background: var(--bg3);
border-radius: var(--r-full);
overflow: hidden;
}
.c-progress__bar {
height: 100%;
background: var(--brand-600);
border-radius: var(--r-full);
transition: width var(--dur-3) var(--ease);
}
.c-progress--success .c-progress__bar { background: var(--success); }
.c-progress--gold .c-progress__bar { background: var(--gold-500); }
.c-progress--sm { height: 5px; }
.c-ring { --ring-size: 72px; --ring-pct: 0; width: var(--ring-size); height: var(--ring-size); position: relative; flex-shrink: 0; }
.c-ring__svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.c-ring__track { stroke: var(--bg3); }
.c-ring__fill { stroke: var(--brand-600); transition: stroke-dashoffset var(--dur-3) var(--ease); }
.c-ring__label {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-heading); font-weight: var(--fw-bold);
font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
color: var(--text);
}
/* ════════════════════════════════════════════════════════════
THEME TOGGLE
════════════════════════════════════════════════════════════ */
.c-theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--muted);
background: transparent;
cursor: pointer;
transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.c-theme-btn:hover { color: var(--brand-600); border-color: var(--brand-400); }
.c-theme-btn__sun { display: none; }
.c-theme-btn__moon { display: block; }
:root[data-theme="dark"] .c-theme-btn__sun { display: block; }
:root[data-theme="dark"] .c-theme-btn__moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .c-theme-btn__sun { display: block; }
:root:not([data-theme="light"]) .c-theme-btn__moon { display: none; }
}
/* ════════════════════════════════════════════════════════════
LOGO
------------------------------------------------------------
The brand lockup, inlined by so it follows the theme.
public/brand/*.svg holds the same artwork as standalone files
for anything outside the app.
════════════════════════════════════════════════════════════ */
.c-logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.c-logo__plate {
display: grid;
place-items: center;
width: var(--logo-size, 40px);
height: var(--logo-size, 40px);
border-radius: calc(var(--logo-size, 40px) * .235); /* 15/64 of the grid */
background: var(--grad-brand);
box-shadow: var(--sh-brand);
color: var(--on-brand);
flex-shrink: 0;
}
.c-logo__plate svg { width: 100%; height: 100%; display: block; }
.c-logo__dot { fill: var(--gold-500); }
.c-logo__words { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.c-logo__name {
font-family: var(--ff-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-extra);
letter-spacing: var(--tracking-tight);
color: var(--text);
white-space: nowrap;
}
.c-logo__tag {
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
@media (max-width: 480px) { .c-logo__tag { display: none; } }
/* On a dark surface the plate would disappear into the background, so
it drops its fill and the wordmark flips. */
.c-logo--inverse .c-logo__plate {
background: rgba(255, 255, 255, .10);
box-shadow: none;
}
.c-logo--inverse .c-logo__name { color: var(--on-brand); }
.c-logo--inverse .c-logo__tag { color: var(--on-dark-muted); }
/* ════════════════════════════════════════════════════════════
PILL — a small labelled status, used above a hero headline
════════════════════════════════════════════════════════════ */
.c-pill {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-4);
border-radius: var(--r-full);
border: 1px solid var(--border);
background: var(--surface-1);
box-shadow: var(--sh-1);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--text-2);
margin: 0;
}
.c-pill__dot {
width: 7px;
height: 7px;
border-radius: var(--r-full);
background: var(--success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
flex-shrink: 0;
}
/* ──────────────────────────────────────────────────────────
08-surfaces.css
────────────────────────────────────────────────────────── */
/* ============================================================
08-surfaces.css — things that hold other things
------------------------------------------------------------
Cards, panels, alerts, tables, accordions, modals, toasts,\n empty states and the freemium gate.\n\n A surface has an inside. That is the test for whether a new\n component belongs in this file rather than 07-controls.css.
============================================================ */
/* ════════════════════════════════════════════════════════════
CARD & PANEL
════════════════════════════════════════════════════════════ */
.c-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.c-card--flat { box-shadow: none; }
.c-card--pad { padding: var(--s-6); }
.c-card__body { padding: var(--s-6); flex: 1; }
.c-card__head {
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.c-card__foot {
padding: var(--s-4) var(--s-6);
border-top: 1px solid var(--border);
background: var(--bg2);
}
.c-card__media { position: relative; background: var(--bg3); }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Interactive card — the whole card is the link */
.c-card--link { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.c-card--link:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.c-card--link:focus-within { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* Exam colour-coding: a 3px top border, never a page background (doctrine 02 §3) */
.c-card--exam { border-top: 3px solid var(--exam-accent, var(--brand-600)); }
[data-exam="caet"] { --exam-accent: var(--exam-caet); --exam-soft: var(--exam-caet-soft); }
[data-exam="jee"] { --exam-accent: var(--exam-jee); --exam-soft: var(--exam-jee-soft); }
[data-exam="neet"] { --exam-accent: var(--exam-neet); --exam-soft: var(--exam-neet-soft); }
.c-panel {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-6);
}
/* A simple row in a card list */
.c-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
/* ════════════════════════════════════════════════════════════
ALERT
════════════════════════════════════════════════════════════ */
.c-alert {
display: flex; gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border: 1px solid transparent;
border-radius: var(--r-md);
font-size: var(--fs-sm);
line-height: 1.55;
}
.c-alert__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.c-alert__title { font-weight: var(--fw-semibold); margin-bottom: var(--s-1); }
.c-alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info-text); }
.c-alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success-text); }
.c-alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning-text); }
.c-alert--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger-text); }
/* Alert with a bullet list */
.c-alert__list { margin: var(--s-2) 0 0; padding-left: var(--s-5); list-style: disc; }
/* ════════════════════════════════════════════════════════════
TABLE
════════════════════════════════════════════════════════════ */
.c-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); }
.c-table { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.c-table th {
position: sticky; top: 0; z-index: 1;
background: var(--bg2);
padding: var(--s-3) var(--s-4);
text-align: left;
font-family: var(--ff-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.c-table td {
padding: var(--s-4);
border-bottom: 1px solid var(--border);
color: var(--text-2);
vertical-align: middle;
}
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table tbody tr { transition: background-color var(--dur-1) var(--ease); }
.c-table tbody tr:hover { background: var(--bg2); }
.c-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.c-table__sort { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; color: inherit; }
.c-table__sort:hover { color: var(--brand-600); }
/* Table embedded flush inside a card body */
.c-table-wrap--flush { border: 0; border-radius: 0; }
/* ════════════════════════════════════════════════════════════
ACCORDION (FAQ, syllabus tree)
════════════════════════════════════════════════════════════ */
.c-accordion { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card-bg); }
.c-accordion__item + .c-accordion__item { border-top: 1px solid var(--border); }
.c-accordion__trigger {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: var(--s-4) var(--s-5);
text-align: left;
font-family: var(--ff-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-base);
color: var(--text);
cursor: pointer;
transition: background-color var(--dur-2) var(--ease);
}
.c-accordion__trigger:hover { background: var(--bg2); }
.c-accordion__chev {
width: 18px; height: 18px; flex-shrink: 0; color: var(--muted);
transition: transform var(--dur-2) var(--ease);
}
.c-accordion__item.is-open .c-accordion__chev { transform: rotate(180deg); }
.c-accordion__body { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-prose); }
/* ════════════════════════════════════════════════════════════
MODAL & DRAWER
════════════════════════════════════════════════════════════ */
.c-overlay {
position: fixed; inset: 0;
background: var(--overlay);
backdrop-filter: blur(2px);
z-index: var(--z-modal);
display: flex; align-items: center; justify-content: center;
padding: var(--s-4);
}
.c-modal {
background: var(--card-bg);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
width: 100%;
max-width: 520px;
max-height: calc(100dvh - var(--s-8));
display: flex; flex-direction: column;
overflow: hidden;
}
.c-modal--lg { max-width: 800px; }
.c-modal__head {
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.c-modal__body { padding: var(--s-6); overflow-y: auto; }
.c-modal__foot {
padding: var(--s-4) var(--s-6);
border-top: 1px solid var(--border);
background: var(--bg2);
display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap;
}
.c-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(420px, 100vw);
background: var(--card-bg);
box-shadow: var(--sh-3);
z-index: var(--z-drawer);
display: flex; flex-direction: column;
}
/* ════════════════════════════════════════════════════════════
EMPTY STATE · SKELETON
════════════════════════════════════════════════════════════ */
.c-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--s-4);
padding: var(--s-16) var(--s-6);
color: var(--muted);
}
.c-empty__art { width: 120px; height: 120px; opacity: .6; }
.c-empty__title { font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.c-empty__text { max-width: 42ch; font-size: var(--fs-sm); }
.c-skeleton {
background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
background-size: 200% 100%;
animation: c-shimmer 1.4s infinite linear;
border-radius: var(--r-sm);
}
.c-skeleton--text { height: 12px; margin-block: 6px; }
.c-skeleton--title { height: 20px; width: 60%; }
.c-skeleton--card { height: 180px; border-radius: var(--r-lg); }
@keyframes c-shimmer { to { background-position: -200% 0; } }
/* Empty state inside a card, not a full page */
.c-empty--compact { padding-block: var(--s-8); }
/* ════════════════════════════════════════════════════════════
TOOLTIP · TOAST
════════════════════════════════════════════════════════════ */
.c-tooltip { position: relative; display: inline-flex; }
.c-tooltip__bubble {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
padding: var(--s-2) var(--s-3);
background: var(--brand-900);
color: var(--white);
font-size: var(--fs-xs);
border-radius: var(--r-sm);
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity var(--dur-2) var(--ease);
z-index: var(--z-sticky);
}
.c-tooltip:hover .c-tooltip__bubble, .c-tooltip:focus-within .c-tooltip__bubble { opacity: 1; }
.c-toast-region { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-3); }
.c-toast {
display: flex; align-items: flex-start; gap: var(--s-3);
min-width: 280px; max-width: 400px;
padding: var(--s-4);
background: var(--card-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--brand-600);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
font-size: var(--fs-sm);
}
.c-toast--success { border-left-color: var(--success); }
.c-toast--danger { border-left-color: var(--danger); }
/* ════════════════════════════════════════════════════════════
GATE (freemium lock overlay)
════════════════════════════════════════════════════════════ */
.c-gate {
position: relative;
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
background: var(--bg2);
padding: var(--s-10) var(--s-6);
text-align: center;
}
.c-gate__icon { width: 40px; height: 40px; margin: 0 auto var(--s-4); color: var(--gold-600); }
.c-gate__title { font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: var(--s-2); }
.c-gate__text { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; margin: 0 auto var(--s-5); }
/* Fade-out preview above a gate */
.c-preview-fade { position: relative; max-height: 320px; overflow: hidden; }
.c-preview-fade::after {
content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 140px;
background: linear-gradient(to bottom, transparent, var(--bg));
pointer-events: none;
}
/* ──────────────────────────────────────────────────────────
09-navigation.css
────────────────────────────────────────────────────────── */
/* ============================================================
09-navigation.css — moving between things
------------------------------------------------------------
Site header, main nav and mega menu, mobile nav, footer,\n breadcrumbs, pagination, tabs, the syllabus tree, and the\n portal shell (sidebar + topbar) shared by the student and\n admin areas.\n\n The tree is here rather than in 08-surfaces.css because on\n this platform it is primarily how a student navigates a\n syllabus, not a container.
============================================================ */
/* ════════════════════════════════════════════════════════════
TABS
════════════════════════════════════════════════════════════ */
.c-tabs {
display: flex;
gap: var(--s-1);
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
}
.c-tabs::-webkit-scrollbar { display: none; }
.c-tab {
padding: var(--s-3) var(--s-4);
border-bottom: 2px solid transparent;
color: var(--muted);
font-family: var(--ff-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
white-space: nowrap;
cursor: pointer;
transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.c-tab:hover { color: var(--text); }
.c-tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
/* Pill tab variant (settings screens) */
.c-tabs--pill { border-bottom: 0; gap: var(--s-2); }
.c-tabs--pill .c-tab { border: 1px solid var(--border); border-radius: var(--r-full); }
.c-tabs--pill .c-tab.is-active { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-brand); }
/* ════════════════════════════════════════════════════════════
BREADCRUMB · PAGINATION
════════════════════════════════════════════════════════════ */
.c-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
.c-breadcrumb a:hover { color: var(--brand-600); }
.c-breadcrumb__sep { color: var(--muted-2); }
.c-breadcrumb [aria-current="page"] { color: var(--text-2); font-weight: var(--fw-medium); }
.c-pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.c-page-link {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding-inline: var(--s-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--card-bg);
color: var(--text-2);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
transition: all var(--dur-2) var(--ease);
}
.c-page-link:hover { border-color: var(--brand-400); color: var(--brand-600); }
.c-page-link.is-active { background: var(--brand-600); border-color: var(--brand-600); color: var(--on-brand); font-weight: var(--fw-semibold); }
.c-page-link.is-disabled { opacity: .45; pointer-events: none; }
/* ════════════════════════════════════════════════════════════
SYLLABUS TREE (the signature academic component)
════════════════════════════════════════════════════════════ */
.c-tree { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; }
.c-tree__node { border-bottom: 1px solid var(--border); }
.c-tree__node:last-child { border-bottom: 0; }
.c-tree__row {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
padding-left: calc(var(--s-4) + (var(--depth, 0) * var(--s-5)));
cursor: pointer;
transition: background-color var(--dur-1) var(--ease);
}
.c-tree__row:hover { background: var(--bg2); }
.c-tree__chev { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; transition: transform var(--dur-2) var(--ease); }
.c-tree__node.is-open > .c-tree__row .c-tree__chev { transform: rotate(90deg); }
.c-tree__title { flex: 1; font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-medium); }
.c-tree__meta { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.c-tree__node[data-depth="0"] > .c-tree__row { background: var(--bg2); font-family: var(--ff-heading); }
.c-tree__node[data-depth="0"] > .c-tree__row .c-tree__title { font-weight: var(--fw-semibold); }
/* Locked node — freemium gate */
.c-tree__row.is-locked { color: var(--muted-2); }
.c-tree__row.is-locked .c-tree__title { color: var(--muted); }
/* ════════════════════════════════════════════════════════════
PAGE-LEVEL SHELLS
Header, footer, sidebar and topbar appear on every page of
their respective panel, so by Iron Rule 3 they live here.
════════════════════════════════════════════════════════════ */
/* ── Public site header ──────────────────────────────────── */
.c-site-header {
position: sticky; top: 0; z-index: var(--z-header);
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.c-site-header__bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); height: var(--header-h);
}
.c-site-header__brand { display: inline-flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.c-site-header__mark {
width: 34px; height: 34px; border-radius: var(--r-md);
background: var(--brand-700); color: var(--on-brand);
display: grid; place-items: center;
font-family: var(--ff-heading); font-weight: var(--fw-extra); font-size: 13px;
}
.c-site-header__name {
font-family: var(--ff-heading); font-weight: var(--fw-extra);
letter-spacing: var(--tracking-tight); color: var(--text);
}
.c-site-header__actions { display: flex; align-items: center; gap: var(--s-2); }
.c-site-nav { display: flex; align-items: center; gap: var(--s-1); }
.c-site-nav__item { position: relative; }
.c-site-nav__link {
display: inline-flex; align-items: center; gap: var(--s-1);
padding: var(--s-2) var(--s-3);
border-radius: var(--r-md);
font-family: var(--ff-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
color: var(--text-2); cursor: pointer;
transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.c-site-nav__link:hover { color: var(--brand-600); background: var(--bg2); }
/* Mega menu — exam-first navigation */
.c-mega {
position: absolute; top: calc(100% + var(--s-2)); left: 0;
min-width: 320px; padding: var(--s-3);
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.c-site-nav__item:hover > .c-mega,
.c-site-nav__item.is-open > .c-mega,
.c-site-nav__item:focus-within > .c-mega {
opacity: 1; visibility: visible; transform: translateY(0);
}
.c-mega__item {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3);
border-radius: var(--r-md);
transition: background-color var(--dur-1) var(--ease);
}
.c-mega__item:hover { background: var(--bg2); }
.c-mega__accent {
width: 3px; align-self: stretch; min-height: 34px;
border-radius: var(--r-full);
background: var(--exam-accent, var(--brand-600));
}
.c-mega__item strong { display: block; font-family: var(--ff-heading); font-size: var(--fs-sm); color: var(--text); }
.c-mega__item small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.c-mobile-nav { border-top: 1px solid var(--border); padding-block: var(--s-4); background: var(--bg); }
.c-mobile-nav a {
display: block; padding: var(--s-3) 0;
font-family: var(--ff-heading); font-weight: var(--fw-semibold);
color: var(--text-2);
}
.c-mobile-nav a:hover { color: var(--brand-600); }
/* ── Public site footer ──────────────────────────────────── */
.c-site-footer {
background: var(--brand-900);
color: var(--on-dark);
/*
| No TOP padding on the footer itself.
|
| The help band is the footer's first child and carries its own
| padding plus a background of its own. With 64px of padding on the
| footer, that space rendered above the band as a strip of bare
| footer colour — a dark empty gap between the page and the first
| thing in the footer.
|
| The top spacing belongs to the link grid instead, which is what it
| was ever actually separating.
*/
padding-block: 0 var(--s-8);
margin-top: var(--s-20);
}
.c-site-footer a { color: var(--on-dark); transition: color var(--dur-2) var(--ease); }
.c-site-footer a:hover { color: var(--gold-400); }
.c-site-footer__grid {
display: grid; gap: var(--s-8);
grid-template-columns: 1fr;
/* Carries the footer's top spacing — see the note on .c-site-footer. */
padding-top: var(--s-12);
}
@media (min-width: 640px) { .c-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-site-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } }
.c-site-footer__brand .c-site-header__name,
.c-site-footer__brand .c-site-header__mark { color: var(--on-brand); }
.c-site-footer__brand .c-site-header__mark { background: rgba(255, 255, 255, .12); }
.c-site-footer__title {
font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold);
letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
color: var(--gold-400); margin-bottom: var(--s-4);
}
.c-site-footer__list { list-style: none; padding: 0; margin: 0; }
.c-site-footer__list li + li { margin-top: var(--s-2); }
.c-site-footer__list { font-size: var(--fs-sm); }
.c-site-footer__social {
display: grid; place-items: center;
width: 34px; height: 34px; border-radius: var(--r-full);
border: 1px solid rgba(255, 255, 255, .20);
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.c-site-footer__social:hover { border-color: var(--gold-400); }
.c-site-footer__bottom {
display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
margin-top: var(--s-12); padding-top: var(--s-6);
border-top: 1px solid var(--on-dark-line);
}
.c-site-footer__bottom .t-muted { color: var(--on-dark-muted); }
/* ── Portal shell (student + admin) ──────────────────────── */
.l-portal__shell { display: flex; min-height: 100dvh; }
.l-portal__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l-portal__content { flex: 1; padding-block: var(--s-8); }
.c-sidebar {
width: 260px; flex-shrink: 0;
background: var(--sidebar-bg);
color: var(--sidebar-text);
display: flex; flex-direction: column;
position: fixed; inset-block: 0; left: 0; z-index: var(--z-drawer);
transform: translateX(-100%);
transition: transform var(--dur-3) var(--ease);
}
.c-sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
.c-sidebar { position: sticky; top: 0; height: 100dvh; transform: none; }
}
.c-sidebar__brand { padding: var(--s-5) var(--s-5); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.c-sidebar__brand .c-site-header__name { color: var(--on-brand); }
.c-sidebar__brand .c-site-header__mark { background: rgba(255, 255, 255, .12); }
.c-sidebar__nav { flex: 1; padding: var(--s-4) var(--s-3); overflow-y: auto; }
.c-sidebar__link {
display: flex; align-items: center; gap: var(--s-3);
width: 100%;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
font-size: var(--fs-sm); font-weight: var(--fw-medium);
color: var(--sidebar-text); text-align: left;
transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.c-sidebar__link:hover { background: var(--sidebar-active-bg); color: var(--on-brand); }
.c-sidebar__link.is-active {
background: var(--sidebar-active-bg);
color: var(--on-brand);
box-shadow: inset 3px 0 0 var(--gold-500);
}
.c-sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.c-sidebar__foot { padding: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .08); }
.c-topbar {
display: flex; align-items: center; gap: var(--s-4);
height: var(--header-h);
padding-inline: var(--gutter);
background: var(--card-bg);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: var(--z-sticky);
}
.c-topbar__title { flex: 1; min-width: 0; }
.c-topbar__title h1 { margin: 0; }
/* Sub-navigation card (profile sections, settings rail) */
.c-subnav { padding: var(--s-2); }
.c-subnav .c-sidebar__link { color: var(--text-2); }
.c-subnav .c-sidebar__link:hover { background: var(--bg3); color: var(--text); }
/* Neutral mega-menu accent for the "All exams" row */
.c-mega__accent--neutral { background: var(--border-strong); }
/* ════════════════════════════════════════════════════════════
HEADER — utility strip, glass main bar, mega panel
------------------------------------------------------------
Added with the editorial layer. The header is the single
strongest signal of how established a site is: one thin bar
with five links reads as a template, two rows with real
information reads as a product.
════════════════════════════════════════════════════════════ */
.c-site-header { position: sticky; top: 0; z-index: var(--z-header); }
/* ── Utility strip ─────────────────────────────────────────── */
.c-topstrip {
background: var(--grad-deep);
color: var(--on-dark);
font-size: var(--fs-xs);
}
.c-topstrip__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: 38px;
padding-block: var(--s-2);
}
.c-topstrip__note {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin: 0;
color: var(--on-dark);
}
.c-topstrip__note .c-icon { color: var(--gold-400); }
@media (max-width: 767px) { .c-topstrip__note { display: none; } }
.c-topstrip__links { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.c-topstrip__item {
display: inline-flex;
align-items: center;
gap: var(--s-2);
color: var(--on-dark-muted);
white-space: nowrap;
}
a.c-topstrip__item:hover { color: var(--gold-400); }
/* ── Main bar ──────────────────────────────────────────────── */
.c-site-header__main { transition: box-shadow var(--dur-2) var(--ease); }
.c-site-header.is-stuck .c-site-header__main { box-shadow: var(--sh-2); }
.c-site-header__bar { min-height: var(--header-h); }
.c-site-header__wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.c-site-header__tag {
font-size: 10px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--muted);
font-weight: var(--fw-medium);
}
@media (max-width: 480px) { .c-site-header__tag { display: none; } }
/* The brand mark gets the signature gradient rather than a flat fill. */
.c-site-header__mark {
background: var(--grad-brand);
color: var(--on-brand);
box-shadow: var(--sh-brand);
}
/* ── Mega panel ────────────────────────────────────────────── */
.c-mega--wide {
width: min(760px, calc(100vw - var(--s-8)));
padding: var(--s-5);
border-radius: var(--r-lg);
box-shadow: var(--sh-4);
}
.c-mega__grid {
display: grid;
gap: var(--s-3);
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.c-mega__card {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--border);
border-top: 3px solid var(--exam-accent, var(--brand-600));
background: var(--surface-2);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.c-mega__card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.c-mega__card-top { display: flex; align-items: center; gap: var(--s-3); }
.c-mega__card strong { font-family: var(--ff-heading); font-size: var(--fs-base); color: var(--text); }
.c-mega__card small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.c-mega__subjects { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.c-mega__foot {
display: flex;
flex-wrap: wrap;
gap: var(--s-5);
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--border);
}
.c-mega__foot a {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--brand-600);
}
.c-mega__foot a:hover { color: var(--brand-700); }
/* ── Mobile nav ────────────────────────────────────────────── */
.c-mobile-nav__label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--muted-2);
margin: var(--s-4) 0 var(--s-2);
}
.c-mobile-nav__exams { display: grid; gap: var(--s-2); }
.c-mobile-nav__exam {
display: block;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
background: var(--surface-2);
border-left: 3px solid var(--exam-accent, var(--brand-600));
}
.c-mobile-nav__exam strong { display: block; font-family: var(--ff-heading); color: var(--text); }
.c-mobile-nav__exam small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.c-mobile-nav a { display: flex; align-items: center; gap: var(--s-3); }
/* ── Footer: help band, contact, disclaimer ────────────────── */
.c-site-footer__help {
background: rgba(255, 255, 255, .05);
border-bottom: 1px solid var(--on-dark-line);
padding-block: var(--s-8);
}
.c-site-footer__help-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
}
.c-site-footer__help .t-h4 { color: var(--on-brand); }
.c-site-footer__help .t-small { color: var(--on-dark); max-width: 56ch; margin-top: var(--s-2); }
.c-site-footer__ghost { color: var(--on-dark); border: 1px solid var(--on-dark-line); }
.c-site-footer__ghost:hover { background: rgba(255, 255, 255, .08); color: var(--on-brand); }
.c-site-footer__contact { list-style: none; padding: 0; margin: var(--s-5) 0 0; font-size: var(--fs-sm); }
.c-site-footer__contact li {
display: flex;
align-items: flex-start;
gap: var(--s-3);
margin-top: var(--s-3);
color: var(--on-dark);
}
.c-site-footer__contact .c-icon { color: var(--gold-400); margin-top: 2px; flex-shrink: 0; }
.c-site-footer__social { display: inline-grid; place-items: center; }
.c-site-footer__disclaimer {
display: flex;
gap: var(--s-4);
align-items: flex-start;
margin-top: var(--s-12);
padding: var(--s-5);
border-radius: var(--r-md);
background: rgba(255, 255, 255, .04);
border: 1px solid var(--on-dark-line);
}
.c-site-footer__disclaimer .c-icon { color: var(--on-dark-muted); flex-shrink: 0; margin-top: 2px; }
.c-site-footer__disclaimer p {
margin: 0;
font-size: var(--fs-xs);
line-height: var(--lh-body);
color: var(--on-dark-muted);
}
/* ──────────────────────────────────────────────────────────
10-content.css
────────────────────────────────────────────────────────── */
/* ============================================================
10-content.css — things that present information
------------------------------------------------------------
Stats, steps, timelines, feature rows, quotes, spec tables,
FAQ blocks, call-to-action bands and page heroes.
These are the components a marketing or syllabus page is
assembled from. They differ from 08-surfaces.css in what they
are for, not in shape: a surface is a neutral container, and
everything here has an editorial job — it makes a claim, it
ranks something, it walks the reader through a sequence.
Loaded after surfaces so a content component can safely lean
on .c-card without an ordering surprise.
============================================================ */
/* ════════════════════════════════════════════════════════════
STAT
════════════════════════════════════════════════════════════ */
.c-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.c-stat__value {
font-family: var(--ff-heading);
font-size: var(--fs-3xl);
font-weight: var(--fw-extra);
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.c-stat__label { font-size: var(--fs-sm); color: var(--muted); }
.c-stat--brand .c-stat__value { color: var(--brand-600); }
.c-stat--gold .c-stat__value { color: var(--gold-600); }
/* Stat with a muted suffix: 12/15 */
.c-stat__suffix { font-size: var(--fs-lg); color: var(--muted); font-weight: var(--fw-semibold); }
/* Stat sitting on the dark brand band. */
.l-section--brand .c-stat__value { color: var(--on-brand); }
.l-section--brand .c-stat__label { color: var(--on-dark-muted); }
/* ── Stat strip ──────────────────────────────────────────────
A row of figures with hairlines between them. Reads as one
claim rather than four loose numbers. */
.c-stat-strip {
display: grid;
gap: var(--s-6);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
.c-stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.c-stat-strip > * + * {
padding-left: var(--s-8);
border-left: 1px solid var(--border);
}
.l-section--brand .c-stat-strip > * + * { border-left-color: var(--on-dark-line); }
}
.c-stat-strip--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .c-stat-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ════════════════════════════════════════════════════════════
FEATURE ROW — icon tile + heading + copy
════════════════════════════════════════════════════════════ */
.c-feature { display: flex; gap: var(--s-4); align-items: flex-start; }
.c-feature__body { min-width: 0; }
.c-feature__title {
font-family: var(--ff-heading);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text);
line-height: var(--lh-heading);
}
.c-feature__text {
margin-top: var(--s-2);
font-size: var(--fs-sm);
color: var(--muted);
line-height: var(--lh-body);
}
/* Stacked variant — tile above the text, for a 3-up grid. */
.c-feature--stacked { flex-direction: column; gap: var(--s-4); }
/* On the dark band. */
.l-section--brand .c-feature__title { color: var(--on-brand); }
.l-section--brand .c-feature__text { color: var(--on-dark); }
/* ════════════════════════════════════════════════════════════
STEPS — a numbered sequence with a connecting rule
════════════════════════════════════════════════════════════ */
.c-steps { display: grid; gap: var(--s-6); grid-template-columns: 1fr; counter-reset: c-step; }
@media (min-width: 900px) { .c-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.c-step { position: relative; counter-increment: c-step; }
.c-step__num {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r-full);
background: var(--brand-600);
color: var(--on-brand);
font-family: var(--ff-heading);
font-weight: var(--fw-extra);
font-size: var(--fs-lg);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-600) 12%, transparent);
position: relative;
z-index: 1;
}
.c-step__num::before { content: counter(c-step); }
/* The rule joining one step to the next. Drawn from the number
rightwards, and suppressed on the last item and on mobile. */
@media (min-width: 900px) {
.c-step:not(:last-child)::after {
content: "";
position: absolute;
top: 22px;
left: 52px;
right: calc(var(--s-8) * -1 + 8px);
height: 2px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--brand-400) 45%, transparent),
color-mix(in srgb, var(--brand-400) 10%, transparent));
border-radius: var(--r-full);
}
}
.c-step__title {
margin-top: var(--s-5);
font-family: var(--ff-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text);
line-height: var(--lh-heading);
}
.c-step__text { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
/* ════════════════════════════════════════════════════════════
TIMELINE — exam dates, admission stages
════════════════════════════════════════════════════════════ */
.c-timeline { position: relative; padding-left: var(--s-8); }
.c-timeline::before {
content: "";
position: absolute;
left: 7px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--brand-400) 50%, transparent),
color-mix(in srgb, var(--brand-400) 14%, transparent));
border-radius: var(--r-full);
}
.c-timeline__item { position: relative; padding-bottom: var(--s-6); }
.c-timeline__item:last-child { padding-bottom: 0; }
.c-timeline__item::before {
content: "";
position: absolute;
left: calc(var(--s-8) * -1 + 2px);
top: 5px;
width: 12px;
height: 12px;
border-radius: var(--r-full);
background: var(--card-bg);
border: 2px solid var(--brand-500);
}
.c-timeline__item.is-done::before { background: var(--brand-500); }
.c-timeline__item.is-next::before {
border-color: var(--gold-600);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-500) 24%, transparent);
}
.c-timeline__date {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--brand-600);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.c-timeline__title { font-family: var(--ff-heading); font-weight: var(--fw-semibold); color: var(--text); margin-top: var(--s-1); }
.c-timeline__text { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); line-height: var(--lh-body); }
/* ════════════════════════════════════════════════════════════
SPEC LIST — label/value pairs (exam pattern, eligibility)
════════════════════════════════════════════════════════════ */
.c-spec { display: grid; gap: 0; margin: 0; }
.c-spec__row {
display: grid;
gap: var(--s-2);
grid-template-columns: 1fr;
padding-block: var(--s-4);
border-bottom: 1px solid var(--border);
}
.c-spec__row:last-child { border-bottom: 0; }
@media (min-width: 640px) {
.c-spec__row { grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--s-6); align-items: baseline; }
}
.c-spec__key {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--muted);
margin: 0;
}
.c-spec__val { font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-body); margin: 0; }
.c-spec__val strong { font-weight: var(--fw-semibold); }
/* ════════════════════════════════════════════════════════════
QUOTE — a pull quote or a mentor's note
════════════════════════════════════════════════════════════ */
.c-quote {
position: relative;
padding: var(--s-8);
border-radius: var(--r-lg);
background: var(--card-bg);
border: 1px solid var(--border);
}
.c-quote__mark { color: color-mix(in srgb, var(--gold-500) 70%, transparent); }
.c-quote__text {
margin-top: var(--s-4);
font-family: var(--ff-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-medium);
line-height: 1.55;
color: var(--text);
}
.c-quote__by { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.c-quote__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.c-quote__role { font-size: var(--fs-xs); color: var(--muted); }
/* ════════════════════════════════════════════════════════════
CALLOUT — an aside inside prose; not an alert
------------------------------------------------------------
An alert reports what just happened. A callout is editorial:
a note, a caveat, an official-source pointer. Different job,
different colour weight, deliberately quieter.
════════════════════════════════════════════════════════════ */
.c-callout {
display: flex;
gap: var(--s-4);
padding: var(--s-5);
border-radius: var(--r-md);
border: 1px solid var(--border);
border-left: 3px solid var(--callout-accent, var(--brand-500));
background: var(--bg2);
}
.c-callout__icon { color: var(--callout-accent, var(--brand-500)); flex-shrink: 0; }
.c-callout__title { font-family: var(--ff-heading); font-weight: var(--fw-semibold); color: var(--text); font-size: var(--fs-sm); }
.c-callout__text { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body); margin-top: var(--s-1); }
.c-callout--gold { --callout-accent: var(--gold-600); }
.c-callout--info { --callout-accent: var(--info); }
.c-callout--warn { --callout-accent: var(--warning); }
/* ════════════════════════════════════════════════════════════
FAQ
------------------------------------------------------------
Built on /, so it works with no JavaScript
at all: the browser handles toggling, keyboard operation and
the expanded/collapsed announcement, and the answer stays in
the DOM for search engines and for Ctrl-F while collapsed.
════════════════════════════════════════════════════════════ */
.c-faq { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg); overflow: hidden; }
.c-faq__item + .c-faq__item { border-top: 1px solid var(--border); }
.c-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-5) var(--s-6);
cursor: pointer;
list-style: none; /* Firefox */
font-family: var(--ff-heading);
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text);
line-height: var(--lh-heading);
transition: background-color var(--dur-1) var(--ease);
}
/* The default disclosure triangle, removed in favour of our chevron. */
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__q::marker { content: ""; }
.c-faq__q:hover { background: var(--bg2); }
.c-faq__q:focus-visible {
outline: var(--focus-w) solid var(--focus-ring);
outline-offset: calc(var(--focus-offset) * -1);
}
.c-faq__chev { color: var(--muted); transition: transform var(--dur-2) var(--ease); flex-shrink: 0; }
.c-faq__item[open] .c-faq__chev { transform: rotate(180deg); }
.c-faq__a {
padding: 0 var(--s-6) var(--s-6);
font-size: var(--fs-sm);
color: var(--text-2);
line-height: var(--lh-prose);
}
.c-faq__a > * + * { margin-top: var(--s-3); }
/* ════════════════════════════════════════════════════════════
PAGE HERO — the band under the header on an inner page
════════════════════════════════════════════════════════════ */
.c-page-hero {
position: relative;
isolation: isolate;
padding-block: var(--s-12) var(--s-10);
background: var(--bg2);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.c-page-hero > .l-container { position: relative; z-index: 1; }
.c-page-hero__title { max-width: 20ch; }
.c-page-hero__lead { max-width: 60ch; margin-top: var(--s-4); color: var(--text-2); }
.c-page-hero__meta { margin-top: var(--s-6); }
/* Exam-accented variant: a coloured top rule and a tinted wash. */
.c-page-hero--exam { border-top: 3px solid var(--exam-accent, var(--brand-600)); }
/* ════════════════════════════════════════════════════════════
CTA BAND
════════════════════════════════════════════════════════════ */
.c-cta {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
background: linear-gradient(135deg, var(--brand-800), var(--brand-600) 60%, var(--brand-700));
color: var(--on-brand);
padding: var(--s-12) var(--s-8);
text-align: center;
}
@media (min-width: 768px) { .c-cta { padding: var(--s-16) var(--s-12); } }
.c-cta > * { position: relative; z-index: 1; }
.c-cta h2, .c-cta .t-h2 { color: var(--on-brand); }
.c-cta__text { color: var(--on-dark); max-width: 56ch; margin-inline: auto; margin-top: var(--s-3); }
.c-cta__actions { margin-top: var(--s-8); }
/* Full-bleed variant for a section that is itself the band. */
.c-cta--flat { border-radius: 0; }
/* ════════════════════════════════════════════════════════════
LOGO / TRUST STRIP
------------------------------------------------------------
Holds text marks, never third-party logos. Using an exam
board's or an institute's logo to imply an endorsement that
does not exist is a trademark problem, not a design choice.
════════════════════════════════════════════════════════════ */
.c-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--s-4) var(--s-8);
}
.c-trust__item {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--muted);
}
.c-trust__item .c-icon { color: var(--brand-500); }
.l-section--brand .c-trust__item { color: var(--on-dark); }
.l-section--brand .c-trust__item .c-icon { color: var(--gold-400); }
/* ════════════════════════════════════════════════════════════
PROSE — long-form editorial copy
------------------------------------------------------------
Scoped so it cannot leak: only elements inside .c-prose are
restyled, and the measure is capped so a paragraph never runs
the full width of a desktop container.
════════════════════════════════════════════════════════════ */
.c-prose { max-width: var(--container-prose); color: var(--text-2); line-height: var(--lh-prose); }
.c-prose > * + * { margin-top: var(--s-5); }
.c-prose h2 { font-size: var(--fs-2xl); color: var(--text); margin-top: var(--s-10); }
.c-prose h3 { font-size: var(--fs-xl); color: var(--text); margin-top: var(--s-8); }
.c-prose h2:first-child, .c-prose h3:first-child { margin-top: 0; }
.c-prose ul, .c-prose ol { padding-left: var(--s-6); }
.c-prose li + li { margin-top: var(--s-2); }
.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }
.c-prose strong { color: var(--text); font-weight: var(--fw-semibold); }
.c-prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.c-prose a:hover { color: var(--brand-700); }
.c-prose--wide { max-width: none; }
/* ════════════════════════════════════════════════════════════
CAROUSEL
------------------------------------------------------------
A scroll-snap track first, enhanced by ui.js second. With no
JavaScript it is still a swipeable, keyboard-scrollable list
of slides — only the dots and arrows are missing.
════════════════════════════════════════════════════════════ */
.c-carousel { position: relative; }
.c-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: var(--s-6);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.c-carousel__track::-webkit-scrollbar { display: none; }
.c-carousel__slide { scroll-snap-align: center; min-width: 0; }
/* Peek variant: the next slide shows at the edge, which is the
clearest possible signal that the track scrolls. */
.c-carousel--peek .c-carousel__track { grid-auto-columns: min(86%, 560px); }
.c-carousel__dots {
display: flex;
justify-content: center;
gap: var(--s-2);
margin-top: var(--s-6);
}
.c-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: var(--r-full);
background: var(--border-strong);
cursor: pointer;
transition: width var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.c-carousel__dot.is-active { width: 28px; background: var(--brand-600); }
.c-carousel__dot:focus-visible {
outline: var(--focus-w) solid var(--focus-ring);
outline-offset: var(--focus-offset);
}
.l-band--deep .c-carousel__dot { background: var(--on-dark-line); }
.l-band--deep .c-carousel__dot.is-active { background: var(--gold-400); }
.c-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: none;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r-full);
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text-2);
box-shadow: var(--sh-2);
cursor: pointer;
transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@media (min-width: 1024px) { .c-carousel__nav { display: grid; } }
.c-carousel__nav:hover { color: var(--brand-600); border-color: var(--brand-400); }
.c-carousel__nav--prev { left: calc(var(--s-6) * -1); }
.c-carousel__nav--next { right: calc(var(--s-6) * -1); }
/* ════════════════════════════════════════════════════════════
SHOWCASE — a large feature panel: copy one side, art the other
════════════════════════════════════════════════════════════ */
.c-showcase {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--r-xl);
background: var(--surface-2);
border: 1px solid var(--border);
padding: var(--s-8);
}
@media (min-width: 900px) { .c-showcase { padding: var(--s-12); } }
.c-showcase__grid {
display: grid;
gap: var(--s-8);
grid-template-columns: 1fr;
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 900px) { .c-showcase__grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); } }
.c-showcase__title { max-width: 18ch; }
.c-showcase__text { color: var(--text-2); max-width: 52ch; margin-top: var(--s-4); }
.c-showcase__art { min-width: 0; }
.c-showcase--deep {
background: var(--grad-deep);
border-color: transparent;
color: var(--on-brand);
}
.c-showcase--deep .c-showcase__text { color: var(--on-dark); }
.c-showcase--deep h2, .c-showcase--deep h3 { color: var(--on-brand); }
/* ════════════════════════════════════════════════════════════
TILE — a bento cell
════════════════════════════════════════════════════════════ */
.c-tile {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--s-2);
padding: var(--s-6);
border-radius: var(--r-lg);
background: var(--surface-2);
border: 1px solid var(--border);
transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
}
.c-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--border-strong); }
.c-tile__eyebrow {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--muted);
}
.c-tile__title { font-family: var(--ff-heading); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.c-tile__text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.c-tile__top { margin-bottom: auto; }
.c-tile--deep { background: var(--grad-brand); border-color: transparent; color: var(--on-brand); }
.c-tile--deep .c-tile__title { color: var(--on-brand); }
.c-tile--deep .c-tile__text, .c-tile--deep .c-tile__eyebrow { color: var(--on-dark); }
.c-tile--gold { background: var(--grad-gold); border-color: transparent; }
.c-tile--gold .c-tile__title,
.c-tile--gold .c-tile__text,
.c-tile--gold .c-tile__eyebrow { color: var(--brand-900); }
/* ════════════════════════════════════════════════════════════
METRIC — a headline figure with a caption underneath
════════════════════════════════════════════════════════════ */
.c-metric { display: flex; flex-direction: column; gap: var(--s-1); }
.c-metric__value {
font-family: var(--ff-heading);
font-size: var(--fs-4xl);
font-weight: var(--fw-extra);
line-height: 1;
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
background: var(--grad-sunrise);
-webkit-background-clip: text;
background-clip: text;
color: var(--brand-600);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.c-metric__value { color: transparent; }
}
.c-metric__label { font-size: var(--fs-sm); color: var(--muted); }
.l-band--deep .c-metric__value {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--on-brand);
}
.l-band--deep .c-metric__label { color: var(--on-dark-muted); }
/* ════════════════════════════════════════════════════════════
ART — the inline SVG illustration components
════════════════════════════════════════════════════════════ */
.a-art { display: block; width: 100%; height: auto; }
.a-art--sm { max-width: 320px; }
.a-art--md { max-width: 460px; }
/* ──────────────────────────────────────────────────────────
11-utilities.css
────────────────────────────────────────────────────────── */
/* ============================================================
07-utilities.css — A DELIBERATELY SMALL set.
------------------------------------------------------------
This is not Tailwind. If you find yourself wanting a utility
that isn't here, the answer is usually a component in 06,
not a new utility. The only file where !important is allowed.
============================================================ */
/* ── Spacing ─────────────────────────────────────────────── */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--s-2) !important; }
.u-mt-3 { margin-top: var(--s-3) !important; }
.u-mt-4 { margin-top: var(--s-4) !important; }
.u-mt-6 { margin-top: var(--s-6) !important; }
.u-mt-8 { margin-top: var(--s-8) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--s-2) !important; }
.u-mb-4 { margin-bottom: var(--s-4) !important; }
.u-mb-6 { margin-bottom: var(--s-6) !important; }
.u-mb-8 { margin-bottom: var(--s-8) !important; }
.u-mx-auto { margin-inline: auto !important; }
/* ── Display ─────────────────────────────────────────────── */
.u-block { display: block !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-hidden { display: none !important; }
.u-inline-flex { display: inline-flex !important; }
/* ── Flex helpers ────────────────────────────────────────── */
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-gap-2 { gap: var(--s-2) !important; }
.u-gap-3 { gap: var(--s-3) !important; }
.u-gap-4 { gap: var(--s-4) !important; }
.u-gap-6 { gap: var(--s-6) !important; }
/* ── Text ────────────────────────────────────────────────── */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-nowrap { white-space: nowrap !important; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Width ───────────────────────────────────────────────── */
.u-w-full { width: 100% !important; }
.u-max-prose { max-width: var(--container-prose) !important; }
/* ── Surface ─────────────────────────────────────────────── */
.u-bg { background: var(--bg) !important; }
.u-bg-alt { background: var(--bg2) !important; }
.u-rounded { border-radius: var(--r-md) !important; }
.u-border { border: 1px solid var(--border) !important; }
/* ── Responsive visibility ───────────────────────────────── */
@media (max-width: 767px) { .u-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .u-hide-desktop { display: none !important; } }
/* ── Print ───────────────────────────────────────────────── */
@media print {
.u-no-print { display: none !important; }
body { background: var(--white) !important; color: var(--black) !important; }
}