/*
Midwest City Bombers - Industry retheme. Tokens and component classes come
from docs/design/bombers-theme.css (Bomber overrides) layered on
docs/design/_ds/industry-050c27c5-.../styles.css (Industry base); read
both directly before changing a value here rather than re-deriving.
Fonts are NOT @import'd here - the base layout's link tag owns
font loading (see src/layouts/base-layout.tsx), because the codebase's
convention is a in , not a CSS @import, and because the
weight list (400/500/600/700 on both faces) has to match what .varsity
and .num require exactly (see the font-weight note below).
*/
:root {
--color-bg: #0b0b0c;
--color-surface: #141417;
--color-text: #f6f5f2;
--color-accent: #ffc72c;
--color-accent-2: #ffc72c;
--color-divider: color-mix(in srgb, #f6f5f2 18%, transparent);
--color-accent-100: #fff8e2;
--color-accent-200: #ffeeb9;
--color-accent-300: #ffe08a;
--color-accent-400: #ffd257;
--color-accent-500: #ffc72c;
--color-accent-600: #e0aa15;
--color-accent-700: #b3870f;
--color-accent-800: #7d5d08;
--color-accent-900: #4a3704;
--color-accent-2-100: #fff8e2;
--color-accent-2-200: #ffeeb9;
--color-accent-2-300: #ffe08a;
--color-accent-2-400: #ffd257;
--color-accent-2-500: #ffc72c;
--color-accent-2-600: #e0aa15;
--color-accent-2-700: #b3870f;
--color-accent-2-800: #7d5d08;
--color-accent-2-900: #4a3704;
--color-neutral-100: #f6f5f2;
--color-neutral-200: #dcdbd7;
--color-neutral-300: #bebdb9;
--color-neutral-400: #9c9b97;
--color-neutral-500: #7b7a76;
--color-neutral-600: #5c5b58;
--color-neutral-700: #41403e;
--color-neutral-800: #2a2a28;
--color-neutral-900: #17171a;
--font-heading: "Barlow Condensed", system-ui, sans-serif;
--font-heading-weight: 600;
--font-body: "Barlow", system-ui, sans-serif;
--space-1: 3.4px;
--space-2: 6.8px;
--space-3: 10.2px;
--space-4: 13.6px;
--space-6: 20.4px;
--space-8: 27.2px;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--shadow-sm: 0 1px 0 color-mix(in srgb, #f6f5f2 12%, transparent);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.7);
--grid: color-mix(in srgb, #f6f5f2 8%, transparent);
--ph-a: color-mix(in srgb, #f6f5f2 5%, transparent);
--ph-b: color-mix(in srgb, #f6f5f2 10%, transparent);
--container: 1280px;
}
/* Fallback for browsers without color-mix() support (Chrome <111,
Firefox <113, Safari <16.2): every color-mix()-derived token above gets
a plain-hex value here instead, so dividers/grid/placeholder stripes
stay visible rather than resolving to an invalid, invisible value. */
@supports not (color: color-mix(in srgb, red, blue)) {
:root {
--color-divider: #3a3a3d;
--grid: #232326;
--ph-a: #1a1a1c;
--ph-b: #1f1f22;
--shadow-sm: 0 1px 0 #3a3a3d;
}
}
/* Breakpoints (reference, used via media queries below):
phone: 375px, tablet: 768px, desktop: 1280px */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Guards the .hero/.teams-section full-bleed technique (width:100vw):
100vw can be a few px wider than the visible viewport when a scrollbar
takes up layout space, which would otherwise add a horizontal scroll of
its own. Only on `html`, the actual root scroller - NOT also on `body`:
setting `overflow-x` to anything but `visible` forces that element's
own `overflow-y` to `auto` too (a CSS spec quirk), and doing that on
BOTH html and body makes both independent scroll containers, producing
a second, short, misplaced scrollbar nested inside the real one. */
html {
overflow-x: hidden;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
line-height: 1.12;
letter-spacing: -0.015em;
margin: 0 0 var(--space-2);
}
h1 {
font-size: clamp(2rem, 4.5vw, 3rem);
text-transform: uppercase;
}
h2 {
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
text-transform: uppercase;
}
h3 {
font-size: 1.125rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.875rem;
}
h6 {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
p {
margin: 0 0 var(--space-3);
}
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
figcaption {
font-size: 11px;
margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* :not(.btn) so a button rendered as keeps its
own explicit text color - a bare `a` selector's specificity (0,0,1) loses
to `.btn-primary`'s (0,1,0) today, but `.paper a` below is (0,1,1), which
would otherwise beat it. Scoping both consistently prevents that. */
a:not(.btn) {
color: var(--color-accent-400);
}
a:not(.btn):hover {
color: var(--color-accent-200);
}
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
::selection {
background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--color-accent);
color: #0b0b0c;
padding: var(--space-2) var(--space-3);
font-weight: 700;
}
.skip-link:focus {
left: var(--space-2);
top: var(--space-2);
}
main {
max-width: var(--container);
margin: 0 auto;
padding: var(--space-8) var(--space-3) var(--space-8);
}
main > section + section,
main > h1 + * {
margin-top: var(--space-8);
}
/* ══════════════════════════════════════════════════════════════════════
.paper - the light field. Flips every token .blueprint/.card/.tag/etc.
read, so components work unmodified on it. It does NOT flip
--color-accent or anything derived from --color-text via color-mix(),
because those two facts are the root cause of four real WCAG failures
found during planning (see the plan's Context for Implementer). The
rules directly below fix all four, scoped to .paper only - every one of
them is correct on the dark field and would be wrong applied globally.
══════════════════════════════════════════════════════════════════════ */
.paper {
--color-bg: #f2f2f0;
--color-surface: #e7e7e4;
--color-text: #111112;
--color-divider: color-mix(in srgb, #111112 20%, transparent);
--grid: color-mix(in srgb, #111112 9%, transparent);
--ph-a: color-mix(in srgb, #111112 5%, transparent);
--ph-b: color-mix(in srgb, #111112 10%, transparent);
background: var(--color-bg);
color: var(--color-text);
}
@supports not (color: color-mix(in srgb, red, blue)) {
.paper {
--color-divider: #cfcfca;
--grid: #d8d8d4;
--ph-a: #e2e2de;
--ph-b: #d5d5d1;
}
}
/* Fix 1: accent body text at 2.93:1 on .paper (fails 4.5:1) -> 800 step, 5.44:1.
.tag-accent isn't listed here: it always renders accent-800 text on its
own accent-100 fill regardless of field (5.75:1), so it never needed
this override in the first place. */
.paper .card-kicker,
.paper .btn-ghost {
color: var(--color-accent-800);
}
/* Fix 2: :focus-visible ring at 1.39:1 on .paper (fails 3:1 non-text minimum) */
.paper :focus-visible {
outline-color: var(--color-accent-800);
}
/* Fix 3: global `a` color (accent-400, #ffd257) is 1.28:1 on .paper.
:not(.btn) matters here: found live in Task 4's browser verification -
`.paper a` (specificity 0-1-1) was beating `.btn-primary` (0-1-0),
silently repainting button text gold-on-gold instead of black-on-gold. */
.paper a:not(.btn) {
color: var(--color-accent-800);
}
.paper a:not(.btn):hover {
color: var(--color-accent-900);
}
/* Fix 4: .meta at 55% color-mix is 4.05:1 on .paper (fails 4.5:1 - small text) */
.paper .meta {
color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════
Blueprint frame - the wireframe wrapper every card, figure, and
primary button wears: square, hairline-bordered, "+" registration
marks at the corners. See src/components/blueprint.tsx.
══════════════════════════════════════════════════════════════════════ */
.blueprint {
position: relative;
border: 1px solid var(--color-divider);
border-radius: 0;
}
.blueprint.duotone {
overflow: visible;
}
.blueprint > .corner {
position: absolute;
width: 11px;
height: 11px;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before,
.blueprint > .corner::after {
content: "";
position: absolute;
background: currentColor;
}
.blueprint > .corner::before {
left: 5px;
top: 0;
width: 1px;
height: 100%;
}
.blueprint > .corner::after {
top: 5px;
left: 0;
width: 100%;
height: 1px;
}
.blueprint > .corner.tl {
top: -6px;
left: -6px;
}
.blueprint > .corner.tr {
top: -6px;
right: -6px;
}
.blueprint > .corner.bl {
bottom: -6px;
left: -6px;
}
.blueprint > .corner.br {
bottom: -6px;
right: -6px;
}
/* Photo treatment - every real photo is washed in the accent, like a
screen print. See src/components/photo-slot.tsx. */
.duotone {
position: relative;
overflow: hidden;
}
.duotone::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: var(--color-accent);
mix-blend-mode: color;
}
/* Striped placeholder - every image slot with no real asset yet.
background-color is a solid base UNDER the stripe pattern: --ph-a/--ph-b
are semi-transparent by design, so without an opaque base the stripes
let whatever's behind them show through - fine on a plain field, but on
a .tex-radar/.tex-panel section it composites the placeholder stripes
on top of the decorative texture's own lines, reading as visual noise
rather than a clean, empty slot. */
.ph {
position: relative;
display: grid;
place-items: center;
background-color: var(--color-surface);
background-image: repeating-linear-gradient(135deg, var(--ph-a) 0 7px, var(--ph-b) 7px 14px);
}
.ph > span {
font-family: ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 62%, transparent);
background: var(--color-bg);
padding: 4px 9px;
border: 1px solid var(--color-divider);
}
/* Varsity voice - the heading face pushed to display scale for hero
headlines, score digits, and the countdown. Both classes hard-set
weight 700: the base-layout font MUST load Barlow Condensed
700, or the browser synthesizes faux bold instead of loading the
real face (see Task 3's font note). */
.varsity {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
line-height: 0.86;
letter-spacing: 0.002em;
margin: 0;
}
.num {
font-family: var(--font-heading);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.meta {
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.rule {
height: 1px;
background: var(--color-divider);
}
/* Textures - flight-deck grammar, kept under the type. Used by the
Bomber plaza section and other decorative fields. */
.tex-radar {
background-image: radial-gradient(
circle at 78% 30%,
transparent 0 11.5%,
var(--grid) 11.5% calc(11.5% + 1px),
transparent calc(11.5% + 1px) 22%,
var(--grid) 22% calc(22% + 1px),
transparent calc(22% + 1px) 34%,
var(--grid) 34% calc(34% + 1px),
transparent 34%
),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 100% 100%, 44px 44px, 44px 44px;
}
.tex-panel {
background-image: repeating-linear-gradient(102deg, var(--grid) 0 1px, transparent 1px 78px);
}
.tex-none {
background-image: none;
}
.dense {
--space-2: 5px;
--space-3: 7px;
--space-4: 10px;
--space-6: 14px;
--space-8: 20px;
}
/* ── buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
text-decoration: none;
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: 14px;
line-height: 1.2;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-divider);
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: 0;
/* A button in a flex row (schedule-row actions, admin form rows) must
not compress its label to fit - the handoff calls this out as "a
known constraint worth fixing properly." */
flex: none;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.btn-primary {
background: var(--color-accent);
border-color: var(--color-accent);
color: #0b0b0c;
}
.btn-primary:hover {
background: var(--color-accent-400);
}
.btn-primary:active {
background: var(--color-accent-600);
}
.btn-secondary:hover {
background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.btn-secondary:active {
background: color-mix(in srgb, var(--color-text) 14%, transparent);
}
.btn-ghost {
border-color: transparent;
color: var(--color-accent);
padding-inline: var(--space-1);
}
.btn-ghost:hover {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.btn-ghost:active {
background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.btn-block {
width: 100%;
margin-top: var(--space-2);
}
/* ── forms (admin routes) ── */
.field {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-3);
}
.field label {
font-size: 12px;
margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.field input,
.field select,
.field textarea,
.input {
width: 100%;
min-height: 36px;
padding: 6px 10px;
font: inherit;
font-size: 14px;
color: var(--color-text);
caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: 0;
}
.field textarea,
textarea.input {
min-height: 90px;
resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover,
.input:hover {
border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.input:focus-visible {
border-color: var(--color-accent);
outline-offset: 0;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
border-color: #e0574a;
}
.field__error {
color: #e0574a;
font-size: 0.875rem;
}
/* ── tags ── */
.tag {
display: inline-flex;
align-items: center;
font-size: 11px;
letter-spacing: 0.02em;
padding: 3px 10px;
border-radius: 0;
}
.tag-accent {
background: var(--color-accent-100);
color: var(--color-accent-800);
}
.tag-accent-2 {
background: var(--color-accent-2-100);
color: var(--color-accent-2-800);
}
.tag-neutral {
background: var(--color-neutral-100);
color: var(--color-neutral-800);
}
.tag-outline {
border: 1px solid var(--color-accent);
color: var(--color-accent);
}
/* ── cards ── */
.card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border-radius: 0;
background: transparent;
border: 1px solid var(--color-divider);
}
.card-kicker {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
}
.card-title {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
font-size: 17px;
line-height: 1.2;
}
.card-body {
margin: 0;
font-size: 13px;
opacity: 0.8;
flex: 1;
}
.card-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm {
box-shadow: var(--shadow-sm);
}
.elev-md {
box-shadow: var(--shadow-md);
}
.elev-lg {
box-shadow: var(--shadow-lg);
}
/* Interactive cells (the homepage All-teams grid) and lift cards (every
other Blueprint card that responds to hover: results, news, staff,
alumni, sponsor tiles). */
.cell {
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.cell:hover {
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
color: var(--color-accent-300);
}
.cell:hover .cell-arrow {
transform: translateX(4px);
}
.cell-arrow {
transition: transform 0.16s ease;
}
.lift {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lift:hover {
transform: translateY(-3px);
box-shadow: 4px 4px 0 var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
.cell,
.cell-arrow,
.lift {
transition: none;
}
.lift:hover {
transform: none;
}
}
/* Tabs - Schedule/Roster/Staff on the sport page, season filter on the
master schedule. Real links (?tab=/?season=), not JS-driven; the
active one carries aria-current="page" and reads as selected. */
.tabs {
display: flex;
gap: 0;
flex-wrap: wrap;
}
.tab {
font-family: var(--font-heading);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 13px;
padding: 10px 16px;
border: 1px solid var(--color-divider);
margin-left: -1px;
background: transparent;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.tab:hover {
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.tab[aria-current="page"] {
background: var(--color-accent);
color: #0b0b0c;
border-color: var(--color-accent);
position: relative;
z-index: 1;
}
/* ── tables (rosters, schedules) ── */
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table th {
text-align: left;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--color-divider);
}
.table td {
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover {
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.table tbody tr.is-canceled {
opacity: 0.55;
text-decoration: line-through;
}
.table tbody tr.is-canceled .tag {
text-decoration: none;
}
/* A table wider than its container scrolls within itself at narrow
widths, never the page (see Task 5/6/10's mobile reflow requirement). */
.table-scroll {
width: 100%;
overflow-x: auto;
}
/* ── header / nav ── */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-bg);
border-bottom: 1px solid var(--color-divider);
}
.nav {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
max-width: var(--container);
margin: 0 auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-weight: 700;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
color: var(--color-text);
margin-right: auto;
}
/* The Bombers script is black with a cream outline, so on the near-black
header it reads as the cream keyline. Sized by height so the wordmark keeps
its aspect ratio at any nav height. */
.nav-brand__logo {
height: 40px;
width: auto;
flex: none;
display: block;
}
.nav__list {
display: flex;
align-items: center;
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.nav__list a {
color: inherit;
text-decoration: none;
font-size: 14px;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] {
color: var(--color-accent);
}
.nav__toggle {
display: none;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
}
.nav__toggle::before {
content: "";
width: 1.25rem;
height: 2px;
background: var(--color-text);
box-shadow: 0 -6px 0 var(--color-text), 0 6px 0 var(--color-text);
}
/* Visually hidden but still focusable/tabbable, unlike display:none - the
mobile menu opens via Tab + Space with zero client JS. */
.nav__toggle-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nav__toggle-input:focus-visible + .nav__toggle {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (max-width: 767px) {
.nav {
flex-wrap: wrap;
}
.nav__toggle {
display: inline-flex;
}
.nav__list {
display: none;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: var(--space-3);
padding: var(--space-3) 0 0;
}
.nav__toggle-input:checked ~ .nav__list {
display: flex;
}
}
/* ── gameday strip ── */
.gameday-strip {
background: var(--color-surface);
border-bottom: 1px solid var(--color-divider);
}
.gameday-strip__inner {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-6);
padding: var(--space-3) var(--space-4);
}
.gameday-strip__countdown {
display: flex;
gap: var(--space-3);
}
.gameday-strip__countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
/* ── footer ── */
.site-footer {
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
margin-top: var(--space-8);
}
.site-footer__inner {
max-width: var(--container);
margin: 0 auto;
padding: var(--space-6) var(--space-3);
font-size: 0.875rem;
}
.site-footer__social {
display: flex;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: var(--space-2) 0;
}
/* ── responsive grid used by listing pages ── */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ── hero (split layout only - stack/bleed are out of scope) ──
Full-bleed background beyond `main`'s centered max-width, content still
aligned to it: `left: 50%; margin-left: -50vw` (not `calc(50vw - 50%)`
margins, which has the sign backwards - it SHRINKS the box inward by
the gutter width on both sides instead of expanding it outward, and is
invisible below the container's max-width, only appearing as squeezed,
off-center content above it. Caught live at a maximized/ultra-wide
viewport; every screenshot taken during implementation was at 1280px
(no gutter yet) or 375px mobile, so the bug never showed up. */
.hero {
display: grid;
gap: var(--space-8);
align-items: end;
grid-template-columns: 1fr;
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
margin-top: calc(var(--space-8) * -1);
padding-top: var(--space-8);
padding-bottom: 0;
padding-left: max(var(--space-3), calc((100vw - var(--container)) / 2 + var(--space-3)));
padding-right: max(var(--space-3), calc((100vw - var(--container)) / 2 + var(--space-3)));
}
@media (min-width: 768px) {
.hero-split {
grid-template-columns: 1.08fr 0.92fr;
align-items: stretch;
}
}
.hero-copy {
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: flex-start;
}
.hero-copy .btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-3);
}
.hero-media {
min-height: 220px;
}
.lede {
max-width: 46ch;
font-size: 17px;
opacity: 0.78;
}
/* ── homepage section grids ── */
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.results-grid .blueprint {
background: var(--color-surface);
}
.teams-section {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
padding-top: var(--space-8);
padding-bottom: var(--space-8);
padding-left: max(var(--space-3), calc((100vw - var(--container)) / 2 + var(--space-3)));
padding-right: max(var(--space-3), calc((100vw - var(--container)) / 2 + var(--space-3)));
}
.teams-grid {
display: grid;
/* auto-fit (not auto-fill): with fewer sports than fit in a row, empty
grid tracks collapse instead of rendering as a blank divider-colored
box - auto-fill would reserve them even with nothing to put there. */
grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
gap: 1px;
background: var(--color-divider);
border: 1px solid var(--color-divider);
}
.teams-grid .cell {
background: var(--color-bg);
padding: var(--space-4) var(--space-4) 16px;
min-height: 104px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 4px;
text-decoration: none;
color: inherit;
}
/* Sponsor placement zones - eligibility unchanged, only the frame/logo
treatment is retheme'd (see src/components/sponsor-zone.tsx). */
.sponsor-zone {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.sponsor-zone .ph,
.sponsor-zone .duotone {
width: 160px;
height: 64px;
}
.sponsor-zone .ph > span {
font-size: 9px;
}
.hangar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
}
.hangar-grid .duotone,
.hangar-grid .ph {
aspect-ratio: 16 / 10;
}
/* News article detail photo (full-width, not the grid card thumbnail). */
article > .duotone,
article > .ph {
aspect-ratio: 16 / 9;
max-height: 24rem;
margin: var(--space-4) 0;
}
.plaza {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 768px) {
.plaza {
grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
}
}
.plaza-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.plaza-panels .blueprint {
padding: var(--space-4);
min-height: 250px;
}
/* ── sport page ── */
header.tex-radar {
padding: var(--space-6) 0;
margin-bottom: var(--space-6);
}
header.tex-radar .ph,
header.tex-radar .duotone {
aspect-ratio: 21 / 9;
max-height: 22rem;
margin-bottom: var(--space-3);
}
.team-section + .team-section {
margin-top: var(--space-6);
}
/* ── sponsorship page: tiles sized by tier prominence ── */
.sponsor-tier {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.sponsor-tile {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: var(--space-3);
}
.sponsor-tier--gold .sponsor-tile {
flex: 1 1 220px;
min-height: 6rem;
}
.sponsor-tier--gold .sponsor-tile .ph,
.sponsor-tier--gold .sponsor-tile .duotone {
width: 100%;
height: 4.5rem;
}
.sponsor-tier--silver .sponsor-tile {
flex: 1 1 160px;
min-height: 4.5rem;
}
.sponsor-tier--silver .sponsor-tile .ph,
.sponsor-tier--silver .sponsor-tile .duotone {
width: 100%;
height: 3rem;
}
.sponsor-tier--bronze .sponsor-tile {
flex: 1 1 120px;
min-height: 3.5rem;
}
.sponsor-tier--bronze .sponsor-tile .ph,
.sponsor-tier--bronze .sponsor-tile .duotone {
width: 100%;
height: 2.25rem;
}