/* Stream-AI Workout Assistant - Dark Premium Theme */ /* ============================================ BASE STYLES & VARIABLES (Dark Default) ============================================ */ :root { /* ============================================ ACCENT — the one knob users control ============================================ Every brand-colored surface derives from these three channels, so changing the hue repaints buttons, gradients, glows and focus rings coherently instead of leaving a patchwork of blues behind. Users set this in Settings → Appearance. The server injects the saved value as an inline style on (see theme.py → accent_css_vars) so there is no flash of the default cyan on load. Defaults below reproduce the original #06B6D4 / #0891B2 / #0EA5E9 / #22D3EE palette. Lightness is contrast-normalized against --bg-primary upstream in theme.py, so a dark hue like navy gets lifted to a legible level rather than disappearing into the black. */ --accent-h: 189; --accent-s: 94%; /* Two lightness values, one per theme: the same hue can't be legible on both a near-black and a near-white background. The server/picker sets both (theme.py → normalize_accent); each theme picks the one it needs. Defaults match the shipped #06B6D4 (dark) / #0097B2 (light). */ --accent-l-raw: 43%; --accent-l-light: 35%; --accent-l: var(--accent-l-raw); /* Channel bundles for hsla() — lets a translucent glow track the accent: hsla(var(--accent-hsl), 0.08) instead of a frozen rgba(6, 182, 212, …). */ --accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); --secondary-hsl: calc(var(--accent-h) + 11), var(--accent-s), calc(var(--accent-l) + 5%); /* Brand Colors — all derived from the accent above. Semantic states (success/danger/warning) stay fixed on purpose: green must keep meaning "good" even if the user picks a red accent. */ --primary-color: hsl(var(--accent-hsl)); --primary-dark: hsl(calc(var(--accent-h) + 3), var(--accent-s), calc(var(--accent-l) - 7%)); --secondary-color: hsl(var(--secondary-hsl)); --accent-color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 10%)); --accent-warm: #F97316; --success-color: #10b981; --danger-color: #ef4444; --warning-color: #FBBF24; /* Gradients */ --primary-gradient: linear-gradient(135deg, hsl(var(--accent-hsl)) 0%, hsl(var(--secondary-hsl)) 100%); --accent-gradient: linear-gradient(135deg, hsl(var(--accent-hsl)) 0%, hsl(var(--secondary-hsl)) 100%); --dark-gradient: linear-gradient(180deg, #0A0E17 0%, #111827 100%); --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%); /* Backgrounds */ --bg-primary: #0A0E17; --bg-secondary: #111827; --bg-tertiary: #1E293B; --bg-glass: rgba(17, 24, 39, 0.7); /* Text */ --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-accent: var(--accent-color); /* Ink for anything sitting ON an accent-filled surface (a filled button, an active pill, a solid badge). The accent itself is contrast-normalized against the PAGE background, not against itself — so accent-on-accent is always unreadable, which is exactly how the active Profile/Settings tab came out invisible. theme.py picks black-or-white per accent and injects both --on-accent-* values inline on ; each theme reads the one it needs, the same way --accent-l does. The fallbacks below are correct for the shipped cyan (dark ink measures 8.0:1 on dark, 5.4:1 on light), so an unstyled default needs no inline style at all. */ --on-accent: var(--on-accent-dark, #0A0E17); /* Borders */ --border-color: rgba(255, 255, 255, 0.08); --border-glow: rgba(255, 255, 255, 0.16); /* Surfaces */ --card-bg: #111827; --input-bg: #1E293B; --navbar-bg: rgba(10, 14, 23, 0.92); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7); --shadow-glow: 0 0 0 rgba(0, 0, 0, 0); --shadow-glow-strong: 0 0 0 rgba(0, 0, 0, 0); /* Glass-morphism */ --glass-bg: rgba(17, 24, 39, 0.7); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(20px); /* Transitions */ --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; } /* Base styles */ body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; } a { color: var(--text-accent); transition: var(--transition-fast); } a:hover { color: var(--primary-dark); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } p { color: var(--text-secondary); } .text-muted { color: var(--text-secondary) !important; } .text-primary { color: var(--primary-color) !important; } .bg-light { background-color: var(--bg-secondary) !important; } /* ============================================ NAVIGATION - Glass-morphism ============================================ */ .navbar { background: var(--navbar-bg) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); padding: 1rem 0; /* No transition on padding: an animated shrink-on-scroll left a ~300ms window on every threshold crossing where the bar was mid-resize — enough for a badly-timed screenshot to catch clipped/overlapping text. The toggle is now instant; only box-shadow still animates (a paint-only property, never causes a layout/text glitch). */ transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .navbar-brand { font-weight: 700; font-size: 1.4rem; color: var(--text-primary) !important; display: flex; align-items: center; transition: var(--transition-fast); } .navbar-brand img { transition: var(--transition-fast); } .navbar-brand:hover img { transform: scale(1.05); } .nav-link { position: relative; font-weight: 500; color: var(--text-secondary) !important; padding: 0.5rem 1rem !important; margin: 0 0.25rem; border-radius: var(--radius-sm); transition: var(--transition-fast); } .nav-link:hover { color: var(--text-primary) !important; background: hsla(var(--accent-hsl), 0.08); transform: translateY(-2px); } .nav-link.active { background: hsla(var(--accent-hsl), 0.12); color: var(--primary-color) !important; } .nav-link.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: var(--primary-gradient); border-radius: 2px; } /* User dropdown */ .dropdown-menu { background: var(--bg-secondary); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl), var(--shadow-glow); border-radius: var(--radius-md); padding: 0.5rem; margin-top: 0.5rem; } .dropdown-item { border-radius: var(--radius-sm); padding: 0.75rem 1rem; color: var(--text-secondary); transition: var(--transition-fast); } .dropdown-item:hover { background: hsla(var(--accent-hsl), 0.08); color: var(--text-primary); transform: translateX(5px); } /* Buttons in navbar */ .navbar .btn { border-radius: 20px; padding: 0.5rem 1.5rem; font-weight: 600; transition: var(--transition-fast); border: 1px solid hsla(var(--accent-hsl), 0.3); color: var(--text-primary); } .navbar .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); border-color: var(--primary-color); color: var(--primary-color); } .navbar-toggler { border-color: var(--border-color); color: var(--text-primary); } .navbar-toggler-icon { filter: invert(1); } /* ============================================ HERO SECTION ============================================ */ #home-section { padding: 6rem 0 4rem; background: radial-gradient(ellipse at 20% 50%, hsla(var(--accent-hsl), 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, hsla(var(--secondary-hsl), 0.06) 0%, transparent 50%), var(--bg-primary); position: relative; overflow: hidden; } #home-section h1 { font-weight: 800; color: var(--text-primary); margin-bottom: 1.5rem; font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.03em; position: relative; } #home-section .lead { font-size: 1.25rem; color: var(--text-secondary); margin: 0 auto 2rem; max-width: 600px; } /* ============================================ CARDS - Glass-morphism ============================================ */ .card { border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: var(--transition-base); overflow: hidden; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .card:hover { box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--border-glow); } .card-header { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--glass-border); font-size: 1.1rem; position: relative; } /* Override Bootstrap bg-primary card headers */ .card-header.bg-primary { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } .card-body { padding: 1.5rem; background: transparent; } .card-title { font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .card-text { color: var(--text-secondary); line-height: 1.7; } /* Feature Cards */ .feature-card { text-align: center; padding: 2.5rem 1.5rem; height: 100%; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: var(--transition-base); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary-gradient); transform: scaleX(0); transition: var(--transition-base); } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { box-shadow: var(--shadow-xl), var(--shadow-glow-strong); border-color: var(--border-glow); } .feature-card i { font-size: 3rem; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem; display: inline-block; } .feature-card h4 { font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .feature-card p { color: var(--text-secondary); } /* ============================================ BUTTONS - Glow Effects ============================================ */ .btn { border-radius: var(--radius-md); padding: 0.75rem 1.5rem; font-weight: 600; transition: var(--transition-fast); border: none; } .btn-primary { background: var(--primary-gradient); color: #0A0E17; box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.08); color: #0A0E17; } /* The FILL is a step darker than --success-color / --danger-color on purpose. Those two tokens are tuned to be read as text ON the dark page; used as a button fill under white text they only reached 2.5:1 (green) and 3.8:1 (red), which is the washed-out label Seth flagged. Same hue, enough depth for white to hit AA across the whole gradient. The tokens themselves are untouched, so every place they're used as INK still looks the same. */ .btn-success { background: linear-gradient(135deg, #047857 0%, #065F46 100%); color: white; box-shadow: var(--shadow-sm); } .btn-success:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: white; } .btn-danger { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%); color: white; box-shadow: var(--shadow-sm); } .btn-danger:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: white; } .btn-outline-primary { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; } .btn-outline-primary:hover { background: var(--primary-gradient); color: #0A0E17; border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-glow); } /* An outline button that is toggled ON (the text-size picker, any .btn-group used as a segmented control). Without this, Bootstrap's `.btn.active` paints its own default blue and ignores the user's accent entirely. */ .btn-outline-primary.active, .btn-outline-primary:active, .btn-check:checked + .btn-outline-primary { background: var(--primary-gradient); color: var(--on-accent); border-color: transparent; } .btn-outline-light { /* `border-color` alone did nothing — `.btn { border: none }` had already zeroed the width, so this variant rendered as bare text. */ border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-primary); } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); } /* ── Remaining outline variants ─────────────────────────────────────────────── `.btn { border: none }` above was written for the filled gradient buttons, but it also stripped the outline off every .btn-outline-* variant that has no rule of its own here — leaving them as bare low-contrast text floating on the near-black page, legible only once :hover filled the background in. That is the "invisible until you hover" button. Give the border back, and repaint the ones whose Bootstrap default is too dark for this background (its secondary #6c757d is 4.1:1 on --bg-primary; --text-secondary is 7.5:1). */ .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info { border: 1px solid currentColor; background: transparent; } .btn-outline-secondary { border-color: var(--border-glow); color: var(--text-secondary); } .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: var(--text-secondary); color: var(--text-primary); } .btn-outline-success { color: var(--success-color); } .btn-outline-success:hover, .btn-outline-success:focus-visible { background: var(--success-color); border-color: var(--success-color); color: var(--on-accent); } .btn-outline-danger { color: var(--danger-color); } .btn-outline-danger:hover, .btn-outline-danger:focus-visible { background: var(--danger-color); border-color: var(--danger-color); color: var(--on-accent); } .btn-outline-warning { color: var(--warning-color); } /* Amber is light in BOTH themes, so its ink stays dark in both — this is the one fill where --on-accent's light-theme white would fail. */ .btn-outline-warning:hover, .btn-outline-warning:focus-visible { background: var(--warning-color); border-color: var(--warning-color); color: #0A0E17; } .btn-lg { padding: 1rem 2rem; font-size: 1.1rem; border-radius: 14px; } .btn i { margin-right: 0.5rem; } /* ============================================ VIDEO CONTAINER - Workout Section ============================================ */ .video-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl), var(--shadow-glow); background: var(--bg-secondary); border: 1px solid var(--glass-border); } #camera-container { background: linear-gradient(135deg, #1E293B 0%, #111827 100%); min-height: 400px; position: relative; overflow: hidden; /* The HUD owns a fixed strip along the top edge and the form-feedback banner is anchored below it, so the two can never collide at any viewport width. Both read these, so a size change only has to be made in one place. min-height above is LAYOUT only — the skeleton canvas is sized to the video's own box by workout.js (syncOverlayToVideo), never to this box. The height is in rem, not px: the chips inside are rem-sized, so the "Text size" preference (which scales the root font-size to 112.5%/125%) would otherwise grow the contents out of a fixed strip. */ --camera-hud-inset: 8px; --camera-hud-height: 1.75rem; } /* Live rep count + latest coaching line, drawn over the camera feed. Every color here is theme-INDEPENDENT on purpose: the backdrop is a camera image, which is the same surface in light mode as in dark, so --text-primary (near-black under [data-theme="light"]) would print black-on-black here. The values below are the dark theme's, which is what a video chip needs in both. */ .camera-hud { position: absolute; top: var(--camera-hud-inset); left: var(--camera-hud-inset); right: var(--camera-hud-inset); height: var(--camera-hud-height); z-index: 26; display: flex; align-items: center; gap: 0.4rem; min-width: 0; pointer-events: none; } .camera-hud-reps { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 0.25rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-full); /* Opaque, for the same reason the banner fills are: the backdrop is live video, so any translucency hands the effective contrast to whatever the camera happens to be pointing at — a blown-out frame drops a floor-graded accent from 4.5:1 to ~3.4:1 at the rep count's size. */ background: #0A0E17; border: 1px solid rgba(255, 255, 255, 0.14); color: #F1F5F9; line-height: 1.2; white-space: nowrap; } #camera-hud-count { font-size: 1.15rem; font-weight: 800; /* --accent-l-raw, not --primary-color: the light theme swaps --accent-l for a value graded against a near-WHITE page, which can be dark enough to vanish on this chip. -raw is the lightness graded against --bg-primary, and it keeps its value in both themes. */ color: hsl(var(--accent-h), var(--accent-s), var(--accent-l-raw)); font-variant-numeric: tabular-nums; } .camera-hud-reps-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #94A3B8; } .camera-hud-feedback { /* One line, always. A wrapping HUD would change --camera-hud-height out from under the banner offset above. */ flex: 1 1 auto; min-width: 0; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); background: #0A0E17; color: #F1F5F9; font-size: 0.75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .camera-hud-feedback:empty { display: none; } .overlay-message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(10, 14, 23, 0.85); backdrop-filter: blur(10px); color: var(--text-primary); text-align: center; padding: 2rem; z-index: 10; } .waiting-text { position: absolute; bottom: 10px; left: 10px; z-index: 20; } .waiting-text p { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); background: rgba(10, 14, 23, 0.7); backdrop-filter: blur(8px); padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px solid var(--glass-border); display: inline-block; } .overlay-message h3 { font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } /* Form feedback overlay on camera feed */ .form-feedback-overlay { position: absolute; /* Anchored under the HUD strip rather than on the card's top edge: at top:10px the first line rendered against (and partly behind) the edge of the camera card. */ top: calc(var(--camera-hud-inset) * 2 + var(--camera-hud-height)); left: 50%; transform: translateX(-50%); /* An absolutely-positioned box with `left:50%` and no width shrink-to-fits into the space RIGHT of that offset — half the camera view — which is what wrapped the message one word per line on a phone. An explicit width opts out of that clamp; max-width brings the wrap back at the real edge. */ width: max-content; max-width: calc(100% - var(--camera-hud-inset) * 2); max-height: 25%; z-index: 25; pointer-events: none; } .form-feedback-overlay span { /* Two lines then ellipsis: coaching strings run to ~50 characters and a free-wrapping banner covered a third of the feed mid-rep. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.95rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); max-width: 100%; text-align: center; } /* The fade is a CLASS on the span, not a declaration on the span itself, because `animation` is not inherited: the only way to replay it for the next rep is to toggle it off and on on the element that carries it. Left on the base rule it ran once, and `forwards` then pinned every later banner at opacity 0. workout.js::showFormFeedbackOverlay removes/reflows/re-adds this class — the two must stay on the same element. */ .form-feedback-overlay span.feedback-animate { animation: feedbackFade 3s ease-in-out forwards; } /* Fills a step deeper than --success-color / --danger-color, for the same reason .btn-success / .btn-danger are: those tokens are tuned to be read as INK on the dark page and only reach ~3.8:1 under white when used as a fill. Opaque, not 0.9 alpha — the backdrop here is live video, so any translucency makes the effective ratio depend on what the camera happens to be pointing at. */ .form-feedback-overlay.feedback-good span { background: #047857; color: #ffffff; box-shadow: 0 0 15px rgba(4, 120, 87, 0.4); } .form-feedback-overlay.feedback-warning span { background: #B91C1C; color: #ffffff; box-shadow: 0 0 15px rgba(185, 28, 28, 0.4); } @keyframes feedbackFade { 0% { opacity: 0; transform: translateY(-10px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } } .processed-feed { width: 100%; height: 100%; object-fit: cover; } /* Phone: the camera view is ~260-360 CSS px wide, so the HUD and the banner both get a size down to keep the banner inside its two lines. */ @media (max-width: 575.98px) { #camera-container { --camera-hud-inset: 6px; --camera-hud-height: 1.6rem; } #camera-hud-count { font-size: 1.05rem; } .camera-hud-feedback { font-size: 0.7rem; } .form-feedback-overlay span { font-size: 0.85rem; padding: 0.35rem 0.65rem; } } /* ============================================ STATISTICS PANEL ============================================ */ .stats-container { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); } .stats-container h5 { font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .feedback-box { padding: 1rem; background: hsla(var(--accent-hsl), 0.05); border-left: 4px solid var(--primary-color); border-radius: var(--radius-sm); min-height: 100px; max-height: 150px; overflow-y: auto; color: var(--text-secondary); font-size: 0.95rem; } .feedback-box::-webkit-scrollbar { width: 6px; } .feedback-box::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; } .feedback-box::-webkit-scrollbar-thumb { background: var(--primary-gradient); border-radius: 3px; } /* ============================================ EXERCISE INSTRUCTIONS PANEL ============================================ */ #exercise-instructions-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-bottom: 2rem; overflow: hidden; } #exercise-instructions-panel .card-header { background: var(--bg-tertiary); padding: 1.5rem; } #exercise-instructions-panel .card-header h3 { margin: 0; font-weight: 700; color: var(--text-primary); } #exercise-instructions-panel .card-body { padding: 2rem; } #exercise-instructions-panel h4 { color: var(--primary-color); font-weight: 700; margin-bottom: 1rem; font-size: 1.3rem; } #exercise-instructions-panel h5 { color: var(--text-primary); font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; } #exercise-instructions-panel ul { padding-left: 1.5rem; } #exercise-instructions-panel li { margin-bottom: 0.75rem; color: var(--text-secondary); line-height: 1.7; } #exercise-instructions-panel .alert { border-radius: var(--radius-md); border: none; padding: 1rem 1.25rem; } #exercise-instructions-panel .alert-warning { background: rgba(251, 191, 36, 0.1); color: var(--warning-color); border: 1px solid rgba(251, 191, 36, 0.2); } #exercise-instructions-panel .alert-info { background: hsla(var(--accent-hsl), 0.1); color: var(--primary-color); border: 1px solid hsla(var(--accent-hsl), 0.2); } #exercise-instructions-panel img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 300px; object-fit: contain; width: 100%; } /* ============================================ FORMS & INPUTS - Neon Focus ============================================ */ .form-control, .form-select { border-radius: 10px; border: 1px solid var(--border-color); padding: 0.75rem 1rem; transition: var(--transition-fast); font-size: 0.95rem; background-color: var(--input-bg); color: var(--text-primary); } .form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(var(--accent-hsl), 0.2); background-color: var(--input-bg); color: var(--text-primary); } .form-control::placeholder { color: var(--text-secondary); opacity: 0.6; } .form-label { font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } /* ============================================ TAGS (Ingredients, Allergies) ============================================ */ .ingredient-tag, .allergy-tag { display: inline-flex; align-items: center; padding: 0.5rem 1rem; margin: 0.25rem; background: hsla(var(--accent-hsl), 0.1); border: 1px solid var(--glass-border); border-radius: 20px; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); transition: var(--transition-fast); } .ingredient-tag:hover, .allergy-tag:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); border-color: var(--border-glow); } .ingredient-tag .remove-tag, .allergy-tag .remove-tag { margin-left: 0.5rem; cursor: pointer; color: var(--danger-color); font-weight: 700; transition: var(--transition-fast); } .ingredient-tag .remove-tag:hover, .allergy-tag .remove-tag:hover { transform: scale(1.3); } #canvas-overlay { z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #camera-feed { display: block; width: 100%; height: auto; } /* Floating "live workout" pill — visible when a session is running and the user has navigated away from the workout section. */ #workout-pill { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1080; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: none; border-radius: 999px; background: #1c1c1e; color: #fff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } #workout-pill:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } #workout-pill .workout-pill-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4444; box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); animation: workout-pill-pulse 1.6s infinite; } @keyframes workout-pill-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(255, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); } } /* ── First-visit onboarding tour ───────────────────────────────────────────── */ #onboarding-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.55); } #onboarding-ring { position: fixed; border: 3px solid #0d6efd; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); pointer-events: none; transition: all 0.25s ease; display: none; } #onboarding-tip { position: fixed; display: flex; gap: 0; max-width: 540px; background: #fff; color: #212529; border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); z-index: 2001; overflow: hidden; } #onboarding-tip-main { padding: 16px 18px; max-width: 320px; } #onboarding-tip h5 { margin: 0 0 6px; font-size: 1.05rem; } #onboarding-tip p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.4; } #onboarding-progress { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0d6efd; margin-bottom: 6px; } #onboarding-actions { display: flex; align-items: center; gap: 8px; } #onboarding-actions .ob-spacer { flex: 1; } .ob-btn { border-radius: 8px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .ob-primary { background: #0d6efd; color: #fff; } .ob-outline { background: transparent; border-color: #ced4da; color: #495057; } .ob-link { background: transparent; color: #6c757d; } /* Follow-along outline (left column of the tooltip) */ #onboarding-outline-wrap { width: 180px; flex: 0 0 180px; background: #f5f7fa; border-right: 1px solid #e6e9ee; padding: 14px 12px; overflow-y: auto; max-height: 70vh; } #onboarding-outline-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; margin-bottom: 8px; } #onboarding-outline { list-style: none; margin: 0; padding: 0; counter-reset: ob; } #onboarding-outline li { counter-increment: ob; position: relative; padding: 6px 6px 6px 26px; margin-bottom: 2px; font-size: 0.82rem; line-height: 1.25; color: #495057; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } #onboarding-outline li::before { content: counter(ob); position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #ced4da; color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; } #onboarding-outline li:hover { background: #e9eef5; } #onboarding-outline li.active { background: #0d6efd; color: #fff; font-weight: 600; } #onboarding-outline li.active::before { background: #fff; color: #0d6efd; } #onboarding-outline li.done { color: #198754; } #onboarding-outline li.done::before { content: '\2713'; background: #198754; } /* Stack the outline above the copy on small screens */ @media (max-width: 575.98px) { #onboarding-tip { flex-direction: column; max-width: 92vw; } #onboarding-outline-wrap { width: auto; flex: none; border-right: none; border-bottom: 1px solid #e6e9ee; max-height: 30vh; } #onboarding-tip-main { max-width: none; } } .workout-feedback { padding: 10px; margin: 10px 0; border-radius: 4px; background-color: var(--bg-secondary); color: var(--text-secondary); } /* ============================================ RECIPE CARDS ============================================ */ .recipe-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-base); background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); cursor: pointer; } .recipe-card:hover { box-shadow: var(--shadow-xl), var(--shadow-glow); border-color: var(--border-glow); } .recipe-card img { width: 100%; height: 200px; object-fit: cover; } .recipe-card .card-body { padding: 1.5rem; } .recipe-card .card-title { font-weight: 700; color: var(--text-primary); font-size: 1.1rem; } .recipe-card .badge { border-radius: var(--radius-md); padding: 0.4rem 0.8rem; font-weight: 600; } /* ============================================ PROGRESS SECTION ============================================ */ .progress { height: 12px; border-radius: var(--radius-full); background: var(--bg-tertiary); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .progress-bar { border-radius: var(--radius-full); background: var(--primary-gradient); transition: width 0.6s ease; } /* Chart containers */ .chart-container { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); margin-bottom: 1.5rem; } /* ============================================ BADGES ============================================ */ .badge { border-radius: 10px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.85rem; } .badge.bg-primary { background: var(--primary-gradient) !important; color: #0A0E17; } .badge.bg-success { background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%) !important; } .badge.bg-danger { background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%) !important; } .badge.bg-warning { background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%) !important; color: #0A0E17; } .badge.bg-info { background: hsla(var(--accent-hsl), 0.15) !important; color: var(--primary-color); border: 1px solid var(--glass-border); } .badge.bg-secondary { background: var(--bg-tertiary) !important; color: var(--text-secondary); } /* ============================================ ALERTS - Dark Theme ============================================ */ .alert { border-radius: var(--radius-md); border: none; padding: 1rem 1.5rem; box-shadow: var(--shadow-sm); } .alert-info { background: hsla(var(--accent-hsl), 0.1); color: var(--primary-color); border: 1px solid hsla(var(--accent-hsl), 0.2); } .alert-success { background: rgba(16, 185, 129, 0.1); color: var(--success-color); border: 1px solid rgba(16, 185, 129, 0.2); } .alert-warning { background: rgba(251, 191, 36, 0.1); color: var(--warning-color); border: 1px solid rgba(251, 191, 36, 0.2); } .alert-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.2); } /* ============================================ LIST GROUPS ============================================ */ .list-group-item { border: none; border-radius: 10px !important; margin-bottom: 0.5rem; padding: 1rem 1.25rem; background: var(--bg-secondary); color: var(--text-primary); transition: var(--transition-fast); } .list-group-item:hover { background: var(--bg-tertiary); transform: translateX(5px); } /* ============================================ TABLES ============================================ */ .table { color: var(--text-primary); } .table > thead > tr > th { background: var(--bg-tertiary); color: var(--text-secondary); border-bottom: 2px solid var(--border-color); font-weight: 600; } .table > tbody > tr > td { border-bottom: 1px solid var(--border-color); color: var(--text-primary); } .table > tbody > tr:hover > td { background: hsla(var(--accent-hsl), 0.03); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: hsla(var(--accent-hsl), 0.02); color: var(--text-primary); } /* ============================================ MODALS ============================================ */ .modal-content { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl), var(--shadow-glow); } .modal-header { border-bottom: 1px solid var(--border-color); color: var(--text-primary); } .modal-footer { border-top: 1px solid var(--border-color); } .modal-title { color: var(--text-primary); } .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ============================================ FOOTER ============================================ */ footer { background: var(--bg-secondary); border-top: 1px solid var(--glass-border); color: var(--text-primary); padding: 3rem 0 1.5rem; margin-top: 4rem; } footer h5 { font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } footer a { color: var(--text-secondary); transition: var(--transition-fast); text-decoration: none; } footer a:hover { color: var(--primary-color); transform: translateX(5px); } footer .text-muted { color: var(--text-secondary) !important; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease; } .pulse-animate { animation: pulse 2s infinite; } /* Section transitions */ .section-content { opacity: 1; transition: opacity 0.3s ease; } .section-content.d-none { opacity: 0; } /* ============================================ MOBILE RESPONSIVENESS ============================================ */ @media (max-width: 768px) { #home-section h1 { font-size: 2.2rem; } .feature-card { margin-bottom: 1.5rem; } .stats-container { margin-top: 1.5rem; } .navbar-brand { font-size: 1.1rem; } .navbar-brand img { width: 32px; height: 32px; } .card { margin-bottom: 1.5rem; } #exercise-instructions-panel .card-body { padding: 1.5rem; } .btn { padding: 0.65rem 1.25rem; } .btn-lg { padding: 0.85rem 1.75rem; } } @media (max-width: 576px) { .navbar .btn { padding: 0.4rem 1rem; font-size: 0.9rem; } .theme-switch-wrapper { margin-top: 1rem; } #home-section { padding: 4rem 0 3rem; } } /* ============================================ SCROLLBAR STYLING ============================================ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--primary-gradient); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } /* ============================================ UTILITY CLASSES ============================================ */ .text-gradient { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bg-gradient { background: var(--primary-gradient); } .shadow-custom { box-shadow: var(--shadow-xl); } .rounded-custom { border-radius: var(--radius-lg); } .hover-lift { transition: var(--transition-base); } .hover-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--shadow-glow); } /* Loading animation */ .spinner-border { border-color: var(--primary-color); border-right-color: transparent; } /* Glass utility */ .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } /* Glow utility */ .hover-glow { transition: var(--transition-base); } .hover-glow:hover { box-shadow: var(--shadow-glow-strong); border-color: var(--border-glow); } /* Container backgrounds */ .container, .container-fluid { color: var(--text-primary); } /* Bootstrap overrides for dark theme */ .bg-white { background-color: var(--bg-secondary) !important; } .border { border-color: var(--border-color) !important; } .shadow { box-shadow: var(--shadow-lg) !important; } .text-dark { color: var(--text-primary) !important; } /* Nav pills and tabs */ /* `.nav-link.active` above paints the label with the accent AND carries !important (it has to beat Bootstrap's --bs-nav-link-color on the navbar). A filled pill paints the same accent BEHIND the label, so without a matching !important here the label came out accent-on-accent — the near-invisible active tab on Profile/Settings. !important beats !important only on specificity, and `.nav-pills .nav-link.active` (0,3,0) outranks `.nav-link.active` (0,2,0), so this wins. Same reason for the `.profile-tabs` rule in profile.css. */ .nav-pills .nav-link.active { background: var(--primary-gradient); color: var(--on-accent) !important; } /* The underline marker belongs to the top navbar, where the active link is a bare word. Under a filled pill it just floats loose below the fill (and app-mobile.css already hides it in the native app for exactly that reason). */ .nav-pills .nav-link.active::after { display: none; } .nav-tabs { border-bottom-color: var(--border-color); } .nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; } .nav-tabs .nav-link.active { background-color: var(--bg-secondary); color: var(--primary-color); border-color: var(--border-color) var(--border-color) var(--bg-secondary); } /* Accordion */ .accordion-item { background-color: var(--bg-secondary); border-color: var(--border-color); } .accordion-button { background-color: var(--bg-secondary); color: var(--text-primary); } .accordion-button:not(.collapsed) { background-color: var(--bg-tertiary); color: var(--primary-color); } /* ============================================ PUMP BOT ============================================ */ .pump-container { position: fixed; bottom: 28px; right: 28px; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pump-avatar { width: 80px; height: 80px; object-fit: contain; cursor: pointer; transition: transform 0.2s; } .pump-avatar:hover { transform: scale(1.08); } .pump-idle { animation: pumpBob 2.4s ease-in-out infinite; } .pump-talking { animation: pumpTalk 0.5s ease-in-out infinite; } @keyframes pumpBob { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-9px); } } @keyframes pumpTalk { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-5px) scale(1.06); } } .pump-bubble { background: var(--card-bg); border: 1px solid var(--primary-color); border-radius: 14px 14px 4px 14px; padding: 12px 16px; max-width: 240px; box-shadow: var(--shadow-md); animation: bubbleFadeIn 0.3s ease; } .pump-bubble p { margin: 0; font-size: 0.88rem; color: var(--text-primary); line-height: 1.45; } @keyframes bubbleFadeIn { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Workout summary modal set card */ .ws-set-card { background: var(--bg-tertiary); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; } .ws-set-card .rep-time-bar { height: 6px; border-radius: 3px; background: hsla(var(--accent-hsl), 0.15); position: relative; margin-top: 4px; } .ws-set-card .rep-time-fill { height: 100%; border-radius: 3px; background: var(--primary-gradient); } .text-accent { color: var(--primary-color) !important; } /* ── Rest Timer ───────────────────────────────────────────────────────────── */ .rest-timer-container { display: flex; flex-direction: column; align-items: center; gap: 6px; } .rest-timer-ring-wrap { position: relative; width: 120px; height: 120px; } .rest-timer-svg { width: 120px; height: 120px; transform: rotate(-90deg); } .rest-timer-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; } .rest-timer-arc { fill: none; stroke: var(--primary-color, #06b6d4); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s linear; } .rest-timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; line-height: 1.1; } .rest-timer-text span { font-size: 1.4rem; font-weight: 700; color: var(--primary-color, #06b6d4); } /* ── Workout Calendar ─────────────────────────────────────────────────────── */ .cal-week-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6c757d; padding: 4px 2px 2px; } .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .cal-month-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .cal-dow-label { text-align: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; padding: 4px 2px; } .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-cell { border: 1px solid transparent; border-radius: 8px; padding: 6px 4px; text-align: center; min-height: 80px; cursor: default; position: relative; transition: transform 0.15s, box-shadow 0.15s; user-select: none; } .cal-cell.cal-empty { background: transparent !important; border-color: transparent !important; pointer-events: none; min-height: 60px; } .cal-workout-day { cursor: grab; } .cal-workout-day:active { cursor: grabbing; } .cal-today { outline: 2px solid var(--primary-color, #06b6d4); outline-offset: 1px; } .cal-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .cal-dragging { opacity: 0.4; } .cal-day-name { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: #6c757d; } .cal-day-num { font-size: 1rem; font-weight: 700; line-height: 1.2; } .cal-day-type { font-size: 0.68rem; font-weight: 600; margin-top: 2px; } .cal-rest { color: #6c757d !important; } .cal-logged-label { font-size: 0.58rem; font-weight: 600; color: #2ecc71; margin-top: 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; cursor: pointer; text-shadow: 0 0 6px rgba(46, 204, 113, 0.4); } /* ── Weigh-in calendar tag ─────────────────────────────────────────────────── */ .cal-weigh-in-tag { font-size: 0.58rem; font-weight: 600; color: #f39c12; margin-top: 3px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .cal-weigh-in-tag:hover { opacity: 0.75; } .cal-weigh-in-tag.cal-weighed { color: #2ecc71; } /* ── Calendar goal tag ─────────────────────────────────────────────────────── */ .cal-goal-tag { font-size: 0.58rem; font-weight: 600; color: #e74c3c; margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 3px; padding: 1px 3px; transition: background 0.15s, color 0.15s; } .cal-goal-tag:hover { background: rgba(231, 76, 60, 0.15); } /* ── Week-view calendar ────────────────────────────────────────────────────── */ .cal-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-week-cell { min-height: 118px; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; } .cal-week-dow { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; } .cal-week-cell .cal-day-num { font-size: 1.15rem; } .cal-week-view-link { font-size: 0.56rem; font-weight: 600; color: var(--primary-color, #06b6d4); margin-top: auto; opacity: 0.85; white-space: nowrap; } .cal-week-cell.cal-workout-day:hover .cal-week-view-link { opacity: 1; } /* Stack the week into a vertical list on narrow screens */ @media (max-width: 640px) { .cal-week-grid { grid-template-columns: 1fr; } .cal-week-cell { min-height: 0; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; } .cal-week-cell .cal-week-dow { min-width: 34px; } .cal-week-cell .cal-day-num { min-width: 24px; } .cal-week-view-link { margin-top: 0; margin-left: auto; } } /* ── Workout plan detail modal (Gymshark-style) ────────────────────────────── */ .wp-modal-content { background: #101114; color: #f2f2f2; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; } .wp-modal-header { background: #000; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: flex-start; } .wp-modal-title { font-weight: 800; letter-spacing: 0.06em; margin: 0; color: #fff; } .wp-modal-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8f98; margin-top: 2px; } .wp-list-head { display: flex; justify-content: space-between; padding: 10px 18px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: #7a7f88; border-bottom: 1px solid rgba(255,255,255,0.06); background: #16181c; } .wp-exercise-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); } .wp-exercise-row:last-child { border-bottom: none; } .wp-thumb { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #22252b; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); } .wp-ex-info { flex-grow: 1; min-width: 0; } .wp-ex-name { font-weight: 700; font-size: 0.92rem; color: #fff; line-height: 1.2; } .wp-ex-meta { font-size: 0.72rem; color: #9aa0a8; margin: 2px 0 4px; } .wp-video-link { font-size: 0.72rem; font-weight: 600; color: var(--primary-color, #06b6d4); text-decoration: none; } .wp-video-link:hover { text-decoration: underline; } .wp-video-soon { font-size: 0.68rem; color: #6c757d; font-style: italic; } .wp-do-btn { flex-shrink: 0; background: var(--primary-color, #06b6d4); border: none; color: #06121a; font-weight: 700; white-space: nowrap; border-radius: 8px; } .wp-do-btn:hover { filter: brightness(1.08); color: #06121a; } .wp-modal-footer { background: #16181c; border-top: 1px solid rgba(255,255,255,0.08); } @media (max-width: 480px) { .wp-exercise-row { flex-wrap: wrap; } .wp-do-btn { width: 100%; margin-top: 6px; } } /* ── Leaderboard scrollable container ─────────────────────────────────────── */ .leaderboard-scroll-wrap { position: relative; max-height: 200px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .leaderboard-scroll-wrap::-webkit-scrollbar { width: 4px; } .leaderboard-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.4); border-radius: 2px; } .leaderboard-scroll-hint { position: sticky; bottom: 0; text-align: center; font-size: 0.7rem; color: #6c757d; padding: 4px 0 2px; background: linear-gradient(transparent, var(--glass-bg, rgba(255,255,255,0.05)) 60%); pointer-events: none; } /* ── Muscle Activation Panel ───────────────────────────────────────────────── */ .muscle-panel-card { border: 1px solid hsla(var(--accent-hsl), 0.18); background: hsla(var(--accent-hsl), 0.04); } [data-theme="light"] .muscle-panel-card { border-color: rgba(13, 110, 253, 0.18); background: rgba(13, 110, 253, 0.03); } .muscle-body-svg { display: block; } :root { --muscle-base: #666; --muscle-active-primary-fill: rgba(46, 204, 113, 0.65); --muscle-active-primary-stroke: #2ecc71; --muscle-active-wrong-fill: rgba(231, 76, 60, 0.45); --muscle-active-wrong-stroke: #e74c3c; } .muscle-group { fill: rgba(120, 120, 120, 0.15); stroke: rgba(120, 120, 120, 0.3); stroke-width: 0.8; transition: fill 0.3s, stroke 0.3s; } .muscle-group.muscle-active-primary { fill: var(--muscle-active-primary-fill); stroke: var(--muscle-active-primary-stroke); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(46,204,113,0.6)); } .muscle-group.muscle-active-wrong { fill: var(--muscle-active-wrong-fill); stroke: var(--muscle-active-wrong-stroke); stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(231,76,60,0.5)); } /* ── Plate Calculator ─────────────────────────────────────────────────────── */ .barbell-container { overflow-x: auto; padding: 8px 0; } .barbell-svg { display: block; margin: 0 auto; max-width: 100%; } @keyframes plateSlideIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } .barbell-plate { animation: plateSlideIn 0.25s ease-out both; transform-origin: center; } .plate-breakdown-list { padding: 8px 0; } /* ── Single-chart progress section ───────────────────────────────────────── */ #chart-exercise-sub { transition: opacity 0.2s; } /* ── "Didn't Feel It" button ─────────────────────────────────────────────── */ #didnt-feel-btn { font-size: 0.8rem; padding: 4px 12px; } #didnt-feel-btn:hover { background: rgba(255, 193, 7, 0.12); } /* ── Rep override stepper ────────────────────────────────────────────────── */ .rep-override-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .rep-override-label { font-size: 0.85rem; color: var(--text-muted, #6c757d); font-weight: 500; } .rep-stepper-btn { width: 30px; height: 30px; padding: 0; line-height: 1; border-radius: 50% !important; flex-shrink: 0; } .rep-override-value { font-size: 1.4rem; font-weight: 700; min-width: 2.2rem; text-align: center; color: var(--primary-color, #06b6d4); } .rep-override-hint { font-size: 0.7rem; color: var(--text-muted, #6c757d); font-style: italic; } /* ── Video review modal ──────────────────────────────────────────────────── */ .review-video-player { width: 100%; max-height: 65vh; border-radius: 8px; background: #000; outline: none; } /* ── Workout History ─────────────────────────────────────────────────────── */ .history-session { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="light"] .history-session { border-bottom-color: rgba(0,0,0,0.06); } .history-session:last-child { border-bottom: none; } .history-session-header { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; transition: background 0.15s; user-select: none; } .history-session-header:hover { background: hsla(var(--accent-hsl), 0.05); } [data-theme="light"] .history-session-header:hover { background: rgba(13,110,253,0.04); } .history-session-header--open .history-date::after { content: ' ▲'; font-size: 0.65rem; opacity: 0.5; } .history-session-header:not(.history-session-header--open) .history-date::after { content: ' ▼'; font-size: 0.65rem; opacity: 0.5; } .history-date { font-weight: 700; font-size: 0.95rem; } .history-summary { font-size: 0.78rem; color: var(--text-muted, #6c757d); margin-left: auto; } .history-session-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.2s ease; padding: 0 16px; } .history-exercise-block { margin-bottom: 14px; } .history-exercise-block:first-child { padding-top: 8px; } .history-exercise-name { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-color, #06b6d4); margin-bottom: 4px; } [data-theme="light"] .history-exercise-name { color: #0d6efd; } .history-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; } .history-table th { color: var(--text-muted, #6c757d); font-weight: 600; text-align: left; padding: 2px 8px 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="light"] .history-table th { border-bottom-color: rgba(0,0,0,0.08); } .history-table td { padding: 4px 8px 4px 0; } .pr-badge { font-size: 0.7rem; background: rgba(255,215,0,0.15); color: #FFD700; border: 1px solid rgba(255,215,0,0.4); border-radius: 4px; padding: 1px 5px; white-space: nowrap; } /* ── Goals ───────────────────────────────────────────────────────────────── */ .goal-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="light"] .goal-row { border-bottom-color: rgba(0,0,0,0.06); } .goal-row:last-child { border-bottom: none; } .goal-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .goal-exercise-label { font-weight: 600; font-size: 0.88rem; flex: 1; } .goal-target-label { font-size: 0.82rem; color: var(--text-muted, #6c757d); } .goal-row-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .goal-deadline { font-size: 0.7rem; color: var(--text-muted, #6c757d); white-space: nowrap; } .goal-deadline--today { color: #ffc107; font-weight: 600; } .goal-deadline--past { color: #dc3545; } .goal-bar-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; } [data-theme="light"] .goal-bar-track { background: rgba(0,0,0,0.08); } .goal-bar-fill { height: 100%; background: var(--primary-color, #06b6d4); border-radius: 4px; transition: width 0.6s ease; } .goal-bar-close { background: #f39c12; } .goal-bar-achieved { background: #2ecc71; } .goal-bar-label { font-size: 0.68rem; color: var(--text-muted, #6c757d); margin-top: 3px; } /* ── Hamburger Navigation ─────────────────────────────────────────────────── */ .hamburger-btn { background: none; border: none; cursor: pointer; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border-radius: 8px; transition: background 0.2s; flex-shrink: 0; } .hamburger-btn:hover { background: rgba(255, 255, 255, 0.12); } .hamburger-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hamburger-menu { position: fixed; top: 62px; left: 0; z-index: 1090; min-width: 230px; background: var(--bg-card, #1e293b); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08)); border-top: none; border-radius: 0 0 14px 0; box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.45); overflow: hidden; transform-origin: top left; transform: scaleY(0.85) translateY(-8px); opacity: 0; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; pointer-events: none; } .hamburger-menu.open { transform: scaleY(1) translateY(0); opacity: 1; pointer-events: auto; } .hamburger-menu-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: var(--text-primary, #e2e8f0); text-decoration: none; font-size: 0.92rem; font-weight: 500; border-left: 3px solid transparent; transition: background 0.15s, color 0.15s, padding-left 0.15s, border-color 0.15s; } .hamburger-menu-item i { width: 18px; text-align: center; color: var(--text-muted, #94a3b8); transition: color 0.15s; flex-shrink: 0; } .hamburger-menu-item:hover { background: hsla(var(--accent-hsl), 0.07); color: var(--primary-color, #06b6d4); padding-left: 26px; } .hamburger-menu-item:hover i { color: var(--primary-color, #06b6d4); } .hamburger-menu-item.active { background: hsla(var(--accent-hsl), 0.1); color: var(--primary-color, #06b6d4); border-left-color: var(--primary-color, #06b6d4); } .hamburger-menu-item.active i { color: var(--primary-color, #06b6d4); } .hamburger-menu-divider { height: 1px; background: var(--glass-border, rgba(255, 255, 255, 0.08)); margin: 4px 0; } /* Light mode hamburger menu */ [data-theme="light"] .hamburger-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.15); } [data-theme="light"] .hamburger-menu-item { color: #1e293b; } [data-theme="light"] .hamburger-menu-item i { color: #64748b; } [data-theme="light"] .hamburger-menu-item:hover { background: rgba(0, 120, 200, 0.07); color: #0066cc; } [data-theme="light"] .hamburger-menu-item.active { background: rgba(0, 120, 200, 0.1); color: #0066cc; border-left-color: #0066cc; } /* ============================================ CALORIE TRACKER (nutrition section) ============================================ */ /* Header pills sit on the primary-colored card header — make states readable */ #nutritionTopTabs .nav-link { color: rgba(255, 255, 255, 0.75); } #nutritionTopTabs .nav-link.active { background: rgba(255, 255, 255, 0.22); color: #fff; } #ct-remaining { line-height: 1.1; } #ct-search-results .list-group-item, #ct-ing-results .list-group-item { cursor: pointer; } #ct-history-chart { width: 100% !important; } /* Reserve the chart's height up front so it doesn't jump/reflow the page the moment Chart.js finishes loading history data (previously only set inline by JS after the fact, causing a late layout shift). */ #ct-history-chart-card { min-height: 260px; } /* --- Today | Insights sub-tabs ------------------------------------------- Same pill language as the section's top tabs, one step down in size and weight so it reads as secondary navigation inside the card, not a second primary nav. The global `.nav-link.active::after` underline marker belongs to the primary nav — a pill row this small does not need it. */ .ct-subtabs { gap: 0.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; } .ct-subtabs .nav-link { /* .nav-link sets padding with !important, so this has to match it */ padding: 0.3rem 0.85rem !important; margin: 0; font-size: 0.875rem; border-radius: 999px; } .ct-subtabs .nav-link.active { /* beats `.nav-pills .nav-link.active`'s gradient (same specificity, later) */ background: hsla(var(--accent-hsl), 0.16); color: var(--primary-color) !important; } .ct-subtabs .nav-link.active::after { display: none; } /* Safety net at every width: the cluster is a nowrap flex row by default, and the card around it is overflow:hidden — so if the five buttons ever outgrow their line (longer labels, a larger text-scale setting, a narrow desktop window) a button would be clipped rather than pushed. Let it wrap instead. */ .ct-capture-cluster { flex-wrap: wrap; } /* --- per-meal capture buttons -------------------------------------------- Icon-only by design (the meal name is already the card header, and the label lives in aria-label/title), so they have to carry a real touch target. */ .ct-meal-capture > .btn { min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- Nutrition dashboard — narrow-screen control rows (mobile WEB) -------------------------------------------------------------------------- The dashboard opens with one `.ct-daybar` row holding TWO nowrap groups: the date stepper (`.ct-date-nav`) and the capture cluster (`.ct-capture-cluster` = Add food / Snap meal / Scan barcode / Scan label / Edit Goals). Only the OUTER row wraps — the inner groups do not, so on a ~360px screen the cluster overflowed its column and the surrounding `.card` (overflow:hidden, for its rounded corners) clipped it: "Edit Goals" simply vanished past the right edge. Below 768px the cluster becomes a single-column stack of full-width buttons, one per row. Five buttons never fit side by side on a phone, and a stack removes the need for the tightened padding + ellipsis the old 2x2 grid used to keep "Scan barcode" from truncating. At >=768px the horizontal row fits, and a vertical stack there would look wrong, so the row is left alone. app-mobile.css carries the identical shape scoped to `body.stream-app` (the Capacitor shell), so the native app and the phone browser render the same. Keep the two in lockstep. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Each group gets its own full-width line instead of competing for one. */ .ct-daybar > .ct-date-nav, .ct-daybar > .ct-capture-cluster { width: 100%; min-width: 0; } /* One button per row. .d-flex is `display:flex !important` so the direction flips without needing !important; the gap and align-items utilities on the element (.gap-1, .align-items-center) are !important and do need beating. */ .ct-capture-cluster { flex-direction: column; align-items: stretch !important; flex-wrap: nowrap; gap: 0.5rem !important; } .ct-capture-cluster > .btn { width: 100%; min-width: 0; margin: 0; } /* Date stepper: let the date field absorb the slack, not the chevrons. */ .ct-date-nav { flex-wrap: wrap; gap: 0.5rem !important; } .ct-date-nav #ct-date-input { flex: 1 1 auto; width: auto !important; min-width: 0; } .ct-date-nav > .btn { flex: 0 0 auto; } } /* -------------------------------------------------------------------------- Workout page — control rail, camera/mic disclosure, mobile stats, and the narrow-phone text-overflow defenses for the segmented controls. -------------------------------------------------------------------------- Everything below ships to the phone BROWSER as well as the desktop site. app-mobile.css carries the Capacitor-scoped (body.stream-app) equivalents of the segmented-control rules; a previous attempt at the "Powerlifting" cutoff fix lived ONLY in that file, which is why the bug survived on the phone browser where it was actually reported. Keep the two in step. -------------------------------------------------------------------------- */ /* ── A1. Control rail (#workout-type-chooser + #builder-mode-toggle) ───────── */ /* The sub-mode toggle takes the leftover width beside the type chooser, but its flex-basis lets it drop to its own line rather than crushing three labels into ~150px on an awkward in-between width (576-700px). */ #workout-control-rail > #builder-mode-toggle { flex: 1 1 300px; min-width: 0; } /* capacitor-shim.js injects .stream-log-only-note as the chooser's next sibling when the device has no usable camera — which now lands INSIDE the rail. Give it a full-width basis so it reads as its own line instead of a third column. */ #workout-control-rail > .stream-log-only-note { flex: 1 0 100%; } /* ── A2. "Camera and mic settings" disclosure ─────────────────────────────── */ /* builder.js (CAMERA_FLOW_IDS) and yoga.js (WEIGHTS_IDS) hide #exercise-selector and #voice-selector by adding d-none straight to those rows — neither script knows the disclosure exists, and neither should (renaming or re-listing those ids would break the snapshot/restore logic both rely on). Without this rule a "Camera and mic settings" header would be left stranded over nothing in Plan & log, Powerlifting, Cardio and Yoga. Both rows are required to be hidden, so if a future change ever hides only one, the header stays and the surviving row is still reachable. */ .camera-audio-disclosure:has(#exercise-selector.d-none):has(#voice-selector.d-none) { display: none; } /* ── A3. Stats card on phones ─────────────────────────────────────────────── */ /* Under md the .col-md-3 stats card drops below the video, where its five stacked rows (plus h-100) made a tall near-empty column the user had to scroll past to reach the controls. Two compact columns instead. Markup and ids are untouched — workout.js still writes to #rep-counter, #current-exercise, #form-quality-pct, #last-feedback and friends by id. */ @media (max-width: 767.98px) { .stats-container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.9rem; row-gap: 0.6rem; align-items: start; /* .h-100 is height:100% !important and would stretch this grid. */ height: auto !important; } /* Heading and the free-text feedback box want the whole width. */ .stats-container > h4, .stats-container > div:last-child { grid-column: 1 / -1; } .stats-container > h4 { margin-bottom: 0.25rem !important; font-size: 1.1rem; } /* .mb-3 on each row is !important; the grid gap owns the spacing now. */ .stats-container > div { margin-bottom: 0 !important; min-width: 0; } .stats-container .feedback-box { padding: 0.6rem 0.75rem; } } /* ── B1. Segmented controls: safe wrapping on narrow phones ───────────────── */ /* The three-segment weights sub-mode row carries "Powerlifting" — twelve characters with no space to break at — next to "Train with camera". On a 360px screen those labels have to be allowed to wrap and, only if a single word still cannot fit, to break inside that word. NEVER use word-break:break-all or overflow-wrap:anywhere here: those break mid-word EAGERLY (giving "Powerlift / ing"), which is the exact symptom this is meant to remove. overflow-wrap:break-word only fires when a word cannot fit on a line of its own. */ @media (max-width: 575.98px) { #workout-control-rail .btn-group { display: flex; width: 100%; max-width: 100%; } #workout-control-rail .btn-group > .btn { flex: 1 1 0; min-width: 0; /* without this a flex item cannot shrink below min-content */ white-space: normal; /* wrap at spaces first */ overflow-wrap: break-word; /* last resort only */ line-height: 1.15; padding-left: 0.45rem; padding-right: 0.45rem; } } @media (max-width: 380px) { #workout-control-rail .btn-group > .btn { font-size: 0.72rem; padding-left: 0.25rem; padding-right: 0.25rem; letter-spacing: -0.01em; } /* The word is the information, the icon is decoration — same policy the app stylesheet applies to its four-item tab strips. */ #builder-mode-toggle .btn-group > .btn > i { display: none; } } /* ── B3. Powerlifting panel text safety ───────────────────────────────────── */ /* Base size, moved off the five inline style attributes so a media query can step it down without !important. */ .pl-zone { font-size: 0.6rem; min-width: 0; /* five flex-grow labels in a fixed 26px row */ white-space: nowrap; /* "Str-Speed" must not wrap into a 26px-tall box */ overflow: hidden; line-height: 1; padding: 0 2px; } @media (max-width: 575.98px) { /* Nothing in this panel is long enough to need a mid-word break at 360px, but a future zone name or a longer locale string would otherwise push the card sideways. Wrap rather than overflow. */ #powerlifting-panel { overflow-wrap: break-word; } } @media (max-width: 380px) { /* .gap-1 is gap:.25rem !important — 4 gaps cost 16px of a ~322px strip. */ #pl-zone-strip { gap: 2px !important; } .pl-zone { font-size: 0.5rem; letter-spacing: -0.02em; } /* The four set-summary stats sit in a wrapping flex row; shrink the numerals so two fit per line instead of one. */ #pl-view-setdone .card-body > .d-flex > .text-center > div:first-child { font-size: 1.4rem !important; } } /* ── C1. Goals empty state ────────────────────────────────────────────────── */ /* #goals-list carries text-center so goals.js's re-rendered empty state stays centered (it replaces innerHTML, so a class on the

would not survive). Real goal rows are left-aligned copy and must not inherit it. */ #goals-list > .goal-row { text-align: left; }