/* ══════════════════════════════════════════════════════════════════════
retheme.css — the v3 design system as one shared sheet.
Load it AFTER shared.css, on the pages that do NOT carry their own inline
v3 token block:
The 11 pages that shipped with an inline block (index, courses, pricing,
how-it-works, course-overview, learn, profile, learning-hub, bridge-tasks,
my-certificates, proof) must NOT load this file — they already have every
rule below, and loading both would give two sources of truth for one page.
That leaves 12 sources of truth overall. It is an accepted intermediate
state, not the end state: see the design doc, §7.
Everything here is lifted verbatim from pricing.html (content pages) and
profile.html / learn.html (the app-page token extensions), so a page that
links this sheet is pixel-aligned with the shipped 11 rather than a second
interpretation of the same spec.
Supersedes retheme-nav.css. That sheet was a stopgap — it gave an
un-rethemed page a v3 nav on an old-design body. A page that links this
file must DROP retheme-nav.css: its --rn-* nav rules duplicate the nav
below, and two sheets styling one nav is exactly the drift we are removing.
Spec: Retheme/retheme.md
Design doc: docs/superpowers/specs/2026-07-14-retheme-remaining-pages-design.md
══════════════════════════════════════════════════════════════════════ */
/* Self-hosted webfonts. Imported here rather than ed per page so that
linking this one sheet is sufficient — a page cannot forget the fonts and
silently fall back to Inter. Never re-add api.fontshare.com or
fonts.googleapis.com: the type must render even if a CDN is slow or blocked. */
@import url('fonts/fonts.css');
/* ══════════════ 1 · TOKENS ══════════════ */
:root {
--page-bg: #FFFFFF;
--alt-bg: #FBFBFE;
--nav-bg: rgba(255, 255, 255, 0.72);
--text-strong: #14102B;
--text-body: #3D3660;
--text-muted: #9490AE;
--text-faint: #D6D3E4;
--hairline: rgba(20, 16, 43, 0.08);
--hairline-strong: rgba(20, 16, 43, 0.16);
--brand: #7A5CFF;
--brand-hover: #6243E8;
--brand-tint: #EFEBFF;
--brand-faint: #F7F5FF;
--indigo: #4F5BD5;
--ember: #F2994A;
--verified: #1E9E6A;
--spec-violet: #8B5CF6;
--spec-indigo: #4F46E5;
--spec-cyan: #22D3EE;
--spec-magenta: #D946EF;
--chapter-bg: #14102B;
--chapter-text: #FFFFFF;
--chapter-muted: rgba(255, 255, 255, 0.66);
--chapter-hairline: rgba(255, 255, 255, 0.12);
--shadow-float: 0 24px 64px rgba(20, 16, 43, 0.14);
--shadow-modal: 0 24px 64px rgba(20, 16, 43, 0.20);
--radius-card: 8px;
--radius-btn: 10px;
--radius-media: 16px;
--maxw: 1120px;
--halo-op: 0.33;
/* App-page extension. The canonical block on the marketing pages omits it,
but the app pages (learn, profile) each add it locally — and the alias
block below points --card-bg at it, so leaving it undefined would silently
blank every card that shared.css paints. */
--surface: #FFFFFF;
--danger: #D14343;
--danger-tint: rgba(209, 67, 67, 0.07);
--danger-border: rgba(209, 67, 67, 0.28);
}
html:not(.light) {
--page-bg: #0E0A22;
--alt-bg: #141031;
--nav-bg: rgba(14, 10, 34, 0.72);
--text-strong: #F4F2FA;
--text-body: rgba(255, 255, 255, 0.74);
--text-muted: rgba(255, 255, 255, 0.56);
--text-faint: rgba(255, 255, 255, 0.30);
--hairline: rgba(255, 255, 255, 0.10);
--hairline-strong: rgba(255, 255, 255, 0.18);
--brand: #8B6FFF;
--brand-hover: #9E86FF;
--brand-tint: rgba(139, 111, 255, 0.16);
--brand-faint: rgba(139, 111, 255, 0.08);
--indigo: #9AA2EE;
--verified: #34C88A;
--chapter-bg: #181235;
--shadow-float: 0 24px 64px rgba(0, 0, 0, 0.45);
--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
--halo-op: 0.6;
--surface: #141031;
--danger: #FF6B6B;
--danger-tint: rgba(255, 107, 107, 0.10);
--danger-border: rgba(255, 107, 107, 0.32);
}
/* --danger MUST be re-declared at (0,1,1). shared.css defines it under
`html.light`, which outranks the plain `:root` above — so the :root value
would never paint in light mode, which is the default theme, and error
states would fall back to shared.css's harsher red. */
html.light {
--danger: #D14343;
--danger-tint: rgba(209, 67, 67, 0.07);
--danger-border: rgba(209, 67, 67, 0.28);
}
/* ══════════════ 2 · LEGACY-TOKEN ALIASES ══════════════
Page JS writes inline styles against the old token names, and shared.css's
own components (auth modals, skeletons, status chips) read them too. Rather
than chase every string, point the old names at the v3 tokens so anything we
don't explicitly restyle still lands on-palette — with no JS edits at all.
Both selectors are (0,1,1): `html.light` ties shared.css's own `html.light`
and wins on source order; `html:not(.light)` beats its `:root` on
specificity. Exactly one matches at a time.
--accent2 maps to --indigo, NOT --brand: shared.css paints .btn-link with
it, and the spec keeps links off purple (retheme.md §1). */
html.light,
html:not(.light) {
--bg: var(--page-bg);
--text: var(--text-strong);
--muted: var(--text-muted);
--border: var(--hairline);
--card-bg: var(--surface);
--accent: var(--brand);
--accent2: var(--indigo);
--accent-300: var(--hairline-strong);
--accent-600: var(--brand-hover);
--success: var(--verified);
--warn: var(--ember);
--info: var(--indigo);
}
/* ══════════════ 3 · BASE ══════════════ */
body {
background: var(--page-bg);
color: var(--text-body);
position: relative;
font-family: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-tint); }
a { color: inherit; }
/* ══════════════ 4 · shared.css NEUTRALIZER ══════════════
shared.css scopes its theme under `html.light …` (0,1,1), which out-specifies
a plain element or class selector no matter the source order. Re-assert at
matching specificity; this sheet loads later, so it wins the tie. */
html.light body, html:not(.light) body { background: var(--page-bg); color: var(--text-body); }
html.light nav, html:not(.light) nav { background: transparent; border-bottom-color: var(--hairline); }
html.light nav.scrolled, html:not(.light) nav.scrolled { background: var(--nav-bg); border-bottom-color: var(--hairline-strong); }
html.light .nav-logo, html:not(.light) .nav-logo { color: var(--text-strong); }
html.light .nav-links a, html:not(.light) .nav-links a { color: var(--text-muted); }
html.light .nav-links a:hover, html.light .nav-links a.nav-active,
html:not(.light) .nav-links a:hover, html:not(.light) .nav-links a.nav-active { color: var(--text-strong); }
html.light .nav-actions .btn-ghost, html:not(.light) .nav-actions .btn-ghost { color: var(--text-body); }
html.light .nav-actions .btn-ghost:hover, html:not(.light) .nav-actions .btn-ghost:hover { color: var(--text-strong); }
html.light .nav-actions .btn-primary, html:not(.light) .nav-actions .btn-primary { background: var(--brand); color: #fff; }
html.light .nav-actions .btn-primary:hover, html:not(.light) .nav-actions .btn-primary:hover { background: var(--brand-hover); }
html.light footer, html:not(.light) footer { color: var(--text-muted); }
html.light .modal-btn, html:not(.light) .modal-btn { background: var(--brand); color: #fff; }
html.light .theme-switch, html:not(.light) .theme-switch { background: var(--nav-bg); color: var(--text-body); border-color: var(--hairline-strong); }
/* ══════════════ 5 · LAYOUT + TYPE ══════════════ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.display, .h2 { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; }
.h2 { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; }
.two-tone .ink { color: var(--text-strong); }
.two-tone .slate { color: var(--text-muted); }
.two-tone .brand { color: var(--brand); }
.on-dark.two-tone .ink { color: var(--chapter-text); }
.on-dark.two-tone .slate { color: var(--chapter-muted); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
/* Section eyebrow — Switzer kicker + short brand underline accent.
`text-transform: uppercase` is inherited from shared.css's own .eyebrow and
is deliberate; author the copy in sentence case. Do not add
`text-transform: none` here (retheme.md §3). */
.eyebrow {
font-family: 'Switzer', 'Inter', -apple-system, sans-serif;
font-size: 13px; line-height: 1.2; font-weight: 600;
letter-spacing: -0.01em; color: #7D8799; margin-bottom: 20px;
}
.eyebrow::after { content: ''; display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--brand); margin-top: 8px; }
.eyebrow.center::after { margin-left: auto; margin-right: auto; }
.on-dark .eyebrow, .chapter .eyebrow { color: var(--chapter-muted); }
/* ══════════════ 6 · BUTTONS ══════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
padding: 13px 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
cursor: pointer; text-decoration: none;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hover); }
.btn-secondary { background: transparent; border-color: var(--hairline-strong); color: var(--text-strong); }
.btn-secondary:hover { background: var(--alt-bg); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* ══════════════ 7 · NAV ══════════════
Only the props the v3 nav changes. Position, padding, z-index, flex layout
and the whole mobile hamburger drawer stay inherited from shared.css — which
already resolves its open-drawer background against --page-bg, so the drawer
lands on the v3 canvas the moment this sheet defines that token. */
nav {
background: transparent; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--hairline); height: 64px;
transition: border-color 220ms ease, background 220ms ease;
}
nav.scrolled { border-bottom-color: var(--hairline-strong); }
@media (min-width: 769px) {
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.nav-logo { color: var(--text-strong); font-weight: 500; letter-spacing: -0.01em; font-size: 15px; gap: 0.35em; }
.nav-logo:hover { text-decoration: none; }
.nav-logo-img { height: 1.2em; width: auto; transform: none; }
.nav-links a { color: var(--text-muted); font-weight: 500; font-size: 14px; transition: color 150ms ease; }
.nav-links a:hover, .nav-links a.nav-active { color: var(--text-strong); }
.nav-actions .btn-ghost {
background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500;
color: var(--text-body); cursor: pointer; padding: 8px 12px; transition: color 150ms ease;
}
.nav-actions .btn-ghost:hover { color: var(--text-strong); }
.nav-actions .btn-primary {
background: var(--brand); color: #fff; border: none;
font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
padding: 10px 18px; border-radius: var(--radius-btn); transition: background 150ms ease;
}
.nav-actions .btn-primary:hover { background: var(--brand-hover); }
/* ══════════════ 8 · TICK-RULE DIVIDER ══════════════ */
.tick-rule { position: relative; max-width: var(--maxw); margin: 0 auto; height: 1px; background: var(--hairline); overflow: hidden; }
.tick-rule::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background-image: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 8px); }
.tick-rule::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background-image: repeating-linear-gradient(90deg, var(--hairline-strong) 0 1px, transparent 1px 40px); }
.tick-rule .pulse {
position: absolute; top: -1px; left: 0; width: 140px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--spec-violet), var(--spec-cyan), transparent);
opacity: 0; transform: translateX(-160px); animation: dividerSweep 8s ease-in-out infinite;
}
@keyframes dividerSweep {
0%, 84% { transform: translateX(-160px); opacity: 0; }
85% { opacity: 0; } 87% { opacity: 1; }
99% { transform: translateX(1180px); opacity: 1; }
100% { transform: translateX(1180px); opacity: 0; }
}
/* ══════════════ 9 · MODAL (skin over shared.css's base) ══════════════ */
.modal-overlay { background: rgba(20, 16, 43, 0.42); }
.modal { background: var(--page-bg); color: var(--text-body); border: 1px solid var(--hairline); border-radius: var(--radius-media); box-shadow: var(--shadow-modal); padding: 28px; }
.modal-title { color: var(--text-strong); font-weight: 600; }
.modal-close { color: var(--text-muted); }
/* ══════════════ 10 · FOOTER ══════════════ */
.site-footer { padding: 0; border-top: none; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.footer-inner a { color: var(--text-muted); text-decoration: none; }
.footer-inner a:hover { color: var(--text-strong); }
.footer-links { display: flex; gap: 20px; }
/* ══════════════ 11 · THEME SWITCH ══════════════
SVG sun/moon, never emoji (retheme.md §10). A page carrying the old
.switch-track / .switch-thumb markup must be migrated to the two