/* NPTE Blueprint — Nordic Aurora theme (v785)
*
* Total visual separation from CB main. CB main is dark galaxy / violet starlight.
* NPTE is now pale Nordic light with aurora gradients flowing across the page.
*
* Principles:
* 1. Light, airy, Scandinavian-clean. Pale cool-whites as base.
* 2. Aurora gradient = soft mint → soft blue → soft lavender. Used as the
* primary expressive surface (hero title, primary CTA, hover glows).
* 3. Warm amber (midnight-sun) for premium moments. Single warm accent
* against the cool palette — restrained.
* 4. Frosted glass cards, soft cool shadows.
* 5. Aurora-curtain background — very slow drifting gradient bands.
* Replaces the galaxy starfield.
* 6. Whitespace is the design. Restraint over decoration.
* 7. Typography hierarchy through weight + tracking, not color noise.
*/
:root {
/* Pale Nordic canvas — cool whites with the faintest cool tint */
--bg: #f6f8fb;
--bg-1: #ffffff;
--bg-2: #eef3f8;
--bg-3: #e3eaf2;
--bg-4: #d6e0eb;
/* Borders — cool-tinted, very restrained */
--border: rgba(122, 156, 220, 0.14);
--border-hi: rgba(122, 156, 220, 0.26);
--border-glow: rgba(110, 178, 255, 0.42);
--border-focus: rgba(124, 158, 255, 0.55);
/* Text — deep slate, never pure black; cool undertone */
--fg: #1a2436;
--fg-2: #4a5a7e;
--fg-3: #60708d;
--fg-4: #b5bdcf;
/* v1232 Blueprint identity — a single confident azure (deeper, less pastel
than the old cornflower), reading "technical blueprint / clinical
precision". The rainbow aurora gradient is retired; gradients are now
same-hue depth only. Gold stays as the one warm counterpoint. */
--accent: #3f7fe6;
--accent-hi: #2f66c8;
--accent-lo: rgba(63, 127, 230, 0.10);
--accent-glow: rgba(63, 127, 230, 0.26);
/* Secondary — clinical teal (a calm signal color, kept off the primary axis) */
--aurora-mint: #2bb3a3;
--aurora-mint-hi: #1f9a8c;
--aurora-mint-lo: rgba(43, 179, 163, 0.12);
/* Tertiary — slate (was lavender; the purple was the loudest AI tell) */
--aurora-lav: #7d8aa6;
--aurora-lav-hi: #98a4bd;
--aurora-lav-lo: rgba(125, 138, 166, 0.14);
/* Signature gradient — single-hue azure depth (no rainbow). Used sparingly:
logo mark, primary CTAs, hairline rules. */
--aurora-gradient: linear-gradient(135deg, #2f66c8 0%, #4d8bf0 100%);
--aurora-gradient-soft: linear-gradient(135deg, rgba(63, 127, 230, 0.16) 0%, rgba(77, 139, 240, 0.08) 100%);
/* Warm midnight-sun gold — the one warm accent against cool palette.
Reserved for premium moments + featured tier + study-hub highlights. */
--gold: #f5b352;
--gold-hi: #f7c478;
--gold-lo: rgba(245, 179, 82, 0.12);
--gold-glow: rgba(245, 179, 82, 0.30);
/* Functional palette — tuned for a light background */
--success: #1aa67a;
--success-bg: rgba(26, 166, 122, 0.10);
--warn: #e89a2c;
--warn-bg: rgba(232, 154, 44, 0.10);
--error: #e85d75;
--error-bg: rgba(232, 93, 117, 0.10);
/* Highlight marks — restrained on light background */
--hy-bg: rgba(245, 179, 82, 0.18);
--hy-fg: #b8731f;
--trap-bg: rgba(232, 93, 117, 0.14);
--trap-fg: #b03d54;
--mech-bg: rgba(63, 127, 230, 0.18);
--mech-fg: #1f5db8;
/* Elevation — soft cool shadows, never harsh */
--shadow-sm: 0 1px 2px rgba(38, 60, 100, 0.06);
--shadow: 0 4px 16px rgba(38, 60, 100, 0.08), 0 1px 3px rgba(38, 60, 100, 0.04);
--shadow-lg: 0 12px 36px rgba(38, 60, 100, 0.12), 0 4px 12px rgba(38, 60, 100, 0.06);
--shadow-xl: 0 24px 64px rgba(38, 60, 100, 0.18), 0 8px 16px rgba(38, 60, 100, 0.08);
--glow-aurora: 0 0 40px rgba(63, 127, 230, 0.20);
--glow-gold: 0 0 32px rgba(245, 179, 82, 0.24);
/* Typography */
--font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
--serif: 'IBM Plex Serif', Charter, Georgia, 'Source Serif Pro', serif;
/* Rhythm */
--r-1: 4px;
--r-2: 8px;
--r-3: 16px;
--r-4: 24px;
--r-5: 40px;
--r-6: 64px;
--r-7: 96px;
--r-8: 128px;
/* v1214 SURFACE RAMP — tokenized white-glass literals so Night Shift can
* remap them. Light values are byte-identical to the literals they replace. */
--srf-solid: #ffffff;
--srf-98: rgba(255, 255, 255, 0.98);
--srf-95: rgba(255, 255, 255, 0.95);
--srf-92: rgba(255, 255, 255, 0.92);
--srf-90: rgba(255, 255, 255, 0.9);
--srf-88: rgba(255, 255, 255, 0.88);
--srf-85: rgba(255, 255, 255, 0.85);
--srf-82: rgba(255, 255, 255, 0.82);
--srf-80: rgba(255, 255, 255, 0.8);
--srf-78: rgba(255, 255, 255, 0.78);
--srf-75: rgba(255, 255, 255, 0.75);
--srf-70: rgba(255, 255, 255, 0.7);
--srf-60: rgba(255, 255, 255, 0.6);
--srf-55: rgba(255, 255, 255, 0.55);
--srf-50: rgba(255, 255, 255, 0.5);
--srf-45: rgba(255, 255, 255, 0.45);
--srf-40: rgba(255, 255, 255, 0.4);
--srf-faint: #fafafa;
--srf-faint2: #f1f5f9;
--canvas-80: rgba(246, 248, 251, 0.8);
--canvas-60: rgba(246, 248, 251, 0.6);
/* Curves */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
/* v1207: spring (back-out overshoot) — the physical curve for things users
* touch: option select, card lift, modal-in. Was a one-off in the bug modal. */
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ═══ v977 LIQUID GLASS VOCABULARY ════════════════════════════════════
* Engineering imported from CB's panel-won Keynote Editorial system
* (docs/REDESIGN_SPEC_v976.md), expressed in NPTE's own aurora identity.
* All ink/text values >=4.5:1 on --bg (#f6f8fb). */
/* Text-safe accent ramp — anything READ uses these, never the pale accents */
--accent-text: #2358b5; /* blueprint azure ink — 6.4:1 */
--accent-text-hover: #154182; /* darker azure — 9.6:1 on --bg */
--mint-text: #0c7d68; /* clinical teal ink — 4.7:1 */
--lav-text: #4a5878; /* slate ink — 6.1:1 (was violet) */
--gold-text: #8a5a0a; /* amber ink — 5.5:1 */
/* Display ink — clipped HEADLINE text. v1232: single-hue azure depth, no
rainbow. Headlines mostly use solid --fg serif now; this stays for the few
accent numerals still clipped. Both stops >=4.5:1. */
--ink-gradient: linear-gradient(120deg, #1c4c9e 0%, #2f66c8 100%);
/* CTA fill — white label >=4.5:1 at every stop; single-hue azure */
--cta-gradient: linear-gradient(120deg, #2358b5 0%, #3f7fe6 100%);
--cta-fg: #ffffff;
/* Editorial structure */
--hairline: rgba(26, 36, 54, 0.10);
--hairline-strong: rgba(26, 36, 54, 0.18);
--surface-solid: #ffffff;
/* Tier-2b blur-free content plates — in-flow cards carry NO frost */
--plate-bg: rgba(255, 255, 255, 0.82);
--plate-bg-hover: rgba(255, 255, 255, 0.94);
/* Glass slab shadows: contact + lift + top specular + bottom rim-catch */
--glass-shadow:
0 1px 2px rgba(38, 60, 100, 0.05),
0 12px 32px -8px rgba(38, 60, 100, 0.08),
inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 0 rgba(38, 60, 100, 0.04);
--glass-shadow-hover:
0 2px 4px rgba(38, 60, 100, 0.05),
0 24px 48px -12px rgba(38, 60, 100, 0.12),
inset 0 1px 0 0 rgba(255, 255, 255, 0.98),
inset 0 -1px 0 0 rgba(38, 60, 100, 0.05);
/* Frost tiers — chrome/panels/anchors ONLY (nav, exam-header, modals) */
--glass-filter-ambient: blur(8px) saturate(150%);
--glass-filter-standard: blur(16px) saturate(150%);
--glass-filter-anchor: blur(24px) saturate(150%);
/* Recessed numeric readout well */
--well-bg: rgba(26, 36, 54, 0.04);
--well-shadow: inset 0 1px 2px rgba(26, 36, 54, 0.07), inset 0 0 0 1px rgba(26, 36, 54, 0.05);
/* Branded focus ring */
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text);
/* Semantic INK ramp — state colors used AS TEXT (>=4.5:1 on --bg and
* on their own pale tints). The base --success/--warn/--error stay for
* fills, rails and icons. */
--success-text: #0e7a58;
--warn-text: #92580a;
--error-text: #b03d54; /* same family as --trap-fg */
/* Semantic 0.2-alpha borders (status pills, msg cards) */
--success-border: rgba(26, 166, 122, 0.22);
--error-border: rgba(232, 93, 117, 0.22);
--accent-border: rgba(31, 93, 184, 0.22);
}
/* Dark Theme Overrides */
:root[data-theme="dark"],
body[data-theme="dark"] {
--bg: #0a0e1a; /* deep slate-900 / midnight */
--bg-1: #121829; /* slate-800 panel */
--bg-2: #1b233a; /* slate-800 hover/light */
--bg-3: #232d4b;
--bg-4: #2f3d64;
--border: rgba(109, 178, 255, 0.12);
--border-hi: rgba(109, 178, 255, 0.24);
--border-glow: rgba(109, 178, 255, 0.35);
--border-focus: rgba(124, 158, 255, 0.50);
--fg: #f8fafc; /* slate-50 */
--fg-2: #cbd5e1; /* slate-300 */
--fg-3: #94a3b8; /* slate-400 */
--fg-4: #475569; /* slate-600 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
/* Highlight marks on dark background */
--hy-bg: rgba(245, 179, 82, 0.12);
--hy-fg: #ffd085;
--trap-bg: rgba(232, 93, 117, 0.12);
--trap-fg: #ff9ba9;
--mech-bg: rgba(109, 178, 255, 0.12);
--mech-fg: #bcd9ff;
--success: #12c08a;
--success-bg: rgba(26, 166, 122, 0.15);
--success-text: #34d399;
--error: #ff6b82;
--error-bg: rgba(232, 93, 117, 0.15);
--error-text: #fca5a5;
--warn: #f59e0b;
--warn-bg: rgba(232, 154, 44, 0.15);
--warn-text: #fcd34d;
--gold-text: #fbbf24;
--accent-text: #6db2ff;
--accent-text-hover: #a3c7ff; /* lighter azure — hover must brighten on dark */
--hairline: rgba(255, 255, 255, 0.08);
--hairline-strong: rgba(255, 255, 255, 0.15);
--surface-solid: #121829;
--plate-bg: rgba(18, 24, 41, 0.85);
--plate-bg-hover: rgba(27, 35, 58, 0.95);
--well-bg: rgba(0, 0, 0, 0.25);
--well-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
--glass-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
0 12px 32px -8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
--glass-shadow-hover:
0 2px 4px rgba(0, 0, 0, 0.25),
0 24px 48px -12px rgba(0, 0, 0, 0.4),
inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: var(--font);
font-feature-settings: "cv11", "ss01", "ss03";
background: var(--bg);
color: var(--fg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.01em;
min-height: 100vh;
}
/* ===========================================================
NORDIC AURORA BACKDROP
=========================================================== */
/* v977: the five-corner wash is CONDENSED into one three-hue masthead
* bloom + a faint amber foot trace, after which the canvas falls calm so
* content density reads. Drift slowed 30s -> 75s, transform-only. */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 90% 55% at 50% -12%, rgba(63, 127, 230, 0.20) 0%, rgba(43, 179, 163, 0.10) 45%, transparent 72%),
radial-gradient(ellipse 38% 26% at 8% 2%, rgba(43, 179, 163, 0.14) 0%, transparent 60%),
radial-gradient(ellipse 45% 30% at 86% 4%, rgba(125, 138, 166, 0.14) 0%, transparent 65%),
radial-gradient(ellipse 55% 30% at 50% 104%, rgba(245, 179, 82, 0.07) 0%, transparent 60%),
linear-gradient(180deg, #fbfcfe 0%, var(--bg) 420px, var(--bg) 100%);
pointer-events: none;
z-index: -2;
animation: aurora-drift 75s ease-in-out infinite alternate;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
@keyframes aurora-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(1.5%, -0.8%, 0) scale(1.015); }
100% { transform: translate3d(-0.8%, 0.8%, 0) scale(1); }
}
body::after {
content: '';
position: fixed;
inset: 0;
background: url("data:image/svg+xml;utf8,");
pointer-events: none;
z-index: -1;
opacity: 0.35;
mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
}
/* Distraction-free clean background for testing, results, and review screens */
body.clean-bg::before {
animation: none !important;
background: #f1f5f9 !important; /* Calm, static, light neutral grey background */
}
body.clean-bg::after {
opacity: 0.12 !important; /* Much subtler noise overlay */
}
a {
color: var(--accent-text);
text-decoration: none;
transition: color 0.2s var(--ease);
}
/* The hover ink was a hardcoded darkening of the LIGHT-theme azure. On dark it
* measured 1.81:1 against the card surface (AA wants 4.5), so any hovered link
* — including whole card components — went nearly invisible. It is now themed
* alongside --accent-text.
*
* Gated behind (hover: hover) because iOS WKWebView has sticky hover: tapping a
* link leaves it in :hover until you tap elsewhere, so on the app a tapped card
* kept the hover ink and a full-card underline after you navigated back. Touch
* devices now get no hover state at all, which is the correct behaviour. */
@media (hover: hover) and (pointer: fine) {
a:hover { color: var(--accent-text-hover); text-decoration: underline; }
}
button { font-family: inherit; }
/* ===========================================================
NAV — frosted-white glass
=========================================================== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: 64px;
padding: 0 var(--r-4);
display: flex;
align-items: center;
gap: var(--r-4);
background: var(--srf-70);
backdrop-filter: var(--glass-filter-anchor);
-webkit-backdrop-filter: var(--glass-filter-anchor);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px rgba(38, 60, 100, 0.06);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.02em;
}
.nav-brand-mark {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--aurora-gradient);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 11px;
letter-spacing: -0.02em;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 4px 12px rgba(63, 127, 230, 0.32),
0 0 24px rgba(43, 179, 163, 0.18);
position: relative;
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.nav-brand:hover .nav-brand-mark {
transform: scale(1.08);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.85) inset,
0 6px 20px rgba(63, 127, 230, 0.48),
0 0 36px rgba(43, 179, 163, 0.28);
}
.nav-brand-mark::before {
content: '';
position: absolute;
inset: 2px;
border-radius: 6px;
background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 60%);
pointer-events: none;
}
.nav-brand-mark::after {
content: '✦';
position: absolute;
top: 1px;
right: 3px;
font-size: 7px;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
transform: scale(0.4);
transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
pointer-events: none;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
.nav-brand:hover .nav-brand-mark::after {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.nav-brand-mark, .nav-brand-mark::after { transition: none; }
.nav-brand:hover .nav-brand-mark { transform: none; }
}
.nav-brand-text { color: var(--fg); }
.nav-brand-tag {
font-family: var(--mono);
font-size: 9.5px;
color: var(--accent);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 2px;
display: block;
font-weight: 600;
}
.nav-links {
display: flex;
gap: var(--r-1);
margin-left: auto;
align-items: center;
}
.nav-link {
color: var(--fg-2);
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
border-radius: 7px;
transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav-link:hover { color: var(--fg); background: rgba(63, 127, 230, 0.08); }
.nav-link.active { color: var(--accent-hi); background: var(--accent-lo); }
.nav-cta {
/* v977: white label >=4.5:1 at every stop (was white on pale aurora ~1.6:1) */
background: var(--cta-gradient);
color: var(--cta-fg) !important;
padding: 9px 17px !important;
border-radius: 8px;
font-weight: 600;
font-size: 13.5px;
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background-color 0.22s var(--ease), color 0.22s var(--ease);
box-shadow: 0 0 0 1px rgba(255,255,255,0.32) inset, 0 6px 16px rgba(63, 127, 230, 0.36);
}
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(255,255,255,0.45) inset, 0 10px 24px rgba(63, 127, 230, 0.52), 0 0 36px rgba(43, 179, 163, 0.20);
}
/* ===========================================================
NAV — mobile collapse (v1242)
<=900px the inline .nav-links row was wrapping three deep on
phones. It hides; a 44px hamburger + right-anchored glass sheet
(line icons, 48px rows) takes over. The sheet and scrim hang off
the .nav box itself, so the native app's status-bar padding and
the fixed glass surface carry over for free. Note: .nav's
backdrop-filter makes it the containing block for positioned
descendants — the scrim uses top:100% + 100vh, not inset:0.
=========================================================== */
.nav-mobile-controls, .nav-mobile-sheet, .nav-mobile-scrim { display: none; }
@media (max-width: 900px) {
.nav .nav-links { display: none; }
.nav-mobile-controls {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.nav-mobile-controls .npte-theme-toggle {
min-width: 44px;
min-height: 44px;
}
.nav-menu-btn {
position: relative;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--srf-60);
color: var(--fg-2);
cursor: pointer;
transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav-menu-btn:hover { color: var(--fg); background: rgba(63, 127, 230, 0.08); }
.nav-menu-bar {
position: absolute;
left: 14px;
right: 14px;
height: 1.8px;
border-radius: 2px;
background: currentColor;
transition: transform 0.22s var(--ease);
}
.nav-menu-bar:nth-of-type(1) { transform: translateY(-3.5px); }
.nav-menu-bar:nth-of-type(2) { transform: translateY(3.5px); }
.nav.nav-menu-open .nav-menu-bar:nth-of-type(1) { transform: rotate(45deg); }
.nav.nav-menu-open .nav-menu-bar:nth-of-type(2) { transform: rotate(-45deg); }
.nav-mobile-scrim {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 100vh;
background: rgba(10, 14, 24, 0.38);
opacity: 0;
visibility: hidden;
pointer-events: none;
/* visibility interpolates discretely: stays visible through the fade */
transition: opacity 0.2s var(--ease), visibility 0.2s;
}
.nav.nav-menu-open .nav-mobile-scrim { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-mobile-sheet {
display: block;
position: absolute;
top: calc(100% + 10px);
right: 12px;
width: min(340px, calc(100vw - 24px));
max-height: min(70vh, 560px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px;
border-radius: 16px;
border: 1px solid var(--border-hi);
background: var(--srf-92);
backdrop-filter: var(--glass-filter-anchor);
-webkit-backdrop-filter: var(--glass-filter-anchor);
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 48px rgba(38, 60, 100, 0.22);
opacity: 0;
transform: translateY(-8px);
visibility: hidden; /* keeps closed-sheet links out of tab order */
pointer-events: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav.nav-menu-open .nav-mobile-sheet {
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
}
.nav-sheet-link {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 12px 14px;
border-radius: 10px;
color: var(--fg-2);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav-sheet-link svg { width: 18px; height: 18px; flex: none; opacity: 0.75; }
.nav-sheet-link:hover, .nav-sheet-link:active { color: var(--fg); background: rgba(63, 127, 230, 0.08); }
.nav-sheet-link.active { color: var(--accent-hi); background: var(--accent-lo); }
.nav-sheet-link.active svg { opacity: 1; }
.nav-sheet-divider {
height: 1px;
background: var(--border);
margin: 8px 6px;
}
.nav-sheet-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
margin-top: 10px;
padding: 12px 14px;
border-radius: 10px;
background: var(--cta-gradient);
color: var(--cta-fg) !important;
font-weight: 600;
font-size: 15px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.32) inset, 0 6px 16px rgba(63, 127, 230, 0.36);
}
.nav-sheet-cta svg { width: 17px; height: 17px; }
}
@media (max-width: 480px) {
.nav-brand-tag { display: none; }
.nav-brand-text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.nav-mobile-sheet, .nav-mobile-scrim, .nav-menu-bar { transition: none; }
}
.nav-cb {
font-family: var(--mono);
font-size: 11px;
color: var(--fg-3);
letter-spacing: 0.08em;
opacity: 0.45;
cursor: default;
pointer-events: none;
text-decoration: none;
}
.nav-cb:hover { color: var(--fg-3); }
/* ===========================================================
LAYOUT
=========================================================== */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--r-4);
position: relative;
z-index: 1;
}
.container-narrow {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--r-4);
position: relative;
z-index: 1;
}
/* ===========================================================
HERO
=========================================================== */
.hero {
padding: 168px 0 96px;
position: relative;
text-align: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: var(--accent-text); /* v977: was --accent-hi (pale, sub-AA) */
background: var(--srf-70);
border: 1px solid var(--border-hi);
padding: 7px 14px;
border-radius: 999px;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 28px;
font-weight: 600;
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
box-shadow: 0 4px 16px rgba(63, 127, 230, 0.10);
}
.hero-eyebrow::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.92); }
}
.hero h1 {
font-family: var(--serif);
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.015em;
margin-bottom: 24px;
color: var(--fg);
}
.title-phrase {
display: inline-block;
white-space: nowrap;
}
.hero h1 em {
/* v1232 editorial: italic serif accent in solid azure — no gradient clip */
font-style: italic;
font-weight: 600;
color: var(--accent-text);
display: inline-block;
}
.hero-sub {
font-size: 18px;
line-height: 1.55;
color: var(--fg-2);
max-width: 620px;
margin: 0 auto 40px;
font-weight: 400;
letter-spacing: -0.005em;
}
.hero-cta-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 72px;
}
/* ===========================================================
BUTTONS
=========================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
border-radius: 9px;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.22s var(--ease), background-color 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), color 0.22s var(--ease);
text-decoration: none;
font-family: inherit;
line-height: 1;
position: relative;
}
.btn svg { transition: transform 0.22s var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn:disabled,
button.btn[aria-disabled="true"] {
opacity: .48;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn[aria-busy="true"] { cursor: wait; }
.btn-primary {
/* v977: white label >=4.5:1 at every stop (was white on pale mint ~1.6:1) */
background: var(--cta-gradient);
color: var(--cta-fg);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.30) inset,
0 6px 16px rgba(63, 127, 230, 0.36),
0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.42) inset,
0 10px 28px rgba(63, 127, 230, 0.52),
0 0 40px rgba(43, 179, 163, 0.24);
}
.btn-gold {
background: linear-gradient(135deg, var(--gold) 0%, #e89a2c 100%);
color: #4a2e05; /* v977: deep amber ink — was white on light gold ~1.9:1 */
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.30) inset,
0 6px 16px rgba(245, 179, 82, 0.36);
}
.btn-gold:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 10px 28px rgba(245, 179, 82, 0.52),
0 0 36px rgba(245, 179, 82, 0.30);
}
.btn-ghost {
background: var(--srf-60);
color: var(--fg-2);
border-color: var(--hairline-strong);
box-shadow: inset 0 0 0 0.5px var(--border-hi);
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
}
.btn-ghost:hover {
background: var(--srf-92);
color: var(--fg);
border-color: var(--border-glow);
box-shadow: 0 4px 16px rgba(63, 127, 230, 0.12);
}
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
/* ===========================================================
STAT STRIP
=========================================================== */
.stat-strip {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
background: var(--plate-bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
margin-bottom: var(--r-6);
box-shadow: var(--glass-shadow);
}
.stat {
padding: 28px 24px;
text-align: center;
border-right: 1px solid var(--border);
position: relative;
}
.stat:last-child { border-right: none; }
.stat-num {
font-size: 38px;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--fg);
line-height: 1;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-num em {
font-style: normal;
font-size: 18px;
color: var(--fg-3);
font-weight: 500;
margin-left: 2px;
vertical-align: super;
letter-spacing: 0;
-webkit-text-fill-color: var(--fg-3);
}
.stat-label {
font-size: 11px;
color: var(--accent-hi);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
font-family: var(--mono);
}
@media (max-width: 720px) {
.stat { border-right: none; border-bottom: 1px solid var(--border); }
.stat:last-child { border-bottom: none; }
}
/* ===========================================================
SECTIONS
=========================================================== */
.section { padding: var(--r-7) 0; position: relative; }
.section-eyebrow {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 16px;
}
.section-title {
font-family: var(--serif);
font-size: clamp(1.9rem, 3.5vw, 2.5rem);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.12;
margin-bottom: 16px;
color: var(--fg);
}
.section-sub {
font-size: 17px;
color: var(--fg-2);
line-height: 1.55;
max-width: 580px;
margin-bottom: 56px;
}
.section-center { text-align: center; }
.section-center .section-sub { margin-left: auto; margin-right: auto; }
/* ===========================================================
FEATURE CARDS
=========================================================== */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--r-3);
}
.feature {
padding: var(--r-4);
background: var(--plate-bg);
border: 1px solid var(--border);
border-radius: 16px;
transition: transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease), background-color 0.32s var(--ease);
position: relative;
overflow: hidden;
box-shadow: var(--glass-shadow);
}
.feature::before {
content: '';
position: absolute;
inset: 0;
background: var(--aurora-gradient-soft);
opacity: 0;
transition: opacity 0.32s var(--ease);
pointer-events: none;
}
.feature:hover {
border-color: var(--border-glow);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.feature:hover::before { opacity: 1; }
.feature-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(63, 127, 230, 0.20), rgba(43, 179, 163, 0.10));
border: 1px solid rgba(63, 127, 230, 0.28);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
margin-bottom: 18px;
box-shadow: 0 4px 14px rgba(63, 127, 230, 0.16);
}
.feature h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 8px;
color: var(--fg);
position: relative;
}
.feature p {
font-size: 14px;
color: var(--fg-2);
line-height: 1.55;
position: relative;
}
.feature-premium {
background: linear-gradient(180deg, rgba(255, 248, 235, 0.92) 0%, rgba(255, 252, 245, 0.85) 100%);
border-color: rgba(245, 179, 82, 0.32);
}
.feature-premium .feature-icon {
background: linear-gradient(135deg, rgba(245, 179, 82, 0.24), rgba(247, 196, 120, 0.12));
border-color: rgba(245, 179, 82, 0.40);
color: #c47e1f;
box-shadow: 0 4px 14px rgba(245, 179, 82, 0.24);
}
.feature-premium:hover {
border-color: rgba(245, 179, 82, 0.55);
box-shadow: var(--shadow-lg), 0 0 48px rgba(245, 179, 82, 0.14);
}
/* ===========================================================
STEPS
=========================================================== */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--r-4);
margin-top: var(--r-5);
}
.step {
padding: 32px 24px;
background: var(--plate-bg);
border: 1px solid var(--border);
border-radius: 16px;
position: relative;
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
box-shadow: var(--shadow-sm);
}
.step:hover {
border-color: var(--border-glow);
transform: translateY(-2px);
box-shadow: var(--glass-shadow-hover);
}
.step-num {
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
letter-spacing: 0.18em;
margin-bottom: 18px;
display: block;
font-weight: 600;
}
.step h3 {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 10px;
color: var(--fg);
}
.step p {
font-size: 14px;
color: var(--fg-2);
line-height: 1.6;
}
/* ===========================================================
PRICING
=========================================================== */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--r-3);
}
.pricing-grid-compact {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 1080px;
margin: 0 auto;
gap: 18px;
}
.price {
padding: 36px 28px 32px;
background: var(--plate-bg);
border: 1px solid var(--border);
border-radius: 18px;
position: relative;
display: flex;
flex-direction: column;
transition: transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease), background-color 0.32s var(--ease);
box-shadow: var(--glass-shadow);
}
.price:hover {
border-color: var(--border-glow);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.price-featured {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 248, 255, 0.92) 100%);
border: 1px solid var(--accent);
box-shadow:
0 0 0 1px var(--accent) inset,
0 24px 56px rgba(63, 127, 230, 0.20),
0 0 64px rgba(43, 179, 163, 0.14);
}
.price-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--aurora-gradient);
color: #fff;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(63, 127, 230, 0.40);
}
.price-name {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 4px;
color: var(--fg);
}
.price-term {
display: inline-flex;
margin-left: 6px;
padding: 3px 8px;
border: 1px solid rgba(63, 127, 230, .28);
border-radius: 999px;
background: rgba(63, 127, 230, .10);
color: var(--accent-text);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
vertical-align: 2px;
}
.price-term-extended {
border-color: rgba(196, 126, 31, .24);
background: var(--gold-lo);
color: var(--gold-text);
}
.price-sub {
font-size: 13px;
color: var(--fg-3);
margin-bottom: 22px;
line-height: 1.5;
}
.price-amount {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
}
.price-amount-num {
font-size: 48px;
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1;
font-variant-numeric: tabular-nums;
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.price-featured .price-amount-num {
background: linear-gradient(135deg, var(--gold) 0%, #e89a2c 100%);
-webkit-background-clip: text;
background-clip: text;
}
.price-amount-period {
font-size: 14px;
color: var(--fg-3);
font-weight: 500;
}
.price-note {
font-size: 12.5px;
color: var(--fg-3);
margin: 0 0 22px;
font-family: var(--mono);
}
.price-cta {
display: block;
text-align: center;
padding: 12px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 26px;
transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease), color 0.22s var(--ease);
border: 1px solid var(--border-hi);
background: var(--srf-70);
color: var(--fg);
}
.price-cta:hover {
background: var(--srf-95);
border-color: var(--border-glow);
}
.price-cta-primary {
background: var(--aurora-gradient);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(63, 127, 230, 0.36);
}
.price-cta-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(63, 127, 230, 0.52), 0 0 36px rgba(43, 179, 163, 0.18);
}
.price-features {
list-style: none;
flex: 1;
}
.price-features li {
padding: 7px 0 7px 26px;
position: relative;
font-size: 14px;
color: var(--fg-2);
line-height: 1.5;
}
.price-features li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.price-features-compact li { padding-block: 5px; font-size: 13.25px; }
.pricing-includes {
max-width: 1080px;
margin: 20px auto 0;
display: grid;
grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.6fr) auto;
align-items: center;
gap: 24px;
padding: 22px 24px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--srf-60);
}
.pricing-includes-copy { display: grid; gap: 4px; color: var(--fg); }
.npte-kicker {
color: var(--accent-text);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.pricing-includes ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.pricing-includes li {
position: relative;
padding-left: 16px;
color: var(--fg-2);
font-size: 12.5px;
line-height: 1.45;
}
.pricing-includes li::before {
content: '';
position: absolute;
left: 0;
top: .52em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
}
.price-guarantee-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
color: var(--accent-text);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
line-height: 1.35;
text-align: center;
text-decoration: none;
}
.npte-disclosure {
max-width: 1080px;
margin: 14px auto 0;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--srf-45);
}
.npte-disclosure > summary {
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 10px 18px;
color: var(--fg-2);
cursor: pointer;
font-size: 13px;
list-style: none;
}
.npte-disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-action { color: var(--accent-text); font-weight: 700; white-space: nowrap; }
.npte-disclosure[open] .disclosure-action::before { content: 'Hide '; }
.npte-disclosure[open] .disclosure-action { font-size: 0; }
.npte-disclosure[open] .disclosure-action::before { font-size: 13px; }
.cohort-disclosure-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px 18px;
border-top: 1px solid var(--border);
}
.cohort-disclosure-body p { margin: 0; color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.pricing-reassurance {
margin: 20px auto 0;
color: var(--fg-3);
font-size: 13px;
text-align: center;
}
.pricing-reassurance strong { color: var(--fg-2); }
@media (max-width: 900px) {
.pricing-grid-compact { grid-template-columns: 1fr; max-width: 620px; }
.pricing-includes { max-width: 620px; grid-template-columns: 1fr; gap: 14px; }
.cohort-disclosure { max-width: 620px; }
}
@media (max-width: 576px) {
.price { padding: 30px 22px 26px; }
.price-amount-num { font-size: 42px; }
.pricing-includes ul { grid-template-columns: 1fr; }
.npte-disclosure > summary, .cohort-disclosure-body { align-items: flex-start; flex-direction: column; gap: 8px; }
.cohort-disclosure-body .btn { width: 100%; justify-content: center; }
}
.price-cohort {
grid-column: 1 / -1;
border: 1px dashed rgba(63, 127, 230, 0.45) !important;
background: rgba(63, 127, 230, 0.035) !important;
}
.price-cohort .price-name {
background: var(--cta-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
.price-cohort .price-amount-num {
background: var(--cta-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.price-cohort .price-cta {
background: var(--cta-gradient);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(63, 127, 230, 0.28);
}
.price-cohort .price-cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(63, 127, 230, 0.42), 0 0 36px rgba(125, 138, 166, 0.20);
}
.price-cohort .price-features li::before {
background-image: url("data:image/svg+xml;utf8,");
}
@media (min-width: 768px) {
.price-cohort {
display: grid !important;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
padding: 40px !important;
}
.price-cohort-main {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.price-cohort-main .price-cta {
margin-top: 20px;
margin-bottom: 0;
}
}
.bundle {
margin-top: 56px;
padding: 36px;
background: var(--plate-bg);
border: 1px solid var(--border-hi);
border-radius: 18px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: var(--glass-shadow);
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.bundle::before {
content: '';
position: absolute;
inset: 0;
background: var(--aurora-gradient-soft);
opacity: 0.5;
pointer-events: none;
}
.bundle-tag {
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 12px;
position: relative;
font-weight: 600;
}
.bundle h3 {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.03em;
margin-bottom: 12px;
position: relative;
color: var(--fg);
}
.bundle p {
color: var(--fg-2);
font-size: 15px;
margin-bottom: 20px;
position: relative;
line-height: 1.65;
}
.bundle-price {
color: #c47e1f;
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
}
/* ===========================================================
EXAM ENGINE
=========================================================== */
.exam-shell {
min-height: 100vh;
background: transparent;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.exam-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--srf-82);
backdrop-filter: var(--glass-filter-anchor);
-webkit-backdrop-filter: var(--glass-filter-anchor);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 16px rgba(38, 60, 100, 0.04);
}
.exam-header-brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
}
.exam-header-brand .nav-brand-mark { width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
.exam-progress {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
max-width: 460px;
}
.exam-progress-text {
font-family: var(--mono);
font-size: 12px;
color: var(--fg-3);
letter-spacing: 0.04em;
white-space: nowrap;
}
.exam-progress-bar {
flex: 1;
height: 4px;
background: rgba(63, 127, 230, 0.12);
border-radius: 2px;
overflow: hidden;
}
.exam-progress-fill {
height: 100%;
background: var(--aurora-gradient);
border-radius: 2px;
transition: width 0.4s var(--ease);
will-change: width;
box-shadow: 0 0 12px rgba(63, 127, 230, 0.40);
}
.exam-timer {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--fg);
letter-spacing: 0.04em;
padding: 8px 14px;
background: var(--srf-88);
border: 1px solid var(--border-hi);
border-radius: 8px;
min-width: 86px;
text-align: center;
font-variant-numeric: tabular-nums;
box-shadow: var(--shadow-sm);
}
.exam-timer.exam-timer-big {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 10px 18px;
background: var(--aurora-gradient-soft);
border-color: var(--border-glow);
min-width: 110px;
box-shadow: 0 0 24px rgba(63, 127, 230, 0.20), var(--shadow-sm);
}
.exam-timer.warn {
color: #b66e15;
border-color: rgba(232, 154, 44, 0.40);
background: rgba(255, 244, 220, 0.92);
}
.exam-timer.danger {
color: #b03d54;
border-color: rgba(232, 93, 117, 0.40);
background: rgba(255, 235, 240, 0.92);
animation: pulse-fast 1s ease-in-out infinite;
}
@keyframes pulse-fast {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.exam-main {
max-width: 760px;
margin: 0 auto;
padding: 56px 24px 32px;
flex: 1;
width: 100%;
}
.exam-cat-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.exam-cat {
display: inline-block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-hi);
font-weight: 600;
}
.exam-difficulty {
display: inline-flex;
gap: 2px;
align-items: center;
padding: 4px 10px;
background: var(--srf-78);
border: 1px solid var(--border-hi);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
color: var(--fg-3);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 600;
}
.exam-difficulty-label { margin-right: 6px; }
.exam-difficulty-hammer {
width: 9px;
height: 9px;
border-radius: 2px;
background: rgba(63, 127, 230, 0.22);
}
.exam-difficulty-hammer.on {
background: linear-gradient(180deg, var(--accent), var(--accent-hi));
box-shadow: 0 0 6px rgba(63, 127, 230, 0.55);
}
.exam-difficulty-hammer.on-gold {
background: linear-gradient(180deg, var(--gold-hi), var(--gold));
box-shadow: 0 0 6px rgba(245, 179, 82, 0.55);
}
/* v1236: named cognitive tier next to the hammers */
.exam-difficulty-tier {
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--border-hi);
color: var(--fg-2);
letter-spacing: 0.06em;
}
.exam-difficulty-tier[data-tier="4"] { color: var(--gold-text); }
.exam-difficulty-tier[data-tier="1"] { color: var(--fg-3); }
/* ═══ v1257: Text Size — reading-surface scale (Settings, works signed-out) ═══
Default 1 → zero change unless the user picks a size. data-text-size on
is set by npte-template.js from the local npte-text-size pref.
Only the READING text scales; chrome/nav/timer keep fixed sizes. */
:root { --npte-read-scale: 1; }
:root[data-text-size="compact"] { --npte-read-scale: 0.9; }
:root[data-text-size="large"] { --npte-read-scale: 1.15; }
.exam-stem {
font-size: calc(19px * var(--npte-read-scale));
line-height: 1.6;
color: var(--fg);
margin-bottom: 32px;
font-weight: 400;
letter-spacing: -0.015em;
}
.exam-stem strong { font-weight: 600; }
.exam-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.exam-option {
background: var(--plate-bg);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 18px 20px;
cursor: pointer;
display: flex;
align-items: flex-start;
gap: 16px;
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
text-align: left;
font-family: inherit;
width: 100%;
color: var(--fg);
font-size: calc(14.5px * var(--npte-read-scale));
line-height: 1.55;
box-shadow: var(--shadow-sm);
}
.exam-option:hover:not(:disabled) {
border-color: var(--border-glow);
background: var(--srf-95);
box-shadow: var(--glass-shadow-hover);
}
.exam-option.selected {
border-color: var(--accent);
background: rgba(238, 248, 255, 0.95);
box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px rgba(63, 127, 230, 0.18);
}
.exam-option.correct {
border-color: var(--success);
background: rgba(232, 250, 240, 0.95);
box-shadow: 0 0 0 1px var(--success) inset, 0 0 24px rgba(26, 166, 122, 0.16);
}
.exam-option.incorrect {
border-color: var(--error);
background: rgba(255, 240, 244, 0.95);
box-shadow: 0 0 0 1px var(--error) inset;
}
.exam-option-letter {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(63, 127, 230, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
color: var(--fg-2);
border: 1px solid var(--border-hi);
margin-top: 1px;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.exam-option.selected .exam-option-letter {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 0 12px rgba(63, 127, 230, 0.55);
}
.exam-option.correct .exam-option-letter {
background: var(--success);
color: #fff;
border-color: var(--success);
}
.exam-option.incorrect .exam-option-letter {
background: var(--error);
color: #fff;
border-color: var(--error);
}
.exam-option.distractor {
border-color: var(--border-hi);
background: var(--canvas-60);
opacity: 0.85;
}
.exam-option.distractor .exam-option-letter {
background: var(--bg-3);
color: var(--fg-3);
border-color: var(--border-hi);
opacity: 0.6;
}
.exam-option-text { flex: 1; }
.exam-option-feedback {
margin-top: 12px;
padding: 12px 14px;
background: var(--srf-78);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
color: var(--fg-2);
line-height: 1.6;
display: none;
}
.exam-option.correct .exam-option-feedback {
background: var(--srf-90);
border-color: rgba(26, 166, 122, 0.25);
color: #126e51;
}
.exam-option.incorrect .exam-option-feedback {
background: var(--srf-90);
border-color: rgba(232, 93, 117, 0.25);
color: #9c2738;
}
.exam-option.distractor .exam-option-feedback {
background: var(--srf-60);
border-color: var(--border-hi);
color: var(--fg-2);
}
.exam-option.show-feedback .exam-option-feedback { display: block; }
/* Feedback badges for option-level rationales */
.feedback-badge {
display: inline-block;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 2px 7px;
border-radius: 4px;
margin-bottom: 6px;
line-height: 1.4;
}
.feedback-badge.feedback-label-correct {
background: var(--success);
color: #ffffff;
}
.feedback-badge.feedback-label-incorrect {
background: var(--error);
color: #ffffff;
}
.feedback-badge.feedback-label-distractor {
background: var(--fg-3);
color: #ffffff;
}
.feedback-text {
font-size: 13px;
line-height: 1.55;
}
.exam-explanation {
margin-top: 28px;
padding: 22px 24px;
background: var(--plate-bg);
border: 1px solid var(--border-hi);
border-left: 3px solid var(--accent);
border-radius: 14px;
font-family: var(--font);
font-size: calc(15.5px * var(--npte-read-scale));
line-height: 1.7;
letter-spacing: -0.005em;
color: var(--fg);
display: none;
position: relative;
overflow: hidden;
box-shadow: var(--glass-shadow);
}
.exam-explanation strong { font-weight: 600; }
.exam-explanation .exam-peer,
.exam-explanation .exam-explanation-label,
.exam-explanation [class*="exam-peer-"] { font-family: var(--mono); }
.exam-explanation .exam-deep-cta { font-family: var(--font); }
.exam-explanation::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse 50% 50% at center, rgba(63, 127, 230, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.exam-explanation.show { display: block; }
.exam-explanation-label {
font-family: var(--mono);
font-size: 10.5px;
color: var(--accent-hi);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
/* v1247: the density toggle added a chip to this row; wrap so the peer/time
chips drop to a second line on narrow (app) widths instead of forcing the
explanation card wider than the viewport. */
flex-wrap: wrap;
}
.exam-explanation mark.hy {
background: var(--hy-bg);
color: var(--hy-fg);
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
border: 1px solid rgba(245, 179, 82, 0.28);
}
/* v1241: bracket-form marks ([HY:] etc.) used to render as display:block
callouts that fragmented sentences mid-flow (the marks are mid-sentence
spans in 179 live items). Unified: ALL marks are inline highlights so the
prose reads continuously; the scannable callout layer is the .exam-lens
strip that the exam renderer builds above the prose. */
.exp-mark-hy {
display: inline;
background: rgba(245, 179, 82, 0.10);
color: var(--gold-text);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(245, 179, 82, 0.28);
font-weight: 600;
}
.exam-explanation mark.trap {
background: var(--trap-bg);
color: var(--trap-fg);
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
border: 1px solid rgba(232, 93, 117, 0.28);
}
.exp-mark-trap {
display: inline;
background: rgba(232, 93, 117, 0.08);
color: var(--error-text);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(232, 93, 117, 0.28);
font-weight: 600;
}
.exam-explanation mark.mech {
background: var(--mech-bg);
color: var(--mech-fg);
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
border: 1px solid rgba(63, 127, 230, 0.28);
}
.exp-mark-mech {
display: inline;
background: rgba(63, 127, 230, 0.10);
color: var(--accent-text);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(63, 127, 230, 0.28);
font-weight: 600;
}
/* v1414: these marks are inline, so a border + radius + padding only draws on
the first and last line fragment when the mark wraps. On desktop a mark is a
short phrase and it reads as a neat pill; on a phone a 3-sentence [HY:] spans
six lines and the box shatters into ragged half-borders. clone closes the box
on every fragment, and at phone width the border comes off entirely so the
tint reads as a highlighter swipe rather than six stacked outlined pills. */
.exp-mark-hy, .exp-mark-trap, .exp-mark-mech,
.exam-explanation mark.hy,
.exam-explanation mark.trap,
.exam-explanation mark.mech {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (max-width: 560px) {
.exp-mark-hy, .exp-mark-trap, .exp-mark-mech,
.exam-explanation mark.hy,
.exam-explanation mark.trap,
.exam-explanation mark.mech {
border-color: transparent;
padding: 1px 3px;
}
}
/* ═══ v1241: scannable explanation — verdict bar + exam-lens strip ═══ */
.exam-verdict {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 10px;
margin-bottom: 14px;
font-size: calc(13.5px * var(--npte-read-scale));
line-height: 1.5;
position: relative;
}
.exam-verdict.ok {
background: rgba(61, 167, 124, 0.08);
border: 1px solid rgba(61, 167, 124, 0.25);
}
.exam-verdict.bad {
background: rgba(232, 93, 117, 0.07);
border: 1px solid rgba(232, 93, 117, 0.22);
}
.exam-verdict-badge {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.exam-verdict.ok .exam-verdict-badge { color: var(--success-text); }
.exam-verdict.bad .exam-verdict-badge { color: var(--error-text); }
.exam-verdict-answer { color: var(--fg-2); }
.exam-verdict-answer strong { color: var(--fg); font-weight: 700; }
.exam-lens {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0 14px;
position: relative;
}
/* v1252: label sits ABOVE the text as a tight eyebrow (was beside it, which
squeezed the copy into a narrow column and made every card tall/chunky on
a phone). Full-width text = fewer wraps = shorter cards. */
.exam-lens-row {
display: block;
padding: 8px 12px;
border-radius: 8px;
font-size: calc(13.5px * var(--npte-read-scale));
line-height: 1.5;
border: 1px solid var(--border-hi);
}
.exam-lens-tag {
display: block;
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 3px;
}
.exam-lens-text { color: var(--fg-2); display: block; }
/* extracted snippets carry their own inline marks — flatten inside the lens
so the row tint is the only highlight (no double-boxing) */
.exam-lens-text mark,
.exam-lens-text .exp-mark-hy,
.exam-lens-text .exp-mark-trap,
.exam-lens-text .exp-mark-mech {
background: transparent;
border: 0;
padding: 0;
color: inherit;
font-weight: 600;
}
.exam-lens-trap {
background: rgba(232, 93, 117, 0.06);
border-color: rgba(232, 93, 117, 0.18);
border-left: 3px solid var(--error);
}
.exam-lens-trap .exam-lens-tag { color: var(--error-text); }
.exam-lens-hy {
background: rgba(245, 179, 82, 0.07);
border-color: rgba(245, 179, 82, 0.20);
border-left: 3px solid var(--gold);
}
.exam-lens-hy .exam-lens-tag { color: var(--gold-text); }
.exam-lens-mech {
background: rgba(63, 127, 230, 0.06);
border-color: rgba(63, 127, 230, 0.18);
border-left: 3px solid var(--accent);
}
.exam-lens-mech .exam-lens-tag { color: var(--accent-text); }
/* ═══ v1247: explanation density — Concise (app) ⇄ In-depth ═══ */
/* Default = in-depth: full rationale shown, concise pieces hidden. The
data-expl-density attribute on (set by npte-template.js) flips it.
If JS never runs, the safe fallback is the full explanation. */
.exam-short { display: none; }
.exam-expand-btn { display: none; }
.exam-full { display: block; }
[data-expl-density="concise"] .exam-short { display: block; }
[data-expl-density="concise"] .exam-expand-btn { display: inline-flex; }
[data-expl-density="concise"] .exam-full { display: none; }
[data-expl-density="concise"] .exam-full.open { display: block; margin-top: 14px; }
/* v1282: "thin" items (full rationale ≈ the one-liner) render once with no
concise/expand controls — always visible in either density so Concise and
In-depth can't show two identical views. */
.exam-full--solo,
[data-expl-density="concise"] .exam-full--solo { display: block; }
/* The concise "bottom line" card */
.exam-short {
margin: 6px 0 2px;
padding: 13px 15px;
border-radius: 11px;
background: var(--accent-lo);
border: 1px solid var(--border-hi);
}
.exam-short-why {
margin: 0;
font-size: calc(14.5px * var(--npte-read-scale));
line-height: 1.55;
color: var(--fg);
font-weight: 500;
}
.exam-short-trap {
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px dashed var(--border-hi);
font-size: calc(13px * var(--npte-read-scale));
line-height: 1.5;
color: var(--fg-2);
display: flex;
gap: 8px;
align-items: baseline;
}
.exam-short-trap-tag {
flex: 0 0 auto;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--error-text);
}
/* "Read full breakdown ▸" expander */
.exam-expand-btn {
align-items: center;
gap: 6px;
margin: 12px 0 2px;
padding: 8px 13px;
background: transparent;
border: 1px solid var(--border-hi);
border-radius: 9px;
color: var(--accent-text);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.exam-expand-btn:hover { background: var(--accent-lo); border-color: var(--accent); }
.exam-expand-caret { transition: transform .18s ease; }
.exam-expand-btn.open .exam-expand-caret { transform: rotate(90deg); }
/* v1307: the header "Concise | In-depth" toggle CSS is gone — v1282 removed
the control itself (redundant with the expander; density default lives in
Settings), these rules had styled markup that no longer exists anywhere. */
.exam-explanation-prose-label {
font-family: var(--mono);
font-size: 10px;
color: var(--fg-3);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
margin: 4px 0 8px;
}
/* ═══ v1244: exam loading skeleton + error state ═══ */
.exam-skeleton { display: flex; flex-direction: column; gap: 12px; }
.exam-skeleton .sk-line {
height: 18px;
border-radius: 6px;
margin: 4px 0;
background: linear-gradient(100deg, var(--srf-45) 30%, var(--border-hi) 50%, var(--srf-45) 70%);
background-size: 200% 100%;
animation: sk-shimmer 1.4s ease-in-out infinite;
}
#exam-options .exam-skeleton { gap: 10px; margin-top: 6px; }
.exam-skeleton .sk-option {
display: flex; align-items: center; gap: 14px;
padding: 18px; border: 1px solid var(--border-hi); border-radius: 12px;
}
.exam-skeleton .sk-dot {
width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
background: linear-gradient(100deg, var(--srf-45) 30%, var(--border-hi) 50%, var(--srf-45) 70%);
background-size: 200% 100%;
animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.exam-skeleton .sk-line, .exam-skeleton .sk-dot { animation: none; opacity: .6; }
}
.exam-error-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; padding: 40px 24px; max-width: 460px; margin: 12px auto;
}
.exam-error-icon { font-size: 34px; line-height: 1; }
.exam-error-title { font-size: 18px; font-weight: 700; color: var(--fg); }
.exam-error-msg { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.exam-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.exam-error-actions .exam-btn { text-decoration: none; }
.exam-peer {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(63, 127, 230, 0.10);
border: 1px solid var(--border-hi);
border-radius: 999px;
font-family: var(--mono);
font-size: 10.5px;
color: var(--accent-hi);
letter-spacing: 0.06em;
font-weight: 600;
margin-left: auto;
}
.exam-peer-bar {
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(63, 127, 230, 0.18);
overflow: hidden;
position: relative;
}
.exam-peer-bar-fill {
position: absolute;
inset: 0;
border-radius: 2px;
background: var(--aurora-gradient);
}
.exam-deep-cta {
margin-top: 18px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(245, 179, 82, 0.12), rgba(63, 127, 230, 0.08));
border: 1px solid rgba(245, 179, 82, 0.28);
border-radius: 11px;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
font-family: var(--font);
color: var(--fg);
font-size: 13.5px;
font-weight: 500;
width: 100%;
text-align: left;
}
.exam-deep-cta:hover {
border-color: rgba(245, 179, 82, 0.50);
background: linear-gradient(135deg, rgba(245, 179, 82, 0.20), rgba(63, 127, 230, 0.14));
box-shadow: 0 0 32px rgba(245, 179, 82, 0.20);
transform: translateY(-1px);
}
.exam-deep-cta-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(245, 179, 82, 0.24), rgba(247, 196, 120, 0.12));
border: 1px solid rgba(245, 179, 82, 0.36);
display: flex;
align-items: center;
justify-content: center;
color: #c47e1f;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(245, 179, 82, 0.20);
}
.exam-deep-cta-text { flex: 1; line-height: 1.4; }
.exam-deep-cta-text strong { color: #c47e1f; font-weight: 600; }
.exam-deep-cta-text small {
display: block;
margin-top: 2px;
color: var(--fg-3);
font-size: 11.5px;
font-weight: 400;
}
.exam-deep-cta-arrow {
color: #c47e1f;
transition: transform 0.22s var(--ease);
}
.exam-deep-cta:hover .exam-deep-cta-arrow { transform: translateX(3px); }
.exam-controls {
max-width: 760px;
margin: 0 auto;
padding: 0 24px 56px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.exam-btn {
padding: 11px 22px;
border-radius: 9px;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
cursor: pointer;
border: 1px solid var(--border-hi);
background: var(--srf-85);
color: var(--fg);
font-family: inherit;
transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
box-shadow: var(--shadow-sm);
min-height: 44px; /* 44px tap floor — highest-frequency control in the app */
}
.exam-btn:hover:not(:disabled) {
background: var(--srf-98);
border-color: var(--border-glow);
box-shadow: var(--glass-shadow-hover);
}
.exam-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.exam-btn-primary {
background: var(--aurora-gradient);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 16px rgba(63, 127, 230, 0.32);
}
.exam-btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(63, 127, 230, 0.50), 0 0 32px rgba(43, 179, 163, 0.20);
}
.exam-btn-group {
display: flex;
gap: 10px;
}
/* ===========================================================
DASHBOARD / RESULTS
=========================================================== */
.dash-shell {
max-width: 1100px;
margin: 0 auto;
padding: 112px 24px 64px;
position: relative;
z-index: 1;
}
.dash-h1 {
/* v1438: gradient text was retired in the de-AI'd redesign (v1232) — this
was the last holdout (results "Exam complete."). Editorial serif ink. */
font-family: var(--serif);
font-size: 38px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.12;
margin-bottom: 8px;
color: var(--fg);
display: inline-block;
}
.dash-sub {
color: var(--fg-2);
font-size: 15.5px;
margin-bottom: 40px;
font-weight: 400;
}
.dash-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--r-3);
}
@media (max-width: 820px) {
.dash-grid { grid-template-columns: 1fr; }
}
.card {
background: var(--plate-bg);
border: 1px solid var(--border);
/* --r-3 (16px). Was 18px — off the 4/8/16/24 scale, and the odd one out
against .apph-card / .gym-card, so Results read as a different system
from Home and Gym. */
border-radius: 16px;
padding: 28px;
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
position: relative;
overflow: hidden;
box-shadow: var(--glass-shadow);
}
.card:hover {
border-color: var(--border-glow);
box-shadow: var(--glass-shadow-hover);
}
.card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 24px;
}
.card-title {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--fg);
}
.card-tag {
font-family: var(--mono);
font-size: 10.5px;
color: var(--accent-hi);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.score-hero {
text-align: center;
padding: 24px 0 30px;
}
.score-num {
font-size: 102px;
font-weight: 600;
letter-spacing: -0.055em;
line-height: 0.95;
color: var(--fg);
font-variant-numeric: tabular-nums;
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.score-num-sub {
font-size: 14px;
color: var(--fg-3);
margin-top: 14px;
letter-spacing: -0.01em;
}
.score-row {
display: flex;
justify-content: space-around;
padding-top: 26px;
margin-top: 4px;
border-top: 1px solid var(--border);
}
.score-row-cell { text-align: center; flex: 1; }
.score-row-num {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--fg);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.score-row-label {
font-family: var(--mono);
font-size: 10.5px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: 8px;
font-weight: 600;
}
.score-row-num.pass { color: var(--success); }
.score-row-num.below { color: var(--warn); }
.cat-row {
display: grid;
grid-template-columns: 1fr 1.4fr auto;
align-items: center;
gap: 16px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.cat-row:last-child { border-bottom: none; }
.cat-name {
font-size: 13.5px;
font-weight: 500;
color: var(--fg);
letter-spacing: -0.01em;
}
.cat-bar {
height: 6px;
background: rgba(63, 127, 230, 0.10);
border-radius: 3px;
overflow: hidden;
}
.cat-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s var(--ease); will-change: width; }
.cat-bar-fill.weak { background: linear-gradient(90deg, var(--error), #f29ab0); }
.cat-bar-fill.medium { background: linear-gradient(90deg, var(--warn), #f7c478); }
.cat-bar-fill.strong { background: linear-gradient(90deg, var(--success), #8ff0d4); }
.cat-pct {
font-family: var(--mono);
font-size: 12.5px;
color: var(--fg-2);
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 72px;
text-align: right;
}
.action-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
/* ===========================================================
READINESS SCORE
=========================================================== */
.readiness-card {
background:
radial-gradient(ellipse 90% 70% at 30% 0%, rgba(43, 179, 163, 0.20) 0%, transparent 60%),
radial-gradient(ellipse 70% 60% at 80% 100%, rgba(245, 179, 82, 0.12) 0%, transparent 65%),
rgba(255, 255, 255, 0.92);
border: 1px solid var(--border-hi);
border-radius: 20px;
padding: 36px 32px;
position: relative;
overflow: hidden;
box-shadow: var(--glass-shadow);
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.readiness-card:hover {
transform: translateY(-2px);
border-color: var(--border-focus);
box-shadow: var(--shadow-xl), 0 0 36px rgba(63, 127, 230, 0.14);
}
.readiness-card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(63, 127, 230, 0.40), transparent 40%, transparent 60%, rgba(245, 179, 82, 0.32));
z-index: -1;
}
.readiness-eyebrow {
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
}
.readiness-title {
font-size: 17px;
font-weight: 600;
color: var(--fg-2);
letter-spacing: -0.015em;
margin-bottom: 18px;
}
.readiness-score {
font-size: 96px;
font-weight: 600;
letter-spacing: -0.055em;
line-height: 0.95;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 8px;
}
.readiness-score-num {
background: linear-gradient(135deg, var(--gold) 0%, #e89a2c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.readiness-score.ready .readiness-score-num {
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.readiness-score-max {
font-size: 28px;
font-weight: 500;
color: var(--fg-3);
letter-spacing: -0.02em;
}
.readiness-status {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(63, 127, 230, 0.10);
border: 1px solid var(--border-hi);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 600;
}
.readiness-status.ready {
background: rgba(26, 166, 122, 0.12);
border-color: rgba(26, 166, 122, 0.32);
color: var(--success);
}
.readiness-status::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}
.readiness-meta {
margin-top: 18px;
font-size: 13.5px;
color: var(--fg-2);
line-height: 1.6;
}
.readiness-bar {
margin-top: 20px;
height: 8px;
background: rgba(63, 127, 230, 0.12);
border-radius: 4px;
overflow: hidden;
position: relative;
border: 1px solid var(--border);
}
.readiness-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--gold));
border-radius: 4px;
transition: width 0.8s var(--ease);
will-change: width;
box-shadow: 0 0 16px rgba(63, 127, 230, 0.40);
}
.readiness-bar.ready .readiness-bar-fill {
background: var(--aurora-gradient);
box-shadow: 0 0 16px rgba(43, 179, 163, 0.50);
}
.readiness-bar-threshold {
position: absolute;
top: -2px;
bottom: -2px;
width: 2px;
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
pointer-events: none;
}
.readiness-bar-threshold::after {
content: 'READY';
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 9px;
color: #c47e1f;
letter-spacing: 0.16em;
font-weight: 700;
}
/* ===========================================================
FOOTER
=========================================================== */
.footer {
border-top: 1px solid var(--border);
padding: 40px 24px;
text-align: center;
font-family: var(--mono);
font-size: 11.5px;
color: var(--fg-3);
letter-spacing: 0.04em;
position: relative;
z-index: 1;
background: var(--srf-40);
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
}
.footer a { color: var(--accent-hi); text-decoration: none; }
.footer a:hover { color: var(--accent); }
/* ===========================================================
UTILITIES + REVEAL
=========================================================== */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--r-2); }
.mt-2 { margin-top: var(--r-3); }
.mt-3 { margin-top: var(--r-4); }
.mt-4 { margin-top: var(--r-5); }
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(14px);
animation: reveal 0.7s var(--ease-out-cubic) forwards;
will-change: opacity, transform;
}
.reveal:nth-child(2) { animation-delay: 0.06s; }
.reveal:nth-child(3) { animation-delay: 0.12s; }
.reveal:nth-child(4) { animation-delay: 0.18s; }
.reveal:nth-child(5) { animation-delay: 0.24s; }
.reveal:nth-child(6) { animation-delay: 0.30s; }
@keyframes reveal {
to { opacity: 1; transform: translateY(0); }
}
}
/* ===========================================================
DAVE THE PT — 4-section board card on light surface
=========================================================== */
.ai-board {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.ai-section {
padding: 18px 22px;
border-radius: 14px;
background: var(--srf-92);
border: 1px solid var(--border-hi);
font-family: var(--font);
font-size: 15.5px;
line-height: 1.7;
letter-spacing: -0.005em;
color: var(--fg);
position: relative;
box-shadow: var(--shadow-sm);
transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.ai-section:hover {
transform: translateY(-1px);
border-color: var(--border-glow);
box-shadow: var(--glass-shadow-hover);
}
.ai-section .ai-section-label, .ai-section .ai-distractor-letter { font-family: var(--mono); }
.ai-section-label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
}
.ai-section-icon {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.ai-section.correct {
border-left: 3px solid var(--success);
background: linear-gradient(180deg, rgba(232, 250, 240, 0.92), rgba(255, 255, 255, 0.92));
}
.ai-section.correct .ai-section-label { color: var(--success); }
.ai-section.correct .ai-section-icon { background: rgba(26, 166, 122, 0.16); color: var(--success); }
.ai-section.distractors {
border-left: 3px solid var(--error);
background: linear-gradient(180deg, rgba(255, 240, 244, 0.92), rgba(255, 255, 255, 0.92));
}
.ai-section.distractors .ai-section-label { color: var(--error); }
.ai-section.distractors .ai-section-icon { background: rgba(232, 93, 117, 0.16); color: var(--error); }
.ai-distractor {
padding: 10px 14px;
background: var(--srf-78);
border: 1px solid rgba(232, 93, 117, 0.20);
border-radius: 9px;
margin-top: 8px;
font-size: 13.5px;
line-height: 1.55;
}
.ai-distractor-letter {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 5px;
background: rgba(232, 93, 117, 0.22);
color: var(--error);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 20px;
margin-right: 8px;
vertical-align: middle;
}
.ai-section.mechanism {
border-left: 3px solid var(--accent);
background: linear-gradient(180deg, rgba(238, 248, 255, 0.92), rgba(255, 255, 255, 0.92));
}
.ai-section.mechanism .ai-section-label { color: var(--accent-hi); }
.ai-section.mechanism .ai-section-icon { background: rgba(63, 127, 230, 0.16); color: var(--accent); }
.ai-section.pearl {
border-left: 3px solid var(--gold);
background: linear-gradient(180deg, rgba(255, 248, 235, 0.92), rgba(255, 255, 255, 0.92));
}
.ai-section.pearl .ai-section-label { color: #c47e1f; }
.ai-section.pearl .ai-section-icon { background: rgba(245, 179, 82, 0.22); color: #c47e1f; }
.ai-citation {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
margin: 0 2px;
background: rgba(63, 127, 230, 0.12);
border: 1px solid var(--border-hi);
border-radius: 5px;
font-family: var(--mono);
font-size: 11px;
color: var(--accent-hi);
font-weight: 600;
white-space: nowrap;
letter-spacing: -0.01em;
}
.ai-citation::before {
content: '⌗';
font-size: 10px;
opacity: 0.7;
}
/* Dave saying "I can't answer that" is still Dave talking, so it reads as
prose, not as a warning panel nested inside a chat bubble. The bold lead-in
carries the signal now — which is why it moves to --warn-text: --warn
(#e89a2c) on white is ~2.2:1 and fails AA, and it used to be decoration
sitting next to a rail rather than the affordance itself. */
.ai-refuse {
padding: 0;
background: none;
border: 0;
border-radius: 0;
color: var(--fg-2);
font-size: 14px;
line-height: 1.65;
}
.ai-refuse strong { color: var(--warn-text); }
.ai-loading {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: rgba(63, 127, 230, 0.08);
border: 1px solid var(--border-hi);
border-radius: 12px;
font-family: var(--mono);
font-size: 12.5px;
color: var(--accent-hi);
letter-spacing: 0.06em;
}
.ai-loading-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(63, 127, 230, 0.25);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===========================================================
DIAGNOSTIC PAGE
=========================================================== */
.diag-shell {
min-height: 100vh;
background: transparent;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.diag-intro {
max-width: 720px;
margin: 0 auto;
padding: 144px 24px 56px;
text-align: center;
}
.diag-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
color: #c47e1f;
background: rgba(255, 248, 235, 0.92);
border: 1px solid rgba(245, 179, 82, 0.32);
padding: 7px 14px;
border-radius: 999px;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 28px;
font-weight: 600;
box-shadow: 0 4px 24px rgba(245, 179, 82, 0.14);
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
}
.diag-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 12px var(--gold);
animation: pulse 2.4s ease-in-out infinite;
}
.diag-h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.05;
margin-bottom: 18px;
color: var(--fg);
}
.diag-h1 em {
font-style: normal;
font-weight: 700;
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.diag-sub {
font-family: var(--font);
font-size: 17px;
color: var(--fg-2);
line-height: 1.65;
max-width: 560px;
margin: 0 auto 36px;
letter-spacing: -0.005em;
}
.diag-meta {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.diag-meta-cell { text-align: center; }
.diag-meta-num {
font-size: 32px;
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
background: var(--aurora-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.diag-meta-label {
font-family: var(--mono);
font-size: 10.5px;
color: var(--fg-3);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 4px;
font-weight: 600;
}
/* ===========================================================
FORMS
=========================================================== */
input.cb-form-field, textarea.cb-form-field, select.cb-form-field {
width: 100%;
background: var(--srf-92);
border: 1px solid var(--border-hi);
border-radius: 9px;
padding: 11px 14px;
color: var(--fg);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
box-shadow: var(--shadow-sm);
}
input.cb-form-field:focus, textarea.cb-form-field:focus, select.cb-form-field:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* ===========================================================
AURORA DIVIDER
=========================================================== */
.cosmic-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--border-hi) 30%,
var(--accent) 50%,
var(--border-hi) 70%,
transparent 100%);
margin: var(--r-6) auto;
max-width: 480px;
position: relative;
opacity: 0.7;
}
.cosmic-divider::before {
content: '✦';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--bg);
padding: 0 16px;
color: var(--accent);
font-size: 12px;
letter-spacing: 0;
}
/* ==========================================================================
v977 LIQUID GLASS — GLOBAL POLISH
========================================================================== */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
::selection { background: rgba(37, 99, 235, 0.18); color: var(--fg); }
/* Card hover: slab lifts, light pools — never scale */
.feature:hover, .price:hover, .card:hover, .readiness-card:hover, .bundle:hover {
box-shadow: var(--glass-shadow-hover);
}
/* Recessed numeric readout well — exam stats, countdowns, scores */
.np-readout {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 4px 10px; border-radius: 6px;
background: var(--well-bg); box-shadow: var(--well-shadow);
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 15px; font-weight: 600; color: var(--fg);
}
.np-readout .unit { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; }
/* Indexed hairline rule — editorial section spine */
.np-rule {
display: flex; align-items: center; gap: 14px;
margin: 48px 0 16px;
}
.np-rule .np-index {
font: 600 11px/1 var(--mono);
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent-text); white-space: nowrap;
}
.np-rule::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
/* v977 promotions — patterns harvested from page-level inline CSS */
.feature[onclick] { cursor: pointer; }
/* Generic mono badge — replaces 5+ hand-rolled inline badges */
.np-badge {
display: inline-flex; align-items: center; gap: 5px;
font: 700 10.5px/1 var(--mono);
letter-spacing: 0.10em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px;
color: var(--accent-text); background: var(--accent-lo);
border: 1px solid var(--accent-border);
}
.np-badge.gold { color: var(--gold-text); background: var(--gold-lo); border-color: rgba(184, 115, 31, 0.25); }
.np-badge.mint { color: var(--mint-text); background: var(--aurora-mint-lo); border-color: rgba(12, 125, 104, 0.22); }
.np-badge.success { color: var(--success-text); background: var(--success-bg); border-color: var(--success-border); }
.np-badge.error { color: var(--error-text); background: var(--error-bg); border-color: var(--error-border); }
/* ==========================================================================
MOBILE RESPONSIVENESS & ACCESSIBILITY (v1057)
========================================================================== */
/* Error taxonomy custom row layout to ensure wrapping on small screens */
.error-tax-row {
display: grid;
grid-template-columns: 170px 1fr auto;
align-items: center;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.error-tax-row:last-child {
border-bottom: none;
}
.error-tax-label {
font-size: 13.5px;
color: var(--fg);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.error-tax-bar-container {
height: 8px;
background: rgba(122, 156, 220, 0.10);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--border);
}
.error-tax-bar-fill {
height: 100%;
border-radius: 4px;
}
.error-tax-value {
text-align: right;
font-family: var(--mono);
font-size: 12.5px;
color: var(--fg-2);
font-weight: 600;
}
/* 44px Minimum Touch Targets for accessibility */
.exam-report-x,
.npte-bug-modal-close,
.cb-npte-x,
.ac-close-btn,
.exam-report-close-btn {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (max-width: 768px) {
/* Compress nav bar elements */
.nav {
padding: 0 16px;
gap: 12px;
}
.nav-brand-tag {
display: none !important; /* Hide badge to save width */
}
.nav-links {
gap: 8px;
}
.nav-link {
padding: 6px 10px;
font-size: 13px;
}
/* Hide spacer inside question review/toolbar to prevent button row wrapping */
.qr-toolbar .flex-spacer {
display: none !important;
}
}
@media (max-width: 600px) {
/* Stack error taxonomy on mobile */
.error-tax-row {
grid-template-columns: 1fr auto;
gap: 8px;
}
.error-tax-row .error-tax-bar-container {
grid-column: span 2;
order: 3;
margin-top: 4px;
}
/* Stack category rows on mobile to prevent squeezing names */
.cat-row {
grid-template-columns: 1fr auto !important;
gap: 8px !important;
}
.cat-row .cat-bar {
grid-column: span 2 !important;
order: 3 !important;
margin-top: 4px !important;
}
/* Scale down large score metrics */
.score-num {
font-size: 48px !important;
}
.readiness-score {
font-size: 42px !important;
}
/* Compact exam header layout */
.exam-header {
padding: 10px 16px !important;
gap: 10px;
}
.exam-header-brand span {
display: none !important; /* Hide 'NPTE Blueprint' text to save space */
}
.exam-progress {
flex: 1;
}
.exam-timer {
font-size: 14px !important;
}
}
@media (max-width: 480px) {
/* v1242: wordmark stays — the hamburger sheet replaced the inline link
pile, so the bar has room for the brand at every phone width. */
.nav-links {
width: 100%;
justify-content: flex-end;
}
}
/* ===========================================================
BOARD EXAM SIMULATOR MODE
=========================================================== */
.board-simulator-mode {
background-color: #d3d3d3 !important;
font-family: Arial, Helvetica, sans-serif !important;
color: #000000 !important;
}
.board-simulator-mode.exam-shell {
min-height: 100vh;
background-color: #d3d3d3 !important;
}
/* Simulated Header: Solid dark blue bar */
.board-simulator-mode .exam-header {
background: #002244 !important;
border-bottom: 2px solid #000000 !important;
padding: 10px 16px !important;
box-shadow: none !important;
}
.board-simulator-mode .exam-header-brand {
color: #ffffff !important;
font-family: Arial, sans-serif !important;
font-size: 15px !important;
font-weight: bold !important;
}
.board-simulator-mode .exam-header-brand .nav-brand-mark {
background: #ffffff !important;
color: #002244 !important;
border-radius: 0 !important;
}
/* Turn off glossy pseudo-elements on retro brand mark */
.board-simulator-mode .exam-header-brand .nav-brand-mark::before,
.board-simulator-mode .exam-header-brand .nav-brand-mark::after {
display: none !important;
}
/* Hide the graphical progress bar in simulator mode */
.board-simulator-mode .exam-progress-bar {
display: none !important;
}
.board-simulator-mode .exam-progress-text {
font-family: Arial, sans-serif !important;
font-size: 14px !important;
color: #ffffff !important;
font-weight: bold !important;
}
/* Simulated Timer: plain, simple */
.board-simulator-mode .exam-timer {
background: #ffffff !important;
color: #000000 !important;
border: 2px solid #000000 !important;
border-radius: 0 !important;
font-family: "Courier New", Courier, monospace !important;
font-weight: bold !important;
font-size: 15px !important;
padding: 6px 12px !important;
}
/* Main content frame: plain white box, sharp borders */
.board-simulator-mode .exam-main {
background: #ffffff !important;
border: 2px solid #000000 !important;
border-radius: 0 !important;
max-width: 960px !important;
margin: 24px auto !important;
padding: 24px !important;
box-shadow: none !important;
}
/* Question category badge */
.board-simulator-mode .exam-cat-row {
border-bottom: 1px solid #000000 !important;
padding-bottom: 10px !important;
margin-bottom: 16px !important;
}
.board-simulator-mode .exam-cat {
font-family: Arial, sans-serif !important;
font-weight: bold !important;
color: #002244 !important;
font-size: 13px !important;
letter-spacing: normal !important;
text-transform: uppercase !important;
}
/* Hide modern difficulty indicators in simulator mode */
.board-simulator-mode #exam-difficulty {
display: none !important;
}
/* Question stem style */
.board-simulator-mode .exam-stem {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: #000000 !important;
margin-bottom: 24px !important;
}
/* Option choices */
.board-simulator-mode .exam-option {
background: #ffffff !important;
border: 1px solid #7f7f7f !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #000000 !important;
font-family: Arial, sans-serif !important;
font-size: 15px !important;
padding: 12px 16px !important;
margin-bottom: 8px !important;
}
.board-simulator-mode .exam-option:hover:not(:disabled) {
background: #f0f4f8 !important;
border-color: #002244 !important;
}
.board-simulator-mode .exam-option.selected {
background: #dbebff !important;
border: 2px solid #002244 !important;
box-shadow: none !important;
}
/* Option letters */
.board-simulator-mode .exam-option-letter {
border-radius: 0 !important;
background: #f0f0f0 !important;
border: 1px solid #7f7f7f !important;
color: #000000 !important;
font-family: "Courier New", Courier, monospace !important;
font-size: 13px !important;
}
.board-simulator-mode .exam-option.selected .exam-option-letter {
background: #002244 !important;
color: #ffffff !important;
border-color: #002244 !important;
}
/* Correct/Incorrect revealed states in simulator mode */
.board-simulator-mode .exam-option.correct {
background: #e6f7ed !important;
border: 2px solid #1aa67a !important;
}
.board-simulator-mode .exam-option.incorrect {
background: #ffebeb !important;
border: 2px solid #ea580c !important;
}
.board-simulator-mode .exam-option.correct .exam-option-letter {
background: #1aa67a !important;
color: #000000 !important; /* WCAG AA Fix */
}
.board-simulator-mode .exam-option.incorrect .exam-option-letter {
background: #ea580c !important;
color: #000000 !important; /* WCAG AA Fix */
}
/* Option letters WCAG AA contrast fix for default mode */
.exam-option.correct .exam-option-letter,
.exam-option.incorrect .exam-option-letter {
color: #000000 !important;
}
/* Option feedback badges WCAG AA contrast fix */
.feedback-badge.feedback-label-correct {
background: var(--success-text) !important;
}
.feedback-badge.feedback-label-incorrect {
background: var(--error-text) !important;
}
.feedback-badge.feedback-label-distractor {
background: var(--fg-2) !important;
}
/* Mobile Touch-Callout and Selection override for options */
.exam-option {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Strikeout text-decoration when an option is right-clicked */
.exam-option.struck-out {
opacity: 0.35 !important;
text-decoration: line-through !important;
}
.exam-option.struck-out .exam-option-letter {
text-decoration: none !important; /* Keep letters clean */
}
/* Option elimination button for mobile/touch/a11y */
.exam-option-eliminate-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(232, 93, 117, 0.08);
border: 1px dashed rgba(232, 93, 117, 0.3);
color: var(--error-text);
font-size: 13px;
cursor: pointer;
padding: 0;
margin-left: 8px;
transition: all 0.15s ease;
user-select: none;
}
.exam-option-eliminate-btn:hover {
background: var(--error-bg);
border-color: var(--error);
color: var(--error-text);
}
.exam-option.struck-out .exam-option-eliminate-btn {
background: var(--error);
color: #ffffff;
border-style: solid;
}
/* Controls at bottom: Flat grey rectangular buttons */
.board-simulator-mode .exam-controls {
padding: 16px 24px 40px !important;
background: #f0f0f0 !important;
border-top: 1px solid #7f7f7f !important;
border-radius: 0 !important;
}
.board-simulator-mode .exam-btn {
border-radius: 0 !important;
border: 1px solid #7f7f7f !important;
background: #e0e0e0 !important;
color: #000000 !important;
font-family: Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: bold !important;
box-shadow: none !important;
padding: 8px 16px !important;
}
.board-simulator-mode .exam-btn:hover:not(:disabled) {
background: #d0d0d0 !important;
border-color: #000000 !important;
}
.board-simulator-mode .exam-btn-primary {
background: #002244 !important;
color: #ffffff !important;
border-color: #002244 !important;
}
.board-simulator-mode .exam-btn-primary:hover:not(:disabled) {
background: #001122 !important;
border-color: #001122 !important;
}
/* Secondary Actions row (Flag, Bookmark) */
.board-simulator-mode .exam-secondary-row {
margin-bottom: 16px !important;
}
.board-simulator-mode .exam-secondary-btn {
border-radius: 0 !important;
border: 1px solid #7f7f7f !important;
background: #e0e0e0 !important;
color: #000000 !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
box-shadow: none !important;
}
.board-simulator-mode .exam-secondary-btn:hover {
background: #d0d0d0 !important;
}
/* Flat retro states for flagged / bookmarked buttons in Simulator Mode */
.board-simulator-mode .exam-secondary-btn.flagged,
.board-simulator-mode .exam-secondary-btn.bookmarked {
background: #002244 !important;
color: #ffffff !important;
border-color: #000000 !important;
box-shadow: none !important;
}
/* Align controls and secondary row to the 960px main grid in Simulator Mode */
.board-simulator-mode .exam-controls,
.board-simulator-mode .exam-secondary-row {
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Prevent full-width flushing of black borders on mobile */
@media (max-width: 960px) {
.board-simulator-mode .exam-main {
margin: 16px !important;
}
}
/* ===========================================================
CLINICAL REFERENCE STUDY CARDS
=========================================================== */
.exam-reference-card {
border: 1px solid rgba(43, 179, 163, 0.3);
background: linear-gradient(180deg, rgba(43, 179, 163, 0.06), rgba(43, 179, 163, 0.01));
border-radius: 11px;
padding: 14px 16px;
margin-top: 16px;
}
.exam-reference-card-label {
font-family: var(--mono);
font-size: 11px;
color: var(--accent-text);
letter-spacing: .06em;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.exam-reference-card-link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: var(--plate-bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg) !important;
text-decoration: none !important;
transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.exam-reference-card-link:hover {
border-color: var(--border-glow);
background: var(--plate-bg-hover);
box-shadow: var(--glass-shadow-hover);
transform: translateY(-1px);
}
.exam-reference-card-icon {
font-size: 20px;
flex-shrink: 0;
}
.exam-reference-card-text {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.exam-reference-card-text strong {
font-size: 13.5px;
font-weight: 600;
color: var(--fg);
}
.exam-reference-card-text span {
font-size: 12px;
color: var(--fg-2); /* WCAG AA contrast improvement */
}
.board-simulator-mode .exam-reference-card {
border: 1px solid #7f7f7f !important;
background: #ffffff !important;
border-radius: 0 !important;
}
.board-simulator-mode .exam-reference-card-label {
color: #002244 !important;
font-family: Arial, sans-serif !important;
}
.board-simulator-mode .exam-reference-card-link {
border: 1px solid #7f7f7f !important;
background: #f9f9f9 !important;
border-radius: 0 !important;
}
.board-simulator-mode .exam-reference-card-link:hover {
background: #f0f0f0 !important;
box-shadow: none !important;
transform: none !important;
}
.board-simulator-mode .exam-reference-card-text span {
color: #555555 !important;
}
.board-simulator-mode .exam-reference-card-text strong {
color: #000000 !important;
}
/* ===========================================================
SCENARIO SPLIT WORKSPACE & IMAGE QUESTIONS (Step 3)
=========================================================== */
.exam-workspace-split {
width: 100%;
}
@media (min-width: 992px) {
/* Scroll-lock viewport when split layout is active to prevent double scrollbars */
html:has(.split-active),
body:has(.split-active),
npte-layout:has(.split-active),
.npte-layout-wrapper:has(.split-active),
#npte-main-content:has(.split-active),
.exam-shell:has(.split-active) {
height: 100vh !important;
overflow: hidden !important;
}
/* Force workspace main frame to fit within vertical window height */
.exam-shell:has(.split-active) .exam-main {
flex: 1 !important;
height: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Expand layout size for modern split view */
.exam-shell:has(.split-active):not(.board-simulator-mode) .exam-main {
max-width: 1400px !important;
}
/* Board simulator size expansion for split layout */
.board-simulator-mode.exam-shell:has(.split-active) .exam-main {
max-width: 1200px !important;
margin: 12px auto !important;
}
.exam-workspace-split.split-active {
display: grid !important;
grid-template-columns: 45% 55% !important;
gap: 24px !important;
height: 100% !important;
align-items: stretch !important;
}
/* Left column: scenario/chart scroll-locked */
.exam-shell:has(.split-active) .exam-scenario-pane {
height: 100% !important;
max-height: 100% !important;
overflow-y: auto !important;
position: static !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
}
/* Right column: question/choices scroll-locked */
.exam-shell:has(.split-active) .exam-question-pane {
height: 100% !important;
max-height: 100% !important;
overflow-y: auto !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* Spacing optimizations for controls and footer rows under fixed viewport layout */
.exam-shell:has(.split-active) .exam-confidence-row {
margin-top: 12px !important;
margin-bottom: 8px !important;
}
.exam-shell:has(.split-active) .exam-secondary-row {
margin-bottom: 12px !important;
}
.exam-shell:has(.split-active) .exam-controls {
padding-bottom: 20px !important;
}
.board-simulator-mode.exam-shell:has(.split-active) .exam-controls {
padding-bottom: 16px !important;
}
.exam-shell:has(.split-active) .exam-disclaimer-footer {
margin-top: 12px !important;
padding-top: 8px !important;
padding-bottom: 12px !important;
}
}
.exam-scenario-pane {
background: var(--plate-bg);
border: 1px solid var(--border-hi);
border-radius: 14px;
padding: var(--r-4);
box-shadow: var(--glass-shadow);
max-height: 80vh;
overflow-y: auto;
margin-bottom: 24px;
text-align: left;
}
@media (min-width: 769px) {
.exam-scenario-pane {
margin-bottom: 0;
position: sticky;
top: 88px;
}
}
.exam-scenario-header {
font-family: var(--mono);
font-size: 11px;
color: var(--accent-text);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
margin-bottom: 12px;
}
.exam-scenario-chart {
font-family: var(--font);
font-size: 14.5px;
line-height: 1.6;
color: var(--fg-2);
}
.exam-scenario-chart p {
margin-bottom: 12px;
}
.exam-scenario-chart table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
font-size: 13px;
}
.exam-scenario-chart th,
.exam-scenario-chart td {
border: 1px solid var(--border);
padding: 8px 10px;
text-align: left;
}
.exam-scenario-chart th {
background: rgba(63, 127, 230, 0.06);
color: var(--fg);
font-weight: 600;
}
/* Image question styles */
.exam-image-container {
margin: 16px 0;
text-align: center;
background: var(--well-bg);
border: 1px solid var(--border);
padding: 12px;
border-radius: 9px;
box-shadow: var(--shadow-sm);
}
.exam-question-image {
max-width: 100%;
max-height: 320px;
border-radius: 6px;
cursor: zoom-in;
transition: transform 0.2s var(--ease);
}
.exam-question-image:hover {
transform: scale(1.015);
}
/* Board simulator mode override for scenario pane */
.board-simulator-mode .exam-scenario-pane {
background: #ffffff !important;
border: 1px solid #7f7f7f !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: Arial, sans-serif !important;
}
.board-simulator-mode .exam-scenario-header {
color: #000000 !important;
border-bottom: 1px solid #7f7f7f !important;
font-family: Arial, sans-serif !important;
}
.board-simulator-mode .exam-scenario-chart {
font-family: Arial, sans-serif !important;
color: #000000 !important;
}
.board-simulator-mode .exam-scenario-chart th {
background: #f0f0f0 !important;
color: #000000 !important;
border: 1px solid #7f7f7f !important;
}
.board-simulator-mode .exam-scenario-chart td {
border: 1px solid #7f7f7f !important;
}
/* ===========================================================
AUDIT REMEDIATIONS: CONTRAST FIXES & ACTIVE PRESS STATES
=========================================================== */
/* Badge & Tab visual contrast fixes */
.exam-cat,
.exam-difficulty,
.exam-explanation-label,
.exam-peer,
.card-tag,
.readiness-eyebrow,
.readiness-status,
.bundle-tag,
.step-num {
color: var(--accent-text) !important; /* Force text-safe blue ink */
}
/* AI Explanation correct/distractor/mechanism/pearl indicators contrast overrides */
.ai-section.correct .ai-section-label { color: var(--success-text) !important; }
.ai-section.distractors .ai-section-label { color: var(--error-text) !important; }
.ai-section.mechanism .ai-section-label { color: var(--accent-text) !important; }
.ai-section.pearl .ai-section-label { color: var(--gold-text) !important; }
.ai-citation { color: var(--accent-text) !important; }
.ai-loading { color: var(--accent-text) !important; }
/* Pricing Card primary CTA contrast fix */
.price-cta-primary {
background: var(--cta-gradient) !important; /* Compliant high-contrast gradient */
color: var(--cta-fg) !important;
}
/* Danger CTA contrast fix */
.pf-btn.danger {
color: var(--error-text) !important; /* CR 5.26:1 (PASS) */
}
/* Timer warning state fix */
.exam-timer.warn {
color: var(--warn-text) !important; /* CR 5.36:1 (PASS) */
}
/* Add physical press feedback to interactive buttons & CTAs */
.btn:active,
.nav-cta:active,
.price-cta:active,
.exam-btn:active,
.exam-deep-cta:active {
transform: translateY(0) scale(0.985);
box-shadow: var(--shadow-sm);
}
/* Add compression feel to card elements */
.feature:active,
.price:active,
.card:active,
.readiness-card:active,
.bundle:active {
transform: translateY(-1px) scale(0.99);
box-shadow: var(--glass-shadow);
}
/* Subtle inset click for exam choices */
.exam-option:active {
transform: scale(0.995);
box-shadow: 0 1px 2px rgba(38, 60, 100, 0.05);
}
/* AMBOSS-style high-yield hover terms */
.cb-hover-term {
color: var(--success, #1aa67a) !important;
text-decoration: underline dashed rgba(26, 166, 122, 0.5) !important;
text-underline-offset: 3px;
cursor: help;
font-weight: 600;
transition: text-decoration-color 0.2s, background-color 0.2s, color 0.2s;
padding: 0 2px;
}
.cb-hover-term:hover {
color: var(--success, #1aa67a) !important;
text-decoration: underline solid var(--success, #1aa67a) !important;
background-color: var(--success-bg, rgba(26, 166, 122, 0.08));
border-radius: 4px;
}
/* Glassmorphic Popover Card */
#cb-hover-popover {
position: absolute;
z-index: 100000;
width: 320px;
padding: 20px 16px 16px 16px; /* extra top padding for the top gradient line */
background: var(--srf-92); /* Nordic Light frosted background */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(122, 156, 220, 0.26); /* matches --border-hi */
border-radius: 12px;
box-shadow: var(--shadow-lg);
opacity: 0;
transform: translateY(6px) scale(0.98);
transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: auto;
display: none;
overflow: hidden; /* clips the top gradient strip to border radius */
}
#cb-hover-popover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--aurora-gradient);
}
#cb-hover-popover.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
#cb-hover-popover #cb-hover-pop-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 12px;
color: var(--fg-3, #60708d);
padding: 4px;
}
#cb-hover-popover #cb-hover-pop-title {
font-family: var(--font, sans-serif);
font-weight: 700;
font-size: 15px;
color: var(--fg, #1a2436);
margin-bottom: 6px;
padding-right: 15px;
text-align: left;
}
#cb-hover-popover #cb-hover-pop-text {
font-size: 13px;
line-height: 1.45;
color: var(--fg-2, #4a5a7e);
margin-bottom: 12px;
text-align: left;
}
#cb-hover-popover #cb-hover-pop-link {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
color: var(--success, #1aa67a);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
#cb-hover-popover #cb-hover-pop-link:hover {
border-bottom-color: var(--success, #1aa67a);
}
/* CB NPTE Shared Button Styles */
.cb-npte-btn {
font-family: var(--font, Manrope, sans-serif);
font-size: 13.5px;
font-weight: 700;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
transition: transform .12s, box-shadow .15s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.cb-npte-btn--primary {
background: var(--aurora-gradient);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(63, 127, 230, 0.32);
}
.cb-npte-btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(63, 127, 230, 0.45);
}
.cb-npte-btn--ai {
background: linear-gradient(135deg, var(--accent) 0%, var(--aurora-lav) 100%);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(125, 138, 166, 0.32);
}
.cb-npte-btn--ai:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(125, 138, 166, 0.45);
}
.cb-npte-btn--ghost {
background: transparent;
color: var(--fg-2);
border-color: var(--border-hi);
}
.cb-npte-btn--ghost:hover {
background: rgba(63, 127, 230, 0.08);
color: var(--fg);
border-color: var(--accent);
}
/* ===========================================================
STUDY SCHEDULER RECOMMENDATION ENGINE (PREMIUM DARK GLASS)
=========================================================== */
.premium-dark-glass {
background: rgba(15, 23, 42, 0.88) !important;
backdrop-filter: var(--glass-filter-standard, blur(16px) saturate(150%)) !important;
-webkit-backdrop-filter: var(--glass-filter-standard, blur(16px) saturate(150%)) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 18px !important;
padding: 24px !important;
color: #f8fafc !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease) !important;
}
.premium-dark-glass:hover {
border-color: rgba(63, 127, 230, 0.4) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(63, 127, 230, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
transform: translateY(-2px);
}
.premium-dark-glass .card-title {
color: #ffffff !important;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.premium-dark-glass .card-tag {
background: rgba(63, 127, 230, 0.15) !important;
color: #9cd4ff !important;
border: 1px solid rgba(63, 127, 230, 0.3) !important;
}
.premium-dark-glass p {
color: #94a3b8 !important;
}
.weekly-schedule-container {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 18px;
}
@media (min-width: 768px) {
.weekly-schedule-container {
grid-template-columns: repeat(2, 1fr);
}
}
.weekly-schedule-week {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: all 0.25s var(--ease);
position: relative;
overflow: hidden;
}
.weekly-schedule-week:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.10);
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
}
.weekly-schedule-week::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent);
}
.weekly-schedule-week.week-1::before {
background: var(--error) !important;
}
.weekly-schedule-week.week-2::before {
background: var(--warn) !important;
}
.weekly-schedule-week.week-3::before {
background: var(--accent) !important;
}
.weekly-schedule-week.week-4::before {
background: var(--aurora-mint) !important;
}
.weekly-week-badge {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px 8px;
border-radius: 6px;
display: inline-block;
align-self: flex-start;
}
.weekly-week-badge.week-1 {
background: rgba(232, 93, 117, 0.18) !important;
color: #ff859b !important;
}
.weekly-week-badge.week-2 {
background: rgba(232, 154, 44, 0.18) !important;
color: #ffd085 !important;
}
.weekly-week-badge.week-3 {
background: rgba(63, 127, 230, 0.18) !important;
color: #9cd4ff !important;
}
.weekly-week-badge.week-4 {
background: rgba(43, 179, 163, 0.18) !important;
color: #92ffd6 !important;
}
.weekly-week-title {
font-size: 15px;
font-weight: 600;
color: #ffffff !important;
}
.weekly-week-desc {
font-size: 13px;
color: #94a3b8 !important;
line-height: 1.55;
flex-grow: 1;
}
.weekly-week-pages {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 12px;
}
.weekly-page-link {
font-size: 12.5px;
color: #3f7fe6 !important;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: all 0.2s var(--ease);
}
.weekly-page-link:hover {
color: #ffffff !important;
text-decoration: none;
text-shadow: 0 0 8px rgba(63, 127, 230, 0.3);
}
.weekly-page-link svg {
transition: transform 0.2s var(--ease);
}
.weekly-page-link:hover svg {
transform: translateX(3px);
}
/* Native Cross-Document View Transitions */
@view-transition {
navigation: auto;
}
/* ═══════════════════════════════════════════════════════════════════════
* v1207 — AURORA LIQUID GLASS: LIT, NOT PAINTED
* The material system upgrade from the transformation audit
* (AUDIT_TRANSFORM_v1205.md, Phase 1). Three ideas:
* 1. Light MOVES across glass — a pointer-tracked specular hotspot and an
* aurora-sampling 1px edge-light on anchor/featured surfaces.
* 2. Motion is SPRING (--spring back-out), not timed ease, on everything
* users physically touch.
* 3. The exam stage MORPHS into the results score via a named
* cross-document view transition.
* Everything degrades gracefully and is fully disabled under
* prefers-reduced-motion.
* ═══════════════════════════════════════════════════════════════════════ */
/* ── 1. Lit glass material ──────────────────────────────────────────── */
.lit-glass {
position: relative;
isolation: isolate;
}
/* 1px aurora edge-light: a mint→cornflower→lavender rim that brightens on
* hover, as if the card edge catches the aurora behind it. */
.lit-glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(43, 179, 163, 0.55) 0%,
rgba(63, 127, 230, 0.45) 45%,
rgba(125, 138, 166, 0.55) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 0.35;
transition: opacity 0.45s var(--ease);
pointer-events: none;
z-index: 2;
}
/* Pointer-tracked specular hotspot — --mx/--my are set by the shared
* tracker in npte-template.js (pointer:fine devices only). */
.lit-glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, -40%),
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.10) 35%,
transparent 65%);
opacity: 0;
transition: opacity 0.45s var(--ease);
pointer-events: none;
z-index: 2;
}
.lit-glass:hover::before { opacity: 0.75; }
.lit-glass:hover::after { opacity: 1; }
/* ── 2. Spring motion on touched surfaces ───────────────────────────── */
.exam-option {
transition:
transform 0.35s var(--spring),
box-shadow 0.3s var(--ease),
background 0.2s var(--ease),
border-color 0.2s var(--ease);
}
.exam-option:not(:disabled):active { transform: scale(0.985); }
.exam-option.selected { animation: cb-spring-pop 0.4s var(--spring); }
@keyframes cb-spring-pop {
0% { transform: scale(0.985); }
55% { transform: scale(1.012); }
100% { transform: scale(1); }
}
.btn, .exam-btn, .price-cta {
transition:
transform 0.35s var(--spring),
box-shadow 0.3s var(--ease),
background 0.2s var(--ease),
border-color 0.2s var(--ease),
color 0.2s var(--ease);
}
.btn:hover, .exam-btn:hover, .price-cta:hover { transform: translateY(-2px); }
.btn:active, .exam-btn:active, .price-cta:active { transform: translateY(0) scale(0.98); }
/* Featured cards lift with a settle, not a slide */
.db-glass-card, .price, .stat, .rd-testimonial-card, .rd-micro-testimonial-card {
transition: transform 0.4s var(--spring), box-shadow 0.35s var(--ease);
}
.db-glass-card:hover, .price:hover, .stat:hover { transform: translateY(-3px); }
/* ── 3. Exam stage → results score shared-element morph ─────────────── */
/* Cross-document view transitions are already enabled (@view-transition
* navigation:auto). Naming both surfaces makes the browser morph the exam
* stage into the score hero at the highest-emotion moment in the product. */
.exam-shell { view-transition-name: exam-stage; }
.score-hero-morph { view-transition-name: exam-stage; }
::view-transition-old(exam-stage),
::view-transition-new(exam-stage) {
animation-duration: 0.5s;
animation-timing-function: var(--ease);
height: 100%;
}
/* ── 4. AA contrast repairs (audit: sub-AA --accent-hi used as text) ── */
.stat-label { color: var(--accent-text); }
.section-eyebrow { color: var(--accent-text); }
.nav-link.active { color: var(--accent-text); background: var(--accent-lo); }
.footer a { color: var(--accent-text); }
/* ── 5. Tap targets: 44px floor on high-frequency mobile controls ───── */
@media (max-width: 768px) {
.nav-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* ── 6. Consolidated reduced-motion contract ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.lit-glass::before,
.lit-glass::after { display: none; }
.exam-option.selected { animation: none; }
.exam-option, .btn, .exam-btn, .price-cta,
.db-glass-card, .price, .stat,
.rd-testimonial-card, .rd-micro-testimonial-card {
transition-duration: 0.01ms;
}
.btn:hover, .exam-btn:hover, .price-cta:hover,
.db-glass-card:hover, .price:hover, .stat:hover { transform: none; }
/* unguarded keyframe loops from the audit: eyebrow pulse dots + the
* flashing danger-state timer (peak-stress moment must stay static) */
.hero-eyebrow::before, .diag-eyebrow::before,
.section-eyebrow::before { animation: none; }
.exam-timer.danger { animation: none; }
@view-transition { navigation: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
* v1210 — THE APP SHELL, PROMOTED TO THE DESIGN SYSTEM
* One persistent frame for every authenticated surface (dashboard, results,
* study-hub): 260px lit-glass rail on desktop, bottom tab bar on phones.
* Rendered by in npte-template.js.
* The rail and tab bar carry view-transition-names so cross-document
* navigations hold them perfectly still — the content changes, the room
* doesn't. That stillness IS the seamlessness.
* ═══════════════════════════════════════════════════════════════════════ */
/* v1218: hide until the layout component builds (post-parse) — prevents the
* unwrapped-content flash without any dead space */
npte-layout:not(.npte-built) { visibility: hidden; }
.db-container { display: flex; min-height: 100vh; }
/* v1218: NPTE's own rail identity — a floating aurora capsule, deliberately
* distinct from CB's full-bleed sidebar. */
.db-sidebar {
width: 260px;
background: var(--srf-82);
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
border: 1px solid var(--border-hi);
border-radius: 18px;
display: flex;
flex-direction: column;
position: fixed;
top: 12px; bottom: 12px; left: 12px;
z-index: 100;
padding: 24px 0;
box-shadow: var(--glass-shadow);
view-transition-name: npte-rail;
}
.db-sidebar-logo {
padding: 0 24px; margin-bottom: 32px;
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: var(--fg);
}
.db-logo-mark {
width: 32px; height: 32px; border-radius: 8px;
background: var(--aurora-gradient);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-family: var(--mono); font-size: 14px;
box-shadow: var(--shadow-sm);
}
.db-logo-text { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; display: block; line-height: 1.15; }
.db-logo-text::after {
content: 'BOARD PREP OS';
display: block;
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--accent-text);
margin-top: 2px;
}
.db-sidebar-menu { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.db-menu-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; border-radius: 8px;
text-decoration: none; color: var(--fg-2);
font-size: 14px; font-weight: 500;
transition: all 0.2s var(--ease);
}
/* v1232 line-icon sizing — replaces emoji in the app chrome */
.db-ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--fg-3); transition: color .2s var(--ease); }
.db-menu-item:hover .db-ico,
.db-menu-item.active .db-ico { color: var(--accent-text); }
.db-tab-item .db-tab-ico { width: 22px; height: 22px; }
.db-menu-item:hover { background: rgba(63, 127, 230, 0.08); color: var(--accent-text); }
.db-menu-item.active {
background: linear-gradient(90deg, var(--accent-lo), transparent 130%);
box-shadow: inset 0 0 0 1px rgba(63, 127, 230, 0.28);
color: var(--accent-text);
font-weight: 600;
position: relative;
}
.db-menu-item.active::after {
content: '';
position: absolute;
right: 12px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
.db-sidebar-footer { padding: 0 16px; margin-top: auto; }
.db-user-profile {
display: flex; align-items: center; gap: 12px; padding: 12px;
background: var(--srf-50);
border: 1px solid var(--border); border-radius: 12px;
}
.db-user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--aurora-gradient-soft);
display: flex; align-items: center; justify-content: center;
font-weight: 700; color: var(--accent-text); font-size: 14px;
border: 1px solid var(--border);
}
.db-user-info { display: flex; flex-direction: column; }
.db-user-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.db-user-role { font-size: 11px; color: var(--fg-3); }
.db-main { flex: 1; margin-left: 284px; display: flex; flex-direction: column; min-height: 100vh; }
.db-header {
height: 64px;
background: var(--canvas-80);
backdrop-filter: var(--glass-filter-ambient);
-webkit-backdrop-filter: var(--glass-filter-ambient);
border-bottom: 1px solid var(--border-hi);
padding: 0 32px;
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 90;
}
.db-header-title { font-size: 14px; font-weight: 600; color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
.db-header-stats { display: flex; align-items: center; gap: 12px; }
.db-stat-badge {
background: var(--srf-60);
border: 1px solid var(--border); border-radius: 20px;
padding: 6px 12px; font-size: 12px;
display: flex; align-items: center; gap: 6px;
font-weight: 600; color: var(--fg-2);
}
.db-stat-badge strong { color: var(--fg); }
.db-content { padding: 32px; flex: 1; max-width: 1200px; width: 100%; box-sizing: border-box; margin: 0 auto; }
/* Shared glass card for app-shell content (dashboard, results, study-hub) */
.db-glass-card {
background: var(--srf-85);
backdrop-filter: var(--glass-filter-standard);
-webkit-backdrop-filter: var(--glass-filter-standard);
border: 1px solid var(--border-hi);
border-radius: 16px;
padding: 24px;
box-shadow: var(--glass-shadow);
transition: all 0.25s var(--ease);
position: relative;
overflow: hidden;
}
.db-glass-card:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
/* Touch devices get no hover-lift (it sticks after tap); the shadow change
alone is enough feedback there. */
@media (hover: none) { .db-glass-card:hover { transform: none; } }
/* ═══════════════════════════════════════════════════════════════════════
* v1436 — MOTION POLISH LAYER
* One vocabulary for the whole NPTE surface: cards lift 2px on hover,
* primary actions compress 1.5% on press, dashboard sections fade-up on
* load with a light stagger. Everything routes through --ease and dies
* under prefers-reduced-motion (see the global kill-switch below — the
* old guard only silenced the aurora while the dial, reveals, and lifts
* kept animating for reduced-motion users).
* Entrance uses animation-from states so a paused/absent animation engine
* shows content in its FINAL (visible) state — never invisible-by-default.
* ═══════════════════════════════════════════════════════════════════════ */
/* v1436 NOTE — deliberately NO entrance animations. fill-mode:both pins
content at opacity 0 whenever the animation clock is frozen or deferred
(backgrounded tab at load, headless webviews, the Browser-pane trap in
[[reference-browser-pane-scroll-capture-bug]]) — an invisible page is the
worst possible failure for a fade-in. Hover lifts and press states below
are TRANSITIONS from a visible base state: their worst failure is "no
motion", which is the correct failure. Do not re-add keyframe entrances
without an engine-liveness gate you have actually verified end to end. */
/* Press feedback on real actions — matches the app's :active compress. */
.btn:active, .btn-rd-primary:active, .gym-btn:active,
.db-stat-badge:active, .pf-btn:active {
transform: scale(0.985);
}
/* Global reduced-motion kill-switch: flatten every animation/transition,
restore instant anchor jumps. 0.01ms (not 0) so JS animation/transition
end events still fire and nothing waits forever. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* Mobile bottom tab bar — primary navigation on phones (thumb-reach) */
.db-tabbar {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 120;
justify-content: space-around;
align-items: stretch;
background: var(--srf-88);
backdrop-filter: var(--glass-filter-standard);
-webkit-backdrop-filter: var(--glass-filter-standard);
border-top: 1px solid var(--border-hi);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px rgba(15, 40, 80, 0.08);
view-transition-name: npte-tabbar;
}
.db-tab-item {
flex: 1;
min-height: 48px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
color: var(--fg-3); text-decoration: none;
border-radius: 10px;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.db-tab-item .db-tab-ico { font-size: 19px; line-height: 1; }
.db-tab-item.active, .db-tab-item:active { color: var(--accent-text); background: var(--accent-lo); }
/* v1242: pin the layout viewport on phones. Desktop-authored strips inside
* dashboard cards (fixed min-width metric pills etc.) forced WebKit's
* shrink-to-fit expansion — the page laid out at ~590px and rendered zoomed
* out. Must live at a breakpoint the expansion can't escape: pinned at
* <=576px the expanded 590px viewport un-matches the query and the pin
* turns itself off, so it rides the <=900px tier with the nav collapse. */
@media (max-width: 900px) {
/* clip > hidden: clip forbids the overflow without creating a scroll
* container, so it can't perturb position:sticky or scroll semantics
* (hidden forces the other axis to `auto`, making html AND body scroll
* containers). The hidden line stays as the fallback for old WebKit
* (< iOS 16) where clip is unsupported. */
html, body { width: 100%; overflow-x: hidden; overflow-x: clip; }
}
@media (max-width: 576px) {
.db-main { max-width: 100vw; }
.db-sidebar { display: none; }
.db-main { margin-left: 0; }
.db-header { padding: 0 16px; }
/* v1242: the four nowrap stat badges (~424px) + title exceeded phone
* width, so WebKit expanded the layout viewport to ~532px and the whole
* dashboard rendered zoomed out. The title is redundant chrome here (the
* tab bar names the surface); the badges become a swipeable strip — an
* overflow container stops propagating min-content width, which is what
* keeps the viewport honest. */
.db-header-title { display: none; }
.db-header-stats {
flex: 1;
min-width: 0;
justify-content: space-between;
gap: 8px;
overflow: visible;
}
.db-header-stats #header-due-badge { display: none; }
.db-stat-badge {
flex: none;
white-space: nowrap;
padding: 6px 9px;
font-size: 11px;
}
.db-content {
padding: 20px 16px;
/* v1304: no tab-bar dead band here — the trademark strip that always
* follows app-shell content (.npte-tm-strip) carries that clearance. */
padding-bottom: 24px;
}
.db-tabbar { display: flex; }
}
/* App-shell trademark strip (npte-template.js appends it after the page
* content on every app-shell page). margin-top:auto pins it to the bottom
* of the .db-main flex column on short pages instead of floating mid-air;
* on phones IT clears the fixed tab bar, so pages above it don't need a
* dead band of bottom padding (v1304 open-space cleanup). */
.footer.npte-tm-strip {
margin-top: auto;
padding: 12px 18px 24px;
text-align: center;
border: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (max-width: 576px) {
.footer.npte-tm-strip {
/* Centred, like every other footer on the product (v1365 — the earlier
* flush-left treatment read as misaligned against the centred content
* stack above it).
*
* Two things made centring look bad before, so both are handled here
* rather than by giving up on it:
* 1. The bug-FAB (44px, bottom 72px + inset, right 16px) sat over the
* last line and the Legal link, which forced an asymmetric 60px
* right gutter — and asymmetric gutters make centred text read as
* off-centre. Clearing the FAB vertically instead (its top edge is
* 116px up) lets the gutters go symmetric.
* 2. A half-width last line made a COMPLETE legal notice look
* truncated. text-wrap: pretty is exactly the widow fix; where it
* isn't supported the text simply wraps normally, still centred. */
padding: 12px 18px calc(132px + env(safe-area-inset-bottom, 0px));
text-align: center;
}
.footer.npte-tm-strip .npte-footer-tm { text-wrap: pretty; }
}
/* Tablet band (iPad ships — TARGETED_DEVICE_FAMILY 1,2): .db-main still holds
* the 284px rail offset here while the rail itself is hidden, so the strip
* overflowed the viewport and the notice was cut mid-word — and html
* overflow-x:clip means no scroll gesture recovers it. A required
* non-affiliation notice must never render as an amputated fragment. */
@media (min-width: 577px) and (max-width: 900px) {
.footer.npte-tm-strip {
box-sizing: border-box;
max-width: calc(100vw - 284px);
/* v1365: the 60px right reservation for the bug-FAB is gone for the same
* reason it went on phones — an asymmetric gutter reads as off-centre.
* Here the FAB sits at bottom 20px + inset (no tab bar in this band), so
* 76px of bottom padding clears its 64px reach and the gutters stay even. */
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.db-sidebar, .db-tabbar { view-transition-name: none; }
}
/* v1211 a11y: explicit eliminate affordance (strike-out was right-click-only,
* unusable on touch and invisible to keyboard users) */
.exam-strike-chip {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--srf-60);
color: var(--fg-3);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
align-self: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.exam-option:hover .exam-strike-chip,
.exam-strike-chip:focus-visible { opacity: 1; }
@media (pointer: coarse) {
.exam-strike-chip { opacity: 0.55; min-width: 44px; min-height: 44px; }
}
/* ═══════════════════════════════════════════════════════════════════════
* TOUCH TARGET FLOOR — Apple HIG 44pt
*
* cb-npte-guide.js already raises its own controls under (pointer: coarse),
* and .exam-strike-chip above does the same. Everything below was measured at
* 15-40px in the app shell with no coarse-pointer branch at all, i.e. it was
* only ever comfortable with a mouse. Audited at 375x812 across index / exam /
* gym / profile.
*
* Scoped to (pointer: coarse) so the desktop site keeps its compact density,
* and written as element+class because the pages that define these controls do
* so in an inline