/* * ════════════════════════════════════════════════════════════════════ * CITY OPTIMISE SOCIETY — design tokens * ════════════════════════════════════════════════════════════════════ * * Everything colour-, type- and glass-related lives here so a single * edit re-skins the whole site. Four groups: * * 1. TYPE display serif / text sans / mono, and the scale * 2. COLOUR ink + paper + accent, light and dark * 3. GLASS the iOS "liquid glass" blur/tint recipe * 4. BUBBLE what copy turns into while a metaball is behind it * * The `--text`, `--text-soft`, `--text-strong`, `--border`, `--accent`, * `--hover`, `--surface-solid`, `--code-*` and `--shadow-strong` names * are load-bearing: assets/css/markdown.css and blockquotes.css were * lifted from the portfolio repo and consume them verbatim. * ════════════════════════════════════════════════════════════════════ */ /* ── 1. Type ─────────────────────────────────────────────────────── */ /* * The four families come from the Google Fonts in each page's * . The rules below alias the copies committed under * assets/fonts/ under "… Local" names, which sit directly after the CDN * name in every stack — so if the CDN is blocked the site still gets the * right typeface, and if it isn't, these files are never fetched. * Filenames are percent-encoded because the upstream variable fonts ship * their axis list in the name. */ @font-face { font-family: "Fraunces Local"; src: url("../fonts/Fraunces-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces Local"; src: url("../fonts/Fraunces-Italic-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Space Grotesk Local"; src: url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif Local"; src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif Local"; src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } :root { /* Chester-flavoured pairing: a warm display serif over a quiet grotesque, with mono reserved for metadata and labels. Instrument Serif survives in `--font-wordmark` alone — the homepage lockup. */ --font-display: "Fraunces", "Fraunces Local", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --font-text: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; --font-mono: "Space Grotesk", "Space Grotesk Local", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-wordmark: "Instrument Serif", "Instrument Serif Local", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem); --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem); --step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem); --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem); --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem); --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5.2rem); --measure: 68ch; --radius-tile: 26px; --radius-sheet: 32px; --radius-pill: 999px; /* One easing curve for everything, so motion feels like one system. `--ease-ios` is the springy overshoot iOS uses for app opening. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-ios: cubic-bezier(0.32, 1.34, 0.42, 1); --dur-fast: 180ms; --dur-mid: 340ms; --dur-slow: 520ms; } /* ── 2. Colour — light ───────────────────────────────────────────── */ :root { --bg: #f6f4ef; /* warm paper */ --bg-deep: #ece8e0; --panel: #fffdf9; --text: #211d33; --text-strong: #100d1e; --text-soft: rgba(33, 29, 51, 0.66); --text-faint: rgba(33, 29, 51, 0.42); --border: rgba(33, 29, 51, 0.14); --border-strong: rgba(33, 29, 51, 0.26); --hover: rgba(91, 75, 245, 0.07); --surface-solid: #ffffff; --accent: #5b4bf5; /* indigo-violet: matches the metaballs */ --accent-soft: rgba(91, 75, 245, 0.12); --accent-ink: #3a2ecb; --accent-warm: #e0662f; /* single warm counterpoint, used sparingly */ --code-surface: rgba(255, 255, 255, 0.6); --code-toolbar-surface: rgba(240, 238, 250, 0.66); --code-text-surface: rgba(250, 249, 255, 0.75); --shadow-strong: rgba(33, 29, 51, 0.16); --shadow-tile: 0 1px 2px rgba(33, 29, 51, 0.05), 0 8px 24px -12px rgba(33, 29, 51, 0.14); --shadow-tile-hover: 0 2px 4px rgba(33, 29, 51, 0.06), 0 22px 48px -18px rgba(58, 46, 203, 0.28); } /* ── 2b. Colour — dark ───────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0c0a16; --bg-deep: #07060e; --panel: #141126; --text: #e6e3f5; --text-strong: #f7f5ff; --text-soft: rgba(230, 227, 245, 0.68); --text-faint: rgba(230, 227, 245, 0.42); --border: rgba(230, 227, 245, 0.14); --border-strong: rgba(230, 227, 245, 0.26); --hover: rgba(150, 136, 255, 0.12); --surface-solid: #171334; --accent: #9c8dff; --accent-soft: rgba(156, 141, 255, 0.16); --accent-ink: #c0b5ff; --accent-warm: #ff9a63; --code-surface: rgba(23, 19, 52, 0.6); --code-toolbar-surface: rgba(35, 29, 74, 0.66); --code-text-surface: rgba(12, 10, 22, 0.75); --shadow-strong: rgba(0, 0, 0, 0.5); --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -14px rgba(0, 0, 0, 0.6); --shadow-tile-hover: 0 2px 6px rgba(0, 0, 0, 0.36), 0 26px 56px -20px rgba(120, 100, 255, 0.42); } /* ── 3. Liquid glass ─────────────────────────────────────────────── */ /* * --glass-blur-* blur radius per surface class (nav, tile, sheet) * --glass-saturate colour boost behind the glass; higher = the * metaballs bleed through more vividly * --glass-bg tint fill; lower alpha = more see-through * --glass-specular the thin bright top edge that sells "glass" */ :root { --glass-blur-nav: 22px; --glass-blur-tile: 14px; --glass-blur-sheet: 30px; --glass-blur-subtle: 8px; --glass-saturate: 165%; --glass-bg: rgba(255, 255, 255, 0.5); --glass-bg-strong: rgba(255, 255, 255, 0.68); --glass-bg-nav: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.7); --glass-specular: rgba(255, 255, 255, 0.9); --glass-shadow: rgba(33, 29, 51, 0.14); } :root[data-theme="dark"] { --glass-bg: rgba(24, 20, 48, 0.5); --glass-bg-strong: rgba(28, 23, 58, 0.7); --glass-bg-nav: rgba(20, 17, 40, 0.62); --glass-border: rgba(255, 255, 255, 0.1); --glass-specular: rgba(255, 255, 255, 0.16); --glass-shadow: rgba(0, 0, 0, 0.5); } /* ── 4. Bubble-aware copy ────────────────────────────────────────── */ /* * What copy turns into while a metaball is behind it. Driven by * --bubble-cover, which assets/js/bubble-legibility.js writes per element * from a readback of the field (see section K of site.css). * * --bubble-ink colour the type shifts to under a blob * --bubble-ink-soft the same shift for body copy … * --bubble-ink-faint … and for mono metadata, so the three weights * stay distinguishable instead of all converging * on one colour the moment a blob arrives * --bubble-scrim tint of the veil that fades in behind the type * --bubble-scrim-filter what that veil does to the blob showing through */ :root { /* Light: the blobs read as pale lilac on warm paper, so copy deepens into near-black indigo and the veil lifts the blob toward the page. */ --bubble-ink: #0b0819; --bubble-ink-soft: rgba(11, 8, 25, 0.86); --bubble-ink-faint: rgba(11, 8, 25, 0.66); --bubble-scrim: rgba(246, 244, 239, 0.78); --bubble-scrim-filter: blur(14px) saturate(0.5) brightness(1.18); } :root[data-theme="dark"] { /* Dark: the blobs are the brightest thing on the page, so the veil knocks them back and the type cools to ice-blue — a visible shift away from the violet it is sitting on, rather than more of the same white. */ --bubble-ink: #dceaff; --bubble-ink-soft: rgba(220, 234, 255, 0.86); --bubble-ink-faint: rgba(220, 234, 255, 0.7); --bubble-scrim: rgba(9, 7, 20, 0.78); --bubble-scrim-filter: blur(14px) saturate(0.45) brightness(0.42); } /* * Fallback for browsers without backdrop-filter: opaque up the tints so * text never sits on a transparent panel over the metaball canvas. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-bg: rgba(255, 255, 255, 0.94); --glass-bg-strong: rgba(255, 255, 255, 0.97); --glass-bg-nav: rgba(255, 255, 255, 0.96); } :root[data-theme="dark"] { --glass-bg: rgba(20, 17, 38, 0.95); --glass-bg-strong: rgba(23, 19, 46, 0.97); --glass-bg-nav: rgba(16, 14, 32, 0.96); } }