/* ================================================================ BIELD — SHARED BRAND KIT (#1817 hybrid unification) One cacheable stylesheet for every "Blue Energy" light-mode page: all Bield_Website_v2 conversion pages + every Bield_Flows page. The homepage (Bield_Landing/bield-landing.html) stays a separate, deliberately DARK cinematic "front door" and is NOT linked to this file — it keeps its own inline CSS, hand-aligned to the same hex values (see the token table below / feedback in HANDOVER). Canonical token names below are the ones ALREADY used, verbatim, across browse-races.html / premium.html / api.html / support.html / privacy.html / terms.html / launch/index.html / race/epona-100/ index.html / cheer/index.html — this file simply de-duplicates that repeated block into one place. Bield_Flows pages carried a second naming scheme (--navy/--cloud-light/--line-color/...) with the SAME hex values — proof there was never a real color disagreement, just copy-paste drift. Flows keep their own local :root (so none of their existing var(--navy) usages break) but that root's values are now confirmed identical to the ones here; the visual unification for flows happens in each page's own restyle of .nav/.hero h1/etc. to match this dark-glass-nav / Sora-display Blue Energy language. ================================================================ */ :root { --blue-600:#1B5EFF; --blue-500:#3D7BFF; --blue-700:#0E3FCC; --blue-900:#07142E; --cyan-400:#16C8FF; --mint-400:#00E0B8; --violet-500:#7C3AED; --ink:#0A1B3D; --ink-muted:#4B5675; --ink-faint:#7C87A3; --white:#FFFFFF; --cloud:#F2F7FF; --cloud-2:#E9F1FF; --line:#DCE6F7; --danger:#C0392B; --grad-energy:linear-gradient(120deg,#1B5EFF 0%,#16C8FF 100%); --grad-funk:linear-gradient(120deg,#7C3AED 0%,#1B5EFF 45%,#16C8FF 100%); --grad-hero:radial-gradient(1200px 600px at 70% -10%,rgba(22,200,255,.35),transparent 60%), linear-gradient(160deg,#07142E 0%,#0E2A6B 55%,#1B5EFF 120%); --shadow-card:0 10px 30px -12px rgba(11,27,61,.18); --shadow-pop:0 18px 50px -16px rgba(27,94,255,.45); --radius:18px; --radius-sm:10px; --radius-lg:28px; --radius-pill:999px; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{margin:0;background:var(--white);color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;} img,svg{display:block;} a{color:var(--blue-600);text-decoration:none;transition:color .15s;} a:hover{color:var(--cyan-400);} :focus-visible{outline:2.5px solid var(--cyan-400);outline-offset:3px;border-radius:4px;} /* ── Typography ── */ h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;font-weight:700;color:var(--ink);letter-spacing:-0.02em;line-height:1.0;margin:0 0 1rem;} h1{font-size:clamp(2.9rem,7vw,5.6rem);font-weight:800;line-height:.95;} h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.0;} h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;} h4{font-size:1.05rem;font-weight:700;} p{margin:0 0 1rem;color:var(--ink-muted);line-height:1.65;} p.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.6;color:var(--ink-muted);} ul,ol{margin:0 0 1rem;padding-left:1.5rem;color:var(--ink-muted);line-height:1.7;} li{margin-bottom:.4rem;} strong{color:var(--ink);} .grad-text{background:var(--grad-energy);-webkit-background-clip:text;background-clip:text;color:transparent;} /* ── Container ── Default 1200px suits grid/marketing pages (browse-races, premium, api, launch, race, cheer). Long-form text pages (support, privacy, terms) narrow it back down with a page-local override AFTER this stylesheet loads — that's an intentional per-page variant, not duplication. */ .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;} @media(min-width:640px){.container{padding:0 32px;}} @media(min-width:1024px){.container{padding:0 48px;}} /* ── Skip link ── */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} .skip-link:focus{position:fixed;top:80px;left:20px;width:auto;height:auto;padding:12px 20px;background:var(--blue-600);color:white;border-radius:8px;font-weight:600;z-index:9999;} /* ================================================================ NAV — dark glass bar, used on every page regardless of section theme (this is what makes the light "Blue Energy" pages still feel tied to the dark homepage: one nav, top of every page, always). ================================================================ */ nav.top{position:sticky;top:0;z-index:100;background:rgba(7,20,46,.88);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(255,255,255,.08);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px;} .nav-brand{display:inline-flex;align-items:center;gap:0;font-family:'Sora',sans-serif;font-size:1.45rem;font-weight:800;letter-spacing:-0.05em;text-decoration:none;background:linear-gradient(90deg,#1B5EFF 0%,#16C8FF 16%,#a8d0ff 20%,#ffffff 25%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;} .nav-brand .brand-b{background:none;color:inherit;} .nav-back{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s;} .nav-back:hover{color:var(--white);} nav.top ul{list-style:none;margin:0;padding:0;display:none;gap:4px;align-items:center;} nav.top ul li a{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.72);padding:6px 10px;border-radius:8px;transition:color .15s,background .15s;text-decoration:none;} nav.top ul li a:hover{color:var(--white);background:rgba(255,255,255,.08);} nav.top ul li a.active{color:var(--white);background:rgba(27,94,255,.22);} @media(min-width:900px){nav.top ul{display:flex;}} .nav-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:var(--grad-energy);color:var(--white);font-size:.82rem;font-weight:600;border-radius:var(--radius-pill);transition:transform .15s ease,filter .15s ease;white-space:nowrap;text-decoration:none;} .nav-cta:hover{color:var(--white);filter:brightness(1.1);transform:translateY(-1px);} /* ── Hamburger button ── */ .nav-hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;width:42px;height:42px;padding:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:10px;cursor:pointer;gap:0;flex-shrink:0;transition:background .18s,border-color .18s;} .nav-hamburger:hover{background:rgba(255,255,255,.13);border-color:rgba(22,200,255,.45);} .nav-hamburger span{display:block;width:20px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s,top .28s;} .nav-hamburger span:nth-child(1){margin-bottom:5px;} .nav-hamburger span:nth-child(3){margin-top:5px;} .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(min-width:900px){.nav-hamburger{display:none;}} /* ── Mobile menu panel ── */ #mobile-menu{display:block;position:fixed;top:66px;left:0;right:0;z-index:99;background:rgba(7,20,46,.97);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;padding:8px 0 20px;} #mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto;} #mobile-menu ul{display:block;list-style:none;margin:0;padding:0 16px;} #mobile-menu ul li a{display:block;padding:15px 16px;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;border-radius:12px;transition:background .15s,color .15s;letter-spacing:-.01em;} #mobile-menu ul li a:hover{background:rgba(255,255,255,.08);color:var(--white);} #mobile-menu ul li+li{border-top:1px solid rgba(255,255,255,.06);} .mobile-menu-cta{display:block;margin:16px 16px 0;padding:16px 20px;text-align:center;font-size:1rem;font-weight:700;color:var(--white);background:var(--grad-energy);border-radius:var(--radius-pill);text-decoration:none;box-shadow:0 8px 30px -10px rgba(27,94,255,.55);transition:filter .18s,transform .18s;} .mobile-menu-cta:hover{filter:brightness(1.1);transform:translateY(-1px);color:var(--white);} /* ── Backdrop overlay ── */ #mobile-overlay{display:block;position:fixed;inset:0;top:66px;z-index:98;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;} #mobile-overlay.open{opacity:1;pointer-events:auto;} @media(min-width:900px){#mobile-menu,#mobile-overlay{display:none!important;}} /* ── Scroll-lock ── */ body.menu-open{overflow:hidden;} /* ================================================================ BUTTONS + EYEBROW + APP-STORE BADGE ================================================================ */ .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--cloud-2);border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;color:var(--blue-600);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;} .eyebrow.light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.9);} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;text-align:center;line-height:1;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease;text-decoration:none;} .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--grad-energy);color:var(--white);box-shadow:var(--shadow-pop);} .btn-primary:hover{filter:brightness(1.1);box-shadow:0 22px 60px -16px rgba(27,94,255,.6);color:var(--white);} .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:var(--white);} .btn-ghost-dark{background:transparent;color:var(--blue-600);border-color:var(--blue-600);} .btn-ghost-dark:hover{background:var(--blue-600);color:var(--white);} .btn-funk{background:var(--grad-funk);color:var(--white);box-shadow:0 18px 50px -16px rgba(124,58,237,.45);} .btn-funk:hover{filter:brightness(1.08);color:var(--white);} .app-store-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:var(--ink);border:1.5px solid rgba(27,94,255,.45);border-radius:14px;text-decoration:none;color:var(--white);transition:border-color .18s,box-shadow .18s;} .app-store-badge:hover{border-color:var(--blue-500);box-shadow:0 6px 24px -10px rgba(27,94,255,.45);color:var(--white);} .app-store-badge svg{flex-shrink:0;opacity:.85;} .app-store-badge-text{display:flex;flex-direction:column;line-height:1.2;} .app-store-badge-text .coming{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-400);} .app-store-badge-text .store{font-family:'Sora',sans-serif;font-size:.92rem;font-weight:700;color:var(--white);} .app-store-badge.light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px);} .app-store-badge.light:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:var(--white);} /* ================================================================ CARD SYSTEM (browse-races race cards / generic content cards) ================================================================ */ .cardx{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:0 1px 0 rgba(11,18,32,.03);transition:transform .15s,box-shadow .15s;} .cardx:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(14,63,204,.4);} .cardx .ic{width:38px;height:38px;border-radius:10px;background:var(--grad-energy);margin-bottom:16px;display:grid;place-items:center;color:var(--white);font-weight:800;font-size:16px;} .cardx h3{font-size:17px;letter-spacing:-.01em;} .cardx p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-muted);} /* ================================================================ HERO — PHOTO TREATMENT (Bield_Flows role-journey pages, #1817/#1824) Full-bleed role photo behind the existing hero copy (eyebrow/h1/p/ phase-count-strip), with a dark scrim for legibility. Flows pages each carry their own local