/* Mixly — Athletic / Nike-inspired Fonts (Inter, Archivo, Material Symbols Rounded) are bundled locally via @fontsource imports in src/main.jsx — no CDN dependency. */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: 500; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .sport-ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif; background: var(--bg-1); color: var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; transition: background-color 220ms var(--ease), color 220ms var(--ease); } :root { /* Nike-adjacent: off-black + true volt + warm ivory */ --bg-0: #050505; --bg-1: #0A0A0A; --bg-2: #111111; --surface: #181818; --surface-2: #222222; --surface-3: #2E2E2E; /* Skeleton shimmer — base block + sweeping highlight, tuned per theme so the loading state reads clearly on either canvas. */ --skel-base: #1C1C1C; --skel-hi: #2A2A2A; --line: rgba(245, 245, 243, 0.06); --line-2: rgba(245, 245, 243, 0.12); --text: #F5F5F3; --text-2: #A8A8A4; --text-3: #8A8A86; --accent: #CCFF00; /* Nike Volt */ --accent-2: #E5FF5E; --accent-glow: rgba(204, 255, 0, 0.22); /* Accent semantics — split so light mode can use black fills + a deep-green highlight. Dark values mirror today's behaviour (no visual change). */ --on-accent: #0A0A0A; /* text/icon sitting ON an accent fill */ --accent-ink: var(--accent); /* green highlight for text/icon/border */ --accent-wash: rgba(204, 255, 0, 0.12); /* faint tint behind ink */ --accent-edge: #8FB800; /* bottom bevel under accent fills */ --pin-fill: var(--accent); /* fallback game-pin fill (dark glyph sits on it) */ --success: #7BD88F; --warn: #FFB547; --error: #FF5247; --radius: 14px; --radius-lg: 20px; --radius-sm: 10px; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 140ms; --t: 240ms; --t-slow: 420ms; --display: 'Archivo', 'Inter', system-ui, sans-serif; /* Safe-area insets (iOS notch / home indicator / landscape) */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); /* Tabbar height + clearance — used by FAB and bottom-fade strip */ --tabbar-h: 64px; --tabbar-clear: calc(var(--sab) + var(--tabbar-h) + 24px); /* Screen header top padding — clears notch/Dynamic Island on real phones, matches fake status bar on desktop preview (overridden in media query). */ --screen-pt: calc(var(--sat) + 16px); --screen-pt-tight: calc(var(--sat) + 8px); } @media (min-width: 768px) { :root { /* Desktop iPhone preview — fake status bar is 48px tall, give 16px clearance below it */ --screen-pt: 64px; --screen-pt-tight: 56px; } } /* ───────────────────────────────────────────────────────────── LIGHT MODE — applied via [data-theme="light"] on The lime accent stays the same in both modes (brand colour). ───────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --bg-0: #EDEDEA; --bg-1: #F5F5F3; /* warm ivory canvas */ --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0EFEA; --surface-3: #E2E1DC; --skel-base: #E4E3DD; --skel-hi: #F4F3EF; --line: rgba(10, 10, 10, 0.07); --line-2: rgba(10, 10, 10, 0.14); --text: #0A0A0A; --text-2: #4F4F4B; --text-3: #8A8A86; /* No neon in light mode: fills go black (white text), highlights deep green. */ --accent: #0A0A0A; --accent-2: #1F1F1F; --on-accent: #FFFFFF; --accent-ink: #16A34A; --accent-wash: rgba(22, 163, 74, 0.14); --accent-glow: rgba(10, 10, 10, 0.16); --accent-edge: #000000; --pin-fill: #A8C62E; } /* Element-level overrides for the few places that hardcode dark colours (rgba(10,10,10,...)) — flip them to ivory equivalents in light mode. */ :root[data-theme="light"] .tabbar { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(10, 10, 10, 0.08); box-shadow: 0 12px 30px -10px rgba(10, 10, 10, 0.18); } :root[data-theme="light"] .tabbar-btn { color: var(--text-3); } :root[data-theme="light"] .sheet { background: linear-gradient(180deg, #FFFFFF, #F5F5F3); border-top: 1px solid var(--line-2); box-shadow: 0 -30px 60px -20px rgba(10, 10, 10, 0.18); } :root[data-theme="light"] .sheet-backdrop { background: rgba(245, 245, 243, 0.55); } :root[data-theme="light"] .sheet-handle { background: rgba(10, 10, 10, 0.18); } :root[data-theme="light"] .toast { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line-2); box-shadow: 0 16px 36px -12px rgba(10, 10, 10, 0.25); } .bottom-fade { background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.7) 25%, rgba(10,10,10,0.95) 45%, var(--bg-1) 65%); } :root[data-theme="light"] .bottom-fade { background: linear-gradient(180deg, rgba(245,245,243,0) 0%, rgba(245,245,243,0.7) 25%, rgba(245,245,243,0.95) 45%, var(--bg-1) 65%); } :root[data-theme="light"] .pattern-bg { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.5) 1px, transparent 1.5px); opacity: 0.05; } :root[data-theme="light"] .map-pin-court { background: #0A0A0A; border: 1px solid var(--accent-ink); } :root[data-theme="light"] .map-pin-court .map-pin-glyph.material-symbols-rounded { color: var(--accent-ink); } /* btn-secondary inverts its own colour in light mode (was light on dark; now dark on light) */ :root[data-theme="light"] .btn-secondary { background: #0A0A0A; color: #F5F5F3; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 0 rgba(0,0,0,0.4), 0 2px 0 #2E2E2E, 0 6px 16px -4px rgba(10,10,10,0.3); } :root[data-theme="light"] .btn-secondary:hover { background: #1A1A1A; } /* btn-ghost / btn-icon read better with stronger borders in light mode */ :root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .btn-icon { border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(10,10,10,0.04); } /* Universal app shell — every screen mounts inside this. Full-bleed on phones; fits inside the iPhone preview frame on desktop. */ .app-shell { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; } /* Floating bottom tabbar — moved here from index.html so it lives with the design system. */ .tabbar { position: fixed; left: max(16px, var(--sal)); right: max(16px, var(--sar)); bottom: max(12px, calc(var(--sab) + 8px)); z-index: 60; height: var(--tabbar-h); border-radius: 22px; background: rgba(10,10,10,0.9); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(204,255,0,0.16); box-shadow: 0 12px 28px -14px rgba(0,0,0,0.6); display: flex; align-items: center; padding: 8px 10px; animation: tabbar-in 280ms var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)); } @keyframes tabbar-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .tabbar-btn { flex: 1; height: 48px; min-height: 48px; border-radius: 14px; border: none; background: transparent; cursor: pointer; color: #6F6F6B; position: relative; z-index: 2; display: grid; place-items: center; transition: color 200ms ease, transform 220ms var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)); -webkit-tap-highlight-color: transparent; } .tabbar-btn.on { color: var(--on-accent); } .tabbar-indicator { position: absolute; top: 8px; left: 10px; height: 48px; background: linear-gradient(180deg, #E5FF5E, #CCFF00); border-radius: 14px; box-shadow: 0 8px 20px -6px var(--accent-glow); /* Slide via GPU-composited transform, not `left` — animating `left`/`width` forces a layout+paint every frame (the choppy/low-FPS jank). All 5 slots are equal width, so the box only needs to translate. */ transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; z-index: 1; } :root[data-theme="light"] .tabbar-indicator { background: var(--accent); } /* Desktop preview: tabbar is absolute inside the 390x844 frame, not fixed to viewport */ @media (min-width: 768px) { .tabbar { position: absolute; left: 16px; right: 16px; bottom: 22px; } } /* custom scrollbar inside device */ .device-scroll::-webkit-scrollbar { width: 0; height: 0; } /* Ambient glow helpers */ .glow-lime { box-shadow: 0 0 0 1px var(--line-2), 0 12px 40px -12px var(--accent-glow); } .glow-soft { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px -18px rgba(0,0,0,0.8); } /* Reusable chip */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: -0.1px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); transition: all var(--t-fast) var(--ease); } .chip.active { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 700; } /* Button base — always tactile, always reads as a button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; border: none; cursor: pointer; user-select: none; padding: 0 18px; min-height: 48px; border-radius: 12px; transition: transform 120ms var(--ease), box-shadow 220ms var(--ease), background 180ms ease, border-color 180ms ease; -webkit-tap-highlight-color: transparent; position: relative; } .btn:active { transform: translateY(1px) scale(0.98); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 0 var(--accent-edge), 0 6px 16px -4px var(--accent-glow); } .btn-primary:hover { background: var(--accent-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 0 var(--accent-edge), 0 10px 22px -4px var(--accent-glow); } .btn-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15), 0 0 0 var(--accent-edge), 0 2px 8px -2px var(--accent-glow); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.35); } .btn-ghost:hover { background: var(--surface-2); border-color: rgba(245,245,243,0.22); } .btn-ghost:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0); } /* Secondary: inverted — dark text on light ivory */ .btn-secondary { background: #F5F5F3; color: #0A0A0A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 0 #B8B8B4, 0 6px 16px -4px rgba(0,0,0,0.4); } .btn-secondary:hover { background: #FFFFFF; } /* Icon button — circular/rounded square, clearly clickable */ .btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); display: grid; place-items: center; cursor: pointer; transition: transform 120ms var(--ease), background 180ms ease, border-color 180ms ease, box-shadow 220ms var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.35); -webkit-tap-highlight-color: transparent; } .btn-icon:hover { background: var(--surface-2); border-color: rgba(245,245,243,0.22); } .btn-icon:active { transform: translateY(1px) scale(0.96); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0); } /* FAB — floating action button */ .btn-fab { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 18px; background: var(--accent); color: var(--on-accent); border: none; cursor: pointer; display: grid; place-items: center; transition: transform 120ms var(--ease), box-shadow 220ms var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.18), 0 3px 0 var(--accent-edge), 0 12px 28px -6px var(--accent-glow); } .btn-fab:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.18), 0 4px 0 var(--accent-edge), 0 16px 32px -6px var(--accent-glow); } .btn-fab:active { transform: translateY(2px) scale(0.97); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 var(--accent-edge), 0 4px 10px -2px var(--accent-glow); } /* Shine sweep on CTA */ @keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } } .shine-wrap { position: relative; overflow: hidden; } /* shine animation intentionally removed — too flashy for athletic aesthetic */ /* Mixly Plus "electric" set — the volt orb pulses and a lightning bolt flashes on an occasional beat, with the word "unlimited" zapping in sync. */ @keyframes orbZap { 0%, 6.5%, 40%, 49%, 100% { opacity: 0.4; transform: scale(1); } 1.4% { opacity: 1; transform: scale(1.12); } 3.6% { opacity: 0.85; transform: scale(1.06); } 44% { opacity: 0.85; transform: scale(1.06); } } @keyframes textZap { 0%, 6.5%, 100% { text-shadow: none; } 1.4% { text-shadow: 0 0 18px rgba(204,255,0,0.95), 0 0 42px rgba(204,255,0,0.5); } 3.6% { text-shadow: 0 0 22px rgba(204,255,0,0.85); } } @keyframes ltngFlash { 0%, 6%, 100% { opacity: 0; } 1.4% { opacity: 1; } 2.6% { opacity: 0.28; } 3.6% { opacity: 1; } 5% { opacity: 0.12; } } /* Pulse glow ring */ @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .pulse-dot { position: relative; } .pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; animation: pulse-ring 2.2s var(--ease) infinite; } /* Stagger-in */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: rise 500ms var(--ease) both; } /* Fade */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fade 400ms var(--ease) both; } /* Scale on tap helper */ .tap { transition: transform 120ms var(--ease), opacity 160ms ease; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tap:active { transform: scale(0.97); } /* Resting → hover affordance on pointer devices: a clear "this is pressable" cue on top of the existing press + focus ring. Touch devices ignore :hover, so the phone resting look is unchanged. */ .tap:hover { opacity: 0.9; } .tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Interactive list / menu row — context menus, settings rows, option pickers. Reads as a tappable row (hover fill + press) instead of inert text. Works on a