/* ========================================================================== 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: #4ade80; --es-pos-c: #f87171; --es-pos-rw: #60a5fa; --es-pos-ld: #22d3ee; --es-pos-rd: #fbbf24; --es-pos-g: #c084fc; --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; gap: 0.9rem; padding: 0 1rem; border-right: 1px solid var(--es-line); } .es-events-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border: 1px solid var(--es-line); border-radius: 4px; background: var(--es-card); 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; } .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; } .es-game { flex: 0 0 auto; width: 168px; padding: 0.5rem 0.9rem 0.55rem; border-right: 1px solid var(--es-line-soft); display: block; } .es-game:hover { background: var(--es-teal-pale); } .es-game-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 500; color: var(--es-ink-soft); white-space: nowrap; } .es-game-net { color: var(--es-muted); font-weight: 500; } .es-game-live { color: #d7263d; display: inline-flex; align-items: center; gap: 0.28rem; } .es-game-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d7263d; } .es-game-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; line-height: 1.6; } .es-game-row .es-abbr { font-weight: 500; letter-spacing: 0.02em; } .es-game-row .es-score { margin-left: auto; font-weight: 500; color: var(--es-ink-soft); font-variant-numeric: tabular-nums; } .es-game-row.is-winner .es-score, .es-game-row.is-winner .es-abbr { color: var(--es-ink); } .es-game-row.is-loser .es-abbr, .es-game-row.is-loser .es-score { 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; } .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 { 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; border-bottom: 3px solid transparent; } .es-nav-links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.07); } .es-nav-links a.is-active { color: #ffffff; font-weight: 500; border-bottom-color: var(--es-teal); } .es-nav-tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.3rem; } /* Used on both and