:root { --cream: #FBF7F0; --paper: #FDFDFE; --ink: #1E2827; --ink-soft: #384442; --ink-faint: #525E5C; --ink-faintest: #6C7775; --coral: #A8483B; --coral-hover: #8B3428; --coral-light: #F3C4B8; --teal: #7FBFB7; --teal-dark: #1E5C54; --teal-hover: #8FCCC4; --stripe-coral: #E88A80; --stripe-teal: #7FBFB7; --line: #E2D8CA; } * { box-sizing: border-box; } html.is-loading, body.is-loading { overflow: hidden !important; height: 100vh !important; touch-action: none; } html, body { margin: 0; padding: 0; background: var(--cream); scroll-snap-type: y proximity; /* The header, progress bar, hero video, and story cards are all position:fixed (anchored to the viewport, not the document). Without this, macOS's elastic rubber-band overscroll reveals a strip beyond the actual page bounds at the top/bottom — and since those fixed elements are still painted there too, they visibly bleed through. */ overscroll-behavior-y: none; /* Same idea, sideways: nothing on this page is meant to scroll horizontally, but iOS Safari's elastic overscroll still responds to a sideways drag/swipe if it isn't explicitly blocked, sliding the whole page over and revealing the fixed hero video through the gap. Deliberately NOT overflow-x:hidden here — setting either overflow axis to non-`visible` forces the other axis to compute as `auto` (per spec), which turns into its own scroll container and breaks every position:sticky element on the page (the scoop video pin included). */ overscroll-behavior-x: none; } body { font-family: 'Karla', sans-serif; color: var(--ink); } a { color: var(--coral); text-decoration: none; } a:hover { color: var(--coral-hover); } html { scroll-behavior: smooth; } @keyframes bobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes omspin { to { transform: rotate(360deg); } } @keyframes ompop { 0% { transform: scale(0); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } } /* Background video + loader */ /* Hide WebKit / Safari user agent playback overlay & controls on all background videos */ video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-play-button, video::-webkit-media-controls-enclosure, video::-webkit-media-controls-panel, video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-volume-control-container, video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } video::-webkit-media-controls-overlay-enclosure { display: none !important; } .bg-video { position: fixed; inset: 0; z-index: 0; background: #101816; } .bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .darken { position: absolute; inset: 0; background: rgba(10, 18, 16, 0.12); pointer-events: none; } .hero-loader { position: fixed; inset: 0; z-index: 9999; /* above everything while initial video buffers */ background-color: var(--cream, #FBF7F0); background-image: url('../assets/hero-poster.webp'), url('../assets/hero-poster.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; opacity: 1; pointer-events: auto; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease; visibility: visible; } .hero-loader::before { content: ""; position: absolute; inset: 0; background: rgba(251, 247, 240, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body:not(.is-loading) .hero-loader { opacity: 0; pointer-events: none; visibility: hidden; } .hero-spinner { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 4px solid rgba(201, 111, 99, 0.18); border-top-color: var(--coral, #C96F63); animation: omspin 0.85s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; } /* Header */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; pointer-events: none; } .brand-logo { pointer-events: auto; width: 120px; height: 120px; display: block; filter: drop-shadow(0 6px 18px rgba(16, 24, 22, 0.35)); } .site-nav { pointer-events: auto; display: flex; gap: 26px; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; } .site-nav a { color: var(--cream); transition: color 0.3s; } .header-right { pointer-events: auto; display: flex; align-items: center; gap: 22px; } /* Language toggle: clean, GPU-safe flag switcher without filter dirty-rect artifacts */ .lang-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 15px; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; border-radius: 3px; box-shadow: 0 2px 6px rgba(16, 24, 22, 0.45); overflow: hidden; isolation: isolate; -webkit-appearance: none; appearance: none; vertical-align: middle; } .lang-toggle:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; } .lang-toggle svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border-radius: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .lang-toggle[data-lang="sv"] .flag-sv, .lang-toggle[data-lang="en"] .flag-en { opacity: 1; pointer-events: auto; } .lang-toggle[data-lang="sv"]:hover .flag-sv, .lang-toggle[data-lang="en"]:hover .flag-en { opacity: 0; } .lang-toggle[data-lang="sv"]:hover .flag-en, .lang-toggle[data-lang="en"]:hover .flag-sv { opacity: 1; } /* Progress bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 21; background: repeating-linear-gradient(90deg, var(--stripe-coral) 0 14px, var(--cream) 14px 28px, var(--stripe-teal) 28px 42px, var(--cream) 42px 56px); } /* Scroller / hero */ .scroller { position: relative; z-index: 1; height: 400vh; } .hero-snap-step { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; } .hero { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 24px; } .hero h1 { font-family: 'Yeseva One', serif; font-size: clamp(44px, 7vw, 92px); color: var(--cream); margin: 0; text-shadow: 0 2px 24px rgba(16, 24, 22, 0.45); line-height: 1.05; } .hero p { font-size: clamp(16px, 1.6vw, 21px); color: rgba(251, 247, 240, 0.95); max-width: 560px; margin: 18px 0 0; text-shadow: 0 1px 12px rgba(16, 24, 22, 0.55); font-weight: 500; } .scroll-hint { position: absolute; bottom: 72px; left: 50%; margin-left: -110px; width: 220px; text-align: center; animation: bobble 2.2s ease-in-out infinite; } .scroll-hint-label { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); background: rgba(251, 247, 240, 0.92); padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(16, 24, 22, 0.35); } .scroll-hint-arrow { color: rgba(251, 247, 240, 0.9); font-size: 20px; margin-top: 8px; text-shadow: 0 1px 8px rgba(16, 24, 22, 0.6); } /* Story cards (positions match the chaptered video's on-screen subjects) */ .story-card { position: fixed; z-index: 5; opacity: 0; max-width: 320px; background: rgba(251, 247, 240, 0.93); backdrop-filter: blur(6px); padding: 20px 24px 22px; box-shadow: 0 12px 40px rgba(16, 24, 22, 0.25); border-top: 5px solid; border-image: repeating-linear-gradient(90deg, var(--stripe-coral) 0 12px, var(--cream) 12px 24px, var(--stripe-teal) 24px 36px) 1; border-radius: 0 0 14px 14px; pointer-events: none; } .story-card--wide { max-width: 340px; } .story-card-eyebrow { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--coral); font-weight: 700; margin-bottom: 8px; } .story-card-title { font-family: 'Yeseva One', serif; font-size: 22px; margin-bottom: 8px; } .story-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .story-card-rating { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--ink); } .story-card--harbor { left: 25vw; top: 61.75vh; max-width: 349px; } .story-card--wagon { left: 67.9vw; top: 54.5vh; } .story-card--cone { left: 13.5vw; top: 41.4vh; } .story-card--bulle { left: 39vw; top: 28.5vh; } .story-card--counter{ left: 65.7vw; top: 55.6vh; } /* Main content */ .content { position: relative; z-index: 10; background: var(--cream); box-shadow: 0 -20px 60px rgba(16, 24, 22, 0.35); } .stripe { height: 6px; background: repeating-linear-gradient(90deg, var(--stripe-coral) 0 18px, var(--cream) 18px 36px, var(--stripe-teal) 36px 54px, var(--cream) 54px 72px); } .eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--coral); font-weight: 700; } /* Scoop section (pinned, scroll-scrubbed video) */ .scoop-section { position: relative; background: var(--paper); } .scoop-wrap { position: relative; height: 400vh; } .scoop-snap-step { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; } .scoop-pin { position: sticky; top: 0; height: 100vh; margin-top: -400vh; display: flex; align-items: flex-start; justify-content: center; gap: clamp(24px, 5vw, 80px); padding: 6px 32px 16px; overflow: hidden; z-index: 2; } .scoop-text { /* DOM order is now video-frame, then text (needed for a plain, non-reversed sticky layout on mobile — see the mobile media query). On desktop the text still needs to render first/left, so pull it back with `order`. */ order: -1; display: flex; flex-direction: column; gap: clamp(8px, 1.8vh, 18px); max-width: 380px; flex: 0 1 380px; margin-top: clamp(56px, 18vh, 180px); } .scoop-text h2 { font-family: 'Yeseva One', serif; font-size: clamp(24px, 4.8vh, 44px); margin: 0; line-height: 1.12; } .scoop-caption { opacity: 0; transform: translateY(14px); border-left: 4px solid; padding: clamp(4px, 1.2vh, 10px) 0 clamp(4px, 1.2vh, 10px) 18px; } .scoop-caption-name { font-family: 'Yeseva One', serif; font-size: clamp(17px, 2.6vh, 21px); margin-bottom: 4px; } .scoop-caption-note { font-size: clamp(13px, 1.9vh, 15px); color: var(--ink-faint); line-height: 1.45; } .scoop-video-frame { flex: 0 0 auto; min-width: 0; position: relative; } /* Mobile-only duplicate of the h2 below, overlaid on the video itself (see the mobile media query) — desktop keeps the heading in .scoop-text next to the video instead, where this copy stays hidden. */ .scoop-heading-overlay { display: none; } .scoop-glow { position: absolute; inset: -16% -28%; background: radial-gradient(50% 50% at 50% 50%, #F7F6FC 35%, rgba(247, 246, 252, 0.6) 65%, rgba(253, 253, 254, 0) 100%); pointer-events: none; } .scoop-video { position: relative; height: min(88vh, 720px); width: auto; max-width: 100%; object-fit: contain; display: block; -webkit-mask-image: radial-gradient(80% 90% at 50% 48%, #000 45%, transparent 78%); mask-image: radial-gradient(80% 90% at 50% 48%, #000 45%, transparent 78%); } .scoop-fade { position: absolute; top: -5%; bottom: -5%; right: -12%; width: 30%; background: linear-gradient(90deg, rgba(253, 253, 254, 0) 0%, rgba(253, 253, 254, 0.6) 65%, var(--paper) 92%); pointer-events: none; } /* "Rest" flavor block (pinned reveal after the scoop scene) */ .rest-wrap { /* Not pinned/sticky: this block now holds 8 flavors plus a heading and two notes, comfortably taller than one viewport. Pinning it (as before, when it only held 3 flavors) would clip whatever didn't fit on screen — sticky content doesn't scroll internally. Let it flow normally instead; the JS fade-in reveal doesn't depend on the pin, only on scroll position. */ position: relative; z-index: 3; } .rest-pin { display: flex; align-items: center; justify-content: center; padding: 60px 0 100px; } .rest { max-width: 1160px; margin: 0 auto; position: relative; padding: 40px 32px; display: flex; align-items: center; gap: clamp(48px, 6vw, 92px); flex-wrap: wrap; opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none; } .rest-photos { position: relative; flex: 0 0 auto; width: min(270px, 30vw); height: min(270px, 30vw); margin: 60px 0 40px 10px; } .rest-photo-main { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 16px 44px rgba(46, 58, 56, 0.18); border: 6px solid var(--cream); position: relative; z-index: 1; } .rest-photo-getter { position: absolute; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 32px rgba(46, 58, 56, 0.2); border: 5px solid var(--cream); left: -90px; top: 120px; z-index: 3; } .rest-photo-vanilj { position: absolute; width: 210px; height: 208px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 22px rgba(46, 58, 56, 0.16); border: 4px solid var(--cream); left: 24px; top: -128px; z-index: 2; } .rest-text { flex: 1 1 480px; display: flex; flex-direction: column; gap: 24px; } .rest-heading { font-family: 'Yeseva One', serif; font-size: clamp(22px, 3vw, 32px); margin: 0; line-height: 1.15; } .rest-text > p { max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .rest-flavors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; margin-top: 6px; } .rest-flavor { border-left: 4px solid; padding: 10px 0 10px 18px; } .rest-flavor--highlight { background: rgba(127, 191, 183, 0.14); border-radius: 0 10px 10px 0; padding: 10px 16px 12px 18px; } .rest-flavor-name { font-family: 'Yeseva One', serif; font-size: 21px; margin-bottom: 4px; } .rest-flavor-note { font-size: 15px; color: var(--ink-faint); line-height: 1.5; } /* "Visa fler" expand button — mobile-only (see media query below); desktop always shows the full grid, so this never needs to appear there. */ .rest-flavors-toggle { display: none; } .section-note { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faintest); margin: 0; } /* Events Section */ .events-section { position: relative; background: var(--cream); padding: 80px 32px 100px; border-top: 1px solid var(--line); z-index: 4; } .events-content { max-width: 1040px; margin: 0 auto; } .events-header { margin-bottom: 44px; } .events-header h2 { font-family: 'Yeseva One', serif; font-size: clamp(28px, 3.8vw, 42px); margin: 12px 0 14px; line-height: 1.15; } .events-lead { max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .event-card { background: var(--paper); border-radius: 0 0 16px 16px; padding: 28px 24px 26px; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(46, 58, 56, 0.07); border-top: 5px solid; border-image: repeating-linear-gradient(90deg, var(--stripe-coral) 0 12px, var(--cream) 12px 24px, var(--stripe-teal) 24px 36px) 1; transition: transform 0.25s ease, box-shadow 0.25s ease; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(46, 58, 56, 0.12); } .event-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .event-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(201, 111, 99, 0.12); color: var(--coral); } .event-card--teal .event-badge { background: rgba(127, 191, 183, 0.2); color: #245751; } .event-card--cream .event-badge { background: rgba(229, 201, 122, 0.25); color: #5c4710; } .event-date { font-size: 12px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; } .event-title { font-family: 'Yeseva One', serif; font-size: 21px; margin: 0 0 14px; line-height: 1.25; color: var(--ink); } .event-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 14px; color: var(--ink-soft); } .event-time, .event-location { display: flex; align-items: center; gap: 8px; } .event-meta svg { flex-shrink: 0; color: var(--coral); } .event-description { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; flex: 1 1 auto; } .event-link { font-size: 14px; font-weight: 700; color: var(--coral); display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s, transform 0.2s; align-self: flex-start; } .event-link:hover { color: var(--coral-hover); transform: translateX(3px); } /* Hitta section */ .hitta-section { position: relative; overflow: hidden; min-height: 100vh; background: var(--cream); } .reviews-eyebrow { display: none; } .hitta-media { position: absolute; top: 0; right: 0; height: 100%; width: 62%; object-fit: cover; object-position: 70% center; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 25%, #000 55%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 25%, #000 55%); pointer-events: none; } #wagon-poster { transition: opacity 0.5s ease; z-index: 1; } #wagon-video { z-index: 2; } .hitta-content { max-width: 1040px; margin: 0 auto; padding: 64px 32px 96px; position: relative; } .hitta-text { max-width: 440px; min-width: 0; position: relative; top: 160px; margin-bottom: 160px; } .hitta-text h2 { font-family: 'Yeseva One', serif; font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 16px; } .hitta-text > p { max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 32px; } .link-stack { display: grid; grid-template-columns: 1fr; gap: 14px; } .link-card { min-height: 52px; padding: 18px 22px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; border-top: 5px solid; border-image: repeating-linear-gradient(90deg, var(--stripe-coral) 0 12px, var(--cream) 12px 24px, var(--stripe-teal) 24px 36px) 1; border-radius: 0 0 14px 14px; } .link-card-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; } .link-card-logo-img { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; background: transparent; padding: 0; } .link-card-logo-icon { width: 33px; height: 33px; flex-shrink: 0; opacity: 0.9; transition: transform 0.2s ease, opacity 0.2s ease; } .link-card:hover .link-card-logo-icon { opacity: 1; transform: scale(1.08); } .link-card-title { font-family: 'Yeseva One', serif; font-size: 20px; } .link-card-cta { font-size: 14px; opacity: 0.95; } .stars { color: #D69000; } .link-card--coral { background: #B84335; color: #FFFFFF; } .link-card--coral .link-card-title, .link-card--coral .link-card-cta, .link-card--coral .rating-val, .link-card--coral .rating-count { color: #FFFFFF; } .link-card--coral .stars { color: #FFE082; } .link-card--coral:hover { background: #A43528; color: #FFFFFF; } .link-card--dark { background: var(--ink); color: #FDFDFE; } .link-card--dark .link-card-title { color: #FDFDFE; } .link-card--dark .link-card-cta { color: #E2D8CA; } .link-card--dark:hover { background: #2D3937; color: #FDFDFE; } .link-row { display: flex; gap: 14px; } .link-card--small { flex: 1; min-width: 0; min-height: 48px; padding: 14px 18px; gap: 3px; } .link-card--small .link-card-title { font-size: 17px; } .link-card--small .link-card-cta { font-size: 12px; opacity: 0.95; } .link-card--teal { background: #5EA59B; color: #081B18; } .link-card--teal .link-card-title { color: #061412; } .link-card--teal .link-card-cta { color: #0E2924; } .link-card--teal:hover { background: #50978D; color: #081B18; } .link-card--cream { background: #E8D8AF; color: #241A06; } .link-card--cream .link-card-title { color: #1A1303; } .link-card--cream .link-card-cta { color: #2E2108; } .link-card--cream:hover { background: #DDCA9D; color: #241A06; } .circle-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; border-radius: 50%; } .review-bubble { position: absolute; width: min(280px, 26vw); background: var(--cream); border-radius: 18px 18px 18px 4px; filter: drop-shadow(0 8px 24px rgba(46, 58, 56, 0.18)); padding: 18px 22px; text-align: left; color: var(--ink); z-index: 2; transition: opacity 0.6s ease; opacity: 0; } .review-bubble-head { font-size: 15px; font-weight: 700; letter-spacing: 0.4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .review-bubble-date { font-size: 12px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .review-bubble-text { margin-top: 10px; font-size: 14px; line-height: 1.55; font-style: italic; color: var(--ink-soft); min-height: 66px; } .review-bubble-tail { position: absolute; width: 0; height: 0; } /* Media Disclosure (unboxed text & double star mark in bottom-right corner) */ .media-disclosure { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.88); pointer-events: none; z-index: 3; } .media-disclosure-mark { width: 15px; height: 15px; flex-shrink: 0; color: #F8D1C8; } .media-disclosure--hero { position: fixed; right: 16px; bottom: 14px; } .media-disclosure--hitta { position: absolute; right: 16px; bottom: 14px; color: rgba(255, 255, 255, 0.88); } .media-disclosure--hitta .media-disclosure-mark { color: #F8D1C8; } /* Footer */ .site-footer { border-top: 1px solid var(--line); padding: 24px 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-soft); background: var(--cream); } .footer-left { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .footer-sep { margin: 0 6px; color: var(--ink-faintest); } .footer-link { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color 0.2s ease, text-decoration-color 0.2s ease; } .footer-link:hover { color: var(--coral); text-decoration-color: var(--coral); } .footer-right { display: flex; align-items: center; } .footer-credit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: color 0.2s ease; } .footer-credit:hover { color: var(--coral); } .generell-slash-logo { display: inline-block; vertical-align: middle; color: currentColor; transition: transform 0.2s ease, color 0.2s ease; } .footer-credit:hover .generell-slash-logo { transform: scale(1.1); color: var(--coral); } /* Small screens */ @media (max-width: 860px) { .site-header { padding: 16px 20px; } .brand-logo { width: 84px; height: 84px; } .site-nav { gap: 16px; font-size: 12px; } .header-right { gap: 12px; } .lang-toggle { width: 18px; height: 12px; } /* Story cards never overlap in time, so on small screens they can all share one safe zone instead of the desktop's scattered, video-locked positions (which assume a wide viewport). */ .story-card, .story-card--harbor, .story-card--wagon, .story-card--cone, .story-card--bulle, .story-card--counter { left: 5vw; right: 5vw; top: auto; bottom: 8vh; max-width: none; } /* Scoop section: on desktop the caption text and the video are pinned together side by side within one sticky container — fine there, since nothing is stacked on top of anything else. On mobile there's no room for side-by-side, so the two need to be decoupled instead: - #scoop-wrap stays a tall scroll-scrub *runway* (like desktop's 320vh) so the sticky video has enough scroll distance to play its 3-scoop sequence slowly instead of flashing by in ~1 viewport of scroll. - .scoop-text is physically moved (see main.js, relocateScoopText) to sit right after #scoop-wrap in the DOM, so it's normal, plain in-flow content — not sharing a sticky containing block with the video at all. That separation matters: with a sticky video *and* trailing content in the very same container, CSS forces the video's bottom edge to stay exactly aligned with that trailing content's own bottom edge for the video's *entire* slide-away — i.e. the trailing content stays 100% covered the whole time, only "revealed" the instant it has itself already scrolled out of view too. No amount of extra height fixes that (the same alignment holds regardless) — the content has to live outside the sticky container for a real, gradual reveal. */ .scoop-wrap { height: 260vh; } .scoop-pin { position: sticky; top: 0; /* 100vh on iOS Safari is measured against the viewport with browser chrome collapsed, taller than what's actually visible on load — 100dvh tracks the real visible area. Keep the vh line first as a fallback for browsers that don't support dvh yet. */ height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 0; gap: 0; overflow: hidden; } .scoop-video-frame { width: 100%; height: 100%; display: flex; /* Bottom-aligned, not centered: the video (min(88vh,720px)) is shorter than this full-height frame, so centering it splits the leftover space evenly above and below. Bottom-aligning puts all of it above the video instead, behind the header where it's least noticeable. */ align-items: flex-end; justify-content: center; overflow: hidden; /* Opaque backdrop behind the masked/faded video edges. */ background: var(--paper); position: relative; } /* The source footage frames the cup with a lot of white space around it (room for the falling scoops to drop in from off-frame) — harmless on desktop where it sits beside the text, but on mobile that same white space reads as a big blank gap between the video and .scoop-text right after it. object-fit:cover (filling the whole frame height instead of object-fit:contain's height:min(88vh,720px) box) crops that margin away automatically, without affecting the scroll-scrubbed playback itself (still driven by currentTime in JS, unrelated to sizing). */ .scoop-video { height: 100%; width: 100%; max-width: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; } /* Both were sized/positioned for the smaller floating video box on desktop, fading its edges into the page background around it. On mobile the video is full-bleed edge to edge, so there's no surrounding background for either to blend into — .scoop-fade in particular would just wash out the right side of the video with an unwanted white stripe. */ .scoop-glow, .scoop-fade { display: none; } /* Overlaid on the video itself, above where the cup sits — the plain .scoop-text h2 (still present for desktop) is hidden below instead. */ .scoop-heading-overlay { display: block; position: absolute; top: 16vh; left: 0; right: 0; z-index: 2; margin: 0; padding: 0 24px; text-align: center; font-family: 'Yeseva One', serif; font-size: clamp(28px, 8vw, 38px); line-height: 1.12; color: var(--ink); text-shadow: 0 2px 16px rgba(253, 253, 254, 0.9), 0 1px 4px rgba(253, 253, 254, 0.9); pointer-events: none; } /* Relocated out of #scoop-wrap by main.js on mobile (see relocateScoopText) — this is now a plain block sibling right after it, so it appears immediately with no engineered gap. */ .scoop-text { margin-top: 0; padding: 32px 24px 8px; text-align: center; align-items: center; } /* The heading now lives over the video instead (.scoop-heading-overlay). */ .scoop-text h2 { display: none; } .scoop-caption { text-align: left; } /* Hitta section: a small, clearly-visible photo instead of a faint full-bleed background, and the review card gets its own heading above (see .reviews-eyebrow) instead of floating over the video with nowhere good to go on a narrow screen. */ .hitta-media { position: static; display: block; width: 100%; height: 46vh; max-height: 340px; opacity: 1; object-position: center 30%; -webkit-mask-image: none; mask-image: none; } video.hitta-media { display: none; /* the poster image is enough at this size; skip loading/decoding cost */ } .hitta-content { padding: 32px 24px 64px; } .hitta-text { top: 0; margin-bottom: 32px; max-width: none; } .reviews-eyebrow { display: block; padding: 28px 24px 0; } .review-bubble { position: static; width: auto; max-width: none; margin: 14px 24px 0; filter: none; box-shadow: 0 8px 24px rgba(46, 58, 56, 0.12); } .review-bubble-tail { display: none; } /* Bigger cluster than a narrow viewport can fully contain — that's fine, it's allowed to bleed off the left/right edges a little; only the bottom overflow (into the text that follows) needs watching, hence the generous margin-bottom below. */ .rest-photos { width: 260px; height: 260px; margin: 80px auto 110px; overflow: visible; } .rest-photo-getter { width: 190px; height: 190px; left: -70px; top: 90px; } .rest-photo-vanilj { width: 195px; height: 193px; left: 80px; top: -100px; } .rest-flavors { grid-template-columns: 1fr; } /* Collapsed by default: only the first 3 flavor cards show, with a "Visa fler" button to reveal the rest (JS adds/removes .is-collapsed and toggles the button — see main.js). */ .rest-flavors.is-collapsed .rest-flavor:nth-child(n+4) { display: none; } .rest-flavors-toggle { display: block; width: 100%; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: none; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; color: var(--coral); cursor: pointer; } .events-section { padding: 56px 24px 72px; } .events-grid { grid-template-columns: 1fr; gap: 20px; } .site-footer { padding: 20px 24px; font-size: 13px; flex-direction: column; text-align: center; gap: 12px; } .media-disclosure { font-size: 11.5px; gap: 5px; } .media-disclosure-mark { width: 13px; height: 13px; } .media-disclosure--hero { right: 16px; bottom: 14px; } .media-disclosure--hitta { position: absolute; right: 16px; bottom: 14px; margin: 0; color: rgba(255, 255, 255, 0.88); } .media-disclosure--hitta .media-disclosure-mark { color: #F8D1C8; } .link-card { padding: 16px 18px; } .link-card-logo-img { width: 46px; height: 46px; } .link-card--small .link-card-logo-icon { width: 28px; height: 28px; } } @media (max-width: 480px) { .link-row { flex-direction: column; } } @media (max-width: 1180px) and (min-width: 861px) { .rest-flavors { grid-template-columns: repeat(2, 1fr); } .events-grid { grid-template-columns: repeat(2, 1fr); } } /* Reduced Motion & Slow Connection Static Mode */ @media (prefers-reduced-motion: reduce) { html, body { scroll-snap-type: none !important; } .hero-snap-step, .scoop-snap-step { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } .hero-spinner { animation: none !important; } } html.static-motion-mode, html.static-motion-mode body { scroll-snap-type: none !important; } html.static-motion-mode .hero-snap-step, html.static-motion-mode .scoop-snap-step { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }