@import url("/assets/fonts/fonts.css"); /* ============================================================ /assets/css/qwq-tokens.css QWQ Digital Studio - whole-site DARK house-brand token layer SINGLE SOURCE OF TRUTH for the dark editorial front-of-house. ------------------------------------------------------------ Phase 0 of the homepage dark redesign (see docs/plans/homepage-dark-redesign-plan.md, sec. 2). NAMING CONVERGENCE ------------------------------------------------------------ Variable names here deliberately MIRROR the editorial theme in templates/shared/tokens.css (:root[data-theme="editorial"]) so there is no third naming scheme. We do NOT redefine the editorial THEME values; this file is the house-brand front-of- house surface and uses the owner-approved espresso + brass palette locked in v5 (warm near-black #1A1612 / brass gold #C9A24A / warm cream #ECE6DA), 2026-05-30. Same variable contract, house values. Shared contract names reused from editorial: --bg --bg-card --bg-elev --bg-elev2 --text --text-2 --dim --faint --ink --border --border-hi --accent --accent-dim --accent-alt --accent-pale --accent-glow --accent-text --font-display --font-body --font-mono --radius --radius-lg --radius-xl --max-w --nav-h --section-pad House-only additions (no editorial equivalent, front-of-house): --bg-2 alternate section band --panel raised card surface (alias of --bg-card) --panel-2 card hover lift (alias of --bg-elev) --footer-bg deepest band for the footer --accent-ink DARK ink that sits ON the solid brass CTA --accent-display large-display accent variant --shadow-sm --shadow-float depth presets --bezel --bezel-2 --bezel-edge device mockup chrome --inner-pad horizontal gutter (clamped) USAGE ------------------------------------------------------------ Load FIRST, before any page/module CSS: Front-of-house pages need NO data-theme attribute: these tokens live on :root directly so the dark house brand is the default. ============================================================ */ :root { /* ── Backgrounds (warm espresso family) ────────────────── Tonal relationship so raised panels / borders stay readable. */ --bg: #1A1612; /* page background - espresso, warm near-black */ --bg-2: #1F1B16; /* alternate section band (~+8% lift) */ --bg-card: #221D17; /* raised card / panel surface (~+10%) */ --bg-elev: #28221B; /* elevated / hover surface (~+16%) */ --bg-elev2: #2F281F; /* second elevation tier */ --footer-bg: #14110D; /* deepest band - footer */ /* House aliases (v5 names kept so migrated rules read naturally). */ --panel: var(--bg-card); --panel-2: var(--bg-elev); /* ── Brass gold accent ─────────────────────────────────── Brass #C9A24A is already ~6.6:1 on the espresso bg, so it clears AA for large text / icons / borders. --accent-text is a gently lifted variant kept >= 4.5:1 for SMALL text. */ --accent: #C9A24A; /* CTA fill, icons, section labels, links */ --accent-dim: #B0852F; /* hover / pressed state of accent fills */ --accent-alt: #D4A84E; /* warm secondary accent (badges) */ --accent-pale: rgba(201, 162, 74, 0.10); /* tinted card / pill bg */ --accent-glow: rgba(201, 162, 74, 0.25); /* glow on CTA / icon backdrop */ /* Small-text-safe brass: lifted toward warm cream for comfortable AA on the espresso surfaces without washing out to pale yellow. */ --accent-text: #D8BC7A; /* Large-display brass (>=24px): luminous lift for headings / big numerals. */ --accent-display: #DFC07E; /* DARK ink that rides ON the solid brass button (brass plate is bright). */ --accent-ink: #1A1612; /* ── Text (warm cream family) ──────────────────────────── All verified >= 4.5:1 on --bg #1A1612: --text #ECE6DA = 12.9:1 --text-2 #D8D0C4 = 10.8:1 --dim #B0A89A = 6.9:1 --faint #A39C92 = 5.8:1 */ --text: #ECE6DA; /* primary body / strong text */ --text-2: #D8D0C4; /* secondary text, descriptions */ --dim: #B0A89A; /* muted labels / captions */ --faint: #A39C92; /* faint metadata (still AA on bg) */ --ink: #F4EFE4; /* hero large display text (brightest cream) */ /* ── Borders / hairlines ─────────────────────────────────── */ --border: #342D24; /* default divider on espresso */ --border-hi: #463D31; /* highlighted / focus-base border */ /* ── Typography ────────────────────────────────────────── House front-of-house pairing (v5 type system, self-hosted): display = Bebas Neue - giant condensed wordmark anchors only serif = Playfair - editorial headings + accent / pull-quote body = DM Sans - body / nav / UI --font-display maps to the SERIF (editorial-contract name: it is the heading/display font), while the all-caps Bebas anchor gets its own --font-anchor. CJK fall through Noto Sans SC / PingFang. */ --font-display: "Playfair Display", "DM Serif Display", Georgia, "Times New Roman", serif; --font-body: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", system-ui, sans-serif; --font-anchor: "Bebas Neue", "Arial Narrow", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; /* ── Type scale (front-of-house) ─────────────────────────── */ --fs-h1: clamp(2.4rem, 5vw, 3.6rem); --fs-h2: clamp(1.8rem, 3.4vw, 2.6rem); --fs-h3: 1.35rem; --fs-body: 1rem; /* 16px */ --lh-body: 1.7; /* ── Spacing / layout ────────────────────────────────────── */ --max-w: 1140px; /* content max-width (editorial contract name) */ --inner-pad: clamp(20px, 5vw, 40px); /* horizontal gutter */ --section-pad: clamp(40px, 5vw, 64px); /* section vertical rhythm (tightened 2026-06-03, then again with chapter dividers absorbing inter-section space) */ --nav-h: 72px; /* ── Radii ───────────────────────────────────────────────── */ --radius: 8px; /* default */ --radius-md: 12px; /* mid (buttons, small cards) */ --radius-lg: 20px; /* card radius (editorial contract name) */ --radius-xl: 28px; /* modal / large panel radius */ /* ── Shadows ───────────────────────────────────────────── On the deep espresso bg a plain drop shadow is near-invisible, so depth = low-alpha black + a faint brass glow on accent items. */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.30), 0 28px 80px rgba(0, 0, 0, 0.55); --shadow-glow: 0 8px 24px rgba(201, 162, 74, 0.16); /* ── Device mockup chrome (neutral, palette-independent) ─── */ --bezel: #0C0A08; --bezel-2: #1F1A15; --bezel-edge: #3A332B; } /* ============================================================ COMPONENT PRIMITIVES (front-of-house, token-driven) Reusable across the homepage and every future dark page. Layout (grids, hero, sections) stays in page CSS (home.css). ============================================================ */ /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; padding: 14px 28px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } /* Solid brass CTA with dark ink (effigy: "Get a free sample"). */ .btn--gold { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-glow); } .btn--gold:hover { background: color-mix(in srgb, var(--accent) 86%, #FFFFFF); transform: translateY(-2px); } /* Transparent ghost with brass outline ("See our work"). */ .btn--ghost-gold { background: transparent; color: var(--text); border-color: var(--border-hi); } .btn--ghost-gold:hover { border-color: var(--accent); color: var(--accent-text); } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* ── Card primitive ───────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-float); } @media (prefers-reduced-motion: reduce) { .card { transition: border-color .3s ease; } .card:hover { transform: none; } } /* ── Eyebrow / section label ──────────────────────────────── */ .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .7; } /* ── Quiet text link with arrow ───────────────────────────── */ .textlink { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .textlink:hover { color: var(--accent-text); border-color: var(--accent); } .textlink .arrow { transition: transform .18s ease; } .textlink:hover .arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .textlink:hover .arrow { transform: none; } } /* ============================================================ SOFT STRUCTURALISM homepage palette (homepage-redesign-spec.md v1.0, 2026-06-09) ------------------------------------------------------------ The root homepage (`/index.html`) opts in with . These tokens are deliberately SCOPED to html.hp so the legacy brass/espresso :root token system above stays untouched for the ~21 other pages that still consume this shared file. Do NOT lift these onto :root -- that would repaint every other page. Two complete palettes (spec sec 3): light is the default, dark is selected by prefers-color-scheme, and a manual data-theme attribute on overrides the system preference. ============================================================ */ html.hp { --bg: #F8F8F6; /* near-white, faint warm tint -- NOT cream */ --bg-2: #EFEFED; /* alternate section band */ --surface: #FFFFFF; /* card / panel surfaces */ --ink: #111111; /* primary text */ --ink-2: #555552; /* secondary text */ --dim: #999996; /* captions, tertiary labels */ --blue: #2E5A9E; /* sapphire -- single accent colour */ --blue-pale: #EBF0F8; /* very light blue tint (Pro card bg) */ --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.14); --green: #22C55E; /* product-UI only (call card), not a brand colour */ --hp-num: rgba(0,0,0,0.055); /* giant faint step numerals */ --hp-arc: rgba(46,90,158,0.10); /* dashed depth circle behind hero art */ /* One typeface for every role (spec sec 4). Overrides the legacy Playfair/DM Sans contract only within the homepage subtree. */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; } /* Dark palette via system preference (unless user forced light). */ @media (prefers-color-scheme: dark) { html.hp:not([data-theme="light"]) { --bg: #0F0F0D; /* deep warm black -- NOT pure #000 */ --bg-2: #161613; --surface: #1E1E1A; --ink: #F0EFE9; /* warm white */ --ink-2: #A09E97; --dim: #666460; --blue: #6A9FD8; /* lighter blue, readable on dark */ --blue-pale: #141C29; /* dark blue tint for Pro card */ --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --hp-num: rgba(255,255,255,0.06); --hp-arc: rgba(106,159,216,0.15); } } /* Manual dark override. */ html.hp[data-theme="dark"] { --bg: #0F0F0D; --bg-2: #161613; --surface: #1E1E1A; --ink: #F0EFE9; --ink-2: #A09E97; --dim: #666460; --blue: #6A9FD8; --blue-pale: #141C29; --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --hp-num: rgba(255,255,255,0.06); --hp-arc: rgba(106,159,216,0.15); } /* Manual light override (beats system dark). */ html.hp[data-theme="light"] { --bg: #F8F8F6; --bg-2: #EFEFED; --surface: #FFFFFF; --ink: #111111; --ink-2: #555552; --dim: #999996; --blue: #2E5A9E; --blue-pale: #EBF0F8; --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.14); --hp-num: rgba(0,0,0,0.055); --hp-arc: rgba(46,90,158,0.10); }