/* "Quiet workspace" design system — tokens from design_handoff_creami_app/README.md. Light is the base; dark (handoff D0–D3) overrides via prefers-color-scheme, with a manual override on (Profile → Preferences → Appearance). */ :root { --paper: #FBFBFA; --canvas: #F3F2EF; /* page background outside the content column */ --surface: #FFFFFF; --ink: #1A1915; --body: #4A4842; --muted: #8F8C85; --faint: #B3B0A9; --hairline: #EEECE8; --border: #E4E2DD; --fill: #F4F3F1; --scrim: #DDDBD6; --knockout: #FBFBFA; --drag-handle: #D9D6D0; --avatar-bg: #E9E2F2; --tag-bg: rgba(255, 255, 255, .92); --tag-ink: var(--body); --dot-ring: #FFFFFF; --toggle-knob-on: #FFFFFF; --toggle-knob-off: #FFFFFF; --slider-knob: #FFFFFF; --pint-texture: rgba(255, 255, 255, .3); --pint-ring: rgba(255, 255, 255, .88); --pint-shadow: inset 0 5px 14px rgba(26, 25, 21, .14), 0 10px 18px rgba(26, 25, 21, .12); --shadow-sheet: 0 -12px 40px rgba(26, 25, 21, .18); --shadow-dialog: 0 18px 50px rgba(26, 25, 21, .22); --shadow-knob: 0 1px 3px rgba(26, 25, 21, .2); --shadow-slider-knob: 0 2px 6px rgba(26, 25, 21, .15); /* flavor tiles (decoration only; dots are theme-invariant and live in app.js) */ --tile-pistachio: #EBF0E4; --tile-vanilla: #F0EBDD; --tile-cottage: #F1EEEA; --tile-blueberry: #EAEDF4; --tile-mint: #EAF2EC; --tile-mango: #FBEDE4; --tile-strawberry: #FAEDEF; --tile-chocolate: #F3EBE2; /* flavor icon strokes — the dot hues deepened toward ink so line art pops on the tiles */ --fi-pistachio: #535B49; --fi-vanilla: #69624E; --fi-cottage: #615E58; --fi-blueberry: #4E5360; --fi-mint: #4B5D4F; --fi-mango: #6B5642; --fi-strawberry: #6B5658; --fi-chocolate: #5C4D3D; /* brand mark (handoff Respin Logo 8a) — pistachio dot hue; theme-invariant like the dots */ --brand: #AFC79E; --brand-ink: #FBFBFA; --shadow-popover: 0 10px 30px rgba(26, 25, 21, .14); --shadow-card: 0 1px 3px rgba(26, 25, 21, .04); --gutter: 22px; --font: 'Schibsted Grotesk', system-ui, sans-serif; color-scheme: light; } /* Dark theme — warm near-black inversion; "color only as flavor" holds (handoff D0). Same block twice: once for the system setting, once for the manual override. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #171613; --canvas: #100F0D; --surface: #211F1B; --ink: #F1F0EB; --body: #C6C4BC; --muted: #98958D; --faint: #5F5D55; --hairline: #292723; --border: #363430; --fill: #24221E; --scrim: #0D0C0A; --knockout: #171613; --drag-handle: #3A3832; --avatar-bg: #262330; --tag-bg: rgba(23, 22, 19, .85); --tag-ink: var(--body); --dot-ring: var(--surface); --toggle-knob-on: #171613; --toggle-knob-off: #98958D; --slider-knob: var(--surface); --pint-texture: rgba(255, 255, 255, .25); --pint-ring: rgba(23, 22, 19, .35); --pint-shadow: inset 0 5px 14px rgba(0, 0, 0, .3), 0 10px 22px rgba(0, 0, 0, .4); --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55); --shadow-dialog: 0 18px 50px rgba(0, 0, 0, .55); --shadow-knob: 0 1px 3px rgba(0, 0, 0, .35); --shadow-slider-knob: 0 2px 6px rgba(0, 0, 0, .4); --shadow-popover: 0 10px 30px rgba(0, 0, 0, .5); --shadow-card: 0 1px 3px rgba(0, 0, 0, .25); --tile-pistachio: #262B1F; --tile-vanilla: #2B2820; --tile-cottage: #272522; --tile-blueberry: #23262F; --tile-mint: #212B24; --tile-mango: #2F2620; --tile-strawberry: #2E2327; --tile-chocolate: #2B241D; /* flavor icon strokes — the dot hues lifted toward white for the dark tiles */ --fi-pistachio: #D1DFC7; --fi-vanilla: #F2E9CF; --fi-cottage: #E7E3DD; --fi-blueberry: #CAD2EA; --fi-mint: #C6E2D0; --fi-mango: #F6D6BC; --fi-strawberry: #F6D6DD; --fi-chocolate: #DFC8B5; color-scheme: dark; } } :root[data-theme="dark"] { --paper: #171613; --canvas: #100F0D; --surface: #211F1B; --ink: #F1F0EB; --body: #C6C4BC; --muted: #98958D; --faint: #5F5D55; --hairline: #292723; --border: #363430; --fill: #24221E; --scrim: #0D0C0A; --knockout: #171613; --drag-handle: #3A3832; --avatar-bg: #262330; --tag-bg: rgba(23, 22, 19, .85); --tag-ink: var(--body); --dot-ring: var(--surface); --toggle-knob-on: #171613; --toggle-knob-off: #98958D; --slider-knob: var(--surface); --pint-texture: rgba(255, 255, 255, .25); --pint-ring: rgba(23, 22, 19, .35); --pint-shadow: inset 0 5px 14px rgba(0, 0, 0, .3), 0 10px 22px rgba(0, 0, 0, .4); --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55); --shadow-dialog: 0 18px 50px rgba(0, 0, 0, .55); --shadow-knob: 0 1px 3px rgba(0, 0, 0, .35); --shadow-slider-knob: 0 2px 6px rgba(0, 0, 0, .4); --shadow-popover: 0 10px 30px rgba(0, 0, 0, .5); --shadow-card: 0 1px 3px rgba(0, 0, 0, .25); --tile-pistachio: #262B1F; --tile-vanilla: #2B2820; --tile-cottage: #272522; --tile-blueberry: #23262F; --tile-mint: #212B24; --tile-mango: #2F2620; --tile-strawberry: #2E2327; --tile-chocolate: #2B241D; /* flavor icon strokes — the dot hues lifted toward white so line art pops on the dark tiles */ --fi-pistachio: #DFE9D8; --fi-vanilla: #F6F0DE; --fi-cottage: #EEECE7; --fi-blueberry: #DAE0F0; --fi-mint: #D7EBDF; --fi-mango: #F9E3D1; --fi-strawberry: #F9E3E7; --fi-chocolate: #E9D9CC; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--canvas); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } button { font-family: var(--font); border: none; background: none; padding: 0; color: inherit; cursor: pointer; text-align: inherit; } input { font-family: var(--font); } #app { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); /* content column stays paper; body shows --canvas beside it */ } .screen { flex: 1; display: flex; flex-direction: column; padding-bottom: 90px; } .screen.no-nav { padding-bottom: 110px; } /* Browse: pin search + chips + sort so only the recipe list scrolls under them. Mobile has no fixed top bar, so the header would otherwise scroll away. */ .browse-head { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); background: var(--paper); } /* ---------- header ---------- */ .page-head { padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .page-title { font: 700 24px/1.2 var(--font); } .page-meta { font: 400 12.5px var(--font); color: var(--muted); margin-top: 3px; } /* ---------- brand header + quick settings (handoff Respin Logo, frames 8a–8c) ---------- */ .brand-head { position: relative; display: flex; align-items: center; gap: 11px; padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 0; } .brand-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; } .brand-name { font: 700 20px var(--font); letter-spacing: -.01em; color: var(--ink); } .brand-head .icon-btn { margin-left: auto; } .icon-btn { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; } .popover { position: absolute; top: calc(100% + 8px); right: 16px; z-index: 35; width: 250px; padding: 14px 15px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-popover); } .popover::before { content: ""; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .pop-title { font: 700 13px var(--font); color: var(--ink); } .pop-group { margin-top: 14px; } .pop-group .section-label { display: block; font-size: 10.5px; margin-bottom: 7px; } .pop-group .seg button { padding: 7px 0; font-size: 12px; } .pop-group .seg button.on { border-color: transparent; box-shadow: var(--shadow-knob); } /* ---------- search ---------- */ .search-wrap { padding: 14px var(--gutter) 0; } .search { display: flex; align-items: center; gap: 9px; background: var(--fill); border-radius: 10px; padding: 11px 13px; } .search input { flex: 1; border: none; background: none; outline: none; padding: 0; font: 400 13.5px var(--font); color: var(--ink); } .search input::placeholder { color: var(--muted); } .kbd { font: 500 11px var(--font); color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; background: var(--surface); display: none; } @media (hover: hover) { .kbd { display: inline-block; } } /* ---------- chips ---------- */ .chip-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0 var(--gutter); } .chip-row { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .chip-row::-webkit-scrollbar { display: none; } .new-chip { flex: none; white-space: nowrap; color: var(--ink); font-weight: 600; } .chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--body); font: 500 12.5px var(--font); } .chip.on { background: var(--ink); color: var(--knockout); border-color: var(--ink); } .chip.wrapping { padding: 8px 13px; } /* ---------- sort strip / section labels ---------- */ .sort-strip { display: flex; justify-content: space-between; align-items: center; margin: 16px var(--gutter) 0; } .section-label { font: 500 11px var(--font); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } .sort-btn { font: 500 12px var(--font); color: var(--body); } .sort-menu { position: relative; display: inline-flex; } .sort-trigger { display: inline-flex; align-items: center; gap: 5px; } .sort-trigger svg { color: var(--muted); } .sort-pop { right: 0; width: 228px; padding: 14px 15px 15px; } .sort-pop::before { right: 15px; } /* Share popover (GH-67) — anchored to the detail-nav share button */ .share-menu { position: relative; } .share-pop { right: 0; width: 244px; padding: 14px 15px 15px; } .share-pop::before { right: 14px; } .share-url { margin-top: 10px; padding: 8px 10px; font: 500 12.5px var(--font); color: var(--muted); background: var(--fill); border-radius: 8px; word-break: break-all; } .share-pop .btn-bordered { width: 100%; margin-top: 8px; display: flex; justify-content: center; } .share-pop .share-copy.done { color: var(--ink); } .sort-pop .pop-group:first-of-type { margin-top: 8px; } .sort-pop .radio-row { padding: 11px 0; } .sort-pop .seg button { padding: 8px 0; font-size: 12px; } /* ---------- list rows ---------- */ .rows { padding: 8px var(--gutter) 0; } .row { width: 100%; display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--hairline); } .rows .row:last-child { border-bottom: none; } .thumb { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; } .thumb .dot { width: 22px; height: 22px; border-radius: 50%; } .thumb svg { display: block; } /* placeholder tiles get a soft ring in their flavor's stroke color; a loaded photo covers it */ .thumb, .hero { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fi, transparent) 25%, transparent); } /* source photo covers the tile; if it 404s it removes itself and the flavor icon shows */ .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .row-text { flex: 1; min-width: 0; } .row-title { font: 600 15px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Private-recipe marker (GH-60) — quiet, muted, inline with title/meta text */ .lock-flag { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); margin-left: 6px; vertical-align: -1px; } .detail-meta .lock-flag { margin-left: 0; } .row-meta { font: 400 12px var(--font); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- heart ---------- */ .hrt { flex: none; width: 36px; height: 36px; display: grid; place-items: center; } .hrt svg path { fill: none; stroke: var(--faint); transition: fill .18s, stroke .18s; } .hrt.on svg path { fill: var(--ink); stroke: var(--ink); } .hrt.on svg { animation: pop .38s cubic-bezier(.2, 1.7, .4, 1); } @keyframes pop { 0% { transform: scale(.55); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } } /* ---------- skeleton ---------- */ .skel .thumb { background: var(--fill); } .skel-bar { height: 12px; border-radius: 6px; background: var(--fill); animation: shimmer 1.2s ease-in-out infinite; } .skel-bar.w60 { width: 60%; } .skel-bar.w40 { width: 40%; margin-top: 7px; } @keyframes shimmer { 50% { opacity: .55; } } /* ---------- empty state ---------- */ .empty-state { text-align: center; padding: 64px 40px; } .empty-state h2 { font: 700 18px var(--font); margin: 14px 0 0; } .empty-state p { font: 400 13.5px var(--font); color: var(--muted); margin: 6px 0 20px; } /* ---------- buttons ---------- */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--ink); color: var(--knockout); border-radius: 12px; padding: 15px 0; font: 600 14.5px var(--font); } .icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; flex: none; } .icon-btn.dense { width: 38px; height: 38px; } .btn-bordered { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: 500 12.5px var(--font); color: var(--ink); flex: none; } /* ---------- stat strip ---------- */ .stat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 16px var(--gutter) 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } .stat { padding: 13px 6px; text-align: center; border-right: 1px solid var(--hairline); } .stat:last-child { border-right: none; } .stat b { font: 700 17px var(--font); color: var(--ink); } .stat span { display: block; font: 400 10.5px var(--font); color: var(--muted); margin-top: 2px; } /* ---------- detail ---------- */ /* Pin the back/share nav so only the recipe body scrolls under it. Mobile has no fixed top bar, so the header would otherwise scroll away (as Browse does via .browse-head). */ .detail-nav { position: sticky; top: 0; z-index: 5; background: var(--paper); display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; } .detail-nav .group { display: flex; gap: 8px; } .detail-body { padding: 14px var(--gutter) 0; } .hero { position: relative; height: 180px; border-radius: 16px; display: grid; place-items: center; overflow: hidden; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero .tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: var(--tag-bg); font: 500 11px var(--font); color: var(--tag-ink); } .detail-title { font: 700 22px var(--font); margin-top: 16px; } .detail-meta { font: 400 12.5px var(--font); color: var(--muted); margin-top: 4px; } .macro-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } .macro-strip .stat b { font-size: 16px; } .note-line { font: 400 11.5px var(--font); color: var(--faint); margin-top: 8px; } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); width: 100%; } .setting-row:last-of-type { border-bottom: none; } .setting-row .lbl { font: 400 13.5px var(--font); color: var(--body); } .setting-row .val { font: 600 13.5px var(--font); color: var(--ink); text-align: right; } .setting-row .val.muted { font-weight: 500; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; } .ing-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--hairline); width: 100%; } .ing-row:last-of-type { border-bottom: none; } .ing-row .name { flex: 1; font: 400 13.5px var(--font); color: var(--ink); text-align: left; } .ing-row .name .paren { color: var(--muted); } .ing-row .amount { font: 400 12.5px var(--font); color: var(--muted); } .ing-row.checked .name { color: var(--muted); text-decoration: line-through; } .checkbox { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--faint); background: var(--surface); display: grid; place-items: center; } .checkbox.on { background: var(--ink); border-color: var(--ink); } .personal-note { margin-top: 14px; background: var(--fill); border-radius: 10px; padding: 11px 13px; font: 400 13px var(--font); color: var(--body); } /* ---------- footers ---------- */ .pinned-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); z-index: 20; } .pinned-footer .icon-btn { width: 52px; height: auto; border-radius: 12px; } /* ---------- bottom nav ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; display: flex; justify-content: space-around; align-items: center; padding: 11px 10px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); z-index: 20; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; } .nav-item span { font: 500 10.5px var(--font); color: var(--muted); } .nav-item.on span { font-weight: 600; color: var(--ink); } /* ---------- bottom sheet ---------- */ .sheet-layer { position: fixed; inset: 0; z-index: 40; } .sheet-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .3s ease-out; } .sheet-layer.open .sheet-scrim { opacity: .72; } .sheet { position: absolute; left: 50%; transform: translate(-50%, 100%); bottom: 0; width: 100%; max-width: 520px; max-height: 86dvh; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; transition: transform .3s ease-out; } .sheet-layer.open .sheet { transform: translate(-50%, 0); } .drag-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--drag-handle); margin: 10px auto 0; flex: none; } .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter) 0; } .sheet-head b { font: 700 18px var(--font); } .sheet-head button { font: 500 13px var(--font); color: var(--muted); } .sheet-body { flex: 1; overflow-y: auto; padding: 6px var(--gutter) 12px; } .sheet-footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); } /* sheet controls */ .radio-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .radio-row:last-of-type { border-bottom: none; } .radio-row .lbl { font: 400 14px var(--font); color: var(--body); } .radio-row.on .lbl { font-weight: 500; color: var(--ink); } .radio { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--faint); background: var(--surface); flex: none; } .radio.on { border: 6px solid var(--ink); } .toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .toggle-row:last-of-type { border-bottom: none; } .toggle-row .lbl { font: 400 14px var(--font); color: var(--ink); } .toggle { width: 42px; height: 25px; border-radius: 13px; background: var(--border); position: relative; flex: none; transition: background .18s; } .toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: var(--toggle-knob-off); box-shadow: var(--shadow-knob); transition: transform .18s; } .toggle.on { background: var(--ink); } .toggle.on::after { transform: translateX(17px); box-shadow: none; background: var(--toggle-knob-on); } .slider-wrap { padding: 16px 2px 6px; } .slider-labels { display: flex; justify-content: space-between; margin-top: 10px; } .slider-labels span { font: 400 12px var(--font); color: var(--muted); } .slider-labels .cur { font: 600 12px var(--font); color: var(--ink); } input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) 0%, var(--ink) var(--pct, 0%), var(--hairline) var(--pct, 0%)); outline: none; margin: 8px 0 0; } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--slider-knob); border: 1.5px solid var(--ink); box-shadow: var(--shadow-slider-knob); cursor: pointer; } input[type="range"].slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--slider-knob); border: 1.5px solid var(--ink); box-shadow: var(--shadow-slider-knob); cursor: pointer; } /* ---------- auth sheet ---------- */ .text-input { width: 100%; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: 400 14px var(--font); color: var(--ink); outline: none; } .text-input:focus { border-color: var(--faint); } .text-input::placeholder { color: var(--muted); } .text-input.code { font: 600 22px var(--font); letter-spacing: .3em; text-align: center; } .auth-error { font: 500 12.5px var(--font); color: var(--body); margin-top: 10px; min-height: 16px; } .auth-hint { font: 400 12px var(--font); color: var(--muted); margin: 12px 0 4px; } .auth-sent { font: 400 13.5px var(--font); color: var(--body); margin: 14px 0 0; } .auth-sent b { color: var(--ink); } .auth-alt { font: 500 12.5px var(--font); color: var(--muted); margin: 4px 0 6px; text-decoration: underline; text-underline-offset: 3px; } /* ---------- install sheet ---------- */ .setting-row.installed { justify-content: space-between; } .setting-row.installed .lbl { color: var(--muted); } .ins-intro { font: 400 13.5px var(--font); color: var(--body); margin: 14px 0 0; line-height: 1.5; } .ins-note { font: 400 12.5px var(--font); color: var(--muted); margin: 12px 0 0; line-height: 1.45; } .ins-note b { color: var(--body); } .ins-steps { list-style: none; margin: 16px 0 4px; padding: 0; counter-reset: ins; } .ins-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); font: 400 13.5px var(--font); color: var(--body); line-height: 1.4; } .ins-steps li b { color: var(--ink); font-weight: 600; } .ins-steps li::before { counter-increment: ins; content: counter(ins); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--fill); color: var(--ink); display: grid; place-items: center; font: 600 12px var(--font); } .ins-glyph { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; } .ins-glyph:empty { display: none; } .sheet-footer .btn-primary svg { stroke: var(--knockout); } /* ---------- cards ---------- */ .card-row { display: flex; gap: 10px; padding: 16px var(--gutter) 0; } .collection-card { flex: 1; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); padding: 14px; text-align: left; min-width: 0; } .dots { display: flex; } .dots .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dot-ring); } .dots .dot + .dot { margin-left: -7px; } .collection-card .name { font: 600 14px var(--font); color: var(--ink); margin-top: 10px; } .collection-card .count { font: 400 11.5px var(--font); color: var(--muted); margin-top: 2px; } .machine-card { display: flex; align-items: center; gap: 13px; margin: 10px var(--gutter) 0; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); padding: 13px 14px; width: calc(100% - 2 * var(--gutter)); } .machine-card .tile { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--fill); display: grid; place-items: center; } /* The two pint sizes as tubs (I.pint art) — the active machine's tub is inked (GH-71) */ .machine-card .machine-tubs { display: inline-flex; align-items: flex-end; gap: 2px; } .machine-card .name { font: 600 14.5px var(--font); color: var(--ink); } .machine-card .sub { font: 400 12px var(--font); color: var(--muted); margin-top: 2px; } .machine-card .grow { flex: 1; min-width: 0; text-align: left; } /* ---------- profile ---------- */ .identity { display: flex; align-items: center; gap: 14px; padding: 18px var(--gutter) 0; } .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--avatar-bg); display: grid; place-items: center; font: 700 19px var(--font); color: var(--ink); flex: none; } .identity .name { font: 700 19px var(--font); display: flex; align-items: center; gap: 7px; } .name-edit { display: inline-grid; place-items: center; padding: 4px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; } .name-edit:hover, .name-edit:focus-visible { color: var(--ink); background: var(--surface); } .identity .sub { font: 400 12.5px var(--font); color: var(--muted); margin-top: 2px; } .identity .grow { flex: 1; min-width: 0; } .profile-rows { padding: 0 var(--gutter); } .profile-rows .setting-row .lbl { font-size: 14px; color: var(--ink); } .profile-rows .setting-row.muted-row .lbl { color: var(--muted); } .detail-section { margin-top: 20px; } .in-pad { padding: 0 var(--gutter); } /* ---------- pint log (design Fix v1: panel, inline composer, swipe/hover remove) ---------- */ .pint-log { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; } .pl-head { display: flex; align-items: center; gap: 9px; padding: 14px 15px 12px; border-bottom: 1px solid var(--hairline); } .pl-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--fill); display: grid; place-items: center; } .pl-title { flex: 1; font: 600 14px var(--font); color: var(--ink); } .pl-badge { flex: none; padding: 2px 9px; border-radius: 20px; background: var(--ink); font: 600 11px var(--font); color: var(--knockout); } .pl-row { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 13px 15px; background: var(--surface); transition: transform .18s ease-out; touch-action: pan-y; } .pl-row + .pl-row { border-top: 1px solid var(--hairline); } .pl-row:has(.pl-composer) { align-items: center; } .pl-date { flex: none; min-width: 58px; font: 500 11.5px var(--font); color: var(--muted); } .pl-date.now { font-weight: 600; color: var(--ink); } .pl-note { flex: 1; min-width: 0; font: 400 13.5px/1.45 var(--font); color: var(--ink); text-align: left; } .pl-row[data-make-edit] { cursor: pointer; } .pl-composer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--fill); border: 1px solid var(--border); border-radius: 10px; padding: 5px 5px 5px 11px; } .pl-composer input { flex: 1; min-width: 0; border: none; background: none; outline: none; padding: 4px 0; font: 400 13px var(--font); color: var(--ink); } .pl-composer input::placeholder { color: var(--faint); } .pl-save { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--ink); font: 600 11px var(--font); color: var(--knockout); } .pl-cam { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; } .pl-cam:hover { background: var(--surface); } .pl-photo { flex: none; align-self: center; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; border: 1px solid var(--hairline); } .pl-foot { padding: 9px 15px 11px; background: var(--paper); border-top: 1px solid var(--hairline); font: 400 11px var(--font); color: var(--faint); } /* remove affordance: hidden until row hover on pointer devices; touch uses swipe */ .make-del { display: none; flex: none; align-self: center; width: 26px; height: 26px; place-items: center; border-radius: 8px; } @media (hover: hover) { .pl-row:hover .make-del { display: grid; } .make-del:hover { background: var(--fill); } .pl-foot { display: none; } /* the hint describes touch; pointer devices see the hover × */ } /* ---------- desktop ≥700px (handoff screens 06–07: top bar, 680px column) ---------- */ .top-bar, .back-link, .desktop-cta { display: none; } @media (min-width: 700px) { :root { --gutter: 24px; } .mobile-only { display: none; } #app { max-width: 680px; padding-top: 60px; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); } .screen, .screen.no-nav { padding-bottom: 48px; } /* Desktop already pins via the fixed top bar; keep the browse header in normal flow. */ .browse-head { position: static; padding-top: 0; } .bottom-nav { display: none; } .page-head { padding-top: 30px; } .identity { padding-top: 30px; } .top-bar { position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 30; display: flex; align-items: center; justify-content: space-between; /* align the bar's content with the 680px column (column edge + --gutter) */ padding: 0 max(28px, calc((100% - 680px) / 2 + var(--gutter))); /* paper over the 680px content column, canvas outside it, hairlines continuing the column edges */ background: linear-gradient(90deg, color-mix(in srgb, var(--canvas) 96%, transparent) 0 calc(50% - 340px), var(--hairline) calc(50% - 340px) calc(50% - 339px), color-mix(in srgb, var(--paper) 96%, transparent) calc(50% - 339px) calc(50% + 339px), var(--hairline) calc(50% + 339px) calc(50% + 340px), color-mix(in srgb, var(--canvas) 96%, transparent) calc(50% + 340px) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* bottom hairline only under the content column, not the canvas outside it */ .top-bar::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(680px, 100%); height: 1px; background: var(--hairline); } .wordmark { display: flex; align-items: center; gap: 10px; font: 700 15px var(--font); color: var(--ink); } .wordmark .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; } .top-nav { display: flex; align-items: center; gap: 28px; } .top-quick { position: relative; display: flex; } .top-quick .icon-btn { width: 32px; height: 32px; } .top-quick .popover { top: calc(100% + 14px); right: -2px; } .search-wrap { padding-top: 30px; } .top-link { font: 500 13.5px var(--font); color: var(--muted); padding-bottom: 2px; border-bottom: 2px solid transparent; } .top-link.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); } .top-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); display: grid; place-items: center; font: 700 13px var(--font); color: var(--ink); } /* detail: hero beside title + macros, then machine / ingredients as two columns */ /* Desktop pins via the fixed top bar; keep the detail nav in normal flow. */ .detail-nav { position: static; padding-top: 24px; } .back-link { display: flex; align-items: center; gap: 7px; font: 500 13px var(--font); color: var(--muted); } .detail-top { display: flex; gap: 20px; margin-top: 16px; } .detail-top .hero-wrap { flex: none; width: 240px; } .detail-top .hero { height: 200px; } .detail-headline { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .detail-headline .detail-title { margin-top: 0; } .detail-headline .macro-strip { margin-top: 14px; } .detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; } .desktop-cta { display: flex; gap: 10px; margin-top: 16px; } .pinned-footer { display: none; } /* the filter sheet becomes a centered dialog */ .sheet { left: 50%; top: 50%; bottom: auto; width: 480px; max-width: 480px; max-height: 80vh; border-radius: 16px; transform: translate(-50%, -50%) scale(.97); opacity: 0; transition: transform .2s ease-out, opacity .2s ease-out; box-shadow: var(--shadow-dialog); } .sheet-layer.open .sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; } .drag-handle { display: none; } .sheet-head { padding-top: 20px; } .sheet-footer { padding-bottom: 16px; border-radius: 0 0 16px 16px; } } /* ---------- add / import / review (handoff screens 08–10) ---------- */ .badge { flex: none; background: var(--fill); border-radius: 6px; padding: 4px 8px; font: 600 12px var(--font); color: var(--ink); } .badge.white { background: var(--surface); border: 1px solid var(--border); font: 500 11.5px var(--font); color: var(--body); } .add-label { display: none; } .add-label-short { display: inline; } .or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: var(--muted); font: 400 12px var(--font); } .or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } .text-link { font: inherit; color: var(--body); text-decoration: underline; text-underline-offset: 2px; } .import-loading { text-align: center; padding: 26px 0 10px; } .spinner { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; border: 2.5px solid var(--hairline); border-top-color: var(--ink); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .import-title { font: 600 14.5px var(--font); margin-top: 14px; } .import-sub { font: 400 12.5px var(--font); color: var(--muted); margin-top: 4px; min-height: 16px; } .import-loading .btn-bordered { width: auto; margin: 18px auto 0; padding: 10px 18px; } textarea.text-input { resize: vertical; min-height: 96px; line-height: 1.5; } .source-row { display: flex; align-items: center; gap: 10px; background: var(--fill); border-radius: 10px; padding: 11px 13px; margin-top: 14px; } .source-row .src-url { flex: 1; min-width: 0; font: 400 12.5px var(--font); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .machine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .seg { display: flex; background: var(--fill); border-radius: 10px; padding: 3px; } .seg button { flex: 1; padding: 8px 0; border-radius: 8px; text-align: center; font: 600 13px var(--font); color: var(--muted); border: 1px solid transparent; } .seg button.on { background: var(--surface); color: var(--ink); border-color: var(--border); } .stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .stepper button { width: 40px; height: 38px; display: grid; place-items: center; font: 600 16px var(--font); color: var(--ink); } .stepper .val { flex: 1; text-align: center; font: 600 13px var(--font); } .photo-edit { margin-top: 10px; } .photo-edit img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--hairline); } .photo-actions { display: flex; gap: 8px; margin-top: 8px; } /* multi-photo editor grid (GH-46) */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .photo-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); } .photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-badge, .cover-set { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 6px; font: 500 10.5px var(--font); background: var(--tag-bg); color: var(--tag-ink); border: none; } .cover-set { cursor: pointer; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); } .photo-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper); font: 500 14px/1 var(--font); cursor: pointer; display: grid; place-items: center; } .photo-add { aspect-ratio: 1; border-radius: 12px; border: 1px dashed var(--hairline-strong, var(--hairline)); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; } /* detail gallery strip (GH-46) */ .gallery-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; } .gal-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; } .gal-thumb.on { border-color: var(--ink); } .gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .macro-edit { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } .macro-edit .cell { padding: 10px 4px 9px; text-align: center; border-right: 1px solid var(--hairline); } .macro-edit .cell:last-child { border-right: none; } .macro-edit input { width: 100%; border: none; outline: none; background: none; text-align: center; font: 700 16px var(--font); color: var(--ink); padding: 0; -moz-appearance: textfield; appearance: textfield; } .macro-edit input::-webkit-outer-spin-button, .macro-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .macro-edit input::placeholder { color: var(--faint); } .macro-edit .cell span { display: block; font: 400 10.5px var(--font); color: var(--muted); margin-top: 2px; } .ing-edit { display: flex; gap: 8px; margin-top: 8px; } .ing-edit .text-input { margin-top: 0; padding: 10px 12px; font-size: 13.5px; } .ing-edit .qty { width: 96px; flex: none; } .ing-edit .name { flex: 1; min-width: 0; } .del-x { flex: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: grid; place-items: center; } .setting-row.muted-row .lbl { color: var(--muted); } .review-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); z-index: 20; } .review-footer .btn-primary.off { opacity: .4; pointer-events: none; } @media (min-width: 700px) { .add-label { display: inline; } .add-label-short { display: none; } .review-footer { position: static; transform: none; max-width: none; padding: 20px var(--gutter) 40px; background: none; border-top: none; backdrop-filter: none; -webkit-backdrop-filter: none; } }