/* ============================================================================= LIMITLESS ACADEMY, SHARED DESIGN SYSTEM Canonical CSS for PM Academy, API Academy, Agents Academy, Trader Lab. Light by default; dark via [data-theme="dark"] on . ============================================================================= */ /* ----------------------------------------------------------------------------- 1. MD Nichrome, self-hosted display font -------------------------------------------------------------------------- */ @font-face { font-family: 'MD Nichrome'; src: url('fonts/MDNichrome-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'MD Nichrome'; src: url('fonts/MDNichrome-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'MD Nichrome'; src: url('fonts/MDNichrome-Dark.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'MD Nichrome'; src: url('fonts/MDNichrome-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'MD Nichrome'; src: url('fonts/MDNichrome-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* Source Serif 4, self-hosted editorial prose face (SIL OFL). Used only via .ex-prose for sustained reading text (hero lede, section intros, arrival prose, takeaway bodies). UI chrome stays Inter. */ @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Regular.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; } /* ----------------------------------------------------------------------------- 2. Design tokens, light mode defaults -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Neutral ramp. Anchored to hue 240°, extracted from the darkest mode surface (#09090b ≈ hsl(240, 10%, 4%)), at 5% saturation per the color-palette skill's harmonised-neutral default. The ramp ties subtly back to the palette without competing with the lime accent or the academy warm-tone identity (navy / oxblood / aubergine). */ --gray-50: hsl(240, 5%, 100%); --gray-100: hsl(240, 5%, 98%); --gray-200: hsl(240, 5%, 94%); --gray-300: hsl(240, 5%, 93%); --gray-400: hsl(240, 5%, 90%); --gray-500: hsl(240, 5%, 80%); --gray-600: hsl(240, 5%, 66%); --gray-700: hsl(240, 5%, 45%); --gray-800: hsl(240, 5%, 22%); --gray-900: hsl(240, 5%, 0%); /* Brand */ --neon-500: #C3FF00; /* Status / signal */ --blue-500: #0079FF; --blue-600: #006DE5; --green-500: #389A57; --red-500: #ED5023; --orange-500: #FF9200; --cyan-400: #2BADEA; --lime-400: #97EE2B; /* ----------------------------------------------------------------- Academy sub-product palette, pentadic, near-black tinted. Use these (not --neon-500) to differentiate sub-products. Lime is reserved for the parent brand: hub home, hero moments, brand CTAs. Each tone has a -bright sibling for dark mode (deep-tones go invisible against #09090b otherwise). ----------------------------------------------------------------- */ --tone-forest: #052f1b; /* hsl(150 76% 10%) */ --tone-aubergine: #2a0747; /* hsl(263 82% 15%) */ --tone-navy: #061e40; /* hsl(218 81% 14%) */ --tone-espresso: #301801; /* hsl( 28 96% 10%) */ --tone-oxblood: #4a0817; /* hsl(349 81% 16%) */ /* Dark-mode siblings, same hue, lifted to L≈55% for legibility */ --tone-forest-bright: #2eb574; --tone-aubergine-bright: #8a4ad9; --tone-navy-bright: #4f8ce8; --tone-espresso-bright: #d97f3d; --tone-oxblood-bright: #d9425e; /* Semantic surfaces (light) */ --surface-app: var(--gray-100); --surface-card: var(--gray-50); --surface-elevated: var(--gray-50); --surface-muted: var(--gray-200); --surface-code: var(--gray-800); --surface-inset: rgba(0, 0, 0, 0.05); --surface-inset-2: rgba(0, 0, 0, 0.10); --grid-line: rgba(0, 0, 0, 0.05); /* Semantic status (pinned across themes, meaning shouldn't flip) */ --status-success: var(--green-500); --status-danger: var(--red-500); --status-warning: var(--orange-500); --status-info: var(--blue-500); /* Semantic borders (light) */ --border-subtle: var(--gray-400); --border: var(--gray-500); --border-strong: var(--gray-600); /* Semantic text (light) */ --text-primary: var(--gray-900); --text-secondary: var(--gray-700); --text-tertiary: var(--gray-600); --text-inverse: var(--gray-50); /* Academy/tier accent, overridden per page via body class. Default: neon. */ --accent: var(--neon-500); --accent-on: var(--gray-900); --accent-dim: rgba(195, 255, 0, 0.1); --accent-glow: rgba(195, 255, 0, 0.45); /* Tier accent (sub-sections within an academy). Defaults to academy accent. */ --tier: var(--accent); --tier-on: var(--accent-on); --tier-dim: var(--accent-dim); /* Spacing, 4×4 modular grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius, multiples of 4 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 999px; /* Typography */ /* MD Nichrome is canonical, never substitute. system-ui is a last-resort fallback only if the woff2 fails to load. */ --font-display: 'MD Nichrome', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; /* Editorial prose face, Source Serif 4. Reserved for .ex-prose only: hero lede, section-intro paragraphs, .ex-arrival-next, .ex-takeaway-body. Pairs MD Nichrome (display) with a textbook-grade serif so 25–50 min module sessions read at sustained reading speed. UI chrome stays Inter. */ --font-prose: 'Source Serif 4', 'Iowan Old Style', 'Charter', 'Georgia', serif; /* Motion, easings calibrated to match the web-animation-design skill. - --ease-out: user-initiated entering/exiting (dropdowns, modals, popovers, drawers) - --ease-in-out: elements that move/morph while staying on screen (sliders, accordions) - --ease: hover and color transitions (asymmetrical, gentle) - --ease-in: rare. avoid on UI; available for downstream consumers (e.g. view-transition-new). */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --dur-fast: 150ms; --dur-press: 75ms; /* tactile press feedback (.btn:active) */ --dur-base: 250ms; --dur-slow: 400ms; /* Elevation, light mode shadows. Hue-tinted (240°, the dominant hue of the darkest surface) at low saturation so neutrals tie back to the palette per color-palette skill. */ --shadow-sm: 0 1px 2px hsla(240, 10%, 4%, 0.06), 0 0 0 1px hsla(240, 10%, 4%, 0.03); --shadow-md: 0 1px 3px hsla(240, 10%, 4%, 0.06), 0 8px 20px -6px hsla(240, 10%, 4%, 0.10); --shadow-lg: 0 4px 8px hsla(240, 10%, 4%, 0.06), 0 20px 40px -12px hsla(240, 10%, 4%, 0.18); } /* ----------------------------------------------------------------------------- 3. Dark mode overrides -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --surface-app: #09090b; --surface-card: #1c1c1f; --surface-elevated: #202023; --surface-muted: #18181b; --surface-code: #0a0a0b; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); /* Text */ --text-primary: #FFFFFF; --text-secondary: #A1A1AA; --text-tertiary: #71717A; --text-inverse: var(--gray-900); /* Inset overlays flip sign, subtle light-on-dark recessed surface */ --surface-inset: rgba(255, 255, 255, 0.04); --surface-inset-2: rgba(255, 255, 255, 0.08); --grid-line: rgba(255, 255, 255, 0.04); /* Shadows, dark mode. Pure-black at L=0% (hue is irrelevant at zero lightness; written as hsla for consistency with the light-mode tokens). */ --shadow-sm: 0 1px 2px hsla(240, 10%, 0%, 0.40); --shadow-md: 0 8px 24px -6px hsla(240, 10%, 0%, 0.50); --shadow-lg: 0 16px 48px -12px hsla(240, 10%, 0%, 0.60); } /* ----------------------------------------------------------------------------- 4. Academy brand hooks, set on or via class -------------------------------------------------------------------------- */ /* Hub home keeps the parent-brand lime, every other sub-product gets a deep-tone. */ .academy-default { --accent: var(--neon-500); --accent-on: var(--gray-900); --accent-dim: rgba(195, 255, 0, 0.12); --accent-glow: rgba(195, 255, 0, 0.45); } .academy-pm { --accent: var(--tone-oxblood); --accent-on: #FFFFFF; --accent-dim: rgba(74, 8, 23, 0.10); --accent-glow: rgba(74, 8, 23, 0.45); } .academy-api { --accent: var(--tone-navy); --accent-on: #FFFFFF; --accent-dim: rgba(6, 30, 64, 0.10); --accent-glow: rgba(6, 30, 64, 0.45); } .academy-agents { --accent: var(--tone-aubergine); --accent-on: #FFFFFF; --accent-dim: rgba(42, 7, 71, 0.10); --accent-glow: rgba(42, 7, 71, 0.45); } .academy-lab { --accent: var(--tone-espresso); --accent-on: #FFFFFF; --accent-dim: rgba(48, 24, 1, 0.10); --accent-glow: rgba(48, 24, 1, 0.45); } .academy-mm { --accent: var(--tone-forest); --accent-on: #FFFFFF; --accent-dim: rgba(5, 47, 27, 0.10); --accent-glow: rgba(5, 47, 27, 0.45); } /* Dark mode: deep-tones at L=10–16% disappear against #09090b, promote each to its bright sibling so the identity stays recognisable. */ [data-theme="dark"] .academy-pm { --accent: var(--tone-oxblood-bright); --accent-dim: rgba(217, 66, 94, 0.16); } [data-theme="dark"] .academy-api { --accent: var(--tone-navy-bright); --accent-dim: rgba( 79,140,232, 0.16); } [data-theme="dark"] .academy-agents { --accent: var(--tone-aubergine-bright); --accent-dim: rgba(138, 74,217, 0.16); } [data-theme="dark"] .academy-lab { --accent: var(--tone-espresso-bright); --accent-dim: rgba(217,127, 61, 0.16); } [data-theme="dark"] .academy-mm { --accent: var(--tone-forest-bright); --accent-dim: rgba( 46,181,116, 0.16); } /* ----------------------------------------------------------------------------- 5. Tier hooks, set on (or a section wrapper) per module -------------------------------------------------------------------------- */ /* PM Academy tiers, anchored on oxblood (parent), differentiated by hue. Lime kept for tier-advanced as the "graduation" cue, the only place lime appears outside hero/CTA per Limitless brand guidance ("sometimes a winning outcome"). */ .tier-fundamentals { --tier: var(--tone-oxblood); --tier-on: #FFFFFF; --tier-dim: rgba(74, 8, 23, 0.12); } .tier-advanced { --tier: var(--lime-400); --tier-on: var(--gray-900); --tier-dim: rgba(151, 238, 43, 0.16); } .tier-football { --tier: var(--green-500); --tier-on: #FFFFFF; --tier-dim: rgba(56, 154, 87, 0.14); } .tier-crypto { --tier: var(--orange-500); --tier-on: var(--gray-900); --tier-dim: rgba(255, 146, 0, 0.14); } .tier-equities { --tier: var(--blue-500); --tier-on: #FFFFFF; --tier-dim: rgba(0, 121, 255, 0.14); } .tier-speed { --tier: var(--red-500); --tier-on: #FFFFFF; --tier-dim: rgba(237, 80, 35, 0.14); } /* API Academy tiers, anchored on navy (parent), tier-realtime swapped from purple to espresso. */ .tier-foundations { --tier: var(--tone-navy); --tier-on: #FFFFFF; --tier-dim: rgba(6, 30, 64, 0.12); } .tier-realtime { --tier: var(--tone-espresso); --tier-on: #FFFFFF; --tier-dim: rgba(48, 24, 1, 0.14); } .tier-data { --tier: var(--green-500); --tier-on: #FFFFFF; --tier-dim: rgba(56, 154, 87, 0.14); } .tier-production { --tier: var(--orange-500); --tier-on: var(--gray-900); --tier-dim: rgba(255, 146, 0, 0.14); } /* Agents Academy tiers, three shades of the aubergine family (replaces the off-brand fuchsia/indigo/pink trio). */ .tier-agents-foundations { --tier: var(--tone-aubergine); --tier-on: #FFFFFF; --tier-dim: rgba(42, 7, 71, 0.12); } .tier-agents-building { --tier: var(--tone-navy); --tier-on: #FFFFFF; --tier-dim: rgba(6, 30, 64, 0.12); } .tier-agents-production { --tier: var(--tone-oxblood); --tier-on: #FFFFFF; --tier-dim: rgba(74, 8, 23, 0.12); } /* Dark-mode tier siblings, same hue family at the bright luminance. */ [data-theme="dark"] .tier-fundamentals { --tier: var(--tone-oxblood-bright); --tier-dim: rgba(217, 66, 94, 0.16); } [data-theme="dark"] .tier-foundations { --tier: var(--tone-navy-bright); --tier-dim: rgba( 79,140,232, 0.16); } [data-theme="dark"] .tier-realtime { --tier: var(--tone-espresso-bright); --tier-dim: rgba(217,127, 61, 0.16); } [data-theme="dark"] .tier-agents-foundations { --tier: var(--tone-aubergine-bright); --tier-dim: rgba(138, 74,217, 0.16); } [data-theme="dark"] .tier-agents-building { --tier: var(--tone-navy-bright); --tier-dim: rgba( 79,140,232, 0.16); } [data-theme="dark"] .tier-agents-production { --tier: var(--tone-oxblood-bright); --tier-dim: rgba(217, 66, 94, 0.16); } /* Trader Lab, teal primary, gold for premium / Day 0 / Day 7 / graduation */ .tier-lab-teal { --tier: #0d9488; --tier-on: #FFFFFF; --tier-dim: rgba(13, 148, 136, 0.14); } .tier-lab-gold { --tier: #eab308; --tier-on: var(--gray-900); --tier-dim: rgba(234, 179, 8, 0.14); } /* Claude coral, semantic marker for "Paste into Claude" prompt blocks (universal, not theme-flipped) */ :root { --claude-coral: #cc785c; --claude-coral-dim: rgba(204, 120, 92, 0.14); } [data-theme="dark"] { --claude-coral: #cc785c; --claude-coral-dim: rgba(204, 120, 92, 0.16); } /* ----------------------------------------------------------------------------- 6. Base & typography -------------------------------------------------------------------------- */ html { background: var(--surface-app); color: var(--text-primary); } body { margin: 0; padding: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px; background: var(--surface-app); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .font-prose { font-family: var(--font-prose); } /* Backwards compat with existing pages that use .font-rajdhani */ .font-rajdhani { font-family: var(--font-display); } /* Editorial prose, Source Serif 4 textbook feel for sustained reading. Use only on hero lede, section-intro paragraphs, .ex-arrival-next, .ex-takeaway-body. Card body text, callouts, captions, mono readouts, button copy, and code stay in their respective faces. Line-height 1.75 gives a clean 28px on 16px (base-4 grid). */ .ex-prose { font-family: var(--font-prose); font-feature-settings: "kern", "liga"; letter-spacing: -0.005em; line-height: 1.75; } .ex-prose strong { font-weight: 600; } .ex-prose em { font-style: italic; } /* Type scale (Limitless spec, desktop) */ .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -0.01em; } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: -0.005em; } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.02em; } .t-headline { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 20px; } .t-body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; } .t-ui { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 16px; } .t-caption { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 16px; } /* Mobile bump */ @media (max-width: 767px) { .t-h1 { font-size: 32px; line-height: 36px; } .t-h3 { font-size: 22px; line-height: 24px; } .t-headline { font-size: 20px; line-height: 24px; } .t-body { font-size: 16px; line-height: 20px; } .t-ui { font-size: 16px; line-height: 16px; } .t-caption { font-size: 14px; line-height: 16px; } } /* Editorial display (hero), intentionally larger than spec H1 */ .t-display { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; } /* ----------------------------------------------------------------------------- 7. Utilities -------------------------------------------------------------------------- */ /* Editorial display, solid color per Limitless branding (no gradient text). */ .hero-text-glow { color: var(--text-primary); } /* Soft tier-color halo behind the hero, anchors the page in brand color. */ .hero-ambient { position: relative; isolation: isolate; } .hero-ambient::before { content: ''; position: absolute; inset: -24% -12% -10%; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tier) 18%, transparent) 0%, transparent 60%); z-index: -1; pointer-events: none; } [data-theme="dark"] .hero-ambient::before { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tier) 10%, transparent) 0%, transparent 55%); } .bg-academy-gradient { background-color: var(--surface-app); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 100% 40px, 40px 100%; } /* Cross-module glossary link. First-mention back-link to a concept's canonical home page. Hairline dotted underline, never lime, never colored, never iconized. See `references/glossary-linking.md` in the limitless-academy skill. */ .ex-glossary-link { color: inherit; text-decoration: underline dotted var(--border-subtle); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) var(--ease-out); } .ex-glossary-link:hover { text-decoration-color: var(--text-primary); } /* ----------------------------------------------------------------------------- 8. Components -------------------------------------------------------------------------- */ /* Skip link */ .skip-link { position: absolute; top: -100%; left: 0; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--accent-on); z-index: 9999; font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 0 0 var(--radius-md) 0; } .skip-link:focus { top: 0; } /* Card, borders carry the system; no lift, no shadow ramp on hover (Limitless brand). */ .academy-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .academy-card:hover { background: var(--surface-muted); border-color: var(--border); } /* Section step circle */ .section-step { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--tier); color: var(--tier-on); border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 20px; flex-shrink: 0; } /* Meta pill */ .meta-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); } .meta-pill--tier { background: var(--tier-dim); border-color: color-mix(in srgb, var(--tier) 30%, transparent); color: var(--tier); } /* Buttons, sentence case, Inter (UI), no shadow halo. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 16px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; /* Color changes use 150ms ease (gentle hover feel); transform is faster (75ms) so press feedback feels instant. Per web-animation-design skill. */ transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--text-primary); color: var(--surface-app); } .btn-primary:hover { background: var(--gray-800); } .btn-accent { background: var(--accent); color: var(--accent-on); } .btn-accent:hover { background: color-mix(in srgb, var(--accent) 92%, #000); } .btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-muted); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--text-secondary); padding: var(--space-2) var(--space-3); } .btn-ghost:hover { color: var(--text-primary); background: var(--surface-muted); } /* ----------------------------------------------------------------------------- 9. Sidebar (merged: PM brand block + API active-state) -------------------------------------------------------------------------- */ .sidebar-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 208px; background: var(--surface-elevated); border-right: 1px solid var(--border-subtle); overflow-y: auto; display: flex; flex-direction: column; z-index: 50; scrollbar-width: none; transition: transform var(--dur-base) var(--ease-out); } .sidebar-nav::-webkit-scrollbar { display: none; } @media (max-width: 1023px) { .sidebar-nav { transform: translateX(-100%); } .sidebar-nav.open { transform: translateX(0); } } /* Brand block, PM Academy pattern */ .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-primary); } .sidebar-brand-mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-dim); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .sidebar-brand-mark iconify-icon { font-size: 22px; stroke-width: 2.5; } .sidebar-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; line-height: 1; } .sidebar-brand-text .dim { color: var(--text-tertiary); } .sidebar-body { flex: 1; padding: var(--space-4) var(--space-3); } .sidebar-section { margin-bottom: var(--space-6); } /* Tier label (PM bolder, larger) */ .sidebar-tier-label { display: block; padding: 0 var(--space-3) var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); } /* Nav link (rounded pill + tier-color active bar that wraps inside the pill) */ .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-tertiary); font-size: 12px; font-weight: 600; text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .nav-link:hover { color: var(--text-primary); background: var(--surface-muted); } .nav-link.active { color: var(--text-primary); background: var(--tier-dim); box-shadow: inset 3px 0 0 var(--tier); } .nav-link .nav-num { font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: var(--tier); width: 20px; flex-shrink: 0; text-align: left; } /* Sidebar footer CTA */ .sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--border-subtle); } .sidebar-footer-link { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-muted); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .sidebar-footer-link:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted)); } /* ----------------------------------------------------------------------------- Top nav (landing pages, alternative to sidebar) -------------------------------------------------------------------------- */ .top-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface-app) 80%, transparent); border-bottom: 1px solid var(--border-subtle); } .top-nav-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-6); } .top-nav-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-primary); } .top-nav-brand-mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-dim); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .top-nav-brand-mark iconify-icon { font-size: 22px; stroke-width: 2.5; } .top-nav-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; line-height: 1; } .top-nav-brand-text .dim { color: var(--text-tertiary); } .top-nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } /* Hamburger */ .hamburger { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); z-index: 60; cursor: pointer; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 40; } .sidebar-overlay.open { display: block; } /* ----------------------------------------------------------------------------- 10. Checklist (gates continue button) -------------------------------------------------------------------------- */ .checklist-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .checklist-item:hover { background: var(--surface-muted); } .checklist-item:focus-visible { outline: 2px solid var(--tier); outline-offset: 2px; } .checklist-item.checked { border-color: color-mix(in srgb, var(--tier) 30%, transparent); background: var(--tier-dim); } .check-box { width: 32px; height: 32px; border-radius: var(--radius-md); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .check-box iconify-icon { opacity: 0; color: var(--tier-on); transition: opacity var(--dur-fast) var(--ease-out); } .checklist-item.checked .check-box { background: var(--tier); border-color: var(--tier); } .checklist-item.checked .check-box iconify-icon { opacity: 1; } .checklist-item.checked .check-text { text-decoration: line-through; color: var(--text-tertiary); } /* ----------------------------------------------------------------------------- 11. Code-tabs widget (API / Agents academies) -------------------------------------------------------------------------- */ .code-tabs { overflow: hidden; padding: 0; } .code-tab-bar { display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); padding: 0 var(--space-2); } .code-tab { padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .code-tab:hover { color: var(--text-primary); } .code-tab.active { color: var(--tier); border-bottom-color: var(--tier); } .code-panel { margin: 0; padding: var(--space-6); background: var(--surface-code); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #d4d4d8; overflow-x: auto; white-space: pre; } .code-panel[hidden] { display: none; } .code-panel code { color: inherit; background: transparent; font-family: inherit; font-size: inherit; } .copy-btn:focus-visible { outline: 2px solid var(--tier); outline-offset: 2px; border-radius: var(--radius-sm); } /* ----------------------------------------------------------------------------- 12. Theme toggle button (nav bar) -------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { color: var(--text-primary); background: var(--surface-muted); border-color: var(--border); } .theme-toggle iconify-icon { font-size: 16px; } .theme-toggle .icon-dark { display: none; } [data-theme="dark"] .theme-toggle .icon-light { display: none; } [data-theme="dark"] .theme-toggle .icon-dark { display: inline-block; } /* ----------------------------------------------------------------------------- 13. Focus + motion accessibility -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- 14. View transitions (match existing behavior) -------------------------------------------------------------------------- */ @view-transition { navigation: auto; } ::view-transition-old(main-content) { animation: 250ms var(--ease-out) both limitless-fade-out; } ::view-transition-new(main-content) { animation: 250ms var(--ease-out) 100ms both limitless-fade-in; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } @keyframes limitless-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes limitless-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================================= 15. Mono path, shadcn-inspired alternate skin. ---------------------------------------------------------------------------- Set body.mono to opt a page into the mono skin. Mono is monochrome-first: the lime brand color appears only on the brand mark and on chevron/active hover states. No tier-color identity, no card surfaces, no shadows, the 1px hairline rule does the structural work. Two layers: (A) Mono LAYOUT classes (`.mono-nav`, `.mono-row`, …) for landing pages. (B) Mono OVERRIDES (`body.mono .sidebar-nav`, …) that re-skin the existing sidebar/checklist/code-tab components for module pages. ============================================================================= */ /* Mono layout tokens */ .mono { --mono-container: 720px; --mono-line: 1px solid var(--border-subtle); } /* Reset the bg gridline pattern from the deep-tone hub, mono = clean canvas. */ .mono .canvas { background: var(--surface-app); min-height: 100vh; } /* ── Top nav ───────────────────────────────────────────────────────────── */ .mono-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface-app) 88%, transparent); border-bottom: var(--mono-line); } .mono-nav-inner { max-width: var(--mono-container); margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); } .mono-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-primary); } .mono-brand-mark { width: 22px; height: 22px; display: block; color: var(--neon-500); flex-shrink: 0; } .mono-brand-mark svg { width: 100%; height: 100%; display: block; } .mono-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: -0.01em; } .mono-brand-text .dim { color: var(--text-tertiary); font-weight: 500; } .mono-nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .mono-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--text-primary); color: var(--surface-app); font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 16px; border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); } .mono-cta:hover { background: var(--gray-800); } [data-theme="dark"] .mono-cta:hover { background: var(--gray-200); color: var(--gray-900); } .mono-cta-ghost { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; color: var(--text-secondary); font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 16px; border-radius: var(--radius-md); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .mono-cta-ghost:hover { color: var(--text-primary); background: var(--surface-muted); } /* ── Page container ────────────────────────────────────────────────────── */ .mono-main { max-width: var(--mono-container); margin: 0 auto; padding: 0 var(--space-6); } /* ── Hero ──────────────────────────────────────────────────────────────── */ .mono-hero { padding: var(--space-16) 0 var(--space-12); } .mono .eyebrow, .mono-hero .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-tertiary); margin: 0 0 var(--space-5); } .mono-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.025em; color: var(--text-primary); margin: 0 0 var(--space-5); } .mono-hero .lede { font-family: var(--font-body); font-size: 18px; line-height: 28px; color: var(--text-secondary); max-width: 540px; margin: 0; } .mono-hero .meta { margin-top: var(--space-5); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-tertiary); } /* Hero CTA, black on light, white on dark, no shadow. */ .mono-hero-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); padding: var(--space-3) var(--space-6); background: var(--text-primary); color: var(--surface-app); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 16px; border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); } .mono-hero-cta:hover { background: var(--gray-800); } [data-theme="dark"] .mono-hero-cta:hover { background: var(--gray-200); color: var(--gray-900); } /* ── Section header ────────────────────────────────────────────────────── */ .mono-section { padding-top: var(--space-12); } .mono-section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--space-5); border-bottom: var(--mono-line); } .mono-section-head .eyebrow { margin: 0; } .mono-section-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } /* ── Row list ──────────────────────────────────────────────────────────── */ .mono-rows { list-style: none; margin: 0; padding: 0; } .mono-row { border-bottom: var(--mono-line); } .mono-row > a, .mono-row > .mono-row-locked { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-5); padding: var(--space-8) var(--space-2); text-decoration: none; color: inherit; transition: background-color var(--dur-fast) var(--ease-out); } .mono-row > a:hover { background: var(--surface-muted); } /* Row-leading number, for module rows where the prefix is "01", "02", … */ .mono-row-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--text-tertiary); width: 28px; text-align: left; font-variant-numeric: tabular-nums; flex-shrink: 0; } .mono-row > a:hover .mono-row-num { color: var(--text-primary); } /* Row icon, leading glyph for non-numbered rows. */ .mono-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); flex-shrink: 0; } .mono-row-icon iconify-icon { font-size: 22px; } .mono-row > a:hover .mono-row-icon { color: var(--text-primary); } .mono-row h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: -0.01em; margin: 0 0 var(--space-3); color: var(--text-primary); } .mono-row p { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 0; max-width: 480px; } /* Compact module rows, no description, smaller title. */ .mono-row--compact > a, .mono-row--compact > .mono-row-locked { padding: var(--space-5) var(--space-2); } .mono-row--compact h2 { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: 0; margin: 0; } .mono-row-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; } .mono-chevron { font-family: var(--font-body); font-size: 18px; line-height: 1; color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .mono-row > a:hover .mono-chevron { color: var(--neon-500); transform: translateX(2px); } .mono-row-locked { cursor: default; opacity: 0.55; } .mono-row-locked .mono-chevron::before { content: "·"; } .mono-row-locked .mono-row-meta { text-transform: uppercase; } .mono-row > a:focus-visible { outline: none; background: var(--surface-muted); box-shadow: inset 0 0 0 2px var(--neon-500); } /* ── Footer ────────────────────────────────────────────────────────────── */ .mono-footer { margin-top: var(--space-16); padding: var(--space-8) 0 var(--space-12); border-top: var(--mono-line); display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary); } .mono-footer a { color: var(--text-secondary); text-decoration: none; } .mono-footer a:hover { color: var(--text-primary); } /* ── Theme toggle (mono variant) ───────────────────────────────────────── */ .mono-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: var(--mono-line); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .mono-theme:hover { color: var(--text-primary); background: var(--surface-muted); } .mono-theme svg { width: 14px; height: 14px; display: block; } .mono-theme .icon-dark { display: none; } [data-theme="dark"] .mono-theme .icon-light { display: none; } [data-theme="dark"] .mono-theme .icon-dark { display: block; } /* ── Mobile collapse for row lists ─────────────────────────────────────── */ @media (max-width: 640px) { .mono-row > a, .mono-row > .mono-row-locked { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: var(--space-2) var(--space-4); } .mono-row-icon { grid-column: 1 / 2; grid-row: 1 / 3; align-self: start; margin-top: var(--space-1); } .mono-row-num { grid-column: 1 / 2; grid-row: 1 / 3; align-self: start; margin-top: var(--space-2); } .mono-row-content { grid-column: 2 / 3; grid-row: 1; } .mono-row-meta { grid-column: 2 / 3; grid-row: 2; } .mono-chevron { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; } } /* ============================================================ (B) Mono OVERRIDES for shared module-shell components. Apply by adding `class="mono"` to a module page (additive, keeps existing component classes; just neutralises the tier coloring and softens motion to match the mono path). ============================================================ */ /* Hub-level: kill the dotted gridline background canvas. */ body.mono .bg-academy-gradient { background: var(--surface-app); background-image: none; } /* Sidebar, strip tier-color rails, brand plate, and footer halo. */ body.mono .sidebar-brand-mark { background: transparent; border: 0; color: var(--neon-500); /* brand mark is the only lime moment in the sidebar */ } body.mono .sidebar-tier-label { color: var(--text-tertiary); letter-spacing: 0.18em; } body.mono .nav-link { border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } body.mono .nav-link.active { background: var(--surface-muted); box-shadow: inset 2px 0 0 var(--text-primary); /* neutral active rail */ } body.mono .nav-link .nav-num { color: var(--text-tertiary); } body.mono .nav-link.active .nav-num { color: var(--text-primary); } /* Section step circle → numbered marker, no fill. */ body.mono .section-step { background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 13px; font-weight: 500; width: 36px; height: 36px; } /* Meta pill, neutral, hairline. */ body.mono .meta-pill, body.mono .meta-pill--tier { background: transparent; border-color: var(--border-subtle); color: var(--text-tertiary); letter-spacing: 0.18em; } /* Checklist, drop tier glow, use lime only on the completed checkmark fill. */ body.mono .checklist-item { border-radius: var(--radius-md); } body.mono .checklist-item.checked { border-color: var(--border); background: var(--surface-muted); } body.mono .checklist-item.checked .check-box { background: var(--neon-500); border-color: var(--neon-500); color: var(--signal-green-ink, #0A1400); } body.mono .checklist-item:focus-visible { outline-color: var(--neon-500); } /* Code-tabs, neutral active state, no tier color. */ body.mono .code-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); } body.mono .copy-btn:focus-visible { outline-color: var(--neon-500); } /* Buttons, keep them mono. .btn-accent stops being lime when in mono shell; use .btn-primary for affordances and .mono-cta for the trade CTA. */ body.mono .btn-accent { background: var(--text-primary); color: var(--surface-app); } body.mono .btn-accent:hover { background: var(--gray-800); } [data-theme="dark"] body.mono .btn-accent:hover { background: var(--gray-200); color: var(--gray-900); } /* Hero halo + gradient text are no-ops in mono. */ body.mono .hero-ambient::before { display: none; } body.mono .hero-text-glow { color: var(--text-primary); } /* Focus rings across the page lean on lime, that's our single accent. */ body.mono :focus-visible { outline-color: var(--neon-500); } /* ----------------------------------------------------------------------------- 16. Textbook chrome, pitfall callouts, active-recall blocks, cheatsheet card link, and reference-card pages. ----------------------------------------------------------------------------- Extends module pages with retrieval practice, contextual warnings, and per-tier reference cards. Shared across API + Agents academies. PM Academy uses recall + cheatsheet card; pitfall callouts are intentionally omitted from PM Academy (audience is human traders, newbie-friendly tone). See ~/.claude/skills/limitless-academy/ references/textbook-chrome.md for usage rules. -------------------------------------------------------------------------- */ /* === Pitfall callout, contextual warning after a concept === */ .ex-pitfall-callout { position: relative; display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6) var(--space-7); margin: var(--space-10) 0; border: 1px solid var(--border-subtle); border-left: 2px solid var(--status-warning); border-radius: var(--radius-lg); background: var(--surface-card); } .ex-pitfall-callout-icon { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--status-warning) 12%, transparent); border-radius: var(--radius-full); color: var(--status-warning); } .ex-pitfall-callout-icon iconify-icon { font-size: 16px; } .ex-pitfall-callout-body { flex: 1; min-width: 0; } .ex-pitfall-callout-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--status-warning); margin-bottom: var(--space-2); } .ex-pitfall-callout-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: var(--space-3); line-height: 1.3; } .ex-pitfall-callout-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .ex-pitfall-callout-text + .ex-pitfall-callout-fix { margin-top: var(--space-4); } .ex-pitfall-callout-fix { font-size: 13px; line-height: 1.55; color: var(--text-primary); padding: var(--space-3) var(--space-4); background: var(--surface-muted); border-radius: var(--radius-md); } .ex-pitfall-callout-fix-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: var(--space-1); font-weight: 600; } .ex-pitfall-callout-text code, .ex-pitfall-callout-fix code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-muted); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--text-primary); } .ex-pitfall-callout-fix code { background: var(--surface-card); } /* === Active-recall block, tier-end retrieval practice === Native

; .ex-recall-answer MUST sit INSIDE

so it collapses with the question. Five questions per tier-end module is the canonical count. */ .ex-recall { margin: var(--space-10) 0; padding: var(--space-8) var(--space-9); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); } .ex-recall-eyebrow, .seo-answer-label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-3); } .ex-recall-title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.2; max-width: 26ch; } .ex-recall-help { font-size: 13px; color: var(--text-tertiary); margin-bottom: var(--space-6); } .ex-recall-list { list-style: none; margin: 0; padding: 0; counter-reset: recall; } .ex-recall-item { counter-increment: recall; border-top: 1px solid var(--border-subtle); } .ex-recall-item:last-child { border-bottom: 1px solid var(--border-subtle); } .ex-recall-item details > summary { display: flex; align-items: flex-start; gap: var(--space-4); list-style: none; cursor: pointer; color: var(--text-primary); font-size: 15px; line-height: 1.5; padding: var(--space-5) 0; transition: color var(--dur-fast) var(--ease-out); } .ex-recall-item details > summary::-webkit-details-marker { display: none; } .ex-recall-item details > summary::before { content: counter(recall, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-tertiary); flex-shrink: 0; padding-top: 4px; width: 24px; } .ex-recall-item details > summary::after { content: 'reveal'; margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); flex-shrink: 0; padding-top: 5px; transition: color var(--dur-fast) var(--ease-out); } .ex-recall-item details[open] > summary::after { content: 'hide'; color: var(--text-primary); } .ex-recall-item details > summary:hover { color: var(--text-primary); } .ex-recall-item details > summary:hover::after { color: var(--text-primary); } .ex-recall-item details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); } .ex-recall-answer { margin: 0 0 var(--space-5) 40px; padding: var(--space-4) var(--space-5); background: var(--surface-muted); border-radius: var(--radius-md); font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .ex-recall-answer code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-card); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--text-primary); } .ex-recall-answer pre { font-family: var(--font-mono); font-size: 12px; background: var(--surface-card); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--text-primary); margin: var(--space-3) 0; line-height: 1.5; overflow-x: auto; } /* === Cheatsheet card link, small chip under the hero === */ .ex-cheatsheet-card { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .ex-cheatsheet-card:hover { border-color: var(--text-primary); background: var(--surface-muted); } .ex-cheatsheet-card iconify-icon { font-size: 14px; color: var(--text-tertiary); } .ex-cheatsheet-card:hover iconify-icon { color: var(--text-primary); } /* === Reference card pages (cheatsheet_.html) === Standalone sibling pages. Namespaced .ex-ref-* to avoid colliding with the hub's existing .ex-card chrome in index.html. */ .ex-ref-shell { max-width: 1080px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-16); } @media (min-width: 768px) { .ex-ref-shell { padding: var(--space-16) var(--space-8) var(--space-20); } } .ex-ref-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-10); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .ex-ref-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-3); } .ex-ref-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); line-height: 0.96; letter-spacing: -0.025em; color: var(--text-primary); font-weight: 900; } .ex-ref-subtitle { font-size: 15px; line-height: 1.5; color: var(--text-secondary); max-width: 60ch; margin-top: var(--space-3); } .ex-ref-back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .ex-ref-back:hover { color: var(--text-primary); border-color: var(--text-primary); } .ex-ref-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .ex-ref-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ex-ref-grid { grid-template-columns: repeat(3, 1fr); } } .ex-ref-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: flex; flex-direction: column; } @media (min-width: 768px) { .ex-ref-card.span-2 { grid-column: span 2; } } @media (min-width: 1024px) { .ex-ref-card.span-2 { grid-column: span 2; } } .ex-ref-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); } .ex-ref-card-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--text-tertiary); } .ex-ref-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); flex: 1; } .ex-ref-card-source { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); } .ex-ref-card-source a { color: var(--text-secondary); text-decoration: none; } .ex-ref-card-source a:hover { color: var(--text-primary); } .ex-ref-card-body { flex: 1; } .ex-ref-card-body p { font-size: 13px; line-height: 1.55; color: var(--text-secondary); } .ex-ref-card-body p + p { margin-top: var(--space-3); } .ex-ref-card-body strong { color: var(--text-primary); } .ex-ref-footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); } .ex-ref-footer-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); } /* === Inline atoms used inside reference cards === */ .ex-code, .ex-formula { display: block; font-family: var(--font-mono); font-size: 12px; padding: var(--space-3) var(--space-4); background: var(--surface-muted); border-radius: var(--radius-md); color: var(--text-primary); margin: var(--space-3) 0; line-height: 1.6; white-space: pre; overflow-x: auto; } .ex-formula em { color: var(--text-tertiary); font-style: normal; font-size: 11px; } .ex-table { width: 100%; font-size: 12.5px; border-collapse: collapse; } .ex-table th, .ex-table td { text-align: left; padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .ex-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: var(--space-2); } .ex-table td { color: var(--text-secondary); } .ex-table td:first-child { color: var(--text-primary); font-weight: 500; } .ex-table td.mono, .ex-table td.code { font-family: var(--font-mono); } .ex-table tr:last-child td { border-bottom: none; } /* Numbered list, counter sits in the gutter via absolute position so inline body text (with , , etc.) flows naturally instead of being split across grid cells. */ .ex-list { list-style: none; margin: 0; padding: 0; counter-reset: clist; } .ex-list > li { counter-increment: clist; position: relative; padding: var(--space-3) 0 var(--space-3) 36px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); } .ex-list > li:last-child { border-bottom: none; } .ex-list > li::before { content: counter(clist, decimal-leading-zero); position: absolute; left: 0; top: var(--space-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-tertiary); } .ex-list strong { color: var(--text-primary); display: block; margin-bottom: 2px; } .ex-list code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-muted); padding: 1px 4px; border-radius: var(--radius-sm); color: var(--text-primary); } /* Decision-tree list, hairline tick instead of a counter */ .ex-tree { list-style: none; margin: 0; padding: 0; } .ex-tree li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); padding: var(--space-2) 0; padding-left: var(--space-5); position: relative; border-bottom: 1px solid var(--border-subtle); } .ex-tree li:last-child { border-bottom: none; } .ex-tree li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--text-tertiary); } .ex-tree li code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-muted); padding: 1px 4px; border-radius: var(--radius-sm); color: var(--text-primary); } .ex-tree li strong { color: var(--text-primary); } /* Print-friendly reference card, pinnable / printable one-pager. */ @media print { .ex-ref-back, .ex-ref-footer, .ex-ref-shell .theme-toggle { display: none !important; } .ex-ref-card { break-inside: avoid; border-color: #ccc !important; } .ex-ref-shell { padding: 24px; max-width: 100%; } .ex-ref-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } .ex-code, .ex-formula, .ex-table th, .ex-list > li::before, .ex-tree li::before { background: transparent !important; } } /* === SEO note, one-liner provenance / disclaimer under the hero === Replaces the boxed "illustrative endpoint" banner once a module's API claims are verified (see docs/API_VERIFICATION.md). Monochrome by the one-accent rule; the check icon is informational, not status. */ .seo-note { display: flex; align-items: baseline; gap: var(--space-2); max-width: 800px; font-size: 13px; line-height: 1.55; color: var(--text-tertiary); } .seo-note iconify-icon { font-size: 14px; flex-shrink: 0; position: relative; top: 2px; color: var(--text-tertiary); } .seo-note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; } /* === SEO answer + FAQ blocks === Quick Answer card directly under the hero and the People-Also-Ask FAQ near the foot, both injected by backend/scripts/inject_seo_blocks.py from the backend/seo/seo_faq.json sidecar. Single restrained lime accent (2px left rule + dot + 3% wash): structure weight, not signal, per the one-accent rule. Do not add lime pills or buttons here. */ .seo-answer { max-width: 760px; padding: var(--space-6); border: 1px solid var(--border-subtle); border-left: 2px solid var(--neon-500); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--neon-500) 3%, var(--surface-card)); margin-bottom: var(--space-16); } .seo-answer-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .seo-answer-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--neon-500); flex-shrink: 0; } /* .seo-answer-label shares the house eyebrow recipe with .ex-recall-eyebrow (one declaration, §16); inside the flex eyebrow row only the margin resets. */ .seo-answer-eyebrow .seo-answer-label { margin-bottom: 0; } .seo-answer h2 { font-family: var(--font-display); font-size: 22px; line-height: 28px; letter-spacing: -0.01em; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-3); } .seo-answer p { font-size: 16px; line-height: 28px; color: var(--text-secondary); margin: 0; } .seo-faq.ex-recall { max-width: 760px; padding: var(--space-8); margin: 0 0 var(--space-20) 0; } @media (max-width: 640px) { .seo-answer { padding: var(--space-5); } .seo-faq.ex-recall { padding: var(--space-5); } }