/* * Goldendome — homepage styles * * Sandbox: sandbox/homepage/homepage.html * Spec: docs/templates/homepage.md * Notes: sandbox/homepage/homepage.md (companion — §13 judgment calls) * * Loaded only on the homepage (is_front_page()) via goldendome_enqueue_homepage_css() * in functions.php. Stacks above goldendome-tokens so all custom-property * references resolve. The theme root style.css (loaded site-wide) already * styles .related-card primitives; this file ships hero-card / feature-card * primitives (mirror of category.css) plus all homepage-specific region * geometry. The hero/feature-card primitive duplication will be lifted to * a shared cards.css when category template + homepage are both stable. * * Phase 1 (2026-05-18): scaffold (.page--home). * Phase 2 (2026-05-18): hero region, news river segments, card primitives. * Phase 3: .video-band, .video-hero (overlay), .playlist * Phase 4: .module, .game-block, .game-cpt, .game-article, .stats-table, * .recruiting-grid, .recruit-card, .season-leaders * Phase 5: .ad-a1, .ad-region, .ad-label, .ad-unit * * Tokens introduced for this surface (see assets/css/tokens.css): * --region-gap, --region-gap-large, --module-padding-y */ /* ===== Page shell ==================================================== */ /* The .page base rule in style.css applies max-width:--page-max and * padding:0 --page-pad to anything class="page". On the homepage we * need the video band (and any future full-bleed band) to break * edge-to-edge under , AND we need each region to apply its own * --page-max + --page-pad without doubling up. So strip the outer * constraints here — same pattern as .page--category in category.css. * Without this, the navy video band clips at 1216px instead of the * viewport, and every region's content column lands at 1152px (32px * double-padded on each side) instead of the intended 1216px. */ .page--home { max-width: none; margin: 0; padding: 0; background: var(--bg); } /* Inner container for non-edge-to-edge regions. Each region applies * --page-max + --page-pad itself so the video band can sit outside * the constraint and break edge-to-edge. */ .page--home .hero-region, .page--home .news-river { max-width: var(--page-max); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); } /* Card primitives — .feature-card lives in assets/css/cards.css as * of 2026-05-22 (Phase 3b of the CSS rebuild). The §8.1.4 overlay-style * lead card (.hero-card-overlay) also lives in cards.css as of * 2026-07-04 — it's a shared primitive (homepage hero + Game CPT Latest * Coverage), not homepage-specific. Only the hero-region grid stretch * below stays here. .related-card (the article template's tertiary * card) lives in style.css. */ /* ===== Hero region (spec §4) ========================================= */ /* 1 overlay-style lead card on the left + 3 horizontal feature cards * stacked in the right column. Grid split matches the video band's * .vb-grid (1.85fr / 1fr, 28px gap) so the editorial hero card lands * at the same column width as the video hero card below — visually * sibling regions. Tablet narrows to 1.55fr / 1fr per the original * spec §13.1 default; mobile collapses to 1-up. The right column * carries outer top + bottom hairlines with internal hairlines * between cards. * * 2026-05-18 edit pass: * - padding-top bumped to give the hero room to breathe below the * schedule strip. * - padding-bottom reduced so the A2 ad sits closer underneath. * - align-items:stretch on the grid + justify-content:space-between * on the feature column so the bottom of the hero card aligns * with the bottom of the 3rd feature card. */ .hero-region { padding-top: 32px; padding-bottom: 16px; } .hero-region__inner { display: grid; grid-template-columns: 1.85fr 1fr; gap: 28px; align-items: stretch; } .hero-region__features { display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } /* The §8.1.4 overlay-style lead card (.hero-card-overlay) base rules * moved to cards.css 2026-07-04 (shared primitive). Only the homepage * hero-region grid stretch + feature-card variant remain below. */ /* Horizontal feature variant — only inside the hero region's right * column. Image left (150px, 4:3 aspect to match comp), text right. * Kicker suppressed in PHP (hero-region.php passes null); the partial * doesn't emit a kicker span when empty, so no display:none needed. * Outside the hero region (Recruiting module, Next/Last Game) the * feature card stays in its default vertical layout. */ .hero-region__features .feature-card { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: center; } .hero-region__features .feature-card:first-child { padding-top: 14px; } .hero-region__features .feature-card:last-child { border-bottom: 0; } .hero-region__features .feature-card__thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-media); } .hero-region__features .feature-card__body { gap: 8px; justify-content: center; } .hero-region__features .feature-card__title { font-size: 1.0625rem; line-height: 1.22; } .hero-region__features .feature-card__deck { display: none; /* Spec §4: no deck in the horizontal feature variant. */ } @media (max-width: 1100px) { .hero-region__inner { grid-template-columns: 1.6fr 1fr; gap: 20px; } .hero-region__features .feature-card { grid-template-columns: 128px 1fr; } } @media (max-width: 720px) { .hero-region { padding-top: 16px; padding-bottom: 32px; } .hero-region__inner { grid-template-columns: 1fr; gap: 24px; } .hero-region__features .feature-card { grid-template-columns: 104px 1fr; gap: 14px; } } /* ===== News river segments (spec §6) ================================= */ /* Tertiary cards in a 3-col / 2-col / 1-col responsive grid. Spec calls * for 3-col at desktop (narrower than category page's 4-col because the * homepage has no rail offsetting the river). Each segment carries 6 cards; * two segments stack vertically with the Last Game module between them * (Phase 4) and an ad slot (Phase 5). */ .news-river { padding-top: var(--region-gap); padding-bottom: var(--region-gap); } .news-river__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; } /* `.news-river .related-card .title` tertiary-register override moved * to assets/css/cards.css 2026-05-22 as Phase 3b — combined selector * with `.category-river .related-card .title`. Both surfaces inherit * the sans/15px tertiary register per DS §6.2 from cards.css. */ @media (max-width: 1100px) { .news-river__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .news-river__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* "More Football →" link — bottom of segment 2 only. Spec §0 delta: * relocated from the end of the page to the end of River segment 2. */ .news-river__more { display: flex; justify-content: flex-end; margin-top: 28px; } .more-football-inline { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: var(--type-micro-tracking); text-transform: uppercase; color: var(--nd-navy); text-decoration: none; padding: 10px 18px; border: 1px solid var(--nd-navy); border-radius: var(--radius); display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.15s ease, color 0.15s ease; } .more-football-inline:hover, .more-football-inline:focus { background: var(--nd-navy); color: #fff; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .more-football-inline { transition: none; } } /* ===== Video band (spec §5) ========================================== */ /* Full-width navy section between the hero region and the rest of the * page. Renders outside .page--home's inner container so the band * breaks edge-to-edge. --region-gap-large above and inside per spec * §13.9 (the navy band earns extra breathing room as the strongest * structural break on the page). Uses the existing site-wide * --bg-video-band token (= --nd-navy) and the white-ink ramp. */ .video-band { background: var(--bg-video-band); color: var(--video-band-ink); /* 2026-05-18: top + bottom padding cut 25% (54 / 18 from 72 / 24); * top margin dropped entirely so the band butts directly against * whatever region precedes it. */ padding: 54px 0 24px; } .vb-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); } .vb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--video-band-line); margin-bottom: 24px; } .vb-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--video-band-ink); margin: 0; } .vb-more { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nd-gold); text-decoration: none; } .vb-more:hover, .vb-more:focus { color: #fff; text-decoration: none; } .vb-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 28px; align-items: start; } /* Hero video — overlay card variant. Image fills the card with a scrim * gradient from bottom for legibility; serif title overlays bottom-left; * circular play affordance centers on the image; duration pill bottom- * right. Companion notes §13.3 documents the gradient stops. One-off to * the homepage video band per spec §5.1 — do not propagate. */ .video-hero { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; isolation: isolate; } .vh-thumb { position: absolute; inset: 0; } .vh-thumb img, .vh-thumb-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; } .vh-thumb-placeholder { background: linear-gradient( 135deg, color-mix(in srgb, var(--nd-navy) 30%, transparent), color-mix(in srgb, var(--ink-2) 60%, transparent) ); } .vh-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0) 80% ); pointer-events: none; } .vh-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(12, 35, 64, 0.62); border: 2px solid rgba(255, 255, 255, 0.85); display: grid; place-items: center; color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: transform 0.2s ease, background-color 0.2s ease; } .vh-play .vb-play-icon { width: 24px; height: 24px; margin-left: 4px; /* optical center for triangle glyph */ } .video-hero:hover .vh-play, .video-hero:focus-visible .vh-play { transform: translate(-50%, -50%) scale(1.06); background: rgba(12, 35, 64, 0.78); } .vh-duration { position: absolute; right: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.72); padding: 3px 8px; border-radius: var(--radius-chip); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .vh-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; color: #fff; } /* .vh-kicker eyebrow → canonical .micro-label--gold (2026-06-06). */ .vh-title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.005em; color: #fff; margin: 0; text-wrap: pretty; max-width: 28ch; } .vh-deck { font-family: var(--font-sans); font-size: 13px; color: rgba(255, 255, 255, 0.78); line-height: 1.45; margin: 0; max-width: 50ch; } /* Playlist — YouTube-sidebar register. Each item is horizontal: * 16/9 thumb left, title + meta right, hairline rules between items. */ .playlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--video-band-line); } .playlist-item-wrap { border-bottom: 1px solid var(--video-band-line); } .playlist-item-wrap:last-child { border-bottom: 0; } .playlist-item { display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: start; padding: 12px 0; text-decoration: none; color: inherit; } .playlist-item:hover, .playlist-item:focus-visible { text-decoration: none; } .pi-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--video-band-line); } .pi-thumb img, .pi-thumb-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .pi-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(12, 35, 64, 0.7); border: 1px solid rgba(255, 255, 255, 0.8); display: grid; place-items: center; color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .pi-play .vb-play-icon { width: 14px; height: 14px; margin-left: 2px; } .pi-duration { position: absolute; right: 4px; bottom: 4px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.72); padding: 1px 5px; border-radius: var(--radius-chip); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .pi-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pi-title { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.32; color: var(--video-band-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.15s ease; } .playlist-item:hover .pi-title, .playlist-item:focus-visible .pi-title { color: var(--nd-gold); } /* .pi-meta eyebrow → canonical .micro-label--sm --micro (2026-06-06); keeps * only its on-dark contextual color. */ .pi-meta { color: var(--video-band-ink-3); } @media (max-width: 1100px) { .vb-grid { grid-template-columns: 1.6fr 1fr; gap: 20px; } .playlist-item { grid-template-columns: 128px 1fr; } } @media (max-width: 720px) { .video-band { padding: 54px 0 24px; } .vb-grid { grid-template-columns: 1fr; gap: 16px; } .vh-body { padding: 16px 16px 14px; } /* Playlist becomes a horizontal-scroll rail on mobile. The list * grid wraps items in horizontal columns; scroll-snap aligns each * card to a start position. Spec §5.3 model: feels like swiping * through YouTube Shorts. */ .playlist { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; padding-bottom: 4px; scrollbar-width: thin; } .playlist-item-wrap { border-bottom: 0; scroll-snap-align: start; } .playlist-item { grid-template-columns: 108px 1fr; padding: 6px 0; } } @media (prefers-reduced-motion: reduce) { .vh-play, .pi-title { transition: none; } } /* ===== Thematic modules (spec §7) ==================================== */ /* Treatment (a) per companion notes §13.4 — modules sit on --bg with * hairline top + bottom and --module-padding-y vertical padding. * --bg-sunk is reserved for ad slots and the Season Leaders placeholder * so the "Advertisement" eyebrow + ad-slot fill remains the visual * differentiator from editorial modules. */ .module { max-width: var(--page-max); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); padding-top: var(--region-gap); padding-bottom: 0; /* The next region's padding-top handles the rhythm. */ } .module__shell { padding: var(--module-padding-y) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .module__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line-soft); } .module__title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nd-navy); margin: 0; } .module__more { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; } .module__more:hover, .module__more:focus { color: var(--nd-navy); text-decoration: none; } /* Game block — two-column body shared by Next Game and Last Game. */ .game-block { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } @media (max-width: 1100px) { .game-block { gap: 24px; } } @media (max-width: 760px) { .game-block { grid-template-columns: 1fr; gap: 28px; } } /* Game CPT data column — shared base + variants. */ .game-cpt { display: flex; flex-direction: column; gap: 18px; } .game-cpt__matchup, .game-cpt__result { display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; } .game-cpt__matchup { justify-content: space-between; } .gc-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; } .gc-logo { width: 44px; height: 44px; object-fit: contain; } .gc-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nd-navy); text-align: center; } .gc-ranks { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); text-align: center; } /* .gc-vs eyebrow → canonical .micro-label--lg --muted (2026-06-06); keeps layout. */ .gc-vs { flex: 0 0 auto; } /* Next Game info list. */ .gc-info { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 14px; margin: 0; } .gc-info dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--type-micro-tracking); text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .gc-info dd { font-family: var(--font-sans); font-size: 14px; color: var(--ink); margin: 0; } .gc-tv { font-family: var(--font-mono); font-weight: 700; color: var(--nd-navy); letter-spacing: 0.04em; } /* Last Game result variant — stacked team rows with score on the right. */ .game-cpt__result { flex-direction: column; align-items: stretch; gap: 0; } .game-cpt__result .gc-team { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .game-cpt__result .gc-team:last-child { border-bottom: 0; } .game-cpt__result .gc-name { flex: 1 1 auto; text-align: left; } .game-cpt__result .gc-logo { width: 32px; height: 32px; } .gc-score { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1; margin-left: auto; } .game-cpt__result .gc-team.winner .gc-name { color: var(--nd-navy); } .game-cpt__result .gc-team.winner .gc-score { color: var(--nd-navy); } /* .gc-meta eyebrow → canonical .micro-label--lg --tight (2026-06-06); keeps margin. */ .gc-meta { margin: 0; } /* Claude-table treatment for last-game stats (DS §14.2) — horizontal * rules only, no vertical grid, breathing room. Homepage Last Game * module has its own visual register: 13px table scale (one step down * from CPT stats tables), right-aligned numeric thead (vs canonical * left), navy mono numeric tbody cells, edge-collapsed padding. The * markup opts into `.data-table` for the base contract; the rules * below override the heads + cells for this surface only. Kept distinct * from cpt-rough.css .stats-table in Phase 3a (2026-05-22) since this * is per-surface decoration, not duplicate chrome. */ .stats-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; } .stats-table thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .stats-table thead th:first-child { text-align: left; } .stats-table tbody th { text-align: left; font-weight: 400; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .stats-table tbody td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--nd-navy); text-align: right; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--line-soft); } .stats-table tbody tr:last-child th, .stats-table tbody tr:last-child td { border-bottom: 0; } .game-cpt__cta { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-mono-tight); text-transform: uppercase; color: var(--nd-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; } .game-cpt__cta:hover, .game-cpt__cta:focus { color: var(--accent-hover); text-decoration: none; } /* Game-block right column — article cards stack as horizontal feature * cards within the column. Mirrors the .hero-region__features pattern. */ .game-articles { display: flex; flex-direction: column; gap: 0; } .game-articles .feature-card { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .game-articles .feature-card:first-child { padding-top: 0; } .game-articles .feature-card:last-child { padding-bottom: 0; border-bottom: 0; } .game-articles .feature-card__title { font-size: 1rem; line-height: 1.25; } .game-articles .feature-card__deck { display: none; } @media (max-width: 720px) { .game-articles .feature-card { grid-template-columns: 100px 1fr; gap: 12px; } } /* ===== Recruiting module (spec §7.4) ================================= */ /* 3-up feature card grid; cards stay in their default vertical layout * (image top, text below) since the surrounding context isn't a narrow * column. */ .recruiting-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* --with-ad variant: 2 cards + a 300×250 medrec in the third cell. To keep the * three cells roughly the same height (a served medrec is a fixed 250px), the * paired cards run a shorter image and drop the deck so they land in the * medrec's height band instead of towering over it. */ .recruiting-grid--with-ad .feature-card__thumb { aspect-ratio: 5 / 2; } .recruiting-grid--with-ad .feature-card__deck { display: none; } .recruiting-grid--with-ad .hp-medrec { align-self: center; } @media (max-width: 1100px) { .recruiting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2-col: two cards fill row 1; the medrec spans the full width below, * centered, rather than sitting alone in one column. */ .recruiting-grid--with-ad .hp-medrec { grid-column: 1 / -1; } } @media (max-width: 720px) { .recruiting-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } } /* ===== Season Leaders placeholder (spec §8) ========================== */ /* Uses --bg-sunk per the spec (and companion notes §13.4 — placeholder * shares register with ad slots, distinct from thematic modules). Single * clickable band with mono eyebrow, serif title, sans subtitle, gold * circular arrow on the right. */ .season-leaders { max-width: var(--page-max); margin: 0 auto; padding: var(--region-gap) var(--page-pad) 0; } /* 2-col pairing: the band in the left column, a 300×250 medrec on the right. * Stretch so the sunken bar matches the medrec height and the row reads as a * balanced 2-up. Collapses to a single column below 900px (bar, then medrec). */ .season-leaders__row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; } .season-leaders__row .season-leaders__inner { height: 100%; } /* Shared homepage medrec (300×250) chrome — used by the Season Leaders pairing * and the Recruiting module. A centered "Advertisement" label over a reserved * 300×250 frame; the frame holds a placeholder until a real creative serves. */ .hp-medrec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .hp-medrec .ad-frame { width: 300px; height: 250px; flex-shrink: 0; /* the medrec, not neighbouring content, sets the row height */ display: grid; place-items: center; background: var(--bg-elevated); border: 1px solid var(--ad-frame); } .hp-medrec .ad-ph { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-4); } /* drop the placeholder frame only once a real creative (iframe) serves — the * Snack loader stubs the repeater div even when unfilled, so keying off child * presence would collapse the reserved slot; an