/* brew-chai.css — Swiss / blueprint identity (rewritten from claude design handoff) * * Pulled from the brew-chai-reimagined design package, Swiss direction only. * Applied across the four brew-chai pages: index, how-it-works, commands, pricing. * * Visual identity: * palette — near-white bg, near-black ink, ultramarine blue accent (#0033cc) * with crimson red as secondary (#cc0000); positive green (#007a3d) * typography — Archivo Narrow display (uppercase), IBM Plex Sans body, * IBM Plex Mono for code/eyebrow * structure — tight grid, 2px ink top borders on sections, square corners, * uppercase H1/H2/H3, cards with full ink borders + thick coloured * top accent (6px on cards, 8px on tier cards) * * Last updated: 2026-05-06 */ /* === BASE RESET (scoped to brew-chai pages via .bc-page on ) === */ .bc-page * { box-sizing: border-box; margin: 0; padding: 0; } html:has(body.bc-page), body.bc-page { min-height: 100vh; } /* === SWISS TOKENS — applied via [data-product="brew-chai"] === */ [data-product="brew-chai"] { --bg: #fbfbfb; --bg-elev: #ffffff; --bg-elev-2: #f0f0f0; --ink: #0a0a0a; --ink-mute: #5a5a5a; --ink-faint: #9a9a9a; --rule: rgba(0, 0, 0, 0.18); --rule-strong: rgba(0, 0, 0, 0.78); --accent: #0033cc; --accent-2: #cc0000; --accent-3: #0a0a0a; --paper: #fbfbfb; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-display: "Archivo Narrow", "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-eyebrow: "IBM Plex Mono", monospace; --base-size: 15px; --terminal-bg: #0a0a0a; --terminal-ink: #fbfbfb; --terminal-mute: #888; --ok: #007a3d; --warn: #cc0000; --info: #0033cc; } /* === BODY / DEFAULTS === */ body.bc-page { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: var(--base-size); line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .bc-page img, .bc-page svg { display: block; max-width: 100%; } /* === SHELL === */ .bc-shell { min-height: 100vh; display: flex; flex-direction: column; } /* === NAV === */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; border-bottom: 2px solid var(--rule-strong); background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--font-eyebrow); font-size: 13px; } .nav-mark { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } .nav-links { display: flex; gap: 28px; } .nav-link { color: var(--ink-mute); text-decoration: none; cursor: pointer; padding: 4px 0; white-space: nowrap; border-bottom: 1px solid transparent; transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1); text-transform: lowercase; font-family: var(--font-mono); font-size: 13px; } .nav-link:hover, .nav-link:active, .nav-link:focus-visible, .nav-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a.nav-cta { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; padding: 9px 16px; background: var(--accent); color: #fff; text-decoration: none; border: 1px solid var(--accent); display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.06em; transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1); } a.nav-cta:hover, a.nav-cta:active, a.nav-cta:focus-visible { background: transparent; color: var(--accent); } .btn-arr { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; } .nav-cta:hover .btn-arr, .nav-cta:active .btn-arr, .nav-cta:focus-visible .btn-arr { transform: translateX(4px); } /* === LAYOUT === */ .page { flex: 1; max-width: 1240px; margin: 0 auto; padding: 0 32px; width: 100%; } .section { padding: 96px 0; border-top: 2px solid var(--rule-strong); } .section:first-child { border-top: 0; padding-top: 80px; } /* === EYEBROW === */ .eyebrow { font-family: var(--font-eyebrow); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; display: block; } /* === HEADINGS === */ .h1, .h2, .h3 { font-family: var(--font-display); color: var(--ink); text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.05; } .h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 800; } .h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: 0; margin-bottom: 28px; max-width: 24ch; } .h3 { font-size: 18px; font-weight: 700; font-family: var(--font-display); line-height: 1.25; } .body-text { color: var(--ink-mute); font-size: 16px; line-height: 1.6; max-width: 56ch; } /* === HERO === */ .hero { padding: 120px 0 80px; } .hero-headline { margin-bottom: 48px; max-width: 18ch; } .hero-typed-row { display: block; min-height: 1em; } .typed-word { color: var(--accent); } .cursor { display: inline-block; width: 0.55em; height: 0.85em; background: var(--accent); margin-left: 4px; vertical-align: -0.05em; animation: bc-blink 1.05s steps(2) infinite; } @keyframes bc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Reduced-motion fallback for typewriter */ .typed-fallback { display: none; color: var(--ink-mute); font-size: 0.65em; text-transform: none; letter-spacing: -0.005em; font-weight: 400; } @media (prefers-reduced-motion: reduce) { #bc-typewriter, .cursor { display: none; } .typed-fallback { display: inline; } } .hero-sub { font-family: var(--font-body); color: var(--ink-mute); font-size: clamp(17px, 1.6vw, 20px); max-width: 56ch; line-height: 1.55; margin: 36px 0 0; } .hero-sub code, .inline-code { font-family: var(--font-mono); color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); padding: 0.1em 0.4em; font-size: 0.9em; } /* === CTAS === */ .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 22px; text-decoration: none; border: 1px solid transparent; cursor: pointer; border-radius: 0; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .btn:hover .btn-arr, .btn:active .btn-arr, .btn:focus-visible .btn-arr { transform: translateX(4px); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background: transparent; color: var(--accent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus-visible { border-color: var(--accent); color: var(--accent); } .install-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin-top: 24px; line-height: 1.7; } .install-meta code { color: var(--ink-mute); font-family: inherit; background: transparent; padding: 0; } /* === GRIDS === */ .grid-3 { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 800px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .grid-2 { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 32px; } } .grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* === CARDS === */ .card { background: var(--bg-elev); border: 1px solid var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .card-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; letter-spacing: 0.16em; } .card-title { font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; font-family: var(--font-display); } .card-body { font-size: 15px; line-height: 1.55; color: var(--ink-mute); } .card-accented { border-top: 6px solid var(--accent); } .card-accented-l { border-left: 3px solid var(--accent); } /* === TERMINAL === */ .term { background: var(--terminal-bg); color: var(--terminal-ink); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; padding: 0; overflow: hidden; border: 1px solid var(--rule-strong); box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.55); } .term-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); } .term-dots { display: flex; gap: 7px; } .term-dots span { width: 10px; height: 10px; border-radius: 0; background: rgba(255,255,255,0.18); display: inline-block; } .term-meta { font-size: 11px; color: var(--terminal-mute); letter-spacing: 0.04em; } .term-screen { padding: 22px 24px; font-size: 12.5px; line-height: 1.75; white-space: pre; overflow-x: auto; font-variant-ligatures: none; min-height: 24em; } /* Reset block styles that leak in from the PR-card .pr class — terminal tokens are inline color-only spans. */ .term-screen .pr, .term-screen .ok, .term-screen .ac, .term-screen .mu, .term-screen .lb, .term-screen .wn { background: transparent; border: 0; padding: 0; margin: 0; display: inline; font: inherit; } .term-screen .pr { color: #6dd58c; } .term-screen .ok { color: #6dd58c; } .term-screen .ac { color: #87a9ff; } .term-screen .mu { color: var(--terminal-mute); } .term-screen .lb { color: #87a9ff; } .term-screen .wn { color: #ff8a8a; } .term-cursor { display: inline-block; width: 0.5em; height: 1em; background: var(--terminal-ink); vertical-align: -0.1em; margin-left: 4px; animation: bc-blink 1.05s steps(2) infinite; } /* === FIT (yes/no columns) === */ .fit-col { padding: 28px 26px; background: var(--bg-elev); border: 1px solid var(--ink); } .fit-col.is-yes { border-top: 6px solid var(--ok); } .fit-col.is-no { border-top: 6px solid var(--rule-strong); opacity: 0.85; } .fit-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .fit-list li { padding-left: 26px; position: relative; font-size: 16px; line-height: 1.5; } .fit-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-family: var(--font-mono); font-weight: 600; } .fit-col.is-no .fit-list li::before { content: "—"; color: var(--ink-faint); } .fit-col.is-no .fit-list li { color: var(--ink-mute); } .fit-label { font-family: var(--font-eyebrow); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); margin-bottom: 14px; display: block; } .fit-col.is-no .fit-label { color: var(--ink-faint); } /* === PR CARD === */ .pr { background: var(--bg-elev); border: 1px solid var(--ink); border-top: 6px solid var(--ok); padding: 24px 26px; } .pr-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; } .pr-tag { font-family: var(--font-mono); font-size: 11px; color: var(--ok); background: color-mix(in oklab, var(--ok) 18%, transparent); padding: 3px 10px; letter-spacing: 0.06em; text-transform: uppercase; } .pr-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .pr-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; flex-basis: 100%; line-height: 1.25; letter-spacing: -0.01em; } .pr-stats { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-bottom: 14px; } .pr-stats strong { color: var(--ink); font-weight: 600; } .pr-checks { list-style: none; display: flex; flex-direction: column; gap: 8px; } .pr-checks li { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); padding-left: 22px; position: relative; line-height: 1.45; } .pr-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); } .pr-checks li strong { color: var(--ink); font-weight: 600; } /* === PIPELINE PHASES === */ .phase { background: #fff; border: 1px solid var(--ink); border-top: 6px solid var(--accent); padding: 16px 18px; } .phase-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.14em; display: block; margin-bottom: 4px; } .phase-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; letter-spacing: -0.005em; } .phase-desc { font-size: 13px; color: var(--ink-mute); line-height: 1.45; } /* === SAFE / SECURITY CARD === */ .safe-card { background: var(--bg-elev); border: 1px solid var(--ink); border-top: 6px solid var(--info); padding: 36px 32px; } .safe-list { list-style: none; display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; } @media (min-width: 760px) { .safe-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } } .safe-list li { font-size: 15px; line-height: 1.5; padding-left: 24px; position: relative; } .safe-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--info); font-family: var(--font-mono); font-weight: 600; } .safe-list li strong { display: block; margin-bottom: 4px; font-weight: 600; } .safe-list li small { display: block; color: var(--ink-faint); font-size: 13.5px; line-height: 1.45; } /* === COVERAGE CARD === */ .cov-card { background: var(--bg-elev); border: 1px solid var(--ink); border-top: 6px solid var(--ok); padding: 26px 26px 28px; } .cov-row { display: grid; grid-template-columns: 7rem 1fr 4rem; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); } .cov-row:first-of-type { border-top-color: var(--rule-strong); } .cov-label { font-family: var(--font-mono); font-size: 13px; color: var(--ink); } .cov-bar { height: 6px; background: var(--bg-elev-2); position: relative; } .cov-bar i { display: block; height: 100%; background: var(--ok); } @keyframes bc-fill { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: no-preference) { .cov-bar i { animation: bc-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) both; } } .cov-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ok); text-align: right; } .cov-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 14px; letter-spacing: 0.04em; } /* === TIERS === */ .tier { background: #fff; border: 1px solid var(--ink); border-top: 8px solid var(--ok); padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 14px; position: relative; } .tier.is-free { border-top-color: var(--ok); } .tier.is-pro { border-top-color: var(--accent); } .tier.is-teams { border-top-color: var(--info); } .tier-pill { position: absolute; top: -16px; left: 24px; font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; background: var(--accent); color: #fff; letter-spacing: 0.06em; text-transform: uppercase; } .tier-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; } .tier-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; } .tier-price { font-family: var(--font-mono); font-size: 32px; font-weight: 600; } .tier.is-free .tier-price { color: var(--ok); } .tier.is-pro .tier-price { color: var(--accent); } .tier.is-teams .tier-price { color: var(--info); } .tier-price small { font-size: 12px; color: var(--ink-faint); margin-left: 6px; letter-spacing: 0.04em; } .tier-tag { font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); } .tier-list { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-top: 8px; } .tier-list li { font-size: 14px; line-height: 1.5; padding-left: 22px; position: relative; word-break: break-word; } .tier-list li::before { content: "✓"; position: absolute; left: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ok); } .tier.is-pro .tier-list li::before { color: var(--accent); } .tier.is-teams .tier-list li::before { color: var(--info); } .tier-list li code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); background: transparent; padding: 0; } .tier-cta { margin-top: 20px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; padding: 13px 18px; text-decoration: none; border: 1px solid var(--rule-strong); cursor: pointer; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .tier-cta:hover .btn-arr, .tier-cta:active .btn-arr, .tier-cta:focus-visible .btn-arr { transform: translateX(4px); } .tier.is-pro .tier-cta { background: var(--accent); color: #fff; border-color: var(--accent); } .tier.is-pro .tier-cta:hover, .tier.is-pro .tier-cta:active, .tier.is-pro .tier-cta:focus-visible { background: transparent; color: var(--accent); } .tier.is-free .tier-cta:hover, .tier.is-free .tier-cta:active, .tier.is-free .tier-cta:focus-visible { color: var(--ok); border-color: var(--ok); } .tier.is-teams .tier-cta:hover, .tier.is-teams .tier-cta:active, .tier.is-teams .tier-cta:focus-visible { color: var(--info); border-color: var(--info); } /* === COMPARE TABLE === */ .compare { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14.5px; margin-top: 36px; } .compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; } .compare th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); font-weight: 500; border-bottom: 2px solid var(--rule-strong); } .compare td:first-child { color: var(--ink-mute); } .compare td.yes { color: var(--ok); font-weight: 600; } .compare td.no { color: var(--ink-faint); } /* === HOW-IT-WORKS STEPS === */ .how-step { display: grid; gap: 24px; grid-template-columns: 1fr; padding: 56px 0; border-top: 1px solid var(--rule); } @media (min-width: 880px) { .how-step { grid-template-columns: 7rem 1fr 1.2fr; gap: 48px; align-items: start; } } .how-num { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--accent); letter-spacing: -0.025em; line-height: 1; } .how-text h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 12px; } .how-text p { color: var(--ink-mute); font-size: 16px; line-height: 1.6; max-width: 50ch; } /* === COMMANDS === */ .cmd-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 760px) { .cmd-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } .cmd { background: var(--bg-elev); border: 1px solid var(--ink); border-left: 4px solid var(--accent); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); } .cmd-name { font-size: 16px; font-weight: 600; color: var(--accent); } .cmd-desc { font-family: var(--font-body); color: var(--ink-mute); font-size: 14.5px; line-height: 1.5; } .cmd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .cmd-tag { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; background: var(--bg-elev-2); color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--rule); } .cmd-tag.is-free { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); } .cmd-tag.is-pro { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); } .cmd-group-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 56px 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--rule-strong); } /* === ASIDE === */ .aside-card { border-left: 3px solid var(--accent); padding: 8px 0 8px 24px; max-width: 60ch; } .aside-line { font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); line-height: 1.65; } .aside-line strong { color: var(--ink); font-weight: 600; } .aside-line em { color: var(--accent); font-style: normal; } /* === CLOSING === */ .closing { text-align: center; padding-bottom: 80px !important; } .closing .h2 { margin: 0 auto 32px; max-width: 32ch; } .closing .cta-row { justify-content: center; } .closing .em { color: var(--accent); font-style: normal; } /* === FOOTER === */ .footer { border-top: 2px solid var(--rule-strong); padding: 48px 32px 64px; display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 64px; } @media (min-width: 720px) { .footer { grid-template-columns: 2fr 1fr 1fr; } } .footer-attr { font-size: 14px; color: var(--ink-mute); max-width: 30ch; line-height: 1.55; } .footer-attr a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); } .footer-attr a:hover, .footer-attr a:active, .footer-attr a:focus-visible { color: var(--accent); } .footer-col h4 { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; font-weight: 500; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer-col a { color: var(--ink-mute); font-family: var(--font-mono); font-size: 13px; text-decoration: none; cursor: pointer; } .footer-col a:hover, .footer-col a:active, .footer-col a:focus-visible { color: var(--accent); } /* === ACCESSIBILITY === */ .skip { position: absolute; top: -40px; left: 0; background: var(--accent); color: #fff; padding: 0.5rem 1rem; font-weight: 600; z-index: 100; text-decoration: none; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .skip:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === PAGE FADE === */ @keyframes bc-fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .page-fade { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .page-fade { animation: bc-fadeUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both; } } /* === RESPONSIVE === */ @media (max-width: 800px) { .grid-3 { gap: 32px; } } @media (max-width: 720px) { .nav { padding: 14px 18px; position: relative; } .nav-links { display: none; } .page { padding: 0 20px; } .section { padding: 56px 0; } .section:first-child { padding-top: 48px; } .footer { padding: 32px 20px 48px; } /* Hero padding */ .hero { padding: 64px 0 48px; } /* Terminal sizing */ .term-screen { min-height: 16em; } /* Safe card padding */ .safe-card { padding: 24px 18px; } /* Install command overflow */ .install-meta { overflow-wrap: break-word; } .install-meta code { word-break: break-all; } /* Hero code overflow */ .hero-sub code, .inline-code { overflow-wrap: anywhere; } /* Footer touch targets */ .footer-col a { padding: 4px 0; display: inline-block; } .footer-col ul { gap: 4px; } /* Small text bumps */ .eyebrow { font-size: 12px; } .term-meta { font-size: 12px; } .phase-num { font-size: 11.5px; } .cov-foot { font-size: 12px; } .cmd-tag { font-size: 12px; padding: 4px 10px; } /* Comparison table mobile */ .compare { font-size: 13px; } .compare th, .compare td { padding: 10px 8px; } } /* Extra-small screen fixes */ @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } .cov-row { grid-template-columns: 5.5rem 1fr 3.5rem; gap: 10px; } } @media (max-width: 380px) { .nav { flex-wrap: wrap; gap: 8px; } .nav-mark { font-size: 13px; } }