/* Sift design system. The single home for the shared shell. Rules here follow the installed emilkowalski skills (.agents/skills): apple-design (materials, depth, size-specific typography, reduced motion) and emil-design-eng / animate (curves, durations, press feedback). Every curve and duration below is taken from those tables, not invented. Previously this block was pasted byte-identical into index/profile/history. One file instead, so a change can't land on one page and miss another. */ /* Headline face. Self-hosted rather than ed: this file is already shared by all three pages, so one @font-face here beats a Google Fonts link repeated in three s, and it keeps a page opened on a shop's flaky signal from waiting on two cross-origin round trips (googleapis -> gstatic) before a headline paints. No user IP goes to a third party on a health app, either. Bricolage Grotesque, SIL OFL 1.1, latin variable subset (opsz 12-96, wght 400-700), taken from: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700 */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; /* Headlines swap in late rather than blocking; the fallback below is another grotesque, so the reflow is a weight shift, not a relayout. */ font-display: swap; src: url('/bricolage-grotesque.woff2') format('woff2'); } :root { /* Headings only. Body stays on the system stack. It is what the platform hints and renders best at small sizes, and this is a page people read one-handed under shop lighting. */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Bricolage Grotesque', var(--font-body); /* Brand palette. The skills prescribe no hues. These are Sift's, kept. */ --color-bg: #FAF7F2; /* The action colour, and only the action colour. It used to be #64778B, which is rgb(100 119 139) -- the exact triplet --color-hairline and --color-wash below still carry at 18% and 10%. So the button a reader has to find and the 1px rule around every card were one colour at three alphas, and the CTA could only isolate itself by being filled in, never by being a different colour from the furniture around it. These two values are the result card's --result-primary / --result-primary-dark, which were already deeper for a documented contrast reason; adopting them here converges the app on its own card rather than inventing a third blue. White on this clears 5.79:1, where #64778B held 4.61:1. If you change it, keep it off the hairline triplet: bench/palette-single-source.test.ts fails if it drifts back. */ --color-primary: #466986; --color-primary-dark: #294B68; --color-surface: #F4EEE3; --color-surface-alt: #FFFFFF; --color-ink: #2B333D; --color-ink-muted: #5A6470; --color-accent: #D9CEB8; --color-hairline: rgba(100, 119, 139, 0.18); /* The warm hairline on a white card. It was the bare hex #E3DACB on .action-card and matched no token, which is the kind of value that gets copied into the next card and then diverges from both. */ --color-hairline-warm: #E3DACB; /* The tint behind a "here is the situation" surface: the scan screen's hero card, the auth modal's header band. Same literal was pasted in both. */ --color-wash: rgba(100, 119, 139, 0.10); --color-safe: #4F7A63; --color-caution: #80621B; --color-may-contain: #8C5428; --color-contains: #8F4436; /* Ingredient notes (index.html, .verdict-pills.notes). Deliberately NOT a verdict colour and not --color-primary: this axis is neither a hazard nor a preference, it is information. A desaturated ink-grey, the same family as shared.js's ACCENT.additive, so the row reads as calm rather than as a fourth thing to worry about. */ --color-note: #6E6A78; /* Motion. Built-in CSS easings are too weak to read as intentional. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 140ms; /* button press feedback: 100-160ms */ --dur-fast: 180ms; /* hover, colour, small state changes */ --dur-panel: 240ms; /* modals, drawers */ /* Tracking is size-specific: large type reads too loose, small type too tight. One letter-spacing for everything is wrong somewhere. */ --track-display: -0.03em; --track-heading: -0.02em; --track-body: 0; /* Two rungs, and only two. --track-caps is the page-level label (0.75rem, 600); --track-caps-small is the in-card label one step down (0.6875rem, 700), which needs the extra tracking because caps get tighter as they get smaller, not because someone typed a different number. Eleven literals across two files used to say .06 / .08 / .085 / .09 at five sizes, which is drift, not a decision. */ --track-caps: 0.06em; --track-caps-small: 0.08em; /* --- spacing scale --- Padding, margin and gap were being picked per declaration: 0.15, 0.2, 0.25, 0.35, 0.375, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1, 1.1, 1.15, 1.25, 1.5rem all shipped, which is 22 values doing the work of about six. Two gaps one step apart are not a decision anyone made; they are two authors rounding differently, and the eye reads the result as a page that was never aligned. A near-doubling ladder in rem, so it scales with the reader's text size: 4, 8, 12, 16, 24, 32, 48, 64px at the default root. The step from 4 is +4 until 16 (where small increments are still legible) and doubling after (where they are not). Applied where a literal ALREADY equals a rung. Values that sit between rungs are left alone and listed in the engineering log rather than snapped: moving ~100 sites by 1-3px each is a redesign, not a refactor, and the off-scale values are the finding here, not the cleanup. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --r-sm: 8px; --r-md: 11px; --r-lg: 14px; /* The card shape. Was the bare literals `16px` and `0 1px 3px rgba(...)` pasted into .hero-card, .action-card, history's .today-count and profile's .account-row, which is four places that had to be edited in lockstep and three chances to miss one. Distinct from --r-lg (14px), which is the control radius; a card is a bigger box and takes a bigger corner. */ --r-card: 16px; /* --- icon tiers (seventh pass, item A) --- Every icon is a Lucide glyph on a 24 viewBox, so its rendered line is stroke-width x size / 24. Eleven different sizes put that line anywhere from 1.25px to 3.33px. Three tiers now, and nothing in between: sm 18px allergen, diet and ingredient marks, and anything drawn inside a chip (1.5px line) md 20px every interface icon: buttons, links, nav, dialogs (1.67px) lg 32px the one big mark on an empty state, wizard step or dialog head. Drawn at --icon-lg-stroke so its line lands at the md weight (1.25 x 32 / 24 = 1.67px) instead of 2.67px. */ --icon-sm: 18px; --icon-md: 20px; --icon-lg: 32px; --icon-lg-stroke: 1.25; /* --- elevation --- There used to be three tokens here (--shadow-card, --shadow-soft, --shadow-lift) whose blur radii were 3px, 2px and 3px. Three names, one shadow. Nothing on the page could be read as nearer or further than anything else, and the names actively misled: history's .scan-item sits at --shadow-card (3px blur) and its HOVER rule raised it to --shadow-soft (2px), so picking a row up made its shadow smaller. Three tiers now, and the distance between them is the whole point: 2px, 16px and 64px of blur. A reader should be able to tell them apart without comparing two elements side by side. rest a surface lying ON the page ground. Cards, tiles, the mascot tile, a pressed button. The default; most things are here. raised a surface the reader has lifted or selected: a hovered history row, the chosen capture segment. Only ever a RESPONSE to input, which is why nothing is born at this tier. overlay a surface floating over the page with a backdrop behind it: the auth modal, the image viewer, the ingredient sheet. --shadow-cta is deliberately NOT a fourth tier. It is brand-tinted (the action blue, not ink) and belongs to one component, the primary button; it says "this is the action", not "this is 4px above the page". Its tint is --color-primary's own rgb(70 105 134); it followed that token off the hairline triplet so the button's shadow stays the button's colour. */ --shadow-rest: 0 1px 2px rgba(43, 51, 61, 0.06); --shadow-raised: 0 2px 4px rgba(43, 51, 61, 0.07), 0 8px 16px rgba(43, 51, 61, 0.08); --shadow-overlay: 0 4px 12px rgba(43, 51, 61, 0.10), 0 24px 64px rgba(20, 25, 31, 0.28); --shadow-cta: 0 1px 2px rgba(43, 51, 61, 0.10), 0 2px 8px rgba(70, 105, 134, 0.24); } /* --- ambient wash --- One soft slate tint from the top of the VIEWPORT, so the page has a little depth instead of being a flat beige field. Static: a plain background paint, no animation, no blur, no second layer. Two things about where this lives are load-bearing, and both were what broke the previous two attempts: 1. It is on `html`, not on `.app-content`. On .app-content it was scoped to the 430px phone column and drawn as a 300px tile at the top of it, which is exactly the strip .hero-card and .action-card sit on. It was painting underneath opaque cards, so there was nothing left to see. 2. `body` no longer carries the page ground. A background on `html` stops body's own background propagating to the canvas, and body is `min-height: 100vh`, so an opaque `background: var(--color-bg)` on body covered this gradient across the whole viewport. That is also why result-reference.css's html-level wash never showed: the shell's body rule was painting over it from the other stylesheet. `background-attachment: fixed` anchors it to the viewport rather than to the document, which keeps it one cheap paint on a page that scrolls several screens instead of a document-tall layer that repaints on scroll. The ellipse is measured, not eyeballed. result-reference.css's version was drawn against a wide harness page; sampled down the left gutter of the 430px phone column it was gone by y=200, which is a smudge under the topbar rather than ambient light. This one holds about 12/255 of slate just below the topbar and reaches flat cream around 55% of the viewport height. For scale, the app's own --color-surface sits 6-15/255 off --color-bg, so the wash is one step of the existing palette, not a new visual weight. result-reference.css no longer declares its own: it loads this file, so it picks the wash up here, against its own --color-bg. One gradient in the codebase, and bench/ui-copy.test.ts holds it to exactly one. THE SEAM. The origin used to sit at y:-6%, above the viewport, and .topbar paints an opaque ground over the first ~56px below that. The reader never saw the peak: what was on screen was the gradient's flank, a near-uniform field starting at a hard step under the topbar's hairline, which reads as a dimmed overlay rather than as light. Two changes, no second gradient: the origin moves to the top of the viewport so the part that shows is the falloff rather than a flat flank, and the alpha comes down now that the brighter part of the ramp is actually visible. The topbar still has to paint an opaque ground (content scrolls under it at both breakpoints), so it now paints the wash's own value at that height instead of bare cream, and the step at the hairline closes. */ html { background: radial-gradient(120% 62% at 50% 0%, rgb(78 96 118 / 0.09), transparent 72%), var(--color-bg); background-repeat: no-repeat; background-attachment: fixed; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); /* Percentage, not px: the layout scales with the user's text-size setting. */ font-size: 100%; line-height: 1.55; letter-spacing: var(--track-body); color: var(--color-ink); -webkit-font-smoothing: antialiased; } /* `hidden` means not rendered, full stop. Without this any class that sets its own `display` silently outranks the attribute, which is how the whale states below, each `display: flex`, showed up on a page that had marked them hidden. A `display` rule beating `hidden` is always the bug, never the intent. */ [hidden] { display: none !important; } /* The phone column, and the mobile-first default. 430px is the iPhone Pro Max logical width: the widest layout the design is ever asked to hold. Full width below that, so nothing is letterboxed on a small phone. Two rules override this, both further down and both deliberate: the 768px block opens the column to 664px (the width .capture-note's 46ch measure and .product-confirmation's 32rem were tuned against), and index.html's own 1200px block puts a second column beside that same 664px primary rather than stretching it. The primary column therefore never exceeds 664px at any viewport -- the shell's old 920px single column is not coming back. */ .app-card { width: 100%; max-width: 430px; margin: 0 auto; } /* privacy.html and terms.html are documents, not app sections: they sit outside the tab shell and they are read, not operated. A phone-width column is right for a scan flow and wrong for pages of legal prose, and the bottom padding above clears a tab bar these two do not have. .policy keeps its own 70ch measure inside this, so the line length is unchanged; only the dead space either side of it goes. */ /* --doc-measure is the doc shell's ONE width. .policy reads it for the prose, and the full-bleed header and footer below compute their padding from the same value, which is what makes the wordmark sit on the same left edge as the sentence under it. They used to be two independent measures -- header padding derived from the 48rem card, prose from .policy's own 70ch centred inside it -- and the two edges stood 83px apart on every doc page. In rem, not ch: ch resolves against the font-size of the element reading it, and .topbar is 0.875rem, so one `70ch` computed 37px narrower in the header than in the prose and simply moved the drift to the other side. 37.5rem is the 70ch measure these pages were tuned at, in a unit that means the same thing in both places. */ .app-card.doc { max-width: 680px; --doc-measure: 37.5rem; } .doc .app-content { padding-bottom: var(--space-8); } /* The fixed tab bar's height, declared once and read by both the bar and the content padding that has to clear it. Two independent numbers is how the legal footer ends up parked under the tabs on a page that happens to end at the fold. 66px is the 49px tab plus the row's 4px padding, its border, and the label's descender. */ :root { --tabbar-h: 66px; } /* The desktop rail's width, declared once for the same reason --tabbar-h is: the rail is fixed and the page clears it with padding on , so two independent numbers is how the first column of every card ends up under the rail's border. 240px holds "History" beside an 18px glyph with the pill padding either side and still leaves a 1280px window 1040px of content. */ :root { --sidebar-w: 240px; } .app-content { padding: 0 var(--space-4) calc(var(--tabbar-h) + var(--space-5) + env(safe-area-inset-bottom, 0px)); } /* --- chrome --- */ .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-2); font-size: 0.875rem; color: var(--color-ink-muted); /* The bottom hairline sits outside the padding box, so equal padding leaves the nav pill 1px closer to the top edge than the bottom one. The row is short enough for that to read as a pill sitting high in its own header. */ padding: var(--space-3) var(--space-5) calc(var(--space-3) - 1px); /* Opaque, because content scrolls under this row at both breakpoints, but mixed to the wash's own value at this height rather than bare cream, so the page ground runs continuously through the header instead of stepping at the hairline. Same slate as the gradient above, at its strength near the top of the viewport. */ background: color-mix(in srgb, rgb(78 96 118) 8%, var(--color-bg)); border-bottom: 1px solid var(--color-hairline); } .brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; color: inherit; text-decoration: none; border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease-out); } /* The wordmark is a headline, not chrome text. It gets the display face. */ .brand strong { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: var(--track-heading); color: var(--color-ink); } .logo { height: 30px; width: 30px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; } /* Everything but the brand lives in one right-hand group so it wraps as a unit on narrow widths instead of leaving a single control (e.g. Sign out) stranded on its own row under the logo. */ .topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; justify-content: flex-end; min-width: 0; } /* --- the rail's account indicator --- An INDICATOR, not the account editor. The address and Sign out are the subject of Profile and stay there (bench/tab-bar.test.ts holds index and history to that); this says which account the app is currently answering as, which is the one thing a persistent nav should be able to tell you without a trip to another page. Not a link: the Profile tab three rows above it is already the way there, and a second control to the same place is a second thing to keep in step. display:none is the default and the 1024px block is the only thing that switches it on. On a phone the topbar is one line tall and the account has no slot in the bottom tab bar, so there is nowhere for this to go there. */ .sidebar-account { display: none; align-items: center; gap: var(--space-2); margin: 0; padding: 0 var(--space-2); min-width: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--color-ink-muted); } /* Blobatar. Fixed box for the same reason profile's .account-avatar gets one: the inlined svg has no intrinsic size to constrain itself by. */ .sidebar-account-avatar { display: block; flex-shrink: 0; width: 28px; height: 28px; } .sidebar-account-avatar svg { display: block; } /* The ring tells the two states apart before the words do (fifth pass E3): dashed and muted for a guest, a placeholder identity; solid brand for an account. Guest is the default because it is the true state until watchSession answers (renderSidebarAccount sets data-state). An outline, so it follows the round avatar without changing its 28px box. */ .sidebar-account-avatar { border-radius: 50%; outline: 1.5px dashed var(--color-ink-muted); outline-offset: 2px; } .sidebar-account[data-state="signed-in"] .sidebar-account-avatar { outline-style: solid; outline-color: var(--color-primary); } .sidebar-account-note { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--color-ink-muted); } .sidebar-account-text { min-width: 0; } .sidebar-account-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--track-caps-small); text-transform: uppercase; } /* An address is one unbroken token and the rail is 240px wide: without this it pushes its own overflow rather than wrapping, and the rail scrolls sideways. */ .sidebar-account-email { display: block; overflow-wrap: anywhere; color: var(--color-ink); } .topbar button { width: auto; padding: var(--space-2) var(--space-3); font-size: 0.85rem; font-family: inherit; margin: 0; background: transparent; color: var(--color-ink-muted); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); cursor: pointer; flex-shrink: 0; /* 44px, not 40. This is "Sign in" -- the control a first-time guest is most likely to reach for -- and the topbar is sticky at the top edge, the hardest strip of a one-handed phone grip to reach. It was the one place in the app under the 44px floor the tab bar (49px) and the capture button (46px) both clear. A