/* ========================================================================== 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: #0F5080; /* 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: #79E4FF; /* display headings ON navy */ --c-panel-copy: #C1EBF8; /* panel body text - a pale cyan, NOT white */ --c-blue: #0F5080; /* headings + links ON white — the .xd uses the same navy here, not a lighter blue */ --c-lime: #CADB45; /* 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: #414042; /* footer ground */ /* --- Neutrals --------------------------------------------------------- */ --c-white: #FFFFFF; --c-surface: #FFFFFF; --c-surface-alt: #F6F8FA; --c-ink: #414042; /* body copy — the .xd sets it at the charcoal */ --c-ink-muted: #6F6F6F; /* meta only. The blue-grey it was is in no artboard */ /* 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.875vw, 2.25rem); /* .xd body copy: 36px at 1920 */ /* Article type, used only by .post-body. The .xd sizes above are drawn for marketing pages, where a paragraph is three lines under a big heading; an article is a different problem the design never covers, and 36px body copy runs a 1,500-word piece to ~42 characters a line. These two hold steady from phone to desktop, because 20px is already a comfortable reading size on a phone and scaling it with the viewport only makes a long article longer. */ --fs-post: 1.25rem; /* 20px body */ --fs-post-head: 1.75rem; /* 28px headings, including .callout__title */ /* One column width for everything inside an article — body text, headings, callouts and figures all resolve to this, so every edge lines up. A fixed length, not `ch`: `ch` resolves against each element's own font-size, so 28px headings and 20px paragraphs would get different widths and therefore different left edges. 56rem is 896px, about 84 characters at the 20px body size — the top of the comfortable range, and as wide as prose should go. */ --measure-post: 56rem; /* The hero title is deliberately WIDER than the article column. A title is one or two lines of display type, not prose, so it does not pay the readability cost that sets --measure-post; and the corpus runs to 85 characters, which at this width lands on two lines rather than four. ulicny_title_fit() in inc/helpers.php assumes this value — change both. */ --measure-hero: 72rem; --fs-md: clamp(min(1.25rem, 9vw), 2.083vw, 2.5rem); /* .xd lead: 40px at 1920 */ --fs-lg: clamp(min(1.5rem, 10vw), 1.3rem + 1vw, 2rem); --fs-xl: clamp(min(2rem, 12vw), 2.604vw, 3.125rem); /* .xd section heading: 50px */ /* 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), 5.208vw, 6.25rem); /* .xd home hero: 100px */ /* 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.344vw, 2.8125rem); /* .xd home eyebrow: 45px */ --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; /* the .xd sets the display face at 0 tracking */ --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. */ /* .xd page head: 1080 at 1920, i.e. 56.25vw. But the artboard is a tall static image — in a browser at 1920x950, a 1080 band puts the headline BELOW the fold. The vh term caps it at 86% of the screen, so the title and a slice of the next band are always visible; on a tall desktop the vw term still wins and the head lands on the drawn 1080. */ --hero-h: clamp(min(26rem, 78vh), min(56.25vw, 86vh), 67.5rem); --hero-pb: clamp(2rem, 4.94vw, 5rem); /* comp leaves 0.0569 W below the hero ink */ --gutter: clamp(1.25rem, 5vw, 6.0625rem); /* .xd gutter: 97px at 1920 */ --measure: 68ch; --maxw: 1920px; /* .xd: 1726 of content inside a 5.05vw gutter */ /* --- 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 */