/* Value Introduction — the single first-launch screen. Centered corridor layout, one hero image, one headline, one CTA; mirrors .empty-state's "calm centered moment" pattern rather than inventing a new one. */ .page--onboarding-intro .page__content { padding-bottom: var(--space-main); } .onboarding-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding-top: var(--space-xl); text-align: center; } .onboarding-intro__hero { width: 100%; height: 32vh; min-height: 180px; border-radius: var(--radius-lg); background: var(--color-secondary-container); overflow: hidden; } .onboarding-intro__image { width: 100%; height: 100%; object-fit: cover; } .onboarding-intro__body { display: flex; flex-direction: column; gap: var(--space-sm); } .onboarding-intro__headline { font-size: var(--font-size-headline-lg-mobile); line-height: var(--line-height-headline-lg-mobile); font-weight: var(--font-weight-headline-lg); color: var(--color-primary); } .onboarding-intro__message { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-variant); } /* Quiet LunchMate brand signature above the headline. Deliberately not a header/nav bar — a small muted wordmark + top-view lunchbox glyph that gives brand recognition without competing with the "Today's Lunch" headline below it. Pinned to the physical top-left corner as a masthead (direction: ltr) in ALL locales: "LunchMate" is a Latin wordmark that reads left-to-right, so in the RTL (Hebrew) default it sits in the otherwise-empty left corner while the Hebrew headline holds the right — and glyph-before-word is the natural icon+wordmark lockup. In LTR this is unchanged (it was already left). Inline padding matches .app-header. */ .home-brand { display: flex; direction: ltr; align-items: center; gap: 7px; padding: var(--space-md) var(--space-main) 0; color: var(--color-text-variant); } /* Ambient background emblem — a large corner of the brand glyph, mostly bled off-screen via negative inset and cropped by `overflow: hidden`, sat behind everything via negative z-index. `.page--home` gets its own background + a positioned/z-indexed box so this stacks correctly (a negative z-index child would otherwise paint behind 's own background and vanish). Gray, not the brand accent — this is background texture, not a UI signal. */ .page--home { position: relative; z-index: 0; background: var(--color-bg); overflow: hidden; } .home-watermark { position: absolute; z-index: -1; /* Physical left, not inline-start — pinned to the same physical corner as the LunchMate wordmark (.home-brand also hardcodes physical left in all locales), so the watermark and the logo read as one masthead group. */ left: -110px; top: -100px; color: var(--color-border); opacity: 0.4; pointer-events: none; } .home-brand__glyph { flex-shrink: 0; /* Glyph line work reads a touch lighter than the wordmark so the mark stays quiet; the clay morsel inside keeps its full accent value. */ opacity: 0.85; } .home-brand__word { font-size: var(--font-size-caption); line-height: 1; font-weight: 600; letter-spacing: 0.02em; } /* Header on Home specifically runs tighter than other screens — reclaims vertical space so "Pack This Lunch" lands in the first viewport. The brand line above now supplies the top breathing room, so the header's own top padding shrinks to keep the added height minimal. Other screens keep the default .app-header padding untouched. */ .page--home .app-header { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .home-suggestion { display: flex; flex-direction: column; align-items: center; gap: 6px; } .home-suggestion__hero { position: relative; width: 100%; } /* "New since your last visit" nudge (src/utils/whatsNew.js) — fixed above the bottom nav (same 120px clearance as NAV_CLEARANCE_PX in home.js), tap opens Browse, auto-dismisses after 5s either way. Solid secondary fill (not the quiet secondary-container pill) so it reads as a transient notice, distinct from the always-there streak badge. */ .whats-new-toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: calc(100% - var(--space-lg) * 2); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); background: var(--color-secondary); color: var(--color-on-primary); font-size: var(--font-size-label-md); font-weight: 500; text-align: center; box-shadow: var(--shadow-md); z-index: 60; cursor: pointer; animation: whats-new-in var(--duration-slow) var(--easing-standard); } .whats-new-toast--out { animation: whats-new-out 200ms var(--easing-standard) forwards; } @keyframes whats-new-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes whats-new-out { to { opacity: 0; transform: translateX(-50%) translateY(8px); } } @media (prefers-reduced-motion: reduce) { .whats-new-toast, .whats-new-toast--out { animation: none; } } /* Streak reinforcement pill (see src/utils/streak.js) — same pill language as the decision banner (secondary-container), so it reads as part of the existing system, not a new visual element bolted on. */ .home-streak { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-md); border-radius: var(--radius-full); background: var(--color-secondary-container); color: var(--color-secondary); font-size: var(--font-size-label-md); font-weight: 500; } /* Save toggle — same bookmark metaphor as the Saved tab, floated over the hero so it stays out of the primary CTA's way. Logical inset so it sits correctly in both RTL and LTR without a mirrored override. */ .save-toggle { position: absolute; top: var(--space-md); inset-inline-end: var(--space-md); width: 44px; height: 44px; border-radius: var(--radius-full); border: none; background: rgba(255, 255, 255, 0.9); color: var(--color-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform var(--duration-fast) var(--easing-standard); } .save-toggle:active { transform: scale(0.94); } .save-toggle--active { color: var(--color-primary); } .home-suggestion__description { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-variant); text-align: center; } /* Actions: full-width stacked primary/secondary CTAs. Used for both the initial Pack/Show-Another pair and the post-decision Choose-another — the scroll-margin keeps whichever is showing clear of the fixed bottom nav when JS scrolls it into view for unusually tall content (e.g. longer localized strings wrapping onto an extra line). */ .home-suggestion__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); width: 100%; /* Matches NAV_CLEARANCE_PX in src/pages/home.js — bottom nav renders at 112px tall (44px touch target + label + padding); small buffer added. */ scroll-margin-bottom: 120px; } /* Only the primary CTA claims the full width. The secondary hugs its label so that, now that it carries a visible outline, it stays the lighter of the two instead of reading as a second full-width button competing with the decision. */ .home-suggestion__actions .btn--primary { width: 100%; } /* Fresh-reveal entrance — plays on first load and every "Show/Choose another" swap (a new element is mounted each time). Direction-agnostic (vertical only) so it reads correctly in both RTL and LTR. */ .home-suggestion--enter { animation: suggestion-in var(--duration-base) var(--easing-standard); } .home-suggestion--enter .card--hero .card__image { animation: hero-reveal var(--duration-slow) var(--easing-standard); } @keyframes suggestion-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-reveal { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .home-suggestion--enter, .home-suggestion--enter .card--hero .card__image { animation: none; } } .home-suggestion__decided { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; } /* The signature moment: "Pack This Today" resolves into this confirmation in place — same spot the parent just tapped, no scroll required to see it. Lightweight inline card, no modal; persists across refresh/return on the same day. */ .decision-banner { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-secondary-container); animation: decision-banner-in var(--duration-slow) var(--easing-standard); } .decision-banner__check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: 16px; font-weight: 700; animation: decision-check-pop var(--duration-slow) var(--easing-standard) 80ms both; } .decision-banner__text { display: flex; flex-direction: column; gap: 2px; text-align: start; } .decision-banner__title { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: var(--font-weight-label-md); color: var(--color-secondary); } .decision-banner__subtitle { font-size: var(--font-size-label-md); line-height: var(--line-height-label-md); color: var(--color-text-variant); } @keyframes decision-banner-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes decision-check-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .decision-banner, .decision-banner__check { animation: none; } } /* Browse — the full catalog as a scannable list: small thumbnail + name, not the large hero cards used on Home/Saved, so many ideas fit on screen at once. */ .page--browse .page__content { padding-bottom: 112px; /* clears fixed bottom nav (112px), same as Home/Saved/Profile */ } .browse { display: flex; flex-direction: column; gap: var(--space-md); } .browse-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } /* Small muted count pill — not the standard tappable `.badge` (44px touch target, meant for interactive chips), this is display-only so it stays genuinely small. */ .browse-count { padding: 2px var(--space-sm); border-radius: var(--radius-full); background: var(--color-secondary-container); color: var(--color-secondary); font-size: var(--font-size-caption); line-height: var(--line-height-caption); } /* Plain native