/* ═══════════════════════════════════════════════════════════════ SitePath Intelligence — Shared Stylesheet ═══════════════════════════════════════════════════════════════ */ /* Fonts (Geist / Geist Mono / Fraunces) load via a non-blocking — injected by site-chrome.js on chrome pages, and placed directly in the of the two standalone pages that don't load it (accept-invite.html, redeem-referral.html). A render-blocking CSS @import here used to serialize the font fetch behind main.css and cost ~10 Lighthouse perf points; do not reintroduce it. */ *{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0a1628;--navy2:#0f1e38; --blue:#0077b6;--sky:#0096c7;--sky2:#48cae4; --green:#16a34a;--green2:#15803d; --red:#dc2626;--amber:#d97706; --text:#111;--text2:#374151;--text3:#64748b;--text4:#94a3b8; --border:#e2e8f0;--border2:#f0f0f0; --surface:#fff;--bg:#f1f5f9; } html{height:100%} body{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text);line-height:1.5;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'ss03','cv11'} .serif,.display-serif{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.015em;font-feature-settings:'ss01'} .mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-feature-settings:'cv02','ss01'} .serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.01em} a{color:var(--sky);text-decoration:none} a:hover{text-decoration:underline} button{font-family:inherit;cursor:pointer} /* ── TOPBAR ──────────────────────────────────────────────── */ .topbar{ display:flex;align-items:center;justify-content:space-between; padding:0 16px;height:52px; background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0;z-index:600;position:relative; } .t-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0} .t-logo:hover{opacity:0.88} .t-logo-img{width:32px;height:32px;display:block;flex-shrink:0} .t-logo-text{display:flex;flex-direction:column;gap:0} .t-logo-name{font-size:14px;font-weight:800;color:#fff;letter-spacing:-0.3px;line-height:1.1} .t-logo-name span{color:var(--sky2)} .t-logo-sub{font-size:9px;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase} .t-nav{display:flex;align-items:center;gap:1px;margin:0 8px} .t-navlink{font-size:12px;font-weight:500;color:rgba(255,255,255,0.55);padding:5px 11px;border-radius:5px;text-decoration:none;transition:all 0.15s;white-space:nowrap} .t-navlink:hover{color:#fff;background:rgba(255,255,255,0.08);text-decoration:none} .t-navlink.active{color:#fff;background:rgba(255,255,255,0.1);font-weight:600} .t-right{display:flex;gap:6px;align-items:center;flex-shrink:0} .user-pill{font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3);display:none;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis} .user-pill.show{display:block} .btn-nav{font-size:12px;font-weight:600;padding:5px 14px;border-radius:6px;background:var(--green);color:#fff;border:none;transition:background 0.15s} .btn-nav:hover{background:var(--green2)} .btn-nav-ghost{font-size:12px;padding:5px 11px;border-radius:6px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.65);border:1px solid rgba(255,255,255,0.12);transition:all 0.15s} .btn-nav-ghost:hover{color:#fff;background:rgba(255,255,255,0.14)} .hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:4px;cursor:pointer} .hamburger span{display:block;width:18px;height:1.5px;background:rgba(255,255,255,0.6)} /* ── MOBILE NAV ──────────────────────────────────────────── */ .mobile-drawer{display:none;position:fixed;top:52px;left:0;right:0;background:var(--navy);border-bottom:1px solid rgba(255,255,255,0.08);z-index:599;padding:6px 0} .mobile-drawer.open{display:block} .mobile-drawer a{display:block;padding:11px 20px;font-size:13px;color:rgba(255,255,255,0.7);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05)} .mobile-drawer a:hover{color:#fff;background:rgba(255,255,255,0.05)} /* ── PILLS ───────────────────────────────────────────────── */ .pill{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;display:inline-block} .pg{background:#dcfce7;color:#166534}.py{background:#fef9c3;color:#854d0e} .po{background:#ffedd5;color:#9a3412}.pr{background:#fee2e2;color:#991b1b}.pgy{background:#f1f5f9;color:var(--text2)} /* ── MODALS ──────────────────────────────────────────────── */ .overlay{position:fixed;inset:0;background:rgba(10,22,40,0.9);backdrop-filter:blur(6px);z-index:2000;display:none;align-items:center;justify-content:center;padding:16px} .overlay.show{display:flex} .modal{background:#fff;border-radius:14px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden} .modal-head{padding:24px 24px 14px;text-align:center} .modal-icon{font-size:32px;margin-bottom:10px} .modal-head h2{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:6px} .modal-head p{font-size:12px;color:var(--text3);line-height:1.6} .modal-body{padding:0 22px 22px} .m-btn{width:100%;padding:11px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;margin-bottom:6px;transition:all 0.15s;font-family:inherit} .mb-green{background:var(--green);color:#fff}.mb-green:hover{background:var(--green2)} .mb-navy{background:var(--navy);color:#fff}.mb-navy:hover{background:var(--navy2)} .mb-sky{background:var(--sky);color:#fff}.mb-sky:hover{background:var(--blue)} .mb-ghost{background:#f1f5f9;color:var(--text2)}.mb-ghost:hover{background:var(--border)} .m-or{display:flex;align-items:center;gap:8px;margin:3px 0 8px;color:var(--border);font-size:11px} .m-or::before,.m-or::after{content:'';flex:1;height:1px;background:#f1f5f9} .m-note{font-size:11px;color:var(--text4);text-align:center;margin-top:6px;line-height:1.55} .m-note a{color:var(--sky)} /* ── PAGE LAYOUTS ────────────────────────────────────────── */ .page-shell{max-width:860px;margin:0 auto;padding:48px 24px 80px} .page-header{margin-bottom:32px} .page-title{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-0.3px} .page-sub{font-size:14px;color:var(--text3);line-height:1.65;max-width:600px} .page-hero{background:var(--navy);padding:48px 32px;text-align:center} .page-hero h1{font-size:clamp(24px,4vw,40px);font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-0.5px} .page-hero p{font-size:14px;color:rgba(255,255,255,0.55);max-width:520px;margin:0 auto;line-height:1.7} /* ── CARDS ───────────────────────────────────────────────── */ .card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:24px} .card+.card{margin-top:16px} .card h2{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px} .card p{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:10px} .card p:last-child{margin:0} /* ── SITE FOOTER ─────────────────────────────────────────── */ .site-footer{border-top:1px solid var(--border);padding:24px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#fff} .sf-brand{font-size:13px;font-weight:800;color:var(--navy)} .sf-brand span{color:var(--sky)} .sf-links{display:flex;gap:20px;flex-wrap:wrap} .sf-links a{font-size:12px;color:var(--text4);text-decoration:none;transition:color 0.15s} .sf-links a:hover{color:var(--text2)} .sf-legal{font-size:12px;color:var(--text4)} /* ── COOKIE BANNER ───────────────────────────────────────── */ #cookieBanner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;background:#fff;border-top:1px solid var(--border);padding:12px 24px} .cb-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:1000px;margin:0 auto} .cb-text{font-size:12px;color:var(--text3);flex:1;min-width:240px;line-height:1.5} .cb-text a{color:var(--sky)} .cb-btns{display:flex;gap:8px;flex-shrink:0} .cb-btn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:5px;cursor:pointer;font-family:inherit;transition:all 0.15s} .cb-essential{background:transparent;color:var(--text3);border:1px solid var(--border)}.cb-essential:hover{border-color:var(--text4);color:var(--text2)} .cb-accept{background:var(--green);color:#fff;border:none}.cb-accept:hover{background:var(--green2)} /* ═══════════════════════════════════════════════════════════ SHARED DATA-TABLE UI (SPUI) — used by data-centers / bess / projects pages. Skeletons, accessible focus, responsive card tables, active-filter pills, collapsible analytics sections. ═══════════════════════════════════════════════════════════ */ /* Screen-reader-only utility */ .sp-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} /* Eyebrow / kicker — small label above a page or section title */ .sp-eyebrow{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px} /* Qualitative value card — replaces raw-count KPI cards on coverage layers that aren't yet nationally complete, so we lead with the value proposition (nationwide / sourced / fresh) rather than small totals. */ .sp-valuecard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px 17px} .sp-valuecard .sp-vc-lbl{font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-0.1px;margin-bottom:5px} .sp-valuecard .sp-vc-sub{font-size:12px;color:var(--text3);line-height:1.5} /* Visible focus ring for keyboard users on interactive surfaces (rows, sortable headers, stat cards, chips). Mouse clicks don't trigger :focus-visible, so this stays out of the way for them. */ .sp-focusable:focus-visible, th.sortable:focus-visible, tr[data-activate]:focus-visible, .sp-statcard:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px} tr[data-activate]:focus-visible{outline-offset:-3px} /* See more / Show less — caps long lists so a section doesn't scroll forever before the next one. */ .sp-hidden{display:none!important} .sp-more-ctrl{margin-top:12px;text-align:center} .sp-more-row>td{text-align:center;padding:12px 10px!important;border-bottom:none!important} .sp-more-btn{font-size:12px;font-weight:600;color:var(--blue);background:transparent;border:1px solid #dbe3ef;padding:7px 16px;border-radius:8px;cursor:pointer;font-family:inherit} .sp-more-btn:hover{background:#eff6ff;border-color:#bfdbfe} .sp-more-btn::after{content:" ↓";opacity:0.7} .sp-more-btn[aria-expanded="true"]::after{content:" ↑"} body.sp-editorial .sp-more-btn{color:var(--accent);border-color:var(--rule-strong);border-radius:6px} body.sp-editorial .sp-more-btn:hover{background:var(--paper2)} /* Loading skeleton shimmer */ @keyframes sp-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} .sp-skel{display:inline-block;height:12px;border-radius:6px;background:#f1f5f9;background-image:linear-gradient(90deg,#f1f5f9 0px,#f1f5f9 200px,#f1f5f9 400px);background-size:800px 100%;animation:sp-shimmer 1.4s infinite linear} .sp-skel-row td{padding:12px 10px!important} @media (prefers-reduced-motion: reduce){.sp-skel{animation:none}} /* Active-filter pills */ .sp-fpills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .sp-fpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 6px 4px 11px;border-radius:16px;background:#eff6ff;color:var(--blue);border:1px solid #bfdbfe;cursor:pointer;font-family:inherit;line-height:1.4} .sp-fpill:hover{background:#dbeafe} .sp-fpill-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(29,78,216,0.12);font-size:13px;line-height:1} .sp-fpill-clear{background:transparent;color:var(--text3);border:1px solid transparent;text-decoration:underline;padding:4px 8px} .sp-fpill-clear:hover{background:#f1f5f9;color:var(--navy);text-decoration:none} /* Collapsible analytics section (native

) */ .sp-collapse{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:18px;overflow:hidden} .sp-collapse>summary{list-style:none;cursor:pointer;padding:16px 22px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--navy);user-select:none} .sp-collapse>summary::-webkit-details-marker{display:none} .sp-collapse>summary:hover{background:#f9fafb} .sp-collapse>summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} .sp-collapse>summary .sp-chev{margin-left:auto;transition:transform .18s ease;color:var(--text4);flex-shrink:0} .sp-collapse[open]>summary .sp-chev{transform:rotate(180deg)} .sp-collapse>summary .sp-sum-sub{font-size:12px;font-weight:500;color:var(--text3)} .sp-collapse-body{padding:0 22px 20px} /* Responsive "card" table: below 720px each row becomes a stacked card and every cell shows its column label — so we never hide primary columns (Status, Capacity) on phones. Opt in by adding class "sp-cardable" to the and data-label on each

. */ @media (max-width: 720px){ table.sp-cardable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} table.sp-cardable,table.sp-cardable tbody,table.sp-cardable tr,table.sp-cardable td{display:block;width:100%} table.sp-cardable tr{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:6px 4px;background:#fff} table.sp-cardable tr.sp-skel-row{padding:10px} table.sp-cardable td{border:none!important;padding:6px 12px!important;display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right} table.sp-cardable td::before{content:attr(data-label);text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);flex-shrink:0} table.sp-cardable td[data-label=""]::before,table.sp-cardable td:not([data-label])::before{content:none} table.sp-cardable td.sp-card-primary{display:block;text-align:left;font-size:14px;padding-top:10px!important} table.sp-cardable td.sp-card-primary::before{display:block;margin-bottom:2px} table.sp-cardable .hide-mobile{display:flex!important} /* Full-width utility rows (empty / loading / no-match) span the card. */ table.sp-cardable td[colspan]{display:block!important;text-align:center} table.sp-cardable td[colspan]::before{content:none} } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media(max-width:768px){ .t-nav{display:none} .hamburger{display:flex} .page-shell{padding:32px 16px 60px} .site-footer{padding:20px 16px} .sf-links{display:none} } @media print{ .topbar,.mobile-drawer,.site-footer,#cookieBanner,.overlay{display:none!important} } /* ═══════════════════════════════════════════════════════════ EDITORIAL THEME (light) — opt in with Used by data-centers / bess / projects. Serif-led, warm-paper, magazine-rule aesthetic that leans on the Fraunces brand face. Scoped under body.sp-editorial so it outranks each page's own scoped