/* Tare It — mobile-first, themeable via [data-theme] on */ :root { --maxw: 720px; --radius: 14px; --gap: 14px; --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* macro-chart trio — distinct hues; carbs uses the brand --accent */ --macro-p: #6c9fd1; /* protein — blue */ --macro-f: #d6897e; /* fat — coral */ } /* COLORS: each theme sets the base palette + a single --accent (and --accent-text for contrast on top of an accent fill). Everything else derives from --accent via color-mix, so changing one line re-tints the whole app: --accent-weak faint same-hue tint, for backgrounds (kcal chip/cell) --accent-light a lighter version of the same shade --accent-dark a deeper version of the same shade Grab whichever you need in a rule, e.g. `color: var(--accent-light)`. */ html[data-theme="dark"] { --bg: #0f0f12; --surface: #1a1a20; --surface-2: #24242c; --text: #f2f2f5; --muted: #9a9aa6; --border: #2c2c35; --accent: #6eccba; --accent-text: #0d211d; /* pastel mint */ --accent-weak: color-mix(in srgb, var(--accent) 16%, var(--bg)); --accent-light: color-mix(in srgb, var(--accent) 60%, #ffffff); --accent-dark: color-mix(in srgb, var(--accent) 72%, #000000); --shadow: 0 6px 24px rgba(0,0,0,.45); --edit-icon: #ffffff; } html[data-theme="light"] { --bg: #f6f5f1; --surface: #ffffff; --surface-2: #efeee8; --text: #1c1c22; --muted: #6c6c78; --border: #e4e2d9; --accent: #2f9b86; --accent-text: #ffffff; /* deeper mint — readable on light */ --accent-weak: color-mix(in srgb, var(--accent) 13%, var(--bg)); --accent-light: color-mix(in srgb, var(--accent) 55%, #ffffff); --accent-dark: color-mix(in srgb, var(--accent) 72%, #000000); --shadow: 0 6px 20px rgba(0,0,0,.10); --edit-icon: #555a5f; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); } /* top bar */ .topbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: max(env(safe-area-inset-top), 8px) 10px 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* auto side columns: col 1 collapses to 0 when the back button is hidden, so the brand sits flush-left on the list; the menu stays right-aligned in col 3 either way */ #backBtn { grid-column: 1; justify-self: start; } .brand { grid-column: 2; margin: 0; display: flex; align-items: center; justify-content: flex-start; gap: 7px; font-size: 1.2rem; font-weight: 700; letter-spacing: .5px; } .brand-logo { color: #dd7a2b; flex: none; } /* brand orange (matches the app icon), not the mint accent */ .brand > .brand-logo { padding-right: 4px; } /* a little breathing room before the "Tare It" wordmark */ #menuBtn { grid-column: 3; justify-self: end; } .icon-btn { appearance: none; border: none; background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:active { background: var(--surface-2); } .icon-btn[hidden] { display: none; } /* author display:inline-flex otherwise overrides [hidden] */ .icon-btn svg { display: block; } /* favorite (heart) toggle */ .fav-btn { appearance: none; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; line-height: 0; flex: none; border-radius: 8px; } .fav-btn.on { color: var(--accent); } .fav-btn:active { background: var(--surface-2); } main { max-width: var(--maxw); margin: 0 auto; padding: var(--gap); } .loading { color: var(--muted); text-align: center; padding: 40px 0; } .muted { color: var(--muted); } .small { font-size: .82rem; } /* search */ .search { width: 100%; padding: 12px 14px; font-size: 1rem; margin-bottom: var(--gap); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; } .search::placeholder { color: var(--muted); } .search:focus { outline: none; border-color: var(--accent); } .empty { color: var(--muted); text-align: center; padding: 36px 0; } .list-sentinel { height: 1px; } /* invisible scroll marker that triggers the next page */ /* list filters row: provenance (All/Mine/Core/Shared) + tags side by side, with "+ New" at the right */ .filters { display: flex; gap: 8px; align-items: stretch; margin-bottom: var(--gap); } .filters .tagselect { flex: 1; min-width: 0; margin-bottom: 0; } /* inline "+ New recipe" — squared to match the selects, accent-tinted to read as the create action */ .filters .add-inline { flex: none; width: 46px; height: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--accent); } .filters .add-inline:active { background: var(--surface-2); } /* provenance chip on cards — marks what ISN'T core (mine / shared) */ .chip.prov { border-color: var(--accent); color: var(--accent); font-weight: 700; } /* draft chip + banner: unpublished core recipe, owner-only until published */ .chip.draft { border-color: #d9a13b; color: #d9a13b; font-weight: 700; } /* status pill on the detail title — ADMIN-ONLY at-a-glance state of a core recipe */ .status-pill { display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 999px; border: 1px solid; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; } .status-pill.draft { color: #d9a13b; border-color: #d9a13b; background: color-mix(in srgb, #d9a13b 12%, transparent); } .status-pill.published { color: #46b183; border-color: #46b183; background: color-mix(in srgb, #46b183 12%, transparent); } .draft-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 14px; font-size: .92rem; border-radius: 12px; background: color-mix(in srgb, #d9a13b 12%, transparent); border: 1px solid color-mix(in srgb, #d9a13b 45%, var(--border)); } .draft-note button { flex: none; } /* recipe list */ .cards { display: flex; flex-direction: column; gap: var(--gap); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: transform .06s ease; display: flex; gap: 12px; align-items: flex-start; } .card:active { transform: scale(.99); } .card-body { flex: 1; min-width: 0; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .card-head h3 { margin: 0; } /* composition preview under the title — plain text, no pill, clips with ellipsis */ .comp { margin: 5px 0 1px; color: var(--muted); font-size: .8rem; line-height: 1.45; font-variant-numeric: tabular-nums; max-height: calc(1.45em * 3); overflow: hidden; } /* up to 3 lines (the -webkit-box line-clamp trick is unreliable now) */ .comp-item { white-space: nowrap; } /* each "Name 12%" stays whole */ .comp-sep { opacity: .7; } /* breakable — gives the line a place to wrap */ .comp-more { white-space: nowrap; opacity: .7; } /* photo thumbnail */ .thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-ph { font-size: 1.4rem; opacity: .5; } .thumb-edit { position: absolute; right: 4px; bottom: 3px; line-height: 1; font-size: .95rem; color: var(--edit-icon); pointer-events: none; } .thumb.detail { width: 100%; height: 190px; border-radius: var(--radius); margin-bottom: 14px; } .thumb.detail .thumb-ph { font-size: 2.4rem; } .thumb.detail .thumb-edit { right: 10px; bottom: 8px; font-size: 1.4rem; } .card h3 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -.01em; } .card .sub { color: var(--muted); font-size: .85rem; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chip { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .chip.kcal { background: var(--accent-weak); color: var(--accent); font-weight: 600; } .chip.tag { cursor: pointer; background: transparent; border: 1.5px solid; font-weight: 600; } .chip.tag:active { filter: brightness(.93); } .tagselect { width: 100%; margin: 0 0 var(--gap); padding: 11px 14px; font-size: 1rem; font-family: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; } .tagselect:focus { outline: none; border-color: var(--accent); } /* detail */ .detail-head { margin-bottom: 18px; } .detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .detail-head h2 { margin: 4px 0 2px; font-size: 1.4rem; } .detail-head .sub { color: var(--muted); font-size: .9rem; } .section { margin-top: 22px; } .section h4 { margin: 0 0 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sec-head h4 { margin: 0; } .edit-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 10px; } .pct-input { display: block; width: 100%; box-sizing: border-box; text-align: right; background: var(--surface-2); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; font: inherit; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 3px; appearance: textfield; -moz-appearance: textfield; } .pct-input[hidden] { display: none; } /* author display:block otherwise overrides [hidden], leaving the input perma-visible */ .pct-input::-webkit-outer-spin-button, .pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .instructions.empty { color: var(--muted); font-style: italic; } .notes-edit { width: 100%; box-sizing: border-box; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; min-height: 120px; overflow-y: hidden; /* auto-grown to fit content in JS; min keeps short fields comfortable */ } .notes-edit:focus { outline: none; border-color: var(--accent); } .notes-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .nbtn { padding: 8px 16px; border-radius: 10px; font-size: .9rem; cursor: pointer; font-family: inherit; background: transparent; color: var(--text); border: 1px solid var(--border); } .nbtn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; } .nbtn.danger { display: inline-flex; align-items: center; padding: 8px 12px; color: #e0574f; border-color: color-mix(in srgb, #e0574f 45%, var(--border)); } .nbtn.danger svg { display: block; } .nbtn.danger:active { background: color-mix(in srgb, #e0574f 15%, transparent); } .nbtn[hidden] { display: none; } /* class display:inline-flex would otherwise override [hidden] */ .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .82rem; } .share-btn svg { display: block; } .iterate-row { margin-top: 12px; } .iterate-btn { width: 100%; color: var(--accent); border-color: var(--accent); font-weight: 600; } .iterate-btn:disabled { opacity: .6; } .versions { display: flex; flex-direction: column; gap: 8px; } .ver-row { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; } .ver-main { flex: 1; min-width: 0; } .ver-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted); } .ver-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ver-title { font-weight: 600; } /* the status doubles as the action menu — looks like tappable text + a caret, not a boxy select */ .ver-state-select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-weight: 400; padding: 0 15px 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } .ver-state-select:focus { outline: none; } .ver-lead { margin-left: 8px; color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; } .ver-notes { color: var(--muted); font-size: .85rem; margin-top: 3px; white-space: pre-wrap; } /* per-version 1–5 star rating; buttons get a generous tap target, the glyph stays small */ .ver-rating { display: flex; align-items: center; margin: 4px 0 0 -6px; } .ver-star { background: none; border: none; padding: 4px 6px; cursor: pointer; color: var(--muted); opacity: .55; display: inline-flex; } .ver-star svg { display: block; } .ver-star.on { color: var(--accent); opacity: 1; } .ver-rating.static { pointer-events: none; } span.ver-star { cursor: default; } .ver-field { margin-top: 8px; } .ver-field-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); opacity: .85; } /* base control */ .base-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .base-label { font-size: .85rem; color: var(--muted); margin-bottom: 8px; } .base-label b { color: var(--text); } .stepper { display: flex; align-items: stretch; gap: 8px; } .stepper input { flex: 1; min-width: 0; font-size: 1.5rem; font-weight: 700; text-align: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px; -moz-appearance: textfield; } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper button { width: 52px; font-size: 1.5rem; font-weight: 700; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .stepper button:active { background: var(--border); } .quick { display: flex; gap: 8px; margin-top: 10px; } .quick button { flex: 1; padding: 8px; font-size: .9rem; border-radius: 10px; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); } .quick button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; } .yield-line { margin-top: 12px; font-size: .92rem; color: var(--muted); } .yield-line b { color: var(--text); } /* the yield amount is editable (back-computes the base); dotted underline hints tappable */ .yield-input { width: 4.2em; font: inherit; font-weight: 700; color: var(--text); text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 1px dashed var(--accent); border-radius: 8px; padding: 2px 4px; -moz-appearance: textfield; } .yield-input::-webkit-outer-spin-button, .yield-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* "Wet" / "Dry" sub-headers grouping the ingredient list for two-bowl recipes */ .ing-section-head { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 12px 4px 4px; } .ing-section-head:first-child { padding-top: 2px; } /* ingredient rows */ .ing { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); } .ing:last-child { border-bottom: none; } .ing.hidden { display: none; } /* non-selected "set" variant rows (e.g. quiche fillings) */ .vset-head { padding-bottom: 5px; } /* the set chooser row (caption +