/* ========================================================================== Tokens Values come from DESIGN.md and the canvas exports in the SW vault (reference/*.dc.html). Type scale: decisions 023 and 037. ========================================================================== */ /* Local display fonts. Logo and hero h1 only (decision 003). WOFF2 only: commercial licences, so the TTFs are never served. */ @font-face { font-family: 'Quinthero'; src: url('/fonts/Quinthero.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Heartless'; src: url('/fonts/Heartless.woff2') format('woff2'); font-display: swap; } /* Handwriting (053): Reenie Beanie, latin (SIL Open Font License, fonts/ReenieBeanie-OFL.txt) */ @font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight: 400; src: url('/fonts/ReenieBeanie.woff2') format('woff2'); font-display: swap; } :root { /* Colour */ --ink: #0B0B0B; /* page background */ --bone: #F2EEE6; /* main text, paper notes */ --bone-muted: #D6D1C7; /* body text on dark */ --muted: #A8A39A; /* captions, tags, meta */ --card: #1A1917; /* dark buttons, number tiles */ --placeholder: #24231F; /* image placeholder fill */ --paper-ink: #3A3526; /* secondary text on the yellow paper */ --fibre: #F4EFE3; /* white paper core along a tear */ --frame: #FFFFFF; /* photo and project image frames */ --yellow: #E8C547; /* brand yellow: nav, footer, tape. Never changes */ --accent: var(--yellow); /* the one loud colour; a case study sets its own */ --on-accent: var(--ink); /* text on the accent; a case study sets its own (014) */ /* The yellow as an image layer over the colour (an invisible grain, mean #E8C547): a browser's forced dark mode (Samsung Internet) recolours colours but leaves photos alone, so yellow surfaces stay yellow */ --yellow-paint: url('/img/paper/yellow.webp'); --accent-paint: var(--yellow-paint); /* none where the accent isn't yellow */ /* Fonts */ --font-head: 'Archivo', 'Arial Narrow', sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --font-hand: 'Reenie Beanie', cursive; /* the handwriting (053) */ --font-something: 'Quinthero', serif; --font-wicked: 'Heartless', serif; --head-weight: 900; --head-stretch: 70%; /* Type scale (023, 037). Large type uses ratios, small styles the 8px grid. */ /* Display tops out at 112px, its 1440 size (023): the page is capped at 1440, so cols 1-7 stop growing there. */ --fs-display: clamp(56px, 7.8vw, 112px); --lh-display: 0.88; --fs-h1: clamp(48px, 6vw, 88px); --lh-h1: 0.9; --fs-h2: 56px; --lh-h2: 1; --fs-lead: 32px; --lh-lead: 1.25; /* 32 / 40 */ --fs-body: 18px; --lh-body: 1.5; --fs-small: 14px; --lh-small: 24px; --fs-label: 13px; --lh-label: 16px; --fs-button: 15px; --fs-hand: 28px; --fs-band: 28px; --tracking-label: 0.1em; /* Spacing: 8px scale, 4px steps for small elements only */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-112: 112px; --sp-120: 120px; --sp-128: 128px; --sp-144: 144px; --sp-160: 160px; /* Grid: 12 columns, 32px gutters, fluid margins inside a 1440px page. Full-bleed parts (tape, grain, paper) still run edge to edge. */ --cols: 12; --gutter: 32px; --margin: clamp(16px, 5.6vw, 80px); --page-max: 1440px; /* Header: 32px padding + 48px link targets */ --header-pad: 32px; --header-h: 112px; /* Targets */ --target-link: 48px; --target-button: 56px; /* Gloss coating on a photo and its white border, like a glossy print (blend with mix-blend-mode: screen) */ --gloss-photo: linear-gradient(118deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, .30) 32%, rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .10) 100%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 35%); /* Page grain: the canvas #pageGrain filter as a 256px tile (base.css), with the 40% opacity baked into its alpha so it can be a background */ --grain-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 1.28 0 0 0 -0.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* Layers. Grain is part of the page background itself (base.css), so it is never a layer. */ --z-band: 1; --z-media: 51; --z-footer: 60; --z-header: 80; --z-skip: 200; --z-catfetti: 90; /* About: cats over the page and the header */ --z-dev-grid: 100; /* the ?grid overlay, over everything but the skip link */ --z-transition: 1000; /* the phone rip paper, over everything */ /* Inside their own stacking context */ --z-ticket: 60; /* View case, over the card image and its gloss */ --z-cs-dim: 90; /* the Next up darkening, over the whole case study */ --z-deck: 60; /* About's hand of five cards (desktop) */ } /* Below 760px everything stacks. Phones use a 4-column grid with 16px margins and gutters, and the phone type sizes from 023. */ @media (max-width: 759.98px) { :root { --cols: 4; --gutter: 16px; --margin: 16px; --header-pad: 24px; --header-h: 72px; /* 24px top + 48px MENU box */ --fs-h1: 48px; --lh-h1: 1; --fs-h2: 40px; --fs-lead: 24px; --lh-lead: 1.333; /* 24 / 32 */ --fs-body: 16px; --fs-button: 13px; --fs-hand: 24px; --fs-band: 24px; } } /* The site is dark by design. Declared as its own dark theme as well, as Samsung Internet looks for one before it forces its own dark mode on a page; 'only' tells browsers not to recolour it at all. */ @media (prefers-color-scheme: dark) { :root { color-scheme: only dark; --ink: #0B0B0B; --bone: #F2EEE6; --yellow: #E8C547; } }