/* ############################################################## ############### JASPR MMA — PUBLIC BROWSE UI ############## ############### Single stylesheet, mobile-first ########### ############################################################## */ /* ================================================================ THEME TOKENS — every component reads from these custom props. ================================================================ */ :root { --bg-base: #0e0d18; --bg-elev: #16162a; --bg-elev-strong: #1c1c34; --fg-strong: #f0f0f5; --fg-muted: #a4a4b8; --fg-faint: #6c6c80; --accent-cool: #3aa9b4; --accent-warm: #a4456b; --border-thin: rgba(240, 240, 245, 0.10); --border-mid: rgba(240, 240, 245, 0.20); --border-strong: rgba(240, 240, 245, 0.40); --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.30); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; --gap-7: 48px; --maxw-content: 1080px; /* Inter is loaded as a proper webfont via layout.ejs's in the , with Noto Sans loaded alongside it as a coverage fallback for non-Latin scripts. Both get listed here so the browser can fall through to system-ui if the network fonts fail to load (offline / SW cache miss / blocked CDN). */ --font-sans: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", Consolas, monospace; } /* ================================================================ MICRO-RESET — only what we need; no Normalize, no Tailwind reset. ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ================================================================ BODY — Jaspr-brand gradient. Fixed attachment so the gradient doesn't tile or scroll on long pages. `100dvh` (dynamic viewport height) avoids the iOS Safari quirk where 100vh leaves a strip behind the dynamic toolbar. ================================================================ */ body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--fg-strong); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; /* Solid base colour — the brand gradient lives on the fixed pseudo-element below so it doesn't trigger iOS Safari's background-attachment:fixed jank, which was making vertical scroll feel laggy/sticky on real devices. */ background-color: #0a0e1c; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Allow native vertical overscroll/pull-to-refresh — only block horizontal so the user can't sideswipe into a stuck page. */ overscroll-behavior-x: none; /* Forbid text-size auto-bumping when iOS rotates to landscape. */ -webkit-text-size-adjust: 100%; /* `clip` instead of `hidden` so we visually trim a stray wide child WITHOUT creating a body-level scroll container. A scroll container on body breaks iOS Safari momentum scrolling and can disable position:sticky on descendants. Older Safari falls back to `hidden`. */ overflow-x: hidden; overflow-x: clip; } html { /* Same reasoning as body above. */ overflow-x: hidden; overflow-x: clip; } /* Fixed background gradient lives on a pseudo-element so it never causes iOS Safari to recomposite the page on every scroll tick. pointer-events:none keeps it click-through; z-index:-1 puts it behind every actual page element. inset:0 + position:fixed pin it to the viewport so the gradient stays put while content scrolls. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(58, 169, 180, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(164, 69, 107, 0.12) 0%, transparent 55%), linear-gradient(135deg, #0a0e1c 0%, #14101e 50%, #0f0a1a 100%); } /* Re-assert HTML5 [hidden] attribute — author rules below sometimes override the UA stylesheet's [hidden] { display: none } at equal specificity. With !important here, JS-toggled hide/show via the [hidden] attribute remains reliable everywhere on the page. */ [hidden] { display: none !important; } /* The .mobile-only / .desktop-only classes in the layout are *semantic markers only* — no global display rule. Each element below carries its own visibility (default and responsive) so that the @media block can grant the correct `display` value (grid, flex, inline-flex, etc.) without a utility-class !important war. */ /* Visually-hidden helper for screen-reader-only labels. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ================================================================ HEADER — sticky brand mark + global search ================================================================ */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border-thin); backdrop-filter: blur(8px); background: rgba(14, 13, 24, 0.75); } .header-inner { display: flex; align-items: center; gap: var(--gap-4); max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--gap-4); height: 56px; } .brand { /* Brand link — Jaspr family icon paired with the "JASPR MMA" wordmark. inline-flex aligns the two pieces on a shared baseline; the gap controls the air between icon and text. */ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } /* Icon — same SVG as jaspr-admin-web for visual continuity across the Jaspr suite. Sized to sit just inside the 56px header height; aspect ratio is 1:1 (250×250 viewBox) so a single dimension is enough. Drop shadow gives a low-contrast lift on the dark backdrop. */ .brand-logo { display: block; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } /* Wordmark wrapper — keeps the two coloured spans on the same baseline as a single typographic unit, independent of the icon. */ .brand-wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 16px; color: var(--fg-strong); line-height: 1; } .brand-mark { color: var(--accent-cool); } .brand-tail { color: var(--fg-strong); } .global-search { position: relative; flex: 1 1 auto; max-width: 540px; margin-left: auto; } .global-search-input { width: 100%; height: 36px; padding: 0 var(--gap-3); background: transparent; border: 1px solid var(--border-mid); border-radius: var(--radius-md); color: var(--fg-strong); outline: none; transition: border-color 100ms linear; } .global-search-input::placeholder { color: var(--fg-muted); } .global-search-input:focus { border-color: var(--accent-cool); } .global-search-results { position: absolute; top: 40px; left: 0; right: 0; max-height: 60vh; overflow: auto; background: var(--bg-elev); border: 1px solid var(--border-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-1); z-index: 60; } .search-dropdown-inner { padding: var(--gap-2) 0; } .search-empty { padding: var(--gap-3) var(--gap-4); color: var(--fg-muted); font-size: 14px; } .search-group { padding: var(--gap-2) 0; } .search-group + .search-group { border-top: 1px solid var(--border-thin); } .search-group-title { padding: 0 var(--gap-4) var(--gap-1) var(--gap-4); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-faint); text-transform: uppercase; } .search-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-3); padding: var(--gap-2) var(--gap-4); font-size: 14px; } .search-row:hover { background: var(--bg-elev-strong); } .search-row-title { color: var(--fg-strong); } .search-row-meta { color: var(--fg-muted); font-size: 12px; } /* App-bar action button (mobile search, etc.). Hidden by default because the only one in the layout today is the mobile search trigger; the mobile breakpoint reveals it with display:inline-flex. */ .app-bar-action { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--fg-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; } .app-bar-action:hover { background: var(--bg-elev); border-color: var(--border-thin); } .app-bar-action:active { transform: scale(0.96); } /* Mobile-shell elements — hidden by default so they never affect the desktop layout. The mobile breakpoint at the bottom of this stylesheet flips them on with their proper display value. */ .mobile-tabs, .mobile-search-overlay, .mobile-more-sheet { display: none; } /* ================================================================ NAV — section strip below the header ================================================================ */ .site-nav { display: flex; gap: var(--gap-4); max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--gap-4) var(--gap-2); overflow-x: auto; } .nav-link { padding: var(--gap-1) 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--fg-strong); } .nav-link-active { color: var(--accent-cool); border-bottom-color: var(--accent-cool); } /* ================================================================ MAIN — content container ================================================================ */ .site-main { max-width: var(--maxw-content); margin: 0 auto; padding: var(--gap-5) var(--gap-4) var(--gap-7); } /* ================================================================ PAGE HEADER ================================================================ */ .page-header { margin-bottom: var(--gap-5); } .page-header h1 { margin: 0 0 var(--gap-1) 0; font-size: 28px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-strong); } .page-sub { margin: 0; color: var(--fg-muted); font-size: 14px; } .detail-header { margin-bottom: var(--gap-6); } .detail-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; color: var(--accent-cool); text-transform: uppercase; margin-bottom: var(--gap-1); } .detail-meta { margin-top: var(--gap-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); color: var(--fg-muted); font-size: 14px; } .detail-sub { margin-top: var(--gap-2); color: var(--fg-muted); font-size: 14px; } .detail-id { margin-top: var(--gap-2); color: var(--fg-faint); font-size: 12px; } /* ================================================================ SECTION HEADERS ================================================================ */ .detail-section { margin-top: var(--gap-6); } .detail-section h2, .home-section h2, .home-tiles h2, .ranking-promo h2 { margin: 0 0 var(--gap-3) 0; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-strong); padding-bottom: var(--gap-2); border-bottom: 2px solid var(--border-thin); } /* ================================================================ HOME — hero + tile grid ================================================================ */ .home-hero { margin-bottom: var(--gap-6); } .hero-card { display: block; padding: var(--gap-5); background: var(--bg-elev); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: border-color 120ms linear; } .hero-card:hover { border-color: var(--border-strong); } .hero-empty:hover { border-color: var(--border-mid); } .hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-cool); text-transform: uppercase; } .hero-title { margin: var(--gap-2) 0 var(--gap-2) 0; font-size: 24px; font-weight: 700; color: var(--fg-strong); } .hero-meta { display: flex; flex-wrap: wrap; gap: var(--gap-2); color: var(--fg-muted); font-size: 14px; } .hero-sub { margin-top: var(--gap-2); color: var(--fg-muted); font-size: 14px; } .hero-cta { margin-top: var(--gap-3); color: var(--accent-cool); font-weight: 600; font-size: 14px; } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3); } .tile { display: block; padding: var(--gap-4); background: var(--bg-elev); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); transition: border-color 120ms linear, transform 120ms ease; } .tile:hover { border-color: var(--border-strong); transform: translateY(-1px); } .tile-title { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-strong); } .tile-sub { margin-top: var(--gap-1); color: var(--fg-muted); font-size: 13px; } .home-section { margin-top: var(--gap-6); } .home-search-fallback { margin-top: var(--gap-5); } .search-fallback-body { background: var(--bg-elev); border: 1px solid var(--border-mid); border-radius: var(--radius-md); } /* ================================================================ FILTER FORM — list-page filter strip ================================================================ */ .filter-form { margin-bottom: var(--gap-4); } .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap-2); } .filter-field { display: flex; flex-direction: column; gap: var(--gap-1); min-width: 120px; } .filter-field-grow { flex: 1 1 220px; } .filter-field-toggle { min-width: 140px; } .filter-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); } .filter-input { height: 36px; padding: 0 var(--gap-2); background: transparent; border: 1px solid var(--border-mid); border-radius: var(--radius-sm); color: var(--fg-strong); outline: none; } .filter-input:focus { border-color: var(--accent-cool); } .filter-submit { height: 36px; padding: 0 var(--gap-4); background: var(--accent-cool); color: #06121a; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .filter-submit:hover { filter: brightness(1.1); } /* ================================================================ ALPHA STRIP — A–Z jump on /fighters ================================================================ */ .alpha-strip { display: flex; flex-wrap: wrap; gap: var(--gap-1); margin-bottom: var(--gap-4); } .alpha-link { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--gap-2); background: var(--bg-elev); border: 1px solid var(--border-thin); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--fg-muted); } .alpha-link:hover { color: var(--fg-strong); border-color: var(--border-mid); } .alpha-active { color: var(--bg-base); background: var(--accent-cool); border-color: var(--accent-cool); } /* ================================================================ LIST CARDS — events / fighters / fights / teams / promotions ================================================================ */ .card-list { display: flex; flex-direction: column; gap: var(--gap-2); } .row-card { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4); padding: var(--gap-4); background: var(--bg-elev); border: 1px solid var(--border-thin); border-radius: var(--radius-md); transition: background 100ms linear, border-color 100ms linear; } .row-card:hover { background: var(--bg-elev-strong); border-color: var(--border-mid); } .row-main { flex: 1 1 auto; min-width: 0; } .row-title { font-size: 16px; font-weight: 600; color: var(--fg-strong); overflow-wrap: anywhere; } .row-meta { margin-top: var(--gap-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); color: var(--fg-muted); font-size: 13px; } .row-sub { margin-top: var(--gap-1); color: var(--fg-muted); font-size: 13px; } .row-id { color: var(--fg-faint); font-size: 11px; flex-shrink: 0; } .meta-sep { color: var(--fg-faint); } .meta-pill { display: inline-block; padding: 0 var(--gap-2); background: var(--bg-elev-strong); border: 1px solid var(--border-thin); border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-strong); } .meta-status, .meta-result, .meta-record { color: var(--fg-strong); } .meta-muted { color: var(--fg-muted); } .nickname { color: var(--fg-muted); font-weight: 400; margin-left: var(--gap-1); } .winner-badge { display: inline-block; padding: 0 var(--gap-2); margin-right: var(--gap-1); background: var(--accent-cool); color: var(--bg-base); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; } /* ================================================================ PAGER ================================================================ */ .pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-1); margin-top: var(--gap-4); } .pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--gap-2); background: var(--bg-elev); border: 1px solid var(--border-thin); border-radius: var(--radius-sm); font-size: 13px; color: var(--fg-strong); } .pager-link:hover { border-color: var(--border-mid); } .pager-current { color: var(--accent-cool); border-color: var(--accent-cool); background: transparent; } .pager-disabled { opacity: 0.30; cursor: not-allowed; } .pager-summary { margin-left: var(--gap-3); color: var(--fg-muted); font-size: 12px; } /* ================================================================ EMPTY STATE ================================================================ */ .empty-state { text-align: center; padding: var(--gap-7) var(--gap-4); color: var(--fg-muted); } .empty-title { font-size: 16px; font-weight: 600; color: var(--fg-strong); margin-bottom: var(--gap-1); } .empty-message { font-size: 14px; } /* ================================================================ ERROR ROW (used by fragments) ================================================================ */ .error-row { padding: var(--gap-3); border: 1px solid var(--accent-warm); color: var(--accent-warm); border-radius: var(--radius-sm); background: rgba(164, 69, 107, 0.08); font-size: 14px; } /* ================================================================ DETAIL — kv grid + corners ================================================================ */ .kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--gap-1) var(--gap-4); margin: 0; } .kv-grid dt { color: var(--fg-faint); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .kv-grid dd { color: var(--fg-strong); margin: 0; } .corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); } .corner-card { padding: var(--gap-4); background: var(--bg-elev); border: 1px solid var(--border-thin); border-radius: var(--radius-md); } .corner-winner { border-color: var(--accent-cool); } .corner-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-faint); text-transform: uppercase; margin-bottom: var(--gap-1); } .corner-name { display: block; font-size: 18px; font-weight: 600; color: var(--fg-strong); } .corner-record { color: var(--fg-muted); font-size: 13px; margin-top: var(--gap-1); } .vs { color: var(--fg-faint); font-weight: 400; } .more-link-row { margin-top: var(--gap-3); text-align: right; } .more-link { color: var(--accent-cool); font-size: 13px; font-weight: 600; } /* ================================================================ RANKINGS ================================================================ */ .ranking-promo { margin-top: var(--gap-6); } .division-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap-3); } .division-card { padding: var(--gap-4); background: var(--bg-elev); border: 1px solid var(--border-thin); border-radius: var(--radius-md); } .division-name { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-strong); margin-bottom: var(--gap-2); padding-bottom: var(--gap-1); border-bottom: 1px solid var(--border-thin); } .division-empty { color: var(--fg-muted); font-size: 13px; } .rank-list { list-style: none; margin: 0; padding: 0; } .rank-row { display: flex; align-items: baseline; gap: var(--gap-3); padding: var(--gap-1) 0; font-size: 14px; } .rank-num { color: var(--fg-faint); width: 32px; text-align: right; } .rank-name { color: var(--fg-strong); } .rank-name:hover { color: var(--accent-cool); } /* ================================================================ FOOTER ================================================================ */ .site-footer { border-top: 1px solid var(--border-thin); padding: var(--gap-4) 0; } .footer-inner { max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--gap-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); color: var(--fg-faint); font-size: 12px; } .footer-sep { color: var(--fg-faint); } .footer-inner a { color: var(--fg-muted); } .footer-inner a:hover { color: var(--fg-strong); } /* ================================================================ MONOSPACE UTILITY ================================================================ */ .mono { font-family: var(--font-mono); } /* ================================================================ ================================================================ MOBILE APP SHELL ================================================================ Below 720px the layout transforms into a full-screen PWA shell: - compact app bar with brand + search-icon button - hidden inline search; tapping the icon opens a full-screen overlay so the on-screen keyboard owns the viewport - desktop section nav is hidden; replaced by a sticky bottom tab bar (Home / Events / Fighters / Fights / More) - desktop footer is hidden (its links live in the More sheet) - safe-area-inset paddings keep content clear of notches and the iOS home-indicator strip The desktop layout above is unchanged at >720px. ================================================================ */ @media (max-width: 720px) { /* ---- Visibility flips ------------------------------------- */ /* Hide desktop-only elements: section nav + the site footer. The .mobile-only elements are revealed individually below (each with the correct display value for its element type). */ .site-nav.desktop-only, .site-footer.desktop-only { display: none; } /* Reveal the mobile app-bar search trigger. */ .app-bar-action.mobile-only { display: inline-flex; } /* ---- App bar — compact, single-row, no border below ------- */ .site-header { /* Deepen the blur and darken slightly so it reads as a real app bar against busy content underneath. */ background: rgba(14, 13, 24, 0.88); border-bottom: 1px solid var(--border-thin); /* Reach under the iOS notch when in standalone mode. */ padding-top: env(safe-area-inset-top, 0px); } .header-inner { flex-direction: row; align-items: center; height: 52px; padding: 0 var(--gap-3); gap: var(--gap-2); } /* Tighter brand mark on mobile — keeps the header bar from feeling top-heavy in the narrower app-bar layout. Both the icon and the wordmark scale down together. */ .brand { gap: 8px; } .brand-logo { width: 22px; height: 22px; } .brand-wordmark { font-size: 14px; } /* Hide the inline search field — replaced by overlay. */ .global-search { display: none; } /* Push the search button to the trailing edge. */ .app-bar-action.mobile-only { margin-left: auto; } /* ---- Main content padding — clear room for the bottom tab bar (50px row + safe-area-inset). The +14px buffer keeps the last list item from kissing the bar's top edge. --- */ .site-main { padding: var(--gap-4) var(--gap-3); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* ---- Page-header sizing reigned in for phone widths -------- */ .page-header h1 { font-size: 22px; } .page-header { margin-bottom: var(--gap-4); } .hero-title { font-size: 20px; } /* ---- Section headers — slightly tighter on small screens --- */ .detail-section h2, .home-section h2, .home-tiles h2, .ranking-promo h2 { font-size: 15px; } /* ---- Tile grid: stack to single column ------------------- */ .tile-grid { grid-template-columns: 1fr; } .corner-grid { grid-template-columns: 1fr; } /* ---- Filter strip: stack vertically with full-width inputs. The desktop `.filter-field-grow { flex: 1 1 220px }` and `.filter-field-toggle { min-width: 140px }` make sense on a horizontal row, but in a column flex they cause every field to claim 220px of *vertical* space and stretch to fill any leftover — producing a tall blank gap below each field. Reset the flex sizing so each field is exactly as tall as its label + input. */ .filter-row { flex-direction: column; align-items: stretch; gap: var(--gap-3); } .filter-field, .filter-field-grow, .filter-field-toggle { flex: 0 0 auto; /* no grow, no shrink, natural height */ min-width: 0; min-height: 0; width: auto; } .filter-input, .filter-submit { height: 44px; font-size: 15px; } .filter-submit { width: 100%; } /* ---- List rows: vertical stack, breathe more on touch ---- */ .row-card { flex-direction: column; align-items: flex-start; gap: var(--gap-2); padding: var(--gap-3); } .row-id { align-self: flex-start; font-size: 10px; } .row-title { font-size: 15px; } .row-meta { font-size: 12px; } /* Cards / tiles: slightly tighter padding for narrow screens */ .hero-card { padding: var(--gap-4); } .division-card, .corner-card { padding: var(--gap-3); } /* Pager touch targets (Apple HIG min: 44×44). */ .pager-link { min-width: 40px; height: 40px; font-size: 14px; } .pager-summary { font-size: 11px; } /* Alpha strip slightly larger for thumb tapping. */ .alpha-link { min-width: 32px; height: 32px; } /* Detail kv-grid: stack rather than two-column on phones. */ .kv-grid { grid-template-columns: 1fr; gap: var(--gap-1); } .kv-grid dt { margin-top: var(--gap-2); } /* ============================================================ MOBILE SEARCH OVERLAY — full-screen modal launched by the app-bar search button. Slides up via opacity+translate. ============================================================ */ .mobile-search-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--bg-base); padding-top: env(safe-area-inset-top, 0px); /* Animate in/out via the .is-open class set by app.js. */ opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .mobile-search-overlay.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-search-bar { display: flex; align-items: center; gap: var(--gap-2); padding: var(--gap-2) var(--gap-3); border-bottom: 1px solid var(--border-thin); background: rgba(14, 13, 24, 0.95); } .mobile-search-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--fg-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-search-close:hover { background: var(--bg-elev); } .mobile-search-close:active { transform: scale(0.96); } .mobile-search-input { flex: 1 1 auto; height: 44px; padding: 0 var(--gap-3); background: var(--bg-elev); border: 1px solid var(--border-mid); border-radius: var(--radius-md); color: var(--fg-strong); font-size: 16px; /* >=16px to suppress iOS auto-zoom */ outline: none; } .mobile-search-input:focus { border-color: var(--accent-cool); } .mobile-search-results { flex: 1 1 auto; overflow-y: auto; padding: var(--gap-2) 0 calc(var(--gap-4) + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; } /* Re-skin the desktop search-row styles so the overlay results read like a native search list. */ .mobile-search-results .search-row { padding: var(--gap-3) var(--gap-4); font-size: 15px; border-bottom: 1px solid var(--border-thin); } .mobile-search-results .search-group-title { font-size: 11px; } .mobile-search-results .search-empty { padding: var(--gap-4); text-align: center; } /* ============================================================ MOBILE BOTTOM TAB BAR — sticky primary nav. Total bar height = 50px tab row + env(safe-area-inset-bottom). On a typical iPhone that's ~84px; on Android with no inset it is exactly 50px. Kept compact so the bar never eats more than ~10% of the viewport on small phones, and so iOS Safari's URL bar can't push the visible tab row off the screen. ============================================================ */ .mobile-tabs { position: fixed; left: 0; right: 0; bottom: 0; /* Pin width to the viewport (NOT the document) — otherwise a horizontal scrollbar elsewhere on the page would let this fixed bar match the document width and slide off the right edge. `100vw` is intentional here. */ width: 100vw; max-width: 100vw; z-index: 90; display: grid; /* `minmax(0, 1fr)` rather than `1fr` — bare `1fr` is `minmax(auto, 1fr)`, where the `auto` minimum is each track's min-content size. SVG icons + an unbreakable label can push that auto-min above 1/5 of the bar, growing the grid wider than the viewport. The explicit `0` minimum forces equal fifths regardless of intrinsic child sizing. */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: rgba(14, 13, 24, 0.92); border-top: 1px solid var(--border-thin); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Pad below the row to clear the iOS home-indicator. The `max` ensures we always have at least 0 even when the env() value is unsupported (where it falls back to 0px anyway). */ padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px); /* Cosmetic: faint glow above the bar so it floats. */ box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25); /* Stop a stray child margin from extruding the bar wider. */ overflow: hidden; } .mobile-tab { /* Containing block for the absolutely-positioned active marker. */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; /* min-width:0 lets grid cells shrink so labels can ellipsis instead of forcing the bar wider than the viewport. */ min-width: 0; /* min-height instead of height so the safe-area-aware tap region scales cleanly when system metrics change. */ min-height: 50px; padding: 6px 2px 4px; background: transparent; border: 0; color: var(--fg-muted); font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 120ms linear; } .mobile-tab:active { transform: scale(0.94); } .mobile-tab-icon { width: 22px; height: 22px; flex-shrink: 0; } .mobile-tab-label { /* Truncate-on-overflow rather than wrap so a long label can never push the cell taller than expected and clip the icon. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .mobile-tab-active { color: var(--accent-cool); } /* Active marker — a short cyan bar pinned to the TOP of the tab, positioned with explicit top/left so it stays inside the tap region regardless of icon/label sizes. (The previous `margin-top: -10px` shoved it above the bar where the parent's `overflow: hidden` would clip it.) */ .mobile-tab-active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent-cool); } /* ============================================================ MOBILE "MORE" SHEET — bottom sheet with secondary destinations. ============================================================ */ .mobile-more-sheet { /* Reveal at this breakpoint; default-stylesheet rule at the top of this file keeps it hidden on desktop. The [hidden] attribute (toggled by app.js) still hides it when the sheet is closed, thanks to the global `[hidden] { display: none !important }` rule near the top of this file. */ display: block; position: fixed; inset: 0; z-index: 110; /* Animate in via .is-open. */ pointer-events: none; } .mobile-more-sheet.is-open { pointer-events: auto; } .mobile-more-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 160ms ease; } .mobile-more-sheet.is-open .mobile-more-backdrop { background: rgba(0, 0, 0, 0.55); } .mobile-more-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: var(--bg-elev); border-top: 1px solid var(--border-mid); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--gap-2) var(--gap-3) calc(var(--gap-4) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4); } .mobile-more-sheet.is-open .mobile-more-panel { transform: translateY(0); } .mobile-more-handle { width: 40px; height: 4px; background: var(--border-mid); border-radius: 2px; margin: var(--gap-2) auto var(--gap-3); } .mobile-more-title { margin: 0 0 var(--gap-2) var(--gap-2); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-faint); } .mobile-more-link { display: flex; flex-direction: column; gap: 2px; padding: var(--gap-3) var(--gap-3); border-top: 1px solid var(--border-thin); color: var(--fg-strong); -webkit-tap-highlight-color: transparent; } .mobile-more-link:first-of-type { border-top: 0; } .mobile-more-link:active { background: var(--bg-elev-strong); } .mobile-more-link-label { font-size: 16px; font-weight: 600; } .mobile-more-link-sub { font-size: 12px; color: var(--fg-muted); } .mobile-more-link-active .mobile-more-link-label { color: var(--accent-cool); } .mobile-more-close { margin-top: var(--gap-3); width: 100%; height: 44px; background: transparent; border: 1px solid var(--border-mid); border-radius: var(--radius-md); color: var(--fg-strong); font-weight: 600; cursor: pointer; } .mobile-more-close:active { background: var(--bg-elev-strong); } /* When the More sheet or search overlay is open, freeze body scroll — the .body-scroll-lock class is added by app.js. */ } /* Body scroll lock — applied at all sizes (safe even on desktop). */ body.body-scroll-lock { overflow: hidden; /* Touch devices: also block iOS pull-to-refresh while locked. */ touch-action: none; } /* ================================================================ STANDALONE PWA TWEAKS — applied only when launched from the home screen. Hides any chrome we'd otherwise leave for the browser tab and tightens the spacing one more notch. ================================================================ */ @media (display-mode: standalone) { /* Reserve a tiny extra strip at the top to suggest "app bar" even with the system status bar overlay. */ .site-header { backdrop-filter: blur(14px); } } /* ================================================================ REDUCED MOTION — respect the user setting ================================================================ */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .mobile-more-panel { transition: none !important; } }