/* ========================================================================== Ulicny — design tokens Sampled from ulicny-website-updates-081726.pdf (pp. 3–5). ⚠️ Values are read from a raster comp embedded in a PDF. Replace with exact values from the source design file when it arrives — see html/README.md. ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------ */ /* THE navy. Every navy on the site resolves to this one line: grounds use var(--c-navy) directly, tints use color-mix(in srgb, var(--c-navy) N%, transparent). Change the hex here and the whole site follows. Not yet changed - waiting on the client's screenshot. */ --c-navy: #124E7E; /* primary ground: hero, panels, page heads */ /* The one other navy: a darker companion, used behind the film and (theme only, on client request) as the post hero ground. It is its own hex, so revisit it if --c-navy moves. */ --c-navy-deep: #0E3E64; --c-cyan: #78E0FF; /* display headings ON navy */ --c-panel-copy: #C1EBF8; /* panel body text - a pale cyan, NOT white */ --c-blue: #2878B0; /* headings + links ON white */ --c-lime: #C8D848; /* the CTA pill — used nowhere else */ --c-lime-hover: #D6E45E; /* 30th lockup, sampled from the comp */ --c-lockup-label: #505050; /* "CELEBRATING" */ --c-lockup-num: #1070B0; /* the "30" */ --c-lockup-years: #50B0D0; /* "YEARS" */ --c-cyan-deep: #4BA8D8; --c-charcoal: #424242; /* footer ground */ /* --- Neutrals --------------------------------------------------------- */ --c-white: #FFFFFF; --c-surface: #FFFFFF; --c-surface-alt: #F6F8FA; --c-ink: #1A1A1A; --c-ink-muted: #5A6570; /* Sampled off the comp's capability descriptions (p.4): a NEUTRAL grey, not the blue-grey above. Measured rgb(122,122,122) at the glyph cores, less the ~13 lightening the raster's antialiasing adds. */ --c-ink-soft: #6F6F6F; --c-rule: #D8DEE4; /* --- Semantic --------------------------------------------------------- */ --c-body: var(--c-ink); --c-heading: var(--c-blue); --c-footer: var(--c-charcoal); /* --- Type ------------------------------------------------------------- */ /* One family throughout. The comp's face is a premium geometric sans (Averta / Circular / Graphik family). Manrope is the closest freely licensable match - see the measurement note below. */ --ff-display: "Manrope", "Segoe UI", system-ui, sans-serif; --ff-body: "Manrope", "Segoe UI", system-ui, sans-serif; --ff-serif: "Playfair Display", Georgia, "Times New Roman", serif; --ff-slab: "Arvo", "Rockwell", Georgia, serif; /* the 30th lockup */ /* --- Measured off the comp (pdf p.3, "INSTITUTIONS." at 8x) ------------- width / capHeight = 10.0923 stem / capHeight = 0.1538 Manrope on its variable axis at 650 reproduces the stem ratio to within 0.3%, with +0.054em tracking to reach the width ratio. Montserrat 800 - what this build used before - measures 0.2923, nearly twice the comp's stroke weight. The comp's display face is SemiBold, not Black. ---------------------------------------------------------------------- */ --wt-display: 650; --wt-eyebrow: 700; /* 1.25 major third, fluid. --fs-2xl pushed to 4.5rem for "bolder". */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --fs-base: clamp(1rem, 1.60vw, 1.4375rem); /* comp: 0.016 W */ --fs-md: clamp(min(1.25rem, 9vw), 2.45vw, 2.25rem); /* lead: comp 0.0245 W */ --fs-lg: clamp(min(1.5rem, 10vw), 1.3rem + 1vw, 2rem); --fs-xl: clamp(min(2rem, 12vw), 1.6rem + 2vw, 3rem); /* Display sizes are set from the comp, measured as a fraction of PAGE WIDTH (mock page = 1248px wide at 8x; see README): hero heading cap 44px -> 0.0353 W -> font-size 4.70vw panel heading cap 65px -> 0.0521 W -> font-size 6.94vw The panels are LARGER than the hero in the comp, not equal to it. */ /* The rem FLOOR of a clamp is the one part that cannot give way, and it doubles when the visitor raises the browser default font (WCAG 1.4.4 text-only resize). min() caps the floor against the viewport instead: at a normal 16px root 1.9rem is 9.5vw at 320px, so 13vw never binds and nothing moves - it only engages once the root font is enlarged. */ --fs-2xl: clamp(min(1.9rem, 13vw), 4.70vw, 4.5rem); /* hero, page heads */ /* floor lowered from 2.25rem: at 320px "INSTITUTIONS." did not fit the content width, and overflow-wrap broke it mid-word, orphaning the full stop on its own line. */ --fs-3xl: clamp(min(1.9rem, 13vw), 6.94vw, 6.5rem); /* parallax panels */ /* The comp sets the eyebrow at 0.29x the display size. --fs-sm (0.21x) was too small to match. */ --fs-eyebrow: clamp(0.9375rem, 2.10vw, 2rem); /* 0.29x the heading */ --lh-tight: 1.05; --lh-snug: 1.18; /* the comp leads the lead tightly */ --lh-body: 1.7; /* long-form: bio, blog, article bodies */ --lh-copy: 1.45; /* marketing blocks - measured off the comp */ --ls-eyebrow: 0.06em; --ls-display: 0.054em; /* calibrated ink-to-ink against the comp */ --ls-heading: -0.01em; /* sentence-case headings, not the display face */ /* --- Space ------------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; /* Section rhythm — the main lever on "clean" vs "cramped" */ --section-y: clamp(3rem, 8vw, 8rem); /* Hero band: the comp makes it 0.5617 x page width, and the copy block ends 9.7% of that height above its bottom edge. */ --hero-h: clamp(26rem, 56.2vw, 52rem); --hero-pb: clamp(2rem, 4.94vw, 5rem); /* comp leaves 0.0569 W below the hero ink */ --gutter: clamp(1.25rem, 5vw, 5rem); --measure: 68ch; --maxw: 1600px; /* comp: content starts 0.0505 W from the edge */ /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 300ms; --dur-base: 600ms; --dur-slow: 900ms; --reveal-y: 20px; --stagger: 70ms; --parallax-rate: 0.92; } /* Breakpoints (reference — CSS custom props can't be used in media queries) 640 / 900 / 1200 / 1440 */