/* ============================================================================ The Weight of Every Pound — ledger / grocery-receipt aesthetic Phase 1, Stage B: structure + styling only. No state-driven behaviour yet. ---------------------------------------------------------------------------- Design intent (BRIEF.md): paper off-white ground, near-black ink, ONE decisive red reserved strictly for cost / loss. Monospace for every figure; sans-serif prose; Fraunces for display. Depth comes from typographic contrast and a strong size hierarchy — never gradients, shadows or illustration. ============================================================================ */ :root { /* — Ledger palette — */ --paper: #F3F0E7; /* page ground (warm off-white "receipt" paper) */ --paper-2: #ECE8DD; /* slightly deeper paper for the sticky bar / wells */ --surface: #FFFFFF; /* elevated white surfaces (co-brand banner) */ --ink: #1A1714; /* near-black ink — body + figures */ --ink-soft: #6A6258; /* secondary / muted text, source lines */ --red: #C41E1E; /* THE red: cost, loss, deficit — and nothing else */ --crimson: var(--red); /* alias so shared chrome stays in one red family */ --aubergine: #2A2140; /* shared anchor (used in footer text mixes) */ --focus: #00B4E4; /* sky — focus rings only (interaction, never loss) */ /* — Rules & hairlines — */ --rule: var(--ink); /* stark ledger rules */ --hairline: color-mix(in srgb, var(--ink) 16%, transparent); /* — Type — */ --font-head: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* — Layout — */ --maxw: 820px; /* reading column; full-bleed grounds run edge to edge */ --maxw-wide: 1180px; /* chrome (banner) — room for the home pill + lockup */ --pad-x: clamp(1.25rem, 5vw, 2.5rem); } /* ------------------------------------------------------------------ Reset */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* survive explicit display rules (e.g. flex) */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } /* reserve gutter so the shock lock doesn't shift layout */ /* Shock scroll-lock: freeze the page until a choice is made. Lock on only — overflow:hidden on would re-root the sticky budget bar and drop it off-screen; we want the stakes visible while the reader decides. */ html.is-locked { overflow: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: clamp(1rem, .97rem + .2vw, 1.1rem); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; } /* The figures themselves — the ledger feel. */ .cost, .ledger-bar__figure, .ledger-bar__count, .option__cost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Red is loss. It carries cost only — so it lands every time it appears. */ .cost { color: var(--red); font-weight: 600; } /* --------------------------------------------------------- Skip & focus */ .skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 100; background: var(--ink); color: var(--surface); padding: .55rem .9rem; border-radius: 0; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: .75rem; } :where(a, button, textarea, input):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* ============================================================ CO-BRAND BANNER White surface floating above the paper; aubergine spine. Sits in normal flow at the very top and scrolls away (the ledger bar below is what stays stuck). Red is reserved for cost, so chrome hover/focus here use ink + sky, not red. */ .banner { position: relative; z-index: 50; background: var(--surface); box-shadow: 0 8px 24px -10px rgba(26,23,20,.20), 0 2px 6px -3px rgba(26,23,20,.10); } .banner__spine { height: 4px; background: var(--aubergine); } .banner__inner { position: relative; max-width: var(--maxw-wide); margin: 0 auto; padding: 1.1rem var(--pad-x); display: flex; align-items: center; justify-content: center; } .banner__home { position: absolute; left: clamp(1rem, 4vw, 2rem); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; font-size: .85rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; background: transparent; border: 1px solid var(--hairline); border-radius: 999px; transition: color .15s ease, border-color .15s ease; } .banner__home:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, var(--hairline)); } .banner__home-icon { width: 17px; height: 17px; flex: 0 0 auto; } .banner__lockup { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 2.6rem); } .brand { display: inline-flex; align-items: center; } .brand img { width: auto; transition: opacity .15s ease; } /* width:auto defeats the width="" hint */ .brand:hover img { opacity: .78; } .brand--axia img { height: 28px; } /* balance by optical weight, not raw height */ .brand--values img { height: 36px; } .brand-divider { width: 1px; height: 34px; background: var(--hairline); } /* ============================================================ STICKY LEDGER BAR Stays stuck at the top through the whole week. Solid ground, harsh bottom rule, monospace readouts. The four-dot indicator fills red as meals are skipped. */ .ledger-bar { position: sticky; top: 0; z-index: 40; background: #16130F; /* black bar — fixed, stays black in deficit */ border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); } .ledger-bar__inner { max-width: var(--maxw); margin: 0 auto; padding: .6rem var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ledger-bar p { display: inline-flex; align-items: baseline; gap: .5rem; margin: 0; } .ledger-bar__label { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 62%, #16130F); } .ledger-bar__figure { font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); font-weight: 700; color: var(--fig-color, var(--surface)); } .ledger-bar__count { font-size: 1.05rem; font-weight: 700; color: var(--surface); } /* Budget < 0: the figure turns red (still high-contrast on black). */ .ledger-bar__figure.is-deficit { --fig-color: var(--red); color: var(--red); } /* Deduction flash — the figure briefly reddens and lifts, then settles. */ @keyframes budgetFlash { 0% { transform: translateY(0); color: var(--red); } 22% { transform: translateY(-7px); color: var(--red); } 100% { transform: translateY(0); color: var(--fig-color, var(--surface)); } } .ledger-bar__figure.is-flash { animation: budgetFlash .6s ease both; } /* ---------------------------------------------------------- DEFICIT GROUND Crossing into deficit cools the whole palette to a desaturated grey and stays there. Only the neutrals shift — --red is left intact so loss still reads. Transitions on the surfaces that consume these tokens make it ease. */ body.is-deficit { --paper: #DEDEE2; --paper-2: #D2D2D7; --surface: #ECECEF; --ink: #15151B; --ink-soft: #5B5B63; --hairline: color-mix(in srgb, var(--ink) 18%, transparent); } body, .ledger-bar, .banner, .shock, .grocery { transition: background-color .9s ease, border-color .9s ease, color .9s ease; } /* ===================================================================== MAIN */ main { display: block; } /* shared inner wrapper width */ .hero__inner, .day__inner, .exit__inner { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } /* the weekday — the big heading for each day */ .day__name { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); letter-spacing: -0.02em; margin: 0; } /* --------------------------------------------------------------------- HERO */ .hero { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 7vw, 4.5rem); } .hero__inner { text-align: center; } /* centre the whole hero */ .hero__title { font-size: clamp(2.6rem, 1.4rem + 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; margin-inline: auto; } .hero__body { margin: clamp(1.6rem, 5vw, 2.4rem) auto 0; max-width: 52ch; display: grid; gap: 1rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.5; } /* The personal framing — the figure that sets the whole week. */ .hero__scenario { margin: clamp(2.2rem, 6vw, 3.4rem) auto 0; font-family: var(--font-head); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); line-height: 1.32; color: var(--ink); max-width: 26ch; } .hero__scenario .note-mark { font-size: .6em; vertical-align: super; } .hero__cta { margin: clamp(2rem, 6vw, 3.2rem) 0 0; font-family: var(--font-mono); font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: .6rem; } .hero__arrow { display: inline-block; font-size: 1.3rem; line-height: 1; animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .hero__footnote { margin: clamp(2.5rem, 7vw, 4rem) auto 0; max-width: 60ch; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); } .note-mark { color: var(--ink-soft); font-weight: 600; } /* ---------------------------------------------------------------- THE WEEK Each day is a ledger row: a stark top rule, the day, its theme, the expense line with the cost pushed to the right like a receipt column. */ .day { border-top: 2px solid var(--rule); padding: clamp(2.2rem, 6vw, 3.6rem) 0; } /* ---------------------------------------------------------- GROCERY RECEIPT Each day's spend, itemised. Rows fade in and deduct one at a time as they scroll into view; a bold Subtotal closes each day. The long column of rows is the point — it reads like a receipt and stretches the scroll between shocks. */ .grocery { list-style: none; margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; padding: 0; border-top: 2px solid var(--rule); } .grocery__item, .grocery__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; padding: .7rem .1rem; border-bottom: 1px dashed var(--hairline); /* receipt-style divider */ } .grocery__name { color: var(--ink); } .grocery__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); } .grocery__price.cost { color: var(--red); font-weight: 600; } /* Each item reveals as it enters view (the observer adds .is-in). */ .grocery__item { opacity: 0; transform: translateY(7px); transition: opacity .45s ease, transform .45s ease; } .grocery__item.is-in { opacity: 1; transform: none; } /* Subtotal — the bold tally that closes the day. */ .grocery__subtotal { margin-top: .2rem; padding-top: 1rem; border-top: 2px solid var(--rule); border-bottom: 0; font-weight: 700; font-size: 1.15rem; opacity: 0; transition: opacity .45s ease; } .grocery__subtotal.is-in { opacity: 1; } .grocery__subtotal .grocery__name { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: .9rem; align-self: center; } .grocery__subtotal .grocery__price { color: var(--ink); font-weight: 700; font-size: 1.25rem; } /* ---------------------------------------------------------- SHOCK GATE Mandatory decision gate: an uncommitted shock dims the page, locks scroll and pops up as a centred modal until A or B is chosen. The budget bar (z 40) stays lit above the dim (z 30) so the stakes remain visible; the modal sits at z 37. */ .dim-overlay { position: fixed; inset: 0; z-index: 30; background: #14120F; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; } body.is-gated .dim-overlay { opacity: .78; visibility: visible; pointer-events: auto; transition: opacity .45s ease; } /* Centred modal layer the shock card pops into while it holds the gate. */ .modal { position: fixed; inset: 0; z-index: 37; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem); pointer-events: none; visibility: hidden; } .modal.is-open { pointer-events: auto; visibility: visible; } .shock:focus { outline: none; } /* programmatic focus target, not a control */ /* Hidden in the flow until its sentinel triggers — so the pop-up is a surprise. After the choice it loses is-pending/is-modal and embeds visibly into the page. */ .shock.is-pending { display: none; } .shock-sentinel { height: 0; margin: 0; padding: 0; } /* --------------------------------------------------------------- SHOCK CARD The heart of the piece — let it breathe a touch wider than the body text, framed by a hard border so it reads as a decision gate. */ .shock { margin: clamp(1.8rem, 5vw, 2.6rem) 0 0; border: 2px solid var(--rule); background: var(--surface); padding: clamp(1.3rem, 4vw, 2rem); } /* While it holds the gate, the card is a centred pop-up that fits any screen. */ .shock.is-modal { margin: 0; width: min(620px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 22px 55px -22px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; } .modal.is-open .shock.is-modal { opacity: 1; transform: none; } .shock__tag { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0 0 .35rem; } .shock__title { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); margin: 0 0 .8rem; } .shock__scenario { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--ink); max-width: 60ch; } .shock__options { margin: clamp(1.2rem, 3vw, 1.6rem) 0 0; display: grid; gap: .7rem; } .option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .85rem 1rem; background: var(--paper); border: 1.5px solid var(--rule); transition: background .15s ease, color .15s ease; } .option:not(:disabled):hover { background: var(--ink); color: var(--surface); } .option:not(:disabled):hover .option__cost:not(.cost) { color: var(--surface); } /* Committed shock — chosen option locks dark; the other dims and recedes. */ .option:disabled { cursor: default; } .option.is-chosen { background: var(--ink); color: var(--surface); border-color: var(--ink); } .option.is-chosen .option__cost:not(.cost) { color: var(--surface); } .option.is-dismissed { opacity: .4; } .option__key { font-family: var(--font-mono); font-weight: 700; font-size: .95rem; width: 1.6em; height: 1.6em; display: inline-grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; } .option__label { font-size: 1rem; line-height: 1.4; } .option__cost { font-weight: 600; color: var(--ink-soft); white-space: nowrap; } /* Third option — skip one of your own meals to claw back £1.50. Secondary to the A/B choice, repeatable, and never resolves the gate. +£1.50 is a recovery, so it stays ink — red is reserved for loss. */ .shock__skip { margin: .9rem 0 0; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; padding: .7rem 1rem; text-align: left; background: transparent; border: 1.5px dashed var(--rule); color: var(--ink); font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s ease; } .shock__skip:not(:disabled):hover { background: var(--paper); } .shock__skip-amt { font-family: var(--font-mono); font-weight: 700; color: var(--ink); white-space: nowrap; } .shock__skip:disabled { cursor: default; opacity: .5; } /* ============================================================ EXIT / CLOSING */ .exit { border-top: 2px solid var(--rule); padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); } .exit__summary { margin: .4rem 0 0; max-width: 30ch; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.22; } .exit__summary .cost { white-space: nowrap; } /* keep −£X.XX on one line */ .receipt-divider { border: 0; border-top: 2px dashed var(--rule); margin: clamp(2rem, 5vw, 3rem) 0; } /* Closing message — centred. */ .exit__title { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); max-width: 16ch; margin-inline: auto; text-align: center; } .exit__body { margin: clamp(1.2rem, 3vw, 1.6rem) auto 0; max-width: 60ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height: 1.7; text-align: center; } /* --------------------------------------------------------------------- POLL */ .poll { margin: clamp(2.4rem, 6vw, 3.5rem) 0 0; text-align: center; border-top: 1px dashed var(--hairline); padding-top: clamp(1.6rem, 4vw, 2.2rem); } .poll__question { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); max-width: 24ch; margin-inline: auto; } .poll__options { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .poll__btn { min-width: 7rem; padding: .7rem 1.6rem; background: var(--paper); border: 2px solid var(--rule); font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; transition: background .15s ease, color .15s ease; } .poll__btn:hover { background: var(--ink); color: var(--surface); } .poll__reveal { margin: 1.4rem auto 0; max-width: 58ch; line-height: 1.65; color: var(--ink); text-align: center; } /* ---------------------------------------------------------------- COMMUNITY */ .community { margin: clamp(2.6rem, 7vw, 4rem) 0 0; text-align: center; border-top: 1px dashed var(--hairline); padding-top: clamp(1.8rem, 4vw, 2.4rem); } .community__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); } .community__prompt { margin: .9rem auto 0; max-width: 56ch; line-height: 1.65; } /* LinkedIn CTA — solid crimson pill with the inline icon (CLAUDE.md §6). */ .cta-linkedin { margin: 1.6rem 0 0; display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem; border-radius: 999px; background: var(--crimson); color: #fff; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 1rem; transition: background .15s ease; } .cta-linkedin:hover { background: color-mix(in srgb, var(--crimson) 84%, #000); } .cta-linkedin:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .cta-linkedin__icon { width: 20px; height: 20px; flex: 0 0 auto; } .community__hashtag { margin: 1.4rem 0 0; font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; color: var(--ink); } /* Source lines — small, muted, honest. */ .exit__sources { margin: clamp(2.6rem, 7vw, 4rem) 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--ink-soft); } /* ===================================================================== FOOTER Co-branded colophon on a deep near-black band, darker than anything above so it grounds the page. Reversed AxiaOrigin mark on dark; lightened divider. */ .footer { background: color-mix(in srgb, var(--ink) 82%, #000); color: var(--surface); border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); padding: clamp(3rem,8vw,5rem) var(--pad-x) clamp(2rem,5vw,3rem); } .footer__inner { max-width: var(--maxw); margin: 0 auto; } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(1.6rem,5vw,3rem) clamp(2rem,6vw,4rem); } .footer__message { flex: 1 1 420px; max-width: 640px; } .footer__lead { margin: 0; font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.2rem,1.02rem+.8vw,1.6rem); line-height: 1.35; color: var(--surface); } .footer__body { margin: clamp(.9rem,2vw,1.15rem) 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.7; color: color-mix(in srgb, var(--paper) 74%, var(--aubergine)); } .footer__body strong { color: var(--surface); font-weight: 600; } .footer__contact { flex: 0 0 auto; } .footer__contact-title { margin: 0 0 .75rem; font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 56%, var(--aubergine)); } .footer__contact-list { list-style: none; margin: 0; padding: 0; } .footer__contact-list li { margin: 0 0 .5rem; } .footer__contact-list li:last-child { margin-bottom: 0; } .footer__contact-list a { color: var(--surface); font-size: 1rem; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--paper) 26%, transparent); transition: color .15s ease, border-color .15s ease; } .footer__contact-list a:hover { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 60%, transparent); } .footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 1.75rem; margin-top: clamp(2.5rem,6vw,4rem); padding-top: clamp(1.5rem,4vw,2.25rem); border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); } .footer__lockup { display: inline-flex; align-items: center; gap: clamp(.9rem,3vw,1.5rem); } .footer__lockup .brand--axia img { height: 58px; } .footer__lockup .brand--values img { height: 38px; } .footer__lockup .brand-divider { height: 44px; background: color-mix(in srgb, var(--paper) 22%, transparent); } .footer__meta { margin: 0; font-size: .82rem; letter-spacing: .02em; color: color-mix(in srgb, var(--paper) 56%, var(--aubergine)); } /* ================================================================ RESPONSIVE */ @media (max-width: 768px) { .banner__inner { position: static; flex-direction: column; gap: .85rem; text-align: center; } .banner__home { position: static; transform: none; } .ledger-bar__inner { flex-direction: column; align-items: flex-start; gap: .35rem; } } @media (max-width: 600px) { .banner__lockup { gap: 1.2rem; } .brand--axia img { height: 22px; } .brand--values img { height: 28px; } .brand-divider { height: 26px; } .option { grid-template-columns: auto 1fr; } .option__cost { grid-column: 2; justify-self: end; } } /* ============================================================ DAY-BY-DAY NAV Days are hidden until activated by JS. Once shown they stay visible so the reader keeps their full history in view as they click forward. */ .day, .exit { display: none; } .day.is-active, .exit.is-active { display: block; } /* Reserve space below the sticky bar when scrolling to a new day. */ .day, .exit { scroll-margin-top: 56px; } /* ---------------------------------------------------------------- NEXT BUTTON Sits at the bottom of each day after all items and shocks are resolved. Stark filled bar — the one action that moves the experience forward. */ .day-next { display: inline-flex; align-items: center; gap: .65rem; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: .9rem 1.75rem; background: var(--ink); color: var(--surface); border: 2px solid var(--ink); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, color .15s ease; } .day-next:not(:disabled):hover { background: var(--surface); color: var(--ink); } .day-next:disabled { opacity: .3; cursor: default; } .day-next__arrow { font-size: 1.15em; line-height: 1; } /* ---------------------------------------------------------------- SKIP COUNT Badge that appears inside the skip button after the first click, showing how many meals this button has clawed back. */ .shock__skip-rhs { display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0; } .shock__skip-count { display: none; font-family: var(--font-mono); font-weight: 700; font-size: .78rem; min-width: 1.65em; height: 1.65em; background: var(--ink); color: var(--surface); border-radius: 50%; align-items: center; justify-content: center; } .shock__skip-count.is-visible { display: inline-flex; } /* ----------------------------------------------------- Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__arrow, .ledger-bar__figure.is-flash { animation: none !important; } *, *::before, *::after { transition-duration: .01ms !important; } /* Grocery rows stay visible (deductions still fire on scroll). */ .grocery__item, .grocery__subtotal { opacity: 1 !important; transform: none !important; } }