/* ==========================================================================
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);
}
/* align-content: start, or the label does not stay put.
The three columns are grid items of .mo-hero-info-grid and stretch to the
tallest of them — the address, which wraps to two lines. Each column is then
a grid of its own with two auto rows and more height than its rows need, and
the initial align-content distributes that slack INTO the rows. So the
shortest column got the most padding: "Đóng" is one line where the address is
two, so its label row grew 14px and pushed the word down a line below the
address and the phone number beside it.
Packed to the start, the rows keep their content height, the three labels
share one line and the three values share the next, and the leftover height
is left at the foot of the column where nothing is looking. */
.mo-hero-info {
display: grid;
align-content: start;
gap: 8px;
color: var(--mo-accent-label);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.mo-hero-info span {
color: var(--mo-accent);
}
/* The line that says these are today's hours. White — the page's own ink —
because it is not a second label: the accent above it names the field, this
names the day, and two accent lines in a row would read as two fields.
gap on .mo-hero-info is 8px, which is the space between a label and its
value. This sits between them, so it takes a little off the top to stay with
the label it belongs to rather than floating between the two. */
.mo-hero-info__today {
margin-top: -3px;
color: var(--mo-text);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.16em;
}
.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;
}
/* A picture with nothing written about it shows no plate. display:flex above
beats the [hidden] rule in the browser's own sheet, so hiding it has to be
said here. */
.mo-flip-label[hidden] {
display: none;
}
/* The owner's caption is one line under the picture, not a paragraph over it.
The field takes 160 characters and someone will use all of them, so it is
held to the width of the plate and cut rather than allowed to grow up the
photograph. */
.mo-flip-label span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.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);
}
/* One row that scrolls, not a block that wraps.
A restaurant with fifteen categories filled two and sometimes three rows here
and pushed the menu itself below the fold before a single dish was on screen.
Kept to one line, the bar is the height it looks like it should be and the
categories that do not fit are a swipe away rather than a row down.
The vertical padding is not decoration: overflow-x on a box forces overflow-y
to a scrolling value too, so `visible` stops being available — and .mo-tab
lifts 2px on hover while the active one carries a 12px/34px shadow. Without
room above and below, both get clipped along the line.
It is also SYMMETRIC, which it was not: 6px over 12px made the bar 3px taller
below its chips than above them, and the row centres the bar as a whole — so
the chips sat 3px above the search field and the arrows beside them, on a row
whose whole job is to look like one row. The 12px is what the shadow needs;
the top matches it rather than the other way round. */
.mo-tabs {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
min-width: 0;
padding: 12px 2px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
transform: translateX(0);
transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}
/* A chip never shrinks to fit — that is what the scroll is for. Two-word names
stay on one line with it. */
.mo-tabs > .mo-tab {
flex: 0 0 auto;
white-space: nowrap;
}
.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: 18px;
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: 16px;
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);
}
/* The allergen letter, as a mark in a ring. One place now: the legend under
the menu. The dish cards print their codes as a plain run instead (see
.mo-dish-codes), so this is the shape a reader matches that run against.
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. */
/* place-CONTENT, not only place-items. min-width makes the ring wider than the
letter inside it, and the leftover space belongs to the grid's single column
— which justify-content places, and which place-items never touches. Its
initial value is start, so the letter sat against the left of the ring:
measured on the page, 8px of gap on the left against 14.2px on the right. */
.mo-allergen {
position: relative;
display: inline-grid;
place-items: center;
place-content: 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;
}
/* The label is the page's own text colour, which is what the design sets on it
(.order-link: color: var(--text)) — not the accent. The accent is already
doing two jobs on this card, the price plate and this button's own frame, and
spending it on the word inside that frame left the one thing a reader is
looking for reading quieter than the border around it.
Declared after the block above rather than inside it so the rule sits next to
the reason. */
.mo-order-link {
color: var(--mo-text);
}
/* 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-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-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:has(.mo-gallery-caption-text:empty) {
display: none !important;
}
.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: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
margin-top: 14px;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
cursor: grab;
user-select: none;
}
.mo-gallery-thumbs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.mo-gallery-thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.mo-gallery-thumb {
flex: 0 0 auto;
width: 100px;
height: 68px;
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 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.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);
}
/* The mark inside the ring. 22px in a 44px circle: the Facebook and Instagram
files are filled tiles rather than glyphs, so at any larger size they stop
being a mark in a ring and become a coloured square with a ring drawn round
it. The Google file is a bare G with no tile behind it, and 22px is where
the three read as the same weight despite that.
contain, not cover: the three files have three different viewBox ratios
(28x28, 612x612, 21x21.667) and cover would crop the odd one. */
.mo-social-row a img {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
}
.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: 50px;
padding: 7px 14px 7px 7px;
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);
}
/* The plate is the accent's INK, not the raw accent. Same reason
.mo-order-link gives on hover: --mo-on-accent is near-black, and near-black
on whatever the restaurant saved is unreadable the moment they save
something dark. Measured on this one — #080808 on #01696B is a contrast
ratio of 3.08, under the 4.5 a mark this size needs, and the phone icon read
as a smudge. --mo-accent-ink is the same colour with a floor under its
lightness, so the pair holds for every Theme color rather than only for pale
ones, and it sits beside the gold Bestellen plate as a family. */
.mo-quick-contact-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 4px;
color: var(--mo-on-accent);
background: var(--mo-accent-ink);
line-height: 1;
}
/* Both shapes, because the swap is asynchronous: js/svg.js replaces the
with the inline