/* ============================================================================ sl-design.css โ€” Signal Labs shared design system (single source of truth) Extracted from the live MLB/CFB reference pages so every sport page reads as ONE product. All raw hex lives HERE (tokens only) โ€” pages must not declare hex. Font (Archivo / Archivo Black) is loaded via in each page . NOTE: The site's LIVE accent is green #00ff88 on near-black โ€” this file matches that so Golf/NHL become siblings of MLB/CFB today. The Fable spec's future tokens (#30D158 / SF Pro) are a one-file swap away: change --sl-green + the font stack below and the whole site re-accents. ๐Ÿšจ Purple (#A78BFA) is RESERVED for The Pitch (soccer) ONLY and is applied on that page via `body.sport-soccer{--sl-green:var(--sl-pitch)}`. Nothing else here uses purple. ============================================================================ */ :root{ /* near-black layers */ --sl-bg-0:#0a0e15; /* canvas */ --sl-bg-1:#0d0d0d; /* nav / hero */ --sl-bg-2:#11181f; /* cards */ --sl-bg-3:#161f2a; /* nested / headers / hover */ --sl-bg-4:#1f2734; /* active / sticky */ --sl-border:#1f2734; /* 1px hairlines */ --sl-hair:rgba(245,245,241,0.06); /* text */ --sl-t1:#f5f5f1; --sl-t2:#c5d0df; --sl-t3:#8a96ad; --sl-t4:#6c7a8c; /* green-as-scalpel (accent / wins / one CTA only) */ --sl-green:#00ff88; --sl-green2:#00cc6e; --sl-green-dim:rgba(0,255,136,0.12); --sl-red:#ff4566; --sl-amber:#e8c842; --sl-gold:#c89b14; --sl-discord:#5865F2; --sl-discord2:#4752C4; /* legacy aliases (so extracted markup keeps working) */ --navy:var(--sl-bg-1);--navy2:var(--sl-bg-2);--navy3:var(--sl-bg-3);--navy4:var(--sl-bg-4); --orange:var(--sl-green);--orange2:var(--sl-green2);--green:var(--sl-green); --silver:var(--sl-t2);--silver2:var(--sl-t3);--white:var(--sl-t1);--grey:var(--sl-t4); --red:var(--sl-red);--ink:var(--sl-bg-1);--paper:var(--sl-t1);--acid:var(--sl-green); --radius:14px;--radius-pill:999px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} html,body{overflow-x:hidden;max-width:100vw;} body{font-family:'Archivo',system-ui,-apple-system,sans-serif;background:var(--sl-bg-0);color:var(--sl-t1);font-size:15px;line-height:1.55;} a{color:var(--sl-green);} /* ๐Ÿšจ tabular numerals on ALL numbers */ .num,.ptable td,.ptable th,.hs-mega,.slstat-v,.mc-odds,.mc-score,.stat-v{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* โ”€โ”€ top bar / nav (identical everywhere = the "one product" signal) โ”€โ”€ */ .top-bar{background:var(--sl-bg-1);border-bottom:3px solid var(--sl-green);padding:0 20px;position:sticky;top:0;z-index:100;} .top-bar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:52px;} .logo-text{font-family:'Archivo Black',sans-serif;font-weight:900;font-size:24px;color:var(--sl-t1);letter-spacing:.04em;text-decoration:none;white-space:nowrap;} .logo-text span{color:var(--sl-green);} .top-nav{display:flex;align-items:center;gap:4px;} .top-nav a{color:var(--sl-t2);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:4px;min-height:44px;display:inline-flex;align-items:center;} .top-nav a:hover{color:var(--sl-t1);background:#ffffff12;} .disc-btn{background:var(--sl-discord)!important;color:#fff!important;border-radius:6px;padding:7px 16px!important;font-weight:700!important;} .disc-btn:hover{background:var(--sl-discord2)!important;} .sub-btn{background:var(--sl-green)!important;color:var(--sl-bg-1)!important;border-radius:6px;padding:7px 16px!important;font-weight:800!important;} .sport-nav{background:var(--sl-bg-2);border-bottom:1px solid var(--sl-border);padding:0 20px;} .sport-nav-inner{max-width:1280px;margin:0 auto;display:flex;height:40px;overflow-x:auto;} .sport-nav a{color:var(--sl-t3);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 16px;height:40px;display:flex;align-items:center;border-bottom:3px solid transparent;white-space:nowrap;} .sport-nav a:hover{color:var(--sl-t1);} .sport-nav a.active{color:var(--sl-green);border-color:var(--sl-green);} .timestamp{font-size:11px;color:var(--sl-t3);text-align:center;padding:8px;background:var(--sl-bg-2);border-bottom:1px solid var(--sl-border);} /* โ”€โ”€ breadcrumb โ”€โ”€ */ .sl-breadcrumb{max-width:1280px;margin:0 auto;padding:12px 20px 0;font-size:12px;color:var(--sl-t3);letter-spacing:.04em;} .sl-breadcrumb a{color:var(--sl-t3);text-decoration:none;} .sl-breadcrumb a:hover{color:var(--sl-green);} .sl-breadcrumb span{margin:0 7px;color:var(--sl-t4);} .sl-breadcrumb .cur{color:var(--sl-t2);} /* โ”€โ”€ layout โ”€โ”€ */ .main{max-width:1280px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:1fr 300px;gap:28px;} .main>.content{min-width:0;} .main>aside{min-width:0;max-width:300px;} .sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:10px;border-bottom:3px solid var(--sl-green);} .sec-title{font-family:'Archivo Black',sans-serif;font-size:20px;font-weight:900;color:var(--sl-t1);letter-spacing:.02em;text-transform:uppercase;} .sec-more{font-size:12px;font-weight:700;color:var(--sl-green);text-decoration:none;} /* โ”€โ”€ hero (zone 1) โ”€โ”€ */ .sl-hero{background:linear-gradient(135deg,var(--sl-green-dim) 0%,transparent 60%);border-left:3px solid var(--sl-green);border-radius:4px;padding:26px 28px;margin-bottom:22px;} .sl-eyebrow{font-family:'JetBrains Mono','SF Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sl-green);font-weight:800;margin-bottom:10px;} .sl-h1{font-family:'Archivo Black',sans-serif;font-size:clamp(28px,6vw,44px);line-height:1.04;letter-spacing:-.025em;color:var(--sl-t1);margin-bottom:10px;} .sl-h1 span{color:var(--sl-green);} .sl-hero-sub{font-size:15px;color:var(--sl-t2);line-height:1.6;max-width:620px;margin-bottom:20px;} /* 3-stat row: record ยท units ยท settled */ .sl-hero-stats{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--sl-border);border-radius:10px;overflow:hidden;background:var(--sl-bg-2);max-width:560px;} .slstat{flex:1;min-width:120px;padding:16px 18px;border-right:1px solid var(--sl-border);} .slstat:last-child{border-right:none;} .slstat-v{font-family:'Archivo Black',sans-serif;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--sl-t1);} .slstat-v.g{color:var(--sl-green);} .slstat-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-t3);margin-top:9px;} /* โ”€โ”€ tier badge (compliance made visual) โ”€โ”€ */ .sl-tier{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-pill);} .sl-tier.validated{background:var(--sl-green-dim);color:var(--sl-green);} .sl-tier.model-read{background:var(--sl-bg-3);color:var(--sl-t2);} .sl-tier.projection{background:transparent;color:var(--sl-t3);border:1px solid var(--sl-border);} .sl-tier.advisory{background:rgba(232,200,66,.14);color:var(--sl-amber);} /* โ”€โ”€ generic panel / card โ”€โ”€ */ .sl-panel{background:var(--sl-bg-2);border:1px solid var(--sl-border);border-radius:var(--radius);overflow:hidden;margin-bottom:22px;} .sl-panel-body{padding:22px 24px;} .dds-eyebrow{display:block;font-family:'JetBrains Mono','SF Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sl-green);font-weight:800;margin-bottom:8px;margin-top:28px;} .dds-title{display:block;font-family:'Archivo Black',sans-serif;font-size:26px;font-weight:900;line-height:1.05;letter-spacing:-.025em;color:var(--sl-t1);margin:8px 0 10px;} .dds-title:first-child{margin-top:0;} .dd-p{font-size:15.5px;color:rgba(245,245,241,0.84);line-height:1.7;margin:0 0 16px;} .dd-p strong{color:var(--sl-green);font-weight:700;} /* โ”€โ”€ table (sl-table) โ”€โ”€ */ .ptable{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;background:var(--sl-bg-2);border-radius:8px;overflow:hidden;} .ptable th{background:var(--sl-bg-3);color:var(--sl-t2);border-bottom:1px solid var(--sl-border);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;padding:10px 14px;text-align:left;} .ptable td{padding:10px 14px;border-bottom:1px solid var(--sl-hair);vertical-align:middle;} .ptable td.r,.ptable th.r{text-align:right;} .ptable tr:last-child td{border-bottom:none;} .ptable tr:hover td{background:var(--sl-bg-3);} .ptable .pname{font-weight:700;color:var(--sl-t1);} .ptable tr.winner-row td{background:var(--sl-green-dim);} .ptable tr.winner-row td.pname{color:var(--sl-green)!important;font-weight:800;} .fa{color:var(--sl-green);font-weight:800;} .fb{color:var(--sl-amber);font-weight:700;} .fc{color:var(--sl-red);font-weight:700;} .pos-neg{color:var(--sl-green);font-weight:800;} /* good scores (under par / +units) */ .neg-neg{color:var(--sl-red);font-weight:800;} /* โ”€โ”€ matchup card (sl-matchup-card) โ”€โ”€ */ .matchup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0 28px;} .matchup-card{background:var(--sl-bg-2);border:1px solid var(--sl-border);border-radius:10px;overflow:hidden;transition:border-color .15s ease;} .matchup-card:hover{border-color:var(--sl-green);} .mc-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--sl-bg-1);} .mc-time{font-size:12px;font-weight:800;color:var(--sl-green);} .mc-tv{font-size:10px;color:var(--sl-t3);} .mc-team{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--sl-hair);} .mc-team:last-child{border-bottom:none;} .mc-team-info{display:flex;align-items:center;gap:10px;} .mc-color{width:4px;height:32px;border-radius:2px;flex-shrink:0;} .mc-name{font-weight:800;font-size:15px;color:var(--sl-t1);} .mc-record{font-size:11px;color:var(--sl-t3);margin-left:6px;font-weight:400;} .mc-odds{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--sl-green);font-size:14px;} .mc-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--sl-bg-3);border-top:1px solid var(--sl-hair);} .mc-spread,.mc-ou{font-size:11px;color:var(--sl-t4);} /* โ”€โ”€ empty state (sl-empty) โ”€โ”€ */ .sl-empty{background:var(--sl-bg-2);border:1px dashed var(--sl-border);border-radius:var(--radius);padding:34px 28px;text-align:center;margin:16px 0 26px;} .sl-empty .ic{font-size:34px;margin-bottom:12px;opacity:.85;} .sl-empty h3{font-family:'Archivo Black',sans-serif;font-size:20px;color:var(--sl-t1);margin-bottom:8px;letter-spacing:-.01em;} .sl-empty p{font-size:14px;color:var(--sl-t3);line-height:1.6;max-width:460px;margin:0 auto 16px;} .sl-empty a.cta{display:inline-block;background:var(--sl-green);color:var(--sl-bg-1);font-weight:800;font-size:13px;padding:11px 22px;border-radius:6px;text-decoration:none;} /* โ”€โ”€ sidebar widgets (sw) โ”€โ”€ */ .sw{background:var(--sl-bg-2);border-radius:var(--radius);border:1px solid var(--sl-border);overflow:hidden;margin-bottom:18px;} .sw-hd{background:var(--sl-bg-1);padding:11px 14px;display:flex;align-items:center;gap:8px;} .sw-hd-t{font-family:'Archivo Black',sans-serif;font-size:14px;font-weight:900;color:var(--sl-t1);text-transform:uppercase;letter-spacing:.04em;} .sw-body{padding:12px 14px;} .sw-row{padding:10px 14px;border-bottom:1px solid var(--sl-hair);display:flex;align-items:flex-start;gap:10px;} .sw-row:last-child{border-bottom:none;} .sw-text{font-size:13px;color:var(--sl-t1);line-height:1.4;font-weight:500;} .sw-sub{font-size:11px;color:var(--sl-t3);margin-top:1px;} .sw-note{padding:9px 14px;background:var(--sl-bg-3);font-size:10px;color:var(--sl-t3);} .stat-r{padding:9px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--sl-hair);} .stat-r:last-child{border-bottom:none;} .stat-l{font-size:12px;color:var(--sl-t3);font-weight:500;} .stat-v{font-size:14px;font-weight:800;color:var(--sl-t1);} .stat-v.g{color:var(--sl-green);} .diamond{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:-1px;min-width:44px;flex-shrink:0;} .diamond.on{color:var(--sl-green);} .diamond.off{color:var(--sl-t3);} .sw-cta{display:block;text-align:center;background:var(--sl-green);color:var(--sl-bg-1);text-decoration:none;font-weight:800;font-size:13px;padding:11px;border-radius:6px;margin-bottom:8px;} .sw-cta.ghost{background:transparent;color:var(--sl-green);border:1px solid var(--sl-green);font-weight:700;font-size:12px;padding:9px;} /* โ”€โ”€ crosslink rail (internal-linking engine) โ”€โ”€ */ .sl-crosslinks{border-top:1px solid var(--sl-border);margin-top:8px;padding-top:18px;} .sl-crosslinks h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-green);margin-bottom:12px;} .sl-crosslinks .links{display:flex;flex-wrap:wrap;gap:8px;} .sl-crosslinks a{font-size:12.5px;color:var(--sl-t2);text-decoration:none;background:var(--sl-bg-2);border:1px solid var(--sl-border);border-radius:var(--radius-pill);padding:7px 14px;min-height:36px;display:inline-flex;align-items:center;} .sl-crosslinks a:hover{border-color:var(--sl-green);color:var(--sl-green);} .disc{font-size:11px;color:var(--sl-t3);background:var(--sl-bg-3);border:1px solid var(--sl-border);border-radius:8px;padding:11px 14px;margin-top:18px;line-height:1.6;} /* โ”€โ”€ footer (identical site-wide) โ”€โ”€ */ footer{background:var(--sl-bg-1);border-top:3px solid var(--sl-green);padding:28px 20px 18px;margin-top:36px;} .ft-inner{max-width:1280px;margin:0 auto;} .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:20px;} .ft-brand-name{font-family:'Archivo Black',sans-serif;font-size:22px;font-weight:900;color:var(--sl-t1);margin-bottom:7px;} .ft-brand-name span{color:var(--sl-green);} .ft-brand p{font-size:13px;color:var(--sl-t3);line-height:1.6;} .ft-col h4{font-size:11px;font-weight:800;color:var(--sl-green);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;} .ft-col a{display:block;font-size:13px;color:var(--sl-t3);text-decoration:none;margin-bottom:6px;} .ft-col a:hover{color:var(--sl-t1);} .ft-bottom{border-top:1px solid var(--sl-border);padding-top:14px;font-size:11px;color:var(--sl-t4);line-height:1.7;} .ft-bottom strong{color:var(--sl-t3);} /* โ”€โ”€ responsive โ”€โ”€ */ @media(max-width:960px){ .main,.ft-grid{grid-template-columns:1fr;} .main>aside{max-width:100%;} .matchup-grid{grid-template-columns:1fr;} .ft-col:nth-child(n+3){display:none;} } @media(max-width:640px){ body{font-size:14px;} .top-bar-inner{height:46px;padding:0 10px;} .logo-text{font-size:19px;} .top-nav a:not(.disc-btn):not(.sub-btn){display:none;} .top-nav .disc-btn,.top-nav .sub-btn{font-size:11px!important;padding:6px 10px!important;} .sport-nav a{font-size:10px;padding:0 11px;letter-spacing:.04em;} .main{padding:16px 12px;gap:18px;} .sl-hero{padding:20px 16px;} .sec-title{font-size:16px;} .dds-title{font-size:22px;} .slstat-v{font-size:22px;} .ptable{font-size:12px;} .ptable th{padding:8px 8px;font-size:9px;} .ptable td{padding:8px 8px;} footer{padding:20px 14px 14px;} .ft-brand-name{font-size:18px;} } @media(max-width:480px){ .ptable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;} .sl-hero-stats{max-width:100%;} }