/* ═══════════════════════════════════════════════════
Burger Mansion — v2 stylesheet
Scoped to so subpages keep v1 type.
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Geist:wght@300;400;500;600;700&display=swap');
body.v2 {
--display: 'Anton', sans-serif;
--sans: 'Geist', system-ui, -apple-system, sans-serif;
--gold: #d9ab2c;
--gold-hover: #A8884A;
--gold-bright: #D4B06A;
--charcoal: #333333;
--navy: #111111;
--navy-deep: #0a0a0a;
--cream: #f7f1e3;
--cream-2: #f1e9d3;
--black: #1a1a1a;
--white: #ffffff;
--off: #fafafa;
--line: rgba(60,60,60,0.14);
--gutter: clamp(20px, 5vw, 64px);
--max: 1280px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
font-family: var(--sans);
background: var(--cream);
color: var(--charcoal);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.v2 main { display: block; }
body.v2 a { color: inherit; text-decoration: none; }
/* Scoped to main / footer so it doesn't override the nav logo's fixed height. */
body.v2 main img,
body.v2 footer img { display: block; max-width: 100%; height: auto; }
/* Nav logo sizing must win against any later rules. */
body.v2 .nav__logo img { height: 60px; width: auto; }
/* Nav v2 base (subpages + non-hero pages): translucent navy with blur.
Now more translucent (0.42 default → 0.7 scrolled) so the nav reads
as glass over the page rather than as a solid bar. */
body.v2 .nav {
background: #111111;
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: background-color 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
}
body.v2 .nav.scrolled {
background: #111111;
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
box-shadow: 0 6px 28px -12px rgba(0,0,0,0.55);
}
/* Homepage override (.has-hero set by main.js when .hero-v2 exists):
nav stays VISIBLE in the hero with a fully transparent background
(no overlay, video shows through underneath). Once scrolled past
the hero, the standard translucent navy + blur takes over. */
body.v2.has-hero .nav {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.v2.has-hero .nav.scrolled {
background: #111111;
border-bottom-color: rgba(255,255,255,0.06);
box-shadow: 0 6px 28px -12px rgba(0,0,0,0.55);
}
/* Page-hero CTA wrapper (event-catering) — own row below the lead.
`margin: 1.6rem auto 0` keeps the surrounding `.page-hero p {
margin: 0 auto }` block-centering and `text-align: center` centres
the inline-flex pill inside it. */
body.v2 .page-hero__cta {
margin: 1.6rem auto 0;
padding: 0;
text-align: center;
max-width: none;
}
/* Sub-page sticker — fix text fit + centring on both breakpoints.
The v1 .sticker (110×110, font 0.78rem, letter-spacing 0.08em) was
clipping "MÄSTERVERK" on desktop and overlapping the page-hero
heading on mobile. Wider letter-spacing tightened, body type
bumped down a touch, big word eased so all three lines breathe
inside the circle, and the vertical rhythm rebalanced via
per-line line-height + padding. */
body.v2 .sticker {
width: 148px;
height: 148px;
padding: 14px;
box-sizing: border-box;
font-size: 0.74rem;
letter-spacing: 0.04em;
line-height: 1.1;
gap: 3px;
}
body.v2 .sticker__big {
font-size: 1.55em;
margin: 0;
line-height: 1;
}
@media (max-width: 720px) {
body.v2 .sticker {
width: 96px;
height: 96px;
font-size: 0.54rem;
padding: 9px;
letter-spacing: 0.025em;
line-height: 1.05;
}
body.v2 .sticker__big { font-size: 1.45em; }
body.v2 .sticker-float--tr { top: 5.2rem; right: 0.5rem; }
body.v2 .sticker-float--tl { top: 5.2rem; left: 0.5rem; }
}
@media (max-width: 480px) {
/* Tighter still on phones — sticker ducks above the eyebrow */
body.v2 .sticker { width: 84px; height: 84px; font-size: 0.5rem; padding: 8px; }
body.v2 .sticker__big { font-size: 1.4em; }
body.v2 .sticker-float--tr { top: 4.6rem; right: 0.5rem; }
body.v2 .sticker-float--tl { top: 4.6rem; left: 0.5rem; }
/* Push the page-hero copy down a notch so the sticker has room */
body.v2.sub .page-hero__inner { padding-top: 7.5rem; }
}
/* Kill the v1 .btn lift / arrow-slide / form-submit hover transforms
so non-pill buttons (restauranger.html, om-oss.html, kontakta-oss.html,
event-catering.html) match the same restrained pure-colour feel. */
body.v2 .btn:hover,
body.v2 .btn:hover .arrow,
body.v2 .form-submit:hover {
transform: none;
}
body.v2 .btn:hover,
body.v2 .form-submit:hover { box-shadow: none; }
/* Re-pin .btn--gold and .btn--tomato text colours. Without these,
`body.v2 a { color: inherit }` (specificity 0,0,1,1) beats the v1
`.btn--gold` / `.btn--tomato` rules (specificity 0,0,1,0) and the
buttons inherit white inside .cta-block--tomato / charcoal inside
the location card — visually swapped from intent. */
body.v2 a.btn--gold,
body.v2 button.btn--gold,
body.v2 a.btn--gold:hover,
body.v2 button.btn--gold:hover {
color: var(--charcoal);
box-shadow: none;
}
body.v2 a.btn--tomato,
body.v2 button.btn--tomato,
body.v2 a.btn--tomato:hover,
body.v2 button.btn--tomato:hover {
color: var(--gold);
box-shadow: none;
}
/* Mobile-menu order CTA — match the unified pill hover (bg → gold-hover,
text → white, no transform). Kept here because the mob-menu button
isn't a .btn-pill and would otherwise stay unchanged on hover. */
body.v2 .mob-menu__nav a.order {
transition: background-color 150ms ease-out, color 150ms ease-out;
}
body.v2 .mob-menu__nav a.order:hover,
body.v2 .mob-menu__nav a.order:focus-visible {
background: var(--gold-hover);
color: var(--white);
}
/* Footer + mob-menu pinned to navy so the open drawer matches the
site's brand surface (was a flat charcoal grey). Scoped to v2 so
v1 subpages stay on their original treatment. */
body.v2 .mob-menu { background: var(--navy-deep); }
/* Mobile-menu order CTA — pill shape so it matches the rest of the
site's button vocabulary instead of sitting as a flat rectangle. */
body.v2 .mob-menu__nav a.order {
border-radius: 999px;
padding: 0.95rem 1.5rem;
}
/* Footer brand cell — desktop:
• Logo, tagline and social row all left-aligned so the column reads
as one coherent unit (matches the eyebrow→links flow in the other
three columns).
• Logo sized down a touch from 120px so it sits balanced against the
gold eyebrows in adjacent columns instead of dominating.
The 901px breakpoint matches the existing footer-grid breakpoint
in style.css so tablet/mobile (where the brand spans full row
already) keeps the v1 layout untouched. */
body.v2 .footer__brand img { height: 120px; width: auto; }
@media (min-width: 901px) {
body.v2 .footer__brand img {
display: block;
height: 96px;
margin: 0 0 1.4rem;
}
}
body.v2 .nav__links a { color: rgba(247,241,227,0.78); }
body.v2 .nav__links a:hover,
body.v2 .nav__links a.is-active { color: var(--gold); }
body.v2 .nav__links a::after { background: var(--gold); }
body.v2 .nav__burger span { background: var(--gold); }
/* Nav Beställ button — matches the hero CTA. No glow, no transform, no
ring animation. On hover: background darkens to gold-hover, text turns
white. Same restrained 150ms timing as the hero pill. */
body.v2 .nav__cta {
transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
box-shadow: none !important;
}
body.v2 .nav__cta:hover {
transition-duration: 0s;
transform: none !important;
background: var(--gold-hover) !important;
color: var(--white) !important;
border-color: var(--gold-hover) !important;
box-shadow: none !important;
}
body.v2 .nav__cta:hover .btn-pill__chip {
background: var(--black);
color: var(--gold);
}
/* Override v1 .panels gap that wraps sections in stacked cards — v2 wants
flush sections that bleed photography between them. */
body.v2 .panels { padding: 0; gap: 0; background: transparent; }
body.v2 .panel { border-radius: 0; overflow: visible; }
body.v2 .panel__inner { padding: 0; }
/* ── Display + body type ───────────────────────────── */
body.v2 .display {
font-family: var(--display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 1.14;
color: var(--black);
}
body.v2 .display em { font-style: normal; color: var(--gold); }
body.v2 .eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 10px;
}
body.v2 .eyebrow::before {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
}
body.v2 .lead { font-size: 17px; line-height: 1.6; color: var(--charcoal); max-width: 56ch; }
body.v2 .lead--lg { font-size: 19px; }
/* ── Buttons (v2 pill, sized variants) ─────────────── */
body.v2 .btn-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 13px 18px 13px 26px;
background: var(--black);
color: var(--white);
border: 1.5px solid var(--black);
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.005em;
text-transform: none;
cursor: pointer;
transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .15s var(--ease-out);
white-space: nowrap;
text-decoration: none;
}
body.v2 .btn-pill__chip {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: var(--gold); color: var(--black);
border-radius: 50%;
flex-shrink: 0;
transition: transform .25s var(--ease-out);
}
body.v2 .btn-pill__chip svg { width: 13px; height: 13px; }
/* Restrained, unified hover across every v2 pill (mirrors .nav__cta).
• No lift, no chip scaling, no chip slide, no arrow nudge
• Background shifts to its variant's hover tone, text → white
• Chip stays dark (black bg, gold arrow) — never inverts to white/gold-bright
• Pure colour cross-fade, 150ms ease-out */
body.v2 .btn-pill {
transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
body.v2 .btn-pill:hover {
background: #000;
color: var(--white);
transform: none;
box-shadow: none;
}
body.v2 .btn-pill:hover .btn-pill__chip,
body.v2 .btn-pill:hover .btn-pill__chip svg {
transform: none;
}
body.v2 .btn-pill:hover .btn-pill__chip {
background: var(--black);
color: var(--gold);
}
body.v2 .btn-pill:active { transform: scale(0.97); transition-duration: .08s; }
body.v2 a.btn-pill--gold,
body.v2 button.btn-pill--gold,
body.v2 .btn-pill.btn-pill--gold { background: var(--gold); color: var(--black); border-color: var(--gold); }
body.v2 .btn-pill--gold .btn-pill__chip { background: var(--black); color: var(--gold); }
body.v2 a.btn-pill--gold:hover,
body.v2 button.btn-pill--gold:hover {
background: var(--gold-hover);
border-color: var(--gold-hover);
color: var(--white);
}
body.v2 .btn-pill--gold:hover .btn-pill__chip { background: var(--black); color: var(--gold); }
body.v2 .btn-pill--ghost {
background: transparent;
color: var(--black);
border: 1.5px solid currentColor;
}
body.v2 .btn-pill--ghost .btn-pill__chip { background: var(--black); color: var(--gold); }
body.v2 .btn-pill--ghost:hover { background: var(--black); color: var(--white); }
body.v2 .btn-pill--ghost:hover .btn-pill__chip { background: var(--black); color: var(--gold); }
body.v2 .btn-pill--sm {
padding: 9px 12px 9px 18px;
font-size: 12.5px;
gap: 10px;
}
body.v2 .btn-pill--sm .btn-pill__chip { width: 26px; height: 26px; }
body.v2 .btn-pill--sm .btn-pill__chip svg { width: 11px; height: 11px; }
/* Subtle text-link with gold underline — pairs with editorial sections */
body.v2 .text-link {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 500; font-size: 14px;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--black);
border-bottom: 1px solid var(--gold);
padding-bottom: 3px;
transition: color .15s var(--ease);
}
body.v2 .text-link:hover { color: var(--gold-hover); }
body.v2 .text-link svg { width: 14px; height: 14px; }
/* ── Section frame ─────────────────────────────────── */
body.v2 .sect { padding: clamp(72px, 11vw, 160px) var(--gutter); position: relative; }
body.v2 .sect__inner { max-width: var(--max); margin: 0 auto; }
body.v2 .sect--cream { background: var(--cream); }
body.v2 .sect--white { background: var(--white); }
body.v2 .sect--black { background: var(--black); color: var(--cream); }
body.v2 .sect--black .display { color: var(--white); }
body.v2 .sect--black .display em { color: var(--gold); }
body.v2 .sect--black .lead { color: rgba(247,241,227,0.78); }
body.v2 .sect--black .eyebrow { color: var(--gold); }
/* ═══════════════════════════════════════════════════
1. HERO — full-bleed video bg + navy overlay + centred content
The video plays under everything; a navy gradient overlay softens
it so headlines read; content stacks vertically and centres in
the viewport. Same composition on desktop + mobile (mobile uses
100svh to stay clear of the iOS dynamic toolbar). */
body.v2 .hero-v2 {
position: relative;
isolation: isolate; /* new stacking context so the bg/overlay z-indexes are local */
/* Hero fills the full viewport edge-to-edge. 100svh on mobile to stay
under the iOS dynamic toolbar; 100vh on desktop for full coverage.
min-height (not height) lets very short viewports still flow. */
min-height: 100vh;
background: var(--navy-deep);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(110px, 14vh, 180px) var(--gutter) clamp(120px, 16vh, 180px);
overflow: hidden;
text-align: center;
}
/* Layer 0: video fills section. */
body.v2 .hero-v2__bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
/* Slight desaturation so the navy overlay does most of the colour
work — keeps the brand cool and unified. */
filter: saturate(95%) contrast(105%);
}
/* Layer 1: navy gradient overlay. Heavier at top + bottom (where text
sits) so the H1 reads cleanly; lighter in the middle so the video
atmosphere shows through. */
body.v2 .hero-v2__bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(10,10,10,0.78) 0%,
rgba(17,17,17,0.55) 40%,
rgba(10,10,10,0.85) 100%);
pointer-events: none;
}
/* Layer 2: noise grain on top of the overlay so the bg doesn't read
as flat alpha. soft-light keeps the texture cue subtle. */
body.v2 .hero-v2::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.05;
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 2;
}
/* Layer 3: warmth glow — soft gold radial near the bottom-centre to
anchor the CTA without lifting the navy bg toward charcoal. */
body.v2 .hero-v2::after {
content: "";
position: absolute;
left: 50%; bottom: -25%;
width: 90%; height: 80%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(221,170,45,0.10) 0%, transparent 60%);
pointer-events: none;
z-index: 2;
}
/* Layer 4: content. */
body.v2 .hero-v2__inner {
position: relative;
z-index: 3;
width: 100%;
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
body.v2 .hero-v2__copy {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Eyebrow — centred without the inline left-rule (the .eyebrow base has
a ::before line; we override here so the eyebrow sits clean as a small
centred caps label). */
body.v2 .hero-v2__eyebrow { color: var(--gold); margin-bottom: 14px; }
body.v2 .hero-v2__eyebrow::before { display: none; }
/* Hairline gold rule centred between eyebrow and h1. */
body.v2 .hero-v2__rule {
display: block;
width: 88px;
height: 1px;
background: linear-gradient(90deg, rgba(221,170,45,0) 0%, var(--gold) 50%, rgba(221,170,45,0) 100%);
margin: 0 auto 28px;
}
/* Hero H1 — SVG stroke-draw + fill animation (mirrors ivan.es).
"LYCKA I SMAKEN" draws as a stroke outline first, then crossfades to
filled state; "SEDAN 2018" fades in mid-draw so both lines settle in
one beat. The wrapper carries an aria-label for screen readers
(the SVG text itself is aria-hidden). */
body.v2 .hero-v2__h1 {
margin: 0 0 24px;
width: 100%;
display: flex;
justify-content: center;
}
body.v2 .hero-v2__h1-svg {
width: 100%;
max-width: clamp(560px, 80vw, 1000px);
height: auto;
overflow: visible;
}
body.v2 .hero-v2__h1-line,
body.v2 .hero-v2__h1-em {
font-family: var(--display);
font-weight: 400;
font-size: 116px; /* in viewBox units */
letter-spacing: -2px;
text-transform: uppercase;
}
/* "LYCKA I SMAKEN" — initial: stroke outline, no fill. Arbitrary
large dasharray (2400) overshoots the actual perimeter — getTotalLength
doesn't apply to , so we overshoot and rely on CSS keyframes
to bring offset 2400 → 0 across the draw window. */
body.v2 .hero-v2__h1-line {
fill: rgba(247, 241, 227, 0.92);
fill-opacity: 0;
stroke: rgba(247, 241, 227, 0.92);
stroke-width: 1.2;
stroke-dasharray: 2400;
stroke-dashoffset: 2400;
}
/* "SEDAN 2018" — gold fill, transparent until the fade beat. */
body.v2 .hero-v2__h1-em {
fill: var(--gold);
opacity: 0;
}
/* Animation engages once main.js adds .in to the H1. Sequence:
0.3s stroke-draw of LYCKA starts (3.2s)
1.8s SEDAN 2018 starts fading in (1.6s) — overlaps the draw
2.6s LYCKA fill catches the stroke (1.6s) and stroke fades */
@media (prefers-reduced-motion: no-preference) {
body.v2 .hero-v2__h1.in .hero-v2__h1-line {
animation:
heroLyckaDraw 3.2s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
heroLyckaFill 1.6s 2.6s ease-out forwards;
}
body.v2 .hero-v2__h1.in .hero-v2__h1-em {
animation: heroSedanIn 1.6s 1.8s ease-out forwards;
}
}
@keyframes heroLyckaDraw {
to { stroke-dashoffset: 0; }
}
@keyframes heroLyckaFill {
to { fill-opacity: 1; stroke-opacity: 0; }
}
@keyframes heroSedanIn {
to { opacity: 1; }
}
/* Reduced-motion: skip animation, show final state. */
@media (prefers-reduced-motion: reduce) {
body.v2 .hero-v2__h1-line { fill-opacity: 1; stroke-opacity: 0; }
body.v2 .hero-v2__h1-em { opacity: 1; }
}
body.v2 .hero-v2__sub {
font-size: 17px;
line-height: 1.55;
color: rgba(247,241,227,0.84);
max-width: 56ch;
margin: 0 auto 36px;
text-wrap: balance;
}
body.v2 .hero-v2__cta {
display: inline-flex;
transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
body.v2 .hero-v2__cta:hover {
transition-duration: 0s;
transform: none;
}
/* Default (desktop): long sub visible, mobile-only sub hidden. */
body.v2 .hero-v2__sub--mobile { display: none; }
body.v2 .hero-v2__sub--desktop { display: block; }
/* Meta line — centred, no inline left rule. */
body.v2 .hero-v2__meta {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 36px;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(247,241,227,0.55);
}
/* No ::before line — meta reads as plain centred caps. */
/* Scroll cue: subtle vertical line at very bottom centre, drifting. */
body.v2 .hero-v2__scroll-cue {
display: block;
position: absolute;
bottom: clamp(18px, 3vh, 32px);
left: 50%;
width: 1px; height: clamp(28px, 4vh, 40px);
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(247,241,227,0) 0%, rgba(247,241,227,0.55) 100%);
z-index: 4;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
body.v2 .hero-v2__scroll-cue { animation: heroCueDrift 2.4s ease-in-out infinite; }
}
@keyframes heroCueDrift {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
@media (max-width: 900px) {
body.v2 .hero-v2 {
min-height: 100svh;
padding: clamp(96px, 14vh, 140px) var(--gutter) clamp(72px, 12vh, 110px);
}
/* Stronger overlay on mobile because the centred content sits over
the busiest part of the video frame. */
body.v2 .hero-v2__bg-overlay {
background:
linear-gradient(180deg,
rgba(10,10,10,0.85) 0%,
rgba(17,17,17,0.65) 40%,
rgba(10,10,10,0.92) 100%);
}
body.v2 .hero-v2__h1 { margin-bottom: 22px; }
/* Mobile SVG H1 — slightly thicker stroke so the draw reads at small
scale, and a tighter dash baseline so the draw completes cleanly. */
body.v2 .hero-v2__h1-line { stroke-width: 1.6; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
body.v2 .hero-v2__sub--desktop { display: none; }
body.v2 .hero-v2__sub--mobile {
display: block;
font-size: 15.5px;
max-width: 38ch;
color: rgba(247,241,227,0.92);
margin: 0 auto 28px;
}
body.v2 .hero-v2__rule { width: 56px; margin: 0 auto 20px; }
body.v2 .hero-v2__meta { font-size: 11px; gap: 10px; flex-wrap: wrap; }
}
/* Tighter sizing on phones <414px. */
@media (max-width: 414px) {
body.v2 .hero-v2__sub--mobile { margin-bottom: 22px; }
}
/* ═══════════════════════════════════════════════════
2. PAUSE — single editorial line
═══════════════════════════════════════════════════ */
body.v2 .pause {
background: var(--cream);
padding: clamp(120px, 18vw, 240px) var(--gutter);
}
body.v2 .pause__inner {
max-width: 1100px;
margin: 0 auto;
text-align: left;
}
body.v2 .pause__text {
font-family: var(--display);
font-weight: 400;
font-size: clamp(42px, 7vw, 104px);
line-height: 1.2;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--black);
margin: 0;
text-wrap: balance;
}
body.v2 .pause__text em { font-style: normal; color: var(--gold); }
/* Pause beat is desktop/tablet only — drops on mobile to keep the scroll
tight and let the hero → hantverk transition do its work without the
extra editorial breath. */
@media (max-width: 720px) {
body.v2 .pause { display: none; }
}
/* ═══════════════════════════════════════════════════
3. HANTVERK — cinematic layered composition (restored).
• Full-bleed studio backdrop (burgback-desktop.webp).
• Centred burger canvas, transparent over the bg.
• Wallpaper-scale "HANTVERK" depth word behind the burger.
• Top + bottom ingredient lines (slide-in left).
═══════════════════════════════════════════════════ */
body.v2 .hantverk {
position: relative;
height: 200vh;
overflow: clip;
background: var(--charcoal);
}
@media (max-width: 900px) {
body.v2 .hantverk {
height: auto;
overflow-x: clip;
overflow-y: visible;
}
}
body.v2 .hantverk__bg {
position: absolute;
inset: 0;
background-image: url("assets/burgback-desktop.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: var(--charcoal);
z-index: 0;
}
body.v2 .hantverk__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.28) 35%, rgba(0,0,0,0.42) 100%);
z-index: 1;
}
body.v2 .hantverk__pin {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
z-index: 2;
padding: calc(var(--nav-h, 80px) + clamp(32px, 4vh, 56px)) var(--gutter) clamp(48px, 6vh, 72px);
box-sizing: border-box;
}
@media (max-width: 900px) {
body.v2 .hantverk__pin {
position: static;
height: auto;
padding: clamp(72px, 11vw, 110px) var(--gutter);
}
}
body.v2 .hantverk__inner {
position: relative;
max-width: var(--max);
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 2vh, 32px);
text-align: center;
}
@media (max-width: 900px) {
body.v2 .hantverk__inner { gap: 28px; }
}
/* Behind-burger depth word — split HANT / VERK on desktop, single
"HANTVERK" inline on mobile. Opacity is driven by scroll progress
from main.js (fades in mid-scroll); a tiny transition smooths
between rAF ticks. Burger silhouette sits in front; the T-tail of
HANT and the V-tip of VERK kiss the burger's sides. */
body.v2 .hantverk__depth {
position: absolute;
inset: 0;
font-family: var(--display);
font-weight: 400;
/* Wallpaper-scale, same as the original cinematic-depth version. */
font-size: clamp(120px, 22vw, 360px);
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--gold);
opacity: 0;
pointer-events: none;
z-index: 0;
user-select: none;
text-shadow: 0 2px 24px rgba(0,0,0,0.45);
transition: opacity 120ms linear;
}
/* Desktop — HANT anchored to the burger's left edge, VERK to the
right edge, with a 10 px kiss inside the burger silhouette.
burger_w on desktop = clamp(440, 62vw, 840) → half = clamp(220, 31vw, 420). */
body.v2 .hantverk__depth-l,
body.v2 .hantverk__depth-r {
position: absolute;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
}
/* Inside-edge offset = (burger_w / 2) − inset_compensation. The
compensation pulls each half inward from the raw canvas edge so
they tuck against the burger silhouette instead of hanging in
the canvas's alpha padding. Bumped from 6vw to 9.5vw so HANT and
VERK sit visibly closer to the burger. */
body.v2 .hantverk__depth-l {
right: calc(50% + clamp(220px, 31vw, 420px) - clamp(80px, 9.5vw, 150px));
}
body.v2 .hantverk__depth-r {
left: calc(50% + clamp(220px, 31vw, 420px) - clamp(80px, 9.5vw, 150px));
}
@media (max-width: 900px) {
/* Mobile — drop out of absolute positioning, rejoin the flex flow
and render HANTVERK as one word right under the burger. */
body.v2 .hantverk__depth {
position: static;
inset: auto;
font-size: clamp(56px, 19vw, 96px);
margin: -0.55em auto 0; /* pull up under the burger silhouette */
text-align: center;
white-space: normal;
text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 0 32px rgba(0,0,0,0.3);
}
body.v2 .hantverk__depth-l,
body.v2 .hantverk__depth-r {
position: static;
transform: none;
display: inline; /* inline so they read as one word */
font-size: inherit;
}
}
/* Top + bottom text panels sit in front of the canvas in z-order. */
body.v2 .hantverk__top,
body.v2 .hantverk__bottom {
position: relative;
z-index: 3;
color: var(--white);
width: 100%;
max-width: 920px;
}
body.v2 .hantverk__line {
font-family: var(--display);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1.08;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--white);
margin: 0;
text-wrap: balance;
}
body.v2 .hantverk__line em {
font-style: normal;
color: var(--navy);
}
body.v2 .hantverk__line + .hantverk__line { margin-top: 6px; }
body.v2 .hantverk__bottom .text-link {
color: var(--white);
border-bottom: 1px solid var(--gold);
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: color 200ms var(--ease-out);
}
body.v2 .hantverk__bottom .text-link svg { width: 16px; height: 16px; }
body.v2 .hantverk__bottom .text-link:hover { color: var(--gold); }
/* Canvas stage — centred, transparent, big burger commanding the centre. */
body.v2 .hantverk__stage {
position: relative;
z-index: 2;
width: 100%;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
body.v2 .hantverk__stage canvas {
width: clamp(440px, min(840px, 62vw), 840px);
height: clamp(440px, min(840px, 62vw), 840px);
max-height: 78vh;
display: block;
}
@media (max-width: 900px) {
body.v2 .hantverk__stage { height: clamp(360px, 55vh, 480px); }
body.v2 .hantverk__stage canvas {
width: 100%;
height: 100%;
max-width: 420px;
max-height: none;
}
}
/* Entry animation: depth word fades, ingredient lines slide-in left. */
@media (prefers-reduced-motion: no-preference) {
body.v2 .hv-slide-in {
opacity: 0;
transform: translateX(-48px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
transition-delay: var(--hv-delay, 0ms);
}
body.v2 .hv-slide-in.in {
opacity: 1;
transform: translateX(0);
}
/* Depth opacity is now driven per-frame from main.js scroll progress
(fades in mid-scroll), so no .in-class fade rule is needed here. */
@media (max-width: 720px) {
body.v2 .hv-slide-in { transform: translateX(-20px); }
body.v2 .hv-slide-in.in { transform: translateX(0); }
}
}
@media (prefers-reduced-motion: reduce) {
body.v2 .hv-slide-in { opacity: 1; transform: none; }
body.v2 .hantverk__depth { opacity: 0.32; }
}
/* ═══════════════════════════════════════════════════
4. DESTINATIONS — full-bleed photo panels + Qopla
═══════════════════════════════════════════════════ */
body.v2 .dest {
background: var(--cream);
padding: clamp(80px, 10vw, 140px) 0 0;
}
body.v2 .dest__head {
max-width: var(--max);
margin: 0 auto clamp(40px, 6vw, 80px);
padding: 0 var(--gutter);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
body.v2 .dest__head .eyebrow { margin-bottom: 20px; }
body.v2 .dest__head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1.18;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--black);
margin: 0;
text-wrap: balance;
}
body.v2 .dest__head h2 em { font-style: normal; color: var(--gold); }
/* ── Scroll-jacked horizontal carousel ─────────────────
Section is N×100vh tall (400vh for 4 cards). The inner `.dest__pin`
sticky-pins to the viewport for the duration. As the user scrolls
vertically, JS reads scroll progress and translates `.dest__track`
horizontally — vertical scroll IS the horizontal motion. One
full-width card visible at a time on both desktop and mobile. */
body.v2 .dest__pin-wrap {
position: relative;
height: 400vh; /* 4 cards × 100vh each */
/* `overflow: clip` (not hidden) so sticky-pin works inside. */
overflow: clip;
}
body.v2 .dest__pin {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.v2 .dest__track {
display: flex;
flex: 1;
height: 100%;
width: 100%;
will-change: transform;
}
/* Full-bleed image card. Image fills 100%; navy gradient overlay
covers the bottom ~30% (transparent → navy strong) so the text
panel overlaid there reads cleanly. h3 location name uses the
same SVG stroke-draw animation as the hero H1 — triggered when
the card becomes active in the carousel (.in class added by JS). */
body.v2 .dest__card {
display: block;
text-decoration: none;
color: inherit;
flex: 0 0 100%;
min-width: 100%;
height: 100%;
position: relative;
display: block;
background: var(--navy-deep);
overflow: hidden;
}
body.v2 .dest__photo {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--cream-2);
}
body.v2 .dest__photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* Copy panel sits absolutely at the bottom with its own navy
gradient. Background is a vertical fade — transparent at the top
so the photo shows through ~70% of the card, dense navy at the
bottom where the text lives. */
body.v2 .dest__copy {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: clamp(40px, 6vh, 88px) clamp(28px, 5vw, 80px) clamp(36px, 5vh, 72px);
display: flex;
flex-direction: column;
gap: 14px;
max-width: none;
z-index: 2;
color: var(--cream);
background: linear-gradient(
180deg,
rgba(15, 28, 47, 0) 0%,
rgba(15, 28, 47, 0) 50%,
rgba(15, 28, 47, 0.55) 76%,
rgba(15, 28, 47, 0.92) 100%
);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.v2 .dest__copy .index {
font-family: var(--sans);
font-weight: 500; font-size: 12px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
align-self: flex-start;
padding: 7px 14px;
background: rgba(8, 16, 30, 0.62);
border: 1px solid rgba(201, 168, 76, 0.32);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.v2 .dest__copy .addr {
font-size: 16px;
line-height: 1.5;
color: rgba(247, 241, 227, 0.88);
margin: 0;
}
body.v2 .dest__copy .hours {
font-size: 13px;
letter-spacing: 0.04em;
color: rgba(247, 241, 227, 0.62);
margin: 0;
}
body.v2 .dest__copy .actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin-top: 12px;
}
body.v2 .dest__copy .text-link {
color: var(--cream);
border-bottom: 1px solid var(--gold);
}
body.v2 .dest__copy .text-link:hover { color: var(--gold); }
/* ── Location name SVG stroke-draw (mirrors hero H1) ─────
Letters trace as outlines, then crossfade to a filled state.
Triggered by JS adding .in to .dest__card when it scrolls into
view in the carousel. */
body.v2 .dest__name {
margin: 4px 0 6px;
width: 100%;
display: block;
}
body.v2 .dest__name-svg {
width: 100%;
max-width: clamp(360px, 60vw, 720px);
height: auto;
overflow: visible;
}
body.v2 .dest__name-text {
font-family: var(--display);
font-weight: 400;
font-size: 96px; /* viewBox units */
letter-spacing: -1.5px;
text-transform: uppercase;
fill: rgba(247, 241, 227, 0.96);
fill-opacity: 0;
stroke: rgba(247, 241, 227, 0.96);
stroke-width: 1.2;
stroke-dasharray: 2200;
stroke-dashoffset: 2200;
}
@media (prefers-reduced-motion: no-preference) {
body.v2 .dest__card.in .dest__name-text {
/* Draw keeps its natural 2.4s pace; the colour fill starts
partway through the draw so the name is filled well before
the stroke finishes (fill complete at 1.6s vs draw at 2.6s). */
animation:
destNameDraw 2.4s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
destNameFill 0.6s 1.0s ease-out forwards;
}
}
@keyframes destNameDraw { to { stroke-dashoffset: 0; } }
@keyframes destNameFill { to { fill-opacity: 1; stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
body.v2 .dest__name-text { fill-opacity: 1; stroke-opacity: 0; }
}
/* Prev / next nav floats inside the pinned area, top-right. */
body.v2 .dest__nav {
position: absolute;
top: clamp(20px, 3vh, 40px);
right: clamp(20px, 3vw, 48px);
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 14px;
border-radius: 999px;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25);
}
body.v2 .dest__nav-progress {
font-family: var(--sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--charcoal);
min-width: 44px;
text-align: center;
}
body.v2 .dest__nav-current { color: var(--navy); font-weight: 700; }
body.v2 .dest__nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(60,60,60,0.18);
background: var(--white);
color: var(--black);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
body.v2 .dest__nav-btn:hover {
background: var(--gold);
border-color: var(--gold);
}
body.v2 .dest__nav-btn svg { width: 16px; height: 16px; }
body.v2 .dest__nav-btn[disabled] {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
@media (max-width: 900px) {
body.v2 .dest__head { grid-template-columns: 1fr; }
/* Mobile: same full-bleed pattern as desktop. Slightly stronger
bottom gradient + tighter padding so the text panel reads on
small screens. */
body.v2 .dest__copy {
padding: clamp(56px, 9vh, 96px) clamp(24px, 6vw, 36px) clamp(28px, 4vh, 56px);
gap: 12px;
background: linear-gradient(
180deg,
rgba(26, 45, 71, 0) 0%,
rgba(26, 45, 71, 0.55) 30%,
rgba(26, 45, 71, 0.92) 70%,
rgba(15, 28, 47, 0.97) 100%
);
}
body.v2 .dest__name-svg { max-width: 100%; }
body.v2 .dest__nav {
top: auto;
bottom: clamp(16px, 3vh, 28px);
right: 50%;
transform: translateX(50%);
}
/* Simplified mobile cards: hide hours + actions, shorter height */
body.v2 .dest__copy .hours { display: none; }
body.v2 .dest__copy .actions { display: none; }
body.v2 .dest__pin-wrap { height: 220vh; }
body.v2 .dest__pin { height: 55vh; }
body.v2 .dest__card { height: 55vh; }
}
/* ═══════════════════════════════════════════════════
5. BESTSELLERS — asymmetric burger grid
═══════════════════════════════════════════════════ */
body.v2 .bsell {
background: var(--cream);
padding: clamp(110px, 14vw, 180px) var(--gutter);
}
body.v2 .bsell__inner { max-width: var(--max); margin: 0 auto; }
body.v2 .bsell__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px;
margin-bottom: clamp(40px, 5vw, 72px);
}
body.v2 .bsell__head .eyebrow { margin-bottom: 14px; }
body.v2 .bsell__head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1.18;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--black);
margin: 0;
text-wrap: balance;
max-width: 14ch;
}
body.v2 .bsell__head h2 em { font-style: normal; color: var(--gold); }
/* Magazine pattern: 1 hero burger + 3 small thumbnails stacked on the right */
body.v2 .bsell__mag {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: stretch;
}
body.v2 .bsell__hero {
display: flex; flex-direction: column; gap: 22px;
}
body.v2 .bsell__hero-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 4px;
background: var(--cream-2);
}
body.v2 .bsell__hero-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
body.v2 .bsell__hero:hover .bsell__hero-media img { transform: scale(1.03); }
body.v2 .bsell__hero-badge {
position: absolute;
top: 18px; left: 18px;
background: var(--gold);
color: var(--black);
font-family: var(--sans);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 7px 12px;
border-radius: 999px;
}
body.v2 .bsell__hero-meta {
display: flex; flex-direction: column; gap: 12px;
padding-top: 4px;
}
body.v2 .bsell__hero-num {
font-family: var(--sans);
font-weight: 500; font-size: 11.5px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
}
body.v2 .bsell__hero-name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.16;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--black);
margin: 0;
}
body.v2 .bsell__hero-name em { font-style: normal; color: var(--gold); }
body.v2 .bsell__hero-sub {
font-size: 16px;
color: var(--charcoal);
max-width: 44ch;
margin: 0;
line-height: 1.55;
}
body.v2 .bsell__thumbs {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
align-self: stretch;
}
body.v2 .bsell__thumb {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
gap: 18px;
align-items: center;
flex: 1;
}
body.v2 .bsell__thumb-photo {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 3px;
background: var(--cream-2);
}
body.v2 .bsell__thumb-photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease-out);
}
body.v2 .bsell__thumb:hover .bsell__thumb-photo img { transform: scale(1.04); }
body.v2 .bsell__thumb-meta { display: flex; flex-direction: column; gap: 6px; }
body.v2 .bsell__thumb-num {
font-family: var(--sans);
font-weight: 500; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
}
body.v2 .bsell__thumb-name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.14;
text-transform: uppercase;
color: var(--black);
}
/* Legacy 12-col grid (kept for back-compat if reused; no items here use it now) */
body.v2 .bsell__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(20px, 2.6vw, 44px);
}
body.v2 .bsell__item {
position: relative;
display: flex; flex-direction: column;
gap: 16px;
}
body.v2 .bsell__photo {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 4px;
background: var(--cream-2);
position: relative;
}
body.v2 .bsell__photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
body.v2 .bsell__item:hover .bsell__photo img { transform: scale(1.04); }
body.v2 .bsell__num {
position: absolute;
top: 16px; left: 18px;
font-family: var(--sans);
font-weight: 500; font-size: 12px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.85);
z-index: 1;
}
body.v2 .bsell__name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.2;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--black);
margin: 0;
}
/* Asymmetric column spans — 3-up varied row + 1 hero-shot row */
body.v2 .bsell__item--a { grid-column: span 5; }
body.v2 .bsell__item--b { grid-column: span 3; margin-top: 16%; }
body.v2 .bsell__item--c { grid-column: span 4; }
body.v2 .bsell__item--d { grid-column: 3 / span 8; margin-top: 6%; }
body.v2 .bsell__item--d .bsell__photo { aspect-ratio: 16 / 10; }
body.v2 .bsell__item--e { grid-column: span 5; grid-column-start: 8; }
body.v2 .bsell__foot {
margin-top: clamp(40px, 5vw, 72px);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
}
@media (max-width: 900px) {
body.v2 .bsell__head { grid-template-columns: 1fr; }
body.v2 .bsell__mag { grid-template-columns: 1fr; gap: 32px; }
body.v2 .bsell__thumbs { flex-direction: row; gap: 12px; }
body.v2 .bsell__thumb { grid-template-columns: 1fr; gap: 10px; }
body.v2 .bsell__thumb-name { font-size: 16px; }
body.v2 .bsell__foot { justify-content: center; }
}
/* ═══════════════════════════════════════════════════
6. FOODTRUCK — condensed; navy bg gives this section
a distinctive editorial moment between cream sections.
═══════════════════════════════════════════════════ */
body.v2 .ftruck {
background: var(--navy);
color: var(--cream);
position: relative;
overflow: hidden;
}
body.v2 .ftruck__inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
min-height: clamp(420px, 60vh, 640px);
}
body.v2 .ftruck__photo {
position: relative;
overflow: hidden;
}
body.v2 .ftruck__photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
body.v2 .ftruck__photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 60%, rgba(26,26,26,0.6) 100%);
}
body.v2 .ftruck__copy {
padding: clamp(60px, 8vw, 120px) clamp(32px, 5vw, 80px);
display: flex; flex-direction: column;
justify-content: center;
gap: 22px;
}
body.v2 .ftruck__copy .eyebrow { color: var(--gold); }
body.v2 .ftruck__copy h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 5vw, 72px);
line-height: 1.18;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--white);
margin: 0;
text-wrap: balance;
}
body.v2 .ftruck__copy h2 em { font-style: normal; color: var(--gold); }
body.v2 .ftruck__copy p {
font-size: 16px;
color: rgba(247,241,227,0.78);
max-width: 38ch;
margin: 0;
}
@media (max-width: 900px) {
body.v2 .ftruck__inner { grid-template-columns: 1fr; }
body.v2 .ftruck__photo { aspect-ratio: 16/10; }
}
/* ═══════════════════════════════════════════════════
7. TESTIMONIALS — scroll-jacked horizontal carousel
Same pin pattern as destinations: section is N×100vh tall, inner
pin is 100vh sticky, track translates horizontally as user scrolls
vertically. One full-width testimonial card visible at a time.
═══════════════════════════════════════════════════ */
body.v2 .testim {
background: var(--charcoal);
color: var(--cream);
position: relative;
}
body.v2 .testim::before {
content: "";
position: absolute; inset: 0;
background: url('assets/web/photo-22.webp') center/cover no-repeat;
opacity: 0.06;
filter: grayscale(1);
pointer-events: none;
z-index: 0;
}
body.v2 .testim__head {
position: relative;
z-index: 2;
max-width: var(--max);
margin: 0 auto;
padding: clamp(80px, 11vw, 140px) var(--gutter) clamp(40px, 5vw, 72px);
display: flex; align-items: end; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
}
body.v2 .testim__head .eyebrow { color: var(--gold); margin-bottom: 14px; }
body.v2 .testim__head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.18;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--white);
margin: 0;
max-width: 14ch;
}
/* Pin scaffolding (mirrors dest). */
body.v2 .testim__pin-wrap {
position: relative;
height: 400vh; /* 4 cards × 100vh each */
overflow: clip; /* clip not hidden so sticky works */
z-index: 1;
}
body.v2 .testim__pin {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.v2 .testim__track {
display: flex;
flex: 1;
height: 100%;
width: 100%;
will-change: transform;
}
body.v2 .testim__card {
flex: 0 0 100%;
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(24px, 3vh, 40px);
padding: clamp(60px, 9vh, 120px) var(--gutter);
max-width: var(--max);
margin: 0 auto;
text-align: left;
}
body.v2 .testim__stars {
color: var(--gold);
letter-spacing: 0.32em;
font-size: clamp(16px, 1.4vw, 22px);
}
body.v2 .testim__quote {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 64px);
line-height: 1.18;
letter-spacing: -0.005em;
color: var(--white);
margin: 0;
max-width: 26ch;
text-wrap: balance;
}
body.v2 .testim__author {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(13px, 1vw, 15px);
letter-spacing: 0.18em;
color: rgba(247,241,227,0.6);
text-transform: uppercase;
}
/* Prev / next nav inside the pinned area. */
body.v2 .testim__nav {
position: absolute;
top: clamp(20px, 3vh, 40px);
right: clamp(20px, 3vw, 48px);
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
background: rgba(26, 26, 26, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(247,241,227,0.12);
}
body.v2 .testim__nav-progress {
font-family: var(--sans);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: rgba(247,241,227,0.78);
min-width: 44px;
text-align: center;
}
body.v2 .testim__nav-current { color: var(--gold); font-weight: 700; }
body.v2 .testim__nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(247,241,227,0.22);
background: transparent;
color: var(--cream);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
body.v2 .testim__nav-btn:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--black);
}
body.v2 .testim__nav-btn svg { width: 16px; height: 16px; }
body.v2 .testim__nav-btn[disabled] {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
@media (max-width: 900px) {
body.v2 .testim__head { flex-direction: column; align-items: flex-start; }
body.v2 .testim__card {
padding: clamp(72px, 11vh, 110px) var(--gutter) clamp(72px, 11vh, 110px);
gap: clamp(20px, 3vh, 32px);
}
body.v2 .testim__quote { font-size: clamp(26px, 6.5vw, 40px); }
body.v2 .testim__nav {
top: auto;
bottom: clamp(16px, 3vh, 28px);
right: 50%;
transform: translateX(50%);
}
}
/* ═══════════════════════════════════════════════════
8. FINAL CTA
═══════════════════════════════════════════════════ */
body.v2 .final {
background: var(--black);
color: var(--cream);
padding: clamp(110px, 14vw, 180px) var(--gutter);
position: relative;
overflow: hidden;
}
body.v2 .final__inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
body.v2 .final__eyebrow { color: var(--gold); justify-content: center; margin: 0 auto 22px; }
body.v2 .final h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 8vw, 120px);
line-height: 1.15;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--white);
margin: 0 0 28px;
text-wrap: balance;
}
body.v2 .final h2 em { font-style: normal; color: var(--gold); display: block; }
body.v2 .final__sub {
font-size: 17px;
color: rgba(247,241,227,0.7);
max-width: 50ch;
margin: 0 auto 40px;
}
body.v2 .final__bg {
position: absolute;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
width: 130%;
height: 60%;
background: radial-gradient(ellipse at center bottom, rgba(221,170,45,0.18) 0%, transparent 70%);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════
MOTION — reveal up, eyebrow pulse, hero ken-burns
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
body.v2 .reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
body.v2 .reveal.in { opacity: 1; transform: none; }
body.v2 .reveal--lg { transform: translateY(14px); }
body.v2 .reveal-stagger > * {
opacity: 0;
transform: translateY(8px);
transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
body.v2 .reveal-stagger.in > * { opacity: 1; transform: none; }
body.v2 .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
body.v2 .reveal-stagger.in > *:nth-child(2) { transition-delay: 50ms; }
body.v2 .reveal-stagger.in > *:nth-child(3) { transition-delay: 100ms; }
body.v2 .reveal-stagger.in > *:nth-child(4) { transition-delay: 150ms; }
body.v2 .reveal-stagger.in > *:nth-child(5) { transition-delay: 200ms; }
body.v2 .reveal-stagger.in > *:nth-child(6) { transition-delay: 250ms; }
body.v2 .reveal-stagger.in > *:nth-child(7) { transition-delay: 300ms; }
body.v2 .reveal-stagger.in > *:nth-child(8) { transition-delay: 350ms; }
body.v2 .reveal-stagger.in > *:nth-child(9) { transition-delay: 400ms; }
body.v2 .reveal-stagger.in > *:nth-child(10) { transition-delay: 450ms; }
}
/* ═══════════════════════════════════════════════════
MENU PAGE (meny.html v2) — categorized grid
═══════════════════════════════════════════════════ */
/* ── Hero ────────────────────────────────────────────── */
body.v2.meny .meny-hero {
background: var(--black);
color: var(--cream);
padding: clamp(120px, 16vh, 200px) var(--gutter) clamp(56px, 8vw, 110px);
position: relative;
}
body.v2.meny .meny-hero__inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
gap: 48px;
align-items: end;
}
body.v2.meny .meny-hero h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(54px, 8.4vw, 116px);
line-height: 1.14;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--white);
margin: 0;
}
body.v2.meny .meny-hero h1 em { font-style: normal; color: var(--gold); display: block; }
body.v2.meny .meny-hero__lead {
font-size: 16.5px;
line-height: 1.6;
color: rgba(247,241,227,0.75);
max-width: 42ch;
margin: 0;
}
@media (max-width: 900px) {
body.v2.meny .meny-hero__inner { grid-template-columns: 1fr; gap: 24px; }
body.v2.meny .meny-hero h1 { font-size: clamp(44px, 13vw, 80px); }
}
/* ── Sticky toolbar: location pills + category tabs ──── */
body.v2.meny .meny-toolbar {
position: sticky;
top: var(--nav-h);
z-index: 80;
background: rgba(17, 17, 17, 0.92);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
border-bottom: 1px solid rgba(255,255,255,0.08);
border-top: 1px solid rgba(255,255,255,0.05);
}
body.v2.meny .meny-toolbar__inner {
max-width: var(--max);
margin: 0 auto;
padding: 10px var(--gutter) 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Location pills */
body.v2.meny .loc-pills {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body.v2.meny .loc-pills__label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(247,241,227,0.55);
margin-right: 4px;
white-space: nowrap;
}
body.v2.meny .loc-pill {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
height: 30px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(247,241,227,0.22);
background: transparent;
color: rgba(247,241,227,0.82);
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
white-space: nowrap;
}
body.v2.meny .loc-pill:hover { border-color: var(--gold); color: var(--gold); }
body.v2.meny .loc-pill.is-active {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
}
/* Category tabs */
body.v2.meny .cat-tabs {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
body.v2.meny .cat-tabs::-webkit-scrollbar { display: none; }
body.v2.meny .cat-tab {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 10px 14px;
color: rgba(247,241,227,0.65);
position: relative;
transition: color .18s ease;
scroll-snap-align: start;
white-space: nowrap;
}
body.v2.meny .cat-tab:hover { color: var(--gold); }
body.v2.meny .cat-tab.is-active { color: var(--gold); }
body.v2.meny .cat-tab.is-active::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 4px;
height: 1.5px;
background: var(--gold);
}
@media (max-width: 900px) {
body.v2.meny .meny-toolbar { top: var(--nav-h); }
body.v2.meny .meny-toolbar__inner { padding: 8px var(--gutter) 0; }
body.v2.meny .loc-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
body.v2.meny .loc-pills::-webkit-scrollbar { display: none; }
}
/* ── Category section ────────────────────────────────── */
body.v2.meny .meny-cat {
background: var(--cream);
padding: clamp(64px, 9vw, 120px) var(--gutter);
scroll-margin-top: calc(var(--nav-h) + 100px);
max-width: 100%;
}
body.v2.meny .meny-cat:nth-child(even) { background: var(--white); }
body.v2.meny .meny-cat__head {
max-width: var(--max);
margin: 0 auto clamp(36px, 5vw, 64px);
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 32px;
align-items: end;
}
body.v2.meny .meny-cat__head .eyebrow { grid-column: 1 / -1; margin-bottom: 14px; }
body.v2.meny .meny-cat__title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1.14;
letter-spacing: -0.003em;
text-transform: uppercase;
color: var(--black);
margin: 0;
}
body.v2.meny .meny-cat__lead {
font-size: 15.5px;
line-height: 1.55;
color: var(--charcoal);
max-width: 44ch;
margin: 0;
opacity: 0.85;
}
/* ── Card grid ───────────────────────────────────────── */
body.v2.meny .meny-cat__grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2.2vw, 28px);
}
@media (max-width: 1080px) { body.v2.meny .meny-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { body.v2.meny .meny-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
body.v2.meny .meny-card {
display: flex;
flex-direction: column;
gap: 10px;
}
body.v2.meny .meny-card__photo {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 4px;
background: var(--cream-2);
}
body.v2.meny .meny-card__photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s var(--ease-out);
}
body.v2.meny .meny-card:hover .meny-card__photo {
box-shadow: 0 14px 30px -16px rgba(0,0,0,0.35);
transition: box-shadow .2s ease-out;
}
body.v2.meny .meny-card:hover .meny-card__photo img { transform: scale(1.04); }
body.v2.meny .meny-card__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 0 2px;
}
body.v2.meny .meny-card__name {
font-family: var(--sans);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--black);
margin: 0;
letter-spacing: -0.005em;
}
body.v2.meny .meny-card__price {
font-family: var(--sans);
font-weight: 600;
font-size: 13.5px;
letter-spacing: 0.02em;
color: var(--navy);
flex-shrink: 0;
}
/* Uniform card grid — every card the same size. The .meny-card--featured
class is kept on the markup but visually neutralised so future variation
is opt-in without re-touching the HTML generator. */
body.v2.meny .meny-card--featured { grid-column: auto; grid-row: auto; }
body.v2.meny .meny-card--featured .meny-card__photo { aspect-ratio: 4 / 3; }
body.v2.meny .meny-card--featured .meny-card__name { font-size: 16px; }
body.v2.meny .meny-card--featured .meny-card__price { font-size: 13.5px; }
@media (max-width: 720px) {
body.v2.meny .meny-card__name { font-size: 14.5px; }
body.v2.meny .meny-card__price { font-size: 12.5px; }
}
@media (max-width: 900px) {
body.v2.meny .meny-cat__head { grid-template-columns: 1fr; gap: 12px; }
}
/* ── Section CTA ─────────────────────────────────────── */
body.v2.meny .meny-cat__foot {
max-width: var(--max);
margin: clamp(28px, 4vw, 44px) auto 0;
display: flex;
justify-content: flex-end;
}
@media (max-width: 720px) {
body.v2.meny .meny-cat__foot { justify-content: center; }
}
/* ── Final CTA (unchanged shell, refined copy) ──────── */
body.v2.meny .meny-foot-cta {
background: var(--black);
color: var(--cream);
padding: clamp(72px, 10vw, 120px) var(--gutter);
text-align: center;
}
body.v2.meny .meny-foot-cta h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 5vw, 72px);
line-height: 1.18;
text-transform: uppercase;
color: var(--white);
margin: 0 0 24px;
}
/* ═══════════════════════════════════════════════════
SUBPAGES (.sub) — v2 brand application
Scoped to body.v2.sub so the index/meny pages aren't touched.
The v1 subpage layouts (.page-hero, .section variants) keep their
structure; we only re-skin them with the v2 palette + typography.
═══════════════════════════════════════════════════ */
body.v2.sub {
background: var(--cream);
color: var(--charcoal);
}
/* All headings on subpages → Anton display, uppercase, tight LH that still
clears Å/Ä rings. */
body.v2.sub h1,
body.v2.sub h2,
body.v2.sub h3,
body.v2.sub h4 {
font-family: var(--display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.003em;
line-height: 1.16;
}
/* Page hero — navy background instead of charcoal, Anton headline. */
body.v2.sub .page-hero {
background: var(--navy);
color: var(--white);
}
body.v2.sub .page-hero h1 {
font-size: clamp(48px, 7vw, 104px);
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--white);
}
body.v2.sub .page-hero h1 em { color: var(--gold); font-style: normal; }
body.v2.sub .page-hero p {
color: rgba(247,241,227,0.78);
font-size: 16.5px;
line-height: 1.6;
}
/* Subpage section heading typography (h2 inside .section) */
body.v2.sub .section h2 {
font-size: clamp(32px, 4.4vw, 56px);
letter-spacing: -0.003em;
color: var(--black);
}
body.v2.sub .section h2 em { color: var(--gold); font-style: normal; }
/* Section background tokens — keep cream/white/dark variants but use the v2
palette. The v1 dark section was charcoal; we shift it to navy so all
"dark" surfaces on subpages match the navbar. */
body.v2.sub .section--dark {
background: var(--navy);
color: var(--white);
}
body.v2.sub .section--dark h2,
body.v2.sub .section--dark h3 { color: var(--white); }
body.v2.sub .section--dark p,
body.v2.sub .section--dark li { color: rgba(247,241,227,0.82); }
body.v2.sub .section--cream { background: var(--cream); }
/* Eyebrow labels in subpages — v1 style was inline gold-tracked caps; v2
continues that look but using Geist 500 + 22% letter-spacing to match
the rest of the v2 system. */
body.v2.sub .eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
/* Body copy on subpages — Geist, slightly tighter line-height than the v1 1.7
so paragraphs don't sprawl. */
body.v2.sub p { font-family: var(--sans); line-height: 1.6; }
/* The v1 sticker-style "stamp" badges (FYRA SPOTS, BOKA FOODTRUCK, SEDAN 2018,
SVAR INOM 24H) — recolor their inner ring stroke + text to match v2. The
v1 badge used --tomato (which v1 aliased to navy); on v2 we just confirm
gold ink on navy fill so the stamps read as brand artefacts. */
body.v2.sub .badge,
body.v2.sub .sunburst {
color: var(--gold);
}
/* Restauranger location cards: pin the location number/eyebrow gold on
cream cards (was tomato in v1). */
body.v2.sub .location-card .location__num,
body.v2.sub .location-card .eyebrow { color: var(--gold); }
/* ═══════════════════════════════════════════════════
COOKIE BANNER — mobile reflow
═══════════════════════════════════════════════════ */
body.v2 .cookie {
/* The v1 banner uses flex-row with a `border-left: 3px solid gold`.
On mobile that gets squeezed; stack vertically and tighten padding. */
border-left: 0;
border-top: 3px solid var(--gold);
}
@media (max-width: 720px) {
body.v2 .cookie {
bottom: 0; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 1rem 1.1rem 1.1rem;
border-radius: 0;
}
body.v2 .cookie p { font-size: 13.5px; line-height: 1.45; }
body.v2 .cookie button { width: 100%; padding: 0.85rem 1rem; }
}
/* ═══════════════════════════════════════════════════
MOBILE: Destination cards — horizontal swipe slider
Replaces the scroll-jacked 400vh carousel with a
native touch-swipe scroller on screens < 900px.
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
body.v2 .dest__pin-wrap {
height: auto;
overflow: visible;
}
body.v2 .dest__pin {
position: relative;
height: auto;
overflow: visible;
display: block;
}
body.v2 .dest__track {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 0;
height: auto;
will-change: auto;
transform: none !important;
}
body.v2 .dest__track::-webkit-scrollbar { display: none; }
body.v2 .dest__track { scrollbar-width: none; }
body.v2 .dest__card {
flex: 0 0 85vw;
min-width: 85vw;
height: 70vh;
scroll-snap-align: start;
border-radius: 16px;
overflow: hidden;
margin-left: 4vw;
position: relative;
}
body.v2 .dest__card:last-child {
margin-right: 4vw;
}
/* Photo fills entire card as background */
body.v2 .dest__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
body.v2 .dest__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gradient overlay for text readability */
body.v2 .dest__copy {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 20px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Index label */
body.v2 .dest__copy .index {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.7);
margin-bottom: 2px;
}
/* City name — bold white */
body.v2 .dest__name {
margin: 0;
}
body.v2 .dest__name-svg {
height: 40px;
}
body.v2 .dest__name-text {
fill: #fff;
font-size: 80px;
font-weight: 800;
}
/* Address + hours */
body.v2 .dest__copy .addr {
font-size: 0.85rem;
color: rgba(255,255,255,0.8);
line-height: 1.4;
margin: 0;
}
body.v2 .dest__copy .hours {
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
font-style: italic;
margin: 0;
}
/* Actions — compact row */
body.v2 .dest__copy .actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
body.v2 .dest__copy .btn-pill--sm {
font-size: 0.75rem;
padding: 8px 16px;
}
body.v2 .dest__copy .text-link {
font-size: 0.75rem;
color: rgba(255,255,255,0.7);
}
/* Hide the desktop prev/next nav on mobile */
body.v2 .dest__nav { display: none; }
}
/* ═══════════════════════════════════════════════════
MOBILE: Testimonials — infinite auto-scroll carousel
Replaces the scroll-jacked 400vh carousel with an
auto-scrolling horizontal loop on screens < 900px.
═══════════════════════════════════════════════════ */
@keyframes testimAutoScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 900px) {
body.v2 .testim__pin-wrap {
height: auto;
overflow: hidden;
}
body.v2 .testim__pin {
position: relative;
height: auto;
overflow: hidden;
display: block;
}
body.v2 .testim__track {
display: flex;
flex-wrap: nowrap;
height: auto;
width: max-content;
will-change: transform;
animation: testimAutoScroll 30s linear infinite;
}
body.v2 .testim__track:hover,
body.v2 .testim__track:active {
animation-play-state: paused;
}
body.v2 .testim__card {
flex: 0 0 80vw;
min-width: 80vw;
height: auto;
padding: clamp(40px, 6vh, 64px) 24px;
gap: 16px;
max-width: none;
margin: 0;
}
body.v2 .testim__quote {
font-size: clamp(20px, 5vw, 28px);
max-width: none;
}
/* Hide the desktop prev/next nav on mobile */
body.v2 .testim__nav { display: none; }
}
/* ═══════════════════════════════════════════════════
LOCATION DETAIL PAGES — hero + info grid + map
═══════════════════════════════════════════════════ */
/* ── Location Hero ────────────────────────────── */
body.v2 .loc-hero {
position: relative;
height: 60vh;
min-height: 400px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
body.v2 .loc-hero__img {
position: absolute;
inset: 0;
}
body.v2 .loc-hero__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.v2 .loc-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(26, 45, 71, 0) 0%,
rgba(26, 45, 71, 0.3) 40%,
rgba(15, 28, 47, 0.85) 100%
);
z-index: 1;
}
body.v2 .loc-hero__content {
position: relative;
z-index: 2;
padding: clamp(32px, 6vh, 72px) var(--gutter);
max-width: var(--max);
width: 100%;
margin: 0 auto;
color: var(--cream);
}
body.v2 .loc-hero__content .eyebrow {
color: var(--gold);
margin-bottom: 12px;
display: block;
}
body.v2 .loc-hero__content h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 8vw, 96px);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--cream);
margin: 0 0 12px;
}
body.v2 .loc-hero__addr {
font-size: clamp(15px, 2vw, 18px);
color: rgba(247, 241, 227, 0.8);
margin: 0;
line-height: 1.5;
}
/* ── Location Info Section ────────────────────── */
body.v2 .loc-info {
padding: clamp(60px, 8vw, 120px) 0;
}
body.v2 .loc-info__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
body.v2 .loc-info__details h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 4vw, 40px);
text-transform: uppercase;
color: var(--black);
margin: 0 0 24px;
letter-spacing: -0.01em;
}
body.v2 .loc-hours {
width: 100%;
border-collapse: collapse;
margin-bottom: 32px;
}
body.v2 .loc-hours tr {
border-bottom: 1px solid var(--line);
}
body.v2 .loc-hours td {
padding: 12px 0;
font-size: 15px;
color: var(--charcoal);
line-height: 1.5;
}
body.v2 .loc-hours td:last-child {
text-align: right;
font-weight: 500;
}
body.v2 .loc-note {
font-size: 14px;
color: rgba(60, 60, 60, 0.7);
margin: -16px 0 32px;
line-height: 1.6;
}
body.v2 .loc-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
body.v2 .loc-info__map {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.15);
}
body.v2 .loc-info__map iframe {
display: block;
width: 100%;
min-height: 400px;
}
/* Outline pill variant for location pages */
body.v2 .btn-pill--outline {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: none;
padding: 14px 28px;
border-radius: 999px;
background: transparent;
color: var(--charcoal);
border: 1.5px solid var(--line);
cursor: pointer;
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
text-decoration: none;
}
body.v2 .btn-pill--outline:hover {
background: var(--navy);
border-color: var(--navy);
color: var(--cream);
}
body.v2 .btn-pill--outline .btn-pill__chip {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.v2 .btn-pill--outline .btn-pill__chip svg {
width: 16px;
height: 16px;
}
/* ── Responsive: mobile stack ────────────────── */
@media (max-width: 768px) {
body.v2 .loc-hero {
height: 50vh;
min-height: 320px;
}
body.v2 .loc-info__grid {
grid-template-columns: 1fr;
}
body.v2 .loc-info__map iframe {
min-height: 300px;
}
body.v2 .loc-actions {
flex-direction: column;
}
body.v2 .loc-actions .btn-pill,
body.v2 .loc-actions .btn-pill--outline {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* ═══════════════════════════════════════════════════
MOBILE-ONLY restaurant cards — simple, clean, works
═══════════════════════════════════════════════════ */
body.v2 .dest-mobile { display: none; }
@media (max-width: 900px) {
body.v2 .dest { display: none !important; }
body.v2 .dest-mobile {
display: block;
padding: 72px 0 64px;
background: var(--cream-2, #f7f3ed);
}
body.v2 .dest-mobile .eyebrow {
display: block;
padding: 0 24px;
margin-bottom: 8px;
}
body.v2 .dest-mobile h2 {
padding: 0 24px;
margin: 0 0 24px;
font-size: clamp(28px, 7vw, 42px);
font-weight: 800;
color: var(--navy-deep, #0a0a0a);
}
body.v2 .dest-mobile__scroll {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0;
}
body.v2 .dest-mobile__scroll::-webkit-scrollbar { display: none; }
body.v2 .dest-mobile__card {
flex: 0 0 80vw;
min-width: 80vw;
height: 55vh;
border-radius: 16px;
overflow: hidden;
position: relative;
scroll-snap-align: start;
text-decoration: none;
display: block;
}
body.v2 .dest-mobile__spacer {
flex: 0 0 8px;
min-width: 8px;
}
body.v2 .dest-mobile__card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.v2 .dest-mobile__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
body.v2 .dest-mobile__city {
display: block;
font-size: clamp(22px, 5.5vw, 32px);
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.02em;
}
body.v2 .dest-mobile__addr {
display: block;
font-size: 14px;
color: rgba(255,255,255,0.75);
margin-top: 4px;
}
}
/* Fix: padding on first/last card + foodtruck full-width on mobile */
@media (max-width: 900px) {
/* Spacer pseudo-elements handle first/last card padding now */
body.v2 .dest-mobile__card:first-child { margin-left: 0; }
body.v2 .dest-mobile__card:last-child { margin-right: 0; }
/* Foodtruck section: stack vertically, full-width image */
body.v2 .ftruck__inner {
grid-template-columns: 1fr;
min-height: auto;
max-width: 100%;
}
body.v2 .ftruck__photo {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
body.v2 .ftruck__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
body.v2 .ftruck__photo::after {
background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.4) 100%);
}
body.v2 .ftruck__photo::after {
background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.4) 100%);
}
body.v2 .ftruck__copy {
padding: 32px 24px;
}
}
/* ═══════════════════════════════════════════════════
TASK 2: Entry animation on mobile restaurant cards
═══════════════════════════════════════════════════ */
body.v2 .dest-mobile__card {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
body.v2 .dest-mobile__card.in {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════
TASK 3: Mobile testimonials — cream bg, dark text
═══════════════════════════════════════════════════ */
body.v2 .testim-mobile { display: none; }
@media (max-width: 900px) {
body.v2 .testim { display: none !important; }
body.v2 .testim-mobile {
display: block;
padding: 48px 0 40px;
background: var(--cream-2, #f7f3ed);
overflow: hidden;
}
body.v2 .testim-mobile .eyebrow {
display: block;
padding: 0 24px;
margin-bottom: 8px;
color: var(--gold, #d9ab2c);
}
body.v2 .testim-mobile h2 {
padding: 0 24px;
margin: 0 0 24px;
font-size: clamp(28px, 7vw, 42px);
font-weight: 800;
color: var(--navy-deep, #0a0a0a);
}
body.v2 .testim-mobile__track {
display: flex;
flex-wrap: nowrap;
width: max-content;
will-change: transform;
animation: testimMobileScroll 35s linear infinite;
}
body.v2 .testim-mobile__track:active {
animation-play-state: paused;
}
body.v2 .testim-mobile__card {
flex: 0 0 80vw;
min-width: 80vw;
padding: 28px 24px;
margin-right: 16px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 12px;
}
body.v2 .testim-mobile__stars {
color: var(--gold, #d9ab2c);
font-size: 18px;
letter-spacing: 2px;
}
body.v2 .testim-mobile__quote {
font-size: clamp(16px, 4.2vw, 20px);
line-height: 1.55;
color: var(--navy-deep, #0a0a0a);
margin: 0;
font-style: italic;
}
body.v2 .testim-mobile__author {
font-size: 14px;
font-weight: 700;
color: rgba(27, 40, 56, 0.6);
letter-spacing: 0.03em;
text-transform: uppercase;
margin-top: auto;
}
}
@keyframes testimMobileScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-25%); }
}
/* ═══════════════════════════════════════════════════
MENU PAGE — Text-based redesign (tm- prefix)
Clean typography, no food images, category headers,
item name + dotted line + price pattern.
═══════════════════════════════════════════════════ */
/* Hero */
body.v2.meny .tm-hero {
background: var(--navy);
padding: clamp(120px, 16vw, 200px) var(--gutter) clamp(60px, 8vw, 100px);
text-align: center;
}
body.v2.meny .tm-hero__inner {
max-width: 720px;
margin: 0 auto;
}
body.v2.meny .tm-hero h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(56px, 14vw, 120px);
line-height: 1.05;
text-transform: uppercase;
color: var(--white);
letter-spacing: -0.01em;
margin: 0 0 20px;
}
body.v2.meny .tm-hero__lead {
font-size: clamp(15px, 1.8vw, 18px);
line-height: 1.6;
color: rgba(247, 241, 227, 0.75);
max-width: 540px;
margin: 0 auto;
}
/* Location pills bar */
body.v2.meny .tm-locations {
background: var(--navy-deep);
padding: 16px var(--gutter);
position: sticky;
top: var(--nav-h, 72px);
z-index: 90;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.v2.meny .tm-locations__inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
body.v2.meny .tm-locations__label {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.5);
margin-right: 6px;
}
/* Menu container */
body.v2.meny .tm-menu {
max-width: 780px;
margin: 0 auto;
padding: clamp(40px, 6vw, 80px) var(--gutter);
}
/* Section */
body.v2.meny .tm-section {
margin-bottom: clamp(48px, 7vw, 80px);
}
body.v2.meny .tm-section__header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 2px solid var(--gold);
}
body.v2.meny .tm-section__header h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 5vw, 48px);
text-transform: uppercase;
line-height: 1.1;
color: var(--navy);
letter-spacing: -0.005em;
margin: 0 0 8px;
}
body.v2.meny .tm-section__header p {
font-size: 15px;
color: var(--text-soft);
line-height: 1.5;
margin: 0;
}
/* Item list */
body.v2.meny .tm-list {
display: flex;
flex-direction: column;
gap: 0;
}
body.v2.meny .tm-item {
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
body.v2.meny .tm-item:last-child {
border-bottom: none;
}
body.v2.meny .tm-item__top {
display: flex;
align-items: baseline;
gap: 8px;
}
body.v2.meny .tm-item__name {
font-family: var(--sans);
font-weight: 600;
font-size: clamp(16px, 1.8vw, 18px);
color: var(--charcoal);
white-space: nowrap;
margin: 0;
text-transform: none;
letter-spacing: 0;
line-height: 1.4;
}
body.v2.meny .tm-item__dots {
flex: 1;
border-bottom: 1px dotted rgba(60, 60, 60, 0.25);
min-width: 20px;
position: relative;
top: -4px;
}
body.v2.meny .tm-item__price {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(15px, 1.6vw, 17px);
color: var(--navy);
white-space: nowrap;
}
body.v2.meny .tm-item__price--sizes {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1.25;
font-size: clamp(13px, 1.4vw, 15px);
}
body.v2.meny .tm-item__size {
display: inline-block;
}
body.v2.meny .tm-item__size-label {
font-weight: 600;
color: var(--gold);
margin-right: 6px;
text-transform: uppercase;
font-size: 0.78em;
letter-spacing: 0.06em;
}
body.v2.meny .tm-item__desc {
font-size: 14px;
color: var(--text-soft);
line-height: 1.5;
margin: 4px 0 0;
padding-right: 60px;
}
/* Compact list variant (dips, drinks) — tighter spacing */
body.v2.meny .tm-list--compact .tm-item {
padding: 11px 0;
}
/* Footer CTA */
body.v2.meny .tm-foot-cta {
background: var(--navy);
color: var(--white);
text-align: center;
padding: clamp(60px, 8vw, 100px) var(--gutter);
}
body.v2.meny .tm-foot-cta h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 5vw, 56px);
text-transform: uppercase;
line-height: 1.15;
color: var(--white);
margin: 0 0 16px;
}
body.v2.meny .tm-foot-cta p {
font-size: 16px;
color: rgba(247,241,227,0.7);
margin: 0 0 28px;
}
/* Mobile adjustments */
@media (max-width: 600px) {
body.v2.meny .tm-item__name {
font-size: 15px;
}
body.v2.meny .tm-item__price {
font-size: 14px;
}
body.v2.meny .tm-item__desc {
padding-right: 0;
font-size: 13px;
}
body.v2.meny .tm-locations__inner {
justify-content: center;
}
body.v2.meny .tm-locations__label {
width: 100%;
text-align: center;
margin-right: 0;
margin-bottom: 4px;
}
}