/* ============ READABILITY BASE (7 Aug, the wife-test) ============ "The whole site is too small to see." Everything is set in rem, so the root is the one honest lever: +6% across every page, every component, both themes. Tiny uppercase labels get a floor bump on top. */ html { font-size: 17px; } /* ============ REBRAND CHROME (site-wide, Aug 2026) ============ The Showroom design language applied to the chrome every page shares: header, ticker, live strip, launch banner, footer, display headings. Loaded after style.css on every template. Page-specific surfaces get their own pass in the walkthrough. */ body { background: #000000; } /* display headings site-wide: Bodoni, white. !important because most pages set their h1 family via classed rules; the brand face must win everywhere. */ h1 { font-family: 'Fraunces', Georgia, serif !important; font-weight: 650 !important; letter-spacing: 0.01em; } /* header: pure black bar, single gold hairline — the Direction-4 standard */ .site-header { background: rgba(0, 0, 0, 0.92) !important; border-bottom: 1px solid rgba(212, 175, 55, 0.30) !important; box-shadow: none !important; } .main-nav .nav-link { color: #C6C6C6; } .main-nav .nav-link:hover { color: #FFFFFF; } .main-nav .nav-link.active { color: #D4AF37; } .nav-founders { border: 1px solid rgba(230, 200, 96, 0.55) !important; border-radius: 999px !important; background: transparent !important; color: #E6C860 !important; padding: 4px 14px !important; box-shadow: none !important; } .nav-founders:hover { border-color: #E6C860 !important; color: #E6C860 !important; } .nav-cta { background: #D4AF37 !important; color: #000000 !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 700; } .nav-cta:hover, .nav-cta:focus-visible { background: #E6C860 !important; transform: none !important; } .nav-search, .nav-search-input, .nav-search .nav-search-toggle, .nav-search button { border-radius: 0 !important; } /* Direction-4 header: the gold CTA is ALWAYS in the bar. The always-open search field was eating the row's slack (style.css drops the CTA at 1101-1240px to compensate), so the search now rests as a compact icon and expands on focus. */ .nav-search--bar { position: relative; width: 44px; min-width: 44px; overflow: hidden; padding: 0 12px; cursor: pointer; transition: width 160ms ease; } .nav-search--bar .nav-search-input { position: absolute; inset: 0; width: 100% !important; height: 100%; padding: 0 10px 0 36px !important; border: 0 !important; background: transparent !important; opacity: 0; cursor: pointer; } .nav-search--bar:focus-within { width: 230px; } .nav-search--bar:focus-within .nav-search-input { opacity: 1; cursor: text; } .nav-search--bar:focus-within .nav-search-icon { opacity: 1 !important; } @media (min-width: 1021px) { .nav-actions .nav-cta { display: inline-flex !important; } } /* Direction-4 header, exact cut (Paul's mock): the desktop bar is mark · Bets · Predictions · Tools · Previews · Track Record · Founders pill · gold CTA. Live lives in the Predictions dropdown; Leagues and search stay in the mobile drawer only. Applies only when the bar is a bar, not the drawer. 13 Aug: breakpoint corrected 901 -> 1101. The burger takes over at 1100, so the 901-1100 band was getting BAR rules inside the DRAWER - which is how Live and Leagues vanished from small-tablet menus. */ @media (min-width: 1021px) { .nav-link-live { display: none !important; } .nav-secondary .nav-leagues { display: none !important; } .nav-search--bar { display: none !important; } .nav-link-meta { color: #C6C6C6 !important; opacity: 1 !important; } .nav-secondary { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; } } /* launch banner: black + gold hairline, no rounded chip look */ .mm-launch-banner { background: #000000 !important; border-bottom: 1px solid rgba(212, 175, 55, 0.30) !important; } /* results ticker: showroom strip - black ground, hairline frame, mono label */ .results-ticker { background: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 0 !important; border-right: 0 !important; } .results-ticker .ticker-label { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #E6C860; opacity: 1 !important; } .ticker-item { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .outcome-badge { font-family: ui-monospace, Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.08em; border-radius: 0 !important; } /* live strip: same treatment */ .live-strip { background: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 0 !important; border-right: 0 !important; } .live-strip-badge { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.14em; border-radius: 0 !important; } /* footer: black, hairline top, quiet */ .site-footer, footer { background: #000000 !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-cta { background: #000000 !important; border-top: 1px solid rgba(212, 175, 55, 0.22) !important; } /* generic surfaces that read as "old chrome": tone panels to the showroom greys */ .tips-strip { background: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* readability: site-wide muted text one step brighter, warmed to the brand */ :root { --text-muted: #BDB9AF; } /* ticker: capsules out, clean typographic strip in (desktop and mobile). WIN/LOSS as mono marks, ivory teams, grey market, gold interpunct rhythm. */ .ticker-item { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; } .ticker-item::after { content: "\00B7"; color: rgba(212, 175, 55, 0.55); margin: 0 20px; font-weight: 700; } .ticker-match { color: #F0EDE6 !important; font-weight: 600; } .ticker-market { color: #BDB9AF !important; } .outcome-badge { padding: 2px 8px !important; } .results-ticker { padding-top: 11px !important; padding-bottom: 11px !important; } /* ticker composition fix: the label owns the left edge on solid black above the track; the scroll fades in/out at both ends instead of hard-clipping */ .results-ticker { position: relative; overflow: hidden; } .results-ticker .ticker-label { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); background: #000; padding: 4px 16px 4px 0; z-index: 2; white-space: nowrap; } .results-ticker .ticker-track { margin-left: 170px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent); } @media (max-width: 700px) { .results-ticker .ticker-label { position: static; transform: none; display: block; padding: 0 0 6px 16px; background: transparent; } .results-ticker .ticker-track { margin-left: 0; } } /* header typography: match the locked mock cut exactly - lighter spaced wordmark, calmer link weight, mock row padding */ .site-logo-word { font-weight: 500 !important; font-size: 0.8rem !important; letter-spacing: 0.2em !important; } /* Bar-only type tuning. 13 Aug: scoped to the desktop bar - unscoped, the !important font-size shrank the rebuilt drawer's 52px rows to bar size. */ @media (min-width: 1021px) { .main-nav .nav-link, .main-nav .nav-leagues-toggle { font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0 !important; } } .site-header-inner { padding-top: 13px !important; padding-bottom: 13px !important; } /* the container-level mask was fading the LABEL itself (left 8% transparent). The track owns the edge fade now; the container must not mask anything. */ .results-ticker { -webkit-mask-image: none !important; mask-image: none !important; } /* free-vs-members: the two cards sit level */ .fvm .fvm-grid { align-items: stretch !important; } .fvm .fvm-col { align-self: stretch !important; display: flex; flex-direction: column; } /* dropdown active state: gold text only, never a filled box */ .nav-leagues.active > .nav-leagues-toggle { background: transparent !important; } /* GLOBAL (Aug 2026, Paul's call): the football pitch drawn behind every page (body::before = centre circle + lines + touchlines, body::after = penalty boxes) is gone site-wide. The black stays clean; hero-clean's homepage-only kill is now redundant but harmless. */ body::before, body::after { display: none !important; content: none !important; } /* METAL CTA: the nav's Build a Bet + primary gold buttons site-wide get the gradient-gold face with bevel + hover bloom (Aug 2026). */ .nav-cta, .newsletter-form button, .footer-capture button { background: linear-gradient(180deg, #F3DD92 0%, #E6C860 30%, #D4AF37 100%) !important; color: #141005 !important; font-weight: 800 !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 10px 26px -14px rgba(212, 175, 55, 0.65); transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease; } .nav-cta:hover, .newsletter-form button:hover, .footer-capture button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 14px 32px -14px rgba(212, 175, 55, 0.85); } /* calm-down: metal is reserved for the two money CTAs (nav Build a Bet + page-primary). Newsletter/footer email buttons go flat gold. */ .newsletter-form button, .footer-capture button { background: #D4AF37 !important; box-shadow: none !important; transform: none !important; font-weight: 700 !important; } .newsletter-form button:hover, .footer-capture button:hover { background: #E6C860 !important; transform: none !important; box-shadow: none !important; } /* ============ SITE-WIDE LAWS (Aug 2026 page sweep) ============ */ /* SQUARE LAW: every corner on the site is square. Genuine dots re-round. */ *, *::before, *::after { border-radius: 0 !important; } .mp-chip-dot, .sr-dot, .live-dot, .ticker-dot, .status-dot { border-radius: 50% !important; } /* FORM CHIP LAW: W green, L red, D grey - everywhere, not just previews */ .form-w, .fm-w { background: rgba(46, 204, 113, 0.15) !important; color: #4ADE80 !important; } .form-l, .fm-l { background: rgba(255, 107, 107, 0.14) !important; color: #FF8484 !important; } .form-d, .fm-d { background: rgba(255, 255, 255, 0.08) !important; color: #CBC7BE !important; } /* WIN LAW: wins are GREEN site-wide (ticker precedent); red stays for losses */ .outcome-badge.win, .tr-outcome-badge.win { background: rgba(46, 204, 113, 0.15) !important; color: #4ADE80 !important; } .tr-why-result.win { color: #4ADE80 !important; } .tr-chart-bar.wins { background: linear-gradient(180deg, #2ECC71, #17693c) !important; } /* PROBABILITY BAR LAW (from previews, now global - league pages share the same component but never loaded the previews stylesheet): red is never used for a low chance. Gold high, soft gold medium, quiet grey low. */ .preview-mini-bar-row .bar-track { background: rgba(255, 255, 255, 0.07) !important; } .preview-mini-bar-row .bar-fill.high { background: linear-gradient(90deg, #D4AF37, #E6C860) !important; } .preview-mini-bar-row .bar-fill.medium { background: rgba(230, 200, 96, 0.55) !important; } .preview-mini-bar-row .bar-fill.low { background: rgba(255, 255, 255, 0.18) !important; } .preview-mini-bar-row .bar-val { color: #DAD6CC !important; } .preview-mini-bar-row .bar-val.high { color: #E6C860 !important; font-weight: 700 !important; } .preview-mini-bar-row .bar-val.low { color: #B8B3A9 !important; } /* ============ DIRECTION B: IVORY DATA (Paul's pick, 6 Aug) ============ Numbers wear warm white - the brightest thing on any screen. Gold returns to structure, labels and CTAs. Cards lift a step off pure black. Buttons get the full four-state treatment. */ /* prose numbers: white, not foil */ .num-pop { color: #FAF7EF !important; } /* previews/league bars: the favoured % is white */ .preview-mini-bar-row .bar-val.high { background: none !important; -webkit-text-fill-color: #FAF7EF !important; color: #FAF7EF !important; text-shadow: none !important; } .pv-count-line strong { background: none !important; -webkit-text-fill-color: #FAF7EF !important; color: #FAF7EF !important; text-shadow: none !important; } /* proof pages: stat values in ivory (labels stay gold) */ .tr-stat-value { background: none !important; -webkit-text-fill-color: #FAF7EF !important; color: #FAF7EF !important; } /* BUTTON LAW: four states, fast and tactile rest -> hover (brighten/lift, 140ms) -> pressed (compress) -> focus ring */ button, .nav-cta, .mp-rail-btn, .mp-buildstrip-cta, .mpb-goto, .mp-share-btn, input[type="submit"], .related-all-link, .mp-rail-more { transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease, border-color 140ms ease; } button:active, .nav-cta:active, .mp-rail-btn:active, .mp-buildstrip-cta:active, .mpb-goto:active, .mp-share-btn:active, input[type="submit"]:active { transform: scale(0.98) !important; filter: brightness(0.96); } :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid #E6C860 !important; outline-offset: 2px !important; } /* ============ B+ AMPLIFIER: make Ivory Data unmistakable ============ */ /* preview cards lift off the page like the match cards */ .preview-card { background: linear-gradient(#151515, #101010) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.45), rgba(212, 175, 55, 0.07) 45%, rgba(230, 200, 96, 0.28)) border-box !important; } .preview-mini-bar-row .bar-val.high { font-size: 1.18rem !important; } /* ============ MINTED CTA v2: dimensional gold (Paul: '3D smart finish') ============ A struck coin, not a filled rectangle: specular light at top-left, curved bottom shade, machined rim, a visible SIDE WALL for thickness, letterpress text, and real travel on press. */ .nav-cta, .mp-buildstrip-cta, .mp-rail-btn, .mpb-goto, .mobile-sticky-cta a { background: radial-gradient(120% 90% at 28% 0%, rgba(255, 255, 255, 0.5), transparent 42%), linear-gradient(180deg, #F6E3A0 0%, #E2C25A 38%, #C89B2A 78%, #B8871F 100%) !important; border: 1px solid #8A6A16 !important; color: #231A04 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 3px rgba(90, 60, 0, 0.45), 0 1px 0 #6B510F, 0 3px 0 #4A370A, 0 10px 22px -8px rgba(0, 0, 0, 0.7), 0 14px 30px -12px rgba(212, 175, 55, 0.5) !important; transform: translateY(0); } .nav-cta:hover, .mp-buildstrip-cta:hover, .mp-rail-btn:hover, .mpb-goto:hover, .mobile-sticky-cta a:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(90, 60, 0, 0.45), 0 1px 0 #6B510F, 0 4px 0 #4A370A, 0 12px 26px -8px rgba(0, 0, 0, 0.7), 0 18px 36px -12px rgba(212, 175, 55, 0.65) !important; } .nav-cta:active, .mp-buildstrip-cta:active, .mp-rail-btn:active, .mpb-goto:active, .mobile-sticky-cta a:active { transform: translateY(2px) scale(0.995) !important; filter: brightness(0.97); box-shadow: inset 0 1px 2px rgba(90, 60, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 #4A370A, 0 4px 10px -4px rgba(0, 0, 0, 0.6) !important; } /* Gold tool CTAs: dark text, never gold-on-gold or white-on-gold */ .tool-cta-btn, .tool-cta-btn:visited { color: #141005 !important; } .tool-cta-btn:hover { background: #E6C860 !important; color: #141005 !important; } /* PAGE-TITLE LAW: page h1s are ivory - gold gradient-clip retired on titles (foil stays on stat numbers and the homepage hero accent only). */ .about-hero h1, .about-hero h2, .sat-acca-hero h1, .offers-hero h1, .accuracy-hero h1, .efl-hero h1 { background: none !important; -webkit-text-fill-color: #FAF7EF !important; color: #FAF7EF !important; } /* ============ TOOLS: de-gold + quiet controls ============ */ /* Titles ivory, body grey - gold only on the Open accent and verdicts. */ .tool-hero h1 { background: none !important; -webkit-text-fill-color: #FAF7EF !important; color: #FAF7EF !important; font-family: 'Fraunces', Georgia, serif !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } .tool-hub-name { color: #F2F0EA !important; } .tool-hub-desc { color: #A9A49B !important; } .tool-hub-open { color: #D4AF37 !important; } /* Result numbers ivory; positive verdicts keep the gold accent */ .tool-returns-val, .tool-result-val { color: #FAF7EF !important; } .tool-result-val.is-pos, .tool-row-v.pos, .tool-verdict.pos { color: #E6C860 !important; } /* Remove is a quiet hairline control, not a second gold CTA */ .tool-cta-btn.leg-remove { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #A9A49B !important; } .tool-cta-btn.leg-remove:hover { border-color: #FF8484 !important; color: #FF8484 !important; background: transparent !important; } /* ============ LOCAL SLIP (site-wide, quiet ledger) ============ */ #fbb-slip-chip { /* Bottom-LEFT. The AI chat button owns the bottom-right corner (z 1200, right:20 bottom:20) and the slip chip used to sit underneath it - two fixed widgets in one corner meant whichever was on top stole the other's taps. Separate corners, no z-index contest. */ position: fixed; left: 18px; bottom: 18px; z-index: 900; display: flex; align-items: center; gap: 7px; padding: 11px 18px; background: #D4AF37; color: #141005; border: 0; font: 700 0.86rem 'Outfit', sans-serif; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7); } #fbb-slip-chip b { font-family: ui-monospace, Consolas, monospace; } /* Empty slip: quieter chip, still present - the slip is a feature, not a ghost. Fills gold the moment a leg lands. */ #fbb-slip-chip.fsc-empty { background: #101010; color: #F2F0EA; border: 1px solid rgba(212, 175, 55, 0.55); } #fbb-slip-chip.fsc-empty b { color: #A9A49B; font-weight: 600; } .fsp-empty p { color: #A9A49B; font-size: 0.8rem; line-height: 1.55; margin: 0 0 10px; } .fsp-plus { display: inline-block; width: 15px; height: 15px; line-height: 13px; text-align: center; border: 1px solid rgba(212, 175, 55, 0.6); color: #E6C860; font: 700 0.7rem ui-monospace, Consolas, monospace; } .fsp-browse { display: block; text-align: center; background: #D4AF37; color: #141005; font: 700 0.84rem 'Outfit', sans-serif; padding: 11px; text-decoration: none; margin-top: 12px; } .fsp-browse:hover { background: #E6C860; color: #141005; } .fsr-empty { color: #A9A49B; font-size: 0.78rem; line-height: 1.55; margin: 6px 0 0; } /* Phones: the slip panel takes the full width so nothing is cramped or clipped. */ @media (max-width: 480px) { #fbb-slip-panel { left: 14px; right: 14px; width: auto; max-height: 58vh; } #fbb-slip-chip { left: 14px; } } #fbb-slip-panel { position: fixed; left: 18px; bottom: 66px; z-index: 900; width: 300px; max-height: 70vh; overflow: auto; background: #101010; border: 1px solid rgba(255, 255, 255, 0.16); padding: 16px; display: none; } #fbb-slip-panel.open { display: block; } .fsp-hd { font: 700 0.95rem 'Outfit', sans-serif; color: #F2F0EA; margin-bottom: 10px; } .fsp-hd span { color: #A9A49B; font-weight: 500; font-size: 0.75rem; } .fsp-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fsp-l { flex: 1; min-width: 0; } .fsp-l b { display: block; color: #F2F0EA; font-size: 0.83rem; font-weight: 600; } .fsp-l i { display: block; color: #A9A49B; font-size: 0.68rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsp-o { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #FAF7EF; font-size: 0.85rem; } .fsp-x { background: none; border: 0; color: #6d675d; cursor: pointer; font-size: 0.78rem; padding: 2px 4px; } .fsp-x:hover { color: #FF8484; } .fsp-stake { display: flex; align-items: center; gap: 7px; margin: 12px 0 10px; color: #A9A49B; font-size: 0.76rem; } .fsp-sk { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #F2F0EA; padding: 5px 12px; font: 700 0.76rem ui-monospace, Consolas, monospace; cursor: pointer; } .fsp-sk.on { border-color: #D4AF37; color: #E6C860; } .fsp-ret { border: 1px solid rgba(255, 255, 255, 0.16); padding: 10px 12px; margin-bottom: 10px; } .fsp-ret b { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; color: #FFFFFF; display: block; } .fsp-ret span { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; color: #E6C860; font-weight: 700; } .fsp-copy { width: 100%; background: #D4AF37; border: 0; color: #141005; font: 700 0.86rem 'Outfit', sans-serif; padding: 11px; cursor: pointer; margin-bottom: 8px; } .fsp-copy:hover { background: #E6C860; } .fsp-clear { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); color: #A9A49B; font: 600 0.76rem 'Outfit', sans-serif; padding: 8px; cursor: pointer; } .fsr-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.84rem; } .fsr-row b { color: #F2F0EA; font-weight: 600; } .fsr-m { flex: 1; color: #A9A49B; font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsr-o { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #FAF7EF; } .fsr-ret { margin-top: 10px; } .fsr-ret b { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; color: #fff; } .fsr-ret span { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; color: #E6C860; font-weight: 700; } .pv3-leg.in-slip { background: rgba(255, 255, 255, 0.07) !important; } .pv3-leg.in-slip::before { content: "IN YOUR SLIP"; position: absolute; top: 8px; right: 9px; font: 700 0.52rem ui-monospace, Consolas, monospace; letter-spacing: 0.1em; color: #E6C860; border: 1px solid rgba(230, 200, 96, 0.5); padding: 2px 7px; } .pv3-leg.in-slip.picked::after { display: none; } /* SLIP SITE-LAW: any displayed bet is addable. Universal affordance. */ .fbb-addable { cursor: pointer; position: relative; } .fbb-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; border: 1px solid rgba(255, 255, 255, 0.25); color: #A9A49B; font: 700 0.72rem ui-monospace, Consolas, monospace; flex: 0 0 20px; } .fbb-addable:hover .fbb-add { border-color: rgba(230, 200, 96, 0.6); color: #E6C860; } .fbb-addable.in-slip { background: rgba(255, 255, 255, 0.05); } .fbb-addable.in-slip .fbb-add { border-color: #D4AF37; color: #E6C860; } .preview-mini-bar-row.fbb-addable { padding-right: 2px; } .bm-card-leg.fbb-addable .fbb-add { margin-left: 6px; } /* ============ SOCIAL nav dropdown (site-wide, 7 Aug) ============ */ /* The wrapper borrows .nav-leagues for its dropdown mechanics, but that class is drawer-only on desktop - Social is a bar item everywhere. */ /* 13 Aug: DESKTOP-ONLY. These were unscoped, and the display:block !important forced the Social submenu permanently open inside the mobile drawer as a 210px box - the exact "looks buggy" panel in the reader's screenshot. The drawer (max-width:1100) styles Social itself as standard accordion rows. */ @media (min-width: 1021px) { .nav-group.nav-social { display: block !important; position: relative; } .nav-social .nav-social-menu { display: block !important; grid-template-columns: none !important; left: auto !important; right: 0 !important; width: 210px !important; min-width: 0 !important; max-width: none !important; background: #101010 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 8px 0 !important; } .nav-social .nav-social-menu a { display: block !important; padding: 9px 16px !important; white-space: nowrap; color: #DAD6CC !important; font-size: 0.86rem !important; text-decoration: none !important; } .nav-social .nav-social-menu a:hover { color: #E6C860 !important; background: rgba(255, 255, 255, 0.05); } } /* ============ HEADER: QUIET LEDGER (7 Aug) ============ The bar joins the settled language. The minted "struck coin" CTA and the rounded Founders pill were the last of the 3D era; the site below them went flat and square. Appended last so it wins the cascade. */ .nav-cta { background: #D4AF37 !important; border: 0 !important; color: #141005 !important; text-shadow: none !important; box-shadow: none !important; font-weight: 700 !important; letter-spacing: 0.02em; transform: none !important; filter: none !important; transition: background 140ms ease !important; } .nav-cta:hover, .nav-cta:focus-visible { background: #E6C860 !important; transform: none !important; filter: none !important; box-shadow: none !important; } .nav-cta:active { background: #C89B2A !important; transform: none !important; box-shadow: none !important; } .nav-founders { border-radius: 0 !important; background: transparent !important; border: 1px solid rgba(212, 175, 55, 0.5) !important; color: #E6C860 !important; transform: none !important; } .nav-founders:hover { background: rgba(212, 175, 55, 0.1) !important; border-color: #D4AF37 !important; } /* link layer: quiet support, ivory on hover, gold only when you are there */ .main-nav .nav-link { color: #CFCBC2; } .main-nav .nav-link:hover { color: #FAF7EF; } .main-nav .nav-link.active { color: #E6C860; } .nav-leagues-caret { color: #7A756C; } /* ============ PHONE FIXES (7 Aug, from device screenshots) ============ */ @media (max-width: 700px) { /* honesty badges wrap inside their card instead of running off it */ .tier-badge, .sa-leg-badge, .sa-pool-badge { white-space: normal !important; line-height: 1.35 !important; max-width: 100%; text-align: left; } /* floating slip chip: smaller footprint, less collision with page CTAs */ /* left, matching the corner move — leaving this as right: pinned BOTH edges once the base rule went left, stretching the chip full-width. */ #fbb-slip-chip { padding: 9px 13px; font-size: 0.78rem; left: 12px; right: auto; bottom: 12px; } } /* (13 Aug) The old burger-drawer social patch that lived here is gone: the rebuilt drawer in style.css owns ALL mobile menu styling now, and this block's 900px breakpoint never matched the 1100px burger anyway. */ /* == GOLD IS DRAWN, NEVER POURED (4 Sep, owner's law): the shared CTAs trade their solid fills for outline + gold text. == */ .footer-cta-btn, .tool-cta-btn, .tr-btn-primary, .newsletter-signup-card .signup-form button { background:transparent !important; border: 1.5px solid #D5B054 !important; color: #E3C368 !important; } .footer-cta-btn:hover, .tool-cta-btn:hover, .tr-btn-primary:hover, .newsletter-signup-card .signup-form button:hover { background:transparent !important; color: #F2E3AE !important; } /* DRAWN GOLD, the header and capture buttons (5 Sep): the last poured-gold surfaces. Outline and text only, 12px doors; hover brightens the line, never fills it. */ .nav-cta, .nav-cta:hover, .nav-cta:focus-visible, .newsletter-form button, .footer-capture button, .newsletter-form button:hover, .footer-capture button:hover, .mp-rail-btn, .mp-buildstrip-cta, .mpb-goto, .mobile-sticky-cta a, .mp-rail-btn:hover, .mp-buildstrip-cta:hover, .mpb-goto:hover, .mobile-sticky-cta a:hover { background: transparent !important; border: 1.5px solid #D5B054 !important; color: #E3C368 !important; border-radius: 12px !important; box-shadow: none !important; } .nav-cta:hover, .newsletter-form button:hover, .footer-capture button:hover, .mp-rail-btn:hover, .mp-buildstrip-cta:hover, .mpb-goto:hover, .mobile-sticky-cta a:hover { border-color: #F2E3AE !important; color: #F2E3AE !important; } /* ============ FBB PRO, ONE LOOK (24 Sep 2026) ============ The site sold Pro in three voices and marked it six ways: an uppercase mono tag on the sheet, a gold pill on the homepage, "Members" on /inside, "FBB Pro" in a grey chip on the match page. A visitor should meet ONE product. These are the only Pro marks now, defined here because rebrand.css is the one sheet every template links, and !important because most pages restyle their own chips in a later