/* ========================================================================== TOKENS — Serge Bajic Portfolio Single source of truth for type, colour, space and motion. Change values here; nothing downstream hardcodes them. ========================================================================== */ /* -------------------------------------------------------------------------- TYPEFACE Currently: Geist, self-hosted (the face used in the InDesign portfolio). Only two weights exist locally — Light (300) and Regular (400). Hierarchy is built from scale, space and case, never faux-bold. TO SWAP TO ADOBE FONTS: 1. Create a Web Project at fonts.adobe.com → copy your Kit ID. 2. In every .html file, uncomment the in and paste the Kit ID. 3. Below, comment out the --font-sans line and uncomment the Adobe one. Suggested Adobe pairings (all included with Creative Cloud): · "sofia-pro" / "brandon-grotesque" — warm geometric, friendly senior · "acumin-pro" + "canela" — neutral grotesque + editorial serif · "founders-grotesk" / "untitled-sans" — the closest match to Geist -------------------------------------------------------------------------- */ @font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---- Type families ---------------------------------------------------- */ --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* --font-sans: "founders-grotesk", "Geist", ui-sans-serif, sans-serif; */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* ---- Colour ———————————————————————————————————————————————————————————— Deliberately monochrome. The work supplies every colour on the page; the interface supplies none. Accent = ink. ---------------------------------------------------------------------- */ --bg: #f7f6f4; /* warm paper */ --bg-elev: #ffffff; /* cards, image mats */ --bg-sunk: #f0eeea; /* recessed bands */ --bg-ink: #111111; /* inverted sections */ /* "50% grey" band (contact, about quote). True 50% grey is #808080, but white small text on it fails WCAG AA (3.9:1). #757575 reads the same and clears 4.6:1 — do not lighten without re-checking. */ --bg-grey: #757575; --ink-on-grey: #ffffff; --ink-2-on-grey: #e8e7e4; --rule-on-grey: #929292; /* Contrast against --bg, measured: ink 17.5:1, ink-2 8.2:1, ink-3 4.6:1. ink-3 carries labels and captions at small sizes, so it has to clear WCAG AA 4.5:1 — do not lighten it without re-checking. */ --ink: #111111; /* primary text */ --ink-2: #4a4a48; /* body copy */ --ink-3: #71706b; /* meta, labels, captions */ --ink-on-dark: #f4f3f0; --ink-2-on-dark: #a8a7a2; --rule: #e2e0dc; /* hairlines */ --rule-strong: #cfcdc7; --rule-on-dark: #2a2a2b; --focus: #111111; /* ---- Type scale (fluid) ---------------------------------------------- */ --step-display: clamp(2.85rem, 1.2rem + 7vw, 7rem); --step-h1: clamp(2.1rem, 1.15rem + 3.6vw, 4rem); --step-h2: clamp(1.55rem, 1.1rem + 1.8vw, 2.5rem); --step-h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); --step-lede: clamp(1.1rem, 0.98rem + 0.65vw, 1.5rem); --step-body: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem); --step-small: 0.875rem; --step-label: 0.6875rem; --lh-tight: 0.98; --lh-snug: 1.14; --lh-normal: 1.4; --lh-relaxed: 1.68; --ls-display: -0.035em; --ls-heading: -0.022em; --ls-body: -0.005em; --ls-label: 0.14em; /* ---- Space ------------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: clamp(5rem, 2rem + 10vw, 10rem); /* ---- Layout ----------------------------------------------------------- */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem); --measure: 68ch; /* readable line length */ --width-text: 46rem; /* prose column */ --width-content: 80rem; /* standard container */ --width-wide: 112rem; /* wide image bands */ --header-h: 4.5rem; /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 900ms; /* ---- Elevation -------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -12px rgba(17, 17, 17, 0.12); --shadow-card-hover: 0 2px 4px rgba(17, 17, 17, 0.05), 0 22px 48px -16px rgba(17, 17, 17, 0.18); --radius: 2px; /* near-square. Editorial, not app-like. */ } /* Honour the OS setting for people who ask for less movement. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; } }