/* =========================================================== Portfolio: minimal & chic, with a Stripe-style visible layout grid =========================================================== */ :root { --content-width: 1080px; --gutter: 28px; /* colors — light theme (warm off-white / cream, Stripe-ish) */ --bg: #f5f3ee; --fg: #16161a; --muted: #4d4d54; /* AAA (7.56:1) — owner chose the stricter tier, Jul 2026 */ --line: rgba(20, 20, 30, 0.10); /* grid lines: faint but readable as dashes */ --line-strong: rgba(20, 20, 30, 0.14); --accent: #5b4bff; --accent-text: #5b4bff; /* accent when it colours SMALL text (dark mode lightens it for AA) */ --accent-wash: rgba(91, 75, 255, 0.10); /* 10% indigo highlight behind a message */ --error: #ad3826; /* warm brick red for rejected input; dark enough for AA on its own wash */ --error-wash: rgba(173, 56, 38, 0.10); /* 10% of the light-mode red */ --input-line: rgba(20, 20, 30, 0.5); /* form-field borders: firmer than the decorative hairlines so the field's extent is perceivable (3:1) */ --thumb-1: #e9e6ff; --thumb-2: #ffeede; --thumb-3: #e2f3ec; --thumb-4: #fbe4ec; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } :root[data-theme="dark"] { --bg: #0d0d10; --fg: #f2f2f4; --muted: #a4a4ae; /* AAA (7.85:1) — owner chose the stricter tier, Jul 2026 */ --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.11); /* exact same blue as light mode — on the dark bg it's 3.6:1, fine for large text (hello world) and decorative/border bits only. Small text must use --accent-text: a lighter cut of the same indigo that clears AA (5.97:1). */ --accent: #5b4bff; --accent-text: #8a7dff; --input-line: rgba(255, 255, 255, 0.35); /* same hues as light, but the washes need ~2x opacity: 10% over near-black reads far fainter than 10% over cream */ --accent-wash: rgba(91, 75, 255, 0.20); --error: #ef8a7b; /* lighter coral: a light-mode red goes muddy on near-black */ --error-wash: rgba(239, 138, 123, 0.15); --thumb-1: #1c1a33; --thumb-2: #2a2018; --thumb-3: #16241d; --thumb-4: #2a1820; } * { box-sizing: border-box; margin: 0; padding: 0; } /* el.hidden must always win: display rules on .form etc. would otherwise override the UA's [hidden] and keep "hidden" forms on screen (the unlock states and the say-hi thank-you rely on this). */ [hidden] { display: none !important; } /* keyboard focus: one branded ring instead of the UA default. :focus-visible keeps it away from mouse clicks (text fields count as keyboard-focused per spec, so they always ring — intended). --accent-text keeps it AA in dark. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } /* keyboard-only "skip to content": parked above the viewport, slides in on focus (styled like the primary button so it reads as part of the family) */ .skiplink { position: fixed; left: var(--gutter); top: -60px; z-index: 60; /* above the nav (20) and its overlay */ background: var(--fg); color: var(--bg); border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 500; text-decoration: none; transition: top .15s ease; } .skiplink:focus-visible { top: 14px; } /* overflow-x clamp lives here on as `clip` (not `hidden`): clip prevents the full-bleed grid lines from causing a horizontal scrollbar without turning the element into a scroll container, which would silently break scroll-behavior: smooth and all anchor / "See me as a list" autoscrolling. */ html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--sans); background: var(--bg); color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .4s ease, color .4s ease; } /* headings: tighter than body text so wrapped lines sit close together */ h1, h2, h3 { line-height: 1.25; } /* ---------------------------------------------------------- VISIBLE LAYOUT GRID (fixed skeleton behind the content) ---------------------------------------------------------- */ .guides { position: fixed; inset: 0; z-index: 0; display: flex; justify-content: center; pointer-events: none; } .guides__inner { position: relative; width: 100%; max-width: var(--content-width); height: 100%; } /* each vertical line is its own element, a true dashed line */ .guide-line { position: absolute; top: 0; bottom: 0; width: 0; transform: translateX(-0.5px); border-left: 1px dashed var(--line); } /* outer (edge) lines a little more visible */ .guide-line:first-child, .guide-line:last-child { border-left-color: var(--line-strong); } /* full-bleed edge lines, flush to the far left/right of the viewport. At exactly 0/max px the window edge swallows the line, so we nudge it 1px inward and match the strength of the inner content lines. */ .guide-edge { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); } .guide-edge--left { left: 1px; } .guide-edge--right { right: 1px; } /* on narrow screens hide the inner lines, keep only the edges */ @media (max-width: 720px) { .guide-line:not(:first-child):not(:last-child) { display: none; } } /* phones + portrait tablets: a 1px-from-the-edge line is invisible on real device screens (rounded corners / edge clipping), so pull the frame lines visibly inward; the content's 0%/100% lines would hug the same clipped edge, so they hand over to the inset frame here */ @media (max-width: 860px) { .guide-edge--left { left: 12px; } .guide-edge--right { right: 12px; } .guide-line:first-child, .guide-line:last-child { display: none; } } /* all content sits above the grid */ .nav, main, .footer { position: relative; z-index: 1; } /* shared content width, so edges line up with the grid */ .nav, .hero, .pagehead, .section__head, .projects, .about__grid, .contact__inner, .how, .entries, .nextwrap, .footer { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); } /* "key expired" reminder bar under the header (main.js injects it on the non-case pages when a visitor's key has lapsed). Full-bleed indigo wash, text aligned to the content column. */ .keybar { position: relative; z-index: 1; width: 100%; /* fill the flex column on the single-screen home */ background: var(--accent-wash); } .keybar__inner { max-width: var(--content-width); margin-inline: auto; padding: 9px var(--gutter); font-size: 13px; color: var(--fg); } .keybar__cta { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .keybar__cta:hover { color: var(--accent-text); } @media (max-width: 640px) { .keybar__long { display: none; } /* "to see case studies" drops on phones */ } /* ---------------------------------------------------------- NAV ---------------------------------------------------------- */ .nav { position: relative; padding-top: 26px; padding-bottom: 26px; padding-inline: 0; /* override the content gutter so columns sit on the grid lines */ z-index: 20; /* above main content so the mobile menu panel overlays it */ } /* the four links: one per grid column on desktop, dropdown panel on small screens */ .nav__links { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; } /* Stripe-style dashed divider under the header — spans the FULL viewport width so it meets the outer vertical edge lines (no floating in the middle). */ .nav::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; border-bottom: 1px dashed var(--line-strong); } /* nav items — one per grid column, left-aligned to each column line */ .nav__link { position: relative; padding-left: var(--gutter); font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; } .nav__link:hover { color: var(--fg); } .nav__link.is-current { color: var(--fg); font-weight: 600; } /* the asterisk marks the current page, sitting just below it */ .nav__link.is-current::after { /* \FE0E = text-presentation selector: stops iOS from swapping the asterisk for its emoji version, so it stays a glyph and takes the accent color */ content: "✳\FE0E"; content: "✳\FE0E" / ""; /* silent for screen readers (alt-text syntax) */ position: absolute; left: var(--gutter); top: 100%; margin-top: 4px; font-size: 0.9em; line-height: 1; color: var(--accent); } /* gentle lined lock — case studies are gated, so "not everyone gets in" */ .nav__lock { width: 12px; height: 12px; margin-left: 6px; vertical-align: -2px; opacity: 0.55; display: none; /* temporarily hidden by request; remove this line to show the lock again */ } .nav__toggle { position: absolute; right: var(--gutter); /* same inset from the right line as Home has from the left */ top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--line-strong); color: var(--fg); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; font-size: 15px; display: grid; place-items: center; transition: border-color .2s; } /* hamburger — hidden on desktop; appears ≤860px (phones + portrait tablets). Two calm lines that fold into an ✕ while the menu is open. */ .nav__burger { display: none; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; place-content: center; gap: 5px; } .nav__burger span { display: block; width: 15px; height: 1.5px; background: var(--fg); transition: transform .25s ease; } .nav--open .nav__burger span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav--open .nav__burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); } @media (max-width: 860px) { .nav { display: flex; align-items: center; padding-block: 14px; padding-inline: var(--gutter); } /* keep the burger painting above the fixed overlay so ✕ stays tappable; margin-left:auto pins it right whether or not a back link sits on the left */ .nav__burger { display: grid; position: relative; margin-left: auto; } /* the page's back link (moved here by main.js) sits left, aligned with the burger */ .nav > .backlink, .nav > .case__back { margin: 0; font-size: 14px; } /* links open as a full-page overlay (body scroll locked via .nav-locked) */ .nav__links { display: none; } .nav--open .nav__links { display: flex; /* column so the socials can pin to the bottom */ flex-direction: column; align-items: stretch; position: fixed; inset: 0; background: var(--bg); padding: 88px 0 24px; /* clear the header row; rows carry their own gutter */ overflow-y: auto; } .nav__links .nav__link { display: block; padding: 16px var(--gutter); font-size: 19px; } .nav__links .nav__link + .nav__link { border-top: 1px dashed var(--line); } /* in the overlay the current-page ✳ leads the label: "✳ Home" */ .nav__link.is-current::after { content: none; } .nav__link.is-current::before { content: "✳\FE0E"; content: "✳\FE0E" / ""; font-size: 0.9em; line-height: 1; color: var(--accent); margin-right: 8px; } /* the theme toggle lives inside the panel on small screens (moved by main.js) */ .nav__links .nav__toggle { position: static; transform: none; margin: 18px var(--gutter) 4px; } /* set by main.js while the overlay menu is open */ body.nav-locked { overflow: hidden; } } .nav__toggle:hover { border-color: var(--fg); } /* ---------------------------------------------------------- HERO ---------------------------------------------------------- */ .hero { padding-top: 96px; padding-bottom: 120px; } .hero__eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; } .hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 6vw, 68px); line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; } .hero__title em { font-style: italic; color: var(--accent); } .hero__lede { margin-top: 28px; font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 52ch; } /* landing lede — wider (~3 of the 4 grid columns) so the second line doesn't drop its last word; the line break stays intentional. */ .hero--landing .hero__lede { max-width: 56rem; } /* landing buttons — equal width, balanced, calm */ .hero--landing .hero__actions .btn { min-width: 196px; justify-content: center; } .hero__actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s, border-color .2s, color .2s; /* real