/* ============================================================ Design tokens — single source of truth for the whole site. Values mirror the Figma type styles + palette. Figma: https://www.figma.com/design/DozSIj8LDvGNuAc7CDfLuZ/Rafa---Nicky ============================================================ */ :root { /* ---- Color — semantic tokens, mirrors the Figma "Color" page (node 99:2078). Each token is a live Figma variable with Light + Dark modes; the values here are the LIGHT mode (the site default). Dark mode is an opt-in override on [data-theme="dark"] at the bottom of this file. Grouped exactly as in Figma: Ground · Line · Text · Accent · State · Feedback. ---- */ /* Ground */ --paper: #faf9f6; /* warm off-white — page background (Figma "Background") */ --surface: #f1efea; /* slightly recessed panel/card fill */ --placeholder: #e9e7e3; /* neutral fill for image placeholders */ --overlay-bg: rgba(250, 249, 246, 0.97); /* paper @97% — menu overlay + pinned header scrim */ --overlay-blur: 6px; /* subtle backdrop blur behind the scrim */ --bg: #ffffff; /* legacy pure white — background is now --paper; kept for back-compat */ /* Line */ --border: #e4e1da; /* hairline rules (pagination, dividers) */ --border-strong: #ccc7bc; /* heavier divider / input outline */ /* Text */ --primary-type: #252525; /* near-black — all body type (14.6:1 on paper, AAA) */ --secondary-type: #454545; /* slightly softer than primary (9.1:1, AAA) */ --tertiary-type: #717171; /* muted grey — project subtitle / metadata (4.6:1 on paper, AA; nudged from Figma #757575 which was 4.38:1, just under AA) */ --type-on-accent: #1a1816; /* type sitting on an accent fill */ --type-inverse: #faf9f6; /* type on a dark ground */ /* Accent (warm coral). WCAG: use as a FILL, not as text on paper — coral on paper is only 2.3:1. Put DARK type on it (--type-on-accent #1a1816 = 7.4:1, AAA); never white (2.4:1, fails). For a coral *link/text* on paper, use a darker shade (≈ #c0392b) rather than --accent. */ --accent: #ff8282; /* brand coral — primary accent (fill) */ --accent-hover: #f76b6b; --accent-pressed: #e85a5a; --accent-subtle: #fce7e6; /* tinted wash behind accent content */ /* State */ --focus: #ff8282; /* focus ring → Accent/Default */ --selection: #fce7e6; /* text selection → Accent/Subtle */ /* --iso-veil (home-collage hover wash, Figma "Hover Veil") lives in Motion below */ /* Feedback — tuned to clear WCAG AA (4.5:1) as text on paper, so they're safe for status text/icons. Nudged darker from the original Figma swatches (success #3f8c63 = 3.88:1, warning #b8862b = 3.08:1 — both sub-AA). */ --success: #397e59; /* 4.6:1 on paper, AA */ --error: #c23b22; /* 5.1:1 on paper, AA (unchanged — already passed) */ --warning: #926a22; /* 4.6:1 on paper, AA */ /* ---- Typeface ---- */ --font-sans: "Space Grotesk", sans-serif; /* ---- Type scale (font-size / line-height), named after the Figma styles ---- Project Title 96 / 106 (Medium 500 — project-page hero title, desktop only; not a named Figma style) Display 48 / 57.6 (Medium 500 / Light 300) H1 36 / 57.6 (Medium 500 — project page title @≤1024) H2 32 / 51.2 H5 22 / 35.2 H6 20 / 32 P 14 / 22.4 (Regular 400 / "P Emphasized" Medium 500) P Small 12 / 19.2 */ --fs-project-title: 96px; --lh-project-title: 106px; /* project-page hero title (desktop) */ --fs-display: 48px; --lh-display: 57.6px; --fs-h1: 36px; --lh-h1: 57.6px; --fs-h2: 32px; --lh-h2: 51.2px; --fs-h5: 22px; --lh-h5: 35.2px; --fs-h6: 20px; --lh-h6: 32px; --fs-p: 14px; --lh-p: 22.4px; --fs-small: 12px; --lh-small: 19.2px; /* ---- Font weights ---- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --hover-zoom: 1.005; /* barely-there image zoom on hover (~1–3px of growth) */ --hover-zoom-dur: 0.6s; /* slow, gentle settle for the zoom */ --dim-others: 0.95; /* project-gallery isolation: non-hovered images fade ~5% (no overlap there) */ /* Home-collage isolation (overlapping tiles): a WHITE WASH on the non-focused tiles instead of lowered opacity, so you never see through to tiles behind. Long, smooth ease-in-out — see index.html #scroll-styles. */ --iso-veil: 0.2; /* white-overlay opacity on non-focused tiles */ --iso-dur: 0.7s; /* languid, deliberate easing for the isolation */ --iso-ease: cubic-bezier(0.65, 0, 0.35, 1); --strike-dur: 0.45s; /* work-item strikethrough draw time */ --overlay-fade: 0.4s; /* menu overlay open/close fade */ --header-slide: 0.35s; /* header hide/show + scrim on scroll */ --lb-cross: 0.5s; /* lightbox image cross-dissolve (smooth, soft) */ /* ---- Marks ---- Hand-drawn "x" close mark (assets/x-handwritten.svg): a 40×40 viewBox in which the actual ink is ~24 units tall (0.6 of the box). The site standard is a 20px-high glyph everywhere (nav + lightbox), so the SVG box must be 20 ÷ (24/40) = 33.333px. Set width:var(--x-mark-box) on every .…-close-mark (the viewBox is square, so width sets the box height too). */ --x-mark-box: 33.333px; /* x-mark SVG box → a 20px-tall glyph */ /* ---- Breakpoints (reference only; CSS @media can't read vars) ---- --bp-desktop: 1024px (≤ this → tablet ramp) --bp-mobile: 640px (≤ this → mobile ramp) */ } /* ============================================================ Dark mode — the second Figma mode of every color variable (Figma "Color" page, node 107:290). Warm near-black; same token names, inverted values. OPT-IN: nothing flips unless an ancestor (usually or ) carries data-theme="dark", so the default paper/light site is untouched. The chrome's mix-blend-mode: difference already adapts to any ground, so the header/wordmark keep working in either mode. ============================================================ */ [data-theme="dark"] { /* Ground */ --paper: #1a1816; --surface: #252220; --placeholder: #2e2a26; --overlay-bg: rgba(26, 24, 22, 0.97); /* #1a1816 @97% */ --bg: #1a1816; /* Line */ --border: #3a352f; --border-strong: #4e4841; /* Text */ --primary-type: #faf9f6; --secondary-type: #c9c5bd; --tertiary-type: #8f8a82; --type-on-accent: #1a1816; --type-inverse: #252525; /* Accent (brightens on dark) */ --accent: #ff8282; --accent-hover: #ff9a9a; --accent-pressed: #ffadad; --accent-subtle: #3a2a2a; /* State */ --focus: #ff8282; --selection: #3a2a2a; --iso-veil: 0.1; /* Hover Veil → white @10% on dark (vs 20% on light) */ /* Feedback */ --success: #6fb58c; --error: #e8765c; --warning: #d9a441; }