/* ════════════════════════════════════════════════════════════════════════ D27 Design System ──────────────────────────────────────────────────────────────────────── Typography: Oswald (display) + Manrope (body) — loaded from Google Fonts in each HTML . Oswald chosen for the condensed, athletic / scoreboard feel without being as overused as Bebas Neue. Color system: 4 tiers 1. Raw tokens — --d27-navy, --d27-red, etc. (source of truth) 2. Semantic — --bg, --fg, --accent, etc. (what components read) 3. Per-league — [data-league=""] overrides on --league-* 4. Component vars — built on top of semantic tokens Per-league theming: when the body (or any container) has data-league="", that league's primary/accent colors apply to scoped elements. The D27 chrome (nav/footer) stays district-colored. ════════════════════════════════════════════════════════════════════════ */ /* ── Raw tokens ─────────────────────────────────────────────────────── */ :root { /* District palette */ --d27-navy: #002D72; --d27-navy-dark: #001B47; --d27-red: #DA291C; --d27-red-dark: #A01C13; --d27-gold: #C9A227; --d27-white: #FFFFFF; --d27-ink: #0F172A; --d27-muted: #64748B; --d27-paper: #F7F8FA; --d27-line: #E5E7EB; --d27-sub: #F1F3F6; /* Semantic */ --bg: var(--d27-paper); --surface: var(--d27-white); --fg: var(--d27-ink); --muted: var(--d27-muted); --line: var(--d27-line); --primary: var(--d27-navy); --primary-dark: var(--d27-navy-dark); --accent: var(--d27-red); --accent-dark: var(--d27-red-dark); --gold: var(--d27-gold); /* Per-league tokens — overridden by [data-league="..."] blocks below. Default to district palette so non-scoped pages still look right. */ --league-primary: var(--d27-navy); --league-accent: var(--d27-red); /* Shape */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06); /* Type scale (modular, 1.25 ratio) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; /* Spacing rhythm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Container max widths */ --container: 1240px; --container-narrow: 880px; } /* ── Per-league theme scopes ──────────────────────────────────────────── When a page (or section) is scoped to a league, cards/buttons/accents flip to that league's palette. D27 nav + footer stay district-colored so the "hosted by D27" frame is preserved. ──────────────────────────────────────────────────────────────────── */ [data-league="berwyn-paoli"] { --league-primary:#0C2340; --league-accent:#C8102E; } [data-league="chester-valley"] { --league-primary:#003087; --league-accent:#FFB81C; } [data-league="coventry"] { --league-primary:#1B365D; --league-accent:#E03A3E; } [data-league="devon-strafford"] { --league-primary:#002F6C; --league-accent:#C41E3A; } [data-league="exton"] { --league-primary:#0C2340; --league-accent:#CE1141; } [data-league="great-valley"] { --league-primary:#003831; --league-accent:#EFB21E; } [data-league="lower-merion"] { --league-primary:#002D62; --league-accent:#EB6E1F; } [data-league="lower-perkiomen"] { --league-primary:#002B5C; --league-accent:#FD5A1E; } [data-league="pottsgrove"] { --league-primary:#27251F; --league-accent:#FDB827; } [data-league="pottstown"] { --league-primary:#BD3039; --league-accent:#0C2340; } [data-league="radnor-wayne"] { --league-primary:#00385D; --league-accent:#A6192E; } [data-league="upper-providence"]{ --league-primary:#134A8E; --league-accent:#E8291C; } /* ── Reset / base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: var(--text-base); line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: 'Oswald', 'Manrope', system-ui, sans-serif; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--space-4); color: var(--d27-navy); } h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; } .eyebrow { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); font-weight: 500; color: var(--accent); } /* ── Layout ─────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } .container.narrow { max-width: var(--container-narrow); } .section { padding: var(--space-8) 0; } .section-tight { padding-block: var(--space-6); } /* Hero photo readability on phones: the title/description go full-width on mobile, so add a uniform navy wash over the hero image (desktop keeps its left-to-right gradient). */ @media (max-width: 760px) { .hub-hero { position: relative; } .hub-hero > * { position: relative; z-index: 1; } .hub-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(4,16,42,.5); pointer-events: none; } } /* ── Top nav ────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 40; background: rgba(0, 45, 114, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: var(--d27-white); border-bottom: 3px solid var(--d27-red); } /* ── Cosmetic FX: scroll reveal + hover-lift (paired with js/d27-fx.js) ── */ .fx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .fx-reveal.fx-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fx-reveal { opacity: 1 !important; transform: none !important; transition: none; } } .tcard, .ch-item, .league-card { transition: transform .18s ease, box-shadow .18s ease; } .tcard:hover, .ch-item:hover, .league-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,45,114,.16); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 64px; } .nav-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--d27-white); text-decoration: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: var(--text-xl); letter-spacing: 0.02em; text-transform: uppercase; } .nav-brand .nav-crest { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; } @media (max-width: 600px) { .nav-brand .nav-crest { width: 38px; height: 38px; } } .nav-brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: url('../assets/d27-crest.jpeg') center/cover no-repeat, var(--d27-white); border-radius: 50%; font-size: 0; color: transparent; line-height: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.25); } .nav-brand .sub { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; color: rgba(255,255,255,.72); display: block; } .nav-brand .name-block { line-height: 1.1; } .nav-links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .nav-links a { color: rgba(255,255,255,.85); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--d27-white); text-decoration: none; border-bottom: 2px solid var(--d27-red); } .nav-toggle { display: none; background: none; border: 0; color: var(--d27-white); cursor: pointer; padding: 8px 8px; } .nav-toggle svg { width: 32px; height: 32px; } @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .nav-links.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--d27-navy-dark); padding: var(--space-3) 0; border-bottom: 3px solid var(--d27-red); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links.open a { display: block; padding: 15px var(--space-5); font-size: 17px; } /* on the vertical mobile menu: no underline/strikethrough, no red bar — just a clean highlight on the current page */ .nav-links.open a:hover { border-bottom: none; } .nav-links.open a[aria-current="page"] { border-bottom: none; color: #fff; background: rgba(255,255,255,.10); } } /* "More" dropdown menu (injected nav) */ .nav-more { position: relative; } .nav-more > .nav-more-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .nav-more .caret { font-size: .6em; transition: transform .15s ease; } .nav-more.open .caret { transform: rotate(180deg); } .nav-dropdown { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 12px); right: 0; min-width: 190px; background: var(--d27-white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 200; } .nav-more:hover .nav-dropdown, .nav-more.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown li { margin: 0; } .nav-dropdown a { display: block; padding: 9px 14px; border-radius: 6px; color: var(--d27-navy); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } .nav-dropdown a:hover { background: var(--d27-sub); color: var(--d27-navy); border-bottom: none; } .nav-dropdown a[aria-current="page"] { color: var(--d27-red); border-bottom: none; } @media (max-width: 900px) { .nav-more { position: static; } .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: none; border-radius: 0; min-width: 0; padding: 0; background: rgba(0,0,0,.18); } .nav-more.open .nav-dropdown { display: block; } .nav-dropdown a { color: rgba(255,255,255,.85); border-radius: 0; padding: 14px var(--space-5) 14px calc(var(--space-5) + 18px); font-size: 16px; } .nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { color: var(--d27-white); background: rgba(0,0,0,.25); } } /* ── Hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; background: linear-gradient(135deg, rgba(0,27,71,.88) 0%, rgba(0,45,114,.78) 45%, rgba(218,41,28,.55) 100%), radial-gradient(circle at 30% 20%, rgba(201,162,39,.18) 0%, transparent 55%), url('../assets/hero-batter-sunset.png') center/cover no-repeat, var(--d27-navy); color: var(--d27-white); overflow: hidden; } .hero-inner { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-7); align-items: center; padding: var(--space-9) 0 var(--space-8); } .hero-eyebrow { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--text-xs); color: var(--gold); margin-bottom: var(--space-3); } .hero h1 { color: var(--d27-white); font-size: clamp(2.5rem, 5vw, var(--text-5xl)); margin-bottom: var(--space-4); line-height: 1.02; } .hero h1 .accent-line { display: block; color: var(--gold); } .hero p.lede { font-size: var(--text-lg); color: rgba(255,255,255,.88); max-width: 52ch; margin-bottom: var(--space-5); } .hero-stats { display: flex; gap: var(--space-6); flex-wrap: wrap; } .hero-stat { line-height: 1.1; } .hero-stat .n { font-family: 'Oswald', sans-serif; font-size: var(--text-3xl); font-weight: 700; color: var(--gold); display: block; } .hero-stat .l { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,.72); } /* Live-now card (right side of hero) */ .live-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: var(--space-5); } .live-card .live-label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--text-xs); font-weight: 600; color: var(--d27-white); margin-bottom: var(--space-3); } .live-dot { width: 8px; height: 8px; background: #FF3B30; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,59,48,.6); animation: livepulse 1.6s infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); } 70% { box-shadow: 0 0 0 12px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } } .live-tournament { font-size: var(--text-sm); color: rgba(255,255,255,.7); margin-bottom: var(--space-3); } .live-game { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid rgba(255,255,255,.1); } .live-game:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); } .live-team { font-weight: 600; font-size: var(--text-base); color: var(--d27-white); } .live-team .rec { display: block; font-size: var(--text-xs); color: rgba(255,255,255,.55); font-weight: 400; } .live-score { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: var(--text-2xl); color: var(--d27-white); letter-spacing: 0.04em; } .live-score .inning { display: block; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--gold); font-weight: 500; } .live-footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--text-xs); color: rgba(255,255,255,.55); text-align: right; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; padding: var(--space-7) 0 var(--space-6); gap: var(--space-5); } .hero h1 { font-size: clamp(2rem, 7vw, 2.75rem); } } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 20px; border-radius: var(--radius-sm); font-family: 'Oswald', sans-serif; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; border: 0; text-decoration: none; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--d27-red); color: var(--d27-white); box-shadow: 0 4px 0 var(--d27-red-dark); } .btn-primary:hover { background: #E5392D; } .btn-navy { background: var(--d27-navy); color: var(--d27-white); box-shadow: 0 4px 0 var(--d27-navy-dark); } .btn-navy:hover { background: #00358A; } .btn-ghost { background: transparent; color: var(--d27-white); border: 2px solid rgba(255,255,255,.5); } .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--d27-white); } .btn-sm { padding: 8px 14px; font-size: var(--text-xs); } /* ── Cards ──────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } /* League card — per-league themed via [data-league] scope */ .league-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--fg); position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; } .league-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--league-primary); text-decoration: none; } .league-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--league-primary) 0%, var(--league-accent) 100%); } .league-card-head { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .league-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--league-primary); color: var(--d27-white); display: inline-flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.03em; flex-shrink: 0; } .league-card h3 { margin: 0; font-size: var(--text-lg); color: var(--fg); } .league-card .town { font-size: var(--text-sm); color: var(--muted); margin: 2px 0 0; } .league-card .meta { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--muted); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); } .league-card .meta strong { color: var(--fg); font-weight: 600; } .league-card[data-showcase="true"]::after { content: "FEATURED"; position: absolute; top: var(--space-3); right: var(--space-3); background: var(--league-accent); color: var(--d27-white); font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 3px; } /* ── Grids ──────────────────────────────────────────────────────────── */ .grid { display: grid; gap: var(--space-4); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.leagues { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 780px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ── Section headers ────────────────────────────────────────────────── */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 2px solid var(--d27-navy); } .section-head h2 { margin: 0; color: var(--d27-navy); } .section-head .eyebrow { margin-bottom: var(--space-2); display: block; } .section-head .more { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; color: var(--accent); } /* ── Champion card ──────────────────────────────────────────────────── */ .champ-row { display: flex; flex-direction: column; gap: var(--space-3); } .champ-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); } .champ-trophy { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #E7C24A 0%, var(--gold) 100%); color: var(--d27-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; } .champ-tournament { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); font-weight: 600; color: var(--muted); display: block; margin-bottom: 2px; } .champ-team { font-family: 'Oswald', sans-serif; font-size: var(--text-xl); font-weight: 600; color: var(--d27-navy); } .champ-meta { text-align: right; font-size: var(--text-xs); color: var(--muted); } .champ-year { font-family: 'Oswald', sans-serif; font-size: var(--text-lg); font-weight: 600; color: var(--d27-navy); } /* ── News / announcements ───────────────────────────────────────────── */ .news-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); } .news-item:last-child { border-bottom: 0; } .news-date { text-align: center; color: var(--d27-navy); font-family: 'Oswald', sans-serif; } .news-date .m { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; } .news-date .d { display: block; font-size: var(--text-3xl); font-weight: 600; line-height: 1; } .news-body h4 { margin: 0 0 var(--space-1); font-size: var(--text-lg); } .news-body p { margin: 0; color: var(--muted); font-size: var(--text-sm); } .news-tag { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 8px; border-radius: 3px; margin-bottom: var(--space-2); } .news-tag.weather { background: #FEF3C7; color: #92400E; } .news-tag.results { background: #DCFCE7; color: #166534; } .news-tag.schedule { background: #DBEAFE; color: #1E40AF; } .news-tag.champion { background: #FEF3C7; color: var(--d27-navy); border: 1px solid var(--gold); } /* ── Footer ─────────────────────────────────────────────────────────── */ .footer { background: var(--d27-navy-dark); color: rgba(255,255,255,.8); padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-8); font-size: var(--text-sm); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); } .footer h5 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-xs); color: var(--gold); margin: 0 0 var(--space-3); } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: var(--space-2); } .footer a { color: rgba(255,255,255,.8); } .footer a:hover { color: var(--d27-white); } .footer-bottom { padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); color: rgba(255,255,255,.55); flex-wrap: wrap; } .footer-bottom .credit { color: var(--gold); } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } /* ── Demo ribbon ────────────────────────────────────────────────────── */ .demo-ribbon { display: none; } @media (max-width: 900px) { .demo-ribbon { display: none; } } /* ── Field status board ───────────────────────────────────────────── Compact district-wide strip: each member league shows its fields with a color-coded pill (open / wet / closed / scheduled). Updated by league presidents via the admin panel. This is the #1 feature parents check — DVSL doesn't have it; no scouted district site does it as a live visual (only 3/8 surveyed sites had any field-status info, and those were text-only). ──────────────────────────────────────────────────────────────── */ .field-status { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) 0; } .fs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; } .fs-head .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); } .fs-head h2 { margin: 4px 0 0; } .fs-summary { display: flex; gap: var(--space-5); font-family: 'Oswald', sans-serif; font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .fs-summary strong { font-size: var(--text-2xl); font-weight: 600; margin-right: 6px; display: inline-block; vertical-align: middle; } .fs-summary .open strong { color: #16A34A; } .fs-summary .wet strong { color: #CA8A04; } .fs-summary .closed strong { color: var(--accent); } .fs-stamp { font-family: 'Oswald', sans-serif; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .fs-stamp .dot { display: inline-block; width: 6px; height: 6px; background: #16A34A; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: livepulse 2.2s infinite; } .fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .fs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); position: relative; } .fs-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--league-primary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .fs-league { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .fs-league strong { font-size: var(--text-sm); font-weight: 600; color: var(--fg); } .fs-league .abbr { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--league-primary); background: color-mix(in srgb, var(--league-primary) 8%, transparent); padding: 2px 6px; border-radius: 3px; } .fs-fields { display: flex; flex-wrap: wrap; gap: 4px; } .field-pill { font-size: var(--text-xs); padding: 3px 8px; border-radius: 10px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; line-height: 1; } .field-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .field-pill.open { background: #DCFCE7; color: #166534; } .field-pill.open::before { background: #16A34A; } .field-pill.wet { background: #FEF3C7; color: #92400E; } .field-pill.wet::before { background: #CA8A04; } .field-pill.closed { background: #FEE2E2; color: #991B1B; } .field-pill.closed::before { background: var(--accent); } .field-pill.game { background: #DBEAFE; color: #1E3A8A; } .field-pill.game::before { background: #2563EB; } /* ── Age calculator widget ──────────────────────────────────────────── */ .age-widget { background: linear-gradient(135deg, var(--d27-navy) 0%, var(--d27-navy-dark) 100%); color: var(--d27-white); border-radius: var(--radius); padding: var(--space-5); } .age-widget h3 { color: var(--d27-white); margin: 0 0 var(--space-2); } .age-widget .eyebrow { color: var(--gold); } .age-widget p { color: rgba(255,255,255,.75); font-size: var(--text-sm); margin-bottom: var(--space-4); } .age-widget .ac-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); } .age-widget input[type="date"] { flex: 1; padding: 10px 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--d27-white); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-sm); color-scheme: dark; } .age-widget .ac-btn { padding: 10px 18px; background: var(--d27-red); color: var(--d27-white); border: 0; border-radius: var(--radius-sm); font-family: 'Oswald', sans-serif; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .age-widget .ac-result { padding: var(--space-3); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); font-size: var(--text-sm); min-height: 48px; } .age-widget .ac-result .division { font-family: 'Oswald', sans-serif; font-size: var(--text-xl); font-weight: 600; color: var(--gold); display: block; } /* ── Tournament bracket ───────────────────────────────────────────────── Rendered by js/bracket.js via D27Bracket.render(containerEl, data). Horizontal-scrolling grid on mobile; full-width on desktop. ──────────────────────────────────────────────────────────────────── */ .br-scroller { overflow-x: auto; overflow-y: visible; padding: var(--space-3) 0 var(--space-5); -webkit-overflow-scrolling: touch; } .br-scroller::-webkit-scrollbar { height: 8px; } .br-scroller::-webkit-scrollbar-track { background: var(--d27-sub); border-radius: 4px; } .br-scroller::-webkit-scrollbar-thumb { background: var(--d27-muted); border-radius: 4px; } .br-grid { display: grid; grid-template-columns: repeat(var(--br-rounds, 4), minmax(260px, 1fr)); gap: var(--space-4); min-width: max-content; align-items: stretch; } @media (min-width: 960px) { .br-grid { min-width: 0; } } .br-round { display: flex; flex-direction: column; } .br-round-head { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--d27-navy); color: var(--d27-white); border-radius: var(--radius-sm); margin-bottom: var(--space-4); text-align: center; } .br-round-name { font-family: 'Oswald', sans-serif; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } .br-round-count { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); font-family: 'Oswald', sans-serif; } .br-round-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: var(--space-3); } .br-match { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: visible; position: relative; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; cursor: pointer; } .br-match:hover { box-shadow: 0 0 0 3px rgba(0, 120, 255, .28), 0 10px 28px rgba(0, 80, 200, .32), 0 0 48px rgba(0, 120, 255, .38); border-color: #0070f3; transform: translateY(-2px); z-index: 3; } .br-match.has-result::after { content: "📊 Box Score →"; position: absolute; right: 10px; bottom: -12px; background: var(--d27-navy); color: var(--d27-gold); font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: .08em; padding: 3px 10px; border-radius: 10px; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 4; white-space: nowrap; text-transform: uppercase; font-weight: 600; } .br-match.has-result:hover::after { opacity: 1; transform: translateY(0); } .br-match.is-live::before { content: "● LIVE"; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); background: var(--d27-red); color: white; font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: .1em; padding: 2px 10px; border-radius: 10px; z-index: 2; animation: pulseLive 1.4s infinite; } @keyframes pulseLive { 0%,100%{opacity:1;} 50%{opacity:.55;} } .br-match.pending { opacity: .85; } .br-match.pending::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); } .br-team { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-bottom: 1px solid var(--line); font-size: var(--text-sm); min-height: 54px; } .br-team:last-child { border-bottom: 0; } .br-team.winner { background: linear-gradient(90deg, rgba(201,162,39,.08) 0%, rgba(201,162,39,0) 100%); font-weight: 600; } .br-team.winner .br-score { color: var(--d27-navy); font-weight: 700; } .br-team.winner::before { content: ''; display: block; position: absolute; width: 3px; } .br-team.tbd { color: var(--muted); } .br-team.tbd .br-team-name { font-style: italic; } .br-seed { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--d27-sub); color: var(--d27-navy); font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; border-radius: 4px; } .br-team.tbd .br-seed { background: transparent; color: var(--muted); } .br-info { min-width: 0; } .br-team-name { font-family: 'Manrope', sans-serif; font-size: var(--text-sm); line-height: 1.2; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .br-team-meta { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .br-score { font-family: 'Oswald', sans-serif; font-size: var(--text-lg); font-weight: 600; color: var(--muted); min-width: 28px; text-align: right; } .br-match-foot { padding: 6px var(--space-3); background: var(--d27-sub); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Oswald', sans-serif; text-align: center; border-top: 1px solid var(--line); } .br-champion { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-5); background: linear-gradient(135deg, var(--d27-navy) 0%, var(--d27-navy-dark) 100%); color: var(--d27-white); border-radius: var(--radius); margin-bottom: var(--space-5); box-shadow: var(--shadow-lg); border: 2px solid var(--gold); } .br-champion .trophy { font-size: 2.5rem; line-height: 1; } .br-champion .eyebrow { font-family: 'Oswald', sans-serif; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); display: block; margin-bottom: 4px; } .br-champion .champ-team-big { font-family: 'Oswald', sans-serif; font-size: var(--text-3xl); font-weight: 600; line-height: 1; letter-spacing: 0.02em; } .br-champion .champ-league-small { font-size: var(--text-sm); color: rgba(255,255,255,.75); margin-top: 4px; } /* ── Utility ────────────────────────────────────────────────────────── */ .text-center { text-align: center; } .text-muted { color: var(--muted); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--space-3); } .mb-5 { margin-bottom: var(--space-5); } .badge { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 3px; background: var(--d27-sub); color: var(--muted); } .badge.live { background: var(--accent); color: var(--d27-white); } .badge.champ { background: var(--gold); color: var(--d27-ink); } .badge.int { background: var(--d27-navy); color: var(--d27-white); } .badge.special { background: var(--accent); color: var(--d27-white); } .badge.section { background: var(--muted); color: var(--d27-white); } /* ── Click-a-game modal (preview / recap) ───────────────────────────── */ .gm-clickable, [data-g][data-tkey] { cursor: pointer; } .gm-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0, 23, 60, .55); backdrop-filter: blur(3px); padding: 20px; } .gm-overlay.open { display: flex; animation: gmFade .16s ease; } @keyframes gmFade { from { opacity: 0; } to { opacity: 1; } } .gm-card { background: var(--surface, #fff); width: 100%; max-width: 440px; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 23, 60, .4); position: relative; animation: gmPop .18s cubic-bezier(.2,.7,.3,1); } @keyframes gmPop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .gm-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; cursor: pointer; line-height: 1; z-index: 2; } .gm-close:hover { background: rgba(255,255,255,.32); } .gm-head { background: linear-gradient(135deg, var(--d27-navy, #002D72), #001b47); color: #fff; padding: 18px 22px 16px; } .gm-crumb { font-family: var(--font-display, 'Oswald'), sans-serif; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.7); } .gm-badge { display: inline-block; margin-top: 9px; font-family: var(--font-display, 'Oswald'), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; } .gm-badge.preview { background: rgba(255,255,255,.16); color: #fff; } .gm-badge.final { background: var(--d27-gold, #C9A227); color: var(--d27-navy, #002D72); } .gm-badge.forfeit { background: #FCD34D; color: #6b4d05; } .gm-badge.ppd { background: #F59E0B; color: #fff; } .gm-ppd-note { text-align: center; color: #B45309; font-size: 13px; font-weight: 600; margin-top: 8px; } .d27-alert { background: #F59E0B; color: var(--d27-navy); font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .03em; border-bottom: 2px solid #B45309; } .d27-alert-inner { max-width: var(--container, 1200px); margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 9px 20px; } .d27-alert .ico { font-size: 16px; line-height: 1; flex: none; } .d27-alert .msg { flex: 1 1 auto; } .d27-alert .msg a { color: var(--d27-navy); text-decoration: underline; font-weight: 700; } .d27-alert .x { flex: none; background: rgba(0,45,114,.12); border: none; color: var(--d27-navy); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; font-weight: 700; } .d27-alert .x:hover { background: rgba(0,45,114,.22); } @media (max-width: 600px) { .d27-alert { font-size: 12px; } .d27-alert-inner { padding: 8px 14px; gap: 9px; } } /* weather/postponement pop-up (must acknowledge) */ .d27-wx { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,18,48,.66); padding: 20px; backdrop-filter: blur(2px); } .d27-wx-card { background: #fff; border-radius: 16px; max-width: 440px; width: 100%; padding: 32px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); border-top: 6px solid #F59E0B; animation: d27wxPop .22s ease-out; } @keyframes d27wxPop { from { transform: scale(.9) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .d27-wx-ico { font-size: 50px; line-height: 1; } .d27-wx-card h2 { font-family: 'Oswald', sans-serif; color: var(--d27-navy, #002D72); font-size: 27px; margin: 10px 0 8px; } .d27-wx-card p { color: #4b5563; font-size: 16px; margin: 0 0 22px; line-height: 1.5; } .d27-wx-btns { display: flex; flex-direction: column; gap: 10px; } .d27-wx-go { background: #F59E0B; color: var(--d27-navy, #002D72); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 14px; border-radius: 10px; transition: filter .12s ease; } .d27-wx-go:hover { filter: brightness(1.06); } .d27-wx-ok { background: none; border: none; color: #9aa3af; font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 8px; } .d27-wx-ok:hover { color: var(--d27-navy, #002D72); } .gm-body { padding: 20px 22px 18px; } .gm-foot { padding: 0 22px 22px; } .gm-bracket-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; background: var(--d27-navy, #002D72); color: #fff; border-radius: 10px; font-family: var(--font-display, 'Oswald'), sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: filter .12s ease, transform .12s ease; } .gm-bracket-btn:hover { filter: brightness(1.14); transform: translateY(-1px); text-decoration: none; color: #fff; } /* preview */ .gm-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; } .gm-matchup .gm-team { font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; font-size: 19px; color: var(--d27-ink, #14213D); line-height: 1.15; display: flex; flex-direction: column; align-items: center; gap: 7px; } .gm-matchup .gm-team.tbd { color: var(--muted, #6b7280); font-weight: 600; font-size: 15px; } .gm-vs { font-family: var(--font-display, 'Oswald'), sans-serif; font-size: 12px; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .08em; } .gm-meta { text-align: center; color: var(--muted, #6b7280); font-size: 13px; margin-top: 12px; } .gm-sec { margin-top: 20px; border-top: 1px solid var(--line, #e5e7eb); padding-top: 14px; } .gm-sec h4 { font-family: var(--font-display, 'Oswald'), sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--d27-navy, #002D72); margin: 0 0 8px; } .gm-road { list-style: none; margin: 0; padding: 0; } .gm-road li { font-size: 13px; color: var(--d27-ink, #14213D); padding: 4px 0; line-height: 1.45; } .gm-road li.tbd { color: var(--muted, #6b7280); } .gm-road .gm-sc { font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; color: var(--d27-navy, #002D72); margin-left: 4px; } /* recap */ .gm-score { display: flex; flex-direction: column; gap: 6px; } .gm-srow { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-radius: 9px; background: var(--d27-sub, #f3f5f9); } .gm-srow.win { background: #ECFDF5; } .gm-srow .t { font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; font-size: 16px; color: var(--d27-ink, #14213D); display: inline-flex; align-items: center; gap: 9px; } .gm-byewrap .d27-logo, .gm-byewrap .d27-logo-fb { margin: 0 auto 8px; } .gm-srow.win .t { color: #047857; } .gm-srow .s { font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; font-size: 22px; color: var(--d27-navy, #002D72); } .gm-srow.win .s { color: #047857; } .gm-recap { font-size: 14.5px; line-height: 1.6; color: var(--d27-ink, #14213D); margin: 0; } .gm-byewrap { text-align: center; padding: 6px 0 2px; } .gm-byewrap .gm-team { font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; font-size: 20px; color: var(--d27-ink, #14213D); } /* league / team logos */ .d27-logo { display: inline-block; object-fit: contain; vertical-align: middle; flex: none; } .d27-logo-fb { display: inline-flex; align-items: center; justify-content: center; background: var(--d27-navy, #002D72); color: #fff; border-radius: 50%; font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; letter-spacing: .01em; line-height: 1; flex: none; box-sizing: border-box; padding: 1px; } /* the "Preview ›" / "Recap ›" cue on every clickable game card */ .gm-cue { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-display, 'Oswald'), sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1; transition: background .12s, filter .12s; } .gm-cue.preview { background: rgba(0, 45, 114, .07); color: var(--d27-navy, #002D72); border: 1px solid rgba(0, 45, 114, .22); } .gm-cue.recap { background: var(--d27-gold, #C9A227); color: var(--d27-navy, #002D72); } [data-g][data-tkey] { cursor: pointer; } [data-g][data-tkey]:hover .gm-cue.preview { background: rgba(0, 45, 114, .15); } [data-g][data-tkey]:hover .gm-cue.recap { filter: brightness(1.07); } @media (max-width: 480px) { .gm-card { max-width: 100%; } .gm-matchup .gm-team { font-size: 17px; } }