/* ============================================================ base.css — shared foundation, loaded on EVERY page. Design tokens, fonts, reset, typography, motion, placeholders. Page-specific styling lives in home.css / case.css. ============================================================ */ /* ---------- fonts (self-hosted, latin subset) ---------- */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/barlow-condensed-800.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/lato-300.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lato-400.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/lato-700.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/playfair-display-500-italic.woff2') format('woff2'); } /* ---------- design tokens ---------- */ :root { /* Brand palette */ --cream: #FFFEF9; --ink: #14120E; --cherry: #590B17; --pink: #EA5A93; --pink-soft: #F7C4D9; --pink-lt: #F49CC0; /* --pink is 3.26:1 on cream — fine for blocks and rules, not for type. --pink-ink is the same hue pushed to 5.18:1 for small text. */ --pink-ink: #C92A69; /* Darkened from the reference's #8A857C, which was 3.63:1 on cream. #6E6A62 measures 5.33:1 and clears WCAG AA for body text. */ --muted: #6E6A62; --body-ink: #2F2C26; /* Per-project accent — override on of a case page: */ --proj: var(--cherry); --proj-word: var(--pink-lt); --ease: cubic-bezier(.2, 1, .32, 1); --pad: 44px; } /* ---------- reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: 'Lato', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } /* ---------- accessibility ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--cherry); outline-offset: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%); z-index: 100; padding: 12px 20px; background: var(--cherry); color: var(--cream); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } /* ---------- the pink highlight behind links and headings ---------- `isolation: isolate` gives the parent its own stacking context, so the z-index:-1 pseudo-element paints behind the text but IN FRONT of the page background. Without it the highlight disappears under . */ .hl { position: relative; isolation: isolate; } .hl::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 6px; background: var(--pink-soft); z-index: -1; transition: width .3s ease; } .hl:hover::after, .hl:focus-visible::after { width: 100%; } /* ---------- decorative pink blocks ---------- */ .hblock { position: absolute; background: var(--pink-soft); pointer-events: none; z-index: 0; transform: translate3d(0, var(--py, 0), 0); will-change: transform; } /* ---------- image placeholders ---------- A

with no inside renders as a labelled, intentional gap — tinted in the project accent. See ROADMAP.md §5e. */ .ph-img { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; min-height: 180px; border-radius: 8px; text-align: center; background: #F4EFE8; background: color-mix(in srgb, var(--proj) 7%, var(--cream)); border: 1px dashed rgba(20, 18, 14, .25); border-color: color-mix(in srgb, var(--proj) 34%, transparent); color: var(--muted); } .ph-img::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; opacity: .4; } .ph-img figcaption { max-width: 30ch; font-size: 11px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; } /* ---------- motion ---------- */ /* .reveal — hero elements that animate in on load (needs body.play) */ .reveal { opacity: 0; transform: translateY(28px); } .play .reveal { animation: up 1s var(--ease) forwards; } @keyframes up { to { opacity: 1; transform: translateY(0); } } /* .io — elements that animate in as they scroll into view */ .io { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .io.vis { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .play .reveal { animation: none; opacity: 1; transform: none; } .io { opacity: 1; transform: none; transition: none; } .hblock, [data-speed] { transform: none !important; } } @media (max-width: 899px) { :root { --pad: 22px; } /* parallax is desktop-only — main.js also stops writing --py below 900px */ [data-speed] { transform: none !important; } }