/* ============================================================ facelift.css NRG-inspirerad facelift — hero-sektionen (+ navbar-loggan). Allt hero-relaterat är scopat till header.section så inga andra sektioner påverkas. Navbar-loggan (punkt 1) är det enda utanför hero och rör bara .nav_logo. Vi behåller typsnitt (Work Sans), färg (navy/vatten), innehåll och i18n orört — känslan kommer från skala, spacing, vikt och asymmetrisk layout. Rubrikens tvådelade hierarki byggs av js/hero-heading.js som lyssnar på det publika eventet 'i18n:changed' (ingen ordlista eller lang-switcher rörd). Reveal-on-scroll-mekanismen längst ned är medvetet generisk för återanvändning i kommande sektioner. ============================================================ */ /* ------------------------------------------------------------ 1. Navbar-logga: sköld/droppe-emblemet i stället för den blå platshållar-ikonen. Diskret storlek (~36px) bredvid ordmärket "Vattentrygg". Emblemet (images/vattentrygg-emblem.png) är en beskuren, nedskalad version av hero-loggan (utan ordmärke/prickar). ------------------------------------------------------------ */ /* Scopat till .nav_logo så footerns .logo (som återanvänder samma .nav_logo-icon-klass) lämnas helt orörd. */ .nav_logo .nav_logo-icon { height: 2.25rem; /* ~36px; .nav_logo är 2.5rem (40px) hög */ width: auto; align-self: center; } .nav_logo .nav_logo-emblem { height: 100%; width: auto; display: block; } /* ------------------------------------------------------------ 2. Hero-layout: asymmetrisk och rymlig (NRG-känsla). Stor rubrik uppe till vänster, luftigt mittparti, stödtext + CTA nere till höger. Flex-kolumn med space-between gör luften. ------------------------------------------------------------ */ header.section .hero-layout { display: flex; flex-direction: column; justify-content: space-between; min-height: min(72vh, 720px); } /* Rubrikblocket: övre vänstra hörnet (flex-item sträcks, H1 vänsterställd). */ header.section .hero-heading { align-self: flex-start; } /* Stödtext + knappar: nedre HÖGRA hörnet, läsbar radlängd. */ header.section .hero-support { align-self: flex-end; max-width: 30rem; text-align: left; } /* ------------------------------------------------------------ 3. Hero-typografi ------------------------------------------------------------ */ /* H1: fluid skala via clamp(). Golv 34px (mobil), tak ~120px (desktop, NRG-skala), mjuk skalning däremellan. Tight line-height (1.05) så de stora raderna sitter tätt vertikalt som NRG. Behåller navy (ärvs), sentence case och vikt 500. max-width håller rubriken kompakt uppe till vänster och tvingar fram radbrytning (~halv skärmbredd per rad). */ header.section .heading_h1 { font-size: clamp(2.125rem, -0.5625rem + 8.96vw, 7.5rem); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; max-width: 16ch; /* Långa svenska sammansatta ord (t.ex. "översvämningsskador") får inte spilla ut ur kolumnen vid den större storleken. finns, så auto-avstavning blir korrekt; overflow-wrap är en säkerhetsfallback. */ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* Tvådelad rubrikhierarki (span:ar sätts av js/hero-heading.js): rad 1 stor, rad 2 ~66% (något mindre) på egen rad. Färg/vikt ärvs. */ header.section .heading_h1 .hero-title-main, header.section .heading_h1 .hero-title-sub { display: block; } header.section .heading_h1 .hero-title-sub { font-size: 0.66em; margin-top: 0.1em; } /* Brödtext (stödtext nere till höger): NRG-stödtextstorlek ~20-24px. Behåll luftig läsbarhet — vi kopierar INTE NRG:s täta 1.3, vi håller ~1.55. max-width: none låter texten fylla det bredare .hero-support-blocket (30rem ~480px) i stället för basklassens smalare container-sm-bredd, så raderna blir längre och staplas inte på för många korta rader. */ header.section .subheading { line-height: 1.55; font-size: clamp(1.125rem, 0.96rem + 0.55vw, 1.375rem); max-width: none; } /* ------------------------------------------------------------ 4. Hero-knappar (båda i .button-group) Vikt 600, bredare horisontell padding (24 -> 32px), stramare men mjukare radie (~24px, inte full pill). Färg orörd. ------------------------------------------------------------ */ header.section .button-group .button { padding: 16px 32px; border-radius: 24px; font-weight: 600; } /* ------------------------------------------------------------ 5. Hero-luft: större kantmarginal på desktop (16 -> 32px) och styrd VERTIKAL padding. Topp-paddingen fyller två syften: (a) clearance för den nu FIXERADE pill-navbaren (sektion 7) som tagits ur flödet, så rubriken inte hamnar bakom pillen vid load, och (b) håller den stora H1:an (clamp-tak 120px) + CTA ovanför vikningen på 900px-skärmar. 7.5rem ~= gamla navhöjden (~83px) + den tidigare luften. Scopat till header.section -> vinner över .section-variabeln (specificitet 0,0,1,1 > 0,0,1,0). Endast hero, endast >=768px (mobil har egen clearance nedan). ------------------------------------------------------------ */ @media screen and (min-width: 768px) { header.section { padding-top: 8rem; padding-bottom: 4rem; } header.section .container { padding-left: 32px; padding-right: 32px; } } /* Mobil: kollapsa den asymmetriska layouten till en lugn vänsterställd stapel (rubrik överst, stödtext + CTA under) — ingen påtvingad höger. */ @media screen and (max-width: 767px) { /* Clearance för den FIXERADE pillen (sektion 7-8) vid sidladdning: pillen är ur flödet, så utan detta hamnar rubriken bakom pillen på telefon. Pill-botten ~78px (top 12 + höjd ~66) -> ~6rem ger luft under pillen innan rubriken börjar. (Desktop/tablet sköts av sektion 5:s min-width:768-block.) */ header.section { padding-top: 6rem; } header.section .hero-layout { min-height: auto; gap: 2rem; } header.section .heading_h1 { max-width: none; } header.section .hero-support { align-self: stretch; max-width: none; } } /* ============================================================ 6. Reveal-on-scroll (lugn, premium) — ÅTERANVÄNDBAR Dolt utgångsläge appliceras bara när JS aktiverat det (html.rv-on, satt pre-paint av inline-skriptet i och endast när rörelse tillåts) -> ingen flicker, och sidan fungerar helt utan JS. Stagger styrs av --rv-delay som scroll-reveal.js sätter per element. För att utöka till nästa sektion: lägg sektionens element- selektorer i listorna nedan + en post i GROUPS (scroll-reveal.js). ============================================================ */ .rv-on header.section .heading_h1, .rv-on header.section .subheading, .rv-on header.section .button-group { opacity: 0; transform: translateY(20px); transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; } .rv-on header.section .heading_h1.rv-in, .rv-on header.section .subheading.rv-in, .rv-on header.section .button-group.rv-in { opacity: 1; transform: none; } /* Tillgänglighet: stäng av all reveal-rörelse och visa allt direkt. */ @media (prefers-reduced-motion: reduce) { .rv-on header.section .heading_h1, .rv-on header.section .subheading, .rv-on header.section .button-group { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ 7. Flytande pill-navbar ("floating hero menu") Navbaren tas ur flödet (position: fixed) och blir en svävande, frostad pill som följer med vid scroll. ALLT innehåll + i18n är orört (logga, länkar, dropdowns, språkväljare, CTA) — bara form, position och styling ändras. Ingen show/hide-JS: alltid synlig. Scope: bara denna sida. facelift.css laddas enbart på index.html, så övriga sidors navbar är oförändrad (flaggat till användaren). Struktur (oförändrad): .nav (wrapper, body-barn) > .nav_container (.w-nav, flex-raden) > .nav_left (logga) + .nav_right (länkar + button-group: CTA/SV/hamburgare). Vi fixerar .nav_container som pillen; .nav kollapsar då till 0 px höjd men behåller en hög stacking-context så hela navet ligger ovanpå sidan, och sidan scrollar under pillen. ============================================================ */ /* Wrapper: håll nav-lagret ovanpå allt sidinnehåll. .nav_container är nu fixed (ur flödet), så wrappern ska inte ta egen höjd i flödet — nollställ höjd/min-höjd så header.section börjar i toppen och clearancen styrs helt av hero-paddingen (sektion 5). */ .nav { z-index: 1000; height: 0; min-height: 0; } /* Själva pillen. */ .nav_container.w-nav { position: fixed; top: 18px; /* svävar en bit ned från skärmkanten */ /* Höger-ankrad geometri (matematiskt pixel-identisk med den tidigare left:24/right:24/margin:auto/max-width:1280-modellen vid ALLA bredder), men uttryckt med KONKRET width som går att animera. Vänsterkanten härleds ur right+width (left:auto), så när pillen krymper i collapsed- läge (sektion 10) dras den ihop mot HÖGERkanten -> hamburgare i hörnet, inte mot mitten. Högerkanten pinnas vid pillens nuvarande högerkant: vw<=1328: right=24 -> högerkant = vw-24 (full bredd) vw>1328 : right=50vw-640px -> högerkant = vw/2+640 (kapad/centrerad) width: full bredd (100vw-48) tills max-width 1280 tar vid vid vw>1328. */ left: auto; right: max(24px, 50vw - 640px); width: min(100vw - 48px, 1280px); margin: 0; z-index: 1000; padding: 0.75rem 1.75rem; /* 12px 28px — luft för pill-ändarna */ border-radius: 9999px; /* äkta stadium/pill */ background-color: rgba(255, 255, 255, 0.72); /* ljus, lätt transparent */ -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); /* diskret frosted */ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); /* lyfter från sidan */ border: 1px solid rgba(22, 40, 80, 0.06); /* hårfin navy-kant mot vitt */ overflow: visible; /* dropdowns måste kunna spilla ut nedåt */ /* Mjuk hopfällning -> hamburgare (sektion 10). Bara width animeras här (billigt, ej reflow-hackigt); barnens opacity animeras i sektion 10. prefers-reduced-motion stänger av denna övergång (sektion 10). */ transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1), right 360ms cubic-bezier(0.16, 1, 0.3, 1); } /* Dropdowns måste fortsätta fungera under den fixerade pillen: ankra varje dropdown-lista till SIN toggle (position: relative) och lägg listan ovanpå sidinnehållet (z-index över pillen). */ .nav_container.w-nav .nav_dropdown-menu.w-dropdown { position: relative; } .nav_container.w-nav .w-dropdown-list { z-index: 1001; /* Listan ankras under sin toggle, som sitter INNE i pillen. Skjut ned den exakt till pillens nederkant så den ansluter direkt under nav-raden utan vit glipa (toggle-botten ~79px, pill-botten ~103px => 1.5rem). */ margin-top: 1.5rem; } /* ============================================================ 8. Pill-navbar: responsiv hopfällning (hamburgare <=991px) Webflow fäller .nav_menu (länkarna) till en overlay som hamburgaren öppnar, OCH stackar .button-group vertikalt (flex-direction:column) på smala skärmar. Den vertikala stacken sprängde pillen: nav_right blev ~115px hög, loggan sträcktes och CTA/SV/hamburgare hamnade på höjden -> pillen blev 141px hög och stack ut. Här hålls pill-innehållet som EN centrerad rad. På telefon (<=767px) komprimeras pillen så logga + CTA + SV + hamburgare ryms utan överspill. Innehåll/i18n orört — bara layout. Hamburgaren/overlay fungerar precis som i Webflow-grunden. ============================================================ */ /* <=991px (hamburgaren visas): tvinga tillbaka button-group till en horisontell, vertikalt centrerad rad (övermannar Webflows column- stack) och centrera pillens flex-rad så loggan inte sträcks. */ @media screen and (max-width: 991px) { .nav_container.w-nav { align-items: center; } .nav_container.w-nav .button-group { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-top: 0; width: auto; } } /* <=767px (telefon): kompakt pill. Mindre svävmarginal + padding och nedskalad CTA. Loggan visar bara EMBLEMET här — ordmärket "Vattentrygg" döljs för att ge plats, så de funktionella delarna (språkväljaren SV på en tvåspråkig sajt + CTA:n) får plats på en rad utan överspill ända ned till ~360px. Emblemet bär varumärket. i18n är orört (vi döljer bara elementet). FLAGGAT till användaren — vill man ha ordmärket kvar på telefon tas .nav_logo [data-brand-name]- regeln nedan bort (men då blir raden trång under ~390px). */ @media screen and (max-width: 767px) { .nav_container.w-nav { top: 12px; left: auto; /* höger-ankrad (matchar bas-modellen) */ right: 12px; width: calc(100vw - 24px); /* = tidigare left:12+right:12 (vänsterkant 12) */ padding: 0.5rem 0.875rem; /* 8px 14px — slimmad pill */ } /* Endast emblem på telefon (ordmärket döljs visuellt, i18n orört). */ .nav_logo [data-brand-name] { display: none; } /* Kompakt CTA så högerklustret ryms bredvid hamburgaren. */ .nav_container.w-nav .button-group .button { padding: 9px 14px; font-size: 0.875rem; } } /* ============================================================ 9. Fristående språkväljare (SV) — fixerad uppe till höger. Den SERVADE switchern (public/lang-switcher.js) bygger en native -> liten, diskret pill: frostat vitt, navy "SV", egen chevron till höger. */ #lang-switcher-mount #lang-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: auto; min-height: 0; margin: 0; padding: 8px 34px 8px 14px; /* extra höger-padding ger plats åt chevron */ font-family: "Work Sans", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; color: #162850; background-color: rgba(255, 255, 255, 0.78); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 7.5l4.2 4.2 4.2-4.2' fill='none' stroke='%23162850' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 9999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } #lang-switcher-mount #lang-select:hover { background-color: rgba(255, 255, 255, 0.94); border-color: rgba(0, 0, 0, 0.16); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } #lang-switcher-mount #lang-select:focus, #lang-switcher-mount #lang-select:focus-visible { outline: none; border-color: rgba(31, 157, 217, 0.55); /* vatten-accent vid fokus */ box-shadow: 0 0 0 3px rgba(31, 157, 217, 0.16); } /* Läsbara rader i webbläsare som respekterar option-styling. */ #lang-switcher-mount #lang-select option { color: #162850; background-color: #ffffff; } /* Mobil: pillen är full-bredd och hero-rubriken börjar tätt under den (H1-topp ~116px, pill-botten ~78px -> bara ~38px glugg). En full-stor SV (34px) skulle nudda rubrikens övre högra hörn. Gör SV något kompaktare och lägg den i gluggen mellan pillen och rubriken: kollisionsfri mot både pill och rubriktext. Samma design, bara nedskalad för liten skärm. */ @media screen and (max-width: 767px) { #lang-switcher-mount { top: 84px; right: 16px; } #lang-switcher-mount #lang-select { padding: 6px 30px 6px 12px; font-size: 12px; background-position: right 10px center; } } /* Bred skärm: pillen kapas vid max-width 1280 och centreras, så på riktigt breda vyer öppnar sig en guttar till höger om pillen. När den är bred nog ryms SV i jämnhöjd med pillens högerkant -> flytta upp den till toppen av hörnet (top:24). Tröskel: pill-högerkant = vw/2 + 640, SV-vänsterkant = vw - 94 (right:24 + ~70px bredd); de går fria när vw >= ~1468px. Under denna bredd behålls placeringen strax under pillen (bas-regeln top:116). */ @media screen and (min-width: 1470px) { #lang-switcher-mount { top: 24px; } /* På denna bredd ligger SV i SJÄLVA hörnet (top:24, right:24). Den hopfällda hamburgern är också hörn-pinnad (right:24, sektion 11) -> de hamnar ovanpå varandra. Behåll SV ytterst i hörnet och skjut in hamburgern en bit till VÄNSTER om den (SV är ~70px bred: right:24..94, så hamburgern hamnar fritt vid right:108 med ~14px luft). Gäller bara hopfällt läge; vid peek återställer .is-collapsed.is-peek den centrerade högerkanten (samma specificitet, men :not(.is-peek) matchar då inte). */ .nav_container.w-nav.is-collapsed:not(.is-peek) { right: 108px; } } /* ============================================================ 10. Scroll-driven hopfällning: pill -> hamburgare (endast desktop) När användaren scrollat förbi sektionen "Våra partners & certifieringar" (IntersectionObserver i js/nav-collapse.js) får .nav_container klassen .is-collapsed och pillen krymper smidigt ihop mot HÖGERkanten (width 64px, sektion 7:s width-transition) till en kompakt, frostad hamburger-knapp i hörnet. Innehållet (logga/länkar/dropdowns/CTA) tonas ut med opacity och klipps bort (overflow:hidden) — DOM och i18n rörs inte. Klick på knappen sätter .is-peek: pillen fälls ut till FULL form igen (samma länkar/dropdowns/SV). Stängning sker via klick utanför eller på en länk, eller automatiskt när man scrollar upp förbi triggern (scrollpositionen är sanningen; .is-peek nollställs i JS). Allt nedan gäller BARA >=992px. Under 992px tar Webflows egen hamburgare/overlay över; JS nollställer då klasserna så inget krockar med det befintliga mobilbeteendet. ============================================================ */ /* Min injicerade hamburger-knapp (js/nav-collapse.js lägger den som sista barn i .nav_container, syskon till .nav_left/.nav_right). position:absolute -> deltar inte i flex-raden, påverkar inte layouten. Default DOLD (full pill); visas bara i .is-collapsed. */ .nav-collapse-toggle { position: absolute; inset: 0; margin: auto; /* centrerad i pillen, oberoende av padding */ display: flex; /* centrera ikonen (de tre linjerna) i knappen */ align-items: center; /* vertikalt centrerad */ justify-content: center; /* horisontellt centrerad */ width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: #162850; /* navy hamburger-ikon */ cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .nav-collapse-toggle svg { display: block; width: 22px; height: 22px; } /* Mjuk opacity-övergång åt BÅDA håll (fäll ihop + fäll ut) — ligger på bas-elementen så även utfällningen animeras. I mobil är opacity alltid 1, så detta påverkar inte mobillayouten. */ .nav_container.w-nav > .nav_left, .nav_container.w-nav > .nav_right { transition: opacity 200ms ease; } @media screen and (min-width: 992px) { /* Fällt läge: krymp pillen mot högerkanten. Bara width animeras (sektion 7). overflow:hidden klipper det uttonade innehållet. flex-shrink:0 på barnen håller deras naturliga storlek så pillens HÖJD inte hoppar när de klipps (de krymper/radbryts annars). */ .nav_container.w-nav.is-collapsed { width: 64px; /* Pinna hamburgaren i HÖGRA hörnet. Annars ärvs right från basregeln (pillens centrerade högerkant = 50vw-640px), och hamburgaren hamnar långt in mot mitten på breda skärmar. right animeras (sektion 7) så pillen glider snyggt in i hörnet när den fälls ihop. */ right: 24px; overflow: hidden; } .nav_container.w-nav.is-collapsed > .nav_left, .nav_container.w-nav.is-collapsed > .nav_right { opacity: 0; pointer-events: none; flex-shrink: 0; } .nav_container.w-nav.is-collapsed .nav-collapse-toggle { opacity: 1; pointer-events: auto; } /* Peek: knappen klickad -> full pill igen (= basregelns geometri, right är oförändrad så pillen växer åt vänster från hörnet). Återställ width/overflow och tona in innehållet; göm knappen. */ .nav_container.w-nav.is-collapsed.is-peek { width: min(100vw - 48px, 1280px); /* Återställ den centrerade högerkanten när pillen peekas ut till full form, så den inte hänger kvar i hörnet. */ right: max(24px, 50vw - 640px); overflow: visible; } .nav_container.w-nav.is-collapsed.is-peek > .nav_left, .nav_container.w-nav.is-collapsed.is-peek > .nav_right { opacity: 1; pointer-events: auto; } .nav_container.w-nav.is-collapsed.is-peek .nav-collapse-toggle { opacity: 0; pointer-events: none; } } /* Stäng av width-glidet vid fönster-resize (JS lägger .nav--no-anim kort under resize) så pillen inte animerar bredd när vyn ändras eller korsar en brytpunkt — bara den avsiktliga hopfällningen glider. */ .nav_container.w-nav.nav--no-anim { transition: none !important; } /* prefers-reduced-motion: hoppa över animationen, växla läge direkt. */ @media (prefers-reduced-motion: reduce) { .nav_container.w-nav, .nav_container.w-nav > .nav_left, .nav_container.w-nav > .nav_right, .nav-collapse-toggle { transition: none !important; } } /* ============================================================ SEKTION 11 — "Våra lösningar"-flikarna (index) Stripe/Notion-polish: bort med ramar → luft, rundade bilder, vattenblå accenter, läsbar rubrik. Allt scopat under .section.is-inverse .w-tabs så den andra inverse-sektionen (utan flikar) lämnas helt orörd. ============================================================ */ /* Kort: ta bort ringen/bordern — låt texten andas mot bakgrunden */ .section.is-inverse .w-tabs .card.on-inverse { box-shadow: none; background-color: transparent; } /* Sektionsrubriken låg navy-på-navy (osynlig) — gör den ljus så den syns */ .section.is-inverse .w-tabs .heading_h2 { color: #ffffff; } /* Ikonen (pratbubblan) tas bort helt — den tillförde inget visuellt. */ .section.is-inverse .w-tabs .icon.is-background.on-inverse { display: none; } /* CTA "Detaljer / Se produkter" använder nu sajtens standardknapp (.button.w-button — vattenblå, vit text, rundad, hover) direkt i HTML, så ingen egen knappstil behövs här längre. */ /* Tab 1 (foto/gif): 12px rundade hörn + object-fit: cover + mjuk skugga */ .section.is-inverse .w-tabs .w-tab-pane[data-w-tab="Tab 1"] .image-ratio_auto { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .section.is-inverse .w-tabs .w-tab-pane[data-w-tab="Tab 1"] .image-ratio_auto .image { width: 100%; height: 100%; object-fit: cover; } /* Tab 2 (vita kvadratiska dörrfoton): 12px rundade hörn + jämn spacing + mjuk skugga. INGEN cover — bilderna ska visas helt, inte beskäras. */ .section.is-inverse .w-tabs .w-tab-pane[data-w-tab="Tab 2"] .image-ratio_auto { display: flex; gap: 16px; align-items: center; justify-content: center; overflow: visible; } .section.is-inverse .w-tabs .w-tab-pane[data-w-tab="Tab 2"] .image-ratio_auto img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } /* Tab 3 (transparenta produkturklipp): INGEN cover (skulle klippa urklippen). En diskret frostad panel ger dem en ram så de inte flyter löst. */ .section.is-inverse .w-tabs .w-tab-pane[data-w-tab="Tab 3"] .image-ratio_auto { border-radius: 12px; background-color: rgba(255, 255, 255, 0.05); padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } /* Flikmenyn: mjuka övergångar. Webflows stock-underline (box-shadow) på varje flik fungerar som "spår" för loading-baren nedan. */ .section.is-inverse .w-tabs .tab_menu-link { position: relative; transition: opacity 200ms ease, box-shadow 200ms ease, color 200ms ease; } /* Loading-bar för auto-progressionen: en vattenblå stapel som fylls 0 -> 100 % längs den aktiva fliken under ~8 s, sedan växlar karusellen. Bredden sätts per frame av js/solutions-tabs-carousel.js (som injicerar .tab-progress__fill). */ .section.is-inverse .w-tabs .tab-progress__fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background-color: #1f9dd9; border-radius: 2px; pointer-events: none; } /* ============================================================ SEKTION 12 — "Investera i hållbart översvämningsskydd" (värde-korten) Stripe/Notion-polish, scopat under .value-stack (hook på
): 1) Bort med Webflows sticky-STAPLING — korten gled in och låg på varandra halvtransparent (position:sticky + backdrop-filter blur(50px) + trappade margin-top). Nu flödar de normalt, ett i taget, utan överlapp/halvtransparenta mellanlägen. 2) De-boxa: bort med ringen (box-shadow 0 0 0 1px) + blur → korten andas mot bakgrunden med whitespace. 3) Lugn reveal (fade + translateY) ett kort i taget via scroll-reveal.js (GROUP '.value-stack' -> '.card'). 4) Rubrikerna mycket större (clamp-skala). Eyebrow + brödtext orörda. Vänsterbilden lämnas orörd — dess egen sticky behålls. ============================================================ */ /* 1) Lås upp KORT-staplingen. Endast kort-wrapparna (.position_sticky inuti den INRE .flex_vertical, dvs inte den yttre .flex_horizontal-raden där vänsterbilden bor) görs statiska -> ingen stapling/överlapp. */ .value-stack .flex_vertical:not(.flex_horizontal) .position_sticky { position: static; top: auto; } /* Mobil/smal vy (≤991px = brytpunkten där .grid_2-col.tablet-1-col staplar till EN kolumn): neutralisera ÄVEN vänsterbildens sticky. På desktop pinnas bilden medan korten scrollar (avsiktligt — lämnas orörd ovan), men i 1-kolumnsläget gör sticky att de efterföljande korten målas OVANPÅ den pinnade bilden -> textblocket hamnar ovanpå bilden. Statisk här -> bild först, text under, inget överlapp. Desktop-beteendet är orört. */ @media screen and (max-width: 991px) { .value-stack .position_sticky { position: static; top: auto; } } /* Jämn vertikal rytm: nollställ de trappade margin-top som bara fanns för stapel-effekten (gap-large på wrappern ger luften mellan korten). */ .value-stack .margin-top_xsmall, .value-stack .margin-top_small, .value-stack .margin-top_medium { margin-top: 0; } /* 2) De-boxa korten (mirror av flik-sektionen): bort med ring/border/blur. */ .value-stack .card { box-shadow: none; border: 0; background-color: transparent; } .value-stack .backdrop-filter_blur { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Textkroppen bär av misstag bild-ratio-klassen (aspect-ratio 3/2 + overflow:clip). Neutralisera så rubrik/brödtext flödar fritt — ingen klippning vid större rubrik, ingen tom box. */ .value-stack .card .card_body.image-ratio_3x2 { aspect-ratio: auto; overflow: visible; } /* 4) Rubrikerna (de bara

i korten) mycket större — stor hierarki. Eyebrow (.eyebrow) och brödtext (.paragraph_large) lämnas orörda. */ .value-stack .card .header h2 { font-size: clamp(30px, 2vw + 18px, 46px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; } /* 5) VATTEN-FYLLNING på de fyra kort-rubrikerna (GRUNDVERSION). En vatten-blå "vattenlinje" stiger nedifrån och upp genom själva bokstäverna: background-clip:text klipper en gradient (navy upptill, vatten-blå nedtill) genom glyferna, och en animerad background-position höjer vattenlinjen. ENDAST

i korten — eyebrow/brödtext orörda. Sluttillstånd = FYLLD (vatten-blå) är default-läget. Det gör att: - prefers-reduced-motion (då -skriptet INTE sätter rv-on) -> rubriken visas direkt fylld, ingen animation. - failsafe (rv-on borttagen) -> också fylld, aldrig osynlig. När rörelse tillåts (html.rv-on) sätts utgångsläget om till navy och vågen spelas EN gång när RUBRIKEN är centralt i vy. scroll-reveal.js sätter .wf-in via en andra IntersectionObserver (rootMargin bottom -45% -> trigger när rubrikens överkant passerat 55%-linjen) som DELAR samma flush-skyddsnät som kort-revealen — ingen parallell motor. Kortets fade-in sker fortfarande tidigare på .rv-in; bara vågens start är senare. Allt måleri ligger i @supports: saknar webbläsaren clip:text får den bara helt vanlig (navy) rubrik, aldrig en ful gradient-box. Bakgrunden är 250% hög: vid position 0% ser texten gradientens övre navy-del, vid 100% den nedre vatten-blå delen; vattenlinjen (46-54%) sveper då HELT genom texten nedifrån och upp. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .value-stack .card .header h2 { background-image: linear-gradient( to top, #1f9dd9 0%, #1f9dd9 46%, #162850 54%, #162850 100% ); background-repeat: no-repeat; background-size: 100% 250%; background-position: 50% 100%; /* default: fylld (vatten-blå) */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Rörelse tillåten: starta i navy. */ .rv-on .value-stack .card .header h2 { background-position: 50% 0%; /* utgångsläge: navy */ } /* Rubriken centralt i vy (.wf-in sätts av scroll-reveal.js när dess överkant passerat ~55%-linjen) -> fyll EN gång, makligt (~2.7s), mjuk ease-out, håll kvar fyllt (both). */ .rv-on .value-stack .card .header h2.wf-in { animation: water-fill 2.7s cubic-bezier(0.33, 1, 0.68, 1) both; } /* prefers-reduced-motion: visa fylld direkt, ingen animation. */ @media (prefers-reduced-motion: reduce) { .value-stack .card .header h2 { background-position: 50% 100% !important; animation: none !important; } } } @keyframes water-fill { from { background-position: 50% 0%; } /* navy */ to { background-position: 50% 100%; } /* vatten-blå */ } /* 3) Reveal: dolt utgångsläge appliceras bara när rörelse tillåts (html.rv-on). scroll-reveal.js lägger .rv-in när kortet syns. */ .rv-on .value-stack .card { opacity: 0; transform: translateY(24px); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; } .rv-on .value-stack .card.rv-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv-on .value-stack .card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ SEKTION 13 — Testimonial som STICKY-STACK (recensioner) Scopat under .review-stack (hook på
). Ersätter den gamla citat-sektionen (Vattentrygg-logga + två auto-scrollande bilder) och "Säkra din fastighet"-sektionen. Mönstret är sohub.digital: stora mörka kort som STAPLAS på varandra vid vanlig vertikal scroll (INTE horisontell, inget scroll-jacking). Teknik = exakt samma som Webflows värde-kort: varje kort wrappas i .position_sticky.is-top-section-padding (pinnar i toppen vid section-padding). Kort 2 får margin-top_medium -> det glider upp och lägger sig OVANPÅ kort 1 medan man scrollar (kort 2 är efter i DOM = målas över kort 1). Ren CSS, ingen JS, inget scroll-reveal här -> robust och lugnt. Vi rör INTE de globala .position_sticky-reglerna, så staplingen är PÅ (till skillnad från .value-stack där vi låste upp). Ljus sektion: stor NAVY headline upptill; korten i vår mörkblå (#162850 -> #0d182f gradient), SOLIDA (INTE svart, INTE transparenta) så det övre kortet täcker det undre helt; rundade, generös padding. Citatet är HJÄLTEN (stort, ljust); namnet är DISKRET (litet, dämpat). prefers-reduced-motion: ingen sticky-rörelse -> lugn statisk stapel. ============================================================ */ /* Headline: stor, navy, vår clamp-skala (sohub/NRG-stor). .heading_h2 ärver annars ljus "neutral-inverse"-färg (tänkt för mörk bakgrund) -> tvinga navy här eftersom sektionen är ljus. */ .review-stack .review-stack__head { margin-bottom: clamp(2rem, 5vh, 4.5rem); } .review-stack .review-stack__head h2 { /* max-width på H2:n (inte containern): ch räknas mot rubrikens STORA font -> naturlig radbrytning på 2-3 rader. (På containern räknades ch mot dess lilla brödtext-font -> ~190px -> ett ord per rad.) */ max-width: 22ch; color: #162850; font-size: clamp(36px, 4vw + 14px, 68px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0; text-wrap: balance; } /* Stapel-container: lodrät, med scroll-luft mellan korten. Den luften är sträckan kort 2 färdas innan det pinnar och lägger sig ovanpå kort 1. */ .review-stack .review-stack__cards { display: flex; flex-direction: column; gap: clamp(2.5rem, 8vh, 7rem); } /* Korten: solid mörkblå djup-gradient (#162850 -> #0d182f), rundade, ljus text. Override av Webflows .card (ring/transparent/flex-row/overflow). Sohub-look = BREDA kort (fyller container-bredden) med ett STORT citat som dominerar — INTE höga/smala med liten text. Höjden anpassar sig efter innehållet (modest min-height som golv, bort från ~85vh) så luften blir avsiktlig, inte tom. justify-content:space-between förankrar namnet i botten i de fall kortet ändå blir högre än innehållet; citatets egen margin-bottom garanterar minsta avsiktliga luft när det fyller kortet. Mjuk, svävande skugga + rundade hörn -> korten flyter ovanför bakgrunden. */ .review-stack .review-card { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(320px, 46vh, 440px); border: 0; border-radius: clamp(20px, 2vw, 32px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); background-color: #162850; background-image: linear-gradient(160deg, #162850 0%, #0d182f 100%); color: #eaf2fb; padding: clamp(3rem, 5vw, 5rem); overflow: hidden; } /* Citatet = HJÄLTEN: stort och dominerande, fyller kortets bredd (ingen max-width -> texten löper kant-till-kant likt sohubs stora rubrik). Egen margin-bottom ger en AVSIKTLIG luft ner mot namnet — balanserad, inte ett tomt glapp. Clamp-skalan: ~28px mobil -> ~48px desktop. */ .review-stack .review-card__quote { margin: 0 0 clamp(2rem, 4vh, 3.25rem); color: #f4f8fd; font-size: clamp(28px, 2.4vw + 12px, 48px); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; } /* Namnet = diskret: litet, dämpat, normal vikt (INTE en stor rubrik). Förankras längst ned av kortets justify-content:space-between -> det stora lugna tomrummet mellan citat och namn uppstår av sig självt. */ .review-stack .review-card__cite { margin: 0; } .review-stack .review-card__cite strong { display: inline-block; color: #9fb3cf; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; } /* Kort 2 (Sandvik) REVEAL: mjuk uppåt-glidning från nedkant innan det lägger sig ovanpå kort 1. scroll-reveal.js observerar .review-card--rise och sätter .rv-in när kortet kommer i vy (SAMMA IntersectionObserver som hero/värde-korten — ingen parallell motor). VIKTIGT: transformen sitter på det INRE kortet, inte på .position_sticky-wrappern -> sticky-pinningen är orörd. Sticky sköter staplingen ovanpå kort 1; detta är den mjuka entrén. Endast under html.rv-on (rörelse tillåten); annars syns kortet direkt på plats (statisk stapel). */ .rv-on .review-stack .review-card--rise { opacity: 0; transform: translateY(80px); transition: opacity 0.56s ease-out, transform 0.56s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .rv-on .review-stack .review-card--rise.rv-in { opacity: 1; transform: none; } /* prefers-reduced-motion: stäng av sticky-rörelsen OCH reveal-glidningen. Korten ligger då som en lugn statisk stapel i normalt flöde (kort 1 över kort 2, ingen glidning, ingen överlappning). */ @media (prefers-reduced-motion: reduce) { .review-stack .position_sticky { position: static; top: auto; } .review-stack .review-card.margin-top_medium { margin-top: 0; } .rv-on .review-stack .review-card--rise { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================================ FAQ-accordion (index.html, "Vanliga frågor om översvämningsskydd") ---------------------------------------------------------------------------- 1) Avgränsningslinjen under varje fråga: behåll den tunna 1px-linjen men byt färg från neutral grå (color-mix currentColor 40%) till sajtens accentfärg, vatten-blå. Diskret understreck. facelift.css laddas sist så denna regel vinner över .accordion.is-transparent i webflow-cssen. 2) Luftiga stycken i de utökade svaren: varje svar är EN

med data-i18n, och i18n sätter el.textContent (HTML escapas →
funkar inte). Lösning: \n\n i i18n-strängen + white-space: pre-line renderar styckeavstånd. Scopas till FAQ-svaren; en/da/no saknar \n\n och påverkas inte. ============================================================================ */ .accordion.is-transparent { border-bottom-color: #1f9dd9; } .accordion_content .rich-text p { white-space: pre-line; }