/* WHITE-FITNESS — futuristic but clean. Deep slate, glass panels, one electric accent. Per-person accent set by . */ :root { --bg: #0a0e16; --bg-2: #0e1320; --panel: rgba(255, 255, 255, 0.04); --panel-line: rgba(255, 255, 255, 0.08); --text: #e8edf6; --text-dim: #8a96ab; --text-faint: #59657a; --ok: #34d399; --warn: #fbbf24; /* accent defaults (Leonard / hot) */ --accent: #ff5a3c; --accent-2: #ff8a3c; --accent-glow: rgba(255, 90, 60, 0.35); --radius: 18px; --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; } body[data-member="keanna"] { /* soft + floral — rose blush + lavender, gentle warm glow */ --accent: #f4a6c6; --accent-2: #c9a7ef; --accent-glow: rgba(244, 166, 198, 0.30); --bg: #0c0a12; --bg-2: #14101c; background: radial-gradient(900px 520px at 50% -8%, rgba(244,166,198,0.10), transparent 60%), radial-gradient(760px 480px at 112% 8%, rgba(201,167,239,0.16), transparent 55%), radial-gradient(680px 520px at -10% 100%, rgba(255,214,228,0.10), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg)); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: var(--sans); color: var(--text); background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.05), transparent 60%), radial-gradient(800px 500px at 110% 10%, var(--accent-glow), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg)); background-attachment: fixed; min-height: 100vh; padding-bottom: 88px; /* room for tab bar */ overscroll-behavior-y: contain; } /* ---- top bar ---- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(10,14,22,0.85), rgba(10,14,22,0.35)); border-bottom: 1px solid var(--panel-line); } .brand { font-weight: 800; letter-spacing: 2px; font-size: 15px; text-transform: uppercase; } .brand b { color: var(--accent); } /* member toggle */ .seg { display: flex; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px; } .seg button { border: 0; background: transparent; color: var(--text-dim); font-family: var(--sans); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .18s; } .seg button.on { color: #07101e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px var(--accent-glow); } /* ---- layout ---- */ main { padding: 18px 16px 8px; max-width: 640px; margin: 0 auto; } .view { display: none; animation: fade .25s ease; } .view.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } } h2.title { font-size: 22px; font-weight: 800; letter-spacing: .3px; margin-bottom: 4px; } .subtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; } /* ---- cards ---- */ .card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; backdrop-filter: blur(8px); } .card.glow { box-shadow: 0 0 0 1px var(--accent-glow), 0 12px 40px rgba(0,0,0,.35); } .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .muted { color: var(--text-dim); font-size: 13px; } .faint { color: var(--text-faint); font-size: 12px; } .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--accent); border: 1px solid var(--accent-glow); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; } .tag.shared { color: var(--text-dim); border-color: var(--panel-line); } /* exercise rows */ .ex { padding: 14px 0; border-top: 1px solid var(--panel-line); } .ex:first-child { border-top: 0; } .ex .name { font-weight: 700; font-size: 16px; } .ex .scheme { font-family: var(--mono); color: var(--text-dim); font-size: 12.5px; margin-top: 2px; } .ex .last { color: var(--accent-2); font-size: 12px; margin-top: 3px; font-family: var(--mono); } .ex .note { color: var(--text-faint); font-size: 12px; margin-top: 3px; } /* set chips */ .sets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .setchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--panel-line); border-radius: 12px; padding: 7px 10px; font-family: var(--mono); font-size: 12.5px; } .setchip.done { border-color: var(--ok); color: var(--ok); } .setchip .x { color: var(--text-faint); } /* inputs / buttons */ input, select, textarea { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--panel-line); border-radius: 12px; color: var(--text); padding: 12px 13px; font-size: 16px; font-family: var(--sans); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } label.fl { display: block; font-size: 12px; color: var(--text-dim); margin: 0 0 6px 2px; text-transform: uppercase; letter-spacing: .5px; } .field { margin-bottom: 12px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: 15px; padding: 13px 16px; border-radius: 14px; width: 100%; color: #07101e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px var(--accent-glow); transition: transform .1s; } .btn:active { transform: scale(.98); } .btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--panel-line); box-shadow: none; } .btn.sm { width: auto; padding: 9px 14px; font-size: 13px; border-radius: 11px; } .btn.danger { background: linear-gradient(135deg,#ef4444,#f87171); } /* progress photos */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gallery img, .compare img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; border: 1px solid var(--panel-line); } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .compare figcaption { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: 6px; } /* trend bar */ .trend { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin-top: 10px; } .trend .bar { flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 4px 4px 0 0; min-height: 4px; opacity: .85; } /* tab bar */ .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-around; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(8,11,18,0.96), rgba(8,11,18,0.7)); backdrop-filter: blur(14px); border-top: 1px solid var(--panel-line); } .tabs button { background: 0; border: 0; color: var(--text-faint); font-family: var(--sans); font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .tabs button .ico { font-size: 20px; line-height: 1; } .tabs button.on { color: var(--accent); } /* auth screen */ .auth-wrap { max-width: 380px; margin: 14vh auto 0; padding: 0 22px; } .auth-logo { text-align: center; font-weight: 900; letter-spacing: 4px; font-size: 26px; text-transform: uppercase; margin-bottom: 6px; } .auth-logo b { color: var(--accent); } .auth-sub { text-align: center; color: var(--text-dim); margin-bottom: 26px; font-size: 13px; } .banner { font-size: 13px; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; } .banner.err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; } .banner.ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); color: #6ee7b7; } .hidden { display: none !important; } .center { text-align: center; } .spread { display: flex; gap: 8px; } .spread > * { flex: 1; } .streak { font-family: var(--mono); font-size: 34px; font-weight: 800; color: var(--accent); }