/* ========================================================================== TapIn theme engine - Light / Dark via [data-theme] on (JS sets it; falls back to system) - Per-gym accent via [data-accent] on ========================================================================== */ :root { /* dark palette (default) */ --bg: #0f1115; --bg-2: #0b0c10; --card: #191d26; --card-2: #212633; --line: #2c3242; --text: #eef1f6; --muted: #9aa4b8; --placeholder: #667089; --shadow: 0 10px 30px rgba(0,0,0,.35); --warn: #ff5a5f; --radius: 16px; } :root[data-theme="light"] { --bg: #f4f6fb; --bg-2: #eef1f7; --card: #ffffff; --card-2: #f1f4fa; --line: #e2e7f0; --text: #141821; --muted: #5c6577; --placeholder: #9aa4b8; --shadow: 0 10px 30px rgba(20,30,60,.10); --warn: #e5484d; } /* ---- accent palettes ---- */ :root[data-accent="lime"] { --accent:#c6ff2e; --accent-2:#86b000; --accent-ink:#0f1115; } :root[data-accent="ember"] { --accent:#ff5a3c; --accent-2:#c22d16; --accent-ink:#ffffff; } :root[data-accent="azure"] { --accent:#3b82f6; --accent-2:#1d4ed8; --accent-ink:#ffffff; } :root[data-accent="violet"] { --accent:#8b5cf6; --accent-2:#6d28d9; --accent-ink:#ffffff; } :root[data-accent="amber"] { --accent:#f59e0b; --accent-2:#b45309; --accent-ink:#241a04; } :root[data-accent="aqua"] { --accent:#14b8a6; --accent-2:#0d9488; --accent-ink:#ffffff; } /* default when no accent set */ :root:not([data-accent]) { --accent:#c6ff2e; --accent-2:#86b000; --accent-ink:#0f1115; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; line-height: 1.5; min-height: 100dvh; transition: background-color .25s ease, color .25s ease; } .wrap { max-width: 460px; margin: 0 auto; padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; } /* ---- topbar ---- */ .topbar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; } .brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .2px; } .tagline { color: var(--muted); font-size: .85rem; } .dash-top { justify-content: space-between; } .logout { color: var(--muted); font-size: .85rem; text-decoration: none; } .logout:hover { color: var(--text); } /* theme toggle */ .theme-toggle { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; } .theme-toggle:active { transform: scale(.9); } /* ---- hero / headings ---- */ .hero { margin: 8px 0 22px; } h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 6px; font-weight: 800; } .sub { color: var(--muted); margin: 0; } /* ---- card / forms ---- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); } label { font-size: .9rem; font-weight: 600; color: var(--text); } label .opt { font-weight: 400; color: var(--muted); font-size: .8rem; } input { width: 100%; padding: 14px 14px; font-size: 1.05rem; color: var(--text); background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } input::placeholder { color: var(--placeholder); } .hint { color: var(--muted); font-size: .82rem; margin: 2px 0 0; } .field-error { color: var(--warn); font-size: .82rem; margin-top: -6px; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 18px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; } .btn-lg { width: 100%; margin-top: 4px; } .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:active { transform: translateY(1px) scale(.995); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn-ghost:hover { background: var(--card-2); } .switch { text-align: center; color: var(--muted); margin-top: 16px; font-size: .9rem; } .switch a { color: var(--accent); text-decoration: none; } .alert { background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .92rem; } /* ---- known / welcome-back ---- */ .welcome-back { color: var(--muted); margin: 0; } .known-name { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; } /* ---- reward screen ---- */ .reward-page .topbar { justify-content: center; position: relative; } .reward { text-align: center; padding: 10px 0; position: relative; z-index: 2; } .check-badge { width: 96px; height: 96px; margin: 6px auto 4px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; } @keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } } .reward h1 { font-size: 1.55rem; margin: 8px 0 4px; } .streak { display: flex; gap: 12px; justify-content: center; margin: 22px 0; } .streak-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; min-width: 110px; box-shadow: var(--shadow); } .streak-item .num { display: block; font-size: 1.7rem; font-weight: 800; } .streak-item .lbl { color: var(--muted); font-size: .8rem; } .quote { background: var(--card); border-left: 4px solid var(--accent); border-radius: 12px; margin: 20px 0; padding: 16px 18px; text-align: left; box-shadow: var(--shadow); } .quote p { margin: 0; font-size: 1.05rem; font-style: italic; } .quote cite { display: block; margin-top: 8px; color: var(--muted); font-style: normal; font-size: .85rem; } .dna-line { color: var(--accent); font-weight: 700; margin: 18px 0; } /* confetti canvas overlays the whole screen */ #confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ---- dashboard ---- */ .stat-row { display: flex; gap: 12px; margin-bottom: 8px; } .stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; box-shadow: var(--shadow); } .stat.big { background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; } .stat.warn .stat-num { color: var(--warn); } .stat-icon { font-size: 1rem; opacity: .8; } .stat-num { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; } .stat-lbl { font-size: .78rem; opacity: .85; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; } .panel-head h2 { font-size: 1rem; margin: 0; } .sub-lbl { color: var(--muted); font-weight: 400; font-size: .78rem; } .date-pick input { padding: 8px 10px; font-size: .85rem; width: auto; color-scheme: light dark; } .chart { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 8px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .bar { width: 70%; min-height: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 6px 6px 0 0; position: relative; display: flex; justify-content: center; animation: grow .6s ease both; transform-origin: bottom; } @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bar-val { position: absolute; top: -18px; font-size: .72rem; color: var(--muted); } .bar-lbl { margin-top: 6px; font-size: .72rem; color: var(--muted); } /* accent picker (owner) */ .accent-picker { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--line); padding: 0; } .swatch.active { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 20%, transparent); } .sw-lime{background:#c6ff2e}.sw-ember{background:#ff5a3c}.sw-azure{background:#3b82f6} .sw-violet{background:#8b5cf6}.sw-amber{background:#f59e0b}.sw-aqua{background:#14b8a6} .list { list-style: none; margin: 0; padding: 0; } .list li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); } .list li:last-child { border-bottom: none; } .li-name { font-weight: 600; } .li-meta { color: var(--muted); font-size: .8rem; } .li-time { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; } .empty { color: var(--muted); text-align: center; padding: 22px 0; margin: 0; } .empty .emoji { font-size: 1.8rem; display: block; margin-bottom: 6px; opacity: .8; } /* ---- footer ---- */ .foot { text-align: center; color: var(--muted); opacity: .7; font-size: .78rem; margin-top: 26px; } .foot b { color: var(--muted); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }