/* ============================================================ SFL BASE STYLESHEET Shared across all SFL website pages. DO NOT add page-specific CSS here. Font paths are relative to this file's location. ============================================================ */ /* ============================================================ FONTS ============================================================ */ @font-face { font-family: 'BasementGrotesque'; src: url('/site-media/fonts/basement-grotesque-black.otf?v=202607021800') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* Scale-matched fallback: Helvetica/Arial Bold bumped to Basement Grotesque's cap height (cap/em 0.780 vs 0.716) so headlines don't resize when the real font swaps in. Cleaner shape than Arial Black; thickened with a stroke while loading (see the html:not(.bg-loaded) rule below). */ @font-face { font-family: 'BG Fallback'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'); size-adjust: 109%; font-weight: 700; font-style: normal; } /* Scale-matched fallback for the label/eyebrow font (BasementGrotesqueRegular, cap/em 0.780) using plain Arial (0.716) bumped to the same cap height. */ @font-face { font-family: 'BG Label Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 109%; font-weight: 400; font-style: normal; } @font-face { font-family: 'BasementGrotesqueCondensed'; src: url('/site-media/fonts/basement-grotesque-condensed.otf?v=202607021800') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'BasementGrotesqueRegular'; src: url('/site-media/fonts/basement-grotesque-regular.otf?v=202607021800') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/site-media/fonts/figtree-400.woff2?v=202607021800') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 98%; } @font-face { font-family: 'Figtree'; src: url('/site-media/fonts/figtree-500.woff2?v=202607021800') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; size-adjust: 98%; } @font-face { font-family: 'Figtree'; src: url('/site-media/fonts/figtree-600.woff2?v=202607021800') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; size-adjust: 98%; } @font-face { font-family: 'Figtree'; src: url('/site-media/fonts/figtree-700.woff2?v=202607021800') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 98%; } /* ============================================================ TOKENS — PALETTE A (CONSUMER) ============================================================ */ :root { --bg-primary: #0A0E1A; --bg-secondary: #111726; --bg-darkest: #05080F; --bg-surface: #1F2937; --gold: #F2C200; --gold-hi: #F4D100; --white: #FFFFFF; --text-sec: #B8C0CC; --text-muted: #6B7484; --font-display: 'BasementGrotesque', 'BG Fallback', 'Arial Black', sans-serif; --font-label: 'BasementGrotesqueRegular', 'BG Label Fallback', 'Arial', sans-serif; --font-body: 'Figtree', 'Aptos Display', 'Segoe UI', 'Arial', sans-serif; } /* While the real display font (Basement Grotesque) is still loading, thicken the headline fallback (Helvetica/Arial Bold) with a thin stroke so it reads heavier on any system. sfl-scripts.js adds .bg-loaded to once the font loads, which removes the stroke. Scoped to headings + the statement line so it never touches body copy. paint-order keeps the glyph shape clean. */ html:not(.bg-loaded) h1, html:not(.bg-loaded) h2, html:not(.bg-loaded) h3, html:not(.bg-loaded) .statement-headline { -webkit-text-stroke: 0.5px currentColor; paint-order: stroke fill; } /* ============================================================ RESET AND BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--white); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; padding-top: calc(50px + env(safe-area-inset-top, 0px)); /* 50px countdown strip + phone notch inset. Re-enable toolbar -> 102px */ } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ============================================================ EDIT TOOLBAR ============================================================ */ /* SFL Design System (in-page edit toolbar) — DISABLED for production. The markup and the toggleEdit()/saveClean() functions stay intact. To turn it back ON: set #edit-toolbar display back to flex, AND restore the offsets it pushes down: body padding-top 102px, #countdown-strip top 52px, #site-nav top 102px, plus the 4 pages' mobile @media body padding-top back to 102px (Founders, About, Heritage, SignUp). */ #edit-toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; height: 52px; background: rgba(5,8,15,0.98); border-bottom: 2px solid var(--gold); display: none; align-items: center; justify-content: space-between; padding: 0 24px; gap: 16px; } .tb-left { display: flex; align-items: center; gap: 16px; } .tb-brand { font-family: var(--font-label); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); } .tb-hint { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); } .tb-right { display: flex; align-items: center; gap: 10px; } #btn-edit-toggle { background: transparent; border: 1px solid var(--text-muted); color: var(--text-sec); font-family: var(--font-label); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 7px 16px; cursor: pointer; transition: border-color .2s, color .2s; } #btn-edit-toggle:hover, #btn-edit-toggle.on { border-color: var(--gold); color: var(--gold); background: rgba(242,194,0,.08); } #btn-save { background: var(--gold); border: none; color: #000; font-family: var(--font-label); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 9px 22px; cursor: pointer; font-weight: 700; transition: background .2s; } #btn-save:hover { background: var(--gold-hi); } /* ============================================================ COUNTDOWN TICKER ============================================================ */ #countdown-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 9500; height: calc(50px + env(safe-area-inset-top, 0px)); box-sizing: border-box; background: rgba(5,8,15,0.98); border-bottom: 2px solid var(--gold); display: flex; align-items: center; padding: env(safe-area-inset-top, 0px) max(40px, env(safe-area-inset-right, 0px)) 0 max(40px, env(safe-area-inset-left, 0px)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .countdown-inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 20px; } .cd-badge { font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .cd-divider { width: 1px; height: 20px; background: rgba(255,255,255,.15); flex-shrink: 0; } .cd-live-label { font-family: var(--font-label); font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .cd-ticker { display: flex; align-items: baseline; flex-shrink: 0; } .cd-unit { display: flex; align-items: baseline; gap: 3px; } .cd-num { font-family: var(--font-display); font-size: 20px; color: var(--white); letter-spacing: 1px; min-width: 2ch; text-align: right; line-height: 1; } .cd-unit-label { font-family: var(--font-label); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-right: 10px; } .cd-sep { font-family: var(--font-display); font-size: 16px; color: rgba(242,194,0,.4); margin: 0 4px 0 0; line-height: 1; } .cd-date-label { font-family: var(--font-label); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-sec); white-space: nowrap; flex-shrink: 0; } .cd-spacer { flex: 1; } .countdown-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Watch Live styled as a clear/ghost button until the league is live (was solid gold). */ .cd-btn-primary { font-family: var(--font-label); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; background: transparent; color: var(--text-sec); border: 1px solid rgba(255,255,255,.2); padding: 8px 18px; text-decoration: none; font-weight: 700; white-space: nowrap; transition: border-color .2s, color .2s; } .cd-btn-primary:hover { border-color: var(--white); color: var(--white); } .cd-btn-ghost { font-family: var(--font-label); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-sec); text-decoration: none; border: 1px solid rgba(255,255,255,.2); padding: 8px 18px; white-space: nowrap; transition: border-color .2s, color .2s; } .cd-btn-ghost:hover { border-color: var(--white); color: var(--white); } /* Countdown ribbon on phones: shrink so the single row fits (the badge, ticker and Watch Live button stay; secondary label/divider drop). */ @media (max-width: 600px) { #countdown-strip { padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); } .countdown-inner { gap: 8px; } .cd-divider, .cd-live-label { display: none; } .cd-badge { font-size: 14px; letter-spacing: 1px; } .cd-num { font-size: 15px; min-width: 2ch; } .cd-unit-label { font-size: 7px; letter-spacing: 1px; margin-right: 5px; } .cd-sep { font-size: 12px; margin: 0 2px 0 0; } .cd-btn-primary { font-size: 8px; letter-spacing: 1px; padding: 7px 12px; } } @media (max-width: 380px) { .cd-badge { font-size: 13px; letter-spacing: .5px; } .cd-unit-label { display: none; } } /* ============================================================ NAVIGATION ============================================================ */ #site-nav { position: sticky; top: calc(50px + env(safe-area-inset-top, 0px)); z-index: 9000; height: 68px; background: rgba(10,14,26,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(242,194,0,.15); display: flex; align-items: center; justify-content: space-between; padding: 0 max(48px, env(safe-area-inset-right, 0px)) 0 max(48px, env(safe-area-inset-left, 0px)); } .nav-logo .med img { height: 34px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a, .nav-links a:visited { font-family: var(--font-label); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); text-decoration: none; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-signup { font-family: var(--font-label); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; background: var(--gold); color: #000; padding: 10px 24px; text-decoration: none; font-weight: 700; transition: background .2s; } .nav-signup:hover { background: var(--gold-hi); } /* ============================================================ MOBILE NAV — hamburger + full-screen overlay (built by sfl-scripts.js) Toggle shows <=960px; overlay is hidden on desktop. ============================================================ */ .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); transition: transform .25s ease, opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 100000; background: linear-gradient(180deg, #05080F 0%, #0A0E1A 100%); padding: 78px 26px 44px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } body.menu-open { overflow: hidden; } .mobile-menu-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: transparent; border: 0; color: var(--white); font-size: 34px; line-height: 1; cursor: pointer; } .mobile-menu nav { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; width: 100%; } .mobile-menu a { font-family: var(--font-display); text-transform: uppercase; color: var(--white); text-decoration: none; font-size: clamp(26px, 7vw, 34px); letter-spacing: 1px; line-height: 1.1; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-menu a:hover, .mobile-menu a:active { color: var(--gold); } .mobile-menu .mm-section-label { font-family: var(--font-display); font-size: clamp(26px, 7vw, 34px); letter-spacing: 1px; text-transform: uppercase; color: var(--white); padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-menu .mm-sub { display: flex; flex-direction: column; } .mobile-menu .mm-sub a { font-family: var(--font-label); font-size: 15px; letter-spacing: 1.5px; color: var(--text-sec); padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); } .mobile-menu .mm-sub a:hover, .mobile-menu .mm-sub a:active { color: var(--gold); } .mobile-menu .mm-sub a.mm-indent { padding-left: 22px; } .mobile-menu .mm-sub a.mm-indent::before { content: "\2013"; color: var(--text-muted); margin-right: 8px; } .mobile-menu .mm-signup { margin-top: 26px; background: var(--gold); color: #000 !important; text-align: center; font-family: var(--font-label); font-size: 14px; letter-spacing: 2px; padding: 16px; border-bottom: 0; } .mobile-menu .mm-signup:hover { color: #000 !important; } @media (min-width: 961px) { .mobile-menu, .nav-toggle { display: none !important; } } @media (max-width: 960px) { .nav-links { display: none !important; } .nav-toggle { display: flex; margin-left: auto; } /* Sign Up pinned to the centre of the top bar (logo left, hamburger right). */ .nav-signup { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 16px; font-size: 9px; letter-spacing: 2px; } } @media (max-width: 360px) { .nav-signup { padding: 8px 12px; letter-spacing: 1.5px; } } .nav-dropdown { position: relative; } .nav-dropdown-menu { position: absolute; top: calc(100% + 1px); left: -16px; background: rgba(10,14,26,.98); border: 1px solid rgba(242,194,0,.2); border-top: 2px solid var(--gold); min-width: 240px; display: flex; flex-direction: column; z-index: 9999; padding: 8px 0; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .18s, transform .18s; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown-menu a { font-family: var(--font-label); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-sec); text-decoration: none; padding: 11px 20px; transition: color .15s, background .15s; } .nav-dropdown-menu a:hover { color: var(--gold); background: rgba(242,194,0,.06); } .nav-live-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label); font-size: 7px; letter-spacing: 1.5px; text-transform: uppercase; background: rgba(242,194,0,.12); color: var(--gold); border: 1px solid rgba(242,194,0,.35); padding: 2px 7px; flex-shrink: 0; animation: nav-live-flash 1.6s ease-in-out infinite; } .nav-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: nav-pulse 1.5s ease-in-out infinite; } @keyframes nav-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(242,194,0,.65); } 50% { opacity: .3; transform: scale(1.45); box-shadow: 0 0 7px 2px rgba(242,194,0,.55); } } @keyframes nav-live-flash { 0%, 100% { background: rgba(242,194,0,.10); border-color: rgba(242,194,0,.3); box-shadow: 0 0 0 0 rgba(242,194,0,0); } 50% { background: rgba(242,194,0,.18); border-color: rgba(242,194,0,.75); box-shadow: 0 0 9px 0 rgba(242,194,0,.35); } } /* OTS-2 is a child of Online Tournament Series; indent it and mark it with a nesting connector. */ .nav-dropdown-menu a.has-badge { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 42px; position: relative; } .nav-dropdown-menu a.has-badge::before { content: "\2013"; position: absolute; left: 24px; top: 50%; transform: translateY(-55%); color: var(--text-muted); font-size: 12px; line-height: 1; pointer-events: none; } .nav-dropdown-trigger { font-family: var(--font-label); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); cursor: pointer; transition: color .2s; user-select: none; } .nav-dropdown:hover .nav-dropdown-trigger { color: var(--gold); } /* ============================================================ BUTTONS ============================================================ */ .btn-gold { display: inline-block; font-family: var(--font-label); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; background: var(--gold); color: #000; padding: 14px 34px; text-decoration: none; font-weight: 700; transition: background .2s, transform .22s ease, box-shadow .22s ease; } .btn-gold:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(242,194,0,.25); } .btn-ghost { display: inline-block; font-family: var(--font-label); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.4); padding: 14px 34px; text-decoration: none; transition: border-color .2s, transform .22s ease; } .btn-ghost:hover { border-color: var(--white); transform: translateY(-2px); } /* ============================================================ UTILITIES ============================================================ */ .med { position: relative; } .eyebrow { display: block; font-family: var(--font-label); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .section-headline { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; color: var(--white); } .section-sub { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); color: var(--text-sec); line-height: 1.65; max-width: 560px; margin: 0 auto 40px; } .gold-rule { width: 48px; height: 3px; background: var(--gold); margin: 20px 0 40px; } /* ============================================================ PARTNERS STRIP ============================================================ */ #partners-strip { background: var(--bg-darkest); border-top: 1px solid rgba(242,194,0,.15); padding: 32px 48px; } .partners-strip-inner { max-width: 1280px; margin: 0 auto; width: 100%; } .partners-strip-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 24px; } .partners-strip-label { font-family: var(--font-label); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); } .partners-strip-link { font-family: var(--font-label); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold) !important; text-decoration: none !important; border-bottom: 1px solid rgba(242,194,0,.4); padding-bottom: 2px; transition: opacity .2s; } .partners-strip-link:hover { opacity: .7; } .partners-logos { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap; width: 100%; } .partners-logos img { max-height: 30px; width: auto; opacity: 0.6; transition: opacity .2s; flex-shrink: 0; } /* Right six are compact badge marks; bump them so they read at the same visual weight as the first three wordmarks. */ .partners-logos img:nth-child(n+4) { max-height: 42px; } /* First two wordmarks read slightly small next to Guitammer; nudge them up. */ .partners-logos img:nth-child(-n+2) { max-height: 36px; } .partners-logos img:hover { opacity: 1; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--bg-darkest); padding: 72px 48px 44px; border-top: 1px solid rgba(242,194,0,.2); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 64px; max-width: 1200px; margin: 0 auto 56px; } .footer-logo { margin-bottom: 24px; display: flex; justify-content: center; } .footer-logo img { height: 96px; width: auto; } .footer-tagline { font-family: var(--font-body); font-size: clamp(14px, 1.4vw, 16px); color: var(--text-muted); line-height: 1.7; max-width: 280px; text-align: center; margin: 0 auto; } .footer-col-label { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 13px; } .footer-links a { font-family: var(--font-body); font-size: clamp(14px, 1.4vw, 16px); color: var(--text-muted); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: var(--white); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.06); max-width: 1200px; margin: 0 auto; } .footer-legal { font-family: var(--font-label); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-align: center; } .social-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .social-row a { font-family: var(--font-label); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-sec); text-decoration: none; transition: color .2s; display: flex; align-items: center; gap: 7px; } .social-row a svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .social-row a:hover { color: var(--gold); } footer a, footer a:visited { color: var(--text-muted); text-decoration: none; } footer a:hover { color: var(--white); } /* Footer responsive: stack and center everything on narrow screens so the copyright sits centered directly under the logo/statement. */ @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .footer-links { align-items: center; } footer { padding: 56px 22px 40px; } .footer-bottom { flex-direction: column; gap: 22px; text-align: center; } .social-row { justify-content: center; gap: 16px; flex-wrap: nowrap; } .social-row a { gap: 0; } .social-row a span { display: none; } .social-row a svg { width: 20px !important; height: 20px !important; } } /* ============================================================ SWAP (edit mode) ============================================================ */ .swap { display: none; } body.editing .swap { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 50; bottom: 8px; left: 8px; background: rgba(5,8,15,.85); padding: 4px 8px; border-radius: 2px; } .swap-btn { font-family: var(--font-label); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; background: var(--gold); color: #000; border: none; padding: 4px 10px; cursor: pointer; font-weight: 700; } .swap-name { font-size: 9px; color: var(--text-sec); } /* ============================================================ RESPONSIVE — SHARED (toolbar · countdown · nav · footer · partners) ============================================================ */ @media (max-width: 900px) { #site-nav { padding: 0 20px; } .nav-links { gap: 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } #countdown-strip { padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); } .cd-date-label { display: none; } .cd-btn-ghost { display: none; } } @media (max-width: 600px) { footer { padding: 44px 20px 30px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-bottom: 30px; } .footer-grid > div { text-align: left; } .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; margin-bottom: 4px; } .footer-logo img { height: 135px; } .footer-links { align-items: flex-start; gap: 9px; } .footer-col-label { margin-bottom: 12px; } .footer-bottom { padding-top: 22px; } .social-row { gap: 20px; } .social-row a { font-size: 0; gap: 0; } /* icons only on phones (hide text labels) */ .social-row a svg { width: 20px; height: 20px; } #partners-strip { display: none; } /* hide partners strip on phones */ /* Interior hero photos: use each page's own height (~62vh) so they're shorter than the full-screen Home hero on mobile. Drop the scroll cue (mobile only). */ #hero .hero-scroll { display: none; } /* Tighten title/narrative spacing across sections on phones. */ .eyebrow { margin-bottom: 11px; } .gold-rule { margin: 16px 0 14px; } /* Tighten trailing space below underline-style link CTAs (not the solid bar buttons). */ section:has(.trial-spins, .doc-download, .scoring-doc-dl, .platform-tile-cta, .heritage-link) { padding-bottom: 26px !important; } .partners-logos img:nth-child(-n+2) { max-height: 32px; } } /* Short desktop viewports (e.g., 1080p): interior heroes grow to fit their headline and the eyebrow can end up tight under the header. Shift the hero copy down into the lower padding to open up space below the header. Desktop only (width>960), short viewports only (height<=1000), so 4K/tall screens are untouched. */ @media (min-width: 961px) and (max-height: 1000px) { #hero .hero-content, #watch-hero .watch-hero-inner { padding-top: 32px; padding-bottom: 28px; } }