/* ==========================================================================
MOTION — restaurant theme stylesheet
--------------------------------------------------------------------------
The whole design lives here; index.tpl carries only the five-line colour
block that feeds the owner's palette into the tokens below. There is no
Tailwind on this theme and no utility classes in the markup — the reference
design was written as one hand-made stylesheet and it is kept that way, so a
rule can be found by the name of the thing it draws.
Sections
1 Tokens, ground and type
2 Header and hero
3 Story (flip photos)
4 Menu: tools, categories, cards, allergens
5 Gallery
6 Order / address band
7 Footer and quick contact
8 The owner's popup messages (.mo-promo-*)
9 Motion: keyframes, reveal, reduced motion
10 Breakpoints
11 The platform's dialogs — order, booking, login, allergens, cookies
Sections 1-10 are the reference design, transposed onto the platform's
markup. Section 11 is not the design's: it restyles the shared dialogs that
restaurant.js opens, which arrive with their own Bootstrap-shaped markup and
are styled nowhere else once the modern-cuisine stylesheet is left out.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
Dark is the design's own look and stays the default; the light values are
restated in the [data-mo-theme="light"] block and are chosen by the owner's
"Background home page: Light / Dark" setting, which index.tpl stamps onto
so the first paint is already right.
Every colour in this file resolves through one of these. The -rgb pairs
carry the same colour as bare channels, because most of the design's depth
is washes — rgba(var(--mo-accent-rgb), .08) and friends — and a var() cannot
be interpolated into a hex.
-------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Ground. --mo-bg is the page, --mo-bg-deep the top of its gradient,
--mo-band the darker plate the order section sits on. */
--mo-bg: #080808;
--mo-bg-rgb: 8, 8, 8;
--mo-bg-deep: #060606;
--mo-bg-deep-2: #10100f;
--mo-band: #090909;
--mo-footer-bg: #050505;
/* Raised surfaces, from the flattest to the most lifted: fields and the
menu band, a dish card, a card under focus and the map plate. */
--mo-panel: #11100f;
--mo-panel-2: #171412;
--mo-surface: #101010;
--mo-surface-rgb: 16, 16, 16;
--mo-surface-2: #141414;
--mo-surface-3: #181818;
--mo-surface-3-rgb: 18, 18, 18;
/* The dish card is a flat plate, not a lit one — its own pair, because the
design's other surfaces keep the gradient wash and this one dropped it.
A menu is read as a list: twenty cards each catching light at their own
corner is twenty highlights competing with the twenty prices. */
--mo-card: #1a1a1a;
--mo-card-hover: #212121;
/* Ink. --mo-ink-rgb is the colour every hairline and hover wash is mixed
from — white on the dark ground, near-black on the light one — which is
what lets one set of rules serve both modes. */
--mo-text: #f8f3ec;
--mo-muted: #b7cad8;
--mo-muted-cool: #c4c8ca;
--mo-ink-rgb: 255, 255, 255;
--mo-shade-rgb: 0, 0, 0;
--mo-line: rgba(211, 181, 145, 0.18);
--mo-line-rgb: 211, 181, 145;
--mo-line-strong: rgba(211, 181, 145, 0.34);
--mo-shadow: rgba(0, 0, 0, 0.42);
/* Brand. index.tpl restates --mo-accent-base and --mo-accent-rgb from the
restaurant's own Theme color; everything else here is derived, so one
setting moves the accent through the entire page.
--mo-on-accent is the ink printed on top of an accent plate. It is a
token rather than a literal because the light mode darkens the accent
and has to flip this with it. */
--mo-accent-base: #d1aa7e;
--mo-accent: var(--mo-accent-base);
--mo-accent-rgb: 209, 170, 126;
--mo-accent-2: #d7b07e;
/* The accent as INK — as type, not as a plate. The dish number, the price
and the order button are the restaurant's own colour set small on a
near-black card, and a Theme color is not chosen for that job: it is
picked in a settings form against white. #895100 is a good button on
paper and 2.7:1 against this card, which is under the 4.5:1 small type
needs and well under what a menu read on a phone in a restaurant needs.
So the hue and the chroma are the restaurant's and only the lightness is
the theme's: max() raises a colour that is too dark and leaves one that
is already light exactly where it is. A restaurant that saved #ff5722
keeps #ff6c3b; this one gets #da9c5d at 7.4:1, still its own orange.
Three declarations, in rising order of what a browser has to know. The
first is the design's own gold, which every browser understands and
which is what the price wore before the accent reached it — legible,
just not the restaurant's. The second keeps some of the hue. The last is
the real answer; a browser that cannot parse it drops that line and
falls back to the one above. */
--mo-accent-ink: var(--mo-accent-2);
--mo-accent-ink: color-mix(in srgb, var(--mo-accent-base) 62%, #ffd9b0);
--mo-accent-ink: oklch(from var(--mo-accent-base) max(l, 0.74) c h);
--mo-accent-soft: #e7cfaa;
--mo-accent-label: #d8bf9a;
--mo-accent-hi: #ddb98f;
--mo-accent-grad-a: #d8b58c;
--mo-accent-grad-b: #c69a6b;
--mo-on-accent: #080808;
/* The warm second gold the design uses for edges and glows only, never for
type. It follows the owner's accent so a restaurant that picks red does
not keep a gold halo. */
--mo-glow-rgb: var(--mo-accent-rgb);
--mo-jade: #8ea08d;
--mo-whatsapp: #25d366;
/* The one colour on the page that is not the restaurant's own. "New" and
"reduced" are the two things a reader is meant to spot without looking
for them, and the accent cannot mark them — on this design the accent is
already the price, the kickers, the card edge and the active tab, so a
badge wearing it says "more of the same". Red is the exception, and it
is the only one. */
--mo-flag: #e0392b;
--mo-flag-rgb: 224, 57, 43;
/* The owner's three heading colours. They were picked against a dark
theme, which this one is, so they are used as given here and overridden
only in light mode. */
--mo-name-color: var(--mo-text);
--mo-subtitle-color: var(--mo-text);
--mo-category-color: var(--mo-text);
--mo-serif: "Alumni Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mo-sans: "Alumni Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mo-condensed: "Barlow Condensed", "Alumni Sans", ui-sans-serif, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
Light mode
Warm paper rather than white: the accent and the food photography both sit
better on it. Only tokens are restated — no component rule below knows which
mode it is in.
Two things do not simply inverse:
The accent. A pale gold is a plate colour, not a text colour; printed on
paper at label size it disappears. It is darkened here, and --mo-on-accent
flips to paper with it so a button stays a dark plate with light ink rather
than becoming gold-on-gold. color-mix is stated after a plain fallback so a
browser without it still gets a usable colour.
The footer keeps its dark plate in both modes — it closes the page the way
the hero opens it, and its social buttons and legal links are drawn for it.
The selector is html[…] rather than a bare attribute for a reason that costs
an afternoon to find otherwise: index.tpl writes the owner's colours into a
:root block in the , after this stylesheet. Two selectors of equal
weight, and the later one wins — so a bare [data-mo-theme="light"] would be
overruled by RESTAURANT_NAME_COLOR, which every restaurant has saved as
white because every theme before this one was dark. The tag name is what
makes this block heavier, and it is why a heading is readable on paper.
-------------------------------------------------------------------------- */
html[data-mo-theme="light"] {
color-scheme: light;
--mo-bg: #f7f4ee;
--mo-bg-rgb: 247, 244, 238;
--mo-bg-deep: #fffdf9;
--mo-bg-deep-2: #f1ece3;
--mo-band: #f1ece3;
--mo-panel: #ffffff;
--mo-panel-2: #f8f4ed;
--mo-surface: #ffffff;
--mo-surface-rgb: 255, 255, 255;
--mo-surface-2: #ffffff;
--mo-surface-3: #f4efe7;
--mo-surface-3-rgb: 244, 239, 231;
--mo-card: #ffffff;
--mo-card-hover: #fffdf9;
--mo-text: #16130f;
--mo-muted: #5a6670;
--mo-muted-cool: #55606a;
--mo-ink-rgb: 22, 19, 15;
--mo-shade-rgb: 22, 19, 15;
--mo-line: rgba(22, 19, 15, 0.14);
--mo-line-rgb: 22, 19, 15;
--mo-line-strong: rgba(22, 19, 15, 0.26);
--mo-shadow: rgba(22, 19, 15, 0.16);
--mo-accent: var(--mo-accent-base);
--mo-accent: color-mix(in srgb, var(--mo-accent-base) 68%, #120d07);
--mo-accent-soft: var(--mo-accent);
--mo-accent-label: var(--mo-accent);
--mo-accent-hi: var(--mo-accent-base);
--mo-on-accent: #fffdf9;
/* On paper the correction runs the other way: the card is white, so a pale
accent is the one that disappears and lightening it would be the bug.
--mo-accent is already the darkened mix stated three lines up, which is
exactly what ink on a white card wants, so the token simply follows it
rather than raising a floor nothing here needs. */
--mo-accent-ink: var(--mo-accent);
/* The design's second gold is a plate colour and a text colour at once —
the price chip, the allergen letters, the hours column, the brand mark.
Left at its pale value it is legible on the dark ground and gone on
paper, so in light mode it follows the darkened accent. */
--mo-accent-2: var(--mo-accent);
--mo-name-color: var(--mo-text);
--mo-subtitle-color: var(--mo-text);
--mo-category-color: var(--mo-text);
}
/* The footer is a dark plate whatever the page is set to, so inside it the ink
tokens go back to their dark-mode values.
The hero does NOT belong here, which is the difference between this design
and every other theme in the folder: its banner is inside the circle on the
right, not behind the words on the left. The hero's type sits on the page's
own ground and takes the page's own ink. */
/* The circle is a photograph with type printed over it, and the design darkens
that photograph hard: a scrim mixed from --mo-surface-3, the picture itself
at 58% and brightness .64. On paper those tokens turn the scrim into a white
veil and the banner disappears under it. So the circle keeps the dark
treatment in both modes, exactly as a banner does on the other themes — the
picture stays a picture and its caption stays readable. */
html[data-mo-theme="light"] .mo-hero-feature-stage {
--mo-surface-3: #181818;
--mo-surface-3-rgb: 18, 18, 18;
--mo-text: #f8f3ec;
--mo-muted: #b7cad8;
--mo-muted-cool: #c4c8ca;
--mo-ink-rgb: 255, 255, 255;
--mo-accent: var(--mo-accent-base);
--mo-accent-2: #d7b07e;
/* The dish name takes no colour of its own — it inherits, and inheritance
carries the computed colour body resolved from --mo-text, not the token.
Re-stating the token here would leave the name at the page's dark ink;
re-stating the colour is what makes the override reach it. */
color: var(--mo-text);
}
html[data-mo-theme="light"] .mo-site-footer {
--mo-text: #f8f3ec;
--mo-muted: #b7cad8;
--mo-muted-cool: #c4c8ca;
--mo-ink-rgb: 255, 255, 255;
--mo-line: rgba(211, 181, 145, 0.18);
--mo-line-rgb: 211, 181, 145;
--mo-accent: var(--mo-accent-base);
--mo-accent-soft: #e7cfaa;
--mo-accent-label: #d8bf9a;
--mo-on-accent: #080808;
--mo-name-color: var(--mo-text);
--mo-subtitle-color: var(--mo-text);
}
/* The owner's own colours, applied where the settings page says they go. They
are stated after the token blocks so a restaurant that picked a colour wins
over the design's defaults. The category heading takes the tag name as well,
because the font dialog compiles its selections with !important and
specificity is what decides between two of those. */
.mo-hero-copy h1 { color: var(--mo-name-color); }
.mo-hero-subtitle { color: var(--mo-subtitle-color); }
h3.mo-cat-title { color: var(--mo-category-color); }
/* --------------------------------------------------------------------------
2-10. The reference design
Transposed from restaurant-motion-redesign/index.html. The class names are
the design's own, prefixed mo- so nothing in this file can be reached by the
platform's markup or reach into it, and every colour has been routed through
the tokens in 1 so the light setting is a change of values, not of rules.
-------------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(120deg, rgba(var(--mo-accent-rgb), 0.08), transparent 26%),
linear-gradient(180deg, var(--mo-bg-deep) 0%, var(--mo-bg) 42%, var(--mo-bg-deep-2) 100%);
color: var(--mo-text);
font-family: var(--mo-sans);
font-size: 21px;
letter-spacing: 0;
}
body.has-promo {
overflow: hidden;
}
body::before {
position: fixed;
inset: 0;
z-index: -1;
content: "";
pointer-events: none;
opacity: 0.32;
background-image:
linear-gradient(rgba(var(--mo-ink-rgb), 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--mo-ink-rgb), 0.02) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 82%, transparent 100%);
}
.mo-site-shell a,
.mo-quick-contact a,
.mo-promo-modal a {
color: inherit;
text-decoration: none;
}
.mo-site-shell img,
.mo-site-shell video,
.mo-promo-media img,
.mo-promo-media video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mo-site-shell figure {
margin: 0;
}
.mo-site-shell {
overflow: hidden;
}
.mo-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px clamp(18px, 4vw, 56px);
background: linear-gradient(180deg, rgba(var(--mo-bg-rgb), 0.82), rgba(var(--mo-bg-rgb), 0));
backdrop-filter: blur(12px);
}
.mo-brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--mo-serif);
font-size: clamp(20px, 2vw, 26px);
line-height: 1;
white-space: nowrap;
}
.mo-brand-mark {
width: 34px;
height: 34px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.26);
display: grid;
place-items: center;
color: var(--mo-accent-2);
font-size: 20px;
transform: rotate(45deg);
}
.mo-brand-mark span {
transform: rotate(-45deg);
}
.mo-nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px 30px;
color: rgba(var(--mo-ink-rgb), 0.92);
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.7px;
text-transform: uppercase;
text-shadow: 0 10px 28px rgba(var(--mo-shade-rgb), 0.55);
}
.mo-nav a {
position: relative;
padding: 10px 0;
transition: color 220ms ease;
}
.mo-nav a::after {
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 1px;
content: "";
background: var(--mo-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 260ms ease;
}
.mo-nav a:hover,
.mo-nav a:focus-visible {
color: var(--mo-text);
}
.mo-nav a:hover::after,
.mo-nav a:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.mo-hero {
position: relative;
min-height: clamp(620px, 78svh, 760px);
display: grid;
align-items: center;
padding: 86px clamp(18px, 5vw, 58px) 52px;
background:
linear-gradient(90deg, rgba(var(--mo-bg-rgb), 0.92) 0%, rgba(var(--mo-bg-rgb), 0.7) 46%, rgba(var(--mo-surface-3-rgb), 0.82) 100%),
linear-gradient(180deg, transparent 0%, rgba(var(--mo-accent-rgb), 0.08) 100%);
}
.mo-hero::before {
position: absolute;
inset: 0;
content: "";
pointer-events: none;
background:
linear-gradient(180deg, rgba(var(--mo-ink-rgb), 0.045), transparent 18%),
linear-gradient(100deg, transparent 0%, rgba(var(--mo-glow-rgb), 0.08) 74%, transparent 100%);
opacity: 0.9;
}
.mo-hero-grid {
position: relative;
z-index: 1;
width: min(1240px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(330px, 0.78fr);
gap: clamp(26px, 4vw, 60px);
align-items: center;
}
.mo-hero-copy {
position: relative;
z-index: 2;
animation: copyEnter 900ms cubic-bezier(.2, .8, .2, 1) both;
}
.mo-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding: 7px 12px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
color: rgba(var(--mo-ink-rgb), 0.84);
background: rgba(var(--mo-ink-rgb), 0.035);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-hero-badge::before {
width: 8px;
height: 8px;
border-radius: 999px;
content: "";
background: var(--mo-accent-2);
box-shadow: 0 0 0 6px rgba(var(--mo-glow-rgb), 0.1);
animation: dotPulse 2100ms ease-out infinite;
}
.mo-hero-welcome {
margin: 0 0 10px;
color: var(--mo-accent);
font-family: var(--mo-serif);
font-size: clamp(24px, 2.6vw, 34px);
font-style: italic;
line-height: 1.1;
}
.mo-site-shell h1,
.mo-site-shell h2,
.mo-site-shell h3,
.mo-promo-content h2 {
margin: 0;
font-family: var(--mo-serif);
font-weight: 500;
letter-spacing: 0;
}
.mo-site-shell h1 {
max-width: 760px;
font-size: clamp(44px, 8vw, 104px);
line-height: 0.92;
}
.mo-hero-copy h1 {
max-width: 720px;
font-size: clamp(52px, 8vw, 104px);
line-height: 0.88;
}
.mo-hero-subtitle {
display: flex;
align-items: center;
gap: 14px;
margin-top: 12px;
color: var(--mo-text);
font-size: clamp(18px, 1.8vw, 26px);
font-weight: 500;
text-transform: uppercase;
}
.mo-hero-subtitle::after {
width: 54px;
height: 1px;
content: "";
background: var(--mo-accent-2);
animation: linePulse 2600ms ease-in-out infinite;
}
.mo-hero-subtitle em {
color: var(--mo-accent-soft);
font-family: var(--mo-serif);
font-size: 0.86em;
font-style: italic;
text-transform: none;
}
.mo-hero-text {
max-width: 610px;
margin: 18px 0 0;
color: var(--mo-muted);
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.65;
}
.mo-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
}
.mo-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.18);
border-radius: 4px;
overflow: hidden;
color: var(--mo-text);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
background: rgba(var(--mo-ink-rgb), 0.04);
transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.mo-hero .mo-button.primary {
border-color: var(--mo-accent);
color: var(--mo-on-accent);
background: linear-gradient(135deg, var(--mo-accent-grad-a), var(--mo-accent-grad-b));
}
.mo-hero .mo-button {
min-width: min(278px, 100%);
min-height: 58px;
padding: 0 30px;
font-size: 18px;
letter-spacing: 1px;
}
.mo-button::before {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(110deg, transparent, rgba(var(--mo-ink-rgb), 0.24), transparent);
transform: translateX(-130%);
transition: transform 500ms ease;
}
.mo-button span {
position: relative;
z-index: 1;
}
.mo-button:hover,
.mo-button:focus-visible {
transform: translateY(-2px);
border-color: rgba(var(--mo-ink-rgb), 0.42);
}
.mo-button:hover::before,
.mo-button:focus-visible::before {
transform: translateX(130%);
}
.mo-hero-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 3vw, 26px);
max-width: 650px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(var(--mo-ink-rgb), 0.12);
}
.mo-hero-info {
display: grid;
gap: 8px;
color: var(--mo-accent-label);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-hero-info span {
color: var(--mo-accent);
}
.mo-hero-info p {
margin: 0;
color: var(--mo-muted-cool);
font-size: 16px;
line-height: 1.7;
text-transform: none;
}
.mo-hero-feature-stage {
position: relative;
min-height: clamp(340px, 46vh, 480px);
display: grid;
place-items: center;
perspective: 1200px;
isolation: isolate;
animation: mediaEnter 1100ms cubic-bezier(.2, .8, .2, 1) 160ms both;
}
.mo-hero-feature-stage::before {
position: absolute;
inset: 10% 3%;
content: "";
border-radius: 999px;
border: 1px solid rgba(var(--mo-glow-rgb), 0.1);
transform: rotate(-8deg);
animation: ringFloat 9000ms ease-in-out infinite;
}
.mo-dish-orbit {
position: relative;
width: min(360px, 32vw);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 50%;
transform-style: preserve-3d;
animation: orbitBreath 7200ms ease-in-out infinite;
}
.mo-dish-orbit::before,
.mo-dish-orbit::after {
position: absolute;
content: "";
border-radius: 50%;
pointer-events: none;
}
.mo-dish-orbit::before {
inset: -22px;
border: 1px solid rgba(var(--mo-glow-rgb), 0.16);
box-shadow: inset 0 0 38px rgba(var(--mo-glow-rgb), 0.06);
}
.mo-dish-orbit::after {
inset: -6px;
z-index: 1;
border: 1px solid rgba(var(--mo-ink-rgb), 0.1);
box-shadow: 0 36px 90px rgba(var(--mo-shade-rgb), 0.48);
}
.mo-feature-panel {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
background: var(--mo-surface-3);
opacity: 0;
transform: rotateY(90deg) scale(0.88);
backface-visibility: hidden;
animation: heroDishFlip 18s infinite;
}
.mo-feature-panel:nth-child(2) {
animation-delay: 6s;
}
.mo-feature-panel:nth-child(3) {
animation-delay: 12s;
}
.mo-feature-panel img,
.mo-feature-panel video {
position: absolute;
inset: 0;
opacity: 0.58;
filter: saturate(0.92) contrast(1.08) brightness(0.64);
transform: scale(1.1);
animation: featureImageMove 18s ease-in-out infinite;
}
.mo-feature-panel:nth-child(2) img,
.mo-feature-panel:nth-child(2) video {
animation-delay: 6s;
}
.mo-feature-panel:nth-child(3) img,
.mo-feature-panel:nth-child(3) video {
animation-delay: 12s;
}
.mo-feature-panel::before {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(180deg, rgba(var(--mo-surface-3-rgb), 0.2), rgba(var(--mo-surface-3-rgb), 0.78)),
linear-gradient(90deg, rgba(var(--mo-surface-3-rgb), 0.76), rgba(var(--mo-surface-3-rgb), 0.58));
}
.mo-feature-panel::after {
position: absolute;
inset: -50% -22%;
content: "";
background: linear-gradient(105deg, transparent 28%, rgba(var(--mo-ink-rgb), 0.22) 48%, transparent 66%);
transform: translateX(-72%) rotate(9deg);
mix-blend-mode: screen;
animation: featureShine 6000ms ease-in-out infinite;
}
.mo-feature-panel:nth-child(2)::after {
animation-delay: 6s;
}
.mo-feature-panel:nth-child(3)::after {
animation-delay: 12s;
}
.mo-feature-content {
position: relative;
z-index: 2;
width: 74%;
display: grid;
justify-items: center;
text-align: center;
}
.mo-feature-line {
width: 80px;
height: 2px;
margin-bottom: 18px;
background: var(--mo-accent);
}
.mo-feature-kicker {
margin: 0 0 18px;
color: rgba(var(--mo-ink-rgb), 0.72);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-feature-content h2 {
margin: 0;
font-family: var(--mo-serif);
font-size: clamp(30px, 3vw, 42px);
font-style: italic;
font-weight: 500;
line-height: 1.08;
}
.mo-feature-content p {
max-width: 250px;
margin: 18px 0 0;
color: var(--mo-muted-cool);
font-size: 18px;
line-height: 1.7;
}
.mo-feature-price {
margin-top: 18px;
color: var(--mo-accent-2);
font-family: var(--mo-serif);
font-size: 24px;
font-weight: 500;
}
.mo-pulse-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--mo-accent);
box-shadow: 0 0 0 rgba(var(--mo-accent-rgb), 0.5);
animation: dotPulse 1800ms ease-out infinite;
}
.mo-scroll-marquee {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
gap: 0;
padding: 11px 0;
border-top: 1px solid rgba(var(--mo-line-rgb), 0.22);
border-bottom: 1px solid rgba(var(--mo-line-rgb), 0.16);
overflow: hidden;
color: rgba(var(--mo-ink-rgb), 0.68);
background:
linear-gradient(90deg, rgba(var(--mo-accent-rgb), 0.12), transparent 16%, transparent 84%, rgba(var(--mo-accent-rgb), 0.1)),
rgba(var(--mo-bg-rgb), 0.62);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.mo-scroll-marquee > span {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 16px;
padding-right: 30px;
animation: marqueeMove 24s linear infinite;
}
.mo-marquee-item {
white-space: nowrap;
}
.mo-marquee-item.is-accent {
color: var(--mo-accent-2);
text-shadow: 0 0 18px rgba(var(--mo-accent-rgb), 0.24);
}
.mo-marquee-divider {
color: rgba(var(--mo-accent-rgb), 0.72);
font-family: var(--mo-condensed);
font-size: 21px;
line-height: 1;
}
.mo-marquee-icon {
width: 9px;
height: 9px;
border: 1px solid rgba(var(--mo-accent-rgb), 0.9);
background: rgba(var(--mo-accent-rgb), 0.16);
transform: rotate(45deg);
box-shadow: 0 0 0 5px rgba(var(--mo-accent-rgb), 0.08);
}
.mo-section {
padding: clamp(52px, 7vw, 86px) clamp(18px, 6vw, 78px);
}
.mo-section-inner {
width: min(1180px, 100%);
margin: 0 auto;
}
.mo-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 28px;
}
.mo-section-kicker {
margin: 0 0 12px;
color: var(--mo-accent);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-site-shell h2 {
font-size: clamp(34px, 5vw, 62px);
line-height: 1;
}
.mo-section-heading p {
max-width: 420px;
margin: 0;
color: var(--mo-muted);
font-size: 21px;
line-height: 1.6;
}
.mo-flip-photo {
position: relative;
min-height: 410px;
border-radius: 6px;
perspective: 1400px;
}
.mo-flip-photo-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
animation: aboutPageFlip 8.8s cubic-bezier(.7, 0, .2, 1) infinite;
}
.mo-flip-photo:nth-child(2) .mo-flip-photo-inner {
animation-delay: 2.2s;
}
.mo-flip-face {
position: absolute;
inset: 0;
border: 1px solid rgba(var(--mo-ink-rgb), 0.14);
border-radius: 6px;
overflow: hidden;
background: var(--mo-panel);
box-shadow: 0 26px 72px rgba(var(--mo-shade-rgb), 0.34);
backface-visibility: hidden;
}
.mo-flip-face.back {
transform: rotateY(180deg);
}
.mo-flip-face::before {
position: absolute;
inset: 0;
z-index: 2;
content: "";
background:
linear-gradient(90deg, rgba(var(--mo-shade-rgb), 0.34), transparent 30%, transparent 72%, rgba(var(--mo-shade-rgb), 0.42)),
linear-gradient(180deg, transparent 45%, rgba(var(--mo-shade-rgb), 0.52));
pointer-events: none;
}
.mo-flip-face::after {
position: absolute;
inset: 0;
z-index: 3;
content: "";
background: linear-gradient(105deg, transparent 20%, rgba(var(--mo-ink-rgb), 0.2), transparent 52%);
opacity: 0;
transform: translateX(-70%);
animation: pageShine 8.8s ease-in-out infinite;
pointer-events: none;
}
.mo-flip-photo:nth-child(2) .mo-flip-face::after {
animation-delay: 2.2s;
}
.mo-flip-face img {
transform: scale(1.06);
transition: transform 600ms ease;
}
.mo-flip-photo:hover .mo-flip-face img,
.mo-flip-photo:focus-within .mo-flip-face img {
transform: scale(1.11);
}
.mo-flip-label {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
border-radius: 4px;
color: var(--mo-muted);
background: rgba(var(--mo-bg-rgb), 0.66);
backdrop-filter: blur(12px);
font-size: 16px;
font-weight: 400;
}
.mo-flip-label span:first-child {
color: var(--mo-text);
font-family: var(--mo-serif);
font-size: 22px;
font-weight: 500;
}
.mo-menu {
background:
linear-gradient(180deg, rgba(var(--mo-ink-rgb), 0.025), transparent 24%),
var(--mo-surface);
}
.mo-menu-tools {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 14px;
border: 1px solid var(--mo-line);
margin-bottom: 22px;
background: rgba(var(--mo-ink-rgb), 0.02);
overflow: hidden;
transition: grid-template-columns 360ms cubic-bezier(.2, .8, .2, 1), gap 260ms ease;
}
.mo-menu-tools.has-search-open {
grid-template-columns: minmax(280px, min(430px, 38vw)) minmax(0, 1fr);
gap: 20px;
}
.mo-search {
position: relative;
display: flex;
align-items: center;
width: 46px;
min-width: 46px;
height: 46px;
min-inline-size: 0;
transition: width 360ms cubic-bezier(.2, .8, .2, 1);
}
.mo-search.is-open,
.mo-search:focus-within {
width: 100%;
}
.mo-search-toggle {
position: absolute;
inset: 0;
z-index: 2;
width: 46px;
height: 46px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
border-radius: 4px;
background: var(--mo-surface);
cursor: pointer;
appearance: none;
transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.mo-search-toggle:hover,
.mo-search-toggle:focus-visible {
border-color: var(--mo-accent);
transform: translateY(-2px);
}
.mo-search-toggle::before {
position: absolute;
top: 14px;
left: 14px;
width: 13px;
height: 13px;
border: 2px solid var(--mo-muted);
border-radius: 999px;
content: "";
}
.mo-search-toggle::after {
position: absolute;
top: 28px;
left: 27px;
width: 8px;
height: 2px;
content: "";
background: var(--mo-muted);
transform: rotate(45deg);
transform-origin: left center;
}
.mo-search.is-open .mo-search-toggle,
.mo-search:focus-within .mo-search-toggle {
right: auto;
border-color: transparent;
background: transparent;
pointer-events: none;
transform: none;
}
.mo-search input {
width: 100%;
height: 46px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
border-radius: 4px;
padding: 0 16px 0 46px;
color: var(--mo-text);
background: var(--mo-surface);
outline: none;
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transform-origin: left center;
transition: opacity 220ms ease, transform 360ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, box-shadow 220ms ease;
font-size: 18px;
font-weight: 400;
}
.mo-search.is-open input,
.mo-search:focus-within input {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.mo-search input:focus {
border-color: var(--mo-accent);
box-shadow: 0 0 0 3px rgba(var(--mo-accent-rgb), 0.18);
}
.mo-tabs {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
min-width: 0;
transform: translateX(0);
transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}
.mo-menu-tools.has-search-open .mo-tabs {
transform: translateX(4px);
}
.mo-tab {
min-height: 46px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.2);
border-radius: 4px;
padding: 0 18px;
color: rgba(var(--mo-ink-rgb), 0.86);
background: rgba(var(--mo-ink-rgb), 0.035);
cursor: pointer;
font: 500 16px var(--mo-sans);
letter-spacing: 0.8px;
text-transform: uppercase;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.mo-tab:hover,
.mo-tab:focus-visible {
transform: translateY(-2px);
color: var(--mo-text);
border-color: rgba(var(--mo-ink-rgb), 0.28);
}
.mo-tab.is-active {
color: var(--mo-on-accent);
border-color: var(--mo-accent);
background: var(--mo-accent);
box-shadow: 0 12px 34px rgba(var(--mo-accent-rgb), 0.28);
animation: activeTab 1800ms ease-in-out infinite;
}
.mo-menu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* The card is two rows: everything the dish says, and the bar the order button
sits in. The bar is a child of the card rather than of the body it used to
live in, which is the whole reason its rule below needs no negative margins
— its top border reaches both edges of the card on its own, and it does so
whether or not a photo has split the row above it into two columns.
1fr auto is what keeps that bar on the floor of the card. Without it the two
rows would each take their content's height and a short dish would leave the
bar floating in the middle of the card, out of line with the card beside it. */
.mo-dish-card {
position: relative;
display: grid;
grid-template-rows: 1fr auto;
min-height: 158px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
border-radius: 6px;
overflow: hidden;
background: var(--mo-card);
transition: transform 260ms ease, border-color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}
.mo-dish-card::before {
position: absolute;
inset: 0 auto 0 0;
width: 2px;
content: "";
background: linear-gradient(180deg, var(--mo-accent), rgba(var(--mo-glow-rgb), 0.7));
opacity: 0;
transform: scaleY(0.35);
transform-origin: center;
transition: opacity 260ms ease, transform 260ms ease;
}
.mo-dish-card[hidden] {
display: none;
}
.mo-dish-content {
display: grid;
align-content: start;
gap: 14px;
padding: 18px;
}
.mo-dish-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.mo-dish-code {
color: var(--mo-accent-ink);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.7px;
}
.mo-dish-name {
margin-top: 4px;
color: var(--mo-text);
font-size: 24px;
font-weight: 500;
line-height: 1.08;
}
/* The price is the restaurant's own accent, outlined and unfilled — the same
mark as the order button under it, at the other end of the card. It used to
take --mo-accent-2, the design's second gold, which is a fixed colour: a
restaurant that picked red got a red page with a gold price on it. */
.mo-dish-price {
flex: 0 0 auto;
min-width: 78px;
padding: 7px 12px;
border: 1px solid rgba(var(--mo-accent-rgb), 0.55);
border-color: color-mix(in srgb, var(--mo-accent-ink) 58%, transparent);
border-radius: 5px;
color: var(--mo-accent-ink);
font-family: var(--mo-serif);
font-size: 20px;
text-align: center;
background: transparent;
transition: border-color 240ms ease, background 240ms ease;
}
.mo-dish-desc {
margin: 0;
color: var(--mo-muted-cool);
font-size: 18px;
line-height: 1.5;
font-weight: 400;
}
/* The bar across the foot of the card. It is a child of the card, so its rule
is padding rather than the negative margins a nested bar would have needed,
and its top border is the full-width hairline the design draws under the
dish — under the photo column too, on a card that has one.
PHP prints it only when there is an order button to put in it: a hairline
over an empty strip is a card that looks unfinished, not a quiet one. */
.mo-dish-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
padding: 14px 18px;
border-top: 1px solid rgba(var(--mo-ink-rgb), 0.08);
}
.mo-allergen-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
/* The allergen letter, as a mark in a ring. Used twice: in the legend above
the menu and on the dish cards, and it is the same mark in both — a reader
matching a letter on a card against the legend is comparing two things that
have to look identical.
The size is set from the cap rather than from the ring. Alumni Sans is a
narrow face with a short cap — 9px of ink at 14px of type — so a letter set
at 14px inside a 28px ring covers under a third of it and reads as a speck
floating in a circle rather than as a badge. 19px in a 30px ring puts the
cap at about 40% of the ring, which is where a letter starts looking like it
belongs to the circle it is in.
Nothing here nudges the glyph, and nothing needs to: place-items does the
box and the face's own metrics do the rest. Measured on the page, the ink of
a capital sits 8.5px from the top of the ring and 9.5px from the bottom —
half a pixel above centre, which is rounding rather than a fault. A
correction for it would cost more than it bought. */
.mo-allergen {
position: relative;
display: inline-grid;
place-items: center;
min-width: 30px;
height: 30px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.15);
border-radius: 999px;
padding: 0 7px;
color: var(--mo-accent-2);
background: rgba(var(--mo-ink-rgb), 0.035);
font-size: 19px;
font-weight: 600;
line-height: 1;
cursor: help;
transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
/* The full allergen name, on hover.
It hangs from the LEFT edge of its mark and grows rightward, and that is not
a stylistic choice. Centred on the mark — left:50% and a -50% translate — it
reached about 33px past the left edge of the card, and the card clips: it
carries overflow:hidden so a 40-letter dish name cannot spill out of it. The
first allergen mark sits 19px from that edge, so a centred tooltip on the
first mark was always cut in half. Anchored left it starts inside the card
and runs into the width the card has, which is the direction the room is in.
240px rather than 160px because the names this prints are German compounds —
"Soja und Sojaerzeugnisse" was wrapping to three lines inside 160px before it
was clipped. The longest of them still wraps, which is what it is for. */
.mo-allergen::after {
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: 4;
width: max-content;
max-width: 240px;
padding: 7px 9px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.14);
border-radius: 4px;
color: var(--mo-text);
background: rgba(var(--mo-bg-rgb), 0.92);
content: attr(data-label);
font-size: 15px;
font-weight: 400;
line-height: 1.35;
opacity: 0;
pointer-events: none;
transform: translate(0, 4px);
transition: opacity 180ms ease, transform 180ms ease;
}
.mo-allergen:hover,
.mo-allergen:focus-visible {
border-color: rgba(var(--mo-glow-rgb), 0.48);
background: rgba(var(--mo-glow-rgb), 0.1);
transform: translateY(-1px);
}
.mo-allergen:hover::after,
.mo-allergen:focus-visible::after {
opacity: 1;
transform: translate(0, 0);
}
.mo-dish-card:hover,
.mo-dish-card:focus-within {
transform: translateY(-3px);
border-color: rgba(var(--mo-glow-rgb), 0.28);
background: var(--mo-card-hover);
box-shadow: 0 22px 54px rgba(var(--mo-shade-rgb), 0.22);
}
.mo-dish-card:hover::before,
.mo-dish-card:focus-within::before {
opacity: 1;
transform: scaleY(1);
}
.mo-dish-card:hover .mo-dish-price,
.mo-dish-card:focus-within .mo-dish-price {
border-color: var(--mo-accent-ink);
background: rgba(var(--mo-accent-rgb), 0.1);
}
/* Outlined and unfilled, in the restaurant's own accent — the price chip at
the other end of the card wears the same mark, so the two things a reader
is looking for on a menu card read as a pair. It fills on hover, which is
the only moment it needs to outweigh the price. */
.mo-order-link {
flex: 0 0 auto;
border: 1px solid rgba(var(--mo-accent-rgb), 0.55);
border-color: color-mix(in srgb, var(--mo-accent-ink) 58%, transparent);
border-radius: 5px;
padding: 10px 18px;
color: var(--mo-accent-ink);
background: transparent;
cursor: pointer;
font: 600 15px var(--mo-sans);
letter-spacing: 0.8px;
text-transform: uppercase;
transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* Filling with the raw accent would put --mo-on-accent — near-black — on
whatever the restaurant saved, and #080808 on #895100 is a button nobody can
read the moment the pointer touches it. The plate is the ink colour, which
is the accent with a floor under its lightness, so the pair is legible for
every Theme color rather than only for light ones. */
.mo-order-link:hover,
.mo-order-link:focus-visible {
transform: translateY(-2px);
border-color: var(--mo-accent-ink);
color: var(--mo-on-accent);
background: var(--mo-accent-ink);
}
.mo-allergen-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: -10px 0 22px;
padding: 12px 0 0;
color: var(--mo-muted);
border-top: 1px solid rgba(var(--mo-ink-rgb), 0.08);
font-size: 16px;
line-height: 1.5;
}
.mo-allergen-title {
flex: 0 0 auto;
color: var(--mo-text);
font-family: var(--mo-serif);
font-size: 24px;
font-weight: 500;
}
.mo-allergen-legend {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 12px;
}
.mo-allergen-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.mo-allergen-legend .mo-allergen {
cursor: default;
}
.mo-allergen-legend .mo-allergen::after {
display: none;
}
.mo-allergen-legend .mo-allergen:hover {
transform: none;
}
.mo-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 700ms ease, transform 700ms ease;
}
.mo-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.mo-reveal.delay-1 {
transition-delay: 120ms;
}
.mo-reveal.delay-2 {
transition-delay: 220ms;
}
.mo-reveal.delay-3 {
transition-delay: 320ms;
}
.mo-gallery {
background:
radial-gradient(circle at 50% 18%, rgba(var(--mo-glow-rgb), 0.08), transparent 32%),
var(--mo-on-accent);
}
.mo-gallery-heading {
margin-bottom: 28px;
text-align: center;
}
.mo-gallery-heading .mo-section-kicker {
letter-spacing: 6px;
}
.mo-gallery-title {
justify-content: center;
font-size: clamp(38px, 6vw, 66px);
}
.mo-gallery-title span {
color: var(--mo-accent-2);
font-style: italic;
}
.mo-gallery-filters {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 22px auto 0;
padding: 6px;
border: 1px solid rgba(var(--mo-line-rgb), 0.18);
background: rgba(var(--mo-ink-rgb), 0.025);
}
.mo-gallery-filter {
min-height: 42px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.14);
border-radius: 4px;
padding: 0 16px;
color: rgba(var(--mo-ink-rgb), 0.82);
background: rgba(var(--mo-bg-rgb), 0.42);
cursor: pointer;
font: 500 16px var(--mo-sans);
letter-spacing: 0.8px;
text-transform: uppercase;
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.mo-gallery-filter span {
margin-left: 8px;
color: var(--mo-accent-2);
font-family: var(--mo-condensed);
font-size: 20px;
letter-spacing: 0;
}
.mo-gallery-filter:hover,
.mo-gallery-filter:focus-visible {
transform: translateY(-2px);
border-color: rgba(var(--mo-glow-rgb), 0.42);
color: var(--mo-text);
background: rgba(var(--mo-glow-rgb), 0.1);
}
.mo-gallery-filter.is-active {
color: var(--mo-on-accent);
border-color: var(--mo-accent);
background: var(--mo-accent);
box-shadow: 0 16px 38px rgba(var(--mo-accent-rgb), 0.22);
}
.mo-gallery-filter.is-active span {
color: var(--mo-on-accent);
}
.mo-gallery-stage {
position: relative;
min-height: 410px;
margin: 0 auto;
isolation: isolate;
}
.mo-gallery-card {
position: absolute;
top: 0;
left: 50%;
width: min(640px, 54vw);
height: 340px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.14);
border-radius: 6px;
overflow: hidden;
background: var(--mo-surface-2);
box-shadow: 0 28px 90px rgba(var(--mo-shade-rgb), 0.46);
opacity: 0;
pointer-events: none;
filter: grayscale(1) brightness(0.58);
transform: translateX(-50%) scale(0.72);
transition: opacity 360ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1), filter 360ms ease, border-color 360ms ease;
}
.mo-gallery-card img {
transform: scale(1.04);
transition: transform 680ms ease, filter 680ms ease;
}
.mo-gallery-card.is-active {
z-index: 3;
opacity: 1;
pointer-events: auto;
filter: none;
border-color: rgba(var(--mo-glow-rgb), 0.3);
transform: translateX(-50%) scale(1);
}
.mo-gallery-card.is-prev {
z-index: 2;
opacity: 0.72;
transform: translateX(-112%) translateY(28px) rotate(-3deg) scale(0.76);
}
.mo-gallery-card.is-next {
z-index: 2;
opacity: 0.72;
transform: translateX(12%) translateY(28px) rotate(3deg) scale(0.76);
}
.mo-gallery-card.is-active img {
transform: scale(1.1);
}
.mo-gallery-caption {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
border-radius: 4px;
background: rgba(var(--mo-bg-rgb), 0.68);
backdrop-filter: blur(12px);
color: var(--mo-muted);
font-size: 16px;
}
.mo-gallery-caption span:first-child {
color: var(--mo-text);
font-family: var(--mo-serif);
font-size: 22px;
font-weight: 500;
}
.mo-gallery-arrow {
position: absolute;
top: 158px;
z-index: 5;
width: 46px;
height: 46px;
border: 1px solid rgba(var(--mo-glow-rgb), 0.42);
border-radius: 999px;
color: var(--mo-accent-2);
background: rgba(var(--mo-bg-rgb), 0.56);
cursor: pointer;
backdrop-filter: blur(10px);
transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.mo-gallery-arrow::before {
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 11px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
content: "";
}
.mo-gallery-arrow.prev {
left: 5%;
}
.mo-gallery-arrow.prev::before {
transform: translate(-35%, -50%) rotate(-45deg);
}
.mo-gallery-arrow.next {
right: 5%;
}
.mo-gallery-arrow.next::before {
transform: translate(-65%, -50%) rotate(135deg);
}
.mo-gallery-arrow:hover,
.mo-gallery-arrow:focus-visible {
transform: translateY(-2px);
border-color: var(--mo-accent-2);
background: rgba(var(--mo-glow-rgb), 0.12);
}
.mo-gallery-thumbs {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.mo-gallery-thumb {
height: 72px;
border: 1px solid transparent;
border-radius: 4px;
padding: 0;
overflow: hidden;
background: var(--mo-surface);
cursor: pointer;
opacity: 0.55;
filter: grayscale(1);
transition: opacity 220ms ease, filter 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.mo-gallery-thumb:hover,
.mo-gallery-thumb:focus-visible,
.mo-gallery-thumb.is-active {
opacity: 1;
filter: none;
border-color: rgba(var(--mo-glow-rgb), 0.58);
transform: translateY(-2px);
}
.mo-order-location {
background:
linear-gradient(180deg, rgba(var(--mo-ink-rgb), 0.018), transparent 28%),
var(--mo-band);
}
.mo-order-location-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(26px, 5vw, 56px);
align-items: start;
}
.mo-order-card {
display: grid;
gap: 18px;
}
.mo-order-photo {
position: relative;
min-height: 220px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
border-radius: 6px;
overflow: hidden;
background: var(--mo-surface);
}
.mo-order-photo img,
.mo-order-photo video {
filter: grayscale(1) brightness(0.62);
transform: scale(1.04);
transition: filter 420ms ease, transform 520ms ease;
}
.mo-order-photo::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(110deg, transparent 20%, rgba(var(--mo-glow-rgb), 0.18), transparent 55%);
opacity: 0;
transform: translateX(-80%);
transition: opacity 240ms ease, transform 720ms ease;
pointer-events: none;
}
.mo-order-photo:hover img,
.mo-order-photo:hover video,
.mo-order-photo:focus-within img,
.mo-order-photo:focus-within video {
filter: grayscale(0.25) brightness(0.82);
transform: scale(1.09);
}
.mo-order-photo:hover::after,
.mo-order-photo:focus-within::after {
opacity: 1;
transform: translateX(80%);
}
.mo-order-photo .mo-button {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
color: var(--mo-accent-2);
border-color: var(--mo-accent-2);
background: rgba(var(--mo-shade-rgb), 0.35);
transform: translate(-50%, -50%);
}
.mo-order-photo .mo-button:hover,
.mo-order-photo .mo-button:focus-visible {
color: var(--mo-text);
background: rgba(var(--mo-glow-rgb), 0.16);
transform: translate(-50%, calc(-50% - 2px));
}
.mo-address-card {
display: grid;
gap: 18px;
}
.mo-address-line {
margin: 0;
color: var(--mo-muted);
font-size: 24px;
line-height: 1.6;
}
.mo-map-card {
position: relative;
min-height: 250px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
border-radius: 6px;
overflow: hidden;
background:
linear-gradient(22deg, transparent 0 45%, rgba(var(--mo-ink-rgb), 0.08) 46% 48%, transparent 49%),
linear-gradient(116deg, transparent 0 55%, rgba(var(--mo-ink-rgb), 0.09) 56% 58%, transparent 59%),
linear-gradient(90deg, rgba(var(--mo-ink-rgb), 0.04) 1px, transparent 1px),
linear-gradient(rgba(var(--mo-ink-rgb), 0.035) 1px, transparent 1px),
var(--mo-surface-3);
background-size: auto, auto, 72px 72px, 72px 72px, auto;
filter: grayscale(1);
}
.mo-map-card::after {
position: absolute;
inset: 0;
content: "";
background: radial-gradient(circle at 48% 44%, rgba(var(--mo-glow-rgb), 0.16), transparent 24%);
pointer-events: none;
}
.mo-map-road {
position: absolute;
height: 8px;
border-radius: 999px;
background: rgba(var(--mo-ink-rgb), 0.18);
transform-origin: left center;
}
.mo-map-road.one {
top: 38%;
left: 9%;
width: 86%;
transform: rotate(-12deg);
}
.mo-map-road.two {
top: 64%;
left: -5%;
width: 70%;
transform: rotate(18deg);
}
.mo-map-road.three {
top: 4%;
left: 58%;
width: 8px;
height: 96%;
transform: rotate(28deg);
}
.mo-map-pin {
position: absolute;
top: 43%;
left: 49%;
z-index: 2;
width: 28px;
height: 28px;
border: 2px solid var(--mo-accent-2);
border-radius: 999px 999px 999px 0;
background: rgba(var(--mo-bg-rgb), 0.78);
transform: rotate(-45deg);
animation: mapPinPulse 2400ms ease-in-out infinite;
}
.mo-map-pin::after {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 999px;
content: "";
background: var(--mo-accent-2);
transform: translate(-50%, -50%);
}
.mo-map-label {
position: absolute;
left: 22px;
bottom: 20px;
z-index: 2;
padding: 10px 12px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.12);
border-radius: 4px;
color: var(--mo-text);
background: rgba(var(--mo-bg-rgb), 0.7);
font-size: 16px;
backdrop-filter: blur(10px);
}
.mo-site-footer {
padding: 42px clamp(18px, 6vw, 78px) 24px;
border-top: 1px solid rgba(var(--mo-ink-rgb), 0.08);
background: var(--mo-footer-bg);
}
.mo-footer-inner {
width: min(1180px, 100%);
margin: 0 auto;
}
.mo-footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: clamp(24px, 5vw, 62px);
padding-bottom: 30px;
border-bottom: 1px solid rgba(var(--mo-ink-rgb), 0.08);
}
.mo-footer-logo {
display: block;
color: var(--mo-accent-2);
font-family: var(--mo-serif);
font-size: clamp(34px, 5vw, 56px);
line-height: 1;
}
.mo-footer-copy,
.mo-footer-col p,
.mo-hours-row {
color: var(--mo-muted);
font-size: 19px;
line-height: 1.65;
}
.mo-footer-col h3 {
margin-bottom: 12px;
color: var(--mo-accent-2);
font-family: var(--mo-sans);
font-size: 15px;
letter-spacing: 5px;
text-transform: uppercase;
}
.mo-social-row {
display: flex;
gap: 12px;
margin-top: 24px;
}
.mo-social-row a {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
border-radius: 999px;
color: var(--mo-muted);
transition: transform 220ms ease, color 220ms ease, border-color 220ms ease;
}
.mo-social-row a:hover,
.mo-social-row a:focus-visible {
transform: translateY(-2px);
color: var(--mo-accent-2);
border-color: rgba(var(--mo-glow-rgb), 0.48);
}
.mo-hours {
display: grid;
gap: 8px;
}
.mo-hours-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 20px;
}
.mo-hours-row span:last-child {
color: var(--mo-muted-cool);
text-align: right;
}
.mo-footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 28px;
padding-top: 28px;
color: var(--mo-muted);
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}
.mo-footer-bottom a {
transition: color 200ms ease;
}
.mo-footer-bottom a:hover,
.mo-footer-bottom a:focus-visible {
color: var(--mo-accent-2);
}
.mo-quick-contact {
position: fixed;
right: clamp(14px, 3vw, 30px);
bottom: clamp(18px, 4vw, 32px);
z-index: 55;
display: grid;
gap: 10px;
align-items: end;
}
.mo-quick-contact-link {
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 8px 16px 8px 8px;
border: 1px solid rgba(var(--mo-line-rgb), 0.28);
border-radius: 6px;
color: var(--mo-text);
background: rgba(var(--mo-bg-rgb), 0.8);
box-shadow: 0 18px 48px rgba(var(--mo-shade-rgb), 0.34);
backdrop-filter: blur(16px);
transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.mo-quick-contact-link:hover,
.mo-quick-contact-link:focus-visible {
transform: translateY(-3px);
border-color: var(--mo-accent);
background: rgba(var(--mo-surface-3-rgb), 0.92);
}
.mo-quick-contact-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 4px;
color: var(--mo-on-accent);
background: var(--mo-accent);
font-family: var(--mo-condensed);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.4px;
line-height: 1;
}
.mo-quick-contact-whatsapp .mo-quick-contact-icon {
background: var(--mo-whatsapp);
}
.mo-quick-contact-shop .mo-quick-contact-icon {
background: linear-gradient(135deg, var(--mo-accent-grad-a), var(--mo-accent-grad-b));
}
.mo-quick-contact-reserve .mo-quick-contact-icon {
color: var(--mo-text);
background: rgba(var(--mo-ink-rgb), 0.12);
border: 1px solid rgba(var(--mo-line-rgb), 0.42);
}
.mo-quick-contact-text {
display: grid;
gap: 2px;
line-height: 1;
}
.mo-quick-contact-text strong {
font-size: 19px;
font-weight: 500;
}
.mo-quick-contact-text span {
color: var(--mo-muted);
font-size: 15px;
font-weight: 400;
}
.mo-promo-modal {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: clamp(16px, 4vw, 44px);
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease;
}
.mo-promo-modal[hidden] {
display: none;
}
.mo-promo-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.mo-promo-backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background:
radial-gradient(circle at 50% 24%, rgba(var(--mo-accent-rgb), 0.18), transparent 34%),
rgba(var(--mo-shade-rgb), 0.78);
backdrop-filter: blur(9px);
cursor: pointer;
}
.mo-promo-card {
position: relative;
z-index: 2;
width: min(860px, 100%);
max-height: min(86svh, 720px);
display: grid;
grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
border: 1px solid rgba(var(--mo-accent-rgb), 0.32);
background:
linear-gradient(135deg, rgba(var(--mo-ink-rgb), 0.055), transparent 44%),
rgba(var(--mo-surface-rgb), 0.96);
box-shadow: 0 32px 110px rgba(var(--mo-shade-rgb), 0.62);
overflow: hidden;
opacity: 0;
transform: translateY(26px) scale(0.96);
transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.mo-promo-modal.is-open .mo-promo-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.mo-promo-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 6;
width: 42px;
height: 42px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.18);
border-radius: 4px;
background: rgba(var(--mo-shade-rgb), 0.46);
cursor: pointer;
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.mo-promo-close:hover,
.mo-promo-close:focus-visible {
transform: rotate(90deg) scale(1.04);
border-color: rgba(var(--mo-ink-rgb), 0.42);
background: rgba(var(--mo-accent-rgb), 0.78);
}
.mo-promo-close::before,
.mo-promo-close::after {
position: absolute;
top: 50%;
left: 50%;
width: 19px;
height: 2px;
content: "";
background: var(--mo-text);
transform-origin: center;
}
.mo-promo-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.mo-promo-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.mo-promo-media {
position: relative;
min-height: 430px;
overflow: hidden;
background: var(--mo-surface-2);
}
.mo-promo-media::after {
position: absolute;
inset: 0;
z-index: 3;
content: "";
pointer-events: none;
background:
linear-gradient(90deg, transparent 40%, rgba(var(--mo-shade-rgb), 0.24)),
linear-gradient(180deg, rgba(var(--mo-shade-rgb), 0.14), transparent 42%, rgba(var(--mo-shade-rgb), 0.56));
}
.mo-promo-slide {
position: absolute;
inset: 0;
opacity: 0;
animation: promoSlide 15s infinite;
}
.mo-promo-slide:nth-child(2) {
animation-delay: 5s;
}
.mo-promo-slide:nth-child(3) {
animation-delay: 10s;
}
.mo-promo-slide img {
transform: scale(1.08);
animation: promoImageMove 15s ease-in-out infinite;
}
.mo-promo-slide:nth-child(2) img {
animation-delay: 5s;
}
.mo-promo-slide:nth-child(3) img {
animation-delay: 10s;
}
.mo-promo-badge {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 4;
display: grid;
gap: 5px;
max-width: 250px;
padding: 15px 16px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.16);
background: rgba(var(--mo-bg-rgb), 0.72);
backdrop-filter: blur(14px);
}
.mo-promo-badge span:first-child {
color: var(--mo-accent-2);
font-family: var(--mo-condensed);
font-size: 28px;
line-height: 1;
font-weight: 500;
}
.mo-promo-badge span:last-child {
color: var(--mo-muted);
font-size: 16px;
line-height: 1.45;
font-weight: 400;
}
.mo-promo-content {
display: grid;
align-content: center;
gap: 18px;
padding: clamp(28px, 5vw, 52px);
}
.mo-promo-kicker {
margin: 0;
color: var(--mo-accent);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-promo-content h2 {
max-width: 360px;
font-size: clamp(34px, 5vw, 56px);
line-height: 1;
}
.mo-promo-content p {
margin: 0;
color: var(--mo-muted);
font-size: 21px;
line-height: 1.75;
font-weight: 400;
}
.mo-promo-offers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.mo-promo-offers span {
padding: 8px 10px;
border: 1px solid rgba(var(--mo-ink-rgb), 0.13);
border-radius: 4px;
color: var(--mo-text);
background: rgba(var(--mo-ink-rgb), 0.04);
font-size: 16px;
font-weight: 500;
}
.mo-promo-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.mo-promo-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 4px;
padding: 0 18px;
color: var(--mo-on-accent);
background: var(--mo-accent);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
transition: transform 200ms ease, background 200ms ease;
}
.mo-promo-cta:hover,
.mo-promo-cta:focus-visible {
transform: translateY(-2px);
background: var(--mo-accent-hi);
}
.mo-promo-ghost {
display: inline-flex;
align-items: center;
min-height: 44px;
border: 0;
padding: 0;
color: var(--mo-muted);
background: transparent;
cursor: pointer;
font: 500 16px var(--mo-sans);
text-transform: uppercase;
transition: color 200ms ease;
}
.mo-promo-ghost:hover,
.mo-promo-ghost:focus-visible {
color: var(--mo-text);
}
.mo-promo-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
padding: 0 0 3px;
}
.mo-promo-progress span {
height: 2px;
overflow: hidden;
background: rgba(var(--mo-ink-rgb), 0.14);
}
.mo-promo-progress span::before {
display: block;
width: 100%;
height: 100%;
content: "";
background: var(--mo-accent);
transform: scaleX(0);
transform-origin: left;
animation: promoProgress 15s linear infinite;
}
.mo-promo-progress span:nth-child(2)::before {
animation-delay: 5s;
}
.mo-promo-progress span:nth-child(3)::before {
animation-delay: 10s;
}
@keyframes copyEnter {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mediaEnter {
from {
opacity: 0;
transform: translateX(32px) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes slideCycle {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes kenBurns {
0% {
transform: scale(1.08) translate3d(-1.5%, 1%, 0);
}
50% {
transform: scale(1.16) translate3d(2%, -1.5%, 0);
}
100% {
transform: scale(1.08) translate3d(-1.5%, 1%, 0);
}
}
@keyframes lightSweep {
0%,
34% {
transform: translateX(-62%) rotate(8deg);
opacity: 0;
}
52% {
opacity: 1;
}
78%,
100% {
transform: translateX(62%) rotate(8deg);
opacity: 0;
}
}
@keyframes dotPulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--mo-accent-rgb), 0.54);
}
100% {
box-shadow: 0 0 0 14px rgba(var(--mo-accent-rgb), 0);
}
}
@keyframes floatCard {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-8px, 16px, 0);
}
}
@keyframes ringFloat {
0%,
100% {
transform: rotate(-8deg) scale(1);
}
50% {
transform: rotate(6deg) scale(1.035);
}
}
@keyframes orbitBreath {
0%,
100% {
transform: translate3d(0, 0, 0) rotateZ(0deg);
}
50% {
transform: translate3d(0, -10px, 0) rotateZ(1.5deg);
}
}
@keyframes heroDishFlip {
0%,
4% {
opacity: 0;
transform: rotateY(94deg) scale(0.86);
}
9%,
29% {
opacity: 1;
transform: rotateY(0deg) scale(1);
}
35%,
100% {
opacity: 0;
transform: rotateY(-94deg) scale(0.88);
}
}
@keyframes featureImageMove {
0%,
100% {
transform: scale(1.1) translate3d(-1%, 1%, 0);
}
50% {
transform: scale(1.18) translate3d(2%, -1.5%, 0);
}
}
@keyframes featureShine {
0%,
34% {
opacity: 0;
transform: translateX(-72%) rotate(9deg);
}
52% {
opacity: 0.75;
}
74%,
100% {
opacity: 0;
transform: translateX(74%) rotate(9deg);
}
}
@keyframes floatSlow {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(0, -14px, 0) scale(1.012);
}
}
@keyframes linePulse {
0%,
100% {
transform: scaleX(0.72);
opacity: 0.6;
}
50% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes activeTab {
0%,
100% {
box-shadow: 0 0 0 rgba(var(--mo-accent-rgb), 0);
}
50% {
box-shadow: 0 0 28px rgba(var(--mo-accent-rgb), 0.28);
}
}
@keyframes marqueeMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes promoSlide {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
30% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes promoImageMove {
0% {
transform: scale(1.08) translate3d(-1.4%, 0, 0);
}
50% {
transform: scale(1.16) translate3d(1.6%, -1%, 0);
}
100% {
transform: scale(1.08) translate3d(-1.4%, 0, 0);
}
}
@keyframes promoProgress {
0% {
transform: scaleX(0);
}
33.333% {
transform: scaleX(1);
}
33.334%,
100% {
transform: scaleX(0);
}
}
@keyframes mapPinPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(var(--mo-glow-rgb), 0.28);
}
50% {
box-shadow: 0 0 0 14px rgba(var(--mo-glow-rgb), 0);
}
}
@keyframes aboutPageFlip {
0%,
34% {
transform: rotateY(0deg);
}
48%,
82% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(-360deg);
}
}
@keyframes pageShine {
0%,
30% {
opacity: 0;
transform: translateX(-72%);
}
42% {
opacity: 0.82;
}
56%,
100% {
opacity: 0;
transform: translateX(72%);
}
}
@media (max-width: 980px) {
.mo-topbar {
position: absolute;
}
.mo-hero-grid {
grid-template-columns: 1fr;
}
.mo-flip-photo {
min-height: 240px;
}
.mo-hero {
padding-top: 94px;
}
.mo-hero-feature-stage {
min-height: 420px;
}
.mo-dish-orbit {
width: min(360px, 74vw);
}
.mo-section-heading {
align-items: flex-start;
flex-direction: column;
}
.mo-menu-tools {
grid-template-columns: 46px minmax(0, 1fr);
}
.mo-tabs {
justify-content: flex-start;
}
.mo-menu-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mo-allergen-panel {
align-items: flex-start;
flex-direction: column;
}
.mo-allergen-legend {
justify-content: flex-start;
}
.mo-promo-card {
grid-template-columns: 1fr;
max-height: min(90svh, 760px);
overflow-y: auto;
}
.mo-promo-media {
min-height: 300px;
}
.mo-gallery-stage {
min-height: 350px;
}
.mo-gallery-card {
height: 300px;
}
.mo-gallery-card.is-prev,
.mo-gallery-card.is-next {
opacity: 0.38;
}
.mo-gallery-thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mo-order-location-grid,
.mo-footer-grid {
grid-template-columns: 1fr;
}
.mo-hours-row span:last-child {
text-align: left;
}
}
@media (max-width: 680px) {
.mo-hero {
min-height: auto;
padding-bottom: 72px;
}
.mo-hero-copy h1 {
font-size: clamp(52px, 18vw, 78px);
}
.mo-hero-subtitle {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.mo-hero .mo-button {
width: 100%;
}
.mo-hero-info-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.mo-hero-feature-stage {
min-height: 320px;
}
.mo-dish-orbit {
width: min(290px, 80vw);
}
.mo-feature-content {
width: 78%;
}
.mo-feature-content h2 {
font-size: 28px;
}
.mo-feature-content p {
margin-top: 12px;
font-size: 17px;
line-height: 1.55;
}
.mo-feature-price {
margin-top: 12px;
font-size: 24px;
}
.mo-menu-grid {
grid-template-columns: 1fr;
}
.mo-search.is-open,
.mo-search:focus-within {
width: 100%;
}
.mo-menu-tools.has-search-open {
grid-template-columns: minmax(230px, 48vw) minmax(0, 1fr);
gap: 12px;
}
/* The bar used to hold the allergen letters as well, and had to break into
two rows at this width to fit them. They sit with the description now, so
it is one right-aligned button and stays a single row. */
.mo-dish-footer {
padding: 12px 14px;
}
.mo-dish-content {
padding: 14px;
}
.mo-flip-photo {
min-height: 280px;
}
.mo-promo-modal {
padding: 14px;
}
.mo-promo-content {
padding: 26px 20px 24px;
}
.mo-promo-content h2 {
font-size: 34px;
}
.mo-promo-media {
min-height: 250px;
}
.mo-promo-badge {
left: 14px;
right: 14px;
bottom: 14px;
max-width: none;
}
.mo-quick-contact {
left: 12px;
right: 12px;
bottom: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mo-quick-contact-link {
justify-content: center;
min-height: 54px;
padding: 8px;
}
.mo-quick-contact-text span {
display: none;
}
.mo-site-footer {
padding-bottom: 104px;
}
.mo-gallery-stage {
min-height: 330px;
}
.mo-gallery-card {
width: 100%;
height: 250px;
}
.mo-gallery-card.is-prev,
.mo-gallery-card.is-next {
opacity: 0;
transform: translateX(-50%) scale(0.7);
}
.mo-gallery-arrow {
top: 108px;
width: 40px;
height: 40px;
}
.mo-gallery-arrow.prev {
left: 10px;
}
.mo-gallery-arrow.next {
right: 10px;
}
.mo-gallery-thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mo-gallery-thumb {
height: 64px;
}
.mo-order-photo,
.mo-map-card {
min-height: 210px;
}
.mo-hours-row {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
.mo-feature-panel:first-child {
opacity: 1;
transform: rotateY(0deg) scale(1);
}
}
/* --------------------------------------------------------------------------
11. Shared framework overlays
Adapted from the kuro theme, which solved the same problem: the order,
booking, login and allergen dialogs arrive with the platform's own markup
(see the popup block in index.tpl), and dialog-with-tabs.css lays them out
for a stock look. These rules move them onto this theme's ground without
touching the shared stylesheet, and they read the tokens in 1, so they
follow the light and the dark setting alike.
-------------------------------------------------------------------------- */
/* dialog-with-tabs.css gives .dialog-with-tabs its box (max-width, centring,
the close button). The dish popup uses .menu-dialog-with-tabs instead, whose
box lives only in the modern-cuisine stylesheet — so this theme draws it here,
otherwise the popup opens full-bleed with no padding. */
.menu-dialog-with-tabs {
padding: 0;
max-width: 600px;
margin: 40px auto;
position: relative;
box-sizing: border-box;
text-align: left;
border-radius: 2px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.menu-dialog-with-tabs .mfp-close,
.dialog-with-tabs .mfp-close {
color: var(--mo-text);
opacity: 0.8;
}
.popup-tab-content,
.popup-tab-content-login,
.popup-notification-header {
padding: 20px 24px;
position: relative;
z-index: 10;
display: block;
width: 100%;
box-sizing: border-box;
}
/* dialog-with-tabs.css paints the tab strip white — a light header bar on a
dark dialog, with the close × landing on it. Everything about the strip is
restated here rather than patched, because "white" is set on the row, on the
active tab and on its hover state separately. */
.popup-dialog .popup-tabs-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0 24px;
background: transparent;
border-bottom: 1px solid var(--mo-line);
}
.popup-dialog .popup-tabs-nav li,
.popup-dialog .popup-tabs-nav li.active,
.popup-dialog .popup-tabs-nav li.active a:hover {
float: none;
height: auto;
line-height: normal;
background: transparent;
border: 0;
}
.popup-dialog .popup-tabs-nav li a,
.popup-dialog .popup-tabs-nav li.active a {
display: inline-block;
padding: 16px 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mo-accent);
background: transparent;
/* The shared rule ends every tab with a light 1px rule, which on a dark
panel reads as a stray white stroke beside the label. */
border: 0;
}
.popup-dialog .popup-tabs-nav li.active::after { display: none; }
/* Inner pieces of the dish popup, filled in by restaurant.js. Same class
names the other themes use — only the palette changes. */
.popup-tabs-container .category_name {
color: var(--mo-accent);
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.popup-tabs-container .menu_desc {
font-size: 16px;
line-height: 1.7;
font-weight: 300;
color: var(--mo-muted);
}
.menu_detail { align-self: center; flex-grow: 1; }
.menu_detail h4 { display: flex; align-items: baseline; }
.menu_detail .menu_title {
font-family: "Cormorant Garamond", serif;
font-size: 24px;
font-style: italic;
color: var(--mo-text);
}
.menu_detail .menu_dots {
flex-grow: 1;
margin: 0 8px;
border-bottom: 1px dotted var(--mo-line-strong);
}
.menu_detail .menu_price,
.popup-tab-content .menu_detail .menu_price {
color: var(--mo-accent);
font-size: 18px;
text-align: right;
white-space: nowrap;
}
h4.allegie_title {
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mo-accent);
margin: 16px 0 8px;
}
.popup-tab-content ul { list-style: none; margin: 0; padding: 0; }
.popup-tab-content ul li { font-size: 15px; color: var(--mo-muted); padding: 3px 0; }
.popup-tab-content ul li img,
.popup-tab-content ul li svg { width: 18px; height: 18px; fill: var(--mo-accent); margin-right: 8px; vertical-align: middle; }
.menu-avatar-add-extra {
width: 100%;
height: auto;
max-height: 260px;
object-fit: cover;
display: block;
margin-bottom: 16px;
}
/* ── The dish popup ───────────────────────────────────────────────────────
restaurant.js builds this content at runtime out of the platform's own
utility classes (.d-flex, .align-items-center, .margin-left-auto) and its
own checkbox widget. Those all live in the modern-cuisine stylesheet, which
this theme does not load — so without the block below the extras stack vertically,
the prices sit under their labels and the checkboxes fall back to the
browser's default. Everything here is scoped to the dialog so it cannot
leak into the page. */
/* The category name is a sibling of the content block, not part of it, so the
block's padding never reached it and it sat flush against the panel edge.
It gets its own, matching the 24px gutter below; the wider right inset keeps
a long category clear of the close button in that corner. */
.menu-dialog-with-tabs .category_name {
padding: 20px 56px 0 24px;
margin: 0;
}
.menu-dialog-with-tabs .menu-popup-tab-content { padding: 12px 24px 24px; }
.popup-dialog .d-flex { display: flex; }
.popup-dialog .align-items-center { align-items: center; }
.popup-dialog .margin-left-auto { margin-left: auto; }
.popup-dialog .margin-bottom-5 { margin-bottom: 5px; }
/* One extras group: "Topping 1" + how many may be picked. */
.popup-dialog .category_extra_wraper,
.popup-dialog .menu-price-option-wrapper {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--mo-line);
}
.popup-dialog .section-headline h5 {
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mo-accent);
margin: 0 0 4px;
}
.popup-dialog .select_max_title {
font-size: 14px;
font-weight: 300;
color: var(--mo-muted);
margin: 0 0 10px;
}
/* One option row: label left, price and its checkbox right. */
.popup-dialog .menu-extras-item,
.popup-dialog .menu-price-option-item {
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dotted var(--mo-line);
}
.popup-dialog .menu-extras-item:last-child,
.popup-dialog .menu-price-option-item:last-child { border-bottom: 0; }
.popup-dialog .extras-item-title,
.popup-dialog .price-item-title {
font-size: 16px;
font-weight: 400;
color: var(--mo-text);
}
/* row-reverse so the price reads before the box it belongs to, which is the
order the eye wants when the whole group is right-aligned. */
.popup-dialog .checkbox {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 10px;
margin: 0;
}
/* The platform's own tick sprite is not loaded here, so the box is drawn from
scratch rather than left as the browser's default white square, which is the
one bright thing on an otherwise dark panel. */
.popup-dialog .checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 18px;
height: 18px;
margin: 0;
border: 1px solid var(--mo-line-strong);
border-radius: 2px;
background: transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.popup-dialog .checkbox input[type="checkbox"]:hover { border-color: var(--mo-accent); }
.popup-dialog .checkbox input[type="checkbox"]:checked {
background: var(--mo-accent);
border-color: var(--mo-accent);
}
.popup-dialog .checkbox input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--mo-bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.popup-dialog .checkbox input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed; }
.popup-dialog .checkbox label {
display: flex;
align-items: center;
margin: 0;
cursor: pointer;
}
.popup-dialog .extras-item-price,
.popup-dialog .item-price {
font-size: 15px;
color: var(--mo-accent);
white-space: nowrap;
}
/* The platform's own tick graphic needs its sprite; the native box is doing
the job here, so the decorative span is dropped rather than left blank. */
.popup-dialog .checkbox-icon { display: none; }
/* Allergens, additives, properties. The icons are ![]()
that
js/svg.js swaps for inline