/* ───────────────────────────────────────────────────────────────────────── * hendrickbuilds.ai — late-night terminal, senior practitioner portfolio * dark by default, type-driven, code-aware. one accent: lime. * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── tokens ───────────────────────────────────────────────────────────── */ --bg-0: #0a0a0a; --bg-1: #101010; --bg-2: #161616; --bg-3: #1c1c1c; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.12); --border-3: rgba(255,255,255,0.18); --text: #ededed; --text-2: #c8c8c8; --text-dim: #8a8a8a; --text-faint: #5a5a5a; --accent: #D4FF4D; /* lime — set via Tweak */ --accent-dim: color-mix(in oklab, var(--accent) 25%, var(--bg-0)); --tech-blue: #8eb5e0; --warn: #f4a85a; --good: #6dd29a; /* ── type ─────────────────────────────────────────────────────────────── */ --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-sans: 'Geist', 'Inter Tight', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── rhythm ───────────────────────────────────────────────────────────── */ --density: 1; /* 0.82 compact · 1 standard · 1.18 airy */ --motion: 1; /* 0 none · 0.5 subtle · 1 full */ --sec-pad: calc(140px * var(--density)); --gutter: max(20px, 4vw); --max: 1280px; --r-sm: 4px; --r: 8px; --r-lg: 14px; } /* ── pairing variants (driven by data-pairing on ) ─────────────────── */ html[data-pairing="b"] { --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-sans: 'Inter Tight', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } html[data-pairing="c"] { --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-sans: 'Manrope', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace; } /* ── reset / base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--bg-0); color: var(--text); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; line-height: 1.55; overflow-x: hidden; } body::before { /* paper-grain noise — extremely subtle */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } body::after { /* faint dot grid */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.45; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } ::selection { background: var(--accent); color: #0a0a0a; } /* focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── layout primitives ───────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } .section { padding: var(--sec-pad) 0; position: relative; z-index: 2; } .section + .section { padding-top: 0; } /* section header — used across all major sections */ .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 28px; margin-bottom: calc(56px * var(--density)); border-bottom: 1px solid var(--border); position: relative; } .sec-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 80px; height: 1px; background: var(--accent); } .sec-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .sec-eyebrow::before { content: ">_"; color: var(--accent); opacity: 0.55; font-weight: 500; } .sec-title { font-family: var(--font-serif); font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 400; letter-spacing: -0.018em; line-height: 1.05; margin: 0; max-width: 22ch; text-wrap: balance; } .sec-title em { font-style: italic; color: var(--accent); } .sec-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; white-space: nowrap; align-self: flex-end; padding-bottom: 4px; } /* ── motion: reveal on scroll ────────────────────────────────────────────── */ .r { opacity: 0; transform: translateY(calc(16px * var(--motion))); transition: opacity calc(0.7s * var(--motion)) cubic-bezier(0.2,0.7,0.2,1), transform calc(0.8s * var(--motion)) cubic-bezier(0.2,0.7,0.2,1); transition-delay: calc(var(--rd,0) * 70ms * var(--motion)); } .r.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .r { opacity: 1; transform: none; transition: none; } * { animation: none !important; transition: none !important; } /* hero words rely on @keyframes heroIn with fill-mode forwards; reduced-motion kills the animation, so force their resting state. */ .hero h1 .word { opacity: 1 !important; transform: none !important; } } html[data-motion="none"] .hero h1 .word { opacity: 1 !important; transform: none !important; } /* ═════════════════════════════════════════════════════════════════════════ * TOP BAR — quiet, monospace, fixed * ═════════════════════════════════════════════════════════════════════════ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topbar .brand { color: var(--text-2); font-weight: 500; display: inline-flex; align-items: center; min-width: 0; } .topbar .brand i { color: var(--accent); font-style: normal; margin-right: 6px; } /* ── topbar logo variants — switched via html[data-logo] ──────────────── */ .brand-mark { display: none; align-items: center; gap: 8px; white-space: nowrap; } html[data-logo="a"] .brand-a, html[data-logo="b"] .brand-b, html[data-logo="c"] .brand-c, html[data-logo="d"] .brand-d, html[data-logo="e"] .brand-e, html[data-logo="f"] .brand-f { display: inline-flex; } /* A · serif italic wordmark */ .brand-a { font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.012em; color: var(--text); font-weight: 400; gap: 4px; } .brand-a i { color: var(--accent); margin-right: 4px; font-style: normal; } .brand-a em { font-style: italic; color: var(--accent); } /* B · terminal prompt */ .brand-b { font-family: var(--font-mono); font-size: 14px; letter-spacing: -0.01em; color: var(--text); font-weight: 500; gap: 6px; } .brand-b i.prompt { color: var(--accent); font-style: normal; font-weight: 700; letter-spacing: -0.04em; } .brand-b em { font-style: normal; color: var(--accent); } /* C · monogram tile + wordmark */ .brand-c { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.012em; color: var(--text); gap: 10px; } .brand-c .tile { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--accent); border-radius: 5px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; color: #0a0a0a; line-height: 1; padding-bottom: 2px; } .brand-c .tile em { font-style: italic; color: #0a0a0a; } .brand-c em { font-style: italic; color: var(--accent); } /* D · schematic mark + wordmark */ .brand-d { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.012em; color: var(--text); gap: 10px; } .brand-d .schem { width: 26px; height: 26px; color: var(--accent); } .brand-d em { font-style: italic; color: var(--accent); } /* E · stamp + wordmark */ .brand-e { font-family: var(--font-serif); font-size: 16px; letter-spacing: -0.012em; color: var(--text); gap: 10px; } .brand-e .seal { width: 28px; height: 28px; color: var(--accent); } .brand-e em { font-style: italic; color: var(--accent); } /* F · HB.AI initials */ .brand-f { font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.03em; color: var(--text); font-weight: 500; line-height: 1; } .brand-f em { font-style: italic; color: var(--accent); font-weight: 500; } .topbar nav { display: flex; gap: 22px; } .topbar nav a:hover { color: var(--text); } .topbar .status { display: flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s; cursor: pointer; } .topbar .status:hover { color: var(--text-2); } .topbar .status[data-online="1"]:hover { color: var(--accent); } .topbar .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: pulse 2s ease-in-out infinite; } .topbar .status[data-online="0"]::before { background: var(--text-faint); box-shadow: none; animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (max-width: 740px) { .topbar nav { display: none; } } /* ═════════════════════════════════════════════════════════════════════════ * HERO * ═════════════════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; padding: 120px var(--gutter) 100px; display: flex; align-items: center; overflow: hidden; } .hero-inner { width: 100%; max-width: var(--max); margin: 0 auto; position: relative; z-index: 3; } .hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 36px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: "▍"; color: var(--accent); opacity: 0.9; } .hero h1 { font-family: var(--font-serif); font-size: clamp(3rem, 9.2vw, 8.5rem); font-weight: 400; letter-spacing: -0.035em; line-height: 0.95; margin: 0 0 0.5em; max-width: 12ch; text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; } .hero h1 .cursor { display: inline-block; width: 0.06em; height: 0.85em; background: var(--accent); margin-left: 0.22em; vertical-align: -0.08em; animation: blink 1.05s steps(2, start) infinite; } .hero h1 .word { display: inline-block; opacity: 0; transform: translateY(0.4em); animation: heroIn 0.55s cubic-bezier(0.2,0.7,0.2,1) forwards; } .hero h1 .word:nth-child(2) { animation-delay: 0.10s; } .hero h1 .word:nth-child(3) { animation-delay: 0.20s; } @keyframes heroIn { to { opacity: 1; transform: none; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .hero-lede { font-family: var(--font-serif); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; color: var(--text-2); max-width: 38ch; margin: 0 0 36px; text-wrap: pretty; } .hero-lede b { color: var(--text); font-weight: 500; font-style: italic; } .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; max-width: 720px; } .badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 6px 11px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,0.015); transition: border-color 0.2s, color 0.2s; } .badge:hover { border-color: var(--accent-dim); color: var(--text); } .badge::before { content: "·"; color: var(--accent); margin-right: 6px; } .hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; border-radius: var(--r); background: var(--accent); color: #0a0a0a; font-weight: 600; border: 1px solid var(--accent); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; will-change: transform; text-decoration: none; position: relative; } .btn:hover { background: color-mix(in oklab, var(--accent) 88%, #fff); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); } .btn .arrow { transition: transform 0.2s; } .btn:hover .arrow { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); } .btn-ghost:hover { background: transparent; border-color: var(--accent); box-shadow: none; color: var(--accent); } .link-quiet { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-dim); border-bottom: 1px dashed var(--border-3); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .link-quiet:hover { color: var(--accent); border-color: var(--accent); } .link-quiet::after { content: " →"; } /* hero schematic background — faint */ .hero-schematic { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0.55; mask-image: radial-gradient(ellipse 80% 60% at 70% 50%, #000, transparent 75%); } .hero-schematic svg { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 90%; max-width: 1100px; height: auto; will-change: transform; } .hero-schematic .node { fill: var(--bg-1); stroke: var(--border-2); stroke-width: 1; } .hero-schematic .node-accent { stroke: var(--accent); stroke-opacity: 0.4; } .hero-schematic .edge { fill: none; stroke: var(--border-3); stroke-width: 1; stroke-dasharray: 3 4; } .hero-schematic .label { font-family: var(--font-mono); font-size: 10px; fill: var(--text-faint); letter-spacing: 0.04em; } .hero-schematic .label-accent { fill: var(--accent); opacity: 0.6; } .hero-schematic .pulse { fill: var(--accent); opacity: 0.5; } .hero-schematic .pulse-anim { animation: schemPulse 4s ease-in-out infinite; } @keyframes schemPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.7; } } /* live feed strip pinned to hero bottom */ .live-feed { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); z-index: 4; overflow: hidden; display: flex; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .live-feed::before { content: "● LIVE"; flex: 0 0 auto; padding: 0 14px; color: var(--accent); font-size: 10px; letter-spacing: 0.18em; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; } .live-feed-track { display: flex; gap: 56px; padding-left: 36px; white-space: nowrap; animation: ticker 45s linear infinite; flex: 0 0 auto; } .live-feed-track > span { color: var(--text-dim); } .live-feed-track > span b { color: var(--text-2); font-weight: 400; } .live-feed-track > span i { color: var(--accent); font-style: normal; } .live-feed-track > span u { color: var(--tech-blue); text-decoration: none; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* hero variant — terminal split (b) */ html[data-hero="b"] .hero { padding-top: 110px; } html[data-hero="b"] .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; } html[data-hero="b"] .hero h1 { font-size: clamp(2.5rem, 6.5vw, 6rem); } html[data-hero="b"] .hero-schematic { display: none; } @media (max-width: 900px) { html[data-hero="b"] .hero-inner { grid-template-columns: 1fr; } html[data-hero="b"] .hero-terminal { display: none; } } .hero-terminal { display: none; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--bg-1); font-family: var(--font-mono); font-size: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.4); } html[data-hero="b"] .hero-terminal { display: block; } .hero-terminal .term-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: 11px; } .hero-terminal .term-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-3); } .hero-terminal .term-head .dot:nth-child(1) { background: #ff5f57; } .hero-terminal .term-head .dot:nth-child(2) { background: #febc2e; } .hero-terminal .term-head .dot:nth-child(3) { background: #28c840; } .hero-terminal .term-head .path { margin-left: 8px; color: var(--text-dim); } .hero-terminal .term-body { padding: 18px; color: var(--text-2); line-height: 1.7; min-height: 280px; } .hero-terminal .term-body .prompt { color: var(--accent); } .hero-terminal .term-body .arg { color: var(--tech-blue); } .hero-terminal .term-body .ok { color: var(--good); } .hero-terminal .term-body .dim { color: var(--text-faint); } /* hero variant — code editor frame (c) */ html[data-hero="c"] .hero { padding: 100px var(--gutter) 80px; } html[data-hero="c"] .hero-schematic { display: none; } html[data-hero="c"] .hero-inner { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--bg-1); overflow: hidden; } html[data-hero="c"] .hero-inner > .code-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; } html[data-hero="c"] .hero-inner > .code-head .tab { padding: 4px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px 4px 0 0; color: var(--text-2); border-bottom-color: var(--bg-1); position: relative; top: 1px; } html[data-hero="c"] .hero-inner > .code-head .tab::before { content: "● "; color: var(--accent); font-size: 9px; } html[data-hero="c"] .hero-inner > .code-body { display: grid; grid-template-columns: 56px 1fr; padding: 28px 0; } html[data-hero="c"] .hero-inner > .code-body > .gutter { font-family: var(--font-mono); font-size: 11px; text-align: right; color: var(--text-faint); padding: 12px 14px; line-height: 1.75; user-select: none; border-right: 1px solid var(--border); } html[data-hero="c"] .hero-inner > .code-body > .src { padding: 12px 32px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--text-2); overflow: hidden; } html[data-hero="c"] .hero-inner > .code-body > .src .com { color: var(--text-faint); } html[data-hero="c"] .hero-inner > .code-body > .src .kw { color: var(--accent); } html[data-hero="c"] .hero-inner > .code-body > .src .str { color: var(--tech-blue); } html[data-hero="c"] .hero-inner > .code-body > .src .lit { color: #c5b8ff; } html[data-hero="c"] .hero-inner > .code-body > .src h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 16px 0; } html[data-hero="c"] .hero-eyebrow, html[data-hero="c"] .hero-lede, html[data-hero="c"] .hero-badges, html[data-hero="c"] .hero-ctas { padding-left: 32px; padding-right: 32px; } html[data-hero="c"] .hero-ctas { padding-bottom: 32px; } /* ═════════════════════════════════════════════════════════════════════════ * STATS BAR — three big lime serifs * ═════════════════════════════════════════════════════════════════════════ */ .stats { padding: calc(100px * var(--density)) 0 calc(40px * var(--density)); position: relative; z-index: 2; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat { padding: 44px 32px; border-right: 1px solid var(--border); position: relative; } .stat:last-child { border-right: 0; } .stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .stat-label::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 6px var(--accent); } .stat-num { font-family: var(--font-serif); font-size: clamp(3.2rem, 6.5vw, 5rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin: 0 0 16px; font-variant-numeric: tabular-nums; } .stat-num em { font-family: var(--font-mono); font-style: normal; font-size: 0.4em; vertical-align: 0.5em; margin-left: 0.1em; color: var(--accent); opacity: 0.7; } .stat-num .unit { font-family: var(--font-sans); font-size: 0.34em; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 0.15em; } .stat-desc { font-family: var(--font-sans); font-size: 14px; color: var(--text-2); max-width: 30ch; line-height: 1.45; } @media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-right: 0; border-bottom: 1px solid var(--border); } .stat:last-child { border-bottom: 0; } } /* ═════════════════════════════════════════════════════════════════════════ * BUILDS — horizontal scroll rail * ═════════════════════════════════════════════════════════════════════════ */ .builds { padding-bottom: calc(40px * var(--density)); } /* ── subsection header (within builds) ─────────────────────────────── */ .builds-block + .builds-block { margin-top: calc(72px * var(--density)); } .sub-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 18px; margin-bottom: calc(28px * var(--density)); } .sub-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; } .sub-eyebrow::before { content: "▍ "; color: var(--accent); margin-right: 2px; } .sub-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; white-space: nowrap; } @media (max-width: 640px) { .sub-meta { display: none; } } .builds-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 380px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--gutter) 24px; margin: 0 calc(var(--gutter) * -1); scroll-padding-left: var(--gutter); } .builds-rail::-webkit-scrollbar { display: none; } .build-card { scroll-snap-align: start; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; position: relative; transition: border-color 0.25s, transform 0.25s; } .build-card:hover { border-color: var(--border-3); transform: translateY(-2px); } .build-card.flagship { background: linear-gradient(155deg, color-mix(in oklab, var(--accent) 5%, var(--bg-1)) 0%, var(--bg-1) 60%); border-color: color-mix(in oklab, var(--accent) 30%, var(--border-2)); } .build-card.flagship .id { color: var(--accent); opacity: 0.85; } .build-card.flagship p { color: var(--text-2); } .build-card.flagship p b { color: var(--accent); font-weight: 500; font-style: italic; font-family: var(--font-serif); font-size: 1.02em; } .build-card .id { position: absolute; top: 16px; right: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em; } .build-card .visual { height: 110px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); overflow: hidden; position: relative; margin-bottom: 4px; } .build-card h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.2; margin: 0; text-wrap: balance; } .build-card h3 em { font-style: italic; color: var(--text-2); } .build-card p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; text-wrap: pretty; flex: 1; } .build-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .build-card .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--tech-blue); } /* rail controls */ .rail-controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .rail-progress { flex: 1; height: 1px; background: var(--border); position: relative; overflow: hidden; } .rail-progress > i { position: absolute; left: 0; top: 0; height: 100%; width: 18%; background: var(--accent); transition: left 0.2s, width 0.2s; } .rail-btn { width: 34px; height: 34px; border: 1px solid var(--border-2); border-radius: 50%; background: transparent; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, border-color 0.2s, background 0.2s; } .rail-btn:hover { color: var(--accent); border-color: var(--accent); } .rail-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ═════════════════════════════════════════════════════════════════════════ * SERVICES — 2-col grid, first two featured * ═════════════════════════════════════════════════════════════════════════ */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 820px) { .services-grid { grid-template-columns: 1fr; } } .svc { position: relative; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px 30px 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.25s, transform 0.25s, background 0.25s; min-height: 240px; } .svc:hover { border-color: var(--border-3); transform: translateY(-2px); } .svc.featured { background: linear-gradient(155deg, color-mix(in oklab, var(--accent) 4%, var(--bg-1)) 0%, var(--bg-1) 60%); border-color: color-mix(in oklab, var(--accent) 28%, var(--border-2)); } .svc.featured::before { content: "FLAGSHIP"; position: absolute; top: 16px; right: 22px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--accent); } .svc.featured:nth-child(2)::before { content: "FEATURED"; } .svc-icon { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; display: flex; align-items: center; gap: 10px; } .svc-icon .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--border-2); border-radius: 4px; color: var(--accent); font-size: 10px; } .svc h3 { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 400; letter-spacing: -0.016em; line-height: 1.15; margin: 0; text-wrap: balance; } .svc h3 em { font-style: italic; color: var(--text-2); } .svc.featured h3 em { color: var(--accent); } .svc p { margin: 0; font-size: 14.5px; color: var(--text-dim); line-height: 1.5; flex: 1; text-wrap: pretty; } .svc-price { margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--border-2); font-family: var(--font-mono); font-size: 12px; color: var(--accent); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .svc-price .note { color: var(--text-faint); letter-spacing: 0.02em; } /* card style variants — set via data-cards on */ html[data-cards="filled"] .build-card, html[data-cards="filled"] .svc { background: var(--bg-2); border-color: var(--bg-3); } html[data-cards="filled"] .svc.featured { background: linear-gradient(155deg, color-mix(in oklab, var(--accent) 7%, var(--bg-2)) 0%, var(--bg-2) 70%); } html[data-cards="glow"] .build-card, html[data-cards="glow"] .svc { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-color: var(--border-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(0,0,0,0.4); } html[data-cards="glow"] .build-card:hover, html[data-cards="glow"] .svc:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent), 0 20px 40px rgba(0,0,0,0.4); } /* ═════════════════════════════════════════════════════════════════════════ * HOW IT WORKS — stacked steps * ═════════════════════════════════════════════════════════════════════════ */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: grid; grid-template-columns: 200px 1fr auto; align-items: baseline; padding: 36px 0; gap: 28px; border-top: 1px solid var(--border); transition: background 0.3s; } .step:last-child { border-bottom: 1px solid var(--border); } .step:hover { background: rgba(255,255,255,0.012); } .step-id { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 10px; } .step-id .n { font-family: var(--font-serif); font-size: 2rem; color: var(--text-faint); font-variant-numeric: tabular-nums; font-style: italic; } .step-body h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 400; letter-spacing: -0.014em; margin: 0 0 8px; line-height: 1.2; } .step-body h3 em { font-style: italic; color: var(--accent); } .step-body p { margin: 0; font-size: 15px; color: var(--text-dim); line-height: 1.55; max-width: 56ch; text-wrap: pretty; } .step-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; align-self: center; white-space: nowrap; } @media (max-width: 820px) { .step { grid-template-columns: 1fr; gap: 10px; } .step-meta { display: none; } } /* ═════════════════════════════════════════════════════════════════════════ * TECH — pill cloud * ═════════════════════════════════════════════════════════════════════════ */ .tech-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .tech-pill { font-family: var(--font-mono); font-size: 12px; padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--tech-blue); background: rgba(255,255,255,0.012); display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.2s, color 0.2s, background 0.2s; } .tech-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tech-blue); opacity: 0.65; } .tech-pill:hover { border-color: var(--accent); color: var(--accent); } .tech-pill:hover::before { background: var(--accent); opacity: 1; } /* ═════════════════════════════════════════════════════════════════════════ * INTAKE FORM — two-step * ═════════════════════════════════════════════════════════════════════════ */ .intake-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } @media (max-width: 900px) { .intake-wrap { grid-template-columns: 1fr; gap: 32px; } } .intake-side { position: sticky; top: 96px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); line-height: 1.7; } .intake-side h3 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.016em; color: var(--text); margin: 0 0 20px; line-height: 1.2; } .intake-side h3 em { font-style: italic; color: var(--accent); } .intake-side ul { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--border); } .intake-side ul li { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .intake-side ul li::before { content: "✓"; color: var(--accent); font-size: 13px; } .intake-side ul li code { color: var(--text-faint); font-size: 11px; margin-left: auto; } .intake-form { background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 32px; position: relative; overflow: hidden; } .intake-form::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 2px; background: var(--accent); } .form-step-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .form-step-label .step-pos { color: var(--accent); } .form-step-label .arrow { color: var(--text-faint); } .form-step-label .title { color: var(--text-2); } .intake-form h2 { font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: -0.018em; margin: 0 0 28px; line-height: 1.15; } .intake-form h2 em { font-style: italic; color: var(--accent); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 8px; } .field label .req { color: var(--accent); } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; background: var(--bg-0); border: 1px solid var(--border-2); border-radius: var(--r); color: var(--text); font-family: var(--font-sans); font-size: 14px; transition: border-color 0.15s, background 0.15s; } .field textarea { min-height: 100px; resize: vertical; font-family: var(--font-sans); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); font-family: var(--font-mono); font-size: 12.5px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--bg-2); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .budget-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .budget-pills label { text-transform: none; letter-spacing: 0.02em; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--text-dim); cursor: pointer; font-family: var(--font-mono); font-size: 12px; transition: all 0.15s; } .budget-pills input { display: none; } .budget-pills input:checked + span, .budget-pills label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); } .budget-pills label:hover { color: var(--text); border-color: var(--border-3); } .form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; gap: 16px; flex-wrap: wrap; } .form-foot .small { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; } /* success state */ .intake-success { text-align: left; padding: 8px 4px; } .intake-success .check { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-size: 22px; margin-bottom: 22px; } .intake-success h2 { margin-bottom: 16px; } .intake-success p { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 44ch; margin: 0 0 28px; } .intake-success .summary { background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin: 0 0 28px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); line-height: 1.6; } .intake-success .summary b { color: var(--accent); font-weight: 500; } /* ═════════════════════════════════════════════════════════════════════════ * FOOTER * ═════════════════════════════════════════════════════════════════════════ */ .footer { padding: 100px var(--gutter) 80px; border-top: 1px solid var(--border); margin-top: 80px; position: relative; z-index: 2; } .footer-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); } .footer-name { font-family: var(--font-serif); font-size: 1.4rem; color: var(--text); letter-spacing: -0.012em; display: inline-flex; align-items: center; gap: 14px; } .footer-name em { font-style: italic; color: var(--accent); } .footer-mark { width: 30px; height: 30px; flex-shrink: 0; } .footer-end { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.08em; } .footer-top { transition: color 0.2s, transform 0.2s; cursor: pointer; } .footer-top:hover { color: var(--accent); transform: translateY(-1px); } .footer .divider { width: 100%; margin: 28px 0; border: 0; border-top: 1px dashed var(--border); } /* ── density variants ─────────────────────────────────────────────────────── */ html[data-density="compact"] { --density: 0.82; } html[data-density="airy"] { --density: 1.2; } /* motion intensity */ html[data-motion="none"] { --motion: 0; } html[data-motion="none"] .hero h1 .cursor, html[data-motion="none"] .live-feed-track, html[data-motion="none"] .topbar .status::before, html[data-motion="none"] .hero-schematic .pulse-anim { animation: none !important; } html[data-motion="subtle"] { --motion: 0.55; } /* ── mobile tweaks ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { :root { --gutter: 20px; } .topbar { font-size: 10px; } .hero h1 { font-size: clamp(2.6rem, 13vw, 4.4rem); } .hero { padding: 100px 20px 110px; } .stat { padding: 30px 22px; } .build-card { min-height: 320px; } .builds-rail { grid-auto-columns: 84vw; } .intake-form { padding: 22px; } .field-row { grid-template-columns: 1fr; } }