:root { color-scheme: dark; --bg:#101612; --panel:#18211b; --panel-2:#1d2a20; --line:rgba(220,238,216,.13); --muted:#8e9c91; --text:#edf4e9; --lime:#c7ff6b; --orange:#ff8a4c; --mono:'DM Mono',monospace; --sans:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 85% 0%,#26372b 0,transparent 30%),var(--bg); color:var(--text); font-family:var(--sans); } button,input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100% - 32px,1080px); margin:auto; } .site-header { height:80px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .brand { color:var(--text); display:inline-flex; gap:10px; align-items:center; text-decoration:none; font-size:15px; font-weight:600; letter-spacing:-.03em; } .brand em { color:var(--lime); font-style:normal; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--lime); color:var(--lime); border-radius:50%; font-size:17px; } .header-user { color:var(--muted); display:flex; gap:14px; align-items:center; font-size:13px; } .header-user button { border:0; color:var(--lime); background:transparent; padding:8px 0; } .hidden { display:none!important; } .eyebrow,.date-stamp,.app-footer,.you-tag,.streak-orb span,.streak-orb small { font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:10px; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(42px,8vw,76px); letter-spacing:-.08em; line-height:.94; margin-bottom:24px; } h1 span { color:var(--lime); } h2 { font-size:25px; letter-spacing:-.06em; margin-bottom:0; } .eyebrow { color:var(--orange); margin-bottom:14px; } .auth-layout { min-height:calc(100vh - 80px); display:grid; gap:42px; align-items:center; padding:60px 0 90px; } .auth-intro { max-width:540px; } .intro-copy { color:var(--muted); line-height:1.6; max-width:390px; font-size:16px; } .challenge-dates { display:flex; align-items:center; gap:14px; margin-top:48px; font:11px var(--mono); color:var(--muted); letter-spacing:.12em; } .challenge-dates i { height:1px; width:62px; background:var(--orange); } .auth-card,.progress-card,.board-card { background:rgba(24,33,27,.92); border:1px solid var(--line); border-radius:18px; } .auth-card { padding:8px; max-width:460px; width:100%; justify-self:end; box-shadow:0 24px 70px rgba(0,0,0,.18); } .auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding-bottom:10px; } .auth-tab { background:transparent; border:0; color:var(--muted); padding:16px 10px; font-size:13px; } .auth-tab.active { background:var(--panel-2); color:var(--text); border-radius:12px; } form { padding:20px 20px 18px; } label { color:var(--muted); display:grid; gap:8px; font-size:12px; margin-bottom:18px; } input { width:100%; background:#101712; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:14px; outline:none; } input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(199,255,107,.1); } .button { border:0; border-radius:10px; padding:14px 17px; color:var(--text); font-size:13px; font-weight:600; transition:transform .18s ease,opacity .18s ease; } .button:hover { transform:translateY(-1px); } .button:disabled { opacity:.55; cursor:wait; transform:none; } .button-primary { background:var(--lime); color:#101612; } .button-quiet { background:var(--panel-2); color:var(--lime); padding:11px 13px; } .full-width { width:100%; } .form-error { color:#ff9a7a; min-height:18px; font-size:12px; margin:12px 0 0; } .main-nav { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:45px; } .nav-link { border:0; background:transparent; color:var(--muted); padding:0 0 14px; position:relative; font-size:13px; } .nav-link.active { color:var(--text); } .nav-link.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--lime); } .today-hero,.board-hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding-bottom:34px; } .today-hero h1,.board-hero h1 { margin-bottom:0; } .hero-message,.board-hero p:last-child { color:var(--muted); margin:20px 0 0; font-size:14px; } .streak-orb { flex:0 0 118px; height:118px; border:1px solid var(--lime); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--lime); transform:rotate(5deg); } .streak-orb strong { font-size:38px; line-height:1; letter-spacing:-.1em; margin:5px 0; } .streak-orb small { color:var(--muted); letter-spacing:.05em; font-size:8px; } .progress-card { padding:22px 22px 18px; margin-bottom:56px; } .progress-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); } .progress-top strong { color:var(--text); font-size:28px; letter-spacing:-.08em; } .progress-top small { font:12px var(--mono); color:var(--muted); margin-left:2px; } .progress-track { height:7px; border-radius:10px; overflow:hidden; background:#101712; margin:14px 0 13px; } .progress-track span { display:block; height:100%; min-width:0; border-radius:inherit; background:var(--lime); transition:width .3s ease; } .progress-card p,.board-note { color:var(--muted); font-size:11px; margin:0; } .section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; } .date-stamp { color:var(--muted); padding-bottom:3px; } .checklist { display:grid; gap:8px; } .habit { width:100%; display:grid; grid-template-columns:37px 1fr 28px; align-items:center; gap:10px; text-align:left; min-height:62px; border:1px solid var(--line); border-radius:12px; padding:9px 12px; color:var(--text); background:var(--panel); transition:border .18s ease,background .18s ease,transform .18s ease; } .habit:hover { transform:translateX(2px); border-color:rgba(199,255,107,.45); } .habit.is-complete { border-color:rgba(199,255,107,.45); background:linear-gradient(90deg,rgba(199,255,107,.15),var(--panel)); } .habit-number { font:11px var(--mono); color:var(--muted); } .habit-name { font-size:14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .week-badge { font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(255,138,76,.35); border-radius:20px; padding:3px 8px; white-space:nowrap; } .week-badge.is-met { color:var(--lime); border-color:rgba(199,255,107,.45); } .weekly-heading { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:26px 0 12px; } .weekly-heading .eyebrow { margin:0; } .weekly-heading span { color:var(--muted); font-size:12px; } .habit-check { width:26px; height:26px; display:grid; place-items:center; color:#101612; background:transparent; border:1px solid var(--line); border-radius:50%; font-weight:700; } .is-complete .habit-check { background:var(--lime); border-color:var(--lime); } .status-card { display:flex; align-items:center; gap:18px; background:var(--panel); border:1px solid var(--line); padding:22px; border-radius:12px; } .status-icon { color:var(--lime); font-size:28px; } .status-card strong { font-size:15px; } .status-card p { color:var(--muted); font-size:13px; margin:6px 0 0; } .app-footer { color:#59655c; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:25px 0 30px; margin-top:70px; font-size:9px; } .board-hero { display:block; } .board-hero h1 { margin-bottom:20px; } .board-hero p:last-child { margin:0; } .board-card { padding:22px; } .board-list { display:grid; gap:3px; } .board-row { display:grid; grid-template-columns:34px 1fr auto auto auto; gap:10px; align-items:center; border-bottom:1px solid var(--line); min-height:68px; } .board-row:last-child { border-bottom:0; } .board-row.is-you { background:rgba(199,255,107,.07); border-radius:9px; padding:0 8px; margin:0 -8px; } .rank { font:11px var(--mono); color:var(--muted); } .player-info { display:flex; align-items:center; gap:8px; min-width:0; } .player-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; } .you-tag { color:var(--lime); font-size:8px; letter-spacing:.08em; } .score { min-width:48px; text-align:right; display:grid; gap:3px; } .score strong { font:13px var(--mono); } .score span { color:var(--muted); font-size:9px; } .streak-score { min-width:45px; } .points-score { min-width:54px; } .points-score strong { font-size:16px; color:var(--lime); letter-spacing:-.03em; } .board-note { border-top:1px solid var(--line); padding-top:17px; margin-top:11px; line-height:1.5; } .empty-state { color:var(--muted); padding:32px 0; text-align:center; font-size:13px; } .board-row.is-tappable { cursor:pointer; transition:background .18s ease; } .board-row.is-tappable:hover { background:rgba(199,255,107,.06); } .board-row.is-tappable:focus-visible { outline:1px solid var(--lime); outline-offset:-1px; border-radius:8px; }
.profile-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:30px; flex-wrap:wrap; } .profile-hero h1 { font-size:clamp(34px,7vw,58px); margin-bottom:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .profile-you { font-size:9px; } .profile-sub { color:var(--muted); font-size:13px; margin:0; }
.stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:34px; } .stat-tile { background:rgba(24,33,27,.92); border:1px solid var(--line); border-radius:14px; padding:16px 15px; display:grid; gap:3px; } .stat-label { font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--orange); } .stat-tile strong { font-size:30px; letter-spacing:-.06em; line-height:1; color:var(--lime); } .stat-sub { color:var(--muted); font-size:10px; }
.history-card { background:rgba(24,33,27,.92); border:1px solid var(--line); border-radius:18px; padding:20px; margin-bottom:22px; }
.week-block { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line); } .week-block:last-of-type { border-bottom:0; padding-bottom:0; margin-bottom:8px; } .week-block.is-current .week-label strong { color:var(--lime); } .week-label { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; } .week-label strong { font-size:13px; } .week-label span { font:10px var(--mono); color:var(--muted); letter-spacing:.08em; }
.day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .day-cell { position:relative; aspect-ratio:1; border-radius:8px; border:1px solid var(--line); background:#131b16; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:48px; } .day-num { font:9px var(--mono); color:var(--muted); } .day-score { font:10px var(--mono); color:var(--text); } .day-cell.is-empty .day-score { color:#4c584f; } .day-cell.is-partial { background:linear-gradient(180deg,rgba(199,255,107,.14),#131b16); border-color:rgba(199,255,107,.25); } .day-cell.is-perfect { background:linear-gradient(180deg,rgba(199,255,107,.42),rgba(199,255,107,.16)); border-color:rgba(199,255,107,.6); } .day-cell.is-perfect .day-score { color:var(--lime); font-weight:600; } .day-cell.is-future { opacity:.32; } .day-cell.is-today { box-shadow:0 0 0 2px var(--orange); }
.day-marks { display:flex; gap:2px; height:14px; align-items:center; justify-content:center; } .mark { font-size:12px; line-height:1; display:inline-block; }
.day-cell.is-tappable { cursor:pointer; } .day-cell.is-tappable:hover { border-color:rgba(199,255,107,.5); } .day-cell.is-selected { box-shadow:0 0 0 2px var(--lime); } .day-cell.is-today.is-selected { box-shadow:0 0 0 2px var(--lime),0 0 0 4px rgba(255,138,76,.5); } .day-cell:focus-visible { outline:none; box-shadow:0 0 0 2px var(--lime); }
.day-detail { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .detail-empty { color:var(--muted); font-size:12px; margin:0; } .detail-head h3 { margin:0 0 4px; font-size:15px; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; } .detail-perfect { font:9px var(--mono); letter-spacing:.1em; color:var(--lime); border:1px solid rgba(199,255,107,.45); border-radius:20px; padding:2px 7px; } .detail-head p { color:var(--muted); font-size:12px; margin:0 0 12px; } .detail-head strong { color:var(--text); }
.detail-rows { display:grid; gap:2px; } .detail-row { display:grid; grid-template-columns:20px 1fr auto; gap:9px; align-items:center; padding:7px 9px; border-radius:8px; background:#131b16; } .detail-mark { font-size:13px; text-align:center; color:#4c584f; } .detail-row.is-earned { background:linear-gradient(90deg,rgba(199,255,107,.13),#131b16); } .detail-row.is-earned .detail-mark { color:var(--lime); } .detail-row.is-over { background:linear-gradient(90deg,rgba(255,138,76,.12),#131b16); } .detail-row.is-over .detail-mark { color:var(--orange); } .detail-row.is-missed .detail-name { color:var(--muted); } .detail-name { font-size:13px; display:flex; align-items:center; gap:7px; } .detail-name em { font:9px var(--mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); border:1px solid rgba(255,138,76,.3); border-radius:20px; padding:2px 6px; } .detail-points { font:10px var(--mono); color:var(--muted); white-space:nowrap; } .detail-row.is-earned .detail-points { color:var(--lime); }
.week-training { display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; } .week-chip { font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:3px 9px; } .week-chip.is-met { color:var(--lime); border-color:rgba(199,255,107,.4); }
.habit-stats { display:grid; gap:9px; } .habit-stat { display:grid; grid-template-columns:1fr 56px 74px; gap:10px; align-items:center; } .habit-stat-name { font-size:13px; display:flex; align-items:center; gap:7px; } .habit-stat-name em { font:9px var(--mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); border:1px solid rgba(255,138,76,.3); border-radius:20px; padding:2px 6px; } .habit-stat-bar { height:5px; border-radius:10px; background:#101712; overflow:hidden; } .habit-stat-bar span { display:block; height:100%; background:var(--lime); border-radius:inherit; } .habit-stat-value { font:11px var(--mono); color:var(--muted); text-align:right; }
.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,140%); opacity:0; padding:12px 16px; background:var(--lime); color:#101612; border-radius:10px; font-size:12px; transition:all .2s ease; z-index:10; box-shadow:0 8px 28px rgba(0,0,0,.3); } .toast.is-visible { transform:translate(-50%,0); opacity:1; } .toast-error { background:#ff9a7a; }
@media (min-width:720px) { .stat-row { grid-template-columns:repeat(4,1fr); } .day-grid { gap:7px; } .day-cell { min-height:56px; } .history-card { padding:26px 28px; } .app-shell { width:min(100% - 64px,1080px); } .auth-layout { grid-template-columns:1fr 1fr; } .today-hero,.board-hero { padding-top:20px; } .progress-card { max-width:620px; } .checklist { grid-template-columns:1fr 1fr; } .habit { min-height:72px; } .board-card { padding:28px 30px; } }
@media (max-width:480px) { .site-header { height:68px; } .auth-layout { padding-top:48px; } .auth-intro h1 { font-size:55px; } .today-hero h1,.board-hero h1 { font-size:54px; } .streak-orb { flex-basis:92px; height:92px; } .streak-orb strong { font-size:30px; } .streak-orb small { display:none; } .board-card { padding:16px; } .board-row { grid-template-columns:22px 1fr auto auto auto; gap:6px; } .score { min-width:38px; } .points-score { min-width:44px; } .points-score strong { font-size:15px; } .streak-score { min-width:34px; } .section-heading { align-items:center; } .button-quiet { font-size:11px; } }