/* === Yorker dashboard === Palette from Vernon's kit: vibrant gold + deep petrol teal + cream. */ :root { --gold: #E5B340; --gold-bright: #F2C13E; --gold-deep: #C49327; --teal: #1A4D58; --teal-deep: #0E353D; --teal-soft: #2A6A77; --cream: #F5EFE0; --cream-warm: #FAF6EA; --paper: #FBF9F3; --ink: #14171A; --ink-soft: #4A4F56; --muted: #8A8E94; --line: #E1DDD0; --red: #C8392E; --green: #4A9D67; --shadow-sm: 0 1px 2px rgba(14, 53, 61, 0.06), 0 2px 6px rgba(14, 53, 61, 0.04); --shadow-md: 0 4px 12px rgba(14, 53, 61, 0.08), 0 12px 28px rgba(14, 53, 61, 0.06); --shadow-lg: 0 20px 50px rgba(14, 53, 61, 0.18); --radius: 5px; --radius-lg: 5px; --font-display: "Oxanium", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* App-shell: lock the document so it never scrolls or rubber-bands as a whole (which is what exposed the background band above the static header / below the footer). The header is a fixed flex item; all content lives in .scroll-pane, which is the single scroller and bounces nicely at its own edges — revealing its own cream background, so nothing peeks past the header/footer. Applies to the website, the installed PWA, and the native app alike. */ body { display: flex; flex-direction: column; /* Height of the locked app-shell. The two surfaces need DIFFERENT heights and no single viewport unit satisfies both — verified on a real iOS standalone PWA *and* mobile Safari in the iOS simulator: • mobile Safari — the document never scrolls (overflow:hidden), so the bottom toolbar never collapses. 100vh/100lvh resolve to the LARGE (toolbar-hidden) height and strand the footer behind the toolbar; 100dvh is the visible height, so content ends at the toolbar's top edge. • installed standalone PWA — a viewport unit (dvh/svh) stops at the home-indicator inset, ~34px SHORT of the physical screen. The body then paints its OWN background in that uncovered strip → a cream band pinned to the bottom that content scrolls under ("the block the same colour as the background"). 100vh = the full screen, so content covers the strip and the footer's safe-area padding keeps its text above the indicator (see the html.pwa-standalone rule below). So: 100dvh in a browser, 100vh in the installed PWA. iOS never matches @media(display-mode:standalone), so the PWA case is gated by a class a tiny script adds from navigator.standalone. height:100% (html,body above) is the pre-dvh fallback. */ height: 100dvh; overflow: hidden; /* App-like feel: text isn't selectable anywhere, so tapping/long-pressing never highlights text or pops the iOS copy menu. Selection and tapping are independent — every link, button and tap target still works exactly the same (they're click-driven). Inputs are re-enabled below. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Keep any text field editable/selectable (none today, but future-proof). */ input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* Installed standalone PWA only: fill the full physical screen so the body's background can't paint a band in the home-indicator strip. See body comment. */ html.pwa-standalone body { height: 100vh; } .scroll-pane { flex: 1 1 auto; /* Force the flex scroller's minimum size to 0 so it shrinks to the available space and scrolls internally. Without this, iOS Safari/WKWebView treats the default min-height:auto as min-content, expands the pane to its full content height, and body's overflow:hidden clips everything below the fold — exposing the cream body background as a "solid block" at the bottom that content appears to scroll behind. Desktop Chromium already behaves as if this is 0 (the overflow→auto-min-0 rule); iOS is inconsistent, so we set it explicitly. */ min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); } /* Disable iOS double-tap-to-zoom. Applied to every element because iOS Safari doesn't reliably inherit touch-action from html/body — it has to live on the element actually being tapped. Pinch-zoom still works. */ *, *::before, *::after { touch-action: manipulation; } a { color: inherit; text-decoration: none; } /* --- Header ---------------------------------------------------------- */ .header { flex: 0 0 auto; z-index: 10; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); padding: 20px 0; /* Extend the teal background up under the iOS status bar / notch when installed as a PWA. env() falls back to 0 on browsers that don't report a safe area. The horizontal content gutter lives on .header__inner so the brand + meta align with the centred .app column; only the notch safe-area inset sits on the bar itself. */ padding-top: calc(20px + env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); border-bottom: 3px solid var(--gold); } /* Constrain the header's content to the same centred column as .app (max-width 980px + matching 18px gutter) so the brand and meta strip line up vertically with the page content instead of stretching to the browser edges. The teal bar itself still spans full width. */ .header__inner { max-width: 980px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 0; color: var(--cream); transition: opacity 0.2s ease; /* Kill the iOS long-press artifacts on the wordmark: the white rounded "lift platter" iOS drags a link onto, plus the tap-highlight box and the link-preview/copy callout — all of which pop on a press-and-hold (the hidden analytics toggle is a long-press, so this is hit every time). Not a hover state — these are touch press-and-hold UI. The drag-lift is the stubborn one: touch-callout alone doesn't stop it, so user-drag must be disabled on the anchor AND its inner spans. */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .brand * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } .brand:hover { opacity: 0.85; } /* When the banner has no home target (the leaderboard), it's plain text — drop the link affordance. */ .brand--static { cursor: default; } .brand--static:hover { opacity: 1; } .brand-text { display: flex; flex-direction: column; line-height: 0.95; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; } .brand-text__top { font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; } .brand-text__bottom { font-size: 22px; color: var(--cream); text-transform: uppercase; } /* Site-wide share button — shares whatever page you're currently on. A labelled pill (icon + "SHARE") with a solid gold fill + dark teal text/icon so it reads unmistakably as a button to tap, standing out against the teal header. */ .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; flex: 0 0 auto; padding: 0 15px 0 12px; border-radius: 999px; background: var(--gold); border: none; color: var(--teal-deep); font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 2px 6px rgba(14, 53, 61, 0.28); transition: background 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } .share-btn:hover { background: var(--gold-bright); } .share-btn:active { transform: scale(0.96); } .share-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; } .share-btn__icon { width: 15px; height: 15px; flex: 0 0 auto; } .share-btn__label { line-height: 1; } /* Transient "Link copied" toast — only used as the Web Share fallback. */ .share-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); background: var(--teal-deep); color: var(--cream); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .share-toast--show { opacity: 1; transform: translate(-50%, 0); } /* Offline pill shown inside the footer "updated" line — muted on the light footer background (not the cream-on-teal of the old header position). */ .meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 9px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; } .meta-pill__icon { width: 12px; height: 12px; } /* --- Main / app shell ----------------------------------------------- */ .app { max-width: 980px; margin: 0 auto; padding: 24px 18px 24px; } .loading { text-align: center; padding: 80px 0; color: var(--muted); } /* --- Section heading ------------------------------------------------ */ .section { margin-top: 32px; } .section-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, transparent 100%); border-radius: 2px; } /* --- Next-game hero ------------------------------------------------- */ .hero-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); transition: transform 0.15s ease, box-shadow 0.15s ease; } .hero-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .hero { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); border-radius: var(--radius-lg); padding: 26px 24px; position: relative; overflow: hidden; } .upcoming-shell { padding: 32px 24px; background: var(--cream-warm); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; } .lineup-card { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 18px; margin-bottom: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } /* flex-basis sets the column's natural width before sharing remaining space. * When 3 cols × 140px + 2 × 18px gap (~456px) won't fit, the last column * wraps to a new line — each subsequent narrower viewport step wraps another * column down. */ .lineup-card > div { flex: 1 1 140px; min-width: 0; } .lineup-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .lineup-card__names { font-size: 14px; color: var(--ink-soft); } .upcoming-shell__hint { margin: 0; color: var(--muted); font-size: 14px; font-style: italic; } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, transparent 60%, rgba(229, 179, 64, 0.18) 100%), repeating-linear-gradient(45deg, transparent 0 14px, rgba(245, 239, 224, 0.02) 14px 15px); pointer-events: none; } .hero__label { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; font-weight: 700; position: relative; } .hero__date { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; position: relative; } /* New asymmetric layout: gold date-tile on the left, opponent + meta on the right */ .hero__topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; position: relative; } .hero__pill { background: rgba(229, 179, 64, 0.18); border: 1px solid rgba(229, 179, 64, 0.45); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* Active game: solid gold pill with dark text (vs the translucent countdown pill). */ .hero__pill--live { background: var(--gold); border-color: var(--gold); color: var(--ink); } .hero__body { display: flex; align-items: center; gap: 20px; position: relative; } .hero__tile { background: var(--gold-bright); color: var(--teal-deep); border-radius: 5px; padding: 10px 16px 12px; text-align: center; min-width: 92px; flex-shrink: 0; } .hero__tile-day { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid rgba(14, 53, 61, 0.25); padding-bottom: 4px; margin-bottom: 6px; } .hero__tile-num { font-family: var(--font-display); font-size: 44px; font-weight: 800; line-height: 1; } .hero__tile-mon { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; } .hero__info { flex: 1; min-width: 0; } .hero__vs { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 2px; } .hero__opp { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--cream); line-height: 1.1; letter-spacing: 0.01em; margin-bottom: 8px; overflow-wrap: anywhere; } .hero__when { font-size: 14px; color: rgba(245, 239, 224, 0.85); } .hero__when strong { color: var(--cream); font-weight: 700; } .hero--empty { background: linear-gradient(135deg, #2C3036 0%, #1A1D22 100%); color: var(--cream); text-align: center; padding: 36px 24px; } .hero--empty .hero__label { color: var(--muted); } .hero--empty p { margin: 6px 0 0; color: rgba(245, 239, 224, 0.7); font-size: 14px; } /* --- Chip row (install + notify, side-by-side on desktop) ---------- */ .chip-row { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .chip-row:empty { display: none; } .chip-row > .install-chip, .chip-row > .notify-chip { margin: 0; } /* --- Notify chip ---------------------------------------------------- */ .notify-chip { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 12px auto 0; padding: 6px 12px; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: color 120ms ease, border-color 120ms ease; -webkit-tap-highlight-color: transparent; } .notify-chip:hover:not(:disabled) { color: var(--teal-deep); border-color: var(--teal-soft); } .notify-chip:disabled { cursor: default; opacity: 0.7; } .notify-chip[data-state="denied"] { cursor: default; color: var(--muted); } .notify-chip__icon { display: inline-flex; line-height: 0; } .notify-chip__icon svg { width: 15px; height: 15px; } .notify-chip__bell--on { display: none; } .notify-chip__bell--off { display: block; } .notify-chip[data-state="on"] .notify-chip__bell--on { display: block; } .notify-chip[data-state="on"] .notify-chip__bell--off { display: none; } /* --- Install chip --------------------------------------------------- */ .install-chip { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 14px auto 0; padding: 6px 14px; background: var(--teal-deep); border: 1px solid var(--teal-deep); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--cream-warm); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; -webkit-tap-highlight-color: transparent; } .install-chip:hover:not(:disabled) { background: #163e47; box-shadow: 0 4px 12px rgba(26, 77, 88, 0.25); } .install-chip:active { transform: translateY(1px); } .install-chip[hidden] { display: none; } .install-chip__icon { display: inline-flex; line-height: 0; } .install-chip__icon svg { width: 15px; height: 15px; } /* --- Install overlay (iOS instructions) ----------------------------- */ /* Background scroll lock is applied via inline body styles in showIOSInstallOverlay() — see the comment there for why we sidestep the class-based approach. */ .install-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; animation: install-overlay-in 180ms ease-out; } @keyframes install-overlay-in { from { opacity: 0; } to { opacity: 1; } } .install-overlay__backdrop { position: absolute; inset: 0; background: rgba(11, 36, 42, 0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .install-overlay__card { position: relative; width: min(380px, 100%); background: var(--cream-warm); color: var(--ink); border-radius: 14px; padding: 22px 22px 24px; box-shadow: 0 20px 50px rgba(11, 36, 42, 0.4); animation: install-card-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1); } @keyframes install-card-in { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .install-overlay__close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; background: transparent; border: 0; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; } .install-overlay__close:hover { color: var(--ink); } .install-overlay__title { margin: 2px 0 6px; font-family: var(--font-display, var(--font-body)); font-size: 19px; font-weight: 700; color: var(--teal-deep); } .install-overlay__sub { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; } .install-overlay__steps { list-style: none; margin: 0; padding: 0; } .install-overlay__steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.5; } .install-overlay__num { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--teal-deep); color: var(--cream-warm); font-size: 12px; font-weight: 700; } .install-overlay__inline-icon { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 2px; border-radius: 5px; background: rgba(26, 77, 88, 0.08); color: var(--teal-deep); line-height: 0; } .install-overlay__inline-icon svg { width: 14px; height: 14px; } .install-overlay__note { margin: 14px 0 0; padding: 10px 12px; background: rgba(26, 77, 88, 0.06); border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); } .install-overlay__note-line { display: block; } .install-overlay__note-line + .install-overlay__note-line { margin-top: 6px; } /* --- Record strip --------------------------------------------------- */ .record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; } .record__cell { background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px; text-align: center; font: inherit; color: inherit; } button.record__cell { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } button.record__cell:hover:not([data-active="true"]) { border-color: var(--teal-soft); } button.record__cell:active { transform: translateY(1px); } button.record__cell[data-active="true"] { background: var(--teal); border-color: var(--teal); } button.record__cell[data-active="true"] .record__num, button.record__cell[data-active="true"] .record__label { color: var(--cream-warm); } .record__num, .record__label { transition: color 160ms ease; } .record__cell--static { background: var(--paper); } .record__num { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; } .record__label { margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 600; } .record__sub { margin-top: 2px; font-size: 11px; color: var(--muted); } /* --- Results cards -------------------------------------------------- */ .results { display: grid; gap: 10px; } .result-card { background: var(--cream-warm); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--radius); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .result-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .result-card--win { border-left-color: var(--green); } .result-card--loss { border-left-color: var(--muted); } .result-card--upcoming { border-left-color: var(--gold); background: #FFF8E7; } .result-card__date { display: flex; /* wrap-reverse: badges stay inline with the date when there's room, but on a narrow card they wrap ABOVE the date (their own line on top) rather than below it. */ flex-wrap: wrap-reverse; align-items: center; gap: 6px 8px; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .result-card__badges { display: inline-flex; align-items: center; gap: 6px; } .result-card__badges .badge { margin-left: 0; } /* On phones the long date + badges don't fit on one line, and which cards wrap is inconsistent right at the boundary — so force the pills onto their own line ABOVE the date, uniformly, for every result card. */ @media (max-width: 480px) { .result-card__date { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; } .result-card__badges { order: -1; } } .result-card__opp { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-top: 4px; } .result-card__meta { margin-top: 4px; font-size: 12px; color: var(--muted); } .result-card__score { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; align-self: center; text-align: right; } .result-card__score--us { color: var(--teal); } .result-card__score small { font-size: 12px; color: var(--muted); } .result-card__score-sep { color: var(--muted); font-weight: 400; margin: 0 8px; } .show-more-btn { justify-self: center; margin-top: 6px; padding: 8px 18px; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: color 120ms ease, border-color 120ms ease; -webkit-tap-highlight-color: transparent; } .show-more-btn:hover { color: var(--teal-deep); border-color: var(--teal-soft); } .show-more-btn:active { transform: translateY(1px); } .badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 5px 12px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .detail-header__name .badge { padding: 9px 18px 7px; font-size: 11px; margin-left: 12px; line-height: 1; } .badge--win { background: var(--green); color: #fff; } .badge--loss { background: #E7E4DA; color: var(--ink-soft); } .badge--upcoming { background: var(--gold); color: var(--teal-deep); } /* Neutral metadata chip (e.g. "Not in Div") — a calm outline so it reads as a qualifier beside the Win/Loss verdict, never as a result of its own. */ .badge--neutral { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 4px 11px; font-weight: 600; } /* --- Squad / player grid ------------------------------------------- */ .squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .player-card { background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; position: relative; overflow: hidden; } .player-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); } .player-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-bright); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: 0.01em; } .player-card--standin .player-card__avatar { background: #A8AAB0; color: var(--cream); font-size: 16px; } .player-card__tag { display: inline-block; font-family: var(--font-body); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); background: var(--cream); padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; } .player-card__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.15; } .player-card__stats { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); } .player-card__stat { display: flex; flex-direction: column; gap: 1px; } .player-card__stat strong { font-family: var(--font-display); font-size: 17px; color: var(--teal); font-variant-numeric: tabular-nums; font-weight: 700; } .player-card__stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* --- Match-page top section (score card + Player of the Day) ------- */ /* Wraps the match-summary and the optional .potd-card. Stacks on mobile * (single column) and splits 50/50 on tablet+ with a gap between. When * there's no POTD for this game, .match-summary is the lone child and * naturally fills the row. */ .match-top { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; } .match-top > .match-summary, .match-top > .potd-card { margin: 0; } @media (min-width: 768px) { .match-top { flex-direction: row; align-items: stretch; } .match-top > * { min-width: 0; } .match-top > .match-summary { flex: 3 1 0; } /* 60% */ .match-top > .potd-card { flex: 2 1 0; } /* 40% */ } /* --- Player of the Day card (match page) --------------------------- */ .potd-card { display: block; background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 22px; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .potd-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-deep) 100%); } .potd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); } .potd-card__badge { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 15px; } .potd-card__body { display: flex; align-items: flex-start; gap: 14px; } .potd-card__avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--gold-bright); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: 0.01em; } .potd-card__info { flex: 1 1 auto; min-width: 0; } .potd-card__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.15; margin-bottom: 10px; } .potd-card__group { margin-top: 12px; } .potd-card__group-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; } .potd-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .potd-card__stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .potd-card__stat strong { font-family: var(--font-display); font-size: 16px; color: var(--teal); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.1; } .potd-card__stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* Match-by-match table: pin the Date column to a width that just fits * 'Saturday DD Mon YYYY' so the trophy sits visually balanced between Date * text and Opponent text instead of being shoved right by an over-wide * Date column. `.table` uses table-layout: fixed, so columns honour their * declared widths literally — 1%-shrink-to-content doesn't work here. */ .date-col { width: 95px; white-space: nowrap; } @media (max-width: 480px) { .date-col { width: 78px; } } /* Centre the numeric stat columns (Runs / Wickets / Given) on the per-player * match-by-match table. Other tables (match page batting/bowling) keep the * default right-aligned .num treatment. */ .table--player-matches .num, .table--player-matches .num-h { text-align: center; } /* Trophy mark in the per-player match-by-match table */ .potd-cell, .potd-h { text-align: center; width: 50px; padding-left: 0; padding-right: 0; white-space: nowrap; overflow: visible; } .trophy { width: 25px; height: 25px; color: #c49327; display: inline-block; vertical-align: middle; } /* --- Drill-down views (player, match) ------------------------------ */ .back { font-size: 13px; color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px; padding: 6px 10px 6px 6px; border-radius: 4px; transition: background 0.15s ease; } .back:hover { background: var(--cream); } .detail-header { display: flex; flex-direction: column; gap: 14px; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: var(--cream); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 22px; } .detail-header__topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .detail-header__main { display: flex; align-items: center; gap: 16px; } .detail-header__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--gold-bright); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 30px; font-weight: 800; flex-shrink: 0; } .detail-header__name { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: 0.01em; line-height: 1.05; } .detail-header__sub { font-size: 13px; color: rgba(245, 239, 224, 0.75); margin-top: 4px; } .detail-header__sub strong { color: var(--cream); font-weight: 700; } /* Personal-best highlight chips inside the dark hero box — clickable, each links to the game it happened in. Value bold, unit/descriptor lighter. */ .hl-row { display: flex; flex-direction: column; gap: 10px; } /* Desktop: player details on the left, the stacked highlight chips on the right. */ .detail-header--player { flex-direction: row; align-items: center; gap: 20px; } .detail-header--player .detail-header__main { flex: 1 1 auto; min-width: 0; } .detail-header--player .hl-row { flex: 0 0 45%; } .hl { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; gap: 1px; background: rgba(245, 239, 224, 0.07); border: 1px solid rgba(245, 239, 224, 0.16); border-radius: 9px; padding: 10px 12px 11px; color: var(--cream); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .hl:hover { background: rgba(245, 239, 224, 0.13); border-color: var(--gold); transform: translateY(-1px); } .hl__chev { position: absolute; top: 9px; right: 11px; font-size: 17px; color: rgba(245, 239, 224, 0.5); } .hl__label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); } .hl__val { font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .hl__unit { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: rgba(245, 239, 224, 0.72); } .hl__ctx { font-size: 11px; color: rgba(245, 239, 224, 0.72); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 22px; } .stat-grid__cell { background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; } .stat-grid__num { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--teal); line-height: 1; font-variant-numeric: tabular-nums; } .stat-grid__label { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 600; } .stat-grid__sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .subhead { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); margin: 22px 0 10px; } /* --- Tables --------------------------------------------------------- */ .table-card { background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; } .table th { background: var(--cream); color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; text-align: left; } .table td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .table td:first-child, .table th:first-child { text-align: left; } .table .num, .table .num-h { text-align: center; width: 100px; padding-left: 24px; } .table .num:last-child, .table .num-h:last-child { width: 150px; padding-right: 50px; } .table tr.player-row { cursor: pointer; } .table tr.player-row:hover td { background: var(--cream); } /* Indoor cricket bats in pairs — each partnership gets a banner row showing the pair number and their combined runs. */ .table--partnerships .partnership-header td { background: #e1d3ab; color: var(--teal-deep); padding: 10px 14px 9px; border-top: none; border-bottom: none; font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; } .table--partnerships .partnership-header + tr td { border-top: none; } .partnership-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .partnership-tag { color: var(--teal-deep); } .partnership-runs { display: inline-flex; align-items: center; gap: 6px; } .partnership-runs__num { color: var(--teal-deep); font-size: 16px; font-weight: 800; letter-spacing: 0; } .partnership-runs__label { color: rgba(14, 53, 61, 0.65); font-size: 10px; font-weight: 600; } /* --- Match view ----------------------------------------------------- */ /* Two stacked team rows with a "vs" pill on the divider, crest on the left, score on the right, result text underneath. Inspired by the cricket scorecard idiom — works the same on mobile and desktop. */ .match-summary { background: var(--cream-warm); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; overflow: hidden; } .match-summary__row { display: flex; align-items: center; gap: 16px; padding: 18px 22px; } .match-summary__crest { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 800; flex-shrink: 0; } .match-summary__crest--us { background: var(--gold-bright); } .match-summary__crest svg { width: 28px; height: 28px; } .match-summary__name { flex: 1; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; min-width: 0; } .match-summary__score { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--teal-deep); font-variant-numeric: tabular-nums; line-height: 1; } .match-summary__row--lost .match-summary__name, .match-summary__row--lost .match-summary__score { color: var(--muted); font-weight: 600; } .match-summary__divider { position: relative; height: 1px; background: var(--line); margin: 0 22px; } .match-summary__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--cream-warm); color: var(--muted); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); } .match-summary__result { padding: 14px 22px 18px; border-top: 1px solid var(--line); background: var(--cream); color: var(--ink-soft); font-size: 13px; font-weight: 500; } /* --- Responsive ----------------------------------------------------- */ @media (max-width: 600px) { .app { padding: 16px 14px 20px; } .header__inner { padding: 0 14px; } .hero { padding: 22px 18px; border-radius: 5px; } .hero__date { font-size: 24px; } .hero__opp { font-size: 22px; } .hero__tile { min-width: 78px; padding: 8px 12px 10px; } .hero__tile-num { font-size: 36px; } .hero__body { gap: 14px; } .chip-row { flex-direction: column; gap: 10px; } .record { grid-template-columns: repeat(2, 1fr); } .record__num { font-size: 26px; } .detail-header { padding: 16px; gap: 12px; position: relative; } .detail-header:has(.badge) { padding-right: 90px; } .detail-header__avatar { width: 52px; height: 52px; font-size: 20px; } .detail-header__name { font-size: 22px; } /* Player hero: avatar beside name on desktop (via __main), stacked on mobile. */ .detail-header--player { flex-direction: column; align-items: stretch; gap: 18px; } .detail-header--player .detail-header__main { flex-direction: column; align-items: flex-start; gap: 12px; } .detail-header--player .hl-row { flex: 0 0 auto; } .detail-header__name .badge { position: absolute; top: 14px; right: 14px; margin-left: 0; } .match-summary__row { padding: 14px 16px; gap: 12px; } .match-summary__crest { width: 36px; height: 36px; font-size: 16px; } .match-summary__crest svg { width: 24px; height: 24px; } .match-summary__name { font-size: 16px; } .match-summary__score { font-size: 28px; } .match-summary__divider { margin: 0 16px; } .match-summary__result { padding: 12px 16px 16px; font-size: 12px; } .table { font-size: 12px; } .table th, .table td { padding: 8px 10px; } .table .num, .table .num-h { width: 56px; padding-left: 10px; } .table .num:last-child, .table .num-h:last-child { width: 80px; padding-right: 20px; } } /* Player match-by-match — Date · 🏆 · Opponent · R · SR · W · ER, echoing the fixture-day scorecard conventions (abbreviated headers + the same tooltips). Auto layout so the four stat columns size to content and the opponent takes the rest (wrapping to max 2 lines when long); the year drops off the date on mobile so all four stats fit. */ .table.table--player-matches { table-layout: auto; } .table--player-matches th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Keep the cell a real table-cell (so it fills the row height); clamp the name on an inner span — -webkit-box on the itself breaks table-cell layout. */ .table--player-matches td.opp { white-space: normal; } .table--player-matches .opp-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; } .table.table--player-matches .num, .table.table--player-matches .num-h { width: auto; padding-left: 8px; padding-right: 8px; } @media (max-width: 480px) { .table--player-matches .date-col { width: 64px; } .table--player-matches .yr { display: none; } .table--player-matches .potd-cell, .table--player-matches .potd-h { width: 28px; } .table.table--player-matches .num, .table.table--player-matches .num-h { padding-left: 5px; padding-right: 5px; } } /* Match scorecard — dense stat tables. Narrow numeric columns so the full set (batting R/B/4+/6+/SR, bowling W/R/WD/NB/ER) fits on desktop; on mobile the .dk-only columns are hidden for a curated view (batting R/B/SR, bowling W/R/ER). */ /* Mobile/base: auto layout so hidden (dk-only) columns + the colspan partnership banners collapse cleanly instead of reserving empty width. */ .table.table--scorecard { table-layout: auto; } .table.table--scorecard .num, .table.table--scorecard .num-h { width: auto; padding-left: 8px; padding-right: 8px; } @media (max-width: 480px) { .table--scorecard .dk-only { display: none; } .table.table--scorecard .num, .table.table--scorecard .num-h { padding-left: 5px; padding-right: 5px; } } /* Desktop: a fixed geometry so every scorecard table (Firebirds + opposition, batting + bowling) shares identical column widths and lines up perfectly — no more one table coming out skinnier than another. The five stat columns are a narrow, uniform 68px (matching the player page's match-by-match columns); the name column takes the remaining width, like the Opponent column there. */ @media (min-width: 481px) { .table.table--scorecard { table-layout: fixed; } .table.table--scorecard th:first-child { width: auto; } .table.table--scorecard .num, .table.table--scorecard .num-h { width: 68px; } } /* --- Tooltips ------------------------------------------------------- */ /* Custom tooltip for [data-tip] headers — replaces the slow, unstyled native title. The JS appends one .fb-tip to (fixed position) so it never clips against the table-card's overflow:hidden. */ [data-tip] { cursor: pointer; /* Tapping a header to see its tooltip shouldn't select/highlight the letter or pop the iOS copy menu — but the tap itself still works. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .fb-tip { position: fixed; z-index: 1000; max-width: 220px; padding: 7px 11px; border-radius: 8px; background: var(--teal-deep); color: var(--cream); font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.005em; text-align: left; text-transform: none; box-shadow: 0 8px 22px rgba(14, 53, 61, 0.30), 0 1px 3px rgba(14, 53, 61, 0.22); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 130ms ease, transform 130ms ease; } .fb-tip.is-visible { opacity: 1; transform: translateY(0); } /* downward arrow at the tooltip's bottom, pointing at the target below it, centred via the --tip-arrow offset (the tooltip sits above the target). */ .fb-tip::before { content: ""; position: absolute; top: 100%; left: var(--tip-arrow, 50%); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--teal-deep); } /* --- Footer --------------------------------------------------------- */ .footer { text-align: center; padding: 10px 16px 24px; /* Clear the iOS home indicator when running edge-to-edge (native app / PWA). env() falls back to 0 in browsers without a safe area, so the website is unaffected. */ padding-bottom: calc(24px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; } .footer a { color: var(--teal); font-weight: 600; } .footer a:hover { text-decoration: underline; } .footer-short { display: none; } @media (max-width: 480px) { .footer-long { display: none; } .footer-short { display: inline; } } .footer p { margin: 0; } .footer p + p { margin-top: 10px; margin-bottom: 10px; } /* "Updated X ago" — moved here from the header. First line of the footer, centred, a touch more prominent than the fine print, with room around it so the data-freshness is clearly its own statement. */ .footer-updated { color: var(--ink-soft); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 15px 0 35px; } .footer-fineprint { margin-top: 4px; color: var(--muted); font-size: 13px; } /* --- Ladder / leaderboard ------------------------------------------ */ /* Home record card: the 4th cell is an linking to the leaderboard. */ a.record__cell--link { display: block; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } a.record__cell--link:hover { border-color: var(--teal-soft); } a.record__cell--link:active { transform: translateY(1px); } a.record__cell--link .record__num { color: var(--gold-deep); } /* Leaderboard table — auto layout (10 columns), tighter than the default. */ .table.table--ladder { table-layout: auto; } .table.table--ladder .num, .table.table--ladder .num-h { width: auto; padding-left: 10px; padding-right: 10px; } .table--ladder .ladder-pos { font-weight: 700; color: var(--teal); width: 1%; } .table--ladder .ladder-pts, .table--ladder .num-h:last-child { font-weight: 700; } .table--ladder .ladder-pts { color: var(--gold-deep); } .table--ladder .ladder-team, .table--ladder .ladder-team-h { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table--ladder .ladder-team { font-weight: 600; color: var(--teal-deep); } /* Each ladder row is a whole-row link to a team page, so give the cells extra vertical padding for a comfortable tap target — bigger again on mobile, where rows are tapped rather than clicked. */ .table.table--ladder td { padding-top: 15px; padding-bottom: 15px; } /* Larger, more legible leaderboard text (the base 12px on mobile was too small for older readers). */ .table.table--ladder { font-size: 16px; } .table.table--ladder th { font-size: 12px; } @media (max-width: 560px) { .table--ladder .dk-only { display: none; } .table.table--ladder td { padding-top: 19px; padding-bottom: 19px; } } /* --- Division team pages (Phase 2) --------------------------------- */ /* Leaderboard rows are whole-row tap targets (no inline text links) — matches the result-card / player-row pattern. Every row links to its team page. */ .table--ladder tbody tr.ladder-row:not([data-target-hash=""]) { cursor: pointer; } .table--ladder tbody tr.ladder-row:not([data-target-hash=""]):hover td { background: var(--cream); } .empty-note { color: var(--muted); font-size: 14px; padding: 8px 2px; } /* Qualifier above an out-of-division team's stat tables, styled as a centered divider: the label sits between two hairlines that run to the full width, so it reads as one ruled line broken by the text in the middle. Subtle but intentional; heads the greyed-out (inactive) block below it. */ .match-note { display: flex; align-items: center; gap: 16px; margin: 40px 0 20px; color: var(--muted); font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; } .match-note::before, .match-note::after { content: ""; flex: 1; height: 1px; background: var(--line); } .match-note + .subhead { margin-top: 0; } /* An out-of-division team's batting/bowling tables (and their titles) render "inactive": every gold/teal/cream accent drops to a neutral grey so it's clear the team isn't in the division and its rows aren't tappable — while each stat stays fully legible. Visual hierarchy is preserved purely through shades of grey (band darker than header, header darker than card). */ .match-inactive .subhead { color: var(--muted); } .match-inactive .table-card { background: #f1f1ef; border-color: #dcdcd8; } .match-inactive .table th { background: #e7e7e4; color: var(--muted); } .match-inactive .table td { color: var(--ink-soft); border-top-color: #e4e4e1; } .match-inactive .table--partnerships .partnership-header td { background: #dadad6; color: var(--ink-soft); } .match-inactive .partnership-tag, .match-inactive .partnership-runs__num { color: var(--ink-soft); } .match-inactive .partnership-runs__label { color: var(--muted); }