/* ========================================================= PUSH-UP CHALLENGE — STYLESHEET Organized sections: 1. CSS Variables (design tokens) 2. Reset & base styles 3. Layout / navigation 4. Buttons & form elements 5. Dashboard (hero, stats, panels) 6. Camera / setup / tracking screens 7. Result screen 8. Leaderboard / History / How It Works / Settings 9. Modals & toasts 10. Animations 11. Responsive breakpoints ========================================================= */ /* ---------- 1. CSS VARIABLES (DESIGN TOKENS) ---------- */ :root { --background: #0b0f14; --surface: #131a22; --surface-raised: #1a2230; --primary: #ff5a3c; --primary-dark: #e6431f; --secondary: #2dd4bf; --text: #f4f6f8; --muted: #94a3b3; --success: #22c55e; --warning: #f5a524; --danger: #ef4444; --border: #253140; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --font-main: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --nav-height: 64px; --bottom-nav-height: 64px; } /* Light theme override (toggled via .theme-light on ) */ body.theme-light { --background: #f4f6f8; --surface: #ffffff; --surface-raised: #ffffff; --text: #101418; --muted: #5b6572; --border: #e2e6eb; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1); } /* ---------- 2. RESET & BASE STYLES ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; /* never allow horizontal scroll */ } body { background: var(--background); color: var(--text); font-family: var(--font-main); line-height: 1.5; padding-top: var(--nav-height); padding-bottom: var(--bottom-nav-height); min-height: 100vh; transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } img, video, canvas { max-width: 100%; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } *:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; } /* ---------- 3. LAYOUT / NAVIGATION ---------- */ .top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--surface); border-bottom: 1px solid var(--border); z-index: 100; } .top-nav__inner { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .brand { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--text); font-size: 18px; font-weight: 800; padding: 8px; } .brand__icon { font-size: 22px; } .top-nav__links { display: flex; gap: 4px; } .nav-link { background: none; border: none; color: var(--muted); font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: var(--surface-raised); color: var(--text); } .nav-link.active { color: var(--primary); background: rgba(255, 90, 60, 0.1); } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; padding: 0; } .hamburger span { display: block; height: 2px; width: 22px; background: var(--text); margin: 0 auto; border-radius: 2px; } .mobile-menu { position: fixed; top: var(--nav-height); right: 0; width: 240px; max-width: 80vw; background: var(--surface); border-left: 1px solid var(--border); height: calc(100vh - var(--nav-height)); z-index: 150; display: flex; flex-direction: column; padding: 12px; gap: 4px; transform: translateX(100%); transition: transform 0.25s ease; } .mobile-menu.open { transform: translateX(0); } .mobile-menu .nav-link { text-align: left; width: 100%; } .mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 140; } .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); background: var(--surface); border-top: 1px solid var(--border); z-index: 100; align-items: center; justify-content: space-around; } .bottom-nav__item { background: none; border: none; color: var(--muted); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); flex: 1; } .bottom-nav__icon { font-size: 20px; } .bottom-nav__item.active { color: var(--primary); } main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; } .view { display: none; } .view.active { display: block; animation: fadeIn 0.25s ease; } /* ---------- 4. BUTTONS & FORM ELEMENTS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; padding: 12px 22px; border-radius: var(--radius-md); border: 2px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease; } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--border); } .btn--secondary:hover { background: var(--surface-raised); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { background: #c93636; } .btn--danger-outline { background: transparent; border-color: var(--danger); color: var(--danger); } .btn--danger-outline:hover { background: rgba(239, 68, 68, 0.1); } .btn--lg { padding: 16px 32px; font-size: 16px; } .btn--block { width: 100%; } .toggle-btn { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; } .text-input { width: 100%; padding: 14px 16px; font-size: 16px; border-radius: var(--radius-md); border: 2px solid var(--border); background: var(--surface); color: var(--text); } .text-input:focus { border-color: var(--primary); } .field-error { color: var(--danger); font-size: 13px; margin: 8px 0; } /* ---------- 5. DASHBOARD ---------- */ .hero { text-align: center; padding: 48px 16px 40px; } .hero__eyebrow { color: var(--primary); font-weight: 800; letter-spacing: 0.15em; font-size: 13px; margin-bottom: 12px; } .hero__title { font-size: clamp(28px, 5vw, 48px); font-weight: 900; line-height: 1.15; margin-bottom: 16px; } .hero__subtitle { color: var(--muted); font-size: 16px; max-width: 480px; margin: 0 auto 28px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card__label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 8px; } .stat-card__value { font-size: 28px; font-weight: 900; color: var(--text); } .stat-card__unit { font-size: 14px; color: var(--muted); font-weight: 600; } .dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; } .panel__header { margin-bottom: 14px; } .panel__title { font-size: 17px; font-weight: 800; } .leaderboard-preview, .leaderboard-full { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .leaderboard-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border); } .leaderboard-row.is-you { border-color: var(--primary); background: rgba(255, 90, 60, 0.08); } .leaderboard-row__rank { font-weight: 800; width: 36px; flex-shrink: 0; } .leaderboard-row__name { flex: 1; font-weight: 600; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-row__score { font-weight: 800; color: var(--primary); } .history-preview, .history-full { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .history-row { padding: 14px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border); } .history-row__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .history-row__reps { font-size: 18px; font-weight: 800; } .history-row__date { color: var(--muted); font-size: 13px; } .history-row__duration { color: var(--muted); font-size: 13px; } .history-row__badge { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--primary); } .empty-state { color: var(--muted); font-size: 14px; padding: 16px 0; text-align: center; } .empty-state-block { text-align: center; padding: 40px 16px; color: var(--muted); } .empty-state-block p { margin-bottom: 16px; } .how-it-works-preview { margin-bottom: 8px; } .steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .step-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; } .step-card__number { font-weight: 900; font-size: 20px; color: var(--primary); margin-bottom: 6px; } .step-card__title { font-weight: 700; margin-bottom: 4px; font-size: 14px; } .step-card__text { color: var(--muted); font-size: 13px; } /* ---------- 6. CAMERA / SETUP / TRACKING SCREENS ---------- */ .centered-card { max-width: 420px; margin: 40px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; text-align: center; } .centered-card--wide { max-width: 640px; } .centered-card--result { max-width: 520px; } .centered-card__title { font-size: 24px; font-weight: 900; margin-bottom: 8px; } .centered-card__subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; } .centered-card__icon { font-size: 40px; margin-bottom: 8px; } #nameForm .text-input { margin-bottom: 12px; } .setup-checklist { text-align: left; background: var(--surface-raised); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; } .setup-checklist__heading { font-weight: 800; margin-bottom: 10px; } .setup-checklist li { color: var(--muted); font-size: 14px; margin-bottom: 6px; } .camera-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; } .camera-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* mirror, feels natural like a mirror */ } .camera-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); } .camera-preview--background { position: absolute; inset: 0; border-radius: 0; z-index: -1; opacity: 0.5; } .camera-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--muted); background: rgba(0, 0, 0, 0.4); font-size: 14px; } .tracking-status { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 16px; } .tracking-status.status-good { color: var(--success); } .tracking-status.status-warn { color: var(--warning); } .tracking-status.status-bad { color: var(--danger); } .setup-actions { display: flex; gap: 12px; justify-content: center; } .countdown-screen { position: relative; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .countdown-screen__label { position: relative; z-index: 1; color: var(--muted); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 12px; } .countdown-screen__number { position: relative; z-index: 1; font-size: 96px; font-weight: 900; color: var(--primary); animation: popIn 0.4s ease; } .tracking-screen { max-width: 720px; margin: 0 auto; } .tracking-screen__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tracking-screen__title { font-size: 18px; font-weight: 800; } .tracking-status-pill { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border); } .tracking-status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .tracking-status-pill.status-good .tracking-status-pill__dot { background: var(--success); } .tracking-status-pill.status-ok .tracking-status-pill__dot { background: var(--secondary); } .tracking-status-pill.status-warn .tracking-status-pill__dot { background: var(--warning); } .tracking-status-pill.status-bad .tracking-status-pill__dot { background: var(--danger); } .rep-counter { text-align: center; position: relative; margin-bottom: 16px; } .rep-counter__number { font-size: clamp(64px, 18vw, 120px); font-weight: 900; line-height: 1; color: var(--primary); transition: transform 0.15s ease; } .rep-counter__number.bump { animation: repBump 0.35s ease; } .rep-counter__label { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; } .rep-plus-one { position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: var(--success); font-weight: 900; font-size: 20px; animation: floatUp 0.9s ease forwards; } .camera-preview--tracking { aspect-ratio: 16 / 10; } .form-feedback { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.55); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; } .milestone-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 24px; font-weight: 900; text-align: center; animation: fadeIn 0.2s ease; } .rest-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #fff; gap: 6px; } .rest-overlay p:first-child { font-weight: 800; letter-spacing: 0.08em; } .rest-overlay__countdown { font-size: 40px; font-weight: 900; } .pause-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, 0.75); color: #fff; text-align: center; padding: 20px; } .pause-overlay__title { font-size: 20px; font-weight: 900; letter-spacing: 0.06em; } .pause-overlay__text { color: #d0d5db; font-size: 14px; margin-bottom: 10px; } .pause-overlay__actions { display: flex; gap: 10px; } .tracking-screen__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 12px; } .challenge-timer { text-align: left; } .challenge-timer__label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; } .challenge-timer__value { font-size: 24px; font-weight: 800; } .tracking-controls { display: flex; gap: 10px; } /* ---------- 7. RESULT SCREEN ---------- */ .result-heading { font-weight: 800; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; } .result-score { font-size: clamp(32px, 8vw, 52px); font-weight: 900; margin-bottom: 24px; } .result-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; } .result-stat { background: var(--surface-raised); border-radius: var(--radius-md); padding: 14px; } .result-stat__label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .result-stat__value { font-size: 22px; font-weight: 800; } .result-pr-banner { background: linear-gradient(135deg, var(--primary), #ff8a5c); color: #fff; font-weight: 900; font-size: 18px; padding: 14px; border-radius: var(--radius-md); margin-bottom: 20px; animation: popIn 0.4s ease; } .result-keep-training { color: var(--muted); font-weight: 600; margin-bottom: 20px; } .result-actions { display: flex; flex-direction: column; gap: 10px; } /* ---------- 8. LEADERBOARD / HISTORY / HOW IT WORKS / SETTINGS ---------- */ .page-header { margin-bottom: 24px; } .page-header__title { font-size: 26px; font-weight: 900; margin-bottom: 6px; } .page-header__subtitle { color: var(--muted); font-size: 14px; } .rules-list li { color: var(--muted); font-size: 14px; margin-bottom: 8px; padding-left: 16px; position: relative; } .rules-list li::before { content: "•"; position: absolute; left: 0; color: var(--primary); } .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; } .faq-item summary { font-weight: 700; cursor: pointer; } .faq-item p { color: var(--muted); font-size: 14px; margin-top: 10px; line-height: 1.6; } .settings-panel { display: flex; flex-direction: column; gap: 18px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .settings-row:last-child { border-bottom: none; padding-bottom: 0; } .settings-row__label { font-weight: 700; font-size: 14px; } .settings-row__control { display: flex; gap: 8px; align-items: center; } .settings-row__control .text-input { width: 200px; } .cloud-sync-status { color: var(--muted); font-size: 14px; } /* ---------- 9. MODALS & TOASTS ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 20px; } .modal { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 420px; width: 100%; text-align: center; animation: popIn 0.2s ease; box-shadow: var(--shadow-md); } .modal__title { font-size: 20px; font-weight: 900; margin-bottom: 12px; } .modal__text { color: var(--muted); font-size: 14px; margin-bottom: 8px; } .modal__score { font-size: 28px; font-weight: 900; color: var(--primary); margin-bottom: 12px; } .modal__list { text-align: left; color: var(--muted); font-size: 14px; margin: 12px auto 16px; max-width: 220px; } .modal__list li { margin-bottom: 4px; padding-left: 14px; position: relative; } .modal__list li::before { content: "•"; position: absolute; left: 0; color: var(--danger); } .modal__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .toast-container { position: fixed; bottom: calc(var(--bottom-nav-height) + 16px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 400; width: min(360px, 90vw); align-items: center; } .toast { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); padding: 12px 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); animation: toastIn 0.25s ease, toastOut 0.25s ease 2.5s forwards; width: 100%; text-align: center; } .toast.toast--success { border-color: var(--success); } .toast.toast--warning { border-color: var(--warning); } .toast.toast--danger { border-color: var(--danger); } /* ---------- 10. ANIMATIONS ---------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes repBump { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -40px); } } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; } } /* ---------- 11. RESPONSIVE BREAKPOINTS ---------- */ @media (max-width: 1024px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .top-nav__links { display: none; } .hamburger { display: flex; } .bottom-nav { display: flex; } .dashboard-columns { grid-template-columns: 1fr; } } @media (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: 1fr 1fr; } .result-stats { grid-template-columns: 1fr 1fr; } .hero { padding: 32px 8px 28px; } main { padding: 16px 14px 40px; } .centered-card { padding: 24px 18px; margin: 20px auto; } .settings-row__control .text-input { width: 100%; } .settings-row__control { flex-wrap: wrap; width: 100%; } } @media (max-width: 400px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .steps-grid { grid-template-columns: 1fr; } .rep-counter__number { font-size: 72px; } } /* Landscape hint for camera-heavy screens on small devices */ @media (max-width: 768px) and (orientation: portrait) { .landscape-hint { display: block; } } .landscape-hint { display: none; background: var(--warning); color: #1a1a1a; text-align: center; font-size: 13px; font-weight: 700; padding: 8px; border-radius: var(--radius-sm); margin-bottom: 12px; }