/* ========================================================================== Brasserie26 — single source of truth stylesheet -------------------------------------------------------------------------- 1. Tokens 2. Reset + base 3. Layout (container, sand-panel, paper-card) 4. Header & nav 5. Hero 6. Content sections (text+image alternating grids) 7. CTA buttons (liquid glass gold) 8. Footer (öppettider, kontakt, moveat) 9. Reveal animations 10. Responsive ========================================================================== */ /* 1. Tokens ================================================================ */ :root { /* Colors */ --color-sand: #ECE3D0; --color-sand-deep: #DCCFAF; --color-paper: #FFFFFF; --color-ink: #1A1A1A; --color-ink-soft: #2A2A2A; --color-muted: #6E6A60; --color-line: rgba(26, 26, 26, 0.08); --color-gold: #B8A472; --color-gold-light: #D4C18C; --color-gold-dark: #8E7A4D; /* Fonts */ --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-script: "Dancing Script", "Brush Script MT", cursive; /* Type scale */ --text-base: 16px; --text-body: 1.19rem; /* ~19px — body copy in content sections */ --text-h1: clamp(2.4rem, 5vw, 4.2rem); --text-h2: clamp(1.9rem, 3.4vw, 2.8rem); --text-h3: clamp(1.2rem, 2vw, 1.45rem); --text-nav: 0.78rem; --text-cta: 0.78rem; --text-small: 0.92rem; /* Spacing */ --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Layout */ --container-max: 1180px; --paper-radius: 28px; --media-radius: 28px; /* Header */ --header-height: 156px; /* Motion */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-slow: 900ms; --dur-med: 400ms; --dur-fast: 220ms; } /* When the user scrolls past the hero, the header shrinks. We override the --header-height token on so .nav (height: var) and .hero (margin-top: calc(-1 * var)) react together — hero margin compensates exactly for the lost nav height, so body content stays anchored at the same absolute y-coordinate. No layout jump. */ body.is-scrolled { --header-height: 88px; } /* 2. Reset + base ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: var(--text-base); } body { margin: 0; /* "Aged gilded plaster wall" — designed brasserie surface, not a tinted gradient. Color composition: warm cream bloom upper-left (light source), deep tobacco shadow well lower-right, sun-shaft beam, chromatic pools. Texture and decoration come from body::before / body::after. */ background: /* L1: Sun-shaft — soft warm beam from upper-left */ linear-gradient(125deg, transparent 18%, rgba(255, 240, 200, 0.42) 28%, rgba(255, 235, 188, 0.30) 40%, transparent 56%), /* L2: Light source bloom — warm cream halo top-left */ radial-gradient(ellipse 95% 75% at 8% -10%, rgba(255, 245, 205, 0.82) 0%, rgba(248, 230, 188, 0.38) 32%, transparent 65%), /* L3: Center luminance — soft glow lifting the middle */ radial-gradient(ellipse 85% 60% at 50% 38%, rgba(255, 246, 218, 0.32) 0%, transparent 60%), /* L4: Shadow well — deep tobacco anchor, pushed darker */ radial-gradient(ellipse 85% 70% at 95% 110%, rgba(80, 52, 18, 0.65) 0%, rgba(150, 110, 60, 0.32) 38%, transparent 72%), /* L5: Mid-right warm bronze pool — chromatic break */ radial-gradient(ellipse 50% 45% at 102% 58%, rgba(190, 145, 90, 0.34) 0%, transparent 62%), /* L6: Lower-left terracotta hint — second hue prevents monochrome */ radial-gradient(ellipse 55% 50% at 4% 96%, rgba(195, 138, 95, 0.26) 0%, transparent 65%), /* L7: Diagonal base — five-stop palette pushed toward champagne/brass */ linear-gradient(160deg, #F8EBC8 0%, #F0DDB0 26%, #E2CC95 52%, #C8AB6E 80%, #A48450 100%); background-attachment: fixed; background-size: cover; color: var(--color-ink); font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* v222: Header switched to position:fixed (see .site-header) so body kan ha valfri overflow utan att påverka header-rendering. clip behållet för horisontell content-beskärning. */ overflow-x: clip; position: relative; min-height: 100vh; /* v222: padding-top kompenserar för fixed header på alla pages utom home. Front-page (.hero) ska ligga full-bleed under transparent header — där använder vi `body.home { padding-top: 0 }` så hero börjar vid y=0 och header floats över video. På innehållssidor (menyer, stora-sallskap, etc.) ger detta exakt det visuella avståndet som tidigare kom från sticky-header naturally ockuperande layoutflödet. */ padding-top: var(--header-height); } /* v222: Home-page neutraliserar body padding-top — hero ska vara full-bleed bakom transparent header. (WordPress lägger till `home` class auto på front-page .) v223: utvidgat till flera selectors som täcker WP body-class varianter när front-page används som static page (page-id-X) eller front-page-template. Detta gör fixet idiotsäkert oavsett WP-konfig. */ body.home, body.is-page-home, body.page-template-front-page, body.page-template-page-home, body[class*="page-id-"]:where(.home) { padding-top: 0; } /* Surface texture — coarse plaster blob (low frequency, hand-troweled wall feel) + fine paper grain (high frequency, brasserie-paper tooth). Both warmed with a sand-brown color matrix, multiplied so they tactilize the surface without dirtying the warm palette. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-size: 600px 600px, 240px 240px; background-repeat: repeat, repeat; opacity: 0.50; mix-blend-mode: multiply; } /* Decorative + atmospheric overlay — five compounding layers stacked so the surface reads as a designed wallpaper, not a gradient: 1. Sparse gold-leaf "sparkle" pattern in a Versailles diamond grid 2. Seven irregular gold-leaf flakes (cinematic focal points) 3. Asymmetric vignette (deep shadow lower-right + bright halo upper-left) 4. Soft diagonal silk veil (catches highlight across upper-mid) 5. Edge darkening (subtle frame shadow) Overlay blend: cream/gold pixels brighten the warm bg → flakes shimmer; dark pixels deepen → vignette anchors. Slow opacity breathing only — no transform, since visible decoration must not drift. */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* L1: Cream-gold dots in diamond grid — wallpaper "tapet"-decoration. 240px tile gives ~6-9 visible dots per viewport — sparse, refined. Fill is bright cream-gold; under overlay blend they shimmer like tiny gold-leaf specks catching the light. */ url("data:image/svg+xml;utf8,"), /* L2: Seven irregular gold-leaf flakes — non-uniform sizes, biased toward upper portion where the light falls. Soft elliptical falloff so each flake looks like aged gold leaf weathered into the plaster. */ radial-gradient(ellipse 95px 72px at 18% 12%, rgba(255, 228, 162, 0.42) 0%, transparent 65%), radial-gradient(ellipse 130px 100px at 78% 28%, rgba(248, 213, 148, 0.32) 0%, transparent 70%), radial-gradient(ellipse 72px 58px at 48% 62%, rgba(255, 222, 158, 0.36) 0%, transparent 65%), radial-gradient(ellipse 110px 85px at 88% 75%, rgba(238, 198, 128, 0.26) 0%, transparent 70%), radial-gradient(ellipse 82px 62px at 12% 88%, rgba(248, 208, 148, 0.28) 0%, transparent 65%), radial-gradient(ellipse 95px 75px at 32% 38%, rgba(255, 218, 148, 0.22) 0%, transparent 70%), radial-gradient(ellipse 65px 52px at 62% 18%, rgba(248, 202, 138, 0.28) 0%, transparent 65%), /* L3: Asymmetric vignette — heavy shadow bottom-right + halo top-left */ radial-gradient(ellipse 110% 90% at 100% 100%, rgba(50, 32, 12, 0.34) 0%, rgba(80, 55, 25, 0.10) 30%, transparent 55%), radial-gradient(ellipse 60% 55% at 0% 0%, rgba(255, 250, 218, 0.36) 0%, transparent 60%), /* L4: Soft diagonal silk veil — translucent sheen across upper-mid */ linear-gradient(115deg, transparent 28%, rgba(255, 250, 230, 0.10) 48%, rgba(255, 245, 215, 0.06) 58%, transparent 72%), /* L5: Subtle full-frame edge darkening — frames the page */ radial-gradient(ellipse 130% 100% at 50% 50%, transparent 55%, rgba(50, 32, 14, 0.12) 100%); background-size: 240px 240px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; mix-blend-mode: overlay; animation: sandBreathe 32s ease-in-out infinite alternate; } /* Pure opacity breathing — no transform, since the gold dots and flakes have fixed positions and any drift would be visible. Range kept narrow so the pulse reads as "atmosphere shifting" not "elements moving". */ @keyframes sandBreathe { 0% { opacity: 0.92; } 100% { opacity: 1.00; } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: 1; } } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft); } a:hover { opacity: 0.72; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--color-ink); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-6); } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* 3. Layout =============================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* Page content area — large white card with sand visible as a frame around it. Note: bottom margin is zero — the footer's own padding creates the gap below so the symmetric sand-frame stays consistent on every side. */ .page-content { background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EE 100%); border-radius: var(--paper-radius); margin: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) 0; box-shadow: 0 30px 80px -50px rgba(0,0,0,0.18); position: relative; z-index: 1; overflow: hidden; } /* Sand panel = full-bleed sand gradient (used for footer) */ .sand-panel { background: linear-gradient(180deg, #ECE3D0 0%, #DFD2B5 100%); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); position: relative; z-index: 1; } .sand-panel--page { padding-block: clamp(4rem, 10vw, 7rem); } /* The white "paper" card with rounded corners floating on the sand */ .paper-card { background: var(--color-paper); border-radius: var(--paper-radius); max-width: 1280px; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) 0; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 80px -40px rgba(0,0,0,0.18); overflow: hidden; } /* Footer-specific paper card — extra interior padding + centered stack layout */ .footer-paper-card { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(2rem, 4vw, 3rem); } /* 4. Header & nav ========================================================= */ /* v222 STICKY-HEADER FIX (FINAL): switched from `position: sticky` → `position: fixed`. Root cause analysis (after 4 failed sticky-attempts in v218–v221): - `position: sticky` requires an unbroken ancestor chain free from scroll- containers, transforms, filters, contain, and certain backdrop-filters. - body has `background-attachment: fixed` + `body::before/::after` with `position: fixed` + `mix-blend-mode` which interact unpredictably with sticky in iOS Safari (well-documented WebKit bug). - body had `overflow-x: clip` (v221) which is spec-correct but Safari <17 still occasionally promotes it to a scroll container. - `.site-header { position: relative !important }` from v218-buttons.css (line 37–41) was overriding sticky on Lucas's machine — this is the #1 confirmed bug. v218-buttons.css loads at priority 200 AFTER style.css. Fix: `position: fixed` ignores all of the above. It only depends on the viewport. Header is GUARANTEED to follow scroll on every page, every browser. Trade-off: must add body { padding-top: var(--header-height) } so content doesn't slide under the fixed header. Hero compensates with negative margin. */ .site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: transparent; border-bottom: 1px solid transparent; transform: none !important; visibility: visible !important; opacity: 1 !important; display: block !important; transition: background var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft); /* Theme tokens for nav contents — overridden by .is-scrolled. */ --nav-color: #FFFFFF; --logo-filter: brightness(0) invert(1); } .site-header.is-scrolled { background: var(--color-paper); border-bottom: 1px solid var(--color-line); box-shadow: 0 8px 30px -20px rgba(0,0,0,0.12); --nav-color: var(--color-ink); --logo-filter: none; } .nav { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; height: var(--header-height); padding-inline: clamp(1.25rem, 4vw, 2.5rem); transition: height var(--dur-med) var(--ease-soft); } /* nav-center spans full width so the logo lands in the visual center of the page, regardless of the BOKA BORD button on the right. */ .nav-center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); width: 100%; } .nav-left, .nav-right { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); } .nav-left { justify-content: flex-end; } .nav-right { justify-content: flex-start; } .nav-link { font-family: var(--font-serif); font-size: 0.92rem; letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase; color: var(--nav-color); position: relative; padding-block: 0.4rem; transition: color var(--dur-med) var(--ease-soft); } /* v252: fadeat guld-gradient-streck (matchar rubrik-separatorerna .gd/.sec-lbl), ersätter det solida strecket. Visas på hover OCH konstant på aktiv sida. */ .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(var(--b26-gold-rgb, 133, 117, 80), 0.9) 50%, transparent); transform: scaleX(0); transform-origin: center; transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft); } .nav-link:hover { opacity: 1; } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .nav-logo { display: flex; justify-content: center; } .logo { display: block; } .logo-img { height: 126px; width: auto; filter: var(--logo-filter, none); transition: filter var(--dur-med) var(--ease-soft), height var(--dur-med) var(--ease-soft); } /* Logo shrinks when header turns solid white so the slim nav feels lighter */ .site-header.is-scrolled .logo-img { height: 76px; } .nav-burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; } .nav-burger span { width: 22px; height: 1.5px; background: var(--nav-color); transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-med) var(--ease-soft); } /* Mobile slide-down panel — never visible on desktop. The @media block below re-enables it (display: flex) for screens ≤ 960px. */ .nav-panel-mobile { display: none; } /* 5. Hero ================================================================= */ /* Hero fills the full viewport and slides up behind the sticky header so the transparent nav floats over the video. */ .hero { position: relative; width: 100%; height: 100vh; min-height: 600px; /* v223: Tidigare margin-top: calc(-1 * var(--header-height)) drog hero uppåt 156px för att kompensera för body padding-top — men eftersom body.home redan har padding-top: 0 (v222), blev nettoeffekten att hero slutade 156px FÖRE viewport-bottom → svart space synlig under hero. Fix: margin-top: 0. Header är position:fixed och overlay:ar transparent ovanpå hero ändå (nav-color: white, ingen bg när inte scrolled), så hero täcker hela 100vh från y=0. */ margin-top: 0; background: #000; overflow: hidden; transition: margin-top var(--dur-med) var(--ease-soft); } .hero-video-wrap, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-video { object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.35) 100%); pointer-events: none; } .hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; animation: heroScrollBob 2.4s var(--ease-soft) infinite; } .hero-scroll svg { width: 22px; height: 22px; } @keyframes heroScrollBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* 6. Content sections ===================================================== */ .content-section { padding-block: clamp(3.5rem, 8vw, 7rem); } .content-section + .content-section { padding-top: clamp(1.5rem, 4vw, 3rem); } .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; } /* Reverse layout: media on the left, text on the right (explicit grid columns instead of `direction: rtl` — far more reliable across browsers). */ .content-grid--reverse > .content-media { grid-column: 1; grid-row: 1; } .content-grid--reverse > .content-text { grid-column: 2; grid-row: 1; } .content-text { max-width: 560px; } .content-text p { color: var(--color-ink-soft); font-size: var(--text-body); line-height: 1.65; } .content-text p + p { margin-top: var(--space-4); } .content-italic { color: var(--color-muted); font-size: 1.08rem; } .section-title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 500; letter-spacing: -0.012em; margin-bottom: var(--space-6); color: var(--color-ink); } .content-media { position: relative; border-radius: var(--media-radius); overflow: hidden; aspect-ratio: 4 / 3; background: #ECECEC; box-shadow: 0 20px 50px -30px rgba(0,0,0,0.18); } .content-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); } .content-section:hover .content-media img { transform: scale(1.02); } .media-placeholder { width: 100%; height: 100%; display: grid; place-items: center; position: relative; /* Sand-tinted glass body — warm tones that match the surrounding palette instead of cold grey. Top sheen baked in so the frame reads as glass holding warm sand inside it. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%), linear-gradient(135deg, #F2EBDB 0%, #E5D7B6 50%, #D5C49E 100%); color: #8B7B5C; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-serif); } /* 6.5 Liquid glass surfaces ============================================== */ /* Applied to the white panels (.page-content, .footer-paper-card) and image frames (.content-media). The "glass" feel comes from a layered shadow stack: - inset top hairline white = light catching the upper edge - inset full-edge faint white = glass thickness all around - inset bottom warm hairline = panel weight - inset deep bottom blur = soft warm shade pooling at the bottom - outer 1px highlight below = reflection on the sand - outer warm drop = warm-tinted shadow on sand - outer secondary drop = sharper near-shadow for crispness Combined with backdrop-filter blur on the white panels (so the sand grain subtly comes through at edge transparency), the surfaces read as frosted glass floating over warm sand. */ .page-content, .footer-paper-card, .content-media { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 -1.5px 0 rgba(120, 95, 55, 0.10), inset 0 -10px 28px -18px rgba(80, 65, 35, 0.22), 0 1px 0 rgba(255, 255, 255, 0.7), 0 32px 64px -32px rgba(80, 65, 35, 0.32), 0 14px 32px -14px rgba(0, 0, 0, 0.18); } /* White panels — slightly translucent with backdrop-filter so the sand grain "breathes through" the glass at low opacity. Top sheen baked into bg. */ .page-content { background: linear-gradient(180deg, rgba(255, 252, 245, 0.65) 0%, rgba(255, 252, 245, 0) 10%), linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 247, 238, 0.96) 100%); backdrop-filter: blur(24px) saturate(1.05); -webkit-backdrop-filter: blur(24px) saturate(1.05); } .footer-paper-card { background: linear-gradient(180deg, rgba(255, 252, 245, 0.6) 0%, rgba(255, 252, 245, 0) 12%), rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); } /* Content-media frame — keep solid bg (image fills it), but get the same inset glass edge treatment so frames look like glass holding the photo. */ .content-media { background: rgba(245, 238, 222, 0.4); } /* Top-edge specular highlight on glass surfaces — a thin diagonal sheen that sits ONLY on the top edge so it doesn't lighten section text below. Uses a pseudo-element with mix-blend-mode: screen for an additive light effect that fades to clear within the first ~150px of the panel. */ .page-content::before, .footer-paper-card::before, .content-media::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 30%, rgba(255, 255, 255, 0) 60% ); mix-blend-mode: screen; z-index: 2; } /* Sheen height per surface — fixed px on the big white panels, percentage on the smaller image frames. Keeps the highlight at the top edge only. */ .page-content::before { height: 120px; } .footer-paper-card::before { height: 100px; } .content-media::before { height: 38%; } /* 7. CTA buttons — TRUE liquid glass gold ================================= */ /* Designed as a 3D droplet of liquid gold, not a flat gradient. The illusion is built from 7 stacked layers: L1 Specular catchlight — small bright dot upper-left (in bg) L2 Top sheen — broad diffuse light from above (in bg) L3 Bottom counter-light — meniscus refraction at base (in bg) L4 Inner ambient warmth — backlit liquid glow (in bg) L5 Tinted glass body — translucent gold (in bg) L6 ::before — slow breathing inner shimmer (animated) L7 ::after — hover specular sweep (animated) Backdrop-filter blur picks up subtle warmth from whatever sits behind. Text stays above pseudos via mix-blend-mode: screen which only LIGHTENS underneath — white text remains white, gold gets a brightness boost. */ /* CTA buttons — refined antique brass pill. Design principle: RESTRAINT. Premium luxury comes from quiet confidence, not maximalist effects. Three background layers, five shadow layers, one masked top sheen. No animations — only a quiet hover lift + glow. The color is antique brass (warmer, more saturated than gold, less garish). */ .cta-button, .nav-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: var(--text-cta); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #FFFCEC; text-shadow: 0 1px 1px rgba(55, 35, 12, 0.45); padding: 1.0rem 2.0rem; border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; text-decoration: none; cursor: pointer; margin-top: var(--space-6); border: 0.5px solid rgba(255, 240, 200, 0.40); /* L1: subtle top sheen (baked into bg so text stays above it cleanly) L2: warm reflective pool at the base L3: antique brass body — calmer than bright gold, reads as real metal */ background: linear-gradient(180deg, rgba(255, 248, 220, 0.38) 0%, rgba(255, 245, 210, 0.14) 22%, transparent 50%), linear-gradient(0deg, rgba(115, 82, 38, 0.32) 0%, transparent 32%), linear-gradient(180deg, #C19F62 0%, #A6864A 50%, #87693A 100%); /* Backdrop blur is gentle — true glass behavior without distorting heavily. The bg is mostly opaque (gold reads as gold), blur is for the edge halo. */ backdrop-filter: blur(6px) saturate(1.10); -webkit-backdrop-filter: blur(6px) saturate(1.10); /* Five-layer shadow — restrained, deliberate: 1. inset top highlight = bright meniscus catching light 2. inset bottom shadow = dark base, suggests curvature 3. inset edge tint = thin glass-like rim 4. close contact shadow = grounds the button 5. soft ambient drop = lifts off the surface */ box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.85), inset 0 -1.5px 0 rgba(55, 35, 12, 0.40), inset 0 0 0 0.5px rgba(255, 240, 200, 0.18), 0 1px 2px rgba(55, 35, 12, 0.18), 0 14px 30px -10px rgba(105, 75, 36, 0.42); transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft); } /* Single elegant top arc sheen — masked to fade smoothly into the body. Quiet by default, brightens on hover. No animation — animations on a CTA read as "trying to grab attention", which undermines premium feel. */ .cta-button::before, .nav-cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 252, 232, 0.55) 0%, rgba(255, 248, 218, 0.20) 24%, transparent 50%); -webkit-mask: linear-gradient(180deg, black 0%, transparent 60%); mask: linear-gradient(180deg, black 0%, transparent 60%); pointer-events: none; z-index: 1; opacity: 0.85; mix-blend-mode: screen; transition: opacity var(--dur-med) var(--ease-soft); } .cta-button:hover, .nav-cta:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255, 250, 225, 0.46) 0%, rgba(255, 245, 210, 0.18) 22%, transparent 50%), linear-gradient(0deg, rgba(115, 82, 38, 0.32) 0%, transparent 32%), linear-gradient(180deg, #CEAB6B 0%, #B5904F 50%, #946F38 100%); box-shadow: inset 0 1px 0 rgba(255, 252, 230, 1.00), inset 0 -1.5px 0 rgba(55, 35, 12, 0.42), inset 0 0 0 0.5px rgba(255, 245, 210, 0.30), 0 2px 4px rgba(55, 35, 12, 0.20), 0 24px 46px -12px rgba(105, 75, 36, 0.52), 0 0 0 1px rgba(255, 240, 200, 0.10); } .cta-button:hover::before, .nav-cta:hover::before { opacity: 1; } .cta-button:active, .nav-cta:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(55, 35, 12, 0.42), inset 0 -1px 0 rgba(255, 250, 225, 0.32), 0 2px 6px rgba(55, 35, 12, 0.20); } .cta-button:focus-visible, .nav-cta:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 252, 230, 0.95), inset 0 -1.5px 0 rgba(55, 35, 12, 0.40), 0 14px 30px -10px rgba(105, 75, 36, 0.42), 0 0 0 3px rgba(220, 188, 118, 0.55); } .cta-button--lg { padding: 1.1rem 2.4rem; font-size: 0.86rem; letter-spacing: 0.28em; } .nav-cta { margin: 0; padding: 0.85rem 1.65rem; font-size: 0.72rem; letter-spacing: 0.22em; position: absolute; right: clamp(1.25rem, 4vw, 2.5rem); top: 50%; transform: translateY(-50%); } .nav-cta:hover { transform: translateY(calc(-50% - 2px)); } .nav-cta:active { transform: translateY(-50%); } /* 8. Footer =============================================================== */ /* The footer creates the sand frame on the bottom + sides of the footer paper-card. Top padding matches the side-margin of .page-content so the gap between the white content card and the footer paper-card equals the side sand-frame. Background is transparent so the body's layered sand + grain flows through the footer's sand frame consistently with the rest of the page. */ .site-footer { background: transparent; padding: clamp(1.25rem, 2.5vw, 2rem); color: var(--color-ink); position: relative; } .site-footer .container { max-width: none; padding-inline: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(2.5rem, 5vw, 4rem); } .footer-logo-img { height: 180px; width: auto; } .footer-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 500; margin-bottom: var(--space-6); text-align: center; letter-spacing: 0.005em; } .footer-hours, .footer-contact { width: 100%; max-width: 480px; } .hours-grid, .contact-grid { display: flex; flex-direction: column; gap: 0; } .hours-row, .contact-row { display: flex; justify-content: space-between; align-items: baseline; padding-block: 0.7rem; border-bottom: 1px solid var(--color-line); font-size: 1.22rem; letter-spacing: 0.005em; } .hours-row:last-child, .contact-row:last-child { border-bottom: 0; } .hours-row span:first-child, .contact-row span:first-child { color: var(--color-ink); font-weight: 400; } .hours-row span:last-child, .contact-row span:last-child { color: var(--color-ink-soft); text-align: right; } .footer-info { margin-top: var(--space-6); text-align: center; color: var(--color-ink-soft); } .footer-info .info-text { font-size: 1.15rem; margin: 0.3rem 0; } .footer-cta-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .footer-social { display: flex; gap: var(--space-6); align-items: center; } .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--color-ink); } .footer-social svg { width: 22px; height: 22px; } .footer-moveat { width: 100%; max-width: 480px; } .moveat-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; text-align: center; transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-med) var(--ease-soft); } .moveat-link:hover { transform: translateY(-2px); opacity: 1; } .moveat-logo { width: 180px; height: auto; } .moveat-copy { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: var(--color-ink-soft); max-width: 360px; line-height: 1.5; } .footer-bottom { width: 100%; border-top: 1px solid var(--color-line); padding-top: var(--space-6); margin-top: var(--space-4); display: flex; justify-content: center; font-size: var(--text-small); } .cookie-link { color: var(--color-muted); letter-spacing: 0.02em; } /* 9. Reveal animations ==================================================== */ /* Section-level fade-up — used as wrapper. Children stagger independently so the text reads in word-by-word feel while the media settles in beside it. */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-soft), transform 1.2s var(--ease-soft); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger inside each revealed section: text rises in by paragraph, media drifts up + scales in slightly. Delays are ladder-stepped. */ .reveal .section-title, .reveal .content-text > * { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease-soft), transform 1.0s var(--ease-soft); } .reveal.is-visible .section-title { opacity: 1; transform: translateY(0); transition-delay: 0.10s; } .reveal.is-visible .content-text > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.20s; } .reveal.is-visible .content-text > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.30s; } .reveal.is-visible .content-text > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; } .reveal.is-visible .content-text > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.50s; } .reveal.is-visible .content-text > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.60s; } .reveal.is-visible .content-text > *:nth-child(n+6) { opacity: 1; transform: translateY(0); transition-delay: 0.70s; } .reveal .content-media { opacity: 0; transform: translateY(48px) scale(0.96); transition: opacity 1.2s var(--ease-soft), transform 1.4s var(--ease-soft); transition-delay: 0.15s; } .reveal.is-visible .content-media { opacity: 1; transform: translateY(0) scale(1); } /* Section-title — gold hairline that draws in below the title on reveal */ .section-title { position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; left: 0; bottom: -0.55rem; height: 1.5px; width: 0; background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 60%, transparent 100%); transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s; } .reveal.is-visible .section-title::after { width: 64px; } /* Media zoom on hover — bigger lift than before */ .content-media img, .content-media .media-placeholder { transition: transform 1.4s var(--ease-soft), filter var(--dur-med) var(--ease-soft); } .content-section:hover .content-media img, .content-section:hover .content-media .media-placeholder { transform: scale(1.05); } /* Hero overlay slow zoom on load — adds living feel */ .hero-video { animation: heroZoom 18s var(--ease-soft) forwards; } @keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.07); } } /* Hero overlay deepens at the top so the transparent nav stays legible over any video frame, and at the bottom so the scroll-arrow has contrast. */ .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.48) 100%); } /* Header — gentle settle on scroll-state change */ .site-header { transition: background var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), backdrop-filter var(--dur-med) var(--ease-soft); } .site-header.is-scrolled { backdrop-filter: saturate(1.1) blur(8px); -webkit-backdrop-filter: saturate(1.1) blur(8px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal, .reveal .section-title, .reveal .content-text > *, .reveal .content-media { opacity: 1; transform: none; } .reveal.is-visible .section-title::after { width: 64px; } .hero-video { animation: none; } } /* 10. Responsive ========================================================== */ @media (max-width: 960px) { :root { --header-height: 108px; } body.is-scrolled { --header-height: 68px; } .nav { grid-template-columns: 1fr; gap: 0; padding-inline: 1.25rem; } .nav-center { grid-template-columns: auto 1fr auto; gap: 0; } .nav-left, .nav-right { display: none; } .nav-logo { justify-content: center; } .logo-img { height: 84px; } .site-header.is-scrolled .logo-img { height: 56px; } /* Hide gold CTA on mobile — burger menu covers all navigation. */ .nav-cta { display: none; } .nav-burger { display: flex; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } .hero { height: 70vh; min-height: 460px; } .content-grid { grid-template-columns: 1fr; gap: var(--space-8); } /* On mobile both layouts collapse to a single column — text always on top. */ .content-grid--reverse > .content-text { grid-column: 1; grid-row: 1; } .content-grid--reverse > .content-media { grid-column: 1; grid-row: 2; } .content-text { max-width: 100%; } .content-section { padding-block: clamp(2rem, 5vw, 3rem); } .paper-card { border-radius: 18px; } .footer-logo-img { height: 126px; } /* Mobile menu (panel) */ body.menu-open { overflow: hidden; } .nav-panel-mobile { position: fixed; inset: var(--header-height) 0 0 0; background: var(--color-paper); z-index: 90; transform: translateY(-110%); transition: transform var(--dur-med) var(--ease-soft); display: flex; flex-direction: column; padding: 2rem 1.5rem; gap: 1.5rem; } .nav-panel-mobile.is-open { transform: translateY(0); } .nav-panel-mobile a { font-family: var(--font-serif); font-size: 1.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); } } @media (max-width: 540px) { .container { padding-inline: 1rem; } .footer-cta-row { gap: var(--space-4); } .moveat-logo { width: 140px; } } /* ============================================================================ v216 — Disable global dot-grid bg pattern (Lucas 2026-04-26) The body::after layer (defined ~line 177-221) overlays a fullscreen SVG dot-grid + gold-leaf flakes + vignette via mix-blend-mode: overlay. Lucas wants the dot-pattern gone. Minimal-invasive override: hide the entire pseudo-element. Architecture preserved for later re-enable. ============================================================================ */ body::after { display: none !important; } /* ============================================================================ v218 patches — bg fix + picture-overlay fix + dot-grid disable ----------------------------------------------------------------------------- Lucas explicit feedback efter v217: 1. BG: "guldig glöd" — body has 7-layer warm-cream→tobacco gradient som han vill bort. Han vill ren beige (#F5F0E6 → #EBE3D7). 2. Picture-overlay-bug: