/* ------------------------------------------------------------ Capture — capture.graviti.inc Plain CSS, no build step. Tokens live on :root; dark mode follows prefers-color-scheme, and data-theme="light|dark" on overrides it. Inter is self-hosted so the page makes no third-party requests. ------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- tokens ---------- */ :root { color-scheme: light; --bg: #ffffff; --page-glow: none; --surface: #f5f5f7; --ink: #121a24; --ink-2: #3a4552; --muted: #646d78; --line: rgba(18, 26, 36, 0.12); --line-strong: rgba(18, 26, 36, 0.22); --gold: #f2b544; --accent-text: #8f5f0a; --glow: rgba(242, 181, 68, 0.3); --check: rgba(18, 26, 36, 0.3); --phone-body: #1b2430; --phone-edge: #46535f; --phone-screen: #0b0f14; --phone-island: #04060a; --hue-blue: #6d93bd; --hue-sage: #79a79c; --hue-violet: #9298c9; --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --measure: 36rem; --gutter: clamp(1rem, 4vw, 2rem); --section: clamp(6rem, 13vw, 11rem); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #121a24; --page-glow: radial-gradient(130% 90% at 50% 0%, #27394d 0%, #1a2532 52%, #121a24 100%); --surface: rgba(245, 248, 251, 0.06); --ink: #f5f8fb; --ink-2: rgba(245, 248, 251, 0.82); --muted: rgba(245, 248, 251, 0.62); --line: rgba(245, 248, 251, 0.1); --line-strong: rgba(245, 248, 251, 0.22); --accent-text: #f2b544; --glow: rgba(242, 181, 68, 0.22); --check: rgba(245, 248, 251, 0.35); --phone-body: #1e2a38; --phone-edge: rgba(245, 248, 251, 0.24); --phone-screen: #090d12; --phone-island: #03050a; } } :root[data-theme='dark'] { color-scheme: dark; --bg: #121a24; --page-glow: radial-gradient(130% 90% at 50% 0%, #27394d 0%, #1a2532 52%, #121a24 100%); --surface: rgba(245, 248, 251, 0.06); --ink: #f5f8fb; --ink-2: rgba(245, 248, 251, 0.82); --muted: rgba(245, 248, 251, 0.62); --line: rgba(245, 248, 251, 0.1); --line-strong: rgba(245, 248, 251, 0.22); --accent-text: #f2b544; --glow: rgba(242, 181, 68, 0.22); --check: rgba(245, 248, 251, 0.35); --phone-body: #1e2a38; --phone-edge: rgba(245, 248, 251, 0.24); --phone-screen: #090d12; --phone-island: #03050a; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; background-color: var(--bg); background-image: var(--page-glow); background-repeat: no-repeat; background-size: 100% 110vh; color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } svg { display: block; } a { color: inherit; text-decoration: none; } h1, h2 { font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; } /* ---------- header ---------- */ .top { display: flex; align-items: center; justify-content: space-between; max-width: 72rem; margin: 0 auto; padding: 1.15rem var(--gutter); } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; } .wordmark svg { width: 22px; height: 22px; } .top-link { font-size: 0.9375rem; color: var(--muted); transition: color 0.25s; } .top-link:hover { color: var(--ink); } /* ---------- hero ---------- */ .hero { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem 0.4rem 0.75rem; } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .hero h1 { font-size: clamp(4rem, 13vw, 8.5rem); letter-spacing: -0.05em; line-height: 0.95; margin: 1.5rem 0 1rem; } .tagline { font-size: clamp(1.375rem, 1rem + 2.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2); } .hero-visual { position: relative; height: clamp(300px, 40vw, 440px); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); } .hero-visual::before { content: ''; position: absolute; left: 50%; top: 8%; width: min(90vw, 720px); height: 100%; transform: translateX(-50%); background: radial-gradient(50% 55% at 50% 50%, var(--glow), transparent 70%); pointer-events: none; } .phone { position: relative; width: clamp(260px, 30vw, 340px); height: auto; margin: 0 auto; } /* hero load-in: pure CSS, runs once, no JS needed */ .hero > * { animation: rise 1.1s var(--ease) both; } .hero > :nth-child(2) { animation-delay: 0.08s; } .hero > :nth-child(3) { animation-delay: 0.16s; } .hero > :nth-child(4) { animation-delay: 0.28s; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } } /* ---------- the phone ---------- */ .phone .body { fill: var(--phone-body); } .phone .bezel { fill: none; stroke: var(--phone-edge); stroke-width: 1.5; } .phone .screen { fill: var(--phone-screen); } .phone .island { fill: var(--phone-island); } .phone .btn { fill: var(--phone-edge); } .phone .ab { fill: var(--gold); } .phone .ab-glow { fill: var(--gold); opacity: 0.45; filter: url(#soft); animation: glow 2.6s ease-in-out infinite; } .phone .ab-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring 2.6s var(--ease) infinite; } .phone .ab-ring-2 { animation-delay: 1.3s; } .phone .wave rect { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: bar 1.1s ease-in-out infinite alternate; } .phone .wave rect:nth-child(2n) { animation-duration: 1.35s; } .phone .wave rect:nth-child(3n) { animation-duration: 0.9s; } .phone .wave rect:nth-child(2) { animation-delay: -0.2s; } .phone .wave rect:nth-child(3) { animation-delay: -0.5s; } .phone .wave rect:nth-child(4) { animation-delay: -0.9s; } .phone .wave rect:nth-child(5) { animation-delay: -0.3s; } .phone .wave rect:nth-child(6) { animation-delay: -0.7s; } .phone .wave rect:nth-child(7) { animation-delay: -0.1s; } .phone .wave rect:nth-child(8) { animation-delay: -0.6s; } .phone .wave rect:nth-child(9) { animation-delay: -1s; } .phone .wave rect:nth-child(10) { animation-delay: -0.4s; } .phone .wave rect:nth-child(11) { animation-delay: -0.8s; } .phone .wave rect:nth-child(12) { animation-delay: -0.25s; } .phone .wave rect:nth-child(13) { animation-delay: -0.55s; } @keyframes bar { from { transform: scaleY(1); } to { transform: scaleY(0.32); } } @keyframes glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } } @keyframes ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } } /* ---------- sections ---------- */ .block { text-align: center; padding: calc(var(--section) * 0.5) var(--gutter); } .hero + .block { padding-top: calc(var(--section) * 0.45); } .block h2 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); max-width: 16ch; margin: 0 auto 1.25rem; } .block p { font-size: clamp(1.125rem, 1rem + 0.7vw, 1.4375rem); line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-2); max-width: var(--measure); margin: 0 auto; } .block .note { font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.5; letter-spacing: 0; color: var(--muted); max-width: 30rem; margin-top: 1.25rem; } /* ---------- cards ---------- */ .card { max-width: 34rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: clamp(1.4rem, 3vw, 2rem); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; } .card p { max-width: none; margin: 0; font-size: 1.0625rem; letter-spacing: 0; } .label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .heard s { color: var(--muted); text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); } .meant { margin-top: 1.4rem !important; } .meant strong { display: block; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0; } .chips li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.85rem 0.4rem 0.7rem; } .chips li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .spoken { color: var(--muted); line-height: 1.55; } .then { width: 1px; height: 2rem; margin: 1.25rem 0 1.25rem 10.5px; background: var(--line-strong); } .tasks { list-style: none; padding: 0; margin: 0; } .tasks li { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--line); } .tasks li:first-child { border-top: 0; padding-top: 0.25rem; } .tasks li:last-child { padding-bottom: 0.25rem; } .check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--check); } .title { flex: 1; font-size: 1.0625rem; color: var(--ink); } .proj { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-size: 0.8125rem; color: var(--muted); } .proj::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--gold)); } .proj.blue { --hue: var(--hue-blue); } .proj.sage { --hue: var(--hue-sage); } .proj.violet { --hue: var(--hue-violet); } @media (max-width: 420px) { .tasks li { flex-wrap: wrap; } .proj { width: 100%; padding-left: calc(22px + 0.9rem); } } /* ---------- CTA + footer ---------- */ .button { display: inline-block; margin-top: 2rem; padding: 0.95rem 1.7rem; background: var(--gold); color: #121a24; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 999px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .button:hover { transform: translateY(-1px); box-shadow: 0 12px 32px var(--glow); } .button:active { transform: translateY(0); } .cta .note { margin-top: 1.5rem; } .foot { border-top: 1px solid var(--line); padding: 2.5rem var(--gutter) 3rem; text-align: center; font-size: 0.875rem; color: var(--muted); } .foot-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.75rem; padding: 0; margin: 0 0 0.75rem; } .foot a { color: var(--ink-2); transition: color 0.25s; } .foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; } /* ---------- scroll reveals ---------- */ /* Only when JS has marked the document; without it everything is simply visible. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* ---------- 404 ---------- */ .lost { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } .lost h1 { font-size: clamp(3rem, 9vw, 6rem); margin-bottom: 1rem; } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero > *, .phone .ab-glow, .phone .ab-ring, .phone .wave rect { animation: none; } .phone .ab-ring { opacity: 0.35; transform: scale(1.6); } .phone .ab-ring-2 { display: none; } .js .reveal { opacity: 1; transform: none; transition: none; } .button, .top-link, .foot a { transition: none; } }