/* ============================================================================= Top Flight — satellite-location visual layer (Arizona / South Carolina) ----------------------------------------------------------------------------- Loaded ONLY on location pages, AFTER main.css (see header.php). Every rule is additive / overriding and scoped to body[data-location]:not([data-location="il"]), so Illinois is never affected — it doesn't even download this file. ►► ROLLBACK: delete the conditional for this file in header.php (one line) and revert the brand-lockup block in nav.php. That returns the site to the main.css baseline (yellow top bar + arrow discs stay; the AZ home hero falls back to the light treatment) with zero risk to Illinois. Tokens in scope: --accent = location navy (#0e133e AZ); --brand = location yellow (#fae90a AZ). Both are injected on by header.php. ============================================================================= */ /* --------------------------------------------------------------------------- 1) HOME HERO — navy band The IL hero is light + airy. The AZ hero is a deep-navy band: you know at a glance you're on the Arizona site, and the focal word "Legacy" becomes solid brand YELLOW (it was unreadable as text on the old light background — the reason the yellow underline felt like a workaround). All elements that lived in the hero were styled for a light background, so each is re-tuned below. --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .hero { background: var(--accent); color: var(--paper); padding-bottom: 52px; /* re-point the muted token so the inline color:var(--muted) labels in the hero markup resolve to a light-on-navy tone instead of dark-on-dark */ --muted: rgba(255, 255, 255, 0.62); --ink-2: rgba(255, 255, 255, 0.70); } /* Decorative trajectory arc → brand-tinted so it reads on navy */ body[data-location]:not([data-location="il"]) .hero::before { border-color: color-mix(in oklch, var(--brand) 30%, transparent); box-shadow: 0 0 160px color-mix(in oklch, var(--brand) 14%, transparent); } /* Focal word: solid yellow, no underline (the underline was the rejected bit) */ body[data-location]:not([data-location="il"]) .hero-title .ital { color: var(--brand); background: none; /* clear the light-title marker-underline gradient */ padding-bottom: 0; } body[data-location]:not([data-location="il"]) .hero-title .ital::after { display: none; } /* Status pill: yellow fill + navy text/dot so it pops on the navy band (it was navy-on-navy and disappeared) */ body[data-location]:not([data-location="il"]) .hero-meta .pill:not(.pill-addr) { background: var(--brand); color: var(--accent); box-shadow: 0 8px 20px color-mix(in oklch, var(--brand) 30%, transparent); } body[data-location]:not([data-location="il"]) .hero-meta .pill:not(.pill-addr) .dot { background: var(--accent); } /* Directions chip stays a light surface chip — already readable on navy */ /* Stats scoreboard: light rules + yellow ticks (were ink-on-navy, invisible) */ body[data-location]:not([data-location="il"]) .hero-stats { border-top-color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.85); } body[data-location]:not([data-location="il"]) .hero-stat { border-right-color: rgba(255, 255, 255, 0.14); } body[data-location]:not([data-location="il"]) .hero-stat::before { background: var(--brand); } /* Tryout card: it's already a dark card; on the navy band it needs separation + a brand touch. Lift the base a hair, add a hairline edge, yellow kicker, and make its CTA buttons yellow (navy buttons were navy-on-navy here). */ body[data-location]:not([data-location="il"]) .hero-side-card { background: radial-gradient(80% 70% at 100% 0%, color-mix(in oklch, var(--brand) 14%, transparent) 0, transparent 58%), radial-gradient(90% 80% at 0% 100%, color-mix(in oklch, var(--accent) 60%, #000) 0, transparent 60%), #141b33; border-color: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 50px -30px rgba(0, 0, 0, 0.7); } body[data-location]:not([data-location="il"]) .hero-side-card .kicker { color: var(--brand); } body[data-location]:not([data-location="il"]) .hero-side-cta .btn-primary { background: var(--brand); color: var(--accent); } body[data-location]:not([data-location="il"]) .hero-side-cta .btn-primary:hover { background: color-mix(in oklch, var(--brand) 88%, #000); } body[data-location]:not([data-location="il"]) .hero-side-cta .btn-primary .arr { background: rgba(0, 0, 0, 0.14); } /* --------------------------------------------------------------------------- 2) BRAND LOCKUP — location label nav.php now feeds the location name into .brand-sub (e.g. "Arizona"). Render it as a deliberate navy label (not the faded IL "Volleyball · Est. 2008"), so every page header states which location you're on. Navy on the light nav surface stays high-contrast; yellow would fail there, so the yellow identity keeps living in the top bar. --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .brand-sub { color: var(--accent); font-weight: 600; opacity: 1; } /* Logo mark: "TF" in brand yellow on the black box (navy offset shadow stays). Puts all three AZ brand colors in the wordmark. Scoped to .nav so the inverted mobile-drawer logo (light box) keeps its ink "TF" — yellow on the light box would fail contrast. ROLLBACK: delete this single rule → "TF" reverts to the main.css light fill. */ body[data-location]:not([data-location="il"]) .nav .logo-mark { color: var(--brand); } /* --------------------------------------------------------------------------- 3) YELLOW IN THE BODY (not just the chrome) First, the most visible always-on-scroll moment: the marquee stars were navy-on-black (invisible). Make them brand yellow so the color carries past the hero as you scroll. (More dark-section accents can follow in iteration.) --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .marquee-item .star { color: var(--brand); } /* --------------------------------------------------------------------------- 4) NAV MEGA-MENU FEATURED CALLOUT — yellow card The seasonal "Show featured callout" box was navy chrome (navy-on-navy). On a location it becomes a brand-YELLOW card with dark text (high contrast) and a navy CTA button — the brightest deliberate brand moment in the menu. Covers the desktop mega panel + the mobile drawer copy of the card. --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .mega-feature { background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, #fff 32%, var(--brand)) 0, var(--brand) 58%), var(--brand); color: #0b0b0e; box-shadow: 0 16px 30px -12px color-mix(in oklch, var(--brand) 55%, transparent); } body[data-location]:not([data-location="il"]) .mega-feature:hover { box-shadow: 0 24px 42px -12px color-mix(in oklch, var(--brand) 66%, transparent); } /* Mobile drawer copy of the card (its own color rules, incl. :hover) */ body[data-location]:not([data-location="il"]) .mobile-sub .mega-feature, body[data-location]:not([data-location="il"]) .mobile-sub .mega-feature:hover { color: #0b0b0e; } /* Inner bits: dark dot, dark-but-softened body + meta text */ body[data-location]:not([data-location="il"]) .mf-eyebrow::before { background: var(--accent); } body[data-location]:not([data-location="il"]) .mf-text { color: rgba(11, 11, 14, 0.78); } body[data-location]:not([data-location="il"]) .mf-meta { color: rgba(11, 11, 14, 0.70); } /* CTA chip inverts to a navy button + white glyph so it pops on the yellow card */ body[data-location]:not([data-location="il"]) .mf-cta { background: var(--accent); color: #fff; } body[data-location]:not([data-location="il"]) .mf-cta .arr { background: rgba(255, 255, 255, 0.20); } /* --------------------------------------------------------------------------- 5) HERO BADGE (top-right credential) — was a dim --muted label that blended into the navy band. Make it brand yellow so the stat reads clearly. The badge carries an inline color:var(--muted), so this needs !important to win. --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .hero-meta .col:last-child .mono { color: var(--brand) !important; } /* --------------------------------------------------------------------------- 6) CLUB-PROGRAMS "Register" buttons — force the brand interaction: navy at rest (white label), brand-YELLOW on hover (navy label), instead of the default darker-accent hover. Arrow disc + glyph follow suit. --------------------------------------------------------------------------- */ body[data-location]:not([data-location="il"]) .cp-cta { background: var(--accent); color: #fff; } body[data-location]:not([data-location="il"]) .cp-cta:hover { background: var(--brand); color: var(--accent); } body[data-location]:not([data-location="il"]) .cp-cta .arr { background: rgba(255, 255, 255, 0.18); } body[data-location]:not([data-location="il"]) .cp-cta:hover .arr { background: rgba(11, 11, 14, 0.18); }