/* ========================================================================== ErikRosner.com — design tokens -------------------------------------------------------------------------- Every adjustable size, spacing, line height, tracking, hint-icon and hover-underline value lives in this one file. index.html only reads these. HOW SIZING WORKS — one fluid modular scale (modeled on lifeofpai.com) --step-N is "body size × ratio^N". Text sizes AND vertical spaces both use these steps, so everything stays in one rhythm. Each step grows with the window WIDTH (720 → 1760px) and with the window HEIGHT (480 → 1130px), and uses whichever is smaller — so short laptop windows shrink the whole system in proportion and the page fits without scrolling. step small window 1440×789 1920×963 big screen body (0) 16px ≈19.7px ≈21.9px 24px (columns, links, clue) intro (3) 32px ≈49px ≈59px 68px ("is a designer and…") name = intro × --name-to-intro (1.15) × the theme's name_size from themes.csv To change the scale, edit the numbers at the top of scripts/type_scale.py and run it — it rewrites the scale block below. Steps mix rem + vw/vh, so browser zoom and the reader's text-size setting still work. Page padding is viewport-based: 10vh top and bottom (so the centered block is truly centered) and 9.5vw at the sides. Phones: 10vh / 7vw / 4vh. Body columns are sized by characters per line (--body-cpl), not pixels. Theme colors, the per-theme name font, clue text and icons come from themes.csv. ========================================================================== */ :root { /* scale:start — generated by scripts/type_scale.py; edit the numbers there, not here */ /* base 16px × 1.2574^n → base 24px × 1.4142^n, across width 720→1760px and height 480→1130px (the smaller result wins) */ /* 12.7 → 17.0px */ --step-minus-1: min(clamp(0.7953rem, 0.6115rem + 0.4083vw, 1.0607rem), clamp(0.7953rem, 0.5993rem + 0.6533vh, 1.0607rem)); /* 16.0 → 24.0px */ --step-0: min(clamp(1rem, 0.6538rem + 0.7692vw, 1.5rem), clamp(1rem, 0.6308rem + 1.2308vh, 1.5rem)); /* 20.1 → 33.9px */ --step-1: min(clamp(1.2574rem, 0.6594rem + 1.3291vw, 2.1213rem), clamp(1.2574rem, 0.6195rem + 2.1265vh, 2.1213rem)); /* 25.3 → 48.0px */ --step-2: min(clamp(1.5811rem, 0.5989rem + 2.1829vw, 3rem), clamp(1.5811rem, 0.5334rem + 3.4926vh, 3rem)); /* 31.8 → 67.9px */ --step-3: min(clamp(1.9882rem, 0.4274rem + 3.4684vw, 4.2426rem), clamp(1.9882rem, 0.3233rem + 5.5494vh, 4.2426rem)); /* 40.0 → 96.0px */ --step-4: min(clamp(2.5rem, 0.0769rem + 5.3846vw, 6rem), clamp(2.5rem, 8.6154vh - 0.0846rem, 6rem)); /* 50.3 → 135.8px */ --step-5: min(clamp(3.1436rem, 8.218vw - 0.5545rem, 8.4853rem), clamp(3.1436rem, 13.1488vh - 0.8011rem, 8.4853rem)); /* scale:end */ /* ---------- Text sizes (which step each element uses) ---------- */ --font-size-intro: var(--step-3); /* "is a designer and pickleball pro…" (mockup: 42px next to 18px body) */ --name-to-intro: 1.15; /* name = intro × this × the theme's name_size (mockup: 56px name in a 42px intro) */ --font-size-name: calc(var(--font-size-intro) * var(--name-to-intro)); --font-size-body: var(--step-0); /* the two columns, email, links */ --font-size-hint: var(--step-0); /* clue text */ /* ---------- Line heights (unitless, × the element's own font size) ---------- */ /* The name's own line is kept shorter than an intro line (1 × the intro size), so the intro's line always decides the row height and the baseline: a new name font can't nudge the sentence or move the name out from under the pointer. Its click area still covers the row. */ --line-height-name: var(--font-size-intro); --line-height-intro: 1.3; /* a touch tighter than the mockup's 1.4 (59px lines at 42px) */ --line-height-body: 1.33; /* mockup: 133% */ --line-height-hint: 1.33; /* ---------- Letter spacing (tracking) ---------- */ --letter-spacing-name: 0em; /* the 12 name fonts are drawn with their own spacing */ --letter-spacing-intro: 0em; --letter-spacing-body: 0em; --letter-spacing-hint: 0em; /* ---------- Font weights (Google Sans Flex: any number from 100 to 1000) ---------- 100 thin · 200 extra-light · 300 light · 400 regular · 500 medium · 600 semibold · 700 bold · 800 extra-bold · 900 black Only these weights are downloaded. The name weight is per theme: the name_weight column in themes.csv. */ --font-weight-body: 400; /* columns, links, email, clue */ --font-weight-intro: 400; /* "is a designer and pickleball pro…" */ /* ---------- Text styles ---------- */ --font-style-hint: oblique 10deg; /* Google Sans Flex's real slant axis (0–10°), not a faked italic */ /* ---------- Line lengths ---------- */ --intro-max-width: 82%; /* of the content width (mockup: 962 of 1200px) */ /* Column width by characters per line (CPL): target 32–36, never more than ≈40. CSS's "ch" is the width of a zero, which in Google Sans Flex is much wider than an average letter (34ch ≈ 46 real characters), so the measure is CPL × the font's average character width, measured in the browser on the site's own copy. */ --body-cpl: 36; /* measured: lines average ≈34.5, longest 38. Change to widen/narrow the columns */ --char-width: 0.475em; /* Google Sans Flex, average across the body copy (incl. spaces) */ --body-measure: calc(var(--body-cpl) * var(--char-width)); /* ---------- Page padding (viewport-based) ---------- */ --page-padding-top: max(2rem, 10vh); --page-padding-x: 9.5vw; --page-padding-bottom: var(--page-padding-top); /* same as the top, so the centered block is truly centered */ /* ---------- Spacing (steps of the scale) ---------- */ --visual-center: 1; /* 1 = content is top-aligned, but placed so the tallest theme sits centered in the window (it never moves when the theme changes); 0 = plain top alignment */ --columns-align: end; /* the two columns sit at the right edge, like the mockup; "start" = left */ --space-intro-body: var(--step-3); /* intro → columns (mockup: 58px) */ --space-column-gap: var(--step-2); /* between the two columns (mockup: 32px) */ --space-paragraph: var(--step-0); /* between paragraphs, and between stacked columns on phones (mockup: 18px) */ --space-icon-hint: 0.45em; /* clue icon → clue text, side by side (mockup: 8px next to 18px text) */ /* ---------- Hint (clue) ---------- */ --hint-icon-size: 1.5em; /* em of the body text size (mockup: 32px icon next to 18px text) */ --hint-hit-area: 0.5em; /* padding around the icon inside its button: a bigger hover/click/tap area (the icon doesn't move) */ --hint-shift: 0.5em; /* how far the clue slides as it appears */ /* Icon weight is set when the sprite is built: python3 scripts/update_icons.py --weight light */ /* ---------- Body links (Osmo "Underline Link Animation", alt) ---------- Underlined at rest; on hover the line slides off to the right and a new one draws in from the left. */ --link-underline-thickness: 0.0625em; /* Osmo: 0.0625em, just below the text */ --link-underline-duration: 890ms; /* Fibonacci 89 × 10 (Osmo: 735ms) */ --link-underline-delay: 340ms; /* the second line waits; Fibonacci 34 × 10 (Osmo: 300ms) */ --link-underline-ease: cubic-bezier(0.625, 0.05, 0, 1); /* Osmo's curve */ /* ---------- Name hover underline (Osmo "Draw Random Underline", GSAP DrawSVG) ---------- One of six hand-drawn lines draws in under the name. The stroke is a quarter of the line's box height (≈ 0.1 × the text size). */ --underline-height: 0.42em; /* line box height × the text's size (Osmo: a .625em box under 1.5em text) */ --underline-offset: 0.32em; /* the deepest the name's line may sit below the baseline, × intro size */ --underline-ink-gap: 0.18; /* name: lowest point of the letters → centre of the line, × size (same for every font) */ --underline-duration: 550ms; /* draw in, and draw out; Fibonacci 55 × 10 (Osmo: 500ms) */ --underline-ease: power2.inOut; /* a GSAP ease name */ /* ---------- Custom cursor (Osmo "Velocity Based Custom Cursor") ---------- A pixel arrow / pointing hand that replaces the browser cursor and tilts with sideways speed. rem (not em), so it stays the same size whatever the text size (Osmo: 2em / 2.5em on a 16px page). */ --cursor-size: 1.74rem; /* the arrow's width (≈28px): 2rem × 0.87, 13% smaller than Osmo's */ --cursor-size-pointer: 2.175rem; /* the hand over links and buttons (≈35px): 2.5rem × 0.87 */ /* ---------- Motion ---------- */ /* All timings are whole milliseconds on a Fibonacci ladder (× 10): 130 · 210 · 340 · 550 · 890 · 1440. Color change when the name or the icon is clicked: background, text, links, icon and the name's underline all fade together. ease-in-out = starts gently, settles gently. */ --theme-duration: 340ms; /* Fibonacci 34 × 10 */ --theme-ease: cubic-bezier(0.65, 0, 0.35, 1); /* ease-in-out (cubic) */ --theme-transition: var(--theme-duration) var(--theme-ease); --hint-reveal-duration: 340ms; /* clue eases + slides in on icon hover/focus, out when it ends; Fibonacci 34 × 10 */ --page-reveal-duration: 340ms; /* first load: the page fades in once the theme and font are ready; Fibonacci 34 × 10 */ /* ---------- Device safe areas (notches, home indicators) ---------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } /* Phones and small tablets: tighter page padding, content starts at the top. (The columns stack on their own when two no longer fit — see --body-measure.) */ @media (max-width: 768px) { :root { --page-padding-top: 10vh; --page-padding-x: 7vw; --page-padding-bottom: 4vh; --visual-center: 0; /* phones: content simply starts at the top */ --columns-align: start; /* one column, flush left under the intro */ --intro-max-width: 100%; } }