/* SpecSell website — design system with 3 switchable brand themes (A/B/C). Theme is set via . Switcher = internal preview only. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ---------- THEMES ---------- */ :root, html[data-theme="a"]{ --bg:#F8FAFC; --surface:#FFFFFF; --ink:#0f172a; --text:#1e293b; --muted:#475569; --soft:#64748b; --brand:#0F2A47; --brand-contrast:#FFFFFF; --accent:#C18B2C; --accent-ink:#7a5417; --border:#E2E8F0; --border-strong:#CBD5E1; --tint:#EEF3F8; --ok:#15803D; --hfont:'Inter',sans-serif; --bfont:'Inter',sans-serif; --hero-bg:linear-gradient(160deg,#0F2A47 0%,#163a5f 100%); --hero-ink:#FFFFFF; --hero-muted:#C7D2DE; --btn-bg:#C18B2C; --btn-ink:#FFFFFF; --btn2-bg:transparent; --btn2-ink:#0F2A47; --btn2-border:#0F2A47; --card-shadow:0 1px 3px rgba(15,42,71,.06); } html[data-theme="b"]{ --bg:#F5F7FA; --surface:#FFFFFF; --ink:#0A1C3F; --text:#1e2a44; --muted:#44526b; --soft:#64748b; --brand:#0B3A8C; --brand-contrast:#FFFFFF; --accent:#0891B2; --accent-ink:#065f73; --border:#D5DEE9; --border-strong:#B9C6D6; --tint:#EBF1F8; --ok:#15803D; --hfont:'IBM Plex Sans',sans-serif; --bfont:'IBM Plex Sans',sans-serif; --hero-bg:linear-gradient(160deg,#0A1C3F 0%,#0B3A8C 100%); --hero-ink:#FFFFFF; --hero-muted:#B9C9E4; --btn-bg:#0891B2; --btn-ink:#FFFFFF; --btn2-bg:transparent; --btn2-ink:#0B3A8C; --btn2-border:#0B3A8C; --card-shadow:0 1px 3px rgba(10,28,63,.07); } html[data-theme="c"]{ --bg:#0B1220; --surface:#111A2C; --ink:#F1F5F9; --text:#DBE3EE; --muted:#94A3B8; --soft:#7C8CA3; --brand:#F1F5F9; --brand-contrast:#0B1220; --accent:#84CC16; --accent-ink:#a3e635; --border:#1E293B; --border-strong:#2C3B52; --tint:#0F1930; --ok:#4ADE80; --hfont:'Space Grotesk',sans-serif; --bfont:'Inter',sans-serif; --hero-bg:radial-gradient(1200px 500px at 70% -10%,rgba(6,182,212,.25),transparent),linear-gradient(160deg,#0B1220 0%,#0E1A30 100%); --hero-ink:#F1F5F9; --hero-muted:#94A3B8; --btn-bg:linear-gradient(135deg,#06B6D4,#84CC16); --btn-ink:#06202A; --btn2-bg:transparent; --btn2-ink:#E2E8F0; --btn2-border:#3B4C66; --card-shadow:0 1px 3px rgba(0,0,0,.3); } /* ---------- BASE ---------- */ body{font-family:var(--bfont);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--hfont);color:var(--ink);letter-spacing:-.015em} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ---------- HEADER ---------- */ header.site{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)} header.site .bar{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{display:flex;align-items:center;gap:10px;font-family:var(--hfont);font-weight:800;font-size:1.15rem;color:var(--ink)} .logo .mk{width:30px;height:30px} .logo .mk-a,.logo .mk-b,.logo .mk-c{display:none} html[data-theme="a"] .logo .mk-a{display:block} html[data-theme="b"] .logo .mk-b{display:block} html[data-theme="c"] .logo .mk-c{display:block} html[data-theme="a"] .logo .l2{color:var(--accent)} nav.main{display:flex;gap:26px;font-size:.86rem;font-weight:600;color:var(--muted)} nav.main a:hover{color:var(--ink)} nav.main a.active{color:var(--ink)} .cta-top{font-size:.82rem;font-weight:700;padding:9px 16px;border-radius:9px;background:var(--btn-bg);color:var(--btn-ink)} @media(max-width:860px){nav.main{display:none}} /* ---------- HERO ---------- */ .hero{background:var(--hero-bg);color:var(--hero-ink);padding:88px 0 72px;position:relative;overflow:hidden} .hero h1{color:var(--hero-ink);font-size:clamp(2rem,4.6vw,3.15rem);font-weight:800;max-width:820px;line-height:1.12} .hero p.lead{color:var(--hero-muted);font-size:1.08rem;max-width:640px;margin:18px 0 30px} .hero .badge{display:inline-block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent-ink);background:rgba(255,255,255,.92);padding:6px 14px;border-radius:100px;margin-bottom:22px} html[data-theme="c"] .hero .badge{background:rgba(132,204,22,.12);color:#a3e635;border:1px solid rgba(132,204,22,.3)} .btnrow{display:flex;gap:14px;flex-wrap:wrap} .btn{display:inline-block;font-weight:700;font-size:.92rem;padding:13px 26px;border-radius:11px;background:var(--btn-bg);color:var(--btn-ink);border:2px solid transparent} .btn.ghost{background:var(--btn2-bg);color:#fff;border-color:rgba(255,255,255,.4)} html[data-theme="c"] .btn.ghost{border-color:var(--btn2-border);color:var(--btn2-ink)} /* ---------- SECTIONS ---------- */ section{padding:64px 0} section.tinted{background:var(--tint)} .kicker{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--accent-ink);margin-bottom:10px} html[data-theme="c"] .kicker{color:var(--accent)} h2.sec{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;margin-bottom:14px;max-width:760px} p.secsub{color:var(--muted);max-width:680px;margin-bottom:34px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:900px){.grid3,.grid4,.grid2{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--card-shadow)} .card h3{font-size:1.02rem;font-weight:800;margin-bottom:8px} .card p{font-size:.88rem;color:var(--muted)} .card .num{font-family:var(--hfont);font-size:.72rem;font-weight:800;color:var(--accent-ink);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px} html[data-theme="c"] .card .num{color:var(--accent)} .doctrine{border-left:4px solid var(--accent);background:var(--surface);border-radius:0 14px 14px 0;padding:26px 30px} .doctrine .line{font-family:var(--hfont);font-size:1.25rem;font-weight:800;color:var(--ink)} .doctrine p{color:var(--muted);font-size:.9rem;margin-top:10px} .proof{display:flex;gap:40px;flex-wrap:wrap;align-items:center} .proof .stat b{display:block;font-family:var(--hfont);font-size:1.7rem;font-weight:800;color:var(--ink)} .proof .stat span{font-size:.78rem;color:var(--muted)} table.simple{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} table.simple th{background:var(--tint);text-align:left;padding:11px 16px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} table.simple td{padding:12px 16px;border-top:1px solid var(--border);vertical-align:top} table.simple td:first-child{font-weight:700;color:var(--ink);white-space:nowrap} .bigcta{background:var(--hero-bg);border-radius:22px;color:var(--hero-ink);padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .bigcta h2{color:var(--hero-ink);font-size:1.5rem;font-weight:800;max-width:560px} .bigcta p{color:var(--hero-muted);font-size:.92rem;margin-top:8px;max-width:560px} /* ---------- FOOTER ---------- */ footer.site{border-top:1px solid var(--border);background:var(--surface);padding:44px 0 32px;margin-top:20px} footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;font-size:.84rem} @media(max-width:800px){footer.site .cols{grid-template-columns:1fr 1fr}} footer.site h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:12px} footer.site a{display:block;color:var(--muted);margin:6px 0} footer.site a:hover{color:var(--ink)} footer.site .fine{margin-top:30px;padding-top:18px;border-top:1px solid var(--border);font-size:.74rem;color:var(--soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* ---------- THEME SWITCHER (internal preview) ---------- */ .themesw{position:fixed;bottom:18px;right:18px;z-index:99;background:var(--surface);border:1px solid var(--border-strong);border-radius:100px;padding:7px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 18px rgba(0,0,0,.18);font-size:.72rem;color:var(--muted)} .themesw button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;font-weight:800;font-size:.75rem;cursor:pointer;color:#fff} .themesw button.a{background:#0F2A47}.themesw button.b{background:#0B3A8C}.themesw button.c{background:linear-gradient(135deg,#06B6D4,#84CC16);color:#06202A} .themesw button.on{border-color:#F59E0B;transform:scale(1.12)} .themesw .lbl{max-width:120px;line-height:1.2} /* ========================================================================== PORTFOLIO REDESIGN (2026-08-02) — appended styles only. Everything above this line is the original design system: do not edit it. ========================================================================== */ /* ---------- NIGHT HERO (index.html only — validated Sphere-World mockup) ---------- */ .hero-night{background:linear-gradient(135deg,#081A2D,#0F2A47);color:#fff} .hero-night .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:36px;align-items:center} .hero-night .kicker{color:#C18B2C;margin-bottom:14px} .hero-night h1{color:#fff;font-size:clamp(2rem,4.2vw,3rem)} .hero-night p.lead{color:#cbd5e1} .hero-night .sphere-slot{min-width:0} .hero-night canvas{display:block;width:100%;height:460px} @media(max-width:860px){ .hero-night .wrap{grid-template-columns:1fr;gap:8px} .hero-night canvas{height:320px} } /* ---------- AI-SPECTRUM LEGEND ---------- */ .spectrum{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .spectrum span{font-size:.8rem;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:7px 16px} .spectrum .sym-digital{color:#64748b} .spectrum .sym-hybrid{color:#0F2A47} .spectrum .sym-agents{color:#C18B2C} /* ---------- PORTFOLIO GRID ---------- */ .pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px} .pf-card{border:1px solid var(--border);border-radius:12px;padding:20px;display:block;transition:border-color .15s,transform .15s;background:var(--surface);box-shadow:var(--card-shadow)} .pf-card:hover{border-color:var(--gold,#C18B2C);transform:translateY(-2px)} .pf-card h3{font-size:1rem;font-weight:800;margin:12px 0 8px} .pf-card p{font-size:.86rem;color:var(--muted)} .pf-badges{display:flex;gap:8px;flex-wrap:wrap} .pf-ai,.pf-state{font-size:.68rem;font-weight:700;border-radius:4px;padding:2px 8px} .pf-ai-digital{background:#64748b;color:#fff}.pf-ai-hybrid{background:#0F2A47;color:#fff}.pf-ai-agents{background:#C18B2C;color:#fff} .pf-ai-spectrum{background:linear-gradient(90deg,#64748b,#0F2A47 55%,#C18B2C);color:#fff} .pf-state-live{background:#15803d;color:#fff}.pf-state-proven{background:#1e40af;color:#fff}.pf-state-indev{background:#92400e;color:#fff} .pf-card.pf-ghost{border-style:dashed;color:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700;min-height:130px;background:transparent;box-shadow:none} /* ---------- SOLUTIONS HUB (solutions.html) ---------- */ .pf-section .pf-badges{margin-bottom:16px} .pf-section p{max-width:760px;margin-bottom:14px} .pf-section p.pf-problem,.pf-section p.pf-why{color:var(--muted)} .pf-section p.pf-proof{font-size:.85rem;color:var(--soft);border-left:3px solid var(--accent);padding-left:14px} .pf-section p:last-child{margin-bottom:0;margin-top:22px} /* ========================================================================== ========================================================================== DEEP NIGHT LAYER (2026-08-03) — decision D6, full-site dark design system. Direction 2 of _mockups/design-directions_2026-08-02.html, chosen by Marwan. Everything below OVERRIDES the light charte above (kept intact for history). Single-theme site: dark always, whatever data-theme says. Tokens introduced: --gold --sky --glass --glass-border --glow-gold --night-0 --night-1 Components introduced: .steps/.step/.connector · .hub-panel/.hub-core/.hnode/.hub-svg · .mq/.mq-in/.chip/.mq-band · [data-reveal]/.reveal-armed/.inview ========================================================================== ========================================================================== */ /* ---------- self-hosted variable fonts (no CDN) ---------- */ @font-face{font-family:'Archivo';src:url('../fonts/Archivo-var.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/Inter-var.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap} /* ---------- night tokens (specificity matches html[data-theme="x"] so the layer always wins) ---------- */ :root, html[data-theme]{ --night-0:#060F1C; --night-1:#0F2A47; --bg:#0A1B2F; --surface:rgba(255,255,255,.04); --ink:#f1f5f9; --text:#dbe7f3; --muted:#9fb3c8; --soft:#7f95ab; --brand:#e8eef5; --brand-contrast:#081A2D; --accent:#C18B2C; --accent-ink:#d9a54a; --gold:#C18B2C; --sky:#5ea0e6; --glass:rgba(255,255,255,.04); --glass-border:rgba(255,255,255,.10); --glow-gold:0 0 24px rgba(193,139,44,.18); --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --tint:rgba(255,255,255,.03); --ok:#4ade80; --hfont:'Archivo',sans-serif; --bfont:'Inter',sans-serif; --hero-bg:linear-gradient(160deg,#060F1C,#0F2A47 130%); --hero-ink:#f1f5f9; --hero-muted:#b9c9dc; --btn-bg:#C18B2C; --btn-ink:#081A2D; --btn2-bg:transparent; --btn2-ink:#dbe7f3; --btn2-border:rgba(255,255,255,.35); --card-shadow:0 10px 30px rgba(0,0,0,.25); } /* ---------- base ---------- */ html{background:#060F1C} body{background:linear-gradient(160deg,#060F1C,#0F2A47 130%) fixed;color:var(--text)} h1,h2,h3,h4{letter-spacing:0} ::selection{background:rgba(193,139,44,.35);color:#fff} a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:2px} input,select,textarea{color-scheme:dark} ::placeholder{color:var(--muted);opacity:1} /* ---------- header: dark glass ---------- */ header.site{background:rgba(6,15,28,.80);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1px solid rgba(255,255,255,.08)} .logo{font-family:'Inter',sans-serif} /* brand wordmark stays Inter 800 (D6) */ nav.main a:hover{color:#fff} nav.main a.active{color:#fff} .cta-top{transition:box-shadow .2s,transform .15s} .cta-top:hover{box-shadow:var(--glow-gold);transform:translateY(-1px)} /* ---------- hero: transparent — the sphere canvas blends with the page ---------- */ .hero,.hero-night{background:transparent} .hero h1{text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.85rem,3.9vw,2.75rem)} .hero .badge{background:rgba(94,160,230,.12);color:#9fc4ec;border:1px solid rgba(94,160,230,.3)} .hero-night .kicker{color:var(--sky)} /* ---------- sections & headings: Archivo display, uppercase, spectrum-blue kickers ---------- */ .kicker{color:var(--sky);letter-spacing:.22em;font-weight:700} h2.sec{text-transform:uppercase;letter-spacing:.045em;font-weight:800} .bigcta h2{text-transform:uppercase;letter-spacing:.04em} section.tinted{background:var(--tint)} /* ---------- cards: glass ---------- */ .card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;box-shadow:none;transition:border-color .2s,box-shadow .2s} .card:hover{border-color:rgba(193,139,44,.45);box-shadow:var(--glow-gold)} .card .num{color:#6faaea} /* not var(--sky): needs >=5:1 on glass over any navy stop incl. #0F2A47 */ .doctrine{background:var(--glass);border:1px solid var(--glass-border);border-left:4px solid var(--gold);border-radius:0 14px 14px 0} table.simple{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px} table.simple th{background:rgba(255,255,255,.05);color:var(--muted)} table.simple td{border-top:1px solid rgba(255,255,255,.08)} /* ---------- portfolio cards & badges: glass + honest translucent chips ---------- */ .pf-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;box-shadow:none} .pf-card:hover{border-color:var(--gold);box-shadow:var(--glow-gold);transform:translateY(-2px)} .pf-card.pf-ghost{background:transparent;border:1px dashed rgba(255,255,255,.20);color:var(--muted);box-shadow:none} .pf-ai,.pf-state{border-radius:5px;border:1px solid transparent} .pf-ai-digital{background:rgba(148,163,184,.14);color:#b6c2d1;border-color:rgba(148,163,184,.35)} .pf-ai-hybrid{background:rgba(94,160,230,.14);color:#9fc4ec;border-color:rgba(94,160,230,.35)} .pf-ai-agents{background:rgba(193,139,44,.16);color:#e0b05e;border-color:rgba(193,139,44,.4)} .pf-ai-spectrum{background:linear-gradient(90deg,rgba(148,163,184,.22),rgba(94,160,230,.22) 55%,rgba(193,139,44,.28));color:#e8eef5;border-color:rgba(255,255,255,.2)} .pf-state-live{background:rgba(34,197,94,.14);color:#6ee7a0;border-color:rgba(34,197,94,.35)} .pf-state-proven{background:rgba(94,160,230,.14);color:#9fc4ec;border-color:rgba(94,160,230,.35)} .pf-state-indev{background:rgba(245,158,11,.14);color:#f5c96b;border-color:rgba(245,158,11,.35)} .pf-section p.pf-proof{border-left:3px solid var(--gold)} /* ---------- spectrum legend ---------- */ .spectrum span{background:var(--glass);border:1px solid var(--glass-border);color:var(--ink)} .spectrum .sym-digital{color:#b6c2d1} .spectrum .sym-hybrid{color:var(--sky)} .spectrum .sym-agents{color:var(--gold)} /* ---------- buttons & links: gold with hover glow ---------- */ .btn{transition:box-shadow .2s,transform .15s} .btn:hover{box-shadow:var(--glow-gold);transform:translateY(-1px)} .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)} p a,li a,td a{color:var(--accent-ink)} /* #d9a54a — AA-safe default on glass and gradient */ p a:hover,li a:hover,td a:hover{text-shadow:0 0 14px rgba(193,139,44,.45)} /* ---------- big CTA: glass panel with a faint spectrum wash ---------- */ .bigcta{background:linear-gradient(140deg,rgba(94,160,230,.10),rgba(193,139,44,.08)),rgba(255,255,255,.03);border:1px solid var(--glass-border)} /* ---------- footer ---------- */ footer.site{background:rgba(6,15,28,.6);border-top:1px solid rgba(255,255,255,.08)} footer.site a:hover{color:#fff} /* ---------- HOW IT WORKS: 4 connected steps (design authority d2) ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative} .step{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:22px 18px;position:relative;transition:border-color .2s,box-shadow .2s} .step:hover{border-color:var(--gold);box-shadow:var(--glow-gold)} .step .n{font-size:.66rem;font-weight:800;letter-spacing:.16em;color:var(--sky);margin-bottom:8px} .step h3,.step h4{font-size:1.02rem;color:#fff;margin-bottom:8px} .step p{font-size:.8rem;line-height:1.5;color:var(--muted)} .connector{position:absolute;top:50%;right:-26px;width:26px;height:2px;background:linear-gradient(90deg,var(--sky),var(--gold));box-shadow:0 0 8px rgba(94,160,230,.6)} @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.connector{display:none}} @media(max-width:560px){.steps{grid-template-columns:1fr}} /* ---------- HUB & SPOKE: verified engine core + 6 status nodes (d2) ---------- */ .hub-panel{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:18px;height:300px} .hub-svg path{fill:none;stroke:rgba(94,160,230,.55);stroke-width:1.6;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s ease .3s} .inview .hub-svg path,[data-hub].inview .hub-svg path{stroke-dashoffset:0} .hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;text-align:center;background:radial-gradient(circle at 35% 30%,#1a3a63,#0F2A47);color:#fff;border:1px solid rgba(193,139,44,.5);animation:corepulse 2.6s ease-in-out infinite} .hub-core .mk{font-size:1.5rem;line-height:1;color:var(--gold)} .hub-core .lb{font-size:.5rem;letter-spacing:.1em;margin-top:4px;opacity:.85} .hnode{position:absolute;border-radius:12px;padding:10px 14px;font-size:.74rem;font-weight:700;display:flex;align-items:center;gap:8px;background:rgba(8,26,45,.85);border:1px solid rgba(94,160,230,.35);color:#dbe7f3;opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s} .inview .hnode,[data-hub].inview .hnode{opacity:1;transform:none} .hnode .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;flex:none} .hnode small{display:block;font-weight:400;font-size:.62rem;opacity:.75} /* <=700px: absolute geometry can't fit — stack: core on top, nodes in a 2-col grid. !important beats the inline height on platform.html; static position neutralises the inline left/top set by motion.js. */ @media(max-width:700px){ .hub-panel{height:auto !important;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 16px} .hub-svg{display:none} .hub-core{position:static;transform:none;grid-column:1/-1;justify-self:center;margin-bottom:6px} .hnode{position:static;max-width:none;font-size:.68rem;padding:9px 11px} } @keyframes corepulse{0%,100%{box-shadow:0 0 0 0 rgba(193,139,44,.45),0 0 34px rgba(193,139,44,.35)}50%{box-shadow:0 0 0 16px rgba(193,139,44,0),0 0 54px rgba(193,139,44,.55)}} /* ---------- STANDARDS MARQUEE (d2) ---------- */ section.mq-band{padding:28px 0} .mq{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0} .mq-in{display:inline-block;animation:mq 26s linear infinite} .mq:hover .mq-in,.mq:focus-within .mq-in,.mq:focus .mq-in{animation-play-state:paused} /* keyboard pause (WCAG 2.2.2) — .mq gets tabindex=0 from motion.js */ @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .chip{display:inline-block;margin:0 10px;padding:6px 16px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;background:rgba(94,160,230,.12);color:#9fc4ec;border:1px solid rgba(94,160,230,.3)} /* ---------- PROOF STRIP: even columns at desktop (flex-wrap left "Deterministic" orphaned) ---------- */ @media(min-width:901px){ .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;align-items:start} } /* ---------- MOBILE NAV: the base layer hides nav.main under 860px with no fallback. Override: horizontally scrollable strip under the bar — all 5 links reachable, zero JS. ---------- */ @media(max-width:860px){ header.site .bar{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:2px} nav.main{display:flex;order:3;width:100%;overflow-x:auto;white-space:nowrap;gap:22px;padding:6px 2px 10px;scrollbar-width:none} nav.main::-webkit-scrollbar{display:none} } /* ---------- SCROLL REVEAL ([data-reveal], armed by motion.js — no-JS safe) ---------- */ [data-reveal].reveal-armed>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} [data-reveal].inview>*{opacity:1;transform:none} /* ---------- REDUCED MOTION: everything appears instantly, pulses off, marquee static ---------- */ @media (prefers-reduced-motion: reduce){ .hub-core{animation:none} .mq-in{animation:none} .hub-svg path{stroke-dashoffset:0;transition:none} .hnode{opacity:1;transform:none;transition:none} [data-reveal].reveal-armed>*{opacity:1;transform:none;transition:none} .btn,.cta-top,.card,.pf-card,.step{transition:none} .pf-card:hover{transform:none} }