/* ════════════════════════════════════════════════════════════════════════ Filo — design system stylesheet Mobile dark-mode fitness & nutrition app · "Vivid Bento" direction Optimised for 412px viewport (Oppo Reno 12 Pro 5G) All design tokens live in :root as CSS custom properties. Override there to retune the palette without hunting through rules. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Surface ramp (OLED black) ───────────────────────────────────── */ --bg-0: #000000; /* page background */ --bg-1: #0B0B0E; /* card surface */ --bg-2: #15151A; /* elevated / segment bg */ --bg-3: #1E1F26; /* hover / pressed */ --bg-inset: #050507; /* sunken (progress track) */ /* ── Hairlines & shadows ─────────────────────────────────────────── */ /* Bumped up from 0.06 / 0.14 so card & box borders are legible (the old hairlines were near-invisible even indoors). */ --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.26); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.8); --shadow-pop: 0 12px 40px -8px rgba(0, 0, 0, 0.7); /* ── Text ramp ───────────────────────────────────────────────────── */ --text-1: #FCFCFE; /* primary */ --text-2: #C6C9D2; /* secondary */ --text-3: #80828F; /* tertiary / labels */ --text-4: #6B6E79; /* muted — bumped from #4A4C56 so "Log a meal" / placeholders are readable */ /* ── Accent (primary action) ─────────────────────────────────────── */ --accent: #4A90D9; /* per-brief brand blue */ --accent-soft: #6FA9E5; --accent-faint: rgba(74, 144, 217, 0.18); --accent-glow: rgba(74, 144, 217, 0.45); /* ── Status (use sparingly) ──────────────────────────────────────── */ --ok: #34D399; --ok-faint: rgba(52, 211, 153, 0.14); --warn: #FBBF24; --warn-faint: rgba(251, 191, 36, 0.14); --bad: #F87171; --bad-faint: rgba(248, 113, 113, 0.14); /* ── Macro palette (Weekly Macros donut etc.) ────────────────────── */ --macro-protein: #6FA9E5; /* blue */ --macro-carbs: #34D399; /* green */ --macro-fat: #FBBF24; /* amber */ --macro-fibre: #A78BFA; /* violet */ /* ── Module tint hues (used by [data-tint] on cards) ─────────────── */ --hue-blue: 74, 144, 217; --hue-green: 52, 211, 153; --hue-amber: 251, 191, 36; --hue-pink: 244, 114, 182; --hue-violet: 167, 139, 250; /* ── Radii ───────────────────────────────────────────────────────── */ --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ── Spacing ─────────────────────────────────────────────────────── */ --pad-page: 16px; --pad-card: 16px; /* ── Type ────────────────────────────────────────────────────────── */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif; /* Bottom-nav reservation: nav (64px) + bottom inset (12px) + safe-area */ --nav-h: 64px; --nav-gap: 12px; } /* ════════════════════════════════════════════════════════════════════════ OUTDOOR THEME — high-contrast light palette for bright sunlight. Opt-in via (toggled by theme.js, persisted in localStorage). Redefines the same tokens so every component re-themes for free. Rationale: in direct sun, a near-black background lets glare wash out the screen; a high-luminance white background overpowers the glare, and DARK text/labels (not faint greys) keep contrast. ════════════════════════════════════════════════════════════════════════ */ :root[data-theme="outdoor"] { --bg-0: #FFFFFF; --bg-1: #F2F3F5; --bg-2: #E8EAED; --bg-3: #DDE0E4; --bg-inset: #E4E6EA; --line: rgba(0, 0, 0, 0.14); --line-strong: rgba(0, 0, 0, 0.28); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-pop: 0 6px 20px -6px rgba(0, 0, 0, 0.25); --text-1: #0A0B0D; --text-2: #23262C; --text-3: #3A3D44; /* was faint grey — dark for sun legibility */ --text-4: #565962; --accent: #0B5BB5; --accent-soft: #0B5BB5; --accent-faint: rgba(11, 91, 181, 0.12); --accent-glow: rgba(11, 91, 181, 0.30); --ok: #1B8F5A; --ok-faint: rgba(27, 143, 90, 0.14); --warn: #B26A00; --warn-faint: rgba(178, 106, 0, 0.14); --bad: #C62828; --bad-faint: rgba(198, 40, 40, 0.14); } /* The bottom nav uses hardcoded dark colors, so re-skin it for outdoor. */ :root[data-theme="outdoor"] .bottomnav { border: 1px solid rgba(0, 0, 0, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(242, 243, 245, 0.95)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06); } /* Outdoor/dark theme toggle — fixed top-right, safe-area aware, injected by theme.js */ #theme-toggle { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 90; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-pop); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; } #theme-toggle svg { width: 22px; height: 22px; } #theme-toggle:active { transform: scale(0.92); } /* ════════════════════════════════════════════════════════════════════════ Reset ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-0); color: var(--text-1); font-family: var(--font); font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } /* ════════════════════════════════════════════════════════════════════════ App body — multi-color halos + dot-grid backdrop ════════════════════════════════════════════════════════════════════════ */ body { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 18px 18px, radial-gradient(80% 50% at 50% 0%, rgba(77, 163, 255, 0.16), transparent 70%), radial-gradient(70% 50% at 100% 30%, rgba(167, 139, 250, 0.10), transparent 70%), radial-gradient(60% 40% at 0% 60%, rgba(244, 114, 182, 0.08), transparent 70%), var(--bg-0); background-attachment: fixed; min-height: 100vh; } /* ════════════════════════════════════════════════════════════════════════ Screen container — every page wraps content in
════════════════════════════════════════════════════════════════════════ */ .filo-screen { padding: 0 var(--pad-page); padding-top: env(safe-area-inset-top, 0); padding-bottom: calc( var(--nav-h) + var(--nav-gap) + 24px + env(safe-area-inset-bottom, 0) ); max-width: 480px; /* in case the device is wider than 412 */ margin: 0 auto; min-height: 100vh; } /* ════════════════════════════════════════════════════════════════════════ Typography ════════════════════════════════════════════════════════════════════════ */ .h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; white-space: nowrap; } .h3 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .muted { color: var(--text-3); } .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .page-head { padding: 20px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .page-head__title { min-width: 0; flex: 1; } .page-head__sub { color: var(--text-3); font-size: 12px; margin-top: 2px; } /* ════════════════════════════════════════════════════════════════════════ Card — base module ════════════════════════════════════════════════════════════════════════ */ .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 40%, transparent 60%), var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad-card); box-shadow: var(--shadow-card); position: relative; } .card--flush { padding: 0; overflow: hidden; } /* Tinted modules — set with [data-tint="blue|green|amber|pink|violet"] */ [data-tint] { --tint: var(--hue-blue); } [data-tint="green"] { --tint: var(--hue-green); } [data-tint="amber"] { --tint: var(--hue-amber); } [data-tint="pink"] { --tint: var(--hue-pink); } [data-tint="violet"] { --tint: var(--hue-violet); } .card[data-tint] { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--tint), 0.30) 0%, rgba(var(--tint), 0.04) 40%, transparent 70%), radial-gradient(80% 60% at 100% 100%, rgba(var(--tint), 0.12) 0%, transparent 60%), linear-gradient(180deg, rgba(var(--tint), 0.04), transparent 50%), var(--bg-1); border-color: rgba(var(--tint), 0.32); box-shadow: 0 1px 0 rgba(var(--tint), 0.20) inset, 0 0 0 1px rgba(var(--tint), 0.10), 0 30px 60px -20px rgba(var(--tint), 0.18), 0 24px 60px -30px rgba(0, 0, 0, 0.7); } .card[data-tint] .eyebrow { color: rgb(var(--tint)); } /* ════════════════════════════════════════════════════════════════════════ Layout primitives ════════════════════════════════════════════════════════════════════════ */ .row { display: flex; align-items: center; gap: 8px; } .row--between { justify-content: space-between; } .col { display: flex; flex-direction: column; } .stack-4 > * + * { margin-top: 4px; } .stack-8 > * + * { margin-top: 8px; } .stack-12 > * + * { margin-top: 12px; } .stack-16 > * + * { margin-top: 16px; } /* ════════════════════════════════════════════════════════════════════════ Buttons ════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease; user-select: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.985); } .btn--block { width: 100%; } .btn--sm { height: 32px; padding: 0 12px; font-size: 12px; } .btn--lg { height: 58px; font-size: 16px; } .btn--primary { background: linear-gradient(180deg, var(--accent-soft), var(--accent)); color: #fff; box-shadow: 0 8px 28px -8px var(--accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.10) inset; } .btn--primary:active { filter: brightness(0.95); } .btn--secondary { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--line-strong); } .btn--ghost { background: transparent; color: var(--text-2); border: 1px solid var(--line-strong); } .btn--accent-soft { background: var(--accent-faint); color: var(--accent-soft); border: 1px solid rgba(74, 144, 217, 0.22); backdrop-filter: blur(10px); } .btn--danger { background: var(--bad); color: #fff; box-shadow: 0 6px 18px -6px rgba(248, 113, 113, 0.4); } .btn--icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); } /* ════════════════════════════════════════════════════════════════════════ Inputs ════════════════════════════════════════════════════════════════════════ */ .input, .textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); border-radius: 16px; color: var(--text-1); padding: 0 14px; height: 44px; font-size: 14px; outline: none; backdrop-filter: blur(10px); transition: border-color 0.12s ease, background 0.12s ease; } .input::placeholder, .textarea::placeholder { color: var(--text-4); } .input:focus, .textarea:focus { border-color: var(--accent); background: var(--bg-3); } .textarea { padding: 12px 14px; height: auto; min-height: 96px; resize: vertical; line-height: 1.45; display: block; } /* ════════════════════════════════════════════════════════════════════════ Progress bar ════════════════════════════════════════════════════════════════════════ */ .pbar { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .pbar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px -2px currentColor; transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); } /* ════════════════════════════════════════════════════════════════════════ Chip / pill ════════════════════════════════════════════════════════════════════════ */ .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; } .chip--accent { color: var(--accent-soft); background: var(--accent-faint); border-color: rgba(74, 144, 217, 0.32); } .chip--ok { color: var(--ok); background: var(--ok-faint); border-color: rgba(52, 211, 153, 0.32); } .chip--warn { color: var(--warn); background: var(--warn-faint); border-color: rgba(251, 191, 36, 0.32); } .chip--bad { color: var(--bad); background: var(--bad-faint); border-color: rgba(248, 113, 113, 0.32); } /* ════════════════════════════════════════════════════════════════════════ Segmented control (e.g. Home / Travel) ════════════════════════════════════════════════════════════════════════ */ .seg { display: flex; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 18px; padding: 5px; gap: 4px; } .seg__btn { flex: 1; height: 40px; border-radius: 13px; color: var(--text-2); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease; } .seg__btn--on { background: linear-gradient(180deg, var(--accent-soft), var(--accent)); color: #fff; box-shadow: 0 6px 18px -6px var(--accent-glow); } /* ════════════════════════════════════════════════════════════════════════ Day tabs (Mon-Sun row) ════════════════════════════════════════════════════════════════════════ */ .daytabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; } .daytab { position: relative; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); border-radius: 18px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .daytab--on { background: linear-gradient(180deg, var(--accent-soft), var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset, 0 10px 24px -8px var(--accent-glow); } .daytab--rest { opacity: 0.55; } .daytab__dot { position: absolute; top: 8px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); } .daytab__star { position: absolute; top: 6px; right: 8px; color: var(--warn); font-size: 10px; line-height: 1; } /* ════════════════════════════════════════════════════════════════════════ Bottom navigation ════════════════════════════════════════════════════════════════════════ */ .bottomnav { position: fixed; left: max(14px, env(safe-area-inset-left, 0)); right: max(14px, env(safe-area-inset-right, 0)); bottom: calc(14px + env(safe-area-inset-bottom, 0)); height: var(--nav-h); max-width: 460px; margin: 0 auto; border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(20, 20, 24, 0.85), rgba(8, 8, 10, 0.85)); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 18px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 50; } .navtab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; position: relative; padding-top: 6px; text-decoration: none; } .navtab svg { width: 22px; height: 22px; } .navtab--on { color: var(--accent-soft); } .navtab--on::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #A78BFA); box-shadow: 0 0 12px var(--accent); } /* ════════════════════════════════════════════════════════════════════════ Macro row (used under meal cards etc.) ════════════════════════════════════════════════════════════════════════ */ .macros { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } .macros span { color: var(--text-3); } .macros span b { font-weight: 700; color: var(--text-1); } /* ════════════════════════════════════════════════════════════════════════ Bullet (legend dot) ════════════════════════════════════════════════════════════════════════ */ .bullet { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════════════ Dividers ════════════════════════════════════════════════════════════════════════ */ .hr { height: 1px; background: var(--line); margin: 12px 0; border: 0; } .hr--with-text { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin: 16px 0; white-space: nowrap; } .hr--with-text::before, .hr--with-text::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ════════════════════════════════════════════════════════════════════════ Donut (Weekly Macros) ════════════════════════════════════════════════════════════════════════ */ .donut-wrap { display: grid; grid-template-columns: 138px 1fr; gap: 12px; align-items: center; } .donut { position: relative; width: 138px; height: 138px; filter: drop-shadow(0 12px 32px rgba(77, 163, 255, 0.32)); } .donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } .donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .donut__big { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(180deg, #FFFFFF, #C6C9D2); -webkit-background-clip: text; background-clip: text; color: transparent; } .donut__sm { font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════════════════ Sparkline support container ════════════════════════════════════════════════════════════════════════ */ .spark-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 12px; } .spark-row__lbl { font-size: 10px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; } .spark { display: block; overflow: visible; width: 100%; height: 28px; } /* ════════════════════════════════════════════════════════════════════════ KV stat (Body Composition mini cards) ════════════════════════════════════════════════════════════════════════ */ .bodystat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; } .bodystat__lbl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .bodystat__val { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; } .bodystat__num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .bodystat__unit { font-size: 11px; color: var(--text-3); } .bodystat__trend { font-size: 10px; font-weight: 700; margin-top: 2px; } /* ════════════════════════════════════════════════════════════════════════ Exercise list helpers ════════════════════════════════════════════════════════════════════════ */ .cues-block { margin-top: 12px; padding: 10px 12px; background: var(--bg-2); border-radius: 10px; border: 1px solid var(--line); } .cues-block__body { font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .set-pip { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-3); } /* ════════════════════════════════════════════════════════════════════════ Tap helpers ════════════════════════════════════════════════════════════════════════ */ .tap { -webkit-tap-highlight-color: transparent; } .tap:active { opacity: 0.85; } /* ════════════════════════════════════════════════════════════════════════ Utility — hide visually but keep accessible ════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ════════════════════════════════════════════════════════════════════════ Feedback screen — RPE pip ════════════════════════════════════════════════════════════════════════ */ .rpe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .rpe-pip { height: 36px; border-radius: 8px; background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ════════════════════════════════════════════════════════════════════════ Page-specific tints (handy override hooks for the user) ════════════════════════════════════════════════════════════════════════ */ .kbd-info { display: inline-flex; width: 24px; height: 24px; border-radius: 7px; align-items: center; justify-content: center; background: var(--warn-faint); color: var(--warn); font-size: 13px; font-weight: 800; flex-shrink: 0; }