/* Byttan i Parken — Design Comp Stylesheet
* Font: Sofia Pro via Adobe Typekit (kit pzh4eqz)
*/
:root {
--cream: #F7F2E6;
--dark: #1A3438;
--sage: #4F8E6B;
--salvia: #C3D2BE;
--ros: #F2CCBF;
--muted: #617070;
/* ── IMAGE SLOTS ──────────────────────────────────────────
* Drop real photos into /assets/images/ and change ONE line each.
* Recommended sizes (WebP, max 200kb each):
* hero.jpg 1920×1200 — start page hero, outdoor / park
* interior.jpg 1600×900 — Om Byttan, interior or detail
* map.jpg 1200×800 — Kontakt page map fallback
*/
--img-hero: url('assets/images/byttan_header.jpg');
--img-interior: url('assets/images/Byttan%20inl%C3%A4gg%202.jpg');
--img-map: url('assets/images/(2)%20_MG_2486%20(1).jpg');
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
body {
font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--dark);
background: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-weight: 700; }
h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.016em; }
h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.008em; }
h4 { font-size: clamp(20px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -0.005em; }
/* Italic display accents — used inside headings */
h1 em, h2 em, h3 em, .hero-tagline em {
font-style: italic;
font-weight: 400;
color: var(--sage);
}
h5 {
font-size: 13px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
}
p { font-size: 17px; line-height: 1.75; }
.lede { font-size: 20px; line-height: 1.6; letter-spacing: -0.003em; }
.eyebrow {
font-size: 12px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
font-weight: 700;
display: inline-block;
margin-bottom: 20px;
}
.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }
/* ───────────── NAV ───────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 48px;
transition:
background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled,
.nav:not(.is-home) {
background: rgba(247, 242, 230, 0.92);
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
padding: 18px 48px;
box-shadow: 0 18px 50px -30px rgba(26, 52, 56, 0.25);
border-bottom: 1px solid rgba(195, 210, 190, 0.4);
}
/* While overlay menu is open, disable expensive blur (overlay already covers the page) */
body.menu-open .nav.scrolled,
body.menu-open .nav:not(.is-home) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
box-shadow: none;
}
.nav-cta { display: none; }
/* Small home logo in nav — always visible on subpages, fades in on scroll on home */
.nav-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 0;
z-index: 101;
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
text-decoration: none;
}
.nav-logo img {
height: 28px;
width: auto;
display: block;
transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.scrolled .nav-logo img { height: 24px; }
.nav.is-home .nav-logo {
opacity: 0;
transform: translate(-50%, calc(-50% - 8px));
pointer-events: none;
}
.nav.is-home.scrolled .nav-logo {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
}
body.menu-open .nav-logo { opacity: 0; pointer-events: none; }
.nav.transparent:not(.scrolled) .btn-secondary {
color: var(--cream);
border-color: var(--cream);
}
/* ── Hamburger toggle (Osteria-style, always visible) ── */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 7px;
background: none;
border: none;
cursor: pointer;
padding: 10px 0;
width: 36px;
height: 36px;
z-index: 200;
position: relative;
}
.nav-toggle span {
display: block;
height: 1.5px;
background: var(--dark);
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
border-radius: 2px;
}
.nav-toggle span:nth-child(1) { width: 32px; }
.nav-toggle span:nth-child(2) { width: 22px; margin-left: 10px; }
.nav-toggle:hover span:nth-child(2) { width: 32px; margin-left: 0; }
.nav.transparent:not(.scrolled) .nav-toggle span { background: var(--cream); }
/* Toggle → X when menu open */
.nav-toggle.open span { background: var(--dark) !important; }
.nav-toggle.open span:nth-child(1) {
width: 28px;
transform: translateY(4px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
width: 28px;
margin-left: 0;
transform: translateY(-5px) rotate(-45deg);
}
/* ── Full-screen overlay menu ── */
.nav-links {
position: fixed;
inset: 0;
/* Use dynamic viewport height so iOS Safari's URL bar doesn't clip the menu */
height: 100vh;
height: 100dvh;
background: var(--cream);
display: flex;
flex-direction: column;
align-items: center;
/* `safe center` keeps centering when content fits, but aligns to start on overflow
so top items never get pushed out of view */
justify-content: safe center;
gap: clamp(18px, 2.2vw, 28px);
list-style: none;
margin: 0;
padding:
max(120px, calc(env(safe-area-inset-top, 0px) + 100px))
32px
max(80px, calc(env(safe-area-inset-bottom, 0px) + 60px));
/* Allow scroll if items don't fit (very short viewports, landscape phones) */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
opacity: 0;
pointer-events: none;
transform: translateY(-24px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 150;
}
.nav-links.open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.nav-links li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links.open li { opacity: 1; transform: translateY(0); }
.nav-links.open li:nth-child(1) { transition-delay: 0.18s; }
.nav-links.open li:nth-child(2) { transition-delay: 0.24s; }
.nav-links.open li:nth-child(3) { transition-delay: 0.30s; }
.nav-links.open li:nth-child(4) { transition-delay: 0.36s; }
.nav-links.open li:nth-child(5) { transition-delay: 0.42s; }
.nav-links.open li:nth-child(6) { transition-delay: 0.48s; }
.nav-links.open li:nth-child(7) { transition-delay: 0.54s; }
.nav-links.open li:nth-child(8) { transition-delay: 0.60s; }
.nav-links.open li:nth-child(9) { transition-delay: 0.66s; }
.nav-links a {
font-size: clamp(40px, 6.4vw, 88px);
font-weight: 700;
color: var(--dark);
text-decoration: none;
text-transform: none;
letter-spacing: -0.022em;
line-height: 1.02;
transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
font-style 0.4s ease,
font-weight 0.4s ease;
display: inline-block;
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 0.08em;
height: 2px;
background: var(--sage);
transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover {
color: var(--sage);
font-style: italic;
font-weight: 400;
}
.nav-links a:hover::after {
left: 0;
right: 0;
}
.nav-links .menu-wave {
list-style: none;
margin-top: 32px;
opacity: 0;
transition: opacity 0.8s ease 0.65s;
}
.nav-links.open .menu-wave { opacity: 0.55; transform: none; }
.nav-links .menu-wave img { width: 220px; height: auto; color: var(--sage); display: block; }
/* Boka bord CTA inside overlay menu — always visible when menu is open */
.nav-links .menu-cta {
position: fixed;
top: 28px;
right: clamp(24px, 4vw, 48px);
margin: 0;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 201;
list-style: none;
}
.nav-links.open .menu-cta {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
.nav-links .btn-menu {
font-size: 12px;
padding: 16px 44px;
background: transparent;
color: var(--dark);
border: 1.5px solid var(--dark);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
line-height: 1.4;
}
.nav-links .btn-menu::after {
display: none;
}
.nav-links .btn-menu:hover {
background: var(--dark);
color: var(--cream);
border-color: var(--dark);
font-style: normal;
}
body.menu-open { overflow: hidden; }
/* Height-based fits — scale the overlay down when the viewport is short
(13–14" laptops, landscape phones, small browser windows) so all
menu items are visible without scrolling. */
@media (max-height: 900px) {
.nav-links { padding: 88px 32px 56px; gap: 14px; }
.nav-links a { font-size: clamp(32px, 5.4vh, 56px); }
.nav-links .menu-wave { margin-top: 20px; }
.nav-links .menu-wave img { width: 140px; }
}
@media (max-height: 720px) {
.nav-links { padding: 72px 28px 44px; gap: 10px; }
.nav-links a { font-size: clamp(26px, 5vh, 42px); }
.nav-links .menu-wave { margin-top: 14px; }
.nav-links .menu-wave img { width: 110px; }
}
@media (max-height: 560px) {
.nav-links { padding: 56px 24px 32px; gap: 6px; }
.nav-links a { font-size: clamp(20px, 4.4vh, 30px); line-height: 1.1; }
.nav-links .menu-wave { display: none; }
.nav-links .menu-cta { top: 18px; }
.nav-links .btn-menu { padding: 12px 32px; font-size: 11px; }
}
/* ───────────── BUTTONS ───────────── */
.btn {
display: inline-block;
padding: 18px 36px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
border-radius: 2px;
transition:
background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
border: 1.5px solid transparent;
font-family: inherit;
position: relative;
overflow: hidden;
}
.btn-primary {
background: var(--sage);
color: var(--cream);
border-color: var(--sage);
}
.btn-primary:hover {
background: #3d7256;
border-color: #3d7256;
transform: translateY(-1px);
box-shadow: 0 18px 36px -18px rgba(79, 142, 107, 0.55);
}
.btn-secondary {
background: transparent;
color: var(--dark);
border-color: var(--dark);
}
.btn-secondary:hover {
background: var(--dark);
color: var(--cream);
transform: translateY(-1px);
box-shadow: 0 18px 36px -18px rgba(26, 52, 56, 0.4);
}
.btn-sm { padding: 13px 24px; font-size: 11px; letter-spacing: 0.13em; }
/* ───────────── HERO (Osteria-style: brand on cream, image below) ───────────── */
.hero {
background: var(--cream);
color: var(--dark);
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.hero-intro {
padding: clamp(160px, 20vh, 260px) 32px clamp(72px, 10vh, 140px);
text-align: center;
max-width: 1200px;
margin: 0 auto;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.hero-content {
position: relative;
max-width: 860px;
margin: 0 auto;
}
.hero-logo {
margin: 0 auto clamp(28px, 3.5vh, 44px);
line-height: 0;
max-width: min(620px, 82vw);
}
.hero-logo img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.hero-tagline {
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1.5;
margin-bottom: clamp(40px, 6vh, 64px);
font-weight: 400;
color: var(--muted);
max-width: 640px;
margin-left: auto;
margin-right: auto;
letter-spacing: -0.003em;
}
.hero-ctas {
display: flex;
gap: 18px;
justify-content: center;
flex-wrap: wrap;
}
.hero-image {
width: 100%;
height: clamp(420px, 66vh, 720px);
background-image: var(--img-hero);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
position: relative;
isolation: isolate;
}
/* Subtle grain/texture overlay for depth */
.hero-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse at 50% 100%, rgba(26, 52, 56, 0.18), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: auto, 200px 200px;
mix-blend-mode: overlay;
opacity: 0.55;
z-index: 1;
}
/* ───────────── SECTIONS ───────────── */
.section { padding: clamp(120px, 16vh, 200px) 0; }
.section-tight { padding: clamp(96px, 12vh, 150px) 0; }
.section-intro { text-align: center; margin-bottom: 96px; }
.section-intro h2 { max-width: 720px; margin: 0 auto; }
.section-intro p { max-width: 560px; margin: 28px auto 0; color: var(--muted); font-size: 19px; line-height: 1.65; }
/* Three-col intro — asymmetric feel */
.intro-grid {
display: grid;
grid-template-columns: 1.4fr 0.9fr 0.9fr;
gap: clamp(56px, 6vw, 96px);
align-items: start;
max-width: 1180px;
margin: 0 auto;
padding-left: clamp(0px, 4vw, 64px);
}
.intro-grid p { font-size: 19px; line-height: 1.65; color: var(--dark); }
.intro-grid > *:first-child p { font-size: 21px; line-height: 1.6; }
.hours-block dt {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-top: 16px;
}
.hours-block dt:first-child { margin-top: 0; }
.hours-block dd { font-size: 16px; line-height: 24px; }
/* Nav cards */
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 120px;
}
.card {
background: var(--cream);
border: 1px solid var(--salvia);
padding: 48px 36px 40px;
text-decoration: none;
color: var(--dark);
display: block;
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--sage);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover::before { transform: scaleX(1); }
.card-num {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.16em;
font-weight: 700;
text-transform: uppercase;
}
.card h4 { margin: 28px 0 10px; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.65; }
/* ───────────── PAGE HEADER ───────────── */
.page-header {
padding: clamp(200px, 26vh, 300px) 0 clamp(96px, 12vh, 140px);
text-align: center;
background: var(--cream);
}
.page-header .eyebrow { color: var(--sage); }
.page-header h1 { margin-bottom: 28px; }
.page-header p { color: var(--muted); font-size: 20px; line-height: 1.55; max-width: 600px; margin: 0 auto; }
/* ───────────── MENU ───────────── */
.menu-category { margin-bottom: 96px; }
.menu-category-head {
border-bottom: 1px solid var(--salvia);
padding-bottom: 24px;
margin-bottom: 40px;
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.menu-category-head h2 { font-size: 32px; line-height: 40px; }
.menu-category-time {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
font-weight: 700;
}
.menu-subcategory { margin-bottom: 48px; }
.menu-subcategory:last-child { margin-bottom: 0; }
.menu-subcategory h4 {
color: var(--sage);
margin-bottom: 20px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.075em;
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 16px 0;
gap: 32px;
border-bottom: 1px solid rgba(195, 210, 190, 0.5);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-info { flex: 1; }
.menu-item-name { font-weight: 700; font-size: 17px; }
.menu-item-desc {
color: var(--muted);
font-size: 14px;
line-height: 20px;
margin-top: 4px;
font-weight: 400;
}
.menu-item-price {
font-weight: 700;
white-space: nowrap;
font-size: 17px;
}
/* ───────────── OM ───────────── */
.om-image {
width: 100%;
height: clamp(460px, 62vh, 640px);
background-image:
linear-gradient(rgba(26,52,56,0.08), rgba(26,52,56,0.08)),
var(--img-interior);
background-size: cover;
background-position: center;
margin-bottom: clamp(96px, 12vh, 140px);
transition: background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.om-image:hover { background-size: cover, 106%; }
.om-text p {
margin-bottom: 32px;
font-size: 21px;
line-height: 1.65;
color: var(--dark);
}
.om-text p:last-of-type { margin-bottom: 0; }
.om-end {
font-size: clamp(30px, 3.4vw, 42px);
font-weight: 700;
margin-top: clamp(72px, 10vh, 120px);
text-align: center;
color: var(--sage);
line-height: 1.15;
letter-spacing: -0.012em;
}
/* ───────────── BOKA ───────────── */
.boka-block { margin-bottom: 0; }
.boka-block + .boka-block { margin-top: 0; }
.boka-block h2 { max-width: 640px; margin-top: 16px; }
.boka-block .lede {
max-width: 640px;
margin-top: 20px;
color: var(--muted);
}
.boka-block .btn { margin-top: 32px; }
.boka-block .eyebrow { color: var(--sage); }
.boka-divider {
border: 0;
border-top: 1px solid rgba(26, 52, 56, 0.10);
margin: clamp(64px, 9vh, 110px) 0;
max-width: 100%;
}
.boka-fineprint {
font-size: 15px;
line-height: 1.7;
color: var(--muted);
max-width: 640px;
margin-top: 24px;
}
.boka-rooms {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px 56px;
margin-top: 40px;
max-width: 720px;
}
.boka-room h3 {
font-size: clamp(20px, 2vw, 24px);
line-height: 1.25;
letter-spacing: -0.005em;
margin: 0 0 10px;
color: var(--dark);
}
.boka-room p {
color: var(--muted);
font-size: 16px;
line-height: 1.65;
margin: 0;
}
/* TrueBooking widget — restyled to match brand */
.booking-widget {
margin-top: 48px;
display: flex;
justify-content: flex-start;
}
.booking-widget .truebooking-button-6b530d2f {
background-color: var(--sage) !important;
color: var(--cream) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
padding: 18px 36px !important;
border-radius: 2px !important;
height: auto !important;
width: auto !important;
border: 1.5px solid var(--sage) !important;
cursor: pointer;
font-family: inherit !important;
transition: background-color 0.4s, border-color 0.4s, transform 0.5s, box-shadow 0.6s;
}
.booking-widget .truebooking-button-6b530d2f:hover {
background-color: #3d7256 !important;
border-color: #3d7256 !important;
transform: translateY(-1px);
box-shadow: 0 18px 36px -18px rgba(79, 142, 107, 0.55);
}
/* ───────────── EVENTS ───────────── */
.events-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.event-card {
border: 1px solid var(--salvia);
padding: 48px 40px;
background: var(--cream);
transition: border-color 0.2s;
}
.event-card:hover { border-color: var(--sage); }
.event-date {
color: var(--sage);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 13px;
margin-bottom: 16px;
display: inline-block;
}
.event-card h3 { margin-bottom: 12px; font-size: 24px; line-height: 32px; }
.event-card p { color: var(--muted); font-size: 15px; line-height: 24px; }
/* ── Event feature rows (Bruket-style image + text) ── */
.events-feature {
display: flex;
flex-direction: column;
gap: clamp(80px, 11vh, 140px);
}
.event-row {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.event-row-flip {
grid-template-columns: 1fr 1.05fr;
}
.event-row-flip .event-art {
order: 2;
}
.event-row-flip .event-body {
order: 1;
}
.event-art {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-row:hover .event-art,
.event-row-flip:hover .event-art { transform: scale(1.015); }
.event-art > * { transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.event-row:hover .event-art .wave,
.event-row-flip:hover .event-art .wave { transform: scale(1.04); }
.event-art .wave {
width: 62%;
max-width: 320px;
opacity: 0.55;
position: relative;
z-index: 1;
}
.event-art-label {
position: absolute;
bottom: 20px;
left: 24px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cream);
opacity: 0.6;
font-weight: 700;
z-index: 2;
}
/* Placeholder art variants — subtle gradient blocks in brand palette */
.event-art-1 {
background:
radial-gradient(120% 80% at 30% 20%, rgba(247,242,230,0.18), transparent 60%),
linear-gradient(160deg, var(--sage) 0%, #3d7256 100%);
}
.event-art-1 .event-art-label { color: var(--cream); }
/* Photo variant — real image fills the 4:5 frame */
.event-art-photo { background: var(--salvia); }
.event-art-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
.event-art-2 {
background:
radial-gradient(110% 75% at 70% 30%, rgba(255,255,255,0.22), transparent 60%),
linear-gradient(150deg, var(--salvia) 0%, #a3b89d 100%);
}
.event-art-2 .event-art-label { color: var(--dark); opacity: 0.55; }
.event-art-3 {
background:
radial-gradient(100% 70% at 35% 70%, rgba(255,255,255,0.18), transparent 60%),
linear-gradient(170deg, var(--ros) 0%, #d9a899 100%);
}
.event-art-3 .event-art-label { color: var(--dark); opacity: 0.55; }
.event-art-4 {
background:
radial-gradient(120% 80% at 60% 25%, rgba(247,242,230,0.14), transparent 60%),
linear-gradient(155deg, var(--dark) 0%, #0f2226 100%);
}
.event-art-4 .event-art-label { color: var(--cream); }
.event-body h2 {
margin: 12px 0 20px;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.15;
letter-spacing: -0.01em;
}
.event-body .lede {
color: var(--dark);
margin-bottom: 20px;
max-width: 480px;
}
.event-body p {
color: var(--muted);
font-size: 16px;
line-height: 28px;
margin-bottom: 32px;
max-width: 480px;
}
.event-body .btn { margin-top: 4px; }
/* ───────────── JOBBA ───────────── */
.jobba-text p { margin-bottom: 24px; font-size: 18px; line-height: 30px; }
.jobba-list {
margin: 64px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
}
.jobba-col h4 {
color: var(--sage);
margin-bottom: 20px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.jobba-col ul { list-style: none; }
.jobba-col li {
padding: 16px 0;
border-bottom: 1px solid var(--salvia);
font-size: 16px;
}
.jobba-col li:last-child { border-bottom: none; }
.jobba-cta {
background: var(--cream);
border: 1px solid var(--salvia);
padding: 48px;
text-align: center;
margin-top: 48px;
}
.jobba-cta a { color: var(--sage); font-weight: 700; text-decoration: none; }
.jobba-cta a:hover { text-decoration: underline; }
/* ───────────── KONTAKT ───────────── */
.kontakt-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
.kontakt-block { margin-bottom: 40px; }
.kontakt-block:last-child { margin-bottom: 0; }
.kontakt-block h5 { color: var(--muted); margin-bottom: 12px; font-size: 13px; }
.kontakt-block p { font-size: 17px; line-height: 28px; }
.kontakt-block a { color: var(--dark); text-decoration: none; border-bottom: 1px solid var(--salvia); }
.kontakt-block a:hover { color: var(--sage); border-color: var(--sage); }
.map {
width: 100%;
height: 540px;
background-image:
linear-gradient(rgba(195,210,190,0.6), rgba(195,210,190,0.6)),
var(--img-map);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark);
font-style: italic;
font-size: 14px;
border: 1px dashed rgba(26,52,56,0.15);
}
/* ───────────── HOME — RICHER SECTIONS ───────────── */
/* Manifesto: centered, big quiet statement with wave motif */
.home-manifesto { padding: clamp(140px, 18vh, 220px) 0 clamp(100px, 13vh, 160px); }
.manifesto-wrap {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.manifesto-wrap .wave { color: var(--sage); opacity: 0.85; margin-bottom: 36px; }
.manifesto-wrap .eyebrow { color: var(--sage); margin-bottom: 36px; }
.manifesto-text {
font-size: clamp(30px, 3.4vw, 50px);
line-height: 1.25;
letter-spacing: -0.014em;
font-weight: 700;
color: var(--dark);
max-width: 18ch;
margin: 0 auto;
}
.manifesto-text em {
font-style: italic;
font-weight: 400;
color: var(--sage);
}
/* Feature: asymmetric image + text row */
.home-feature { padding-top: clamp(72px, 10vh, 120px); }
.feature-row {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(48px, 7vw, 120px);
align-items: center;
}
.feature-media { position: relative; }
.feature-image {
width: 100%;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,52,56,0) 55%, rgba(26,52,56,0.22) 100%);
pointer-events: none;
}
.feature-image-1 {
background-image:
linear-gradient(rgba(26,52,56,0.08), rgba(26,52,56,0.08)),
var(--img-interior);
}
.feature-media:hover .feature-image { transform: scale(1.02); }
.feature-caption {
position: absolute;
left: 24px;
bottom: 20px;
font-size: 11px;
color: var(--cream);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
opacity: 0.85;
}
.feature-body { max-width: 520px; }
.feature-body h2 { margin: 14px 0 24px; }
.feature-body .lede { color: var(--dark); margin-bottom: 20px; }
.feature-body p { color: var(--muted); font-size: 18px; line-height: 1.7; margin-bottom: 36px; }
.feature-body .btn { margin-top: 4px; }
/* Info row: asymmetric hours + find */
.home-info { padding-top: clamp(100px, 13vh, 160px); }
.info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(56px, 7vw, 120px);
align-items: start;
padding-top: 64px;
border-top: 1px solid rgba(195, 210, 190, 0.6);
}
.info-block .eyebrow { color: var(--sage); margin-bottom: 24px; }
.info-block-find { padding-left: clamp(0px, 4vw, 80px); }
.info-address { font-size: 26px; line-height: 1.35; color: var(--dark); margin-bottom: 14px; font-weight: 400; letter-spacing: -0.005em; }
.info-address strong { font-weight: 700; }
.info-sub { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 380px; margin-bottom: 24px; }
.info-link {
color: var(--sage);
text-decoration: none;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
display: inline-block;
padding-bottom: 4px;
border-bottom: 1.5px solid var(--sage);
transition: letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.info-link:hover { letter-spacing: 0.18em; }
/* Cards section with wave intro */
.home-cards { padding-top: clamp(120px, 16vh, 180px); }
.home-cards .section-intro { margin-bottom: 72px; }
.home-cards .section-intro .wave { color: var(--sage); opacity: 0.85; margin-bottom: 28px; }
.home-cards .section-intro .eyebrow { color: var(--sage); }
/* Sign-off */
.home-signoff {
padding: clamp(120px, 16vh, 180px) 0 clamp(140px, 18vh, 220px);
text-align: center;
}
.home-signoff .wave { color: var(--dark); opacity: 0.55; margin-bottom: 32px; }
.home-signoff p {
font-size: clamp(28px, 3vw, 42px);
font-style: italic;
font-weight: 400;
color: var(--sage);
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Hours refinement on home */
.home-info .hours-block dt {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--muted);
margin-top: 24px;
}
.home-info .hours-block dt:first-child { margin-top: 0; }
.home-info .hours-block dd { font-size: 19px; line-height: 1.55; color: var(--dark); margin-top: 6px; }
/* ═══════════════════════════════════════════════════════════════
HOME v2 — Osteria-inspired image-driven startpage
═══════════════════════════════════════════════════════════════ */
/* Clean horizontal rule — replaces decorative wave motif */
.rule {
display: block;
width: 56px;
height: 1.5px;
background: var(--sage);
border: 0;
margin: 0 0 24px;
flex-shrink: 0;
}
.rule-center { margin-left: auto; margin-right: auto; }
.rule-light { background: rgba(247, 242, 230, 0.55); }
.rule-long { width: 120px; }
.container-wide { max-width: 1560px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); }
/* ── Ghost light button (for dark image overlays) ── */
.btn-ghost-light {
background: transparent;
color: var(--cream);
border: 1.5px solid rgba(247, 242, 230, 0.6);
}
.btn-ghost-light:hover {
background: var(--cream);
color: var(--dark);
border-color: var(--cream);
transform: translateY(-1px);
}
/* ── Nav-over-hero: light treatment while at top of home ── */
.nav.nav-over-hero:not(.scrolled) .nav-toggle span { background: var(--cream); }
/* ═══════════════════════════════════════════════════════════════
HERO — full-bleed image with overlay wordmark
═══════════════════════════════════════════════════════════════ */
.hero-full {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
color: var(--cream);
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
}
.hero-full-image {
position: absolute;
inset: 0;
background-image: url('assets/images/byttan_header.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: kenBurns 32s ease-in-out infinite alternate;
transform-origin: center center;
}
@media (max-width: 760px) {
.hero-full-image,
.om-hero-image {
background-image: url('assets/images/byttan_header_mobile.jpg');
}
}
.hero-full-veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,20,22,0.55) 0%, rgba(10,20,22,0.2) 35%, rgba(10,20,22,0.15) 60%, rgba(10,20,22,0.75) 100%);
z-index: 1;
pointer-events: none;
}
.hero-full-grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.4;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
.hero-full-inner {
position: relative;
z-index: 3;
text-align: center;
padding: clamp(120px, 16vh, 200px) 24px clamp(100px, 14vh, 160px);
max-width: 1100px;
width: 100%;
}
.hero-eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
color: rgba(247, 242, 230, 0.85);
padding: 8px 18px;
border: 1px solid rgba(247, 242, 230, 0.45);
border-radius: 100px;
margin-bottom: clamp(32px, 4vh, 48px);
}
.hero-full-logo {
max-width: min(720px, 86vw);
margin: 0 auto clamp(28px, 4vh, 48px);
line-height: 0;
}
.hero-full-logo img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 6px 30px rgba(0,0,0,0.35));
}
.hero-full-tagline {
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.5;
color: rgba(247, 242, 230, 0.9);
max-width: 640px;
margin: 0 auto clamp(40px, 6vh, 64px);
letter-spacing: -0.003em;
font-weight: 400;
}
.hero-full-tagline em {
font-style: italic;
color: var(--salvia);
font-weight: 400;
}
.hero-full-ctas {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.hero-full-scroll {
position: absolute;
left: 50%;
bottom: 36px;
transform: translateX(-50%);
z-index: 4;
text-align: center;
color: rgba(247, 242, 230, 0.75);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
animation: scrollBob 2.4s ease-in-out infinite;
}
.hero-full-scroll span { display: block; margin-bottom: 10px; }
.hero-full-scroll i {
display: inline-block;
width: 1px;
height: 42px;
background: linear-gradient(180deg, rgba(247,242,230,0.9), rgba(247,242,230,0));
}
@keyframes scrollBob {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.75; }
50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
/* Entrance reveal */
.hero-full-inner > * {
opacity: 0;
transform: translateY(36px);
animation: heroRise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.15s; }
.hero-full-logo { animation-delay: 0.35s; }
.hero-full-tagline { animation-delay: 0.65s; }
.hero-full-ctas { animation-delay: 0.9s; }
/* ═══════════════════════════════════════════════════════════════
MARQUEE — scrolling tagline strip
═══════════════════════════════════════════════════════════════ */
.marquee {
background: var(--dark);
color: var(--cream);
padding: 26px 0;
overflow: hidden;
border-top: 1px solid rgba(195, 210, 190, 0.1);
border-bottom: 1px solid rgba(195, 210, 190, 0.1);
}
.marquee-track {
display: inline-flex;
align-items: center;
gap: 40px;
white-space: nowrap;
animation: marqueeScroll 40s linear infinite;
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 700;
letter-spacing: -0.008em;
}
.marquee-track span { display: inline-block; }
.marquee-track b {
color: var(--sage);
font-weight: 400;
font-size: 0.9em;
margin: 0 4px;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════════════════════════
INTRO — asymmetric statement
═══════════════════════════════════════════════════════════════ */
.home-intro { padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 8vh, 100px); }
.intro-grid-2 {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.intro-meta { padding-top: 12px; }
.intro-meta .wave { color: var(--sage); opacity: 0.9; margin-bottom: 20px; display: block; }
.intro-meta .eyebrow { color: var(--sage); margin-bottom: 0; }
.intro-statement {
font-size: clamp(32px, 4.2vw, 60px);
line-height: 1.15;
letter-spacing: -0.018em;
font-weight: 700;
color: var(--dark);
max-width: 20ch;
}
.intro-statement em {
font-style: italic;
font-weight: 400;
color: var(--sage);
}
/* ═══════════════════════════════════════════════════════════════
TRIPTYCH — three tall image cards
═══════════════════════════════════════════════════════════════ */
.home-triptych { padding: clamp(60px, 8vh, 100px) 0 clamp(100px, 13vh, 160px); }
.triptych {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.2vw, 36px);
}
.tri-card {
display: block;
text-decoration: none;
color: var(--dark);
position: relative;
}
.tri-card-offset { transform: translateY(clamp(24px, 4vw, 56px)); }
.tri-image {
width: 100%;
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.tri-image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,52,56,0) 55%, rgba(26,52,56,0.4) 100%);
pointer-events: none;
}
.tri-card:hover .tri-image { transform: scale(1.03); }
.tri-image-cafe { background-image: url('assets/images/ph-coffee.svg'); }
.tri-image-rest { background-image: url('assets/images/ph-galette.svg'); }
.tri-image-bar { background-image: url('assets/images/ph-drink.svg'); }
.tri-body { padding: 28px 4px 0; }
.tri-num {
display: inline-block;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: var(--sage);
margin-bottom: 10px;
}
.tri-body h3 { margin: 0 0 8px; letter-spacing: -0.01em; }
.tri-body p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 34ch; }
/* ═══════════════════════════════════════════════════════════════
MENU FEATURE — single card on home
═══════════════════════════════════════════════════════════════ */
.home-menu-feature { padding: clamp(60px, 8vh, 120px) 0 clamp(100px, 13vh, 160px); }
.menu-feature {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(48px, 6vw, 100px);
align-items: center;
text-decoration: none;
color: var(--dark);
}
.menu-feature-media { position: relative; }
.menu-feature-image {
width: 100%;
aspect-ratio: 5 / 4;
/* Real photo will replace this after opening */
background: var(--salvia);
background-size: cover;
background-position: center;
overflow: hidden;
transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
}
.menu-feature-media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,52,56,0) 55%, rgba(26,52,56,0.35) 100%);
pointer-events: none;
}
.menu-feature-deco-wrap::after { display: none; }
.menu-feature:hover .menu-feature-image { transform: scale(1.03); }
.menu-feature-caption {
position: absolute;
left: 24px;
bottom: 20px;
font-size: 11px;
color: var(--cream);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
opacity: 0.9;
}
.menu-feature-body { max-width: 480px; }
.menu-feature-body h2 { margin: 14px 0 24px; }
.menu-feature-body .lede { color: var(--muted); margin-bottom: 32px; }
.menu-feature-link {
display: inline-block;
color: var(--sage);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
border-bottom: 1.5px solid var(--sage);
padding-bottom: 4px;
transition: letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-feature:hover .menu-feature-link { letter-spacing: 0.22em; }
/* ═══════════════════════════════════════════════════════════════
MENU PAGE — sticky category selector
═══════════════════════════════════════════════════════════════ */
.menu-nav {
position: sticky;
top: 72px;
z-index: 90;
background: rgba(247, 242, 230, 0.92);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-top: 1px solid rgba(195, 210, 190, 0.5);
border-bottom: 1px solid rgba(195, 210, 190, 0.5);
margin-bottom: 24px;
}
.menu-nav-inner {
max-width: 1000px;
margin: 0 auto;
padding: 16px clamp(20px, 4vw, 40px);
display: flex;
gap: 8px;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
@media (min-width: 760px) {
.menu-nav-inner { justify-content: center; }
}
.menu-nav-inner::-webkit-scrollbar { display: none; }
.menu-nav-link {
flex-shrink: 0;
padding: 10px 22px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
color: var(--muted);
border: 1.5px solid transparent;
border-radius: 100px;
transition:
color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-nav-link:hover {
color: var(--sage);
border-color: rgba(79, 142, 107, 0.35);
}
.menu-nav-link.is-active {
color: var(--cream);
background: var(--sage);
border-color: var(--sage);
}
/* Give each category scroll-margin for sticky offset */
.menu-category { scroll-margin-top: 120px; }
/* ═══════════════════════════════════════════════════════════════
FEATURE BIG — large image + text, alternating
═══════════════════════════════════════════════════════════════ */
.home-feature-big { padding: clamp(64px, 8vh, 96px) 0; }
.fb-row {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(56px, 7vw, 120px);
align-items: center;
}
.fb-row.reverse { grid-template-columns: 1.1fr 0.9fr; }
.fb-text { max-width: 520px; }
.fb-text h2 { margin: 14px 0 24px; }
.fb-text .lede { color: var(--dark); margin-bottom: 20px; }
.fb-text p { color: var(--muted); font-size: 18px; line-height: 1.7; margin-bottom: 36px; }
.fb-media { position: relative; }
.fb-image {
width: 100%;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fb-image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,52,56,0) 55%, rgba(26,52,56,0.3) 100%);
pointer-events: none;
}
.fb-media:hover .fb-image { transform: scale(1.02); }
.fb-image-park { background-image: url('assets/images/Byttan%20inl%C3%A4gg%202.jpg'); }
.fb-image-interior { background: var(--salvia); aspect-ratio: 5 / 4; }
.fb-caption {
position: absolute;
left: 24px;
bottom: 20px;
font-size: 11px;
color: var(--cream);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
opacity: 0.88;
}
.home-feature-big.alt { background: rgba(195, 210, 190, 0.18); }
/* ═══════════════════════════════════════════════════════════════
MOSAIC — asymmetric image grid
═══════════════════════════════════════════════════════════════ */
.home-mosaic { padding: clamp(120px, 16vh, 180px) 0 clamp(100px, 13vh, 160px); }
.mosaic-intro {
max-width: 720px;
margin: 0 0 clamp(56px, 7vh, 96px);
}
.mosaic-intro .eyebrow { color: var(--sage); margin-bottom: 18px; }
.mosaic-intro h2 { letter-spacing: -0.016em; }
.mosaic-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(20px, 2.2vw, 36px);
}
.mo { margin: 0; position: relative; overflow: hidden; }
.mo-img {
width: 100%;
height: 100%;
min-height: 320px;
background-size: cover;
background-position: center;
transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mo:hover .mo-img { transform: scale(1.03); }
.mo figcaption {
position: absolute;
left: 20px;
bottom: 18px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cream);
font-weight: 700;
opacity: 0.9;
z-index: 2;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.mo::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
background: linear-gradient(180deg, rgba(26,52,56,0), rgba(26,52,56,0.55));
pointer-events: none;
}
.mo-1 { grid-column: span 7; aspect-ratio: 7 / 6; }
.mo-2 { grid-column: span 5; aspect-ratio: 5 / 6; }
.mo-3 { grid-column: span 5; aspect-ratio: 5 / 5; }
.mo-4 { grid-column: span 7; aspect-ratio: 7 / 5; }
.mo-img-galette { background-image: url('assets/images/ph-galette.svg'); }
.mo-img-bread { background-image: url('assets/images/ph-bread.svg'); }
.mo-img-coffee { background-image: url('assets/images/ph-coffee.svg'); }
.mo-img-drink { background-image: url('assets/images/ph-drink.svg'); }
/* ═══════════════════════════════════════════════════════════════
CTA BAND — full-bleed image with overlay
═══════════════════════════════════════════════════════════════ */
.cta-band {
position: relative;
min-height: 72vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream);
overflow: hidden;
isolation: isolate;
}
.cta-band-image {
position: absolute;
inset: 0;
/* Real photo will replace this after opening */
background: var(--dark);
z-index: 0;
transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-band:hover .cta-band-image { transform: scale(1.03); }
.cta-band-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,20,22,0.5), rgba(10,20,22,0.75));
z-index: 1;
}
.cta-band-inner {
position: relative;
z-index: 2;
padding: clamp(100px, 14vh, 160px) 24px;
max-width: 760px;
}
.cta-wave { color: var(--salvia); opacity: 0.85; margin: 0 auto 24px; display: block; }
.cta-band-inner h2 {
font-size: clamp(40px, 6vw, 80px);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 20px;
color: var(--cream);
}
.cta-band-inner h2 em {
font-style: italic;
font-weight: 400;
color: var(--salvia);
}
.cta-band-inner p {
font-size: 18px;
color: rgba(247,242,230,0.85);
margin-bottom: 36px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════════
OM BYTTAN — Lavventura-inspired layout
═══════════════════════════════════════════════════════════════ */
.page-hero {
position: relative;
width: 100%;
min-height: 72vh;
overflow: hidden;
isolation: isolate;
color: var(--cream);
display: flex;
align-items: flex-end;
justify-content: center;
}
.page-hero-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: kenBurns 34s ease-in-out infinite alternate;
transform-origin: center center;
}
.om-hero-image {
background-image: url('assets/images/byttan_header.jpg');
}
.page-hero-veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,20,22,0.25) 0%, rgba(10,20,22,0.1) 40%, rgba(10,20,22,0.35) 70%, rgba(10,20,22,0.8) 100%);
z-index: 1;
pointer-events: none;
}
.page-hero-inner {
position: relative;
z-index: 2;
text-align: center;
padding: clamp(140px, 22vh, 220px) 24px clamp(64px, 10vh, 110px);
max-width: 1000px;
width: 100%;
}
.page-hero-inner .eyebrow {
display: inline-block;
margin-bottom: 20px;
}
.eyebrow-light {
color: rgba(247, 242, 230, 0.85) !important;
}
.page-hero-inner h1 {
color: var(--cream);
font-size: clamp(44px, 6.4vw, 92px);
line-height: 1.02;
letter-spacing: -0.02em;
margin: 0;
text-shadow: 0 4px 40px rgba(0,0,0,0.35);
}
.page-hero-inner h1 em {
font-style: italic;
color: var(--salvia);
font-weight: 400;
}
/* ── Lede intro ───────────────────────────── */
.om-lede-section {
padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 70px);
}
.om-lede {
font-family: "sofia-pro", sans-serif;
font-weight: 300;
font-style: italic;
font-size: clamp(24px, 2.6vw, 38px);
line-height: 1.45;
color: var(--dark);
text-align: center;
letter-spacing: -0.012em;
margin: 0;
}
/* ── Full-bleed image breaks ──────────────── */
.om-break {
position: relative;
width: 100%;
margin: clamp(40px, 6vh, 80px) 0;
}
.om-break-image {
position: relative;
width: 100%;
height: clamp(380px, 60vh, 640px);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.om-break-image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,52,56,0) 60%, rgba(26,52,56,0.35) 100%);
pointer-events: none;
}
.om-break-1 { background-image: url('assets/images/Byttan%20inl%C3%A4gg%202.jpg'); }
.om-break-2 { background: var(--salvia); }
.om-break-3 { background: var(--salvia); }
.om-break-offset .om-break-image {
max-width: 1400px;
margin-left: auto;
margin-right: 0;
width: calc(100% - clamp(40px, 8vw, 140px));
}
.om-break-caption {
position: absolute;
left: clamp(24px, 4vw, 60px);
bottom: 24px;
font-size: 11px;
color: var(--cream);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
/* ── Two-column story rows ────────────────── */
.om-story { padding: clamp(60px, 9vh, 120px) 0; }
.om-row {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(56px, 8vw, 140px);
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.om-row-head { position: sticky; top: 120px; }
.om-row-head .eyebrow {
display: block;
color: var(--sage);
margin: 18px 0 24px;
}
.om-row-head h2 {
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0;
color: var(--dark);
}
.om-row-head h2 em {
font-style: italic;
color: var(--sage);
font-weight: 400;
}
.om-row-body { max-width: 560px; }
.om-row-body .lede {
font-size: clamp(20px, 1.7vw, 24px);
line-height: 1.5;
color: var(--dark);
margin: 0 0 24px;
font-weight: 400;
}
.om-row-body p {
color: var(--muted);
font-size: 18px;
line-height: 1.75;
margin-bottom: 22px;
}
.om-row-body p:last-child { margin-bottom: 0; }
/* ── Sign-off ─────────────────────────────── */
.om-signoff {
padding: clamp(100px, 14vh, 180px) 0 clamp(120px, 16vh, 200px);
text-align: center;
}
.om-signoff .rule { margin-bottom: 40px; }
.om-signoff-line {
font-size: clamp(38px, 5.4vw, 72px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--dark);
margin: 0;
font-weight: 400;
}
.om-signoff-line em {
font-style: italic;
color: var(--sage);
font-weight: 400;
}
/* ═══════════════════════════════════════════════════════════════
HOME v2 — Responsive
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.intro-grid-2 { grid-template-columns: 1fr; gap: 32px; }
.triptych { grid-template-columns: 1fr; gap: 32px; }
.tri-card-offset { transform: none; }
.tri-image { aspect-ratio: 4 / 3; }
.menu-feature { grid-template-columns: 1fr; gap: 40px; }
.menu-feature-image { aspect-ratio: 4 / 3; }
.fb-row, .fb-row.reverse { grid-template-columns: 1fr; gap: 48px; }
.fb-row.reverse .fb-media { order: -1; }
.fb-image, .fb-image-interior { aspect-ratio: 4 / 3; }
.om-row { grid-template-columns: 1fr; gap: 36px; }
.om-row-head { position: static; }
.mosaic-grid { grid-template-columns: repeat(2, 1fr); }
.mo-1, .mo-2, .mo-3, .mo-4 { grid-column: span 1; aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
.hero-full { min-height: 92vh; }
.hero-full-inner { padding: 140px 20px 120px; }
.hero-eyebrow { font-size: 10px; padding: 7px 14px; }
.hero-full-logo { max-width: 82vw; }
.hero-full-tagline { font-size: 16px; line-height: 1.5; }
.hero-full-ctas { flex-direction: column; align-items: stretch; gap: 12px; max-width: 320px; margin: 0 auto; }
.hero-full-ctas .btn { width: 100%; }
.hero-full-scroll { display: none; }
.marquee-track { font-size: 20px; gap: 24px; }
.home-intro { padding: 80px 0 40px; }
.intro-statement { font-size: 28px; line-height: 1.2; }
.home-triptych { padding: 40px 0 80px; }
.home-feature-big { padding: 48px 0; }
.home-mosaic { padding: 80px 0; }
.mosaic-grid { grid-template-columns: 1fr; gap: 16px; }
.mo-1, .mo-2, .mo-3, .mo-4 { grid-column: span 1; aspect-ratio: 4 / 3; }
.mo-img { min-height: 260px; }
.cta-band { min-height: 60vh; }
.cta-band-inner { padding: 80px 24px; }
.cta-band-inner h2 { font-size: 36px; }
.page-hero { min-height: 58vh; }
.page-hero-inner { padding: 140px 20px 64px; }
.om-break-image { height: 320px; }
.om-break-offset .om-break-image { width: 100%; }
.om-story { padding: 64px 0; }
.om-lede-section { padding: 64px 0 32px; }
.om-lede { font-size: 22px; }
.om-row-body p { font-size: 16px; line-height: 1.7; }
.om-signoff { padding: 80px 0 100px; }
}
/* ───────────── FOOTER ───────────── */
.footer {
background: var(--dark);
color: var(--cream);
padding: 100px 0 40px;
margin-top: 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
}
.footer h5 {
color: var(--salvia);
margin-bottom: 20px;
font-size: 12px;
letter-spacing: 0.1em;
}
.footer p, .footer a {
color: var(--cream);
opacity: 1;
font-size: 14px;
line-height: 24px;
text-decoration: none;
}
.footer ul a {
color: rgba(247, 242, 230, 0.85);
}
.footer ul a:hover {
color: var(--cream);
opacity: 1;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer a:hover { color: var(--salvia); }
.footer-logo {
display: block;
margin-bottom: 20px;
line-height: 0;
}
.footer-logo img {
height: 52px;
width: auto;
display: block;
}
.footer-bottom {
padding-top: 32px;
border-top: 1px solid rgba(247, 242, 230, 0.15);
font-size: 13px;
color: var(--salvia);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
/* Footer decorative icon */
.footer-deco {
text-align: center;
margin-bottom: 40px;
}
.footer-deco-icon {
width: 48px;
height: auto;
opacity: 0.35;
display: inline-block;
filter: brightness(0) invert(0.82) sepia(0.3) saturate(0.8) hue-rotate(100deg);
}
/* Kontakt clean layout */
.kontakt-clean {
text-align: center;
}
.kontakt-main {
margin-bottom: clamp(48px, 6vh, 80px);
}
.kontakt-email {
font-size: clamp(22px, 3.5vw, 36px);
font-weight: 700;
color: var(--dark);
text-decoration: none;
border-bottom: 2px solid var(--sage);
padding-bottom: 4px;
transition: color 0.3s ease, border-color 0.3s ease;
}
.kontakt-email:hover {
color: var(--sage);
}
.kontakt-details {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
text-align: left;
}
.kontakt-details h5 {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sage);
margin-bottom: 12px;
font-weight: 700;
}
.kontakt-details p {
font-size: 14px;
line-height: 1.7;
color: var(--muted);
}
.kontakt-details a {
color: var(--dark);
text-decoration: none;
border-bottom: 1px solid var(--salvia);
}
.kontakt-details a:hover {
color: var(--sage);
border-color: var(--sage);
}
@media (max-width: 760px) {
.kontakt-details {
grid-template-columns: 1fr 1fr;
gap: 32px 24px;
}
}
@media (max-width: 480px) {
.kontakt-details {
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
}
/* ───────────── SCROLL REVEAL ───────────── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ───────────── WAVE BRAND ELEMENT ───────────── */
.wave {
display: block;
width: 100%;
height: auto;
color: var(--dark);
}
.wave-lg { max-width: 480px; margin: 0 auto; }
.wave-md { max-width: 280px; margin: 0 auto 24px; }
.wave-sm { max-width: 180px; margin: 0 auto 24px; }
.wave-light { color: var(--cream); }
.wave-sage { color: var(--sage); }
.wave-divider {
padding: 96px 0 32px;
text-align: center;
}
.wave-divider .wave { max-width: 520px; margin: 0 auto; }
/* ───────────── HERO REVEAL ───────────── */
.hero-content > * {
opacity: 0;
transform: translateY(32px);
animation: heroRise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-logo { animation-delay: 0.2s; }
.hero-tagline { animation-delay: 0.55s; }
.hero-ctas { animation-delay: 0.85s; }
.hero-image {
opacity: 0;
animation: heroImageRise 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes heroRise {
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroImageRise {
from { opacity: 0; transform: translateY(40px) scale(1.02); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Slow Ken-Burns drift on hero image */
.hero-image {
animation: kenBurns 28s ease-in-out infinite alternate;
transform-origin: center center;
}
@keyframes kenBurns {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.hero-image { animation: none; }
}
/* ───────────── HOVER REFINEMENTS ───────────── */
.card, .event-card { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.5s; }
.card:hover, .event-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -24px rgba(26,52,56,0.18);
}
.menu-item { transition: padding-left 0.4s cubic-bezier(0.22,1,0.36,1); }
.menu-item:hover { padding-left: 8px; }
a, .nav-links a { transition: color 0.3s ease, opacity 0.3s ease; }
/* ═══════════════════════════════════════════════════════════════
MENU TABS — tabbed navigation for menu page
═══════════════════════════════════════════════════════════════ */
.menu-tabs {
position: sticky;
top: 72px;
z-index: 90;
background: rgba(247, 242, 230, 0.92);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-top: 1px solid rgba(195, 210, 190, 0.5);
border-bottom: 1px solid rgba(195, 210, 190, 0.5);
margin-bottom: 24px;
}
.menu-tabs-inner {
max-width: 1000px;
margin: 0 auto;
padding: 16px clamp(20px, 4vw, 40px);
display: flex;
gap: 8px;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
@media (min-width: 760px) {
.menu-tabs-inner { justify-content: center; }
}
.menu-tabs-inner::-webkit-scrollbar { display: none; }
.menu-tab {
flex-shrink: 0;
padding: 10px 22px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
border: 1.5px solid transparent;
border-radius: 100px;
background: none;
cursor: pointer;
font-family: inherit;
transition:
color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-tab:hover {
color: var(--sage);
border-color: rgba(79, 142, 107, 0.35);
}
.menu-tab.is-active {
color: var(--cream);
background: var(--sage);
border-color: var(--sage);
}
/* Tab content panels */
.menu-tab-content {
display: none;
animation: tabFadeIn 0.4s ease;
}
.menu-tab-content.is-active {
display: block;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Menu item note (e.g. "Stor serveras med pommes frites") */
.menu-item-note {
font-size: 13px;
color: var(--muted);
font-style: italic;
padding: 4px 0 8px;
margin-top: -8px;
}
/* Menu item vegetarian variant */
.menu-item-veg {
border-left: 2px solid var(--salvia);
padding-left: 16px;
margin-left: 0;
}
.menu-item-veg .menu-item-name {
font-weight: 400;
font-style: italic;
color: var(--sage);
}
/* Sällskap sub-toggle */
.sallskap-toggle {
display: flex;
gap: 8px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.sallskap-btn {
padding: 8px 18px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
border: 1.5px solid var(--salvia);
border-radius: 100px;
background: none;
cursor: pointer;
font-family: inherit;
transition:
color 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.sallskap-btn:hover {
color: var(--sage);
border-color: var(--sage);
}
.sallskap-btn.is-active {
color: var(--cream);
background: var(--dark);
border-color: var(--dark);
}
.sallskap-content {
display: none;
animation: tabFadeIn 0.35s ease;
}
.sallskap-content.is-active {
display: block;
}
.sallskap-title {
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
color: var(--dark);
margin-bottom: 16px;
font-style: italic;
letter-spacing: -0.01em;
}
/* Price summary line shown under each Sällskap menu/buffé title */
.sallskap-price {
font-size: 16px;
color: var(--dark);
margin: 0 0 32px;
padding: 14px 18px;
background: rgba(195, 210, 190, 0.28);
border-left: 3px solid var(--sage);
border-radius: 2px;
line-height: 1.55;
letter-spacing: 0.01em;
}
.sallskap-price strong {
font-weight: 700;
color: var(--dark);
}
.sallskap-price span {
color: var(--muted);
font-size: 14px;
font-style: italic;
}
/* Small inline note after a subcategory title (e.g. "(välj en)") */
.menu-subcategory-note {
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--muted);
font-style: italic;
margin-left: 6px;
}
/* ─── Veckans lunch ─────────────────────────────────────────────
Editorial 2-col grid (1 col on mobile). Each day is a clean
block with a sage label, a main dish, and the vegetarian
variant clearly differentiated by a small uppercase label. */
.menu-week {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 44px 56px;
margin-top: 4px;
}
.menu-day { margin: 0; padding: 0; }
.menu-day-name {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--sage);
margin: 0 0 18px;
padding: 0 0 10px;
border-bottom: 1px solid rgba(79, 142, 107, 0.35);
}
.menu-day-dish {
margin: 0;
}
.menu-day-dish + .menu-day-dish {
margin-top: 18px;
}
.menu-day-dish-name {
font-size: 17px;
font-weight: 600;
color: var(--dark);
line-height: 1.35;
letter-spacing: -0.005em;
}
.menu-day-dish-desc {
font-size: 14px;
color: var(--muted);
margin-top: 4px;
line-height: 1.55;
}
.menu-day-dish-veg .menu-day-dish-name {
font-weight: 400;
font-style: italic;
color: var(--sage);
}
.menu-day-veg-label {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
margin-bottom: 4px;
}
@media (max-width: 760px) {
.menu-week {
grid-template-columns: 1fr;
gap: 32px;
}
.menu-day-name { margin-bottom: 14px; padding-bottom: 8px; }
.menu-day-dish-name { font-size: 16px; }
}
/* Events page — empty state ("Kommer snart.") */
.events-empty {
min-height: 60vh;
min-height: 60dvh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 12vh, 160px) 0;
}
.events-empty-text {
font-size: clamp(28px, 4vw, 48px);
font-weight: 400;
font-style: italic;
color: var(--dark);
letter-spacing: -0.01em;
text-align: center;
margin: 0;
}
/* Sällskap — type toggle (3-rätters / Buffé) */
.sallskap-type-toggle {
display: flex;
gap: 0;
margin-bottom: 40px;
border-bottom: 2px solid var(--salvia);
}
.sallskap-type-btn {
padding: 12px 24px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
font-family: inherit;
transition: color 0.3s ease, border-color 0.3s ease;
}
.sallskap-type-btn:hover { color: var(--sage); }
.sallskap-type-btn.is-active {
color: var(--dark);
border-bottom-color: var(--dark);
}
.sallskap-type-content {
display: none;
animation: tabFadeIn 0.35s ease;
}
.sallskap-type-content.is-active { display: block; }
.menu-category-note {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
line-height: 1.6;
}
.sallskap-contact {
display: inline-block;
margin-top: 12px;
font-size: 15px;
font-weight: 700;
color: var(--sage);
text-decoration: none;
border-bottom: 1.5px solid var(--sage);
margin-bottom: 40px;
}
.sallskap-contact:hover { color: var(--dark); border-color: var(--dark); }
/* Buffé info */
.buffe-info {
text-align: center;
padding: clamp(60px, 10vh, 120px) 0;
}
.buffe-text {
font-size: clamp(20px, 2vw, 26px);
line-height: 1.55;
color: var(--dark);
max-width: 520px;
margin: 0 auto 40px;
font-weight: 400;
}
/* ═══════════════════════════════════════════════════════════════
DECORATIVE SVG ELEMENTS — art deco illustrations
═══════════════════════════════════════════════════════════════ */
/* Menu page decorative divider */
.menu-deco {
text-align: center;
padding: 56px 0 16px;
opacity: 0.5;
}
.menu-deco-icon {
width: 48px;
height: auto;
display: inline-block;
}
/* Home page — decorative illustrations (frameless) */
.menu-feature-deco-wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
}
.menu-feature-deco {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(32px, 5vh, 64px) 0;
}
.deco-section-icon {
width: clamp(140px, 22vw, 280px);
height: auto;
opacity: 0.55;
transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-feature:hover .deco-section-icon,
.fb-deco-wrap:hover .deco-section-icon {
opacity: 0.75;
transform: scale(1.04);
}
.menu-feature-caption-text {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
/* Feature big — decorative illustration (frameless) */
.fb-deco-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.fb-deco {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(32px, 5vh, 64px) 0;
}
/* CTA band — solid variant (no photo) */
.cta-band-solid {
background: var(--dark);
min-height: auto;
}
.cta-band-solid .cta-band-inner {
padding: clamp(100px, 14vh, 180px) 24px;
}
.cta-band-solid .rule {
background: rgba(247, 242, 230, 0.35);
}
.cta-band-deco {
margin-bottom: 32px;
}
.deco-cta-icon {
width: 56px;
height: auto;
opacity: 0.4;
filter: brightness(0) invert(0.92);
}
/* Om page — decorative break sections */
.om-deco-break {
padding: clamp(48px, 8vh, 80px) 0;
}
.om-deco-icon-wrap {
text-align: center;
}
.om-deco-icon {
width: clamp(56px, 8vw, 96px);
height: auto;
opacity: 0.45;
display: inline-block;
}
/* ═══════════════════════════════════════════════════════════════
BUTIK PAGE
═══════════════════════════════════════════════════════════════ */
.butik-section {
margin-left: auto;
margin-right: auto;
}
.butik-hero-img {
margin-bottom: clamp(48px, 6vh, 80px);
overflow: hidden;
}
.butik-hero-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.butik-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
.butik-text {
padding-top: 8px;
}
.butik-text p {
font-size: 18px;
line-height: 1.75;
color: var(--dark);
margin-bottom: 24px;
}
.butik-text .lede {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--dark);
margin-bottom: 28px;
}
.butik-text p:last-child {
margin-bottom: 0;
}
.butik-side-img {
overflow: hidden;
}
.butik-side-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3 / 4;
object-fit: cover;
}
@media (max-width: 760px) {
.butik-content {
grid-template-columns: 1fr;
}
.butik-side-img {
margin-top: 16px;
}
}
/* ───────────── COMP BANNER ───────────── */
.comp-banner {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 200;
background: var(--dark);
color: var(--cream);
font-size: 11px;
padding: 8px 14px;
letter-spacing: 0.05em;
border-radius: 2px;
text-transform: uppercase;
font-weight: 700;
opacity: 0.85;
}
/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 1024px) {
.intro-grid { grid-template-columns: 1fr; gap: 48px; padding-left: 0; }
.cards { grid-template-columns: repeat(2, 1fr); }
.kontakt-grid { grid-template-columns: 1fr; gap: 48px; }
.jobba-list { grid-template-columns: 1fr; gap: 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.feature-row { grid-template-columns: 1fr; gap: 48px; }
.feature-image { aspect-ratio: 4 / 3; }
.info-row { grid-template-columns: 1fr; gap: 56px; padding-top: 48px; }
.info-block-find { padding-left: 0; }
}
@media (max-width: 760px) {
h1 { font-size: 42px; line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.012em; }
h3 { font-size: 24px; line-height: 1.22; }
p { font-size: 16px; line-height: 1.7; }
.lede { font-size: 18px; line-height: 1.55; }
.manifesto-text { font-size: 26px; line-height: 1.25; max-width: 20ch; }
.home-manifesto { padding: 120px 0 96px; }
.home-feature, .home-info, .home-cards { padding-top: 80px; }
.home-signoff { padding: 100px 0 120px; }
.home-signoff p { font-size: 24px; }
.feature-caption { left: 16px; bottom: 14px; }
.feature-body h2 { margin: 10px 0 18px; }
.feature-body p { font-size: 17px; margin-bottom: 28px; }
.info-address { font-size: 22px; }
.manifesto-wrap .wave { margin-bottom: 24px; }
.container, .container-narrow { padding: 0 24px; }
.section { padding: 80px 0; }
.section-tight { padding: 64px 0; }
.page-header { padding: 140px 0 56px; }
/* Hero — mobile */
.hero-intro { padding: 120px 24px 56px; }
.hero-logo { max-width: 78vw; }
.hero-tagline { font-size: 16px; line-height: 26px; margin-bottom: 32px; }
.hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
.hero-ctas .btn { width: 100%; }
.hero-image { height: 320px; }
.hero-full-logo { max-width: 80vw; }
.hero-full-tagline { font-size: 16px; line-height: 1.5; padding: 0 8px; }
.hero-full-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 320px; margin: 0 auto; }
.hero-full-ctas .btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.hero-full-scroll { display: none; }
.nav { padding: 18px 20px; }
.nav.scrolled { padding: 14px 20px; }
.nav-links { padding: 100px 24px 64px; gap: 16px; }
.nav-links a { font-size: 38px; }
.nav-links .menu-cta { margin-top: 20px; }
.btn-menu { padding: 16px 40px; min-height: 48px; }
.nav-links .menu-wave { margin-top: 20px; }
.nav-links .menu-wave img { width: 160px; }
.cards { grid-template-columns: 1fr; gap: 16px; margin-top: 56px; }
.card { padding: 32px 24px; }
.events-grid { grid-template-columns: 1fr; }
.event-card { padding: 36px 28px; }
.events-feature { gap: 64px; }
.event-row,
.event-row-flip { grid-template-columns: 1fr; gap: 28px; }
.event-row-flip .event-art { order: 0; }
.event-row-flip .event-body { order: 0; }
.event-art { aspect-ratio: 4 / 3; }
.event-art .wave { width: 55%; max-width: 220px; }
.event-body h2 { font-size: 28px; line-height: 36px; }
.event-body p { margin-bottom: 24px; }
.footer { padding: 72px 0 32px; }
.footer-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.om-image { height: 280px; margin-bottom: 64px; }
.om-text p { font-size: 17px; line-height: 28px; }
.map { height: 320px; }
.booking-frame { height: 420px; }
.menu-category { margin-bottom: 64px; }
.menu-category-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 18px; margin-bottom: 28px; }
.menu-category-head h2 { font-size: 26px; line-height: 34px; }
.menu-item { gap: 20px; padding: 14px 0; }
.menu-item-name, .menu-item-price { font-size: 16px; }
.om-end { font-size: 28px; margin-top: 56px; }
.menu-deco-icon { width: 36px; }
.deco-section-icon { width: clamp(100px, 30vw, 160px); }
.om-deco-break { padding: 40px 0; }
.om-deco-icon { width: 48px; }
.butik-text p { font-size: 17px; }
.butik-text p:first-child { font-size: 20px; }
.sallskap-toggle { gap: 6px; }
.sallskap-btn { padding: 7px 14px; font-size: 10px; }
.jobba-list { margin: 48px 0; gap: 32px; }
.jobba-cta { padding: 36px 24px; }
.wave-divider { padding: 64px 0 16px; }
.wave-divider .wave { max-width: 320px; }
.comp-banner { font-size: 10px; padding: 6px 10px; bottom: 12px; left: 12px; }
}
@media (max-width: 420px) {
.container, .container-narrow { padding: 0 20px; }
body { font-size: 16px; }
p { font-size: 15px; }
.lede { font-size: 17px; }
.hero-intro { padding: 110px 20px 48px; }
.hero-logo { max-width: 78vw; }
.hero-image { height: 260px; }
.nav { padding: 16px 16px; }
.nav-links a { font-size: 32px; }
.nav-links { gap: 14px; padding: 90px 20px 48px; }
h1 { font-size: 30px; line-height: 38px; }
h2 { font-size: 28px; line-height: 1.12; }
.btn { min-height: 48px; padding: 14px 28px; }
.intro-statement { font-size: 24px; line-height: 1.3; }
}
/* ═══════════════════════════════════════════════════════════════
EMBLEM — circular brand mark used as design signature
═══════════════════════════════════════════════════════════════ */
.emblem-mark {
display: block;
margin: 0 auto;
width: clamp(120px, 18vw, 180px);
height: auto;
opacity: 0.9;
}
.emblem-mark--sm { width: clamp(60px, 9vw, 80px); }
.emblem-mark--md { width: clamp(120px, 18vw, 160px); }
.emblem-mark--lg { width: clamp(180px, 26vw, 260px); }
/* Section divider — generous whitespace around emblem */
.section-emblem {
display: flex;
justify-content: center;
align-items: center;
padding: clamp(72px, 10vh, 120px) 24px;
}
.section-emblem .emblem-mark { opacity: 0.55; }
/* Footer wordmark — rectangular logo, centered, on dark band */
.footer-emblem {
display: flex;
justify-content: center;
margin-bottom: 56px;
}
.footer-emblem img {
width: clamp(140px, 18vw, 180px);
height: auto;
display: block;
opacity: 0.95;
}
/* CTA band emblem — sits above the headline */
.cta-band-emblem {
display: flex;
justify-content: center;
margin-bottom: 32px;
}
.cta-band-emblem img {
width: clamp(110px, 14vw, 150px);
height: auto;
display: block;
opacity: 0.85;
}
/* Hero emblem — subtle scroll-revealed mark below CTAs */
.hero-full-emblem {
display: flex;
justify-content: center;
margin-top: 56px;
opacity: 0;
transform: translateY(20px);
animation: heroRise 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}
.hero-full-emblem img {
width: clamp(72px, 9vw, 96px);
height: auto;
display: block;
opacity: 0.7;
}
/* ═══════════════════════════════════════════════════════════════
BOKA — bottom contact note (small, muted)
═══════════════════════════════════════════════════════════════ */
.boka-bottom-note {
margin: clamp(72px, 10vh, 120px) 0 0;
font-size: 14px;
line-height: 1.7;
color: var(--muted);
text-align: center;
}
.boka-bottom-note a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid rgba(26, 52, 56, 0.25);
transition: color 0.2s, border-color 0.2s;
}
.boka-bottom-note a:hover {
color: var(--sage);
border-color: var(--sage);
}
/* ═══════════════════════════════════════════════════════════════
PRESENTKORT — new page-specific styles
═══════════════════════════════════════════════════════════════ */
.presentkort-intro {
text-align: center;
margin-bottom: 64px;
}
.presentkort-intro p {
font-size: 20px;
line-height: 1.6;
color: var(--muted);
max-width: 540px;
margin: 0 auto 16px;
}
.presentkort-intro p:first-of-type {
font-size: clamp(26px, 3vw, 34px);
line-height: 1.3;
font-style: italic;
color: var(--dark);
margin-bottom: 28px;
}
.presentkort-card {
background: var(--cream);
border: 1px solid rgba(26, 52, 56, 0.12);
padding: clamp(48px, 7vw, 80px) clamp(32px, 5vw, 56px);
text-align: center;
margin-top: 48px;
}
.presentkort-card .eyebrow { color: var(--sage); margin-bottom: 16px; }
.presentkort-card h3 {
font-size: clamp(26px, 3vw, 34px);
margin-bottom: 20px;
color: var(--dark);
}
.presentkort-card p {
color: var(--muted);
max-width: 480px;
margin: 0 auto 32px;
}
/* Mobile adjustments for new sections */
@media (max-width: 760px) {
.footer-emblem { margin-bottom: 40px; }
.footer-emblem img { width: clamp(140px, 40vw, 180px); }
.section-emblem { padding: 56px 24px; }
.boka-rooms { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
.boka-divider { margin: 56px 0; }
.boka-bottom-note { margin-top: 56px; font-size: 13px; }
.hero-full-emblem { margin-top: 40px; }
.hero-full-emblem img { width: 64px; }
.cta-band-emblem { margin-bottom: 24px; }
.cta-band-emblem img { width: 96px; }
.presentkort-card { padding: 48px 28px; }
}
/* ═══════════════════════════════════════════════════════════════
DESIGN ELEVATION — April 2026
New rules supporting the design brief:
eyebrow-dash, sage section, home quote, dark page header,
page header emblem, larger frameless decoration, sticky tabs,
sage menu-feature, footer details, 404 page.
═══════════════════════════════════════════════════════════════ */
/* Dash-prefix eyebrow — adds an em dash and small space before the label */
.eyebrow-dash::before {
content: "—";
margin-right: 10px;
color: var(--sage);
letter-spacing: 0;
font-weight: 700;
display: inline-block;
}
.eyebrow-light { color: rgba(247, 242, 230, 0.78); }
.eyebrow-light.eyebrow-dash::before { color: var(--salvia); }
/* ───── Sage section — alternate background band ───── */
.section-sage {
background: var(--sage);
color: var(--cream);
position: relative;
}
.section-sage h1,
.section-sage h2,
.section-sage h3,
.section-sage h4 { color: var(--cream); }
.section-sage p,
.section-sage .lede { color: rgba(247, 242, 230, 0.92); }
.section-sage .eyebrow { color: var(--salvia); }
.section-sage .eyebrow-dash::before { color: var(--salvia); }
.section-sage a { color: var(--cream); }
.section-sage .btn-primary {
background: var(--cream);
color: var(--dark);
border-color: var(--cream);
}
.section-sage .btn-primary:hover {
background: var(--ros);
border-color: var(--ros);
color: var(--dark);
}
.section-sage .rule { background: rgba(247, 242, 230, 0.45); }
/* Home menu-feature when placed inside a sage band */
.menu-feature-on-sage h2,
.menu-feature-on-sage .lede,
.menu-feature-on-sage p { color: var(--cream); }
.menu-feature-on-sage .eyebrow { color: var(--salvia); }
.menu-feature-on-sage .menu-feature-caption-text { color: rgba(247, 242, 230, 0.7); }
/* Decoration on sage — invert to cream tone, lift opacity */
.deco-on-sage {
filter: brightness(0) invert(1) !important;
opacity: 0.78 !important;
}
.menu-feature:hover .deco-on-sage,
.fb-deco-wrap:hover .deco-on-sage { opacity: 0.92 !important; }
/* ───── Home page — italic pull quote moment ───── */
.home-quote {
padding: clamp(96px, 14vh, 160px) 0;
text-align: center;
background: var(--cream);
}
.home-quote-line {
font-family: 'sofia-pro', sans-serif;
font-size: clamp(34px, 4.6vw, 64px);
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--dark);
font-weight: 400;
margin: 0 auto;
max-width: 24ch;
}
.home-quote-line em {
font-style: italic;
color: var(--sage);
font-weight: 400;
}
/* ───── Dark page header (used on Meny) ───── */
.page-header-dark {
background: var(--dark);
color: var(--cream);
padding: clamp(180px, 22vh, 260px) 0 clamp(72px, 10vh, 120px);
position: relative;
}
.page-header-dark h1 { color: var(--cream); }
.page-header-dark p { color: rgba(247, 242, 230, 0.78); }
.page-header-dark .eyebrow { color: var(--salvia); }
.page-header-dark .eyebrow-dash::before { color: var(--salvia); }
.page-header-emblem {
display: flex;
justify-content: center;
margin-bottom: clamp(24px, 3vh, 36px);
}
.page-header-emblem img {
width: clamp(72px, 9vw, 110px);
height: auto;
opacity: 0.92;
}
/* Cream emblem inside the Om hero (full-bleed image) */
.page-hero-emblem {
display: flex;
justify-content: center;
margin-bottom: clamp(20px, 3vh, 32px);
}
.page-hero-emblem img {
width: clamp(64px, 8vw, 100px);
height: auto;
opacity: 0.88;
}
/* ───── Sticky meny tabs — sits flush under the dark hero ───── */
.menu-tabs-sticky {
margin-top: 0;
border-top: none;
}
/* When the meny page uses the dark hero, the tab strip sits directly
below it without a gap. The nav stays fixed above; sticky offset is
inherited from the base .menu-tabs rule. */
.page-header-dark + .menu-tabs-sticky {
margin-top: 0;
}
/* ───── Frameless larger illustrations ───── */
.menu-feature-deco { padding: 0 !important; }
.fb-deco { padding: 0 !important; }
.deco-section-icon { width: clamp(180px, 28vw, 360px); }
.deco-section-icon--xl { width: clamp(240px, 36vw, 480px); }
/* ───── Footer additions (social row + hours blocks) ───── */
.footer-social {
margin-top: 14px;
font-size: 14px;
letter-spacing: 0.04em;
}
.footer-social a {
color: var(--cream);
text-decoration: none;
opacity: 0.86;
transition: opacity 0.3s ease, color 0.3s ease;
}
.footer-social a:hover { opacity: 1; color: var(--ros); }
.footer-social span { margin: 0 10px; opacity: 0.45; }
.footer-hours {
font-size: 14px;
line-height: 1.65;
color: rgba(247, 242, 230, 0.78);
margin: 0 0 14px;
}
.footer-hours strong {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 6px;
}
/* ───── 404 / error page ───── */
.error-main { padding-top: 0; }
.error-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(160px, 20vh, 220px) 24px clamp(96px, 14vh, 160px);
background: var(--cream);
}
.error-page .container-narrow { width: 100%; }
.error-emblem {
display: flex;
justify-content: center;
margin-bottom: clamp(28px, 4vh, 44px);
}
.error-emblem img {
width: clamp(110px, 14vw, 168px);
height: auto;
opacity: 0.85;
}
.error-page h1 { margin-bottom: 24px; }
.error-page p {
color: var(--muted);
font-size: 18px;
line-height: 1.65;
max-width: 520px;
margin: 0 auto;
}
.error-ctas {
display: flex;
gap: 14px;
justify-content: center;
margin-top: clamp(36px, 5vh, 56px);
flex-wrap: wrap;
}
/* ───── Mobile adjustments for the new pieces ───── */
@media (max-width: 760px) {
.home-quote { padding: 72px 0; }
.home-quote-line { font-size: clamp(28px, 7vw, 38px); }
.page-header-dark { padding: 130px 0 56px; }
.page-header-emblem img { width: 64px; }
.page-hero-emblem img { width: 56px; }
.deco-section-icon { width: clamp(160px, 56vw, 240px); }
.deco-section-icon--xl { width: clamp(200px, 70vw, 300px); }
.footer-hours { font-size: 13px; }
.footer-hours strong { font-size: 10px; }
.footer-social { font-size: 13px; }
.error-page { min-height: 70vh; padding: 130px 24px 80px; }
.error-emblem img { width: 96px; }
.error-ctas { flex-direction: column; align-items: stretch; padding: 0 24px; }
.error-ctas .btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.eyebrow-dash::before { margin-right: 8px; }
}
/* ═══════════════════════════════════════════════════════════════
BISTRO MENU — dotted price leaders + section dividers
(L'Avventura-inspired typographic treatment)
═══════════════════════════════════════════════════════════════ */
#tab-bistro .menu-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0;
border-bottom: none;
padding: 18px 0 16px;
}
#tab-bistro .menu-item-info { min-width: 0; }
#tab-bistro .menu-item-price {
padding-left: 14px;
font-weight: 700;
font-size: 17px;
}
/* Dotted leader between name and price */
#tab-bistro .menu-item-name {
display: flex;
align-items: baseline;
width: 100%;
font-weight: 700;
font-size: 17px;
letter-spacing: -0.005em;
}
#tab-bistro .menu-item-name::after {
content: "";
flex: 1;
margin: 0 6px 0 12px;
height: 1px;
background-image: radial-gradient(circle, var(--salvia) 1px, transparent 1.2px);
background-size: 7px 2px;
background-position: 0 50%;
background-repeat: repeat-x;
opacity: 0.85;
align-self: center;
position: relative;
top: -2px;
}
/* Description sits below name, full width, no leader influence */
#tab-bistro .menu-item-desc {
margin-top: 6px;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
max-width: 56ch;
}
/* Subcategory dividers — quiet hairline + emblem dot between sections */
#tab-bistro .menu-subcategory + .menu-subcategory {
margin-top: 56px;
padding-top: 56px;
position: relative;
}
#tab-bistro .menu-subcategory + .menu-subcategory::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: rgba(195, 210, 190, 0.55);
}
#tab-bistro .menu-subcategory + .menu-subcategory::after {
content: "";
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cream);
border: 1px solid var(--salvia);
}
/* Subcategory heading — slightly more presence on Bistro */
#tab-bistro .menu-subcategory h4 {
font-size: 14px;
letter-spacing: 0.16em;
margin-bottom: 14px;
color: var(--sage);
}
/* Notes (e.g., "Stor serveras med pommes frites") */
#tab-bistro .menu-item-note {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted);
font-style: italic;
margin: -6px 0 6px;
padding-left: 0;
}
/* Mobile — keep the leader but tighten spacing */
@media (max-width: 760px) {
#tab-bistro .menu-item { padding: 14px 0 12px; }
#tab-bistro .menu-item-name { font-size: 16px; }
#tab-bistro .menu-item-name::after { margin: 0 4px 0 10px; }
#tab-bistro .menu-item-price { font-size: 16px; padding-left: 10px; }
#tab-bistro .menu-subcategory + .menu-subcategory { margin-top: 36px; padding-top: 36px; }
}
/* ═══════════════════════════════════════════════════════════════
BUTIK — image-free layout with decorative poster icon
═══════════════════════════════════════════════════════════════ */
.butik-deco {
display: flex;
justify-content: center;
margin: 0 auto clamp(48px, 6vh, 80px);
}
.butik-deco-icon {
width: clamp(120px, 18vw, 200px);
height: auto;
opacity: 0.85;
display: block;
}
.butik-section .butik-text {
text-align: center;
padding-top: 0;
}
.butik-section .butik-text p {
text-align: left;
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
.butik-section .butik-text .lede {
text-align: center;
margin-bottom: 32px;
}
@media (max-width: 760px) {
.butik-deco-icon { width: clamp(90px, 28vw, 130px); }
}
/* Butik — refined line-art pot illustration */
.butik-deco-icon[src*="butik-pot"] {
width: clamp(80px, 11vw, 130px);
opacity: 1;
}
@media (max-width: 760px) {
.butik-deco-icon[src*="butik-pot"] { width: clamp(70px, 22vw, 110px); }
}
/* Butik — extra breathing room before the footer */
.butik-section { padding-bottom: clamp(96px, 14vh, 180px); }
/* ═══════════════════════════════════════════════════════════════
POSTER-ICON TUNING
New filled-silhouette icons need slightly higher opacity than the
previous line-art set to feel present without overpowering.
═══════════════════════════════════════════════════════════════ */
img[src*="assets/icons/"].deco-section-icon { opacity: 0.78; }
img[src*="assets/icons/"].om-deco-icon { opacity: 0.7; }
img[src*="assets/icons/"].menu-deco-icon { opacity: 0.7; }
img[src*="assets/icons/"].footer-deco-icon { opacity: 0.5; }
/* ═══════════════════════════════════════════════════════════════
HOME — Vällagat section: cream background, free-standing icon
(no sage band, no frame around the illustration)
═══════════════════════════════════════════════════════════════ */
.menu-feature-clean .menu-feature-freestanding {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.menu-feature-illustration {
width: clamp(320px, 44vw, 560px);
height: auto;
display: block;
opacity: 1;
mix-blend-mode: multiply; /* lets the cream backdrop of the artwork blend into the page */
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-feature-clean:hover .menu-feature-illustration {
transform: scale(1.02);
}
@media (max-width: 760px) {
.menu-feature-illustration { width: clamp(260px, 78vw, 380px); }
}
/* ═══════════════════════════════════════════════════════════════
MENY — small contact note at the bottom of the menu page
═══════════════════════════════════════════════════════════════ */
.menu-contact-note {
padding: clamp(32px, 5vh, 56px) 0 clamp(60px, 9vh, 120px);
text-align: center;
}
.menu-contact-note p {
font-size: 14px;
line-height: 1.6;
color: var(--muted);
max-width: 56ch;
margin: 0 auto;
}
.menu-contact-note a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.3s ease;
}
.menu-contact-note a:hover { color: var(--sage); }
/* ═══════════════════════════════════════════════════════════════
BUTIK — tighten spacing around heading / illustration / text
═══════════════════════════════════════════════════════════════ */
.butik-header { padding-bottom: clamp(20px, 2.5vh, 32px); }
.butik-header h1 { margin-bottom: 0; }
.butik-section { padding-top: clamp(20px, 3vh, 40px); padding-bottom: clamp(48px, 8vh, 96px); }
.butik-section .butik-deco { margin: 0 auto clamp(24px, 3vh, 40px); }
@media (max-width: 760px) {
.butik-header { padding-bottom: 18px; }
.butik-section { padding-top: 18px; }
.butik-section .butik-deco { margin-bottom: 24px; }
}