/* ============================================ BASE — editorial system Geist for everything, Geist Mono for small labels. Poster palette: marine ground, butter type, lemon-red illustration and accents. Panels alternate marine / deep marine so stacked sheets stay distinct. ============================================ */ /* -------------------------------------------- FONTS — self-hosted and preloaded in each page's , so text renders in Geist from the first paint instead of swapping in late (OFL, fonts/OFL.txt) -------------------------------------------- */ @font-face { font-family: 'Geist'; src: url('../fonts/geist-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------- TOKENS -------------------------------------------- */ :root { /* Color */ --marine: #16297a; --marine-deep: #0c1a50; --butter: #fcefb3; --red: #c63d36; --bg: var(--marine); --bg-alt: var(--marine-deep); --text: var(--butter); --text-soft: #fcefb3b8; /* ~72% — secondary text */ --text-faint: #fcefb333; /* ~20% — hairlines */ --accent: var(--red); /* illustration + accents; never small text */ --shade: #060c2b; /* dims a panel as the next one covers it */ /* Type */ --font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace; /* Fluid scale (≈ 375px → 1600px) */ --step-label: 0.72rem; --step--1: clamp(0.84rem, 0.8rem + 0.12vw, 0.92rem); --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.15rem); --step-1: clamp(1.35rem, 1.1rem + 0.9vw, 2.1rem); /* statements */ --step-2: clamp(1.9rem, 1.4rem + 2vw, 3.6rem); --step-3: clamp(2.6rem, 1.6rem + 4.5vw, 6.5rem); --step-mark: clamp(4rem, 0.5rem + 15.5vw, 19rem); /* wordmark */ /* Space */ --gutter: clamp(1rem, 0.6rem + 1.4vw, 2rem); --section: clamp(5rem, 3rem + 8vw, 10rem); --nav-h: 3.5rem; /* Motion (mirrored in js/motion.js) */ --ease-out: cubic-bezier(0.19, 1, 0.22, 1); } /* -------------------------------------------- RESET -------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { /* Scroll anchoring shifts the page ~260px while the hero loads and the panels pin, then it snaps back; the layout never needs it */ overflow-anchor: none; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.45; overflow-x: clip; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } [hidden] { display: none !important; } /* never let a component's display override it */ ::selection { background: var(--accent); color: var(--text); } :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* -------------------------------------------- TYPE -------------------------------------------- */ h1, h2, h3 { font-weight: 400; } .t-mark { font-size: var(--step-mark); font-weight: 500; line-height: 0.8; letter-spacing: -0.065em; } .t-3 { font-size: var(--step-3); line-height: 0.95; letter-spacing: -0.045em; } .t-2 { font-size: var(--step-2); line-height: 1; letter-spacing: -0.035em; } /* Statement text: the voice of the site */ .t-1 { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.025em; max-width: 24em; } .t-small { font-size: var(--step--1); line-height: 1.4; } /* Small mono labels, e.g. "■ ABOUT" */ .label { font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.3; } .label--mark::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; background: var(--accent); } .muted { color: var(--text-soft); } /* Hidden visually, still read by screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------- LAYOUT -------------------------------------------- */ .wrap { padding-inline: var(--gutter); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } @media (max-width: 760px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------- NAV -------------------------------------------- */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; padding-inline: var(--gutter); } .site-nav { transition: transform 0.7s var(--ease-out), background-color 0.4s; } .site-nav.is-solid { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-nav.is-hidden { transform: translateY(-110%); } .site-nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin-inline: auto clamp(1rem, 4vw, 5rem); } .site-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; } @media (max-width: 760px) { .site-nav__links { display: none; } .site-nav > .btn { margin-left: auto; } } /* -------------------------------------------- BUTTONS & LINKS -------------------------------------------- */ /* Bordered mono button; the fill wipes up on hover. Override --btn-fill / --btn-text per surface if needed. */ .btn { --btn-fill: var(--text); --btn-text: var(--bg); position: relative; display: inline-flex; align-items: center; padding: 0.6em 0.85em 0.55em; border: 1px solid currentColor; overflow: hidden; isolation: isolate; transition: color 0.5s var(--ease-out); } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease-out); } .btn:hover, .btn:focus-visible { color: var(--btn-text); } .btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); } /* "[ ] Link" list links; the box fills on hover */ .bracket::before { content: '[\2002]'; margin-right: 0.5em; white-space: pre; } .bracket:hover::before, .bracket:focus-visible::before { content: '[\25A0]'; } .link-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-out); } .link-underline:hover, .link-underline:focus-visible { background-size: 100% 1px; } /* -------------------------------------------- PAGE + FOOTER (every page)
covers the footer, which sits beneath it and is uncovered at the end. -------------------------------------------- */ .page { position: relative; z-index: 1; background: var(--bg); } /* Small "■ LABEL" in the left columns of a section */ .panel__label { grid-column: 1 / span 3; padding-top: 0.6em; } /* Key/value facts row under a page header (About, Resume) */ .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem var(--gutter); padding-top: 1rem; border-top: 1px solid var(--text-faint); } .facts__item { display: grid; gap: 0.4rem; align-content: start; } .site-footer { position: sticky; bottom: 0; z-index: 0; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem)); overflow: hidden; background: var(--bg-alt); } .site-footer__top { row-gap: 2rem; } .site-footer__cta { grid-column: 7 / -1; display: grid; gap: 1.5rem; justify-items: start; } .site-footer__cta .t-2 { max-width: 12em; } .site-footer__cols { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--text-faint); row-gap: 2rem; } .site-footer__cols a:hover { color: var(--accent); } .site-footer__col { grid-column: span 2; display: grid; gap: 0.3rem; align-content: start; } .site-footer__col:first-child { grid-column: 7 / span 2; } .site-footer__mark { color: var(--accent); font-size: 13.4vw; line-height: 1; /* room for the g/p descenders */ white-space: nowrap; margin: 0.2em 0 0.04em -0.05em; } @media (max-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel__label, .site-footer__cta { grid-column: 1 / -1; } .site-footer__col, .site-footer__col:first-child { grid-column: span 2; } } /* -------------------------------------------- MOTION HOOKS Hidden states apply only once JS has booted (html.js-motion), so content is never lost without JS or with reduced motion. -------------------------------------------- */ /* SplitText line masks: room for descenders without shifting layout */ [data-split] > div { padding-bottom: 0.1em; margin-bottom: -0.1em; } .js-motion [data-split] { visibility: hidden; } .js-motion [data-reveal-img] { clip-path: inset(100% 0 0 0); } [data-parallax] { will-change: transform; } .media-frame { overflow: hidden; position: relative; background: var(--bg-alt); } .media-frame > img, .media-frame > video { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }