/* fonter.css lenkes direkte fra — @import her ville tvunget nettleseren til å hente stilarket først og fontreglene etterpå. */ /* ========================================================================== Mal Farger & Tapet — stilark Designsystem: Classical. Farge som strek, aldri som fylt flate. Alle farger som variabler. Ingen hex-verdier utenfor :root. ========================================================================== */ :root { --bunn: #e7e4e0; --band: #dcd8d2; --tekst: #201f1d; --dempet: #605d5d; /* 4,59:1 mot --bunn — WCAG AA */ --gull: #b68235; /* kun streker og flater, ALDRI tekst i brødstørrelse */ --gull-mork: #7d5411; /* 4,70:1 mot --bunn — all gulltekst bruker denne */ --gull-lys: #e1ad66; /* gull på mørk flate */ --mork: #1b1917; --hairline: rgba(32, 31, 29, 0.16); /* kun dekorative streker og rutenett */ /* Kanter på betjeningselement (felt, knapper) er ikke dekor — WCAG 1.4.11 krever 3:1. --hairline gir bare 1,37:1 og kan ikke brukes til dette. */ --kant: #767370; /* 3,72:1 mot bunn, 3,32:1 mot band */ --gull-kant: #96681f; /* 3,86:1 mot bunn, 3,44:1 mot band */ --hairline-m: rgba(234, 231, 231, 0.22); --hover: #ded9d3; --serif-h: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --serif-b: Lora, Georgia, 'Times New Roman', serif; --radius: 4px; --side: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bunn); color: var(--tekst); font-family: var(--serif-b); font-size: 16px; line-height: 1.75; text-align: left; text-wrap: pretty; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif-h); font-weight: 400; margin: 0; text-wrap: balance; } h3, h4 { font-weight: 600; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } img { max-width: 100%; height: auto; } a { color: var(--gull-mork); text-decoration-thickness: 1px; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--gull-mork); /* 5,26:1 — --gull ga bare 2,66:1 */ outline-offset: 2px; border-radius: 2px; } .tabelltall { font-variant-numeric: tabular-nums; } /* --- Hopp til innhold ---------------------------------------------------- */ .hopp { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--bunn); color: var(--tekst); padding: 12px 18px; text-decoration: none; border: 1px solid var(--hairline); } .hopp:focus { left: 12px; top: 12px; } /* --- Layout -------------------------------------------------------------- */ .rad { max-width: var(--side); margin: 0 auto; padding-left: 32px; padding-right: 32px; } .rad-smal { max-width: 800px; } .seksjon { padding-top: 76px; padding-bottom: 76px; } .strek-topp { border-top: 1px solid var(--hairline); } .strek-bunn { border-bottom: 1px solid var(--hairline); } .kicker { font-family: var(--serif-h); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: var(--gull-mork); margin: 0 0 22px; } .gullstrek { height: 2px; width: 180px; background: var(--gull); margin-bottom: 28px; } .ingress { font-size: 18px; line-height: 1.7; max-width: 48ch; } .smatekst { font-size: 13px; color: var(--dempet); } /* To-spalters oppsett. minmax(0, …) overalt — et bart `1fr` får et min-content-gulv som sprenger sporet på smale skjermer. */ .spalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .spalter-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; } .spalter-brei { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .spalter-tekst { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; } /* --- Rutenett med hairline ---------------------------------------------- Strekene tegnes av cellene selv, ikke av en bakgrunn bak dem. Da spiller det ingen rolle om celletallet går opp i kolonnetallet: en halv siste rad etterlater tomrom uten farge, ikke en grå boks. */ .rute { display: grid; grid-template-columns: repeat(var(--kol, 3), minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); } .rute > * { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 28px; margin: 0; } /* Ytterrammen lukkes av et pseudoelement, ikke av cellene. Cellene tegner bare sine egne høyre- og bunnstreker, så en halv siste rad etterlater ren bakgrunn — ikke en grå boks, og ikke en avkuttet kant. Virker for ethvert celletall ved ethvert kolonnetall. */ .rute { position: relative; } .rute::after { content: ""; position: absolute; inset: 0; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); pointer-events: none; } .rute-2 { --kol: 2; } .rute-4 { --kol: 4; } .rute-5 { --kol: 5; } .rute a { display: block; height: 100%; text-decoration: none; color: inherit; } .rute-hover > *:hover { background: var(--hover); } .rute h3 { font-size: 20px; margin: 0 0 10px; } .rute p { font-size: 15px; line-height: 1.7; margin: 0; } .rute .steg-nr { font-family: var(--serif-h); font-variant-numeric: tabular-nums; color: var(--gull-mork); font-size: 13px; letter-spacing: 0.1em; display: block; margin-bottom: 10px; } /* Kort med luft mellom (prosjektsiden) — ingen streker */ .kortrad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; } /* --- Knapper ------------------------------------------------------------- */ .knapp { display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif-h); font-size: 16px; padding: 12px 22px; border: 1px solid var(--kant); border-radius: var(--radius); background: none; color: var(--tekst); text-decoration: none; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; white-space: nowrap; } /* Gulltekst i knappestørrelse bruker --gull-mork (4,70:1). Rammen kan være lys gull — 3:1 holder for grafiske element. */ .knapp-primar { color: var(--gull-mork); border-color: var(--gull-kant); } .knapp-primar:hover { background: rgba(182, 130, 53, 0.12); } .knapp-primar:active { background: rgba(182, 130, 53, 0.22); } .knapp-sekundar:hover { background: rgba(32, 31, 29, 0.07); } .knapp-blokk { width: 100%; } .knapp[disabled] { opacity: 0.55; cursor: default; } .knapperad { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* --- Bildefelt (venter på fotografier) ----------------------------------- */ /* aspect-ratio i stedet for fast høyde: en fast høyde gir elementet et iboende min-content-mål som sprenger rutenettet på mobil. */ .plate { border: 1px solid var(--hairline); padding: 6px; background: var(--bunn); width: 100%; } /* Egen klasse, ikke .felt — .felt er skjemaetikettene. Samme navn to steder er en felle neste gang noen endrer noe. */ .plate > .plate-tom { aspect-ratio: var(--forhold, 4 / 3); border: 1px dashed var(--hairline); background: var(--band); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--dempet); font-size: 13px; } .plate-staaende { --forhold: 4 / 5; } .plate-portrett { --forhold: 3 / 4; } .bildetekst { font-size: 11px; color: var(--dempet); margin-top: 8px; } /* --- Skjema -------------------------------------------------------------- */ .skjema-ramme { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; } .felt-rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .felt { display: block; margin-bottom: 18px; } .felt > span { display: block; font-size: 13px; color: var(--dempet); margin-bottom: 6px; } .input { width: 100%; font: inherit; font-size: 15px; color: var(--tekst); background: var(--bunn); border: 1px solid var(--kant); border-radius: var(--radius); padding: 10px 12px; } textarea.input { min-height: 110px; resize: vertical; } .seg { display: flex; gap: 10px; } .seg-opt { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--kant); border-radius: var(--radius); padding: 10px; font-size: 13px; cursor: pointer; } .seg-opt input { position: absolute; opacity: 0; pointer-events: none; } .seg-opt:hover { background: rgba(182, 130, 53, 0.1); } .seg-opt:has(input:checked) { background: rgba(182, 130, 53, 0.16); box-shadow: inset 0 0 0 1px var(--gull-kant); /* 2,30:1 -> 3,86:1 */ color: var(--gull-mork); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--gull-mork); outline-offset: 2px; } .skjema-hjelp { font-size: 12px; color: var(--dempet); margin-top: 14px; line-height: 1.6; } .skjema-feil { border: 1px solid var(--gull); background: rgba(182, 130, 53, 0.1); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; margin-bottom: 18px; } /* --- Meny ---------------------------------------------------------------- */ .topp { position: sticky; top: 0; z-index: 60; background: rgba(231, 228, 224, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); } .topprad { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; } .logo { height: 96px; width: auto; flex: none; display: block; } .meny { display: flex; align-items: center; gap: 22px; margin-left: auto; order: 2; /* DOM-rekkefølgen er logo -> CTA -> meny, som er den visuelle rekkefølgen under 1000px. På skrivebord flyttes menyen foran CTA-en visuelt, se .topp-cta. */ font-family: var(--serif-h); font-size: 18px; } .meny a { color: var(--tekst); text-decoration: none; position: relative; padding-bottom: 3px; /* Uten dette krymper lenkene (flex-elementer gjør det som standard) og teksten brekker over to linjer i stedet for at raden ruller sidelengs. */ flex: none; white-space: nowrap; } .meny a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gull); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .meny a:hover { color: var(--gull-mork); } .meny a:hover::after { transform: scaleX(1); } .meny a[aria-current="page"] { color: var(--gull-mork); } .meny a[aria-current="page"]::after { transform: scaleX(1); } .topp-cta { display: flex; align-items: center; gap: 14px; flex: none; order: 3; } .topp-tlf { font-family: var(--serif-h); font-size: 18px; color: var(--tekst); text-decoration: none; } .topp-tlf:hover { color: var(--gull-mork); } /* --- Tillitsbånd --------------------------------------------------------- */ .band { background: var(--band); border-bottom: 1px solid var(--hairline); } .band ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 46px; row-gap: 10px; list-style: none; margin: 0; padding: 22px 32px; font-family: var(--serif-h); font-size: 15px; } /* --- Mørkt felt (referansekunder) ---------------------------------------- */ .mork-felt { background: var(--mork); color: #eae7e7; } .mork-felt h2 { color: #eae7e7; } .mork-felt .kicker { color: var(--gull-lys); } .mork-felt ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 52px; row-gap: 14px; list-style: none; margin: 0 0 32px; padding: 0; font-family: var(--serif-h); font-size: 19px; } .mork-felt p { color: #cfcac6; } .mork-felt .gullstrek { background: var(--gull-lys); } /* --- Prosjektbånd som sklir ---------------------------------------------- */ .driftfelt { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .drift { display: flex; gap: 20px; width: max-content; animation: mft-drift 64s linear infinite; } .drift > * { width: 300px; flex: none; } @keyframes mft-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Innmalte gullstreker ------------------------------------------------ */ [data-mal] { transition: clip-path 1.1s cubic-bezier(.22, .61, .36, 1); } html.js [data-mal] { clip-path: inset(0 100% 0 0); } html.js [data-mal].malt { clip-path: inset(0 0 0 0); } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .vannmerke { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: 460px; max-width: 46%; opacity: 0.04; pointer-events: none; user-select: none; } .hero .rad { position: relative; padding-top: 96px; padding-bottom: 84px; } .hero h1 { font-size: 72px; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 26px; } .svai { animation: mft-svai 9s ease-in-out infinite; } @keyframes mft-svai { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } } h1 { font-size: 58px; line-height: 1.05; margin: 0 0 26px; } h2 { font-size: 44px; line-height: 1.1; margin: 0 0 24px; } .h2-liten { font-size: 36px; } /* --- Definisjonsliste (kontakt) ------------------------------------------ */ .fakta { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 24px; margin: 0; } .fakta dt { font-size: 13px; color: var(--dempet); } .fakta dd { margin: 0; } /* --- Avslutningsboks ----------------------------------------------------- */ .avslutt { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .avslutt p { font-family: var(--serif-h); font-size: 23px; margin: 0; max-width: 46ch; } /* --- Footer -------------------------------------------------------------- */ .foten { border-top: 1px solid var(--hairline); background: var(--band); } .foten .rad { padding-top: 56px; padding-bottom: 40px; } .fotgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .foten h2 { font-size: 18px; margin: 0 0 14px; } .foten a { text-decoration: none; } .foten a:hover { text-decoration: underline; } .fotlenker { display: grid; gap: 8px; } .fotbunn { border-top: 1px solid var(--hairline); } .fotbunn .rad { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; row-gap: 8px; font-size: 12px; color: var(--dempet); } .fotbunn a { font-size: 12px; } /* --- Malerrulle som markør ----------------------------------------------- */ .rullepeker { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; will-change: transform; transform: translate3d(-200px, -200px, 0); } @media (pointer: fine) { html.js.rulle body, html.js.rulle a, html.js.rulle button, html.js.rulle summary { cursor: none; } html.js.rulle input, html.js.rulle textarea, html.js.rulle select { cursor: text; } } @media (pointer: coarse) { .rullepeker { display: none !important; } } /* ========================================================================== Responsivt ========================================================================== */ @media (max-width: 1180px) { .logo { height: 76px; } .meny { gap: 16px; font-size: 17px; } } @media (max-width: 1080px) { .rute { --kol: 2; } .rute-steg { --kol: 1; } .kortrad { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { .topprad { flex-wrap: wrap; row-gap: 12px; column-gap: 16px; } .meny { /* Under 1000px følger alt DOM-rekkefølgen: logo, CTA, meny. Da stemmer tabrekkefølgen med det man ser (WCAG 2.4.3). */ order: 0; width: 100%; margin-left: 0; overflow-x: auto; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--hairline); } .topp-cta { margin-left: auto; order: 0; } .logo { height: 62px; } h1, .hero h1 { font-size: clamp(34px, 5.4vw, 58px); } } @media (max-width: 820px) { .rad { padding-left: 20px; padding-right: 20px; } .seksjon { padding-top: 52px; padding-bottom: 52px; } .hero .rad { padding-top: 56px; padding-bottom: 52px; } .spalter, .spalter-hero, .spalter-brei, .spalter-tekst, .fotgrid, .felt-rad { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rute { --kol: 1; } .kortrad { grid-template-columns: minmax(0, 1fr); gap: 28px; } h1, .hero h1 { font-size: clamp(34px, 9vw, 58px); } h2 { font-size: clamp(28px, 7vw, 44px); } .h2-liten { font-size: clamp(26px, 6vw, 36px); } .avslutt { padding: 24px; } .avslutt p { font-size: 21px; } .skjema-ramme { padding: 22px; } .band ul { column-gap: 28px; } .mork-felt ul { column-gap: 28px; font-size: 17px; } } /* Telefonnummeret sto tidligere skjult under 620px. Det er den billigste konverteringen på en håndverkerside — mange kunder ringer heller enn å fylle ut skjema — og målt koster det ingenting: headeren er 208 px høy både med og uten det, fordi nummeret legger seg på en linje som allerede finnes. Ikke skjul det igjen uten å måle på nytt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .rullepeker { display: none !important; } html.js [data-mal] { clip-path: none; } html.js.rulle body, html.js.rulle a, html.js.rulle button { cursor: auto; } } @media print { .topp, .rullepeker, .driftfelt, .hopp { display: none; } body { background: #fff; } } /* --- Lasteskjerm --------------------------------------------------------- Bare på forsiden. Drives helt av CSS: uten JavaScript forsvinner den likevel, og den lagrer ingenting på enheten — derfor vises den ved hvert besøk på forsiden i stedet for «én gang per økt», som ville krevd sessionStorage og dermed samtykke etter ekomloven § 3-15. */ .laster { position: fixed; inset: 0; z-index: 10000; background: var(--bunn); /* Skjult som utgangspunkt. Vises bare når JS er i gang og dermed kan garantere at den blir fjernet igjen (se side.js). Uten JS ser besøkende aldri overlegget — bedre enn å risikere at det blir hengende. */ display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px; /* Kan aldri fange et klikk, uansett hva som skjer med animasjonen. */ pointer-events: none; animation: mft-lasteut 1.9s cubic-bezier(.4, 0, .2, 1) forwards; } html.js .laster { display: flex; } .laster img { width: min(560px, 76vw); height: auto; animation: mft-avdekk 1.15s cubic-bezier(.22, .61, .36, 1) forwards; } .laster-strek { width: min(560px, 76vw); height: 2px; background: rgba(32, 31, 29, 0.12); overflow: hidden; } .laster-strek > i { display: block; height: 100%; background: var(--gull); transform-origin: left; transform: scaleX(0); animation: mft-strekvokse 1.4s cubic-bezier(.4, 0, .2, 1) forwards; } .laster p { margin: 0; font-family: var(--serif-h); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; color: var(--gull-mork); } @keyframes mft-avdekk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes mft-strekvokse { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mft-lasteut { 0%, 68% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .laster { display: none; } } /* Ekte fotografi i bildefeltet. Samme mål som plassholderen, så oppsettet ikke hopper når bildene kommer på plass. object-fit: cover beskjærer i stedet for å strekke. */ .plate > img { display: block; width: 100%; aspect-ratio: var(--forhold, 4 / 3); object-fit: cover; background: var(--band); } /* --- Lenis (myk rulling) -------------------------------------------------- Reglene under følger med biblioteket og må være med for at det skal virke. Limt inn her i stedet for å lastes som egen fil — én forespørsel mindre. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* ========================================================================= Interaktivitet — lagt til uten å røre eksisterende oppsett. Alt er progressiv forbedring: uten JavaScript vises innholdet som før, og prefers-reduced-motion slår av all bevegelse. ========================================================================= */ /* --- Innglidning ved rulling --------------------------------------------- */ html.js-klar .mft-skjul { opacity: 0; transform: translateY(18px); } html.js-klar .mft-skjul.mft-inn { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--mft-forsink, 0ms); } /* --- Bilder og kort som lever ved peker ----------------------------------- */ .plate { overflow: hidden; transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease; } .plate > img { transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease; } .plate:hover { box-shadow: 0 14px 34px rgba(32, 31, 29, 0.16); border-color: var(--gull-kant); transform: translateY(-3px); } .plate:hover > img { transform: scale(1.045); filter: saturate(1.06); } .kortrad > div { transition: transform 0.35s ease; } .kortrad > div:hover { transform: translateY(-2px); } .knapp { transition: transform 0.18s ease, background 0.25s ease, box-shadow 0.25s ease; } .knapp:hover { box-shadow: 0 8px 20px rgba(32, 31, 29, 0.14); } .knapp:active { transform: translateY(1px) scale(0.99); } .meny a { position: relative; } .meny a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--gull); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .meny a:hover::after, .meny a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* --- Fremdriftslinje og opp-knapp ----------------------------------------- */ .mft-fremdrift { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gull-mork), var(--gull), var(--gull-lys)); z-index: 200; pointer-events: none; } .mft-opp { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gull-kant); background: var(--bunn); color: var(--gull-mork); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(32, 31, 29, 0.18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease; } .mft-opp.vis { opacity: 1; transform: none; pointer-events: auto; } .mft-opp:hover { background: rgba(182, 130, 53, 0.14); } /* --- Før/etter-visning ---------------------------------------------------- */ .mft-fe { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius); aspect-ratio: 16 / 10; background: var(--band); touch-action: pan-y; } .mft-fe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mft-fe .mft-fe-topp { clip-path: inset(0 0 0 var(--mft-del, 50%)); } .mft-fe-hank { position: absolute; top: 0; bottom: 0; left: var(--mft-del, 50%); width: 2px; background: var(--gull-lys); transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(32, 31, 29, 0.25); } .mft-fe-hank::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--bunn); color: var(--gull-mork); border: 1px solid var(--gull-kant); display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 6px 16px rgba(32, 31, 29, 0.24); } .mft-fe-merk { position: absolute; top: 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(32, 31, 29, 0.68); color: #f3efe9; } .mft-fe-for { left: 12px; } .mft-fe-etter { right: 12px; } .mft-fe input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } /* --- Skjema med umiddelbar tilbakemelding --------------------------------- */ .input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .input:focus { outline: none; border-color: var(--gull-mork); box-shadow: 0 0 0 3px rgba(182, 130, 53, 0.22); } .input.mft-ok { border-color: #4b7d52; } .input.mft-mangler { border-color: #a1442f; box-shadow: 0 0 0 3px rgba(161, 68, 47, 0.14); } .mft-feltvarsel { display: block; font-size: 12px; color: #a1442f; margin-top: 6px; } .mft-teller { font-size: 12px; color: var(--dempet); margin-top: 6px; text-align: right; } @media (prefers-reduced-motion: reduce) { html.js-klar .mft-skjul { opacity: 1; transform: none; } .plate, .plate > img, .kortrad > div, .knapp, .meny a::after, .mft-opp { transition: none !important; } .plate:hover, .plate:hover > img, .kortrad > div:hover { transform: none; } } @media print { .mft-fremdrift, .mft-opp { display: none; } } /* --- Bildevisning i stor størrelse ---------------------------------------- */ .mft-lys { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(24, 23, 21, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mft-lys.vis { opacity: 1; pointer-events: auto; } .mft-lys img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto; object-fit: contain; border: 6px solid var(--bunn); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transform: scale(0.97); transition: transform 0.3s ease; } .mft-lys.vis img { transform: none; } .mft-lys figcaption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #efe9e1; font-size: 14px; padding: 0 24px; } .mft-lys-lukk { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: #efe9e1; border: 1px solid rgba(239, 233, 225, 0.5); font-size: 20px; line-height: 1; cursor: pointer; } .mft-lys-lukk:hover { background: rgba(239, 233, 225, 0.14); } .plate > img { cursor: zoom-in; } @media (prefers-reduced-motion: reduce) { .mft-lys, .mft-lys img { transition: none; } }