/* Event RSVP Platform — Sports Broadcast Premium stylesheet
Reference: TSN broadcast OS at 9pm on a Saturday.
Type system:
Display: Bebas Neue — broadcast-scoreboard condensed all-caps.
Body: Manrope — geometric sans, variable weight, operator-readable.
Legacy variable names (--magenta, --green, --paper, etc.) retained
for codebase compatibility; values remapped to the dark amber system.
Rename to semantic tokens (--accent-500, --surface-0) in the next
tenant-config refactor. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@300;400;500;600;700;800&display=swap");
/* Flagpack SVGs are loaded via 
in matches.js.
No CSS @import — each flag is a single SVG file, cached by the CDN. */
:root {
/* === Surfaces (dark, warm-tinted, never pure #000) === */
--surface-0: oklch(0.14 0.010 65); /* stage black — page bg */
--surface-1: oklch(0.18 0.012 65); /* panel */
--surface-2: oklch(0.22 0.014 65); /* card / elevated */
--surface-3: oklch(0.28 0.014 65); /* tooltip / overlay */
/* === Text (warm off-white, never pure #fff) === */
--text-primary: oklch(0.96 0.006 85);
--text-secondary: oklch(0.78 0.008 80);
--text-tertiary: oklch(0.58 0.010 75);
--text-disabled: oklch(0.42 0.008 75);
/* === Accent — amber carries the brand (Committed strategy) === */
--amber-50: oklch(0.96 0.04 75);
--amber-200: oklch(0.88 0.10 70);
--amber-400: oklch(0.80 0.16 68);
--amber-500: oklch(0.74 0.19 65); /* PRIMARY */
--amber-600: oklch(0.66 0.18 60); /* hover */
--amber-700: oklch(0.56 0.16 55); /* pressed */
/* === Semantic === */
--live-red: oklch(0.58 0.22 27);
--win-green: oklch(0.66 0.15 145);
--info-blue: oklch(0.65 0.12 240);
/* === Borders (carry more weight than shadow in this aesthetic) === */
--border-soft: oklch(0.30 0.012 65);
--border-default: oklch(0.40 0.014 65);
--border-strong: oklch(0.58 0.018 65);
--border-amber: oklch(0.74 0.19 65 / 0.4);
/* === Legacy compatibility mappings (DO NOT add new usages) === */
--magenta: var(--amber-500);
--magenta-dark: var(--amber-600);
--green: var(--win-green);
--green-dark: oklch(0.56 0.14 145);
--gold: var(--amber-400);
--teal: var(--amber-300, oklch(0.85 0.13 70));
--casamigos-teal: var(--amber-200);
--black: var(--text-primary); /* inverted: was dark on light, now light on dark */
--ink: var(--text-primary);
--paper: var(--surface-0);
--cream: var(--surface-1);
--grey-50: var(--surface-2);
--grey-100: var(--surface-1);
--grey-200: var(--border-soft);
--grey-300: var(--border-default);
--grey-400: var(--text-tertiary);
--grey-600: var(--text-secondary);
--grey-800: var(--text-primary);
/* === Radius (tighter than before — sports broadcast = geometric) === */
--radius: 6px;
--radius-lg: 10px;
/* === Shadows — warm-tinted, subtle. Borders carry the lift. === */
--shadow-1: 0 1px 2px oklch(0.08 0.005 65 / 0.4), 0 2px 6px oklch(0.06 0.005 65 / 0.3);
--shadow-2: 0 2px 4px oklch(0.08 0.005 65 / 0.5), 0 8px 24px oklch(0.06 0.005 65 / 0.4);
--shadow-3: 0 4px 8px oklch(0.08 0.005 65 / 0.6), 0 16px 40px oklch(0.04 0.005 65 / 0.5);
--shadow-hot: 0 0 0 1.5px var(--border-amber), 0 8px 28px oklch(0.74 0.19 65 / 0.18);
/* === Easing — broadcast-grade, no bounce === */
--ease-broadcast: cubic-bezier(0.16, 1, 0.3, 1); /* score-reveal curve */
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* removed bounce; sports broadcast = confident landing */
/* === Typography === */
--font-display: "Bebas Neue", "Saira Condensed", "Impact", system-ui, sans-serif;
--font-body: "Manrope", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-accent: "Manrope", system-ui, sans-serif; /* serif accent retired; sports broadcast doesn't do italic serif "vs" */
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400; /* Bebas Neue is single-weight; the display face does the heavy lifting */
letter-spacing: .02em;
line-height: 1;
margin: 0;
color: var(--text-primary);
}
h1 { font-size: clamp(3rem, 7vw, 6rem); text-transform: uppercase; letter-spacing: .015em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); text-transform: uppercase; letter-spacing: .025em; }
h3 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); font-weight: 700; }
a { color: var(--amber-400); text-decoration: none; transition: color 150ms var(--ease-broadcast); }
a:hover { color: var(--amber-200); }
/* ---------- Accessibility ---------- */
/* Visible focus ring for keyboard users (not shown on mouse click) */
:focus { outline: none; }
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 2px;
border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
outline: 3px solid var(--magenta);
outline-offset: 0;
border-color: var(--magenta);
}
/* Skip link — visually hidden until focused */
.skip-link {
position: absolute;
top: -100px;
left: 12px;
background: var(--black);
color: var(--gold);
padding: 12px 18px;
border-radius: 0 0 10px 10px;
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
z-index: 999;
text-decoration: none;
transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 0;
outline: 3px solid var(--gold);
outline-offset: 2px;
}
/* Visually hidden but available to screen readers */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Respect reduced-motion preference (vestibular disorder accessibility) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.match-card:hover, .btn:hover, .kpi:hover { transform: none !important; }
.hero::before, .hero::after { animation: none !important; }
.topbar .brand .mark { animation: none !important; }
.hero .inner > * { opacity: 1 !important; transform: none !important; }
.match-card.reveal { opacity: 1 !important; transform: none !important; }
.kpi { opacity: 1 !important; transform: none !important; }
}
/* ---------- Top bar ---------- */
.topbar {
background: var(--black);
color: var(--paper);
padding: 14px 24px;
display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 50;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.topbar .brand .mark {
width: 28px; height: 28px; border-radius: 8px;
background: var(--amber-500);
}
.topbar .brand .sub { font-family: var(--font-body); font-weight: 400; opacity: .7; font-size: .85rem; text-transform: none; letter-spacing: 0; margin-left: 6px; }
/* Demo-mode pill: signals the live URL is showing simulated tournament data */
.demo-pill {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 12px;
background: rgba(248,188,76,.12);
color: var(--gold);
border: 1px solid rgba(248,188,76,.3);
padding: 4px 10px; border-radius: 999px;
font-family: var(--font-display); font-weight: 700;
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.demo-pill-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--gold);
animation: reel-pulse 1.8s var(--ease-in-out-expo) infinite;
}
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--paper); opacity: .85; font-size: .9rem; }
.topbar nav a:hover { opacity: 1; text-decoration: none; }
.topbar .admin-link { color: var(--gold); }
/* ---------- Hero ---------- */
.hero {
background: var(--magenta);
color: var(--paper);
padding: 88px 24px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
/* Slowly drifting gradient orbs — adds depth + life without distracting. */
.hero::before, .hero::after {
content: ""; position: absolute; inset: 0;
pointer-events: none;
will-change: transform;
}
.hero::before {
background: radial-gradient(ellipse 700px 500px at 20% 0%, rgba(248,188,76,.45), transparent 60%),
radial-gradient(ellipse 600px 600px at 80% 100%, rgba(99,168,91,.42), transparent 60%);
animation: drift-a 18s var(--ease-in-out-expo) infinite alternate;
}
.hero::after {
background: radial-gradient(ellipse 500px 400px at 90% 30%, rgba(45,189,180,.30), transparent 60%);
animation: drift-b 22s var(--ease-in-out-expo) infinite alternate;
}
@keyframes drift-a {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-30px, 20px) scale(1.08); }
}
@keyframes drift-b {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(40px, -30px) scale(1.12); }
}
/* Hero content choreography — title fades up, dates follow, lede last */
.hero .inner > * { opacity: 0; animation: hero-rise .9s var(--ease-out-quart) forwards; }
.hero .eyebrow { animation-delay: 80ms; }
.hero h1 { animation-delay: 200ms; }
.hero .dates { animation-delay: 350ms; }
.hero .lede { animation-delay: 500ms; }
.hero .ctas { animation-delay: 650ms; }
@keyframes hero-rise {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Brand mark in topbar — subtle "breath" pulse to feel alive */
.topbar .brand .mark {
animation: brand-breath 4s var(--ease-in-out-expo) infinite;
}
@keyframes brand-breath {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,188,76,0); }
50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(248,188,76,.18); }
}
.hero .inner { position: relative; max-width: 1080px; margin: 0 auto; }
.hero .eyebrow { display: inline-block; background: var(--black); color: var(--gold); padding: 6px 14px; border-radius: 999px; font-family: var(--font-display); letter-spacing: .12em; font-weight: 700; font-size: .9rem; text-transform: uppercase; }
.hero h1 { margin-top: 18px; }
.hero h1 .accent { color: var(--gold); display: block; }
.hero .dates { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin-top: 10px; opacity: .95; }
.hero .lede { max-width: 640px; margin: 24px auto 0; font-size: 1.05rem; opacity: .95; }
/* Live countdown — ticks every second toward the opening match */
.countdown {
display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
margin: 18px auto 0;
padding: 14px 24px;
background: rgba(0,0,0,.32);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.15);
border-radius: 14px;
}
.countdown-label {
font-family: var(--font-display);
font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
font-weight: 700; color: var(--gold);
}
.countdown-cells { display: flex; align-items: baseline; gap: 6px; }
.cd-cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.cd-val {
font-family: var(--font-display); font-weight: 900;
font-size: 2.4rem; line-height: 1; color: var(--paper);
font-variant-numeric: tabular-nums;
}
.cd-unit {
font-family: var(--font-body); font-size: .65rem; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px;
}
.cd-sep {
font-family: var(--font-display); font-weight: 900;
font-size: 2rem; line-height: 1; color: rgba(255,255,255,.4);
}
.countdown-done {
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .04em;
padding: 8px 16px; color: var(--gold);
}
@media (max-width: 600px) {
.countdown { padding: 10px 16px; }
.cd-cell { min-width: 44px; }
.cd-val { font-size: 1.7rem; }
.cd-sep { font-size: 1.4rem; }
}
.hero .ctas { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 24px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; cursor: pointer; border: 2px solid transparent;
transition: transform .25s var(--ease-spring),
box-shadow .25s var(--ease-out-quart),
background .15s ease, color .15s ease;
text-decoration: none;
position: relative; overflow: hidden;
will-change: transform;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn[disabled], .btn[aria-disabled="true"] {
opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
/* Mouse-tracking parallax on hot match cards (JS sets --mx, --my from cursor) */
.match-card.tier-hot,
.match-card.featured {
transform-style: preserve-3d;
}
.match-card.tier-hot .matchup,
.match-card.featured .matchup {
transition: transform .12s ease-out;
will-change: transform;
}
.match-card.tier-hot:hover .matchup,
.match-card.featured:hover .matchup {
transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px), 0);
}
.match-card.tier-hot::after,
.match-card.featured::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(
400px circle at calc(50% + var(--mx, 0) * 80%) calc(50% + var(--my, 0) * 80%),
rgba(255,255,255,.10), transparent 55%
);
opacity: 0; transition: opacity .25s ease;
z-index: 0;
}
.match-card.tier-hot:hover::after,
.match-card.featured:hover::after { opacity: 1; }
.match-card > * { position: relative; z-index: 1; }
/* Animated SVG checkmark for RSVP success state — circle + tick draw in sequence */
.checkmark-svg {
width: 28px; height: 28px; display: inline-block; vertical-align: middle;
margin-right: 8px;
}
.checkmark-svg circle {
stroke: currentColor; stroke-width: 3; fill: none;
stroke-dasharray: 166; stroke-dashoffset: 166;
animation: stroke-draw .45s var(--ease-out-quart) forwards;
}
.checkmark-svg path {
stroke: currentColor; stroke-width: 4; fill: none;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 48; stroke-dashoffset: 48;
animation: stroke-draw .3s var(--ease-out-quart) .35s forwards;
}
@keyframes stroke-draw { to { stroke-dashoffset: 0; } }
/* (Click ripple removed — it was the Material-design AI scaffold tell.
Tactile press is now a single hardware-accelerated scale on :active, below.) */
.btn { transition: transform .12s var(--ease-out-quart), background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s var(--ease-out-quart); }
.btn:active { transform: scale(0.975); transition-duration: 40ms; }
.btn .ripple { display: none; } /* defensive — kill any lingering DOM */
/* Success state — button morphs into checkmark before navigating */
.btn.success { background: var(--green); color: var(--paper) !important; pointer-events: none; }
.btn.success .spinner { display: none; }
/* Buttons — Sports Broadcast palette.
Primary CTA is the amber, body is Manrope 700, no border-radius >6px. */
.btn-primary {
background: var(--amber-500);
color: var(--surface-0);
border: none;
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.02em;
}
.btn-primary:hover { background: var(--amber-400); color: var(--surface-0); }
.btn-primary:active { background: var(--amber-700); }
.btn-secondary {
background: transparent;
color: var(--amber-400);
border: 1.5px solid var(--amber-500);
font-family: var(--font-body);
font-weight: 600;
}
.btn-secondary:hover { background: var(--amber-500); color: var(--surface-0); border-color: var(--amber-500); }
.btn-green { background: var(--win-green); color: var(--surface-0); font-weight: 700; }
.btn-green:hover { background: oklch(0.72 0.16 145); color: var(--surface-0); }
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-default);
font-family: var(--font-body);
font-weight: 500;
}
.btn-ghost:hover { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-strong); }
.btn-danger { background: transparent; color: var(--live-red); border-color: var(--live-red); }
.btn-danger:hover { background: var(--live-red); color: var(--text-primary); }
.btn-sm { padding: 10px 14px; font-size: .85rem; min-height: 40px; }
/* Inline spinner for loading button state */
.btn .spinner {
display: inline-block; width: 14px; height: 14px; margin-right: 8px;
border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: spin .8s linear infinite;
vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- FEATURED UPCOMING EVENT — CL Final May 30 banner.
Sits between rules strip and tournament schedule. Sells "we can pilot for
your closest big event" not "build over 24 days for the tournament." */
.featured-event-section { padding: 40px 24px 0; background: var(--paper); }
.featured-event-section:empty { display: none; padding: 0; }
.featured-event {
max-width: 1240px; margin: 0 auto;
background: linear-gradient(135deg, var(--black) 0%, #302B23 60%, #24201A 100%);
border-radius: var(--radius-lg);
padding: 40px;
position: relative; overflow: hidden;
border: 2px solid var(--casamigos-teal);
}
.featured-event::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 500px 300px at 80% 0%, rgba(240,165,36,.25), transparent 60%),
radial-gradient(ellipse 600px 400px at 0% 100%, rgba(240,165,36,.2), transparent 60%);
pointer-events: none;
}
.featured-event-inner { position: relative; z-index: 1; color: var(--paper); }
.featured-event-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 800;
font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--casamigos-teal);
margin-bottom: 8px;
}
.fe-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--casamigos-teal);
box-shadow: 0 0 0 0 rgba(240,165,36,.7);
animation: reel-pulse 1.6s var(--ease-in-out-expo) infinite;
}
.featured-event-stage {
font-family: var(--font-display); font-weight: 700;
font-size: 1rem; letter-spacing: .04em;
color: rgba(255,255,255,.65);
margin-bottom: 14px;
}
.featured-event-matchup {
display: flex; align-items: center; justify-content: center;
gap: 32px; flex-wrap: wrap;
margin: 8px 0 28px;
}
.fe-team { text-align: center; }
.fe-flag { font-size: 3.5rem; line-height: 1; margin-bottom: 6px; }
.fe-name {
font-family: var(--font-display); font-weight: 900;
font-size: 2.2rem; line-height: 1; text-transform: uppercase;
letter-spacing: .02em;
}
.fe-vs {
font-family: var(--font-display); font-weight: 900;
font-size: 1.6rem; color: rgba(255,255,255,.4);
}
.featured-event-meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
margin-bottom: 22px;
padding: 18px 20px;
background: rgba(255,255,255,.04);
border-radius: 12px;
border: 1px solid rgba(255,255,255,.06);
}
.fe-meta-item { display: flex; flex-direction: column; gap: 4px; }
.fe-meta-label {
font-family: var(--font-display); font-weight: 700;
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.fe-meta-val {
font-family: var(--font-display); font-weight: 800;
font-size: 1rem; color: var(--paper);
}
.featured-event-pricing {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 24px;
}
.fe-price-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 16px 18px;
}
.fe-price-card.is-premium { border-color: var(--casamigos-teal); background: rgba(240,165,36,.06); }
.fe-price-label {
font-family: var(--font-display); font-weight: 800;
font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.7);
margin-bottom: 6px;
}
.fe-price-card.is-premium .fe-price-label { color: var(--casamigos-teal); }
.fe-price-val {
font-family: var(--font-display); font-weight: 900;
font-size: 1.8rem; line-height: 1; color: var(--paper);
}
.fe-price-plus {
font-family: var(--font-body); font-weight: 500;
font-size: .8rem; color: rgba(255,255,255,.6); margin-left: 4px;
}
.fe-price-sub {
font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 6px;
}
.featured-event-cta {
display: flex; gap: 12px; flex-wrap: wrap;
}
.featured-event-cta .btn-primary { background: var(--casamigos-teal); color: var(--black); }
.featured-event-cta .btn-primary:hover { background: var(--gold); color: var(--black); }
.featured-event-cta .btn-secondary { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.3); }
.featured-event-cta .btn-secondary:hover { background: rgba(255,255,255,.1); color: var(--paper); }
@media (max-width: 720px) {
.featured-event { padding: 24px; }
.featured-event-matchup { gap: 16px; }
.fe-name { font-size: 1.4rem; }
.fe-flag { font-size: 2.4rem; }
.featured-event-pricing { grid-template-columns: 1fr; }
}
/* ---------- INTERACTIVE FAQ — sourced from real @rendezviewsto IG comments.
Search + category filter + accordion. Casamigos teal accent throughout
so it visually rhymes with the CL Final banner above it. */
.faq-section { padding: 80px 24px; background: var(--paper); border-top: 1px solid var(--paper-line, #EAE7E2); }
.faq-section:empty { display: none; padding: 0; }
.faq-inner { max-width: 920px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 32px; }
.faq-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 999px;
background: rgba(240,165,36,.1); color: var(--casamigos-teal);
font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em;
font-weight: 600; text-transform: uppercase;
}
.faq-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--casamigos-teal);
animation: faq-pulse 2s ease-in-out infinite;
}
@keyframes faq-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }
.faq-title {
font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700; line-height: 1; margin: 16px 0 8px; color: var(--black);
text-transform: uppercase; letter-spacing: -0.01em;
}
.faq-sub { color: #475569; font-size: 1rem; line-height: 1.6; max-width: 520px; margin: 0 auto; }
.faq-ig-link { color: var(--magenta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-ig-link:hover { color: var(--casamigos-teal); }
/* "Most asked this week" chip row — surfaces the top 4-5 popular questions */
.faq-popular {
background: linear-gradient(135deg, rgba(240,165,36,.06), rgba(240,165,36,.04));
border: 1px solid rgba(240,165,36,.2);
border-radius: 16px; padding: 20px; margin-bottom: 28px;
}
.faq-popular-label {
font-family: var(--font-display); text-transform: uppercase;
font-size: 0.75rem; letter-spacing: 0.14em; color: #475569;
margin-bottom: 12px; font-weight: 600;
}
.faq-popular-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-chip {
background: var(--paper); color: var(--black);
border: 1.5px solid #E2E8F0; border-radius: 999px;
padding: 10px 16px; font-size: 0.88rem; font-weight: 500; line-height: 1.3;
cursor: pointer; text-align: left;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.faq-chip:hover { border-color: var(--casamigos-teal); background: rgba(240,165,36,.06); transform: translateY(-1px); }
.faq-chip:focus-visible { outline: 3px solid var(--casamigos-teal); outline-offset: 2px; }
/* Search + category tabs */
.faq-controls { display: grid; gap: 12px; margin-bottom: 20px; }
.faq-search-wrap { position: relative; }
.faq-search-icon {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; color: #94A3B8; pointer-events: none;
}
.faq-search {
width: 100%; padding: 14px 18px 14px 48px; font-size: 1rem;
background: var(--paper); color: var(--black);
border: 1.5px solid #E2E8F0; border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: var(--font-body);
}
.faq-search:focus {
outline: none; border-color: var(--casamigos-teal);
box-shadow: 0 0 0 4px rgba(240,165,36,.15);
}
.faq-search::placeholder { color: #94A3B8; }
.faq-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-cat {
background: transparent; color: #475569;
border: 1.5px solid #E2E8F0; border-radius: 999px;
padding: 8px 14px; font-size: 0.86rem; font-weight: 600;
cursor: pointer; transition: all 0.2s ease;
font-family: var(--font-body);
}
.faq-cat:hover { border-color: var(--casamigos-teal); color: var(--casamigos-teal); }
.faq-cat.is-active {
background: var(--black); color: var(--paper); border-color: var(--black);
}
.faq-cat:focus-visible { outline: 3px solid var(--casamigos-teal); outline-offset: 2px; }
/* Accordion list */
.faq-list { display: grid; gap: 12px; margin-bottom: 32px; }
.faq-item {
background: var(--paper); border: 1.5px solid #E2E8F0; border-radius: 14px;
overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: rgba(240,165,36,.4); }
.faq-item.is-open { border-color: var(--casamigos-teal); box-shadow: 0 8px 24px rgba(240,165,36,.08); }
.faq-q {
width: 100%; display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 14px;
background: transparent; border: 0; cursor: pointer;
padding: 20px 22px; text-align: left;
font-family: var(--font-body); color: var(--black);
transition: background 0.15s ease;
}
.faq-q:hover { background: rgba(240,165,36,.04); }
.faq-q:focus-visible { outline: 3px solid var(--casamigos-teal); outline-offset: -3px; }
.faq-q-cat {
font-family: var(--font-display); text-transform: uppercase;
font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700;
color: var(--casamigos-teal);
padding: 4px 8px; background: rgba(240,165,36,.1); border-radius: 6px;
white-space: nowrap;
}
.faq-q-text { font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--black); }
.faq-q-chev {
width: 32px; height: 32px; display: grid; place-items: center;
color: #475569; transition: transform 0.25s ease, color 0.2s ease;
}
.faq-q-chev svg { width: 18px; height: 18px; }
.faq-item.is-open .faq-q-chev { transform: rotate(180deg); color: var(--casamigos-teal); }
.faq-a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
overflow: hidden; padding: 0 22px;
color: #334155; font-size: 0.98rem; line-height: 1.65;
}
.faq-item.is-open .faq-a-inner { padding: 0 22px 22px; }
/* Empty state when search returns nothing */
.faq-empty {
text-align: center; padding: 48px 20px;
background: var(--paper); border: 1.5px dashed #E2E8F0; border-radius: 14px;
}
.faq-empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(240,165,36,.1); color: var(--casamigos-teal); margin-bottom: 16px; }
.faq-empty-icon svg { width: 28px; height: 28px; }
.faq-empty h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 8px; color: var(--black); }
.faq-empty p { color: #475569; margin: 0; }
.faq-empty a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
/* "Still need an answer?" CTA at bottom */
.faq-still {
text-align: center;
background: linear-gradient(135deg, var(--black) 0%, #2A2A2A 100%);
color: var(--paper); border-radius: 16px; padding: 32px 24px;
border: 1px solid rgba(240,165,36,.3);
}
.faq-still h3 { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 8px; }
.faq-still p { color: rgba(255,255,255,.8); margin: 0; font-size: 0.95rem; }
.faq-still a { color: var(--casamigos-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-still a:hover { color: var(--gold); }
@media (max-width: 720px) {
.faq-section { padding: 56px 16px; }
.faq-q { grid-template-columns: 1fr auto; padding: 16px 18px; gap: 8px; min-height: 44px; }
.faq-q-cat { grid-column: 1 / -1; justify-self: start; }
.faq-q-text { font-size: 1rem; }
.faq-a-inner, .faq-item.is-open .faq-a-inner { padding-left: 18px; padding-right: 18px; }
.faq-item.is-open .faq-a-inner { padding-bottom: 18px; }
.faq-popular { padding: 16px; }
/* 44px+ touch target for chips + category pills */
.faq-chip { font-size: 0.86rem; padding: 12px 14px; min-height: 44px; }
.faq-cat { padding: 11px 16px; min-height: 44px; font-size: .88rem; }
.faq-search { min-height: 48px; font-size: 16px; /* ≥16px prevents iOS zoom on focus */ }
}
@media (prefers-reduced-motion: reduce) {
.faq-eyebrow-dot { animation: none; }
.faq-item, .faq-q, .faq-q-chev, .faq-a, .faq-chip, .faq-cat, .faq-search { transition: none; }
}
/* ---------- HIGHLIGHT REEL — "System in Action" mini-dashboard preview.
Operator-focused: shows the dashboard as it would look DURING the tournament.
4 frames cycle automatically. Pause on hover. */
.reel {
background: linear-gradient(180deg, var(--magenta) 0%, #B86E16 100%);
padding: 56px 24px 64px;
position: relative;
overflow: hidden;
}
.reel::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 800px 400px at 50% 100%, rgba(248,188,76,.22), transparent 60%);
pointer-events: none;
}
.reel-inner { max-width: 1080px; margin: 0 auto; position: relative; }
.reel-header { text-align: center; color: var(--paper); margin-bottom: 28px; }
.reel-eyebrow {
display: inline-block; background: rgba(0,0,0,.4); color: var(--gold);
padding: 6px 14px; border-radius: 999px;
font-family: var(--font-display); font-weight: 700; font-size: .85rem;
letter-spacing: .12em; text-transform: uppercase;
margin-bottom: 16px;
}
.reel-header h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.reel-sub { font-size: 1rem; opacity: .9; max-width: 560px; margin: 0 auto; }
/* The stage — dark "device" frame containing the cycling frames.
Grid-stack the 4 frames in row 1 (they overlap, only the .is-active one
is opaque); dots get their own row 2 below. This makes the stage grow
to the tallest frame on the current viewport instead of clipping the
bottom of a tall frame (Fan Breakdown signal box) on mobile and letting
the absolutely-positioned dots overlap it. */
.reel-stage {
background: #1F1B16;
border-radius: 18px;
border: 2px solid rgba(255,255,255,.08);
box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
padding: 24px;
position: relative;
display: grid;
grid-template-rows: 1fr auto;
row-gap: 18px;
overflow: hidden;
}
.reel-stage:hover .reel-frame.is-active { animation-play-state: paused; }
.reel-label {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display);
color: rgba(255,255,255,.65);
font-size: .85rem; letter-spacing: .04em;
text-transform: uppercase; font-weight: 700;
margin-bottom: 20px;
}
.reel-label .reel-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(99,168,91,.7);
animation: reel-pulse 1.8s var(--ease-in-out-expo) infinite;
}
@keyframes reel-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(99,168,91,.7); }
50% { box-shadow: 0 0 0 8px rgba(99,168,91,0); }
}
/* Frames — all stacked in row 1 of the grid (same cell), opacity-crossfaded.
Grid takes the height of the tallest frame so layout is stable across
the rotation and no frame ever clips. */
.reel-frame {
grid-column: 1;
grid-row: 1;
opacity: 0; transition: opacity .6s var(--ease-out-quart);
pointer-events: none;
min-width: 0; /* let nested grids shrink inside narrow viewports */
}
.reel-frame.is-active { opacity: 1; pointer-events: auto; }
/* Frame 1 — KPI bento mini */
.reel-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(74px, auto);
gap: 12px;
margin-top: 36px;
}
.reel-kpi {
background: #302B23;
border-radius: 12px;
padding: 14px;
border: 1px solid rgba(255,255,255,.06);
}
.reel-kpi-hero { grid-column: span 2; grid-row: span 2; padding: 20px; }
.reel-kpi-wide { grid-column: span 2; }
.reel-kpi-label {
font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
font-size: .7rem; color: rgba(255,255,255,.55); margin-bottom: 4px;
}
.reel-kpi-val {
font-family: var(--font-display); font-weight: 900;
font-size: 1.8rem; line-height: 1; color: var(--magenta);
}
.reel-kpi-hero .reel-kpi-val { font-size: 3.4rem; }
.reel-kpi-delta {
font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 6px;
}
/* Frame 2 — Affinity */
.reel-affinity { padding-top: 28px; }
.reel-affinity-bar {
display: flex; height: 44px; border-radius: 10px; overflow: hidden;
border: 1px solid rgba(255,255,255,.08); margin-bottom: 18px;
background: rgba(255,255,255,.03);
}
.reel-affinity-seg {
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800;
font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
width: 0; transition: width 1.2s var(--ease-out-quart);
color: var(--paper);
}
.reel-frame[data-frame="2"].is-active .reel-affinity-seg { width: var(--target); }
.seg-canada { background: var(--magenta); }
.seg-bosnia { background: var(--teal); }
.seg-neutral { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.reel-affinity-legend {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
font-size: .85rem; color: rgba(255,255,255,.85);
margin-bottom: 16px;
}
.reel-affinity-legend .reel-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.reel-affinity-legend .dot-magenta { background: var(--magenta); }
.reel-affinity-legend .dot-teal { background: var(--teal); }
.reel-affinity-legend .dot-grey { background: rgba(255,255,255,.4); }
.reel-affinity-legend b { color: var(--paper); }
.reel-signal {
background: rgba(248,188,76,.10);
border-left: 3px solid var(--gold);
border-radius: 8px;
padding: 12px 14px;
font-size: .85rem; color: rgba(255,255,255,.9);
}
.reel-signal-label {
display: block;
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
font-size: .7rem; color: var(--gold);
margin-bottom: 4px;
}
/* Frame 3 — Capacity */
.reel-capacity { padding-top: 28px; }
.reel-cap-row {
display: flex; align-items: baseline; justify-content: space-between;
font-family: var(--font-display); font-weight: 800; color: var(--paper);
margin-bottom: 8px;
}
.reel-cap-row .reel-cap-team { font-size: 1.3rem; }
.reel-cap-row .reel-cap-val { font-size: 2rem; color: var(--gold); }
.reel-cap-row .reel-cap-cap { color: rgba(255,255,255,.5); font-size: 1rem; }
.reel-cap-row-sub {
font-family: var(--font-body); font-weight: 400; font-size: .82rem;
color: rgba(255,255,255,.6);
margin: 6px 0 16px;
}
.reel-cap-bar {
height: 14px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden;
margin-bottom: 8px;
}
.reel-cap-fill {
height: 100%; background: linear-gradient(90deg, var(--green), var(--gold));
width: 0; transition: width 1.4s var(--ease-out-quart);
border-radius: 999px;
}
.reel-frame[data-frame="3"].is-active .reel-cap-fill { width: var(--target); }
.reel-cap-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;
}
.reel-cap-card {
background: rgba(255,255,255,.05);
border-radius: 10px; padding: 14px;
border: 1px solid rgba(255,255,255,.06);
display: flex; flex-direction: column; gap: 4px;
}
.reel-cap-card-label {
font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
font-size: .72rem; color: rgba(255,255,255,.55);
}
.reel-cap-card-val {
font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--magenta);
}
.reel-cap-card-sub { font-size: .75rem; color: rgba(255,255,255,.5); }
/* Frame 4 — Check-ins */
.reel-checkins { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.reel-checkin {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.04);
border-radius: 10px;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,.05);
opacity: 0; transform: translateX(-12px);
}
.reel-frame[data-frame="4"].is-active .reel-checkin {
animation: reel-checkin-in .45s var(--ease-out-quart) forwards;
}
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(1) { animation-delay: .15s; }
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(2) { animation-delay: .55s; }
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(3) { animation-delay: .95s; }
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(4) { animation-delay: 1.35s; }
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(5) { animation-delay: 1.75s; }
.reel-frame[data-frame="4"].is-active .reel-checkin:nth-child(6) { animation-delay: 2.15s; }
@keyframes reel-checkin-in {
to { opacity: 1; transform: translateX(0); }
}
.reel-checkin-tick {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--green); color: var(--paper);
font-weight: 900; font-size: .85rem;
flex-shrink: 0;
}
.reel-checkin-name {
font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .02em; color: var(--paper);
min-width: 160px;
}
.reel-checkin-meta {
font-size: .78rem; color: rgba(255,255,255,.55);
}
.reel-checkin-meta-line {
text-align: center; font-size: .8rem; color: rgba(255,255,255,.4);
margin-top: 8px; font-style: italic;
opacity: 0; transition: opacity .4s ease;
}
.reel-frame[data-frame="4"].is-active .reel-checkin-meta-line {
opacity: 1; transition-delay: 2.6s;
}
/* Progress dots — row 2 of the stage grid, naturally below the frame
content so they never overlap a tall frame's signal box on mobile. */
.reel-dots {
grid-column: 1;
grid-row: 2;
justify-self: center;
display: flex; gap: 8px;
}
.reel-dot-btn {
width: 32px; height: 6px; border-radius: 999px; border: 0;
background: rgba(255,255,255,.18); cursor: pointer;
transition: background .25s ease;
padding: 0;
}
.reel-dot-btn:hover { background: rgba(255,255,255,.35); }
.reel-dot-btn.is-active { background: var(--gold); }
@media (max-width: 700px) {
.reel-stage { padding: 16px; }
.reel-kpis { grid-template-columns: repeat(2, 1fr); }
.reel-kpi-hero, .reel-kpi-wide { grid-column: span 2; }
.reel-kpi-hero .reel-kpi-val { font-size: 2.6rem; }
.reel-affinity-legend { grid-template-columns: 1fr; gap: 8px; }
.reel-cap-cards { grid-template-columns: 1fr; }
.reel-checkin { padding: 8px 12px; }
.reel-checkin-name { min-width: 110px; font-size: .9rem; }
.reel-checkin-meta { font-size: .7rem; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.reel-frame { transition: none; }
.reel-affinity-seg, .reel-cap-fill { transition: none !important; width: var(--target, 100%) !important; }
.reel-frame[data-frame="4"].is-active .reel-checkin {
animation: none; opacity: 1; transform: none;
}
.reel-label .reel-dot { animation: none; }
}
/* ---------- House notes — replaces the AI-default 4-col green rules strip
with an editorial layout: cream background, oversized numbered prefixes,
sentence-case headlines (not all caps), generous whitespace. Reads like
a venue's printed house notes, not a SaaS feature row. */
.house-notes {
background: var(--cream);
color: var(--ink);
padding: 72px 24px 80px;
position: relative;
}
.house-notes::before {
/* Subtle hairline rule at the top so the section reads as a deliberate
break in the page rhythm, not just a background swap. */
content: "";
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 64px; height: 3px;
background: var(--magenta);
border-radius: 2px;
}
.house-notes .inner { max-width: 1080px; margin: 0 auto; }
.house-notes-head {
margin-bottom: 48px;
display: flex; flex-direction: column; gap: 8px;
max-width: 720px;
}
.house-notes-eyebrow {
font-family: var(--font-display); font-weight: 800;
font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--magenta);
}
.house-notes-title {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
line-height: 1.05;
letter-spacing: -.005em;
margin: 0;
text-transform: none; /* sentence case */
color: var(--ink);
}
.house-notes-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 56px;
row-gap: 40px;
}
.house-note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 22px;
align-items: start;
padding-top: 6px;
border-top: 1px solid rgba(26, 26, 30, .12);
}
.house-note-num {
font-family: var(--font-display); font-weight: 900;
font-size: 3.4rem; line-height: 1;
letter-spacing: -.02em;
color: var(--magenta);
font-variant-numeric: tabular-nums;
min-width: 64px;
}
.house-note-body { min-width: 0; padding-top: 4px; }
.house-note-title {
font-family: var(--font-display); font-weight: 800;
font-size: 1.25rem;
line-height: 1.15;
margin: 0 0 8px;
letter-spacing: -.005em;
text-transform: none; /* sentence case, not all caps */
color: var(--ink);
}
.house-note-text {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
color: var(--grey-800);
margin: 0;
max-width: 42ch;
}
/* ---------- Filters ---------- */
.filters {
background: var(--cream);
padding: 22px 24px;
border-bottom: 1px solid var(--grey-100);
position: sticky; top: 56px; z-index: 40;
}
.filters .inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filters label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; color: var(--grey-600); }
.filters select, .filters input[type="text"] {
padding: 10px 14px; border-radius: 10px; border: 2px solid var(--grey-200);
font-family: var(--font-body); font-size: .95rem; background: var(--paper);
}
.filters .pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
background: var(--paper); border: 2px solid var(--grey-200); cursor: pointer;
}
.filters .pill.active { background: var(--black); color: var(--paper); border-color: var(--black); }
/* ---------- Schedule ---------- */
.schedule { background: var(--paper); padding: 32px 24px 80px; }
.schedule .inner { max-width: 1240px; margin: 0 auto; }
/* Live scores widget — currently-playing matches strip above the schedule.
Production wires to API-Football's live-fixtures endpoint; demo uses mocked scores. */
.live-scores {
background: linear-gradient(135deg, #1F1B16 0%, #302B23 100%);
color: var(--paper);
border-radius: var(--radius-lg);
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: var(--shadow-2);
border: 1px solid rgba(255,255,255,.05);
}
.live-scores:empty { display: none; }
.ls-header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.ls-pulse {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 800;
font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
color: #FF3A5C;
}
.ls-pulse-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #FF3A5C;
box-shadow: 0 0 0 0 rgba(255,58,92,.7);
animation: reel-pulse 1.6s var(--ease-in-out-expo) infinite;
}
.ls-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; flex: 1; }
.ls-source { font-size: .72rem; color: rgba(255,255,255,.55); }
.ls-source a { display: inline-block; padding: 12px 6px; min-height: 44px; line-height: 1.2; color: inherit; }
.ls-matches {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.ls-match {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.ls-match.is-live {
background: rgba(255,58,92,.08);
border-color: rgba(255,58,92,.2);
}
.ls-status { display: flex; align-items: center; gap: 8px; }
.ls-min {
font-family: var(--font-display); font-weight: 900;
font-size: 1.1rem; color: #FF3A5C;
font-variant-numeric: tabular-nums;
}
.ls-tag {
background: #FF3A5C; color: var(--paper);
font-family: var(--font-display); font-weight: 800;
font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px;
}
.ls-tag-up {
background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
font-family: var(--font-display); font-weight: 700;
font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px;
}
.ls-teams { display: flex; flex-direction: column; gap: 6px; }
.ls-team {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
}
.ls-flag { font-size: 1.3rem; }
.ls-team-name {
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; font-size: .95rem;
min-width: 0; word-wrap: break-word;
}
.ls-team-score {
font-family: var(--font-display); font-weight: 900;
font-size: 1.6rem; line-height: 1;
color: var(--paper);
font-variant-numeric: tabular-nums;
min-width: 28px; text-align: right;
}
.ls-match.is-live .ls-team-score { color: var(--gold); }
.ls-venue {
font-size: .72rem; color: rgba(255,255,255,.45);
border-top: 1px solid rgba(255,255,255,.06);
padding-top: 8px;
}
.ls-footnote {
margin-top: 14px;
font-size: .72rem; color: rgba(255,255,255,.4);
text-align: center;
}
.ls-footnote a { color: var(--gold); }
/* Live ticker — public-facing "operator dashboard at a glance" strip above the schedule.
Surfaces current load + walk-up wait for the next hot match. Updates each render. */
.live-ticker {
background: var(--black);
color: var(--paper);
border-radius: var(--radius-lg);
padding: 22px 28px;
margin-bottom: 32px;
box-shadow: var(--shadow-2);
position: relative; overflow: hidden;
}
.live-ticker::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 400px 200px at 90% 50%, rgba(240,165,36,.18), transparent 60%);
pointer-events: none;
}
.live-ticker:empty { display: none; }
.live-ticker-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 28px;
align-items: center;
}
.live-ticker-pulse {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 800;
font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--green);
}
.live-ticker-pulse .dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(99,168,91,.7);
animation: reel-pulse 1.6s var(--ease-in-out-expo) infinite;
}
.live-ticker-match {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 900;
text-transform: uppercase; letter-spacing: .02em;
}
.live-ticker-match .lt-flag { font-size: 1.4rem; }
.live-ticker-match .lt-team { font-size: 1.2rem; }
.live-ticker-data {
display: flex; align-items: center; gap: 28px;
border-left: 1px solid rgba(255,255,255,.15);
padding-left: 28px;
}
.lt-data-cell { text-align: left; }
.lt-data-val {
font-family: var(--font-display); font-weight: 900;
font-size: 1.5rem; line-height: 1; color: var(--paper);
}
.lt-data-val.heat-ok { color: var(--green); font-size: 1rem; letter-spacing: .04em; }
.lt-data-val.heat-warn { color: var(--gold); font-size: 1rem; letter-spacing: .04em; }
.lt-data-val.heat-full { color: var(--magenta); font-size: 1rem; letter-spacing: .04em; }
.lt-data-sep { font-size: 1rem; opacity: .55; margin: 0 2px; }
.lt-data-lbl {
font-family: var(--font-body); font-size: .7rem; letter-spacing: .04em;
text-transform: uppercase; color: rgba(255,255,255,.55);
margin-top: 4px;
}
@media (max-width: 980px) {
.live-ticker-inner { grid-template-columns: 1fr; gap: 16px; }
.live-ticker-data { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; gap: 20px; flex-wrap: wrap; }
}
/* Editorial day header — narrative framing breaks the "endless cards" rhythm.
Eyebrow (weekday) + giant date + narrative line + small match count. */
.schedule .day-header {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"eyebrow count"
"title count"
"lede count";
align-items: baseline;
column-gap: 18px;
margin: 44px 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--grey-200);
}
.schedule .day-header:first-of-type { margin-top: 8px; }
.schedule .day-header .day-ball { display: none; } /* Soccer ball moved into title row inline */
.schedule .day-header .day-eyebrow {
grid-area: eyebrow;
position: relative;
display: inline-block;
font-family: var(--font-display); font-weight: 800;
font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--magenta);
padding-bottom: 6px;
align-self: start;
width: max-content;
}
/* Hand-drawn underline that draws itself when the day-header scrolls into view.
Uses clip-path on a pseudo-element — hardware-accelerated, no SVG, no JS animation loop.
The slight angle and uneven thickness make it feel hand-drawn, not algorithmic. */
.schedule .day-header .day-eyebrow::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--magenta);
border-radius: 2px;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
transform-origin: left center;
}
.schedule .day-header .day-eyebrow.is-drawn::after {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.schedule .day-header .day-eyebrow::after { transition: none; clip-path: inset(0 0 0 0); }
}
.schedule .day-header h2 {
grid-area: title;
font-size: clamp(2rem, 4.5vw, 3rem);
letter-spacing: -.01em;
margin: 2px 0 4px;
text-transform: none;
}
.schedule .day-header .day-lede {
grid-area: lede;
font-family: var(--font-body);
color: var(--grey-600);
font-size: .98rem;
line-height: 1.45;
max-width: 62ch;
}
.schedule .day-header .day-sub,
.schedule .day-header .day-count {
grid-area: count;
font-family: var(--font-display); font-weight: 700;
font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--grey-600);
white-space: nowrap;
align-self: end;
}
/* ---------- VIEW TOGGLE — Schedule / Bracket switcher in filter bar.
Google-Material-style segmented control: active pill slides between
buttons with a magenta accent + scale-down on press for tactile feel.
Solves the "I can't tell what tapping does on mobile" feedback gap. */
/* Wrapper for the Schedule / Bracket toggle, positioned at the top of the
schedule section (was inside the filter bar — moved here so mobile users
actually see the layout change when they tap; the toggle is now adjacent
to the content it controls). */
.schedule-view-switcher {
display: flex;
justify-content: flex-start;
margin: 0 0 18px;
}
.view-toggle {
display: inline-flex;
background: var(--paper);
border: 2px solid var(--grey-200);
border-radius: 999px;
padding: 3px;
margin-right: 0;
position: relative;
box-shadow: var(--shadow-1);
}
.view-toggle-btn {
background: transparent; border: 0;
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .04em;
font-size: .82rem;
padding: 7px 16px;
border-radius: 999px;
cursor: pointer;
color: var(--grey-600);
transition: color .2s ease, transform .12s ease, background .25s ease;
position: relative; z-index: 2;
}
.view-toggle-btn.is-active {
background: var(--magenta);
color: var(--paper);
box-shadow: 0 2px 8px rgba(240, 165, 36, .25);
}
.view-toggle-btn:hover:not(.is-active) { color: var(--ink); background: rgba(0,0,0,.03); }
.view-toggle-btn:active { transform: scale(0.96); } /* tactile press feedback */
.view-toggle-btn:focus-visible {
outline: 3px solid var(--casamigos-teal); outline-offset: 2px;
}
.view-pane { display: none; }
.view-pane.is-active { display: block; }
/* ---------- KNOCKOUT BRACKET — desktop tree + mobile round tabs.
Each cell is a RendezViews-specific match: teams, time, capacity bar,
heat indicator. Click → match detail page. Differentiates from every
static news-site bracket by attaching live local data to every match. */
#bracket-body { padding: 8px 0 40px; }
/* Sponsor strip at top of bracket */
.bracket-sponsor {
display: flex; align-items: center; justify-content: center;
gap: 12px;
margin-bottom: 28px;
padding: 16px;
background: linear-gradient(135deg, var(--black) 0%, #3C362C 100%);
border: 1px solid var(--sponsor-accent, var(--gold));
border-radius: 14px;
position: relative; overflow: hidden;
}
.bracket-sponsor::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 100%, var(--sponsor-accent, var(--gold)) 0%, transparent 60%);
opacity: .14; pointer-events: none;
}
.bracket-sponsor-eyebrow {
font-family: var(--font-display); font-weight: 900;
font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--paper);
}
.bracket-sponsor-presents {
font-family: var(--font-body); font-size: .75rem;
color: rgba(255,255,255,.5);
letter-spacing: .04em;
}
.bracket-sponsor-name {
font-family: var(--font-display); font-weight: 800;
font-size: 1.2rem; letter-spacing: .04em;
color: var(--sponsor-accent, var(--gold));
}
/* Mobile round tabs — visible only on mobile */
.bracket-tabs {
display: none;
gap: 6px;
margin-bottom: 16px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
}
.bracket-tabs::-webkit-scrollbar { display: none; }
.bracket-tab {
display: inline-flex; align-items: center; gap: 6px;
background: var(--paper);
border: 2px solid var(--grey-200);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-display); font-weight: 800;
font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--grey-800);
cursor: pointer;
white-space: nowrap;
transition: all .15s ease;
}
.bracket-tab.is-active { background: var(--black); color: var(--gold); border-color: var(--black); }
.bracket-tab-count {
background: rgba(0,0,0,.08);
color: inherit;
font-size: .7rem;
padding: 1px 7px;
border-radius: 999px;
opacity: .8;
}
.bracket-tab.is-active .bracket-tab-count { background: rgba(255,255,255,.15); }
.bracket-mobile-stage, .bracket-mobile-list {
display: none;
flex-direction: column;
gap: 12px;
}
/* Desktop bracket — 9 columns: R32 | R16 | QF | SF | Final/3rd | SF | QF | R16 | R32 */
.bracket-desktop {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 16px;
align-items: start;
}
.bracket-col {
display: flex; flex-direction: column;
min-width: 0;
}
.bracket-col-title {
font-family: var(--font-display); font-weight: 800;
font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--grey-600);
text-align: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--grey-100);
}
.bracket-col-cells {
display: flex; flex-direction: column;
gap: 16px;
justify-content: space-around;
flex: 1;
}
/* Cell — the actual match card inside the bracket */
.bracket-cell {
display: flex; flex-direction: column;
background: var(--paper);
border: 2px solid var(--grey-100);
border-radius: 10px;
padding: 10px 12px;
text-decoration: none;
color: var(--ink);
transition: transform .2s var(--ease-spring), box-shadow .2s ease, border-color .15s ease;
min-height: 88px;
position: relative;
}
.bracket-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); text-decoration: none; }
.bracket-cell:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bracket-cell.is-final { border-color: var(--gold); background: linear-gradient(135deg, var(--paper), #3C362C); min-height: 110px; }
.bracket-cell.is-hot { border-color: var(--magenta); }
.bracket-cell.is-sold-out { border-color: #B86E16; background: linear-gradient(135deg, var(--paper), #3A2A2A); }
.bracket-cell.is-warm { border-color: var(--gold); }
.bracket-cell.is-open { border-color: var(--green); }
.bracket-cell.is-placeholder {
background: transparent; border: 2px dashed var(--grey-200);
color: var(--grey-400);
display: flex; align-items: center; justify-content: center;
text-align: center;
pointer-events: none;
}
.bracket-cell-meta {
display: flex; justify-content: space-between; align-items: center;
font-size: .65rem; color: var(--grey-600);
margin-bottom: 6px;
}
.bracket-cell-id {
font-family: var(--font-display); font-weight: 700;
background: var(--grey-100); color: var(--grey-800);
padding: 1px 6px; border-radius: 4px;
letter-spacing: .04em;
}
.bracket-cell-date { letter-spacing: .02em; }
.bracket-cell-teams {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 8px;
}
.bracket-cell-team {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 700;
font-size: .85rem; text-transform: uppercase;
letter-spacing: .02em;
min-width: 0;
}
.bcell-flag { font-size: 1rem; flex-shrink: 0; }
.bcell-name { min-width: 0; word-wrap: break-word; line-height: 1.1; }
.bracket-cell.is-final .bracket-cell-team { font-size: 1rem; }
.bracket-cell-foot {
display: flex; align-items: center; gap: 8px;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--grey-100);
}
.bracket-cell-bar {
flex: 1; height: 4px;
background: var(--grey-100);
border-radius: 999px; overflow: hidden;
}
.bracket-cell-fill {
height: 100%; background: var(--green);
border-radius: 999px;
transition: width .35s ease;
}
.bracket-cell.is-warm .bracket-cell-fill { background: var(--gold); }
.bracket-cell.is-hot .bracket-cell-fill { background: var(--magenta); }
.bracket-cell.is-sold-out .bracket-cell-fill { background: #B86E16; }
.bracket-cell-heat {
font-size: .65rem;
font-family: var(--font-display); font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: var(--grey-600);
white-space: nowrap;
}
.bracket-cell.is-hot .bracket-cell-heat,
.bracket-cell.is-sold-out .bracket-cell-heat { color: var(--magenta); }
/* Tablet — switch to mobile mode at 1100px since bracket is wide */
@media (max-width: 1199px) {
.bracket-desktop { display: none; }
.bracket-tabs { display: flex; }
.bracket-mobile-stage, .bracket-mobile-list { display: flex; }
.bracket-sponsor { padding: 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bracket-sponsor-eyebrow { font-size: 1rem; }
.bracket-sponsor-name { font-size: 1rem; }
}
/* Mobile cells go wider, more readable */
@media (max-width: 1199px) {
.bracket-mobile-stage .bracket-cell { min-height: auto; padding: 14px 16px; }
.bracket-mobile-stage .bracket-cell-team { font-size: 1rem; }
.bracket-mobile-stage .bcell-flag { font-size: 1.4rem; }
.bracket-mobile-stage .bracket-cell-bar { height: 6px; }
.bracket-mobile-stage .bracket-cell-heat { font-size: .75rem; }
}
/* ---------- Asymmetric bento per day — tier drives card size.
marquee/featured = 4-col full-bleed
hot = 2x2
rsvp = 2x1
open = 1x1
grid-auto-flow: dense packs gaps automatically so we never need per-card breakpoint logic.
The asymmetry IS the hierarchy — the eye finds hot matches without any colored stripe. */
.match-grid { display: contents; } /* legacy wrapper — children participate in parent bento */
.match-grid-featured,
.match-grid-others {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(170px, auto);
grid-auto-flow: dense;
gap: 16px;
margin-bottom: 24px;
align-items: stretch;
}
.match-card { min-width: 0; }
.match-grid-others .match-card.tier-open { grid-column: span 1; grid-row: span 1; }
.match-grid-others .match-card.tier-rsvp { grid-column: span 2; grid-row: span 1; }
.match-grid-others .match-card.tier-hot { grid-column: span 2; grid-row: span 2; }
.match-grid-featured .match-card,
.match-grid-others .match-card.featured { grid-column: 1 / -1; grid-row: span 2; }
@media (max-width: 1100px) {
.match-grid-featured,
.match-grid-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-grid-others .match-card.tier-hot,
.match-grid-others .match-card.tier-rsvp { grid-column: span 2; grid-row: span 1; }
.match-grid-others .match-card.tier-open { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 640px) {
.match-grid-featured,
.match-grid-others {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 12px;
}
.match-grid-others .match-card,
.match-grid-featured .match-card { grid-column: 1 / -1; grid-row: auto; }
/* Hold asymmetry on mobile via height, not span — small cards stay shorter than hot. */
.match-grid-others .match-card.tier-open { min-height: 130px; }
.match-grid-others .match-card.tier-rsvp { min-height: 170px; }
.match-grid-others .match-card.tier-hot { min-height: 210px; }
.match-grid-featured .match-card,
.match-grid-others .match-card.featured { min-height: 240px; }
}
.match-card {
background: var(--paper);
border: 1px solid var(--grey-200);
border-radius: var(--radius);
padding: 22px;
display: flex; flex-direction: column; gap: 14px;
position: relative; overflow: hidden;
transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Tall cards (hot, featured) distribute content vertically so the CTA lives
at the bottom and the matchup breathes in the middle — fills the 2-row span. */
.match-card.tier-hot,
.match-card.featured { justify-content: space-between; }
/* Stronger badge — replaces the lost side-stripe as the primary tier signal. */
.match-card .badge { font-weight: 800; padding: 5px 12px; }
.match-card.tier-hot .badge.tier-hot { box-shadow: 0 2px 8px rgba(240,165,36,.25); }
/* Bigger cards earn bigger typography */
.match-card.tier-hot .team .name { font-size: 1.65rem; }
.match-card.tier-hot .kickoff { font-size: 2.2rem; }
.match-card.tier-hot .meta { font-size: .85rem; }
.match-card.featured .team .name { font-size: 2.2rem; }
.match-card.featured .kickoff { font-size: 2.8rem; }
.match-card.featured { padding: 28px 32px; }
.match-card.featured .matchup { gap: 32px; }
.match-card.featured .team .flag { font-size: 2.6rem; }
.match-card {
transition: transform .35s var(--ease-out-quart),
box-shadow .35s var(--ease-out-quart),
border-color .25s ease;
will-change: transform;
}
.match-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: var(--grey-200);
}
.match-card.tier-hot:hover { box-shadow: var(--shadow-2); }
.match-card:focus-within { box-shadow: var(--shadow-2); border-color: var(--ink); }
/* Stagger-in on load — IntersectionObserver flips .reveal → .revealed */
.match-card.reveal { opacity: 0; transform: translateY(20px); }
.match-card.revealed {
opacity: 1; transform: translateY(0);
transition: opacity .55s var(--ease-out-quart), transform .55s var(--ease-out-quart);
}
/* Tier signal — small inline pip + a confident heat label, not a side-stripe.
The side-stripe-on-every-card pattern is the #1 AI-design tell — gone. */
.match-card.tier-hot { border-color: var(--grey-200); }
.match-card .row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.match-card .meta { font-family: var(--font-body); font-size: .8rem; color: var(--grey-600); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.match-card .badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
}
.badge.tier-open { background: rgba(99,168,91,.15); color: var(--green-dark); }
.badge.tier-rsvp { background: rgba(248,188,76,.18); color: #8C5F00; }
.badge.tier-hot { background: var(--magenta); color: var(--paper); }
/* Matchup uses CSS Grid so long team names ("Bosnia & Herzegovina", "Korea Republic")
break cleanly without misaligning the "vs" separator. */
.match-card .matchup {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 4px;
min-width: 0;
}
.match-card .team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.match-card .team:last-child { justify-content: flex-start; }
/* ===== Flagpack flag sizing — single .rv-flag ![]()
class, contextual sizes.
Flagpack SVGs are 32x24 (4:3). We render via ![]()
and size with width/height
in em or rem depending on context. Subtle 1px ring + small border-radius makes
them read as artifacts, not glyphs. ===== */
.match-card .team .flag {
font-size: 1.6rem; flex-shrink: 0; line-height: 1;
display: inline-flex; align-items: center;
}
.rv-flag {
display: inline-block;
width: 1.6em; height: 1.2em;
border-radius: 3px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(0,0,0,.06);
vertical-align: -.18em;
flex-shrink: 0;
}
.match-card.tier-hot .team .flag .rv-flag,
.match-card.featured .team .flag .rv-flag { width: 1.8em; height: 1.35em; border-radius: 4px; }
.fe-flag .rv-flag { width: 3.2rem; height: 2.4rem; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ls-flag .rv-flag { width: 1.4em; height: 1.05em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); vertical-align: -.15em; }
.lt-flag .rv-flag { width: 1.5em; height: 1.125em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); vertical-align: -.15em; }
.bcell-flag .rv-flag { width: 1.2em; height: .9em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: -.12em; }
.reel-affinity-seg .rv-flag,
.reel-cap-team .rv-flag,
.reel-signal-text .rv-flag {
width: 1.1em; height: .825em; border-radius: 2px; vertical-align: -.1em;
box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
/* Placeholder pip for slots without a confirmed team (1A, W M073) */
.flag-placeholder {
display: inline-block;
width: 1.4em; height: 1.05em;
border-radius: 3px;
background: repeating-linear-gradient(135deg, var(--grey-100) 0 6px, var(--grey-200) 6px 12px);
vertical-align: -.18em;
flex-shrink: 0;
}
.match-card .team .name {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
font-size: 1.2rem; line-height: 1.05;
min-width: 0;
word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;
}
/* "vs" uses the Instrument Serif italic — a single character that breaks the
sans rhythm and signals "this was art-directed." AI scaffolds never do this. */
.match-card .vs {
font-family: var(--font-accent); font-style: italic;
font-weight: 400;
color: var(--grey-600);
font-size: 1.25rem;
flex-shrink: 0;
letter-spacing: -.02em;
}
.match-card.tier-hot .vs,
.match-card.featured .vs { font-size: 1.7rem; }
.detail .vs-big {
font-family: var(--font-accent) !important;
font-style: italic;
font-weight: 400 !important;
letter-spacing: -.02em;
opacity: .8 !important;
}
.match-card .kickoff { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.match-card .venue { font-size: .85rem; color: var(--grey-600); }
.match-card .feature-tag {
display: inline-block; background: var(--black); color: var(--gold);
padding: 3px 8px; border-radius: 6px; font-size: .7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}
.match-card .capacity { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .82rem; color: var(--grey-600); }
.match-card .capacity .bar { flex: 1; height: 6px; background: var(--grey-100); border-radius: 999px; overflow: hidden; }
.match-card .capacity .fill { height: 100%; background: var(--green); transition: width .35s ease; }
.match-card .capacity .fill.warn { background: var(--gold); }
.match-card .capacity .fill.full { background: var(--magenta); }
.match-card .cta { display: flex; gap: 8px; margin-top: 4px; }
.match-card .cta .btn { flex: 1; }
/* ---------- Match detail page ---------- */
.detail {
background: var(--magenta); color: var(--paper);
padding: 56px 24px;
}
.detail .inner { max-width: 880px; margin: 0 auto; }
.detail .back { color: var(--paper); opacity: .85; font-size: .9rem; }
.detail .matchup-big { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 28px 0 16px; flex-wrap: wrap; }
.detail .team-big { text-align: center; }
.detail .team-big .flag { font-size: 4rem; display: inline-flex; line-height: 1; }
.detail .team-big .flag .rv-flag {
width: 4.2rem; height: 3.15rem;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.2);
}
.detail .team-big .name { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; text-transform: uppercase; line-height: 1; margin-top: 6px; }
.detail .vs-big { font-family: var(--font-display); font-size: 2rem; font-weight: 900; opacity: .6; }
.detail .summary { text-align: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.detail .summary .pipe { opacity: .5; margin: 0 8px; }
.detail .feature-banner { background: var(--black); color: var(--gold); padding: 12px; border-radius: 12px; text-align: center; margin: 16px auto 0; max-width: 480px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
/* ---------- RSVP form ---------- */
.rsvp-section { background: var(--paper); padding: 48px 24px; }
.rsvp-section .inner { max-width: 720px; margin: 0 auto; }
.rsvp-section h2 { margin-bottom: 8px; }
.rsvp-section .sub { color: var(--grey-600); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.single { grid-template-columns: 1fr; }
.form-field label { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; margin-bottom: 6px; }
.form-field { transition: transform .2s var(--ease-out-quart); }
.form-field input, .form-field select, .form-field textarea {
width: 100%; padding: 14px 16px; border-radius: 10px;
border: 2px solid var(--grey-200); background: var(--paper);
font-family: var(--font-body); font-size: 1rem;
transition: border-color .15s ease,
box-shadow .15s ease,
background .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none; border-color: var(--magenta);
box-shadow: 0 0 0 4px rgba(240,165,36,.10);
}
.form-field label { transition: color .15s ease; }
.form-field:focus-within label { color: var(--magenta); }
/* Error state shake */
.form-field.error { animation: shake .35s var(--ease-out-quart); }
@keyframes shake {
10%, 90% { transform: translateX(-2px); }
20%, 80% { transform: translateX(3px); }
30%, 50%, 70% { transform: translateX(-5px); }
40%, 60% { transform: translateX(5px); }
}
.form-field .hint { font-size: .8rem; color: var(--grey-600); margin-top: 4px; }
.fan-zone-counter {
margin-top: 8px; padding: 8px 12px;
background: linear-gradient(90deg, rgba(240,165,36,.08), rgba(248,188,76,.08));
border-left: 3px solid var(--magenta);
border-radius: 6px;
font-size: .88rem;
color: var(--ink);
opacity: 0;
transform: translateY(-4px);
transition: opacity .25s var(--ease-out-quart), transform .25s var(--ease-out-quart);
pointer-events: none;
}
.fan-zone-counter.show { opacity: 1; transform: translateY(0); }
.fan-zone-counter b { color: var(--magenta-dark); }
.fan-zone-icon { display: inline-block; margin-right: 4px; }
.form-field.error input, .form-field.error select { border-color: var(--magenta); background: #FFF0F7; }
.form-field .error-msg { color: var(--magenta); font-size: .82rem; margin-top: 4px; display: none; }
.form-field.error .error-msg { display: block; }
/* Sponsor prize draw widget — turns static logos into measurable activations.
Per-match sponsor (Casamigos / Budweiser etc) presents a prize, opt-in checkbox
tags the RSVP for sponsor attribution. The accent color comes from the sponsor record. */
.prize-draw {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 18px;
background: linear-gradient(135deg, rgba(248,188,76,.06), rgba(240,165,36,.04));
border: 2px solid var(--grey-100);
border-left: 4px solid var(--sponsor-accent, var(--gold));
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 16px;
position: relative; overflow: hidden;
}
.prize-draw::after {
content: "🏆";
position: absolute; right: -12px; bottom: -22px;
font-size: 5rem; opacity: .06;
pointer-events: none;
}
.prize-draw-meta { min-width: 0; }
.prize-draw-tag {
display: inline-block;
font-family: var(--font-display);
font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
font-weight: 800;
color: var(--sponsor-accent, var(--gold));
margin-bottom: 4px;
}
.prize-draw-title {
font-family: var(--font-display); font-weight: 800;
font-size: 1.05rem; line-height: 1.25;
color: var(--ink);
}
.prize-draw-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--paper);
border: 2px solid var(--sponsor-accent, var(--gold));
border-radius: 999px;
padding: 8px 14px;
font-size: .85rem; font-weight: 600;
color: var(--ink);
cursor: pointer;
white-space: nowrap;
}
.prize-draw-cta input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--sponsor-accent, var(--gold));
margin: 0;
}
@media (max-width: 600px) {
.prize-draw { grid-template-columns: 1fr; gap: 12px; }
.prize-draw-cta { justify-content: center; }
}
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.checkbox-row input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--magenta); }
.checkbox-row label { font-size: .9rem; color: var(--grey-800); }
.submit-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.capacity-status { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }
.capacity-status .num { color: var(--magenta); font-size: 1.3rem; }
.capacity-status.full { color: var(--magenta); }
/* ---------- NPS page — post-match feedback with smart routing.
Promoters (9-10) get a one-tap Google Review CTA. Passives/detractors (0-8)
land on a private feedback form that goes to RendezViews directly. Per the
4.5-star-economy research, this routing is the highest-leverage star-lift play. */
.nps-hero {
background: var(--magenta);
color: var(--paper);
padding: 72px 24px 80px;
text-align: center;
position: relative; overflow: hidden;
min-height: 60vh;
}
.nps-hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 700px 500px at 20% 0%, rgba(248,188,76,.4), transparent 60%),
radial-gradient(ellipse 600px 600px at 80% 100%, rgba(99,168,91,.4), transparent 60%);
animation: drift-a 18s var(--ease-in-out-expo) infinite alternate;
pointer-events: none;
}
.nps-inner { position: relative; max-width: 720px; margin: 0 auto; }
.nps-hero .eyebrow { display: inline-block; background: var(--black); color: var(--gold); padding: 6px 14px; border-radius: 999px; font-family: var(--font-display); letter-spacing: .12em; font-weight: 700; font-size: .85rem; text-transform: uppercase; }
.nps-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-top: 18px; }
.nps-hero h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin-top: 24px; margin-bottom: 8px; }
.nps-hero .lede { max-width: 540px; margin: 16px auto 0; opacity: .92; }
.nps-hero p { margin: 8px auto 0; opacity: .92; max-width: 540px; }
.nps-scale {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 8px;
max-width: 720px; margin: 32px auto 12px;
}
.nps-num {
background: rgba(255,255,255,.12);
border: 2px solid rgba(255,255,255,.18);
color: var(--paper);
font-family: var(--font-display); font-weight: 800;
font-size: 1.2rem;
border-radius: 12px;
aspect-ratio: 1; min-height: 56px;
cursor: pointer;
transition: transform .2s var(--ease-spring), background .15s ease, border-color .15s ease;
}
.nps-num:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.nps-num:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.nps-num.is-promoter { background: rgba(99,168,91,.22); border-color: rgba(99,168,91,.5); }
.nps-num.is-promoter:hover { background: var(--green); color: var(--black); border-color: var(--green); }
.nps-num.is-selected { background: var(--gold); color: var(--black); border-color: var(--gold); transform: scale(1.08); }
.nps-scale-labels { display: flex; justify-content: space-between; max-width: 720px; margin: 0 auto; font-size: .75rem; opacity: .65; letter-spacing: .02em; }
.nps-stage { transition: opacity .35s var(--ease-out-quart); }
.nps-stage.hidden { display: none; }
.nps-celebration {
font-size: 4rem; margin: 24px 0 12px;
animation: nps-pop .6s var(--ease-spring);
}
@keyframes nps-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}
.nps-stage textarea {
width: 100%; max-width: 560px; margin: 18px auto 0;
background: rgba(255,255,255,.95);
border: 2px solid transparent;
border-radius: 12px;
padding: 16px 18px;
font-family: var(--font-body); font-size: 1rem;
color: var(--ink);
resize: vertical; min-height: 120px;
display: block;
}
.nps-stage textarea:focus { outline: none; border-color: var(--gold); }
.nps-actions {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
margin-top: 24px;
}
.nps-actions .btn-ghost { color: var(--paper); border-color: rgba(255,255,255,.4); background: transparent; }
.nps-actions .btn-ghost:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
.nps-scale { grid-template-columns: repeat(6, 1fr); }
.nps-num { font-size: 1rem; min-height: 48px; }
.nps-scale-labels { display: none; }
}
/* ---------- Confirmation ---------- */
.confirm-hero { background: var(--green); color: var(--black); padding: 56px 24px; text-align: center; }
.confirm-hero h1 { color: var(--black); }
.confirm-hero .check { font-size: 4rem; }
.confirm-card {
max-width: 520px; margin: -40px auto 60px; background: var(--paper);
border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-2);
text-align: center; position: relative; z-index: 2;
}
.confirm-card .qr { margin: 18px auto; width: 220px; height: 220px; padding: 12px; background: var(--paper); border: 2px solid var(--grey-100); border-radius: 14px; }
.confirm-card .qr canvas, .confirm-card .qr img { width: 100%; height: 100%; }
.confirm-card .code { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .12em; font-weight: 800; margin-top: 8px; }
.confirm-card .details { text-align: left; margin: 18px 0; padding: 16px; background: var(--grey-50); border-radius: 12px; }
.confirm-card .details div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--grey-200); font-size: .9rem; }
.confirm-card .details div:last-child { border-bottom: 0; }
.confirm-card .details .k { color: var(--grey-600); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.confirm-card .details .v { font-weight: 600; }
/* ---------- Footer ---------- */
.footer { background: var(--magenta); color: var(--paper); padding: 48px 24px 32px; }
.footer .inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.footer h4 { color: var(--paper); margin-bottom: 10px; }
.footer a { color: var(--paper); text-decoration: underline; }
.footer .legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); font-size: .8rem; opacity: .85; text-align: center; }
@media (max-width: 720px) { .footer .inner { grid-template-columns: 1fr; } }
/* Demo entry gate — confidentiality acknowledgement before the site loads.
Not real security; signals intent. localStorage flag dismisses it for return visits. */
.demo-gate {
position: fixed; inset: 0;
background: var(--magenta);
background-image:
radial-gradient(ellipse 700px 500px at 20% 0%, rgba(248,188,76,.45), transparent 60%),
radial-gradient(ellipse 600px 600px at 80% 100%, rgba(99,168,91,.42), transparent 60%);
z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 1; transition: opacity .4s ease;
}
.demo-gate.hide { opacity: 0; pointer-events: none; }
.demo-gate-card {
background: var(--paper);
border-radius: var(--radius-lg);
padding: 40px;
max-width: 520px; width: 100%;
box-shadow: var(--shadow-3);
text-align: center;
}
.demo-gate-card .mark {
width: 56px; height: 56px; border-radius: 14px;
background: var(--amber-500);
margin: 0 auto 16px;
box-shadow: 0 8px 24px rgba(240,165,36,.3);
}
.demo-gate-card h2 { margin-bottom: 8px; }
.demo-gate-card h2 .accent { color: var(--magenta); display: block; }
.demo-gate-card p { color: var(--grey-600); margin-bottom: 18px; font-size: .95rem; line-height: 1.6; }
.demo-gate-card .terms {
background: var(--grey-50); border-radius: 10px; padding: 14px;
text-align: left; font-size: .82rem; color: var(--grey-800);
margin-bottom: 18px;
border-left: 3px solid var(--gold);
}
.demo-gate-card .terms b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; color: var(--grey-600); margin-bottom: 4px; }
.demo-gate-card .checkbox {
display: flex; align-items: flex-start; gap: 10px;
font-size: .9rem; color: var(--grey-800);
text-align: left;
margin-bottom: 18px;
cursor: pointer;
}
.demo-gate-card .checkbox input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--magenta); }
.demo-gate-card .actions { display: flex; gap: 10px; flex-direction: column; }
.demo-gate-card .meta {
margin-top: 16px; font-size: .78rem; color: var(--grey-400);
}
/* Admin watermark — confidential demo badge in the corner.
Visible enough to deter screenshots being passed around without context,
subtle enough not to interfere with the dashboard UX. */
.admin-watermark {
position: fixed; bottom: 14px; right: 14px;
background: rgba(0,0,0,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: var(--gold);
font-family: var(--font-display); font-weight: 700;
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
padding: 8px 14px; border-radius: 999px;
border: 1px solid rgba(248,188,76,.3);
pointer-events: none;
z-index: 80;
user-select: none;
display: flex; align-items: center; gap: 8px;
}
.admin-watermark::before {
content: ""; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--magenta);
box-shadow: 0 0 8px rgba(240,165,36,.7);
animation: reel-pulse 2s var(--ease-in-out-expo) infinite;
}
/* Floating Scroll-to-Top button — stacks above the DEMO watermark so they
don't overlap. Hidden when at the top of the page (toggled via JS based
on window.scrollY). Sized 48px for AA-pass touch target. */
.scroll-top-fab {
position: fixed;
bottom: 62px; right: 14px;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
border: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 8px 28px rgba(0,0,0,.18);
z-index: 81;
opacity: 0;
transform: translateY(8px) scale(.92);
transition: opacity .2s var(--ease-out-quart), transform .25s var(--ease-out-quart), background .15s ease;
pointer-events: none;
}
.scroll-top-fab[hidden] { display: none; }
.scroll-top-fab.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.scroll-top-fab:hover { background: var(--magenta); }
.scroll-top-fab:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.scroll-top-fab:active { transform: translateY(0) scale(.94); }
/* ---------- ADMIN — Light, daylight-readable.
The operator scene: bartender on iPad in a bright bar at 1pm Saturday kickoff.
Dark "command center" looked cool in the abstract but failed the actual context test.
Light surface, off-white workbench, dark slim header for chrome — that's the working stance.
Brand magenta stays as the action accent. */
.admin-shell {
--paper: #FFFFFF;
--ink: #24201A;
--grey-50: #F6F6F8;
--grey-100: #EDEDF0;
--grey-200: #DCDCE0;
--grey-300: #C2C2C8;
--grey-400: #8A8A92;
--grey-600: #4A4A52;
--grey-800: #1F1F25;
--cream: #FBF8F2;
background: var(--grey-50);
color: var(--ink);
min-height: 100vh;
}
.admin-shell body { color: var(--ink); }
.admin-shell input,
.admin-shell select,
.admin-shell textarea {
background: var(--grey-100);
color: var(--ink);
border-color: var(--grey-300);
}
.admin-shell input::placeholder { color: var(--grey-400); }
.admin-shell .admin-main h1,
.admin-shell .admin-main h2,
.admin-shell .admin-main h3 { color: var(--ink); }
.admin-shell .admin-main .sub { color: var(--grey-600); }
/* Magenta primary still pops on dark */
.admin-shell .btn-primary { background: var(--magenta); color: var(--paper); }
.admin-shell .btn-primary:hover { background: var(--gold); color: var(--paper); }
.admin-shell .btn-ghost { color: var(--ink); border-color: var(--grey-300); }
.admin-shell .btn-ghost:hover { background: var(--grey-100); }
/* Table rows + headers */
.admin-shell .admin-table { background: var(--paper); border-color: var(--grey-200); }
.admin-shell .admin-table th { background: var(--grey-100); color: var(--grey-600); }
.admin-shell .admin-table th,
.admin-shell .admin-table td { border-bottom-color: var(--grey-200); color: var(--ink); }
.admin-shell .status-chip.pending { background: var(--grey-200); color: var(--grey-600); }
/* Affinity panel adapts */
.admin-shell .affinity-panel { background: var(--paper) !important; border-color: var(--grey-200) !important; }
.admin-shell .affinity-panel h3 { color: var(--ink); }
.admin-shell .affinity-panel .affinity-bar { border-color: var(--grey-200) !important; }
/* (Cream callout dark-mode override removed — admin is now light, cream is cream.) */
/* Priority panel — pinned matches happening in the next 24 hours.
Most of the time staff only care about ~3 matches; this puts them at the top. */
.admin-shell .priority-panel {
background: var(--paper);
border: 2px solid var(--grey-200);
border-radius: var(--radius);
padding: 18px 20px;
margin: 20px 0 24px;
}
.admin-shell .priority-panel-head {
display: flex; align-items: baseline; gap: 14px;
margin-bottom: 14px; flex-wrap: wrap;
}
.admin-shell .priority-eyebrow {
font-family: var(--font-display); font-weight: 800;
font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--magenta);
display: inline-flex; align-items: center; gap: 8px;
}
.admin-shell .priority-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--magenta);
box-shadow: 0 0 0 0 rgba(240,165,36,.6);
animation: reel-pulse 1.6s var(--ease-in-out-expo) infinite;
}
.admin-shell .priority-sub { font-size: .82rem; color: var(--grey-600); }
.admin-shell .priority-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.admin-shell .priority-card {
background: var(--grey-50);
border: 2px solid var(--grey-200);
border-radius: 12px;
padding: 14px;
text-decoration: none;
color: var(--ink);
display: flex; flex-direction: column; gap: 10px;
transition: transform .2s var(--ease-spring), border-color .15s ease, box-shadow .2s ease;
}
.admin-shell .priority-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); text-decoration: none; }
.admin-shell .priority-card.is-hot { border-color: var(--magenta); }
.admin-shell .priority-card.is-warm { border-color: var(--gold); }
.admin-shell .priority-card.is-sold { border-color: #B86E16; background: rgba(240,165,36,.06); }
.admin-shell .priority-card-meta {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-display); font-weight: 800;
font-size: .85rem;
}
.admin-shell .priority-card-time { color: var(--ink); }
.admin-shell .priority-card-in { color: var(--grey-600); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-shell .priority-card-teams {
display: flex; flex-direction: column; gap: 2px;
font-family: var(--font-display); font-weight: 800;
text-transform: uppercase; letter-spacing: .02em;
font-size: .95rem;
}
.admin-shell .priority-card-team-row {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.admin-shell .priority-card-flag { flex-shrink: 0; line-height: 1; }
.admin-shell .priority-card-name { min-width: 0; line-height: 1.2; }
.admin-shell .priority-card-vs {
color: var(--grey-400); font-size: .7rem; font-weight: 700;
letter-spacing: .08em; padding-left: 2px;
}
.admin-shell .priority-card-cap {
display: flex; align-items: center; gap: 8px;
}
.admin-shell .priority-card-bar { flex: 1; height: 6px; background: var(--grey-200); border-radius: 999px; overflow: hidden; }
.admin-shell .priority-card-fill { height: 100%; background: var(--green); transition: width .35s ease; }
.admin-shell .priority-card.is-warm .priority-card-fill { background: var(--gold); }
.admin-shell .priority-card.is-hot .priority-card-fill { background: var(--magenta); }
.admin-shell .priority-card.is-sold .priority-card-fill { background: #B86E16; }
.admin-shell .priority-card-pct {
font-family: var(--font-display); font-weight: 900;
font-size: .85rem; color: var(--grey-800);
font-variant-numeric: tabular-nums;
min-width: 38px; text-align: right;
}
.admin-shell .priority-card-foot {
display: flex; justify-content: space-between; align-items: center;
font-size: .78rem; color: var(--grey-600);
padding-top: 6px;
border-top: 1px solid var(--grey-200);
}
.admin-shell .priority-card-cta {
color: var(--magenta);
font-family: var(--font-display); font-weight: 700;
letter-spacing: .04em;
}
/* Status chips — filter slices that match how staff actually triage */
.admin-shell .status-chips {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 14px;
}
.admin-shell .status-chip-btn {
background: var(--paper);
border: 2px solid var(--grey-200);
border-radius: 999px;
padding: 7px 14px;
font-family: var(--font-display); font-weight: 700;
font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--grey-600);
cursor: pointer;
transition: all .15s ease;
}
.admin-shell .status-chip-btn:hover { color: var(--ink); border-color: var(--grey-300); }
.admin-shell .status-chip-btn.is-active {
background: var(--magenta); color: var(--paper); border-color: var(--magenta);
}
/* Magenta priority border on table rows ≥80% capacity — eye flies straight to them */
.admin-shell .admin-table tr.is-priority td:first-child {
border-left: 4px solid var(--magenta);
padding-left: 10px;
}
.admin-shell .admin-table tr.is-priority { background: rgba(240,165,36,.04); }
/* ---------- Admin pageheader — editorial framing instead of generic h1 ---------- */
.admin-shell .admin-pageheader {
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 20px;
}
.admin-shell .admin-eyebrow {
font-family: var(--font-display); font-weight: 800;
font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--magenta);
}
.admin-shell .admin-pageheader h1 {
font-size: clamp(1.85rem, 3vw, 2.6rem);
letter-spacing: -.01em;
text-transform: none;
color: var(--ink);
margin: 0;
}
.admin-shell .admin-pageheader .sub {
color: var(--grey-600);
font-size: 1rem;
margin: 4px 0 0;
}
/* Empty state + pagination for the admin match table */
.adm-empty {
background: var(--paper); border: 2px dashed var(--grey-200);
border-radius: var(--radius); padding: 28px 24px;
text-align: center; color: var(--grey-600);
margin-bottom: 12px;
}
.adm-empty p { margin: 0 0 16px; font-size: .95rem; }
.adm-empty b { color: var(--ink); }
.adm-pagination { margin-top: 12px; }
.adm-page-controls {
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.adm-page-info {
font-family: var(--font-display); font-size: .82rem;
color: var(--grey-600); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; white-space: nowrap;
}
/* ---------- Data strip — replaces boxed KPI tiles.
Numbers earn their hierarchy through typography, not container chrome.
Divider lines between cells; no shadows, no glow, no asymmetric tile bento.
The eye reads left-to-right and stops where it needs to. */
.admin-shell .data-strip {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: stretch;
margin: 28px 0 28px;
padding: 18px 0;
border-top: 1px solid var(--grey-200);
border-bottom: 1px solid var(--grey-200);
}
.admin-shell .data-cell {
display: flex; flex-direction: column; gap: 6px;
padding: 0 18px;
border-right: 1px solid var(--grey-200);
min-width: 0;
}
.admin-shell .data-cell:last-child { border-right: 0; }
.admin-shell .data-cell:first-child { padding-left: 0; }
.admin-shell .data-label {
font-family: var(--font-display); font-weight: 700;
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--grey-600);
}
.admin-shell .data-value {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
line-height: 1;
letter-spacing: -.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.admin-shell .data-note {
font-size: .76rem;
color: var(--grey-400);
line-height: 1.3;
}
@media (max-width: 1100px) {
.admin-shell .data-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
.admin-shell .data-cell:nth-child(4n) { border-right: 0; }
}
@media (max-width: 640px) {
.admin-shell .data-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0; row-gap: 14px; }
.admin-shell .data-cell { padding: 0 12px; }
.admin-shell .data-cell:nth-child(2n) { border-right: 0; }
}
/* Slim dark chrome header sits on top of the light workbench — Linear-style.
Sub-label and nav links use solid hex tones (not opacity tricks) so they pass
WCAG AA on the dark background, mobile or desktop. */
.admin-header {
background: #24201A;
color: #FFFFFF;
padding: 16px 24px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
}
.admin-header .brand {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
color: #FFFFFF;
}
.admin-header .brand .sub {
font-family: var(--font-body); font-weight: 500;
font-size: .82rem;
text-transform: none; letter-spacing: 0;
color: #C8C8D0; /* AA on #24201A (contrast 9.4:1) — beats opacity:.6 */
margin-left: 4px;
}
.admin-header .mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--magenta), var(--gold), var(--green)); }
.admin-header nav { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-header nav a {
color: #E4E4EA;
font-family: var(--font-display); font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
font-size: .82rem;
padding: 6px 12px;
border-radius: 8px;
transition: background .15s ease, color .15s ease;
}
.admin-header nav a:hover {
color: #FFFFFF;
background: rgba(255,255,255,.08);
text-decoration: none;
}
.admin-header nav a.admin-nav-active {
color: #FFFFFF;
background: rgba(255,255,255,.12);
}
.admin-main { padding: 28px 24px; max-width: 1240px; margin: 0 auto; }
.admin-main h1 { font-size: 2rem; margin-bottom: 6px; }
.admin-main .sub { color: var(--grey-600); margin-bottom: 24px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.kpi {
background: var(--paper); border-radius: var(--radius); padding: 18px;
border: 2px solid var(--grey-100);
transition: transform .25s var(--ease-spring),
box-shadow .25s var(--ease-out-quart),
border-color .15s ease;
will-change: transform;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--grey-200); }
.kpi .value { transition: color .2s ease; }
/* KPI fade-in stagger */
.kpi { opacity: 0; animation: kpi-rise .6s var(--ease-out-quart) forwards; }
.kpi:nth-child(1) { animation-delay: 60ms; }
.kpi:nth-child(2) { animation-delay: 120ms; }
.kpi:nth-child(3) { animation-delay: 180ms; }
.kpi:nth-child(4) { animation-delay: 240ms; }
.kpi:nth-child(5) { animation-delay: 300ms; }
.kpi:nth-child(6) { animation-delay: 360ms; }
@keyframes kpi-rise {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
.kpi .label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: var(--grey-600); }
.kpi .value { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; line-height: 1; margin-top: 4px; }
.kpi .delta { font-size: .85rem; color: var(--grey-600); margin-top: 4px; }
.kpi.magenta .value { color: var(--magenta); }
.kpi.green .value { color: var(--green-dark); }
.kpi.gold .value { color: #8C5F00; }
.kpi.teal .value { color: var(--teal); }
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.admin-toolbar input[type="text"], .admin-toolbar select {
padding: 10px 14px; border: 2px solid var(--grey-200); border-radius: 10px;
font-family: var(--font-body); background: var(--paper); font-size: .95rem;
}
/* Admin tables — shared chrome (border, paper bg, base cell padding).
Column widths, mobile card layout, and pseudo-labels are scoped per
variant below (`--matches` for the dashboard match list, `--rsvps`
for the per-match check-in roster) because the two tables share no
column semantics and the labels must not bleed across. */
.admin-table { background: var(--paper); border: 2px solid var(--grey-100); border-radius: var(--radius); overflow: hidden; }
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table--matches table { table-layout: fixed; }
.admin-table th, .admin-table td {
padding: 10px 14px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--grey-100);
font-size: .92rem;
line-height: 1.45;
}
.admin-table th {
background: var(--grey-50); font-family: var(--font-display); font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; color: var(--grey-600);
vertical-align: middle;
padding-top: 10px; padding-bottom: 10px;
}
.admin-table tr:last-child td { border-bottom: 0; }
/* ============ DASHBOARD MATCH TABLE (.admin-table--matches) ============
Columns: Date/Kickoff | Match | Tier | RSVP Window | Capacity | RSVPs |
Checked In | Manage
Explicit widths + table-layout:fixed so the right flag and Manage
button stay row-aligned no matter what team-name length is. */
.admin-table--matches th:nth-child(1), .admin-table--matches td:nth-child(1) { width: 110px; min-width: 110px; }
.admin-table--matches th:nth-child(2), .admin-table--matches td:nth-child(2) { width: auto; }
.admin-table--matches th:nth-child(3), .admin-table--matches td:nth-child(3) { width: 72px; text-align: center; }
.admin-table--matches th:nth-child(4), .admin-table--matches td:nth-child(4) { width: 160px; }
.admin-table--matches th:nth-child(5), .admin-table--matches td:nth-child(5) { width: 200px; }
.admin-table--matches th:nth-child(6), .admin-table--matches td:nth-child(6) { width: 72px; text-align: right; }
.admin-table--matches th:nth-child(7), .admin-table--matches td:nth-child(7) { width: 80px; text-align: right; }
.admin-table--matches th:nth-child(8), .admin-table--matches td:nth-child(8) { width: 140px; text-align: right; }
/* Tier badge cell — center the badge in its narrow column */
.admin-table--matches td:nth-child(3) .badge { display: inline-block; }
/* Numeric cells (RSVPs / Checked in) — tabular numerals, right-aligned */
.admin-table--matches td:nth-child(6) b,
.admin-table--matches td:nth-child(7) { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
/* Manage column — button stays right, no wrap */
.admin-table--matches td:nth-child(8) .btn { white-space: nowrap; }
/* Match cell — 3-line stack: TeamA / TeamB / Stage·Venue.
No "vs" separator (implied), no feature tag (visible on Manage page).
Each row is exactly 3 lines → ~58px total height at 10px cell padding. */
.admin-table--matches .match-cell { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-table--matches .mc-team-row {
display: flex; align-items: center; gap: 5px; min-width: 0; line-height: 1;
}
.admin-table--matches .mc-flag {
flex-shrink: 0; display: inline-flex; align-items: center;
}
.admin-table--matches .mc-flag .rv-flag { width: 18px; height: 13px; border-radius: 2px; }
.admin-table--matches .mc-name {
font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
letter-spacing: .005em; font-size: .84rem; line-height: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.admin-table--matches .mc-sub {
color: var(--grey-600); font-size: .74rem; line-height: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
/* RSVP Window cell — chip + sub-text stack tightly without rogue line-breaks */
.admin-table--matches td:nth-child(4) { line-height: 1.4; }
.admin-table--matches td:nth-child(4) .status-chip { margin-bottom: 4px; }
/* ============ MATCH CHECK-IN ROSTER (.admin-table--rsvps) ============
Columns: RSVP Code | Guest | Party | Email/Phone | Cheering | Seating |
Status | Actions (Send/Confirmed/Check in/NPS/×)
table-layout:auto here — content widths vary too much (long emails,
variable action-button counts) for a strict fixed layout. We just
set min-widths so nothing collapses, and let the action column
self-size so the Check-in button is never clipped. */
.admin-table--rsvps th:nth-child(1), .admin-table--rsvps td:nth-child(1) { min-width: 120px; }
.admin-table--rsvps th:nth-child(2), .admin-table--rsvps td:nth-child(2) { min-width: 180px; }
.admin-table--rsvps th:nth-child(3), .admin-table--rsvps td:nth-child(3) { width: 64px; text-align: center; }
.admin-table--rsvps th:nth-child(4), .admin-table--rsvps td:nth-child(4) { min-width: 200px; word-break: break-word; }
.admin-table--rsvps th:nth-child(5), .admin-table--rsvps td:nth-child(5) { min-width: 100px; }
.admin-table--rsvps th:nth-child(6), .admin-table--rsvps td:nth-child(6) { min-width: 140px; }
.admin-table--rsvps th:nth-child(7), .admin-table--rsvps td:nth-child(7) { min-width: 120px; }
.admin-table--rsvps th:nth-child(8), .admin-table--rsvps td:nth-child(8) {
text-align: right;
white-space: nowrap;
min-width: 200px;
}
.admin-table--rsvps td:nth-child(8) .btn,
.admin-table--rsvps td:nth-child(8) a { white-space: nowrap; }
/* Below the desktop break, the roster scrolls horizontally inside the
card rather than crushing columns — so the Check-in button is always
visible (just one swipe away). The mobile-card rules below take over
at 720px and switch the whole thing to stacked cards. */
.admin-table--rsvps { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Capacity bar — flex inside the fixed-width cell */
.cap-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.cap-bar .bar { flex: 1; min-width: 0; height: 8px; background: var(--grey-100); border-radius: 999px; overflow: hidden; }
.cap-bar .fill { height: 100%; background: var(--green); transition: width .35s ease; }
.cap-bar .fill.warn { background: var(--gold); }
.cap-bar .fill.full { background: var(--magenta); }
.cap-bar .text { font-size: .82rem; color: var(--grey-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-chip {
display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.status-chip.checked { background: rgba(99,168,91,.15); color: var(--green-dark); }
.status-chip.pending { background: var(--grey-100); color: var(--grey-600); }
.status-chip.flagged { background: rgba(240,165,36,.12); color: var(--magenta); }
/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(26,26,30,.6); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--paper); border-radius: var(--radius-lg); max-width: 560px; width: 100%; padding: 28px; max-height: 90vh; overflow-y: auto; }
.modal h2 { margin-bottom: 8px; }
/* ---------- Empty state ---------- */
.empty {
text-align: center; padding: 48px 24px; color: var(--grey-600);
background: var(--paper); border-radius: var(--radius); border: 2px dashed var(--grey-200);
}
.empty h3 { color: var(--grey-800); margin-bottom: 6px; }
.empty .icon {
display: block; width: 48px; height: 48px; margin: 0 auto 14px;
border-radius: 50%; background: var(--grey-100);
display: flex; align-items: center; justify-content: center;
}
.empty .icon svg { width: 24px; height: 24px; color: var(--grey-600); }
.empty .actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* ---------- Utility ---------- */
.hidden { display: none !important; }
/* Empty-state placeholder — italic grey, signals "no data" without using an
orphan em-dash that reads as a parsing bug or filler character. */
.empty-cell {
font-style: italic;
color: var(--grey-400);
font-weight: 400;
letter-spacing: 0;
}
.admin-shell .empty-cell { color: var(--grey-600); }
.tier-key { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .85rem; }
.tier-key .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.tier-key .dot.open { background: var(--green); }
.tier-key .dot.rsvp { background: var(--gold); }
.tier-key .dot.hot { background: var(--magenta); }
/* ---------- Mobile ---------- */
@media (max-width: 720px) {
.form-row { grid-template-columns: 1fr; }
.topbar {
flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px;
}
.topbar .brand { font-size: .95rem; }
.topbar .brand .sub { font-size: .75rem; }
.topbar nav { gap: 14px; font-size: .82rem; flex-wrap: wrap; }
.filters { padding: 14px 16px; top: 56px; }
.filters .inner { gap: 8px; }
.filters select, .filters input[type="text"] { padding: 8px 12px; font-size: .9rem; }
.filters .tier-key { display: none !important; } /* legend hides on mobile to save space */
.match-grid { grid-template-columns: 1fr; }
.hero { padding: 56px 20px 48px; }
.hero .lede { font-size: .95rem; }
.house-notes { padding: 48px 20px 56px; }
.house-notes-head { margin-bottom: 32px; }
.house-notes-list { grid-template-columns: 1fr; row-gap: 28px; column-gap: 0; }
.house-note { gap: 16px; padding-top: 14px; }
.house-note-num { font-size: 2.6rem; min-width: 50px; }
.house-note-title { font-size: 1.1rem; margin-bottom: 6px; }
.house-note-text { font-size: .95rem; }
.schedule { padding: 22px 16px 60px; }
.schedule .day-header h2 { font-size: 1.4rem; }
.detail { padding: 40px 20px; }
.detail .matchup-big { gap: 12px; }
.detail .team-big .name { font-size: 1.8rem; }
.detail .team-big .flag { font-size: 3rem; }
.detail .vs-big { font-size: 1.4rem; }
.rsvp-section { padding: 32px 20px; }
.admin-main { padding: 20px 16px; }
/* Admin toolbar — every element full-width and stacked on mobile so
nothing sits at a random partial width next to an unrelated element. */
.admin-toolbar {
flex-direction: column;
align-items: stretch;
}
.admin-toolbar input[type="search"],
.admin-toolbar select,
.admin-toolbar .btn {
width: 100%;
box-sizing: border-box;
}
/* Status chip filter buttons — stay as wrapping pills (that's correct) but
each chip stretches evenly so the row fills the container without gaps. */
.admin-shell .status-chips { gap: 6px; }
.admin-shell .status-chip-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
/* Data strip (KPIs) — 2-column grid on mobile so the numbers align neatly. */
.admin-shell .data-strip {
display: grid;
grid-template-columns: 1fr 1fr;
}
.admin-shell .data-cell { border-right: 0; border-bottom: 1px solid var(--grey-100); padding: 12px; }
.admin-shell .data-cell:nth-child(odd) { border-right: 1px solid var(--grey-100); }
.admin-shell .data-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
/* Admin tables flip to card layout earlier (≤900px) than the general
mobile breakpoint (720px) because the 8-col tables need ~804px of
horizontal room before they fit comfortably. Below 900px, both the
dashboard match table and the per-match check-in roster stack as
touch-friendly cards. */
@media (max-width: 900px) {
/* ============================================================
Admin DASHBOARD matches table → mobile card layout
Explicit grid rows so each piece of data sits in its own
well-bounded slot — no orphaned badges, no clipped bars,
no fighting flex children. Label-above-value pattern keeps
long values from getting crushed by inline pseudo-labels.
Row plan:
Row 1: Date+kickoff (left) | Tier badge (right)
Row 2: Match cell (full width) — flag + names + venue + feature
Row 3: Window (full width) — label + chip + close time
Row 4: Capacity (full width) — label + bar + count text
Row 5: RSVPs (left) | Checked in (right)
Row 6: Manage button (full width)
============================================================ */
.admin-table--matches { overflow-x: visible; border: 0; background: transparent; padding: 0; }
.admin-table--matches table,
.admin-table--matches thead,
.admin-table--matches tbody,
.admin-table--matches tr,
.admin-table--matches th,
.admin-table--matches td { display: block; width: 100%; }
.admin-table--matches thead { display: none; }
.admin-table--matches tbody { display: flex; flex-direction: column; gap: 14px; }
.admin-table--matches tr {
background: var(--paper);
border: 1px solid var(--grey-200);
border-radius: 16px;
padding: 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto auto auto auto;
column-gap: 14px;
row-gap: 14px;
box-shadow: var(--shadow-1);
}
.admin-table--matches td {
padding: 0;
border: 0;
font-size: .92rem;
min-width: 0; /* lets grid items shrink — critical for flag/text wrapping */
}
/* Row 1 — Date (col 1) + Tier badge (col 2) */
.admin-table--matches td:nth-child(1) {
grid-column: 1;
grid-row: 1;
align-self: center;
font-size: .9rem;
line-height: 1.3;
}
.admin-table--matches td:nth-child(1) b { font-size: .98rem; }
.admin-table--matches td:nth-child(3) {
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: end;
}
/* Row 2 — Match cell spans full width, with a thin divider above */
.admin-table--matches td:nth-child(2) {
grid-column: 1 / -1;
grid-row: 2;
padding-top: 14px;
border-top: 1px solid var(--grey-100);
}
.admin-table--matches .mc-name { font-size: .96rem; white-space: normal; word-break: break-word; }
.admin-table--matches .mc-sub { white-space: normal; font-size: .8rem; }
/* Rows 3 & 4 — Window + Capacity, each full-width with label ABOVE value */
.admin-table--matches td:nth-child(4),
.admin-table--matches td:nth-child(5) {
grid-column: 1 / -1;
display: block;
padding-top: 4px;
}
.admin-table--matches td:nth-child(4) { grid-row: 3; }
.admin-table--matches td:nth-child(5) { grid-row: 4; }
/* Capacity bar gets the full card width (no clipping) */
.admin-table--matches td:nth-child(5) .cap-bar {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.admin-table--matches td:nth-child(5) .cap-bar .bar {
flex: 1;
min-width: 0;
}
.admin-table--matches td:nth-child(5) .cap-bar .text { flex-shrink: 0; }
/* Row 5 — RSVPs (left) + Checked In (right) as a clean 2-col split */
.admin-table--matches td:nth-child(6),
.admin-table--matches td:nth-child(7) {
display: block;
grid-row: 5;
padding-top: 4px;
}
.admin-table--matches td:nth-child(6) { grid-column: 1; }
.admin-table--matches td:nth-child(7) { grid-column: 2; justify-self: end; text-align: right; }
.admin-table--matches td:nth-child(6) b,
.admin-table--matches td:nth-child(7) b,
.admin-table--matches td:nth-child(6),
.admin-table--matches td:nth-child(7) { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
/* Pseudo-labels — always stacked ABOVE the value, never inline */
.admin-table--matches td:nth-child(4)::before { content: "RSVP Window"; }
.admin-table--matches td:nth-child(5)::before { content: "Capacity"; }
.admin-table--matches td:nth-child(6)::before { content: "RSVPs"; }
.admin-table--matches td:nth-child(7)::before { content: "Checked in"; }
.admin-table--matches td:nth-child(4)::before,
.admin-table--matches td:nth-child(5)::before,
.admin-table--matches td:nth-child(6)::before,
.admin-table--matches td:nth-child(7)::before {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--grey-600);
margin-bottom: 6px;
}
/* Row 6 — Manage button (full-width pink CTA) */
.admin-table--matches td:nth-child(8) {
grid-column: 1 / -1;
grid-row: 6;
padding-top: 6px;
border-top: 1px solid var(--grey-100);
margin-top: 4px;
}
.admin-table--matches td:nth-child(8) .btn,
.admin-table--matches td:nth-child(8) a {
display: block;
width: 100%;
text-align: center;
}
/* ============================================================
MATCH CHECK-IN ROSTER (.admin-table--rsvps) → mobile cards
The desktop horizontal scroll falls back to fully stacked
cards here so staff can scan and check guests in by thumb.
Row plan (8 cols → stacked card):
Row 1: RSVP Code (left) | Status chip stack (right)
Row 2: Guest name + VIP badge + timestamp (full width)
Row 3: Party label/value (left) | Cheering team (right)
Row 4: Email + phone (full width, wraps)
Row 5: Seating (full width)
Row 6: Action buttons (full width row of pill buttons)
============================================================ */
.admin-table--rsvps { overflow-x: visible; border: 0; background: transparent; padding: 0; }
.admin-table--rsvps table,
.admin-table--rsvps thead,
.admin-table--rsvps tbody,
.admin-table--rsvps tr,
.admin-table--rsvps th,
.admin-table--rsvps td { display: block; width: 100%; }
.admin-table--rsvps thead { display: none; }
.admin-table--rsvps tbody { display: flex; flex-direction: column; gap: 14px; }
.admin-table--rsvps tr {
background: var(--paper);
border: 1px solid var(--grey-200);
border-radius: 16px;
padding: 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto auto auto auto;
column-gap: 14px;
row-gap: 12px;
box-shadow: var(--shadow-1);
min-width: 0;
}
.admin-table--rsvps td {
padding: 0;
border: 0;
font-size: .92rem;
min-width: 0;
}
/* Row 1 — RSVP Code (left) + Status chips (right) */
.admin-table--rsvps td:nth-child(1) {
grid-column: 1; grid-row: 1;
align-self: center;
font-size: .85rem;
line-height: 1.25;
}
.admin-table--rsvps td:nth-child(1) b {
font-size: .82rem; letter-spacing: .12em; word-break: break-all;
}
.admin-table--rsvps td:nth-child(7) {
grid-column: 2; grid-row: 1;
align-self: start;
justify-self: end;
text-align: right;
min-width: 0;
}
/* Row 2 — Guest (name + VIP + timestamp), full width with top divider */
.admin-table--rsvps td:nth-child(2) {
grid-column: 1 / -1; grid-row: 2;
padding-top: 12px;
border-top: 1px solid var(--grey-100);
font-size: .98rem;
line-height: 1.35;
}
/* Row 3 — Party (left) + Cheering (right) */
.admin-table--rsvps td:nth-child(3) {
grid-column: 1; grid-row: 3;
text-align: left;
font-size: 1rem; font-weight: 700;
}
.admin-table--rsvps td:nth-child(5) {
grid-column: 2; grid-row: 3;
text-align: right;
justify-self: end;
}
.admin-table--rsvps td:nth-child(3)::before { content: "Party"; }
.admin-table--rsvps td:nth-child(5)::before { content: "Cheering"; }
/* Row 4 — Email / Phone, full width, wraps long addresses */
.admin-table--rsvps td:nth-child(4) {
grid-column: 1 / -1; grid-row: 4;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.4;
}
.admin-table--rsvps td:nth-child(4)::before { content: "Contact"; }
/* Row 5 — Seating, full width */
.admin-table--rsvps td:nth-child(6) {
grid-column: 1 / -1; grid-row: 5;
}
.admin-table--rsvps td:nth-child(6)::before { content: "Seating"; }
/* Pseudo-labels — uniform tiny caps above each value */
.admin-table--rsvps td:nth-child(3)::before,
.admin-table--rsvps td:nth-child(4)::before,
.admin-table--rsvps td:nth-child(5)::before,
.admin-table--rsvps td:nth-child(6)::before {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--grey-600);
margin-bottom: 6px;
}
/* Row 6 — Actions: full-width strip, buttons wrap onto 2 lines if needed */
.admin-table--rsvps td:nth-child(8) {
grid-column: 1 / -1; grid-row: 6;
padding-top: 10px;
border-top: 1px solid var(--grey-100);
margin-top: 2px;
text-align: left;
white-space: normal; /* override desktop nowrap so buttons can wrap */
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-table--rsvps td:nth-child(8) .btn,
.admin-table--rsvps td:nth-child(8) a {
flex: 1 1 auto;
min-width: 0;
text-align: center;
white-space: nowrap;
}
/* The red × delete is a square, not a stretched bar */
.admin-table--rsvps td:nth-child(8) .btn-danger { flex: 0 0 44px; }
/* The NPS chip badge isn't a button — don't stretch it */
.admin-table--rsvps td:nth-child(8) .status-chip { flex: 0 0 auto; align-self: center; }
}
/* Resume the general mobile (≤720px) block for everything that isn't
one of the two big admin tables. */
@media (max-width: 720px) {
/* Growth attribution table — same stacking treatment, scoped to its dark container */
.admin-shell .growth-attr-table,
.admin-shell .growth-attr-table thead,
.admin-shell .growth-attr-table tbody,
.admin-shell .growth-attr-table tr,
.admin-shell .growth-attr-table td { display: block; width: 100%; }
.admin-shell .growth-attr-table thead { display: none; }
.admin-shell .growth-attr-table tr {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 10px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-shell .growth-attr-table td {
padding: 0; border-bottom: 0;
font-size: .88rem;
}
.admin-shell .growth-attr-table td:nth-child(1) { grid-column: 1 / -1; margin-bottom: 6px; }
.admin-shell .growth-attr-table td:nth-child(2),
.admin-shell .growth-attr-table td:nth-child(3),
.admin-shell .growth-attr-table td:nth-child(4),
.admin-shell .growth-attr-table td:nth-child(5) {
display: flex; align-items: center; gap: 8px;
}
.admin-shell .growth-attr-table td:nth-child(2)::before { content: "RSVPs"; }
.admin-shell .growth-attr-table td:nth-child(3)::before { content: "Share"; }
.admin-shell .growth-attr-table td:nth-child(4)::before { content: "Spend"; }
.admin-shell .growth-attr-table td:nth-child(5)::before { content: "CAC"; }
.admin-shell .growth-attr-table td:nth-child(2)::before,
.admin-shell .growth-attr-table td:nth-child(3)::before,
.admin-shell .growth-attr-table td:nth-child(4)::before,
.admin-shell .growth-attr-table td:nth-child(5)::before {
font-family: var(--font-display); font-weight: 700;
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.5);
min-width: 60px;
}
.admin-header { flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.admin-header nav { font-size: .82rem; }
.footer { padding: 36px 20px 24px; }
.confirm-card { margin: -32px 16px 48px; padding: 24px; }
.confirm-card .qr { width: 180px; height: 180px; }
}
/* ============================================================
MOBILE COMPREHENSIVE FIX (≤480px)
Forensic audit found: 1 horizontal-scroll culprit (.hero
gradient orbs), 117 touch targets <44x44px, awkward header
stacking, broken filter label-input grouping, team-name
overflow on long names. This block resolves all of them.
============================================================ */
@media (max-width: 480px) {
/* Prevent ALL horizontal scroll from any source */
html, body { overflow-x: hidden; max-width: 100vw; }
.hero { overflow: hidden; } /* clip drifting gradient orbs */
/* ---- Header: stack brand + sim-pill, full-width nav row ---- */
.topbar {
flex-direction: column; align-items: stretch;
gap: 8px; padding: 10px 14px;
}
.topbar .brand {
flex-wrap: wrap; row-gap: 6px;
font-size: 1rem; line-height: 1.2;
}
.topbar .brand .sub { font-size: .7rem; }
.topbar .brand .demo-pill {
margin-left: auto; font-size: .7rem; padding: 4px 10px;
white-space: nowrap; flex-shrink: 0;
}
.topbar nav {
display: flex; gap: 0; font-size: .9rem;
width: 100%; justify-content: space-between;
border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px;
}
.topbar nav a {
padding: 12px 8px; min-height: 44px; min-width: 44px;
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem;
}
/* ---- Filters: clean grid stacking, 44px+ inputs.
Keep sticky on mobile too (same as desktop) so the user can change
Stage / Team / Tier without scrolling all the way back up. ---- */
.filters { padding: 14px 16px; position: sticky; top: 0; z-index: 40; }
.filters .inner {
display: grid; grid-template-columns: 1fr;
align-items: stretch; gap: 6px;
}
/* Schedule/Bracket toggle on mobile — full-width, 44px touch targets,
positioned at top of schedule section so the user sees the layout
change immediately when they tap. */
.schedule-view-switcher { margin-bottom: 16px; }
.schedule-view-switcher .view-toggle { width: 100%; display: flex; }
.schedule-view-switcher .view-toggle-btn {
flex: 1; min-height: 44px; font-size: .92rem;
}
.filters label {
font-size: .72rem; letter-spacing: .08em;
margin-bottom: 0; padding-top: 4px;
}
.filters select, .filters input[type="text"] {
width: 100%; min-height: 44px; padding: 12px 14px;
font-size: 16px; /* ≥16px stops iOS Safari from zooming on focus */
border-radius: 10px;
}
/* ---- Hero countdown: tighter on narrow screens ---- */
.countdown-cells { gap: 6px; }
.cd-cell { padding: 8px 10px; min-width: 0; }
.cd-val { font-size: 1.8rem; }
.cd-sep { font-size: 1.4rem; padding: 0 2px; }
/* ---- Highlight reel dots: 44px hit area, smaller visual ---- */
.reel-dot-btn {
position: relative; min-width: 44px; min-height: 44px;
width: 44px; height: 44px;
background: transparent !important;
padding: 0; display: inline-grid; place-items: center;
}
.reel-dot-btn::after {
content: ''; width: 32px; height: 6px; border-radius: 3px;
background: rgba(255,255,255,.25);
transition: background .2s ease;
}
.reel-dot-btn:hover::after { background: rgba(255,255,255,.4); }
.reel-dot-btn.is-active::after { background: var(--gold); }
/* ---- Buttons: enforce 44px min touch target ---- */
.btn-sm, .schedule-view-switcher .view-toggle-btn { min-height: 44px; padding: 12px 16px; font-size: .9rem; }
/* ---- Match cards: handle long team names cleanly ---- */
.match-card .team .name {
font-size: 1.1rem; word-break: break-word; overflow-wrap: anywhere;
line-height: 1.1; hyphens: auto;
}
.match-card.tier-hot .team .name { font-size: 1.2rem; }
.match-card.featured .team .name { font-size: 1.35rem; }
.match-card .matchup .vs { font-size: .8rem; opacity: .6; }
/* ---- Live ticker + live scores: tighter header ---- */
.ls-header {
flex-wrap: wrap; row-gap: 4px;
}
.ls-header .ls-title { width: 100%; font-size: .85rem; }
.ls-header .ls-source { font-size: .7rem; }
/* ---- Schedule day header ---- */
.day-header { padding: 16px 0 8px; }
.day-header h2 { font-size: 1.25rem; }
.day-sub { font-size: .8rem; }
}
/* Very small phones (≤360px — iPhone SE 1st gen, Android compact) */
@media (max-width: 360px) {
.topbar .brand .sub { display: none; } /* "Football '26" hides at smallest */
.topbar .brand .demo-pill { font-size: .65rem; padding: 3px 8px; }
.cd-val { font-size: 1.5rem; }
.cd-sep { font-size: 1.2rem; }
.match-card .team .name { font-size: 1.1rem; }
}
/* ============================================================
GROWTH DASHBOARD — admin.html Source Attribution + Sponsor ROI.
The strategic pitch surface: turns the operator dashboard into a
"we can prove marketing ROI" story for the renewal conversation.
Scoped to .admin-shell so the dark theme applies.
============================================================ */
.admin-shell .growth-dashboard {
/* This section is a deliberate dark "presentation slot" inside the light admin —
reads as a scoreboard / pitch surface. Re-scope text tokens to light so
headings don't collapse into the dark gradient. */
--ink: #F5F5F8;
--grey-600: rgba(255,255,255,.62);
--grey-400: rgba(255,255,255,.42);
background: linear-gradient(160deg, #131316 0%, #0F0F12 100%);
border: 1px solid rgba(240,165,36,.18);
border-radius: 18px;
padding: 28px;
margin: 28px 0;
color: var(--ink);
}
.admin-shell .growth-dashboard h1,
.admin-shell .growth-dashboard h2,
.admin-shell .growth-dashboard h3,
.admin-shell .growth-dashboard h4 { color: var(--ink); }
.admin-shell .growth-dashboard p,
.admin-shell .growth-dashboard .growth-title,
.admin-shell .growth-dashboard .growth-card-meta { color: var(--ink); }
.admin-shell .growth-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
margin-bottom: 24px; flex-wrap: wrap;
}
.admin-shell .growth-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; border-radius: 999px;
background: rgba(240,165,36,.12); color: var(--casamigos-teal);
font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
font-weight: 700; text-transform: uppercase;
}
.admin-shell .growth-eyebrow-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--casamigos-teal);
animation: faq-pulse 2.4s ease-in-out infinite;
}
.admin-shell .growth-title {
font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem);
margin: 10px 0 0; line-height: 1.15; font-weight: 700;
letter-spacing: -0.015em; max-width: 640px;
text-transform: none;
}
.admin-shell .growth-grid {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.admin-shell .growth-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
padding: 22px;
}
.admin-shell .growth-card-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.admin-shell .growth-card-head h3 {
font-family: var(--font-display); font-size: 1.15rem; margin: 0;
text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.admin-shell .growth-card-meta {
font-size: .8rem; color: rgba(255,255,255,.6);
}
.admin-shell .growth-empty { color: rgba(255,255,255,.5); font-style: italic; }
/* Source Attribution table */
.admin-shell .growth-attr-table {
width: 100%; border-collapse: collapse; font-size: .9rem;
}
.admin-shell .growth-attr-table th {
text-align: left; padding: 8px 10px;
font-family: var(--font-display); font-size: .72rem; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-shell .growth-attr-table td {
padding: 12px 10px;
border-bottom: 1px solid rgba(255,255,255,.04);
vertical-align: middle;
}
.admin-shell .growth-src-name { display: block; font-weight: 600; color: var(--ink); }
.admin-shell .growth-src-sub { display: block; font-size: .78rem; color: rgba(255,255,255,.5); font-family: monospace; }
.admin-shell .growth-bar {
display: inline-block; width: 80px; height: 6px; background: rgba(255,255,255,.08);
border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 8px;
}
.admin-shell .growth-bar span {
display: block; height: 100%; background: linear-gradient(90deg, var(--casamigos-teal), var(--magenta));
border-radius: 3px;
}
.admin-shell .growth-bar-num { font-size: .82rem; color: rgba(255,255,255,.7); }
.admin-shell .growth-tag {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
font-size: .72rem; font-weight: 600;
}
.admin-shell .growth-tag-good {
background: rgba(99, 168, 91, .15); color: var(--green);
}
/* Sponsor ROI tiles */
.admin-shell .growth-sponsor-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.admin-shell .growth-sponsor-tile {
background: rgba(0,0,0,.3);
border: 1px solid rgba(255,255,255,.06);
border-top: 3px solid var(--sponsor-accent);
border-radius: 12px;
padding: 18px;
}
.admin-shell .growth-sponsor-name {
font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
text-transform: uppercase; color: var(--sponsor-accent); letter-spacing: -0.01em;
}
.admin-shell .growth-sponsor-tagline {
font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 14px;
}
.admin-shell .growth-sponsor-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 0;
}
.admin-shell .growth-sponsor-stats > div { min-width: 0; }
.admin-shell .growth-sponsor-stat-wide { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
.admin-shell .growth-sponsor-stats dt {
font-family: var(--font-display); font-size: .68rem; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 2px;
}
.admin-shell .growth-sponsor-stats dd {
font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1;
}
.admin-shell .growth-sponsor-revenue {
font-size: 1.8rem !important; color: var(--gold) !important;
}
.admin-shell .growth-insight {
margin: 16px 0 0;
padding: 12px 14px;
background: rgba(240,165,36,.06);
border-left: 3px solid var(--casamigos-teal);
border-radius: 4px;
font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.85);
}
.admin-shell .growth-insight b { color: var(--casamigos-teal); }
/* Recent messages log */
.admin-shell .growth-messages { list-style: none; margin: 0; padding: 0; }
.admin-shell .growth-msg {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px; align-items: center;
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
font-size: .88rem;
}
.admin-shell .growth-msg:last-child { border-bottom: 0; }
.admin-shell .growth-msg-type {
font-family: var(--font-display); font-size: .65rem; letter-spacing: .08em;
font-weight: 700; text-transform: uppercase;
padding: 4px 8px; border-radius: 4px; white-space: nowrap;
background: rgba(240,165,36,.12); color: var(--casamigos-teal);
}
.admin-shell .growth-msg-type-waitlist_promoted { background: rgba(99,168,91,.15); color: var(--green); }
.admin-shell .growth-msg-type-post_match_nurture { background: rgba(248,188,76,.15); color: var(--gold); }
.admin-shell .growth-msg-body { color: rgba(255,255,255,.85); }
.admin-shell .growth-msg-meta { font-size: .78rem; color: rgba(255,255,255,.45); white-space: nowrap; }
@media (max-width: 720px) {
.admin-shell .growth-dashboard { padding: 18px; }
/* minmax(0, 1fr) — not plain 1fr — so the grid track is allowed to
shrink below the card's intrinsic content width on narrow viewports.
Without min:0 the card kept its desktop padding+content width and
blew past the 375px viewport by ~8px. */
.admin-shell .growth-grid { grid-template-columns: minmax(0, 1fr); }
.admin-shell .growth-card { min-width: 0; }
.admin-shell .growth-sponsor-grid { grid-template-columns: 1fr; }
.admin-shell .growth-sponsor-stats { grid-template-columns: 1fr 1fr; }
.admin-shell .growth-attr-table { font-size: .82rem; }
.admin-shell .growth-attr-table th,
.admin-shell .growth-attr-table td { padding: 8px 6px; }
.admin-shell .growth-bar { width: 50px; }
.admin-shell .growth-msg { grid-template-columns: 1fr; gap: 4px; }
}
/* Waitlist + Nurture panels in admin-match.html */
.admin-shell .growth-panel {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 20px;
margin-bottom: 18px;
}
.admin-shell .growth-panel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.admin-shell .growth-panel-head h3 {
font-family: var(--font-display); font-size: 1.05rem; margin: 0;
text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.admin-shell .growth-panel-meta { font-size: .82rem; color: var(--grey-600); }
.admin-shell .growth-panel-sub { font-size: .92rem; color: var(--grey-600); margin: 8px 0 14px; line-height: 1.5; }
.admin-shell .growth-panel-empty { color: var(--grey-600); font-style: italic; margin: 0; }
.admin-shell .growth-panel-sent { color: var(--green-dark); font-size: .9rem; margin: 12px 0 0; }
.admin-shell .waitlist-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.admin-shell .waitlist-item {
display: grid;
grid-template-columns: 42px 1fr auto auto;
gap: 14px; align-items: center;
padding: 12px 14px;
background: var(--grey-50);
border: 1px solid var(--grey-200);
border-radius: 8px;
}
.admin-shell .waitlist-pos {
font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
color: var(--magenta-dark); text-align: center;
}
.admin-shell .waitlist-name b { color: var(--ink); font-size: .98rem; }
.admin-shell .waitlist-meta { color: var(--grey-600); font-size: .8rem; }
.admin-shell .waitlist-phone { font-family: monospace; color: var(--grey-600); font-size: .82rem; }
.admin-shell .nurture-preview {
background: var(--grey-50);
border: 1px dashed var(--casamigos-teal);
border-radius: 8px; padding: 14px; margin-top: 8px;
}
.admin-shell .nurture-preview-label {
font-family: var(--font-display); font-size: .68rem; letter-spacing: .1em;
color: var(--casamigos-teal); margin-bottom: 8px;
font-weight: 700; text-transform: uppercase;
}
.admin-shell .nurture-msg-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.admin-shell .nurture-msg {
display: grid; grid-template-columns: auto 1fr; gap: 10px;
padding: 10px 12px; background: var(--paper);
border: 1px solid var(--grey-200);
border-radius: 6px; font-size: .88rem;
}
.admin-shell .nurture-msg-to { font-family: monospace; color: var(--casamigos-teal); font-weight: 600; }
.admin-shell .nurture-msg-body { color: var(--ink); line-height: 1.45; }
.admin-shell .nurture-controls { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
.admin-shell .waitlist-item { grid-template-columns: 36px 1fr auto; }
.admin-shell .waitlist-item .waitlist-phone { grid-column: 2; font-size: .75rem; }
}
/* ============================================================
TIER 2 — VIP RECOGNITION + STAFFING + COCKTAIL QR
============================================================ */
/* VIP Recognition panel on admin.html — deliberate dark "presentation slot"
like Growth Intelligence and the Year-Round Calendar Gantt. Tokens re-scoped
to light inside so the rgba(255,255,255,X) text below all reads correctly. */
.admin-shell .vip-panel {
--ink: #F5F5F8;
--grey-600: rgba(255,255,255,.62);
--grey-400: rgba(255,255,255,.42);
background: linear-gradient(160deg, #0F0F12 0%, #161618 100%);
border: 1px solid rgba(248,188,76,.22);
border-radius: 18px;
padding: 28px;
margin: 28px 0;
color: var(--ink);
}
.admin-shell .vip-head { margin-bottom: 22px; }
.admin-shell .vip-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; border-radius: 999px;
background: rgba(248,188,76,.12); color: var(--gold);
font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
font-weight: 700; text-transform: uppercase;
}
.admin-shell .vip-eyebrow-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
animation: faq-pulse 2.4s ease-in-out infinite;
}
.admin-shell .vip-title {
font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.7rem);
margin: 10px 0 6px; line-height: 1.2; font-weight: 700;
letter-spacing: -0.015em; text-transform: none;
}
.admin-shell .vip-sub { color: rgba(255,255,255,.65); font-size: .92rem; margin: 0; max-width: 640px; }
.admin-shell .vip-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.admin-shell .vip-card {
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.06);
border-top: 3px solid rgba(255,255,255,.2);
border-radius: 12px;
padding: 18px;
}
.admin-shell .vip-card.vip-tier-gold { border-top-color: var(--gold); }
.admin-shell .vip-card.vip-tier-silver { border-top-color: #C0C0C0; }
.admin-shell .vip-card.vip-tier-bronze { border-top-color: #CD7F32; }
.admin-shell .vip-card-tier {
font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em;
font-weight: 800; color: rgba(255,255,255,.55); margin-bottom: 4px;
}
.admin-shell .vip-card.vip-tier-gold .vip-card-tier { color: var(--gold); }
.admin-shell .vip-card.vip-tier-silver .vip-card-tier { color: #C0C0C0; }
.admin-shell .vip-card.vip-tier-bronze .vip-card-tier { color: #CD7F32; }
.admin-shell .vip-card-name {
font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink);
}
.admin-shell .vip-card-team { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 12px; }
.admin-shell .vip-card-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px;
}
.admin-shell .vip-card-stats dt {
font-family: var(--font-display); font-size: .65rem; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 2px;
}
.admin-shell .vip-card-stats dd {
font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1;
}
.admin-shell .vip-card-meta { font-size: .72rem; color: rgba(255,255,255,.45); }
/* VIP row badge in the per-match RSVP table */
.admin-shell .vip-row-badge {
display: inline-block; padding: 2px 8px;
border-radius: 4px; font-family: var(--font-display);
font-size: .68rem; letter-spacing: .08em; font-weight: 800;
margin-left: 6px; vertical-align: 2px;
background: rgba(248,188,76,.15); color: var(--gold);
}
.admin-shell .vip-row-badge.vip-tier-gold { background: rgba(248,188,76,.22); color: var(--gold); }
.admin-shell .vip-row-badge.vip-tier-silver { background: rgba(192,192,192,.18); color: #E0E0E0; }
.admin-shell .vip-row-badge.vip-tier-bronze { background: rgba(205,127,50,.22); color: #E8A878; }
/* Returning-guest banner on confirmation.html */
.returning-banner {
max-width: 720px; margin: -24px auto 12px;
background: linear-gradient(120deg, var(--black), #2A2A2A 80%);
color: var(--paper); border-radius: 16px;
padding: 18px 22px;
display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
border: 1px solid var(--gold); position: relative;
}
.returning-tier {
font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em;
font-weight: 800; color: var(--gold);
padding: 6px 12px; border: 1px solid var(--gold); border-radius: 999px;
text-transform: uppercase; flex-shrink: 0;
}
.returning-msg { font-size: 1rem; line-height: 1.5; flex: 1; min-width: 220px; }
/* Predictive staffing brief on admin-match.html — LIGHT (operator surface,
not a presentation slot). Inner boxes use --grey-50 over the white panel
so the text reads cleanly against the bartender's bright workbench. */
.admin-shell .staffing-panel { border-color: var(--grey-200); }
.admin-shell .staffing-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px;
}
.admin-shell .staffing-loadcol, .admin-shell .staffing-staffcol {
background: var(--grey-50);
border: 1px solid var(--grey-200);
border-radius: 10px;
padding: 16px;
}
.admin-shell .staffing-stat {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0;
}
.admin-shell .staffing-stat dt {
font-family: var(--font-display); font-size: .72rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--grey-600); margin: 0;
}
.admin-shell .staffing-stat dd { font-weight: 700; color: var(--ink); margin: 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.admin-shell .staffing-stat-total {
margin-top: 6px; padding-top: 10px;
border-top: 1px solid var(--grey-200);
}
.admin-shell .staffing-stat-total dt { color: var(--ink); font-weight: 700; }
.admin-shell .staffing-stat-total dd { color: var(--magenta-dark); font-size: 1.35rem; }
.admin-shell .staffing-stat-label {
font-family: var(--font-display); font-size: .72rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--grey-600); margin-bottom: 10px;
}
.admin-shell .staffing-list { list-style: none; padding: 0; margin: 0 0 8px; }
.admin-shell .staffing-list li {
padding: 5px 0; color: var(--ink); font-size: .98rem;
display: flex; align-items: baseline; gap: 8px;
}
.admin-shell .staffing-list b {
color: var(--magenta-dark);
margin-right: 0;
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
min-width: 28px;
display: inline-block;
}
.admin-shell .staffing-total {
padding-top: 10px; border-top: 1px solid var(--grey-200);
font-size: 1.05rem; color: var(--ink);
display: flex; align-items: baseline; gap: 8px;
}
.admin-shell .staffing-total b { color: var(--magenta-dark); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.admin-shell .staffing-reasoning {
background: var(--grey-50);
border: 1px solid var(--grey-200);
border-radius: 8px; padding: 12px 16px;
font-size: .9rem; color: var(--grey-600);
}
.admin-shell .staffing-reasoning summary { cursor: pointer; color: var(--magenta-dark); font-weight: 700; }
.admin-shell .staffing-reasoning summary:hover { color: var(--magenta); }
.admin-shell .staffing-reasoning ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink); }
.admin-shell .staffing-reasoning li { padding: 3px 0; }
/* Cocktail redemption panel on admin-match.html — LIGHT */
.admin-shell .cocktail-panel { border-color: var(--grey-200); }
.admin-shell .cocktail-bar-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
background: var(--grey-50);
border: 1px solid var(--grey-200);
padding: 16px; border-radius: 10px;
margin-top: 10px;
}
.admin-shell .cocktail-bar {
width: 100%; height: 12px; background: var(--grey-200);
border-radius: 6px; overflow: hidden; align-self: center;
}
.admin-shell .cocktail-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--cocktail-accent, var(--casamigos-teal)), var(--gold));
border-radius: 6px; transition: width .4s ease;
}
.admin-shell .cocktail-bar-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.admin-shell .cocktail-bar-stats > div { display: flex; flex-direction: column; gap: 4px; }
.admin-shell .cocktail-bar-stats dt {
font-family: var(--font-display); font-size: .7rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--grey-600); margin: 0;
}
.admin-shell .cocktail-bar-stats dd { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }
/* Cocktail QR card on confirmation.html */
.cocktail-qr-card {
max-width: 480px; margin: 0 auto 48px;
background: linear-gradient(160deg, #1A1A1A 0%, #2A2A2A 100%);
color: var(--paper); border-radius: 18px;
padding: 28px; text-align: center;
border: 2px solid var(--casamigos-teal);
box-shadow: 0 12px 32px rgba(240,165,36,.15);
}
.cocktail-qr-eyebrow {
font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em;
color: var(--casamigos-teal); font-weight: 700;
}
.cocktail-qr-title {
font-family: var(--font-display); font-size: 1.4rem; margin: 8px 0 4px;
letter-spacing: -0.01em; line-height: 1.1; color: var(--paper);
}
.cocktail-qr-sub { font-size: .9rem; color: rgba(255,255,255,.7); margin: 0 0 18px; }
.cocktail-qr-image {
display: inline-block; padding: 12px; background: var(--paper);
border-radius: 12px; line-height: 0;
}
.cocktail-qr-image img { width: 220px; height: 220px; display: block; }
.cocktail-qr-code {
font-family: monospace; font-size: 1.1rem; font-weight: 700; color: var(--casamigos-teal);
letter-spacing: .12em; margin: 14px 0 6px;
}
.cocktail-qr-fine { font-size: .78rem; color: rgba(255,255,255,.55); margin: 8px 0 0; line-height: 1.5; }
/* Redeem page (redeem.html) */
.redeem-shell { background: var(--black); color: var(--paper); min-height: 100vh; }
.redeem-main { max-width: 520px; margin: 0 auto; padding: 56px 20px; }
#redeem-card {
background: linear-gradient(160deg, #1A1A1A 0%, #2A2A2A 100%);
border: 2px solid var(--casamigos-teal); border-radius: 18px;
padding: 32px; text-align: center;
box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.redeem-head { margin-bottom: 24px; }
.redeem-head h1 {
font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.015em;
margin: 12px 0 8px; line-height: 1.1;
}
.redeem-head p { color: rgba(255,255,255,.7); font-size: .95rem; margin: 0; }
.redeem-eyebrow {
font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
color: var(--casamigos-teal); font-weight: 700;
}
.redeem-check {
width: 64px; height: 64px; margin: 0 auto 12px;
background: var(--green); border-radius: 50%;
display: grid; place-items: center; color: var(--paper);
font-size: 2rem; font-weight: 800;
}
.redeem-head-done { color: var(--paper); }
.redeem-rsvp {
background: rgba(0,0,0,.4); border-radius: 12px;
padding: 16px; margin: 0 0 18px;
display: flex; flex-direction: column; gap: 4px;
}
.redeem-rsvp-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.redeem-rsvp-code { font-family: monospace; color: var(--casamigos-teal); letter-spacing: .12em; }
.redeem-match { color: rgba(255,255,255,.7); font-size: .95rem; margin-bottom: 18px; }
.redeem-btn {
width: 100%; padding: 18px; font-size: 1.05rem;
background: var(--casamigos-teal); color: var(--black);
border: 0; border-radius: 12px; font-family: var(--font-display);
text-transform: uppercase; letter-spacing: .04em; font-weight: 800;
cursor: pointer; min-height: 56px;
}
.redeem-btn:hover { background: var(--gold); }
.redeem-btn:active { transform: scale(0.98); }
.redeem-fine { font-size: .78rem; color: rgba(255,255,255,.55); margin: 14px 0 0; }
.redeem-mark { width: 48px; height: 48px; margin: 0 auto 8px; background: var(--magenta); border-radius: 50%; }
@media (max-width: 720px) {
.admin-shell .staffing-grid { grid-template-columns: 1fr; }
.admin-shell .cocktail-bar-row { grid-template-columns: 1fr; }
.admin-shell .cocktail-bar-stats { grid-template-columns: repeat(3, 1fr); }
.admin-shell .vip-grid { grid-template-columns: 1fr; }
.returning-banner { margin: -16px 16px 12px; padding: 14px 16px; }
.cocktail-qr-card { padding: 22px; margin: 0 16px 32px; }
.cocktail-qr-image img { width: 180px; height: 180px; }
}
/* ============================================================
YEAR-ROUND CALENDAR — the recurring-revenue closer.
Horizontal Gantt-style timeline showing the next 14 months
of sports-bar programming. Configured series = solid bars in
their brand color. Unconfigured = dashed placeholders with
"click to configure" CTA. The visual proves the platform is
year-round, not a 38-day project.
============================================================ */
.admin-shell .admin-nav-active { background: rgba(255,255,255,.12); color: #FFFFFF; }
/* ----- Year-Round Calendar — page header (LIGHT) ----- */
.admin-shell .cal-head { margin: 12px 0 28px; }
.admin-shell .cal-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; border-radius: 999px;
background: rgba(240,165,36,.08); color: var(--magenta-dark);
font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
font-weight: 700; text-transform: uppercase;
}
.admin-shell .cal-eyebrow-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--magenta);
animation: faq-pulse 2.4s ease-in-out infinite;
}
.admin-shell .cal-title {
font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem);
margin: 14px 0 8px; line-height: 1.1; letter-spacing: -0.015em;
font-weight: 700; text-transform: none; color: var(--ink);
}
.admin-shell .cal-sub { color: var(--grey-600); max-width: 780px; font-size: 1rem; line-height: 1.55; margin: 0; }
.admin-shell .cal-sub b { color: var(--ink); }
/* ----- Gantt board — deliberate dark presentation slot, tokens re-scoped ----- */
.admin-shell .cal-board {
--ink: #F5F5F8;
--grey-600: rgba(255,255,255,.62);
--grey-400: rgba(255,255,255,.42);
background: linear-gradient(160deg, #0F0F12 0%, #14141A 100%);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 24px 24px 36px;
margin-bottom: 28px;
overflow-x: auto;
}
.admin-shell .cal-month-axis {
display: grid;
grid-template-columns: repeat(14, 1fr);
border-bottom: 1px solid rgba(255,255,255,.1);
padding-bottom: 12px;
margin-bottom: 18px;
min-width: 900px;
}
.admin-shell .cal-month {
text-align: center;
border-right: 1px dashed rgba(255,255,255,.05);
padding: 4px 0;
}
.admin-shell .cal-month:last-child { border-right: 0; }
.admin-shell .cal-month.is-current { background: linear-gradient(180deg, rgba(240,165,36,.08), transparent); border-radius: 6px 6px 0 0; }
.admin-shell .cal-month-label {
display: block;
font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
font-weight: 700; color: rgba(255,255,255,.7);
}
.admin-shell .cal-month.is-current .cal-month-label { color: var(--casamigos-teal); }
.admin-shell .cal-month-sub { display: block; font-size: .68rem; color: rgba(255,255,255,.45); }
.admin-shell .cal-tracks {
position: relative;
display: flex; flex-direction: column; gap: 10px;
min-width: 900px;
}
/* Gantt track — taller now to accommodate 2-line bar labels without truncation */
.admin-shell .cal-track {
position: relative;
height: 84px;
background: rgba(255,255,255,.02);
border-radius: 8px;
}
/* Gantt bar — min-width 140px so even narrow date spans have room for the
series name. Label-wrap allowed so "MLS '26 PLAYOFFS" stays whole. */
.admin-shell .cal-bar {
position: absolute;
top: 6px; bottom: 6px;
background: var(--series-accent);
border-radius: 8px;
border: 0;
padding: 10px 14px;
text-align: left;
cursor: pointer;
display: flex; flex-direction: column; justify-content: center; gap: 4px;
min-width: 140px;
transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
overflow: hidden;
color: #1F1B16;
}
.admin-shell .cal-bar:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.admin-shell .cal-bar:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* One-off events (CL Final = single date) — still get full label width.
The bar's date position is suggested by left%; width extends to fit text. */
.admin-shell .cal-bar.is-oneoff {
padding: 8px 12px;
min-width: 120px;
border-radius: 6px;
}
.admin-shell .cal-bar.is-oneoff .cal-bar-meta { display: none; }
.admin-shell .cal-bar-configured { color: #1F1B16; font-weight: 700; }
.admin-shell .cal-bar-unconfigured {
background: transparent !important;
border: 2px dashed var(--series-accent);
color: var(--series-accent);
}
.admin-shell .cal-bar-unconfigured:hover {
background: rgba(255,255,255,.04) !important;
}
/* Series name — wraps to 2 lines if needed (no mid-word truncation) */
.admin-shell .cal-bar-name {
font-family: var(--font-display); font-size: .9rem; font-weight: 800;
text-transform: uppercase; letter-spacing: -.005em;
line-height: 1.1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
/* Meta line — single line with ellipsis (less critical than name) */
.admin-shell .cal-bar-meta {
font-size: .72rem;
line-height: 1.2;
opacity: .9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-shell .cal-bar-cta {
font-family: var(--font-display); font-size: .68rem; letter-spacing: .08em;
font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-shell .cal-bar-status {
font-family: var(--font-display); font-size: .7rem; letter-spacing: .08em;
font-weight: 700; white-space: nowrap;
opacity: .95;
}
/* ----- Detail cards — LIGHT, matches the rest of the admin workbench ----- */
.admin-shell .cal-detail-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px; margin-bottom: 28px;
}
.admin-shell .cal-card {
background: var(--paper);
border: 1px solid var(--grey-200);
border-top: 3px solid var(--series-accent);
border-radius: 12px;
padding: 18px;
display: flex; flex-direction: column; gap: 8px;
transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out-quart);
}
.admin-shell .cal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.admin-shell .cal-card-configured {
background: linear-gradient(160deg, var(--paper), var(--grey-50));
}
.admin-shell .cal-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.admin-shell .cal-card-name {
font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
text-transform: uppercase; letter-spacing: -.005em; color: var(--ink);
}
.admin-shell .cal-card-tag {
font-family: var(--font-display); font-size: .65rem; letter-spacing: .08em;
text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
background: var(--grey-100); color: var(--grey-600);
}
.admin-shell .cal-card-dates { font-size: .9rem; color: var(--series-accent); font-weight: 600; }
.admin-shell .cal-card-revenue { font-size: .92rem; color: var(--ink); font-weight: 600; }
.admin-shell .cal-card-note { font-size: .82rem; color: var(--grey-600); line-height: 1.45; flex: 1; }
.admin-shell .cal-card-cta { margin-top: 8px; align-self: flex-start; }
.admin-shell .cal-card-active {
margin-top: 8px; padding: 6px 12px; border-radius: 999px;
background: rgba(99,168,91,.15); color: var(--green-dark); align-self: flex-start;
font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; font-weight: 700;
}
.admin-shell .cal-foot {
background: linear-gradient(120deg, var(--magenta), var(--magenta-dark));
padding: 24px 28px; border-radius: 16px;
color: #FFFFFF;
}
.admin-shell .cal-foot-headline {
font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.005em;
font-weight: 700; margin-bottom: 8px;
}
.admin-shell .cal-foot-sub { font-size: .92rem; opacity: .85; max-width: 760px; line-height: 1.55; }
@media (max-width: 720px) {
.admin-shell .cal-board { padding: 16px 16px 24px; }
.admin-shell .cal-bar-meta, .admin-shell .cal-bar-cta { display: none; }
.admin-shell .cal-track { height: 52px; }
.admin-shell .cal-month-label { font-size: .65rem; }
.admin-shell .cal-foot { padding: 18px; }
}
/* ============================================================
CHECKOUT FLOW POLISH (impeccable audit pass)
- .notice-box reusable container
- .seating-options + .seating-card radio cards
- .order-summary commitment display
- .checkbox-legal sub-label
- Custom checkbox styling
============================================================ */
.notice-box {
background: var(--cream);
padding: 18px;
border-radius: 12px;
margin: 18px 0;
}
.notice-box-title {
display: block;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 800;
margin-bottom: 4px;
}
.notice-box-body {
display: block;
color: var(--grey-600);
font-size: .9rem;
line-height: 1.55;
}
/* Seating preference cards — replaces the long-string