/* ============================================================================ quanta.css — FinClassLab shared design foundation ("Quanta × GC green") ---------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH. Link this FIRST on every page: then the page-specific stylesheet AFTER it. NEVER copy this file's contents into a page. Author page-specific overrides in @layer page (or plain rules — page CSS loads later and wins) so they can never clobber foundation tokens by specificity. Locked rules: 17px base · single GC-green accent · mono for DATA ONLY · labels/headers sentence-case (NO all-caps) · instructional palette (green=gain, red=loss, blue=teaching, amber=caution) · first-class dark mode. No-flash dark mode: put this BLOCKING snippet in BEFORE this stylesheet (or let navigation.js apply it before first paint): ============================================================================ */ @layer foundation { /* =========================================================================== 1. TOKENS — light (default) =========================================================================== */ :root, :root[data-theme="light"] { /* surfaces — warm green-neutral, not pure white */ --bg: #f8faf8; --panel: #ffffff; --panel-2: #f1f5f1; /* nested surface, table head */ --panel-elev: #ffffff; /* popovers / tooltips / elevated cards */ --line: #e3e8e3; /* hairline borders */ --line-soft: #eef2ee; /* 3-step grey ramp — dim/mute pulled DARKER for student readability */ --text: #16201a; --text-dim: #3f4d45; --text-mute: #5d6b62; /* accent — GC green, the single accent (never teal/cyan) */ --accent: #1C5438; --accent-2: #2E7D4F; --accent-soft: rgba(28, 84, 56, 0.07); --accent-strong: rgba(28, 84, 56, 0.16); --tag-bg: rgba(28, 84, 56, 0.09); --tag-border: rgba(28, 84, 56, 0.22); /* brand gradient — ONE highlighted hero word only, via .grad. Composed from tokens so it tracks the accent and themes correctly. */ --grad-from: #145A32; --grad-mid: #207d4b; --grad-to: #2E8B57; /* instructional palette --positive / --note darkened for AA on their own tints (decision 2B) */ --positive: #157F43; /* gain / money kept (was #1E9E55) */ --positive-soft: rgba(21, 127, 67, 0.10); --positive-border: rgba(21, 127, 67, 0.26); --negative: #b54239; /* loss / money lost */ --negative-soft: rgba(181, 66, 57, 0.08); --negative-border: rgba(181, 66, 57, 0.22); --info: #2563a8; /* muted blue — definitions / role-coding */ --info-soft: rgba(37, 99, 168, 0.08); --info-border: rgba(37, 99, 168, 0.22); --note: #9a4708; /* muted amber — caution (was #b45309) */ --note-soft: rgba(154, 71, 8, 0.09); --note-border: rgba(154, 71, 8, 0.24); --warn: var(--note); /* alias — legacy name kept pointing at amber */ --focus-ring: var(--accent); --shadow-card: 0 12px 28px -14px rgba(15,32,22,0.18), 0 1px 3px rgba(15,32,22,0.06); --shadow-soft: 0 6px 18px -8px rgba(15,32,22,0.10); --bg-glass: rgba(248, 250, 248, 0.82); /* radius scale */ --radius-chip: 5px; --radius-ctl: 8px; --radius-pop: 12px; --radius-card: 12px; /* spacing scale (rem-based, on a 17px root) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; color-scheme: light; } /* =========================================================================== 2. TOKENS — dark (first-class) =========================================================================== */ :root[data-theme="dark"] { --bg: #0a0b0a; --panel: #111512; --panel-2: #161b16; --panel-elev: #1a201b; --line: #232a24; --line-soft: #1c221d; --text: #e6ebe6; --text-dim: #aeb8b0; --text-mute: #7d877f; --accent: #4ade80; /* lifted leaf green, readable on near-black */ --accent-2: #5fd98a; --accent-soft: rgba(74, 222, 128, 0.09); --accent-strong: rgba(74, 222, 128, 0.18); --tag-bg: rgba(74, 222, 128, 0.12); --tag-border: rgba(74, 222, 128, 0.24); --grad-from: #34d399; --grad-mid: #4ade80; --grad-to: #86efac; /* dark mode already passes AA — these are the bright variants */ --positive: #34d399; --positive-soft: rgba(52, 211, 153, 0.10); --positive-border: rgba(52, 211, 153, 0.26); --negative: #e07a6f; --negative-soft: rgba(224, 122, 111, 0.10); --negative-border: rgba(224, 122, 111, 0.24); --info: #6fa8e0; --info-soft: rgba(111, 168, 224, 0.10); --info-border: rgba(111, 168, 224, 0.24); --note: #fbbf24; --note-soft: rgba(251, 191, 36, 0.10); --note-border: rgba(251, 191, 36, 0.24); --shadow-card: 0 12px 32px -12px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); --shadow-soft: 0 4px 16px -6px rgba(0,0,0,0.40); --bg-glass: rgba(10, 11, 10, 0.78); color-scheme: dark; } /* =========================================================================== 3. BASE / RESET / TYPOGRAPHY =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 17px; /* LOCKED base */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.quanta { margin: 0; background: var(--bg); color: var(--text-dim); /* body prose is dim, not full strength */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-feature-settings: 'cv11','ss01','ss03'; font-size: 1rem; /* 17px */ line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.2s ease, color 0.2s ease; } .q-main { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-6); } .q-main.narrow { max-width: 820px; } /* editorial reading column */ .q-main.medium { max-width: 960px; } /* hub */ ::selection { background: var(--accent-strong); } .quanta h1, .quanta h2, .quanta h3, .quanta h4 { font-family: 'Inter Tight', 'Inter', sans-serif; color: var(--text); text-wrap: balance; } .quanta h1 { font-size: 2.35rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 var(--space-4); } .quanta h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: var(--space-7) 0 var(--space-4); } .quanta h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); } .quanta h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-5) 0 var(--space-2); } .quanta p { color: var(--text-dim); margin: 0 0 1.25rem; max-width: 68ch; } /* 68ch is the reading measure for prose flowing in the open page column. Inside a box that already sets its own width (callout, card, table cell, figure, grid cell), the box IS the measure: re-clipping at 68ch leaves text stopping short of the container's right edge while the tinted background keeps going. Boxed paragraphs therefore fill their container and wrap with the window. Matched on the SUFFIX `-card` / `-box` as well as the named classes, so a new boxed component gets the right behaviour without being added to this list. `.lede` is included: a lede inside a box hits the same problem, and its 60ch measure is tighter still. `-panel` is deliberately NOT matched: `.tab-panel` is a full-width content region with no width of its own, so prose inside it should keep the 68ch reading measure. Only things that actually draw a box belong here. */ .quanta :is(.callout, .card, .do, .chk, .edu, .legend, .formula, [class$="-card"], [class*="-card "], [class$="-box"], [class*="-box "]) :is(p, .lede), .quanta .a-card p, .quanta .ref-card p, .quanta figure p, .quanta figcaption, .quanta td p, .quanta th p, .quanta li p { max-width: none; } /* section heading — GC-green, anchored by a hairline divider. Shared site-wide. Scoped as `.quanta .sec-head` (0,2,0) so it beats `.quanta h2` (0,1,1) — the heading is an

, and the generic heading rule sets color:var(--text). */ .quanta .sec-head, .sec-head { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; color: #1C5438; margin: 2.75rem 0 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); scroll-margin-top: 5rem; } :root[data-theme="dark"] .quanta .sec-head { color: var(--accent); } .lede { font-size: 1.15rem; line-height: 1.65; color: var(--text-dim); max-width: 60ch; margin: 0 0 var(--space-6); font-weight: 400; letter-spacing: 0.005em; } .quanta a { color: var(--accent); text-decoration: underline; text-decoration-style: dashed; /* dashed = the non-color link cue */ text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color 0.15s ease; } .quanta a:hover { color: var(--accent-2); text-decoration-style: solid; } .quanta strong, .quanta b { color: var(--text); font-weight: 600; } .quanta hr { border: none; border-top: 1px solid var(--line); margin: var(--space-6) 0; } .quanta blockquote { margin: var(--space-5) 0; padding: 0.4rem 0 0.4rem 1.1rem; border-left: 3px solid var(--accent); color: var(--text-dim); font-style: normal; } .quanta blockquote p:last-child { margin-bottom: 0; } /* ---------- helpers ---------- */ /* visually hidden, available to screen readers (chart descriptions etc.) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .grad { background: linear-gradient(100deg, var(--grad-from) 0%, var(--grad-mid) 45%, var(--grad-to) 100%); -webkit-background-clip: text; background-clip: text; color: var(--accent); /* fallback for non-clip browsers */ -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .grad { -webkit-text-fill-color: currentColor; color: var(--accent); background: none; } } .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-ctl) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } /* =========================================================================== 4. FOCUS — visible ring for every interactive element (WCAG 2.4.7) =========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex], .seg-btn, .btn, .tab, #themeToggle, .theme-toggle):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* =========================================================================== 5. PILLS / TAGS =========================================================================== */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.62rem; background: var(--tag-bg); color: var(--accent); border: 1px solid var(--tag-border); border-radius: var(--radius-chip); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; line-height: 1.2; } .pill.muted { background: var(--panel-2); color: var(--text-mute); border-color: var(--line); } .pill.data { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-variant-numeric: tabular-nums; } .pill.info { color: var(--info); background: var(--info-soft); border-color: var(--info-border); } .pill.note { color: var(--note); background: var(--note-soft); border-color: var(--note-border); } /* clearly-green status label (reads as green, unlike the subtle base .pill) */ .pill.success { color: var(--positive); background: var(--positive-soft); border-color: var(--positive-border); } /* calculator / keyboard key (BAII etc.) — small raised mono key */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0.1rem 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-chip); line-height: 1.4; } /* inline code: Excel formulas, terminal commands, tickers-as-input */ .quanta code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 0.1em 0.45em; color: var(--text); white-space: nowrap; } /* figure frame: screenshots and diagrams, optional mono caption */ .fig { margin: 1.25rem 0; } .fig img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-ctl); box-shadow: var(--shadow-soft); } .fig figcaption { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: var(--text-mute); text-align: center; margin-top: 0.5rem; } /* =========================================================================== 6. META STRIP =========================================================================== */ .meta-strip { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; padding: 0.7rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-ctl); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-mute); font-variant-numeric: tabular-nums; } .meta-strip > span { display: inline-flex; gap: 0.4rem; align-items: baseline; } .meta-strip > span + span::before { content: '·'; margin-right: 1.25rem; margin-left: -0.85rem; color: var(--line); } .meta-strip strong { color: var(--text-dim); font-weight: 500; } /* =========================================================================== 7. CALLOUTS — accent (default) + instructional variants =========================================================================== */ .callout { margin: var(--space-6) 0; padding: 1.15rem 1.25rem; background: var(--accent-soft); border: 1px solid var(--tag-border); border-left: 3px solid var(--accent); border-radius: var(--radius-ctl); } .callout-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 0.6rem; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--accent); } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .callout ul { margin: 0; padding-left: 1.1rem; color: var(--text-dim); } .callout li { margin-bottom: 0.4rem; line-height: 1.55; } .callout li::marker { color: var(--accent); } .callout.gain { background: var(--positive-soft); border-color: var(--positive-border); border-left-color: var(--positive); } .callout.gain .callout-head, .callout.gain li::marker { color: var(--positive); } .callout.loss { background: var(--negative-soft); border-color: var(--negative-border); border-left-color: var(--negative); } .callout.loss .callout-head, .callout.loss li::marker { color: var(--negative); } .callout.info { background: var(--info-soft); border-color: var(--info-border); border-left-color: var(--info); } .callout.info .callout-head, .callout.info li::marker { color: var(--info); } .callout.note { background: var(--note-soft); border-color: var(--note-border); border-left-color: var(--note); } .callout.note .callout-head, .callout.note li::marker { color: var(--note); } /* =========================================================================== 8. FORMULA CARD + "check the math" block =========================================================================== */ .formula { margin: var(--space-6) 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pop); overflow: hidden; box-shadow: var(--shadow-soft); } .formula-head { padding: 0.55rem 1rem; border-bottom: 1px solid var(--line); background: var(--panel-2); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-mute); } .formula-body { padding: 1.75rem 1.25rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 1.02rem; color: var(--text); line-height: 1.7; font-variant-numeric: tabular-nums; } /* code / check-math — mono, scrollable */ .quanta pre, .check-math { margin: var(--space-5) 0; padding: 1rem 1.1rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-ctl); overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.6; color: var(--text); font-variant-numeric: tabular-nums; } .quanta :not(pre) > code { font-family: 'JetBrains Mono', monospace; font-size: 0.88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.1em 0.35em; color: var(--text); } .quanta pre code { background: none; border: none; padding: 0; } /* =========================================================================== 9. FINANCIAL TABLE =========================================================================== */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fin-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: 0.95rem; } .fin-table th { text-align: right; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); color: var(--text-mute); font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 600; } .fin-table th:first-child { text-align: left; } .fin-table td { padding: 0.45rem 0.7rem; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; color: var(--text); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .fin-table td:first-child { text-align: left; font-family: 'Inter', sans-serif; color: var(--text-dim); } .fin-table td.pos { color: var(--positive); } .fin-table td.neg { color: var(--negative); } .fin-table tr.row-section td { font-family: 'Inter Tight', sans-serif; font-weight: 600; color: var(--text); padding-top: 0.9rem; border-bottom: none; } .fin-table tr.row-total td { border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; color: var(--accent); } .fin-table tr.row-total td:first-child { font-family: 'Inter Tight', sans-serif; color: var(--accent); } /* gain/loss must win over the accent total-row color */ .fin-table tr.row-total td.pos { color: var(--positive); } .fin-table tr.row-total td.neg { color: var(--negative); } .fin-table th.col-active, .fin-table td.col-active { background: var(--accent-soft); } /* =========================================================================== 10. CARD =========================================================================== */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.35rem 1.4rem; box-shadow: var(--shadow-soft); } .card.accent-left { border-left: 3px solid var(--accent); } .card-kicker { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin: 0 0 0.4rem; } /* --------------------------------------------------------------------------- Reusable LINK CARD — the shared "kicker → title → description → meta" card used by the homepage, course hubs, and any listing/index page. Use this instead of inventing per-page card classes, so the pattern stays consistent site-wide. Structure: Size modifier: add `.lg` to .q-link-card for the roomier homepage size. --------------------------------------------------------------------------- */ .q-card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.1rem; align-items: start; /* each card hugs its own content (no row-stretch empty space) */ } .q-card-grid > li { display: flex; } /* let the
  • wrap size to the card, not stretch */ /* .even grid (opt-in) restores equal-height rows with meta pinned to the bottom */ .q-card-grid.even { align-items: stretch; } .q-link-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 1.2rem 1.25rem; box-shadow: var(--shadow-soft); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* Whole-card link: remove the inline-link dashed underline AT THE SOURCE (the ), so nothing propagates to the card text. Higher specificity than `.quanta a`. */ .quanta a.q-link-card, .quanta a.q-link-card:hover { text-decoration: none; } .q-link-card.lg { padding: 1.5rem 1.6rem; gap: 0.4rem; border-radius: var(--radius-card); } .q-link-card:hover { transform: translateY(-3px); border-color: var(--tag-border); box-shadow: var(--shadow-card); } .q-link-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .q-card-kicker { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--accent); line-height: 1.2; } /* .q-card-title is often an

    /

    ; use .q-link-card .q-card-title so this beats the generic `.quanta h2 { margin: 3rem 0 2rem }` heading margins. */ .q-link-card .q-card-title, .q-card-title { font-family: 'Inter Tight', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); line-height: 1.2; margin: 0.3rem 0 0; } .q-link-card.lg .q-card-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; } .q-link-card:hover .q-card-title { color: var(--accent); } /* .q-card-desc is a

    ; scope this so it beats `.quanta p { margin: 0 0 1.25rem }`. */ .q-link-card .q-card-desc, .q-card-desc { font-family: 'Inter', sans-serif; font-size: 0.92rem; color: var(--text-dim); line-height: 1.45; margin: 0.25rem 0 0; max-width: none; } .q-link-card.lg .q-card-desc { font-size: 0.96rem; } .q-link-card .q-card-meta, .q-card-meta { margin: 0.7rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-mute); font-variant-numeric: tabular-nums; } /* opt-in equal-height: add `.even` to the grid to stretch cards + pin meta to the bottom */ .q-card-grid.even .q-link-card { height: 100%; } .q-card-grid.even .q-card-meta { margin-top: auto; padding-top: 0.7rem; } /* =========================================================================== 11. METRIC tiles + READ-ONLY data cells =========================================================================== */ .metric { display: flex; flex-direction: column; gap: 0.2rem; } .m-label { font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 500; color: var(--text-mute); } .m-val { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; font-weight: 600; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; } .m-val.pos { color: var(--positive); } .m-val.neg { color: var(--negative); } /* read-only "data cells" — display fixed values; flat so they don't read as buttons */ .ro-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .ro-cell { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 0.7rem 0.65rem; min-width: 0; min-height: 5.2rem; display: flex; flex-direction: column; justify-content: space-between; text-align: left; } .ro-cell .ro-lab { font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 500; color: var(--text-mute); line-height: 1.25; } .ro-cell .ro-val { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 0.35rem; } /* =========================================================================== 12. CONTROLS — segmented (single-choice), slider, buttons, form inputs =========================================================================== */ .control-block { margin-bottom: var(--space-5); } .control-block:last-child { margin-bottom: 0; } .control-label { font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 600; color: var(--text-dim); margin: 0 0 0.55rem; } /* light segmented control — interactive "pick one view" */ .segmented { display: flex; flex-direction: row; gap: 0.4rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 0.3rem; } .seg-btn { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: var(--radius-chip); padding: 0.55rem 0.45rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; line-height: 1.2; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .seg-btn:hover { color: var(--text); } .seg-btn[aria-pressed="true"], .seg-btn[aria-checked="true"] { background: var(--panel); color: var(--accent); border-color: var(--accent-strong); box-shadow: var(--shadow-soft); } /* range slider */ /* custom range slider — thin pill track + green-ringed circular thumb */ .slider, input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); outline: none; cursor: pointer; margin: 0.4rem 0 0.2rem; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 3px solid var(--accent); box-shadow: var(--shadow-soft); cursor: pointer; transition: transform 0.1s ease; } .slider::-webkit-slider-thumb:hover { transform: scale(1.12); } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 3px solid var(--accent); box-shadow: var(--shadow-soft); cursor: pointer; } .slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-strong); } .slider:focus-visible { outline: none; } .slider-scale { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-mute); margin-top: 0.2rem; font-variant-numeric: tabular-nums; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600; line-height: 1.2; padding: 0.55rem 1rem; border-radius: var(--radius-ctl); cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* a .btn that is an must NOT inherit inline-link styling: neither the dashed underline nor the accent color (accent-on-accent = invisible text) */ .quanta a.btn, .quanta a.btn:hover { text-decoration: none; color: #fff; } .quanta a.btn.secondary { color: var(--accent); } .quanta a.btn.danger { color: var(--negative); } .btn:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.secondary { background: var(--panel); color: var(--accent); border-color: var(--line); } .btn.secondary:hover { border-color: var(--accent-strong); background: var(--accent-soft); } .btn.danger { background: var(--panel); color: var(--negative); border-color: var(--negative-border); } .btn.danger:hover { background: var(--negative-soft); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* form inputs — data value is mono (locked rule) */ .input, .quanta input[type="text"], .quanta input[type="number"], .quanta select, .quanta textarea { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 0.5rem 0.7rem; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; font-variant-numeric: tabular-nums; } .input:focus, .quanta input:focus, .quanta select:focus, .quanta textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .quanta select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; } .quanta label { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text-dim); } /* checkbox / radio accent */ .quanta input[type="checkbox"], .quanta input[type="radio"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; } /* =========================================================================== 13. TABS (hub / review pages) =========================================================================== */ .tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); } .tab { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; padding: 0.65rem 0.9rem; margin-bottom: -1px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tab:hover { color: var(--text); } .tab[aria-selected="true"], .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* =========================================================================== 14. ACCORDION (help / FAQ) =========================================================================== */ .accordion { border: 1px solid var(--line); border-radius: var(--radius-ctl); overflow: hidden; background: var(--panel); } .accordion + .accordion { margin-top: 0.6rem; } .accordion > summary, .accordion-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text); } .accordion > summary::-webkit-details-marker { display: none; } .accordion > summary::after, .accordion-head::after { content: '+'; font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 1.1rem; flex: 0 0 auto; } .accordion[open] > summary::after, .accordion.open .accordion-head::after { content: '–'; } .accordion[open] > summary, .accordion.open .accordion-head { border-bottom: 1px solid var(--line); } .accordion-body { padding: 0.9rem 1.1rem; color: var(--text-dim); } /* =========================================================================== 15. TOOLTIP / POPOVER (financial-terms feature) =========================================================================== */ .tooltip { background: var(--panel-elev); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius-pop); box-shadow: var(--shadow-soft); padding: 0.7rem 0.85rem; font-size: 0.88rem; line-height: 1.5; max-width: 280px; } .tooltip .tt-term { font-family: 'Inter Tight', sans-serif; font-weight: 600; color: var(--text); display: block; margin-bottom: 0.25rem; } .has-tooltip { border-bottom: 1px dashed var(--accent); cursor: help; } /* =========================================================================== 16. QUIZ answer states — SANCTIONED non-money use of green/red =========================================================================== */ .quiz-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--panel); cursor: pointer; color: var(--text-dim); transition: border-color 0.15s ease, background 0.15s ease; } .quiz-option + .quiz-option { margin-top: 0.5rem; } .quiz-option:hover { border-color: var(--accent-strong); } .quiz-option.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .quiz-option.is-correct { border-color: var(--positive-border); background: var(--positive-soft); color: var(--text); } .quiz-option.is-correct::before { content: '✓'; color: var(--positive); font-weight: 700; } .quiz-option.is-incorrect { border-color: var(--negative-border); background: var(--negative-soft); color: var(--text); } .quiz-option.is-incorrect::before { content: '✗'; color: var(--negative); font-weight: 700; } .quiz-option[disabled] { cursor: default; } /* =========================================================================== 17. CHART caption + figure =========================================================================== */ .chart-caption { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-mute); line-height: 1.5; margin-top: 0.6rem; font-variant-numeric: tabular-nums; } .chart-fig, figure.quanta-fig { margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; background: var(--panel); } .chart-fig figcaption, figure.quanta-fig figcaption { margin-top: 0.6rem; } /* =========================================================================== 18. TOP BAR / breadcrumb ---------------------------------------------------------------------------- On LIVE pages the runtime navigation.js bar is the single sticky owner and holds the theme toggle (decision 1A). The breadcrumb here is a NON-sticky sub-line that sits under that nav. (.topbar remains for standalone samples.) =========================================================================== */ .breadcrumb-bar { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-mute); padding: 0.6rem var(--space-5); border-bottom: 1px solid var(--line); background: var(--panel-2); display: flex; align-items: center; gap: 0.45rem; } .breadcrumb-bar a { color: var(--text-mute); text-decoration: none; } .breadcrumb-bar a:hover { color: var(--accent); } .breadcrumb-bar .sep { color: var(--line); } /* theme toggle (lives in the nav on live pages) */ .theme-toggle, #themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; background: var(--panel); color: var(--text-dim); border: 1px solid var(--line); border-radius: var(--radius-chip); cursor: pointer; font-size: 0.95rem; line-height: 1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover, #themeToggle:hover { color: var(--accent); border-color: var(--tag-border); background: var(--accent-soft); } /* standalone sample top bar (NOT used on live pages — they use navigation.js) */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); padding: 0.65rem var(--space-5); background: var(--bg-glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); } .topbar .wordmark { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .topbar .breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-mute); display: inline-flex; gap: 0.45rem; align-items: center; } .topbar .breadcrumb a { color: var(--text-mute); text-decoration: none; } .topbar .breadcrumb a:hover { color: var(--accent); } .topbar .breadcrumb .sep { color: var(--line); } .topbar .spacer { margin-left: auto; } /* =========================================================================== 19. LAYOUT helpers — tool grid, card grid, back-to-top =========================================================================== */ .tool-grid { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 1.25rem; margin: var(--space-6) 0 0; align-items: start; } .metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; } .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-soft); cursor: pointer; text-decoration: none; font-size: 1.1rem; } .back-to-top:hover { border-color: var(--accent-strong); background: var(--accent-soft); } /* =========================================================================== 19b. SITE FOOTER (injected by js/footer.js as