/* ========================================================================== Today's menu, and tomorrow's night prep. Requires css/design-tokens.css. Shown to a signed-in visitor in place of the marketing hero: the product is the day's menu, not a catalogue to browse. ========================================================================== */ /* Which version of the page applies is decided in before paint, so a signed-in visitor never sees the marketing hero flash first. chrome.js still sets .is-hidden afterwards; these two just get there sooner. */ .auth-in [data-auth="out"] { display: none !important; } .auth-out [data-auth="in"] { display: none !important; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .today { background: linear-gradient(180deg, var(--tile-green) 0%, var(--paper) 62%); padding: 44px 0 8px; } .today__inner { max-width: 860px; margin: 0 auto; padding: 0 20px; } .today__kicker { display: block; margin-bottom: 4px; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--turmeric-text); } .today__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.14; color: var(--ink); } /* The weekday and date, never the generation date — when a menu was written is an implementation detail and the cook thinks in today and tomorrow. */ .today__date { margin: 8px 0 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--cement-grey); } /* -------------------------------------------------------------------------- The four meals -------------------------------------------------------------------------- */ .menu-list { max-width: 860px; margin: 24px auto 0; padding: 0 20px; list-style: none; } .meal { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; border: 1px solid var(--divider); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .meal:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); } .meal__link { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px 14px 14px; text-decoration: none; } .meal__link:hover { text-decoration: none; } .meal__link:focus-visible { outline: 3px solid var(--turmeric); outline-offset: -3px; } .meal__thumb { width: 74px; height: 74px; flex-shrink: 0; border-radius: var(--r-md); background-color: var(--tile-green); /* Same 20% crop the browse cards use: these photos are shot wide and the dish ends up small and dark under a plain cover. */ background-size: 140% auto; background-position: center center; } .meal__text { min-width: 0; flex: 1 1 auto; } .meal__type { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turmeric-text); } .meal__name { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: var(--ink); } .meal__sub { display: block; margin-top: 3px; font-size: 0.86rem; color: var(--cement-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meal__time { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 0.82rem; font-weight: 700; color: var(--cement-grey); } /* -------------------------------------------------------------------------- Tonight's prep Turmeric, and only ever shown when there is genuinely something to start. Silence on a normal evening is what makes this mean something when it appears — so there is no empty state here by design. -------------------------------------------------------------------------- */ .prep { max-width: 860px; margin: 34px auto 0; padding: 0 20px; } .prep__card { padding: 20px 22px; border: 1px solid rgba(201, 138, 34, 0.35); border-left: 4px solid var(--turmeric); border-radius: var(--r-lg); background: var(--turmeric-bg); } .prep__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .prep__title { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; color: #6B4A0F; } .prep__lead { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: #6B4A0F; } .prep__list { margin: 0; padding: 0; list-style: none; } .prep__item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(201, 138, 34, 0.28); } .prep__for { flex-shrink: 0; min-width: 74px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turmeric-text); padding-top: 3px; } .prep__what { min-width: 0; } .prep__dish { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #5A3E0C; } .prep__note { display: block; margin-top: 2px; font-size: 0.9rem; line-height: 1.5; color: #6B4A0F; } .prep__dish a { color: inherit; text-decoration: none; } .prep__dish a:hover { text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- States -------------------------------------------------------------------------- */ .menu-state { max-width: 860px; margin: 24px auto 0; padding: 40px 20px; text-align: center; } .menu-state__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); } .menu-state__body { margin: 0 auto; max-width: 46ch; font-size: 0.95rem; line-height: 1.6; color: var(--cement-grey); } .menu-skeleton { height: 102px; margin-bottom: 12px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--tile-green) 25%, #eef3ef 37%, var(--tile-green) 63%); background-size: 400% 100%; animation: menu-shimmer 1.4s ease infinite; } @keyframes menu-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .menu-skeleton { animation: none; } .meal:hover { transform: none; } } .menu-foot { max-width: 860px; margin: 30px auto 0; padding: 0 20px 8px; } @media (max-width: 640px) { .today { padding: 30px 0 4px; } .today__inner, .menu-list, .prep, .menu-state, .menu-foot { padding-left: 16px; padding-right: 16px; } .meal__link { padding: 12px 14px 12px 12px; gap: 12px; } .meal__thumb { width: 60px; height: 60px; } .meal__sub { display: none; } .prep__item { flex-direction: column; gap: 2px; } .prep__for { padding-top: 0; } }