/* GroundBid design system — public site (2026-09-27). Loaded LAST in on every public page except index.html (which carries the same system inline). It restyles pages that still have their own older inline styles, without touching their markup or scripts: 1. Tokens — remaps the legacy palette (--navy, --gold, --green, ...) onto a monochrome system with one restrained green accent. Legacy gold becomes a light neutral, so any "gold background + dark text" component stays readable. 2. Base — one system font stack, tight heading tracking, calm links, a single accessible focus ring. 3. Parts — header, document layout, forms, buttons, cards, footer, the language switcher and the consent banner. Rules here change color, type, radius and borders only; they deliberately do not change sizes or layout of app pages (dashboard, open bids) so nothing reflows. Pre-redesign state: git tag backup/pre-apple-redesign-20260927. */ /* ---------- 1. Tokens ---------- */ :root{ --gb-bg:#fbfbfd; --gb-bg-alt:#f5f5f7; --gb-surface:#ffffff; --gb-ink:#1d1d1f; --gb-muted:#6e6e73; --gb-hairline:#d2d2d7; --gb-fill:#e8e8ed; --gb-accent:#2f7d57; --gb-accent-on-dark:#7fcfa2; --gb-radius:18px; --gb-radius-sm:12px; --gb-ease:cubic-bezier(.28,.11,.32,1); --gb-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Legacy names used throughout the older inline styles */ --navy:var(--gb-ink); --navy-dark:#000; --navy-deep:#000; --green:var(--gb-accent); --green-light:#3d8f66; --gold:var(--gb-fill); --gold-light:var(--gb-bg-alt); --bg:var(--gb-bg); --card:var(--gb-surface); --border:var(--gb-hairline); --grey:var(--gb-muted); --muted:var(--gb-muted); --ink:var(--gb-ink); } /* ---------- 2. Base ---------- */ html{-webkit-text-size-adjust:100%;} body{font-family:var(--gb-font);background:var(--gb-bg);color:var(--gb-ink);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} h1,h2,h3,h4,h5,h6,.logo{font-family:var(--gb-font) !important;letter-spacing:-.022em;} h1{font-weight:700;} a{color:var(--gb-accent);text-underline-offset:3px;} ::selection{background:#d7ebe0;} :focus-visible{outline:2px solid var(--gb-accent);outline-offset:3px;} [hidden]{display:none !important;} /* ---------- 3a. Header ---------- Document pages (header.site, dark logo): light frosted bar, Apple-style. App pages (body > header on dashboard/open bids, white logo): black bar. */ body > header{background:#000;color:#f5f5f7;} header.site{position:sticky;top:0;z-index:50;padding:0;background:rgba(251,251,253,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--gb-ink);border-bottom:1px solid var(--gb-hairline);} header.site .wrap{min-height:52px;} header.site .logo img,body > header .logo img{height:22px !important;width:auto;} header.site .back{color:var(--gb-muted);font-weight:500;font-size:13px;} header.site .back:hover{color:var(--gb-ink);} body > header .tag{color:#86868b;} body > header nav.top a,nav.roles button{border-color:rgba(255,255,255,.22);} nav.roles button.active,.role-locked-label{color:var(--gb-ink);} /* ---------- 3b. Document pages (legal, help, service guides) ---------- */ main{-webkit-font-smoothing:antialiased;} .wrap > h1:first-child,main > .wrap > h1{font-size:clamp(36px, 5.6vw, 56px);line-height:1.05;letter-spacing:-.035em;margin-bottom:10px;} main h2{letter-spacing:-.022em;} .updated{color:var(--gb-muted);} main p,main li{line-height:1.6;} .disclaimer{background:var(--gb-bg-alt);border:1px solid var(--gb-hairline);color:var(--gb-ink);border-radius:var(--gb-radius-sm);} /* ---------- 3c. Forms (visual only — no size changes) ---------- */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select,textarea{border-color:var(--gb-hairline);border-radius:var(--gb-radius-sm);background-color:#fff;color:var(--gb-ink);font-family:inherit;transition:border-color .3s var(--gb-ease), box-shadow .3s var(--gb-ease);} input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--gb-accent);box-shadow:0 0 0 3px rgba(47,125,87,.16);} input[type=checkbox],input[type=radio]{accent-color:var(--gb-ink);} label{color:var(--gb-ink);} /* ---------- 3d. Buttons: black primary pill, hairline secondary pill ---------- */ button.submit,button.primary,.btn-primary,#ask-btn,#gate button,.modal-actions button.primary,#confirm-btn{ background:var(--gb-ink) !important;color:#fff !important;border:1px solid var(--gb-ink) !important;border-radius:999px;box-shadow:none;font-weight:600;letter-spacing:-.01em; transition:background-color .3s var(--gb-ease), transform .3s var(--gb-ease);} button.submit:hover,button.primary:hover,.btn-primary:hover,#ask-btn:hover,#gate button:hover,#confirm-btn:hover{background:#333336 !important;} button.submit:active,button.primary:active,.btn-primary:active,#ask-btn:active{transform:scale(.98);} button.submit:disabled,button.primary:disabled{opacity:.45;cursor:default;} button.secondary,.btn-outline,.link-button{border-radius:999px;border-color:var(--gb-hairline);color:var(--gb-ink);background:#fff;} button.secondary:hover,.btn-outline:hover{border-color:var(--gb-muted);} .btn{border-radius:999px;box-shadow:none;} /* ---------- 3e. Surfaces: hairline cards, no heavy shadows ---------- */ .card,.panel,.cat-card,.step,.service,details.faq,.faq{border-color:var(--gb-hairline);border-radius:var(--gb-radius);box-shadow:none;} .badge{border-radius:999px;} details.faq summary::before{color:var(--gb-accent);} .eyebrow{color:var(--gb-accent);letter-spacing:.02em;} /* ---------- 3f. Footer ---------- */ footer.site,body > footer{background:var(--gb-bg-alt);color:var(--gb-muted);border-top:1px solid var(--gb-hairline);} footer.site a,body > footer a{color:var(--gb-muted) !important;} footer.site a:hover,body > footer a:hover{color:var(--gb-ink) !important;} /* ---------- 3g. Language switcher ---------- */ .lang-switcher{border-radius:999px;font-family:inherit;} header.site .lang-switcher{background:transparent;border:1px solid var(--gb-hairline);color:var(--gb-ink);} /* ---------- 3h. Consent banner (growthos-telemetry.js injects its own