/* ========================================================================== VVHL — "Broadcast" preview -------------------------------------------------------------------------- A second design direction for the league site, laid out like a major sports portal: sticky scoreboard strip, dark utility nav with an angled brand block, and a three-column front page (left rail / lead story / headlines rail). Unlike the rest of the preview this sheet is STANDALONE — it does not load styles.css. The portal look is light-on-white, and the donor sheet's dark surfaces would fight every rule here rather than cascade with them. League colors: Primary Teal #00B3C9 Secondary #FFFFFF Dark Navy #00264C ========================================================================== */ :root { /* Position colors — same standard as AGL (LW green, C red, RW blue, LD cyan, RD amber, G violet). Use these anywhere a position is shown. */ --es-pos-lw: #00e05e; --es-pos-c: #ff2d55; --es-pos-rw: #0a84ff; --es-pos-ld: #00e5ff; --es-pos-rd: #ffae00; --es-pos-g: #bf5af2; --es-navy: #00264c; --es-navy-deep: #001b36; --es-teal: #00b3c9; --es-teal-dark: #008699; --es-teal-pale: #e6f7fa; --es-page: #f2f4f6; --es-card: #ffffff; --es-line: #dfe3e8; --es-line-soft: #eceef1; --es-ink: #16202b; --es-ink-soft: #445162; --es-muted: #78849a; --es-table-head: #f7f8fa; --es-shadow: 0 1px 3px rgba(0, 38, 76, 0.12); --es-rail: 300px; /* Type. Barlow for running text; its condensed cut for headlines, nav, and figures — the broadcast-graphics register. Both load from Google Fonts in each page's ; the fallbacks keep the layout honest if that fails. */ --es-font-body: "Barlow", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --es-font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- Navy variant -------------------------------------------------------------------------- The same layout with the light surfaces swapped for league navy. Every light value above is a token, so this block is a straight palette substitution — no component rules are repeated. Two things are NOT inverted, on purpose: the elements that were already dark (nav, banner, signup and promo cards, lead story, footer) keep their white text, and .es-btn-light stays white since it only ever sits on those. -------------------------------------------------------------------------- */ body.es-page.is-navy { --es-page: #000f1f; --es-card: #00264c; --es-line: #0d3a68; --es-line-soft: #073257; --es-table-head: #002f5c; --es-ink: #ffffff; --es-ink-soft: #b9d3e6; --es-muted: #7fa0bd; /* Hover tint has to darken rather than brighten, or every hover flashes. */ --es-teal-pale: #013f57; --es-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* The scorebar and cards now share the nav's navy, so the chrome drops a shade to keep the header reading as a separate band. */ body.es-page.is-navy .es-nav { background: var(--es-navy-deep); } /* Story art and the promo gradients were tuned against white; on navy they need a touch more lift to separate from the card behind them. */ body.es-page.is-navy .es-story-art { background: radial-gradient(circle at 70% 30%, rgba(53, 217, 236, 0.55), transparent 55%), linear-gradient(150deg, #0a4f80, #002348); } *, *::before, *::after { box-sizing: border-box; } /* Author-origin display rules (flex, grid, inline-flex) beat the UA's [hidden]{display:none} regardless of specificity, so every component that sets display would silently ignore the attribute. One guard covers them. */ .es-page [hidden] { display: none !important; } body.es-page { margin: 0; min-width: 320px; background: var(--es-page); color: var(--es-ink); font-family: var(--es-font-body); font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Wrapped in :where() so it contributes zero specificity. Written plainly as `.es-page a` it outranks every single-class component rule (0,1,1 beats 0,1,0), which silently repainted .es-btn-light white-on-white and dropped the lead headline to body ink on a dark card. */ :where(.es-page a) { color: inherit; text-decoration: none; } /* Headlines take the condensed cut. It is narrower than the body face, so they run a size up from where the system font sat and drop the negative tracking — condensed faces do not need tightening. */ .es-page h1, .es-page h2, .es-page h3 { margin: 0; font-family: var(--es-font-display); letter-spacing: 0.01em; line-height: 1.1; font-weight: 600; } /* Everything that reads as a label, a score, or a nav item gets the condensed cut too — one register for all the broadcast-graphic elements. */ .es-nav-links a, .es-tool, .es-events-pill, .es-scorebar-league, .es-game-top, .es-game-row, .es-brand span, .es-banner-mark b, .es-banner-title, .es-kicker, .es-head-tag, .es-card-head h2, .es-card-more, .es-tab, .es-table, .es-pill, .es-rank, .es-fixture-time, .es-fixture-score, .es-list-mark, .es-chip, .es-btn, .es-field > span { font-family: var(--es-font-display); } .es-shell { width: min(1320px, 100% - 2rem); margin: 0 auto; } /* ========================================================================== Scoreboard strip ========================================================================== */ .es-scorebar { position: relative; display: flex; align-items: stretch; background: var(--es-card); border-bottom: 1px solid var(--es-line); } .es-scorebar-lead { flex: 0 0 auto; display: flex; align-items: center; padding: 0 0.75rem; border-right: 1px solid var(--es-line); } /* Plain text + caret, no box — it reads as part of the strip's chrome. */ .es-events-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.25rem; border: 0; background: none; color: var(--es-ink); font: inherit; font-family: var(--es-font-display); font-size: 0.95rem; letter-spacing: 0.02em; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; } .es-events-pill:hover { color: var(--es-teal-dark); } body.es-page.is-navy .es-events-pill:hover { color: var(--es-teal); } .es-events-pill::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--es-ink-soft); } .es-scorebar-league { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; color: var(--es-ink); } /* The rail scrolls horizontally; its own scrollbar would read as an artifact in a band this thin, so the chevron is the affordance instead. */ .es-scorebar-rail { flex: 1; min-width: 0; display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .es-scorebar-rail::-webkit-scrollbar { display: none; } /* MATCH DAY: each ticker tile is a condensed match card — away on the left, score or VS + game code in the middle, home on the right, the clubs' colors washing in from each side with 2px edge lines. Tiles sit 2px apart on the rail. */ .es-scorebar-rail { gap: 2px; } .es-game { position: relative; flex: 0 0 auto; min-width: 226px; padding: 0.5rem 0.9rem 0.6rem; display: block; isolation: isolate; cursor: pointer; transition: filter 0.15s ease; } .es-game:hover { filter: brightness(1.22); } .es-game::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.9; background: radial-gradient(150px 90px at -6% 60%, var(--ac, transparent), transparent 66%), radial-gradient(150px 90px at 106% 60%, var(--hc, transparent), transparent 66%); } /* Team-color edge lines on each side of the tile, fading toward top/bottom. */ .es-game::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--ac, transparent) 30%, var(--ac, transparent) 70%, transparent 100%) left center/2px 100% no-repeat, linear-gradient(180deg, transparent 0%, var(--hc, transparent) 30%, var(--hc, transparent) 70%, transparent 100%) right center/2px 100% no-repeat; } .es-game-top { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.3rem; font-family: var(--es-font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--es-muted); white-space: nowrap; } .es-game-top .is-tonight { color: var(--es-teal); } .es-game-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; } .es-game-side { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .es-game-side.is-home { flex-direction: row-reverse; } .es-game-side .es-chip, .es-game-side .es-chip-logo { width: 30px; height: 30px; font-size: 0.95rem; border-radius: 5px; } .es-game-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .es-game-side.is-home .es-game-col { align-items: flex-end; } .es-game-col b { font-family: var(--es-font-display); font-size: 1.1rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; } .es-game-col small { font-family: var(--es-font-display); font-size: 0.66rem; font-weight: 500; line-height: 1.1; color: var(--es-ink-soft); } .es-game-mid { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 44px; } .es-game-score { font-family: var(--es-font-display); font-size: 1.22rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; } .es-game-score .is-loser { color: var(--es-muted); } .es-game-vs { font-family: var(--es-font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; color: var(--es-muted); } .es-game-mid small { font-family: var(--es-font-display); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--es-muted); } /* Team mark: a tinted square carrying the club initial, standing in for logo art the preview does not have. The tint is set per club from vvhl-espn.js. */ .es-chip { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: var(--es-navy); color: #ffffff; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; } /* Uploaded club logo in place of the initial chip. */ .es-chip-logo { background: none; object-fit: contain; width: 22px; height: 22px; } /* Clubs page tiles: a band in the club's own colors. */ .es-club-tile { border-top: 3px solid var(--club, var(--es-teal)); } .es-club-tile-head { display: flex; align-items: center; gap: 0.8rem; } .es-club-tile-head .es-chip { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 6px; } .es-club-tile-head .es-chip-logo { width: 44px; height: 44px; } .es-club-tile-head h3 { font-size: 1.25rem; } .es-club-tile-head .es-kicker { margin: 0.15rem 0 0; } /* Date separators inside the scores lists. */ .es-sched-date { padding: 0.7rem 1rem 0.3rem; border-top: 1px solid var(--es-line); font-family: var(--es-font-display); font-size: 1rem; font-weight: 500; color: var(--es-ink); } .es-sched-date:first-child { border-top: 0; } /* Time sub-header rows (emitted for Tonight/Upcoming): phones only — on wider screens each game keeps its own time column instead. */ .es-sched-time { display: none; } .es-scorebar-next { flex: 0 0 auto; width: 46px; border: 0; border-left: 1px solid var(--es-line); background: var(--es-card); color: var(--es-ink-soft); cursor: pointer; font-size: 1.1rem; } .es-scorebar-next:hover { background: var(--es-teal-pale); color: var(--es-teal-dark); } /* ========================================================================== Utility nav ========================================================================== */ .es-nav { position: sticky; top: 0; z-index: 40; background: var(--es-navy); color: #ffffff; } /* Full-bleed, unlike the content shell: the brand block anchors to the left edge of the viewport and the links run from it. */ .es-nav-inner { display: flex; align-items: stretch; gap: 0.4rem; width: 100%; padding-right: 1rem; min-height: 56px; } /* Angled brand block, echoing the slanted network bug a sports portal wears. */ .es-brand { position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.6rem; padding: 0 2.4rem 0 1.5rem; margin-right: 0.6rem; color: #ffffff; } .es-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--es-teal-dark), var(--es-teal)); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); } .es-brand img { width: 34px; height: 34px; object-fit: contain; } .es-brand span { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; } /* flex: 1 1 0 matters — with the tools pinned right via margin-left: auto, a plain min-width: 0 item gets squeezed to zero on phones and the site loses its navigation. Growing into the leftover space keeps a scrollable strip. */ .es-nav-links { display: flex; flex: 1 1 0; align-items: stretch; gap: 0.15rem; min-width: 0; overflow-x: auto; scrollbar-width: none; } .es-nav-links::-webkit-scrollbar { display: none; } .es-nav-links a { position: relative; display: flex; align-items: center; padding: 0 0.85rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.88); white-space: nowrap; } .es-nav-links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.07); } /* PREMIUM: the page in view is flanked by full-height bars whose glow bleeds inward across the tab, instead of an underline. */ .es-nav-links a.is-active { color: #ffffff; font-weight: 500; background: linear-gradient(90deg, rgba(53, 217, 236, 0.16), transparent 30%, transparent 70%, rgba(53, 217, 236, 0.16)); } .es-nav-links a.is-active::before, .es-nav-links a.is-active::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(53, 217, 236, 0.35), #35d9ec 35% 65%, rgba(53, 217, 236, 0.35)); box-shadow: 0 0 12px rgba(53, 217, 236, 0.85); } .es-nav-links a.is-active::before { left: 0; } .es-nav-links a.is-active::after { right: 0; } .es-nav-tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.3rem; } /* Used on both and