/* household.css: the shared layer of the household apps (house, eat). Byte-identical in every app repo (api/static/household.css); each app's own style.css loads after it and may only build on these tokens. Decided 2026-09-21 with the icon spec as the model: this file is the tile and the stroke, the app's own file is the glyph. Nothing here names a person or a domain object. Rule for any new CSS: build it on the tokens, keep it in the app. Tokens: surfaces and text from the icon tile and cream; the pair (person A blue, person B peach, the lens for "both"); one radius scale; one stroke; one spacing unit; one nav height. --me is the signed-in person's colour, set on by the app from its own config. */ :root { /* surfaces and text (icon tile, icon cream) */ --bg: #0f1113; --bg-elev: #181b1f; --bg-elev-2: #22262b; --fg: #ece7dc; --fg-dim: #9a9b96; --fg-faint: #5c5e5b; --border: #2a2e33; /* the pair */ --a: #6ec1e4; --b: #e4a56e; --both: #f3efe6; --me: var(--a); --me-dim: color-mix(in srgb, var(--me) 55%, var(--bg)); /* state */ --ok: #7ccf8f; --warn: #e0a13a; --bad: #d9614f; /* shape and rhythm */ --unit: 4px; --radius: 14px; --radius-s: 12px; --radius-xs: 10px; --stroke: 2px; --pad: 16px; } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } b { font-weight: 700; } .is-dim { color: var(--fg-faint); font-size: 12px; } .is-warn { color: var(--warn); } /* ---- shell: header and main. No tab bar (Ethan, 2026-09-21): the header carries the whole nav. Three slots, same in both apps (2026-09-22): left (.app-left) the app — its home-screen icon and its name, a link to the first screen. On a screen below the top it is a back link instead (.app-back), which is the app's one back affordance: there is no second pattern, and no page draws its own. middle this screen's name, the loudest thing in the bar. right the person's name, a link to settings. Each app has effectively two top-level screens (itself and its settings), so back never has to stack more than one deep. ------------------------- */ .app-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px var(--pad); padding-top: max(10px, env(safe-area-inset-top)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .app-left { justify-self: start; min-width: 0; display: flex; align-items: center; } .app-brand, .app-back { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; font-size: 15px; color: var(--fg-dim); letter-spacing: 0; padding: 8px 10px 8px 0; margin: -8px 0; -webkit-user-select: none; user-select: none; } .app-brand span, .app-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-brand:active, .app-back:active { color: var(--fg); } /* The bare mark, not the home-screen tile: a dark rounded square inside a dark bar read as a smudge rather than a mark (Ethan, 2026-09-22). No radius, because there is no tile to round, and a touch larger since a glyph with no background reads smaller than one with. */ .app-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; } .app-back::before { content: "\2039"; font-size: 24px; line-height: 0.7; font-weight: 400; color: var(--me); flex-shrink: 0; margin-top: -2px; } .app-page { justify-self: center; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .app-who { justify-self: end; font-size: 14px; font-weight: 600; color: var(--c, var(--fg-dim)); display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 8px 12px; margin: -8px 0; -webkit-user-select: none; user-select: none; } .app-who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-dim)); flex-shrink: 0; } .app-who:active { opacity: 0.7; } .app-main { padding: 14px var(--pad) var(--pad); padding-bottom: calc(env(safe-area-inset-bottom) + var(--pad)); max-width: 720px; margin: 0 auto; } /* The app frame: the header is a fixed row, only the middle scrolls. Pinned to the viewport edges; no vh/dvh, which standalone iOS did not honour. The html lock is scoped to pages that carry the frame: on a page without body.app the document is the only scroller, and an html with overflow hidden scrolls only under two fingers on iOS (eat, 2026-09-21). */ html:has(> body.app) { height: 100%; overflow: hidden; } body.app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: flex; flex-direction: column; } body.app .app-header { position: static; flex: 0 0 auto; } body.app .app-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-width: none; margin: 0; padding: 14px var(--pad) calc(env(safe-area-inset-bottom) + 24px); } body.app .app-main > * { max-width: 720px; margin-left: auto; margin-right: auto; } body.app .install-banner { flex: 0 0 auto; } /* ---- page chrome --------------------------------------------------------- */ .page-header { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 14px; } .page-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .page-sub { color: var(--fg-dim); font-size: 13px; margin: -6px 0 18px; } .page-meta { color: var(--fg-dim); font-size: 13px; } .back-link { color: var(--fg-dim); font-size: 14px; display: inline-block; margin-bottom: 6px; } .section-label { color: var(--fg-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 20px 0 8px; } .settings-section { color: var(--fg-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 14px 0 6px; } .settings-section:first-child { margin-top: 4px; } .settings-hint { color: var(--fg-faint); font-size: 12px; margin: 6px 0 0; } .settings-footnote { color: var(--fg-faint); font-size: 12px; margin-top: 22px; } .banner { border-radius: var(--radius-xs); padding: 10px 14px; margin: 0 0 14px; font-size: 14px; font-weight: 600; } .banner--ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); } .banner--bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); } .banner-sub { display: block; font-weight: 400; color: var(--fg-dim); font-size: 12px; margin-top: 4px; } /* ---- buttons ------------------------------------------------------------- */ .btn { font-weight: 600; border: none; border-radius: var(--radius-s); padding: 12px 18px; cursor: pointer; transition: transform 0.06s ease, opacity 0.12s ease; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--me); color: var(--bg); } .btn-ghost { background: var(--bg-elev-2); color: var(--fg-dim); } .btn-block { display: block; width: 100%; } .btn-tall { padding: 16px 18px; font-size: 18px; } .btn-small { padding: 8px 14px; font-size: 13px; } .link-btn { background: none; border: none; padding: 6px 0; color: var(--fg-dim); font-size: 13px; cursor: pointer; } .link-btn:active { color: var(--fg); } .btn:focus-visible, .app-who:focus-visible, .app-brand:focus-visible, .app-back:focus-visible { outline: var(--stroke) solid var(--me-dim); outline-offset: 2px; } /* ---- chips --------------------------------------------------------------- */ .chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 100px; background: var(--bg-elev-2); color: var(--fg-dim); } .chip-btn { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--fg-dim); cursor: pointer; } .chip-btn.is-on { border-color: var(--me); color: var(--fg); } .chip-btn--danger { border-color: var(--bad); color: var(--bad); } /* ---- forms --------------------------------------------------------------- */ .field { display: block; margin-bottom: 12px; } .field-label { display: block; font-size: 13px; color: var(--fg-dim); margin-bottom: 6px; font-weight: 600; } .field-optional { color: var(--fg-faint); font-weight: 400; } .field-hint { color: var(--fg-faint); font-size: 12px; margin: 0; } .field-input { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--fg); font: inherit; padding: 11px 12px; } .field-input:focus { outline: none; border-color: var(--me); } .field-input::placeholder { color: var(--fg-faint); } textarea.field-input { resize: vertical; } select.field-input { appearance: none; -webkit-appearance: none; } .switch { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 100px; background: var(--bg-elev-2); position: relative; margin: 0; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg-dim); transition: transform 0.15s ease, background 0.15s ease; } .switch:checked { background: var(--me); } .switch:checked::after { transform: translateX(16px); background: var(--bg); } /* ---- empty state --------------------------------------------------------- */ .empty-state { text-align: center; padding: 36px 20px; background: var(--bg-elev); border-radius: var(--radius); margin-top: 12px; } .empty-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; } .empty-body { color: var(--fg-dim); font-size: 14px; margin: 0; } /* ---- disclosure: everything secondary behind one tap --------------------- */ .disclosure { margin: 14px 0 0; } .disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-elev); border-radius: var(--radius-s); font-weight: 600; color: var(--fg-dim); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary::after { content: "›"; color: var(--fg-faint); font-size: 18px; transition: transform 0.12s ease; } .disclosure[open] > summary::after { transform: rotate(90deg); } .disclosure[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* ---- settings and status ------------------------------------------------- */ .settings-conn { background: var(--bg-elev); border-radius: var(--radius); padding: 14px 16px; } .conn-row { display: flex; justify-content: space-between; align-items: center; } .conn-name { font-weight: 600; } .conn-status--ok { color: var(--ok); } .lab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .lab-item a { display: flex; flex-direction: column; gap: 3px; background: var(--bg-elev); border-radius: var(--radius-s); padding: 14px; font-weight: 600; } .lab-item a:active { background: var(--bg-elev-2); } .lab-note { font-size: 12px; color: var(--fg-faint); font-weight: 400; } .push-blurb { margin: 0 0 14px; color: var(--fg-dim); font-size: 13px; line-height: 1.45; } .push-status { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--fg-faint); } .push-status:empty { display: none; } .push-status--ok { color: var(--ok); } .push-status--warn { color: var(--warn); } .push-status--bad { color: var(--bad); } .history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } /* ---- spinner: the one busy mark. Sized from the text it sits beside. ----- */ .spinner { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } } /* ---- toast --------------------------------------------------------------- */ .toast { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px 14px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); animation: toast-in 0.16s ease-out; } .toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); } .toast-text b { color: var(--fg); font-weight: 600; } .toast .btn { padding: 8px 14px; font-size: 13px; } .toast.is-leaving { animation: toast-out 0.18s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* ---- install banner (only in a browser tab on iOS) ----------------------- */ .install-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px var(--pad) 0; padding: 12px 14px; border-radius: var(--radius-s); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--fg); font-size: 14px; } .install-banner .glyph { color: var(--ok); font-size: 16px; } .install-x { background: none; border: none; color: var(--fg-dim); font-size: 20px; line-height: 1; cursor: pointer; width: 40px; height: 40px; margin: -10px -12px -10px 0; display: flex; align-items: center; justify-content: center; } /* ---- locked -------------------------------------------------------------- */ body.locked { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .locked-main { text-align: center; padding: 24px; } .locked-title { font-size: 28px; margin: 0 0 10px; } .locked-line { font-size: 18px; margin: 0 0 6px; } .locked-sub { color: var(--fg-faint); font-size: 13px; margin: 0; } @media (min-width: 640px) { .app-main { padding: 24px; } body.app .app-main { padding: 20px 24px 28px; } .page-title { font-size: 32px; } }