/* Shared tokens + primitives for the new standalone pages (home.html, videos.html, tournament.html, coach-dashboard.html). Copied from app.html's inline stylesheet rather than moved out of it — app.html's existing CSS is large, actively used in production, and interacts with many more selectors than these few primitives, so extracting/deleting from it carries real regression risk for close to zero benefit (CSS token duplication, unlike the JS/schema extractions elsewhere in this phase, has no functional downside — worst case the two diverge cosmetically over time, not a correctness bug). If app.html's palette ever changes, update both files. Tokens now support light/dark via [data-theme] on , matching index.html's system (same hex values, dark is the default). --accent2/ --accent3/--green/--accent-grad2 stay as the existing functional category colors (backhand/footwork tags, win/loss, etc.) unchanged — those are color-coding, not page theme. Unlike index.html's marketing nav (always dark, a deliberate "bookend"), the nav here tracks the page theme like the rest of the app chrome — this is a working application, not a landing page, so dark mode should mean everything switches, nav included. */ :root { --bg: #FFFFFF; --surface: #FFFFFF; --card: #FFFFFF; --border: #E5E8ED; --accent: #D8432E; --accent2: #4f8dff; --accent3: #ff6b6b; --text: #14161A; --muted: #5B6270; --green: #1de87a; --r: 4px; --nav-rgb: 255,255,255; --glass-rgb: 255,255,255; --tint-rgb: 20,22,26; --accent-grad2: #E8B94A; --accent-hover: #B8341F; --hover-tint: rgba(20,22,26,.04); } :root[data-theme="dark"] { --bg: #07090C; --surface: #0F1319; --card: #12161D; --border: rgba(255,255,255,.09); --text: #F2F3F5; --muted: #8B93A1; --nav-rgb: 7,9,12; --glass-rgb: 15,19,25; --tint-rgb: 255,255,255; --hover-tint: rgba(255,255,255,.06); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } html.app-native, html.app-native body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; } /* ── NAV (matches app.html's nav exactly, so the two feel like one app) ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(var(--nav-rgb),0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px; height: 58px; } .nav-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3px; text-decoration: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; gap: 24px; justify-self: center; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 0.86rem; font-weight: 500; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 14px; justify-self: end; } .nav-add { padding: 8px 20px; background: var(--accent); color: #F4F2EA; border: none; border-radius: 8px; font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: all .2s; } .nav-add:hover { background: var(--accent-hover); } .nav-import { padding: 8px 16px; background: transparent; color: var(--muted); border: 1.5px solid var(--border); border-radius: 8px; font-weight: 600; font-size: 0.84rem; cursor: pointer; transition: all .2s; } .nav-import:hover { border-color: var(--accent2); color: var(--accent2); } .nav-import:disabled { opacity: .5; cursor: not-allowed; } /* Theme toggle — shows the icon for the mode a click will switch TO (sun while dark, moon while light), matching index.html's convention. */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: transparent; border: 1.5px solid var(--border); color: var(--text); cursor: pointer; transition: background .2s, border-color .2s; } .theme-toggle:hover { background: var(--hover-tint); border-color: var(--accent2); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── NATIVE-APP NAV ("☰" menu — only rendered when renderNav() detects Capacitor's native platform, never in a browser tab even at a narrow width, so resizing a desktop window never triggers it). The full nav row (brand + 3 links + bell + logout) doesn't fit a phone screen — Logout in particular became unreachable. This collapses everything but the brand and bell into the panel below. ── */ .nav-native { padding: 0 16px; } .nav-native .nav-brand { font-size: .92rem; } /* .nav-native only ever renders 2 children (brand + this), not the 3 the shared `nav { grid-template-columns: 1fr auto 1fr }` above expects — auto -placement drops this into the middle "auto" column instead of the last "1fr" one, leaving the theme toggle/bell/menu stranded with empty space to their right instead of flush against the edge. Pin it to the real last column explicitly. */ .nav-native-right { display: flex; align-items: center; gap: 10px; grid-column: 3; justify-self: end; } #nav-menu-wrap { position: relative; } .nav-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); z-index: 600; padding: 10px; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .15s, transform .15s; } .nav-menu-panel.open { opacity: 1; pointer-events: all; transform: translateY(0); } .nav-menu-links { display: flex; flex-direction: column; gap: 2px; } .nav-menu-links a { padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; transition: background .15s, color .15s; } .nav-menu-links a:hover, .nav-menu-links a.active { background: rgba(var(--tint-rgb),.08); color: var(--accent); } .nav-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } .nav-menu-panel .nav-import { width: 100%; text-align: center; } /* ── NOTIFICATION BELL (copied from app.html's own copy — identical UI on every page that has one, so it lives here rather than being duplicated per-page like the Passion cards were) ── */ #notif-bell-wrap { position: relative; } .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--accent3, #ff6b6b); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 5px; min-width: 16px; text-align: center; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 400px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); z-index: 600; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .15s, transform .15s; } .notif-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); } .notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .82rem; cursor: pointer; } .notif-item:last-child { border-bottom: none; } .notif-item.unread { background: rgba(var(--tint-rgb),.07); } .notif-item:hover { background: rgba(var(--tint-rgb),.12); } .notif-time { color: var(--muted); font-size: .72rem; margin-top: 2px; } .notif-empty { padding: 20px; text-align: center; color: var(--muted); font-size: .82rem; } /* ── NOTIFICATION TOAST (proactive popup for a genuinely new notification, separate from the passive dropdown above) ── */ #notif-toast-stack { position: fixed; top: 72px; right: 20px; z-index: 700; display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: calc(100vw - 40px); pointer-events: none; } .notif-toast { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); padding: 13px 15px; font-size: .84rem; cursor: pointer; pointer-events: all; opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease; } .notif-toast.show { opacity: 1; transform: translateX(0); } .notif-toast .nt-time { color: var(--muted); font-size: .72rem; margin-top: 4px; } /* ── ORIENTATION HINT (nav.js's maybeShowOrientationHint) — nudges portrait-mode phones toward landscape on the video player and tournament bracket pages, which both genuinely need the width. Fixed just below the nav so it reads immediately without every page's own top padding needing to account for it. ── */ #orientation-hint { position: fixed; top: 58px; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 600; padding: 10px 44px 10px 16px; text-align: center; transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); } #orientation-hint.show { transform: translateY(0); } #orientation-hint button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.18); border: none; color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; } #orientation-hint button:hover { background: rgba(255,255,255,.3); } /* ── Buttons ── */ .btn { padding: 12px 26px; border-radius: 9px; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-grad2)); color: #F4F2EA; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,229,195,.28); } .btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* ── Section shell ── */ .section-wrap { padding: 88px 24px 72px; max-width: 1260px; margin: 0 auto; } .section-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } h2.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; } .section-desc { color: var(--muted); margin-top: 8px; font-size: .93rem; } .section-header { margin-bottom: 36px; } /* ── Card ── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; transition: border-color .2s; } .card:hover { border-color: rgba(0,229,195,.3); }