/* ============================================================================= Qualiq — site stylesheet Single source of truth for typography and color. Change a variable here and it applies site-wide. Theme variants are applied via [data-theme="..."]. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. DESIGN TOKENS ----- TYPOGRAPHY (swap these to change every page at once) ----- */ :root { /* Type families. Default body is Times New Roman with a Tinos web fallback (Tinos is metrically identical to Times). To change the body face site-wide, edit ONLY --font-serif below. */ --font-serif: "Times New Roman", Times, "Tinos", "Liberation Serif", serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; /* Type scale. */ --fs-display: clamp(2.6rem, 4.6vw, 4.0rem); --fs-h1: clamp(2.0rem, 3.4vw, 2.7rem); --fs-h2: clamp(1.5rem, 2.4vw, 1.85rem); --fs-h3: 1.2rem; --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.9375rem; /* 15px */ --fs-micro: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px */ --fs-stat: clamp(2.6rem, 5.4vw, 4.4rem); --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55; --lh-loose: 1.7; --measure: 64ch; --container: 1180px; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* Layout rhythm */ --section-y: clamp(4rem, 8vw, 7rem); --rule-w: 1px; } /* ----------------------------------------------------------------------------- 2. PALETTES (themes) ---------------------------------------------------------------------------- LIVE THEME: Bloomberg / FT — Cream + Ink + Oxblood. Promoted to :root so pages need no `data-theme` attribute. The Treasury and Spartan blocks below are kept LIVE-but-dormant: no live page sets them, but if you ever want to revisit, just add `data-theme="treasury"` or `data-theme="spartan"` to on any page and the entire site flips. Do NOT delete these blocks; this is the only place we keep palette options for future iteration. ----------------------------------------------------------------------------*/ /* LIVE — BLOOMBERG / FT: Cream + Ink + Oxblood */ :root, [data-theme="bloomberg"] { --bg: #F5F1E8; --bg-2: #ECE5D2; --bg-3: #E1D8BF; --ink: #0A0A0A; --ink-2: #1F1B14; --muted: #6E6657; --rule: rgba(10, 10, 10, 0.14); --rule-strong: rgba(10, 10, 10, 0.32); --accent: #722F37; --accent-2: #8C3A43; --accent-ink: #F5F1E8; --positive: #2C4A2E; --negative: #722F37; --hairline-on-accent: rgba(245, 241, 232, 0.22); } /* DORMANT alternate — Treasury (Bone + Charcoal + Deep Navy) */ [data-theme="treasury"] { --bg: #F4F1EA; --bg-2: #ECE7D8; --bg-3: #E2DCC9; --ink: #141414; --ink-2: #2B2A28; --muted: #6B6760; --rule: rgba(20, 20, 20, 0.14); --rule-strong: rgba(20, 20, 20, 0.32); --accent: #0F2740; --accent-2: #1B3D5F; --accent-ink: #F4F1EA; --positive: #1F3A2E; --negative: #722F37; --hairline-on-accent: rgba(244, 241, 234, 0.22); } /* DORMANT alternate — Spartan tech (White + Black + Deep Teal) */ [data-theme="spartan"] { --bg: #FFFFFF; --bg-2: #F4F4F2; --bg-3: #E9E9E6; --ink: #000000; --ink-2: #161616; --muted: #5C5C5C; --rule: rgba(0, 0, 0, 0.12); --rule-strong: rgba(0, 0, 0, 0.30); --accent: #0F4C5C; --accent-2: #1A6B7F; --accent-ink: #FFFFFF; --positive: #14532D; --negative: #7F1D1D; --hairline-on-accent: rgba(255, 255, 255, 0.22); } /* LIVE alternate — Bloomberg dark Same editorial idiom as the live Bloomberg theme, inverted for night reading. Warm dark background (not pure #000); cream/ink-warm text; brighter oxblood accent so it sings against the dark. Newspaper-at-night, not Bloomberg terminal. Activated by data-theme="bloomberg-dark" on , or via the prefers-color-scheme: dark fallback below. */ [data-theme="bloomberg-dark"] { --bg: #0F0E0B; --bg-2: #181614; --bg-3: #221F1A; --ink: #E8E2D2; --ink-2: #C9C1AD; --muted: #8C8674; --rule: rgba(232, 226, 210, 0.14); --rule-strong: rgba(232, 226, 210, 0.32); --accent: #B85763; --accent-2: #C26772; --accent-ink: #0F0E0B; --positive: #6FA875; --negative: #B85763; --hairline-on-accent: rgba(15, 14, 11, 0.22); } /* System dark-mode default (only when user has not explicitly chosen a theme). If has no data-theme attribute and the OS reports dark preference, apply the bloomberg-dark variables at the :root level. The JS layer in site.js writes data-theme explicitly when the user toggles, which overrides this. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0F0E0B; --bg-2: #181614; --bg-3: #221F1A; --ink: #E8E2D2; --ink-2: #C9C1AD; --muted: #8C8674; --rule: rgba(232, 226, 210, 0.14); --rule-strong: rgba(232, 226, 210, 0.32); --accent: #B85763; --accent-2: #C26772; --accent-ink: #0F0E0B; --positive: #6FA875; --negative: #B85763; --hairline-on-accent: rgba(15, 14, 11, 0.22); } } /* ----------------------------------------------------------------------------- 3. RESET / BASE ----------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "onum" 1; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: border-color 160ms ease, color 160ms ease; } a:hover { border-bottom-color: var(--ink); } a.unstyled, nav a, .button, .logo a { border-bottom: none; } button { font-family: inherit; font-size: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } p { margin: 0 0 1em; max-width: var(--measure); } h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.005em; } hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: 0; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ----------------------------------------------------------------------------- 4. UTILITIES ----------------------------------------------------------------------------*/ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .measure { max-width: var(--measure); } .measure-wide { max-width: 76ch; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.25rem; font-weight: 500; } .mono { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.01em; } .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 56ch; } .muted { color: var(--muted); } .italic { font-style: italic; } .rule { border-top: var(--rule-w) solid var(--rule); } .rule-strong { border-top: var(--rule-w) solid var(--rule-strong); } .section { padding-block: var(--section-y); } .section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .cluster { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .stack > * + * { margin-top: var(--stack, 1rem); } .hide-mobile { display: initial; } @media (max-width: 720px) { .hide-mobile { display: none; } } /* ----------------------------------------------------------------------------- 5. NAV ----------------------------------------------------------------------------*/ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: var(--rule-w) solid transparent; transition: border-color 160ms ease, background 160ms ease; } .nav.is-scrolled { border-bottom-color: var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-links { display: flex; gap: 1.6rem; align-items: center; } .nav-links a { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); border-bottom: 0; } .nav-links a:hover { color: var(--accent); } .nav-cta { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; border: var(--rule-w) solid var(--ink); padding: 0.55rem 0.9rem; color: var(--ink); transition: background 160ms ease, color 160ms ease; } .nav-cta:hover { background: var(--ink); color: var(--bg); } /* Theme toggle (sun/moon/system) — sits at the right end of .nav-inner. 28x28 monochrome SVG button. Click cycles system -> light -> dark. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 0.4rem; padding: 0; border: var(--rule-w) solid var(--rule-strong); background: transparent; color: var(--ink-2); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 14px; height: 14px; display: block; } .theme-toggle .icon-light, .theme-toggle .icon-dark, .theme-toggle .icon-system { display: none; } .theme-toggle[data-state="system"] .icon-system { display: block; } .theme-toggle[data-state="light"] .icon-light { display: block; } .theme-toggle[data-state="dark"] .icon-dark { display: block; } @media (max-width: 720px) { .nav-links { gap: 1rem; } .nav-links a:not(.nav-cta) { display: none; } } /* ----------------------------------------------------------------------------- 6. LOGO / WORDMARK ----------------------------------------------------------------------------*/ .logo { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-serif); font-size: 1.35rem; font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); } .logo .dot { display: inline-block; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--accent); transform: translateY(-0.05em); } .logo a { border-bottom: 0; color: inherit; } /* ----------------------------------------------------------------------------- 7. BUTTONS ----------------------------------------------------------------------------*/ .button { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; padding: 0.85rem 1.1rem; border: var(--rule-w) solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; transition: transform 120ms ease, background 160ms ease, color 160ms ease; } .button:hover { transform: translateY(-1px); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .button.is-ghost { background: transparent; color: var(--ink); } .button.is-ghost:hover { background: var(--ink); color: var(--bg); } .button .arrow { transition: transform 160ms ease; } .button:hover .arrow { transform: translateX(3px); } /* ----------------------------------------------------------------------------- 8. HERO ----------------------------------------------------------------------------*/ .hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: var(--rule-w) solid var(--rule); } .hero-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; } .hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .hero h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 1.4rem; max-width: 18ch; } .hero h1 em { font-style: italic; color: var(--accent); } .hero .lede { margin: 0 0 2.2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .hero-meta { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 2rem; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .hero-meta span strong { color: var(--ink); font-weight: 500; } /* ----------------------------------------------------------------------------- 9. NUMBERS BAND ----------------------------------------------------------------------------*/ .numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); } .numbers > div { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem); border-right: var(--rule-w) solid var(--rule); } .numbers > div:last-child { border-right: 0; } .numbers .stat { font-family: var(--font-serif); font-size: var(--fs-stat); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin-bottom: 0.6rem; } .numbers .stat-label { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } .numbers .stat-cite { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .numbers .stat-cite a { border-bottom-color: var(--rule); } .numbers .stat-cite a:hover { border-bottom-color: var(--accent); color: var(--accent); } @media (max-width: 760px) { .numbers { grid-template-columns: 1fr; } .numbers > div { border-right: 0; border-bottom: var(--rule-w) solid var(--rule); } .numbers > div:last-child { border-bottom: 0; } } /* ----------------------------------------------------------------------------- 10. SECTIONS / EDITORIAL TYPE ----------------------------------------------------------------------------*/ .section h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; max-width: 22ch; } .section h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; } .section p { color: var(--ink-2); } .section .lede { color: var(--ink); margin-bottom: 1.5rem; } .section-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 880px) { .section-grid { grid-template-columns: 1fr; gap: 1.4rem; } } .section-grid .label { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-top: var(--rule-w) solid var(--ink); padding-top: 0.8rem; } .section-divider { border: 0; border-top: var(--rule-w) solid var(--rule); } /* "How it works" steps */ .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); } .steps > li { list-style: none; padding: 1.6rem 1.2rem; border-right: var(--rule-w) solid var(--rule); background: var(--bg); } .steps > li:last-child { border-right: 0; } .steps .step-num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); margin-bottom: 0.6rem; letter-spacing: 0.04em; } .steps .step-title { font-weight: 600; margin-bottom: 0.3rem; } .steps p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps > li:nth-child(2n) { border-right: 0; } } @media (max-width: 540px) { .steps { grid-template-columns: 1fr; } .steps > li { border-right: 0; border-bottom: var(--rule-w) solid var(--rule); } .steps > li:last-child { border-bottom: 0; } } /* Comparison table (TradFi anchor / Securitize stack / Qualiq) */ .compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-top: 1.5rem; } .compare th, .compare td { padding: 0.85rem 1rem; text-align: left; border-bottom: var(--rule-w) solid var(--rule); vertical-align: top; } .compare thead th { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom: var(--rule-w) solid var(--ink); } .compare tbody th { font-weight: 400; font-style: italic; color: var(--ink-2); width: 38%; } .compare .y { color: var(--positive); } .compare .n { color: var(--negative); } .compare .qualiq-col { background: color-mix(in srgb, var(--accent) 6%, transparent); } .compare thead .qualiq-col { color: var(--accent); } /* Quote pulls (used on /raise and contextually elsewhere) */ .pull { border-left: 2px solid var(--accent); padding: 0.4rem 0 0.4rem 1.4rem; font-style: italic; color: var(--ink-2); max-width: 56ch; } .pull cite { display: block; margin-top: 0.6rem; font-style: normal; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ----------------------------------------------------------------------------- 11. LIVE LEADERBOARD MOCK ----------------------------------------------------------------------------*/ .board-wrap { border: var(--rule-w) solid var(--rule); background: var(--bg); } .board-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: var(--rule-w) solid var(--rule); background: var(--bg-2); } .board-head .title { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .board-head .live { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-2); } .board-head .live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } .board { width: 100%; border-collapse: collapse; } .board thead th { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 0.85rem 1rem; border-bottom: var(--rule-w) solid var(--rule); background: var(--bg-2); } .board thead th.num { text-align: right; } .board tbody td { padding: 0.9rem 1rem; border-bottom: var(--rule-w) solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); transition: background 220ms ease; } .board tbody tr { transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); } .board tbody tr.flash td { background: color-mix(in srgb, var(--accent) 8%, transparent); } .board td.dealer { font-family: var(--font-serif); font-style: italic; color: var(--ink); font-size: var(--fs-body); } .board td.num { text-align: right; } .board td.delta.up { color: var(--positive); } .board td.delta.down { color: var(--negative); } .board tbody tr:last-child td { border-bottom: 0; } .board-foot { padding: 0.7rem 1.1rem; border-top: var(--rule-w) solid var(--rule); background: var(--bg-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; } /* ----------------------------------------------------------------------------- 11b. LANDING COUNTERFACTUAL WIDGET Lives on / (index.html) between the hero and the numbers band. Data is fetched by site.js (every 30s) with a JSON snapshot fallback. ----------------------------------------------------------------------------*/ .cf-section { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: var(--rule-w) solid var(--rule); } .cf-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 880px) { .cf-grid { grid-template-columns: 1fr; gap: 1.4rem; } } .cf-grid .label { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-top: var(--rule-w) solid var(--ink); padding-top: 0.8rem; } .cf-grid h2 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); margin-top: 0.6rem; max-width: 14ch; } .cf-grid h2 em { font-style: italic; color: var(--accent); } .cf-grid p { font-size: 0.98rem; color: var(--ink-2); line-height: 1.55; max-width: 32ch; } .cf-card { border: var(--rule-w) solid var(--rule-strong); background: var(--bg); padding: 0; } .cf-card-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; background: var(--bg-2); border-bottom: var(--rule-w) solid var(--rule); } .cf-card-head .title { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .cf-card-head .live { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-2); } .cf-card-head .live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } .cf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .cf-stats > div { padding: 1.4rem 1.2rem; border-right: var(--rule-w) solid var(--rule); } .cf-stats > div:last-child { border-right: 0; } @media (max-width: 700px) { .cf-stats { grid-template-columns: repeat(2, 1fr); } .cf-stats > div:nth-child(2) { border-right: 0; } .cf-stats > div:nth-child(1), .cf-stats > div:nth-child(2) { border-bottom: var(--rule-w) solid var(--rule); } } .cf-stats .lbl { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } .cf-stats .val { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .cf-stats .val.savings { color: var(--positive); } .cf-stats .val .unit { font-size: 0.55em; color: var(--ink-2); letter-spacing: -0.005em; } .cf-stats .val.loss-rate { color: var(--negative); font-style: italic; } .cf-stats .sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 0.4rem; } .cf-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 0.9rem 1.2rem; border-top: var(--rule-w) solid var(--rule); background: var(--bg-2); font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .cf-footer code { color: var(--accent); } .cf-footer a { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border-bottom: 0; } .pair-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: var(--rule-w) solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-micro); } .pair-strip > div { padding: 0.85rem 1.2rem; border-right: var(--rule-w) solid var(--rule); } .pair-strip > div:last-child { border-right: 0; } .pair-strip .p-name { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink); margin-bottom: 0.3rem; } .pair-strip .p-savings { color: var(--positive); font-weight: 500; } @media (max-width: 700px) { .pair-strip { grid-template-columns: 1fr 1fr; } .pair-strip > div { border-right: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); } .pair-strip > div:nth-child(2n) { border-right: 0; } } /* ----------------------------------------------------------------------------- 12. TEAM CARDS ----------------------------------------------------------------------------*/ .team { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); } .team > article { padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem); border-right: var(--rule-w) solid var(--rule); } .team > article:last-child { border-right: 0; } .team .role { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .team h3 { font-size: var(--fs-h3); font-style: italic; font-weight: 500; } .team p { color: var(--ink-2); margin-bottom: 0.7rem; } @media (max-width: 760px) { .team { grid-template-columns: 1fr; } .team > article { border-right: 0; border-bottom: var(--rule-w) solid var(--rule); } .team > article:last-child { border-bottom: 0; } } /* ----------------------------------------------------------------------------- 13. CONTACT FORM ----------------------------------------------------------------------------*/ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } @media (max-width: 880px) { .contact { grid-template-columns: 1fr; } } .form { display: flex; flex-direction: column; gap: 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } } .field label { display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); background: var(--bg-2); border: var(--rule-w) solid var(--rule-strong); padding: 0.8rem 0.9rem; border-radius: 0; transition: border-color 160ms ease, background 160ms ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); background: var(--bg); } .field textarea { resize: vertical; min-height: 110px; } .form-actions { display: flex; align-items: center; gap: 1rem; } .form-status { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .form-status.ok { color: var(--positive); } .form-status.err { color: var(--negative); } /* ----------------------------------------------------------------------------- 14. FOOTER ----------------------------------------------------------------------------*/ .footer { border-top: var(--rule-w) solid var(--rule); padding-block: 2.4rem; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .footer-inner { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; align-items: center; } .footer a { color: var(--ink-2); border-bottom-color: var(--rule); } .footer a:hover { color: var(--accent); border-bottom-color: var(--accent); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; } /* ----------------------------------------------------------------------------- 15. FADE-IN ON SCROLL ----------------------------------------------------------------------------*/ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-eyebrow .pulse, .board-head .live .pulse { animation: none; } html { scroll-behavior: auto; } } /* ----------------------------------------------------------------------------- 16. PALETTES PREVIEW PAGE ----------------------------------------------------------------------------*/ .palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule-w) solid var(--rule); } @media (max-width: 1080px) { .palette-grid { grid-template-columns: 1fr; } } .palette { background: var(--bg); color: var(--ink); border-right: var(--rule-w) solid var(--rule); } .palette:last-child { border-right: 0; } .palette-inner { padding: clamp(1.6rem, 3vw, 2.4rem); } .palette-name { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .palette h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.8rem; max-width: none; } .palette p { color: var(--ink-2); font-size: var(--fs-small); } .palette-swatches { display: flex; gap: 0; margin: 1.2rem 0 1.4rem; } .palette-swatches span { display: block; height: 36px; flex: 1; border-right: var(--rule-w) solid var(--rule); } .palette-swatches span:last-child { border-right: 0; } .palette-cta { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; border: var(--rule-w) solid var(--ink); padding: 0.55rem 0.9rem; margin-top: 1rem; color: var(--ink); } .palette-mini-board { margin-top: 1.4rem; border: var(--rule-w) solid var(--rule); } .palette-mini-board .row { display: grid; grid-template-columns: 28px 1fr auto; gap: 0.8rem; align-items: center; padding: 0.55rem 0.7rem; border-bottom: var(--rule-w) solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-2); } .palette-mini-board .row:last-child { border-bottom: 0; } .palette-mini-board .row .name { font-family: var(--font-serif); font-style: italic; color: var(--ink); font-size: var(--fs-small); } .palette-stat { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.02em; margin-top: 0.2rem; } /* ----------------------------------------------------------------------------- 17. RAISE / RESEARCH PAGES ----------------------------------------------------------------------------*/ .page-header { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: var(--rule-w) solid var(--rule); } .page-header h1 { font-size: var(--fs-h1); max-width: 22ch; margin: 0.5rem 0 1rem; } .page-header .lede { max-width: 60ch; } .page-header .meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.4rem; } .terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); } .terms > div { padding: clamp(1.6rem, 3vw, 2.2rem); border-right: var(--rule-w) solid var(--rule); } .terms > div:last-child { border-right: 0; } .terms .label { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } .terms .value { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } @media (max-width: 760px) { .terms { grid-template-columns: 1fr; } .terms > div { border-right: 0; border-bottom: var(--rule-w) solid var(--rule); } .terms > div:last-child { border-bottom: 0; } } .milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; } .milestones li { display: grid; grid-template-columns: 80px 1fr; gap: 1.4rem; padding-block: 1rem; border-top: var(--rule-w) solid var(--rule); } .milestones li:last-child { border-bottom: var(--rule-w) solid var(--rule); } .milestones .when { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .milestones h3 { font-size: var(--fs-h3); margin-bottom: 0.2rem; } .milestones p { margin: 0; color: var(--ink-2); } /* ----------------------------------------------------------------------------- 18. RESEARCH PAPER VIEW (used on /research) ----------------------------------------------------------------------------*/ .paper-masthead { border-bottom: var(--rule-w) solid var(--ink); padding-block: clamp(2.6rem, 5vw, 4rem); } .paper-masthead .paper-series { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; } .paper-masthead h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.05; margin: 0 0 0.6rem; max-width: 22ch; } .paper-masthead .paper-subtitle { font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); margin: 0 0 1.8rem; max-width: 60ch; } .paper-byline { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; padding-top: 1.4rem; border-top: var(--rule-w) solid var(--rule); } .paper-byline > div { display: flex; flex-direction: column; gap: 0.2rem; } .paper-byline dt { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .paper-byline dd { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); margin: 0; } /* Two-column body with sticky TOC */ .paper-grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 980px) { .paper-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .paper-toc { position: sticky; top: 88px; align-self: start; font-family: var(--font-sans); font-size: var(--fs-micro); } .paper-toc .toc-label { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-top: var(--rule-w) solid var(--ink); padding-top: 0.7rem; margin-bottom: 0.9rem; } .paper-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .paper-toc ol ol { padding-left: 1rem; margin-top: 0.3rem; } .paper-toc li { margin-bottom: 0.45rem; line-height: 1.4; } .paper-toc a { color: var(--ink-2); border-bottom: 0; text-transform: none; letter-spacing: 0.01em; font-size: 0.78rem; } .paper-toc a:hover { color: var(--accent); } @media (max-width: 980px) { .paper-toc { position: static; padding: 1rem; border: var(--rule-w) solid var(--rule); background: var(--bg-2); } } .paper-body { min-width: 0; } .paper-body section { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .paper-body h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.005em; margin: 0 0 1rem; padding-top: 1.2rem; border-top: var(--rule-w) solid var(--ink); } .paper-body h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.5rem; font-style: italic; } .paper-body h4 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 0.4rem; } .paper-body p { max-width: 64ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.65; } .paper-body p strong { color: var(--ink); font-weight: 600; } .paper-body p em, .paper-body p i { font-style: italic; } .paper-body .paper-lede { font-size: 1.18rem; line-height: 1.55; color: var(--ink); max-width: 60ch; } .paper-body .pair-meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); margin: -0.3rem 0 1rem; } /* Data tables */ .data-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: var(--fs-small); font-variant-numeric: tabular-nums; } .data-table thead th { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 0.6rem 0.8rem; border-bottom: var(--rule-w) solid var(--ink); border-top: var(--rule-w) solid var(--ink); } .data-table thead th.num { text-align: right; } .data-table tbody td { padding: 0.65rem 0.8rem; border-bottom: var(--rule-w) solid var(--rule); color: var(--ink-2); vertical-align: top; } .data-table tbody td:first-child { font-style: italic; color: var(--ink); } .data-table tbody td.num, .data-table tbody th.num, .data-table tbody td.mono { text-align: right; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; } .data-table tbody tr:last-child td { border-bottom: var(--rule-w) solid var(--ink); } .data-table.compact { margin: 0.8rem 0 1.4rem; } .data-table.compact tbody td:first-child { font-style: normal; color: var(--ink-2); } /* Callouts (paper insets) */ .callout { border-left: 2px solid var(--accent); background: var(--bg-2); padding: 1rem 1.2rem; margin: 1.4rem 0; font-size: var(--fs-small); color: var(--ink-2); } .callout p { margin: 0; max-width: none; line-height: 1.55; font-size: var(--fs-small); } .callout p + p { margin-top: 0.6rem; } .callout strong { color: var(--ink); } .callout-strong { background: var(--bg); border: var(--rule-w) solid var(--ink); border-left-width: 2px; border-left-color: var(--accent); } /* Display formula */ .formula { display: block; font-family: var(--font-mono); font-size: 0.95rem; text-align: center; padding: 1rem 1.2rem; margin: 1.4rem auto; background: var(--bg-2); border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); max-width: 64ch; color: var(--ink); } /* Figure / chart slots — gracefully placeholder when image missing */ .figure-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; } @media (max-width: 720px) { .figure-stack { grid-template-columns: 1fr; } } .chart { margin: 0; border: var(--rule-w) solid var(--rule); background: var(--bg-2); display: flex; flex-direction: column; } .chart img { width: 100%; height: auto; display: block; background: var(--bg); } .chart figcaption { padding: 0.6rem 0.8rem; border-top: var(--rule-w) solid var(--rule); font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; gap: 0.6rem; align-items: baseline; } .chart figcaption .fig-no { color: var(--ink); font-weight: 500; } .chart.is-pending img { display: none; } .chart.is-pending::before { content: "Chart pending"; display: block; text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); padding: 3rem 1rem; background: repeating-linear-gradient( 45deg, transparent 0 10px, var(--bg-3) 10px 11px ), var(--bg-2); letter-spacing: 0.04em; } /* Methodology numbered list */ .method-list { list-style: none; counter-reset: method; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; } .method-list li { counter-increment: method; display: grid; grid-template-columns: 32px 1fr; gap: 1rem; padding: 0.6rem 0 0.8rem; border-top: var(--rule-w) solid var(--rule); } .method-list li:last-child { border-bottom: var(--rule-w) solid var(--rule); } .method-list li::before { content: counter(method, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); padding-top: 0.3rem; } .method-list li > div p { margin: 0; } .method-list h4 { margin: 0 0 0.2rem; font-size: 1.02rem; } /* Inline footnote-y emphasis used in the appendix */ .paper-body code, .paper-body kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); padding: 0.05em 0.35em; border: var(--rule-w) solid var(--rule); } /* ----------------------------------------------------------------------------- 18b. EVIDENCE LIST (used on /evidence) ----------------------------------------------------------------------------*/ .evidence-list { list-style: none; padding: 0; margin: 0; counter-reset: cite; } .evidence-list > li { counter-increment: cite; padding: 1.2rem 0; border-bottom: var(--rule-w) solid var(--rule); display: grid; grid-template-columns: 60px 1fr; gap: 1.4rem; align-items: baseline; } .evidence-list > li:last-child { border-bottom: 0; } .evidence-list > li::before { content: "[" counter(cite) "]"; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0; } .evidence-list .src { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .evidence-list .title { font-style: italic; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.3rem; max-width: 64ch; } .evidence-list .meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .evidence-list .meta a { color: var(--ink-2); border-bottom-color: var(--rule); } .evidence-list .meta a:hover { color: var(--accent); border-bottom-color: var(--accent); } .evidence-section-header { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); border-top: var(--rule-w) solid var(--ink); padding-top: 1rem; margin: 3rem 0 0.6rem; } .evidence-section-header:first-of-type { margin-top: 0; } .evidence-section-header .count { font-family: var(--font-mono); letter-spacing: 0; color: var(--ink-2); margin-left: 0.6rem; } /* ----------------------------------------------------------------------------- 18c. WORST-FILLS PAGE (used on /research/worst-fills) ----------------------------------------------------------------------------*/ .methodology-badge { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.9rem; border: var(--rule-w) solid var(--rule-strong); background: var(--bg-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-2); margin-top: 1.2rem; } .methodology-badge .label { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); border-right: var(--rule-w) solid var(--rule); padding-right: 0.9rem; } .methodology-badge code { color: var(--accent); letter-spacing: 0; } .worst-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 14px; font-variant-numeric: tabular-nums; } .worst-table thead th { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 0.7rem 0.7rem; border-bottom: 2px solid var(--ink); border-top: var(--rule-w) solid var(--ink); white-space: nowrap; } .worst-table thead th.num { text-align: right; } .worst-table tbody tr { transition: background 120ms ease; } .worst-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .worst-table tbody td { padding: 0.7rem 0.7rem; border-bottom: var(--rule-w) solid var(--rule); vertical-align: middle; } .worst-table tbody tr:last-child td { border-bottom: var(--rule-w) solid var(--ink); } .worst-table .sig { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); } .worst-table .sig a { border-bottom-color: var(--rule); color: var(--ink); } .worst-table .sig a:hover { color: var(--accent); border-bottom-color: var(--accent); } .worst-table .pair { font-style: italic; color: var(--ink); } .worst-table td.num { text-align: right; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; } .worst-table td.savings-neg { color: var(--negative); font-weight: 500; } .worst-table td.savings-pos { color: var(--positive); font-weight: 500; } .worst-table .audit-cell { text-align: right; width: 70px; } .worst-table .audit-link { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border-bottom: 0; } .controls { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: var(--rule-w) solid var(--rule); } .control-group { display: flex; align-items: center; gap: 0.5rem; } .control-group label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .control-group select { font-family: var(--font-mono); font-size: 12px; padding: 0.3rem 0.5rem; border: var(--rule-w) solid var(--rule-strong); background: var(--bg); color: var(--ink); } .live-indicator { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; } .live-indicator .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } .honest-disclosure { border: var(--rule-w) solid var(--ink); border-left: 3px solid var(--accent); background: var(--bg-2); padding: 1.2rem 1.4rem; margin: 1.6rem 0 2rem; max-width: 64ch; } .honest-disclosure h3 { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; font-weight: 500; } .honest-disclosure p { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--ink); } .honest-disclosure p:last-child { margin-bottom: 0; } .honest-disclosure strong { color: var(--ink); } /* ----------------------------------------------------------------------------- 18d. GEO-GATE OVERLAY (used by site.js when QUALIQ_GEO_GATE = enforce) ----------------------------------------------------------------------------*/ .geo-gate { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: none; align-items: center; justify-content: center; padding: 2rem; } .geo-gate.is-active { display: flex; } .geo-gate .gate-card { max-width: 560px; width: 100%; background: var(--bg); border: var(--rule-w) solid var(--ink); padding: clamp(2rem, 4vw, 3rem); } .geo-gate .gate-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); border-top: var(--rule-w) solid var(--ink); padding-top: 1rem; margin-bottom: 1.2rem; } .geo-gate h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -0.005em; margin: 0 0 1rem; max-width: 22ch; } .geo-gate p { font-family: var(--font-serif); color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; max-width: 56ch; margin: 0 0 0.8rem; } .geo-gate .gate-meta { margin-top: 1.4rem; padding-top: 1rem; border-top: var(--rule-w) solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--muted); } .geo-gate .gate-meta code { color: var(--accent); } /* ----------------------------------------------------------------------------- 19. MISC ----------------------------------------------------------------------------*/ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--rule-strong); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-2); } @media print { .nav, .footer, .form, .button, .nav-cta { display: none !important; } body { background: #fff; color: #000; } a { border-bottom: 0; color: #000; } }