/* ===================================================================== PAGELOOK · pagelook.css (versjon 2 – Elementor Flexbox Containers) --------------------------------------------------------------------- HVA LIGGER HVOR? • Farger og fonter → Elementor → Site Settings → Globale farger / Globale fonter. Variablene under (--navy …) peker dit, så endrer du en farge der, endres den her også. • H1–H6 og brødtekst → Site Settings → Typografi (størrelse per enhet). • Layout, avstander, → i Elementor på hver container/widget farger og tekststørrelse (Layout / Stil / Avansert). • DENNE FILEN → bare det Elementor ikke kan gjøre selv: hover-effekter, animasjoner, «sticky»/låste seksjoner, pseudo- elementer (::before/::after), og tilstander som JavaScript setter. Hver blokk er koblet til denne filen med en CSS-klasse (pl-…) som står i Elementor → Avansert → CSS-klasser. Brytepunkter (samme som Elementor): Mobil ≤ 767px · Nettbrett ≤ 1024px · Desktop > 1024px INNHOLD 00 Variabler og grunnlag 01 Kursiv aksent () og «eyebrow»-streken 02 Knapper (pil-sirkel, fyll ved hover, tekstlenke, magnetisk) 03 Header, burger og fullskjermmeny 04 Hero (fargeflekker, pulserende prikk, tittel, piller, scroll-hint) 05 Identitetsmaskinen (showreel) 06 Kundelogo-rulle 07 «Hvem vi er» – ord som lyser opp 08 Tjenester (rader, pil, NYTT-merke, forhåndsvisning) 09 Prosjekter (låst horisontal scroll, kort) 10 Løfter / bento 11 Metoden (kort som stables) 12 Sitat + tall 13 Priser 14 FAQ (Elementor-trekkspill) 15 CTA + skjema 16 Footer (ordmerket PAGELOOK) 17 Reveal-animasjoner (pl-rv) 18 Egen musepeker 19 Redusert bevegelse + Elementor-editoren --- Tjenestesidene --- 20 Tjeneste-hero (brødsmuler, piller, innfading) 21 Innsikt (tallkort) 22 Tre faser (Faner / Nested Tabs) 23 Hva som er inkludert (kort med lys) 24 Demo / kalkulator + hakeliste 25 Tidslinje 26 Case 27 Sammenligning 28 Garanti-bånd + fakta-boks 29 Relaterte tjenester --- Kontakt og Takk --- 30 Kontakt-hero 31 Hurtigkort (ring / e-post / besøk) 32 Kontaktskjemaet (piller, flytende etiketter) 33 Kontaktperson + «Dette skjer videre» 34 Besøk oss (kart + bilder) 35 Takk-siden 36 Personvern – hero og «Kort fortalt» 37 Personvern – innholdsliste og seksjoner 38 Om oss 39 Informasjonskapsler (bruker 36–37) 40 Slik jobber vi 41 404-siden 42 Mobilfikser (meny, header, filterlinje – 30.09.2026) ===================================================================== */ /* ===================================================================== 00 VARIABLER OG GRUNNLAG --e-global-color-… kommer fra Site Settings → Globale farger. Reserveverdien etter kommaet brukes bare hvis fargen mangler der. ===================================================================== */ :root{ --navy:var(--e-global-color-primary,#1E3A8E); --royal:var(--e-global-color-secondary,#1C55A6); --text:var(--e-global-color-text,#3A4870); --sky:var(--e-global-color-accent,#7DB8F0); --midnight:var(--e-global-color-midnight,#070F2B); --navy-950:var(--e-global-color-navy950,#0A1433); --navy-900:var(--e-global-color-navy900,#0F1E52); --azure:var(--e-global-color-azure,#1B6BB5); --mist:var(--e-global-color-mist,#C9DCF5); --ice:var(--e-global-color-ice,#EEF4FC); --line:var(--e-global-color-line,#DCE6F5); --muted:var(--e-global-color-muted,#5B6890); --ink:var(--navy-950); --grad:linear-gradient(135deg,#1E3A8E 0%,#1C55A6 55%,#1B6BB5 100%); --font-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --pad:clamp(20px,4.5vw,64px); --ease:cubic-bezier(.2,.7,.1,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--azure);outline-offset:4px;border-radius:8px} ::selection{background:var(--navy);color:#fff} .pl-main{display:block} .pl-skip{position:absolute;left:-999px;top:10px;z-index:400;background:#fff;padding:10px 16px;border-radius:10px;color:var(--navy)} .pl-skip:focus{left:10px} /* Ankerlenker (#tjenester osv.) stopper under den faste headeren */ [id]{scroll-margin-top:90px} /* Tekst-widgets: ingen ekstra luft under siste avsnitt */ .elementor-widget-text-editor p:last-child{margin-bottom:0} .elementor-widget-text-editor p{margin-top:0} /* ===================================================================== 01 KURSIV AKSENT OG EYEBROW Skriv ord i en overskrift → Instrument Serif kursiv. Blå på lys bakgrunn, himmelblå på mørk (pl-dark / mørke kort). Eyebrow = liten overskrift med klassen pl-eyebrow (får strek foran). ===================================================================== */ .elementor-heading-title em,.elementor-widget-text-editor em{ font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--royal)} .pl-dark .elementor-heading-title em,.pl-casefeat .elementor-heading-title em,.pl-fb-l .elementor-heading-title em,.pl-showreel .elementor-heading-title em,.pl-tile-big .elementor-heading-title em, .pl-cta .elementor-heading-title em,.pl-footer .elementor-heading-title em{color:var(--sky)} .pl-hero-title em,.pl-svc-t em{font-weight:400} .pl-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:10px} .pl-eyebrow .elementor-heading-title::before{content:"";width:22px;height:1.5px;background:currentColor;flex-shrink:0} /* ===================================================================== 02 KNAPPER Elementor-knapp + klassene: pl-btn pl-btn-navy – marineblå, hvit pil-sirkel pl-btn pl-btn-white – hvit, marineblå pil-sirkel pl-btn-sm – mindre (header) pl-btn-block – full bredde pl-btn-line – tekstlenke med strek under + skrå pil pl-magnetic – følger musen litt (JS) Farge og tekst settes i Elementor; formen og effektene her. ===================================================================== */ .pl-btn .elementor-button{ position:relative;display:inline-flex;align-items:center;gap:12px;height:58px; padding:0 64px 0 28px!important;border-radius:999px;overflow:hidden;isolation:isolate;line-height:1; transition:color .4s var(--ease)} .pl-btn-sm .elementor-button{height:48px;padding:0 52px 0 22px!important} .pl-btn-block,.pl-btn-block .elementor-button-wrapper,.pl-btn-block .elementor-button{width:100%} .pl-btn-block .elementor-button{justify-content:flex-start} /* Fargefyll som glir opp fra bunnen ved hover */ .pl-btn .elementor-button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--azure);transform:translateY(101%);transition:transform .5s var(--ease)} .pl-btn-white .elementor-button::before{background:var(--mist)} .pl-btn .elementor-button:hover::before{transform:none} /* Pil-sirkelen til høyre */ .pl-btn .elementor-button::after{content:"";position:absolute;right:9px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A8E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .5s var(--ease)} .pl-btn-white .elementor-button::after{background-color:var(--navy); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} .pl-btn .elementor-button:hover::after{transform:rotate(-45deg)} .pl-btn-sm .elementor-button::after{width:34px;height:34px;margin-top:-17px;right:7px} /* Tekstlenke */ .pl-btn-line .elementor-button{padding:0 28px 0 0!important;height:auto;border-radius:0;background:none!important;position:relative;font-weight:600} .pl-btn-line .elementor-button-text{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--ease)} .pl-btn-line .elementor-button:hover .elementor-button-text{background-size:100% 1.5px} .pl-btn-line .elementor-button::after{content:"";position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat} .pl-magnetic{will-change:transform;transition:transform .35s var(--ease)} @media (max-width:767px){.pl-btn .elementor-button{height:54px}} /* ===================================================================== 03 HEADER, BURGER OG FULLSKJERMMENY Theme Builder → Header. JS (pagelook.js 02) setter: .is-solid på .pl-header når siden er scrollet > 40px (hvit glass) .is-hidden på .pl-header når du scroller nedover body.menu-open når fullskjermmenyen er åpen ===================================================================== */ .pl-header{position:fixed!important;top:0;left:0;right:0;z-index:100; transition:transform .5s var(--ease),background-color .3s,box-shadow .3s} .admin-bar .pl-header{top:32px} @media (max-width:782px){.admin-bar .pl-header{top:46px}} .pl-header.is-solid{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)} .pl-header.is-hidden{transform:translateY(-110%)} .pl-header > .e-con-inner,.pl-header{flex-wrap:nowrap!important} .pl-head-right{width:auto!important;flex:0 0 auto!important;margin-left:auto} .pl-logo{flex:0 0 auto!important;width:auto!important} .pl-logo img{height:40px;width:auto;display:block;image-rendering:auto} @media (max-width:767px){.pl-logo img{height:32px}.pl-head-cta{display:none}} /* Menyen som «pille» */ .pl-nav{flex:0 0 auto!important;width:auto!important} .pl-nav .elementor-icon-list-items{flex-wrap:nowrap!important;margin:0!important} .pl-nav .elementor-icon-list-item a{white-space:nowrap} .pl-nav .elementor-icon-list-items{padding:6px;border-radius:999px;background:rgba(238,244,252,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);gap:6px} .pl-nav .elementor-icon-list-item{margin:0!important;padding:0!important} .pl-nav .elementor-icon-list-item::after{display:none!important} .pl-nav .elementor-icon-list-item a{padding:10px 18px;border-radius:999px;transition:background-color .25s} .pl-nav .elementor-icon-list-item a:hover{background:#fff} /* Burger (HTML-widget) */ .pl-burger{width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--ice);display:grid;place-items:center;cursor:pointer} .pl-burger-i,.pl-burger-i::before,.pl-burger-i::after{display:block;width:18px;height:2px;background:var(--navy);position:relative;transition:transform .4s var(--ease),top .4s var(--ease),background-color .3s} .pl-burger-i::before,.pl-burger-i::after{content:"";position:absolute;left:0} .pl-burger-i::before{top:-6px}.pl-burger-i::after{top:6px} body.menu-open .pl-burger-i{background:transparent} body.menu-open .pl-burger-i::before{top:0;transform:rotate(45deg)} body.menu-open .pl-burger-i::after{top:0;transform:rotate(-45deg)} /* Header når menyen er åpen */ body.menu-open .pl-header{background:transparent!important;box-shadow:none;transform:none} body.menu-open .pl-logo img{filter:brightness(0) invert(1)} body.menu-open .pl-nav,body.menu-open .pl-head-cta{opacity:0;pointer-events:none} .pl-nav,.pl-head-cta{transition:opacity .3s} /* Fullskjermmeny – åpnes som en sirkel fra burgeren */ .pl-overlay{position:fixed!important;inset:0;z-index:90;overflow-y:auto; clip-path:circle(0% at calc(100% - 60px) 42px);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s} body.menu-open .pl-overlay{clip-path:circle(150% at calc(100% - 60px) 42px);visibility:visible;transition:clip-path .8s var(--ease)} .pl-ov-links .elementor-icon-list-item{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .pl-ov-links sup{font-size:14px;font-weight:500;letter-spacing:0;color:var(--sky);vertical-align:super;margin-left:14px} body.menu-open .pl-ov-links .elementor-icon-list-item{opacity:1;transform:none} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(1){transition-delay:.25s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(2){transition-delay:.30s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(3){transition-delay:.35s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(4){transition-delay:.40s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(5){transition-delay:.45s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(6){transition-delay:.50s} body.menu-open .pl-ov-links .elementor-icon-list-item:nth-child(7){transition-delay:.55s} .pl-ov-meta .elementor-icon-list-items{gap:12px 32px} /* ===================================================================== 04 HERO Tittelen skrives i Elementor som: Ser ut 1 som deg.
Selger 2 for deg. JS gjør hver linje (
) til en linje som ruller opp, og bytter 1 med «font-pillen» og 2 med «graf-pillen». ===================================================================== */ .pl-hero{position:relative;isolation:isolate} /* Myke fargeflekker i bakgrunnen */ .pl-hero::before,.pl-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none} .pl-hero::before{width:560px;height:560px;background:#CFE0F7;top:-160px;right:-120px;animation:pl-float1 18s ease-in-out infinite} .pl-hero::after{width:420px;height:420px;background:#E3EDFB;top:260px;left:-160px;animation:pl-float2 22s ease-in-out infinite} @keyframes pl-float1{50%{transform:translate(-80px,60px) scale(1.1)}} @keyframes pl-float2{50%{transform:translate(90px,-40px) scale(.9)}} /* Pulserende prikk foran «Digitalbyrå i Bærum …» */ .pl-hero-loc .elementor-heading-title{display:inline-flex;align-items:center;gap:10px} .pl-hero-loc .elementor-heading-title::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--azure);box-shadow:0 0 0 0 rgba(27,107,181,.5);animation:pl-pulse 2s infinite;flex-shrink:0} @keyframes pl-pulse{70%{box-shadow:0 0 0 12px rgba(27,107,181,0)}100%{box-shadow:0 0 0 0 rgba(27,107,181,0)}} /* Tittel-linjer */ .pl-hero-title u{text-decoration:none;display:none} .pl-hero-title .pl-line{display:block;overflow:hidden;padding-bottom:.06em} .pl-hero-title .pl-line > span{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:.18em;white-space:nowrap;transform:translateY(105%);animation:pl-rise 1.1s var(--ease) forwards} .pl-hero-title .pl-line:nth-child(2) > span{animation-delay:.12s} @keyframes pl-rise{to{transform:none}} @media (max-width:767px){.pl-hero-title .pl-line > span{white-space:normal}} /* Pillene i tittelen */ .pl-hpill{display:inline-block;position:relative;height:.74em;width:1.7em;border-radius:999px;overflow:hidden;vertical-align:middle;background:var(--grad);flex-shrink:0;transform:translateY(.02em)} .pl-hpill-font .pl-reel{position:absolute;inset:0;display:flex;flex-direction:column;animation:pl-reel 9s var(--ease) infinite} .pl-hpill-font .pl-reel > span{flex:0 0 100%;display:flex;align-items:center;justify-content:center;font-size:.2em;letter-spacing:0;color:#fff;line-height:1} .pl-hpill-font .pl-reel b{font-size:1.1em;line-height:1;font-weight:600} @keyframes pl-reel{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(-100%)}50%,72%{transform:translateY(-200%)}75%,97%{transform:translateY(-300%)}100%{transform:translateY(-400%)}} .pl-hpill-chart{background:var(--navy-950)} .pl-hpill-chart svg{position:absolute;inset:12% 8%;width:84%;height:76%} .pl-hpill-chart path{stroke-dasharray:200;stroke-dashoffset:200;animation:pl-draw 3.2s var(--ease) 1s infinite} @keyframes pl-draw{0%{stroke-dashoffset:200}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}} /* Bunnlinjen tones inn etter tittelen */ .pl-hero-bottom{opacity:0;transform:translateY(20px);animation:pl-fadeUp 1s var(--ease) .6s forwards} @keyframes pl-fadeUp{to{opacity:1;transform:none}} .pl-lead{max-width:520px!important} /* Scroll-hint (HTML-widget) */ .pl-scroll-cue{width:58px;height:92px;border:1.5px solid var(--line);border-radius:999px;display:flex;justify-content:center;padding-top:14px;box-sizing:border-box} .pl-scroll-cue i{width:4px;height:12px;border-radius:4px;background:var(--navy);animation:pl-cue 1.8s ease-in-out infinite} @keyframes pl-cue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(40px);opacity:0}100%{opacity:0}} /* ===================================================================== 05 EKTE PROSJEKTER PER BRANSJE (showreel) Venstre side er Elementor-widgets. Høyre side (to bildekort per bransje, hovedbildet fra casen + kort med lenke) tegnes av JS inn i HTML-widgeten med klassen pl-stage. Innholdet endres i PROJECTS i pagelook.js. JS skalerer boksen fra 86 % til 100 % mens den scrolles inn. ===================================================================== */ .pl-showreel{position:relative;transform-origin:50% 0;will-change:transform;min-height:min(820px,92vh)} @media (max-width:1024px){.pl-showreel{min-height:0}} .pl-mark-bg{position:absolute!important;right:-8%;bottom:-18%;width:62%!important;opacity:.07;pointer-events:none;z-index:0;animation:pl-spin 60s linear infinite} .pl-mark-bg img{width:100%;filter:brightness(0) invert(1)} @keyframes pl-spin{to{transform:rotate(360deg)}} .pl-sr-copy{position:relative;z-index:1} .pl-sr-text{max-width:440px} /* Bransjeknapper – aktiv tilstand og fremdriftslinje */ .pl-ind{position:relative} .pl-ind .elementor-button{position:relative;overflow:hidden;height:46px;display:inline-flex;align-items:center;padding:0 20px!important;transition:color .3s,border-color .3s,background-color .3s} .pl-ind .elementor-button:hover{border-color:#fff!important;color:#fff!important} .pl-ind[aria-pressed="true"] .elementor-button{background:#fff!important;color:var(--navy)!important;border-color:#fff!important} .pl-ind .pl-ind-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--azure);border-radius:2px;pointer-events:none} .pl-ind[aria-pressed="true"] .pl-ind-bar{animation:pl-progress 4.2s linear forwards} .pl-showreel.is-paused .pl-ind-bar{animation:none!important;width:0} @keyframes pl-progress{to{width:100%}} /* Scenen – to bildekort per bransje (hovedbildet fra casen) */ .pl-stage{position:relative;height:clamp(400px,46vw,620px);z-index:1} @media (max-width:767px){.pl-stage{height:auto;aspect-ratio:4/4.1}} .pl-pcard{position:absolute;display:block;text-decoration:none;color:var(--ink);border-radius:22px;transition:transform .6s var(--ease)} .pl-pcard-1{left:0;bottom:9%;width:64%;z-index:2} .pl-pcard-2{right:0;top:0;width:54%;z-index:1} .pl-pcard:hover,.pl-pcard:focus-visible{transform:translateY(-6px);z-index:3} .pl-pcard:focus-visible{outline:2px solid var(--sky);outline-offset:4px} .pl-pimg{position:relative;display:block;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#13245E;box-shadow:0 40px 90px rgba(0,0,0,.45)} .pl-pcard-2 .pl-pimg{box-shadow:0 30px 70px rgba(0,0,0,.4)} .pl-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)} .pl-shot.on{opacity:1;transform:none} .pl-pcap{position:absolute;left:16px;bottom:0;transform:translateY(55%);background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 24px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:3px;max-width:calc(100% - 32px);font-family:var(--font-sans);line-height:1.3;transition:opacity .3s} .pl-pcard-2 .pl-pcap{left:auto;right:16px} .pl-pcap small{font-size:12px;color:var(--muted)} .pl-pcap b{font-size:15px;font-weight:600} .pl-pcap em{margin-top:4px;font-style:normal;font-size:13px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:6px} .pl-pcap em svg{transition:transform .3s var(--ease)} .pl-pcard:hover .pl-pcap em svg,.pl-pcard:focus-visible .pl-pcap em svg{transform:translateX(4px)} .pl-pcap.out{opacity:0} .pl-pcard.is-empty{display:none} @media (max-width:767px){ /* mobil: ett kort om gangen – prosjekt 2 tar over halvveis (klassen show-2 settes av JS) */ .pl-pcard-1,.pl-pcard-2{left:0;right:0;top:0;bottom:auto;width:100%;transition:opacity .5s} .pl-pcard:hover{transform:none} .pl-pcard-2{opacity:0;visibility:hidden} .pl-stage.show-2 .pl-pcard-2{opacity:1;visibility:visible;z-index:3} .pl-stage.show-2 .pl-pcard-1{opacity:0} .pl-pcap,.pl-pcard-2 .pl-pcap{left:12px;right:12px;bottom:auto;top:calc(100% - 28px);transform:none;max-width:none} } @keyframes pl-bob{50%{transform:translateY(-10px)}} /* brukes også av pl-tile-mk og pl-ab-chip-stat */ @media (prefers-reduced-motion:reduce){.pl-shot{transform:none}} /* ===================================================================== 06 KUNDELOGO-RULLE pl-track (container) → pl-track-list (container med logo-overskrifter). JS kopierer listen én gang, så rullen går sømløst. Pause ved mus over. ===================================================================== */ .pl-track{width:max-content!important;max-width:none!important;flex-wrap:nowrap!important;animation:pl-marq 38s linear infinite} .pl-marquee:hover .pl-track{animation-play-state:paused} .pl-track-list{width:auto!important;flex:0 0 auto!important;flex-wrap:nowrap!important} .pl-client{flex:0 0 auto} .pl-client .elementor-heading-title{white-space:nowrap;transition:color .3s} @keyframes pl-marq{to{transform:translateX(-50%)}} /* Verktøy-logoer (2.8.0) – bare i ruller med klassen pl-logos. inc/verktoy-logoer.php setter inn ikonet (svg.pl-tool-ico) foran navnet. !important trengs fordi hvert navn har egen font/farge i Elementor. */ .pl-logos .pl-client .pl-has-logo{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-sans)!important;font-style:normal!important;font-weight:600!important;font-size:22px!important;letter-spacing:-.02em!important;color:var(--ink)!important} .pl-logos .pl-tool-ico{height:1.3em;width:auto;flex:0 0 auto;transition:transform .3s} .pl-logos .pl-client:hover .pl-tool-ico{transform:translateY(-2px) scale(1.06)} @media (max-width:767px){.pl-logos .pl-client .pl-has-logo{font-size:17px!important}} /* ===================================================================== 07 «HVEM VI ER» – ord lyser opp mens du scroller Tekst-widget med klassen pl-lit. Ord i fet skrift () blir blå. JS deler teksten i ord (span.pl-w) og setter .on. ===================================================================== */ .pl-lit strong{font-weight:inherit} .pl-lit .pl-w{color:#C3D1EA;transition:color .25s} .pl-lit .pl-w.on{color:var(--ink)} .pl-lit .pl-w.hl.on{color:var(--royal)} /* ===================================================================== 08 TJENESTER Hver rad = container (lenke) med klassen pl-svc-row. Hover: marineblått fyll nedenfra, hvit tekst, pil-sirkelen roterer. NYTT i tittelen blir et lite merke. ===================================================================== */ .pl-sec-head-l{width:auto!important;flex:0 1 auto!important;max-width:100%} .pl-sec-head-text{flex:0 1 420px!important;max-width:420px!important;width:auto!important} .pl-svc-row{position:relative;overflow:hidden;isolation:isolate;transition:padding .45s var(--ease)!important;text-decoration:none!important} .pl-svc-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease)} .pl-svc-row:hover::before,.pl-svc-row:focus-visible::before{transform:scaleY(1)} @media (min-width:1025px){.pl-svc-row:hover{padding-left:36px!important}} .pl-svc-row .elementor-heading-title,.pl-svc-row .elementor-widget-text-editor{transition:color .45s} .pl-svc-row:hover .pl-svc-t .elementor-heading-title{color:#fff!important} .pl-svc-row:hover .pl-svc-n .elementor-heading-title{color:var(--sky)!important} .pl-svc-row:hover .pl-svc-d{color:var(--mist)!important} .pl-svc-go{justify-self:end} .pl-svc-go .elementor-icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid!important;place-items:center;transition:transform .5s var(--ease),background-color .45s,border-color .45s} .pl-svc-row:hover .pl-svc-go .elementor-icon{transform:rotate(-45deg);background:#fff;border-color:#fff} @media (max-width:1024px){.pl-svc-go .elementor-icon{width:44px;height:44px}} .pl-svc-t sup{display:inline-block;vertical-align:middle;margin-left:12px;padding:4px 10px;border-radius:999px;background:var(--ice);color:var(--royal);font-family:var(--font-sans);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;transform:translateY(-.6em)} /* Forhåndsvisning som følger musen (lages av JS – innhold i PREVIEWS i pagelook.js) */ .pl-preview{position:fixed;left:0;top:0;z-index:60;width:300px;height:210px;border-radius:22px;pointer-events:none;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .3s,transform .4s var(--ease);background:var(--grad);box-shadow:0 30px 70px rgba(10,20,51,.35);font-family:var(--font-sans)} .pl-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .pl-preview .pv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;opacity:0;transition:opacity .3s} .pl-preview .pv.on{opacity:1} .pl-preview b{font-size:26px;letter-spacing:-.03em;line-height:1.05} .pl-preview span{font-size:13px;color:var(--mist);margin-top:6px} .pl-preview svg{position:absolute;top:18px;right:18px;opacity:.9} @media (max-width:1024px),(hover:none){.pl-preview{display:none}} /* ===================================================================== 09 PROSJEKTER – låst seksjon med horisontal scroll (desktop) pl-cases (seksjon) → pl-cases-pin (låses) → pl-rail (kortene). JS setter høyden på pl-cases og flytter pl-rail sidelengs. Nettbrett/mobil: kortene står under hverandre, ingen låsing. Kortbredden er satt slik at hele kortet får plass i skjermhøyden. ===================================================================== */ .pl-cases-pin{position:sticky!important;top:0;height:100vh;overflow:hidden} .pl-rail{will-change:transform;flex-wrap:nowrap!important} .pl-case{flex:0 0 min(62vw,860px,calc((100vh - 400px) * 1.6))!important;width:auto!important;max-width:none!important} .pl-case-more{flex:0 0 min(34vw,460px)!important;width:auto!important;display:flex} .pl-case-more-link{flex:1 1 auto;transition:background-color .4s} .pl-case-more-link:hover{background-color:var(--royal)!important} @media (max-width:1024px){ .pl-cases-pin{position:relative!important;height:auto;padding:88px 0!important} .pl-rail{transform:none!important} .pl-case,.pl-case-more{flex:0 0 auto!important;width:100%!important} } /* Teller */ .pl-cases-count{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:14px} .pl-cc{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums} .pl-cc-bar{width:140px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px} .pl-cc-fill{position:absolute;inset:0;background:var(--navy);transform-origin:0 50%;transform:scaleX(0)} /* Kortet */ .pl-case-vis{position:relative;aspect-ratio:16/10;display:block!important;text-decoration:none!important} .pl-case-res{position:absolute!important;left:24px;top:24px;z-index:2;width:auto!important} .pl-case-res .elementor-heading-title{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);line-height:1.2} .pl-case-pg{position:absolute!important;left:12%;right:12%;top:14%;bottom:-6%;width:auto!important;border-radius:16px 16px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.25);transition:transform .8s var(--ease)} .pl-case:hover .pl-case-pg{transform:translateY(-4%) scale(1.02)} .pl-case-pg-body{flex:1 1 auto!important;text-align:center} .pl-case-dots{height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #EDF1F8} .pl-case-dots i{width:8px;height:8px;border-radius:50%;background:#D6DEEC} .pl-case-meta-l{flex:1 1 0;min-width:0} .pl-case-text{max-width:520px} .pl-tags{flex:0 0 auto!important;width:auto!important;max-width:50%} @media (max-width:1024px){.pl-tags{max-width:none;justify-content:flex-start!important}.pl-case-meta-l{flex:0 0 auto}} .pl-tag{flex:0 0 auto} .pl-tag .elementor-heading-title{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid #C9D6EE;white-space:nowrap;line-height:1.2} .pl-case-more-ic .elementor-icon{width:72px;height:72px;border-radius:50%;background:#fff;display:grid!important;place-items:center;transition:transform .5s var(--ease)} .pl-case-more-link:hover .pl-case-more-ic .elementor-icon{transform:rotate(-45deg)} @media (max-width:767px){.pl-case-res{left:14px;top:14px}.pl-case-res .elementor-heading-title{padding:8px 12px}} /* ===================================================================== 10 LØFTER / BENTO pl-bento er et grid (4 → 2 → 1 kolonner, settes i Elementor). Stor flis (pl-tile-big) tar 2×2 ruter. Lyset følger musen (JS setter --mx / --my). Ikonet (pl-ti) er en Elementor Ikon-widget. ===================================================================== */ .pl-bento{grid-auto-rows:minmax(240px,auto)} .pl-tile{position:relative;overflow:hidden;isolation:isolate} .pl-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(27,107,181,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none} .pl-tile:hover::after{opacity:1} .pl-tile-big{grid-column:span 2;grid-row:span 2} .pl-tile-big::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(125,184,240,.22),transparent 60%)} @media (max-width:767px){.pl-tile-big{grid-column:auto;grid-row:auto;min-height:420px}} .pl-tile-big .elementor-widget:not(.pl-tile-mk){position:relative;z-index:1} .pl-tile-big-p{max-width:480px!important} .pl-tile-mk{position:absolute!important;right:-30px;top:-50px;width:40%!important;opacity:.85;pointer-events:none;animation:pl-bob 8s ease-in-out infinite} .pl-tile-mk img{width:100%} @media (max-width:767px){.pl-tile-mk{width:46%!important;top:-20px;right:-20px}} .pl-ti{width:auto!important} .pl-ti .elementor-icon{width:56px;height:56px;border-radius:18px;background:#fff;display:grid!important;place-items:center;transition:transform .6s var(--ease)} .pl-ti-glass .elementor-icon{background:rgba(255,255,255,.16)} .pl-tile:hover .pl-ti .elementor-icon{transform:rotate(-8deg) scale(1.08)} /* ===================================================================== 11 METODEN – kort som stables mens du scroller Kortene (pl-step) er «sticky»; pl-step-1…4 gir litt ulik topp-avstand. Fargen på hvert kort settes i Elementor (Bakgrunn). JS krymper og mørklegger kortet som blir dekket. ===================================================================== */ .pl-process-lead{max-width:520px!important} .pl-step{position:sticky!important;top:110px;box-shadow:0 -20px 60px rgba(0,0,0,.25);transform-origin:50% 0;will-change:transform} .pl-step-2{top:136px}.pl-step-3{top:162px}.pl-step-4{top:188px} @media (max-width:1024px){.pl-step-1{top:90px}.pl-step-2{top:106px}.pl-step-3{top:122px}.pl-step-4{top:138px}} /* Stikkord som små piller (Ikonliste-widget, «inline») */ .pl-chips .elementor-icon-list-items{gap:8px;flex-wrap:wrap} .pl-chips .elementor-icon-list-item{margin:0!important;padding:7px 13px!important;border-radius:999px;background:rgba(255,255,255,.1)} .pl-chips .elementor-icon-list-item::after{display:none!important} .pl-chips .elementor-icon-list-icon{display:none} /* ===================================================================== 12 SITAT + TALL ===================================================================== */ .pl-stat{padding:32px 24px 0!important;border-left:1px solid var(--line)} .pl-stat:first-child{padding-left:0!important;border-left:0} @media (max-width:1024px){ .pl-stat{padding-bottom:24px!important} .pl-stat:nth-child(3){padding-left:0!important;border-left:0} } /* ===================================================================== 13 PRISER Hakene er Ikonliste-widgeten (ikon «check»). Knappen legges nederst. ===================================================================== */ .pl-plan{transition:transform .5s var(--ease),box-shadow .5s} .pl-plan:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(30,58,142,.12)} .pl-plan-list{flex:1 1 auto} .pl-plan-btn{margin-top:auto} .pl-plan-list .elementor-icon-list-icon svg{width:18px} .pl-badge{align-self:flex-start;width:auto!important} .pl-badge .elementor-heading-title{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(125,184,240,.16)} /* ===================================================================== 14 FAQ – Elementor «Trekkspill» (Nested Accordion) Pluss-ikonet får en rund bakgrunn og roterer til et kryss når åpent. Venstre kolonne (pl-faq-l) står stille mens du scroller på desktop. ===================================================================== */ @media (min-width:1025px){.pl-faq-l{position:sticky!important;top:120px;align-self:start}} .pl-faq-contact a{color:var(--navy);font-weight:600;border-bottom:1.5px solid var(--mist);text-decoration:none} .pl-faq .e-n-accordion-item-title{align-items:center} .pl-faq .e-n-accordion-item-title-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#fff;display:grid!important;place-items:center;transition:background-color .3s,transform .5s var(--ease)} .pl-faq .e-n-accordion-item-title-icon span{display:grid;place-items:center} .pl-faq details[open] > summary .e-n-accordion-item-title-icon{background:var(--navy);transform:rotate(135deg)} .pl-faq details[open] > summary + *{animation:pl-faq .5s var(--ease)} /* Streken ligger under hele spørsmålet (også når svaret er åpent), ikke mellom spørsmål og svar */ .pl-faq .e-n-accordion-item{border-bottom:1px solid var(--line)} .pl-faq .e-n-accordion-item-title{border:0!important} /* Luft under svaret (til streken) */ .pl-faq .e-n-accordion-item > .e-con{padding:0 64px 28px 0!important} @media (max-width:767px){.pl-faq .e-n-accordion-item > .e-con{padding:0 0 22px 0!important}} @keyframes pl-faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ===================================================================== 15 CTA + SKJEMA Lyset (pl-glow i HTML-widgeten) følger musen (JS 10e). Skjemaet er Elementor Pro-skjema; farger/rammer settes i Elementor, her bare høyde og fokus-tilstand. ===================================================================== */ .pl-cta{position:relative;isolation:isolate} .pl-glow-w{position:absolute!important;inset:0;width:100%!important;pointer-events:none;z-index:-1;overflow:hidden} .pl-glow-w .elementor-widget-container{position:absolute;inset:0} .pl-glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(28,85,166,.55),rgba(28,85,166,0) 60%);left:50%;top:50%;transform:translate(-50%,-50%);transition:left .6s var(--ease),top .6s var(--ease)} .pl-cta-grid,.pl-cta-l,.pl-form-card{position:relative;z-index:1} .pl-cta-text{max-width:520px!important} .pl-form-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .pl-form .elementor-field-group .elementor-field{min-height:62px;padding:0 18px!important;transition:border-color .3s,background-color .3s} .pl-form .elementor-field::placeholder{color:var(--mist);opacity:1} .pl-form .elementor-field:focus{outline:none;border-color:var(--sky)!important;background-color:rgba(255,255,255,.09)!important} .pl-form .elementor-button{height:58px} .pl-form .elementor-message{color:#fff;border-radius:14px;padding:14px;background:rgba(125,184,240,.16);text-align:center} .pl-form .elementor-message::before{display:none} /* ===================================================================== 16 FOOTER – ordmerket PAGELOOK fylles med blått når det kommer inn ===================================================================== */ .pl-f-logo,.pl-logo{text-align:left} .pl-f-logo img{height:44px;width:auto} .pl-f-links .elementor-icon-list-icon,.pl-f-social .elementor-icon-list-icon,.pl-f-legal .elementor-icon-list-icon, .pl-nav .elementor-icon-list-icon,.pl-ov-links .elementor-icon-list-icon,.pl-ov-meta .elementor-icon-list-icon{display:none} .pl-f-social .elementor-icon-list-items,.pl-f-legal .elementor-icon-list-items,.pl-ov-meta .elementor-icon-list-items{gap:16px 24px;margin:0!important} .pl-f-social .elementor-icon-list-item,.pl-f-legal .elementor-icon-list-item{margin:0!important;padding:0!important} .pl-f-social .elementor-icon-list-item::after,.pl-f-legal .elementor-icon-list-item::after,.pl-ov-meta .elementor-icon-list-item::after{display:none!important} .pl-wordmark .elementor-heading-title{color:transparent!important;-webkit-text-stroke:1.5px rgba(125,184,240,.35);white-space:nowrap;user-select:none; background:linear-gradient(90deg,#7DB8F0,#1C55A6) 0 0/0% 100% no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-size 1.4s var(--ease)} .pl-wordmark.is-in .elementor-heading-title{background-size:100% 100%} /* ===================================================================== 17 REVEAL – elementer med klassen pl-rv glir opp når de kommer inn pl-rv-d1 / d2 / d3 = litt forsinkelse (for rader av kort) ===================================================================== */ .pl-js .pl-rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .pl-js .pl-rv.is-in{opacity:1;transform:none} .pl-js .pl-rv.pl-plan.is-in:hover{transform:translateY(-8px)} .pl-rv-d1{transition-delay:.08s}.pl-rv-d2{transition-delay:.16s}.pl-rv-d3{transition-delay:.24s} .pl-svc-row.pl-rv{transition:opacity 1s var(--ease),transform 1s var(--ease),padding .45s var(--ease)!important} /* ===================================================================== 18 EGEN MUSEPEKER (bare på maskiner med mus) Liten prikk som følger musen, blir stor «Se case» over prosjektkort. ===================================================================== */ .pl-cursor{position:fixed;left:0;top:0;z-index:150;width:14px;height:14px;border-radius:50%;background:var(--navy);pointer-events:none;transition:width .35s var(--ease),height .35s var(--ease),background .3s,opacity .3s;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600;opacity:0;font-family:var(--font-sans)} .pl-cursor.big{width:92px;height:92px;background:var(--azure)} .pl-cursor span{opacity:0;transition:opacity .2s} .pl-cursor.big span{opacity:1} .pl-cursor.hide{opacity:0!important} /* Vises først når musen har beveget seg (JS setter .on) */ @media (hover:hover) and (pointer:fine){.pl-cursor.on{opacity:1}} /* ===================================================================== 19 REDUSERT BEVEGELSE + ELEMENTOR-EDITOREN ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} .pl-js .pl-rv{opacity:1;transform:none} .pl-hero-title .pl-line > span{transform:none} .pl-hero-bottom{opacity:1;transform:none} .pl-track{animation:none} } /* I editoren: vis alt, lås ingenting, så det er lett å redigere */ .elementor-editor-active .pl-rv,.elementor-editor-preview .pl-rv{opacity:1!important;transform:none!important} .elementor-editor-active .pl-hero-bottom{opacity:1;transform:none;animation:none} .elementor-editor-active .pl-hero-title u{display:inline;text-decoration:underline} .elementor-editor-active .pl-overlay{position:relative!important;clip-path:none;visibility:visible;min-height:60vh} .elementor-editor-active .pl-header{position:relative!important} .elementor-editor-active .pl-cases-pin{position:relative!important;height:auto;padding:88px 0!important} .elementor-editor-active .pl-rail{flex-wrap:wrap!important} .elementor-editor-active .pl-case{flex:0 0 calc(50% - 18px)!important} .elementor-editor-active .pl-track{animation:none;width:100%!important;flex-wrap:wrap!important} .elementor-editor-active .pl-step{position:relative!important;top:0} .elementor-editor-active .pl-stage{min-height:200px;border:1px dashed rgba(255,255,255,.3);border-radius:18px} /* Reserve-header/footer (vises bare hvis Elementor-malene mangler) */ .pl-fallback-header{display:flex;justify-content:space-between;gap:24px;padding:24px var(--pad,24px)} .pl-fallback-header ul{display:flex;gap:18px;list-style:none;margin:0;padding:0} .pl-fallback-footer{padding:40px var(--pad,24px);background:var(--midnight,#070F2B);color:#C9DCF5} .pl-default-content{max-width:760px;margin:0 auto;padding:160px var(--pad,24px) 96px} /* ##################################################################### TJENESTESIDENE (Tjenester + de 8 undersidene) Samme mal på alle sidene. Tekst, knapper, kort, faner, tidslinje, priser og FAQ er vanlige Elementor-widgets – her ligger bare det Elementor ikke kan gjøre selv. De interaktive illustrasjonene (HTML-widgets med klassen pl-vis) har egen fil: tjenester.css/.js. Seksjonskart: docs/TJENESTESIDER.md ##################################################################### */ /* ===================================================================== 20 TJENESTE-HERO pl-shero = seksjonen (arver fargeflekkene fra pl-hero, seksjon 04) pl-crumbs = brødsmulesti (Tekst-widget: lenker + «/») pl-shero-title = H1. Hver linje (
) ruller opp som på forsiden. pl-fade-1/2/3 = ingress, knapper og piller tones inn etter tittelen pl-hchips = pillene under knappene (Ikonliste, «inline») ===================================================================== */ .pl-crumbs,.pl-crumbs p{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0} .pl-crumbs a{color:inherit;text-decoration:none;transition:color .3s} .pl-crumbs a:hover{color:var(--navy)} .pl-crumbs span[aria-hidden]{opacity:.5} .pl-shero-title .pl-line > span{display:inline-block;white-space:normal} .pl-shero-title .pl-line:nth-child(2) > span{animation-delay:.1s} .pl-shero-title .pl-line:nth-child(3) > span{animation-delay:.2s} .pl-shero-lead{max-width:560px!important} .pl-fade-1,.pl-fade-2,.pl-fade-3{opacity:0;animation:pl-fadeUp 1s var(--ease) forwards} .pl-fade-1{animation-delay:.5s}.pl-fade-2{animation-delay:.65s}.pl-fade-3{animation-delay:.8s} .pl-fade-1,.pl-fade-2,.pl-fade-3{transform:translateY(20px)} .pl-hchips .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:8px;margin:0!important} .pl-hchips .elementor-icon-list-item{margin:0!important;padding:8px 14px!important;border-radius:999px;background:var(--ice);align-items:center} .pl-hchips .elementor-icon-list-item::after{display:none!important} .pl-hchips .elementor-icon-list-icon{padding:0!important} .pl-hchips .elementor-icon-list-icon svg,.pl-hchips .elementor-icon-list-icon i{width:14px!important;height:14px;font-size:14px!important} .pl-hchips .elementor-icon-list-text{padding-left:8px!important} .pl-shero-l{min-width:0} /* ===================================================================== 21 INNSIKT – tallkortene (pl-fact) Den store teksten (pl-lit) lyser opp ord for ord (seksjon 07). ===================================================================== */ .pl-fact-small{margin-top:auto!important} /* ===================================================================== 22 TRE FASER – Elementor «Faner» (Nested Tabs) med klassen pl-tabs Fanene ser ut som en pille-meny; valgt fane får hvit bakgrunn. Innholdet i hver fane er en container (pl-layer-panel) med to kolonner: tekst til venstre, fakta-rader (pl-kv-row) til høyre. ===================================================================== */ .pl-layers-h2{max-width:1000px!important} .pl-tabs .e-n-tabs{gap:36px} .pl-tabs .e-n-tabs-heading{display:inline-flex!important;flex-wrap:nowrap!important;gap:4px!important;padding:6px;border-radius:999px;background:rgba(255,255,255,.07);align-self:flex-start;max-width:100%;width:auto} .pl-tabs .e-n-tab-title{height:52px;padding:0 26px!important;border-radius:999px!important;border:0!important;background:transparent!important;flex:0 0 auto!important;white-space:nowrap;transition:color .35s,background-color .45s var(--ease)!important} .pl-tabs .e-n-tab-title[aria-selected="true"]{background:#fff!important} .pl-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text{color:var(--navy)!important} .pl-tabs .e-n-tab-title:not([aria-selected="true"]):hover .e-n-tab-title-text{color:#fff!important} .pl-tabs .e-n-tabs-content > .e-con.e-active{animation:pl-fadeUp .7s var(--ease) both} .pl-tabs .e-n-tabs-content > .e-con{transform:translateY(10px)} .pl-tabs .e-n-tabs-content > .e-con.e-active{transform:none} .pl-layer-p{max-width:520px!important} .pl-kv-k .elementor-heading-title{padding-top:3px} @media (max-width:767px){ .pl-tabs .e-n-tabs{gap:28px} .pl-tabs .e-n-tabs-heading{display:flex!important;width:100%} .pl-tabs .e-n-tab-title{flex:1 1 0!important;padding:0 8px!important;min-width:0} .pl-tabs .e-n-tab-title-text{font-size:14px!important} .pl-kv-k .elementor-heading-title{padding-top:0} } /* ===================================================================== 23 HVA SOM ER INKLUDERT – kortene (pl-ws, pl-ws-dark = blått kort) Løfter seg ved hover, og et lys følger musen (pagelook.js 10d). pl-ws-ti = ikon-boksen (HTML-widget med SVG). pl-wtags = små piller nederst (Ikonliste «inline»). ===================================================================== */ .pl-ws{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease)!important} .pl-ws::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(27,107,181,.16),transparent 60%);opacity:0;transition:opacity .4s} .pl-ws-dark::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(125,184,240,.25),transparent 60%)} .pl-ws:hover{transform:translateY(-6px)} .pl-ws:hover::after{opacity:1} .pl-js .pl-ws.pl-rv{transition:opacity 1s var(--ease),transform .5s var(--ease)!important} .pl-js .pl-ws.pl-rv.is-in:hover{transform:translateY(-6px)} .pl-ws-ti{width:52px;height:52px;border-radius:16px;background:#fff;display:grid;place-items:center;color:var(--navy)} .pl-ws-ti svg{width:24px;height:24px} .pl-ws-dark .pl-ws-ti{background:rgba(255,255,255,.14);color:#fff} .pl-wtags{margin-top:auto!important} .pl-wtags .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:6px;margin:0!important} .pl-wtags .elementor-icon-list-item{margin:0!important;padding:5px 11px!important;border-radius:999px;background:#fff} .pl-ws-dark .pl-wtags .elementor-icon-list-item{background:rgba(255,255,255,.12)} .pl-wtags .elementor-icon-list-item::after,.pl-wtags .elementor-icon-list-icon{display:none!important} /* ===================================================================== 24 DEMO / KALKULATOR (seksjonen med id «demo» o.l.) pl-checks = hakelisten (to kolonner → én på mobil). pl-vis = HTML-widget med interaktiv illustrasjon (tjenester.css). ===================================================================== */ .pl-audit-p{max-width:500px!important} .pl-checks .elementor-icon-list-items{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 20px} .pl-checks .elementor-icon-list-item{margin:0!important;padding:0!important;align-items:flex-start!important} .pl-checks .elementor-icon-list-icon{margin-top:3px} .pl-checks .elementor-icon-list-text,.pl-cmp-c2 .elementor-icon-list-text,.pl-cmp-c3 .elementor-icon-list-text,.pl-plan-list .elementor-icon-list-text{align-self:flex-start!important} @media (max-width:767px){.pl-checks .elementor-icon-list-items{grid-template-columns:1fr}} .pl-vis{width:100%;min-width:0} .pl-vis > .elementor-widget-container{width:100%} .pl-schema{display:none!important} /* ===================================================================== 25 TIDSLINJE (id «metode») pl-road-l = venstre kolonne, står stille mens du scroller (desktop). pl-road = høyre kolonne. Linjen (pl-road-line) og prikkene fylles av tjenester.js seksjon 01 (klassen is-on). pl-mile = én milepæl. pl-mtags = piller under teksten. ===================================================================== */ @media (min-width:1025px){.pl-road-l{position:sticky!important;top:130px;align-self:start}} .pl-road-p{max-width:440px!important} .pl-road{position:relative;padding-left:56px!important} .pl-road-line-w{position:absolute!important;left:15px;top:10px;bottom:10px;width:2px!important;margin:0!important} .pl-road-line-w .elementor-widget-container,.pl-road-line{height:100%} .pl-road-line{position:relative;width:2px;background:var(--line)} .pl-road-line i{position:absolute;inset:0;background:var(--grad);transform-origin:50% 0;transform:scaleY(0)} .pl-mile{position:relative;padding-bottom:56px!important} .pl-mile:last-child{padding-bottom:0!important} .pl-mile::before{content:"";position:absolute;left:-56px;top:2px;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--line);box-sizing:border-box;transition:border-color .4s} .pl-mile::after{content:"";position:absolute;left:-45px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--line);transition:background .4s} .pl-mile.is-on::before{border-color:var(--azure)} .pl-mile.is-on::after{background:var(--azure)} .pl-mtags .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:6px;margin:0!important} .pl-mtags .elementor-icon-list-item{margin:0!important;padding:6px 12px!important;border-radius:999px;border:1px solid #C9D6EE} .pl-mtags .elementor-icon-list-item::after,.pl-mtags .elementor-icon-list-icon{display:none!important} @media (max-width:767px){ .pl-road{padding-left:48px!important} .pl-mile{padding-bottom:44px!important} .pl-mile::before{left:-48px} .pl-mile::after{left:-37px} } .elementor-editor-active .pl-road-line i{transform:none} /* ===================================================================== 26 CASE (pl-casefeat) pl-cf-steps = nummerert liste (Tekst-widget med
    ) – tallene «01, 02 …» i kursiv serif. pl-vis-case = bildet til høyre (HTML-widget). ===================================================================== */ .pl-cf-steps ol{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:12px} .pl-cf-steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start} .pl-cf-steps li::before{content:"0" counter(s);flex-shrink:0;width:30px;font-family:var(--font-serif);font-style:italic;font-size:22px;line-height:1;color:var(--sky)} .pl-vis-case,.pl-vis-case > .elementor-widget-container,.pl-vis-case .cf-vis{height:100%} .pl-vis-case .cf-vis{min-height:520px} @media (max-width:1024px){.pl-vis-case .cf-vis{min-height:380px}} /* ===================================================================== 27 SAMMENLIGNING (pl-compare) Hver rad er en grid-container (pl-cmp-row) med tre celler: pl-cmp-c1 = hva, pl-cmp-c2 = «andre», pl-cmp-c3 = Pagelook (uthevet). Nettbrett/mobil: første celle legger seg over de to andre. ===================================================================== */ .pl-cmp-row{border-top:1px solid var(--line)} .pl-cmp-row:first-child{border-top:0} .pl-cmp-row > .elementor-element{padding:22px 28px;display:flex;align-items:center;min-width:0} .pl-cmp-head > .elementor-element{padding-top:26px;padding-bottom:26px} .pl-cmp-row > .pl-cmp-c3{background:var(--ice)} .pl-cmp-head > .pl-cmp-c3{background:var(--navy)} .pl-cmp-c2 .elementor-icon-list-item,.pl-cmp-c3 .elementor-icon-list-item{margin:0!important;padding:0!important;align-items:flex-start!important} .pl-cmp-c2 .elementor-icon-list-icon,.pl-cmp-c3 .elementor-icon-list-icon{margin-top:4px} .pl-cmp-c2 .elementor-icon-list-icon svg{fill:#8FA3CF!important} .pl-cmp-row .elementor-icon-list-icon,.pl-checks .elementor-icon-list-icon,.pl-plan-list .elementor-icon-list-icon{flex-shrink:0} @media (max-width:767px){.pl-cmp-head .elementor-heading-title{font-size:12px!important;letter-spacing:.04em!important}} @media (max-width:1024px){ .pl-cmp-row > .elementor-element{padding:14px 18px} .pl-cmp-row > .pl-cmp-c1{grid-column:1/-1;padding-bottom:0} .pl-cmp-row:not(.pl-cmp-head) > .pl-cmp-c1 .elementor-heading-title{font-weight:700} .pl-cmp-head > .pl-cmp-c1{display:none} .pl-cmp-row > .pl-cmp-c2,.pl-cmp-row > .pl-cmp-c3{align-items:flex-start} } /* ===================================================================== 28 PRISER (garanti-båndet) + FAKTA-BOKS (ChatGPT Ads) pl-guar-ic = skjold-ikonet i en avrundet boks. pl-factbox = mørk venstre side + faktaceller (pl-fb-cell) til høyre. ===================================================================== */ .pl-guar-ic{width:auto!important} .pl-guar-ic .elementor-icon{width:80px;height:80px;border-radius:24px;background:rgba(255,255,255,.14);display:grid!important;place-items:center} .pl-guar-p{max-width:640px!important} @media (max-width:1024px){.pl-guar{grid-template-columns:1fr!important}} .pl-fine{max-width:760px!important;margin-left:auto!important;margin-right:auto!important} .pl-fb-date{align-self:flex-start;width:auto!important} .pl-fb-date .elementor-heading-title{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(125,184,240,.16)} .pl-fb-cell{border-top:1px solid var(--line);border-left:1px solid var(--line)} .pl-fb-cell:nth-child(-n+2){border-top:0} .pl-fb-src{grid-column:1/-1;padding:16px 26px;border-top:1px solid var(--line);background:var(--ice)} .pl-fb-src a{color:var(--royal);font-weight:600;border-bottom:1px solid var(--mist);text-decoration:none} @media (max-width:1024px){.pl-factbox{grid-template-columns:minmax(0,1fr)!important}} @media (max-width:767px){ .pl-fb-cell{border-left:0} .pl-fb-cell:nth-child(2){border-top:1px solid var(--line)} } /* ===================================================================== 29 RELATERTE TJENESTER (pl-rel = kort som er en lenke) Hover: marineblå bakgrunn, hvit tekst, pil-sirkelen roterer. ===================================================================== */ .pl-rel{text-decoration:none!important;transition:background-color .4s var(--ease),transform .4s var(--ease)!important} .pl-rel{flex-wrap:nowrap!important} .pl-rel-l{min-width:0;flex:1 1 auto!important;width:auto!important} .pl-rel .elementor-heading-title,.pl-rel .elementor-widget-text-editor{transition:color .4s} .pl-rel:hover{background-color:var(--navy)!important;transform:translateY(-4px)} .pl-js .pl-rel.pl-rv{transition:opacity 1s var(--ease),transform .4s var(--ease),background-color .4s var(--ease)!important} .pl-js .pl-rel.pl-rv.is-in:hover{transform:translateY(-4px)} .pl-rel:hover .pl-rel-t .elementor-heading-title{color:#fff!important} .pl-rel:hover .pl-rel-d{color:var(--mist)!important} .pl-rel-go{width:auto!important;flex:0 0 auto!important} .pl-rel-go .elementor-icon{width:44px;height:44px;border-radius:50%;background:#fff;display:grid!important;place-items:center;transition:transform .5s var(--ease)} .pl-rel:hover .pl-rel-go .elementor-icon{transform:rotate(-45deg)} /* Tjenestesidene i editoren og med redusert bevegelse: vis alt */ .elementor-editor-active .pl-fade-1,.elementor-editor-active .pl-fade-2,.elementor-editor-active .pl-fade-3{opacity:1;transform:none;animation:none} @media (prefers-reduced-motion:reduce){.pl-fade-1,.pl-fade-2,.pl-fade-3{opacity:1;transform:none;animation:none}.pl-road-line i{transform:none}} /* ##################################################################### KONTAKT (/kontakt/) OG TAKK (/takk/) Seksjonskart: docs/KONTAKT-TAKK.md · JS: assets/js/kontakt.js ##################################################################### */ /* ===================================================================== 30 KONTAKT-HERO – ingressen til høyre for tittelen ===================================================================== */ .pl-khero-lead{max-width:480px!important} .pl-thero .pl-tlead{max-width:560px!important} /* ===================================================================== 31 HURTIGKORT (pl-qc) – «Ring oss / Send e-post / Besøk oss» og «Mens du venter»-kortene. Hele kortet er en lenke (container). Hover: marineblå bakgrunn, hvit tekst, løfter seg litt. ===================================================================== */ .pl-qc{text-decoration:none!important;transition:background-color .4s var(--ease),transform .4s var(--ease)!important} .pl-js .pl-qc.pl-rv{transition:opacity 1s var(--ease),transform .4s var(--ease),background-color .4s var(--ease)!important} .pl-qc:hover{background-color:var(--navy)!important;transform:translateY(-4px)} .pl-qc-ic{width:auto!important} .pl-qc-ic .elementor-icon{width:48px;height:48px;border-radius:14px;background:#fff;display:grid!important;place-items:center;transition:background-color .4s,color .4s} .pl-qc:hover .pl-qc-ic .elementor-icon{background:rgba(255,255,255,.14);color:#fff} .pl-qc:hover .pl-qc-ic .elementor-icon svg{fill:#fff} .pl-qc .elementor-heading-title,.pl-qc .elementor-widget-text-editor{transition:color .4s} .pl-qc:hover .pl-qc-big .elementor-heading-title{color:#fff!important} .pl-qc:hover .pl-qc-small .elementor-heading-title{color:var(--sky)!important} .pl-qc:hover .pl-qc-sub{color:var(--mist)!important} .pl-qc-big .elementor-heading-title{overflow-wrap:anywhere} /* ===================================================================== 32 KONTAKTSKJEMAET (Elementor Pro-skjema i kortet pl-kform) Styres etter felttype, så nye felt får samme utseende automatisk: avkrysning/radio = piller · tekst/e-post/telefon/nettside/tekstfelt = etiketten ligger inni feltet og krymper opp når du skriver (JS setter is-filled) · «Godkjenning» = samtykke-avkrysningen pl-kform-note = «Svar innen …» til høyre for knappen (desktop) ===================================================================== */ .pl-kform{position:relative;box-shadow:0 40px 80px rgba(30,58,142,.10)} .pl-kform-f .elementor-field-label small{font-weight:500;color:var(--muted)} .pl-kform-f .elementor-form-fields-wrapper{row-gap:0} .pl-kform-f .elementor-field-group{margin-bottom:14px} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio),.pl-kform-f .elementor-field-type-html{margin-bottom:28px!important} .pl-kform-f .pl-kf-legend{display:block;font-size:15px;font-weight:700;color:var(--ink);margin:0 0 -2px} /* Piller */ .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-subgroup{display:flex!important;flex-wrap:wrap;gap:8px} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option{position:relative;display:inline-flex!important;margin:0!important;padding:0!important} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option label{display:inline-flex!important;align-items:center;gap:8px;height:46px;margin:0!important;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;font-weight:600;color:var(--navy-900);background:#fff;transition:all .25s;cursor:pointer;line-height:1} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option label::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid #B8C4DC;transition:all .25s;flex-shrink:0;box-sizing:border-box} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input[type=checkbox] + label::before{border-radius:5px} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input:checked + label{background:var(--navy);border-color:var(--navy);color:#fff} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input:checked + label::before{background:#fff;border-color:#fff;box-shadow:inset 0 0 0 3px var(--navy)} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input:focus-visible + label{outline:2px solid var(--azure);outline-offset:3px} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option:hover label{border-color:var(--royal)} .pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option input:checked:hover + label{border-color:var(--navy)} /* Flytende etiketter */ .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea){position:relative} .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea) > label.elementor-field-label{position:absolute;left:24px;top:20px;margin:0!important;font-size:16px!important;font-weight:400!important;color:var(--muted)!important;pointer-events:none;transition:all .25s var(--ease);z-index:1;line-height:1.2} .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea).is-filled > label.elementor-field-label, .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea):focus-within > label.elementor-field-label{top:8px;font-size:12px!important;font-weight:600!important;color:var(--royal)!important} .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea) .elementor-field{height:62px;padding:24px 18px 8px!important;border-width:1.5px;transition:border-color .3s,box-shadow .3s} .pl-kform-f :is(.elementor-field-type-text,.elementor-field-type-email,.elementor-field-type-tel,.elementor-field-type-url,.elementor-field-type-textarea) textarea.elementor-field{height:auto;min-height:140px;padding-top:28px!important;resize:vertical;line-height:1.5} .pl-kform-f .elementor-field:focus{outline:none;border-color:var(--royal)!important;box-shadow:0 0 0 5px rgba(28,85,166,.12)} /* Samtykke */ .pl-kform-f .elementor-field-type-acceptance > label.elementor-field-label{display:none} .pl-kform-f .elementor-field-type-acceptance .elementor-field-option{display:flex!important;gap:12px;align-items:flex-start} .pl-kform-f .elementor-field-type-acceptance .elementor-field-option input{width:20px;height:20px;margin:2px 0 0;accent-color:#1E3A8E;flex-shrink:0} .pl-kform-f .elementor-field-type-acceptance .elementor-field-option label{font-size:14px;font-weight:400;color:var(--text);line-height:1.5} .pl-kform-f .elementor-field-type-acceptance a{color:var(--royal);font-weight:600} .pl-kform-f .e-form__buttons{margin-top:8px} /* «Svar innen …» */ .pl-kform-note,.pl-kform-note p{display:flex;align-items:center;gap:8px;margin:0} .pl-kform-note i{width:8px;height:8px;border-radius:50%;background:var(--azure);box-shadow:0 0 0 4px rgba(27,107,181,.18);flex-shrink:0} @media (min-width:768px){ .pl-kform-note{position:absolute!important;right:48px;bottom:48px;height:58px;width:auto!important;max-width:45%;display:flex;align-items:center} .pl-kform:has(.elementor-message) .pl-kform-note{display:none} } @media (min-width:768px) and (max-width:1024px){.pl-kform-note{right:36px;bottom:36px}} @media (max-width:767px){.pl-kform-note{margin-top:-12px!important}.pl-kform-f :is(.elementor-field-type-checkbox,.elementor-field-type-radio) .elementor-field-option label{height:42px;padding:0 14px;font-size:14px}} /* ===================================================================== 33 KONTAKTPERSON + «DETTE SKJER VIDERE» (høyre kolonne pl-kside) Står stille mens du scroller (desktop). Nettbrett: to kolonner, mobil: under hverandre. ===================================================================== */ @media (min-width:1101px){.pl-kside{position:sticky!important;top:110px;align-self:start}} @media (max-width:1100px) and (min-width:641px){.pl-kside{display:grid!important;grid-template-columns:1fr 1fr}} .pl-person-img{margin:0!important} .pl-person-img img{display:block;width:100%!important;aspect-ratio:4/3;object-fit:cover;border-radius:0!important} .pl-person-links,.pl-person-links p{display:flex;gap:16px;flex-wrap:wrap;margin:0} .pl-person-links a{color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(125,184,240,.5);transition:color .3s} .pl-person-links a:hover{color:var(--sky)} .pl-steps2 ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:s} .pl-steps2 li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start} .pl-steps2 li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:15px} .pl-steps2 li b{display:block;font-size:16px} .pl-steps2 li span{font-size:14.5px;color:var(--text)} /* ===================================================================== 34 BESØK OSS – kart (Google Maps-widget) med merke, og bilder ===================================================================== */ .pl-map{position:relative} .pl-map-gm{position:absolute!important;inset:0;width:100%!important;height:100%;margin:0!important} .pl-map-gm .elementor-custom-embed,.pl-map-gm iframe{height:100%!important;width:100%;display:block} .pl-map-gm iframe{border:0;filter:grayscale(.4) contrast(1.05) saturate(.9)} .pl-pin-w{position:absolute!important;left:20px;bottom:20px;width:auto!important;z-index:2;margin:0!important} .pl-pin{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:#fff;box-shadow:0 20px 40px rgba(10,20,51,.18);font-size:14px;color:var(--text)} .pl-pin i{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex-shrink:0} .pl-pin b{display:block;font-size:15px;color:var(--ink)} .pl-kphoto{margin:0!important} .pl-kphoto img{display:block;width:100%!important;aspect-ratio:4/3;object-fit:cover;border-radius:24px!important;background:linear-gradient(135deg,#C9DCF5,#7DB8F0)} .pl-kphotos > .pl-kphoto:first-child,.pl-kphotos > .pl-kphoto:first-child img{height:100%} .pl-kphotos > .pl-kphoto:first-child img{aspect-ratio:auto} @media (max-width:767px){ .pl-kphotos > .pl-kphoto:first-child{grid-column:1/-1} .pl-kphotos > .pl-kphoto:first-child img{aspect-ratio:16/10;height:auto} } /* ===================================================================== 35 TAKK – hake som spretter inn, kontaktperson, mørk «Dette skjer nå»-boks og stegkortene ===================================================================== */ .pl-tick-w{width:auto!important} .pl-tick{position:relative;width:76px;height:76px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;margin-bottom:26px;animation:pl-tPop .8s var(--ease) both} .pl-tick::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--mist);animation:pl-tRing 2.4s ease-out .6s infinite} .pl-tick svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:pl-tDraw .6s ease-out .45s forwards} @keyframes pl-tPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} @keyframes pl-tDraw{to{stroke-dashoffset:0}} @keyframes pl-tRing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}} .pl-tperson{align-self:stretch} .pl-tperson .pl-person-img{flex:1 1 auto!important;min-height:220px;position:relative} .pl-tperson .pl-person-img img{position:absolute;inset:0;height:100%!important;aspect-ratio:auto} @media (max-width:1024px){.pl-tperson .pl-person-img{flex:none!important;min-height:0}.pl-tperson .pl-person-img img{position:static;aspect-ratio:16/9;height:auto!important}} .pl-tstep{transition:background-color .4s,transform .4s!important} .pl-tstep:hover{background-color:rgba(255,255,255,.1)!important;transform:translateY(-4px)} .pl-js .pl-tstep.pl-rv{transition:opacity 1s var(--ease),transform .4s var(--ease),background-color .4s!important} @media (max-width:767px){.pl-tcall,.pl-tcall .elementor-button-wrapper,.pl-tcall .elementor-button{width:100%}} @media (prefers-reduced-motion:reduce){.pl-tick,.pl-tick::after,.pl-tick svg path{animation:none!important;stroke-dashoffset:0}} .elementor-editor-active .pl-kform-note{position:relative!important;right:auto;bottom:auto} /* ===================================================================== 36 PERSONVERN (/personvern/) – hero pl-pv-meta = to «chips» (Sist oppdatert / lesetid) med ikon pl-pv-short = mørkt «Kort fortalt»-kort med hake foran hvert punkt Datoen «Sist oppdatert» endrer du i tekst-widgeten i heroen. ===================================================================== */ .pl-pv-lead{max-width:600px!important} .pl-pv-meta,.pl-pv-meta p{display:flex;flex-wrap:wrap;gap:10px;margin:0} .pl-pv-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--ice);color:var(--navy);font-size:14px;font-weight:600;line-height:1} .pl-pv-chip::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .pl-pv-chip-cal{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")} .pl-pv-chip-time{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} .pl-pv-short{position:relative;isolation:isolate} .pl-pv-short::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(125,184,240,.35),transparent 70%);top:-110px;right:-90px;pointer-events:none;z-index:-1} .pl-pv-shortlist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .pl-pv-shortlist li{position:relative;padding-left:36px} .pl-pv-shortlist li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:var(--sky);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat} .pl-pv-shortlist li b{color:#fff;font-weight:600} /* ===================================================================== 37 PERSONVERN – innholdsliste og seksjonene 01–08 pl-pv-toc = nummerert innholdsliste, står stille (desktop), aktiv seksjon markeres (personvern.js). Skjules under 1100px. pl-pv-sec = én seksjon (id = ankeret i innholdslisten) pl-pv-id = firmaopplysninger i rutenett med tynne linjer pl-pv-card = «Når du kontakter oss …»-kortene pl-pv-rights = de seks rettighetene pl-pv-cta = blått kontaktbånd nederst ===================================================================== */ .pl-pv-content{max-width:820px} .pl-pv-sec{scroll-margin-top:110px} .pl-pv-sec .elementor-widget-text-editor p{margin:0} .pl-pv-sec .elementor-widget-text-editor a:not(.elementor-button){color:var(--royal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .pl-pv-sec .elementor-widget-text-editor a:hover{color:var(--navy)} .pl-pv-sec strong{color:var(--ink);font-weight:600} @media (min-width:1101px){.pl-pv-toc-w{position:sticky!important;top:110px;align-self:start}} @media (max-width:1100px){.pl-pv-toc-w{display:none!important}.pl-pv-grid{grid-template-columns:minmax(0,1fr)!important}} .pl-pv-toc small{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:14px} .pl-pv-toc ol{list-style:none;margin:0;padding:0 0 0 2px;border-left:1.5px solid var(--line);counter-reset:toc} .pl-pv-toc a{position:relative;display:flex;gap:10px;padding:8px 0 8px 18px;font-size:15px;color:var(--muted);text-decoration:none;transition:color .3s var(--ease)} .pl-pv-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--sky);min-width:20px} .pl-pv-toc a::after{content:"";position:absolute;left:-2px;top:8px;bottom:8px;width:2.5px;border-radius:2px;background:var(--grad);transform:scaleY(0);transition:transform .35s var(--ease)} .pl-pv-toc a:hover{color:var(--navy)} .pl-pv-toc a.on{color:var(--ink);font-weight:600} .pl-pv-toc a.on::after{transform:scaleY(1)} .pl-pv-id > .e-con{background:#fff!important;padding:18px 22px!important} .pl-pv-id a{color:var(--ink)!important;text-decoration:none!important;font-weight:600} .pl-pv-id .elementor-widget-text-editor{font-weight:600;color:var(--ink)!important} .pl-pv-card{transition:transform .4s var(--ease),box-shadow .4s var(--ease)!important} .pl-pv-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(15,30,82,.35)} .pl-js .pl-pv-card.pl-rv{transition:opacity 1s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)!important} .pl-js .pl-pv-card.pl-rv.is-in:hover{transform:translateY(-3px)} .pl-pv-dl{padding-top:16px;border-top:1px solid rgba(28,85,166,.14)} .pl-pv-list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .pl-pv-list li{position:relative;padding-left:22px} .pl-pv-list li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--azure)} .pl-pv-right{transition:border-color .3s,background-color .3s!important} .pl-pv-right:hover{border-color:var(--sky)!important;background-color:var(--ice)} .pl-pv-cta-l{width:auto!important;flex:1 1 320px!important} .pl-pv-cta-links{width:auto!important} .pl-pv-cta .elementor-heading-title em{color:var(--mist)} /* Knappene i det blå båndet: hvite piller uten pil-sirkel */ .pl-pv-btn .elementor-button{height:50px;padding:0 22px!important;transition:transform .3s var(--ease),background-color .3s} .pl-pv-btn .elementor-button::after,.pl-pv-btn .elementor-button::before{display:none} .pl-pv-btn .elementor-button:hover{transform:translateY(-2px);background-color:var(--ice)!important} .pl-pv-btn-ghost .elementor-button{background-color:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)} .pl-pv-btn-ghost .elementor-button:hover{background-color:rgba(255,255,255,.2)!important} @media (max-width:767px){.pl-pv-cta{align-items:stretch!important}.pl-pv-cta-l{flex:0 0 auto!important;width:100%!important}.pl-pv-cta-links{width:100%!important}.pl-pv-cta-links > .pl-pv-btn{flex:1 1 auto!important}.pl-pv-btn .elementor-button-wrapper,.pl-pv-btn .elementor-button{width:100%;justify-content:center}.pl-pv-btn .elementor-button{padding:0 16px!important}} /* ===================================================================== 38 OM OSS (/om-oss/) pl-ab-cover = stort kontorbilde med to merkelapper (sted + «150+») pl-ab-owner = Leo: portrett, navn, direkte kontakt (står stille) pl-ab-lit = brevets overskrift – ordene lyser opp (seksjon 07) pl-ab-sign = signaturen tegnes når brevet kommer inn i bildet pl-ab-photos = tre bilder (stort til venstre, to til høyre) pl-abtile = «Dette kan du forvente»-kortene (lyset følger musen) pl-ab-stats = tallene, teller opp (pagelook.js 10f) pl-ab-q = sitatkortene (pl-ab-q-feat = det blå i midten) pl-ab-cta-box = blått avslutningskort ===================================================================== */ /* Hero-bilde */ .pl-ab-cover{position:relative} .pl-ab-cover-img{margin:0!important} .pl-ab-cover-img img{display:block;width:100%!important;aspect-ratio:21/9;object-fit:cover;border-radius:0!important;transform:scale(1.06);transition:transform 1.8s var(--ease)} .pl-ab-cover.is-in .pl-ab-cover-img img,.elementor-editor-active .pl-ab-cover-img img{transform:none} .pl-ab-chip-w{position:absolute!important;width:auto!important;z-index:2;margin:0!important} .pl-ab-chip-loc-w{left:24px;bottom:24px} .pl-ab-chip-stat-w{right:24px;top:24px} .pl-ab-chip{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;padding:14px 20px 14px 14px;box-shadow:0 20px 50px rgba(10,20,51,.16);color:var(--ink)} .pl-ab-chip-loc i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none} .pl-ab-chip-loc span{display:flex;flex-direction:column;font-size:14px;color:var(--muted);line-height:1.35} .pl-ab-chip-loc b{font-size:16px;color:var(--ink)} .pl-ab-chip-stat{padding:16px 22px;animation:pl-bob 6s ease-in-out infinite} .pl-ab-chip-stat b{font-size:40px;letter-spacing:-.04em;line-height:1;color:var(--royal)} .pl-ab-chip-stat span{font-size:13px;line-height:1.3;color:var(--text)} @media (max-width:1024px){.pl-ab-cover-img img{aspect-ratio:16/10}} @media (max-width:767px){.pl-ab-chip-stat-w{display:none}.pl-ab-chip-loc-w{left:12px;right:12px;bottom:12px}} /* Brevet */ @media (min-width:1025px){.pl-ab-owner{position:sticky!important;top:120px;align-self:start}} .pl-ab-portrait-w{width:100%!important} .pl-ab-portrait{position:relative;aspect-ratio:4/5;border-radius:28px;background:var(--grad);display:grid;place-items:center;overflow:hidden;color:#fff} .pl-ab-portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(125,184,240,.55),transparent 60%)} .pl-ab-portrait span{font-size:96px;font-weight:700;letter-spacing:-.05em;opacity:.9;position:relative;z-index:1} .pl-ab-portrait small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:12px;opacity:.75;z-index:1} .pl-ab-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .pl-ab-direct,.pl-ab-direct p{display:flex;flex-direction:column;gap:8px;margin:0} .pl-ab-direct{padding-top:18px;border-top:1px solid var(--line)} .pl-ab-direct a{color:var(--navy);text-decoration:none;transition:color .25s} .pl-ab-direct a:hover{color:var(--azure)} .pl-ab-body p{margin:0 0 1.1em} .pl-ab-body b{color:var(--ink)} .pl-ab-body{max-width:640px} .pl-ab-sign{display:flex;flex-direction:column} .pl-ab-sign svg{width:220px;height:62px;margin-bottom:6px} .pl-ab-sign path{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease) .3s} .pl-ab-letterbody.is-in .pl-ab-sign path,.elementor-editor-active .pl-ab-sign path{stroke-dashoffset:0} .pl-ab-sign b{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:30px;color:var(--ink);line-height:1} .pl-ab-sign span{font-size:14px;color:var(--muted);margin-top:4px} @media (max-width:1024px){ .pl-ab-owner{display:grid!important;grid-template-columns:140px 1fr;gap:10px 20px!important;align-items:center} .pl-ab-portrait-w{grid-row:1/3} .pl-ab-portrait{border-radius:22px} .pl-ab-portrait span{font-size:48px} .pl-ab-portrait small{display:none} .pl-ab-direct{border:0;padding:0} } @media (max-width:767px){.pl-ab-owner{grid-template-columns:96px 1fr}} /* Bilder */ .pl-ab-photos{grid-template-rows:1fr 1fr!important;height:clamp(420px,52vw,760px)} .pl-ab-photos > .pl-ab-photo:first-child{grid-row:1/3} .pl-ab-photo{position:relative;isolation:isolate} .pl-ab-photo-img{position:absolute!important;inset:0;width:100%!important;height:100%;margin:0!important;z-index:-1} .pl-ab-photo-img img{width:100%!important;height:100%!important;object-fit:cover;border-radius:0!important;transition:transform 1.2s var(--ease)} .pl-ab-photo:hover .pl-ab-photo-img img{transform:scale(1.05)} .pl-ab-photo-cap{width:auto!important} .pl-ab-photo-cap .elementor-heading-title{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} @media (max-width:1024px){ .pl-ab-photos{height:auto;grid-template-rows:auto auto!important} .pl-ab-photos > .pl-ab-photo:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10} .pl-ab-photos > .pl-ab-photo{aspect-ratio:1} } .pl-ab-maplink a,.pl-ab-tile-link a{color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .pl-ab-maplink a::after,.pl-ab-tile-link a::after{content:"→";transition:transform .3s var(--ease)} .pl-ab-maplink a:hover::after,.pl-ab-tile-link a:hover::after{transform:translateX(4px)} /* Kortene «Dette kan du forvente» */ .pl-abtile{position:relative;overflow:hidden;isolation:isolate;transition:background-color .4s,border-color .4s,transform .5s var(--ease)!important} .pl-abtile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(125,184,240,.35),transparent 60%)} .pl-abtile:hover{background-color:#fff!important;border-color:var(--mist)!important;transform:translateY(-4px)} .pl-abtile:hover::after{opacity:1} .pl-js .pl-abtile.pl-rv{transition:opacity 1s var(--ease),transform .5s var(--ease),background-color .4s,border-color .4s!important} .pl-js .pl-abtile.pl-rv.is-in:hover{transform:translateY(-4px)} .pl-ab-ti-w{margin-bottom:18px!important} .pl-ab-ti{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff} .pl-ab-n{position:absolute;right:0;top:0;font-size:14px;font-weight:600;color:var(--muted)} .pl-ab-tile-link{margin-top:auto!important;padding-top:6px} /* Tall */ .pl-ab-nums{isolation:isolate} .pl-ab-blob-w{position:absolute!important;inset:0;width:100%!important;pointer-events:none;z-index:-1;margin:0!important} .pl-ab-blob{position:absolute;width:640px;height:640px;border-radius:50%;background:#1C55A6;opacity:.45;filter:blur(80px);right:-200px;top:-220px;animation:pl-float1 20s ease-in-out infinite} .pl-ab-blob-c{width:520px;height:520px;background:#7DB8F0;opacity:.35;right:-140px;top:auto;bottom:-240px;animation:pl-float2 18s ease-in-out infinite} .pl-ab-stats{border-top:1px solid rgba(255,255,255,.14)} .pl-ab-stat{padding:36px 28px 0 0!important} .pl-ab-stat + .pl-ab-stat{padding-left:28px!important;border-left:1px solid rgba(255,255,255,.14)} .pl-ab-num .elementor-heading-title{background:linear-gradient(180deg,#fff 30%,#7DB8F0);-webkit-background-clip:text;background-clip:text;color:transparent!important} /* Gradient-tekst klippes bare innenfor boksen. Med negativ bokstavavstand stikker siste siffer (0, 8 …) ut og ble kuttet til høyre. Litt luft til høyre (som trekkes tilbake med negativ marg) løser det. (2.9.3) */ .pl-ab-num .elementor-heading-title{display:inline-block;padding-right:.12em;margin-right:-.12em} .pl-ab-numtxt{max-width:200px} @media (max-width:1024px){ .pl-ab-stat{padding-bottom:28px!important} .pl-ab-stat:nth-child(3){padding-left:0!important;border-left:0} } @media (max-width:767px){ .pl-ab-stat,.pl-ab-stat + .pl-ab-stat{padding:24px 0!important;border-left:0;border-bottom:1px solid rgba(255,255,255,.14)} } /* Sitater */ .pl-ab-q{box-shadow:0 20px 60px rgba(10,20,51,.05)} .pl-ab-qtag{width:auto!important;align-self:flex-start} .pl-ab-qtag .elementor-heading-title{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--ice)} .pl-ab-q-feat .pl-ab-qtag .elementor-heading-title{background:rgba(255,255,255,.16)} .pl-ab-qtext{flex:1 1 auto!important} .pl-ab-qwho{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)} .pl-ab-qwho > span:last-child{display:flex;flex-direction:column} .pl-ab-qwho b{font-size:16px;color:var(--ink)} .pl-ab-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--navy);font-weight:700;font-size:14px;flex:none} .pl-ab-q-feat .pl-ab-qwho{color:var(--mist)} .pl-ab-q-feat .pl-ab-qwho b{color:#fff} .pl-ab-q-feat .pl-ab-av{background:rgba(255,255,255,.2);color:#fff} @media (min-width:1025px){.pl-ab-q-feat{transform:translateY(-16px)}.pl-js .pl-ab-q-feat.pl-rv.is-in{transform:translateY(-16px)}} /* Veien videre + CTA */ .pl-ab-grow-p{max-width:560px} .pl-ab-gcard{border-left:4px solid var(--azure)!important} .pl-ab-cta-box{position:relative;isolation:isolate} .pl-ab-cta-h{max-width:900px} .pl-ab-cta-h .elementor-heading-title em{color:var(--sky)} .pl-btn-line-white .elementor-button{color:#fff!important} @media (prefers-reduced-motion:reduce){.pl-ab-chip-stat{animation:none}.pl-ab-sign path{stroke-dashoffset:0;transition:none}} /* ===================================================================== 39 INFORMASJONSKAPSLER (/informasjonskapsler/) bruker Personvern-stilene (36–37). Navnet på hver informasjonskapsel vises i skrivemaskin-skrift. ===================================================================== */ .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .pl-ik-name .elementor-heading-title{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-weight:600!important;word-break:break-all} /* ##################################################################### SLIK JOBBER VI (/slik-jobber-vi/) Seksjonskart: docs/SLIK-JOBBER-VI.md · JS: assets/js/slik-jobber-vi.js Siden gjenbruker komponentene fra forsiden, tjenestesidene og Om oss (pl-step, pl-tabs, pl-ws, pl-abtile, pl-road, pl-faq …). Her ligger bare det som er nytt for denne siden. ##################################################################### */ /* ===================================================================== 40 SLIK JOBBER VI pl-sj-fact = de tre faktakortene i hero (hvite kort med ramme) pl-sj-days = «Fra skjema til plan»: fem steg med en linje som fylles når raden kommer inn i bildet (pl-rv → is-in) pl-sj-meta = «Du bidrar med / Du får / Varighet / Godkjenning» i metode-kortene (pl-sj-ok = den uthevede godkjenningen) pl-sj-tracks = fanene «Prosjekt / Løpende» i lys versjon pl-sj-qa = sjekklisten (mørk). Bare de tre første punktene i hver gruppe vises til knappen «Vis hele sjekklisten» trykkes (slik-jobber-vi.js legger klassen is-all på seksjonen) pl-sj-rep = eksempelrapporten (HTML-widget) pl-sj-tools = verktøy-pillene · pl-sj-ai = «AI / Mennesker»-kortene pl-sj-bar = betalingsplanen 40 / 40 / 20 ===================================================================== */ /* Hero */ .pl-sj-fact{min-height:0!important} /* Fra skjema til plan */ .pl-sj-days{position:relative} .pl-sj-days::before,.pl-sj-days::after{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line);pointer-events:none} .pl-sj-days::after{background:var(--grad);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.2s var(--ease) .3s} .pl-sj-days.is-in::after,.elementor-editor-active .pl-sj-days::after{transform:none} .pl-sj-day{position:relative;z-index:1} .pl-sj-dot-w{width:auto!important;margin-bottom:6px!important} .pl-sj-dot{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;color:var(--navy);transition:border-color .6s var(--ease)} .pl-sj-days.is-in .pl-sj-dot{border-color:var(--azure)} .pl-sj-day:last-child .pl-sj-dot{background:var(--grad);border-color:transparent;color:#fff} @media (max-width:1024px){.pl-sj-days::before,.pl-sj-days::after{display:none}} @media (max-width:767px){ .pl-sj-day{display:grid!important;grid-template-columns:56px minmax(0,1fr);column-gap:16px!important;row-gap:4px!important} .pl-sj-day > .pl-sj-dot-w{grid-row:1/4;margin:0!important} } /* Metoden – rader i kortene */ .pl-sj-meta .pl-kv-row{align-items:start} .pl-sj-ok .pl-kv-k .elementor-heading-title{color:var(--sky)!important} .pl-sj-ok .elementor-widget-text-editor p{display:flex;gap:10px;align-items:flex-start} .pl-sj-ok .elementor-widget-text-editor p::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%; background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1433' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat} /* To spor – lys versjon av fanene (seksjon 22) */ .pl-sj-tracks .pl-tabs .e-n-tabs-heading{background:var(--ice)} .pl-sj-tracks .pl-tabs .e-n-tab-title[aria-selected="true"]{background:var(--navy)!important} .pl-sj-tracks .pl-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text{color:#fff!important} .pl-sj-tracks .pl-tabs .e-n-tab-title:not([aria-selected="true"]):hover .e-n-tab-title-text{color:var(--navy)!important} .pl-sj-tracks > .pl-layer-p{max-width:620px!important} .pl-sj-tracks .pl-kv-row p{color:var(--text)} .pl-sj-tracks .pl-kv-row b{display:block;font-size:20px;letter-spacing:-.02em;color:var(--ink);margin-bottom:2px} .pl-sj-tracks .pl-kv-row br{display:none} /* Sjekklisten */ .pl-sj-count .pl-ab-num{width:auto!important} .pl-sj-count .elementor-widget-text-editor{color:var(--mist);font-weight:600;padding-bottom:10px;width:auto!important} .pl-sj-gi-w{width:auto!important;flex:none!important} .pl-sj-gi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(125,184,240,.16);color:var(--sky)} .pl-sj-ghead .elementor-widget-heading{flex:1 1 auto;min-width:0} .pl-sj-checks .elementor-icon-list-item{align-items:flex-start!important;padding:0 0 12px!important} .pl-sj-checks .elementor-icon-list-item:last-child{padding-bottom:0!important} .pl-sj-checks .elementor-icon-list-icon{flex:none;width:22px!important;height:22px;padding:0!important;margin:1px 12px 0 0;border-radius:50%;border:1.5px solid rgba(125,184,240,.5);display:grid!important;place-items:center;transition:background-color .4s,border-color .4s} .pl-sj-checks .elementor-icon-list-icon svg{width:11px!important;height:11px!important;max-width:none;fill:var(--navy-950)!important;opacity:0;transform:scale(.4);transition:opacity .35s,transform .45s var(--ease)} .pl-sj-group.is-in .pl-sj-checks .elementor-icon-list-icon,.elementor-editor-active .pl-sj-checks .elementor-icon-list-icon{background:var(--sky);border-color:var(--sky)} .pl-sj-group.is-in .pl-sj-checks .elementor-icon-list-icon svg,.elementor-editor-active .pl-sj-checks .elementor-icon-list-icon svg{opacity:1;transform:none} .pl-sj-checks .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon,.pl-sj-checks .elementor-icon-list-item:nth-child(2) svg{transition-delay:.15s} .pl-sj-checks .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon,.pl-sj-checks .elementor-icon-list-item:nth-child(3) svg{transition-delay:.3s} /* Bare tre punkter per gruppe før «Vis hele sjekklisten» */ .pl-sj-qa:not(.is-all) .pl-sj-checks .elementor-icon-list-item:nth-child(n+4){display:none!important} .pl-sj-qa:not(.is-all) .pl-sj-checks .elementor-icon-list-item:nth-child(3){padding-bottom:0!important} .elementor-editor-active .pl-sj-qa .pl-sj-checks .elementor-icon-list-item{display:flex!important} .pl-sj-more .elementor-button-text{min-width:180px;text-align:left} .pl-sj-note{opacity:.7} /* Eksempelrapporten */ .pl-sj-rep-w{width:100%} .pl-sj-rep{margin:0;border-radius:32px;background:var(--navy-950);color:#fff;padding:clamp(22px,2.6vw,34px);box-shadow:0 50px 100px rgba(10,20,51,.28);display:flex;flex-direction:column;gap:18px;font-family:var(--font-sans)} .pl-sj-rep .rep-top{display:flex;justify-content:space-between;align-items:center;gap:16px} .pl-sj-rep .rep-top b{display:block;font-size:18px;letter-spacing:-.02em} .pl-sj-rep .rep-top span{font-size:13px;color:var(--mist)} .pl-sj-rep .rep-pill{padding:6px 12px;border-radius:999px;background:rgba(125,184,240,.16);color:var(--sky)!important;font-size:12px!important;font-weight:700;letter-spacing:.06em} .pl-sj-rep .rep-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .pl-sj-rep .rep-kpis div{border-radius:18px;background:rgba(255,255,255,.06);padding:16px} .pl-sj-rep .rep-kpis small{display:block;font-size:12px;color:var(--mist)} .pl-sj-rep .rep-kpis b{display:block;font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;margin-top:6px;line-height:1.1} .pl-sj-rep .rep-kpis em{font-style:normal;font-size:12.5px;font-weight:700;color:#8FE0B5} .pl-sj-rep .rep-chart{border-radius:18px;background:rgba(255,255,255,.04);padding:18px 18px 10px} .pl-sj-rep .rep-chart small{font-size:12px;color:var(--mist)} .pl-sj-rep .rep-chart svg{width:100%;height:auto;margin-top:8px;display:block} .pl-sj-rep .ln{fill:none;stroke:var(--sky);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease) .4s} .pl-sj-rep .ar{opacity:0;transition:opacity 1s 1.2s} .pl-sj-rep-w.is-in .ln,.elementor-editor-active .pl-sj-rep .ln{stroke-dashoffset:0} .pl-sj-rep-w.is-in .ar,.elementor-editor-active .pl-sj-rep .ar{opacity:1} .pl-sj-rep .rep-next{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pl-sj-rep .rep-next div{border-radius:18px;padding:16px;background:rgba(255,255,255,.06);font-size:14px;color:#E3EDFB} .pl-sj-rep .rep-next b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:8px} .pl-sj-rep .rep-next ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px} @media (max-width:767px){.pl-sj-rep .rep-kpis{grid-template-columns:1fr 1fr}.pl-sj-rep .rep-next{grid-template-columns:1fr}} .pl-sj-replist .elementor-icon-list-item{align-items:flex-start!important} .pl-sj-replist .elementor-icon-list-icon{margin-top:4px;flex:none} .pl-sj-replist b{color:var(--ink)} /* Verktøy + AI */ .pl-sj-tools .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px;margin:0!important} .pl-sj-tools .elementor-icon-list-item{margin:0!important;padding:12px 20px!important;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);transition:transform .4s var(--ease),border-color .3s} .pl-sj-tools .elementor-icon-list-item:hover{transform:translateY(-3px);border-color:var(--azure)} .pl-sj-tools .elementor-icon-list-item::after,.pl-sj-tools .elementor-icon-list-icon{display:none!important} .pl-sj-tools .elementor-icon-list-text{color:var(--navy)!important} .pl-sj-ai .pl-ws:not(.pl-ws-dark){border:1px solid var(--line)} .pl-sj-aichecks .elementor-icon-list-item{align-items:flex-start!important} .pl-sj-aichecks .elementor-icon-list-icon{margin-top:4px;flex:none} /* Betalingsplanen 40 / 40 / 20 */ .pl-sj-pay{border:1px solid var(--line)} .pl-sj-bar > .e-con{min-width:0} .pl-sj-bar-1{flex:40 1 0!important;background:var(--navy)} .pl-sj-bar-2{flex:40 1 0!important;background:var(--azure)} .pl-sj-bar-3{flex:20 1 0!important;min-width:120px!important;background:var(--mist)} .pl-sj-bar-1 *,.pl-sj-bar-2 *{color:#fff!important} .pl-sj-bar-3 *{color:var(--navy)!important} .pl-sj-bar .elementor-heading-title{white-space:nowrap} @media (max-width:767px){.pl-sj-bar{flex-direction:column!important}.pl-sj-bar > .e-con{flex:auto!important;width:100%!important}} /* ===================================================================== 41 404-SIDEN (Theme Builder → 404-side) --------------------------------------------------------------------- Resten av siden bruker vanlige klasser (pl-hero, pl-qc, pl-tnext …). Her ligger bare det som er nytt for 404: pl-e4-search-w søkefeltet (HTML-widget) pl-e4-art-w «4◉4»-grafikken med øyet (HTML-widget, JS i pagelook.js 11) pl-e4-svc tjenestene som piller (Tekst-widget med lenker) pl-e4-help den mørke «Fant du det ikke?»-boksen ===================================================================== */ .pl-e4hero .pl-tlead{max-width:540px!important} .pl-e4-search-w,.pl-e4-art-w{width:100%} /* Søk */ .e4-search{position:relative;width:100%;max-width:520px} .e4-search input[type=search]{width:100%;height:62px;border-radius:999px;border:1.5px solid var(--line);background:#fff;padding:0 70px 0 54px;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s} .e4-search input::placeholder{color:var(--muted)} .e4-search input:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 5px rgba(28,85,166,.12)} .e4-search > svg{position:absolute;left:21px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none} .e4-search button{position:absolute;right:7px;top:7px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .3s,transform .5s var(--ease)} .e4-search button:hover,.e4-search button:focus-visible{background:var(--azure);transform:rotate(-45deg)} /* Grafikken: mørk boks, rutenett, glød */ .e4-art{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(28px,3vw,44px);background:var(--navy-950);color:#fff;min-height:clamp(380px,38vw,560px);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px} .e4-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(125,184,240,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(125,184,240,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 75%)} .e4-glow{position:absolute;z-index:-1;width:70%;aspect-ratio:1;left:15%;top:8%;border-radius:50%;background:radial-gradient(circle,rgba(27,107,181,.55),transparent 65%);filter:blur(20px);animation:pl-e4Breathe 7s ease-in-out infinite} @keyframes pl-e4Breathe{50%{transform:scale(1.12);opacity:.75}} .e4-art-top{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--sky)} .e4-live{display:inline-flex;align-items:center;gap:8px} .e4-live i{width:8px;height:8px;border-radius:50%;background:var(--sky);animation:pl-e4Ping 2s ease-out infinite} @keyframes pl-e4Ping{0%{box-shadow:0 0 0 0 rgba(125,184,240,.6)}70%,100%{box-shadow:0 0 0 10px rgba(125,184,240,0)}} /* «4◉4» – øyet blunker hvert 6. sekund; pupillen flyttes med --ex/--ey fra JS */ .e4-num{display:flex;align-items:center;justify-content:center;gap:.04em;font-weight:800;font-size:clamp(120px,15vw,250px);line-height:.8;letter-spacing:-.06em;user-select:none} .e4-num > span:not(.e4-eye){background:linear-gradient(180deg,#fff 30%,var(--mist));-webkit-background-clip:text;background-clip:text;color:transparent} .e4-num > span:not(.e4-eye){display:inline-block;padding-right:.12em;margin-right:-.12em} .e4-eye{position:relative;flex:none;width:.68em;height:.68em;margin:0 .05em;border-radius:50%;background:#fff;box-shadow:0 0 0 .055em var(--royal),0 0 0 .11em rgba(125,184,240,.18),0 .1em .25em rgba(0,0,0,.4);display:grid;place-items:center;animation:pl-e4Blink 6s ease-in-out infinite} .e4-iris{width:52%;height:52%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sky),var(--azure) 45%,var(--navy) 100%);display:grid;place-items:center;transform:translate(var(--ex,0),var(--ey,0));transition:transform .18s ease-out} .e4-pupil{position:relative;width:48%;height:48%;border-radius:50%;background:var(--midnight,#070F2B)} .e4-pupil::after{content:"";position:absolute;width:32%;height:32%;left:18%;top:16%;border-radius:50%;background:#fff;opacity:.9} @keyframes pl-e4Blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}} .e4-eye.is-wander .e4-iris{transition:none;animation:pl-e4Wander 9s ease-in-out infinite} @keyframes pl-e4Wander{0%,100%{transform:translate(0,0)}20%{transform:translate(-22%,-8%)}40%{transform:translate(20%,-14%)}60%{transform:translate(16%,14%)}80%{transform:translate(-18%,10%)}} /* Adresselinjen */ .e4-url{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(125,184,240,.2);font-size:14.5px;min-width:0} .e4-url svg{flex:none;color:var(--sky)} .e4-url code{flex:1;min-width:0;font-family:inherit;font-size:inherit;background:none;padding:0;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .e4-url code b{color:#fff;font-weight:600;text-decoration:line-through;text-decoration-color:var(--sky);text-decoration-thickness:1.5px} .e4-url .tag{flex:none;padding:6px 12px;border-radius:999px;background:var(--sky);color:var(--navy-950);font-weight:700;font-size:12.5px;letter-spacing:.04em} /* Veier videre: ingress i overskriften + tjenester som piller */ .pl-e4-headp{max-width:460px} .pl-e4-cards .pl-qc-small{margin-top:26px} .pl-e4-svc p{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0} .pl-e4-svc span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-right:8px} .pl-e4-svc a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:15px;color:var(--navy-900)!important;text-decoration:none!important;transition:border-color .3s,background-color .3s,color .3s} .pl-e4-svc a::after{content:"↗";font-size:13px;transition:transform .4s var(--ease)} .pl-e4-svc a:hover{border-color:var(--navy);background:var(--navy);color:#fff!important} .pl-e4-svc a:hover::after{transform:translate(2px,-2px)} /* Mørk hjelpeboks – blått lys øverst til høyre */ .pl-e4-help-in{position:relative;overflow:hidden;isolation:isolate} .pl-e4-help-in::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(27,107,181,.5),transparent 65%);pointer-events:none} .pl-e4-help-l{flex:1 1 520px!important;max-width:760px} .pl-e4-help-l .pl-e4-help-p{max-width:520px} .pl-e4-help-acts{flex:0 0 auto!important;width:auto!important} @media (max-width:1024px){ .e4-art{min-height:0;gap:36px} .e4-num{font-size:clamp(110px,28vw,220px)} } @media (max-width:767px){ .pl-e4-cards .pl-qc{min-height:0} .pl-e4-cards .pl-qc-small{margin-top:14px} .e4-live{display:none!important} .pl-e4-help-acts,.pl-e4-help-acts .elementor-widget{width:100%!important} } @media (prefers-reduced-motion:reduce){ .e4-eye,.e4-glow,.e4-live i,.e4-eye.is-wander .e4-iris{animation:none!important} } /* ===================================================================== 42 MOBILFIKSER (30.09.2026) a) Fullskjermmenyen: lenkene la seg over logoen når skjermen var lav, fordi innholdet var festet i bunnen (flex-end) og rant ut på toppen. Nå starter innholdet under headeren og kan scrolles, og skriften krymper etter skjermhøyden (maks = verdiene i Elementor: 96/72/44px). b) Mobil/nettbrett (≤ 1024px): headeren står alltid fast øverst. (Skjul-ved-scroll gjelder bare desktop – se pagelook.js, 08.) c) Innlogget på mobil (≤ 600px): WP-adminlinjen ruller bort, så headeren legger seg helt øverst når siden er scrollet. d) Faste (sticky) elementer ligger alltid UNDER headeren – her filterlinjen på /prosjekter/ når adminlinjen vises. ===================================================================== */ /* a) Fullskjermmeny */ .pl-overlay{justify-content:flex-start!important} .pl-overlay > :first-child{margin-top:auto!important} .pl-ov-links .elementor-icon-list-item > a, .pl-ov-links .elementor-icon-list-item > .elementor-icon-list-text{font-size:min(96px,8vh)!important} @media (max-width:1024px){ .pl-ov-links .elementor-icon-list-item > a, .pl-ov-links .elementor-icon-list-item > .elementor-icon-list-text{font-size:min(72px,8vh)!important} } @media (max-width:767px){ .pl-ov-links .elementor-icon-list-item > a, .pl-ov-links .elementor-icon-list-item > .elementor-icon-list-text{font-size:min(44px,6.5vh)!important} } /* b) Headeren skjules aldri på mobil/nettbrett */ @media (max-width:1024px){ .pl-header.is-hidden{transform:none} } /* c) Adminlinjen på smal mobil */ @media (max-width:600px){ .admin-bar .pl-header.is-solid{top:0} } /* d) Filterlinjen (plp-fbar) under header + adminlinje */ body.admin-bar .e-con.plp-fbar{top:32px} body.admin-bar:has(.pl-header:not(.is-hidden)) .e-con.plp-fbar{top:116px} @media (max-width:1024px){ body.admin-bar:has(.pl-header:not(.is-hidden)) .e-con.plp-fbar{top:102px} } @media (max-width:782px){ body.admin-bar .e-con.plp-fbar, body.admin-bar:has(.pl-header:not(.is-hidden)) .e-con.plp-fbar{top:116px} } @media (max-width:600px){ body.admin-bar .e-con.plp-fbar, body.admin-bar:has(.pl-header:not(.is-hidden)) .e-con.plp-fbar{top:70px} }