/* =========================================================
Life University Women's Rugby — site styles
Black canvas · neon green accents · matches PDF brand
========================================================= */
:root {
--bg: #000000;
--bg-soft: #0a0d09;
--panel: #0d110b;
--border: #1b2417;
--border-2: #2a3a23;
--text: #ecf2e3;
--text-dim: #95a18a;
--text-mute: #6b7762;
--neon: #84d62c;
--neon-2: #a3eb4a;
--neon-soft: rgba(132,214,44,0.12);
--neon-glow: 0 0 30px rgba(132,214,44,0.30);
--forest: #14532d;
--red: #ef4444;
--gold: #f5c542;
--gold-2: #ffd866;
--gold-soft: rgba(245,197,66,0.14);
--white-soft: rgba(236,242,227,0.14);
--max-w: 1280px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--neon); text-decoration: none; }
a:hover { color: var(--neon-2); }
::selection { background: rgba(132,214,44,0.35); color: var(--text);}
/* ============ Typography ============ */
h1, h2, h3, h4 { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.015em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(40px, 6.5vw, 72px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 20px; }
.eyebrow { font-size: 11px; color: var(--neon); text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700; }
.tagline { font-size: 11px; color: var(--neon); text-transform: uppercase; letter-spacing: 0.30em; font-weight: 700; text-align: center; padding: 18px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft);}
.tagline.spacer { padding: 22px 16px; }
/* ============ Layout ============ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.section { padding: 70px 0; }
.section.tight { padding: 44px 0; }
@media (max-width: 720px) { .section { padding: 48px 0; } .wrap { padding: 0 20px; } }
/* ============ Site header / nav ============ */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(0,0,0,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header-inner { max-width: var(--max-w); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 20px; }
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-brand img { width: 44px; height: 44px; object-fit: contain; }
.site-brand .brand-name { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.04em; line-height: 1.1; }
.site-brand .brand-sub { color: var(--text-mute); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a { color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; transition: all .15s; }
.site-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.site-nav a.active { color: var(--neon); }
.site-nav a.cta { background: var(--neon); color: #051405; padding: 9px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 0 14px rgba(132,214,44,0.25); }
.site-nav a.cta:hover { background: var(--neon-2); color: #051405; }
.site-nav a.wellness-link { color: var(--neon); border: 1px solid var(--border-2); padding: 7px 12px; border-radius: 999px;}
.site-nav a.wellness-link:hover { background: var(--neon-soft); border-color: var(--neon); color: var(--neon);}
/* ===== Nav dropdowns ===== */
.nav-item { position: relative; display: inline-block; }
.nav-item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-item.has-dropdown > a::after { content: '▾'; font-size: 9px; margin-left: 2px; opacity: 0.6; transition: transform .15s, opacity .15s; }
.nav-item.has-dropdown:hover > a::after, .nav-item.has-dropdown:focus-within > a::after { transform: translateY(1px); opacity: 1; color: var(--neon); }
.nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 230px; background: #0a0c0a; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(132,214,44,0.04); padding: 6px; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s, transform .18s; z-index: 50; }
.nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(2px); }
/* Right-align dropdowns near the right edge so they don't overflow */
.nav-item.dd-right > .nav-dropdown { left: auto; right: 0; transform: translateY(8px); }
.nav-item.dd-right:hover > .nav-dropdown, .nav-item.dd-right:focus-within > .nav-dropdown { transform: translateY(2px); }
.nav-dropdown a { display: block; padding: 9px 14px; font-size: 12px; font-weight: 600; color: var(--text-dim); border-radius: 6px; letter-spacing: 0.04em; text-transform: none; transition: background .12s, color .12s; }
.nav-dropdown a:hover { background: rgba(132,214,44,0.08); color: var(--neon); }
.nav-dropdown a .nd-sub { display: block; font-size: 10px; font-weight: 500; color: var(--text-mute); letter-spacing: 0.03em; margin-top: 2px; text-transform: uppercase; }
.nav-dropdown .nd-divider { height: 1px; background: var(--border); margin: 6px 8px; }
@media (max-width: 880px) {
.site-header-inner { padding: 12px 18px; flex-wrap: wrap; }
.site-nav { width: 100%; justify-content: flex-start; gap: 2px; margin-left: 0; }
.site-nav a { padding: 7px 8px; font-size: 11px; }
.site-brand .brand-sub { display: none; }
/* Hide dropdowns on mobile — keep direct links only, since the nav already wraps tightly */
.nav-item.has-dropdown > a::after { display: none; }
.nav-dropdown { display: none; }
}
/* ============ Hero ============ */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; z-index: 0; }
.hero-bg::after {
content: '';
position: absolute; inset: 0;
background:
/* Bottom-left dark for text readability — strong dark in bottom-left fading clear to the right */
linear-gradient(115deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.10) 75%, rgba(0,0,0,0.40) 100%),
/* Bottom edge fade to black so section transition is clean */
linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.92) 100%);
}
.hero-content { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 28px 64px; width: 100%; }
.hero-content .eyebrow { margin-bottom: 14px; text-shadow: 0 0 14px rgba(132,214,44,0.45); }
.hero-content h1 { color: #fff; max-width: 800px; text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.hero-content h1 .green { color: var(--neon); }
.hero-content p.lede { font-size: 17px; max-width: 620px; color: rgba(255,255,255,0.85); margin: 18px 0 24px; line-height: 1.55; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.trophy-badge { position: absolute; top: 26px; right: 28px; z-index: 2; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); border: 1px solid rgba(132,214,44,0.35); border-radius: 12px; padding: 10px 14px; color: var(--neon); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 0 22px rgba(132,214,44,0.15); }
.trophy-badge .star { color: #facc15; margin-right: 6px;}
@media (max-width: 720px) { .hero { min-height: 64vh; } .hero-content { padding-bottom: 36px; } .trophy-badge { top: 14px; right: 14px; padding: 7px 10px; font-size: 10px; } }
/* ============ Buttons / CTAs ============ */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(255,255,255,0.05); color: var(--text); cursor: pointer; transition: all .15s; text-decoration: none; }
.btn:hover { background: rgba(255,255,255,0.10); border-color: var(--neon); color: var(--text); }
.btn.primary { background: var(--neon); color: #051405; border-color: var(--neon); box-shadow: 0 0 18px rgba(132,214,44,0.30); }
.btn.primary:hover { background: var(--neon-2); color: #051405; box-shadow: 0 0 26px rgba(132,214,44,0.50); }
.btn.lg { font-size: 14px; padding: 14px 28px; }
/* ============ Banner bars (the iconic green section dividers) ============ */
.banner { background: var(--neon); color: #051405; padding: 14px 16px; font-weight: 800; font-size: clamp(18px, 2.5vw, 26px); letter-spacing: 0.04em; text-align: center; text-transform: uppercase; box-shadow: 0 0 28px rgba(132,214,44,0.20); }
.banner.lg { padding: 22px 16px; font-size: clamp(22px, 3vw, 34px); }
.banner.outline { background: transparent; color: var(--neon); border-top: 2px solid var(--neon); border-bottom: 2px solid var(--neon); box-shadow: none; }
/* ============ Cards & grids ============ */
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(380px,100%), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.card.bordered-top { border-top: 3px solid var(--neon); }
.card h3 { color: var(--neon); margin-bottom: 12px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.card p { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.feature-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: transform .2s, border-color .2s; }
.feature-tile:hover { transform: translateY(-3px); border-color: var(--neon); }
.feature-tile img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.feature-tile .body { padding: 22px; }
.feature-tile h3 { color: var(--text); font-size: 18px; letter-spacing: -0.01em; text-transform: none; margin-bottom: 8px; font-weight: 700; }
.feature-tile p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 0; }
/* ============ Two-column image + text rows ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.split.flip > .text-col { order: 2; }
.split img { width: 100%; height: auto; border-radius: 14px; object-fit: cover; max-height: 540px; }
.split .text-col h2 { margin-bottom: 14px; }
.split .text-col .eyebrow { margin-bottom: 10px; }
.split .text-col p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 24px; } .split.flip > .text-col { order: 0; } }
/* ============ Stat row ============ */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px,100%), 1fr)); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-soft);}
.stat-row .stat { padding: 26px 18px; text-align: center; border-right: 1px solid var(--border); }
.stat-row .stat:last-child { border-right: none; }
.stat-row .stat .v { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--neon); letter-spacing: -0.02em; line-height: 1; }
.stat-row .stat .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-top: 6px; }
/* ============ Staff bio rows ============ */
.bio { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--border); align-items: start; }
.bio.flip { grid-template-columns: 1fr 280px; }
.bio.flip > .bio-photo { order: 2; }
.bio:last-child { border-bottom: none; }
.bio-photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; }
.bio-role { color: var(--neon); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 6px; }
.bio h3 { font-size: 22px; color: var(--text); margin-bottom: 14px; letter-spacing: -0.01em; text-transform: none; font-weight: 800;}
.bio p { color: var(--text-dim); font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
@media (max-width: 720px) { .bio, .bio.flip { grid-template-columns: 1fr; gap: 18px; } .bio-photo { max-width: 220px; } .bio.flip > .bio-photo { order: 0; } }
/* ============ Bullet lists ============ */
.bullets { list-style: none; padding: 0; margin: 0; }
.bullets li { padding: 10px 0 10px 30px; position: relative; color: var(--text-dim); font-size: 14px; line-height: 1.6; border-bottom: 1px solid var(--border); }
.bullets li:last-child { border-bottom: none; }
.bullets li::before { content: '▸'; position: absolute; left: 4px; top: 10px; color: var(--neon); font-weight: 700; }
.bullets li b, .bullets li strong { color: var(--text); }
/* ============ Schedule table ============ */
table.schedule { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
table.schedule th, table.schedule td { padding: 14px 14px; text-align: left; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
table.schedule th { background: rgba(132,214,44,0.08); color: var(--neon); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
table.schedule td:first-child { color: var(--neon); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; }
table.schedule td.rest { color: var(--text-mute); font-style: italic; }
table.schedule tr:last-child td { border-bottom: none; }
table.schedule td:last-child, table.schedule th:last-child { border-right: none; }
/* ============ Quote / pull ============ */
.quote { background: var(--panel); border-left: 4px solid var(--neon); padding: 26px 30px; border-radius: 0 14px 14px 0; margin: 26px 0; }
.quote p { font-size: 17px; color: var(--text); font-style: italic; line-height: 1.6; margin: 0 0 12px; }
.quote .who { color: var(--neon); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; }
.quote .who span { color: var(--text-dim); font-weight: 500; margin-left: 8px; text-transform: none; letter-spacing: 0.02em; }
/* ============ Pathway / development model ============ */
.pathway-row { display: grid; grid-template-columns: 220px 1fr 200px; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--neon); border-radius: 14px; padding: 22px 24px; margin-bottom: 14px; }
.pathway-row .pw-tier { font-weight: 800; color: var(--neon); font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.pathway-row .pw-detail h4 { color: var(--text); font-weight: 700; font-size: 14px; margin-bottom: 4px; letter-spacing: -0.005em; }
.pathway-row .pw-detail p { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin: 0; }
.pathway-row .pw-next { color: var(--neon); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; text-align: right; }
@media (max-width: 720px) { .pathway-row { grid-template-columns: 1fr; gap: 8px; text-align: left; } .pathway-row .pw-next { text-align: left; } }
/* ============ CTA block ============ */
.cta-block { background: linear-gradient(135deg, rgba(132,214,44,0.10) 0%, transparent 70%); border: 1px solid rgba(132,214,44,0.35); border-radius: 16px; padding: 50px 36px; text-align: center; margin: 32px 0;}
.cta-block .eyebrow { margin-bottom: 12px;}
.cta-block h2 { color: var(--text); margin-bottom: 16px;}
.cta-block p { color: var(--text-dim); font-size: 15px; max-width: 560px; margin: 0 auto 24px; line-height: 1.6;}
/* ============ Site footer ============ */
.site-footer { background: #050805; border-top: 1px solid var(--border); padding: 0 0 28px; margin-top: 48px; }
/* === SPONSOR BANNER === */
.sponsor-banner { background: linear-gradient(180deg, #080a08 0%, #0c0f0c 100%); border-top: 1px solid rgba(132,214,44,0.18); border-bottom: 1px solid var(--border); padding: 36px 0 32px; position: relative; }
.sponsor-banner::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: var(--neon); }
.sponsor-banner-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--neon); margin: 0 auto 24px; }
.sponsor-banner-label::before, .sponsor-banner-label::after { content: ''; display: inline-block; width: 24px; height: 1px; background: rgba(132,214,44,0.5); vertical-align: middle; margin: 0 14px; }
.sponsor-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px 24px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sponsor-grid .sponsor-item { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.sponsor-grid img { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; filter: grayscale(100%) brightness(1.5) contrast(1.05); opacity: 0.75; transition: filter .25s ease, opacity .25s ease, transform .2s ease; }
.sponsor-grid img:hover { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.06); }
.sponsor-grid .sponsor-item.tall img { max-height: 70px; }
.sponsor-grid .sponsor-item.wide img { max-height: 38px; }
@media (max-width: 1100px) { .sponsor-grid { grid-template-columns: repeat(5, 1fr); gap: 16px 22px; } }
@media (max-width: 720px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } .sponsor-grid img { max-height: 42px; } .sponsor-grid .sponsor-item { min-height: 56px; } }
@media (max-width: 420px) { .sponsor-grid { grid-template-columns: repeat(2, 1fr); } }
/* === FOOTER GRID === */
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 44px 24px 0; }
.site-footer h4 { color: var(--neon); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.site-footer p, .site-footer li { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0;}
.site-footer ul li a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.site-footer ul li a:hover { color: var(--neon);}
.site-footer .copyright { border-top: 1px solid var(--border); margin: 36px auto 0; padding: 18px 24px 0; max-width: 1200px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--text-mute); font-size: 11px; letter-spacing: 0.05em; }
/* Legacy text-sponsor row now hidden in favour of the banner above */
.sponsor-row { display: none; }
@media (max-width: 720px) { .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; } }
/* ============ Championship grid — three-tier (gold / green / silver) ============ */
.champ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); gap: 14px;}
.champ-tile { background: linear-gradient(135deg, var(--panel) 0%, #14201a 100%); border: 1px solid var(--border); border-radius: 12px; padding: 22px 16px 18px; text-align: center; transition: all .15s; position: relative;}
.champ-tile:hover { transform: translateY(-3px);}
.champ-tile .ico { width: 36px; height: 36px; display: block; margin: 0 auto 12px;}
.champ-tile .year { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 6px;}
.champ-tile .comp { font-size: 13px; font-weight: 800; letter-spacing: -0.005em; margin-bottom: 5px;}
.champ-tile .result { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;}
/* GOLD — National Championships */
.champ-tile.gold { border-top: 3px solid #facc15; box-shadow: inset 0 0 30px rgba(250,204,21,0.04);}
.champ-tile.gold .ico { color: #facc15; filter: drop-shadow(0 0 10px rgba(250,204,21,0.55));}
.champ-tile.gold .comp { color: #facc15;}
.champ-tile.gold:hover { border-color: #facc15; box-shadow: 0 12px 26px -12px rgba(250,204,21,0.55), inset 0 0 30px rgba(250,204,21,0.05);}
.champ-tile.gold.featured { background: linear-gradient(135deg, rgba(250,204,21,0.13) 0%, #14201a 70%); border-top-width: 4px; box-shadow: inset 0 0 40px rgba(250,204,21,0.10);}
.champ-tile.gold.featured .year { color: #facc15; font-size: 17px;}
/* GREEN — Other major wins (Tropical 7s) */
.champ-tile.green { border-top: 3px solid var(--neon);}
.champ-tile.green .ico { color: var(--neon); filter: drop-shadow(0 0 10px rgba(132,214,44,0.55));}
.champ-tile.green .comp { color: var(--neon);}
.champ-tile.green:hover { border-color: var(--neon); box-shadow: 0 12px 26px -12px rgba(132,214,44,0.55);}
/* SILVER — Runners up */
.champ-tile.silver { background: var(--bg-soft); border-top: 3px solid #c0c0c0; opacity: 0.92;}
.champ-tile.silver .ico { color: #c0c0c0; filter: drop-shadow(0 0 6px rgba(192,192,192,0.4));}
.champ-tile.silver .comp { color: #d6d8d6;}
.champ-tile.silver .result { color: #9ca3af;}
.champ-tile.silver:hover { opacity: 1; border-color: #c0c0c0;}
.champ-sub-head { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; text-align: center; margin: 0 0 18px; padding-top: 6px;}
/* Constrain & centre grids when there are few enough items to avoid stretching */
.champ-grid.centered { max-width: 920px; margin: 0 auto; }
.champ-grid.centered.narrow { max-width: 680px; }
.champ-grid.centered.wide { max-width: 1180px; }
/* Triple Crown — featured hero block at the top */
.triple-crown-header {
text-align: center;
padding: 24px 16px 22px;
background: radial-gradient(ellipse at center top, rgba(250,204,21,0.10) 0%, transparent 70%);
border-top: 1px solid rgba(250,204,21,0.30);
border-bottom: 1px solid rgba(250,204,21,0.30);
margin-bottom: 22px;
position: relative;
}
.triple-crown-header .tc-badge {
display: inline-block;
background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
color: #1a1206;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.30em;
padding: 6px 18px;
border-radius: 999px;
text-transform: uppercase;
margin-bottom: 12px;
box-shadow: 0 0 22px rgba(250,204,21,0.45);
}
.triple-crown-header h3 {
font-size: clamp(20px, 3vw, 28px);
font-weight: 800;
color: #facc15;
letter-spacing: -0.015em;
margin: 6px 0 6px;
}
.triple-crown-header p {
color: var(--text-dim);
font-size: 14px;
max-width: 580px;
margin: 0 auto;
line-height: 1.55;
}
/* Featured Triple Crown grid — bigger tiles, max 3-wide */
.triple-crown-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 720px) {
.triple-crown-grid { grid-template-columns: 1fr; max-width: 420px; }
}
/* Larger trophy tile variant for the Triple Crown */
.champ-tile.large { padding: 30px 22px 24px; }
.champ-tile.large .ico { width: 48px; height: 48px; margin-bottom: 14px; filter: drop-shadow(0 0 14px rgba(250,204,21,0.75)); }
.champ-tile.large .year { font-size: 19px; margin-bottom: 8px; }
.champ-tile.large .comp { font-size: 16px; margin-bottom: 6px; }
.champ-tile.large .result { font-size: 11px; }
/* ============ Fixtures schedule list ============ */
.fixtures-list { display: flex; flex-direction: column; gap: 10px; max-width: 920px; margin: 0 auto;}
.fixture { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--neon); border-radius: 12px; padding: 16px 20px; transition: all .15s;}
.fixture:has(.fix-matchup) { grid-template-columns: 100px 1fr auto auto;}
.fixture:hover { transform: translateX(2px); border-color: var(--border-2); border-left-color: var(--neon-2);}
.fixture.past { opacity: 0.7; border-left-color: var(--text-mute);}
.fixture.past:hover { opacity: 1;}
.fixture.featured { border-left-width: 4px; background: linear-gradient(135deg, rgba(132,214,44,0.06) 0%, var(--panel) 60%); box-shadow: 0 0 0 1px var(--neon-soft);}
.fixture.featured .fix-comp { color: var(--neon);}
/* ============ Home / Away / Neutral colour coding ============
Home is the default (neon green). Away = gold. Neutral = white.
Away is auto-detected from the existing `@` marker
so the markup doesn't need to change. Neutral requires an explicit
`.fixture.neutral` class.
*/
/* Away fixtures — gold */
.fixture:has(.ha.away) { border-left-color: var(--gold);}
.fixture:has(.ha.away) .fix-date .month { color: var(--gold);}
.fixture:has(.ha.away) .fix-opp .ha.away { color: var(--gold);}
.fixture:has(.ha.away) .upcoming-tag { background: var(--gold-soft); color: var(--gold);}
.fixture.featured:has(.ha.away) { background: linear-gradient(135deg, rgba(245,197,66,0.06) 0%, var(--panel) 60%); box-shadow: 0 0 0 1px var(--gold-soft);}
.fixture.featured:has(.ha.away) .fix-comp { color: var(--gold);}
/* Neutral fixtures — white */
.fixture.neutral { border-left-color: var(--text);}
.fixture.neutral .fix-date .month { color: var(--text);}
.fixture.neutral .fix-opp .ha { color: var(--text);}
.fixture.neutral .upcoming-tag { background: var(--white-soft); color: var(--text);}
.fixture.featured.neutral { background: linear-gradient(135deg, rgba(236,242,227,0.05) 0%, var(--panel) 60%); box-shadow: 0 0 0 1px var(--white-soft);}
.fixture.featured.neutral .fix-comp { color: var(--text);}
/* Team-vs-team logo block — sits to the right of the fixture detail text */
.fix-matchup { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px;}
.fix-matchup .team-mark { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));}
.fix-matchup .vs-sep { font-size: 11px; color: var(--text-mute); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;}
@media (max-width: 640px) { .fix-matchup { padding: 4px 10px; gap: 8px;} .fix-matchup .team-mark { width: 28px; height: 28px;} .fixture { grid-template-columns: 64px 1fr;} .fixture .fix-matchup { grid-column: 1 / -1; justify-content: center;}}
.fixture .fix-date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-right: 1px solid var(--border); }
.fixture .fix-date .month { font-size: 10px; color: var(--neon); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;}
.fixture .fix-date .day { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1;}
.fixture .fix-date .year { font-size: 10px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.08em;}
.fixture .fix-detail { min-width: 0;}
.fixture .fix-comp { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; margin-bottom: 6px;}
.fixture .fix-opp { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px;}
.fixture .fix-opp .ha { color: var(--neon); font-weight: 700; margin-right: 6px;}
.fixture .fix-opp .ha.away { color: var(--text-dim);}
.fixture .fix-venue { font-size: 12px; color: var(--text-dim);}
.fixture .fix-result { text-align: right; min-width: 92px;}
.fixture .upcoming-tag { display: inline-block; background: var(--neon-soft); color: var(--neon); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;}
.fixture .result-tag { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;}
.fixture .result-tag .badge { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px;}
.fixture .result-tag .badge.win { background: var(--neon-soft); color: var(--neon);}
.fixture .result-tag .badge.loss { background: rgba(239,68,68,0.14); color: var(--red);}
.fixture .result-tag .score { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;}
@media (max-width: 640px) { .fixture { grid-template-columns: 64px 1fr; padding: 14px;} .fixture .fix-result { grid-column: 1 / -1; text-align: left;}}
/* ============ Instagram section ============ */
.ig-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; max-width: 1100px; margin: 0 auto;}
@media (max-width: 880px) { .ig-wrap { grid-template-columns: 1fr; gap: 28px;}}
.ig-side .ig-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #f9a826 0%, #d6249f 50%, #285AEB 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;}
.ig-side .ig-icon svg { width: 30px; height: 30px; color: #fff;}
.ig-feed { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; min-height: 360px; position: relative;}
.ig-feed iframe { width: 100%; height: 100%; border: 0; display: block;}
.ig-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; background: radial-gradient(ellipse at center, rgba(132,214,44,0.05) 0%, transparent 70%);}
.ig-placeholder-glyph { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, #f9a826 0%, #d6249f 50%, #285AEB 100%); display: flex; align-items: center; justify-content: center; opacity: 0.6;}
.ig-placeholder-glyph svg { width: 32px; height: 32px; color: #fff;}
.ig-placeholder-handle { font-size: 18px; font-weight: 800; color: var(--text);}
.ig-placeholder-note { font-size: 12px; color: var(--text-dim); max-width: 280px; line-height: 1.5;}
/* ============ Skill thumbnail cards (Learn How To) ============ */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px,100%), 1fr)); gap: 12px;}
.skill-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all .15s;}
.skill-card:hover { transform: translateY(-2px); border-color: var(--neon); box-shadow: 0 8px 18px -10px rgba(132,214,44,0.40);}
.skill-card img { aspect-ratio: 1/1; width: 100%; object-fit: cover; display: block;}
.skill-card .skill-label { padding: 10px 12px 14px; text-align: center; color: var(--text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; letter-spacing: 0.06em;}
/* ============ Kit / product cards ============ */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); gap: 14px;}
.kit-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all .15s; text-align: center;}
.kit-card:hover { transform: translateY(-2px); border-color: var(--neon); box-shadow: 0 10px 22px -12px rgba(132,214,44,0.45);}
.kit-card .kit-img { aspect-ratio: 1/1; background: #0f120c; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.kit-card .kit-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px;}
.kit-card .kit-body { padding: 12px 14px 16px;}
.kit-card .kit-name { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.005em; margin-bottom: 2px;}
.kit-card .kit-tag { font-size: 10px; color: var(--neon); text-transform: uppercase; letter-spacing: .12em; font-weight: 700;}
.kit-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 16px;}
.kit-divider::before, .kit-divider::after { content:''; flex:1; height: 1px; background: var(--border);}
.kit-divider .lbl { font-size: 11px; color: var(--neon); text-transform: uppercase; letter-spacing: .25em; font-weight: 700;}
/* ============ Misc ============ */
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.accent { color: var(--neon); }
.pill-tag { display: inline-block; padding: 4px 12px; background: var(--neon-soft); color: var(--neon); border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;}
/* ============ Player link (inline name → dashboard deep-link) ============
Used anywhere a player is named on the marketing site. Click pulls up
that player's dashboard card. The avatar is a small circular badge
with the player's initials on a deterministic gradient — if a photo
exists at /assets/photos/players/.jpg, it loads on top.
*/
.player-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-2);
border-radius: 999px;
color: var(--text);
font-weight: 600;
font-size: 13px;
letter-spacing: -0.005em;
text-decoration: none;
transition: all 0.18s ease;
line-height: 1;
white-space: nowrap;
}
.player-link:hover {
background: var(--neon-soft);
border-color: var(--neon);
color: var(--text);
transform: translateY(-1px);
box-shadow: 0 4px 18px rgba(132,214,44,0.18);
}
.player-link:hover .player-avatar { box-shadow: 0 0 0 2px var(--neon); }
.player-link .player-avatar {
width: 26px; height: 26px; border-radius: 50%;
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
color: #fff; text-transform: uppercase;
flex: 0 0 auto;
transition: box-shadow 0.18s ease;
}
.player-link .player-avatar img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
border-radius: 50%;
}
.player-link .player-name { display: inline-block; }
/* When used inside an award card, drop the chip styling so the link looks like the original heading */
.award-player .player-link {
background: transparent;
border: none;
padding: 0;
font-size: inherit;
font-weight: 700;
color: var(--text);
}
.award-player .player-link:hover { background: transparent; box-shadow: none; transform: none; color: var(--neon); }
.award-player .player-link .player-avatar { width: 30px; height: 30px; font-size: 11px; }
/* Compact variant for tight grids */
.player-link.compact { padding: 3px 10px 3px 3px; font-size: 12px; gap: 6px; }
.player-link.compact .player-avatar { width: 22px; height: 22px; font-size: 9px; }
/* ============ HIGHLIGHTS VIDEO SECTION ============
Dedicated home-page section between Why Life and Programs.
9:16 vertical phone-reel video paired with copy + CTAs. */
.highlights-section { padding: 60px 0; }
.highlights-grid {
display: grid;
grid-template-columns: minmax(min(260px,100%), 360px) 1fr;
gap: 60px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.highlights-video-wrap {
position: relative;
aspect-ratio: 9 / 16;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
background: #000;
border: 1px solid rgba(255,255,255,0.06);
}
.highlights-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.highlights-mute-btn {
position: absolute;
top: 14px;
right: 14px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,0.65);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
transition: background .15s, transform .15s;
padding: 0;
}
.highlights-mute-btn:hover { background: rgba(0,0,0,0.85); transform: scale(1.06); }
.highlights-mute-btn .unmuted-icon { display: none; }
.highlights-mute-btn.is-unmuted .muted-icon { display: none; }
.highlights-mute-btn.is-unmuted .unmuted-icon { display: block; }
.highlights-pill {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
padding: 7px 16px;
background: rgba(0,0,0,0.75);
border: 1px solid rgba(255,255,255,0.16);
color: #fff;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
pointer-events: none;
transition: opacity .3s;
backdrop-filter: blur(8px);
}
.highlights-mute-btn.is-unmuted ~ .highlights-pill { opacity: 0; }
.highlights-copy { max-width: 480px; }
.highlights-tag {
display: inline-block;
padding: 5px 14px;
background: rgba(132,214,44,0.10);
border: 1px solid rgba(132,214,44,0.35);
color: #84d62c;
border-radius: 100px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 18px;
}
.highlights-copy h2 {
font-size: 38px;
font-weight: 900;
letter-spacing: -0.025em;
margin: 0 0 16px;
line-height: 1.05;
}
.highlights-copy p {
font-size: 16px;
line-height: 1.6;
color: var(--text-dim, #b6bcc9);
margin: 0 0 28px;
}
.highlights-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-cta, .btn-cta-secondary {
display: inline-block;
padding: 12px 22px;
border-radius: 8px;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: all .15s;
border: 1px solid transparent;
}
.btn-cta { background: #84d62c; color: #000; }
.btn-cta:hover { background: #a3eb4a; transform: translateY(-1px); }
.btn-cta-secondary {
background: transparent;
color: #84d62c;
border-color: rgba(132,214,44,0.45);
}
.btn-cta-secondary:hover { background: rgba(132,214,44,0.08); border-color: #84d62c; }
/* Mobile: stack vertically, video stays centered and constrained */
@media (max-width: 760px) {
.highlights-grid { grid-template-columns: 1fr; gap: 36px; }
.highlights-video-wrap { max-width: 320px; margin: 0 auto; }
.highlights-copy { text-align: center; max-width: none; margin: 0 auto; }
.highlights-copy h2 { font-size: 30px; }
.highlights-cta-row { justify-content: center; }
}
/* ============ BIO VIDEO CARD ============
Embedded vertical "hear from X" video inside a staff bio. Click-to-play
(not autoplay) so the audio doesn't surprise visitors. */
.bio-video-card {
display: grid;
grid-template-columns: minmax(min(180px,100%), 220px) 1fr;
gap: 20px;
align-items: center;
margin-top: 22px;
padding: 16px;
border: 1px solid rgba(132,214,44,0.18);
background: rgba(132,214,44,0.03);
border-radius: 14px;
}
.bio-video-wrap {
position: relative;
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
background: #000;
cursor: pointer;
}
.bio-video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.bio-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.30);
border: none;
color: #84d62c;
cursor: pointer;
transition: background .15s;
padding: 0;
}
.bio-video-play:hover { background: rgba(0,0,0,0.18); }
.bio-video-play::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 70px; height: 70px;
border-radius: 50%;
background: rgba(132,214,44,0.95);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
z-index: 0;
}
.bio-video-play svg { position: relative; z-index: 1; color: #000; margin-left: 4px; }
.bio-video-play.is-playing { display: none; }
.bio-video-label .eyebrow {
color: #84d62c;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 8px;
}
.bio-video-label > div:last-child {
font-size: 14px;
line-height: 1.55;
color: var(--text-dim, #b6bcc9);
}
@media (max-width: 720px) {
.bio-video-card { grid-template-columns: 1fr; gap: 14px; }
.bio-video-wrap { max-width: 220px; margin: 0 auto; }
.bio-video-label { text-align: center; }
}