Spaces:
Running
Running
| /* ============================================================================ | |
| FitTrack — data-dense fitness analytics dashboard (Garmin/Strava-style) | |
| ========================================================================== */ | |
| :root { | |
| --bg:#eef2f6; --panel:#ffffff; --ink:#0f172a; --muted:#64748b; --faint:#94a3b8; | |
| --line:#e2e8f0; --line2:#eef2f7; | |
| --blue:#2563eb; --violet:#7c3aed; --green:#16a34a; --amber:#d97706; --red:#dc2626; --orange:#f97316; | |
| --font:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif; | |
| } | |
| * { box-sizing:border-box; margin:0; padding:0; } | |
| body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:13px; -webkit-font-smoothing:antialiased; } | |
| a { color:inherit; text-decoration:none; } | |
| /* Top app bar */ | |
| .ft-top { background:#0f172a; color:#fff; } | |
| .ft-top-inner { max-width:1120px; margin:0 auto; padding:0 20px; height:52px; display:flex; align-items:center; gap:22px; } | |
| .ft-brand { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:.4rem; } | |
| .ft-brand .dot { color:var(--orange); } | |
| .ft-nav { display:flex; gap:4px; } | |
| .ft-nav a { padding:.4rem .8rem; font-size:.82rem; font-weight:600; color:#cbd5e1; border-radius:5px; } | |
| .ft-nav a:hover { background:#1e293b; color:#fff; } | |
| .ft-nav a.active { background:#1e293b; color:#fff; } | |
| .ft-top-right { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:.82rem; color:#cbd5e1; } | |
| .ft-top-right a:hover { color:#fff; } | |
| .ft-avatar { width:28px; height:28px; border-radius:50%; background:var(--orange); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.75rem; } | |
| .ft-shell { max-width:1120px; margin:16px auto; padding:0 20px; } | |
| .ft-datebar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } | |
| .ft-datebar h1 { font-size:1.3rem; font-weight:800; letter-spacing:-.02em; } | |
| .ft-datebar .sub { font-size:.8rem; color:var(--muted); } | |
| .ft-datenav a { display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:5px; color:var(--muted); } | |
| .ft-datenav a:hover { border-color:var(--blue); color:var(--blue); } | |
| .ft-datenav .d { font-weight:700; margin:0 8px; } | |
| /* KPI strip */ | |
| .kpis { display:grid; grid-template-columns:repeat(7,1fr); gap:0; border:1px solid var(--line); background:#fff; border-radius:8px; overflow:hidden; margin-bottom:14px; } | |
| .kpi { padding:12px 14px; border-left:1px solid var(--line2); } | |
| .kpi:first-child { border-left:none; } | |
| .kpi .k-lbl { font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; } | |
| .kpi .k-val { font-size:1.45rem; font-weight:800; line-height:1.1; margin-top:3px; letter-spacing:-.02em; } | |
| .kpi .k-val .u { font-size:.7rem; color:var(--muted); font-weight:600; } | |
| .kpi .k-delta { font-size:.7rem; font-weight:700; margin-top:2px; } | |
| .up { color:var(--red); } .down { color:var(--green); } .flat { color:var(--muted); } | |
| @media (max-width:1000px){ .kpis { grid-template-columns:repeat(4,1fr); } .kpi:nth-child(4n+1){ border-left:none; } } | |
| /* Panels + grid */ | |
| .ft-grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:start; } | |
| .ft-grid.thirds { grid-template-columns:1fr 1fr; } | |
| .col { display:flex; flex-direction:column; gap:14px; } | |
| @media (max-width:820px){ .ft-grid, .ft-grid.thirds { grid-template-columns:1fr; } } | |
| .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; } | |
| .panel-h { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line2); } | |
| .panel-h h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; } | |
| .panel-h .meta { font-size:.72rem; color:var(--faint); font-weight:600; } | |
| .panel-h a { font-size:.72rem; color:var(--blue); font-weight:700; } | |
| .panel-b { padding:14px; } | |
| /* Charts */ | |
| .chart { width:100%; height:auto; display:block; } | |
| .grid-line { stroke:var(--line); stroke-width:1; } | |
| .wt-area { fill:var(--violet); opacity:.08; } | |
| .wt-line { fill:none; stroke:var(--violet); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; } | |
| .wt-dot { fill:var(--violet); } | |
| .bar { fill:#cbd5e1; } | |
| .bar.over { fill:var(--blue); } | |
| .goal-line { stroke:var(--amber); stroke-width:1.5; stroke-dasharray:4 3; } | |
| .bar-lbl { font-size:9px; fill:var(--faint); text-anchor:middle; font-family:var(--font); } | |
| /* Calorie ring */ | |
| .ring-wrap { display:flex; flex-direction:column; align-items:center; } | |
| .ring-bg { fill:none; stroke:var(--line); stroke-width:13; } | |
| .ring-fg { fill:none; stroke:var(--orange); stroke-width:13; stroke-linecap:round; transition:stroke-dasharray .3s; } | |
| .ring-center { text-align:center; margin-top:-92px; margin-bottom:44px; } | |
| .ring-center .big { font-size:1.7rem; font-weight:800; line-height:1; } | |
| .ring-center .lbl { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } | |
| .cal-row { display:flex; justify-content:space-around; text-align:center; border-top:1px solid var(--line2); padding-top:10px; margin-top:4px; } | |
| .cal-row .n { font-weight:800; font-size:.95rem; } | |
| .cal-row .l { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } | |
| /* Macro bars */ | |
| .macro { margin-bottom:9px; } | |
| .macro:last-child { margin-bottom:0; } | |
| .macro .m-top { display:flex; justify-content:space-between; font-size:.74rem; margin-bottom:3px; } | |
| .macro .m-name { font-weight:700; } | |
| .macro .m-val { color:var(--muted); } | |
| .m-track { height:7px; background:var(--line); border-radius:4px; overflow:hidden; } | |
| .m-fill { height:100%; border-radius:4px; } | |
| .m-fill.protein { background:var(--green); } .m-fill.carbs { background:var(--amber); } | |
| .m-fill.fat { background:var(--red); } .m-fill.fiber { background:var(--blue); } | |
| /* Week training dots */ | |
| .week-dots { display:flex; justify-content:space-between; margin-bottom:12px; } | |
| .week-dots .wd { text-align:center; } | |
| .week-dots .dot { width:30px; height:30px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 4px; font-size:.8rem; color:var(--faint); } | |
| .week-dots .wd.on .dot { background:var(--green); border-color:var(--green); color:#fff; } | |
| .week-dots .lbl { font-size:.66rem; color:var(--muted); } | |
| .week-stats { display:flex; justify-content:space-around; text-align:center; border-top:1px solid var(--line2); padding-top:10px; } | |
| .week-stats .n { font-weight:800; font-size:1.05rem; } | |
| .week-stats .l { font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } | |
| /* Heatmap */ | |
| .heat rect { rx:2; } | |
| .h0{fill:#eceff3;} .h1{fill:#c6e6cf;} .h2{fill:#7fce97;} .h3{fill:#39a860;} .h4{fill:#16803c;} | |
| .heat-legend { display:flex; align-items:center; gap:4px; font-size:.66rem; color:var(--faint); margin-top:8px; justify-content:flex-end; } | |
| .heat-legend i { width:11px; height:11px; border-radius:2px; display:inline-block; } | |
| /* Data table */ | |
| .dt { width:100%; border-collapse:collapse; font-size:.78rem; } | |
| .dt th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700; padding:7px 12px; border-bottom:1px solid var(--line); } | |
| .dt td { padding:8px 12px; border-bottom:1px solid var(--line2); } | |
| .dt tr:last-child td { border-bottom:none; } | |
| .dt tr:hover td { background:#f8fafc; } | |
| .dt a { color:var(--blue); font-weight:700; } | |
| .dt .type-tag { display:inline-block; font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:10px; text-transform:capitalize; } | |
| .tt-running{background:#dbeafe;color:#1d4ed8;} .tt-strength_training{background:#fef3c7;color:#b45309;} | |
| .tt-cycling{background:#e0f2fe;color:#0369a1;} .tt-hiking{background:#dcfce7;color:#15803d;} | |
| .tt-basketball{background:#ffedd5;color:#c2410c;} .tt-yoga{background:#f3e8ff;color:#7c3aed;} | |
| .tt-default{background:#e2e8f0;color:#475569;} | |
| /* ---- Sub-page shared bits ---- */ | |
| .ft-page-title { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; } | |
| .ft-page-title h1 { font-size:1.3rem; font-weight:800; letter-spacing:-.02em; } | |
| .ft-page-title .sub { font-size:.8rem; color:var(--muted); } | |
| .ft-filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; padding:12px 14px; } | |
| .ft-field { display:flex; flex-direction:column; gap:4px; } | |
| .ft-field label { font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700; } | |
| .ft-field input, .ft-field select { padding:6px 9px; border:1px solid var(--line); border-radius:6px; font-size:.82rem; font-family:var(--font); color:var(--ink); background:#fff; outline:none; } | |
| .ft-field input:focus, .ft-field select:focus { border-color:var(--blue); } | |
| .ft-btn { display:inline-block; padding:7px 14px; border-radius:6px; border:1px solid var(--blue); background:var(--blue); color:#fff; font-size:.8rem; font-weight:700; cursor:pointer; text-decoration:none; font-family:var(--font); } | |
| .ft-btn:hover { background:#1d4ed8; } | |
| .ft-btn.ghost { background:#fff; color:var(--blue); } | |
| .ft-btn.ghost:hover { background:#eff6ff; } | |
| .ft-btn.danger { border-color:var(--red); background:var(--red); } | |
| .ft-tabs { display:flex; gap:4px; } | |
| .ft-tabs a { padding:5px 12px; font-size:.78rem; font-weight:700; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:6px; } | |
| .ft-tabs a.active { background:var(--blue); border-color:var(--blue); color:#fff; } | |
| /* Goals */ | |
| .goal-row { padding:14px; border-bottom:1px solid var(--line2); } | |
| .goal-row:last-child { border-bottom:none; } | |
| .goal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } | |
| .goal-cat { font-weight:800; text-transform:capitalize; } | |
| .goal-note { font-size:.78rem; color:var(--muted); margin-top:6px; } | |
| .goal-target { font-size:.78rem; color:var(--muted); } | |
| .gp-track { height:9px; background:var(--line); border-radius:5px; overflow:hidden; margin-top:4px; } | |
| .gp-fill { height:100%; border-radius:5px; background:var(--blue); } | |
| .gp-fill.done { background:var(--green); } | |
| .status-tag { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:10px; } | |
| .status-active { background:#dbeafe; color:#1d4ed8; } | |
| .status-achieved { background:#dcfce7; color:#15803d; } | |
| .status-paused { background:#f1f5f9; color:#64748b; } | |
| /* Detail grid */ | |
| .detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; } | |
| .detail-item { border:1px solid var(--line); border-radius:7px; padding:10px 12px; background:#fafbfc; } | |
| .detail-item .dl { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700; } | |
| .detail-item .dv { font-size:1.15rem; font-weight:800; margin-top:3px; } | |
| .notes-box { border:1px solid var(--line); background:#fafbfc; border-radius:7px; padding:12px; font-size:.85rem; line-height:1.55; color:var(--ink); } | |
| /* Meal sections (nutrition) */ | |
| .meal-head { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:#f8fafc; border-bottom:1px solid var(--line2); } | |
| .meal-head .mt { font-weight:800; text-transform:capitalize; } | |
| .meal-head .mc { font-size:.8rem; color:var(--muted); font-weight:700; } | |
| /* Login */ | |
| .ft-login-wrap { min-height:calc(100vh - 52px); display:flex; align-items:center; justify-content:center; padding:30px 16px; } | |
| .ft-login { width:100%; max-width:360px; } | |
| .ft-login .panel-b { padding:20px; } | |
| .ft-login .ft-field { margin-bottom:12px; } | |
| .ft-login .ft-field input { width:100%; } | |
| .ft-foot { max-width:1120px; margin:16px auto; padding:12px 20px; font-size:.72rem; color:var(--faint); text-align:center; border-top:1px solid var(--line); } | |