/* "11", built from the theme-match version. Same tokens as the Aug 2026 theme (navy, Preds gold,
Titans blue, Jost + Instrument Sans, 3px buttons). Upgrades: photography-first sections using
real customers and fans, a cleaner Homage-style product grid, sharper type, more local voice.
Single deliberate light theme with navy stages. Full-bleed bands, centered .wrap gutter. */
/* Fonts, self-hosted (were Google Fonts): Jost and Instrument Sans as variable woff2, Latin and
Latin Extended subsets, from fonts.gstatic.com (Oct 2026; SIL Open Font License). One file per
family covers every weight; layout.php preloads the two Latin files. /assets is cached for a
year without a version query here, so a changed font file needs a new file name. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
--white: #ffffff;
--ink: #0b1b2a;
--navy: #041e42;
--navy-deep: #0c2340;
--navy-hi: #062d64;
--navy-lo: #020d1c;
--gold: #ffb81c;
--gold-line: #e2a32a;
--blue: #4b92db;
--blue-soft: #9fc8f1;
--blue-ink: #2b6cb0; /* --blue darkened for small text on white/mist (5.4:1 / 5.0:1); --blue stays for accents and on navy */
--mist: #f4f6f9;
--plate: #f1f3f6;
--line: #e4e8ee;
--muted: #5a6b82;
--radius: 3px;
--band: radial-gradient(circle at 14% 18%, rgba(255,255,255,.1) 0, rgba(255,255,255,0) 30%),
linear-gradient(135deg, var(--navy-hi) 0%, var(--navy) 48%, var(--navy-lo) 100%);
--display: "Jost", "Futura", "Century Gothic", sans-serif;
--body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; letter-spacing: .02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--navy); z-index: 90; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
main:focus { outline: none; }
.vh, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--radius); background: var(--gold); color: var(--navy); font-weight: 700; transform: translateY(-160%); transition: transform .15s; }
.skip:focus { transform: none; outline: 2px solid var(--navy); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 50px; padding: 0 24px; border-radius: var(--radius); border: 1px solid transparent; font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: #ffc94d; border-color: #ffc94d; }
.btn-white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: var(--white); color: var(--navy); }
.eyebrow { display: block; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: .6rem; }
.sec { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--navy); }
.head p { margin: .6rem 0 0; color: var(--muted); font-size: 1.05rem; }
.more { font-weight: 600; font-size: 15px; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 2px; white-space: nowrap; }
.more:hover { color: var(--blue-ink); }
/* Announcement + header: logo left, nav centred, search field and a Bag button on the right */
.announce { background: var(--gold); color: var(--navy); text-align: center; font-size: 12.5px; font-weight: 600; }
.announce .wrap { padding-block: .45rem; }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--navy); color: var(--white); }
.nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; height: 66px; }
.logo img { height: 42px; width: auto; }
.menu { display: flex; gap: 1.8rem; justify-content: center; }
.menu a { white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding-block: .4rem; border-bottom: 2px solid transparent; transition: border-color .15s; }
.menu a:hover, .menu a[aria-current] { border-color: var(--gold); }
.tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.search-pill { display: flex; align-items: center; gap: 8px; height: 38px; width: 220px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.search-pill:focus-within { background: rgba(255,255,255,.16); outline: 2px solid var(--blue-soft); }
.search-pill svg { width: 17px; height: 17px; flex: none; }
.search-pill input { flex: 1; min-width: 0; border: 0; background: none; color: var(--white); font: inherit; font-size: 14px; outline: none; }
.search-pill input::placeholder { color: rgba(255,255,255,.7); }
.bag-btn { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 99px; background: var(--white); color: var(--navy); font-weight: 700; font-size: 14px; white-space: nowrap; }
.bag-btn svg { width: 18px; height: 18px; }
.bag-btn:hover { background: #e9eef5; }
.tool { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--white); cursor: pointer; border-radius: 50%; }
.tool:hover { background: rgba(255,255,255,.1); }
.tool svg { width: 22px; height: 22px; }
/* Account icon before the Bag button (white person on navy, 40px round hover like .tool) */
.acct-link { flex: none; }
.acct-link:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.acct-link[aria-current] { background: rgba(255,255,255,.1); }
.burger, .search-link { display: none; }
.mnav { position: fixed; inset: 0; z-index: 95; background: var(--navy); color: var(--white); padding: calc(env(safe-area-inset-top, 0px) + 14px) max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; }
.mnav nav { display: grid; }
/* Top level in the desktop nav's voice (.menu a): Jost, uppercase, letter-spaced, a gold mark for
the current page; just bigger rows for thumbs. */
.mnav nav > a, .mnav-sports summary { display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; border-bottom: 1px solid rgba(255,255,255,.12); }
.mnav nav > a[aria-current], .mnav-sports[open] > summary { color: var(--gold); }
.mnav .search-pill { width: 100%; height: 46px; }
/* Logo, Close and search stay put while the menu scrolls (Shop opens long). */
.mnav-head { position: sticky; top: calc(-1 * (env(safe-area-inset-top, 0px) + 14px)); z-index: 2; /* sticks to the very top edge: the panel's own top padding would otherwise leave a gap */ display: grid; gap: 14px; margin: calc(-1 * (env(safe-area-inset-top, 0px) + 14px)) -20px 0; padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px; background: var(--navy); box-shadow: 0 10px 14px -12px rgba(0,0,0,.6); }
.mnav-foot { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.mnav-foot a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--blue-soft); }
.mnav-foot a[aria-current] { color: var(--gold); }
/* Opening: the panel slides in from the right and the top-level links follow a beat apart. */
.mnav:not([hidden]) { animation: sn-mnav-in .26s cubic-bezier(.2, .7, .2, 1) both; }
.mnav:not([hidden]) nav > * { animation: sn-mnav-item .35s cubic-bezier(.2, .7, .2, 1) both; }
.mnav nav > :nth-child(2) { animation-delay: .04s; } .mnav nav > :nth-child(3) { animation-delay: .08s; } .mnav nav > :nth-child(4) { animation-delay: .12s; }
.mnav nav > :nth-child(5) { animation-delay: .16s; } .mnav nav > :nth-child(6) { animation-delay: .2s; } .mnav nav > :nth-child(n+7) { animation-delay: .24s; }
@keyframes sn-mnav-in { from { translate: 24px 0; opacity: 0; } }
@keyframes sn-mnav-item { from { translate: 18px 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mnav:not([hidden]), .mnav:not([hidden]) nav > * { animation: none; } }
body.menu-open { overflow: hidden; }
/* Hero (theme photo, bigger) */
.hero { position: relative; min-height: clamp(620px, 86vh, 820px); display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--navy); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 30%; } /* she stands right of the copy, clear of the headline */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,30,66,.72) 0%, rgba(4,30,66,.42) 40%, rgba(4,30,66,0) 68%), linear-gradient(0deg, rgba(4,30,66,.6), rgba(4,30,66,0) 45%); }
.hero .wrap { position: relative; z-index: 2; padding-block: 0 5rem; }
/* Golden hour (home.php .hero-lights): warm gold blooms in the top-right corner, over the house and
right of her face; a navy glow breathes in the bottom-left,
deepening the background behind the white copy instead of lighting it (white-text contrast goes
up, not down). The photo itself never moves or scales. Phones: a smaller corner, and the navy
stays below the shirt design. */
.hero-lights, .hero-lights > span { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-lights { z-index: 1; }
.hero-lights b { position: absolute; will-change: transform, opacity; }
.hl-gold { -webkit-mask: linear-gradient(270deg, #000 0%, #000 22%, transparent 38%), linear-gradient(180deg, #000 0%, #000 34%, transparent 58%); -webkit-mask-composite: source-in;
mask: linear-gradient(270deg, #000 0%, #000 22%, transparent 38%), linear-gradient(180deg, #000 0%, #000 34%, transparent 58%); mask-composite: intersect; }
.hl-gold b { right: -22%; top: -38%; width: 72%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
background: radial-gradient(closest-side, rgba(255,214,110,1), rgba(255,150,40,.7) 40%, rgba(255,120,40,0)); animation: sn-sun-bloom 9s ease-in-out infinite; }
.hl-navy b { left: -30%; bottom: -45%; width: 95%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(closest-side, rgba(4,30,66,.9), rgba(4,30,66,.55) 45%, rgba(4,30,66,0)); animation: sn-navy-breathe 11s ease-in-out infinite; }
@keyframes sn-sun-bloom { 0%, 100% { opacity: .45; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(-6%, 5%); } }
@keyframes sn-navy-breathe { 0%, 100% { opacity: .45; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(6%, -5%); } }
@media (prefers-reduced-motion: reduce) { .hero-lights b { animation: none; } }
/* The hero's gold button catches the light: a quick gleam crosses it once the copy has risen in,
then every 7s (on screen for under a second each time, so the navy label stays readable). */
.hero .btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.hero .btn-gold::after { content: ""; position: absolute; inset: -2px auto -2px 0; width: 46%; z-index: -1; pointer-events: none; translate: -160% 0; skew: -20deg;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 50%, transparent); animation: sn-gleam 7s ease-in-out 2.2s infinite; }
@keyframes sn-gleam { 0% { translate: -160% 0; } 13%, 100% { translate: 330% 0; } }
@media (prefers-reduced-motion: reduce) { .hero .btn-gold::after { animation: none; display: none; } }
.hero .copy { max-width: 720px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.015em; }
/* A soft navy halo under the white copy: where the headline runs over the yellow shirt on wider
screens it would otherwise fall below 3:1 contrast. Invisible over the dark fade. */
.hero h1, .hero .copy > p { text-shadow: 0 1px 2px rgba(4,30,66,.55), 0 2px 24px rgba(4,30,66,.75); }
.hero p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 1.1rem 0 1.9rem; color: rgba(255,255,255,.92); max-width: 50ch; }
.ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
/* Ribbon (theme, bolder) */
.ribbon { background: radial-gradient(circle at 15% 50%, rgba(75,146,219,.16) 0, rgba(75,146,219,0) 24%), linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-deep) 100%); color: var(--white); overflow: hidden; padding-block: .95rem; }
.ribbon-track { display: flex; width: max-content; animation: marquee 185s linear infinite; /* site.js sets the real pace: 80 px/s, 50 on phones */ }
.ribbon { position: relative; }
.ribbon-track > span, .ribbon .marquee-dup > span { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; }
.ribbon-track > span:not(.marquee-dup)::before, .ribbon .marquee-dup > span::before { content: "\2726"; color: var(--blue); margin-inline: 1.4rem; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.marquee-dup { display: contents; }
/* WCAG 2.2.2: moving content gets a pause control; hovering or focusing inside pauses it too. */
/* Small round pause / play icon (WCAG 2.2.2 needs it while the strip moves; 24px meets 2.5.8). */
.marquee-toggle { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: var(--navy); color: rgba(255,255,255,.85); cursor: pointer; transition: color .2s, border-color .2s; }
.marquee-toggle:hover, .marquee-toggle:focus-visible, .marquee-toggle[aria-pressed="true"] { color: var(--white); border-color: var(--white); }
.marquee-toggle svg { width: 11px; height: 11px; fill: currentColor; }
.marquee-toggle .mt-play, .marquee-toggle[aria-pressed="true"] .mt-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .mt-play { display: block; }
.ribbon .marquee-toggle { top: 50%; bottom: auto; transform: translateY(-50%); }
[data-marquee].is-paused .ribbon-track, [data-marquee].is-paused .seen-track, .seen-row:focus-within .seen-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Collections with real people */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--navy); color: var(--white); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat:hover img { transform: scale(1.04); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,13,28,.85) 0%, rgba(2,13,28,.15) 45%, rgba(2,13,28,0) 60%); }
.cat .txt { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.cat b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.05; }
.cat small { display: block; margin-top: .3rem; color: rgba(255,255,255,.82); font-size: 14px; }
.cat .go { display: inline-block; margin-top: .8rem; font-weight: 600; font-size: 14px; border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
/* Products, Homage-style */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.25rem; }
.card { display: block; }
.card .img { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--plate); }
.card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .img img { transform: scale(1.04); }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--white); color: var(--navy); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: .3rem .55rem; border-radius: 3px; }
.badge.gold { background: var(--gold); }
.quick { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; height: 44px; border: 0; border-radius: var(--radius); background: var(--navy); color: var(--white); font-family: var(--body); font-weight: 600; font-size: 14px; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s, background .15s; }
.card:hover .quick, .card:focus-within .quick { opacity: 1; transform: none; }
.quick:hover { background: var(--blue); }
.card .name { display: block; margin-top: .85rem; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.card .price { display: block; margin-top: .2rem; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Gameday feature (theme gradient, bigger) */
.football { position: relative; min-height: 560px; color: var(--white); overflow: hidden; display: flex; align-items: flex-end; }
.football > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.football::after { content: ""; position: absolute; inset: 0; background: linear-gradient(18deg, rgba(139,48,0,.96), rgba(199,73,0,.88) 25%, rgba(255,130,0,.58) 48%, rgba(255,130,0,.12) 70%, rgba(255,130,0,0) 82%); }
.football .wrap { position: relative; z-index: 2; padding-block: 0 4.5rem; }
.football h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.football p { font-size: 1.15rem; margin: .8rem 0 1.6rem; max-width: 46ch; }
.btn-navy-solid { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy-solid:hover { background: var(--navy-deep); }
/* Spotted around town */
.spotted { background: var(--mist); }
.wall { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: .8rem; }
.wall figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--line); }
.wall figure:first-child { grid-column: span 2; grid-row: span 2; }
.wall img { width: 100%; height: 100%; object-fit: cover; }
.wall-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; color: var(--muted); }
.wall-cta b { color: var(--navy); }
/* Pause / play for the changing photos (site.js), sitting in the line under the wall. */
.wall-cta .wall-toggle { position: relative; inset: auto; transform: none; margin-left: auto; background: transparent; color: var(--navy); border-color: var(--line); }
.wall-cta .wall-toggle:hover, .wall-cta .wall-toggle:focus-visible, .wall-cta .wall-toggle[aria-pressed="true"] { color: var(--navy); border-color: var(--navy); }
/* Range (theme) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.tile .img { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--plate); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.04); }
.tile span { display: block; margin-top: .8rem; font-weight: 700; font-size: 16px; }
/* Story with photo */
.story { background: var(--band); color: var(--white); }
.story .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(4rem, 8vw, 6.5rem); }
.story h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.story h2 mark { position: relative; z-index: 0; background: none; color: inherit; }
.story h2 mark::after { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.18em; bottom: .02em; height: .15em; background: var(--blue); border-radius: 2px; rotate: -1.4deg; }
.story p { color: rgba(255,255,255,.88); font-size: 1.08rem; margin: 1.4rem 0 2rem; max-width: 54ch; }
.story--text .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.story--text p { margin-inline: auto; }
.story .photo { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 600px; }
.story .photo img { width: 100%; height: 100%; object-fit: cover; }
.story .photo figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(4,30,66,.85); padding: .4rem .7rem; border-radius: 3px; font-size: 13px; font-weight: 600; }
/* Reviews */
.rev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.rev { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.rev .img { background: var(--plate); overflow: hidden; }
.rev .img img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.rev .txt { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.1rem 1.2rem; flex: 1; }
.stars { color: var(--gold-line); letter-spacing: .1em; font-size: 15px; }
.rev p { margin: 0; font-size: 15px; line-height: 1.5; }
.rev .who { margin-top: auto; font-weight: 700; font-size: 14px; }
.rev .who span { font-weight: 500; color: var(--muted); }
.rev .who a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rev .who a:hover { color: var(--navy); }
/* As seen on (theme) */
.seen { background: var(--navy); color: var(--white); padding-block: clamp(3.5rem, 7vw, 5rem); overflow: hidden; }
.seen .head h2 { color: var(--white); }
.seen .head h2 em { font-style: normal; color: var(--gold); }
.seen .head p { color: rgba(255,255,255,.74); }
.seen .eyebrow { color: var(--blue); }
.seen-row { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.seen-track { display: flex; width: max-content; gap: 16px; animation: marquee 90s linear infinite; padding-right: 16px; }
.seen-row:hover .seen-track { animation-play-state: paused; }
/* With JS (site.js) the row is a real scroller: swipe or drag it, and it drifts on its own. */
.seen-row.is-swipe { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.seen-row.is-swipe::-webkit-scrollbar { display: none; }
.seen-row.is-swipe .seen-track { animation: none; }
.seen-row.is-dragging { cursor: grabbing; }
.seen-row.is-swipe img { -webkit-user-drag: none; user-select: none; }
.seen-row.is-dragging * { pointer-events: none; }
/* Header row: pause/play and "Meet them all" on the right, level with the paragraph. */
.seen-actions { display: flex; align-items: center; gap: 16px; }
.seen-actions .marquee-toggle { position: relative; inset: auto; width: 32px; height: 32px; }
.seen-actions .marquee-toggle svg { width: 12px; height: 12px; }
.seen .more { color: var(--white); }
.seen .more:hover { color: var(--gold); }
/* Cards: the photo, then name and role under it (no box), like the product cards. */
.person { flex: 0 0 232px; margin: 0; }
.person .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #081a30; }
.person .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.person .cap { padding: 12px 2px 0; }
.person b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; }
.person small { display: block; margin-top: 4px; color: var(--blue-soft); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
/* Stats + quote (theme) */
.stats { text-align: center; }
.stat-row { display: flex; justify-content: center; gap: clamp(2rem, 9vw, 7rem); flex-wrap: wrap; }
.stat b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .6rem; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stats hr { border: 0; height: 2px; background: var(--gold-line); max-width: 760px; margin: 2.2rem auto; }
.stats blockquote { margin: 0 auto; max-width: 30ch; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; color: var(--navy); }
.stats cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* Proof strip (theme) */
.proof { background: radial-gradient(circle at 10% -70%, rgba(75,146,219,.32) 0%, rgba(75,146,219,0) 42%), linear-gradient(115deg, var(--navy) 0%, #0a365f 54%, var(--navy) 100%); color: var(--white); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-item { text-align: center; padding: 1.6rem 1rem; }
.proof-item + .proof-item { border-left: 1px solid rgba(255,255,255,.14); }
.proof-item i { display: block; width: 30px; height: 3px; margin: 0 auto .7rem; border-radius: 2px; background: linear-gradient(90deg, var(--gold) 50%, var(--blue) 50%); }
.proof-item b { display: block; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.proof-item span { font-size: 13.5px; color: rgba(235,244,252,.78); }
/* Footer (theme) */
footer.site { background: var(--navy-deep); color: var(--white); padding-block: 3.4rem 2.2rem; }
.f-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: start; }
.f-brand img { height: 74px; width: auto; }
.f-brand .f-tagline { margin: 0; color: var(--white); font-family: var(--display); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-size: clamp(1.6rem, 2.8vw, 2rem); margin-top: 1.1rem; }
.f-brand p { margin: .3rem 0 0; color: rgba(255,255,255,.72); }
.signup { background: var(--white); color: var(--ink); border-radius: 8px; padding: 1.4rem 1.5rem 1.5rem; }
.signup-kicker { margin: 0; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--blue-ink); }
.signup-title { margin: .2rem 0 .3rem; font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; color: var(--navy); }
.signup p:not(.signup-kicker) { margin: 0 0 1rem; font-size: 14px; color: var(--muted); }
.signup form { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup input { flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 .9rem; border: 1px solid #d5dbe3; border-radius: 6px; font: inherit; font-size: 15px; color: var(--ink); background: var(--white); }
.signup .btn { height: 48px; border-radius: 6px; }
.signup .ok { width: 100%; margin: .4rem 0 0; color: var(--navy); font-weight: 600; font-size: 14px; }
.f-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; margin-top: 2.8rem; }
.f-cols .f-h { margin: 0 0 .9rem; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-soft); }
.f-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.f-cols li a { font-size: 14px; color: rgba(255,255,255,.82); }
.f-cols li a:hover { color: var(--blue-soft); }
.social { display: flex; gap: .9rem; }
.social a { display: grid; place-items: center; width: 28px; height: 28px; margin: -3px; }
.social a:hover { color: var(--blue-soft); }
.social svg { width: 22px; height: 22px; }
/* Local knowledge: a card of its own in the footer, gold kicker between rules, the fact big in
the display face, a gold "Next verse" button. */
.lore { position: relative; margin-top: 2.8rem; padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.05); text-align: center; overflow: hidden; }
.lore::before { content: ""; position: absolute; top: 0; left: 50%; width: 72px; height: 3px; transform: translateX(-50%); border-radius: 0 0 3px 3px; background: var(--gold); }
.lore .lore-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; max-width: none; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .22em; color: var(--gold); }
.lore .lore-kicker::before, .lore .lore-kicker::after { content: ""; width: 28px; height: 1px; background: rgba(255,184,28,.5); }
.lore p { margin: .9rem auto 1.4rem; max-width: 40ch; font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--white); transition: opacity .2s; }
.lore button { background: var(--gold); border: 1px solid var(--gold); color: var(--navy); border-radius: 999px; padding: .6rem 1.2rem; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .14em; cursor: pointer; transition: background .15s, color .15s; }
.lore button:hover { background: transparent; color: var(--gold); }
.f-legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.13); font-size: 12.5px; color: rgba(255,255,255,.65); }
.f-legal nav { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; }
.f-legal nav a { display: inline-block; padding-block: 4px; }
.f-legal nav a:hover { color: var(--white); }
.pay { display: flex; flex-wrap: wrap; gap: 5px; }
.pay span { height: 20px; padding: 0 6px; border-radius: 3px; background: var(--white); color: var(--navy); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.promo { position: fixed; right: calc(25px + env(safe-area-inset-right, 0px)); bottom: calc(25px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: .7rem; background: var(--gold); color: var(--ink); border-radius: 7px; padding: .75rem .9rem .75rem 1.1rem; font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.45); }
.promo[hidden] { display: none; }
#signup { scroll-margin-top: 110px; }
.promo button { min-width: 28px; min-height: 28px; background: none; border: 0; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; padding: .1rem .2rem; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem .5rem; background: var(--navy); color: var(--white); border-radius: 6px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); transform: translate(-50%, 160%); transition: transform .3s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); }
.toast img { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; background: var(--white); }
@media (max-width: 1180px) { .tools .search-pill { width: 170px; } .menu { gap: 1.2rem; } }
@media (max-width: 1000px) {
.menu, .tools .search-pill { display: none; }
.burger, .search-link { display: grid; }
.nav { gap: .8rem; }
.cats, .tiles, .rev-grid { grid-template-columns: repeat(2, 1fr); }
.wall { grid-template-columns: repeat(3, 1fr); }
.story .wrap { grid-template-columns: 1fr; }
.story .photo { max-height: 460px; aspect-ratio: 4 / 3; }
.f-top { grid-template-columns: 1fr; }
.f-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) { .products { grid-template-columns: repeat(2, 1fr); } } /* tablets keep 4 across */
/* Phones and tablets: the photo on top (her face and the shirt design both in frame, faded into the
navy at its foot), the copy below it on navy, so no text ever sits on the face or the shirt. */
@media (max-width: 900px) {
.hero { display: block; min-height: 0; }
.hero > img { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; object-position: 55% 45%; -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }
.hero::after { content: none; }
.hero .wrap { margin-top: -3.2rem; padding-bottom: 3rem; }
.hl-gold { -webkit-mask: linear-gradient(270deg, #000 0%, #000 14%, transparent 30%), linear-gradient(180deg, #000 0%, #000 10%, transparent 20%); -webkit-mask-composite: source-in;
mask: linear-gradient(270deg, #000 0%, #000 14%, transparent 30%), linear-gradient(180deg, #000 0%, #000 10%, transparent 20%); mask-composite: intersect; }
.hl-navy { display: none; }
}
@media (max-width: 600px) {
.hero > img { aspect-ratio: 4 / 5; }
.cats { gap: .7rem; }
.cat .txt { left: 14px; right: 14px; bottom: 12px; }
.cat small { display: none; }
.products { gap: 1.6rem .8rem; }
.quick { opacity: 1; transform: none; height: 38px; font-size: 13px; }
.wall { grid-template-columns: repeat(2, 1fr); }
.wall figure:nth-child(n+12) { display: none; }
.rev-grid { grid-template-columns: 1fr; }
.football { min-height: 480px; }
.proof-grid { grid-template-columns: 1fr; }
.proof-item + .proof-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
.person { flex-basis: 180px; }
.tools .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.ribbon, .seen-row { overflow-x: auto; }
.marquee-toggle, .ribbon .marquee-dup, .seen-row:not(.is-swipe) .marquee-dup { display: none; }
.cat:hover img, .card:hover .img img, .tile:hover img, .wall figure:hover img { transform: none; }
}
/* ---- Store pages (product, collection, content) ---- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 1.4rem; }
.crumbs a:hover { color: var(--navy); }
.card .img { display: block; }
.card .price s { color: var(--muted); margin-right: .3rem; }
.plp .head h1, .cms h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--navy); }
.plp .intro { color: var(--muted); max-width: 60ch; margin-top: .6rem; }
.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2.6rem; }
.pager a { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.pager a[aria-current] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.empty { color: var(--muted); }
.empty a { color: var(--navy); border-bottom: 2px solid var(--gold); }
.pdp-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.main-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--plate); }
.main-img img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .7rem; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: var(--plate); cursor: pointer; aspect-ratio: 1; }
.thumb.on { border-color: var(--navy); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.buy { position: sticky; top: 96px; }
.buy h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--navy); }
.pdp-price { font-size: 1.4rem; font-weight: 600; margin: .7rem 0 1.4rem; }
.sizes { border: 0; padding: 0; margin: 0 0 1.4rem; }
.sizes legend { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.size { display: inline-block; margin: 0 .4rem .4rem 0; }
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size span { display: grid; place-items: center; min-width: 52px; height: 46px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; cursor: pointer; }
.size input:checked + span { background: var(--navy); color: var(--white); border-color: var(--navy); }
.size input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.size.out span { color: #9aa6b5; text-decoration: line-through; cursor: not-allowed; }
.add-btn { width: 100%; height: 56px; font-size: 16px; }
.add-btn:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.perks { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; gap: .45rem; font-size: 14.5px; color: var(--muted); }
.perks li::before { content: "✓"; color: var(--blue); font-weight: 700; margin-right: .5rem; }
.desc, .rte { line-height: 1.7; }
.desc img, .rte img { height: auto; }
.cms .wrap { max-width: 820px; }
.cms .rte { margin-top: 1.6rem; }
.cms .rte a { color: var(--blue-ink); text-decoration: underline; }
.notfound .ctas { margin-top: 1.6rem; }
.notfound p { color: var(--muted); }
@media (max-width: 900px) {
.pdp-grid { grid-template-columns: 1fr; }
.buy { position: static; }
}
.search-form { display: flex; gap: .6rem; margin-bottom: 2rem; max-width: 620px; }
.search-form input { flex: 1; min-width: 0; height: 50px; padding: 0 1rem; border: 1px solid #c9d2de; border-radius: var(--radius); font: inherit; font-size: 16px; }
/* Shop the City: homepage band (templates/home.php) and the product page's "Find it on the map"
link (templates/product.php). The map page itself is styled in places.css. */
.city-band { padding-top: 0; }
.city-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; overflow: hidden; border-radius: 6px; background: var(--band); color: var(--white); }
.city-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 4vw, 3.4rem); }
.city-copy .eyebrow { color: var(--gold); }
.city-copy h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; }
.city-copy p { margin: .9rem 0 1.6rem; color: rgba(255,255,255,.82); }
.city-map { position: relative; min-height: 260px; background: #041e42; }
.city-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; transition: transform .5s; }
.city-card:hover .city-map img { transform: scale(1.03); }
.city-card:hover .btn-gold { background: #ffc94d; border-color: #ffc94d; }
.city-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.city-count { position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--navy); font: 700 13px var(--display); letter-spacing: .06em; }
@media (max-width: 800px) { .city-card { grid-template-columns: 1fr; } .city-map { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .city-map img { transition: none; } }
.pd-place { display: inline-flex; align-items: center; gap: 12px; margin-top: 1.4rem; padding: 12px 18px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); font-weight: 600; transition: border-color .15s, background .15s; }
.pd-place:hover { border-color: var(--navy); background: var(--mist); }
.pd-place svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--gold); color: var(--navy); }
.pd-place small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
/* Homepage "Nashville shirts, made here" (config/seo.php home_made_here). */
.made-here .head p { max-width: 70ch; }
.made-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 28px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.made-links a { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.made-links span { display: block; color: var(--muted); font-size: .95rem; }
/* Homepage game-day strip (App\GameDays::storefront) */
.gameday { background: var(--navy); color: #fff; }
.gameday .eyebrow { color: var(--gold); }
.gameday h2 { color: #fff; }
.gameday .head p { color: rgba(255,255,255,.8); }
.gameday .more { color: var(--gold); }
.gameday-more { margin: 18px 0 0; }
.gameday-more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gameday .pc-name, .gameday .pc-name a, .gameday .pc-price, .gameday .pc-now { color: #fff; }
.gameday .pc-price s, .gameday .pc-rating, .gameday .pc-stock { color: rgba(255,255,255,.75); }
/* ---- Sport themes (config/teams.php 'theme'; App\GameDays) -------------------------------------
Colors and a pattern per sport, never a logo. Used on the sport's collection page, /game-days
and the homepage game-day strip.
--th-a accent fill --th-ink text on the accent fill
--th-text accent text on white --th-onnavy accent text on navy
--th-trim pattern for a thin band --th-big pattern for a big panel
--th-base panel color (navy unless the sport's colors say otherwise) --th-on text on it
--th-onnavy accent text on the panel (named before panels could be anything but navy)
Orange & White never uses navy (white panels, Smokey gray text); West End is black and gold. */
.sn-theme--checker {
--th-base: #fff; --th-on: #3a3a3a; --th-on-soft: #58595b; --th-badge: #ff8200; --th-badge-ring: #fff;
--th-a: #ff8200; --th-ink: #2b2b2b; --th-text: #b85c00; --th-onnavy: #b85c00;
--th-trim: repeating-conic-gradient(#ff8200 0 25%, #fff 0 50%) 0 0 / 18px 18px;
--th-big: repeating-conic-gradient(#ff8200 0 25%, #fff 0 50%) 0 0 / 72px 72px;
}
.sn-theme--ice {
--th-a: #ffb81c; --th-ink: #041e42; --th-text: #0b4ea2; --th-onnavy: #ffb81c;
--th-trim: #ffb81c;
--th-big: linear-gradient(90deg, transparent 0 calc(60% - 5px), #c8102e calc(60% - 5px) calc(60% + 5px), transparent 0),
radial-gradient(circle at 60% 50%, transparent 0 110px, #c8102e 110px 114px, transparent 115px),
linear-gradient(90deg, transparent 0 34%, #0b4ea2 34% calc(34% + 10px), transparent 0 86%, #0b4ea2 86% calc(86% + 10px), transparent 0),
linear-gradient(180deg, #f4f9fd, #dceaf5);
}
.sn-theme--twotone {
--th-a: #4b92db; --th-ink: #041e42; --th-text: #1f6fbf; --th-onnavy: #7fb3e8;
--th-trim: #4b92db;
--th-big: repeating-linear-gradient(135deg, #4b92db 0 48px, #0c2340 48px 96px);
}
.sn-theme--westend {
--th-base: #000; --th-on: #fff; --th-on-soft: rgba(255,255,255,.8);
--th-a: #cfae70; --th-ink: #000; --th-text: #8a6d2f; --th-onnavy: #cfae70;
--th-trim: #cfae70;
--th-big: repeating-linear-gradient(90deg, #111 0 30px, #cfae70 30px 33px);
}
.sn-theme--pitch {
--th-a: #ece83a; --th-ink: #1f1646; --th-text: #2f7d3a; --th-onnavy: #ece83a;
--th-trim: #ece83a;
--th-big: radial-gradient(circle at 60% 50%, transparent 0 96px, #fff 96px 100px, transparent 101px),
linear-gradient(90deg, transparent 0 calc(60% - 2px), #fff calc(60% - 2px) calc(60% + 2px), transparent 0),
repeating-linear-gradient(90deg, #2f7d3a 0 60px, #3b9147 60px 120px);
}
.sn-theme--ballpark {
--th-a: #c8102e; --th-ink: #fff; --th-text: #c8102e; --th-onnavy: #f4eedc;
--th-trim: #c8102e;
--th-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M-10 20 Q60 60 130 20M-10 100 Q60 60 130 100' fill='none' stroke='%23c8102e' stroke-width='3' stroke-dasharray='8 6'/%3E%3C/svg%3E") #f4eedc;
}
.sn-trim { height: 18px; background: var(--th-trim); }
/* Homepage game-day strip: one panel per game, themed; with several, tabs that rotate (site.js) */
.gameday { padding-top: 0; position: relative; }
.gameday-panel { position: relative; overflow: hidden; }
.gameday-panel > .wrap { position: relative; z-index: 1; }
.gameday-panel > .sn-trim { margin-bottom: 0; }
.gameday-panel + .gameday-panel { margin-top: clamp(40px, 6vw, 64px); }
.gameday-panel[class*="sn-theme--"] .eyebrow, .gameday-panel[class*="sn-theme--"] .more { color: var(--th-onnavy); }
.gameday-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; padding-bottom: 14px; }
.gameday-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: transparent; color: #fff; font: 600 14px/1.2 var(--body, inherit); cursor: pointer; }
.gameday-tabs [role="tab"] span:not(.gameday-tab-swatch) { color: rgba(255,255,255,.75); font-weight: 400; }
.gameday-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.gameday-tabs [role="tab"][aria-selected="true"] span:not(.gameday-tab-swatch) { color: var(--navy); }
.gameday-tabs [role="tab"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gameday-tab-swatch { width: 16px; height: 16px; border-radius: 4px; background: var(--th-trim); box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.gameday-progress { height: 3px; background: rgba(255,255,255,.15); }
.gameday-progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.gameday.is-rotating .gameday-progress i { animation: gameday-progress var(--gd-ms, 8000ms) linear; }
@keyframes gameday-progress { to { width: 100%; } }
.announce-msg { transition: opacity .25s; }
.announce-msg.is-fading { opacity: 0; }
/* Sport marks: the original Shopify theme's drifting collection-hero icons (Material Symbols
sports_hockey / sports_football, so-commerce.css). Sports without one show only the pick badge. */
.sn-theme--ice { --th-mark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xMTAuNzctMTk1LjM4di01OC40N3EwLTEzLjE1IDguODEtMjEuOTYgOC44LTguODEgMjEuOTYtOC44MWgzMy44NHY4OS4yNGgtNjQuNjFabTEwNC42MSAwdi04OS4yNGgxNjcuN2w0MC4xNS05MC4zIDI3LjA4IDU4LjQ2LTQ0Ljc3IDk5LjA4cS01Ljc3IDExLjc2LTEzLjg1IDE2Ljg4LTguMDcgNS4xMi0yMi4xNSA1LjEySDIxNS4zOFptNTY5LjI0IDB2LTg5LjI0aDMzLjg0cTEzLjE2IDAgMjEuOTYgOC44MSA4LjgxIDguODEgOC44MSAyMS45NnY1OC40N2gtNjQuNjFabS00MCAwSDU5MC40NnEtMTMuMzEgMC0yMS43Ny01LjEyLTguNDYtNS4xMi0xNC4yMy0xNi44OEwzMDkuMzgtNzY0LjYyaDU0TDQ4MC01MDIuNzdsMTE2LjYyLTI2MS44NWg1NGwtMTQzLjU0IDMyMS43IDY5Ljg0IDE1OC4zaDE2Ny43djg5LjI0WiIvPjwvc3ZnPg=="); }
.sn-theme--twotone, .sn-theme--westend { --th-mark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMy4wMiAxNS42MmMtLjA4IDIuNDIuMzIgNC4zNC42NyA0LjY5czIuMjguNzYgNC42OS42N2wtNS4zNi01LjM2ek0xMy4wOCAzLjI4Yy0yLjMzLjQyLTQuNzkgMS4zNC02LjYyIDMuMThzLTIuNzYgNC4yOS0zLjE4IDYuNjJsNy42MyA3LjYzYzIuMzQtLjQxIDQuNzktMS4zNCA2LjYyLTMuMThzMi43Ni00LjI5IDMuMTgtNi42MmwtNy42My03LjYzek05LjkgMTUuNWwtMS40LTEuNGw1LjYtNS42bDEuNCAxLjRsLTUuNiA1LjZ6bTExLjA4LTcuMTJjLjA4LTIuNDItLjMyLTQuMzQtLjY3LTQuNjlzLTIuMjgtLjc2LTQuNjktLjY3bDUuMzYgNS4zNnoiLz48L3N2Zz4="); }
.sn-mark { position: absolute; z-index: 0; top: 50%; right: clamp(28px, 8vw, 120px); width: clamp(190px, 26vw, 360px); aspect-ratio: 1;
background: #fff; opacity: .11; pointer-events: none; transform: translateY(-50%) rotate(8deg);
-webkit-mask: var(--th-mark) center / contain no-repeat; mask: var(--th-mark) center / contain no-repeat;
animation: sn-mark-drift 6.8s ease-in-out infinite alternate; }
.sn-theme--checker .sn-mark, .sn-theme--pitch .sn-mark, .sn-theme--ballpark .sn-mark { display: none; }
@keyframes sn-mark-drift {
from { transform: translateY(-50%) rotate(8deg) scale(.96); }
to { transform: translateY(calc(-50% - 16px)) rotate(2deg) scale(1.055); }
}
@media (max-width: 740px) { .sn-mark { right: -34px; width: 220px; opacity: .07; } }
@keyframes sn-mark-drift-top { /* small and even around its spot, so it stays centered on the capitals */
from { transform: translateY(5px) rotate(8deg) scale(.97); }
to { transform: translateY(-5px) rotate(3deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .sn-mark { animation: none; } }
/* Orange & White: the checkerboard end zone on the right of its panel, like its collection page */
.gameday-panel.sn-theme--checker::before { content: ""; position: absolute; top: 18px; right: 0; bottom: 0; width: 42%; background: var(--th-big); opacity: .85;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%); animation: sn-checker-drift 9s linear infinite; }
@keyframes sn-checker-drift { to { background-position: 72px 72px; } }
@media (prefers-reduced-motion: reduce) { .gameday-panel.sn-theme--checker::before { animation: none; } }
/* Header Sports menu (templates/layout.php, App\GameDays::menu): a disclosure, like the old
Shopify mega menu's sport icons. Opens on click (and hover with a mouse); Esc or a click away closes. */
.menu-drop { position: relative; display: flex; }
.menu-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: .4rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; cursor: pointer;
font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: border-color .15s; }
.menu-drop-btn:hover, .menu-drop-btn.is-current, .menu-drop-btn[aria-expanded="true"] { border-color: var(--gold); }
.menu-drop-btn svg { transition: transform .15s; }
.menu-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 60; width: 520px; padding: 14px; border-radius: 14px; background: #fff; color: var(--navy); box-shadow: 0 18px 50px rgba(4,30,66,.28); }
.menu-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-panel a, .mnav-sports a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.menu-panel ul a:hover, .menu-panel ul a:focus-visible { background: #eef3f9; }
.menu-panel a { border: 0; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 15px; white-space: normal; }
.menu-panel-txt { display: grid; gap: 2px; line-height: 1.2; }
.menu-panel-txt b { font-weight: 700; }
.menu-panel-txt small { font-size: 12.5px; color: #4d5d73; }
.menu-panel-txt small.is-today { color: #b85c00; font-weight: 700; }
.menu-panel-all { justify-content: center; margin-top: 8px; padding: 10px !important; border-top: 1px solid #e3e8ef !important; border-radius: 0 0 8px 8px !important; font-weight: 700; }
.sn-menu-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--th-base, var(--navy)); overflow: hidden; }
.sn-menu-ico::after { content: ""; position: absolute; inset: 7px; background: var(--th-onnavy, var(--gold)); -webkit-mask: var(--th-mark) center / contain no-repeat; mask: var(--th-mark) center / contain no-repeat; }
.sn-menu-ico.sn-theme--checker { background: repeating-conic-gradient(#ff8200 0 25%, #fff 0 50%) 0 0 / 13px 13px; box-shadow: inset 0 0 0 1px #ff8200; }
.sn-menu-ico.sn-theme--checker::after { content: none; }
.sn-menu-ico.sn-theme--ballpark { background: #f4eedc; }
.sn-menu-ico.sn-theme--ballpark::after { background: #c8102e; }
/* Phone menu: Sports opens in place */
.mnav-sports summary { list-style: none; cursor: pointer; }
.mnav-sports summary::-webkit-details-marker { display: none; }
/* The same chevron as the desktop Shop / Sports buttons, turning over when open. */
.mnav-sports summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .15s, translate .15s; }
.mnav-sports[open] summary::after { rotate: 225deg; translate: 0 2px; }
.mnav-sports ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 2px; }
.mnav .mnav-sports a { font-family: var(--body, inherit); font-weight: 400; font-size: 16px; padding: 8px 0; border-bottom: 0; }
.mnav-sports .menu-panel-txt small { color: rgba(255,255,255,.7); }
.mnav-sports .sn-menu-ico { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.nav > .logo { flex: none; min-width: 42px; }
.nav > .logo img { width: 42px; max-width: none; }
@media (max-width: 1240px) { .tools .search-pill { width: 150px; } .menu { gap: 1.1rem; } }
@media (max-width: 1120px) { .tools .search-pill { width: 118px; } .menu { gap: .9rem; } .menu a, .menu-drop-btn { letter-spacing: .07em; } }
/* Smallest phones: logo + 3 icons + bag don't fit in the default gutters. */
@media (max-width: 360px) {
.nav { grid-template-columns: auto 1fr; gap: .5rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tools { gap: 4px; }
.bag-btn { padding-inline: 10px; }
}
/* Sport badge: the So Nashville pick with the sport's color as its border (public/assets/img/pick/:
pick-shape = silhouette, pick-ring = the logo's own outline, pick-ring-small = a little heavier
for small badges, pick-art = the lettering and stars; split from logo-white.gif). ; size with --sz. */
.sn-theme--ice { --th-ring: #ffb81c; }
.sn-theme--twotone { --th-ring: #4b92db; }
.sn-theme--checker { --th-ring: #ff8200; }
.sn-theme--westend { --th-ring: #cfae70; }
.sn-theme--pitch { --th-ring: #ece83a; }
.sn-theme--ballpark { --th-ring: #c8102e; }
.sn-badge { position: relative; display: inline-block; flex: none; width: var(--sz, 40px); height: var(--sz, 40px); background: var(--th-badge, var(--th-base, var(--navy)));
-webkit-mask: url("/assets/img/pick/pick-shape.png") center / contain no-repeat; mask: url("/assets/img/pick/pick-shape.png") center / contain no-repeat; }
.sn-badge::before, .sn-badge::after { content: ""; position: absolute; inset: 0; }
.sn-badge::before { background: var(--th-badge-ring, var(--th-ring, var(--gold))); -webkit-mask: url("/assets/img/pick/pick-ring.png") center / contain no-repeat; mask: url("/assets/img/pick/pick-ring.png") center / contain no-repeat; }
/* Small badges (menu, tabs, chips): a slightly heavier border so the color still reads */
.menu-panel .sn-badge::before, .mnav-sports .sn-badge::before, .gameday-tabs .sn-badge::before, .gd-next .sn-badge::before, .cl-game .sn-badge::before {
-webkit-mask-image: url("/assets/img/pick/pick-ring-small.png"); mask-image: url("/assets/img/pick/pick-ring-small.png"); }
.sn-badge::after { background: #fff; -webkit-mask: url("/assets/img/pick/pick-art.png") center / contain no-repeat; mask: url("/assets/img/pick/pick-art.png") center / contain no-repeat; }
/* Where it shows */
.menu-panel .sn-badge, .mnav-sports .sn-badge { --sz: 42px; }
.gameday-tabs .sn-badge { --sz: 22px; }
/* Solid trims are a thin line in the sport's color; only the checkerboard gets the wide band. */
.sn-trim { height: 6px; }
.sn-theme--checker .sn-trim, .sn-trim.sn-theme--checker { height: 18px; }
/* ---- Motion -------------------------------------------------------------------------------
Card → product photo (site.js), cards rising in on scroll, the game-day countdown pulse.
All off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
header.site { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(pd-photo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .75, .2, 1); }
::view-transition-old(pd-photo), ::view-transition-new(pd-photo) { height: 100%; object-fit: contain; } /* never crop mid-morph */
/* Product cards rise into place as they scroll in. The card moves as a whole and the photo is
never zoomed, so no face or design gets cropped (unlike a zoom inside the frame). */
@supports (animation-timeline: view()) {
main .pc { animation: sn-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; /* done as soon as the whole card is on screen */ }
}
.sn-count.is-live::before { animation: sn-pulse 1.6s ease-out 3; /* three beats, then still (WCAG 2.2.2) */ }
}
@keyframes sn-rise { from { opacity: 0; translate: 0 64px; scale: .94; } to { opacity: 1; translate: none; scale: 1; } }
@keyframes sn-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.sn-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-count.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.gameday-panel[class*="sn-theme--"] .sn-count.is-live::before { background: var(--th-ring); color: var(--th-ring); }
.bag-btn.is-bump { animation: sn-bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sn-bump { 40% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .bag-btn.is-bump { animation: none; } }
/* Homepage game-day clock (sn_clock). Sport color on navy; plain gold without a sport look. */
.gd-clock { --c: var(--th-onnavy, var(--gold)); display: flex; flex-direction: column; gap: 6px; margin-left: auto; color: #fff; }
.gd-clock__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.gd-clock__digits { display: flex; align-items: flex-start; gap: 6px; font-family: Jost, sans-serif; font-variant-numeric: tabular-nums; }
.gd-clock__u { display: flex; flex-direction: column; align-items: center; min-width: 2.1ch; padding: 8px 10px 6px; border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: inset 0 -3px 0 var(--c); }
.gd-clock__u b { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1; }
.gd-clock__u i { margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.gd-clock__sep { padding-top: 8px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1; opacity: .5; }
.gd-clock__live { display: none; align-items: center; gap: 12px; font-family: Jost, sans-serif; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1; }
.gd-clock__live::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); color: var(--c); }
.gd-clock.is-live .gd-clock__digits, .gd-clock.is-live .gd-clock__label { display: none; }
.gd-clock.is-live .gd-clock__live { display: flex; }
.gd-clock[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.gd-clock__live::before { animation: sn-pulse-big 1.6s ease-out 3; }
}
@keyframes sn-pulse-big { 0% { box-shadow: 0 0 0 0 currentColor; } 80%, 100% { box-shadow: 0 0 0 14px transparent; } }
@media (max-width: 720px) { .gd-clock { margin-left: 0; width: 100%; } }
/* ---- Homepage motion ----------------------------------------------------------------------
Hero copy comes in word by word on load; sections, tiles and photos rise in as they scroll
into view (each tile a beat after the one before); the "Our story" underline draws itself;
stats count up (site.js). Photos move as whole tiles and are never zoomed (no cropping).
All of it is off for reduced motion, and without scroll-driven animation support things
just appear. */
.hero h1 .hw { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.hero .eyebrow, .hero h1 .hw, .hero p, .hero .ctas { animation: sn-hero-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero .eyebrow { animation-delay: .1s; }
.hero h1 .hw { animation-delay: calc(.22s + var(--i, 0) * .07s); }
.hero p { animation-delay: .75s; }
.hero .ctas { animation-delay: .9s; }
@supports (animation-timeline: view()) {
.sec > .wrap > .head, .cats > *, .wall > *, .football .wrap > *, .story .wrap > *, .stat,
.stats blockquote, .made-links li, .proof-item, .seen > .wrap {
animation: sn-rise linear both;
animation-timeline: view();
animation-range: entry calc(var(--d, 0) * 12%) entry 100%; /* fully in place once fully on screen; tiles in a row start a beat apart */
}
:is(.cats, .wall, .stat-row, .proof-grid, .made-links) > :nth-child(4n+2) { --d: 1; }
:is(.cats, .wall, .stat-row, .proof-grid, .made-links) > :nth-child(4n+3) { --d: 2; }
:is(.cats, .wall, .stat-row, .proof-grid, .made-links) > :nth-child(4n+4) { --d: 3; }
}
}
@keyframes sn-hero-in { from { opacity: 0; translate: 0 .55em; } to { opacity: 1; translate: none; } }
/* "you actually know." underline: site.js adds .is-armed (hidden), then .is-drawn when the heading
scrolls into view, and the line draws in left to right like a marker stroke. The tilt uses the
rotate property, not transform: transform applies before scale, so a scaled-down line would
tilt steeply and flatten out as it grew. Without JavaScript, or with reduced motion, it's simply there. */
.story h2 mark::after { transform-origin: left center; }
.story h2 mark.is-armed::after { scale: 0 1; }
.story h2 mark.is-drawn::after { animation: sn-underline .75s cubic-bezier(.3, .7, .25, 1) .1s both; }
@keyframes sn-underline { from { scale: 0 1; } to { scale: 1 1; } }
/* When the phrase wraps (phones), a positioned line can't follow it onto the second line, so
site.js adds .is-wrapped and each line gets its own flat underline from the background. */
.story h2 mark.is-wrapped::after { display: none; }
.story h2 mark.is-wrapped { background: linear-gradient(var(--blue), var(--blue)) no-repeat left 0 bottom .02em / 100% .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.story h2 mark.is-wrapped.is-armed { background-size: 0% .15em; }
.story h2 mark.is-wrapped.is-drawn { animation: sn-underline-lines .75s cubic-bezier(.3, .7, .25, 1) .1s both; }
@keyframes sn-underline-lines { from { background-size: 0% .15em; } to { background-size: 100% .15em; } }
@media (prefers-reduced-motion: reduce) { .story h2 mark.is-drawn::after, .story h2 mark.is-wrapped.is-drawn { animation: none; } }
/* ---- Sport panels in the sport's own base color (--th-base / --th-on) -----------------------
The homepage game-day strip is navy; a panel for a sport with another base (Orange & White:
white, West End: black) recolors itself and, while it's the one showing, the strip around it. */
.gameday-panel[class*="sn-theme--"] { color: var(--th-on, #fff); }
.gameday-panel[class*="sn-theme--"] h2, .gameday-panel[class*="sn-theme--"] .pc-name, .gameday-panel[class*="sn-theme--"] .pc-name a,
.gameday-panel[class*="sn-theme--"] .pc-price, .gameday-panel[class*="sn-theme--"] .pc-now, .gameday-panel[class*="sn-theme--"] .gameday-more a { color: var(--th-on, #fff); }
.gameday-panel[class*="sn-theme--"] .head p, .gameday-panel[class*="sn-theme--"] .pc-price s, .gameday-panel[class*="sn-theme--"] .pc-rating,
.gameday-panel[class*="sn-theme--"] .pc-stock { color: var(--th-on-soft, rgba(255,255,255,.8)); }
.gameday-panel[class*="sn-theme--"] .gd-clock { color: var(--th-on, #fff); }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) { background: #fff; }
.gameday:has(> .gameday-panel.sn-theme--westend:not([hidden])) { background: #000; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-tabs [role="tab"] { border-color: #d6d6d6; color: #3a3a3a; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-tabs [role="tab"] span:not(.gameday-tab-swatch) { color: #58595b; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-tabs [role="tab"][aria-selected="true"] { background: #ff8200; border-color: #ff8200; color: #2b2b2b; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-tabs [role="tab"][aria-selected="true"] span:not(.gameday-tab-swatch) { color: #2b2b2b; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-progress { background: #eee; }
.gameday:has(> .gameday-panel.sn-theme--checker:not([hidden])) .gameday-progress i { background: #ff8200; }
.gameday-panel.sn-theme--checker .gd-clock__u { background: #fff4e8; }
.gameday-panel.sn-theme--westend .gd-clock__u { background: rgba(255,255,255,.1); }
/* Orange & White pick: orange with white lettering on white; reversed (white with orange
lettering and ring) where it sits on orange, like the selected tab. */
.gameday-tabs [role="tab"][aria-selected="true"] .sn-badge.sn-theme--checker,
.gameday-tabs [role="tab"].sn-theme--checker[aria-selected="true"] .sn-badge { --th-badge: #fff; --th-badge-ring: #fff; }
.gameday-tabs [role="tab"][aria-selected="true"] .sn-badge.sn-theme--checker::after,
.gameday-tabs [role="tab"].sn-theme--checker[aria-selected="true"] .sn-badge::after { background: #ff8200; }
.gameday:has(> .gameday-panel.sn-theme--westend:not([hidden])) .gameday-tabs [role="tab"][aria-selected="true"] { background: #cfae70; border-color: #cfae70; color: #000; }
.gameday:has(> .gameday-panel.sn-theme--westend:not([hidden])) .gameday-tabs [role="tab"][aria-selected="true"] span:not(.gameday-tab-swatch) { color: #000; }
.gameday:has(> .gameday-panel.sn-theme--westend:not([hidden])) .gameday-progress i { background: #cfae70; }
/* ---- Homepage game day as a poster (templates/home.php, option D, Oct 2026) ---------------------
Two big lines ("Hockey" / "night.", the second in outline in the sport's color), the badge,
blurb, countdown and button on the right, and the shirts sitting on the poster's bottom edge
(the shelf turns white halfway down the cards). Line height leaves room for descenders, so the
two lines never touch. Colors come from the sport look: --th-on on the panel, --th-on-white on
the white shelf. */
.gameday { padding-bottom: 0; }
.sn-theme--checker { --th-on-white: #3a3a3a; }
.sn-theme--westend { --th-on-white: #000; }
/* Spotlight, desktop: badge + headline on one line across the width, then a bar under a thin rule:
countdown / "Game on" left, blurb, button right. Every row starts on the same left edge (the
.wrap content edge) and the button ends on the product grid's right edge. */
/* One gap, three places: eyebrow letters to the headline's capitals, the headline's descenders to
the rule, the rule to the bar. The headline's metrics (Jost 800: capitals start .164em below its
line top, descenders end .064em below its line bottom; the eyebrow's letters sit 2px above its
box bottom) turn that into margins at any size. */
.gd-poster { --gd-gap: clamp(18px, 2vw, 24px); position: relative; z-index: 1; padding-top: clamp(28px, 3.4vw, 44px); }
.gd-poster__title .eyebrow { display: block; margin: 0; line-height: 1; }
.gd-poster__title { position: relative; container-type: inline-size; }
/* The sport's mark (hockey sticks, football) right of the headline: exactly as tall as its capitals,
centered on them, its tip on the content edge. --gd-fs = the headline's size (site.js). The icon
fills .77 x .59 of its box, so the box is 1.18em; the headline keeps that ink width + 28px free. */
.gd-poster__title .sn-mark { display: none; }
@media (min-width: 761px) {
:is(.sn-theme--ice, .sn-theme--twotone, .sn-theme--westend) .gd-poster__title .sn-mark { --fs: var(--gd-fs, 8.6rem); display: block; top: auto; bottom: calc(var(--fs) * -.085); right: calc(var(--fs) * -.136);
width: calc(var(--fs) * 1.18); transform: rotate(8deg); animation-name: sn-mark-drift-top; }
:is(.sn-theme--ice, .sn-theme--twotone, .sn-theme--westend) .gd-poster__title { padding-right: calc(var(--gd-fs, 8.6rem) * .909 + 28px); }
}
/* Font size from the line length, so the widest line ("Wednesday football.") still fits without
JavaScript (.54em = the display face's average letter width, measured on every poster line,
2026-10-29). site.js then sizes it exactly: the line ends on the content edge. */
.gd-poster__big { position: relative; z-index: 1; margin: calc(var(--gd-gap) - var(--gd-fs, 8.6rem) * .164 - 2px) 0 0; font: 800 min(8.6rem, 100cqw / (var(--chars) * .54))/1 var(--display); letter-spacing: -.03em; text-indent: -.05em; white-space: nowrap; color: var(--th-on, #fff); }
.gd-poster__big br { display: none; }
/* Optical alignment (measured 2026-10-29): text-indent pulls the first letter's side space back to
the eyebrow's edge. The pick shape fills 414x479 of its 512 box (offset 49,16), so at .77em its
visible top meets the cap height (.70em), its point dips just below the baseline like a round
letter, and its visible left edge lands on the same line as the eyebrow and the bar. */
.gd-poster__big .sn-badge { --sz: .77em; margin: 0 .05em 0 -.024em; vertical-align: -.047em; }
/* The outlined word: filled with the panel color and stroked underneath it (paint-order), so the
variable font's overlapping letter parts don't show as lines crossing inside the letters; normal
letter spacing keeps neighbors like "h" and "t" from touching. */
.gd-poster__big em { display: inline-block; margin-top: .02em; font-style: normal; letter-spacing: .01em; color: var(--th-base, var(--navy));
-webkit-text-stroke: clamp(3px, .44vw, 6px) var(--th-ring, var(--gold)); paint-order: stroke fill; }
.gd-poster__bar { display: flex; align-items: center; gap: 16px clamp(24px, 3vw, 40px); margin-top: calc(var(--gd-gap) + var(--gd-fs, 8.6rem) * .064); padding-top: var(--gd-gap);
border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.gd-poster__bar .gd-clock { flex: none; margin: 0; }
.gd-poster__bar p { flex: 1 1 auto; max-width: 44ch; margin: 0; text-wrap: balance; font-size: 17px; line-height: 1.45; color: var(--th-on-soft, rgba(255,255,255,.85)); }
.gd-poster__bar .btn { flex: none; margin-left: auto; }
.gd-poster__btn { background: var(--th-a, var(--gold)); border-color: var(--th-a, var(--gold)); color: var(--th-ink, var(--navy)); }
.gd-poster__btn:hover { filter: brightness(.94); }
.gd-poster__shelf { margin-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(40px, 6vw, 64px); background: linear-gradient(180deg, transparent 0 clamp(90px, 10vw, 150px), #fff 0); } /* white from about halfway down the first row of cards, at any width */
.gd-poster__shelf .pc-ph { box-shadow: 0 12px 30px rgba(4,30,66,.2); }
.gameday-panel .gd-poster__shelf .pc-name, .gameday-panel .gd-poster__shelf .pc-name a, .gameday-panel .gd-poster__shelf .pc-price,
.gameday-panel .gd-poster__shelf .pc-now, .gameday-panel .gd-poster__shelf .gameday-more a { color: var(--th-on-white, var(--navy)); }
.gameday-panel .gd-poster__shelf .pc-price s, .gameday-panel .gd-poster__shelf .pc-rating, .gameday-panel .gd-poster__shelf .pc-stock { color: #5b6573; }
.gd-poster__shelf .gd-sched { background: #fff; color: var(--th-on-white, var(--navy)); border-color: rgba(4,30,66,.1); box-shadow: 0 12px 30px rgba(4,30,66,.2); }
.gameday .gd-poster__shelf .gd-sched .eyebrow { color: var(--th-text, var(--blue)); }
@media (max-width: 760px) {
/* Phones: two lines (the
), sized by the longer one; the header already shows the badge. */
.gd-poster__big { white-space: normal; font-size: min(4rem, 100cqw / (var(--line) * .62)); }
.gd-poster__big br { display: inline; }
.gd-poster__big .sn-badge { display: none; }
.gd-poster__bar { flex-direction: column; align-items: flex-start; }
.gd-poster__bar .btn { margin-left: 0; }
}
/* Orange & White poster: the checkered band at the top and the orange outline lettering carry
the look; the big board stays off so nothing sits on top of it. */
.gameday-panel.sn-theme--checker::before { content: none; }
/* Homepage game day: the other games this week under the spotlight (white, like the shelf above
it). Wraps on wide screens; scrolls sideways on phones instead of stacking. */
.gd-next { background: #fff; color: var(--navy); padding-bottom: clamp(36px, 5vw, 56px); }
.gameday-panel:has(+ .gd-next) .gd-poster__shelf { padding-bottom: clamp(24px, 3vw, 32px); }
.gd-next__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding-top: 18px; border-top: 1px solid rgba(4,30,66,.12); }
.gd-next__label { margin: 0; font: 700 12px/1 var(--body, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.gd-next__all { margin-left: auto; font-weight: 600; font-size: 14px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.gd-next__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gd-next__list a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border: 1px solid rgba(4,30,66,.16); border-radius: 999px; color: var(--navy); white-space: nowrap; font-size: 14px; text-decoration: none; }
.gd-next__list a:hover { border-color: var(--navy); }
.gd-next__list b { font-weight: 600; }
.gd-next__list a > span:last-child { color: #5b6573; }
.gd-next .sn-badge { --sz: 22px; }
@media (max-width: 720px) {
/* Phones: one game per row (never cut off at the edge); long names wrap inside the pill. */
.gd-next__list { flex-direction: column; }
.gd-next__list a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: normal; border-radius: 14px; padding: 9px 14px 9px 10px; }
}
/* Search-as-you-type under the header search boxes (search.js). */
.search-pill { position: relative; }
.sugg { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 12px 36px rgba(4, 30, 66, .25); padding: 6px; z-index: 60; text-align: left; }
.sugg[hidden] { display: none; }
.mnav .sugg { left: 0; right: auto; width: 100%; }
.sugg-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.sugg-opt[aria-selected="true"], .sugg-opt:hover { background: #eef2f8; }
.sugg-opt img, .sugg-noimg { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; background: #f2f4f7; flex: none; }
.sugg-t { display: flex; flex-direction: column; min-width: 0; }
.sugg-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg-t small { font-size: 12px; color: #4d5d73; }
.sugg-opt--coll b { font-weight: 600; font-size: 14px; }
.sugg-coll { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #4d5d73; background: #f2f4f7; border-radius: 99px; padding: 2px 8px; }
.sugg-all { justify-content: center; font-size: 13px; font-weight: 600; color: var(--navy); border-top: 1px solid #e4e8ef; border-radius: 0 0 8px 8px; margin-top: 4px; }
.sugg-note { margin: 4px 10px 6px; font-size: 12px; color: #4d5d73; }
.cl-search-colls { margin: .8rem 0 0; font-size: 14px; }
.cl-search-colls a { font-weight: 600; }
/* Homepage "Shop by vibe" chips (the full styles are in pages.css for /shop-by-vibe). */
#vibes { padding-top: 0; }
.vb-chips--home { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-chips--home a { padding: 10px 18px; border-radius: 99px; border: 1px solid #d5dce6; background: #fff; font-weight: 600; color: var(--navy); text-decoration: none; }
.vb-chips--home a:hover, .vb-chips--home a:focus-visible { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Touch screens: bigger tap areas for small links and buttons without changing how they look
(padding grows the target, the matching negative margin keeps the layout where it was). */
@media (pointer: coarse) {
.crumbs a, .cl-crumbs a, .hp-crumbs a, .pd-crumb a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.sl-shop, .hp-big, .pc-name a, a.pc-name { display: inline-block; padding-block: 10px; margin-block: -10px; }
.marquee-toggle::after { content: ""; position: absolute; inset: -10px; }
button[data-unit][data-unit-name] { min-height: 40px; padding-inline: 14px; }
}
/* ---- Header megamenus (templates/partials/megamenu.php, App\MegaMenu, config/menu.php) --------
Shop and Sports open a full-width white panel under the navy header with a gold rule, and the
page behind dims ("lights out": a clipped spread shadow, so nothing new is laid out). Columns
and photo tiles rise in one after another. site.js: hover intent, click, Esc, focus. */
.menu-drop.is-mega { position: static; }
.menu-panel.mega { top: 100%; left: 0; right: 0; width: auto; transform: none; padding: 0; border-radius: 0 0 20px 20px; border-top: 3px solid var(--gold);
box-shadow: 0 34px 60px -24px rgba(2,13,28,.55), 0 0 0 100vmax rgba(2,13,28,.42); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.menu-panel.mega::before { content: none; }
.mega-in { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(320px, 1.55fr) minmax(170px, 1fr) auto; gap: 44px; padding-block: 34px 32px; }
.mega--sports .mega-in { grid-template-columns: minmax(0, 1fr) auto; }
.mega-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-ink); white-space: nowrap; }
.mega-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.menu-panel.mega ul { grid-template-columns: none; gap: 2px; }
.menu .mega a { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 0; white-space: normal; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--navy); transition: color .15s, background-color .15s; }
.menu .mega ul a:hover { background: none; }
/* Underline that draws in from the left (picks and themes) */
.mega-col--picks .mega-lbl, .mega-col--theme .mega-lbl { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 3px no-repeat; transition: background-size .25s cubic-bezier(.2,.7,.2,1); padding-bottom: 2px; }
.mega-col--picks a:hover .mega-lbl, .mega-col--picks a:focus-visible .mega-lbl, .mega-col--picks a[aria-current] .mega-lbl,
.mega-col--theme a:hover .mega-lbl, .mega-col--theme a:focus-visible .mega-lbl, .mega-col--theme a[aria-current] .mega-lbl { background-size: 100% 3px; }
.menu .mega-col--picks a { white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.1; letter-spacing: -.01em; padding-block: 6px; }
.mega-col--picks a::after { content: "→"; font-family: var(--body); font-weight: 600; font-size: 18px; color: var(--gold-line); opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.mega-col--picks a:hover::after, .mega-col--picks a:focus-visible::after { opacity: 1; transform: none; }
.menu .mega-col--picks a[href="/collections/sale"] { color: #b0122b; }
.menu .mega-col--theme a { font-size: 15.5px; padding-block: 7px; }
.menu .mega-col--theme a:hover { color: var(--blue-ink); }
/* Shop by type: product photo chips, two columns */
.menu-panel.mega .mega-col--type ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.menu .mega-col--type a { padding: 6px 10px 6px 6px; border-radius: 14px; }
.menu .mega-col--type a:hover, .menu .mega-col--type a:focus-visible, .menu .mega-col--type a[aria-current] { background: var(--mist); }
.mega-thumb { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--plate); overflow: hidden; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--navy); }
.mega-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mega-col--type a:hover .mega-thumb img { transform: scale(1.1) rotate(-3deg); }
/* Sports: team cards with the next game */
.menu-panel.mega .mega-col--teams ul { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.menu .mega-col--teams a { gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, background-color .15s, transform .2s; }
.menu .mega-col--teams a:hover, .menu .mega-col--teams a:focus-visible, .menu .mega-col--teams a[aria-current] { border-color: var(--navy); background: var(--mist); }
.mega-col--teams .menu-panel-txt b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.005em; }
.mega-col--teams .menu-panel-txt small { font-weight: 500; }
/* Photo tiles: real customers in the shirts (focus points keep face and shirt in frame) */
.mega-feature { display: flex; gap: 16px; }
.mega-tile, .menu .mega a.mega-tile, .mnav .mnav-mega a.mega-tile { position: relative; display: block; flex: none; width: 200px; aspect-ratio: 4 / 5; padding: 0; border-radius: 16px; overflow: hidden; background: var(--navy); color: #fff; isolation: isolate; }
.mega-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mega-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,13,28,.92) 0, rgba(2,13,28,.5) 30%, rgba(2,13,28,0) 58%); }
.mega-tile:hover img, .mega-tile:focus-visible img { transform: scale(1.06); }
.mega-tile:focus-visible { outline-offset: 3px; }
.mega-tile-txt { position: absolute; left: 16px; right: 14px; bottom: 14px; z-index: 1; display: grid; gap: 3px; line-height: 1.1; }
.mega-tile-txt small { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mega-tile-txt b { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.01em; }
.mega-tile-cta { margin-top: 6px; font-size: 13px; font-weight: 600; justify-self: start; border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
.mega-foot { background: var(--mist); border-top: 1px solid var(--line); border-radius: 0 0 20px 20px; }
.mega-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 50px; }
.menu .mega-foot a { display: inline-flex; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.menu .mega-foot a:first-child { border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
.menu .mega-foot a:hover { color: var(--blue-ink); }
@media (max-width: 1240px) { .mega-in { gap: 30px; } .mega--shop .mega-tile:nth-child(n+2) { display: none; } }
@media (max-width: 1120px) { .mega-in { grid-template-columns: minmax(160px, .8fr) minmax(300px, 1.6fr) minmax(150px, 1fr) auto; gap: 24px; } .menu .mega a.mega-tile { width: 180px; } .menu .mega-col--picks a { font-size: 22px; } }
@media (prefers-reduced-motion: no-preference) {
.mega:not([hidden]) { animation: mega-fade .22s ease-out both; }
.mega:not([hidden]) :is(.mega-col, .mega-tile) { animation: mega-rise .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 50ms + 40ms); }
}
@keyframes mega-fade { from { opacity: 0; } }
@keyframes mega-rise { from { opacity: 0; transform: translateY(10px); } }
/* Phone menu: Shop opens in place, as chips (picks big, types with a product photo) */
.mnav-mega-in { display: grid; gap: 10px; padding: 4px 0 20px; }
.mnav-h { margin: 10px 0 0; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-soft); }
.mnav .mnav-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mnav .mnav-mega .mnav-chips a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.1; }
.mnav .mnav-mega .mnav-chips a[aria-current] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mnav .mnav-chips--picks { display: grid; grid-template-columns: 1fr 1fr; }
.mnav .mnav-chips--picks > li:only-child { grid-column: 1 / -1; }
.mnav .mnav-mega .mnav-chips--picks a { display: flex; min-height: 58px; padding: 12px 16px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); font-family: var(--display); font-size: 20px; font-weight: 800; }
.mnav .mnav-mega .mnav-chips--type a { padding-left: 5px; }
.mnav-chips .mega-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; font-size: 14px; }
.mnav-chips .mega-thumb img { padding: 2px; }
.mnav-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.mnav .mnav-mega .mnav-tiles .mega-tile { width: auto; padding: 0; border: 0; border-radius: 14px; font-size: inherit; }
.mnav-tiles .mega-tile-txt b { font-size: 19px; }
.mnav .mnav-mega .mnav-all { display: inline-flex; gap: 8px; justify-self: start; margin-top: 6px; padding: 10px 0; border: 0; font-family: var(--body); font-size: 16px; font-weight: 700; color: var(--gold); }