/* ═══════════════════════════════════════════════════════════════════════ menu.fressocafe.com The app's menu, read-only, on the web. Every size here is the size the app DRAWS at on a phone (its Dynamic Type pin turns a declared 17 into 19), so a row on this page and a row in the app are the same row: photo 112 × 140, name Hanken Medium 19, description Regular 15, header SemiBold 18, the item title New Spirit Regular 27. White ground, like the app. The cream belongs to the marketing pages and stays there. Loaded after site.css, which it leans on for the tokens (--ink, --ink-2, --text, --display, --ease, --gutter, --max, --section), .wrap, .brand, the footer and the reduced-motion rule. Everything else is this page's own. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'New Spirit'; src: url('../fonts/NewSpirit-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/HankenGrotesk-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Seramonde'; src: url('../fonts/Seramonde.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* The app's system colours, light appearance. */ --m-ink: #000; /* .primary */ --m-2: rgba(60, 60, 67, .6); /* .secondary */ --m-rule: rgba(60, 60, 67, .29); /* Divider */ --m-green: #265221; /* fressoGreen */ --m-red: #b3261f; /* errorRed */ --m-wash: rgba(38, 82, 33, .07); /* a selected segment's fill */ --m-line: rgba(142, 142, 147, .3); /* an option card's hairline */ --m-well: rgba(142, 142, 147, .12); /* a photo that has not arrived */ --burnt: #9c4524; --cinnamon: #8a4b2a; --seramonde: 'Seramonde', 'New Spirit', Georgia, serif; /* The sticky header's height (title row + pill bar); menu.js writes the measured value, and every section clears it. */ --head-h: 114px; color-scheme: light; } /* The sections carry their own clearance under the sticky bar (below). The marketing pages pad the scroll for their fixed header; this page has none. */ html { scroll-padding-top: 0; } .menu-page { background: #fff; } .menu-page main, .sheet { letter-spacing: 0; color: var(--m-ink); } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Two sentences, one device test: the inline script in marks an iPhone before first paint, so the right one is the only one ever drawn. */ html:not([data-device="iphone"]) .only-iphone { display: none; } [data-device="iphone"] .not-iphone { display: none; } /* The one price style: dollars, a trailing zero dropped, the "$" at 70% and raised ("$6", "$5.5", "$6.25"). */ .cur { font-size: .7em; vertical-align: .16em; margin-right: .05em; } /* ─── Header: the wordmark and the cafe's status ───────────────────────── */ /* The title row and the pill bar are ONE sticky block (owner, round 4): the menu's name, the cafe's status and the categories never leave the screen. */ .mh { position: -webkit-sticky; position: sticky; top: 0; z-index: 30; background: #fff; } .mh-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; } /* The app's menu title: "Fresso Cafe" in New Spirit REGULAR, black, at the owner's −30 tracking. The brand marks ride along in the markup (every page's header carries all three) and none of them is drawn here. */ .mh .brand { color: var(--m-ink); } .mh .brand .mk { display: none !important; } .mh-title { display: block; font: 400 25px/1 'New Spirit', var(--display); letter-spacing: -.03em; color: #000; white-space: nowrap; } .mh-status { min-height: 20px; margin: 0; font: 500 15px/20px var(--text); letter-spacing: 0; white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease); } .mh-status.is-open { color: var(--m-green); opacity: 1; } .mh-status.is-closed { color: var(--m-red); opacity: 1; } @media (min-width: 760px) { .mh-in { padding-block: 22px 16px; } .mh-title { font-size: 29px; } } /* The desktop strip, the loyalty dashboard's banner: ordering ahead is the app's. Phones have the Smart App Banner for this, so it is desktop only. */ .mstrip { display: none; } @media (min-width: 760px) { .mstrip { display: block; padding: 14px 20px; background: #e8f3e2; color: var(--m-green); text-align: center; } .mstrip p { margin: 0; font: 500 15px/1.4 var(--text); letter-spacing: 0; } .mstrip a { color: var(--m-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .mstrip a:hover { text-decoration: none; } .mstrip a:focus-visible { outline: 2px solid var(--m-green); outline-offset: 2px; } } /* ─── The category bar ─────────────────────────────────────────────────── */ .cats { min-height: 57px; background: #fff; border-bottom: 1px solid var(--m-rule); } .no-js .cats { display: none; } .cats[hidden] { display: none; } .cats-in { position: relative; display: flex; gap: 8px; max-width: var(--max); margin-inline: auto; padding: 10px 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cats-in::-webkit-scrollbar { display: none; } .pill { position: relative; flex: none; scroll-snap-align: start; padding: 8px 16px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 20px; background: #fff; color: var(--ink-2); font: 500 15px/18px var(--text); letter-spacing: 0; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } /* 36 of pill, 46 of thumb. */ .pill::after { content: ''; position: absolute; inset: -5px -4px; } .pill[aria-current="true"] { border-color: var(--m-green); background-color: var(--m-wash); color: var(--m-green); } .pill:focus-visible { outline: 2px solid var(--m-green); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .pill:not([aria-current="true"]):hover { color: var(--m-ink); border-color: rgba(0, 0, 0, .34); } } /* From the grid up the pills start on the sections' own left edge. */ @media (min-width: 620px) { .cats-in { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } } /* Desktop (owner, 09-25): left-aligned, a size up, more room under them. */ @media (min-width: 760px) { .cats { min-height: 68px; } .cats-in { padding-bottom: 16px; } .pill { font-size: 16px; line-height: 19px; padding: 10px 18px; border-radius: 22px; } .pill::after { inset: -2px -4px; } } /* ─── Sections ─────────────────────────────────────────────────────────── */ .menu-body { max-width: var(--max); margin-inline: auto; } .menu-body.is-loading { min-height: 100vh; min-height: 100svh; } .menu-empty { padding: 56px 20px 24px; text-align: center; font: 400 17px/1.5 var(--text); color: var(--m-2); } .cat { position: relative; scroll-margin-top: calc(var(--head-h) + 8px); } /* The app's Divider between sections: a hairline in from the left rail. */ .cat + .cat::before { content: ''; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--m-rule); } .cat-h { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin: 0; padding: 16px 20px; font: 600 18px/1.2 var(--text); color: var(--m-ink); } .cat.is-featured .cat-h { color: var(--m-green); } /* The release's own section: Seramonde 28 in cinnamon, set on the ordinary header's line so the row keeps its height, and nudged down the 2px it takes for its caps to sit on the same centre line as Hanken's. */ .cat.is-seasonal .cat-h-t { font-family: var(--seramonde); font-weight: 400; font-size: 28px; line-height: 21.6px; color: var(--cinnamon); -webkit-text-stroke: .3px var(--cinnamon); position: relative; top: 2px; } .cat-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #f5ece9; color: var(--cinnamon); font: 500 12.5px/1 var(--text); letter-spacing: -.025em; white-space: nowrap; position: relative; top: 2px; } .cat-badge.is-caps { font-size: 11.5px; } /* ─── Item rows: phones ────────────────────────────────────────────────── */ .items { padding-bottom: 8px; } .item { position: relative; display: flex; align-items: center; gap: 24px; padding: 8px 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .1s ease-out; } .item.is-off { cursor: default; } .item:focus-visible { outline: 2px solid var(--m-green); outline-offset: -2px; border-radius: 12px; } .item .ph { position: relative; flex: none; width: 112px; height: 140px; border-radius: 8px; overflow: hidden; background: var(--m-well); isolation: isolate; } .item .ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease), transform .5s var(--ease); } .item .ph img.is-in { opacity: 1; } .item.is-off .ph { opacity: .4; } .item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; max-height: 140px; overflow: hidden; } .item .hd { display: contents; } .item .nm { margin: 0; font: 500 19px/1.15 var(--text); color: var(--m-ink); transition: color .5s var(--ease); overflow-wrap: anywhere; } .item.is-off .nm { color: var(--m-2); } .item .st { margin: 0; font: 400 16px/1.2 var(--text); color: var(--m-2); } .item .st.is-red { color: var(--m-red); } .item .ds { margin: 0; font: 400 15px/1.2 var(--text); color: var(--m-2); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: var(--lines, 4); line-clamp: var(--lines, 4); } .item .ds.is-cut { display: none; } .item.is-off .ds { opacity: .5; } .item .pr { order: 3; margin: 0; font: 400 15px/1.2 var(--text); color: var(--ink); white-space: nowrap; } @media (hover: none) { .item:not(.is-off):active { opacity: .85; } } /* ─── Item cards: the grid ─────────────────────────────────────────────── */ @media (min-width: 620px) { .menu-body { padding-inline: var(--gutter); } .cat + .cat::before { left: 0; } .cat-h { padding: 16px 0; } .cat { padding-bottom: 44px; } .cat + .cat { padding-top: 12px; } .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding: 8px 0 0; } .item { display: block; padding: 0; border-radius: 12px; } .item:focus-visible { outline-offset: 6px; } .item .ph { width: auto; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; } .item .tx { max-height: none; overflow: visible; margin-top: 12px; gap: 4px; padding: 0 5px; } .item .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .item .nm { font-size: 21px; } .item .pr { order: 0; flex: none; font-size: 16px; } .item .st { font-size: 15px; } .item .ds { -webkit-line-clamp: 3; line-clamp: 3; } .item .ds.is-cut { display: -webkit-box; } } /* Desktop (owner, 09-25): more air round every card and larger headers, so the sections breathe at this width. Featured leads at 30. */ @media (min-width: 900px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 36px; } .item .tx { margin-top: 20px; } .cat-h { font-size: 24px; padding: 28px 0 20px; } .cat.is-featured .cat-h { font-size: 30px; } .cat.is-seasonal .cat-h-t { font-size: 37px; line-height: 28.8px; top: 3px; } } @media (min-width: 1180px) { .items { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 620px) and (hover: hover) and (pointer: fine) { .item:not(.is-off):hover .ph img { transform: scale(1.015); } .item:not(.is-off):hover .nm { color: var(--m-green); } } /* ─── The way to order ─────────────────────────────────────────────────── */ .order { padding: var(--section) 20px 48px; text-align: center; } .order p { max-width: 34ch; margin: 0 auto; font: 400 19px/1.5 var(--text); letter-spacing: 0; color: var(--ink); text-wrap: balance; } .order-btn { margin-top: 28px; width: 100%; max-width: 340px; } /* The app's PrimaryButton: its two greens, 8pt corners, Hanken Medium at the owner's −20 tracking. Pressed is a luminance step and a hair of scale. */ .pbtn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: 8px; background: linear-gradient(90deg, #26522e, #14331a); color: #fff; font: 500 18px/1.2 var(--text); letter-spacing: -.02em; text-align: center; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), filter .1s ease-out; } .pbtn:active { transform: scale(.985); filter: brightness(.95); } .pbtn:focus-visible { outline: 2px solid var(--m-green); outline-offset: 3px; } .pbtn-s { flex: none; padding: 12px 20px; font-size: 17px; } /* ─── The item sheet ───────────────────────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 100; } .sheet[hidden] { display: none; } .sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .42s var(--ease); } .sheet.is-open .sheet-scrim { opacity: 1; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; top: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; overflow: hidden; transform: translateY(100%); transition: transform .42s cubic-bezier(.22, .61, .2, 1); outline: none; } .sheet.is-open .sheet-panel { transform: none; } .sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sheet-scroll::-webkit-scrollbar { display: none; } .sheet-x { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e9e9e9; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; } .sheet-x:active { background: #dcdcdc; } .sheet-x::after { content: ''; position: absolute; inset: -4px; } .sheet-x svg { width: 14px; height: 14px; fill: none; stroke: #000; stroke-width: 1.5; stroke-linecap: round; } .sheet-x:focus-visible { outline: 2px solid var(--m-green); outline-offset: 2px; } .sheet-hero { height: 350px; background: var(--m-well); overflow: hidden; } .sheet-hero img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); } .sheet-hero img.is-in { opacity: 1; } .sheet-info { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 20px 24px; } .sheet-name { margin: 0; font: 400 27px/1.18 'New Spirit', var(--display); letter-spacing: -.3px; color: var(--m-ink); text-wrap: balance; } .sheet-sum { margin: 0; font: 400 18px/1.35 var(--text); color: var(--m-2); } .sheet-sum span { white-space: nowrap; } .sheet-sum[hidden], .sheet-dairy[hidden], .sheet-limit[hidden], .sheet-desc[hidden], .sheet-rule[hidden] { display: none; } .cz-pill { position: relative; align-self: flex-start; margin: 4px 0 3px; padding: 8px 16px; border: 1px solid var(--m-green); border-radius: 20px; color: var(--m-green); font: 400 17px/1.2 var(--text); -webkit-tap-highlight-color: transparent; transition: opacity .1s ease-out, background-color .25s var(--ease); } .cz-pill::after { content: ''; position: absolute; inset: -4px; } .cz-pill.is-fall { color: var(--burnt); border-color: var(--burnt); } /* Open, it reads as the app's selected segment: the same wash, same border. */ .cz-pill[aria-expanded="true"] { background-color: var(--m-wash); } .cz-pill.is-fall[aria-expanded="true"] { background-color: rgba(156, 69, 36, .08); } .cz-pill:active { opacity: .85; } .cz-pill[hidden] { display: none; } .cz { overflow: hidden; transition: height .35s var(--ease); } .cz[hidden] { display: none; } /* The app's stack runs at 8 and each run adds its own few points: pill → note 14, note → divider 14, pill → divider 19, divider → description 12, divider → limit line 13, limit line → description 9. */ .sheet-dairy { margin: 3px 0 0; font: 400 15px/1.35 var(--text); color: var(--m-2); } .sheet-rule { flex: none; height: 1px; background: var(--m-rule); margin-top: 8px; } .sheet-dairy:not([hidden]) + .sheet-rule { margin-top: 6px; } .sheet-limit { margin: 5px 0 0; font: 400 15px/1.35 var(--text); color: var(--burnt); } .sheet-desc { margin: 4px 0 0; font: 400 19px/1.35 var(--text); color: var(--m-2); } .sheet-limit:not([hidden]) + .sheet-desc { margin-top: 1px; } /* No description, no divider: the limit line keeps the slot under the pill. */ .sheet-rule[hidden] + .sheet-limit { margin-top: 3px; } .sheet-dairy:not([hidden]) + .sheet-rule[hidden] + .sheet-limit { margin-top: -4px; } /* The customize panel: every list the app's sheet has, open at once. */ .cz-in { padding: 0 0 10px; } .czl { padding: 16px 0 2px; } .czl + .czl { border-top: 1px solid rgba(60, 60, 67, .12); } .czl.is-ro { opacity: .4; } .czl[hidden] { display: none; } .czl-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .czl-name { margin: 0; font: 400 20px/1.25 var(--text); color: var(--m-ink); } .czl-val { margin: 0; font: 400 18px/1.3 var(--text); color: var(--m-2); text-align: right; } .czl-sub { margin: 3px 0 0; font: 300 14px/1.35 var(--text); color: var(--m-2); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; } .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: #fff; color: var(--m-ink); font: 400 16px/1.25 var(--text); text-align: left; -webkit-tap-highlight-color: transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease); } .chip::after { content: ''; position: absolute; inset: -3px -4px; } .chip[aria-pressed="true"] { border-color: var(--m-green); background-color: var(--m-wash); } .chip .ck { display: none; width: 12px; height: 12px; flex: none; fill: none; stroke: var(--m-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chip[aria-pressed="true"] .ck { display: block; } .chip .dp { font: 300 14px/1 var(--text); color: var(--m-2); white-space: nowrap; } .chip:disabled { opacity: .55; cursor: default; } .czl.is-ro .chip:disabled { opacity: 1; } .chip:focus-visible, .seg button:focus-visible, .sizes button:focus-visible { outline: 2px solid var(--m-green); outline-offset: 2px; } .portion { margin: -2px 0 14px; } .portion-name { margin: 0 0 8px; font: 300 14px/1.3 var(--text); color: var(--m-2); } .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; min-height: 44px; border: 1px solid var(--m-line); border-radius: 8px; color: var(--m-2); font: 500 16px/1.25 var(--text); -webkit-tap-highlight-color: transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .seg button[aria-pressed="true"] { border-color: var(--m-green); background-color: var(--m-wash); color: var(--m-ink); } .seg button:disabled { opacity: .4; cursor: default; } .seg svg { flex: none; fill: var(--m-green); } .sizes { display: flex; flex-wrap: wrap; } .sizes button { position: relative; padding: 6px 16px; border: 1px solid transparent; border-radius: 4px; color: var(--m-2); font: 400 14px/1.25 var(--text); } .sizes button::after { content: ''; position: absolute; inset: -8px 0; } .sizes button[aria-pressed="true"] { color: var(--m-ink); border-color: var(--m-ink); } .czl-size .czl-hd { align-items: center; } /* The footer: the live price, and how to order it. */ .sheet-foot { flex: none; padding: 15px 20px calc(24px + env(safe-area-inset-bottom)); background: #fff; box-shadow: inset 0 .5px 0 rgba(142, 142, 147, .2); } .foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; } .foot-row[hidden] { display: none; } .foot-price { margin: 0; font: 500 24px/1.1 var(--text); color: var(--m-ink); } .foot-note { margin: 10px 0 0; font: 400 14px/1.4 var(--text); color: var(--m-2); } .locked-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; padding: 16px; border-radius: 8px; background: rgba(156, 69, 36, .35); color: #fff; font: 500 18px/1.3 var(--text); letter-spacing: -.02em; text-align: center; -webkit-tap-highlight-color: transparent; } .locked-bar[hidden] { display: none; } .locked-bar .lock { width: 14px; height: 14px; flex: none; margin-right: .5em; fill: currentColor; } .locked-bar .lock-shackle { fill: none; stroke: currentColor; stroke-width: 1.7; } @media (min-width: 760px) { .sheet-panel { top: 50%; left: 50%; right: auto; bottom: auto; width: 560px; max-height: 90vh; max-height: 90dvh; border-radius: 22px; opacity: 0; transform: translate(-50%, -50%) scale(.98); transition: transform .3s var(--ease), opacity .3s var(--ease); } .sheet.is-open .sheet-panel { opacity: 1; transform: translate(-50%, -50%); } .sheet-scrim { transition-duration: .3s; } .sheet-foot { padding-bottom: 22px; } } /* ─── The release teaser (Fresso Fall) ─────────────────────────────────── */ /* Every distance is the app's 366-base number × k, written by menu.js, which measures the faces the way the app does: from the INK. */ .tz-slot { padding-top: 16px; padding-bottom: 20px; } .tz-slot[hidden] { display: none; } @media (min-width: 760px) { .tz-slot { padding-top: 24px; padding-bottom: 32px; } } .tz { --k: 1; position: relative; overflow: hidden; isolation: isolate; margin-inline: auto; border-radius: calc(23px * var(--k)); background: linear-gradient(180deg, #964222, #873a1d); color: #fff; opacity: 0; transition: opacity .3s var(--ease); -webkit-user-select: none; user-select: none; } @supports (corner-shape: squircle) { .tz { corner-shape: squircle; } } .tz.is-ready { opacity: 1; } .tz-leaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .tz-t { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; white-space: nowrap; pointer-events: none; } .tz-title { font-family: var(--seramonde); font-weight: 400; letter-spacing: -.005em; } .tz-count { font-family: var(--seramonde); font-weight: 400; letter-spacing: -.03em; } .tz-line { font-family: var(--display); font-weight: 300; letter-spacing: -.015em; /* The app's italic, which it builds from the upright face with a font matrix: an 8° shear and a 2.3% squeeze, about the baseline. */ transform: matrix(.977, 0, -.1405, 1, 0, 0); } .tz-pill { position: absolute; z-index: 2; border-radius: 999px; background: rgba(255, 255, 255, .47); -webkit-tap-highlight-color: transparent; transition: opacity .1s ease-out; } .tz-pill:active { opacity: .85; } .tz-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .tz-pl { position: absolute; left: 0; top: 0; transition: opacity .24s ease-in-out, filter .24s ease-in-out, transform .24s ease-in-out; } .tz-pl-t { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font-family: var(--seramonde); font-weight: 400; color: var(--burnt); } /* The refusal: the pill's word leaves (opacity, blur 4, scale .92) while "LOCKED!" arrives, overlapping by a third. The way back is a third slower. */ .tz-pl-a { transition-delay: .16s; } .tz-pl-b { opacity: 0; filter: blur(4px); transform: scale(.92); transition-delay: 0s; } .tz-pill.is-refused .tz-pl-a { opacity: 0; filter: blur(4px); transform: scale(.92); transition-duration: .18s; transition-delay: 0s; } .tz-pill.is-refused .tz-pl-b { opacity: 1; filter: blur(0); transform: none; transition-duration: .18s; transition-delay: .12s; } .tz-drink { position: absolute; z-index: 1; } .tz-drink[hidden] { display: none; } .tz-plate { position: absolute; inset: 0; overflow: hidden; background: rgba(255, 255, 255, .19); } .tz-tile { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; } .tz-tile-blur { position: absolute; inset: 0; } .tz-tile-img { position: absolute; inset: 0; overflow: hidden; } .tz-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .tz-scr { position: absolute; left: 0; top: 0; pointer-events: none; } /* ─── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet.is-open .sheet-panel { transform: none; } .sheet-panel { opacity: 0; } .sheet.is-open .sheet-panel { opacity: 1; } @media (min-width: 760px) { .sheet-panel, .sheet.is-open .sheet-panel { transform: translate(-50%, -50%); } } .item .ph img, .sheet-hero img { transition: none; } .item:not(.is-off):hover .ph img { transform: none; } }