/* Palette. The accent is one hue, set by data-accent on , and every accent shade is derived from it, so a theme change only has to move lightness rather than restate four palettes. Themes come in three states: no data-theme means follow the phone. */ :root { --ground: #f4f7ee; --surface: #ffffff; --ink: #1e2916; --muted: #5f6b53; --line: #e0e7d4; --due: #a65a14; --bad: #9e2f1c; --bad-ground: #fbe8e3; /* one fixed colour per person, so the same colour means the same person on both phones */ --who-a-bg: #d9e7f4; --who-a-ink: #1f4a70; --who-b-bg: #eddff1; --who-b-ink: #5c3468; --who-n-bg: #eaede2; --who-n-ink: #5f6b53; --accent-h: 84; --accent-s: 45%; --rind-l: 33%; --flesh-l: 86%; --flesh-ink-l: 22%; --rind: hsl(var(--accent-h) var(--accent-s) var(--rind-l)); --rind-ink: #ffffff; --flesh: hsl(var(--accent-h) calc(var(--accent-s) - 8%) var(--flesh-l)); --flesh-ink: hsl(var(--accent-h) calc(var(--accent-s) + 10%) var(--flesh-ink-l)); --scrim: rgba(20, 28, 14, .42); --shadow: 0 10px 30px rgba(30, 41, 22, .16), 0 2px 6px rgba(30, 41, 22, .08); --display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; --body: "Atkinson Hyperlegible", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; --col: 440px; --gutter: 20px; color-scheme: light; } :root[data-accent="sea"] { --accent-h: 187; --accent-s: 52%; } :root[data-accent="plum"] { --accent-h: 310; --accent-s: 34%; } :root[data-accent="clay"] { --accent-h: 22; --accent-s: 58%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #10150c; --surface: #1a2114; --ink: #e6eddc; --muted: #a3af95; --line: #2c3524; --due: #eba062; --bad: #f29a86; --bad-ground: #3a1d16; --who-a-bg: #1b2f40; --who-a-ink: #a6cbe8; --who-b-bg: #33243a; --who-b-ink: #dfb8e8; --who-n-bg: #242c1c; --who-n-ink: #a3af95; --rind-l: 62%; --flesh-l: 18%; --flesh-ink-l: 82%; --rind-ink: hsl(var(--accent-h) 40% 10%); --scrim: rgba(0, 0, 0, .58); --shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #10150c; --surface: #1a2114; --ink: #e6eddc; --muted: #a3af95; --line: #2c3524; --due: #eba062; --bad: #f29a86; --bad-ground: #3a1d16; --who-a-bg: #1b2f40; --who-a-ink: #a6cbe8; --who-b-bg: #33243a; --who-b-ink: #dfb8e8; --who-n-bg: #242c1c; --who-n-ink: #a3af95; --rind-l: 62%; --flesh-l: 18%; --flesh-ink-l: 82%; --rind-ink: hsl(var(--accent-h) 40% 10%); --scrim: rgba(0, 0, 0, .58); --shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.4 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--rind); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .booting { margin: 40vh 0 0; color: var(--muted); text-align: center; } .brand { display: flex; align-items: center; gap: 10px; } .brand svg { width: 30px; height: 30px; flex: none; } .brand b { font: 800 25px/1 var(--display); letter-spacing: -.035em; } .login { max-width: var(--col); min-height: 100vh; margin: 0 auto; padding: 48px var(--gutter) 40px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); } .login h1 { margin: 26px 0 0; font: 700 32px/1.1 var(--display); letter-spacing: -.025em; text-wrap: balance; } .login-form { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label, .q { display: block; color: var(--muted); font-size: 16px; font-weight: 700; } .q { margin-bottom: 8px; } .field input { width: 100%; height: 58px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--ground); font-size: 19px; } .pass { position: relative; } .pass input { padding-right: 88px; } .pass button { position: absolute; top: 6px; right: 6px; height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--rind); font-weight: 700; } .error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bad-ground); color: var(--bad); font-size: 16px; } .app { max-width: var(--col); min-height: 100vh; margin: 0 auto; background: var(--surface); padding-bottom: 180px; } @media (min-width: 480px) { .app, .login { border-inline: 1px solid var(--line); } } .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 10px; background: var(--surface); } .me { padding: 8px 2px; border: 0; background: none; color: var(--muted); font-size: 16px; } .panel { padding: 0 var(--gutter); } .panel h1 { margin: 10px 0 2px; font: 700 32px/1.1 var(--display); letter-spacing: -.025em; text-wrap: balance; } .sub { margin: 0 0 10px; color: var(--muted); font-size: 16px; } .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .row { display: flex; align-items: flex-start; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--line); } .row:last-child { border-bottom: 0; } .row.arrive { animation: arrive 1.4s ease-out; } @keyframes arrive { from { background: var(--flesh); } to { background: transparent; } } .check { flex: none; width: 48px; height: 48px; margin: -8px 0 -8px -12px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; } .box { width: 28px; height: 28px; display: grid; place-items: center; border: 2.5px solid var(--muted); border-radius: 8px; transition: background .18s, border-color .18s; } .box svg { width: 18px; height: 18px; stroke: var(--rind-ink); stroke-width: 3.2; opacity: 0; transform: scale(.5); transition: opacity .18s, transform .18s; } .row.is-done .box { background: var(--rind); border-color: var(--rind); } .row.is-done .box svg { opacity: 1; transform: none; } .row.is-done .title { color: var(--muted); text-decoration: line-through; } .text { flex: 1; min-width: 0; padding-top: 2px; } .title { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; color: var(--muted); font-size: 15px; } .when { color: var(--due); font-weight: 700; } /* Name chips: colour is fixed per person and always accompanied by the name, so it reinforces the words rather than being the only thing carrying the meaning. */ .who { padding: 1px 10px; border-radius: 999px; background: var(--who-n-bg); color: var(--who-n-ink); font-size: 14px; font-weight: 700; } .who-a { background: var(--who-a-bg); color: var(--who-a-ink); } .who-b { background: var(--who-b-bg); color: var(--who-b-ink); } .empty { margin: 8px 0 18px; padding: 18px; border-radius: 16px; background: var(--ground); color: var(--muted); text-align: center; } .done-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 16px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--muted); font-size: 16px; font-weight: 700; } .done-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; } .done-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .adder { display: flex; gap: 10px; margin: 2px 0 6px; } .adder input { flex: 1; min-width: 0; height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--ground); font-size: 18px; } .adder input::placeholder { color: var(--muted); } .adder button, .primary { border: 0; background: var(--rind); color: var(--rind-ink); font-weight: 700; } .adder button { height: 54px; padding: 0 20px; border-radius: 14px; font-size: 17px; } .primary { height: 58px; border-radius: 16px; font-size: 18px; } .primary:disabled { opacity: .45; cursor: default; } .usual-h { margin: 30px 0 2px; font: 700 23px/1.2 var(--display); letter-spacing: -.02em; } .aisle { margin: 20px 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { min-height: 46px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 17px; } .chip::before { content: "+"; color: var(--rind); font-size: 22px; font-weight: 700; line-height: 1; } .fab { position: fixed; right: max(20px, calc((100vw - var(--col)) / 2 + 20px)); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 6; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 20px; background: var(--rind); color: var(--rind-ink); box-shadow: var(--shadow); } .fab svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.6; } .nav { position: fixed; bottom: 0; left: 50%; z-index: 7; width: 100%; max-width: var(--col); display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid var(--line); background: var(--surface); } .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 700; } .tab .ico { width: 64px; height: 34px; display: grid; place-items: center; border-radius: 999px; transition: background .2s; } .tab svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; } .tab[aria-selected="true"] { color: var(--ink); } .tab[aria-selected="true"] .ico { background: var(--flesh); color: var(--flesh-ink); } .scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); } .sheet { position: fixed; bottom: 0; left: 50%; z-index: 21; width: 100%; max-width: var(--col); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 10px var(--gutter) calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: var(--shadow); } .grab { align-self: center; flex: none; width: 42px; height: 5px; border-radius: 99px; background: var(--line); } .sheet h2 { margin: 0; font: 700 25px/1.2 var(--display); letter-spacing: -.02em; } .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .opt { min-height: 52px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 17px; font-weight: 700; } .opt[aria-pressed="true"] { border-color: var(--rind); background: var(--flesh); color: var(--flesh-ink); } .ghost { align-self: center; padding: 6px 16px; border: 0; background: none; color: var(--muted); font-size: 16px; font-weight: 700; } /* Swatches show their own colour, not the current accent, so they preview what you would get. */ .swatches { display: flex; gap: 12px; } .swatch { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); } .swatch span { width: 30px; height: 30px; border-radius: 50%; } .swatch[data-v="melon"] span { background: hsl(84 45% 40%); } .swatch[data-v="sea"] span { background: hsl(187 52% 36%); } .swatch[data-v="plum"] span { background: hsl(310 34% 44%); } .swatch[data-v="clay"] span { background: hsl(22 58% 42%); } .swatch[aria-pressed="true"] { border-color: var(--ink); border-width: 3px; } .switch-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; } .switch-text { display: flex; flex-direction: column; gap: 2px; } .switch-label { font-size: 18px; font-weight: 700; } .switch-hint { color: var(--muted); font-size: 15px; } .switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--line); transition: background .2s; } .knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; } .switch-row[aria-checked="true"] .switch { background: var(--rind); } .switch-row[aria-checked="true"] .knob { transform: translateX(20px); } .logout { height: 54px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--bad); font-size: 17px; font-weight: 700; } .snack { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; z-index: 15; width: calc(100% - 32px); max-width: calc(var(--col) - 32px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px 10px 18px; transform: translateX(-50%); border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow); font-size: 17px; } .snack button { padding: 10px 14px; border: 0; background: none; color: var(--flesh); font-weight: 700; } /* Compact view: a denser layout for anyone who wants more on screen. Set per phone from the name menu. Checkboxes keep a 44px tap target; the aisle line under shopping items is dropped because the list is already in aisle order. */ .compact { --gutter: 16px; } .compact .app { padding-bottom: 150px; } .compact .top { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 6px; } .compact .brand svg { width: 24px; height: 24px; } .compact .brand b { font-size: 20px; } .compact .me { font-size: 14px; } .compact .panel h1 { margin: 4px 0 0; font-size: 24px; } .compact .sub { margin-bottom: 6px; font-size: 14px; } .compact .row { gap: 6px; padding-block: 6px; } .compact .check { width: 44px; height: 44px; margin: -9px 0 -9px -10px; } .compact .box { width: 22px; height: 22px; border-width: 2px; border-radius: 6px; } .compact .box svg { width: 14px; height: 14px; } .compact .text { padding-top: 0; } .compact .title { font-size: 16px; } .compact .meta { gap: 2px 8px; margin-top: 2px; font-size: 13px; } .compact .who { padding: 0 8px; font-size: 12px; } .compact #shop-list .meta { display: none; } .compact .empty { margin: 4px 0 10px; padding: 12px; font-size: 15px; } .compact .done-toggle { padding: 10px 0; font-size: 14px; } .compact .adder input, .compact .adder button { height: 44px; font-size: 16px; } .compact .usual-h { margin-top: 18px; font-size: 19px; } .compact .aisle { margin: 12px 0 6px; font-size: 11px; } .compact .chips { gap: 6px; } .compact .chip { min-height: 36px; padding: 0 12px 0 9px; font-size: 15px; } .compact .chip::before { font-size: 18px; } .compact .fab { bottom: calc(76px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 17px; } .compact .fab svg { width: 26px; height: 26px; } .compact .nav { padding: 4px 0 calc(6px + env(safe-area-inset-bottom)); } .compact .tab { gap: 2px; font-size: 12px; } .compact .tab .ico { width: 56px; height: 28px; } .compact .tab svg { width: 21px; height: 21px; } .compact .snack { bottom: calc(76px + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }