/* The two flagship website templates (1.25): Italian & Pizza (.t-pizzeria) and Smash Burger (.t-burger), drawn by shop-flagship.js. Loaded after shop.css and shop-templates.css; every rule is scoped to a flagship website page (.site-body / .shop.t-site) or, for the order page, to .site-body set by status.js, so the other five templates and the Classic page look exactly as before. The system (proposals, see docs/DESIGN_SYSTEM.md "Flagship templates"): - an 8 px rhythm (--s1 8px … --s8 128px), a small type scale with one display size per template, tabular figures for every price, 44 px touch targets, words never straight on a photo without a scrim; - Italian: paper cream, espresso ink, the takeaway's colour as the one accent, Caladea for display at its regular weight, small spaced capitals for labels, hairline rules, a printed-menu list with dotted leaders; - Smash Burger: charcoal, off-white, the takeaway's colour loud and flat, Inter Display Black in capitals, big photo cards, stickers for prices, a band of facts that slides as you scroll; - motion that is quick and never in the way: banner drift, sections rising 14 px into view, the header tightening, the menu bar's marker gliding, the basket bumping; none of it with reduced motion. */ /* ===================================================================================================== TOKENS ===================================================================================================== */ .site-body { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --fs-head-h: 64px; --fs-head-min: 56px; --fs-sec: 72px; --fs-max: 1280px; --fs-gutter: 20px; --fs-hw: var(--t-weight); /* display weight */ --fs-ease: cubic-bezier(.2, .7, .2, 1); --fs-deep: #1d1814; --fs-on-deep: #f5efe6; --fs-on-deep-muted: rgba(245, 239, 230, .68); --fs-scrim: linear-gradient(180deg, rgba(10, 8, 6, .55) 0%, rgba(10, 8, 6, 0) 26%, rgba(10, 8, 6, .12) 50%, rgba(10, 8, 6, .82) 100%); --fs-label: 600 .75rem/1.3 var(--t-body); --fs-accent: var(--brand-text, var(--brand)); } @media (min-width: 900px) { .site-body { --fs-head-h: 80px; --fs-head-min: 64px; --fs-sec: 112px; --fs-gutter: 40px; } } /* Italian & Pizza: paper, espresso ink and one warm accent. */ .site-body[data-template="pizzeria"] { --bg: #f6f1e8; --card: #fcf9f4; --soft: #ede5d8; --line: #ddd2c1; --ink: #211b16; --muted: #6b5f53; --fs-deep: #211b16; } .site-body[data-template="pizzeria"][data-theme="light"] { --bg: #ffffff; --card: #ffffff; --soft: #f4f0ea; --line: #e6dfd4; } .site-body[data-template="pizzeria"][data-theme="dark"] { --bg: #16120f; --card: #201a15; --soft: #2a231d; --line: #3a3029; --ink: #f4ede3; --muted: #b8ab9c; --fs-deep: #0d0b09; } .site-body[data-template="pizzeria"][data-font="serif"], .site-body[data-template="pizzeria"][data-font="editorial"] { --fs-hw: 400; } /* Smash Burger: charcoal and off-white, the takeaway's colour flat and loud. */ .site-body[data-template="burger"] { --bg: #0f0f0f; --card: #191919; --soft: #232323; --line: #2e2e2e; --ink: #f6f2ea; --muted: #aaa49b; --fs-deep: #050505; --fs-on-deep: #f6f2ea; --fs-on-deep-muted: rgba(246, 242, 234, .62); } .site-body[data-template="burger"]:is([data-theme="light"], [data-theme="warm"]) { --bg: #f6f3ee; --card: #ffffff; --soft: #ebe6de; --line: #dad3c8; --ink: #121212; --muted: #5c574f; --fs-deep: #121212; } .site-body[data-template="burger"][data-theme="warm"] { --bg: #f5eee2; --soft: #ebe1d1; } .site-body { background: var(--bg); color: var(--ink); overflow-x: clip; } /* Links take their colour from where they sit (the classic page colours every link in the takeaway's colour). */ .site-body[data-theme] a:not(.btn) { color: inherit; } .site-body[data-theme] :is(.sheet, .allergy-note) a:not(.btn) { color: var(--fs-accent); } .site-body .demo-ribbon a { color: #fff; } .site-body .toast, .site-body .toast.ok, .site-body .toast.bad { width: max-content; max-width: calc(100vw - 32px); text-align: center; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 999px; padding: 12px 20px; background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); } .site-body .toast.bad { background: #b3261e; color: #fff; } @media (min-width: 1024px) { .site-body .toast { bottom: 28px; } } .shop.t-site { background: var(--bg); } .shop.t-site .wrap { max-width: var(--fs-max); padding-left: var(--fs-gutter); padding-right: var(--fs-gutter); } .shop.t-site .fs-ico { width: 20px; height: 20px; flex: none; fill: currentColor; } .shop.t-site .fs-kicker { margin: 0 0 var(--s2); font: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--fs-accent); } .site-body .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .shop.t-site :is(h1, h2, h3) { overflow-wrap: anywhere; } .shop.t-site :is(.fs-hero h1, .fs-pagehead h1, .fs-sec-head h2, .fs-story h2, .fs-promo h2, .fs-cathead h2, .fs-foot-name, .fs-about-facts h2, .fs-find-card h2) { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); color: inherit; } .site-body[data-template="burger"] .shop.t-site :is(.fs-hero h1, .fs-pagehead h1, .fs-sec-head h2, .fs-story h2, .fs-promo h2, .fs-cathead h2, .fs-foot-name) { line-height: .88; } .shop.t-site .mi-price, .site-body .bl-price, .site-body .totals, .site-body .opt-price, .site-body .sum-line, .site-body .fs-basket-total, .site-body #view-basket { font-variant-numeric: tabular-nums; } /* Buttons: one primary (the takeaway's colour), one quiet secondary; 48 px tall, the builder's corner choice. */ .shop.t-site .btn.big, .site-body .sheet .btn.big { min-height: 52px; padding: 0 var(--s3); border-radius: var(--t-btn-r); font-weight: 650; letter-spacing: .01em; } .shop.t-site .fs-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--brand); color: var(--brand-ink); border: 0; text-decoration: none; transition: transform .18s var(--fs-ease), box-shadow .18s ease, background-color .18s ease; } .shop.t-site .fs-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent); } .shop.t-site .fs-cta:active { transform: translateY(0) scale(.98); } .shop.t-site .fs-cta .fs-ico { width: 18px; height: 18px; transition: transform .2s var(--fs-ease); } .shop.t-site .fs-cta:hover .fs-ico:last-child { transform: translateX(3px); } .site-body[data-template="burger"] .shop.t-site .fs-cta { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; } .site-body[data-template="burger"] .sheet .btn.big { letter-spacing: .01em; font-weight: 800; } /* the engine's own buttons keep their words as written */ .shop.t-site .fs-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 650; text-decoration: none; border-bottom: 0; } .shop.t-site .fs-more .fs-ico { width: 18px; height: 18px; transition: transform .2s var(--fs-ease); } .shop.t-site .fs-more:hover .fs-ico { transform: translateX(4px); } .shop.t-site .fs-more:hover { color: var(--fs-accent); } .site-body[data-template="burger"] .shop.t-site .fs-more { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 800; } /* The open/closed line and the delivery/collection switch, wherever they sit. */ .shop.t-site .fs-status { margin: 0; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } .shop.t-site .fs-status .dot, .shop.t-site .fs-now .dot, .site-body .fs-drawer-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e57; box-shadow: 0 0 0 0 rgba(47, 158, 87, .5); } .shop.t-site .fs-status.bad .dot, .shop.t-site .fs-now.bad .dot, .site-body .fs-drawer-status.bad .dot { background: #c2410c; box-shadow: none; } .shop.t-site .fs-toggle { background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 4px; } .shop.t-site .fs-toggle button { min-height: 44px; padding: 0 var(--s3); font-weight: 650; transition: background-color .2s ease, color .2s ease; } .shop.t-site .fs-toggle button.on { background: var(--ink); color: var(--bg); } .shop.t-site .fs-facts { margin: 0; font-size: .93rem; color: var(--muted); } .shop.t-site .fs-facts .fact b { color: var(--ink); } /* ===================================================================================================== HEADER: one bar on every page; over the banner photo on the home page until the page scrolls ===================================================================================================== */ .shop.t-site .fs-head { position: sticky; top: 0; z-index: 70; height: var(--fs-head-h); pointer-events: none; color: var(--ink); } .shop.t-site .fs-head::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--fs-head-h); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); transition: height .35s var(--fs-ease), background-color .35s ease, box-shadow .35s ease; } .shop.t-site .fs-head.is-scrolled::before { height: var(--fs-head-min); } .shop.t-site .fs-head-in { position: relative; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); height: var(--fs-head-h); transition: height .35s var(--fs-ease); } .shop.t-site .fs-head.is-scrolled .fs-head-in { height: var(--fs-head-min); } .shop.t-site .fs-head.is-over:not(.is-scrolled) { color: #fff; } .shop.t-site .fs-head.is-over:not(.is-scrolled)::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .shop.t-site .fs-head.is-over:not(.is-scrolled) :focus-visible { outline-color: #fff; } .shop.t-site .fs-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; } .shop.t-site .fs-brand .fs-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; transition: transform .35s var(--fs-ease); } .shop.t-site .fs-head.is-scrolled .fs-logo { transform: scale(.88); } .shop.t-site .fs-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: 1.3rem; line-height: 1.1; } .shop.t-site .fs-nav { display: none; } .shop.t-site .fs-nav-a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: inherit; text-decoration: none; font-weight: 550; font-size: .95rem; } .shop.t-site .fs-nav-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--fs-ease); } .shop.t-site .fs-nav-a:hover::after, .shop.t-site .fs-nav-a[aria-current="page"]::after { transform: scaleX(1); } .shop.t-site .fs-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .shop.t-site .fs-hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: var(--t-btn-r); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .shop.t-site .fs-hbtn:hover { background: color-mix(in srgb, currentColor 9%, transparent); } .site-body .shop.t-site a.fs-hbtn { color: inherit; } .shop.t-site .fs-book { display: none; } .shop.t-site .fs-call span { display: none; } /* The account button keeps its words for screen readers ("Sign in" / "Your account"); on a phone it shows as a person. */ .shop.t-site .fs-account { position: relative; } @media (max-width: 759px) { .shop.t-site .fs-account { font-size: 0; padding: 0; width: 44px; } .shop.t-site .fs-account::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: radial-gradient(circle at 50% 30%, #000 0 4.4px, transparent 4.9px), radial-gradient(ellipse 8.2px 6px at 50% 100%, #000 0 99%, transparent 100%); mask: radial-gradient(circle at 50% 30%, #000 0 4.4px, transparent 4.9px), radial-gradient(ellipse 8.2px 6px at 50% 100%, #000 0 99%, transparent 100%); } } .shop.t-site .fs-basket { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--t-btn-r); background: var(--ink); color: var(--bg); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .2s var(--fs-ease), background-color .2s ease; } .site-body[data-template="pizzeria"] .shop.t-site .fs-head.is-over:not(.is-scrolled) .fs-basket { background: #fff; color: #141414; } .shop.t-site .fs-basket-word, .shop.t-site .fs-basket-total { display: none; } .shop.t-site .fs-basket-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .78rem; line-height: 1; } .shop.t-site .fs-basket-count.is-empty { display: none; } .shop.t-site .fs-menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--t-btn-r); background: transparent; color: inherit; cursor: pointer; } .shop.t-site .fs-menu-btn .fs-ico { width: 24px; height: 24px; } @media (min-width: 760px) { .shop.t-site .fs-basket-word { display: inline; } } /* Phones: the basket is an icon with its count on the corner, so a long name keeps its room. */ @media (max-width: 759px) { .shop.t-site .fs-basket { width: 48px; padding: 0; justify-content: center; } .shop.t-site .fs-basket-count { position: absolute; top: -5px; right: -5px; box-shadow: 0 0 0 2px var(--bg); } .shop.t-site .fs-head.is-over:not(.is-scrolled) .fs-basket-count { box-shadow: none; } .site-body[data-template="burger"] .shop.t-site .fs-word { font-size: clamp(1rem, 5vw, 1.35rem); } } @media (min-width: 1024px) { .shop.t-site .fs-call span { display: inline; } } @media (max-width: 759px) { .shop.t-site .fs-account, .shop.t-site .fs-call { border-color: transparent; } } @media (max-width: 380px) { .site-body[data-template="burger"] .shop.t-site .fs-word { font-size: 1.1rem; } .shop.t-site .fs-head-in { gap: 8px; } } @media (min-width: 1024px) { .shop.t-site .fs-menu-btn { display: none; } .shop.t-site .fs-nav { display: flex; align-items: center; gap: var(--s4); } .shop.t-site .fs-book { display: inline-flex; } .shop.t-site .fs-basket-total:not(:empty) { display: inline; padding-left: 8px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); } } /* Italian: the menu button on the left and the name in the middle on a phone; on a computer the page links on the left, the name centred, the actions on the right, like the head of a printed menu. */ .site-body[data-template="pizzeria"] .shop.t-site .fs-head-in { grid-template-columns: 1fr auto 1fr; } .site-body[data-template="pizzeria"] .shop.t-site .fs-brand { justify-self: center; } .site-body[data-template="pizzeria"] .shop.t-site .fs-word { font-size: 1.45rem; } @media (max-width: 380px) { .site-body[data-template="pizzeria"] .shop.t-site .fs-word { font-size: 1.15rem; } .shop.t-site .fs-acts { gap: 2px; } .shop.t-site .fs-call { display: none; } } @media (min-width: 1024px) { .site-body[data-template="pizzeria"] .shop.t-site .fs-nav { justify-self: start; } .site-body[data-template="pizzeria"] .shop.t-site .fs-word { font-size: 1.75rem; } .site-body[data-template="pizzeria"] .shop.t-site .fs-nav-a[href]:first-child { display: none; } /* the name is the home link */ } /* Burger: name left, links in the middle, actions right; loud basket. */ .site-body[data-template="burger"] .shop.t-site .fs-head-in { grid-template-columns: minmax(0, 1fr) auto auto; } .site-body[data-template="burger"] .shop.t-site .fs-word { font-size: 1.35rem; letter-spacing: -.01em; } .site-body[data-template="burger"] .shop.t-site .fs-nav-a { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 800; } .site-body[data-template="burger"] .shop.t-site .fs-hbtn:not(.fs-account, .fs-book) { text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 800; } .site-body[data-template="burger"] .shop.t-site :is(.fs-account, .fs-book) { font-weight: 700; } .site-body[data-template="burger"] .shop.t-site .fs-basket { background: var(--brand); color: var(--brand-ink); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 800; } .site-body[data-template="burger"] .shop.t-site .fs-basket-count { background: var(--brand-ink); color: var(--brand); } @media (min-width: 1024px) { .site-body[data-template="burger"] .shop.t-site .fs-nav { justify-self: center; } .site-body[data-template="burger"] .shop.t-site .fs-word { font-size: 1.6rem; } } .site-body .shop.t-site .fs-basket.bump { animation: fs-bump .55s cubic-bezier(.3, 1.6, .5, 1); } .site-body .shop.t-site .fs-basket.bump .fs-basket-count { animation: fs-count .55s ease; } .site-body .shop.t-site .fs-basket.flash { animation: fs-flash .7s ease; } /* The phone's full-screen menu */ .site-body .fs-drawer { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); opacity: 0; transform: translateY(-12px); transition: opacity .28s ease, transform .28s var(--fs-ease); overflow-y: auto; } .site-body .fs-drawer.is-open { opacity: 1; transform: none; } .site-body .fs-drawer[hidden] { display: none; } .site-body .fs-drawer > .wrap { width: 100%; box-sizing: border-box; } /* full width in the column (auto margins would shrink it) */ .site-body .fs-drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--fs-head-h); border-bottom: 1px solid var(--line); } .site-body .fs-drawer-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); cursor: pointer; } .site-body .fs-drawer-close .fs-ico { width: 22px; height: 22px; fill: currentColor; } .site-body .fs-drawer-nav { display: flex; flex-direction: column; padding-top: var(--s4); padding-bottom: var(--s3); } .site-body .fs-drawer-nav a { display: flex; align-items: center; min-height: 64px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--fs-ease), color .2s ease; transition-delay: calc(var(--i, 0) * 50ms + 60ms); } .site-body .fs-drawer.is-open .fs-drawer-nav a { opacity: 1; transform: none; } .site-body .fs-drawer-nav a[aria-current="page"] { color: var(--fs-accent); } .site-body .fs-drawer-foot { display: grid; gap: var(--s2); padding-bottom: var(--s5); margin-top: auto; } .site-body .fs-drawer-foot .btn { width: 100%; } .site-body .fs-drawer-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; } .site-body .fs-drawer-call { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; } .site-body .fs-drawer-call .fs-ico { width: 18px; height: 18px; fill: currentColor; } .site-body .fs-drawer-where { margin: 0; color: var(--muted); } .site-body .fs-drawer .fs-word { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); font-size: 1.3rem; } @media (min-width: 1024px) { .site-body .fs-drawer { display: none !important; } } /* ===================================================================================================== HOME: the banner ===================================================================================================== */ .shop.t-site .fs-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; color: var(--ink); } .shop.t-site .fs-hero.has-photo { min-height: max(560px, min(92svh, 900px)); margin-top: calc(var(--fs-head-h) * -1); color: #fff; background: #1a1512; } .shop.t-site .fs-hero.has-photo.size-medium { min-height: max(460px, min(66svh, 640px)); } .shop.t-site .fs-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .shop.t-site .fs-hero-media img { width: 100%; height: 100%; object-fit: cover; } .shop.t-site .fs-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--fs-scrim); } /* On a wide screen the words sit to the left: the photo darkens a little behind them, so they read at AA. */ @media (min-width: 900px) { .shop.t-site .fs-hero-media::after { background: linear-gradient(90deg, rgba(10, 8, 6, .55) 0%, rgba(10, 8, 6, .25) 45%, rgba(10, 8, 6, 0) 70%), var(--fs-scrim); } } .shop.t-site .fs-hero-copy { position: relative; width: 100%; padding-top: calc(var(--fs-head-h) + var(--s5)); padding-bottom: var(--s5); } .shop.t-site .fs-hero-text { max-width: 760px; } .shop.t-site .fs-hero h1 { --fs-cw: .52; margin: 0; font-size: min(clamp(2.9rem, 1.6rem + 6.4vw, 6.75rem), max(2rem, calc((100vw - 2 * var(--fs-gutter)) / (var(--fs-longest, 8) * var(--fs-cw))))); line-height: .98; text-wrap: balance; overflow-wrap: normal; } .shop.t-site .fs-hero.has-photo :is(h1, .fs-hero-tag, .fs-hero-name) { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .shop.t-site .fs-hero .fs-kicker { color: inherit; opacity: .92; } .shop.t-site .fs-hero-name { margin: var(--s1) 0 0; font-weight: 650; letter-spacing: .02em; } .shop.t-site .fs-hero-tag { margin: var(--s2) 0 0; max-width: 34ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.45; } .shop.t-site .fs-hero-order { display: grid; gap: var(--s2); margin-top: var(--s4); } .shop.t-site .fs-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .shop.t-site .fs-hero.has-photo .fs-status { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .shop.t-site .fs-hero.has-photo .fs-toggle { background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .shop.t-site .fs-hero.has-photo .fs-toggle button { color: #fff; } .shop.t-site .fs-hero.has-photo .fs-toggle button.on { background: #fff; color: #141414; } .shop.t-site .fs-hero.has-photo .type-only { color: #fff; font-weight: 650; } .shop.t-site .fs-hero.has-photo .fs-facts { color: rgba(255, 255, 255, .86); } .shop.t-site .fs-hero.has-photo .fs-facts .fact b, .shop.t-site .fs-hero.has-photo .fs-facts .fact.good { color: #fff; font-weight: 650; } .shop.t-site .fs-hero.has-photo .fact + .fact::before { color: rgba(255, 255, 255, .7); } .shop.t-site .fs-hero.has-photo :focus-visible { outline-color: #fff; } .shop.t-site .fs-hero-go { min-width: 220px; } @media (max-width: 479px) { .shop.t-site .fs-hero-row > * { flex: 1 1 100%; } .shop.t-site .fs-hero-row .fs-toggle { display: flex; } .shop.t-site .fs-hero-row .fs-toggle button { flex: 1; } } .shop.t-site .fs-hero.no-photo { padding: var(--s6) 0 var(--s4); background: var(--soft); } .shop.t-site .fs-hero.no-photo .fs-hero-copy { padding-top: var(--s3); } /* Italian banner: words bottom-left, generous, a hairline under the name. */ .site-body[data-template="pizzeria"] .shop.t-site .fs-hero h1 { letter-spacing: -.012em; } .site-body[data-template="pizzeria"] .shop.t-site .fs-hero-tag { font-family: var(--t-head); font-style: italic; } @media (min-width: 900px) { .shop.t-site .fs-hero-copy { padding-bottom: var(--s7); } } /* Burger banner: the name huge and tight, the open sticker tilted. */ .site-body[data-template="burger"] .shop.t-site .fs-hero h1 { --fs-cw: .7; font-size: min(clamp(3.4rem, 1rem + 12.5vw, 10.5rem), max(2.2rem, calc((100vw - 2 * var(--fs-gutter)) / (var(--fs-longest, 8) * var(--fs-cw))))); max-width: 11ch; } .site-body[data-template="burger"] .shop.t-site .fs-hero-text { max-width: 1100px; } .site-body[data-template="burger"] .shop.t-site .fs-hero .fs-status { transform: rotate(-2deg); background: #fff; color: #111; font-weight: 800; letter-spacing: .01em; font-size: .9rem; border-radius: 4px; box-shadow: 4px 4px 0 var(--brand); backdrop-filter: none; } .site-body[data-template="burger"] .shop.t-site .fs-hero-tag { font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); } .site-body[data-template="burger"] .shop.t-site .fs-hero-order { grid-template-columns: minmax(0, 1fr); } /* Burger: the band of facts under the banner */ .shop.t-site .fs-ticker { overflow: hidden; background: var(--brand); color: var(--brand-ink); border-block: 0; } .shop.t-site .fs-tick-track { display: flex; width: max-content; will-change: transform; } .shop.t-site .fs-tick-run { display: flex; align-items: center; gap: 28px; padding: 16px 14px; white-space: nowrap; font-family: var(--t-head); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.05rem, .9rem + 1vw, 1.6rem); line-height: 1; } .shop.t-site .fs-tick-run i { font-style: normal; opacity: .75; font-size: .8em; } /* Offers: a quiet band of the takeaway's real offers */ .shop.t-site .fs-offers { background: var(--fs-deep); color: var(--fs-on-deep); } .shop.t-site .fs-offers-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); } .shop.t-site .fs-offers-label { margin: 0; font: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--fs-on-deep-muted); } .shop.t-site .fs-offers-list { display: flex; flex-wrap: wrap; gap: 6px var(--s3); margin: 0; padding: 0; list-style: none; } .shop.t-site .fs-offers-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .shop.t-site .fs-offers-list li::before { content: ""; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .shop.t-site .fs-offers-list b { font-weight: 650; } .shop.t-site .fs-offers-list span { color: var(--fs-on-deep-muted); font-size: .9rem; } .shop.t-site .fs-offers-list li.is-later { opacity: .7; } .site-body[data-template="burger"] .shop.t-site .fs-offers { background: var(--soft); color: var(--ink); } .site-body[data-template="burger"] .shop.t-site .fs-offers-label, .site-body[data-template="burger"] .shop.t-site .fs-offers-list span { color: var(--muted); } .site-body[data-template="burger"] .shop.t-site .fs-offers-list b { text-transform: uppercase; letter-spacing: .03em; font-weight: 800; } @media (max-width: 699px) { .shop.t-site .fs-offers-list { flex-direction: column; gap: 10px; } .shop.t-site .fs-offers-list li { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 12px; } .shop.t-site .fs-offers-list li::before { grid-row: span 2; align-self: start; margin-top: 8px; } .shop.t-site .fs-offers-list li > * { grid-column: 2; } } .shop.t-site .fs-notice { margin-top: var(--s3); } .shop.t-site .fs-notice .notice { margin: 0; border-radius: var(--r-sm); } /* The takeaway's own welcome words: a quiet line, not an alert */ .shop.t-site .fs-notice:has(.notice.brand) { margin-top: var(--s5); } .shop.t-site .fs-notice .notice.brand { padding: 0; border: 0; background: none; color: var(--muted); text-align: center; font-weight: 400; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.5; } .site-body[data-template="pizzeria"] .shop.t-site .fs-notice .notice.brand { font-family: var(--t-head); font-style: italic; } .site-body[data-template="burger"] .shop.t-site .fs-notice .notice.brand { color: var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; } .shop.t-site .menu-col > .notice { border-radius: var(--r-sm); } /* ===================================================================================================== SECTIONS (home): one rhythm, a kicker, a heading and a quiet "more" link ===================================================================================================== */ .shop.t-site .fs-sec { padding: var(--fs-sec) 0 0; } .shop.t-site .fs-main > .fs-sec:last-child, .shop.t-site .fs-main > .fs-sec-info:last-child { padding-bottom: var(--fs-sec); } .shop.t-site .fs-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 var(--s3); margin-bottom: var(--s4); } .shop.t-site .fs-sec-head .fs-kicker { grid-column: 1 / -1; margin-bottom: var(--s1); } .shop.t-site .fs-sec-head h2 { margin: 0; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.02; } .site-body[data-template="burger"] .shop.t-site .fs-sec-head h2 { font-size: clamp(2.5rem, 1.2rem + 5vw, 5.25rem); } .shop.t-site .fs-sec-head .fs-more { margin-bottom: 4px; } @media (max-width: 599px) { .shop.t-site .fs-sec-head { grid-template-columns: minmax(0, 1fr); } .shop.t-site .fs-sec-head .fs-more { justify-self: start; margin-top: var(--s1); } } /* ---------- Italian: the picks, one feature and a short printed list beside it */ .shop.t-site .fs-sig { display: grid; gap: var(--s4); } @media (min-width: 900px) { .shop.t-site .fs-sig { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: start; } .shop.t-site .fs-sig.is-single { grid-template-columns: minmax(0, 720px); } } .shop.t-site .fs-sig-rest { display: grid; border-top: 1px solid var(--line); } /* ---------- Burger: the line-up, big photo posters sliding sideways on a phone */ .shop.t-site .fs-lineup { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 76%); gap: var(--s2); margin: 0 calc(var(--fs-gutter) * -1); padding: 0 var(--fs-gutter) var(--s1); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fs-gutter); scrollbar-width: none; } .shop.t-site .fs-lineup::-webkit-scrollbar { display: none; } .shop.t-site .fs-lineup-cell { scroll-snap-align: start; display: flex; min-width: 0; } @media (min-width: 700px) { .shop.t-site .fs-lineup { grid-auto-columns: minmax(260px, 44%); } } @media (min-width: 1100px) { .shop.t-site .fs-lineup { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; gap: var(--s3); } } /* ---------- the menu, as an index (Italian) or as photo tiles (Burger) */ .shop.t-site .fs-cat-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .shop.t-site .fs-cat-li { border-bottom: 1px solid var(--line); } .shop.t-site .fs-cat-link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px var(--s2); min-height: 88px; padding: var(--s2) 0; color: var(--ink); text-decoration: none; } .shop.t-site .fs-cat-media { grid-row: 1 / span 2; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--soft); } .shop.t-site .fs-cat-media img { width: 100%; height: 100%; object-fit: cover; } .shop.t-site .fs-cat-no { display: none; } .shop.t-site .fs-cat-name { grid-row: 1; align-self: end; font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1.05; transition: color .2s ease, transform .35s var(--fs-ease); } .shop.t-site .fs-cat-count { grid-column: 2; grid-row: 2; align-self: start; font-size: .9rem; color: var(--muted); } .shop.t-site .fs-cat-link.no-photo .fs-cat-count { grid-column: 1; } .shop.t-site .fs-cat-link.no-photo { grid-template-columns: minmax(0, 1fr) auto; } .shop.t-site .fs-cat-arrow { grid-row: 1 / span 2; grid-column: -2; width: 22px; height: 22px; transition: transform .3s var(--fs-ease); } .shop.t-site .fs-cat-link:hover .fs-cat-name { color: var(--fs-accent); transform: translateX(6px); } .shop.t-site .fs-cat-link:hover .fs-cat-arrow { transform: translateX(4px); } @media (min-width: 900px) { .site-body[data-template="pizzeria"] .shop.t-site .fs-cats.has-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: var(--s6); align-items: start; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-media { display: none; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-link { grid-template-columns: 56px minmax(0, 1fr) auto auto; min-height: 104px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-link.no-photo { grid-template-columns: 56px minmax(0, 1fr) auto auto; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-no { display: block; font: var(--fs-label); letter-spacing: .14em; color: var(--muted); align-self: center; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-name { grid-column: 2; grid-row: 1; align-self: center; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-count, .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-link.no-photo .fs-cat-count { grid-column: 3; grid-row: 1; align-self: center; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-arrow { grid-row: 1; grid-column: 4; } .site-body[data-template="pizzeria"] .shop.t-site .fs-cat-name { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.9rem); } .shop.t-site .fs-cat-preview { position: sticky; top: calc(var(--fs-head-min) + var(--s3)); aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--soft); } .shop.t-site .fs-cat-preview img { width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 899px) { .shop.t-site .fs-cat-preview { display: none; } } /* Burger tiles: a photo per section, its name huge across it */ .site-body[data-template="burger"] .shop.t-site .fs-cat-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); border: 0; } @media (min-width: 600px) { .site-body[data-template="burger"] .shop.t-site .fs-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .site-body[data-template="burger"] .shop.t-site .fs-cat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .site-body[data-template="burger"] .shop.t-site .fs-cat-li { border: 0; } .site-body[data-template="burger"] .shop.t-site .fs-cat-link { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; min-height: 0; aspect-ratio: 4 / 3; padding: var(--s3); overflow: hidden; isolation: isolate; border-radius: var(--r); background: var(--card); color: #fff; } .site-body[data-template="burger"] .shop.t-site .fs-cat-link.no-photo { color: var(--ink); background: var(--soft); } .site-body[data-template="burger"] .shop.t-site .fs-cat-media { position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 0; } .site-body[data-template="burger"] .shop.t-site .fs-cat-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .78) 100%); } .site-body[data-template="burger"] .shop.t-site .fs-cat-media img { transition: transform .8s var(--fs-ease); } .site-body[data-template="burger"] .shop.t-site .fs-cat-link:hover .fs-cat-media img { transform: scale(1.06); } .site-body[data-template="burger"] .shop.t-site .fs-cat-name { align-self: auto; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: .9; } .site-body[data-template="burger"] .shop.t-site .fs-cat-count { align-self: auto; } @media (max-width: 599px) { .site-body[data-template="burger"] .shop.t-site .fs-cat-link { aspect-ratio: 16 / 9; } } .site-body[data-template="burger"] .shop.t-site .fs-cat-link:hover .fs-cat-name { color: inherit; transform: none; } .site-body[data-template="burger"] .shop.t-site .fs-cat-count { color: inherit; opacity: .8; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; } .site-body[data-template="burger"] .shop.t-site .fs-cat-arrow { position: absolute; top: var(--s3); right: var(--s3); width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--brand); fill: var(--brand-ink); } /* ---------- story teaser */ .shop.t-site .fs-story { display: grid; gap: var(--s4); align-items: center; } .shop.t-site .fs-story-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--soft); } .shop.t-site .fs-story-media img { width: 100%; height: 100%; object-fit: cover; } .shop.t-site .fs-story h2 { margin: 0; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; } .shop.t-site .fs-story-text { margin: var(--s3) 0 var(--s2); max-width: 56ch; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.65; color: var(--ink); } @media (min-width: 900px) { .shop.t-site .fs-story.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); } } .site-body[data-template="pizzeria"] .shop.t-site .fs-story:not(.has-photo) { justify-items: center; text-align: center; max-width: 880px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-story:not(.has-photo) .fs-story-body { display: grid; justify-items: center; } .site-body[data-template="pizzeria"] .shop.t-site .fs-story:not(.has-photo) .fs-story-text { font-family: var(--t-head); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.45; } .site-body[data-template="pizzeria"] .shop.t-site .fs-story:not(.has-photo) .fs-story-body::before { content: ""; width: 48px; height: 1px; margin: 0 auto var(--s4); background: var(--fs-accent); } .site-body[data-template="burger"] .shop.t-site .fs-story-body { padding: var(--s5) var(--s4); border-radius: var(--r); background: var(--brand); color: var(--brand-ink); } .site-body[data-template="burger"] .shop.t-site .fs-story-body .fs-kicker, .site-body[data-template="burger"] .shop.t-site .fs-story-body .fs-more, .site-body[data-template="burger"] .shop.t-site .fs-story-text { color: inherit; } .site-body[data-template="burger"] .shop.t-site .fs-story h2 { font-size: clamp(2.5rem, 1.2rem + 5vw, 5rem); } /* ---------- promo band (the owner's own words and button) */ .shop.t-site .fs-promo { position: relative; isolation: isolate; overflow: hidden; background: var(--brand); color: var(--brand-ink); } .shop.t-site .fs-promo.has-photo { background: #1a1512; color: #fff; } .shop.t-site .fs-promo-media { position: absolute; inset: 0; z-index: -1; } .shop.t-site :is(.fs-hero-media, .fs-pagehead-media) .t-sample-tag { top: calc(var(--fs-head-h) + 12px); bottom: auto; } .shop.t-site .fs-promo-media img { width: 100%; height: 100%; object-fit: cover; } .shop.t-site .fs-promo.has-photo .fs-promo-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 7, .82) 0%, rgba(12, 9, 7, .45) 55%, rgba(12, 9, 7, .2) 100%); } .shop.t-site .fs-promo-in { display: flex; align-items: center; min-height: 420px; padding-top: var(--s7); padding-bottom: var(--s7); } .shop.t-site .fs-promo h2 { margin: 0; max-width: 14ch; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem); line-height: 1; } .shop.t-site .fs-promo p { max-width: 44ch; margin: var(--s2) 0 0; font-size: 1.12rem; line-height: 1.55; } .shop.t-site .fs-promo .fs-cta { margin-top: var(--s4); background: #fff; color: #141414; } .shop.t-site .fs-promo:not(.has-photo) .fs-cta { background: var(--brand-ink); color: var(--brand); } .shop.t-site .fs-promo :focus-visible { outline-color: currentColor; } /* ---------- gallery and the kitchen mosaic */ .shop.t-site .fs-gallery, .shop.t-site .fs-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin: 0; padding: 0; list-style: none; } .shop.t-site .fs-gallery li, .shop.t-site .fs-mosaic li { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--soft); } .shop.t-site .fs-gallery img, .shop.t-site .fs-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fs-ease); } @media (min-width: 900px) { .shop.t-site .fs-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); } } .shop.t-site .fs-mosaic a { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; } .shop.t-site .fs-mosaic a:hover img { transform: scale(1.05); } .shop.t-site .fs-mosaic span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); font-weight: 650; font-size: .95rem; } @media (min-width: 900px) { .shop.t-site .fs-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .shop.t-site .fs-mosaic.n6 li:first-child, .shop.t-site .fs-mosaic.n4 li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } } /* ---------- hours, place and delivery strip */ .shop.t-site .fs-info { display: grid; gap: 0; border-top: 1px solid var(--line); } .shop.t-site .fs-info-cell { position: relative; padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .shop.t-site .fs-info-cell > .fs-ico { width: 24px; height: 24px; color: var(--fs-accent); fill: currentColor; margin-bottom: var(--s2); } .shop.t-site .fs-info-cell h3 { margin: 0 0 var(--s1); font: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .shop.t-site .fs-info-cell p { margin: 0 0 4px; color: var(--muted); } .shop.t-site .fs-info-cell .fs-info-big { margin: 0 0 var(--s1); color: var(--ink); font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); font-size: 1.45rem; line-height: 1.2; letter-spacing: var(--t-track); } .site-body[data-template="burger"] .shop.t-site .fs-info-cell .fs-info-big { text-transform: uppercase; font-size: 1.5rem; line-height: 1; } .shop.t-site .fs-info-cell .fs-more { margin-top: var(--s1); } @media (min-width: 900px) { .shop.t-site .fs-info { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .shop.t-site .fs-info-cell { padding: var(--s5) var(--s4) var(--s5) 0; border-bottom: 0; } .shop.t-site .fs-info-cell + .fs-info-cell { padding-left: var(--s4); border-left: 1px solid var(--line); } } /* ===================================================================================================== PAGE HEADS (menu, our story, find us) ===================================================================================================== */ .shop.t-site .fs-pagehead { position: relative; isolation: isolate; overflow: hidden; padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--line); } .shop.t-site .fs-pagehead h1 { margin: 0; font-size: clamp(3rem, 1.8rem + 5.6vw, 6.5rem); line-height: .95; } .site-body[data-template="burger"] .shop.t-site .fs-pagehead h1 { font-size: clamp(3.6rem, 1.2rem + 11vw, 9.5rem); } .shop.t-site .fs-pagehead-lead { margin: var(--s2) 0 0; max-width: 46ch; font-size: 1.15rem; color: var(--muted); } .shop.t-site .fs-pagehead-order { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--s3); margin-top: var(--s3); } .shop.t-site .fs-pagehead-order .fs-facts { flex-basis: 100%; } .shop.t-site .fs-pagehead.has-photo { display: flex; align-items: flex-end; min-height: max(380px, 58svh); margin-top: calc(var(--fs-head-h) * -1); padding-top: calc(var(--fs-head-h) + var(--s5)); color: #fff; border: 0; background: #1a1512; } .shop.t-site .fs-pagehead-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .shop.t-site .fs-pagehead-media img { width: 100%; height: 100%; object-fit: cover; } .shop.t-site .fs-pagehead-media::after { content: ""; position: absolute; inset: 0; background: var(--fs-scrim); } .shop.t-site .fs-pagehead.has-photo .fs-kicker { color: #fff; } .shop.t-site .fs-pagehead-in { width: 100%; } /* The menu page's head is compact on a phone, so the dishes start soon. */ .shop.t-site.p-menu .fs-pagehead { padding: var(--s4) 0 var(--s3); } @media (min-width: 900px) { .shop.t-site.p-menu .fs-pagehead { padding: var(--s6) 0 var(--s4); } } .shop.t-site.p-menu .fs-pagehead h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.5rem); } @media (max-width: 699px) { .shop.t-site.p-menu .fs-pagehead .fs-kicker { display: none; } .shop.t-site.p-menu .fs-pagehead-order { gap: 10px; margin-top: var(--s2); } .shop.t-site.p-menu .fs-pagehead-order .fs-status { order: 2; } .shop.t-site.p-menu .fs-pagehead-order .fs-toggle { order: 1; } .shop.t-site.p-menu .fs-pagehead-order .fs-toggle button { padding: 0 16px; } .shop.t-site.p-menu .fs-pagehead-order .fs-facts { order: 3; font-size: .86rem; } } .site-body[data-template="burger"] .shop.t-site.p-menu .fs-pagehead h1 { font-size: clamp(3.4rem, 1.4rem + 9vw, 8rem); } /* ===================================================================================================== THE MENU PAGE ===================================================================================================== */ .shop.t-site .shop-grid { gap: var(--s5); padding-top: var(--s1); } @media (min-width: 1024px) { .shop.t-site .shop-grid { grid-template-columns: minmax(0, 1fr) 360px; } .shop.t-site .basket-col { padding-top: var(--s3); } .shop.t-site .basket-panel { position: sticky; top: calc(var(--fs-head-min) + 72px); } } .shop.t-site .fs-menu-offers ul { display: flex; gap: var(--s1); margin: var(--s2) calc(var(--fs-gutter) * -1) 0; padding: 0 var(--fs-gutter) 4px; list-style: none; overflow-x: auto; scrollbar-width: none; } .shop.t-site .fs-menu-offers ul::-webkit-scrollbar { display: none; } .shop.t-site .fs-menu-offers li { flex: none; display: flex; flex-direction: column; gap: 2px; max-width: 320px; padding: 10px 14px 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--brand); background: var(--card); } .shop.t-site .fs-menu-offers li b { color: var(--fs-accent); } .shop.t-site .fs-menu-offers li span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @media (min-width: 1024px) { .shop.t-site .fs-menu-offers ul { flex-wrap: wrap; margin: var(--s3) 0 0; padding: 0; } .shop.t-site .fs-menu-offers li span { -webkit-line-clamp: 2; } } .shop.t-site .fs-menu-offers b { font-weight: 650; } .shop.t-site .fs-menu-offers span { font-size: .86rem; color: var(--muted); } .shop.t-site .fs-menu-offers li.is-later { opacity: .72; } .site-body[data-template="burger"] .shop.t-site .fs-menu-offers li { border: 0; box-shadow: none; background: var(--brand); color: var(--brand-ink); } .site-body[data-template="burger"] .shop.t-site .fs-menu-offers li b { color: inherit; } .site-body[data-template="burger"] .shop.t-site .fs-menu-offers b { text-transform: uppercase; font-weight: 800; letter-spacing: .02em; } .site-body[data-template="burger"] .shop.t-site .fs-menu-offers span { color: inherit; opacity: .85; } /* The section bar: sticky under the header, the marker glides to the section being read. */ .shop.t-site .menu-nav.fs-menunav { position: sticky; top: calc(var(--fs-head-min) - 1px); z-index: 40; display: flex; align-items: center; gap: var(--s2); margin: var(--s3) calc(var(--fs-gutter) * -1) 0; padding: 8px var(--fs-gutter); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } @media (min-width: 1024px) { .shop.t-site .menu-nav.fs-menunav { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } .shop.t-site .fs-menunav .search { position: relative; flex: 0 0 44px; margin: 0; transition: flex-basis .3s var(--fs-ease); order: 2; } .shop.t-site .fs-menunav .search input { height: 44px; width: 100%; padding: 0 0 0 40px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid transparent; color: var(--ink); font-size: 1rem; cursor: pointer; } .shop.t-site .fs-menunav .search input::placeholder { color: transparent; } .shop.t-site .fs-menunav .search-icon { left: 15px; top: 14px; border-color: var(--ink); } .shop.t-site .fs-menunav .search-icon::after { background: var(--ink); } .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .search { flex-basis: 100%; } .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .search input { cursor: text; padding-right: 14px; background: var(--card); border-color: var(--line); } .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .search input::placeholder { color: var(--muted); } .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .cat-tabs { display: none; } @media (min-width: 760px) { .shop.t-site .fs-menunav .search, .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .search { flex: 0 0 240px; } .shop.t-site .fs-menunav .search input { cursor: text; padding-right: 14px; } .shop.t-site .fs-menunav .search input::placeholder { color: var(--muted); } .shop.t-site .fs-menunav:is(:focus-within, .is-searching) .cat-tabs { display: flex; } } .shop.t-site .fs-menunav .cat-tabs { position: relative; order: 1; flex: 1 1 auto; min-width: 0; display: flex; gap: var(--s3); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; border: 0; } .shop.t-site .fs-menunav .cat-tabs::-webkit-scrollbar { display: none; } @media (max-width: 759px) { .shop.t-site .fs-menunav .cat-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; } } /* "Popular" is the takeaway's own Popular dishes and best sellers; the classic page's "most ordered" line isn't said here, as the takeaway may have picked them. */ .shop.t-site .cat.popular .cat-note { display: none; } .site-body .shop.t-site .fs-menunav .cat-tabs a { position: relative; min-height: 44px; padding: 0; border: 0; color: var(--muted); font-weight: 600; font-size: .95rem; text-decoration: none; } .site-body .shop.t-site .fs-menunav .cat-tabs a.active, .site-body .shop.t-site .fs-menunav .cat-tabs a:hover { color: var(--ink); border: 0; } .shop.t-site .fs-ink { position: absolute; left: 0; bottom: 4px; height: 2px; width: 0; border-radius: 2px; background: var(--fs-accent); pointer-events: none; transition: transform .38s var(--fs-ease), width .38s var(--fs-ease); } /* Burger: chunky capital chips; the marker is a filled pill behind the active one. */ .site-body[data-template="burger"] .shop.t-site .fs-menunav .cat-tabs { gap: 6px; } .site-body[data-template="burger"] .shop.t-site .fs-menunav .cat-tabs a { z-index: 1; padding: 0 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 800; transition: color .25s ease; } .site-body[data-template="burger"] .shop.t-site .fs-menunav .cat-tabs a.active { color: var(--brand-ink); } .site-body[data-template="burger"] .shop.t-site .fs-ink { top: 0; bottom: auto; height: 44px; border-radius: 999px; background: var(--brand); z-index: 0; } /* Menu sections */ .shop.t-site #menu-sections { padding-top: var(--s2); } .shop.t-site .cat { scroll-margin-top: calc(var(--fs-head-min) + 76px); margin: 0; padding-top: var(--s5); } .shop.t-site .fs-cathead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); } .shop.t-site .cat .fs-cathead h2 { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; } .site-body[data-template="burger"] .shop.t-site .cat .fs-cathead h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.5rem); line-height: .86; } .site-body[data-template="burger"] .shop.t-site .fs-cathead { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s3); } .shop.t-site .fs-catcount { flex: none; font: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .shop.t-site #search-results > h2, .shop.t-site .cat.popular > h2 { margin: 0 0 var(--s2); font-family: var(--t-head); font-weight: var(--fs-hw); text-transform: var(--t-case); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); } .shop.t-site .cat-note { margin: 0 0 var(--s2); } .shop.t-site .allergy-note { margin-top: var(--s5); padding: var(--s3); border-radius: var(--r); background: var(--soft); } /* The menu page's Popular row is a section like the others (not a sideways strip). */ .shop.t-site .popular-track { display: grid; overflow: visible; padding: 0; scroll-snap-type: none; } /* ---------- dishes (all kinds): reset the classic card */ .shop.t-site .fs-dish { position: relative; display: grid; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .shop.t-site .fs-dish:hover { box-shadow: none; border-color: transparent; } .shop.t-site .fs-dish .mi-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; } .shop.t-site .fs-dish .mi-name { font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; } .shop.t-site .fs-dish .mi-desc { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; -webkit-line-clamp: 3; } .shop.t-site .fs-dish .mi-allergens { font-size: .8rem; color: var(--muted); } .shop.t-site .fs-dish .mi-opts { font-size: .8rem; font-weight: 600; color: var(--muted); } .shop.t-site .fs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .shop.t-site .fs-meta:empty { display: none; } .shop.t-site .fs-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; } .shop.t-site .fs-mark { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); line-height: 1; } .shop.t-site .fs-mark.m-vegetarian, .shop.t-site .fs-mark.m-vegan { border-color: color-mix(in srgb, #2f7d4a 55%, var(--line)); color: #2f7d4a; } .shop.t-site .fs-mark.m-spicy { border-color: color-mix(in srgb, #c2410c 55%, var(--line)); color: #b3400f; } .shop.t-site .fs-mark.m-popular, .shop.t-site .fs-mark.m-new { border-color: transparent; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--fs-accent); } .site-body[data-theme="dark"] .shop.t-site .fs-mark.m-vegetarian, .site-body[data-theme="dark"] .shop.t-site .fs-mark.m-vegan { color: #7fd39b; } .site-body[data-theme="dark"] .shop.t-site .fs-mark.m-spicy { color: #ff9a6b; } .shop.t-site .fs-media { position: relative; display: block; flex: none; width: auto; height: auto; overflow: hidden; background: var(--soft); } .shop.t-site .fs-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .7s var(--fs-ease), opacity .5s ease; } .shop.t-site .fs-dish:not(.soldout):hover .fs-media img { transform: scale(1.045); } .shop.t-site .fs-dish .mi-add { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.3rem; font-weight: 500; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .14), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); transition: transform .2s var(--fs-ease), background-color .2s ease, color .2s ease; } .shop.t-site .fs-dish .mi-add.has { background: var(--brand); color: var(--brand-ink); font-size: .95rem; font-weight: 750; } .shop.t-site .fs-dish:not(.soldout):hover .mi-add { transform: scale(1.08); } .shop.t-site .fs-dish.soldout { cursor: default; } .shop.t-site .fs-dish.soldout .fs-media img { filter: grayscale(1); opacity: .55; } .shop.t-site .fs-dish.soldout .mi-price { color: var(--muted); font: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; } .shop.t-site .fs-dish.soldout .mi-name { color: var(--muted); } .shop.t-site .fs-dish:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: var(--r-sm); } /* ---------- Italian dishes: a printed list. Name, dotted leader, price; the photo square at the end. */ .site-body[data-template="pizzeria"] .shop.t-site :is(.items, .popular-track) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-menu, .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .site-body[data-template="pizzeria"] .shop.t-site .fs-line { display: flex; align-items: baseline; align-items: last baseline; gap: 10px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-line .mi-name { flex: 0 1 auto; font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); letter-spacing: var(--t-track); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); line-height: 1.2; } .site-body[data-template="pizzeria"] .shop.t-site .fs-leader { flex: 1 1 16px; min-width: 16px; align-self: flex-end; height: 2px; margin-bottom: .5em; background-image: radial-gradient(circle, var(--muted) 1px, transparent 1.2px); background-size: 7px 2px; background-repeat: repeat-x; opacity: .7; } .site-body[data-template="pizzeria"] .shop.t-site .fs-line .mi-price { flex: none; font-weight: 650; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); color: var(--ink); } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish .fs-media { width: 96px; height: 96px; border-radius: var(--r-sm); } @media (min-width: 700px) { .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-menu .fs-media { width: 132px; height: 132px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-menu { gap: var(--s4); } } .shop.t-site .fs-media .mi-add { z-index: 2; right: 8px; bottom: 8px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish:is(.k-menu, .k-row) .fs-media .mi-add { right: 6px; bottom: 6px; width: 34px; height: 34px; font-size: 1.1rem; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.noimg { grid-template-columns: minmax(0, 1fr) 44px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.noimg .mi-add { position: static; align-self: center; width: 40px; height: 40px; box-shadow: 0 0 0 1px var(--line); background: transparent; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.noimg .mi-add.has { background: var(--brand); box-shadow: none; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.soldout .mi-add { display: none; } /* The feature: a big 4:3 photo, the name large under it. */ .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature .fs-media { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature .fs-line .mi-name { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature .fs-line .mi-price { font-size: 1.15rem; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature .mi-desc { font-size: 1.05rem; -webkit-line-clamp: 4; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature .fs-media .mi-add { right: var(--s2); bottom: var(--s2); width: 52px; height: 52px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature.noimg { grid-template-columns: minmax(0, 1fr) 44px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-feature.noimg .mi-add { position: static; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row .fs-media { width: 88px; height: 88px; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row .fs-line .mi-name { font-size: 1.2rem; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row .mi-desc { -webkit-line-clamp: 2; } .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row .mi-allergens, .site-body[data-template="pizzeria"] .shop.t-site .fs-dish.k-row .mi-opts { display: none; } .site-body[data-template="pizzeria"] .shop.t-site .fs-sig-cell { min-width: 0; } /* ---------- Burger dishes: big photo cards, then the rest as bold rows */ .site-body[data-template="burger"] .shop.t-site :is(.items, .popular-track) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) 12px; } @media (min-width: 700px) { .site-body[data-template="burger"] .shop.t-site :is(.items, .popular-track) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); } } @media (max-width: 339px) { .site-body[data-template="burger"] .shop.t-site :is(.items, .popular-track) { grid-template-columns: minmax(0, 1fr); } } .site-body[data-template="burger"] .shop.t-site .fs-dish { color: var(--ink); } .site-body[data-template="burger"] .shop.t-site .fs-dish .mi-name { font-family: var(--t-head); font-weight: 900; font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: -.01em; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.02; } .site-body[data-template="burger"] .shop.t-site .fs-dish .mi-price { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; border-radius: 4px; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: .95rem; line-height: 1; } .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo { grid-template-rows: auto 1fr; gap: 12px; align-content: start; } .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo .fs-media { aspect-ratio: 1; border-radius: var(--r); } .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo .mi-price { position: absolute; z-index: 2; top: 10px; left: 10px; transform: rotate(-3deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, .55); } .site-body[data-template="burger"] .shop.t-site .fs-dish .mi-add { background: var(--ink); color: var(--bg); box-shadow: none; border-radius: var(--t-btn-r); } .site-body[data-template="burger"] .shop.t-site .fs-dish .mi-add.has { background: var(--brand); color: var(--brand-ink); } .site-body[data-template="burger"] .shop.t-site .fs-dish .mi-desc { font-size: .9rem; -webkit-line-clamp: 2; } @media (max-width: 599px) { .site-body[data-template="burger"] .shop.t-site .fs-dish.k-menu .fs-meal { padding: 5px 8px; font-size: .66rem; letter-spacing: .03em; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-desc { display: none; } } @media (max-width: 599px) { .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo.k-menu .mi-desc { display: none; } .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo.k-menu .mi-allergens { display: none; } } /* "Make it a meal": said on the card with its real price, opened in the dish sheet */ .shop.t-site .fs-meal { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 2px; padding: 6px 10px; white-space: nowrap; border-radius: 4px; border: 1.5px dashed color-mix(in srgb, var(--brand) 70%, var(--line)); color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .shop.t-site .fs-meal span { color: var(--fs-accent); } .shop.t-site .fs-meal b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; } /* A dish with no photo: a bold row across the whole width, never an empty photo box. */ .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg + .fs-dish.noimg { margin-top: calc(var(--s2) * -1); } .site-body[data-template="burger"] .shop.t-site .fs-dish.has-photo + .fs-dish.noimg { margin-top: var(--s2); } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg .mi-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 6px; } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg .mi-name { grid-column: 1; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg .mi-price { grid-column: 2; grid-row: 1; align-self: start; } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg :is(.mi-desc, .fs-meta, .mi-allergens, .fs-meal) { grid-column: 1 / -1; } .site-body[data-template="burger"] .shop.t-site .fs-dish.noimg .mi-add { position: static; align-self: center; } .site-body[data-template="burger"] .shop.t-site .fs-dish.soldout .mi-price { background: var(--soft); color: var(--muted); transform: none; box-shadow: none; } .site-body[data-template="burger"] .shop.t-site .fs-dish.soldout .mi-add { display: none; } /* The home page's posters: the photo fills the card, the name across the bottom. */ .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--card); isolation: isolate; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .fs-media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .fs-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .86) 100%); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3) 72px var(--s3) var(--s3); color: #fff; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: .92; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-desc { color: rgba(255, 255, 255, .82); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster :is(.fs-meta, .mi-allergens) { display: none; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .fs-meal { color: #fff; border-color: rgba(255, 255, 255, .5); font-size: .68rem; padding: 5px 8px; letter-spacing: .04em; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .fs-meal span { color: #fff; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-price { top: var(--s2); left: var(--s2); font-size: 1.05rem; padding: 7px 12px; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-add { right: var(--s3); bottom: var(--s3); width: 48px; height: 48px; background: #fff; color: #111; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster .mi-add.has { background: var(--brand); color: var(--brand-ink); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s3); background: var(--soft); border: 0; } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg .mi-text { position: static; display: flex; padding: 0 56px 0 0; color: var(--ink); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg .mi-desc { color: var(--muted); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg .mi-name { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--fs-accent); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg .mi-price { position: static; order: -1; margin-bottom: var(--s1); } .site-body[data-template="burger"] .shop.t-site .fs-dish.k-poster.noimg .mi-add { position: absolute; } .site-body[data-template="burger"] .shop.t-site .fs-lineup-cell .fs-dish.k-poster { width: 100%; } /* ===================================================================================================== OUR STORY AND FIND US ===================================================================================================== */ .shop.t-site .fs-about-in { display: grid; gap: var(--s5); } .shop.t-site .fs-about-text p { margin: 0 0 var(--s3); max-width: 62ch; font-size: 1.08rem; line-height: 1.75; white-space: pre-line; } .shop.t-site .fs-about-text .fs-lead { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); line-height: 1.35; letter-spacing: var(--t-track); } .site-body[data-template="burger"] .shop.t-site .fs-about-text .fs-lead { text-transform: none; font-weight: 800; font-family: var(--t-body); letter-spacing: -.015em; line-height: 1.25; } .shop.t-site .fs-about-facts { align-self: start; padding: var(--s4); border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .shop.t-site .fs-about-facts h2 { margin: 0 0 var(--s2); font-size: 1.6rem; line-height: 1.1; } .shop.t-site .fs-about-facts ul { margin: 0 0 var(--s3); padding: 0; list-style: none; } .shop.t-site .fs-about-facts li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); } .shop.t-site .fs-about-facts .btn { width: 100%; } @media (min-width: 900px) { .shop.t-site .fs-about-in { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s7); } .shop.t-site .fs-about-facts { position: sticky; top: calc(var(--fs-head-min) + var(--s3)); } } .shop.t-site .fs-kitchen { padding-bottom: var(--fs-sec); } .shop.t-site .fs-find { padding-top: var(--s5); padding-bottom: var(--fs-sec); } .shop.t-site .fs-about { padding-top: var(--s6); } .shop.t-site .fs-find-in { display: grid; gap: var(--s3); } @media (min-width: 900px) { .shop.t-site .fs-find-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .shop.t-site .fs-find-delivery, .shop.t-site .fs-find-allergy { grid-column: 1 / -1; } } @media (min-width: 1200px) { .shop.t-site .fs-find-in { grid-template-columns: 1fr 1fr 1fr; } .shop.t-site .fs-find-delivery { grid-column: auto; } } .shop.t-site .fs-find-card { padding: var(--s4); border-radius: var(--r); background: var(--card); border: 1px solid var(--line); min-width: 0; } .shop.t-site .fs-find-card h2 { margin: 0 0 var(--s2); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; } .site-body[data-template="burger"] .shop.t-site .fs-find-card h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: .92; } .shop.t-site .fs-find-card h3 { margin: var(--s3) 0 var(--s1); font: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .shop.t-site .fs-now { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); font-weight: 650; } .shop.t-site .fs-hours { width: 100%; border-collapse: collapse; font-size: .97rem; } .shop.t-site .fs-hours th, .shop.t-site .fs-hours td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; vertical-align: top; } .shop.t-site .fs-hours td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .shop.t-site .fs-hours tr.is-today :is(th, td) { color: var(--ink); font-weight: 700; } .shop.t-site .fs-today { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .shop.t-site .fs-postcode { margin: 0 0 var(--s1); font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); line-height: 1; color: var(--fs-accent); } .shop.t-site .fs-address { margin: 0 0 var(--s3); font-size: 1.1rem; } .shop.t-site .fs-find-acts { display: grid; gap: var(--s1); margin-bottom: var(--s2); } .shop.t-site .fs-find-acts .btn { width: 100%; gap: 10px; } .shop.t-site .fs-find-acts .fs-ico { width: 18px; height: 18px; } .shop.t-site .fs-cta-2 { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .site-body .shop.t-site a.btn.secondary.fs-cta-2 { color: var(--ink); background: transparent; border: 1px solid var(--line); } .shop.t-site .fs-times, .shop.t-site .fs-zones { margin: 0; padding: 0; list-style: none; } .shop.t-site .fs-times li, .shop.t-site .fs-zones li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); } .shop.t-site .fs-times span, .shop.t-site .fs-zones span { color: var(--muted); } .shop.t-site .fs-find-delivery .fs-cta { margin-top: var(--s3); width: 100%; } .shop.t-site .fs-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); } .shop.t-site .fs-socials a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; } .shop.t-site .fs-find-allergy .allergy-note { margin: 0; } /* ===================================================================================================== FOOTER ===================================================================================================== */ .shop.t-site .fs-foot { margin-top: 0; padding: var(--s6) 0 calc(var(--s8) + env(safe-area-inset-bottom)); background: var(--fs-deep); color: var(--fs-on-deep); } @media (min-width: 1024px) { .shop.t-site .fs-foot { padding-bottom: var(--s5); } } .shop.t-site.p-menu .fs-foot { margin-top: var(--fs-sec); } .shop.t-site .fs-foot a { color: var(--fs-on-deep); } .shop.t-site .fs-foot-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .14); } .shop.t-site .fs-foot-brand { display: grid; gap: var(--s1); min-width: 0; } .shop.t-site .fs-foot-brand .fs-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; } .shop.t-site .fs-foot-name { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.8rem); line-height: 1; color: var(--fs-on-deep); } .site-body[data-template="burger"] .shop.t-site .fs-foot-name { font-size: clamp(3rem, 1.2rem + 8vw, 8.5rem); line-height: .86; } .shop.t-site .fs-foot-tag { margin: 0; color: var(--fs-on-deep-muted); font-size: 1.05rem; } .site-body[data-template="pizzeria"] .shop.t-site .fs-foot-tag { font-family: var(--t-head); font-style: italic; font-size: 1.2rem; } .shop.t-site .fs-foot-grid { display: grid; gap: var(--s4); padding: var(--s5) 0; } @media (min-width: 760px) { .shop.t-site .fs-foot-grid { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--s5); } } .shop.t-site .fs-foot-grid h2 { margin: 0 0 var(--s2); font: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--fs-on-deep-muted); } .shop.t-site .fs-foot-grid p { margin: 0 0 6px; } .shop.t-site .fs-foot-grid a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); } .shop.t-site .fs-foot-grid a:hover { border-bottom-color: currentColor; } .shop.t-site .fs-foot .fs-hours :is(th, td) { padding: 6px 0; border-bottom-color: rgba(255, 255, 255, .1); color: var(--fs-on-deep-muted); font-size: .92rem; } .shop.t-site .fs-foot .fs-hours tr.is-today :is(th, td) { color: var(--fs-on-deep); } .shop.t-site .fs-foot-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .shop.t-site .fs-foot-links a { min-height: 40px; } .shop.t-site .fs-foot .fs-socials a { border-color: rgba(255, 255, 255, .25); min-height: 40px; } .shop.t-site .fs-foot-base { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; color: var(--fs-on-deep-muted); } .shop.t-site .fs-foot-base p { margin: 0; } .shop.t-site .fs-foot-base b { color: var(--fs-on-deep); font-weight: 650; } .shop.t-site .fs-foot-base a { color: var(--fs-on-deep); } .shop.t-site .fs-foot .fs-cta { background: var(--brand); color: var(--brand-ink); } .shop.t-site .fs-foot :focus-visible { outline-color: var(--fs-on-deep); } /* ===================================================================================================== THE PHONE'S BOTTOM BAR, THE BASKET, THE DISH SHEET AND CHECKOUT ===================================================================================================== */ .site-body .cart-bar { background: linear-gradient(rgba(0, 0, 0, 0), color-mix(in srgb, var(--bg) 92%, transparent) 38%); padding-top: var(--s3); } .site-body .cart-bar.is-empty { display: block; transition: transform .35s var(--fs-ease), opacity .3s ease; } .site-body.fs-hero-cta-on .cart-bar.is-empty { transform: translateY(110%); opacity: 0; pointer-events: none; } .site-body .fs-bar { display: flex; gap: var(--s1); max-width: 680px; margin: 0 auto; } .site-body .fs-bar-call { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--t-btn-r); background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(0, 0, 0, .18); } .site-body .fs-bar-call .fs-ico { width: 20px; height: 20px; fill: currentColor; } .site-body .fs-bar-go { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 var(--s3); border-radius: var(--t-btn-r); background: var(--brand); color: var(--brand-ink); text-decoration: none; font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); } .site-body .fs-bar-go .fs-ico { width: 18px; height: 18px; fill: currentColor; } .site-body[data-template="burger"] .fs-bar-go { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; } .site-body[data-template="burger"] #view-basket { font-weight: 800; } .site-body #view-basket { min-height: 56px; border-radius: var(--t-btn-r); background: var(--brand); color: var(--brand-ink); } .site-body #view-basket.flash { animation: fs-flash .7s ease; } .site-body .fly-dot { position: fixed; z-index: 2000; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-ink) 70%, transparent), 0 6px 16px rgba(0, 0, 0, .25); pointer-events: none; } .site-body .basket-panel { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 24px 48px -28px rgba(0, 0, 0, .35); } .site-body :is(.basket-panel, .basket-sheet) .basket-head h2 { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: 1.6rem; } .site-body .sheet-panel { background: var(--card); } .site-body .sheet-panel :is(.sheet-head h2) { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); letter-spacing: var(--t-track); font-size: 1.55rem; } .site-body[data-template="burger"] .sheet-panel :is(.sheet-head h2, .item-body h2, .basket-head h2) { text-transform: uppercase; font-weight: 900; line-height: .95; } .site-body .item-photo { position: relative; overflow: hidden; background: var(--soft); } .site-body .item-photo img { aspect-ratio: 4 / 3; max-height: 46vh; width: 100%; object-fit: cover; } .site-body .item-body h2 { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); letter-spacing: var(--t-track); font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); line-height: 1.1; } .site-body .item-price { font-size: 1.15rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } .site-body[data-template="burger"] .item-price { display: inline-block; padding: 6px 10px; border-radius: 4px; background: var(--brand); color: var(--brand-ink); font-weight: 800; } .site-body .item-desc { font-size: 1.02rem; line-height: 1.55; } .site-body .item-allergens { background: var(--soft); } /* Choices: one-of groups as pills (a pizza's size reads at a glance), several-of groups as chips with their prices */ .site-body .opt-group legend { background: transparent; padding: 0; margin: 0 0 12px; } .site-body .opt-group legend b { font-size: 1.05rem; } .site-body .opt-group legend .req { align-self: flex-start; padding: 4px 10px; line-height: 1.2; border-radius: 999px; } .site-body[data-template="burger"] .opt-group legend b { text-transform: uppercase; letter-spacing: .04em; font-weight: 900; } .site-body .opt-group.is-one, .site-body .opt-group.is-many { display: flex; flex-wrap: wrap; gap: 8px; } .site-body .opt-group.is-one > :is(legend, .opt-error), .site-body .opt-group.is-many > :is(legend, .opt-error) { flex: 1 1 100%; } .site-body .opt-group.is-one label.opt, .site-body .opt-group.is-many label.opt { position: relative; flex: 0 1 auto; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 600; font-size: .92rem; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .12s ease; } .site-body .opt-group label.opt:active { transform: scale(.98); } .site-body .opt-group.is-one label.opt input, .site-body .opt-group.is-many label.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .site-body .opt-group label.opt .opt-name { flex: none; } .site-body .opt-group.is-one label.opt:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--card); } .site-body .opt-group.is-one label.opt:has(input:checked) .opt-price { color: inherit; opacity: .8; } .site-body .opt-group.is-many label.opt::before { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8rem; line-height: 1; opacity: .55; transition: transform .2s ease; } .site-body .opt-group.is-many label.opt:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--card)); } .site-body .opt-group.is-many label.opt:has(input:checked)::before { content: "✓"; background: var(--brand); color: var(--brand-ink); border-color: var(--brand); opacity: 1; } .site-body .opt-group label.opt.maxed { opacity: .45; } .site-body .opt-group label.opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; } .site-body .opt-group .opt-price { font-size: .85rem; color: var(--muted); font-weight: 600; } /* A size: equal pills across the width (segmented) */ .site-body .opt-group.is-one.is-size { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0; } .site-body .opt-group.is-one.is-size > :is(legend, .opt-error) { grid-column: 1 / -1; } .site-body .opt-group.is-one.is-size label.opt { justify-content: center; flex-direction: column; gap: 0; min-height: 56px; padding: 6px 10px; border: 0; border-radius: 0; background: var(--soft); text-align: center; line-height: 1.15; box-shadow: inset 0 0 0 4px var(--soft); } .site-body .opt-group.is-one.is-size label.opt:first-of-type { border-radius: 999px 0 0 999px; } .site-body .opt-group.is-one.is-size label.opt:last-of-type { border-radius: 0 999px 999px 0; } .site-body .opt-group.is-one.is-size label.opt:only-of-type { border-radius: 999px; } /* the chosen size: a pill inside the track (drawn behind the words, so the track stays one piece) */ .site-body .opt-group.is-one.is-size label.opt { isolation: isolate; } .site-body .opt-group.is-one.is-size label.opt::after { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 999px; background: var(--ink); opacity: 0; transform: scale(.92); transition: opacity .2s ease, transform .25s var(--fs-ease); } .site-body .opt-group.is-one.is-size label.opt:has(input:checked) { color: var(--card); background: var(--soft); border-color: transparent; } .site-body .opt-group.is-one.is-size label.opt:has(input:checked)::after { opacity: 1; transform: none; } .site-body .opt-group.is-one.is-size label.opt:has(input:checked) .opt-price { color: var(--muted); } .site-body .opt-group.is-one.is-size label.opt-price { font-size: .78rem; } /* "Make it a meal": a card of its own */ .site-body .opt-group.is-meal { display: block; padding: var(--s2); border-radius: var(--r); border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); } .site-body .opt-group.is-meal legend { float: left; width: 100%; margin-bottom: var(--s1); } .site-body .opt-group.is-meal label.opt { display: flex; width: 100%; margin-top: 6px; border-radius: var(--r-sm); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); } .site-body .opt-group.is-meal label.opt:has(input:checked) { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .site-body .opt-group.is-meal label.opt:has(input:checked) .opt-price { color: inherit; } .site-body .opt-group.is-meal label.opt .opt-name { flex: 1; } .site-body .opt-group.invalid { box-shadow: none; } .site-body .opt-group.invalid legend { box-shadow: none; color: #b3261e; } .site-body .sheet-foot { background: var(--card); gap: 10px; } .site-body .sheet-foot .stepper.big { padding: 3px; gap: 0; } .site-body .sheet-foot .stepper.big button { width: 40px; height: 44px; background: transparent; font-size: 1.2rem; } .site-body .sheet-foot .stepper.big b { min-width: 24px; text-align: center; } .site-body #add-to-order { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; padding: 0 16px; } .site-body .sheet-foot .btn, .site-body .basket-panel .btn.big, .site-body .basket-sheet .btn.big, .site-body #place-order { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .site-body .bl { padding: 14px 0; } .site-body .bl-info b { font-weight: 650; } .site-body[data-template="pizzeria"] .bl-info b { font-family: var(--t-head); font-weight: var(--fs-hw); font-size: 1.08rem; } .site-body[data-template="burger"] .bl-info b { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; } .site-body .checkout-sheet .co-card { border-radius: var(--r); background: var(--card); } .site-body .checkout-sheet .co-card h3 { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); letter-spacing: var(--t-track); font-size: 1.25rem; } .site-body[data-template="burger"] .checkout-sheet .co-card h3 { text-transform: uppercase; font-weight: 900; } .site-body .checkout-sheet { background: var(--bg) !important; } .site-body .pay-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } /* ===================================================================================================== THE ORDER PAGE (status.js): the template's look and a live progress line ===================================================================================================== */ .site-body .status-page { max-width: 680px; margin: 0 auto; padding: 0 var(--fs-gutter) var(--s7); } .site-body .fs-status-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: var(--fs-head-h); margin: 0 calc(var(--fs-gutter) * -1) var(--s4); padding: 0 var(--fs-gutter); border-bottom: 1px solid var(--line); } .site-body .fs-status-top a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; } .site-body .fs-status-top .fs-word { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: 1.4rem; } .site-body .fs-status-top img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; } .site-body .fs-status-top .fs-back { font-weight: 650; font-size: .92rem; } .site-body .status-page .status-hero { text-align: left; padding: var(--s3) 0 var(--s4); } .site-body .status-page .status-icon { display: none; } .site-body .status-page .status-hero .big { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1.02; } .site-body[data-template="burger"] .status-page .status-hero .big { line-height: .9; } .site-body .status-page .status-hero .muted { font-size: 1.05rem; line-height: 1.55; } .site-body .status-page .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--s4); padding: 0; background: none; counter-reset: step; } .site-body .status-page .steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 2px; background: var(--line); } .site-body .status-page .steps span { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0; background: none; color: var(--muted); font-size: .85rem; font-weight: 600; border: 0; border-radius: 0; text-align: center; } .site-body .status-page .steps span::before { content: ""; position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); box-sizing: border-box; } .site-body .status-page .steps span.done { color: var(--ink); } .site-body .status-page .steps span.done::before { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 5px var(--brand), inset 0 0 0 12px var(--brand-ink); } .site-body .status-page .steps span.done:not(:has(+ span.done))::before { animation: fs-pulse 1.8s ease-out infinite; } .site-body .status-page .steps span.done:has(+ span.done)::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--brand); } .site-body .status-page .steps span:last-child::after { display: none; } .site-body .status-page .card { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .site-body .status-page .card h3 { font-family: var(--t-head); font-weight: var(--fs-hw); font-style: var(--t-style); text-transform: var(--t-case); letter-spacing: var(--t-track); font-size: 1.3rem; } .site-body .status-page .btn:not(.secondary) { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .site-body .status-page .totals { font-variant-numeric: tabular-nums; } /* ===================================================================================================== MOTION (purposeful, quick, never in the way; all off with reduced motion) ===================================================================================================== */ @media (prefers-reduced-motion: no-preference) { .site-body .fs-kb { animation: fs-kb 26s ease-in-out infinite alternate; transform-origin: 60% 40%; } .site-body .fs-img { opacity: 0; transition: opacity .6s ease, transform .7s var(--fs-ease); } .site-body .fs-img.is-loaded { opacity: 1; } .site-body .fs-rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s var(--fs-ease); transition-delay: calc(var(--i, 0) * 70ms); } .site-body .fs-rv.is-in { opacity: 1; transform: none; } .site-body:not(.fs-painted) .fs-hero-text > * { animation: fs-rise .9s var(--fs-ease) both; } .site-body .fs-hero-text > :nth-child(2) { animation-delay: .08s; } .site-body .fs-hero-text > :nth-child(3) { animation-delay: .16s; } .site-body .fs-hero-text > :nth-child(4) { animation-delay: .24s; } .site-body .fs-hero-text > :nth-child(5) { animation-delay: .32s; } .site-body:not(.fs-painted) .fs-pagehead-in > * { animation: fs-rise .8s var(--fs-ease) both; } .site-body .fs-pagehead-in > :nth-child(2) { animation-delay: .06s; } .site-body .fs-pagehead-in > :nth-child(3) { animation-delay: .12s; } .site-body .fs-pagehead-in > :nth-child(4) { animation-delay: .18s; } .site-body .sheet:not([hidden]) .sheet-panel { animation: t-up .38s cubic-bezier(.2, .8, .2, 1) both; } @media (min-width: 700px) { .site-body .sheet:not([hidden]) .sheet-panel { animation-name: t-pop; } } .site-body .item-photo img { animation: fs-settle 1s var(--fs-ease) both; } } @keyframes fs-kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.2%, -1%, 0); } } @keyframes fs-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes fs-settle { from { transform: scale(1.06); } to { transform: none; } } @keyframes fs-bump { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes fs-count { 35% { transform: scale(1.45); } } @keyframes fs-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); } 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--brand) 0%, transparent); } } @keyframes fs-pulse { 0% { box-shadow: inset 0 0 0 5px var(--brand), inset 0 0 0 12px var(--brand-ink), 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); } 100% { box-shadow: inset 0 0 0 5px var(--brand), inset 0 0 0 12px var(--brand-ink), 0 0 0 12px color-mix(in srgb, var(--brand) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .site-body *, .site-body *::before, .site-body *::after { animation: none !important; transition: none !important; } .site-body .fs-rv, .site-body .fs-img { opacity: 1 !important; transform: none !important; } .site-body .fs-drawer { transform: none; } .site-body .fly-dot { display: none; } }