/* ========================================================================== Fremsteget – stil Mobil først. Farger og mål som variabler øverst. ========================================================================== */ @font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; } :root { --petrol: #0F3B42; --petrol-dyp: #0A2A30; --petrol-lys: #13505A; --petrol-glod: #165560; --petrol-skygge: #0C333A; --sand: #F4EEE4; --sand-lys: #FBF8F2; --sand-mork: #E9E0D1; --kobber: #D9662F; /* dekor */ --kobber-lys: #E8834F; /* tekst på mørk bakgrunn */ --kobber-mork: #A8461A; /* tekst på lys bakgrunn */ --knapp: #B4501F; /* knapper med hvit tekst */ --knapp-hover: #9A4318; --tekst: #14262A; --tekst-dempet: #4A5F63; --lys-tekst: #F4EEE4; --lys-dempet: #B9CFCF; --linje: rgba(20, 38, 42, .12); --linje-lys: rgba(244, 238, 228, .14); --felt-kant: #7D8B8E; /* 3:1 mot hvitt – synlige skjemafelt */ --display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 18px; --radius-liten: 10px; --skygge: 0 1px 2px rgba(10, 42, 48, .06), 0 12px 32px -12px rgba(10, 42, 48, .22); --topp-hoyde: 64px; --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Grunnlag ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topp-hoyde) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--tekst); background: var(--sand-lys); -webkit-font-smoothing: antialiased; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3 { font-family: var(--display); font-weight: 750; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.025em; text-wrap: balance; } h2 { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -.035em; } h3 { font-size: 1.3rem; letter-spacing: -.02em; } p { margin: 0 0 1em; } a { color: inherit; text-underline-offset: .18em; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { padding: 0; margin: 0; list-style: none; } :focus-visible { outline: 3px solid var(--kobber-lys); outline-offset: 3px; border-radius: 4px; } .lys :focus-visible, .sand :focus-visible, .kontakt-skjema :focus-visible { outline-color: var(--knapp); } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hopp { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--sand); color: var(--tekst); padding: 12px 18px; border-radius: 10px; font-weight: 700; } .hopp:focus { top: 12px; } .ramme { width: min(100% - 32px, 1120px); margin-inline: auto; } /* Tydelige plassholdere til innholdet er bekreftet */ .plassholder { background: repeating-linear-gradient(-45deg, rgba(217,102,47,.16) 0 8px, rgba(217,102,47,.08) 8px 16px); outline: 1px dashed rgba(217,102,47,.7); border-radius: 4px; padding: 0 .3em; } /* ---------- Knapper ---------- */ .knapp { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.4em; background: var(--knapp); color: #fff; border: 2px solid var(--knapp); border-radius: 999px; font-weight: 700; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; -webkit-tap-highlight-color: transparent; } .knapp:hover { background: var(--knapp-hover); border-color: var(--knapp-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(180,80,31,.6); } .knapp:active { transform: translateY(0); } .knapp svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); } .knapp:hover svg { transform: translateX(4px); } .knapp-liten { min-height: 40px; padding: .45em 1.05em; font-size: .95rem; white-space: nowrap; } .knapp-stor { min-height: 56px; padding: .9em 1.7em; font-size: 1.08rem; } .knapp-full { width: 100%; } .knapp-spokelse { background: transparent; color: var(--lys-tekst); border-color: rgba(244,238,228,.4); } .knapp-spokelse:hover { background: rgba(244,238,228,.1); border-color: var(--lys-tekst); box-shadow: none; } .knapp-omriss { background: transparent; color: var(--kobber-mork); border-color: currentColor; } .knapp-omriss:hover { background: var(--knapp); border-color: var(--knapp); color: #fff; } .lenke-knapp { background: none; border: 0; padding: 4px; color: var(--kobber-mork); text-decoration: underline; cursor: pointer; font-weight: 600; } /* ---------- Kunngjøring (styres fra admin) ---------- */ .kunngjoring { background: var(--kobber-lys); color: var(--petrol-dyp); font-weight: 600; font-size: .95rem; } .kunngjoring p { margin: 0 auto; padding: .55em 0; display: flex; align-items: center; gap: .6em; justify-content: center; text-align: center; } .kunngjoring-prikk { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol-dyp); flex: none; } @media (prefers-reduced-motion: no-preference) { .kunngjoring-prikk { animation: puls 2s infinite; } } @keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .25; } } /* ---------- Toppmeny ---------- */ .topp { position: sticky; top: 0; z-index: 50; height: var(--topp-hoyde); color: var(--lys-tekst); transition: background-color .3s, box-shadow .3s, color .3s; } .topp.fast { background: rgba(251, 248, 242, .97); color: var(--tekst); box-shadow: 0 1px 0 var(--linje); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topp.fast { background: rgba(251, 248, 242, .9); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); } } .topp-indre { height: 100%; display: flex; align-items: center; gap: 12px; } .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; } .logo-svg { height: 30px; width: auto; overflow: visible; } @media (max-width: 379.98px) { .logo-svg { height: 25px; } .topp-indre { gap: 8px; } } .logo-trapp { fill: var(--kobber); } .logo-ord, .logo-ball { fill: currentColor; } .meny { display: none; } .meny a { text-decoration: none; font-weight: 600; font-size: .98rem; padding: .5em .2em; position: relative; } .meny a::after { content: ""; position: absolute; left: .2em; right: .2em; bottom: .2em; height: 2px; background: var(--kobber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .meny a:hover::after, .meny a[aria-current="true"]::after { transform: scaleX(1); } .meny-knapp { width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 10px; margin-right: -8px; } .meny-strek, .meny-strek::before, .meny-strek::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .meny-strek { position: relative; } .meny-strek::before, .meny-strek::after { content: ""; position: absolute; left: 0; } .meny-strek::before { top: -7px; } .meny-strek::after { top: 7px; } .meny-knapp[aria-expanded="true"] .meny-strek { background: transparent; } .meny-knapp[aria-expanded="true"] .meny-strek::before { transform: translateY(7px) rotate(45deg); } .meny-knapp[aria-expanded="true"] .meny-strek::after { transform: translateY(-7px) rotate(-45deg); } /* Mobilmeny: panel under toppen */ .meny.apen { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--sand-lys); color: var(--tekst); box-shadow: 0 20px 40px -20px rgba(10,42,48,.4); padding: 8px 16px 20px; border-top: 1px solid var(--linje); } .meny.apen ul { display: grid; } .meny.apen a { display: block; padding: 14px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--linje); } .meny.apen a::after { display: none; } .topp:has(.meny.apen) { background: var(--sand-lys); color: var(--tekst); } @media (min-width: 900px) { .meny { display: block; margin-right: 12px; } .meny ul { display: flex; gap: 22px; } .meny-knapp { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; margin-top: calc(var(--topp-hoyde) * -1); min-height: calc(100vh - var(--kunngjoring-h, 0px)); min-height: calc(100svh - var(--kunngjoring-h, 0px)); display: flex; align-items: center; padding: calc(var(--topp-hoyde) + clamp(16px, 5vh, 48px)) 0 clamp(84px, 13vh, 124px); background: var(--petrol-dyp); color: var(--lys-tekst); overflow: hidden; isolation: isolate; } .hero-farge { position: absolute; inset: 0; z-index: -3; background: radial-gradient(120% 80% at 85% 10%, var(--petrol-glod) 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, var(--petrol-skygge) 0%, transparent 60%), var(--petrol-dyp); } .hero-rutenett { display: none; } .bygg-status { display: none; } .hero-lerret { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .hero-glod { position: absolute; z-index: -1; width: 70vmax; height: 70vmax; right: -25vmax; top: -20vmax; background: radial-gradient(circle, rgba(232,131,79,.22), rgba(232,131,79,0) 60%); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .hero-glod { animation: glod 14s ease-in-out infinite alternate; } } @keyframes glod { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.15); } } .hero-innhold { position: relative; } .hero-merke { display: inline-flex; align-items: center; gap: .6em; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kobber-lys); margin-bottom: clamp(.7em, 2.6vh, 1.4em); } .hero-merke::before { content: ""; width: 28px; height: 2px; background: currentColor; } .slagord { font-size: clamp(2.7rem, min(.9rem + 5.8vw, 11.5vh), 6.25rem); line-height: .98; letter-spacing: -.05em; font-weight: 800; margin: 0 0 .35em; } .slagord-del1, .slagord-del2 { display: block; } .slagord-del1 { white-space: nowrap; } .slagord-del2 { position: relative; width: max-content; max-width: 100%; font-style: italic; font-weight: 500; color: var(--kobber-lys); font-size: .7em; margin-top: .14em; letter-spacing: -.012em; } .slagord .ord { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; } .slagord .ord > span { display: inline-block; } .strek { position: absolute; left: 0; right: 0; bottom: -.08em; width: 100%; height: .22em; overflow: visible; } .strek path { fill: none; stroke: var(--kobber); stroke-width: 4; stroke-linecap: round; } .hero-ingress { font-size: clamp(1.05rem, min(1rem + .5vw, 2.9vh), 1.35rem); max-width: 34ch; color: var(--lys-dempet); margin-bottom: clamp(1em, 3.6vh, 1.8em); } .hero-knapper { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(1.1em, 3.6vh, 2.2em); } .hero-tillit { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; color: var(--lys-dempet); } .hero-tillit li { display: flex; align-items: center; gap: .5em; } .hero-tillit li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23E8834F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .hero-trapp { position: absolute; z-index: -1; width: min(78vw, 420px); right: -12vw; bottom: 5%; opacity: .32; overflow: visible; } @media (min-width: 900px) { .hero-trapp { width: min(40vw, 520px, 64vh); right: 4vw; bottom: 12%; opacity: 1; } .hero-innhold { padding-right: 34vw; } } @media (min-width: 1400px) { .hero-innhold { padding-right: 420px; } } .hero-scroll { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; padding: 6px 10px; color: var(--lys-dempet); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; } .hero-scroll:hover { color: var(--lys-tekst); } .hs-pil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(244,238,228,.4); transition: border-color .2s, background-color .2s; } .hero-scroll:hover .hs-pil { border-color: var(--kobber-lys); background: rgba(232,131,79,.15); } .hs-pil svg { width: 20px; height: 20px; fill: none; stroke: var(--kobber-lys); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* --- Hero-animasjon (bare når bevegelse er ok) --- */ @media (prefers-reduced-motion: no-preference) { .slagord .ord > span { transform: translateY(135%); animation: ord-opp .9s var(--ease) forwards; } .slagord-del1 .ord:nth-child(1) > span { animation-delay: .15s; } .slagord-del1 .ord:nth-child(2) > span { animation-delay: .3s; } /* Pausen: andre del kommer etter et kort øyeblikk */ .slagord-del2 .ord:nth-child(1) > span { animation-delay: 1.15s; } .slagord-del2 .ord:nth-child(2) > span { animation-delay: 1.23s; } .slagord-del2 .ord:nth-child(3) > span { animation-delay: 1.31s; } .slagord-del2 .ord:nth-child(4) > span { animation-delay: 1.39s; } .strek path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: tegn .9s var(--ease) 1.75s forwards; } .hero-merke, .hero-ingress, .hero-knapper, .hero-tillit { opacity: 0; transform: translateY(14px); animation: inn .8s var(--ease) forwards; } .hero-merke { animation-delay: .05s; } .hero-ingress { animation-delay: .6s; } .hero-knapper { animation-delay: .7s; } .hero-tillit { animation-delay: .8s; } .hero-trapp .trinn { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: trinn-opp 1s var(--ease) forwards; } .hero-trapp .t1 { animation-delay: .5s; } .hero-trapp .t2 { animation-delay: .7s; } .hero-trapp .t3 { animation-delay: .9s; } .hero-trapp .t4 { animation-delay: 1.1s; } .hero-trapp .vandrer { opacity: 0; animation: klatre 2.4s linear 1.4s forwards; } .hs-pil svg { animation: pil-ned 1.8s var(--ease) 3s infinite; } .hero-scroll { opacity: 0; animation: fram .8s ease 2s forwards; } } @keyframes ord-opp { to { transform: translateY(0); } } @keyframes tegn { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } } @keyframes inn { to { opacity: 1; transform: none; } } @keyframes trinn-opp { to { transform: scaleY(1); } } @keyframes fram { to { opacity: 1; } } @keyframes pil-ned { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } } /* Ballen hopper opp trappen, ett trinn av gangen, og blir stående øverst */ .hero-trapp .vandrer { transform: translate(335px, 81px); filter: drop-shadow(0 0 10px rgba(232,131,79,.9)); } .hero.ball-ute .vandrer { opacity: 0 !important; transition: opacity .15s; } @keyframes klatre { 0% { opacity: 0; transform: translate(-30px, 371px); } 4% { opacity: 1; transform: translate(-30px, 371px); animation-timing-function: cubic-bezier(.3,.7,.6,1); } 11% { transform: translate(18px, 255px); animation-timing-function: cubic-bezier(.4,0,.7,.3); } 19% { transform: translate(65px, 291px) scale(1.25, .75); animation-timing-function: ease-out; } 23% { transform: translate(65px, 291px); } 26% { transform: translate(65px, 291px); animation-timing-function: cubic-bezier(.3,.7,.6,1); } 33% { transform: translate(110px, 180px); animation-timing-function: cubic-bezier(.4,0,.7,.3); } 41% { transform: translate(155px, 221px) scale(1.25, .75); animation-timing-function: ease-out; } 45% { transform: translate(155px, 221px); } 48% { transform: translate(155px, 221px); animation-timing-function: cubic-bezier(.3,.7,.6,1); } 55% { transform: translate(200px, 110px); animation-timing-function: cubic-bezier(.4,0,.7,.3); } 63% { transform: translate(245px, 151px) scale(1.25, .75); animation-timing-function: ease-out; } 67% { transform: translate(245px, 151px); } 70% { transform: translate(245px, 151px); animation-timing-function: cubic-bezier(.3,.7,.6,1); } 77% { transform: translate(290px, 38px); animation-timing-function: cubic-bezier(.4,0,.7,.3); } 85% { transform: translate(335px, 81px) scale(1.3, .7); animation-timing-function: ease-out; } 92% { transform: translate(335px, 81px) scale(.95, 1.05); } 100% { opacity: 1; transform: translate(335px, 81px); } } /* ---------- Seksjoner ---------- */ .seksjon { position: relative; padding: clamp(60px, 7vw, 100px) 0; } .lys { background: var(--sand-lys); } .sand { background: var(--sand); } .mork { background: var(--petrol); color: var(--lys-tekst); } .mork p { color: var(--lys-dempet); } .mork h2, .mork h3 { color: var(--lys-tekst); } .overtittel { display: flex; align-items: center; gap: .7em; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kobber-mork); margin-bottom: 1.1em; } .mork .overtittel { color: var(--kobber-lys); } .steg-nr { display: inline-grid; place-items: center; min-width: 2.4em; height: 2.4em; padding: 0 .4em; border: 1.5px solid currentColor; border-radius: 999px; letter-spacing: 0; font-variant-numeric: tabular-nums; } .ingress { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); max-width: 60ch; color: var(--tekst-dempet); } .mork .ingress { color: var(--lys-dempet); } /* Innslide ved scroll (bare med JS + bevegelse) */ @media (prefers-reduced-motion: no-preference) { .js [data-vis] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--forsinkelse, 0s); } .js [data-vis].synlig { opacity: 1; transform: none; } } /* ---------- Problemet ---------- */ .problem-rutenett { display: grid; gap: 16px; margin: 32px 0 28px; } .problem-kort { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--skygge); border: 1px solid var(--linje); } .problem-kort p { color: var(--tekst-dempet); margin: 0; } .problem-ikon { width: 44px; height: 44px; margin-bottom: 16px; fill: none; stroke: var(--knapp); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .problem-losning { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); font-weight: 650; letter-spacing: -.02em; max-width: 40ch; } .problem-losning a { color: var(--kobber-mork); font-family: var(--sans); font-size: 1.05rem; font-weight: 700; display: inline-block; margin-top: .3em; } @media (min-width: 760px) { .problem-rutenett { grid-template-columns: repeat(3, 1fr); gap: 20px; } .js .problem-kort:nth-child(2) { --forsinkelse: .12s; } .js .problem-kort:nth-child(3) { --forsinkelse: .24s; } } /* ---------- Prøv selv (demo) ---------- */ .demo { background: radial-gradient(80% 60% at 100% 0%, var(--petrol-glod), transparent 60%), var(--petrol); overflow: hidden; } .demo-rutenett { display: grid; gap: 48px; align-items: center; } @media (min-width: 960px) { .demo-rutenett { grid-template-columns: 1.05fr .95fr; gap: 64px; } } .demo-kontroller { display: grid; gap: 18px; margin-top: 28px; } .felt { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .felt label, .felt legend { font-weight: 700; font-size: .95rem; padding: 0; } .valgfritt { font-weight: 400; opacity: .8; } .felt input, .felt select, .felt textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 1rem; /* 16px – unngår zoom på iPhone */ border-radius: var(--radius-liten); border: 1.5px solid var(--felt-kant); background: #fff; color: var(--tekst); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .felt select { background: #fff no-repeat right 14px center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314262A' stroke-width='2'/%3E%3C/svg%3E"); padding-right: 40px; } .felt textarea { min-height: 130px; resize: vertical; line-height: 1.5; } .felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--knapp); box-shadow: 0 0 0 4px rgba(180,80,31,.2); } .demo-kontroller .felt input { background: rgba(255,255,255,.08); border-color: rgba(244,238,228,.45); color: var(--lys-tekst); } .demo-kontroller .felt input::placeholder { color: rgba(244,238,228,.55); } .demo-kontroller .felt input:focus { border-color: var(--kobber-lys); box-shadow: 0 0 0 4px rgba(232,131,79,.25); } .brikker { display: flex; flex-wrap: wrap; gap: 8px; } .brikke { position: relative; cursor: pointer; } .brikke input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .brikke span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linje-lys); font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; } .brikke input:checked + span { background: var(--kobber-lys); border-color: var(--kobber-lys); color: var(--petrol-dyp); } .brikke input:focus-visible + span { outline: 3px solid var(--kobber-lys); outline-offset: 3px; } .fargevalg { display: flex; gap: 12px; flex-wrap: wrap; } .farge { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--f); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .2s var(--ease); } .farge input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .farge:has(input:checked) { box-shadow: 0 0 0 3px var(--petrol), 0 0 0 5px var(--kobber-lys); transform: scale(1.06); } .farge:has(input:focus-visible) { outline: 3px solid var(--kobber-lys); outline-offset: 6px; } .bryter-rad { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; font-weight: 600; } .bryter { position: relative; flex: none; width: 56px; height: 32px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(244,238,228,.22); transition: background-color .25s; } .bryter span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--lys-tekst); transition: transform .3s var(--ease); } .bryter[aria-checked="true"] { background: var(--kobber-lys); } .bryter[aria-checked="true"] span { transform: translateX(24px); } /* Telefonen */ .telefon-scene { display: grid; justify-items: center; gap: 14px; } .telefon { --mf: #0F3B42; position: relative; width: min(300px, 82vw); aspect-ratio: 9 / 19; border-radius: 46px; padding: 11px; background: linear-gradient(145deg, #2a3b3e, #0b1416); box-shadow: 0 0 0 1.5px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.6), 0 0 120px -30px rgba(232,131,79,.35); } @media (prefers-reduced-motion: no-preference) { .telefon { transition: transform .6s var(--ease); } .telefon-scene:hover .telefon { transform: rotate(-1.5deg) translateY(-6px); } } .telefon::before { /* dynamic island */ content: ""; position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); background: #000; border-radius: 20px; } .telefon-skjerm { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; color: #1b1b1b; font-size: 11px; line-height: 1.4; } .telefon-merknad { font-size: .85rem; margin: 0; opacity: .8; } .ny-side, .gammel-side { position: absolute; inset: 0; overflow: hidden; transition: opacity .45s, transform .45s var(--ease); } .gammel-side { opacity: 0; transform: scale(1.04); pointer-events: none; } .telefon.gammel .gammel-side { opacity: 1; transform: none; } .telefon.gammel .ny-side { opacity: 0; transform: scale(.96); } .ms-topp { display: flex; justify-content: space-between; align-items: center; padding: 44px 16px 10px; background: var(--mf); color: #fff; transition: background-color .4s; } .ms-logo { font-family: var(--display); font-weight: 800; font-size: 15px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-burger { width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px #fff, 0 5px #fff; } .ms-beskjed { background: #FFE9A8; color: #3d2f00; font-weight: 700; padding: 7px 16px; font-size: 10.5px; } .ms-hero { display: grid; gap: 8px; justify-items: start; padding: 22px 16px 24px; background: var(--mf); color: #fff; transition: background-color .4s; position: relative; } .ms-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; background: #fff; border-radius: 18px 18px 0 0; } .ms-ikon { font-size: 22px; line-height: 1; } .ms-tittel { font-family: var(--display); font-size: 19px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; } .ms-knapp { margin-top: 6px; background: #fff; color: var(--mf); padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 11px; transition: color .4s; } .ms-blokk { padding: 6px 16px 10px; } .ms-overskrift { display: block; font-weight: 800; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mf); margin-bottom: 6px; transition: color .4s; } .ms-liste li { padding: 7px 10px; background: #f3f1ed; border-radius: 8px; margin-bottom: 5px; font-weight: 600; } .ms-tider li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #eee; } .ms-kart { margin: 8px 16px; height: 70px; border-radius: 10px; background: linear-gradient(135deg, #dfe8e3 25%, #cfdcd5 25% 50%, #dfe8e3 50% 75%, #cfdcd5 75%) 0 0 / 22px 22px; position: relative; } .ms-kart span { position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--mf); transform: rotate(-45deg); } @media (prefers-reduced-motion: no-preference) { .ny-side.bygger .ms-hero > *, .ny-side.bygger .ms-blokk, .ny-side.bygger .ms-kart { animation: bygg .6s var(--ease) both; } .ny-side.bygger .ms-hero > :nth-child(2) { animation-delay: .06s; } .ny-side.bygger .ms-hero > :nth-child(3) { animation-delay: .12s; } .ny-side.bygger .ms-blokk { animation-delay: .18s; } .ny-side.bygger .ms-blokk + .ms-blokk { animation-delay: .26s; } .ny-side.bygger .ms-kart { animation-delay: .34s; } } @keyframes bygg { from { opacity: 0; transform: translateY(12px); } } /* Gammel side i 2008-stil: laget for PC (980 px bred) og skalert ned – derfor bitteliten på mobil */ .gammel-side { background: #e8edf3; padding-top: 40px; font-family: Verdana, Tahoma, Arial, sans-serif; color: #333; } .gs-innhold { width: 200%; transform: scale(.5); transform-origin: 0 0; font-size: 11px; line-height: 1.45; background: #fff; box-shadow: 0 0 0 1px #b8c4d4; } .gs-topp { display: grid; padding: 16px 14px 14px; color: #fff; background: linear-gradient(180deg, #7fb2e5 0%, #3c78c3 50%, #2a5f9e 51%, #1d4a80 100%); text-shadow: 0 1px 1px rgba(0,0,0,.5); } .gs-topp b { font: bold 22px/1.1 "Trebuchet MS", Verdana, sans-serif; } .gs-topp small { font-size: 11px; opacity: .9; font-style: italic; } .gs-meny { display: flex; gap: 2px; padding: 4px 6px 0; background: #1d4a80; } .gs-meny span { padding: 4px 9px; border-radius: 5px 5px 0 0; font-size: 10px; font-weight: bold; color: #1d4a80; background: linear-gradient(#fff, #c9d6e6); } .gs-meny span.aktiv { background: #fff; } .gs-kropp { display: grid; grid-template-columns: 34% 1fr; gap: 8px; padding: 8px; } .gs-boks { border: 1px solid #b8c4d4; margin-bottom: 8px; background: #f6f9fc; } .gs-boks-tittel { padding: 3px 6px; font-weight: bold; font-size: 10px; color: #fff; background: linear-gradient(#8fb4dc, #4a7db8); } .gs-boks p { margin: 4px 6px; font-size: 10px; color: #333 !important; } .gs-boks u, .gs-hoved u { color: #1a4fa0; } .gs-teller { display: flex; gap: 2px; padding: 5px 6px; } .gs-teller span { background: #111; color: #5f5; font: bold 11px/1 "Courier New", monospace; padding: 2px 3px; } .gs-hoved h4 { margin: 0 0 4px; font: bold 15px Arial, sans-serif; color: #1d4a80; } .gs-hoved p { margin: 0 0 6px; color: #333 !important; } .gs-flash { margin: 6px 0; padding: 14px 8px; text-align: center; background: #eee; border: 1px dashed #999; color: #555; font-size: 10px; } .gs-flash span { display: block; font-size: 20px; color: #c90; } .gs-bunn { padding: 6px 8px; font-size: 9px; color: #777; background: #eef2f7; border-top: 1px solid #b8c4d4; text-align: center; } /* ---------- Referanse: før/etter ---------- */ .ref-rutenett { display: grid; gap: 8px; } /* Mobil: glideren rett under ingressen, uttalelsen etterpå */ @media (max-width: 959.98px) { .ref-tekst { display: contents; } .ref-rutenett .for-etter { order: 1; margin: 12px 0 20px; } .ref-rutenett .uttalelse { order: 2; } .ref-rutenett .ref-lenke { order: 3; } } @media (min-width: 960px) { .ref-rutenett { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; } .ref-rutenett .for-etter { margin: 0; } } .for-etter { --pos: 50%; position: relative; margin: 20px 0 28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--skygge); aspect-ratio: 16 / 10; background: var(--sand-mork); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; } .fe-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none; } @media (max-width: 600px) { .for-etter { aspect-ratio: 390 / 620; } } .fe-etter-klipp { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); -webkit-clip-path: inset(0 0 0 var(--pos)); } .fe-handtak { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.3); pointer-events: none; } .fe-handtak span { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--knapp); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); border: 3px solid #fff; } .fe-handtak svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .fe-etikett { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(10,42,48,.8); color: #fff; font-weight: 700; font-size: .85rem; pointer-events: none; } .fe-etikett-for { left: 14px; } .fe-etikett-etter { right: 14px; background: var(--knapp); } .fe-glidebryter { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; pointer-events: none; } .for-etter:has(.fe-glidebryter:focus-visible) { outline: 3px solid var(--knapp); outline-offset: 4px; } .uttalelse { margin: 0 0 16px; max-width: 46ch; } .uttalelse blockquote { margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-style: italic; font-weight: 500; line-height: 1.4; position: relative; padding-left: 28px; } .uttalelse blockquote::before { content: "«"; position: absolute; left: 0; top: -.15em; font-size: 2.4em; color: var(--kobber); line-height: 1; } .uttalelse figcaption { font-weight: 600; color: var(--tekst-dempet); padding-left: 28px; } .ref-lenke a { font-weight: 700; color: var(--kobber-mork); } /* ---------- Tilbud ---------- */ .tilbud-rutenett { display: grid; gap: 18px; margin-top: 32px; } @media (min-width: 900px) { .tilbud-rutenett { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .tilbud { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); padding: 28px 24px; border: 1px solid var(--linje); box-shadow: var(--skygge); } .tilbud h3 { margin-bottom: .4em; } .tilbud .knapp { margin-top: auto; } .tilbud-fremhevet { background: var(--petrol); color: var(--lys-tekst); border-color: var(--petrol); } .tilbud-fremhevet .hake-liste li { color: var(--lys-dempet); } .tilbud-fremhevet .pris-fra { color: var(--lys-dempet); } @media (min-width: 900px) { .tilbud-fremhevet { transform: translateY(-14px); } .js .tilbud-fremhevet.synlig { transform: translateY(-14px); } } .merkelapp { position: absolute; top: -13px; left: 24px; margin: 0; background: var(--kobber-lys); color: var(--petrol-dyp); font-weight: 800; font-size: .8rem; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; } .pris { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 18px; line-height: 1.2; } .pris-fra { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--tekst-dempet); } .pris .plassholder { font-size: .62em; font-family: var(--sans); font-weight: 700; } .pris-ubekreftet { display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 700; vertical-align: middle; margin-left: .3em; } .hake-liste { display: grid; gap: 10px; margin-bottom: 26px; } .hake-liste li { position: relative; padding-left: 28px; color: var(--tekst-dempet); } .hake-liste li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--kobber) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pris-merknad { margin-top: 26px; font-size: .95rem; color: var(--tekst-dempet); } .pris-merknad:empty { display: none; } /* ---------- Prosess: trappen ---------- */ .prosess { background: radial-gradient(70% 50% at 0% 100%, var(--petrol-glod), transparent 60%), var(--petrol); overflow: hidden; } .trapp { display: grid; gap: 14px; margin-top: 32px; } .trapp-steg { position: relative; padding: 26px 22px 22px 22px; background: rgba(255,255,255,.04); border-radius: 0 var(--radius) var(--radius) var(--radius); } /* Trappekanten: topp + venstre kant, tegnes når trinnet blir synlig */ .trapp-steg::before, .trapp-steg::after { content: ""; position: absolute; background: var(--kobber); } .trapp-steg::before { left: 0; top: 0; height: 3px; width: 100%; transform-origin: left; } .trapp-steg::after { left: 0; top: 0; width: 3px; height: 100%; transform-origin: top; } .trapp-nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; background: var(--kobber-lys); color: var(--petrol-dyp); font-family: var(--display); font-weight: 700; font-size: 1.3rem; } .trapp-steg p { margin-bottom: .6em; } .trapp-merke { display: inline-block; margin: 0 !important; font-weight: 700; font-size: .85rem; color: var(--kobber-lys) !important; } /* Mobil: hvert trinn skyves litt inn – som en trapp nedover */ .trapp-steg:nth-child(2) { margin-left: 14px; } .trapp-steg:nth-child(3) { margin-left: 28px; } .trapp-steg:nth-child(4) { margin-left: 42px; } @media (min-width: 900px) { .trapp { grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; } .trapp-steg { margin-left: 0 !important; } .trapp-steg:nth-child(1) { margin-bottom: 0; } .trapp-steg:nth-child(2) { margin-bottom: 40px; } .trapp-steg:nth-child(3) { margin-bottom: 80px; } .trapp-steg:nth-child(4) { margin-bottom: 120px; } } @media (prefers-reduced-motion: no-preference) { .js .trapp-steg::before { transform: scaleX(0); transition: transform .9s var(--ease) .25s; } .js .trapp-steg::after { transform: scaleY(0); transition: transform .6s var(--ease); } .js .trapp-steg.synlig::before { transform: scaleX(1); } .js .trapp-steg.synlig::after { transform: scaleY(1); } .js .trapp-steg:nth-child(2) { --forsinkelse: .15s; } .js .trapp-steg:nth-child(3) { --forsinkelse: .3s; } .js .trapp-steg:nth-child(4) { --forsinkelse: .45s; } } /* ---------- Prisestimat ---------- */ .estimat { display: grid; gap: 24px; margin-top: 28px; align-items: start; } @media (min-width: 960px) { .estimat { grid-template-columns: 1.35fr 1fr; gap: 32px; } .estimat-resultat { position: sticky; top: calc(var(--topp-hoyde) + 24px); } } .estimat-valg { display: grid; gap: 22px; } .estimat-valg fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .estimat-valg legend { font-family: var(--display); font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; margin-bottom: 12px; padding: 0; } .valg-kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .valg-kort label, .valg-liste label { position: relative; cursor: pointer; display: block; } .valg-kort input, .valg-liste input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .valg-kort .innhold { display: grid; gap: 2px; text-align: center; padding: 14px 6px; min-height: 88px; align-content: center; overflow-wrap: anywhere; border: 1.5px solid var(--felt-kant); border-radius: var(--radius-liten); background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; } .valg-kort .innhold strong { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .valg-kort .innhold span { font-size: .85rem; color: var(--tekst-dempet); } .valg-liste { display: grid; gap: 10px; } .valg-kort input:checked + .innhold, .valg-liste input:checked + .innhold { border-color: var(--knapp); background: #FFF7F1; box-shadow: 0 0 0 3px rgba(180,80,31,.14); } .valg-kort input:focus-visible + .innhold, .valg-liste input:focus-visible + .innhold { outline: 3px solid var(--knapp); outline-offset: 3px; } .estimat-resultat { position: relative; background: var(--petrol); color: var(--lys-tekst); border-radius: var(--radius); padding: 30px 24px 24px; box-shadow: var(--skygge); overflow: hidden; } .estimat-resultat h3 { color: var(--lys-tekst); font-size: 1.15rem; margin-bottom: .2em; font-family: var(--sans); font-weight: 700; } .estimat-stempel { position: absolute; top: 18px; right: -34px; transform: rotate(35deg); background: var(--kobber-lys); color: var(--petrol-dyp); font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 40px; margin: 0; } .estimat-sum { font-family: var(--display); font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); white-space: nowrap; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .2em 0 .1em; font-variant-numeric: tabular-nums; color: #fff; } .estimat-under { font-size: .9rem; color: var(--lys-dempet); margin-bottom: 1em; } .estimat-arlig { font-weight: 700; color: var(--kobber-lys) !important; margin-bottom: 1em; } .estimat-oppsummering { display: grid; gap: 6px; padding: 14px 0; margin-bottom: 14px; border-top: 1px solid var(--linje-lys); border-bottom: 1px solid var(--linje-lys); font-size: .92rem; color: var(--lys-dempet); } .estimat-oppsummering li { display: flex; justify-content: space-between; gap: 12px; } .estimat-liten { font-size: .85rem; color: var(--lys-dempet); } /* ---------- Om meg ---------- */ .om-rutenett { display: grid; gap: 40px; align-items: center; } @media (min-width: 900px) { .om-rutenett { grid-template-columns: .8fr 1.2fr; gap: 72px; } } .om-bilde { position: relative; max-width: min(340px, calc(100% - 18px)); } @media (min-width: 900px) { .om-bilde { max-width: 420px; } } .om-bilde img { width: 100%; border-radius: var(--radius); box-shadow: var(--skygge); } .om-bilde::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2.5px solid var(--kobber); border-radius: var(--radius); z-index: -1; } .om-bilde { isolation: isolate; } .om-sted { position: absolute; left: -10px; top: 24px; background: var(--petrol); color: var(--lys-tekst); font-weight: 700; padding: 8px 16px; border-radius: 999px; font-size: .95rem; } .om-tekst p { max-width: 58ch; } .om-fakta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; } .om-fakta li { background: #fff; border-radius: var(--radius-liten); padding: 14px 12px; border: 1px solid var(--linje); display: grid; gap: 2px; } .om-fakta strong { font-family: var(--display); font-size: 1.15rem; color: var(--kobber-mork); } .om-fakta span { font-size: .85rem; color: var(--tekst-dempet); line-height: 1.3; } /* ---------- Kontakt ---------- */ .kontakt { background: radial-gradient(80% 60% at 100% 100%, var(--petrol-glod), transparent 60%), var(--petrol); } .kontakt-rutenett { display: grid; gap: 40px; } @media (min-width: 960px) { .kontakt-rutenett { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } } .kontakt-epost { font-size: 1.05rem; } .kontakt-epost a { color: var(--lys-tekst); font-weight: 700; font-size: 1.2rem; } .kontakt-skjema { background: var(--sand-lys); color: var(--tekst); border-radius: var(--radius); padding: 26px 20px; display: grid; gap: 16px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); } .kontakt-skjema p { color: var(--tekst-dempet); } @media (min-width: 600px) { .kontakt-skjema { padding: 34px; } .felt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } .felt-par { display: grid; gap: 16px; } .pakrevd { color: var(--kobber-mork); } .felt.feil input, .felt.feil textarea { border-color: #B3261E; } .feilmelding { color: #B3261E; font-size: .88rem; font-weight: 600; margin: 0; } .honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .skjema-personvern { font-size: .85rem; margin: 0; } .vedlagt-estimat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-liten); background: #FFF1E7; border: 1px solid rgba(180,80,31,.3); } .vedlagt-estimat p { margin: 0; font-size: .92rem; color: var(--tekst) !important; } .skjema-status { margin: 0; font-weight: 600; min-height: 1.6em; } .skjema-status.ok { color: #1E6B3A; } .skjema-status.feil { color: #B3261E; } .knapp-laster { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: snurr .8s linear infinite; } .sender .knapp-laster { display: inline-block; } .sender .knapp-tekst { opacity: .7; } @keyframes snurr { to { transform: rotate(360deg); } } .takk-boks { text-align: center; padding: 28px 8px; display: grid; justify-items: center; gap: 8px; } .takk-boks svg { width: 76px; height: 76px; } .takk-boks circle { fill: none; stroke: var(--knapp); stroke-width: 3; } .takk-boks path { fill: none; stroke: var(--knapp); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: no-preference) { .takk-boks circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: tegn-px .8s var(--ease) forwards; } .takk-boks path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: tegn-px .5s var(--ease) .6s forwards; } } @keyframes tegn-px { to { stroke-dashoffset: 0; } } .takk-boks h3 { font-size: 1.6rem; margin: 6px 0 0; } .kontakt-skjema .takk-boks h3 { color: var(--tekst); } /* ---------- Bunntekst ---------- */ .bunn { background: var(--petrol-dyp); color: var(--lys-dempet); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: .95rem; } .bunn-indre { display: grid; gap: 28px; } @media (min-width: 900px) { .bunn-indre { grid-template-columns: 1fr 1fr 1.3fr; gap: 40px; } } .bunn-merke img { width: 180px; margin-bottom: 10px; } .bunn-merke p { font-style: italic; color: var(--lys-tekst); } .bunn-info { font-style: normal; } .bunn-info p { margin: 0 0 .35em; } .bunn a { color: var(--lys-tekst); } .bunn-personvern p { margin: 0 0 .8em; } .bunn-kopi { color: var(--lys-dempet); } /* ---------- Redusert bevegelse: alt står ferdig ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hero-trapp .vandrer { display: none; } } /* ---------- Enkle sider (takk, 404) ---------- */ .enkel { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; } .enkel h1 { font-size: clamp(2rem, 1.5rem + 3vw, 3.2rem); color: var(--lys-tekst); } .enkel .takk-boks circle, .enkel .takk-boks path { stroke: var(--kobber-lys); } .enkel .overtittel { justify-content: center; } /* ---------- Fremdrift: tynn linje under menyen ---------- */ .topp-fremdrift { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; transition: opacity .3s; } .topp.fast .topp-fremdrift { opacity: 1; } .topp-fremdrift span { display: block; height: 100%; background: var(--kobber); transform-origin: left; transform: scaleX(0); } [tabindex="-1"]:focus { outline: none; } /* ---------- «Bla ned» forsvinner når man har begynt å scrolle ---------- */ .hero-scroll > * { transition: opacity .35s, transform .35s var(--ease); } .har-scrollet .hero-scroll { pointer-events: none; } .har-scrollet .hero-scroll > * { opacity: 0; transform: translateY(10px); } /* ---------- «Siden bygger seg selv» (første besøk, styres av intro.js) ---------- */ .vask { display: none; } @media (prefers-reduced-motion: no-preference) { /* Tomt lerret med rutenett */ .bygg .hero-rutenett { display: block; position: absolute; inset: 0; z-index: -6; background: linear-gradient(rgba(15,59,66,.07) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(15,59,66,.07) 1px, transparent 1px) 0 0 / 32px 32px, var(--sand-lys); } /* Fargeprøve når pekeren tester farger */ .bygg .vask { display: block; position: absolute; inset: 0; z-index: -5; background: var(--prov, transparent); opacity: 0; transition: opacity .35s, background-color .35s; } .bygg .vask.paa { opacity: .3; } /* Fargen fyller heroen i en sirkel fra der pekeren klikket */ .bygg .hero-farge { -webkit-clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%)); clip-path: circle(0% at var(--fx, 50%) var(--fy, 50%)); transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1), -webkit-clip-path 1.1s cubic-bezier(.65, 0, .25, 1); } .bygg .hero.farget .hero-farge { -webkit-clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); } .bygg .hero-lerret, .bygg .hero-glod { opacity: 0; transition: opacity 1.2s; } .bygg .hero.magi .hero-lerret, .bygg .hero.magi .hero-glod { opacity: 1; } /* Overskriften: grå skisse fra start, får farge og riktig skrift underveis */ .bygg .slagord-del1 .ord > span { animation: none; transform: none; } .bygg .slagord-del1 { color: rgba(15,59,66,.4); transition: color .7s; } .bygg .hero.farget .slagord-del1 { color: var(--lys-tekst); } .slagord-del1.skrift-skisse { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.02em; } .slagord-del1.skrift-maskin { font-family: "Courier New", Courier, monospace; font-weight: 700; letter-spacing: -.09em; } .slagord-del1.skrift-hand { font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; font-weight: 400; letter-spacing: 0; } .slagord-del1.skrift-bytt { animation: skrift-blink .4s var(--ease); } .bygg .slagord-del2 .ord > span { animation: none; transform: translateY(135%); transition: transform .8s var(--ease); } .bygg .slagord-del2.inn .ord > span { transform: none; } .bygg .slagord-del2.inn .ord:nth-child(2) > span { transition-delay: .1s; } .bygg .slagord-del2.inn .ord:nth-child(3) > span { transition-delay: .2s; } .bygg .slagord-del2.inn .ord:nth-child(4) > span { transition-delay: .3s; } .bygg .strek path { animation: none; opacity: 0; } .bygg .slagord-del2.inn .strek path { animation: tegn 1s var(--ease) .6s forwards; } /* Resten vipper på plass i 3D */ .bygg .hero-merke, .bygg .hero-ingress, .bygg .hero-knapper, .bygg .hero-tillit { animation: none; opacity: 0; transform-origin: 50% 0; transform: perspective(900px) translateY(24px) rotateX(-55deg); transition: transform .85s cubic-bezier(.2, .9, .25, 1.08), opacity .5s; } .bygg .hero-merke.inn, .bygg .hero-ingress.inn, .bygg .hero-knapper.inn, .bygg .hero-tillit.inn { opacity: 1; transform: none; } .bygg .hero-trapp .trinn { animation: none; transform: scaleY(0); transition: transform .8s cubic-bezier(.3, 1.45, .5, 1); } .bygg .hero-trapp.inn .trinn { transform: none; } .bygg .hero-trapp.inn .t2 { transition-delay: .1s; } .bygg .hero-trapp.inn .t3 { transition-delay: .2s; } .bygg .hero-trapp.inn .t4 { transition-delay: .3s; } .bygg .hero-trapp .vandrer { animation: none; opacity: 0; } .bygg .hero-trapp.klatre .vandrer { animation: klatre 2.4s linear forwards; } .bygg .hero-scroll { animation: none; opacity: 0; transition: opacity .6s; } .bygg.bygg-ferdig .hero-scroll { opacity: 1; } .knapp.demo-hover { background: var(--knapp-hover); border-color: var(--knapp-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(180,80,31,.6); } /* Hoppes introen over: alt rett på plass */ .hero.hopp, .hero.hopp * { transition: none !important; } /* Statuslinjen nederst */ .bygg .bygg-status { display: inline-flex; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 6; margin: 0; padding: 6px 6px 6px 16px; border-radius: 999px; white-space: nowrap; background: var(--petrol-dyp); color: var(--lys-tekst); font-size: .9rem; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(244,238,228,.12); transform: translateX(-50%); transition: opacity .4s, transform .4s var(--ease); } .bygg .bygg-status.borte { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; } .bs-prosent { font-variant-numeric: tabular-nums; color: var(--kobber-lys); min-width: 3.2em; text-align: right; } .bs-hopp { border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px; cursor: pointer; font: inherit; font-size: .8rem; background: rgba(244,238,228,.12); color: var(--lys-tekst); } .bs-hopp:hover { background: rgba(244,238,228,.22); } .bygg-status.ferdig .bs-hopp { display: none; } .bygg-status.ferdig { padding-right: 16px; } .bs-ikon { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(244,238,228,.3); border-top-color: var(--kobber-lys); animation: snurr .7s linear infinite; } .bygg-status.ferdig .bs-ikon { animation: none; border: 0; width: 18px; height: 18px; background: var(--kobber-lys) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230A2A30' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Skissen: stiplede rammer */ .skjelett { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s; } .skjelett.ut { opacity: 0; } .skjelett span { position: absolute; border-radius: 10px; border: 2px dashed rgba(15,59,66,.35); background: linear-gradient(100deg, rgba(15,59,66,.03) 30%, rgba(15,59,66,.1) 50%, rgba(15,59,66,.03) 70%) 0 0 / 300% 100%; opacity: 0; transform: scale(.9); animation: skjelett-inn .4s cubic-bezier(.2, .9, .25, 1.2) forwards, skimmer 1.1s linear infinite; } .skjelett span.rund { border-radius: 999px; } /* Musepekeren som «designer» siden */ .peker { position: absolute; left: 0; top: 0; z-index: 8; width: 28px; height: 28px; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); } .peker.synlig { opacity: 1; } .peker svg { width: 28px; height: 28px; } .peker.touch { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(244,238,228,.55); box-shadow: 0 0 0 2px var(--knapp); } .peker .klikk { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--kobber); opacity: 0; } .peker.touch .klikk { left: 50%; top: 50%; } .peker.klikker .klikk { animation: klikk .45s ease-out; } /* Små verktøypaneler: farge og skrift */ .panel { position: absolute; z-index: 7; padding: 12px; border-radius: 16px; background: #fff; color: var(--tekst); box-shadow: 0 24px 50px -20px rgba(10,42,48,.55), 0 0 0 1px rgba(15,59,66,.08); transform-origin: 0 0; animation: panel-inn .35s cubic-bezier(.2, .9, .25, 1.2) both; } .panel.lukker { animation: panel-ut .25s ease forwards; } .panel-tittel { margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-dempet); } .palett-farger { display: flex; gap: 10px; } .palett-farger span { display: block; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--f) 0 52%, var(--a) 52%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); transition: transform .2s var(--ease), box-shadow .2s; } .palett-farger span.valgt { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--knapp); transform: scale(1.08); } .skrift-valg { display: grid; gap: 4px; min-width: 190px; } .skrift-valg span { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 10px; border-radius: 8px; font-size: .85rem; transition: background-color .2s; } .skrift-valg b { font-size: 1.2rem; font-weight: 700; } .skrift-valg span.valgt { background: #FFF1E7; box-shadow: inset 0 0 0 1.5px var(--knapp); } /* Konfetti når siden er ferdig */ .konfetti { position: absolute; z-index: 9; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; } } @keyframes ut { to { opacity: 0; visibility: hidden; } } @keyframes skjelett-inn { to { opacity: 1; transform: none; } } @keyframes skimmer { to { background-position: -150% 0; } } @keyframes skrift-blink { 0% { filter: blur(8px); opacity: .3; transform: scale(.97); } 100% { filter: none; opacity: 1; transform: none; } } @keyframes klikk { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } } @keyframes panel-inn { from { opacity: 0; transform: scale(.85) translateY(8px); } } @keyframes panel-ut { to { opacity: 0; transform: scale(.9); } } /* Failsafe: er introen ferdig (eller skriptet feilet), vises alt */ .bygg-ferdig .hero-merke, .bygg-ferdig .hero-ingress, .bygg-ferdig .hero-knapper, .bygg-ferdig .hero-tillit { opacity: 1 !important; transform: none !important; } .bygg-ferdig .slagord .ord > span, .bygg-ferdig .hero-trapp .trinn { transform: none !important; } .bygg-ferdig .hero-farge, .bygg-ferdig .hero-lerret, .bygg-ferdig .hero-glod { opacity: 1 !important; } .bygg-ferdig .hero-farge { -webkit-clip-path: none !important; clip-path: none !important; } .bygg-ferdig .vask, .bygg-ferdig .skjelett, .bygg-ferdig .peker, .bygg-ferdig .panel { display: none !important; } .bygg-ferdig .slagord-del1 { color: var(--lys-tekst) !important; } .bygg-ferdig .strek path { opacity: 1; stroke-dashoffset: 0; } .hero.trangt .hero-scroll { display: none; } /* ---------- Overskrifter ord for ord ---------- */ @media (prefers-reduced-motion: no-preference) { .js h2.ord-vis[data-vis] { opacity: 1; transform: none; } h2.ord-vis .o { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } h2.ord-vis .o > span { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: 0 100%; transition: transform .85s var(--ease); transition-delay: calc(var(--i) * 55ms); } h2.ord-vis.synlig .o > span { transform: none; } } /* ---------- Kort som vipper under musepekeren ---------- */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .problem-kort, .tilbud { --rx: 0deg; --ry: 0deg; } .problem-kort.synlig, .tilbud.synlig { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease), opacity .8s var(--ease), box-shadow .3s; } @media (min-width: 900px) { .tilbud-fremhevet.synlig { transform: perspective(900px) translateY(-14px) rotateX(var(--rx)) rotateY(var(--ry)); } } .vipper.synlig { transition: transform .12s linear, opacity .8s var(--ease), box-shadow .3s; box-shadow: 0 30px 50px -24px rgba(10,42,48,.45); } .problem-kort, .tilbud { position: relative; } .problem-kort::after, .tilbud::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 45%); } .vipper::after { opacity: 1; } } /* ---------- Kontakt: ring eller send e-post ---------- */ .kontakt-direkte { display: grid; gap: 10px; margin-top: 8px; } .kontakt-valg { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-liten); background: rgba(244,238,228,.07); border: 1px solid var(--linje-lys); color: var(--lys-tekst); text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s var(--ease); min-width: 0; } .kontakt-valg:hover { background: rgba(232,131,79,.14); border-color: var(--kobber-lys); transform: translateX(4px); } .kontakt-valg svg { width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 50%; background: var(--kobber-lys); fill: none; stroke: var(--petrol-dyp); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kontakt-valg span { display: grid; font-weight: 700; font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; } .kontakt-valg small { font-size: .8rem; font-weight: 600; color: var(--lys-dempet); } /* ---------- Ikoner ---------- */ .ikon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tilbud-ikon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; background: #FFF1E7; color: var(--knapp); } .tilbud-ikon .ikon { width: 30px; height: 30px; } .tilbud-fremhevet .tilbud-ikon { background: rgba(232,131,79,.18); color: var(--kobber-lys); } /* Prisestimat: valg med ikoner */ .valg-ikon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; flex: none; position: relative; background: var(--sand); color: var(--petrol); transition: background-color .25s, color .25s, transform .3s var(--ease); } .valg-ikon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .valg-kort .valg-ikon { margin: 0 auto 6px; } .valg-liste { grid-template-columns: 1fr; } @media (min-width: 600px) { #valg-tillegg, #valg-arlig { grid-template-columns: 1fr 1fr; } } /* Ett valg alene på siste rad fyller hele bredden */ @media (min-width: 600px) { #valg-tillegg > label:last-child:nth-child(odd) { grid-column: 1 / -1; } } .valg-liste label { height: 100%; } .valg-liste .innhold { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; height: 100%; padding: 12px; border: 1.5px solid var(--felt-kant); border-radius: var(--radius-liten); background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s var(--ease); } .valg-liste .valg-ikon { grid-row: span 2; } .valg-liste .navn { font-weight: 700; line-height: 1.25; align-self: end; } .valg-liste .tillegg-pris { font-weight: 700; font-size: .88rem; color: var(--kobber-mork); align-self: start; } .valg-kort input:checked + .innhold .valg-ikon, .valg-liste input:checked + .innhold .valg-ikon { background: var(--knapp); color: #fff; transform: scale(1.06) rotate(-4deg); } /* Hake i hjørnet når valgt */ .valg-ikon::after { content: ""; position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--petrol) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: scale(0); transition: transform .3s var(--ease); } .valg-kort input:checked + .innhold .valg-ikon::after, .valg-liste input:checked + .innhold .valg-ikon::after { transform: scale(1); } .valg-liste .innhold:hover, .valg-kort .innhold:hover { border-color: var(--knapp); } /* ---------- Prosess: minimalistisk trapp, trinnene kommer ett og ett ---------- */ .trapp-steg { background: transparent; border-radius: 0; padding: 22px 8px 6px 22px; } .trapp-nr { background: transparent; color: var(--kobber-lys); width: auto; height: auto; justify-content: start; margin-bottom: 10px; } .trapp-nr .ikon { width: 34px; height: 34px; stroke: var(--kobber-lys); stroke-width: 1.7; } .trapp-tall { color: var(--kobber-lys); margin-right: .15em; } .trapp-steg h3 { margin-bottom: .3em; } @media (prefers-reduced-motion: no-preference) { .js .trapp-steg { transition-duration: .7s; } .js .trapp-steg:nth-child(2) { --forsinkelse: .3s; } .js .trapp-steg:nth-child(3) { --forsinkelse: .6s; } .js .trapp-steg:nth-child(4) { --forsinkelse: .9s; } .js .trapp-steg::before { transition-delay: calc(var(--forsinkelse, 0s) + .2s); } .js .trapp-steg::after { transition-delay: var(--forsinkelse, 0s); } .js .trapp-steg .trapp-nr { opacity: 0; transform: scale(.4) rotate(-20deg); } .js .trapp-steg.synlig .trapp-nr { animation: ikon-sprett .7s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--forsinkelse, 0s) + .35s); } .trapp-steg:hover .trapp-nr .ikon { animation: vipp .5s ease-in-out; } } @keyframes ikon-sprett { to { opacity: 1; transform: none; } } @keyframes vipp { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } } #trinn-side stop:first-child { stop-color: var(--petrol-lys); } #trinn-side stop:last-child { stop-color: var(--petrol); } .bunn-igjen { background: none; border: 0; padding: 0; color: var(--kobber-lys); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .bunn-igjen { display: none; } } /* Overskriften skrives bokstav for bokstav i introen */ @media (prefers-reduced-motion: no-preference) { .bygg .slagord-del1 .tegn { opacity: 0; } .bygg .slagord-del1 .tegn.vis { opacity: 1; } .markor { display: inline-block; width: .055em; height: .8em; margin-left: .03em; background: var(--knapp); vertical-align: -.05em; animation: blink 1s steps(1) infinite; } } @keyframes blink { 50% { opacity: 0; } } #pris-merknad:empty { display: none; } /* ---------- Prøv selv: faner og flere valg ---------- */ .demo-faner { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(244,238,228,.08); border: 1px solid var(--linje-lys); width: max-content; max-width: 100%; } .demo-faner button { border: 0; background: transparent; color: var(--lys-dempet); font: inherit; font-weight: 700; font-size: .95rem; padding: 9px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; } .demo-faner button[aria-selected="true"] { background: var(--kobber-lys); color: var(--petrol-dyp); } .demo-faner button:focus-visible { outline: 3px solid var(--kobber-lys); outline-offset: 2px; } .demo-panel { display: grid; gap: 18px; min-height: 250px; align-content: start; } @media (prefers-reduced-motion: no-preference) { .demo-panel:not([hidden]) { animation: panel-fram .35s var(--ease); } } @keyframes panel-fram { from { opacity: 0; transform: translateY(8px); } } .felt-tittel { font-weight: 700; font-size: .95rem; } .bilde-rad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bilde-knapp { cursor: pointer; } .bilde-knapp svg { width: 1.1em; height: 1.1em; } .demo-kontroller input[type=file]:focus-visible + * , .bilde-rad:focus-within .bilde-knapp { outline: 3px solid var(--kobber-lys); outline-offset: 3px; } .lenke-knapp.lys { color: var(--kobber-lys); background: transparent; border: 0; } .brikke.kantet span { border-radius: 6px; } /* Telefonen: varianter */ .ny-side { background: #fff; color: #1b1b1b; transition: background-color .4s, color .4s, opacity .45s, transform .45s var(--ease); } .ny-side.skrift-klassisk, .ny-side.skrift-klassisk .ms-logo, .ny-side.skrift-klassisk .ms-tittel { font-family: Georgia, "Times New Roman", serif; } .ny-side.skrift-leken, .ny-side.skrift-leken .ms-logo, .ny-side.skrift-leken .ms-tittel { font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; } .ny-side.skrift-moderne .ms-logo, .ny-side.skrift-moderne .ms-tittel { font-family: var(--display); } .ny-side.mork { background: #141414; color: #eee; } .ny-side.mork .ms-hero::after { background: #141414; } .ny-side.mork .ms-liste li { background: #222; } .ny-side.mork .ms-tider li { border-color: #2a2a2a; } .ny-side.mork .ms-overskrift { color: color-mix(in srgb, var(--mf) 40%, #fff); } .ny-side.mork .ms-anmeldelse { background: #222; } .ny-side.kantet .ms-knapp, .ny-side.kantet .ms-liste li, .ny-side.kantet .ms-kart, .ny-side.kantet .ms-galleri span, .ny-side.kantet .ms-anmeldelse { border-radius: 3px; } .ny-side.har-bilde .ms-hero { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6)), var(--bilde) center / cover, var(--mf); } .ms-anmeldelse { background: #f3f1ed; border-radius: 10px; padding: 8px 10px; } .ms-anmeldelse p { margin: 2px 0; font-weight: 600; color: inherit !important; } .ms-anmeldelse small { opacity: .65; } .ms-stjerner { color: #E8A23B; letter-spacing: 1px; } .ms-galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .ms-galleri span { aspect-ratio: 1; border-radius: 8px; background: var(--mf); opacity: .85; } .ms-galleri span:nth-child(2) { opacity: .6; } .ms-galleri span:nth-child(3) { opacity: .4; } .ny-side.har-bilde .ms-galleri span:first-child { background: var(--bilde) center / cover; opacity: 1; } @media (prefers-reduced-motion: no-preference) { .ny-side [data-del]:not([hidden]) { animation: bygg .45s var(--ease); } } /* ---------- Tekst: lang variant på PC, kort på mobil ---------- display: none skjuler også for skjermlesere, så bare én variant leses opp. */ .kun-mobil { display: none; } @media (max-width: 767.98px) { .kun-pc { display: none; } .kun-mobil { display: inline; } } /* ---------- Tekst: unngå enslige ord på siste linje (  er reserve for eldre Safari) ---------- */ h1, h2, h3 { text-wrap: balance; } .hero-ingress, .ingress, .demo-tekst > p, .kontakt-tekst > p, .om-tekst > p, .problem-kort p, .trapp-steg p, .problem-losning, .uttalelse, .estimat-liten, .skjema-uforpliktende { text-wrap: pretty; } .hero-ingress, .ingress, .demo-tekst > p, .kontakt-tekst > p { max-width: 38ch; } .ref-resultat { font-weight: 600; color: var(--tekst-dempet); margin: 0 0 16px; padding-left: 28px; } .skjema-uforpliktende { margin: -6px 0 0; font-size: .88rem; text-align: center; } .om-fakta span { text-wrap: balance; } .knapp, .bilde-knapp { white-space: nowrap; } /* «Last opp bilde» er en