@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: #0a0a0a; font-family: 'Rajdhani', sans-serif; overflow: hidden; /* pan-x/pan-y (not "manipulation") — this app should never zoom at all, on any page: "manipulation" still lets a two-finger pinch zoom the page even with double-tap-zoom disabled, so it's not enough on its own. Combined with each page's own viewport meta tag (user-scalable=no) as a second layer, since some mobile browsers don't fully honor that meta tag by itself. */ touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; } body { display: flex; align-items: center; justify-content: center; } a { text-decoration: none; } /* ============== SITE-WIDE ANNOUNCEMENT BANNER (all pages) ============== Admin-triggered site-wide message (see admin_dashboard.html's SITE-WIDE ANNOUNCEMENT BANNER card and static/js/maintenance-banner.js) — the JS builds this element itself and appends it to , so there's no markup to add to any individual template. No close button on purpose: it stays up until the admin turns it off, not until a driver dismisses it. See .phone's margin-top/height rules above for how the rest of the page shifts down to stay clear of it instead of being covered. Severity (see .sev-* below) picks the color; red is the base/default so an unset or unrecognized severity still reads as a real warning. */ .maintenance-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: none; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 4vw; padding-top: calc(9px + env(safe-area-inset-top)); background: linear-gradient(90deg, #200606, #3d0f0c 50%, #200606); background-size: 200% 100%; color: #9dff3f; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(13px, 3vw, 16px); letter-spacing: 0.4px; text-align: center; text-shadow: 0 0 10px rgba(157,255,63,0.55); box-shadow: 0 2px 14px rgba(0,0,0,0.6); animation: maintenance-banner-sheen 3.2s linear infinite, maintenance-banner-slide-down 0.4s ease both; } .maintenance-banner.sev-orange { background: linear-gradient(90deg, #241505, #3f230a 50%, #241505); background-size: 200% 100%; } .maintenance-banner.sev-yellow { background: linear-gradient(90deg, #211d04, #3a3308 50%, #211d04); background-size: 200% 100%; } .maintenance-banner.sev-green { background: linear-gradient(90deg, #06170c, #0f2b18 50%, #06170c); background-size: 200% 100%; } .maintenance-banner.is-blinking { animation: maintenance-banner-sheen 3.2s linear infinite, maintenance-banner-slide-down 0.4s ease both, maintenance-banner-blink 1s ease-in-out infinite; } @keyframes maintenance-banner-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .maintenance-banner-icon { flex-shrink: 0; width: 18px; height: 18px; animation: maintenance-banner-pulse 1.4s ease-in-out infinite; } .maintenance-banner-icon svg { width: 100%; height: 100%; } @keyframes maintenance-banner-sheen { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } @keyframes maintenance-banner-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } @keyframes maintenance-banner-slide-down { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /* Full-screen version of the same warning, used only on the main menu (see dashboard.html's window.MAINTENANCE_BANNER_FULLSCREEN flag and maintenance-banner.js) — everywhere else stays the slim top strip above. Closable for the current view only (small × button); it comes back on the next visit, or the moment the admin actually changes the message, since either counts as a genuinely new state to show. */ .maintenance-fullscreen-overlay { position: fixed; inset: 0; z-index: 10001; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 8vw; background: radial-gradient(circle at 50% 40%, rgba(120,30,20,0.16), rgba(2,2,2,0.99) 68%); animation: maintenance-fullscreen-fade 0.35s ease both; } .maintenance-fullscreen-overlay.sev-orange { background: radial-gradient(circle at 50% 40%, rgba(140,75,10,0.18), rgba(2,2,2,0.99) 68%); } .maintenance-fullscreen-overlay.sev-yellow { background: radial-gradient(circle at 50% 40%, rgba(140,125,10,0.18), rgba(2,2,2,0.99) 68%); } .maintenance-fullscreen-overlay.sev-green { background: radial-gradient(circle at 50% 40%, rgba(20,100,45,0.2), rgba(2,2,2,0.99) 68%); } .maintenance-fullscreen-overlay.sev-orange .maintenance-fullscreen-icon { color: #ff9d4a; } .maintenance-fullscreen-overlay.sev-orange .maintenance-fullscreen-title { color: #ffb877; } .maintenance-fullscreen-overlay.sev-yellow .maintenance-fullscreen-icon { color: #f0d43a; } .maintenance-fullscreen-overlay.sev-yellow .maintenance-fullscreen-title { color: #f5e185; } .maintenance-fullscreen-overlay.sev-green .maintenance-fullscreen-icon { color: #5ee87f; } .maintenance-fullscreen-overlay.sev-green .maintenance-fullscreen-title { color: #9dff3f; } .maintenance-fullscreen-overlay.is-blinking { animation: maintenance-fullscreen-fade 0.35s ease both, maintenance-banner-blink 1s ease-in-out infinite; } .maintenance-fullscreen-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .maintenance-fullscreen-close:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); } .maintenance-fullscreen-icon { width: clamp(52px, 13vw, 84px); height: clamp(52px, 13vw, 84px); color: #ff6b5a; animation: maintenance-banner-pulse 1.6s ease-in-out infinite; } .maintenance-fullscreen-icon svg { width: 100%; height: 100%; } .maintenance-fullscreen-title { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 2px; font-size: clamp(17px, 5vw, 27px); color: #ff8a75; } .maintenance-fullscreen-text { max-width: 46ch; font-size: clamp(16px, 4vw, 21px); font-weight: 600; color: #9dff3f; text-shadow: 0 0 10px rgba(157,255,63,0.4); line-height: 1.5; } @keyframes maintenance-fullscreen-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============== ROTATE-TO-LANDSCAPE NOTICE ============== Shown on pages reached from the main menu when a mobile-sized screen is in portrait — those pages (timers, race data) need the extra width. The main menu itself and login/track-selection stay portrait-friendly. */ .rotate-notice { display: none; position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; color: #f2f2f2; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vw; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: clamp(14px, 4.2vw, 20px); letter-spacing: 0.4px; line-height: 1.5; } .rotate-notice .icon { display: block; font-size: clamp(36px, 13vw, 58px); color: #9dff3f; margin-bottom: 4vw; animation: rotate-hint 1.6s ease-in-out infinite; } .rotate-notice-menu-btn { display: inline-block; margin-top: 6vw; padding: 0.7em 1.6em; border: 1.5px solid #9dff3f; border-radius: 8px; color: #9dff3f; font-weight: 700; letter-spacing: 1px; font-size: clamp(13px, 3.6vw, 17px); text-decoration: none; background: rgba(157,255,63,0.06); } .rotate-notice-menu-btn:active { transform: scale(0.97); } .rotate-notice-lock-hint { margin-top: 4vw; font-size: clamp(11px, 3.2vw, 14px); color: #9a9a9a; font-weight: 500; max-width: 46ch; } @keyframes rotate-hint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } } @media (orientation: portrait) and (max-width: 859px) { .rotate-notice { display: flex; } /* sibling selector: only hides .phone on pages that actually render a .rotate-notice element (it's always placed right before .phone in the markup) — pages without one, like login/tracks/dashboard, are untouched. Also more specific than the base .phone rule, so it wins regardless of stylesheet source order. */ .rotate-notice ~ .phone { display: none; } } /* ============== MOBILE ADMIN: PORTRAIT-ONLY ============== The exact inverse of .rotate-notice above — the mobile admin panel (see mobile_admin_panel.html) must never be usable in landscape (too easy for someone else nearby to glance at on a busy show floor), so it blocks the opposite orientation instead. A separate class rather than reusing/modifying .rotate-notice, so the two never fight over the same selector under different media queries. */ .rotate-notice-portrait-only { display: none; position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; color: #f2f2f2; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vw; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: clamp(14px, 4.2vw, 20px); letter-spacing: 0.4px; line-height: 1.5; } .rotate-notice-portrait-only .icon { display: block; font-size: clamp(36px, 13vw, 58px); color: #9dff3f; margin-bottom: 4vw; animation: rotate-hint 1.6s ease-in-out infinite; } /* max-width/max-height caps this to actual phone-sized landscape screens only — a real desktop browser window is also technically "landscape" (wider than tall), and without this it would get blocked here too, with no way to satisfy "rotate to portrait" on a monitor that can't rotate. Same desktop threshold this app already uses elsewhere (see the min-width:860px/min-height:500px breakpoint that switches .phone itself to the desktop card layout) — just inverted. */ @media (orientation: landscape) and (max-width: 859px), (orientation: landscape) and (max-height: 499px) { .rotate-notice-portrait-only { display: flex; } .rotate-notice-portrait-only ~ .phone { display: none; } } /* the mobile admin panel's severity picker (see mobile_admin_panel.html) — same 4 colors as the banner itself (.maintenance-banner.sev-*), just a plain radio-chip row styled with this app's normal design language instead of admin.css (which this page doesn't load). */ .mobile-admin-severity-row { display: flex; flex-wrap: wrap; gap: 0.8cqh 1.4cqw; } .mobile-admin-severity-chip { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 1em; border-radius: 999px; border: 1.5px solid #333; background: rgba(255,255,255,0.02); cursor: pointer; font-size: clamp(12px, 2cqh, 15px); color: #d8d8d8; } .mobile-admin-severity-chip input { width: 15px; height: 15px; cursor: pointer; margin: 0; accent-color: #9dff3f; } .mobile-admin-severity-chip:has(input:checked) { border-color: #9dff3f; background: rgba(157,255,63,0.08); color: #eafccf; } /* small inline actions (RESET/DELETE next to a driver or PIN row) and a quiet caption line — mobile_admin_panel.html loads only this stylesheet, not admin.css, so it needs its own compact equivalents of admin.css's .admin-btn small / .admin-hint rather than pulling in a whole second stylesheet built for the full-width desktop layout. */ .mobile-admin-btn { padding: 0.5em 0.9em; border-radius: 8px; border: 1.5px solid rgba(157,255,63,0.4); background: rgba(157,255,63,0.04); color: #cfe9a8; font-weight: 700; font-size: clamp(11px, 1.9cqh, 13px); letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; } .mobile-admin-btn:hover { background: rgba(157,255,63,0.12); border-color: #9dff3f; } .mobile-admin-btn.danger { border-color: rgba(255,79,79,0.5); background: rgba(255,79,79,0.06); color: #ff8080; } .mobile-admin-btn.danger:hover { background: rgba(255,79,79,0.16); border-color: #ff4f4f; } .mobile-admin-hint { color: #9a9a9a; font-size: clamp(11px, 1.8cqh, 13px); margin-top: 2px; } /* ============== SHELL: fills the screen, scales with viewport ============== */ /* ============== SHELL: fills the screen, scales with viewport ============== */ /* container-type:size makes the cqw/cqh units used throughout this file scale to THIS element's own box, not the raw device viewport — so the exact same design works full-screen on a phone and in a smaller centered card on desktop. */ .phone { width: 100vw; height: 100dvh; max-height: 100vh; container-type: size; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); background-image: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%), repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px); display: flex; flex-direction: column; /* env(safe-area-inset-*) keeps content clear of notches / home indicators when the app is added to the home screen or run fullscreen on iOS */ padding: max(2.2cqh, env(safe-area-inset-top)) max(3cqw, env(safe-area-inset-right)) max(2.2cqh, env(safe-area-inset-bottom)) max(3cqw, env(safe-area-inset-left)); overflow: hidden; /* --maintenance-banner-h is 0px unless static/js/maintenance-banner.js has shown the site-wide warning banner, in which case it's kept in sync with that banner's real rendered height (which varies by device because of env(safe-area-inset-top)) — .phone shrinks and shifts down by exactly that much so the banner never covers page content on any of the app's pages, without needing per-page layout changes. */ margin-top: var(--maintenance-banner-h, 0px); height: calc(100dvh - var(--maintenance-banner-h, 0px)); max-height: calc(100vh - var(--maintenance-banner-h, 0px)); } /* Most pages are built to fit exactly within .phone's fixed height, so the base rule above clips overflow on purpose (nothing should ever need to scroll there). MY STATISTICS has a lot of stacked content (summary cards + a COMPARE button + filter tabs + a table) that can add up to more than a short landscape phone's available height — rather than clipping the bottom off with no way to reach it, this page opts into normal vertical scrolling of the whole shell instead. */ .phone.is-scroll-page { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* .drivers-table-shell is normally flex:1/min-height:0 so it eagerly shrinks to whatever's left over, which on a scrollable page would shrink it all the way to 0 instead of ever causing the page to actually overflow/scroll — give it back a real height here so the table stays usable and the rest of the page becomes what scrolls past it */ .phone.is-scroll-page .drivers-table-shell { flex: 0 0 auto; height: 42cqh; min-height: 240px; } /* DESKTOP: show the app as a centered, framed card instead of stretching full width/height across a large monitor. Below this breakpoint (phones, tablets) it stays full-bleed as before. */ @media (min-width: 860px) and (min-height: 500px) { html, body { overflow: auto; } body { padding: 40px; background: #050505; } .phone { /* bigger than the original 900x620 card — every size in this file is driven by cqh/cqw units off .phone's own box, so a roomier desktop card makes text/icons/spacing read at a proper desktop scale without touching a single mobile rule (this whole block only matches above the 860px/500px mobile breakpoint) */ width: min(92vw, 1180px); height: min(90vh, calc(780px - var(--maintenance-banner-h, 0px))); max-height: calc(90vh - var(--maintenance-banner-h, 0px)); margin-top: var(--maintenance-banner-h, 0px); border-radius: 22px; border: 2px solid #2a2a2a; box-shadow: 0 24px 70px rgba(0,0,0,0.65); } /* the login screen is naturally narrower / portrait-shaped */ body.login-body .phone { width: min(92vw, 520px); height: min(90vh, 860px); } } /* ============== LOGO ============== */ .logo { display: flex; align-items: center; gap: 1.2cqw; flex-shrink: 0; } .logo-mark { width: clamp(26px, 5.2cqh, 40px); height: clamp(26px, 5.2cqh, 40px); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); transform: skewX(-10deg); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .logo-mark span { background: #e8e8e8; } .logo-mark span:nth-child(odd) { background: #1a1a1a; } .logo-mark span:nth-child(4n+1), .logo-mark span:nth-child(4n) { background: #9dff3f; } .logo-text { font-family: 'Orbitron', sans-serif; font-weight: 700; line-height: 1.05; } .logo-text .k1 { color: #ffffff; font-size: clamp(14px, 2.9cqh, 22px); letter-spacing: 1px; } .logo-text .k2 { color: #9dff3f; font-size: clamp(14px, 2.9cqh, 22px); letter-spacing: 1px; display: block; } /* ============== TOP HEADER (used on dashboard + sub-pages) ============== */ .top-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; flex-shrink: 0; margin-bottom: 2cqh; } /* dashboard.html only: stacks the logo and the LEADERBOARD quick-link in the same top-left corner (button sits right under the logo) instead of .top-header's default align-items:center row, while .identity keeps its normal position on the right. */ .top-left-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6cqh; } /* LEADERBOARD + the kart quick-select button, side by side in one row under the logo — a slight gap between them so they read as two distinct actions, not a single wide button. */ .top-left-actions-row { display: flex; align-items: center; gap: 0.8cqw; flex-wrap: wrap; } .kart-select-group { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; } .kart-select-btn { cursor: pointer; padding: 0.9cqh 1.8cqw; font-size: clamp(12px, 2.2cqh, 16px); min-height: 34px; } .kart-select-btn svg { width: 1em; height: 1em; flex-shrink: 0; } .kart-select-hint { color: #f2f2f2; font-weight: 700; letter-spacing: 0.3px; font-size: clamp(10px, 1.7cqh, 13px); white-space: nowrap; } /* driver_view.html only: the ALL DRIVERS back button needs to be truly centered on the header regardless of how wide the logo/identity blocks next to it are (justify-content:space-between alone just puts it wherever space is left, which isn't necessarily center). Pulled out of the flex flow and centered absolutely against .top-header's own width — scoped to this one class so every other page's .top-actions (which can hold different buttons) keeps its normal in-flow layout. */ .dv-top-actions { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8cqh 1cqw; max-width: 60cqw; } .top-header .identity { text-align: right; font-size: clamp(13px, 2.6cqh, 19px); line-height: 1.5; } .top-header .identity .track-line { color: #9dff3f; font-weight: 700; letter-spacing: 0.4px; font-size: 0.85em; } .top-header .identity .driver-line { color: #d8d8d8; position: relative; } .top-header .identity .driver-line .driver-label { font-size: 0.82em; color: #9a9a9a; } .top-header .identity .driver-line b { color: #f2f2f2; font-size: 1.15em; } /* dashboard.html only: a small HELP shortcut under the driver's name, straight to /help — sized to match .leaderboard-btn/.kart-select-btn's own (shorter) height rather than the taller .back-btn default, since it sits in this same small top-corner identity block, not the bottom button row. */ .identity-help-row { margin-top: 0.5cqh; } .help-menu-btn { display: inline-flex; align-items: center; gap: 0.35em; border-radius: 999px; padding: 0.5cqh 1.8cqw; font-weight: 700; font-size: clamp(10px, 1.7cqh, 13px); letter-spacing: 0.6px; min-height: 34px; background: rgba(157,255,63,0.04); border: 1px solid rgba(157,255,63,0.35); color: #cfe9a8; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .help-menu-btn:hover { background: rgba(157,255,63,0.1); border-color: #9dff3f; color: #eafccf; } .help-menu-btn svg { width: 1em; height: 1em; flex-shrink: 0; } /* status badge right after the driver's name — three states: - registered (PIN) login: a green star, gently fading - Drop In guest who hasn't picked a kart yet: a slowly cycling green/yellow/red dot, nudging them to register or pick one - Drop In guest who HAS picked a kart: a calmer green checkmark (still fading, but no more color-cycling nag) since they've already done the thing the cycling dot was pushing them toward */ .driver-name-tag { cursor: pointer; } .driver-badge { display: inline-block; margin-left: 0.35em; font-size: 1em; line-height: 1; vertical-align: middle; } .driver-badge.badge-star, .driver-badge.badge-kart-ready { color: #9dff3f; text-shadow: 0 0 6px rgba(157,255,63,0.6); animation: driver-badge-fade 2s ease-in-out infinite; } @keyframes driver-badge-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .driver-badge.badge-guest { width: 0.55em; height: 0.55em; border-radius: 50%; animation: driver-badge-cycle 3s linear infinite; } @keyframes driver-badge-cycle { 0%, 30% { background: #9dff3f; box-shadow: 0 0 6px rgba(157,255,63,0.7); } 33%, 63% { background: #ffd23f; box-shadow: 0 0 6px rgba(255,210,63,0.7); } 66%, 96% { background: #ff4f4f; box-shadow: 0 0 6px rgba(255,79,79,0.7); } 100% { background: #9dff3f; box-shadow: 0 0 6px rgba(157,255,63,0.7); } } /* tap-to-reveal popup — a centered full-screen overlay (same visual language as .winner-overlay/.winner-card on the Live Leaderboard): a thank-you trophy for a registered driver, or a nag toward logging in / picking a kart for a guest. Tap anywhere, or wait a few seconds, to dismiss (see static/js/driver-badge.js). */ .driver-popup-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(5,5,5,0.92); display: none; align-items: center; justify-content: center; padding: 4cqh 4cqw; cursor: pointer; } .driver-popup-overlay.is-visible { display: flex; } .driver-popup-card { position: relative; text-align: center; max-width: 420px; padding: 4cqh 5cqw; border: 2px solid #9dff3f; border-radius: 20px; background: linear-gradient(180deg, rgba(157,255,63,0.08), rgba(0,0,0,0.4)); box-shadow: 0 0 60px rgba(157,255,63,0.25); animation: driver-popup-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes driver-popup-pop { 0% { opacity: 0; transform: scale(0.6) translateY(20px); } 70% { opacity: 1; transform: scale(1.05) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* explicit close affordance, alongside the existing "tap anywhere on the overlay to close" behavior (see driver-badge.js's overlay click listener — this button doesn't need its own handler, the click just bubbles up to that same listener) */ .driver-popup-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(157,255,63,0.4); background: rgba(0,0,0,0.25); color: #cfe9a8; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .driver-popup-close:hover { border-color: #9dff3f; color: #9dff3f; } .driver-popup-emoji { font-size: clamp(48px, 12cqh, 84px); line-height: 1; margin-bottom: 0.8cqh; } .driver-popup-card.is-registered .driver-popup-emoji { animation: driver-popup-bounce 1.4s ease-in-out infinite; } .driver-popup-card.is-guest .driver-popup-emoji { animation: driver-popup-shake 1.4s ease-in-out infinite; } @keyframes driver-popup-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes driver-popup-shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } } .driver-popup-title { color: #9dff3f; font-weight: 800; letter-spacing: 2px; font-size: clamp(14px, 2.6cqh, 19px); margin-bottom: 0.6cqh; } .driver-popup-text { color: #9dff3f; font-weight: 600; font-size: clamp(13px, 2.2cqh, 16px); line-height: 1.4; } /* main-menu LOG OUT button — sits in the bottom button row, in line with CHANGE TRACK (and MY ACCOUNT), as the last/right-most one. Reuses .back-btn's own sizing so all buttons in that row match; only the icon gets a green accent to keep it visually tied to the rest of the app. */ .logout-bottom-btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; color: #9dff3f; } /* the main-menu LIVE LEADERBOARD button — sits inside .top-left-block, directly under the logo, filled/bright so it still reads as an inviting action rather than a plain nav link even at this small corner size. */ .leaderboard-btn { background: rgba(157,255,63,0.1); border-color: #9dff3f; color: #9dff3f; font-weight: 700; font-size: clamp(10px, 1.7cqh, 13px); padding: 0.5cqh 1.8cqw; gap: 0.35em; } .leaderboard-btn:hover { background: rgba(157,255,63,0.18); } /* .back-btn is normally just a text arrow (←), never a real on demand, never present in the page's own markup. */ .share-toast { position: fixed; left: 50%; bottom: max(6cqh, env(safe-area-inset-bottom) + 20px); transform: translateX(-50%) translateY(12px); z-index: 10002; background: #16180f; border: 1.5px solid #9dff3f; color: #cfe9a8; font-weight: 700; letter-spacing: 0.4px; font-size: clamp(12px, 2cqh, 15px); padding: 0.8em 1.4em; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 84vw; text-align: center; } .share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* the SHARE button's fallback modal (see static/js/share-app.js) — shown whenever navigator.share isn't available, which in practice is most of the time for this app (the Web Share API requires a secure/https context, and this app is commonly reached over a plain http:// LAN address). Same fixed-overlay/centered-card language as the app's other popups (driver-popup-overlay, kart-select-overlay). Built and appended to on demand, never present in any page's own markup. */ .share-modal-overlay { position: fixed; inset: 0; z-index: 10003; background: rgba(5,5,5,0.88); display: none; align-items: center; justify-content: center; padding: 4cqh 4cqw; } .share-modal-overlay.is-visible { display: flex; } .share-modal-card { width: 100%; max-width: 360px; border: 2px solid #9dff3f; border-radius: 18px; background: linear-gradient(180deg, rgba(157,255,63,0.07), #0e0e0e); box-shadow: 0 0 50px rgba(157,255,63,0.2); padding: 3cqh 4cqw; animation: kart-select-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .share-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1cqh; gap: 1cqw; } .share-modal-title { font-family: 'Orbitron', sans-serif; color: #9dff3f; font-size: clamp(13px, 2.4cqh, 16px); letter-spacing: 1px; font-weight: 700; } .share-modal-close { background: none; border: 1.5px solid rgba(157,255,63,0.4); color: #cfe9a8; border-radius: 8px; width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .share-modal-close:hover { border-color: #9dff3f; color: #9dff3f; } .share-modal-link { font-family: 'Orbitron', sans-serif; font-size: clamp(11px, 1.9cqh, 13px); color: #9a9a9a; word-break: break-all; margin-bottom: 1.6cqh; padding: 0.6em 0.8em; border: 1px solid #2a2a2a; border-radius: 8px; background: rgba(255,255,255,0.02); } .share-modal-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1cqh 1.2cqw; } .share-app-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5cqh; padding: 1.4cqh 0.6cqw; border: 1.5px solid rgba(157,255,63,0.35); border-radius: 12px; background: rgba(157,255,63,0.04); color: #cfe9a8; font-weight: 700; font-size: clamp(11px, 1.9cqh, 13px); letter-spacing: 0.4px; cursor: pointer; text-align: center; } .share-app-btn:hover { background: rgba(157,255,63,0.1); border-color: #9dff3f; color: #eafccf; } .share-app-icon { width: 22px; height: 22px; } .share-app-icon svg { width: 100%; height: 100%; } /* ============== WELCOME PAGE: ABOUT / HELP BUTTONS ============== Secondary utility buttons — noticeably a button (border, padding, icon), but deliberately smaller/quieter than the two main confirm-btn choices above them so they never compete for attention. HELP gets a bit more visual weight (brighter border, filled background, small pulse) since it's the one the user most needs to be able to spot at a glance. */ .welcome-util-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8cqh; margin-top: 1.6cqh; flex-shrink: 0; } .welcome-util-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; border: 1.5px solid #4b6b1f; border-radius: 22px; padding: 0.75em 1.3em; font-size: clamp(14px, 2.5cqh, 18px); font-weight: 600; letter-spacing: 0.3px; color: #c7c7c7; background: rgba(157,255,63,0.03); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease; min-width: 38cqw; } .welcome-util-btn svg { width: 1.15em; height: 1.15em; stroke: #9dff3f; flex-shrink: 0; } .welcome-util-btn:hover { border-color: #9dff3f; color: #eafccf; background: rgba(157,255,63,0.1); } .welcome-util-btn:active { transform: scale(0.97); } .welcome-util-btn.help { border-color: #9dff3f; background: rgba(157,255,63,0.1); color: #eafccf; } .welcome-util-btn.help:hover { background: rgba(157,255,63,0.18); } .welcome-util-btn.help .help-dot { width: 7px; height: 7px; border-radius: 50%; background: #9dff3f; box-shadow: 0 0 6px #9dff3f; animation: welcome-help-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes welcome-help-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .app-version-text { margin-top: 1.4cqh; color: #6b6b6b; font-size: clamp(10px, 1.6cqh, 12px); letter-spacing: 0.6px; text-align: center; flex-shrink: 0; } /* ============== ABOUT / CREDITS PAGE ============== */ @keyframes about-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .about-wrap { width: 100%; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6cqh; padding-bottom: 2cqh; } .about-intro { text-align: center; color: #c7c7c7; font-size: clamp(13px, 2.1cqh, 16px); line-height: 1.55; padding: 0 2cqw; animation: about-fade-up 0.55s ease both; } .info-steps { list-style: none; display: flex; flex-direction: column; gap: 0.8cqh; padding: 0; margin: 0; } .info-steps li { display: flex; align-items: flex-start; gap: 2.4cqw; font-size: clamp(12.5px, 1.95cqh, 15px); color: #d0d0d0; line-height: 1.5; } .info-step-num { flex-shrink: 0; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1.5px solid #9dff3f; color: #9dff3f; font-weight: 700; font-size: 0.85em; display: flex; align-items: center; justify-content: center; } .info-faq { display: flex; flex-direction: column; gap: 0.9cqh; animation: about-fade-up 0.55s ease both; } .info-faq-item { border: 1px solid rgba(157,255,63,0.14); border-radius: 10px; padding: 1.2cqh 3cqw; background: rgba(255,255,255,0.02); } .info-faq-q { font-weight: 700; color: #f2f2f2; font-size: clamp(13px, 2cqh, 16px); margin-bottom: 0.35cqh; } .info-faq-q::before { content: "Q. "; color: #9dff3f; } .info-faq-a { font-size: clamp(12px, 1.85cqh, 14px); color: #b0b0b0; line-height: 1.5; } .info-section-title { font-weight: 700; letter-spacing: 0.6px; font-size: clamp(15px, 2.4cqh, 19px); color: #f2f2f2; margin: 0.4cqh 0 -0.4cqh; animation: about-fade-up 0.55s ease both; } .info-section-title .sub { color: #9dff3f; } .about-features { display: flex; flex-direction: column; gap: 0.9cqh; animation: about-fade-up 0.55s ease both; animation-delay: 0.03s; } .about-feature-row { display: flex; align-items: flex-start; gap: 2.6cqw; border: 1px solid rgba(157,255,63,0.16); border-radius: 10px; padding: 1.2cqh 3cqw; background: rgba(157,255,63,0.03); } .about-feature-icon { flex-shrink: 0; width: clamp(26px, 4.6cqh, 34px); height: clamp(26px, 4.6cqh, 34px); border-radius: 50%; border: 1.5px solid #9dff3f; display: flex; align-items: center; justify-content: center; } .about-feature-icon svg { width: 55%; height: 55%; stroke: #9dff3f; } .about-feature-text { font-size: clamp(12px, 1.9cqh, 15px); color: #d0d0d0; line-height: 1.45; padding-top: 0.2cqh; } .about-feature-text b { color: #f2f2f2; } .about-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5cqh; border: 1.5px solid #4b6b1f; border-radius: 14px; background: linear-gradient(180deg, rgba(157,255,63,0.05), rgba(0,0,0,0.2)); padding: 2.4cqh 4cqw; animation: about-fade-up 0.55s ease both; transition: border-color 0.15s ease, transform 0.15s ease; } .about-card:hover { border-color: #9dff3f; transform: translateY(-2px); } .about-card:nth-of-type(1) { animation-delay: 0.08s; } .about-card:nth-of-type(2) { animation-delay: 0.18s; } .about-card-icon { width: clamp(44px, 8.6cqh, 60px); height: clamp(44px, 8.6cqh, 60px); border: 1.5px solid #9dff3f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4cqh; } .about-card-icon svg { width: 50%; height: 50%; } .about-card-name { font-weight: 700; letter-spacing: 0.6px; font-size: clamp(17px, 3cqh, 22px); color: #f2f2f2; } .about-card-role { font-size: clamp(11px, 1.8cqh, 14px); color: #9dff3f; letter-spacing: 0.6px; text-transform: uppercase; } .about-card-body { font-size: clamp(12px, 1.9cqh, 15px); color: #9a9a9a; line-height: 1.5; max-width: 42ch; } .about-card-email { margin-top: 0.4cqh; font-size: clamp(12px, 1.9cqh, 15px); color: #9dff3f; text-decoration: underline; text-underline-offset: 2px; } /* ============== GET THE APP (get_app.html) ============== */ .ga-hero { text-align: center; margin-bottom: 2cqh; animation: about-fade-up 0.55s ease both; } .ga-hero-icon { width: clamp(56px, 11cqh, 78px); height: clamp(56px, 11cqh, 78px); margin: 0 auto 1cqh; border: 1.5px solid #9dff3f; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 24px rgba(157,255,63,0.25); animation: ga-hero-float 2.6s ease-in-out infinite; } .ga-hero-icon svg { width: 52%; height: 52%; } @keyframes ga-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ga-hero-badge { display: inline-block; border: 1px solid rgba(157,255,63,0.5); border-radius: 999px; padding: 0.3em 1em; font-weight: 800; letter-spacing: 2px; font-size: clamp(11px, 1.9cqh, 14px); color: #9dff3f; animation: ga-badge-pulse 1.8s ease-in-out infinite; } @keyframes ga-badge-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(157,255,63,0); } 50% { opacity: 0.75; box-shadow: 0 0 14px rgba(157,255,63,0.35); } } /* toggled by static/js/get-app.js once it detects which platform the visitor is actually on — a plain border/glow highlight, not a full restyle, since "coming soon" makes neither card actionable yet */ .about-card.is-your-device { border-color: #9dff3f; background: linear-gradient(180deg, rgba(157,255,63,0.1), rgba(0,0,0,0.2)); } .about-card.is-your-device .about-card-role::after { content: " \2014 YOUR DEVICE"; } .ga-device-badge { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin: 1.4cqh auto 0; padding: 0.6em 1.2em; border: 1px solid rgba(157,255,63,0.4); border-radius: 999px; width: fit-content; max-width: 90%; color: #eafccf; font-weight: 700; letter-spacing: 0.4px; font-size: clamp(12px, 2cqh, 15px); } .ga-device-badge svg { width: 1.2em; height: 1.2em; stroke: #9dff3f; flex-shrink: 0; } .ga-device-badge b { color: #9dff3f; } .about-company { border: 1.5px solid #4b6b1f; border-radius: 14px; padding: 2.2cqh 5cqw; animation: about-fade-up 0.55s ease both; animation-delay: 0.28s; } .about-company-name { text-align: center; font-weight: 700; letter-spacing: 1px; font-size: clamp(18px, 3.2cqh, 24px); color: #f2f2f2; margin-bottom: 1.2cqh; } .about-company-row { display: flex; justify-content: space-between; gap: 3cqw; padding: 0.7cqh 0; border-top: 1px solid rgba(157,255,63,0.12); font-size: clamp(12px, 1.9cqh, 15px); } .about-company-row:first-of-type { border-top: none; } .about-company-row .label { color: #7a7a7a; letter-spacing: 0.4px; flex-shrink: 0; } .about-company-row .value { color: #e0e0e0; text-align: right; } .about-company-row .value a { color: #9dff3f; text-decoration: underline; text-underline-offset: 2px; } .about-contact-link { display: inline-flex; align-items: center; gap: 0.4em; color: #9dff3f !important; text-decoration: none !important; transition: color 0.15s ease; } .about-contact-link:hover { color: #c9ffa0 !important; } .about-contact-link svg { width: 1.1em; height: 1.1em; flex-shrink: 0; stroke: currentColor; } .about-back-row { display: flex; justify-content: center; animation: about-fade-up 0.55s ease both; animation-delay: 0.38s; } .about-copyright { text-align: center; color: #555; font-size: clamp(10px, 1.6cqh, 12px); letter-spacing: 0.4px; animation: about-fade-up 0.55s ease both; animation-delay: 0.45s; } /* ============== LOGIN PAGE ============== */ .login-body { align-items: center; justify-content: center; } .login-content { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; } .helmet-wrap { display: flex; justify-content: center; margin-bottom: 1.6cqh; flex-shrink: 0; } /* shared by both index.html (welcome page) and login.html (driver login) — one set of rules here covers both. Shape/border unchanged; the glow-pulse is a plain CSS loop, but the drift/bob motion is driven by static/js/helmet-icon.js (two mismatched sine waves, not a simple back- and-forth loop — reads as organic drift rather than a repeating tick) since CSS keyframes alone can't do the "never quite the same twice" look that was asked for. Also click/tap-to-enlarge (admin-toggleable). */ .helmet-circle { width: clamp(46px, 9cqh, 68px); height: clamp(46px, 9cqh, 68px); border: 1.5px solid #9dff3f; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; animation: helmet-glow 2.8s ease-in-out infinite; } .helmet-circle svg { width: 52%; height: 52%; } @keyframes helmet-glow { 0%, 100% { box-shadow: 0 0 16px rgba(157,255,63,0.18); } 50% { box-shadow: 0 0 30px rgba(157,255,63,0.4); } } /* the enlarged popup shown when the helmet icon is tapped/clicked — same circle+icon, just bigger, centered on screen; auto-dismisses itself, or dismisses early on another tap/click anywhere. */ .helmet-popup-overlay { position: fixed; inset: 0; z-index: 450; background: rgba(5,5,5,0.85); display: none; align-items: center; justify-content: center; cursor: pointer; } .helmet-popup-overlay.is-visible { display: flex; } .helmet-popup-content { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; animation: helmet-popup-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .helmet-popup-circle { width: clamp(140px, 30vh, 220px); height: clamp(140px, 30vh, 220px); border: 2.5px solid #9dff3f; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 60px rgba(157,255,63,0.45); animation: helmet-glow 2.8s ease-in-out infinite; } .helmet-popup-circle svg { width: 52%; height: 52%; stroke: #9dff3f; } @keyframes helmet-popup-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } } .helmet-popup-text-box { display: flex; flex-direction: column; align-items: center; gap: 0.6vh; padding: 1.6vh 3.4vh; border-radius: 14px; background: rgba(8,8,8,0.72); border: 1px solid rgba(157,255,63,0.3); } .helmet-popup-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(18px, 4vh, 28px); letter-spacing: 2px; color: #f2f2f2; animation: helmet-text-glow 2.2s ease-in-out infinite; } @keyframes helmet-text-glow { 0%, 100% { text-shadow: 0 0 10px rgba(157,255,63,0.3); } 50% { text-shadow: 0 0 22px rgba(157,255,63,0.7); } } .helmet-popup-version { color: #9dff3f; font-size: clamp(11px, 2vh, 14px); letter-spacing: 0.5px; opacity: 0.85; } .pin-box { border: 1.5px solid #4b6b1f; border-radius: 8px; background: linear-gradient(180deg, rgba(157,255,63,0.04), rgba(0,0,0,0.2)); padding: 1.6cqh 4cqw 1.4cqh; text-align: center; margin-bottom: 2cqh; width: 100%; flex-shrink: 0; transition: border-color 0.2s ease; overflow: hidden; } .pin-box.error { border-color: #ff4f4f; } .pin-label { font-size: clamp(12px, 2cqh, 15px); letter-spacing: 1.5px; color: #b9b9b9; margin-bottom: 1cqh; } .pin-dots { display: flex; justify-content: space-between; align-items: baseline; width: 100%; max-width: 280px; margin: 0 auto; } .pin-dots .slot { flex: 1 1 0; min-width: 0; max-width: 38px; font-family: 'Orbitron', sans-serif; font-size: clamp(17px, 3.6cqh, 24px); font-weight: 700; color: #9dff3f; text-align: center; border-bottom: 2px solid #4b6b1f; padding-bottom: 0.6cqh; overflow: hidden; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqh 1.4cqw; margin-bottom: 1.6cqh; width: 100%; } .key { aspect-ratio: 1.6 / 1; border: 1.5px solid #4b6b1f; border-radius: 10px; background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(19px, 3.9cqh, 28px); color: #ffffff; cursor: pointer; user-select: none; transition: background 0.12s ease, transform 0.08s ease; } .key:active { background: rgba(157,255,63,0.12); transform: scale(0.96); } .key.clear { color: #e0e0e0; } .key.ok { background: linear-gradient(180deg, #b6ff4f, #7fcc1f); border-color: #9dff3f; color: #10230a; } .key.ok:active { filter: brightness(1.1); } .footer-text { text-align: center; font-size: clamp(13px, 2.1cqh, 16px); color: #b9b9b9; flex-shrink: 0; } .footer-text a { color: #9dff3f; text-decoration: underline; } /* these query the .phone container's own shape (via container-type:size), not the physical device orientation — so a narrow desktop card still gets the stacked layout even though the browser window itself is landscape */ @container (min-aspect-ratio: 1/1) { .login-content { max-width: 620px; flex-direction: row; align-items: center; justify-content: center; gap: 4cqw; } .login-left { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 40%; } .login-right { flex: 0 0 auto; width: 52%; } .login-left .helmet-wrap { margin-bottom: 1.4cqh; } .login-left .pin-box { margin-bottom: 0; } .login-left .footer-text { margin-top: 1.6cqh; } } @container (max-aspect-ratio: 1/1) { .login-left, .login-right { width: 100%; } } /* ============== IDENTITY CONFIRMATION (after PIN login) ============== */ .confirm-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(20px, 5cqh, 34px); color: #f2f2f2; text-align: center; line-height: 1.35; margin: 1cqh 0 3cqh; padding: 0 4cqw; text-shadow: 0 0 14px rgba(157,255,63,0.25); flex-shrink: 0; } .confirm-actions { display: flex; flex-direction: column; gap: 1.4cqh; width: 100%; max-width: 380px; margin: 0 auto; flex-shrink: 0; } .confirm-btn { display: flex; align-items: center; justify-content: center; gap: 0.7em; text-align: center; border-radius: 12px; padding: 2cqh 3cqw; font-weight: 700; letter-spacing: 1px; font-size: clamp(16px, 3cqh, 22px); cursor: pointer; border: 1.5px solid; min-height: 56px; line-height: 1.6; transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .confirm-btn.yes { background: linear-gradient(180deg, #b6ff4f, #7fcc1f); border-color: #9dff3f; color: #10230a; } .confirm-btn.yes:hover { filter: brightness(1.06); } .confirm-btn.no { background: rgba(255,79,79,0.06); border-color: rgba(255,79,79,0.5); color: #ff8080; } .confirm-btn.no:hover { background: rgba(255,79,79,0.14); border-color: #ff4f4f; color: #ffb3b3; } /* secondary choice that isn't "cancel/wrong" (unlike .no) — the welcome screen's DROP IN and the post-track-selection MAIN MENU option */ .confirm-btn.neutral { background: rgba(157,255,63,0.04); border-color: rgba(157,255,63,0.35); color: #cfe9a8; } .confirm-btn.neutral:hover { background: rgba(157,255,63,0.1); border-color: #9dff3f; color: #eafccf; } .confirm-btn svg { width: 1.3em; height: 1.3em; flex-shrink: 0; } /* ============== FORM FIELDS (register, account) ============== */ .reg-form { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6cqh; flex: 1; justify-content: center; min-height: 0; } .field-label { font-size: clamp(12px, 1.9cqh, 15px); letter-spacing: 1.5px; color: #b9b9b9; margin-bottom: 0.7cqh; display: block; } .text-input { width: 100%; background: rgba(255,255,255,0.03); border: 1.5px solid #4b6b1f; border-radius: 8px; padding: 1.3cqh 3cqw; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: clamp(15px, 2.5cqh, 19px); color: #f2f2f2; outline: none; transition: border-color 0.15s ease; } .text-input:focus { border-color: #9dff3f; } .text-input::placeholder { color: #6b6b6b; } /* the native calendar-picker icon on renders dark by default, which is invisible against this app's dark background — same class of bug as the admin