/* =============== TECHNICAL/EDITORIAL THEME — Systems Design Aesthetic Inspired by precision instruments, field manuals, and architectural drawings. Mobile-first responsive layout preserved. =============== */ /* ── Font stacks (vendored locally via fonts.css) ── */ /* Playfair Display: editorial serif for headings */ /* JetBrains Mono: monospace for data, labels, metadata */ :root { --appbar-h: 88px; /* App bar height: ticker (~23px) + nav row (~64px) + border = ~88px */ --dock-h: 52px; /* Mobile dock height: button padding + text (~33-48px depending on text wrap) */ --dock-w: 72px; /* App identity — update this string when releasing a new version */ --app-ticker: "METABOLOG /// NUTRITIONAL FIELD SYSTEM /// v2"; /* Warm cream palette — light default */ --bg: #f0ece4; --fg: #111; --card: #f8f5ef; --border: #111; /* Accents: teal primary, orange-red secondary, red danger */ --accent: #007d8a; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #6b6560; /* No offset shadow — precision lines only */ --shadow: none; --radius: 0; --ring: 1px solid var(--border); --btn-text: #111; /* Typography scale */ --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "Courier New", Courier, monospace; --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ══════════════════════════════════════════ COLOUR THEMES (set via ) Each theme preserves the cream warmth while shifting the accent hue. ══════════════════════════════════════════ */ /* ── Light Themes ── */ :root[data-theme="blue"] { --bg: #f0ece4; --fg: #111; --card: #f8f5ef; --border: #111; --accent: #007d8a; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #6b6560; --btn-text: #111; } :root[data-theme="mint"] { --bg: #edf2ed; --fg: #0c110d; --card: #f4f8f4; --border: #0c110d; --accent: #0a7c5e; --accent-2: #c85c1a; --accent-3: #b32c2c; --muted: #4e5e52; --btn-text: #0c110d; } :root[data-theme="peach"] { --bg: #f2ede6; --fg: #13100d; --card: #f9f5f0; --border: #13100d; --accent: #b54a1b; --accent-2: #007d8a; --accent-3: #8c1e1e; --muted: #5a5349; --btn-text: #13100d; } :root[data-theme="grape"] { --bg: #f0ecf4; --fg: #100d16; --card: #f7f4fa; --border: #100d16; --accent: #5c32c8; --accent-2: #c8501a; --accent-3: #9e1e4a; --muted: #5b5269; --btn-text: #100d16; } :root[data-theme="slate"] { --bg: #eaedf0; --fg: #0c1218; --card: #f2f5f7; --border: #0c1218; --accent: #0ea5e9; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #57687a; --btn-text: #0c1218; } :root[data-theme="sand"] { --bg: #f2ede2; --fg: #13110d; --card: #faf6ee; --border: #13110d; --accent: #0077b6; --accent-2: #d4611a; --accent-3: #b32c2c; --muted: #63594e; --btn-text: #13110d; } /* ── Dark Themes ── */ :root[data-theme="blue-dark"] { --bg: #141210; --fg: #f0ece4; --card: #1e1b17; --border: #f0ece4; --accent: #2ab8c8; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a89f96; --btn-text: #f0ece4; } :root[data-theme="mint-dark"] { --bg: #101412; --fg: #e8f0ea; --card: #1a231e; --border: #e8f0ea; --accent: #16c995; --accent-2: #e8621e; --accent-3: #d44040; --muted: #8fb09a; --btn-text: #e8f0ea; } :root[data-theme="peach-dark"] { --bg: #130f0c; --fg: #f8f0e8; --card: #201710; --border: #f8f0e8; --accent: #e87055; --accent-2: #2ab8c8; --accent-3: #d44040; --muted: #b89a8a; --btn-text: #f8f0e8; } :root[data-theme="grape-dark"] { --bg: #0e0a15; --fg: #f0eaff; --card: #1a1426; --border: #f0eaff; --accent: #9070ff; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a898bc; --btn-text: #f0eaff; } :root[data-theme="slate-dark"] { --bg: #0c1018; --fg: #e8f0f7; --card: #141e28; --border: #e8f0f7; --accent: #38c8f5; --accent-2: #e8621e; --accent-3: #d44040; --muted: #8aa4bc; --btn-text: #e8f0f7; } :root[data-theme="sand-dark"] { --bg: #110e08; --fg: #f8f4ea; --card: #1e1810; --border: #f8f4ea; --accent: #00a3cc; --accent-2: #e8621e; --accent-3: #d44040; --muted: #b8a882; --btn-text: #f8f4ea; } @media (prefers-color-scheme: dark) { :root { --bg: #141210; --fg: #f0ece4; --card: #1e1b17; --border: #f0ece4; --accent: #2ab8c8; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a89f96; } } /* ══════════════════════════════════════════ GLOBAL RESET & BASE ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; background: var(--bg); } /* Paper/grain texture overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 300px 300px; opacity: 1; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.45; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Editorial typography ── */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 1.8rem; margin: 0 0 0.75rem; } h2 { font-size: 1.3rem; margin: 0 0 0.5rem; } h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } /* ══════════════════════════════════════════ UTILITY CLASSES ══════════════════════════════════════════ */ .grid { display: grid; } .row { display: flex; } .wrap { flex-wrap: wrap; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .w-full { width: 100%; } /* ══════════════════════════════════════════ APP BAR / HEADER ══════════════════════════════════════════ */ .appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top, 0px); } .appbar .row { padding-top: .5rem; padding-bottom: .5rem; } /* Thin status ticker above the main nav row */ .appbar::before { content: var(--app-ticker); display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent); } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; padding: .55rem 1rem; } .brand .logo { height: 30px; width: 30px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--accent); } .brand .logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); } .app-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Hamburger menu button — visible on mobile only */ .menu-hamburger { display: none; margin-left: auto; align-items: center; justify-content: center; padding: .5rem .6rem; background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--btn-text); transition: background 0.15s ease; } .menu-hamburger:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); } /* Transparent click-outside overlay (no dark backdrop) */ .app-drawer-overlay { position: fixed; inset: 0; z-index: 98; background: transparent; } /* Mobile dropdown — always in DOM; slides down from behind the app bar */ .app-dropdown { position: fixed; top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 99; background: var(--bg); transform: translateY(-100%); transition: transform 0.15s ease-in-out; pointer-events: none; /* Hide on desktop — only the mobile media query shows it */ display: none; } .app-dropdown.open { transform: translateY(0); pointer-events: auto; border-bottom: 1px solid var(--border); } .app-dropdown-body { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .65rem 1rem; justify-content: space-between; } /* Nav pills — refined, no offset shadow */ .pill { border: 1px solid var(--border); padding: .5rem .85rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--btn-text); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; gap: .3rem; box-sizing: border-box; } .pill:hover { background: var(--fg); color: var(--bg); } .pill.selected { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Theme toggle switch ── */ .theme-toggle-switch { position: relative; width: 3.2rem; height: 2rem; border: 1px solid var(--border); background: transparent; cursor: pointer; padding: 0; overflow: hidden; transition: background 0.2s ease; } .theme-toggle-switch:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); } .theme-switch-slider { position: absolute; top: 1px; left: 1px; width: 1.3rem; height: calc(100% - 2px); background: var(--accent); display: flex; align-items: center; justify-content: center; transition: left 0.25s ease; } .theme-toggle-switch.dark .theme-switch-slider { left: calc(100% - 1.3rem - 1px); } .theme-switch-icon { font-size: .85rem; line-height: 1; display: block; } /* ══════════════════════════════════════════ SHELL / LAYOUT SCAFFOLDING ══════════════════════════════════════════ */ .shell { height: 100dvh; overflow: hidden; } .view { padding-top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)); /* app bar + safe area clearance */ padding-bottom: calc(var(--dock-h) + 1rem + env(safe-area-inset-bottom, 0px)); /* dock + safe area clearance + scroll buffer */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .view::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */ .view.no-dock { padding-bottom: 0; } /* .history { */ /* min-height: 100%; */ /* padding-bottom: calc(var(--dock-h) + 1rem); */ /* } */ /* ══════════════════════════════════════════ CARDS — corner-bracket frame aesthetic ══════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); position: relative; padding: 1rem; } /* Corner brackets */ .card::before, .card::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--accent); border-style: solid; pointer-events: none; } .card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } .card h2 { margin: 0; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .card h3 { margin: 0; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; } .card .toolbar { display: flex; gap: .5rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--border); background: transparent; color: var(--btn-text); padding: .5rem .85rem; border-radius: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); } .btn[aria-pressed="true"], .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.warn { background: var(--accent-3); color: #fff; border-color: var(--accent-3); } .btn:active:not(:disabled) { opacity: 0.85; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Size variants */ .btn-lg { font-size: .8rem; padding: .65rem 1.1rem; } .btn-sm { font-size: .65rem; padding: .3rem .55rem; } /* Semantic variants (also used in settings) */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); } .btn-secondary { background: color-mix(in srgb, var(--accent-2) 15%, transparent); border-color: var(--accent-2); color: var(--accent-2); } .btn-danger { background: var(--accent-3); color: #fff; border-color: var(--accent-3); } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); } .btn-saving { opacity: 0.7; } /* ── Save Profile inline feedback ── */ .save-profile-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } @keyframes saveSuccessFadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .save-success-badge { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); animation: saveSuccessFadeIn 200ms ease both; } .save-success-badge--inline { justify-content: center; width: 100%; } .save-success-badge--success { color: var(--success, green); } .save-success-badge--error { color: var(--danger, red); } /* ── Form inputs ── */ .input, .select { width: 100%; display: block; padding: .6rem .8rem; font-size: .9rem; font-family: var(--font-mono); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 0; outline: none; appearance: none; font-weight: 400; transition: border-color 0.15s ease; } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); } .input[type="number"], .input[type="date"] { font-family: var(--font-mono); } .select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='square'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: 16px; padding-right: 2.2rem; } .card label { display: block; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } /* ── Progress bars ── */ .bar { position: relative; height: 10px; border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); border-radius: 0; background: color-mix(in srgb, var(--bg) 60%, var(--card)); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; } .bar .tick { position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0 48px, color-mix(in srgb, var(--border) 12%, transparent) 48px, color-mix(in srgb, var(--border) 12%, transparent) 50px ); } .bar-overflow { border-color: var(--accent-3); } .bar-overflow > span { background: var(--accent-3); } .bar-sm { height: 6px; } /* ── Section containers ── */ .section { display: grid; gap: 1rem; } /* ── Meal list ── */ .meal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem; } .meal h3 { margin: 0; font-size: .95rem; font-weight: 600; font-family: var(--font-serif); } .meta { font-size: .82rem; color: var(--muted); } .grid .card .meta { margin-top: 0.4rem; } /* AI guidance suggestion cards */ .ai-suggestion { display: block; width: 100%; box-sizing: border-box; } .ai-suggestion .chip { margin-right: .25rem; } .ai-suggestion-foods { margin: .35rem 0 .5rem 1rem; padding: 0; list-style: disc outside; } .ai-suggestion-foods li { font-size: .82rem; color: var(--muted); margin-bottom: .1rem; } /* ══════════════════════════════════════════ BOTTOM DOCK / NAV ══════════════════════════════════════════ */ .dock { background: var(--bg); gap: 0; padding: 0; } .dock-mobile { position: fixed; inset: auto 0 0 0; z-index: 100; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); min-height: 3rem; padding-bottom: env(safe-area-inset-bottom, 0px); } .dock-desktop { display: none; } /* Shared dock button */ .dock .dock-btn { display: flex; border: none; border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent); border-radius: 0; background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; cursor: pointer; } .dock .dock-btn:last-child { border-right: none; } .dock .dock-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); } .dock .dock-btn.selected { background: var(--fg); color: var(--bg); } .dock .dock-btn:active { opacity: 0.75; } .dock .dock-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; position: relative; } .dock .dock-btn:disabled::after { content: "Soon"; position: absolute; top: 3px; right: 3px; background: var(--accent-2); color: #fff; font-size: 0.55rem; padding: 1px 4px; font-weight: 700; letter-spacing: 0.05em; } .dock-mobile .dock-btn { flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .6rem .3rem; } /* ══════════════════════════════════════════ LAYOUT — mobile first ══════════════════════════════════════════ */ .container { display: grid; gap: 1rem; } .content-container { /* padding-bottom: calc(var(--dock-h) + 1rem); */ padding: 1rem; height: auto; } /* ── Desktop ── */ @media (min-width: 900px) { .container { grid-template-columns: 1.25fr .75fr; align-items: start; } .content-container { margin-top: calc(var(--appbar-h) + 1.25rem); margin-bottom: 0; } .section.grid-2 { grid-template-columns: 1fr 1fr; } .shell { /* padding-top: calc(var(--appbar-h) + 1.25rem); */ padding-bottom: 2rem; } .dock-mobile { display: none; } .dock-desktop { display: flex; position: static; flex-direction: column; border: 1px solid var(--border); border-radius: 0; margin-bottom: 1rem; } .dock-desktop .dock-btn { flex-direction: row; justify-content: flex-start; align-items: center; font-size: .72rem; padding: .65rem .75rem; text-align: left; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); } .dock-desktop .dock-btn:last-child { border-bottom: none; } } /* ══════════════════════════════════════════ HELPER / DEMO CLASSES ══════════════════════════════════════════ */ .ghost { opacity: .55; } .chip { display: inline-block; border: 1px solid var(--border); padding: .15rem .45rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent-2) 12%, var(--card)); color: var(--fg); } .theme-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border: 1px solid var(--border); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s ease; } .theme-badge:hover { opacity: 0.85; } /* ══════════════════════════════════════════ GRID LAYOUTS ══════════════════════════════════════════ */ .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* ══════════════════════════════════════════ MICRO STAT CARDS ══════════════════════════════════════════ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; } .stat-card { padding: .75rem; border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); background: var(--card); position: relative; } /* Corner accent on stat cards */ .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 2px; background: var(--accent); } .stat-card .stat-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .stat-card .stat-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--fg); line-height: 1.1; } .stat-card .stat-unit { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); font-weight: 400; } /* ══════════════════════════════════════════ RATIO BADGES ══════════════════════════════════════════ */ .ratio-badge { display: inline-block; padding: .2rem .45rem; border: 1px solid var(--border); font-family: var(--font-mono); font-size: .65rem; font-weight: 600; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent-2) 15%, var(--card)); } .ratio-badge.good { background: color-mix(in srgb, var(--accent) 15%, var(--card)); color: var(--accent); } .ratio-badge.warning { background: color-mix(in srgb, var(--accent-3) 15%, var(--card)); color: var(--accent-3); } /* ══════════════════════════════════════════ SECTION HEADER ══════════════════════════════════════════ */ .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent); } /* ══════════════════════════════════════════ CALENDAR ══════════════════════════════════════════ */ .calendar-overlay { position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent); display: grid; place-items: center; z-index: 200; padding: 1rem; } .calendar-modal { max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .calendar-modal::-webkit-scrollbar { display: none; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; } .calendar-grid.calendar-week { gap: .6rem; } .calendar-day-header { text-align: center; padding: .4rem; font-family: var(--font-mono); font-size: .65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .calendar-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--border) 35%, transparent); background: var(--card); cursor: pointer; font-family: var(--font-mono); font-size: .85rem; transition: background 0.12s ease, color 0.12s ease; } .calendar-day:hover { background: color-mix(in srgb, var(--fg) 8%, var(--card)); } .calendar-day:active { opacity: 0.75; } .calendar-day.calendar-day-empty { border: none; background: transparent; cursor: default; } .calendar-day.is-today { background: var(--fg); color: var(--bg); font-weight: 700; } .calendar-day.is-selected { border-color: var(--accent); border-width: 2px; } .calendar-day.has-log { background: color-mix(in srgb, var(--accent) 12%, var(--card)); } .calendar-day.has-log.is-today { background: var(--fg); } .calendar-day .day-number { font-size: .9rem; line-height: 1; } .calendar-day .log-indicator { position: absolute; bottom: .2rem; right: .2rem; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .calendar-year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; } .calendar-year-month { text-align: center; } .calendar-year-month:hover { opacity: 0.85; } .calendar-year-month.is-current { border: 1px solid var(--accent); } .calendar-year-month h4 { margin: 0 0 .5rem 0; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* ══════════════════════════════════════════ RESPONSIVE TEXT ══════════════════════════════════════════ */ @media (max-width: 600px) { .card h2 { font-size: .9rem; } .stat-card .stat-value { font-size: 1.15rem; } .appbar .row { padding-left: .6rem; padding-right: .6rem; } .brand { padding: .45rem .6rem; gap: .35rem; font-size: .75rem; } /* Hide desktop actions, show hamburger on mobile */ .app-actions-desktop { display: none !important; } .menu-hamburger { display: flex; } /* Enable the dropdown panel on mobile */ .app-dropdown { display: block; } .pill { padding: .5rem .55rem; font-size: .65rem; } .theme-toggle-switch { width: 2.8rem; height: 2rem; } .theme-switch-slider { width: 1.15rem; } .theme-toggle-switch.dark .theme-switch-slider { left: calc(100% - 1.15rem - 1px); } .calendar-modal { max-height: 95vh; } .calendar-day .day-number { font-size: .8rem; } .calendar-year-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } /* Appbar is shorter on small screens (.45rem brand padding vs .55rem) */ :root { --appbar-h: 85px; } /* Small mobile: ticker(23) + nav row(61) + border(1) = ~85px */ } /* ══════════════════════════════════════════ PRINT / PDF STYLES — see frontend/styles/print.css (always loaded, theme-independent) ══════════════════════════════════════════ */ /* ══════════════════════════════════════════ SETTINGS PAGE ══════════════════════════════════════════ */ .settings-main { max-width: 900px; margin: 0 auto;} .page-title { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0; margin-bottom: 1.5rem; } .settings-section { margin-bottom: 2rem; } .section-title { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); } /* ── Alerts ── */ .alert { padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); font-size: .88rem; } .alert-success { background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-color: var(--accent); color: var(--fg); } .alert-error { background: color-mix(in srgb, var(--accent-3) 12%, var(--card)); border-color: var(--accent-3); color: var(--accent-3); } .checkout-success-banner { font-size: .92rem; padding: 1rem 1.1rem; } .checkout-cancel-banner { font-size: .92rem; padding: 1rem 1.1rem; } /* ── Subscription tier badge ── */ .subscription-tier-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 3px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; } .badge-premium { background: color-mix(in srgb, var(--accent) 18%, var(--card)); border: 1px solid var(--accent); color: var(--accent); } .badge-free { background: color-mix(in srgb, var(--muted) 12%, var(--card)); border: 1px solid var(--border); color: var(--muted); } /* ── Settings forms ── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } .form-input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-size: .9rem; font-family: var(--font-body); transition: border-color 0.15s ease; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .form-input:disabled { opacity: .45; cursor: not-allowed; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Info display ── */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .info-item { display: flex; flex-direction: column; gap: .25rem; } .info-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .info-value { font-size: 1rem; font-weight: 600; } /* ── Preferences ── */ .preference-item { display: flex; flex-direction: column; gap: .5rem; } @media (min-width: 600px) { .preference-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* ── Data actions ── */ .data-action { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .data-action { flex-direction: row; justify-content: space-between; align-items: center; } } .action-title { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; margin-bottom: .2rem; } .action-description { font-size: .85rem; color: var(--muted); margin: 0; } /* ── Security ── */ .security-item { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .security-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* ── Danger zone ── */ .danger-zone .section-title { color: var(--accent-3); } .card-danger { border-color: var(--accent-3) !important; } /* ── Confirmation ── */ .confirmation-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ── Loading state ── */ .loading { text-align: center; padding: 2.5rem 1rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ── Custom macro split ── */ .custom-macro-panel { border: 1px solid var(--border); border-radius: 6px; padding: 1rem; background: color-mix(in srgb, var(--bg) 97%, var(--accent)); } .macro-slider { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; } .macro-slider:disabled { opacity: 0.35; cursor: not-allowed; } .macro-pct-input { width: 4.5rem !important; text-align: center; } .macro-sum-indicator { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0.06em; padding: .35rem .6rem; border-radius: 4px; display: inline-block; } .macro-sum-ok { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .macro-sum-error { background: color-mix(in srgb, var(--accent-3) 12%, transparent); color: var(--accent-3); } .align-center { align-items: center; } .macro-lock-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; } .macro-lock-label-row .form-label { margin: 0; } .macro-lock-btn { background: none; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: .85rem; line-height: 1; padding: .2rem .35rem; opacity: .55; transition: opacity .15s, border-color .15s, background .15s; } .macro-lock-btn:hover { opacity: .85; } .macro-lock-btn.locked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); opacity: 1; } .macro-lock-hint { font-size: .78rem; color: var(--muted); margin: .1rem 0 .75rem; line-height: 1.4; } /* ── Voice Recorder ── */ .voice-recorder-layout { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; } .voice-recorder-btn { white-space: nowrap; min-width: auto; } .voice-recorder-info { gap: 0.5rem; min-width: 0; text-align: center; } .voice-recorder-status { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-3); display: flex; align-items: center; gap: 0.5rem; } .voice-recorder-dot { width: 6px; height: 6px; background: var(--accent-3); border-radius: 50%; display: inline-block; animation: voice-pulse 1s ease-in-out infinite; } @keyframes voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.85); } } .voice-visualizer { display: block; width: 100%; max-width: 100%; height: 60px; background: transparent; } .food-name { margin: 0; } /* ── Nutrient Breakdown (food entry expand + micro report food sources) ──── */ .nutrient-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--muted); font-size: 0.7rem; font-family: var(--font-mono); font-weight: 500; cursor: pointer; padding: 0.35rem 0; margin-top: 0.4rem; transition: color 0.2s ease; } .nutrient-toggle:hover { color: var(--accent); } .nutrient-breakdown { margin-top: 0.4rem; padding: 0.4rem 0 0 0; border-top: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); } .nutrient-breakdown-section { margin-bottom: 0.4rem; } .nutrient-breakdown-heading { display: block; font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.02em; margin-bottom: 0.3rem; } .nutrient-breakdown-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.6rem; font-size: 0.75rem; align-items: baseline; } .nutrient-food-breakdown { margin-top: 0.2rem; } .nutrient-food-row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; align-items: baseline; padding: 0.15rem 0; font-size: 0.72rem; } .nutrient-food-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-family: var(--font-serif); } .nutrient-food-value { text-align: right; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: 0.68rem; } /* ── Audio Food Recognition ───────────────────────────────────────────────── */ .voice-log-inline { border-top: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); padding-top: 0.5rem; } .voice-log-idle-row { display: flex; align-items: center; justify-content: space-between; } .ai-upgrade-sticker-btn { cursor: pointer; pointer-events: auto; border: none; padding: .1rem .4rem; background: inherit; font: inherit; } .ai-upgrade-sticker-btn:hover { opacity: 0.8; } .audio-recognition-card h2 { margin-bottom: 0; } .audio-recognition-hint p { /* margin: 0; */ } .audio-recognition-processing { display: flex; align-items: center; gap: 0.75rem; } .audio-recognition-cancel { margin-left: auto; } .audio-recognition-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: audio-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes audio-spin { to { transform: rotate(360deg); } } /* Upgrade button highlight animation — triggered when arriving from the voice log upsell */ @keyframes upgrade-highlight { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 60% { transform: scale(1); } 80% { transform: scale(1.03); } 100% { transform: scale(1); } } .upgrade-highlight { animation: upgrade-highlight 0.7s ease-in-out 1; outline: 3px solid var(--color-accent, #4a90e2); outline-offset: 2px; } .audio-recognition-items { display: flex; flex-direction: column; gap: 0.5rem; } .audio-recognition-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); background: var(--bg); } .audio-recognition-food-name { font-weight: 600; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audio-recognition-amount { display: flex; align-items: center; gap: 0.35rem; } .audio-recognition-amount .input { width: 5rem; text-align: right; } .audio-recognition-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .audio-recognition-error .meta.warn { font-weight: 600; } .plain-number { -moz-appearance: textfield; } .plain-number::-webkit-outer-spin-button, .plain-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── AI Quota ── */ .quota-section { margin-top: .75rem; } .quota-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; } .quota-label { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .quota-count { font-family: var(--font-mono); font-size: .85rem; font-weight: 700; color: var(--fg); } .quota-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .quota-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; } .quota-bar-fill.quota-bar-full { background: var(--accent-3); } .quota-remaining { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; } /* ── AI premium gate ── */ .ai-premium-wrap { display: flex; justify-content: space-between; align-items: center; } .ai-premium-wrap-btn { position: relative; display: block; } .ai-upgrade-sticker { background: var(--accent-3); color: #fff; border-radius: 3px; font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .1rem .35rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .ai-premium-wrap-btn .ai-upgrade-sticker { position: absolute; top: -8px; right: -6px; z-index: 1; flex-shrink: unset; } .recent-foods-panel { margin-top: 0.5rem; } .recent-foods-panel .recent-food-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; border-bottom: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; } .recent-foods-panel .recent-food-item:last-child { border-bottom: none; }