/* Website UI kit — foundational styles. Palette tokens come from colors_and_type.css; layout-heavy styles (info-page, travels, onesit feed, sit-page, etc.) live in site.css. */ * { box-sizing: border-box; } html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } html { /* Smooth scroll for anchor jumps + scrollIntoView calls. Browser respects prefers-reduced-motion natively for this property. */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; /* Default to the dark hero canvas — the home/overlay/labs are all dark, so any uncovered sliver of reads correctly. Light routes (travels, info) set their own bg on the route wrapper. */ background: #141414; color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); min-height: 100vh; } /* --- Screen-reader-only utility ------------------------------ Hides content visually but keeps it accessible to assistive tech. Used e.g. on immersive pages where a visible heading would fight the design but screen-reader users still need a document title. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Skip-to-content ---------------------------------------- Keyboard users tab here first and jump past the nav with one press. Off-screen until focused, then slides into view. Styled as a small mono-caps pill that matches the site's voice. */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 10px 14px; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 16px; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: top 200ms var(--ease-out); } .skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 2px solid currentColor; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* --- Focus-visible baseline ---------------------------------- Apple-style: keyboard users get a clear ring, mouse users don't. `:focus-visible` fires for tab navigation but not for pointer clicks. The outline uses currentColor so it adapts automatically to dark/light contexts (e.g. white over the feed, ink on paper). Individual components can override if they want a tailored treatment (see .onesit__trust-chip, .book-btn below). */ :focus { outline: none; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } /* ---------- Nav ---------- Plain text on the page — no glass, no blur, no hairline. Matches the accordion's near-black bg exactly so the nav space reads as continuous with the page below. The dark canvas is the site; the nav is just text floating on it. */ /* Aristide-style corner-pinned chrome: four fixed elements in the viewport corners, no central nav band. Each corner is independently positioned so content scrolls behind them. On mobile they collapse to a compact top row (see media query below). */ .site-nav--corners { /* Becomes a layout-less wrapper — corners are each position:fixed. */ position: static; display: contents; color: #fafaf7; } .site-nav__corner { position: fixed; z-index: 40; pointer-events: auto; display: flex; align-items: center; gap: 18px; } .site-nav__corner--tl { top: 22px; left: 28px; } .site-nav__corner--tr { top: 22px; right: 28px; gap: 22px; } .site-nav__corner--bl { bottom: 22px; left: 28px; flex-direction: column; align-items: flex-start; gap: 3px; color: rgba(250, 250, 247, 0.62); font-size: 11px; letter-spacing: 0.08em; line-height: 1.4; } .site-nav__corner--br { bottom: 22px; right: 28px; flex-direction: column; align-items: flex-end; gap: 12px; } .site-nav__contact { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; color: rgba(250, 250, 247, 0.6); font-size: 11px; } .site-nav__contact a { color: inherit; text-decoration: none; letter-spacing: 0.06em; transition: color 140ms var(--ease-out); } .site-nav__contact a:hover { color: #fafaf7; } .site-nav .wm { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; line-height: 16px; text-transform: uppercase; background: transparent; border: 0; padding: 0; cursor: pointer; color: #fafaf7; } /* Mobile: corners collapse into a single top row so fingers don't have to reach for bottom-pinned links. The contact stack is dropped on mobile (email is still tappable from the Book-a-sit CTA path). */ @media (max-width: 768px) { .site-nav__corner { position: fixed; } .site-nav__corner--tl { top: 16px; left: 16px; } .site-nav__corner--tr { top: 16px; right: 16px; gap: 14px; } .site-nav__corner--bl { display: none; } .site-nav__corner--br { bottom: 16px; right: 16px; gap: 8px; } .site-nav__contact { display: none; } } /* Top-right corner links (About / Labs) — same typographic spec that used to apply to `.site-nav__links a`, now scoped to the corner. */ .site-nav__corner--tr a { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 16px; text-transform: uppercase; color: rgba(250, 250, 247, 0.62); text-decoration: none; position: relative; padding: 6px 0; transition: color 120ms var(--ease-out); } .site-nav__corner--tr a.active { color: #fafaf7; } .site-nav__corner--tr a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: #fafaf7; } .site-nav__corner--tr a:hover { color: #fafaf7; } /* Legacy classes kept for backwards-compat in case any other component still references them — but they're no longer emitted by Nav. */ .site-nav__links { display: none; } .site-nav__meta { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 16px; text-transform: uppercase; color: rgba(250, 250, 247, 0.38); } /* ---------- Shared utilities ---------- */ /* Canonical label type spec — ONE rule that all small uppercase text on the site shares. Matches microdot's exact cohesion pattern (14px ish, weight 500, uppercase, normal letter-spacing, 16px line-height). Every nav link, meta caption, kicker, year marker, footer line, tile code, and chip should resolve to this exact spec. Variance in size/spacing/ family is the #1 source of the old "scrappy" feel; unifying here is the single highest-leverage cohesion move. */ .mono-caps, .mono-label, .t-catalog, .catalog, .t-meta, .t-caption, .t-micro-label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 16px; font-variant-numeric: tabular-nums; } .link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 1px; transition: border-color 120ms var(--ease-out); } .link:hover { border-bottom-color: var(--fg); } /* ---------- Footer ---------- */ .site-foot { padding: 24px 32px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 16px; text-transform: uppercase; color: var(--fg-muted); margin-top: 48px; }