/* ============================================================ MILKY LANE · GRAFFITI SYSTEM LAYER (22 Oct 2026) ------------------------------------------------------------ Loaded LAST on every page. Moves the site onto the Milky Lane Graffiti System: Galano Grotesque, paint pink #EA8FB5 and paint blue #5BD0E6, block headings without eyebrows, painted-sign buttons, the menu brick, drip day badges and angled ticker plates. Rules here override the older sheets on purpose; to roll the look back, remove this file's from the pages and restore ml-fonts.css. ============================================================ */ :root { --ml-pink: #EA8FB5; --ml-pink-bright: #F2A9C8; --ml-blue: #5BD0E6; --ml-blue-deep: #7FDCEE; --ml-yellow: #5BD0E6; --ml-pink-on-paper: #B6356B; --display: "ML Block", "Arial Black", sans-serif; --tag: "ML Block", "Arial Black", sans-serif; --body: "ML Text", "Helvetica Neue", Arial, sans-serif; --script: "Driftline ML", "Brush Script MT", cursive; --ml-brick: url("images/brand/brick-menu-1600w.webp"); --ml-drip-pink: url("images/brand/price-drip-softpink.webp"); --ml-drip-blue: url("images/brand/price-drip-softblue.webp"); } body { font-family: var(--body); } /* ---------- Headings: block type, no eyebrows ---------- */ /* Eyebrows are retired (copy deck rule). The words are kept in the markup for now and simply not shown. */ .section-eyebrow, .hero-eyebrow, .eyebrow, [class*="__eyebrow"] { display: none !important; } .section-head { text-align: left; margin-left: 0; margin-right: auto; max-width: 900px; } .section-head .section-title + * { margin-left: 0; } .section-title { letter-spacing: -.01em; line-height: .92; text-wrap: balance; } .section-sub { font-size: 19px; line-height: 1.55; font-weight: 500; color: #B7B7BD; max-width: 36em; margin-left: 0; } /* ---------- Buttons: painted sign, not pills ---------- */ .btn { border-radius: 6px; font-family: var(--display); font-size: 15px; letter-spacing: .06em; padding: 16px 24px 15px; box-shadow: none; } .btn--primary:hover { background: var(--ml-pink-bright); transform: translateY(-2px); } .btn--blue:hover { background: var(--ml-blue-deep); transform: translateY(-2px); } .btn:focus-visible { outline: 3px solid var(--ml-blue); outline-offset: 3px; } /* ---------- Brick ground behind painted menu headings ---------- */ section:has(h2.gh) { background-color: #0A0A0C; background-image: radial-gradient(120% 90% at 50% 30%, rgba(10,10,12,.35) 0%, rgba(10,10,12,.7) 65%, rgba(10,10,12,.95) 100%), var(--ml-brick); background-size: cover, cover; background-position: center top, center top; } /* ---------- Menu cards ---------- */ .burger-card .tier { display: none; } .burger-card .tag { font-family: var(--body); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: #B7B7BD; transform: none; } /* ---------- Coming soon stamp in the new face ---------- */ .soon-stamp { font-family: var(--display); letter-spacing: .06em; } /* ============================================================ HOMEPAGE HERO The Enter Feast Mode spray lettering from the 2026 burger box and the flying menu items, on the menu brick. ============================================================ */ html, body { overflow-x: clip; } .hero.hero--graffiti { display: block; min-height: 0; padding: 130px 0 0; isolation: isolate; overflow: visible; background-color: #0A0A0C; background-image: radial-gradient(60% 70% at 72% 45%, rgba(234,143,181,.16) 0%, rgba(234,143,181,0) 70%), radial-gradient(110% 90% at 30% 40%, rgba(10,10,12,.25) 0%, rgba(10,10,12,.7) 70%, rgba(10,10,12,.92) 100%), var(--ml-brick); background-size: cover, cover, cover; background-position: center, center, center; } .hero--graffiti .hero-grid--graffiti { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 40px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .hero--graffiti .hero-h1--art { margin: 0; line-height: 0; font-size: 0; } .hero--graffiti .hero-h1--art img { display: block; width: auto; height: clamp(300px, 34vw, 470px); max-width: 100%; margin-left: -10px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)); } .hero--graffiti .lead { margin: 18px 0 0; max-width: 30em; font-size: 20px; line-height: 1.5; font-weight: 500; color: #B7B7BD; } .hero--graffiti .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero--graffiti .hero-art--flying { position: relative; justify-self: center; width: min(640px, 100%); aspect-ratio: 1 / .92; } .hero--graffiti .fly { position: absolute; display: block; height: auto; max-width: none; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); animation: ml-float 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); } .hero--graffiti .fly--beef { left: 21%; top: 20%; width: 58%; z-index: 3; --r: -3deg; --d: 0s; } .hero--graffiti .fly--chicken { left: -2%; top: -2%; width: 37%; z-index: 2; --r: -9deg; --d: -1.6s; } .hero--graffiti .fly--shakes { left: 67%; top: -4%; width: 33%; z-index: 2; --r: 7deg; --d: -3.1s; } .hero--graffiti .fly--fries { left: -3%; top: 60%; width: 39%; z-index: 4; --r: -7deg; --d: -4.4s; } .hero--graffiti .fly--churros { left: 66%; top: 58%; width: 35%; z-index: 4; --r: 8deg; --d: -2.2s; } .hero--graffiti .hero-art--solo { aspect-ratio: 1 / .87; width: min(660px, 100%); } .hero--graffiti .hero-art--solo .fly--beef { left: 0; top: 0; width: 100%; --r: -4deg; } @keyframes ml-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 1.5deg)); } } @media (prefers-reduced-motion: reduce) { .hero--graffiti .fly { animation: none; } } /* Ticker tape: two bands crossing on an angle, like tape across a wall */ .hero.hero--graffiti { z-index: 3; } .hero--graffiti .hero-tape { position: relative; z-index: 4; overflow: hidden; height: 170px; margin-top: -50px; margin-bottom: -60px; pointer-events: none; } .hero--graffiti .hero-tickers { position: absolute; left: -6%; right: -6%; top: 50%; margin: 0; background: var(--ml-pink); padding: 14px 0 12px; border: 0; overflow: hidden; transform: translateY(-50%) rotate(-3deg); box-shadow: 0 10px 30px rgba(0,0,0,.45); } .hero--graffiti .hero-tickers--under { background: var(--ml-ink, #0E0E10); border-top: 2px solid var(--ml-blue); border-bottom: 2px solid var(--ml-blue); transform: translateY(-50%) rotate(3.4deg); } .hero--graffiti .hero-tickers--under .ticker-track { animation-direction: reverse; } .hero--graffiti .ticker-track { gap: 0; } .hero--graffiti .ticker-track span, .hero--graffiti .ticker-track span.alt { color: var(--ml-ink, #0E0E10); font-family: var(--display); font-size: 24px; letter-spacing: .02em; -webkit-text-stroke: 0; text-shadow: none; opacity: 1; } .hero--graffiti .hero-tickers--under .ticker-track span, .hero--graffiti .hero-tickers--under .ticker-track span.alt { color: var(--ml-blue); } .hero--graffiti .ticker-track span::after { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin: 0 30px; vertical-align: middle; } @media (max-width: 860px) { .hero.hero--graffiti { padding-top: 132px; } .hero--graffiti .hero-grid--graffiti { grid-template-columns: 1fr; padding: 0 20px 40px; gap: 10px; } .hero--graffiti .hero-h1--art img { height: auto; width: min(78vw, 330px); margin-left: -6px; } .hero--graffiti .hero-art--flying { width: min(440px, 96%); margin-top: 18px; } .hero--graffiti .hero-art--solo { width: min(380px, 92%); } .hero--graffiti .lead { font-size: 18px; } .hero--graffiti .hero-tape { height: 130px; margin-top: -30px; margin-bottom: -44px; } .hero--graffiti .hero-tickers { transform: translateY(-50%) rotate(-4deg); } .hero--graffiti .hero-tickers--under { transform: translateY(-50%) rotate(3deg); } .hero--graffiti .ticker-track span, .hero--graffiti .ticker-track span.alt { font-size: 18px; } } /* Every other scrolling ribbon on the site sits on the same angle */ .marquee-wrap { position: relative; z-index: 2; overflow: hidden; padding: 46px 0; margin: -20px 0; } .marquee { position: relative; z-index: 2; transform: rotate(-2.5deg); margin: 0 -4% !important; width: 108%; box-shadow: 0 10px 30px rgba(0,0,0,.4); } @media (max-width: 640px) { .marquee-wrap { padding: 30px 0; } .marquee { margin: 0 -6% !important; width: 112%; } } @media (prefers-reduced-motion: reduce) { .hero--graffiti .ticker-track { animation: none; } } /* ============================================================ WEEKLY DEALS GRID Live days are full cards with a drip day badge; days still to come shrink to one row of tiles with a stamp. ============================================================ */ .week-grid { grid-template-columns: repeat(21, 1fr) !important; gap: 18px; } .week-grid .week-card { grid-column: span 7 !important; min-height: 380px; } .week-card:not(.is-soon) .day-tag { display: none; } .week-card:not(.is-soon)::after { position: absolute; top: 14px; right: 16px; z-index: 3; width: 92px; aspect-ratio: 442 / 485; display: grid; place-items: start center; padding-top: 25px; box-sizing: border-box; background: var(--ml-drip-blue) center top / contain no-repeat; font-family: var(--display); font-size: 25px; line-height: 1; letter-spacing: -.01em; color: var(--ml-ink, #0E0E10); content: ""; } .week-card.mon:not(.is-soon)::after, .week-card.mon-2:not(.is-soon)::after { content: "MON"; } .week-card.tue:not(.is-soon)::after { content: "TUE"; background-image: var(--ml-drip-pink); aspect-ratio: 320 / 373; width: 84px; padding-top: 25px; } .week-card.wed:not(.is-soon)::after { content: "WED"; } .week-card.thu:not(.is-soon)::after { content: "THU"; background-image: var(--ml-drip-pink); aspect-ratio: 320 / 373; width: 84px; } .week-card.fri:not(.is-soon)::after { content: "FRI"; } .week-card.sat:not(.is-soon)::after { content: "SAT"; background-image: var(--ml-drip-pink); aspect-ratio: 320 / 373; width: 84px; } .week-card.sun:not(.is-soon)::after { content: "SUN"; } .week-card.hour::after, .week-card.lunch::after { content: none; } .week-card .time { font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--ml-blue); background: none; border: 0; box-shadow: none; padding: 0; transform: none; margin-top: 8px; } .week-card:hover .time { transform: none; box-shadow: none; } .week-grid .week-card.is-soon { grid-column: span 3 !important; min-height: 140px; align-items: stretch; background: transparent; border: 2px dashed #2E2E34; box-shadow: none; } .week-card.is-soon:hover, .week-card.is-soon:focus-within { transform: none; border-color: var(--ml-pink); } .week-card.is-soon .bg, .week-card.is-soon::before, .week-card.is-soon p { display: none; } .week-card.is-soon .content { justify-content: space-between; padding: 18px 14px 20px 16px; gap: 22px; } .week-card.is-soon .day-tag { font-family: var(--display); font-size: 19px; line-height: 1; text-transform: uppercase; color: #B7B7BD; transform: none; margin: 0; } .week-card.is-soon h3 { align-self: flex-start; transform: rotate(-6deg); font-size: 14px; line-height: 1; letter-spacing: .06em; color: var(--ml-pink) !important; white-space: nowrap; padding: .36em .55em .3em; border: 3px solid currentColor; border-radius: 10px; background: rgba(5,5,5,.55); } .week-card.is-soon h3 br { display: none; } .week-card.is-soon:hover h3 { transform: rotate(-6deg); } @media (max-width: 980px) { .week-grid { grid-template-columns: repeat(6, 1fr) !important; } .week-grid .week-card { grid-column: span 3 !important; } .week-grid .week-card.is-soon { grid-column: span 2 !important; } } @media (max-width: 640px) { .week-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; } .week-grid .week-card { grid-column: 1 / -1 !important; min-height: 340px; } .week-grid .week-card.is-soon { grid-column: span 1 !important; min-height: 120px; } } /* ---------- Script is a spice: once per page at most ---------- Every small script kicker becomes a tracked label in the body face. */ .product-card .tag, .monthly-card .meta, .bp-polaroid__name, .page-hero .crumb, .block-note, .feature-tag { font-family: var(--body); font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; transform: none; } .stat .num, .may-price { font-family: var(--display); } /* Page kickers, card sub-lines and stat labels: label style */ .crumb, .bb-recipes-eyebrow, .bb-empty__hint, .bg-stat .lbl, .ck-stat .lbl, .ds-stat .lbl, .sh-stat .lbl, .sd-stat .lbl, span.tag, .body .meta, .eyebrow-chip, .day-info .when { font-family: var(--body) !important; font-weight: 700; font-size: 13px !important; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; transform: none !important; } /* Names and small headings that were script: block type */ .art .stamp, .pkg-card .name, .menu-cat h3 { font-family: var(--display) !important; text-transform: uppercase; letter-spacing: .02em; transform: none; } .menu-cat h3 { font-size: 26px !important; } .pkg-card .name { font-size: 22px !important; } .art .stamp { font-size: 12px !important; line-height: 1.05; } /* Menu page block heads sit left, like the menu */ .block-head { text-align: left; } .block-head > * { margin-left: 0; } /* Any heading block holding painted lettering sits left, like the menu board */ :has(> h2.gh) { text-align: left !important; margin-left: 0 !important; } :has(> h2.gh) > p { margin-left: 0; } /* ---------- Contrast fixes for the brighter paint colours ---------- */ /* .age-gate__btn colours now set in age-gate.js (28 Oct 2026 redesign) */ .ct-store__state { color: #B6356B !important; } .dl-step__num { color: #006C82 !important; } /* ============================================================ INNER PAGES · rollout pass 1 (25 Oct 2026) ============================================================ */ /* Menu page heroes (burgers, shakes, sides, desserts): the homepage treatment. Menu brick, copy on the left, ONE flying menu item on the right. The full-bleed food photo is replaced. */ .ml-cathero.ml-cathero--fly { background-color: #0A0A0C; background-image: radial-gradient(55% 75% at 76% 50%, rgba(234,143,181,.14) 0%, rgba(234,143,181,0) 70%), radial-gradient(110% 90% at 30% 40%, rgba(10,10,12,.25) 0%, rgba(10,10,12,.7) 70%, rgba(10,10,12,.92) 100%), var(--ml-brick); background-size: cover, cover, cover; background-position: center, center, center; padding: 150px 0 90px; } .ml-cathero.ml-cathero--fly::after { display: none; } .ml-cathero--fly .container { position: relative; min-height: 420px; } .ml-cathero--fly .container > :not(.ml-hero-fly) { max-width: min(560px, 50%); } .ml-cathero--fly .ml-hero-fly { position: absolute; right: 0; top: 50%; width: min(46%, 560px); height: auto; --r: -4deg; transform: translateY(-50%) rotate(var(--r)); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); animation: ml-float-y 6.5s ease-in-out infinite; } @keyframes ml-float-y { 0%, 100% { transform: translateY(-50%) rotate(var(--r)); } 50% { transform: translateY(calc(-50% - 12px)) rotate(calc(var(--r) + 1.5deg)); } } @media (prefers-reduced-motion: reduce) { .ml-cathero--fly .ml-hero-fly { animation: none; } } @media (max-width: 900px) { .ml-cathero.ml-cathero--fly { padding: 120px 0 56px; } .ml-cathero--fly .container { min-height: 0; } .ml-cathero--fly .container > :not(.ml-hero-fly) { max-width: none; } .ml-cathero--fly .ml-hero-fly { position: relative; right: auto; top: auto; display: block; width: min(400px, 86%); margin: 28px auto 0; animation: none; transform: rotate(var(--r)); } } /* Hero eyebrows are retired like the section ones. The cocktails line stays because it carries the 18+ notice. */ [class*="-hero"] > .container > .crumb, [class*="-hero"] .copy > .crumb, [class*="-hero"] [class*="__eyebrow"] { display: none; } .ck-hero .copy > .crumb { display: inline-block; color: var(--ml-blue); } /* Text-only page heads sit on the menu brick instead of a coloured haze */ .page-hero:not(.loc-hero), .dl-hero, .gc-hero { background-color: #0A0A0C !important; background-image: radial-gradient(110% 90% at 30% 40%, rgba(10,10,12,.3) 0%, rgba(10,10,12,.72) 70%, rgba(10,10,12,.94) 100%), var(--ml-brick) !important; background-size: cover, cover !important; background-position: center, center !important; } .page-hero:not(.loc-hero)::before, .page-hero:not(.loc-hero)::after, .dl-hero::before, .dl-hero::after { opacity: 0; } /* Centred page heads move left like every other heading */ .page-hero:not(.loc-hero) .container { text-align: left; } .page-hero:not(.loc-hero) .container > * { margin-left: 0; margin-right: auto; } .page-hero:not(.loc-hero) > .container { max-width: var(--max, 1320px); } .page-hero:not(.loc-hero) .section-title { max-width: 14em; } [class*="-hero"] > .container > div > .crumb { display: none; } /* Section heads on the content pages (functions, franchise, about, menu pages) sit left. Stand-alone call-to-action banners stay centred. */ section .head { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } section .head > p, section .head > .section-sub { margin-left: 0 !important; margin-right: auto !important; } .ab-section__title { text-align: left !important; } .ab-section__title + p { text-align: left; margin-left: 0; } .bb-recipes-head { text-align: left; } /* Enter Feast Mode is always the white spray lettering, never type */ .brick-break__title--art { line-height: 0; font-size: 0; margin: 0 0 22px; } .brick-break__title--art img { display: block; width: auto; height: clamp(200px, 22vw, 300px); max-width: 100%; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); } /* Pink bands (franchise, community): the graffiti texture was multiplied in at 35%, which turned the lighter pink a muddy mauve. Keep it as a whisper so the band reads as the real Milky Lane pink. */ .franchise-section::before { opacity: .1 !important; } /* Pink CTA banner (menu pages): flat Milky Lane pink, no dark magenta gradient, no darkening wash. */ .cta-banner { background: var(--ml-pink) !important; } .cta-banner::before { opacity: .08 !important; } .cta-banner::after { display: none !important; } .cta-banner h2 { color: var(--ml-ink, #0E0E10); } .cta-banner h2 .stroke { color: var(--ml-ink, #0E0E10) !important; -webkit-text-stroke: 0 !important; } /* Menu block heads: lettering, then the one-line bi-line underneath it, both on the left (it used to float to the far right). */ .block-head { flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 10px; } .block-head .right { text-align: left; } .block-head .right p { max-width: 36em; font-size: 17px; color: #B7B7BD; } /* Painted lettering never lazy-pops in late; reserve its height */ h2.gh .gh__img { min-height: 1px; } /* Specials page: the days still to come were seven full-height rows of "Coming Soon". They now sit in one row of tiles under the live deals, matching the homepage. */ #weekly > .container { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 14px; } #weekly > .container > .head, #weekly > .container > .day-row:not(.is-soon) { grid-column: 1 / -1; } #weekly .day-row.is-soon { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 18px 14px 20px 16px; margin-top: 36px; min-height: 140px; border: 2px dashed #2E2E34; border-radius: 18px; background: transparent; } #weekly .day-row.is-soon::before, #weekly .day-row.is-soon::after { display: none; } #weekly .day-row.is-soon .day-art, #weekly .day-row.is-soon .lede { display: none; } #weekly .day-row.is-soon .day-info { display: contents; } #weekly .day-row.is-soon .day-tag { font-family: var(--display); font-size: 19px; line-height: 1; text-transform: uppercase; color: #B7B7BD; background: none; padding: 0; border: 0; transform: none; margin: 0; } #weekly .day-row.is-soon h3 { align-self: flex-start; transform: rotate(-6deg); font-size: 14px !important; line-height: 1; margin: 0; letter-spacing: .06em; color: var(--ml-pink) !important; white-space: nowrap; padding: .36em .55em .3em; border: 3px solid currentColor; border-radius: 10px; background: rgba(5,5,5,.55); } #weekly .day-row.is-soon h3 .pink { color: inherit; } #weekly .day-row.is-soon:hover { border-color: var(--ml-pink); } @media (max-width: 980px) { #weekly > .container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { #weekly > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } #weekly .day-row.is-soon { margin-top: 16px; } } /* Function enquiry form: the real checkbox inside each pill was showing on top of the label text. The pill itself shows the state. */ .check-pill { position: relative; } .check-pill input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; } .check-pill:focus-within { outline: 3px solid var(--ml-blue); outline-offset: 3px; } .check-pill:has(input:checked) { background: var(--ml-pink); border-color: var(--ml-pink); color: var(--ml-ink, #0E0E10); } /* Functions add-ons: 6 cards fill two even rows instead of 5 + 1 */ .addon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 640px) { .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Form panels and the franchise hero chip: block headings, no eyebrows */ .fr-form-wrap .head h2, .fn-form-wrap .head h2 { font-family: var(--display) !important; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; font-size: clamp(34px, 4vw, 52px) !important; color: var(--ml-white); } .fr-hero .eyebrow-chip { display: none !important; } /* Pink bands: headings and copy in ink (the head-colour rotation painted some of them pink on pink) */ .ab-cta h2, .ct-social h2, .cta-banner h2, .ab-cta h2 *, .ct-social h2 * { color: var(--ml-ink, #0E0E10) !important; } .ab-cta p, .ct-social p { color: var(--ml-ink, #0E0E10); } /* Homepage venues: nine stores sit in an even 3 x 3 */ #locGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { #locGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #locGrid { grid-template-columns: 1fr; } } /* ---------- Homepage trim, 25 Oct 2026 ---------- Six sections: hero, weekly deals (live deals only), the menu rail, find your lane, functions, and one pink link band. */ .week-grid--live .week-card { min-height: 420px; } .week-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .week-cta__tcs { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: #fff; opacity: .75; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; } .week-cta__tcs:hover { opacity: 1; } @media (max-width: 980px) { .week-grid--live { grid-template-columns: repeat(3, 1fr) !important; } .week-grid--live .week-card { grid-column: span 1 !important; min-height: 360px; } } @media (max-width: 640px) { /* a swipe rail on phones, so three deals cost one screen, not three */ .week-grid--live { display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin-right: calc(-1 * 24px); padding-right: 24px; scrollbar-width: none; } .week-grid--live::-webkit-scrollbar { display: none; } .week-grid--live .week-card { grid-column: auto !important; min-height: 340px; scroll-snap-align: start; } } .link-band { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); padding: 0; position: relative; } .link-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .link-band__item { display: flex; flex-direction: column; gap: 12px; padding: 56px 32px 52px; color: inherit; text-decoration: none; transition: background-color .15s ease; } .link-band__item + .link-band__item { border-left: 2px solid rgba(14,14,16,.18); } .link-band__item:hover { background: var(--ml-pink-bright); } .link-band__item:focus-visible { outline: 3px solid var(--ml-ink, #0E0E10); outline-offset: -6px; } .link-band__item h2 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.2vw, 44px); line-height: .92; color: inherit; } .link-band__item h2 em { font-style: normal; } .link-band__item p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 30ch; color: inherit; } .link-band__go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } .link-band__item:hover .link-band__go .mli { transform: translateX(4px); } .link-band__go .mli { transition: transform .15s ease; } @media (max-width: 860px) { .link-band__grid { grid-template-columns: 1fr; } .link-band__item { padding: 34px 4px 32px; } .link-band__item + .link-band__item { border-left: 0; border-top: 2px solid rgba(14,14,16,.18); } } @media (max-width: 640px) { /* nine venue cards stacked ran ~3,000px on a phone: swipe rail instead */ #locGrid { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin-right: -24px; padding-right: 24px; scrollbar-width: none; } #locGrid::-webkit-scrollbar { display: none; } #locGrid > * { scroll-snap-align: start; } } /* ---------- Pinned phone bar: venue, Order, Book (25 Oct 2026) ---------- */ #mlMobileOrderBar .mob-bar-inner { grid-template-columns: 1fr auto auto; gap: 8px; } #mlMobileOrderBar .mob-bar-store { appearance: none; background: none; border: 0; padding: 4px 2px; text-align: left; cursor: pointer; display: flex; flex-direction: column; min-width: 0; color: #fff; } #mlMobileOrderBar .mob-bar-store__label { font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-blue); } #mlMobileOrderBar .mob-bar-store__name { font-family: var(--display); font-size: 16px; text-transform: uppercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; } #mlMobileOrderBar .mob-bar-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 46px; padding: 0 16px; border-radius: 6px; font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } #mlMobileOrderBar .mob-bar-btn--order { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); } #mlMobileOrderBar .mob-bar-btn--book { background: transparent; color: #fff; border: 2px solid var(--ml-blue); } #mlMobileOrderBar .mob-bar-btn:focus-visible, #mlMobileOrderBar .mob-bar-store:focus-visible { outline: 3px solid var(--ml-blue); outline-offset: 2px; } /* ---------- Venue pages /restaurants// (25 Oct 2026) ---------- */ .vn { display: block; } .vn-hero { position: relative; padding: 150px 0 72px; background-color: #0A0A0C; background-image: radial-gradient(120% 90% at 50% 40%, rgba(10,10,12,.35) 0%, rgba(10,10,12,.75) 70%, rgba(10,10,12,.95) 100%), var(--ml-brick); background-size: cover; background-position: center; } .vn-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; max-width: var(--max, 1240px); } .vn-back { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-blue); text-decoration: none; } .vn-back::before { content: ""; width: 14px; height: 2px; background: currentColor; } .vn-title { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 7vw, 96px); line-height: .88; letter-spacing: -.01em; color: #fff; } .vn-title span { display: block; color: var(--ml-pink); } .vn-lead { margin: 18px 0 0; font-size: 19px; line-height: 1.5; color: #D6D6DC; max-width: 34em; } .vn-status { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .vn-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #8A8A92; } .vn-status.is-open::before { background: #4BE38A; box-shadow: 0 0 10px rgba(75,227,138,.7); } .vn-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .vn-hero__photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 80px rgba(0,0,0,.55); } .vn-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .vn-info { padding: 56px 0; background: #0E0E10; } .vn-info__grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 20px; max-width: var(--max, 1240px); } .vn-card { background: #1A1A1E; border-radius: 18px; padding: 28px 26px; color: #E9E9EE; } .vn-h { margin: 0 0 14px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; color: #fff; } .vn-address { margin: 0; font-size: 18px; line-height: 1.45; color: #fff; } .vn-note { margin: 10px 0 0; color: #B7B7BD; font-size: 15px; line-height: 1.5; } .vn-links { margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; } .vn-links a, .vn-card a { color: var(--ml-blue); text-decoration: none; font-weight: 700; } .vn-links a:hover, .vn-card a:hover { text-decoration: underline; } .vn-hours { width: 100%; border-collapse: collapse; font-size: 15px; } .vn-hours th, .vn-hours td { padding: 7px 0; text-align: left; border-bottom: 1px solid #2E2E34; color: #D6D6DC; font-weight: 400; } .vn-hours thead th { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #B7B7BD; } .vn-hours tbody th { font-weight: 700; color: #fff; width: 34%; } .vn-hours tr.is-today th, .vn-hours tr.is-today td { color: var(--ml-pink); } .vn-hours tr.is-today th::after { content: " · today"; font-weight: 400; font-size: 12px; } .vn-phone { font-family: var(--display); font-size: 24px; letter-spacing: .02em; color: #fff !important; } .vn-services { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .vn-services li { padding: 6px 12px; border-radius: 999px; border: 1px solid #3A3A42; font-size: 13px; color: #D6D6DC; } .vn-menu { padding: 72px 0; background: #0E0E10; } .vn-menu__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; } .vn-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 6px; border: 2px solid #3A3A42; color: #fff; text-decoration: none; font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .vn-chip:hover { border-color: var(--ml-pink); color: var(--ml-pink); } .vn-chip--blue { border-color: var(--ml-blue); color: var(--ml-blue); } .vn-party { background: var(--ml-pink); color: var(--ml-ink, #0E0E10); padding: 56px 0; } .vn-party__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--max, 1240px); } .vn-party h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 56px); line-height: .9; color: inherit; } .vn-party h2 em { font-style: normal; } .vn-party p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 40em; color: inherit; } .vn-party__btn { background: var(--ml-ink, #0E0E10) !important; color: #fff !important; border-color: var(--ml-ink, #0E0E10) !important; white-space: nowrap; } .vn-about { padding: 80px 0; background: #0E0E10; } .vn-about__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; max-width: var(--max, 1240px); align-items: start; } .vn-h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); line-height: .95; color: #fff; } .vn-about__copy p { margin: 0 0 16px; color: #C9C9CF; font-size: 16px; line-height: 1.7; max-width: 68ch; } .vn-about__copy a, .vn-faq a { color: var(--ml-blue); } .vn-faq details { border-bottom: 1px solid #2E2E34; } .vn-faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 700; color: #fff; font-size: 16px; line-height: 1.4; } .vn-faq summary::-webkit-details-marker { display: none; } .vn-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--display); font-size: 22px; color: var(--ml-pink); } .vn-faq details[open] summary::after { content: "–"; } .vn-faq details > div { padding: 0 0 18px; color: #C9C9CF; font-size: 15px; line-height: 1.65; } .vn-more { padding: 64px 0 88px; background: #0A0A0C; } .vn-more__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .vn-more__list a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #1A1A1E; color: #fff; text-decoration: none; font-family: var(--display); font-size: 18px; text-transform: uppercase; } .vn-more__list a span { font-size: 11px; letter-spacing: .16em; color: var(--ml-blue); } .vn-more__list a:hover { background: #24242A; color: var(--ml-pink); } @media (max-width: 980px) { .vn-hero { padding: 120px 0 48px; } .vn-hero__grid, .vn-about__grid { grid-template-columns: 1fr; gap: 32px; } .vn-info__grid { grid-template-columns: 1fr; } .vn-party__inner { flex-direction: column; align-items: flex-start; } .vn-more__list { grid-template-columns: repeat(2, 1fr); } } .vn-menu__head { margin-bottom: 18px; } .vn-menu__head p { margin: 0; color: #C9C9CF; font-size: 17px; line-height: 1.6; max-width: 46em; } /* ---------- Photo heroes on the brick (cocktails, kids, about) · 25 Oct 2026 ---------- The full-bleed photo becomes a framed real photo beside the copy, on the menu brick, so these pages match the menu pages without inventing food. */ .ml-cathero.ml-cathero--photo { --cathero-img: none !important; background-color: #0A0A0C; background-image: radial-gradient(55% 75% at 76% 50%, rgba(234,143,181,.12) 0%, rgba(234,143,181,0) 70%), radial-gradient(120% 90% at 50% 40%, rgba(10,10,12,.35) 0%, rgba(10,10,12,.78) 70%, rgba(10,10,12,.95) 100%), var(--ml-brick) !important; background-size: cover !important; background-position: center !important; padding: 150px 0 80px; } .ml-cathero--photo::before, .ml-cathero--photo::after { display: none !important; } .ml-cathero--photo .container { position: relative; min-height: 440px; display: block; } .ml-cathero--photo .container > :not(.ml-hero-photo) { max-width: min(560px, 52%); } .ml-hero-photo { position: absolute; right: 0; top: 50%; width: min(44%, 540px); margin: 0; transform: translateY(-50%) rotate(2.5deg); border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 6px #fff; } .ml-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .ml-cathero.ml-cathero--photo { padding: 120px 0 56px; } .ml-cathero--photo .container { min-height: 0; } .ml-cathero--photo .container > :not(.ml-hero-photo) { max-width: none; } .ml-hero-photo { position: relative; right: auto; top: auto; transform: rotate(2deg); width: min(420px, 88%); margin: 0 auto 28px; aspect-ratio: 4 / 3; } } /* the cocktails 18+ line must always show (a later hero rule was hiding it) */ section.ck-hero > .container > .copy > .crumb { display: inline-block !important; color: var(--ml-blue); } /* ---------- Feast Mode Club sign-up (footer) · 25 Oct 2026 ---------- */ .footer-signup.ml-club { display: grid !important; grid-template-columns: 1fr 1.5fr !important; gap: 40px; align-items: start; margin: 40px 0 48px !important; padding: 40px 0 !important; border-top: 2px solid rgba(234,143,181,.35) !important; border-bottom: 1px solid #2E2E34 !important; } .ml-club__title { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4vw, 52px); line-height: .9; color: #fff; } .ml-club__title span { color: var(--ml-pink); } .ml-club__sub { margin: 14px 0 0; color: #C9C9CF; font-size: 16px; line-height: 1.6; max-width: 30em; } .ml-club__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .ml-club__field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; } .ml-club__field > span, .ml-club__field > legend { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #B7B7BD; padding: 0; } .ml-club__field em { font-style: normal; text-transform: none; letter-spacing: 0; color: #8A8A92; font-family: var(--body); } .ml-club__field input, .ml-club__field select { height: 48px; width: 100%; padding: 0 14px; border-radius: 6px; border: 2px solid #2E2E34; background: #141418; color: #fff; font: 500 16px/1 var(--body); appearance: none; -webkit-appearance: none; } .ml-club__field select { background-image: linear-gradient(45deg, transparent 50%, #B7B7BD 50%), linear-gradient(135deg, #B7B7BD 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; } .ml-club__field input:focus, .ml-club__field select:focus { outline: none; border-color: var(--ml-pink); } .ml-club__bday { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; } .ml-club__bday legend { grid-column: 1 / -1; margin-bottom: 6px; } .ml-club__check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; color: #C9C9CF; font-size: 14px; line-height: 1.4; cursor: pointer; } .ml-club__check input { width: 20px; height: 20px; accent-color: var(--ml-pink); margin: 0; flex: none; } .ml-club__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; } .ml-club__row button { height: 50px; padding: 0 26px; border: 0; border-radius: 6px; background: var(--ml-pink); color: var(--ml-ink, #0E0E10); cursor: pointer; font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; } .ml-club__row button:hover { background: var(--ml-pink-bright); } .ml-club__row button:focus-visible { outline: 3px solid var(--ml-blue); outline-offset: 3px; } .ml-club__row button:disabled { opacity: .7; cursor: default; } .ml-club__meta { color: #8A8A92; font-size: 13px; } .ml-club__meta a { color: #B7B7BD; } .ml-club__msg { margin: 12px 0 0; font-weight: 700; font-size: 15px; min-height: 1.4em; } .ml-club__msg.is-ok { color: #4BE38A; } .ml-club__msg.is-err { color: var(--ml-pink); } @media (max-width: 860px) { .footer-signup.ml-club { grid-template-columns: 1fr !important; gap: 22px; } .ml-club__grid { grid-template-columns: 1fr; } } /* ---------- Inner pages round, 25 Oct 2026 ---------- Menu pages are for choosing food: the filler stat strips ("1m+ sold", "100% smashed") and the full-screen artwork bands come off. Hidden, not deleted: .menu-block grounds alternate with :nth-of-type, which counts these sections, so removing them would flip every colour after them. */ .bg-stats, .sd-stats, .sh-stats, .ck-stats, .ds-stats { display: none !important; } body:has(.bg-hero, .sd-hero, .sh-hero, .ck-hero, .ds-hero) .ml-divider, body:has(.bg-hero, .sd-hero, .sh-hero, .ck-hero, .ds-hero) .brick-break:not(.brick-break--tagline) { display: none !important; } /* elsewhere the artwork bands stay, but never a full phone screen tall */ @media (max-width: 720px) { .ml-divider { max-height: 46vh; overflow: hidden; } .ml-divider .ml-divider__art { max-height: 46vh; object-fit: cover; width: 100%; } } /* Two cards a row on phones: the food is the picture and the name, the detail is a tap away. Halves the scroll on every menu page. */ @media (max-width: 640px) { .burger-grid, .sd-grid, .shake-grid, .ds-grid, .item-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .burger-grid > *, .sd-grid > *, .shake-grid > *, .ds-grid > *, .item-grid > * { min-width: 0; margin: 0 !important; } .burger-card .body, .sd-card .body, .shake-card .body, .ds-card .body, .item-card .body { padding: 12px 12px 14px !important; } .burger-card h3, .sd-card h3, .shake-card h3, .ds-card h3, .item-card h3 { font-size: 17px !important; line-height: 1.05 !important; } .burger-card .tag, .sd-card .tag, .shake-card .tag, .ds-card .tag, .item-card .tag { font-size: 10px !important; letter-spacing: .1em !important; } .burger-card .lede, .sd-card .lede, .shake-card .lede, .ds-card .lede, .item-card .lede, .burger-card .ingredients, .burger-card .upgrade, .burger-card .meta-row .order { display: none !important; } .price-stamp { transform: scale(.8); transform-origin: top right; } } @media (max-width: 640px) { .burger-grid .burger-card { min-height: 250px !important; } .burger-card .art img { object-position: center 30%; } } @media (max-width: 640px) { .sd-card .ingredients, .shake-card .ingredients, .ds-card .ingredients, .sd-card .meta { display: none !important; } .sd-card .tag, .shake-card .tag { font-size: 11px !important; } } @media (max-width: 640px) { /* footer: keep the 44px tap targets, drop the extra gap between them */ .site-footer .footer-col ul { gap: 0 !important; } .site-footer .footer-brand p { display: none; } .site-footer .footer-grid { gap: 24px 20px !important; } } /* ---------- Phone menu tiles (25 Oct 2026, v2) ---------- One tile for every menu card on a phone: a square picture, a small drip price, the name, and one short line. Everything else (description, ingredient chips, per-card Order buttons, tier chips) is for the bigger screen; ordering on a phone is the pinned bar. */ @media (max-width: 640px) { .burger-grid, .sd-grid, .shake-grid, .ds-grid, .item-grid { align-items: stretch !important; gap: 10px !important; } .burger-card, .sd-card, .shake-card, .ds-card, .item-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: #141418 !important; border: 1px solid #26262C !important; border-radius: 14px !important; overflow: hidden !important; transform: none !important; box-shadow: none !important; } .burger-card::before, .burger-card::after, .shake-card::before, .shake-card::after, .sd-card::before, .sd-card::after, .ds-card::before, .ds-card::after, .item-card::before, .item-card::after { display: none !important; } /* the picture */ .burger-card .art, .sd-card .art, .shake-card .art, .ds-card .art, .item-card .img-wrap { position: relative !important; inset: auto !important; order: 0; width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: radial-gradient(70% 70% at 50% 55%, rgba(234,143,181,.16), transparent 70%), #0C0C0F !important; border-radius: 0 !important; overflow: hidden !important; } .burger-card .art img, .sd-card .art img, .ds-card .art img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; transform: none !important; } .shake-card .art img, .item-card .img-wrap img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 10px !important; box-sizing: border-box !important; transform: none !important; } .shake-card .art .hover-video { display: none !important; } .burger-card .art .tier, .sd-card .art .tag, .shake-card .art .tier, .ds-card .art .tag, .shake-card .art .boozy-chip { display: none !important; } /* price: a small drip in the corner of the picture */ .burger-card .price-stamp, .sd-card .price-stamp, .shake-card .price-stamp, .item-card .price-stamp { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; bottom: auto !important; transform: scale(.72) !important; transform-origin: top right !important; z-index: 3 !important; } .item-card { position: relative !important; } .item-card > .price-stamp { top: 6px !important; } /* words */ .burger-card .body, .sd-card .body, .shake-card .body, .ds-card .body { position: relative !important; inset: auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 10px 12px 12px !important; margin: 0 !important; background: none !important; width: auto !important; flex: 1 1 auto; } .burger-card h3, .sd-card h3, .shake-card h3, .ds-card h3, .item-card h3 { margin: 0 !important; font-family: var(--display) !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 15px !important; line-height: 1.08 !important; letter-spacing: .01em !important; color: #fff !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-card h3 { padding: 10px 12px 0 !important; } .shake-card h3 .name-link { all: unset; font: inherit; color: inherit; text-transform: inherit; } .burger-card .tag, .sd-card .meta, .shake-card .tag, .ds-card .meta, .item-card > p { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; font-family: var(--body) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; line-height: 1.35 !important; color: #A7A7AF !important; } .item-card > p { padding: 4px 12px 12px !important; } .item-card .mocktail-note { position: static !important; order: 2; display: inline-block !important; transform: none !important; margin: 6px 12px 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--display) !important; font-size: 11px !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ml-blue) !important; } .item-card .img-wrap { order: 0; } .item-card h3 { order: 1; } .item-card .mocktail-note { order: 2; } .item-card > p { order: 3; } .burger-card .lede, .burger-card .ingredients, .burger-card .upgrade, .burger-card .meta-row, .sd-card .lede, .sd-card .ingredients, .sd-card .meta-row, .shake-card .lede, .shake-card .ingredients, .shake-card .meta-row, .ds-card .lede, .ds-card .ingredients, .ds-card .meta-row, .item-card .row { display: none !important; } .burger-card .name-row, .sd-card .name-row { display: block !important; margin: 0 !important; } } @media (max-width: 640px) { .item-card h3 { min-height: 0 !important; margin: 0 !important; } .item-card > p { padding: 0 !important; margin: 4px 12px 12px !important; max-height: calc(12px * 1.35 * 2) !important; } .item-card .mocktail-note { margin: 4px 12px 0 !important; line-height: 1.2 !important; } .shake-card h3::after, .shake-card h3 .name-link::after, .shake-card h3 .name-link::before { display: none !important; content: none !important; } } @media (max-width: 640px) { .burger-card h3, .sd-card h3, .shake-card h3, .ds-card h3, .item-card h3 { -webkit-line-clamp: 3 !important; } } @media (max-width: 640px) { .sd-card .body .ctas, .burger-card .body .ctas, .shake-card .body .ctas, .ds-card .body .ctas { display: none !important; } /* a missing picture never prints its alt text over the tile */ .burger-card .art img, .sd-card .art img, .shake-card .art img, .ds-card .art img, .item-card .img-wrap img { color: transparent !important; font-size: 0 !important; } } /* ---------- Accessibility pass, 25 Oct 2026 ---------- */ .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; } .skip-link { position: fixed; left: 12px; top: -60px; z-index: 10000; padding: 12px 18px; border-radius: 6px; background: var(--ml-pink); color: var(--ml-ink, #0E0E10); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 12px; outline: 3px solid var(--ml-blue); outline-offset: 3px; } main#main:focus { outline: none; } .ml-club__meta a { text-decoration: underline; text-underline-offset: 2px; } /* links inside running text are underlined, not just pink (WCAG 1.4.1) */ main p a:not([class*="btn"]):not(.order):not(.vn-chip), main .lede a:not([class*="btn"]), .vn-faq a, .vn-about__copy a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* phones get the 800w brick (the preload in each page's head asks for the same file) */ @media (max-width: 800px) { :root { --ml-brick: url("images/brand/brick-menu-800w.webp"); } } .site-footer .footer-brand img { height: 64px !important; width: auto !important; } /* Locations cards: Book a Table on every card (25 Oct 2026) */ .store-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .store-book-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 6px; background: var(--ml-pink); color: var(--ml-ink, #0E0E10); text-decoration: none; font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .store-book-btn:hover { background: var(--ml-pink-bright); } .store-book-btn:focus-visible { outline: 3px solid var(--ml-blue); outline-offset: 3px; } @media (max-width: 640px) { .store-card .store-photo { aspect-ratio: 16 / 9 !important; height: auto !important; } } .drop-wait { grid-column: 1 / -1; padding: 8px 0 24px; } /* Hero tape on wide screens (26 Oct 2026): at 2000px the rotated bands were taller than the 170px strip and shorter than the screen, so their corners were clipped flat and the ends showed. The strip now grows with the width and the bands overhang far enough that no end is ever on screen. */ .hero--graffiti .hero-tape { height: max(170px, calc(60px + 8vw)); margin-top: min(-50px, calc(-8px - 2.6vw)); margin-bottom: min(-60px, calc(-12px - 3.2vw)); } .hero--graffiti .hero-tickers { left: -20%; right: -20%; } @media (max-width: 860px) { .hero--graffiti .hero-tape { height: 130px; margin-top: -30px; margin-bottom: -44px; } } /* the track is three times longer now (a half must outrun a 2560px screen), so slow it to the same speed */ .hero--graffiti .ticker-track { animation-duration: 90s; } /* ---------- Make it feel fast (26 Oct 2026) ---------- 1. Content is there when you scroll to it. The fade-and-slide reveals left up to 59 blocks a page invisible until they animated in. 2. No full-screen grain layer: a fixed overlay with a blend mode makes the browser re-blend the whole screen on every scroll frame. 3. No background blur on phones (header, bars, cards): the most expensive effect a phone can paint while scrolling. Solid backgrounds instead. */ .reveal, .reveal-on-scroll, [data-reveal], .reveal.in, .is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .film-grain { display: none !important; } #mlPageWipe { display: none !important; } @media (max-width: 900px) { *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header.scrolled, .site-header.scrolled::before { background: rgba(10,10,12,.97) !important; } #mlMobileOrderBar { background: #0A0A0C !important; } } /* The promo strip above the header is gone from every page, but its phone offsets stayed: a 28px gap above the header that the page showed through, and the mobile menu opening 32px low. Only offset when a strip exists. */ @media (max-width: 720px) { body:not(:has(.promo-strip)) { padding-top: 0 !important; } body:not(:has(.promo-strip)) .site-header { top: 0 !important; } } @media (max-width: 720px) { body:not(:has(.promo-strip)) .mobile-menu { inset: 80px 0 0 0 !important; } } @media (max-width: 480px) { body:not(:has(.promo-strip)) .mobile-menu { inset: 70px 0 0 0 !important; } } /* ===================================================================== PAINTED HEADINGS (27 Oct 2026) Display headings are hand-painted lettering in the Enter Feast Mode hand: one transparent image per heading in images/lettering/h/, the words kept inside the heading as screen-reader text (see initPaint in ml-polish.js and ml-paint.js). The image height follows the heading's own font size: 1.25em per painted line plus .65em for the swash and drips (never under 78px tall), so the lettering takes the space the type did and scales with it on phones. On light or pink panels the white paint turns black. ===================================================================== */ .ml-paint { display: inline-block; vertical-align: bottom; height: auto; width: min(100%, calc(var(--ar, 3) * max(calc((var(--lines, 1) * 1.25 + .85) * 1em), 108px))); max-width: 100%; margin: -.08em 0 .06em -.04em; filter: drop-shadow(0 0 10px rgba(255,255,255,.12)); } .ml-painted { line-height: 1 !important; } .ml-painted--ink .ml-paint { filter: brightness(0); } /* ===== Flyer mode (27 Oct 2026): a monthly drop with no product photos yet shows its printed DL flyer, front and back, beside the item list. ===== */ .may-grid.may-grid--flyer { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 36px; align-items: start; } .drop-flyer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .drop-flyer__face { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: transform .3s ease; } .drop-flyer__face:nth-child(1) { transform: rotate(-1.5deg); } .drop-flyer__face:nth-child(2) { transform: rotate(1.5deg) translateY(18px); } .drop-flyer__face:hover { transform: rotate(0) scale(1.02); } .drop-flyer__face img { display: block; width: 100%; height: auto; } .drop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .drop-list__item { position: relative; padding: 18px 92px 18px 20px; border: 1px solid var(--ml-border, #26262b); border-radius: 16px; background: linear-gradient(180deg, #131316, #0A0A0C); } .drop-list__name { margin: 0 0 6px; font-family: "ML Block", sans-serif; font-size: clamp(18px, 1.6vw, 22px); text-transform: uppercase; color: #fff; line-height: 1.1; } .drop-list__desc { margin: 0; color: #B7B7BD; font-size: 15px; line-height: 1.5; } .drop-list__price { position: absolute; top: 16px; right: 16px; min-width: 62px; padding: 10px 8px 14px; text-align: center; font-family: "ML Block", sans-serif; font-size: 18px; color: #0E0E10; background: var(--ml-pink, #EA8FB5); border-radius: 50% 50% 46% 46% / 44% 44% 56% 56%; } .drop-list__item[data-category="drink"] .drop-list__price, .drop-list__item[data-category="dessert"] .drop-list__price { background: var(--ml-blue, #5BD0E6); } @media (max-width: 900px) { .may-grid.may-grid--flyer { grid-template-columns: 1fr; } .drop-flyer { max-width: 520px; margin: 0 auto 10px; } } /* ===== Homepage THIS MONTH band (27 Oct 2026) ===== */ .home-drop { padding: clamp(56px, 7vw, 110px) 0; background: radial-gradient(ellipse at 80% 40%, rgba(234,143,181,.16), transparent 60%), #0A0A0C; } .home-drop[hidden] { display: none; } .home-drop__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .home-drop__copy .eyebrow { color: var(--ml-blue, #5BD0E6); font-family: "ML Block", sans-serif; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; } .home-drop__copy h2 { font-size: clamp(44px, 5.4vw, 80px); margin: 10px 0 14px; } .home-drop__copy > p { color: #B7B7BD; font-size: 17px; line-height: 1.55; max-width: 520px; margin: 0 0 22px; } .home-drop__list { list-style: none; margin: 0 0 28px; padding: 0; max-width: 520px; } .home-drop__list li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.14); } .home-drop__list span { font-family: "ML Block", sans-serif; text-transform: uppercase; font-size: 17px; color: #fff; letter-spacing: .01em; } .home-drop__list b { font-family: "ML Block", sans-serif; font-weight: 400; color: var(--ml-pink, #EA8FB5); font-size: 18px; white-space: nowrap; } .home-drop__list li[data-category="drink"] b, .home-drop__list li[data-category="dessert"] b { color: var(--ml-blue, #5BD0E6); } .home-drop__art { position: relative; display: block; border-radius: 22px; } .home-drop__art > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.55); } .home-drop__flyer { position: absolute; right: -14px; bottom: -34px; width: 30%; transform: rotate(5deg); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.6); border: 3px solid #0A0A0C; transition: transform .3s ease; } .home-drop__art:hover .home-drop__flyer { transform: rotate(2deg) scale(1.04); } .home-drop__flyer img { display: block; width: 100%; height: auto; } .home-drop__flyer--solo { position: relative; right: auto; bottom: auto; width: min(340px, 70%); margin: 0 auto; display: block; transform: rotate(2deg); } @media (max-width: 900px) { .home-drop__inner { grid-template-columns: 1fr; } .home-drop__art { order: -1; margin: 0 6px 30px; } .home-drop__flyer { right: -4px; bottom: -24px; width: 32%; } } /* ---------- Phone tap targets and label sizes (28 Oct 2026) ---------- Venue page links were 15 to 25px tall, the shake name buttons 16px. A thumb needs about 44px, so the hit area grows without changing the look. */ .vn-back { display: inline-flex; align-items: center; min-height: 44px; } .vn-links { gap: 0; } .vn-links a, .vn-card a { display: inline-flex; align-items: center; min-height: 44px; } .vn-card td a, .vn-card p a { min-height: 44px; } .name-link { min-height: 44px; padding-block: 12px; margin-block: -12px; } .week-cta__tcs { display: inline-flex; align-items: center; min-height: 44px; } input[type="checkbox"] { width: 22px; height: 22px; } @media (max-width: 700px) { /* Nothing under 11px: these micro labels were 8 to 10px */ .mob-bar-store__label, .lane__state, .bb-ing__sub, .ml-divider__tag, .mocktail-note, .ct-store__state, .dl-store__state, .bb-prize-bar__label, .bb-stat__lbl, .bb-prize__ribbon, .dl-jump__badge, .loc-now-showing__label, .loc-hero-tag__label { font-size: 11px !important; } .bb-ing__tag { font-size: 11px !important; } .vn-card small, .vn-hours small { font-size: 12px; } } .nf__quick-links a { display: inline-block; padding: 14px 4px; } /* ---------- Local SEO blocks (28 Oct 2026) ---------- */ /* Footer venue row: every venue page linked from every page */ .footer-venues { border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px; padding-top: 22px; } .footer-venues h4 { margin: 0 0 10px; } .footer-venues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; } .footer-venues li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .footer-venues span { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--ml-pink); } .footer-venues a { color: rgba(255,255,255,.78); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; } .footer-venues a:hover { color: #fff; text-decoration: underline; } /* Locations: plain-HTML directory under the interactive grid */ .vdir { padding: 64px 0 72px; background: #0E0E10; } .vdir__lead { color: #A7A7AF; max-width: 640px; margin: 6px 0 28px; } .vdir__state { margin-top: 26px; } .vdir__state h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--ml-pink); margin: 0 0 12px; } .vdir__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .vdir__item { background: #17171B; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; } .vdir__name { color: #fff; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 16px; text-decoration: none; min-height: 32px; display: flex; align-items: center; } .vdir__name:hover { color: var(--ml-pink); } .vdir__area { color: var(--ml-blue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .vdir__addr { color: #A7A7AF; font-size: 14px; } .vdir__tel { color: #fff; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; } /* Venue pages: Getting Here */ .vn-area { padding: 56px 0; } .vn-area__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; } .vn-area__intro { color: #D6D6DC; font-size: 17px; line-height: 1.6; max-width: 640px; } .vn-area__list { margin: 14px 0 0; padding-left: 18px; color: #C9C9D0; line-height: 1.7; } .vn-area__near { background: #17171B; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 22px 24px; } .vn-area__near h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--ml-pink); } .vn-area__near p { color: #C9C9D0; margin: 0 0 14px; line-height: 1.6; } .vn-area__addr a { color: var(--ml-blue); } @media (max-width: 860px) { .vn-area__grid { grid-template-columns: 1fr; gap: 20px; } .vn-area { padding: 40px 0; } } /* venue "near you" strip on desserts/burgers/cocktails (28 Oct 2026) */ .vc-near { padding: 40px 0 70px; } .vc-near .vc-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .vc-near .vc-cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #E9E9EE; text-decoration: none; font-size: 14px; } .vc-near .vc-cats a:hover { border-color: #EA8FB5; } .vdir__qa { margin-top: 34px; max-width: 760px; } .vdir__qa h3 { font-size: 18px; margin-bottom: 6px; } .vdir__qa p { color: var(--ml-text-dim, #B7B7BD); line-height: 1.6; } .vdir__qa a { color: var(--ml-blue, #5BD0E6); text-decoration: underline; } /* ========================================================================== Menu cards · 28 Oct 2026 The "Things That Slap" rail in the 2027 venue menu / food truck A-frame style: cut-out food bursting out of a spray-painted drip frame (pink and blue alternating), painted category headings from the menu kit, on the brick wall. Cards lose the grey box so the food sits on the wall. ========================================================================== */ #food.menu-section { background: radial-gradient(900px 520px at 85% 0%, rgba(234,143,181,.16), transparent 60%), radial-gradient(800px 520px at 5% 100%, rgba(91,208,230,.14), transparent 60%), linear-gradient(180deg, rgba(10,10,12,.78), rgba(10,10,12,.9)), url('images/brand/brick-menu-1600w.webp') center/cover no-repeat, var(--ml-ink, #0E0E10); } .mc-rail { grid-auto-columns: minmax(min(280px, 84%), 300px); gap: 30px; padding-top: 18px; } .product-card.mc { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 4px 10px; gap: 12px; } .product-card.mc:hover, .product-card.mc:focus-within { transform: none; } .mc__art { position: relative; aspect-ratio: 1 / 1; margin: 6px 6px 8px; } .mc__frame { position: absolute; inset: 3% 4% 0 2%; width: 94%; height: 97%; object-fit: fill; transform: rotate(-2deg); pointer-events: none; filter: drop-shadow(0 0 14px rgba(234,143,181,.35)); transition: transform .35s ease; } .mc--blue .mc__frame { transform: rotate(2.5deg); filter: drop-shadow(0 0 14px rgba(91,208,230,.35)); } .mc__food { position: absolute; left: -6%; top: -4%; width: 112%; height: 112%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .product-card.mc:hover .mc__food { transform: scale(1.06) rotate(-3deg) translateY(-4px); } .product-card.mc:hover .mc__frame { transform: rotate(-4deg) scale(1.02); } .mc--blue:hover .mc__frame { transform: rotate(4.5deg) scale(1.02); } .product-card.mc .tag { margin-top: 4px; } .product-card.mc h3.mc__title { margin: 0; line-height: 0; } .mc__title img { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .product-card.mc p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; } .product-card.mc .card-cta { color: #fff; } .product-card.mc .card-cta .arrow { color: var(--ml-pink, #EA8FB5); } .mc--blue .card-cta .arrow { color: var(--ml-blue, #5BD0E6); } .product-card.mc .ml-sticker { top: 2px; right: 0; z-index: 3; } @media (max-width: 640px) { .mc__title img { height: 54px; } } /* ========================================================================== Link band graphics · 28 Oct 2026 Spray-paint ink graphics at 10% in the pink behind each column: a dripping heart (Backing Locals), the spray logo (Own a Lane), a chef hat (Join the Crew). Christian: "just like 10% in the pink", no food. ========================================================================== */ .link-band__item { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; } .link-band__item > * { position: relative; z-index: 1; } .link-band__item .lb-cut { position: absolute; z-index: 0; pointer-events: none; right: -4%; top: 50%; width: 58%; max-width: 330px; height: auto; transform: translateY(-50%) rotate(-8deg); opacity: .1; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .link-band__item .lb-cut--logo { width: 52%; transform: translateY(-50%) rotate(6deg); } .link-band__item:hover .lb-cut { opacity: .14; transform: translateY(-52%) rotate(-5deg) scale(1.04); } .link-band__item:hover .lb-cut--logo { transform: translateY(-52%) rotate(3deg) scale(1.04); } @media (max-width: 900px) { .link-band__item { min-height: 0; } .link-band__item .lb-cut { width: 46%; max-width: 220px; right: -2%; } } /* Kids hero (28 Oct 2026): the photo is a wide shot with the boy right of centre, so the 4:5 frame was cropping him out. Square frame, focused on him and the shake. */ .ml-hero-photo--kids { aspect-ratio: 1 / 1; } .ml-hero-photo--kids img { object-position: 64% 40%; } @media (max-width: 900px) { .ml-hero-photo--kids { aspect-ratio: 4 / 3; } .ml-hero-photo--kids img { object-position: 62% 40%; } } /* ========================================================================== Name stickers · 28 Oct 2026 Christian's pick: the menu kit "name sticker" look (pink bubble letters, black outline, white die-cut border, drips). Each label is its own image, generated on Magnific and keyed with tools/brand/key-sticker.py; the recipe is in the project doc claude/website-name-sticker-method.md. Markup: <Label> ========================================================================== */ .ml-sticker--img { width: 132px !important; height: auto !important; padding: 0 !important; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)) !important; } .ml-sticker--img::before, .ml-sticker--img::after { display: none !important; } .ml-sticker--img img { display: block; width: 100%; height: auto; } .ml-sticker--img.ml-sticker--small { width: 108px !important; } .ml-sticker--img.ml-sticker--lg { width: 170px !important; } .ml-sticker--img.ml-sticker--top-right { top: -26px; right: -18px; } .ml-sticker--img.ml-sticker--top-left { top: -26px; left: -18px; } .product-card.mc .ml-sticker--img { top: -24px; right: -14px; } @media (max-width: 640px) { .ml-sticker--img { width: 108px !important; } } /* ========================================================================== Price drips · 28 Oct 2026 (A-frame drip, rebuilt sharp as a glossy gel: tools/brand/build-price-drip.py) The glossy A-frame drips with a white cut ring, the $ small and raised, chunky white numbers with an ink outline and a hard offset shadow. Food pink, drinks blue, as before. ========================================================================== */ .price-stamp { width: 92px !important; height: 112px !important; background-image: url('images/brand/price-drip-pink-v3.webp') !important; background-size: contain !important; background-position: center top !important; font-family: "ML Block", var(--display) !important; font-weight: 900; font-size: 58px !important; letter-spacing: -2px !important; color: #fff !important; padding-bottom: 36px !important; -webkit-text-stroke: 3.4px #0E0E10 !important; paint-order: stroke fill; text-shadow: 2px 3px 0 #0E0E10; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)) !important; transform: rotate(-7deg); } .price-stamp sup { font-size: .42em; line-height: 1; vertical-align: top; position: relative; top: .2em; margin-right: 1px; -webkit-text-stroke-width: 2px; } .shake-card .price-stamp, .item-card .price-stamp, .beer-card .price-stamp, .wine-card .price-stamp, .price-stamp.is-drink, .is-boozy .price-stamp { background-image: url('images/brand/price-drip-blue-v3.webp') !important; } .burger-card .price-stamp, .sd-card .price-stamp, .dessert-card .price-stamp, .price-stamp.is-food { background-image: url('images/brand/price-drip-pink-v3.webp') !important; } @media (max-width: 640px) { .price-stamp { width: 76px !important; height: 92px !important; font-size: 48px !important; padding-bottom: 30px !important; -webkit-text-stroke-width: 2.9px !important; } } /* ========================================================================== Drip frames on the menu pages · 28 Oct 2026 Same treatment as the homepage menu cards: every product photo sits in a spray-painted drip frame, pink and blue alternating, food over the frame. ========================================================================== */ .burger-card .art, .sd-card .art, .ds-card .art, .shake-card .art, .item-card .img-wrap { isolation: isolate; } .burger-card .art::after, .sd-card .art::after, .ds-card .art::after, .shake-card .art::after, .item-card .img-wrap::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 9% 10% 7% 10%; background: url('images/menu-cards/frame-pink.webp') center / 100% 100% no-repeat; transform: rotate(-2.5deg); filter: drop-shadow(0 0 12px rgba(234,143,181,.35)); transition: transform .35s ease; } .burger-card:nth-child(even) .art::after, .sd-card:nth-child(even) .art::after, .ds-card:nth-child(even) .art::after, .shake-card:nth-child(even) .art::after, .item-card:nth-child(even) .img-wrap::after { background-image: url('images/menu-cards/frame-blue.webp'); transform: rotate(2.5deg); filter: drop-shadow(0 0 12px rgba(91,208,230,.35)); } .burger-card:hover .art::after, .sd-card:hover .art::after, .ds-card:hover .art::after, .shake-card:hover .art::after, .item-card:hover .img-wrap::after { transform: rotate(-5deg) scale(1.03); } .burger-card .art::after { inset: 5% 14% 36% 14%; } @media (max-width: 640px) { .burger-card .art img, .sd-card .art img, .ds-card .art img { object-fit: contain !important; padding: 4% !important; box-sizing: border-box !important; } .burger-card .art::after, .sd-card .art::after, .ds-card .art::after, .shake-card .art::after, .item-card .img-wrap::after { inset: 10% 11% 8% 11%; } } /* desserts: the skillet photos filled the whole frame area, so contain them to let the frame show */ .ds-card .art img { object-fit: contain !important; padding: 5% 6% !important; box-sizing: border-box !important; } /* Shakes · no animation (Christian, 28 Oct 2026): no hover videos, liquid fill, glare, 3D tilt, lift or pulse on the shake cards. */ .shake-card, .shake-card:hover, .shake-card.is-featured { transform: none !important; animation: none !important; transition: border-color .2s ease !important; } .shake-card .liquid, .shake-card .glare, .shake-card .hover-video { display: none !important; } .shake-card .art img, .shake-card:hover .art img { transform: none !important; transition: none !important; } .shake-card .price-stamp, .shake-card:hover .price-stamp { transition: none !important; transform: rotate(-7deg) !important; } .featured-shake .art img { animation: none !important; } /* Bigger prices · 28 Oct 2026: the drip stays at its original size and only the price inside grows (34px to 58px, 27px to 48px on phones), with a smaller raised $ and tighter spacing so two digits fit inside the blob. */ /* ========================================================================== Price beside the name, never on the food · 28 Oct 2026 The drip used to sit on the top-right of the product photo and covered burgers, glasses and shakes. It now lives in the card's title row, in the page flow: name on the left, drip on the right, its drips hanging down beside the next line (which gets room kept clear on the right). Nothing is positioned over the photo, so it follows the card at every width. ========================================================================== */ .burger-card .name-row, .sd-card .name-row, .shake-card .name-row, .item-card .name-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; position: relative !important; margin: 0 !important; } .burger-card .name-row h3, .sd-card .name-row h3, .shake-card .name-row h3, .item-card .name-row h3 { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } .name-row .price-stamp, .burger-card .name-row .price-stamp, .sd-card .name-row .price-stamp, .shake-card .name-row .price-stamp, .item-card .name-row .price-stamp { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; margin: -14px -8px -44px 0 !important; z-index: 4 !important; transform: rotate(-7deg) !important; transform-origin: center !important; } .burger-card:hover .name-row .price-stamp, .sd-card:hover .name-row .price-stamp, .shake-card:hover .name-row .price-stamp, .item-card:hover .name-row .price-stamp { transform: rotate(-4deg) scale(1.05) !important; } /* keep the line under the name clear of the hanging drips */ .burger-card .name-row + *, .sd-card .name-row + *, .shake-card .name-row + *, .item-card .name-row + * { margin-right: 92px !important; } /* cocktails: the name row replaces the bare heading; the mocktail chip joins the flow */ .item-card .name-row { margin-top: 4px !important; } .item-card .mocktail-note { position: static !important; align-self: flex-start !important; display: inline-block !important; margin: 8px 0 14px !important; transform: rotate(-3deg) !important; } @media (max-width: 640px) { .burger-card .name-row, .sd-card .name-row, .shake-card .name-row, .item-card .name-row { display: flex !important; gap: 4px !important; } .item-card .name-row { order: 1; padding: 10px 12px 0 !important; } .item-card .name-row h3 { padding: 0 !important; order: 0 !important; } .item-card .name-row .price-stamp { order: 1 !important; } .name-row .price-stamp, .burger-card .name-row .price-stamp, .sd-card .name-row .price-stamp, .shake-card .name-row .price-stamp, .item-card .name-row .price-stamp { width: 52px !important; height: 63px !important; font-size: 33px !important; padding-bottom: 21px !important; -webkit-text-stroke-width: 2px !important; margin: -10px -6px -30px 0 !important; transform: rotate(-7deg) !important; } .burger-card .name-row + *, .sd-card .name-row + *, .shake-card .name-row + *, .item-card .name-row + * { margin-right: 50px !important; } .item-card .mocktail-note { margin: 6px 12px 8px !important; } } /* ========================================================================== Dietary drips · 28 Oct 2026 (from the food truck A-frames) A small purple GFO drip and green V drip tucked under the price drip, the way the boards do it. Built with tools/brand/build-price-drip.py so they match the price drip. Burgers carry GFO/V from their diet tags; sides carry V where the item is vegetarian. ========================================================================== */ .name-row .diet-drip { position: absolute; top: 50px; right: 58px; z-index: 5; width: 36px; height: 44px; padding-bottom: 14px; display: flex; align-items: center; justify-content: center; background: url('images/brand/price-drip-gfo-v3.webp') center top / contain no-repeat; font-family: "ML Block", var(--display); font-weight: 900; font-size: 12px; letter-spacing: 0; color: #fff; -webkit-text-stroke: 2px #0E0E10; paint-order: stroke fill; text-shadow: 1px 1px 0 #0E0E10; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); transform: rotate(-9deg); pointer-events: auto; } .name-row .diet-drip--v { background-image: url('images/brand/price-drip-veg-v3.webp'); font-size: 16px; } .name-row .diet-drip + .diet-drip { right: 92px; top: 56px; } @media (max-width: 640px) { .name-row .diet-drip { top: 30px; right: 34px; width: 28px; height: 34px; padding-bottom: 10px; font-size: 9px; -webkit-text-stroke-width: 1.5px; } .name-row .diet-drip--v { font-size: 12px; } .burger-card .name-row:has(.diet-drip) + *, .sd-card .name-row:has(.diet-drip) + * { margin-right: 66px !important; } .name-row .diet-drip + .diet-drip { right: 56px; top: 34px; } } /* ========================================================================== Feast Mode box band · 28 Oct 2026 The Enter Feast Mode takeaway boxes from the food truck A-frames. Used on takeaway (delivery) and catering only; the dine-in menu pages keep their plated cut-outs. ========================================================================== */ .fm-band { padding: 70px 0; background: #121215; color: #fff; } .fm-band .container { display: grid; grid-template-columns: .9fr 2.1fr; gap: 30px; align-items: center; } .fm-band h2 img { display: block; width: min(300px, 70vw); height: auto; } .fm-band p { color: var(--ml-text-dim, #b9b9c2); font-size: 16px; line-height: 1.6; margin: 14px 0 0; max-width: 340px; } .fm-band__boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; } .fm-band__boxes img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); } @media (max-width: 800px) { .fm-band { padding: 50px 0; } .fm-band .container { grid-template-columns: 1fr; } } /* ========================================================================== Prices from the 2027 menu · 29 Oct 2026 Cents sit small and raised like the $, so $18.50 keeps the big numerals inside the same drip. Desserts get the drip beside the name like every other menu page. ========================================================================== */ .price-stamp .cents { font-size: .42em; line-height: 1; vertical-align: top; position: relative; top: .2em; margin-left: 1px; letter-spacing: 0; -webkit-text-stroke-width: 2px; } .price-stamp:has(.cents) { font-size: 50px !important; letter-spacing: -2.5px !important; } .ds-card .name-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; position: relative !important; margin: 0 !important; } .ds-card .name-row h3 { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } .ds-card .name-row .price-stamp { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; margin: -14px -8px -44px 0 !important; z-index: 4 !important; transform: rotate(-7deg) !important; background-image: url('images/brand/price-drip-pink-v3.webp') !important; } .ds-card .name-row + * { margin-right: 92px !important; } @media (max-width: 640px) { .price-stamp:has(.cents) { font-size: 40px !important; } .name-row .price-stamp:has(.cents) { font-size: 27px !important; letter-spacing: -1.5px !important; } .ds-card .name-row { gap: 4px !important; } .ds-card .name-row .price-stamp { width: 52px !important; height: 63px !important; font-size: 33px !important; padding-bottom: 21px !important; -webkit-text-stroke-width: 2px !important; margin: -10px -6px -30px 0 !important; } .ds-card .name-row + * { margin-right: 50px !important; } } /* ========================================================================== Title-row price drips, launch tidy · 29 Oct 2026 One rule for every card that carries a price in its name row (burgers, sides, platters, kids, desserts, shakes, cocktails). The drip hangs a little less, and the two lines under the name keep the right-hand side clear, so the drip and the GFO / V drips never sit on top of words. ========================================================================== */ .name-row:has(> .price-stamp) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; position: relative !important; margin: 0 !important; } .name-row:has(> .price-stamp) > h3 { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } html body .name-row > .price-stamp.price-stamp { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; margin: -14px -8px -28px 0 !important; z-index: 4 !important; } .name-row:has(> .price-stamp) + *, .name-row:has(> .price-stamp) + * + * { margin-right: 104px !important; } .name-row .diet-drip { top: 46px; right: 70px; } .name-row .diet-drip + .diet-drip { right: 100px; top: 52px; } .name-row:has(.diet-drip + .diet-drip) + *, .name-row:has(.diet-drip + .diet-drip) + * + * { margin-right: 136px !important; } .platter-card .name-row > .price-stamp.price-stamp { background-image: url('images/brand/price-drip-pink-v3.webp') !important; } @media (max-width: 640px) { html body .name-row > .price-stamp.price-stamp { margin: -10px -6px -18px 0 !important; } .name-row:has(> .price-stamp) + *, .name-row:has(> .price-stamp) + * + * { margin-right: 54px !important; } .name-row .diet-drip { top: 30px; right: 40px; } .name-row:has(.diet-drip) + *, .name-row:has(.diet-drip) + * + * { margin-right: 70px !important; } .name-row .diet-drip + .diet-drip { right: 62px; top: 34px; } } /* Icons on pink chips paint in ink, and the functions inclusion cards get their tick back (29 Oct 2026). */ .why-card .ico .ml-ico { color: var(--ml-ink, #0E0E10) !important; stroke: currentColor; } .inc-card .check::before { content: ""; width: 14px; height: 8px; margin-top: -3px; border-left: 3px solid var(--ml-ink, #0E0E10); border-bottom: 3px solid var(--ml-ink, #0E0E10); transform: rotate(-45deg); } /* The cookie banner steps aside while the phone menu is open (29 Oct 2026) */ body:has(#mobileMenu.open) .ml-consent { visibility: hidden !important; } /* Weekly deals on the homepage, 29 Oct 2026: five live deals. Three across on top, Lunch Saver and Milky Hour two across below. The weekday deals show their "Weekdays" tag instead of a day drip. */ @media (min-width: 641px) { .week-grid.week-grid--live { grid-template-columns: repeat(6, 1fr) !important; } .week-grid.week-grid--live .week-card { grid-column: span 2 !important; } .week-grid.week-grid--live .week-card.lunch, .week-grid.week-grid--live .week-card.hour { grid-column: span 3 !important; } } .week-card.hour:not(.is-soon) .day-tag, .week-card.lunch:not(.is-soon) .day-tag { display: inline-block; } /* ========================================================================== Mobile run-through, 29 Oct 2026. Measured on every page at 320, 360, 390 and 430px. Each block says what it fixes. ========================================================================== */ @media (max-width: 640px) { /* Floating buttons covered the bottom corners of whatever was under them (buttons, burger names, the T&Cs link). Chat shrinks to a 48px icon; back-to-top goes (the sticky header and the phone's own scroll-to-top do that job), so the left corner is clear. */ #mlBackToTop { display: none !important; } .mlc-launcher { width: 48px; height: 48px; padding: 0 !important; justify-content: center; gap: 0; } .mlc-launcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Cookie banner took a third of the screen. Same content, tighter. */ .ml-consent { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; } .ml-consent__inner { gap: 10px !important; } .ml-consent__title { font-size: 13px; margin-bottom: 4px; } .ml-consent__body { font-size: 13px; line-height: 1.45; } .ml-consent__btn { padding: 11px 16px; } /* Tap targets under 32px: footer legal links, blog and venue crumbs, the venue phone number, FAQ questions. */ .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; } .crumb a, .article .crumb a { display: inline-flex; align-items: center; min-height: 40px; } .vc-facts a { display: inline-flex; align-items: center; min-height: 40px; } .vc-faq details { padding: 4px 0; } .vc-faq summary { display: flex; align-items: center; min-height: 48px; padding-block: 8px; } .ml-club__meta a { display: inline-block; padding: 12px 4px; margin: -12px -4px; } .shake-card h3 .name-link { display: inline-block; min-height: 40px; padding-block: 12px; margin-block: -12px; } } /* Under 375px (small Androids, the first iPhone SE) a two-up menu card is 130px wide: the price drip leaves 49px for the name, so names and descriptions were cut off. One card per row there. */ @media (max-width: 374px) { .burger-grid, .sd-grid, .ds-grid, .shake-grid, .item-grid, .ft-menu { grid-template-columns: 1fr !important; } .burger-card img, .sd-card img, .ds-card img, .shake-card img, .item-card img { max-height: 240px; object-fit: contain; } .btn { white-space: normal; text-align: center; } } /* Build Your Burger has its own sticky bar (layers + Finished). On phones it sat on top of the venue order bar, and the sound toggle sat on both. That page keeps its own bar; the sound toggle moves up beside the chat. */ @media (max-width: 880px) { body:has(.bb-mobile-bar) #mlMobileOrderBar { display: none !important; } body:has(.bb-mobile-bar) .bb-audio-toggle { bottom: 84px; right: auto; left: 16px; } } /* Tablets and phones turned sideways (641 to 1024px) are touch screens too: the same tap-target, small-label and no-zoom rules apply there. */ @media (max-width: 1024px) { input, select, textarea { font-size: 16px !important; } .mob-bar-store__label, .lane__state, .ct-store__state, .dl-store__state, .diet-tag, .bb-prize-bar__label, .bb-prize__ribbon, .bb-ing__tag, .loc-hero-tag__label, .dl-jump__badge { font-size: 11px !important; } .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; } .crumb a, .article .crumb a, .vc-facts a, a.order { display: inline-flex; align-items: center; min-height: 40px; } .store-view-btn, .store-menu-chip, .menudl__swap, .role-card__cta, .store-beers-banner__change, .ct-store__meta a { display: inline-flex; align-items: center; min-height: 40px; } .ml-club__meta a { display: inline-block; padding: 12px 4px; margin: -12px -4px; } .vc-faq details { padding: 4px 0; } .vc-faq summary { display: flex; align-items: center; min-height: 48px; padding-block: 8px; } } /* ========================================================================== Smaller prices · 29 Oct 2026 (Christian: "make all the prices smaller"). Every price drip and its figure about 20% smaller, everywhere a .price-stamp appears. The room kept clear beside the name shrinks with it. ========================================================================== */ html body .price-stamp.price-stamp { width: 74px !important; height: 90px !important; font-size: 46px !important; padding-bottom: 29px !important; -webkit-text-stroke-width: 2.8px !important; } html body .price-stamp.price-stamp:has(.cents) { font-size: 40px !important; letter-spacing: -2px !important; } html body .name-row > .price-stamp.price-stamp { margin: -11px -6px -22px 0 !important; } .name-row:has(> .price-stamp) + *, .name-row:has(> .price-stamp) + * + * { margin-right: 84px !important; } .burger-card .name-row + *, .sd-card .name-row + *, .shake-card .name-row + *, .item-card .name-row + *, .ds-card .name-row + * { margin-right: 84px !important; } .name-row .diet-drip { top: 38px; right: 56px; } .name-row .diet-drip + .diet-drip { right: 82px; top: 42px; } .name-row:has(.diet-drip + .diet-drip) + *, .name-row:has(.diet-drip + .diet-drip) + * + * { margin-right: 112px !important; } @media (max-width: 640px) { html body .price-stamp.price-stamp { width: 62px !important; height: 75px !important; font-size: 38px !important; padding-bottom: 24px !important; -webkit-text-stroke-width: 2.3px !important; } html body .name-row > .price-stamp.price-stamp { width: 46px !important; height: 56px !important; font-size: 29px !important; padding-bottom: 18px !important; -webkit-text-stroke-width: 1.8px !important; margin: -9px -5px -15px 0 !important; } html body .price-stamp.price-stamp:has(.cents) { font-size: 32px !important; } html body .name-row > .price-stamp.price-stamp:has(.cents) { font-size: 24px !important; letter-spacing: -1.2px !important; } .name-row:has(> .price-stamp) + *, .name-row:has(> .price-stamp) + * + *, .burger-card .name-row + *, .sd-card .name-row + *, .shake-card .name-row + *, .item-card .name-row + *, .ds-card .name-row + * { margin-right: 46px !important; } .name-row .diet-drip { top: 26px; right: 34px; } .name-row .diet-drip + .diet-drip { right: 54px; top: 30px; } .name-row:has(.diet-drip) + *, .name-row:has(.diet-drip) + * + * { margin-right: 60px !important; } } /* ========================================================================== Neon tape · 29 Oct 2026 (Christian picked option B) The crossing hero tapes and the home ribbon become thin dark bands with glowing pink and blue lettering, like the neon in the venues. The bands were also stretched to half the strip's height by an old bottom:0 rule in home.css; bottom:auto lets them sit at their real, thin height. ========================================================================== */ .hero--graffiti .hero-tape { height: max(110px, calc(36px + 5.4vw)); } .hero--graffiti .hero-tickers { bottom: auto !important; padding: 8px 0 7px !important; background: #0b0b0e !important; border-top: 1px solid rgba(234,143,181,.6) !important; border-bottom: 1px solid rgba(234,143,181,.6) !important; box-shadow: 0 0 18px rgba(234,143,181,.35), 0 8px 24px rgba(0,0,0,.6) !important; } .hero--graffiti .ticker-track span, .hero--graffiti .ticker-track span.alt { font-size: 15px !important; letter-spacing: .14em !important; line-height: 1 !important; color: #ffd6e8 !important; text-shadow: 0 0 4px #ff8cc0, 0 0 10px #ea8fb5, 0 0 22px rgba(234,143,181,.8) !important; } .hero--graffiti .hero-tickers--under { border-color: rgba(91,208,230,.6) !important; box-shadow: 0 0 18px rgba(91,208,230,.3), 0 8px 24px rgba(0,0,0,.6) !important; } .hero--graffiti .hero-tickers--under .ticker-track span, .hero--graffiti .hero-tickers--under .ticker-track span.alt { color: #d8f6ff !important; text-shadow: 0 0 4px #7fe3ff, 0 0 10px #5bd0e6, 0 0 22px rgba(91,208,230,.8) !important; } .ml-neon-star, .hero--graffiti .ticker-track span::after { width: 12px !important; height: 12px !important; border-radius: 0 !important; margin: 0 22px !important; background: currentColor !important; filter: drop-shadow(0 0 4px currentColor); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 860px) { .hero--graffiti .hero-tape { height: 92px; margin-top: -24px; margin-bottom: -34px; } .hero--graffiti .hero-tickers { padding: 6px 0 5px !important; } .hero--graffiti .ticker-track span, .hero--graffiti .ticker-track span.alt { font-size: 12px !important; } .hero--graffiti .ticker-track span::after { width: 10px !important; height: 10px !important; margin: 0 16px !important; } } /* the home ribbon ("Find Your Lane · Nine Stores · ...") in the same neon */ .marquee-wrap { padding: 30px 0; } .marquee.marquee--blue { background: #0b0b0e !important; padding: 9px 0 !important; border-top: 1px solid rgba(91,208,230,.6) !important; border-bottom: 1px solid rgba(91,208,230,.6) !important; box-shadow: 0 0 18px rgba(91,208,230,.3), 0 8px 24px rgba(0,0,0,.6) !important; } .marquee.marquee--blue .marquee__track { font-size: 15px !important; letter-spacing: .14em !important; color: #d8f6ff !important; text-shadow: 0 0 4px #7fe3ff, 0 0 10px #5bd0e6, 0 0 22px rgba(91,208,230,.8); } .marquee.marquee--blue .marquee__track > span { padding: 0 22px !important; } .marquee.marquee--blue .marquee__track > span::before { content: '' !important; display: inline-block; width: 12px; height: 12px; margin: 0 22px 0 0 !important; opacity: 1 !important; background: #ffd6e8; filter: drop-shadow(0 0 4px #ea8fb5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12.2 7.8 L20 10 L12.2 12.2 L10 20 L7.8 12.2 L0 10 L7.8 7.8Z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 640px) { .marquee-wrap { padding: 20px 0; } .marquee.marquee--blue .marquee__track { font-size: 12px !important; } } /* Functions hub · venue picker (29 Oct 2026) */ .fn-venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; } .fn-venue { display: flex; flex-direction: column; background: #121215; border: 1px solid var(--ml-border, rgba(255,255,255,.1)); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ml-text, #E9E9EE); transition: transform .2s ease, border-color .2s ease; } .fn-venue:hover { transform: translateY(-3px); border-color: var(--ml-pink); } .fn-venue--live { border-color: rgba(234,143,181,.7); box-shadow: 0 0 0 1px rgba(234,143,181,.25), 0 10px 30px rgba(0,0,0,.4); } .fn-venue__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0d; } .fn-venue__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fn-venue__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; } .fn-venue__state { font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--ml-blue); } .fn-venue__name, html body h2.fn-venue__name { font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: .02em; line-height: 1.15; margin: 0; color: #fff; text-shadow: none; } .fn-venue__tag { align-self: flex-start; font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--ml-pink); color: var(--ml-ink, #0E0E10); border-radius: 999px; padding: 3px 9px; } .fn-venue__cta { margin-top: 6px; font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ml-pink); display: inline-flex; gap: 6px; align-items: center; min-height: 32px; } @media (max-width: 640px) { .fn-venue-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .fn-venue__name, html body h2.fn-venue__name { font-size: 15px; } } /* Functions hub (29 Oct 2026): one section, the venue grid sits in the hero. */ .fn-hub.fn-hero { padding: 170px 0 90px; } .fn-hub .lead { max-width: 760px; } .fn-hub .fn-venue-grid { margin-top: 36px; } @media (max-width: 640px) { .fn-hub.fn-hero { padding: 128px 0 64px; } } .fn-hub h1.ml-painted .ml-paint { width: auto !important; height: auto !important; max-height: 230px; max-width: min(100%, 320px); } @media (max-width: 640px) { .fn-hub h1.ml-painted .ml-paint { max-height: 150px; max-width: 70%; } } .fn-hub .crumb { margin-bottom: 0; } /* Laptop widths (961 to 1300px, 29 Oct 2026): the nav collapses to the hamburger here, so show only the short CTA (as on phones) and sit the CTAs on the right. Before this the full "Order Now" showed beside "Order". */ @media (min-width: 961px) and (max-width: 1300px) { .site-header .header-ctas .btn:not(.btn--mobile) { display: none !important; } .site-header .header-ctas { margin-left: auto; } } /* 30 Oct 2026 · menu grids: centre the last row on desktop. Odd counts (7 desserts, 5 classic burgers, 3 share cocktails in a 4-wide grid) left one or two cards stranded on the left with a hole beside them. Flex with the same card widths and gaps centres whatever is left over. */ @media (min-width: 1025px) { .burger-grid, .sd-grid, .ds-grid, .shake-grid, .item-grid { display: flex !important; flex-wrap: wrap; justify-content: center; } .sd-grid { align-items: flex-start; } .burger-grid > * { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); } .sd-grid > *, .ds-grid > *, .shake-grid > * { flex: 0 0 calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); } .sd-grid > .span-2, .ds-grid > .span-2 { flex-basis: calc((100% - 44px) / 3 * 2 + 22px); max-width: calc((100% - 44px) / 3 * 2 + 22px); } .sd-grid > .span-full { flex-basis: 100%; max-width: 100%; } .item-grid > * { flex: 0 0 calc((100% - 66px) / 4); max-width: calc((100% - 66px) / 4); } .item-grid > .mocktail-cta { flex-basis: 100%; max-width: 100%; } } /* 30 Oct 2026 · venue pages: photo strip + the long About copy folds after two paragraphs (all of it stays in the page for search). */ .vn-gallery { background: #0E0E10; padding: 0; } .vn-gallery__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; grid-auto-rows: clamp(190px, 19vw, 300px); gap: 6px; } .vn-gallery__tile { margin: 0; height: 100%; overflow: hidden; background: #111; } .vn-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .vn-gallery__tile:hover img { transform: scale(1.05); } @media (max-width: 760px) { .vn-gallery__row { grid-template-columns: 1fr 1fr; grid-auto-rows: 38vw; } .vn-gallery__tile--wide { grid-column: span 2; grid-row: span 1; } .vn-gallery__tile:nth-child(4) { display: none; } } .vn-fold { position: relative; max-height: 0; overflow: hidden; transition: max-height .6s ease; } .vn-fold.is-open { max-height: 6000px; } .vn-fold__btn { margin-top: 4px; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 11px 20px; font-family: var(--display); text-transform: uppercase; font-size: 12px; letter-spacing: .14em; cursor: pointer; } .vn-fold__btn:hover { border-color: var(--ml-pink); color: var(--ml-pink); } /* ---------- Transparent torn-wall dividers · 31 Oct 2026 ---------- Replace the old full-bleed photo bands (.ml-divider) site-wide. Strips are transparent webp files in images/walls, built by tools/brand/walls_v2.py. */ .ml-wall { position: relative; z-index: 4; margin: -70px 0 -110px; pointer-events: none; overflow: hidden; line-height: 0; } .ml-wall img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); } @media (max-width: 700px) { .ml-wall { margin: -36px 0 -70px; } .ml-wall img { width: 170%; margin-left: -35%; } .ml-wall--food img { width: 124%; margin-left: -12%; } } /* a wall inside a content column (FAQ etc.) sits in the flow, no overlap */ .container .ml-wall, .faq-page .ml-wall { margin: 22px 0 34px; } @media (max-width: 700px) { .container .ml-wall img, .faq-page .ml-wall img { width: 130%; margin-left: -15%; } } /* home: the first wall follows the neon ticker, so it starts below it */ .ml-wall--after-band { margin-top: 12px; } /* ===================================================================== Buttons · spray paint with real drips (1 Nov 2026). Christian picked the Magnific "spray pill" set: images/buttons/spray-*.webp, keyed off black. The pill in each image spans 18% to 60% of its height and 2% to 98% of its width, so the painted layer is sized to put the pill exactly behind the button box and let the drips hang below it. primary -> pink secondary -> white outline blue -> cyan form submits -> pink with cyan misprint ===================================================================== */ .btn, .ct-form__submit, .ml-club__form button[type="submit"], .fr-form button[type="submit"], .careers-form__submit { position: relative; isolation: isolate; z-index: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; padding: 15px 30px 14px; margin-bottom: 18px; transition: transform .18s ease, filter .18s ease !important; } .btn::before, .ct-form__submit::before, .ml-club__form button[type="submit"]::before, .fr-form button[type="submit"]::before, .careers-form__submit::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -1.8%; width: 103.9%; top: -44.6%; height: 205.4%; background: url('/images/buttons/spray-pink.webp') center / 100% 100% no-repeat; transition: transform .25s ease; transform-origin: 50% 20%; } .btn::after { content: none !important; display: none !important; } .btn--primary, .ct-form__submit, .ml-club__form button[type="submit"] { color: #0E0E10 !important; } .btn--secondary { color: #FFFFFF !important; } .btn--secondary::before { background-image: url('/images/buttons/spray-outline.webp'); left: -0.5%; width: 102.5%; top: -37.0%; height: 193.0%; } .btn--blue { color: #0E0E10 !important; } .btn--blue::before { background-image: url('/images/buttons/spray-blue.webp'); left: -1.8%; width: 103.8%; top: -45.9%; height: 207.9%; } .fr-form button[type="submit"], .careers-form__submit, .ct-form__submit { color: #0E0E10 !important; } .fr-form button[type="submit"]::before, .careers-form__submit::before, .ct-form__submit::before { background-image: url('/images/buttons/spray-misprint.webp'); left: -0.6%; width: 102.7%; top: -35.7%; height: 189.7%; } .btn--ghost { color: #FFFFFF !important; } .btn--ghost::before { background-image: url('/images/buttons/spray-outline.webp'); left: -0.5%; width: 102.5%; top: -37.0%; height: 193.0%; opacity: .85; } .btn:hover, .ct-form__submit:hover, .ml-club__form button[type="submit"]:hover, .fr-form button[type="submit"]:hover, .careers-form__submit:hover { transform: translateY(-2px) rotate(-.6deg) !important; background: transparent !important; filter: drop-shadow(0 0 14px rgba(234,143,181,.45)); } .btn--blue:hover { filter: drop-shadow(0 0 14px rgba(108,200,226,.5)); } .btn--secondary:hover, .btn--ghost:hover { color: #FFFFFF !important; filter: drop-shadow(0 0 12px rgba(255,255,255,.35)); } .btn:hover::before { transform: scaleY(1.04); } .btn:active { transform: translateY(1px) !important; } .btn:focus-visible { outline: 2px dashed var(--ml-blue); outline-offset: 6px; } /* small and header buttons: a touch tighter */ .btn--sm, .header-ctas .btn, .btn--mobile { padding: 12px 22px 11px; margin-bottom: 10px; } .btn--sm::before, .header-ctas .btn::before, .btn--mobile::before { background-image: url('/images/buttons/spray-pink-sm.webp'); left: -1.8%; width: 103.9%; top: -44.6%; height: 185.7%; } .btn--sm.btn--secondary::before, .header-ctas .btn--secondary::before, .header-ctas .btn--ghost::before, .btn--sm.btn--ghost::before { background-image: url('/images/buttons/spray-outline-sm.webp'); left: -0.5%; width: 102.5%; top: -37.0%; height: 175.0%; } .btn--sm.btn--blue::before { background-image: url('/images/buttons/spray-blue-sm.webp'); left: -1.8%; width: 103.8%; top: -45.9%; height: 187.9%; } .ct-form__submit, .fr-form button[type="submit"], .careers-form__submit { margin-bottom: 30px; } /* on pink or light grounds the white outline would vanish: use the pink pill */ .h-blue .btn--secondary, .cta-banner .btn--secondary, .ab-section--paper .btn--secondary { color: #0E0E10 !important; } .h-blue .btn--secondary::before, .cta-banner .btn--secondary::before, .ab-section--paper .btn--secondary::before { background-image: url('/images/buttons/spray-blue.webp'); left: -1.8%; width: 103.8%; top: -45.9%; height: 207.9%; } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none !important; } } /* 2 Nov 2026 consistency pass: the last solid pill buttons now use the spray pills too. Menu download (ml-menudl.js), the Uber Eats jump on delivery and the functions form submit. */ .menudl__btn, a.dl-jump, .fn-form-wrap button[type="submit"] { position: relative; isolation: isolate; z-index: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #0E0E10 !important; overflow: visible; margin-bottom: 18px; } .menudl__btn::after { content: none !important; display: none !important; } .menudl__btn::before, a.dl-jump::before, .fn-form-wrap button[type="submit"]::before { content: ''; position: absolute; z-index: -1; pointer-events: none; display: block; border: 0 !important; border-radius: 0 !important; background: url('/images/buttons/spray-pink.webp') center / 100% 100% no-repeat !important; left: -1.8%; width: 103.9%; top: -44.6%; height: 205.4%; transition: transform .25s ease; transform-origin: 50% 20%; } .fn-form-wrap button[type="submit"]::before { background-image: url('/images/buttons/spray-misprint.webp') !important; left: -0.6%; width: 102.7%; top: -35.7%; height: 189.7%; } .menudl__btn:hover, .menudl__btn:focus-visible, a.dl-jump:hover, .fn-form-wrap button[type="submit"]:hover { background: transparent !important; transform: translateY(-2px) rotate(-.6deg); filter: drop-shadow(0 0 14px rgba(234,143,181,.45)); box-shadow: none !important; } .menudl__btn:hover::before, .menudl__btn:focus-visible::before { background-color: transparent !important; } a.dl-jump .dl-jump__badge { background: rgba(14,14,16,.14); color: #0E0E10; } .fn-form-wrap button[type="submit"] { width: auto !important; min-width: 0 !important; display: block; margin: 14px auto 30px !important; padding: 15px 38px 14px !important; font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; font-size: 15px; } /* store cards on /restaurants/: Book a Table as the small pink spray pill, like the home page cards */ .store-book-btn { position: relative; isolation: isolate; z-index: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #0E0E10 !important; overflow: visible; margin-bottom: 12px; } .store-book-btn::before { content: ''; position: absolute; z-index: -1; pointer-events: none; background: url('/images/buttons/spray-pink-sm.webp') center / 100% 100% no-repeat; left: -1.8%; width: 103.9%; top: -44.6%; height: 185.7%; } .store-book-btn:hover { background: transparent !important; filter: drop-shadow(0 0 12px rgba(234,143,181,.45)); } /* ========================================================================== Menu stickers on cards · Nov 2026 menu update Crowd Fave (one per category, same picks as the printed menu) and Best Value on the Cheat Platter. They sit inside the picture, top left, so they never cover the price drip in the top right. ========================================================================== */ .art .ml-sticker--card, .img-wrap .ml-sticker--card { top: 8px !important; left: 8px !important; right: auto !important; width: 112px !important; transform: rotate(-9deg); z-index: 4; } .burger-card .art .ml-sticker--card img, .sd-card .art .ml-sticker--card img, .ds-card .art .ml-sticker--card img, .shake-card .art .ml-sticker--card img, .item-card .img-wrap .ml-sticker--card img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; padding: 0 !important; transform: none !important; } .cheat-feature .art { position: relative; } .cheat-feature .art .ml-sticker--bv { top: 4% !important; left: 4% !important; width: 150px !important; transform: rotate(-8deg); } .cheat-price { margin: 6px 0 10px; } .cheat-price .price-stamp { position: relative !important; display: inline-block; transform: none !important; } .pill .pill-price { font-weight: 900; margin-left: 4px; color: var(--ml-pink, #EA8FB5); } @media (max-width: 640px) { .art .ml-sticker--card, .img-wrap .ml-sticker--card { width: 88px !important; } .cheat-feature .art .ml-sticker--bv { width: 110px !important; } } .pill.featured .pill-price { color: var(--ml-ink, #0E0E10); }