/* Homepage broadcast surfaces. Scoped to preserve race-night takeover and other pages. */ #hlrn-home { --hp-surface:#fffdf8; --hp-inset:#f3f1eb; --hp-ink:#17202d; --hp-muted:#596270; --hp-line:#dedbd3; --hp-red:#c8102e; } html[data-hlrn-theme="dark"] #hlrn-home { --hp-surface:#141b26; --hp-inset:#1c2634; --hp-ink:#f4f6fa; --hp-muted:#b1bdcd; --hp-line:#334051; --hp-red:#ed2546; } #hlrn-home #hlrn-global-nav .hgn-more-menu { display:none!important; opacity:0!important; visibility:hidden!important; } #hlrn-home #hlrn-global-nav .hgn-more-wrap:is(.open,:hover,:focus-within) .hgn-more-menu { display:block!important; opacity:1!important; visibility:visible!important; background:var(--hp-surface)!important; } #hlrn-home #hlrn-global-nav .hgn-link { font-size:11px!important; border:0!important; box-shadow:none!important; background:transparent!important; border-radius:4px!important; padding:12px 10px!important; } #hlrn-home #hlrn-global-nav .hgn-link:is(.active,:hover,:focus-visible) { background:var(--hp-inset)!important; color:var(--hp-red)!important; } #hlrn-home #hlrn-global-nav .hgn-more-item { color:var(--hp-ink)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome > .home30-full-backdrop { opacity:.22!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome { background:transparent!important; color:var(--hp-ink); } #hlrn-home:not(.rn-active) { background:var(--hp-inset)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome > #hlrnCleanMasthead { height:140px!important; min-height:140px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome > #hlrnCleanMasthead > img { max-height:130px!important; width:min(440px,72vw)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hero-grid { grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr)!important; gap:20px!important; align-items:stretch!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card,.h10-points-card,.h20-result-card) { background:var(--hp-surface)!important; color:var(--hp-ink)!important; border:1px solid var(--hp-line)!important; border-top:3px solid var(--hp-red)!important; border-radius:12px!important; box-shadow:0 8px 24px #0000000d!important; backdrop-filter:none!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card)::before, #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card)::after { display:none!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hero-copy { display:flex!important; flex-direction:column!important; padding:24px!important; gap:0!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .home30-next-heading { color:var(--hp-ink)!important; font-size:22px!important; margin:0 0 16px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-actions { position:static!important; display:flex!important; opacity:1!important; visibility:visible!important; order:3; margin:20px 0 0!important; justify-content:flex-start!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-actions .h10-btn { background:var(--hp-inset)!important; color:var(--hp-ink)!important; opacity:1!important; min-height:44px!important; font-size:12px!important; padding:0 22px!important; border:1px solid var(--hp-line)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-actions .primary { background:var(--hp-red)!important; color:white!important; border-color:var(--hp-red)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming { margin:0!important; padding:16px 0 0!important; width:100%!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-grid { gap:14px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-card { background:var(--hp-inset)!important; border:1px solid var(--hp-line)!important; border-left:3px solid var(--hp-red)!important; border-radius:7px!important; padding:18px!important; min-height:175px!important; box-shadow:none!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-card.sunday { border-left-color:#b58438!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-card :is(h3,p,a) { color:var(--hp-ink)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-card h3 { font-size:clamp(26px,2.5vw,38px)!important; line-height:1.05!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-card { align-self:stretch!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-head,.h10-hosted-race,.h10-hosted-winner-feature) { background:transparent!important; color:var(--hp-ink)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-race-stats > div { background:var(--hp-inset)!important; color:var(--hp-ink)!important; border:0!important; border-radius:6px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-winner-copy strong { font-size:clamp(30px,2.8vw,42px)!important; color:var(--hp-ink)!important; line-height:1!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-winner-photo { background:linear-gradient(145deg,#e2be72,#9f7029)!important; border:0!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-winner-photo:has(img[hidden]) { display:none!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-winner-feature:has(img[hidden]) { grid-template-columns:1fr!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hosted-link { background:#dfb75e!important; color:#241a0a!important; border:0!important; min-height:44px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.ng-section-head,.h10-section-head) { color:var(--hp-ink)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome #hlrnNextGen { padding-top:28px!important; padding-bottom:20px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .ng-intro { color:var(--hp-muted)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .ng-preview, #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-secondary-schedule[hidden] { display:none!important; } #hlrn-home a:focus-visible,#hlrn-home button:focus-visible { outline:3px solid #d89124!important; outline-offset:4px!important; } @media(max-width:1000px) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hero-grid { grid-template-columns:1fr!important; } } @media(max-width:600px) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome > #hlrnCleanMasthead { height:106px!important; min-height:106px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome > #hlrnCleanMasthead > img { max-height:100px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-hero-copy { padding:18px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-grid { grid-template-columns:1fr!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-upcoming-card { min-height:145px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-actions .h10-btn { flex:1; padding:0 10px!important; } } /* The injected legacy command hub duplicates the race feature and overlaps the masthead. */ #hlrn-home:not(.rn-active) #hlrn-home-race-hub { display:none!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-upcoming-card h3,.h10-hosted-winner-copy strong,.hlrn-victory-name) > a { font:inherit!important; color:inherit!important; text-decoration:none!important; border:0!important; padding:0!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .home30-next-heading { align-self:flex-start!important; } /* HLRN homepage visual finishing pass — presentation-only; no layout/data changes. */ @media (hover:hover) and (pointer:fine) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card,.h10-points-card,.h20-result-card,.h10-upcoming-card) { transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card,.h10-points-card,.h20-result-card,.h10-upcoming-card):hover { box-shadow:0 12px 30px rgba(8,17,30,.13)!important; border-color:var(--hp-red)!important; transform:translateY(-2px); } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-btn,.h10-hosted-link,.ng-card a,.h10-upcoming-card a) { transition:filter .2s ease,box-shadow .2s ease!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-btn,.h10-hosted-link):hover { filter:brightness(1.06); box-shadow:0 5px 15px rgba(8,17,30,.14)!important; } } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.ng-section-head h2,.h10-section-head h2) { text-wrap:balance; } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card,.h10-points-card,.h20-result-card,.h10-upcoming-card):hover { box-shadow:0 14px 32px rgba(0,0,0,.32)!important; } @media (prefers-reduced-motion:reduce) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.h10-hosted-card,.ng-card,.h10-points-card,.h20-result-card,.h10-upcoming-card,.h10-btn,.h10-hosted-link) { transition:none!important;transform:none!important; } } /* Homepage navigation + section rhythm: visual-only, scoped away from live race takeover. */ #hlrn-home:not(.rn-active) #hlrn-global-nav { border-bottom-color:rgba(143,157,175,.25)!important; box-shadow:0 6px 22px rgba(0,0,0,.18)!important; } #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-link { transition:background-color .18s ease,color .18s ease,box-shadow .18s ease!important; } #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-link:is(:hover,:focus-visible) { box-shadow:inset 0 -2px 0 var(--hp-red)!important; } #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-link.active { box-shadow:inset 0 -2px 0 var(--hp-red)!important; } #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-brand:focus-visible, #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-link:focus-visible, #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-menu:focus-visible { outline:2px solid #f0bd52!important;outline-offset:-3px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section { padding-top:58px;padding-bottom:58px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section.compact { padding-top:48px;padding-bottom:48px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section-head { margin-bottom:20px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome #hlrnNextGen .ng-section-head { margin-bottom:18px; } @media(max-width:720px) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section { padding-top:42px;padding-bottom:42px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section.compact { padding-top:38px;padding-bottom:38px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section-head { margin-bottom:16px; } } @media(prefers-reduced-motion:reduce) { #hlrn-home:not(.rn-active) #hlrn-global-nav .hgn-link { transition:none!important; } } /* Homepage broadcast detail pass: paint-only rules; no structural or functional changes. */ #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head h2,.ng-section-head h2) { text-shadow:0 1px 0 rgba(0,0,0,.035); } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head small,.ng-kicker,.h10-eyebrow) { letter-spacing:.13em; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-btn,.h10-hosted-link,.h10-section-head>a) { border-radius:7px!important; box-shadow:0 2px 8px rgba(10,20,35,.07); } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-btn,.h10-hosted-link,.h10-section-head>a):focus-visible { outline:3px solid #d89124!important; outline-offset:3px!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-race-stats>div,.ng-mini-stats span,.h20-numbers>div) { border-radius:7px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-race-stats>div,.ng-mini-stats span) { box-shadow:inset 0 1px 0 rgba(255,255,255,.09); } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.ng-card-head,.h10-hosted-head) { border-bottom-color:var(--hp-line); } @media(hover:hover) and (pointer:fine) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section-head>a { transition:box-shadow .2s ease,border-color .2s ease!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section-head>a:hover { box-shadow:0 5px 14px rgba(10,20,35,.12); } } @media(prefers-reduced-motion:reduce) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-section-head>a { transition:none!important; } } /* Subtle NASCAR red / gold accent lighting — homepage only, no new elements. */ #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.ng-card,.h10-points-card,.h20-result-card) { box-shadow:inset 0 2px 0 rgba(200,16,46,.13),0 8px 24px rgba(0,0,0,.055)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-card,.h10-upcoming-card.sunday) { box-shadow:inset 0 2px 0 rgba(192,142,54,.20),0 8px 24px rgba(0,0,0,.055)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head h2,.ng-section-head h2) { text-shadow:0 1px 0 rgba(0,0,0,.035),0 0 22px rgba(200,16,46,.055); } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.ng-card,.h10-points-card,.h20-result-card) { box-shadow:inset 0 2px 0 rgba(235,55,78,.21),0 10px 26px rgba(0,0,0,.24)!important; } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-card,.h10-upcoming-card.sunday) { box-shadow:inset 0 2px 0 rgba(232,177,80,.25),0 10px 26px rgba(0,0,0,.24)!important; } @media(hover:hover) and (pointer:fine) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.ng-card,.h10-points-card,.h20-result-card):hover { box-shadow:inset 0 2px 0 rgba(200,16,46,.24),0 12px 30px rgba(8,17,30,.13)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-card,.h10-upcoming-card.sunday):hover { box-shadow:inset 0 2px 0 rgba(192,142,54,.34),0 12px 30px rgba(8,17,30,.13)!important; } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hero-copy,.ng-card,.h10-points-card,.h20-result-card):hover { box-shadow:inset 0 2px 0 rgba(235,55,78,.29),0 14px 32px rgba(0,0,0,.32)!important; } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-hosted-card,.h10-upcoming-card.sunday):hover { box-shadow:inset 0 2px 0 rgba(232,177,80,.37),0 14px 32px rgba(0,0,0,.32)!important; } } /* Homepage broadcast consistency finish — typography and paint only. */ #hlrn-home:not(.rn-active) #hlrnRaceDayHome { --hp-finish-radius:10px; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-upcoming-card,.h10-hosted-race-stats>div,.ng-mini-stats span) { border-radius:var(--hp-finish-radius)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head h2,.ng-section-head h2,.ng-card-head h3) { font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif; font-weight:900; text-transform:uppercase; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head small,.ng-kicker,.ng-tag) { font-weight:900; text-transform:uppercase; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.ng-card-head,.h10-hosted-head) { box-shadow:inset 0 -1px 0 rgba(200,16,46,.07); } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.ng-card-head,.h10-hosted-head) { box-shadow:inset 0 -1px 0 rgba(237,37,70,.13); } #hlrn-home:not(.rn-active) #hlrnRaceDayHome :is(.h10-section-head>a,.h10-btn,.h10-hosted-link) { font-weight:900; text-decoration-thickness:1.5px; text-underline-offset:3px; } /* Homepage lower-section finishing: quick links + footer, no markup or behavior changes. */ #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card { border-color:var(--hp-line)!important; border-top-color:var(--ql-accent)!important; border-radius:12px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 22px rgba(10,20,35,.075)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card .h10-link-arrow { color:var(--ql-accent)!important; opacity:.85; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card strong { font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif; font-weight:900; letter-spacing:.005em; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card small { color:var(--hp-muted)!important; } #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-footer { border-top:1px solid var(--hp-line); box-shadow:inset 0 2px 0 rgba(200,16,46,.08); } @media(hover:hover) and (pointer:fine) { #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card:hover { border-top-color:var(--ql-accent)!important; box-shadow:inset 0 2px 0 var(--ql-accent),0 12px 28px rgba(10,20,35,.13)!important; } } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card { box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 26px rgba(0,0,0,.22)!important; } html[data-hlrn-theme="dark"] #hlrn-home:not(.rn-active) #hlrnRaceDayHome .h10-quick-links .h10-link-card:hover { box-shadow:inset 0 2px 0 var(--ql-accent),0 12px 30px rgba(0,0,0,.30)!important; }