/* ============================================================ site.css — shared portfolio styles Canonical home: email-dev.com/portfolio/assets/css/site.css Reused by the hub (index.html) and every case page. Per-page brand accent: set on . Per-card brand accent on the hub: inline on .case-thumb. ============================================================ */ :root { /* ---- Shared neutrals (lifted from the email's dark-mode tokens) ---- */ --ink: #0f1115; --panel: #1a1d24; --panel-2: #14171d; --line: #2a2e38; --text: #f4f5f7; --muted: #b4b8c2; --faint: #7a8192; /* ---- Brand accent (DEFAULT; pages/cards override) ---- */ --grad: linear-gradient(135deg, #3a1c71 0%, #d76d77 55%, #ffaf7b 100%); --coral: #e08a8f; --coral-strong: #d76d77; /* ---- Type ---- */ --display: 'Space Grotesk', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- Layout ---- */ --maxw: 920px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--coral); text-decoration: none; } a:hover { color: #fff; } :focus-visible { outline: 2px solid var(--coral-strong); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- TOP BAR ---------- */ .topbar { position: sticky; top: 0; z-index: 10; background: rgba(15,17,21,0.82); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: flex; align-items: baseline; gap: 12px; } .brand .mark { font-family: var(--display); font-weight: 700; letter-spacing: 5px; font-size: 18px; color: var(--text); } .brand .role { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); } .topnav { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; } .topnav a { color: var(--muted); } .topnav a:hover { color: #fff; } .topnav .arr { color: var(--coral-strong); } /* ---------- HERO (case page) ---------- */ .hero { padding: 88px 0 64px; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--coral-strong); margin: 0 0 22px; } h1 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 7vw, 68px); line-height: 1.02; letter-spacing: -1.5px; margin: 0 0 22px; } .lede { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.55; color: var(--muted); max-width: 620px; margin: 0 0 32px; } .lede strong { color: var(--text); font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 36px; } .chip { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3px; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; background: var(--panel-2); } .actions { display: flex; flex-wrap: wrap; gap: 14px; } .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 8px; transition: transform .15s ease, filter .15s ease; } .btn-primary { background-image: var(--grad); color: #16101f; } .btn-primary:hover { filter: brightness(1.08); color: #16101f; } .btn-ghost { border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--coral-strong); color: #fff; } .btn:active { transform: translateY(1px); } /* ---------- SECTIONS ---------- */ section { padding: 56px 0; border-top: 1px solid var(--line); } .hero, .intro, .cases { border-top: none; } .sec-label { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; } h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -0.5px; margin: 0 0 18px; line-height: 1.12; } .sec-intro { color: var(--muted); max-width: 640px; margin: 0 0 8px; } .sec-intro strong { color: var(--text); font-weight: 600; } /* ---------- FAULT CARDS (case page) ---------- */ .faults { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; } .fault { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px 26px 32px; } .fault::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-image: var(--grad); } .fault .tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--coral); border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; margin: 0 0 16px; } .fault h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 18px; letter-spacing: -0.3px; } .qa { margin: 0 0 14px; } .qa .k { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); display: block; margin: 0 0 4px; } .qa p { margin: 0; color: var(--muted); } .qa.fix p { color: var(--text); } .qa code, .inline-code { font-family: var(--mono); font-size: 0.86em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--coral); } pre { margin: 18px 0 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: #d7dbe4; } pre .c { color: var(--faint); } pre .t { color: var(--coral); } /* ---------- PROOF GRID (case page) ---------- .shot is a