/* ---- fonts ---- */ /* Space Grotesk — geometric-grotesque display (variable, latin subset) */ @font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Hanken Grotesk — humanist grotesque body (variable, latin subset) */ @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---- tokens (dark arm — "Midnight") ---- */ :root { --ink: #0B1626; /* page background */ --panel: #132034; /* card / surface */ --line: #20314C; /* hairline borders */ --text: #DDE5F0; /* primary text */ --muted: #8194AC; /* secondary text */ --signal: #ECAE49; /* gold accent */ --signal-hi: #F4C266; /* gold hover */ --on-signal: #2A1E05; /* text on gold */ --display: "Space Grotesk", system-ui, sans-serif; --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --col: 760px; --pad: clamp(20px, 5vw, 40px); --radius: 14px; } /* ---- tokens (light arm — "Daylight") ---- Selected at the edge via so it is present before first paint (no theme flash). The accent flips gold -> navy: gold fails AA on off-white, navy (#234270) clears it at ~9.4:1. Everything else is token-driven, so remapping these eight custom properties reskins the whole page. */ html[data-theme="light"] { --ink: #FCF9F6; /* page background */ --panel: #FCFDFE; /* raised card / surface */ --line: #E3E7ED; /* hairline borders */ --text: #15191F; /* primary text (cool charcoal) */ --muted: #5C6675; /* secondary text */ --signal: #234270; /* navy accent — buttons, links, nodes, rail */ --signal-hi: #2C5089; /* navy hover */ --on-signal: #EEF2F7; /* text on navy */ } /* dark-assuming touches that aren't purely token-driven */ html[data-theme="light"] body { background: var(--ink); } html[data-theme="light"] .cta-float { box-shadow: 0 6px 22px rgba(20, 40, 80, .18); } html[data-theme="light"] .shot-play .play { background: rgba(18, 28, 44, .55); border-color: rgba(35, 66, 112, .55); } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-size: clamp(16px, 1rem + 0.2vw, 18px); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } a { color: var(--signal); text-underline-offset: 3px; text-decoration-thickness: 1px; } .mono { font-family: var(--mono); font-size: 0.82em; color: var(--muted); letter-spacing: 0; } .wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--pad); } /* ---- a11y ---- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 10; background: var(--signal); color: var(--on-signal); padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } :where(a, button, .facade):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } /* ---- hero ---- */ .hero { padding-block: clamp(64px, 16vh, 140px) clamp(40px, 9vh, 80px); } .avatar { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--line); margin-bottom: 20px; } .eyebrow { color: var(--muted); font-size: 0.95rem; margin-bottom: 26px; } .hero h1 { font-size: clamp(2.1rem, 7.2vw, 3.6rem); max-width: 16ch; margin-bottom: 22px; } .lede { font-size: clamp(1.05rem, 3.4vw, 1.3rem); color: var(--text); max-width: 34ch; } .availability { color: var(--muted); margin-top: 14px; max-width: 42ch; } /* ---- buttons ---- */ .actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 500; font-size: 1rem; text-decoration: none; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--panel); transition: border-color .18s ease, transform .18s ease, background .18s ease; } .btn:hover { border-color: var(--muted); transform: translateY(-1px); } .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 600; } .btn-primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); } /* ---- floating "email me" CTA ---- */ .cta-float { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 12px 20px; border-radius: 999px; background: var(--signal); color: var(--on-signal); border: 1px solid var(--signal); box-shadow: 0 6px 22px rgba(5, 10, 18, .45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .cta-float.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .cta-float:hover { background: var(--signal-hi); border-color: var(--signal-hi); } @media (min-width: 720px) { .cta-float { right: 24px; bottom: 24px; } } /* ---- section heads ---- */ .section-head { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: clamp(28px, 6vw, 48px); display: flex; flex-direction: column; gap: 6px; } .section-head .mono { font-size: 0.7rem; text-transform: none; } main > section { padding-block: clamp(48px, 11vh, 96px); } .proof { border-top: 1px solid var(--line); } /* ---- proof / git rail ---- */ .builds { list-style: none; margin: 0; padding: 0; position: relative; padding-left: 34px; } /* the rail track */ .builds::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; } /* the amber progress overlay that draws on view */ .builds::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--signal), var(--signal)); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.4,0,.1,1); } .builds.is-drawn::after { transform: scaleY(1); } .build { position: relative; padding-bottom: clamp(40px, 8vw, 64px); } .build:last-child { padding-bottom: 0; } /* commit node — solid gold dot, centred on the 2px rail (rail centre x=8px) */ .build::before { content: ""; position: absolute; left: -33px; top: 6px; width: 14px; height: 14px; background: var(--signal); border-radius: 50%; transform: scale(.4); opacity: 0; transition: transform .4s ease, opacity .4s ease; } .builds.is-drawn .build::before { transform: scale(1); opacity: 1; } .builds.is-drawn .build:nth-child(1)::before { transition-delay: .15s; } .builds.is-drawn .build:nth-child(2)::before { transition-delay: .45s; } .builds.is-drawn .build:nth-child(3)::before { transition-delay: .75s; } .build h3 { font-size: clamp(1.25rem, 4.6vw, 1.65rem); margin: 6px 0 2px; } .tagline { color: var(--text); font-weight: 500; margin: 0 0 14px; } .build-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .problem { color: var(--muted); margin-bottom: 12px; } .did { margin-bottom: 18px; } .chip { font-family: var(--mono); font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .chip[data-state="live"]::before { background: var(--signal); } .chip[data-state="live"] { color: var(--text); border-color: var(--signal); } .stack { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; } .stack li { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); } /* ---- screenshot carousel ---- */ .shots { position: relative; } .shots-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shots-track::-webkit-scrollbar { display: none; } .shots-track li { flex: 0 0 auto; width: 92%; aspect-ratio: 16 / 10; scroll-snap-align: center; } .shots-track img { width: 100%; height: 100%; object-fit: contain; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); } .shots-track:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: var(--radius); } .shots-controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .shots-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: border-color .18s ease; } .shots-btn:hover { border-color: var(--muted); } /* video slide inside a carousel (click to load) */ .shot-video { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); } .shot-video img, .shot-video video { width: 100%; height: 100%; object-fit: contain; display: block; } .shot-play { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; } .shot-play .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(11,22,38,.62); border: 1px solid rgba(236,174,73,.6); backdrop-filter: blur(2px); transition: transform .18s ease, background .18s ease; } .shot-play .play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--signal); transform: translateX(2px); } .shot-play:hover .play { transform: scale(1.06); background: rgba(11,22,38,.8); } /* single framed screenshot (no carousel) */ .shot-frame { display: flex; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); } .shot-frame img { width: 100%; height: auto; max-height: 560px; object-fit: contain; display: block; } .links { display: flex; gap: 20px; margin-top: 16px; } .links a { font-family: var(--body); font-weight: 500; } /* ---- method ---- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: step; } .steps li { position: relative; padding-left: 44px; } .steps li::before { counter-increment: step; content: "0" counter(step); position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 0.8rem; color: var(--signal); border: 1px solid var(--line); border-radius: 7px; padding: 3px 7px; } .steps h3 { font-size: 1.1rem; margin-bottom: 4px; } .steps p { color: var(--muted); } /* ---- record ---- */ .record { border-top: 1px solid var(--line); } .orgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .orgs li { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .orgs li:last-child { border-bottom: 0; padding-bottom: 0; } .orgs strong { font-family: var(--display); font-size: 1.1rem; } .orgs span { color: var(--muted); } /* ---- contact ---- */ .contact { border-top: 1px solid var(--line); } .contact .availability { margin-bottom: 8px; max-width: 46ch; } /* ---- footer ---- */ footer { border-top: 1px solid var(--line); padding-block: 28px; } footer p { color: var(--muted); font-size: 0.85rem; } /* ---- wider screens ---- */ @media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; gap: 28px 40px; } .orgs { grid-template-columns: repeat(3, 1fr); gap: 28px; } .orgs li { border-bottom: 0; padding-bottom: 0; border-left: 1px solid var(--line); padding-left: 20px; } .orgs li:first-child { border-left: 0; padding-left: 0; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .builds::after { transform: scaleY(1); } .builds .build::before { transform: scale(1); opacity: 1; } .btn:hover { transform: none; } .cta-float { transition: opacity .001ms, visibility .001ms; transform: none; } }