/* ========================================================================= Synqa Design System - Foundations Colors + Typography ========================================================================= */ /* --- Fonts --------------------------------------------------------------- */ /* PP Editorial New was the original display family. The brand has since adopted Fraunces (via @fontsource/fraunces in production builds) as the canonical display face. Fraunces ships from Google Fonts here and is used for hero headlines, the italic-serif voice, and metric numerals. Inter + JetBrains Mono load alongside. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400&display=swap'); :root { /* The site is light-only by design (Bone is the room). Declaring it stops Android WebView / in-app browser forced-dark from algorithmically inverting Bone/Ink (the meta tag in each page head is the load-bearing half; WebView's default strategy requires the meta, this is the CSS half). */ color-scheme: only light; /* ---- Palette (the five) -------------------------------------------- */ --bone: #F0EAD8; /* primary canvas. paper. most backgrounds. */ --ink: #1F1814; /* body text. primary mark on Bone. night. */ --clay: #B5573A; /* accent. the period. CTAs. rare voice. */ --harbor: #1F4D4A; /* secondary accent. italic-serif. cool. */ --stone: #A89C8A; /* mid neutral. captions, metadata, dividers. */ /* Tonal extensions of bone + ink, used sparingly for product UI only. */ --bone-100: #F7F3E6; /* a hair lighter than Bone; card faces. */ --bone-200: #F0EAD8; /* = Bone. */ --bone-300: #E5DEC8; /* hover on Bone. */ --bone-400: #D7CDB2; /* dividers on Bone. */ --ink-700: #2B2320; /* hover on Ink. */ --ink-800: #241C18; /* card faces on Ink. */ --ink-900: #1F1814; /* = Ink. */ /* ---- Stamp system ------------------------------------------------- */ /* Darkened stamp body text - replaces Stone on SECTION/CH./CASE labels. */ --stamp-fg: var(--ink-800); /* ---- CTA states ---------------------------------------------------- */ /* Baseline literals first (pre-color-mix engines drop a color-mix token at USE time, killing the whole hover declaration); the color-mix versions re-land in the @supports block after :root. Literals = Clay darkened ~8% / ~12% in sRGB, the nearest hand-derivable match. */ --clay-hover: #A75035; --clay-active: #9F4D33; /* ---- Ink-context colors, callable from anywhere -------------------- */ --fg-cool-on-ink: #6FA39F; --fg-quiet-on-ink: #C7BEA9; --border-on-ink: #2E2622; /* Functional semantics (NOT brand - use sparingly in product UI). */ --success: #2E6F4A; --warning: #C0871F; --danger: #A93226; /* ---- Chapter 5 service-card scene tints --------------------------- */ /* Illustrative mock-UI palette for the six self-building service cards (browser / phone / dashboard / SERP / loop / radar). NOT brand colors; kept here so no scene hex lives loose in the markup. Brand accents in the scenes still use --clay / --harbor / --bone etc.; #6FA39F and #C7BEA9 reuse the existing --fg-cool-on-ink / --fg-quiet-on-ink. */ --ch5-card: #1E1712; /* the dark card background */ --ch5-device: #15100C; /* phone body / sensor board */ --ch5-node: #3A2E26; /* unlit diagram node fill */ --ch5-dim: #6F665A; /* dimmed mono labels / tags */ --ch5-dim2: #8A8070; /* dimmed metadata */ --ch5-dim3: #9A9078; /* faint footer mark */ --ch5-serp: #FFFDF6; /* near-white SERP row face */ --ch5-line1: #E6DEC8; /* light-UI hairlines */ --ch5-line2: #DED5BD; --ch5-line3: #E0D8C2; --ch5-line4: #E2DAC4; --ch5-skel1: #ECE4CF; /* skeleton / placeholder fills */ --ch5-skel2: #CFC6AF; --ch5-skel3: #D6CDB4; --ch5-skel4: #C2B79C; --ch5-skel5: #DAD1B9; --ch5-skel6: #D2C8AF; --ch5-skel7: #D8CFB6; --ch5-skel8: #EAE1CC; --ch5-skel9: #C9BFA6; /* ---- Semantic tokens - light surfaces ------------------------------ */ --bg: var(--bone); --bg-elevated: var(--bone-100); --bg-sunken: var(--bone-300); --fg: var(--ink); --fg-muted: var(--stone); --fg-quiet: #6F665A; /* between Stone and Ink - for long body. */ --fg-accent: var(--clay); --fg-cool: var(--harbor); --border: var(--bone-400); --border-strong:var(--stone); --accent: var(--clay); --accent-cool: var(--harbor); /* ---- Typography families ------------------------------------------- */ --font-display: "Fraunces", "PP Editorial New", "Tiempos Headline", "Reckless Neue", "EB Garamond", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale (used by the role tokens below) -------------------- */ --fs-display-xl: clamp(48px, 7vw, 96px); /* hero */ --fs-display-l: clamp(40px, 5.5vw, 72px); --fs-display-m: clamp(32px, 4vw, 56px); --fs-h1: clamp(28px, 3vw, 40px); --fs-h2: clamp(22px, 2.2vw, 28px); --fs-h3: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-stamp: 11px; /* mono coords / metadata */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.55; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-stamp: 0.14em; /* ---- Radii --------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; --radius-tile: 22%; /* the app-icon corner; iOS-style */ /* ---- Spacing scale (4px base) ------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Mobile section rhythm (phones; clamp upper bound = tablet value) Reuses the 8-based steps above, applied to mobile SECTION rhythm rather than invented anew. Used only inside mobile-scoped rules (the max-width:1023px / pointer:coarse pass). The clamp ceilings size up for the tablet tier. See MOBILE-OVERHAUL-PLAN.md 6.3. ----------------------- */ --m-space-2xs: 8px; --m-space-xs: 12px; --m-space-sm: 16px; --m-space-md: 24px; --m-space-lg: 32px; --m-space-xl: 48px; --m-section-pad-y: clamp(40px, 9vw, 64px); /* top/bottom INSIDE a chapter */ --m-section-gap: clamp(28px, 7vw, 48px); /* BETWEEN stacked cards/sections */ /* The four mobile runway/cover tokens carry vh BASE values here; the svh versions land in the @supports block after :root. Reason (IACVT): a token HOLDING an svh value fails at computed-value time when USED on a pre-svh engine (WebKit <15.4, Chromium <108), which unsets the using property entirely; a same-property baseline line cannot rescue it. Old engines therefore read stable vh equivalents, modern engines the svh law. */ --m-wipe-runway: 14vh; /* the tight mobile surface flip */ --m-split-runway: 185vh; /* Ch4 M18 vertical split runway. pass 8.8 (gate-driven, the flip lane's 1.55px/px speed ceiling): 150->185. The pass-8 pin-anchored runway (section - pinH ~ 71 token-vh) + the enlarged pin-clearing travel (~723px) compressed the parting to ~2.9px/px; at 185 the derived runway is ~71 token-vh = ~620px and, with the 0.80 window in pass3.js applyCh04, travel-per-px lands ~1.45, back inside the design bar. The two stay coupled: re-derive BOTH completion-before-release and the speed bar if either changes. Home page cost ~+0.4 viewports (ceiling 19, worst measured ~18). */ --m-coldopen-h: 22vh; /* cold open hold on phones. 34->24: the cold open is a compact centred wordmark hero (~73 chars, well clear of the dead-band check and well under 40vh), so this trim is invisible to the read and offsets the slightly taller Ch6 case/interlude bands, keeping the homepage at/under the iphone-se 18-screen ceiling. */ --m-cover-pad: 14vh; /* Full-cover pins/overlays (.ch-04-pin) fill the LARGE (lvh) viewport: height max(100lvh, 100svh + this) so the svh->lvh toolbar band is covered (no Ch4 leak) AND the box always exceeds 100svh (the harness svhCoverRisk gate). Mobile. */ /* ---- Shadows (warm - never pure black) ----------------------------- */ --shadow-xs: 0 1px 0 rgba(31, 24, 20, 0.06); --shadow-sm: 0 2px 6 rgba(31, 24, 20, 0.06), 0 1px 2 rgba(31,24,20,0.04); --shadow-md: 0 8px 24 rgba(31, 24, 20, 0.08), 0 2px 6 rgba(31,24,20,0.05); --shadow-lg: 0 24px 48 rgba(31, 24, 20, 0.12), 0 4px 12 rgba(31,24,20,0.06); /* The brand prefers hairlines over heavy shadow. Reach for shadow last. */ /* ---- Motion -------------------------------------------------------- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 0.85, 0.3); --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 500ms; --dur-cinematic: 800ms; /* Synqa motion is honest: short fades, small slides. No bounces. */ } /* ---- Modern-engine token overrides (the in-app webview hardening pass) ---- Feature-gated re-landings of tokens whose values old engines cannot parse. Capable engines (WebKit 15.4+/16+, Chromium 108+/111+) take these; the vh / literal baselines above hold everywhere else. Keep each pair in lockstep: a value change up in :root must be mirrored here. */ @supports (height: 100svh) { :root { /* Pinned to the JS-published px token (site.js publishViewportTokens) rather than raw svh: in-app browsers that resize the WKWebView frame re-resolve raw svh instantly, reflowing every runway mid-gesture (the frame-resize churn law in the wiki's constraint-inapp-webview). The 1svh fallback keeps exact stock behavior with JS absent. */ --m-wipe-runway: calc(var(--svh-px, 1svh) * 14); --m-split-runway: calc(var(--svh-px, 1svh) * 185); --m-coldopen-h: calc(var(--svh-px, 1svh) * 22); --m-cover-pad: calc(var(--svh-px, 1svh) * 14); } } @supports (color: color-mix(in oklch, red, blue)) { :root { --clay-hover: color-mix(in oklch, var(--clay), black 8%); --clay-active: color-mix(in oklch, var(--clay), black 12%); } } /* ========================================================================= Dark / inverted surface - apply with [data-surface="ink"] or .on-ink ========================================================================= */ [data-surface="ink"], .on-ink { --bg: var(--ink); --bg-elevated: var(--ink-800); --bg-sunken: #1A1410; --fg: var(--bone); --fg-muted: var(--stone); --fg-quiet: #C7BEA9; --fg-accent: var(--clay); --fg-cool: #6FA39F; /* harbor lifted for legibility on ink */ --border: #2E2622; --border-strong: #4A3F38; } /* ========================================================================= Role tokens - apply directly to elements ========================================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "ss01", "cv11"; /* Inter alts; cosmetic only */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-xl, .display-l, .display-m, .h1-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; } .display-xl { font-size: var(--fs-display-xl); } .display-l { font-size: var(--fs-display-l); } .display-m { font-size: var(--fs-display-m); } .h1-display { font-size: var(--fs-h1); } /* The italic-serif phrase. Inline, Harbor color. */ .italic-phrase, em.brand, .display-xl em, .display-l em, .display-m em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fg-cool); } h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--space-5); } h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.005em; margin: 0 0 var(--space-4); } h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0 0 var(--space-3); } h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0 0 var(--space-2); } p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .body-sm { font-size: var(--fs-body-sm); } .lead { font-size: 18px; line-height: 1.5; color: var(--fg); } /* The mono-stamp: coordinates, case ids, metadata. */ .stamp, .mono, code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-stamp); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--fg-muted); } .stamp .toronto { color: var(--clay); } .stamp .capetown { color: var(--harbor); } [data-surface="ink"] .stamp .capetown, .on-ink .stamp .capetown { color: #6FA39F; } code, samp { text-transform: none; letter-spacing: 0; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.08em 0.36em; font-size: 0.92em; } /* The Clay period - use after a confident statement, on numbers, on a CTA. */ .period, .end-stop { color: var(--clay); } /* Solid ink chip - wraps the leading index token in a SECTION/CH./CASE stamp. Usage: SECTION I Inherits mono font + tracking from the parent stamp element. */ .stamp-chip { display: inline-block; /* Colors are forced: the chip's contrast is non-negotiable and must win over any parent color rule (e.g. a work-row .name that also sets color). */ background: var(--ink) !important; color: var(--bone) !important; padding: 3px 8px; border-radius: var(--radius-xs); line-height: 1; } [data-surface="ink"] .stamp-chip, .on-ink .stamp-chip { background: var(--bone) !important; color: var(--ink) !important; } /* Links - restrained. No underline by default; gain it on hover. */ a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } a:hover { color: var(--clay); border-bottom-color: var(--clay); } /* Selection in Clay. */ ::selection { background: var(--clay); color: var(--bone); }