/* ========================================================================== base.css — design tokens, reset, typography, utilities ========================================================================== */ :root { /* Palette — restrained: warm paper, near-black ink, one accent */ --paper: #f4f2ed; --paper-80: rgba(244, 242, 237, 0.82); --ink: #191613; --ink-70: rgba(25, 22, 19, 0.7); --ink-50: rgba(25, 22, 19, 0.5); --ink-30: rgba(25, 22, 19, 0.3); --line: rgba(25, 22, 19, 0.14); --accent: #c2401c; /* Type */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-text: "Inter", system-ui, -apple-system, sans-serif; /* Spacing scale (4px base) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Layout */ --container: 80rem; /* 1280px */ --gutter: clamp(1.25rem, 4vw, 3rem); --header-h: 6rem; /* 96px */ --header-h-scrolled: 4.75rem; /* 76px — ~20% shrink */ /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 230ms; --dur-med: 520ms; --radius: 4px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; } /* Clip intentional off-canvas bleed (hero asset, 100vw section backgrounds) on both root and body. NOTE: "clip" is safe here, "hidden" is NOT — hidden turns body into the scroll container and silently breaks position: sticky. */ html, body { overflow-x: clip; } body { font-family: var(--font-text); font-size: 1rem; line-height: 1.6; color: var(--ink); background-color: var(--paper); /* The texture is a fixed .page-bg-media layer mounted by the CMS — body background-attachment: fixed is broken on iOS (it stretches the image to the full document height, destroying its resolution). */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* No overflow-x here: hidden/clip on makes it the scroll container in Chrome and breaks position: sticky. html { overflow-x: clip } above already clips the hero asset's off-canvas bleed. */ } /* Page background layer (image div or video, mounted by the CMS). Fixed-position instead of background-attachment: fixed, which iOS breaks. */ .page-bg-media { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; /* large viewport: stays covered when the iOS toolbar collapses */ object-fit: cover; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } img, video, svg { display: block; max-width: 100%; } img, video { height: auto; } ul[role="list"], ol[role="list"] { list-style: none; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } strong { font-weight: 600; } ::selection { background: var(--ink); color: var(--paper); } /* ---------- Accessibility ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; } .skip-link { position: fixed; top: var(--s-3); left: var(--s-3); z-index: 200; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); font-size: 0.875rem; transform: translateY(-300%); transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { transform: none; } /* ---------- Typography helpers ---------- */ .kicker { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); } /* ---------- Layout utilities ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Scroll reveal (progressive enhancement) ---------- */ .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 805ms var(--ease-out), transform 805ms var(--ease-out), filter 805ms var(--ease-out); } .reveal.is-inview { opacity: 1; transform: none; filter: blur(0); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Word-mask reveals (built by js/motion.js) ---------- */ .mask-words .mw { display: inline-block; overflow: hidden; vertical-align: bottom; } .mask-words .mw > span { display: inline-block; transform: translateY(115%); transition: transform 1035ms var(--ease-out); } html.js.is-loaded .hero__title .mw > span, .mask-words.is-inview .mw > span { transform: translateY(0); } html.js .hero__title .mw > span { transition-delay: calc(120ms + var(--i) * 55ms); } .mask-words.is-inview .mw > span { transition-delay: calc(var(--i) * 55ms); } /* .mask-words orchestrates its own reveal — neutralize the generic fade on it */ .mask-words.reveal { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .mask-words .mw > span { transform: none; } .ticker__track { animation: none; } } /* ---------- Leon Lin / tasteskill.dev signatures (adapted to paper & ink) ---------- */ /* Spring bezier used across his micro-interactions */ :root { --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Pinging availability dot (Tailwind-style ping, slowed down) */ .status-dot { position: relative; display: inline-block; width: 7px; height: 7px; margin-right: var(--s-2); border-radius: 50%; background: var(--accent); vertical-align: 1px; } .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: dot-ping 1.85s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes dot-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .status-dot::after { animation: none; } }