/* ========================================================================== VerdiBo — delt designsystem Utvider teaser-paletten (DM Serif/Sans, dyp grønn/sort, grønne accenter) til et fullt komponentbibliotek for forside + segmentsider. ========================================================================== */ :root { /* Farger — arvet fra teaser.html */ --green: #6fb380; --green-bright: #8ccfa0; --green-dim: #4a7c59; --green-deep: #2f5840; --text: #e8ece9; --text-muted: #8a9690; --text-faint: #7d8a84; /* 4.55:1 mot bg-elev-2, 5.28:1 mot bg — WCAG AA for liten tekst */ --bg: #0a120e; --bg-elev: #131c16; --bg-elev-2: #18221b; --border: #1f2a23; --border-soft: #182019; --border-focus: #6fb380; --red-dim: #b06a5a; /* "i dag" / energimerke E */ --error: #d47a6a; --btn-text: #0a120e; /* tekst på grønne primærknapper */ --prose-text: #cfd6d1; --header-bg: rgba(10, 18, 14, 0.88); --header-bg-rest: rgba(10, 18, 14, 0.72); --thumb-to: #0d1712; /* mørk ende av artikkel-thumbnails */ --cta-grad-to: #0d1712; /* nedre ende av CTA-blokkens gradient */ --logo-filter: brightness(0) invert(1); /* partnerlogoer: hvite på mørk flate */ color-scheme: dark; /* Romslighet og rytme */ --maxw: 1140px; --maxw-narrow: 820px; --radius: 14px; --radius-lg: 22px; --section-y: clamp(84px, 12vw, 152px); --shadow-glow: 0 8px 40px rgba(111, 179, 128, 0.14); --shadow-card: 0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -24px rgba(0,0,0,0.7); } /* --- Lyst tema ------------------------------------------------------------- Standard er mørkt; theme.js setter data-theme på ut fra lagret valg eller prefers-color-scheme. Alle par holder WCAG AA (kontrast i kommentar). */ [data-theme="light"] { --green: #2f6b44; /* lenker 5.8:1 mot bg, knappflate m/ hvit tekst 6.4:1 */ --green-bright: #275a39; /* hover-flate og aksenttekst 8.1:1 */ --green-dim: #5c9270; --green-deep: #d8e9dd; /* avatar/thumb-flate — mørkegrønn tekst oppå */ --text: #182219; /* 15.1:1 */ --text-muted: #47544c; /* 7.3:1 */ --text-faint: #5d6a63; /* 5.2:1 mot bg, 4.8:1 mot bg-elev-2 */ --bg: #f3f6f3; --bg-elev: #ffffff; --bg-elev-2: #e7efe9; --border: #d3ddd5; --border-soft: #dfe7e0; --border-focus: #2f6b44; --red-dim: #9c4530; /* 5.8:1 */ --error: #b23f2e; /* 5.3:1 */ --btn-text: #ffffff; --prose-text: #313d34; --header-bg: rgba(243, 246, 243, 0.88); --header-bg-rest: rgba(243, 246, 243, 0.72); --thumb-to: #b9d4c2; --cta-grad-to: #ffffff; /* flat hvit — ingen gradient i lyst tema */ --logo-filter: brightness(0); /* partnerlogoer: sorte på lys flate */ --shadow-glow: 0 8px 40px rgba(47, 107, 68, 0.12); --shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -24px rgba(20,40,28,0.18); color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; background-image: radial-gradient(ellipse 70% 50% at 50% -8%, rgba(111, 179, 128, 0.09) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 8%, rgba(111, 179, 128, 0.04) 0%, transparent 55%); background-repeat: no-repeat; } a { color: inherit; text-decoration: none; } /* Merket tekst i merkevaregrønt */ ::selection { background: rgba(111, 179, 128, .35); color: var(--text); } [data-theme="light"] ::selection { background: rgba(47, 107, 68, .22); } /* Synlig, merkevaretro fokusring for tastaturnavigasjon */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible { outline-offset: 3px; } /* --- Layout --------------------------------------------------------------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .narrow { max-width: var(--maxw-narrow); margin-left: auto; margin-right: auto; } .section { padding: var(--section-y) 0; } .section--tight { padding: clamp(48px, 7vw, 80px) 0; } /* Typografi */ h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); } h1 { font-size: clamp(38px, 6.4vw, 68px); line-height: 1.05; } h2 { font-size: clamp(28px, 4.2vw, 44px); } h3 { font-size: clamp(20px, 2.4vw, 26px); } .em { color: var(--green); font-style: italic; } .eyebrow { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; } .lead { font-size: clamp(17px, 1.9vw, 21px); color: var(--text-muted); line-height: 1.55; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); font-size: 13px; } /* --- Knapper -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: background .16s ease, border-color .16s ease, transform .1s ease, color .16s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--green); color: var(--btn-text); } .btn--primary:hover { background: var(--green-bright); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: var(--green-dim); color: var(--green-bright); } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn .arrow { transition: transform .16s ease; } .btn:hover .arrow { transform: translateX(3px); } /* --- Header / nav --------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--header-bg-rest); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .site-header.scrolled { border-bottom-color: var(--border); background: var(--header-bg); } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 11px; font-family: 'DM Sans'; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .brand svg { width: 26px; height: 26px; display: block; } .brand .bo { color: inherit; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a:not(.btn) { font-size: 14.5px; font-weight: 500; color: var(--text-muted); padding: 8px 13px; border-radius: 9px; transition: color .15s ease, background .15s ease; } .nav-links a:not(.btn):hover { color: var(--text); background: var(--bg-elev); } .nav-links a.btn--primary { color: var(--btn-text); } .nav-links a.btn--primary:hover { color: var(--btn-text); background: var(--green-bright); } .nav-cta { margin-left: 6px; } .nav .brand { margin-right: auto; } /* Temaveksler */ .theme-toggle { background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 6px; color: var(--text-muted); display: grid; place-items: center; border-radius: 9px; transition: color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--text); background: var(--bg-elev); } .theme-toggle svg { width: 18px; height: 18px; display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } /* Dropdown for "For hvem" */ .nav-drop { position: relative; } .nav-drop > a::after { content: '▾'; font-size: 10px; margin-left: 5px; opacity: .6; } .nav-drop-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 230px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; /* Forsinket lukking: små museglipp ut av menyen lukker den ikke brått. */ transition: opacity .16s ease .18s, transform .16s ease .18s, visibility .16s .18s; } /* Usynlig bro over 8px-gapet mellom "For hvem" og menyen, så :hover ikke slippes idet pekeren krysser mellomrommet. */ .nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; } .nav-drop-menu a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; } .nav-drop-menu a strong { color: var(--text); font-weight: 600; font-size: 14px; } .nav-drop-menu a span { color: var(--text-faint); font-size: 12px; } .nav-drop-menu a:hover { background: var(--bg-elev-2); } .nav-drop-menu a:hover strong { color: var(--green-bright); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* --- Hero ----------------------------------------------------------------- */ .hero { padding: clamp(64px, 11vw, 120px) 0 clamp(56px, 8vw, 96px); position: relative; } .hero h1 { margin-bottom: 26px; max-width: 16ch; } .hero .lead { max-width: 52ch; margin-bottom: 38px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-note { margin-top: 22px; font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; } .hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(111,179,128,.5); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(111,179,128,.5);} 50% { box-shadow: 0 0 0 7px rgba(111,179,128,0);} } /* Energimerke E -> C badge (hero-visual) */ .grade-badge { display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); font-size: 14px; color: var(--text-muted); } .grade { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-family: 'DM Sans'; font-size: 15px; } .grade--e { background: rgba(176,106,90,.16); color: var(--red-dim); } .grade--c { background: rgba(111,179,128,.16); color: var(--green-bright); } .grade-arrow { color: var(--text-faint); } /* --- Flyt (5 aktører) ----------------------------------------------------- */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; } .flow-step { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; position: relative; } .flow-step .n { font-family: 'DM Sans'; font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .1em; } .flow-step h3 { font-size: 18px; margin: 12px 0 8px; } .flow-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; } .flow-step .actor { margin-top: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .flow-step::after { content: '→'; position: absolute; right: -13px; top: 32px; color: var(--green-dim); font-size: 18px; z-index: 2; } .flow-step:last-child::after { display: none; } /* --- Segment-router ("hvem er du?") --------------------------------------- */ .segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .seg-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; transition: transform .2s ease, border-color .2s ease, background .2s ease; position: relative; overflow: hidden; } .seg-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(111,179,128,.08), transparent 70%); opacity: 0; transition: opacity .25s ease; } .seg-card:hover { transform: translateY(-4px); border-color: var(--green-dim); } .seg-card:hover::before { opacity: 1; } .seg-card .ic { width: 40px; height: 40px; color: var(--green); position: relative; } .seg-card h3 { font-size: 21px; position: relative; } .seg-card p { font-size: 14.5px; color: var(--text-muted); position: relative; flex: 1; } .seg-card .go { margin-top: 8px; font-family: 'DM Sans'; font-weight: 600; font-size: 14px; color: var(--green); display: inline-flex; align-items: center; gap: 7px; position: relative; } .seg-card:hover .go .arrow { transform: translateX(4px); } .seg-card .go .arrow { transition: transform .16s ease; } /* --- Generelle kort ------------------------------------------------------- */ .cards { display: grid; gap: 18px; } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; } .card .ic { width: 30px; height: 30px; color: var(--green); margin-bottom: 16px; } .card h3 { font-size: 19px; margin-bottom: 10px; } .card p { font-size: 14.5px; color: var(--text-muted); } /* Steg-liste (segmentsider) */ .steps { display: grid; gap: 4px; } .step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border-soft); } .step:last-child { border-bottom: 0; } .step .num { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); display: grid; place-items: center; font-family: 'DM Sans'; font-weight: 700; color: var(--green); } .step h3 { font-size: 19px; margin-bottom: 6px; } .step p { font-size: 14.5px; color: var(--text-muted); } /* Punktliste med hake */ .checklist { list-style: none; display: grid; gap: 14px; } .checklist li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: var(--text); } .checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; } .checklist li span { color: inherit; } /* Før/etter regneeksempel */ .compare { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* minmax(0, …fr) gjør kolonnebreddene eksakte — uten den gir lange ord (f.eks. "oppgradering") header- og datarader ulike kolonner. */ .compare-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); background: var(--bg-elev); border-bottom: 1px solid var(--border); } .compare-head > div { padding: 16px 22px; font-family: 'DM Sans'; font-weight: 600; font-size: 13px; letter-spacing: .04em; } .compare-head .h-now { color: var(--red-dim); } .compare-head .h-after { color: var(--green-bright); } .compare-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--border-soft); } .compare-row:last-child { border-bottom: 0; } .compare-row > div { padding: 15px 22px; font-size: 14.5px; } .compare-head > div, .compare-row > div { hyphens: auto; overflow-wrap: break-word; } .compare-row .label { color: var(--text-muted); } .compare-row .now { color: var(--text); } .compare-row .after { color: var(--green-bright); font-weight: 600; } /* Stat-rad */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stat .num { font-family: 'DM Serif Display', serif; font-size: clamp(34px, 4.6vw, 48px); color: var(--green-bright); line-height: 1; } .stat .lbl { margin-top: 10px; font-size: 14px; color: var(--text-muted); } /* Trust-bar */ .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 0; } .trust-label { text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 26px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 50s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee img { margin: 0 clamp(20px, 3vw, 42px); height: 24px; width: auto; opacity: .5; filter: var(--logo-filter); transition: opacity .25s ease; flex-shrink: 0; } .marquee img:hover { opacity: .95; } .marquee img.featured { opacity: .82; height: 30px; } /* FAQ accordion */ .faq { border-top: 1px solid var(--border); } .faq details { border-bottom: 1px solid var(--border); } .faq summary { list-style: none; cursor: pointer; padding: 22px 4px; font-family: 'DM Sans'; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 20px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--green); font-size: 22px; font-weight: 400; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 4px 24px; color: var(--text-muted); font-size: 15px; max-width: 68ch; } /* CTA-blokk */ .cta-block { text-align: center; background: linear-gradient(180deg, var(--bg-elev) 0%, var(--cta-grad-to) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(48px, 7vw, 80px) 28px; box-shadow: var(--shadow-glow); } .cta-block h2 { margin-bottom: 16px; } .cta-block .lead { margin: 0 auto 32px; max-width: 46ch; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta-choice { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px auto 0; } .cta-choice .btn { justify-content: center; white-space: nowrap; } /* --- Kvalifiserings-modal ------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 9, 7, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { position: relative; /* forankrer .modal-close — uten denne hopper krysset til skjermhjørnet når åpningsanimasjonens transform fjernes */ width: 100%; max-width: 460px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-card); transform: translateY(12px) scale(.98); transition: transform .24s cubic-bezier(.2,.7,.2,1); max-height: calc(100vh - 48px); overflow-y: auto; } .modal-overlay.open .modal { transform: none; } .modal-close { position: absolute; top: 16px; right: 18px; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 24px; line-height: 1; padding: 6px; transition: color .15s ease; } .modal-close:hover { color: var(--text); } .modal h3 { font-size: 24px; margin-bottom: 10px; } .modal .modal-sub { font-size: 14.5px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.5; } .modal-roles { display: grid; gap: 10px; margin-bottom: 20px; } .role-opt { display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); transition: border-color .15s ease, background .15s ease; font-size: 14.5px; color: var(--text); } .role-opt:hover { border-color: var(--green-dim); } .role-opt input { position: absolute; opacity: 0; pointer-events: none; } .role-opt .tick { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; transition: border-color .15s ease; } .role-opt .tick::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .15s ease; } .role-opt.sel { border-color: var(--green); background: var(--bg-elev-2); } .role-opt.sel .tick { border-color: var(--green); } .role-opt.sel .tick::after { transform: scale(1); } .modal input[type="email"], .modal input[type="text"], .modal textarea { width: 100%; font-family: inherit; font-size: 15px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); margin-bottom: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .modal textarea { resize: vertical; min-height: 96px; } .modal input[type="email"]::placeholder, .modal input[type="text"]::placeholder, .modal textarea::placeholder { color: var(--text-faint); } .modal input[type="email"]:focus, .modal input[type="text"]:focus, .modal textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(111,179,128,.15); } .modal .form-error { font-size: 13px; color: var(--error); margin: -6px 0 12px; } .modal .field-error { display: none; font-size: 12.5px; color: var(--error); margin: -8px 0 12px; } .modal .field-error.show { display: block; } .modal input.invalid, .modal textarea.invalid { border-color: var(--error); } .modal input.invalid:focus, .modal textarea.invalid:focus { border-color: var(--error); box-shadow: 0 0 0 3px rgba(212,122,106,.15); } .modal .btn { width: 100%; justify-content: center; } .modal .soft-note { font-size: 13px; color: var(--green-bright); margin-bottom: 14px; line-height: 1.45; } .modal .modal-fine { font-size: 12px; color: var(--text-faint); margin-top: 14px; text-align: center; } .modal-success { text-align: center; padding: 8px 0; } .modal-success .ok { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; background: rgba(111,179,128,.14); display: grid; place-items: center; color: var(--green); font-size: 26px; } .modal-success h3 { margin-bottom: 10px; } .modal-success p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 22px; } /* --- Editorial / Innsikt -------------------------------------------------- */ .post-feature { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elev); } .post-feature .thumb { background: linear-gradient(135deg, var(--green-deep), var(--thumb-to)); min-height: 300px; } .post-feature .pf-body { padding: clamp(30px, 4vw, 46px); display: flex; flex-direction: column; justify-content: center; } .post-cat { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; } .post-feature h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 16px; } .post-feature p { color: var(--text-muted); font-size: 15px; margin-bottom: 22px; } .post-meta { font-size: 13px; color: var(--text-faint); } .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .post-card { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, border-color .2s ease; } .post-card:hover { transform: translateY(-4px); border-color: var(--green-dim); } .post-card .thumb { height: 150px; background: linear-gradient(135deg, var(--green-deep), var(--thumb-to)); } .post-card .pc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .post-card h3 { font-size: 19px; margin: 8px 0 10px; } .post-card p { font-size: 14px; color: var(--text-muted); flex: 1; margin-bottom: 16px; } .news-list { display: grid; gap: 0; } .news-item { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; } .news-item:first-child { border-top: 1px solid var(--border-soft); } .news-item .date { font-size: 13px; color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; } .news-item h3 { font-size: 18px; margin-bottom: 5px; } .news-item p { font-size: 14px; color: var(--text-muted); } .ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .ref-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; } .ref-card .quote { font-family: 'DM Serif Display', serif; font-size: 20px; line-height: 1.42; color: var(--text); margin-bottom: 22px; } .ref-attr { display: flex; align-items: center; gap: 13px; } .ref-attr .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-deep); display: grid; place-items: center; color: var(--green-bright); font-weight: 700; font-family: 'DM Sans', sans-serif; flex-shrink: 0; } .ref-attr .who { font-size: 14px; font-weight: 600; color: var(--text); } .ref-attr .role2 { font-size: 12.5px; color: var(--text-faint); } /* Enkeltartikkel */ .article-header { padding: clamp(48px, 8vw, 88px) 0 28px; } .article-header h1 { max-width: 22ch; margin-bottom: 22px; } .article-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13.5px; color: var(--text-faint); } .prose { font-size: 17px; line-height: 1.72; color: var(--prose-text); } .prose > * + * { margin-top: 22px; } .prose .lead-p { font-size: 19px; color: var(--text-muted); line-height: 1.6; } .prose h2 { font-family: 'DM Serif Display', serif; font-size: 26px; margin-top: 46px; margin-bottom: 4px; color: var(--text); letter-spacing: -0.01em; } .prose h3 { font-family: 'DM Serif Display', serif; font-size: 20px; margin-top: 32px; color: var(--text); } .prose a { color: var(--green-bright); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; } .prose blockquote { border-left: 3px solid var(--green); padding: 2px 0 2px 22px; font-family: 'DM Serif Display', serif; font-size: 21px; color: var(--text); font-style: italic; } .prose img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); } .article-foot { border-top: 1px solid var(--border); margin-top: 52px; padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; } @media (max-width: 720px) { .post-feature { grid-template-columns: 1fr; } .post-feature .thumb { min-height: 170px; } .news-item { grid-template-columns: 1fr; gap: 4px; } } /* Positioning / kategori-rad */ .position { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .position > div { background: var(--bg); padding: 26px 24px; } .position .role { font-size: 13px; color: var(--text-faint); letter-spacing: .04em; margin-bottom: 8px; } .position .who { font-family: 'DM Sans'; font-weight: 600; font-size: 16px; margin-bottom: 6px; } .position .verdibo { background: var(--bg-elev); } .position .verdibo .who { color: var(--green-bright); } .position .desc { font-size: 13.5px; color: var(--text-muted); } /* --- Footer --------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 56px 0 40px; margin-top: 40px; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; } .footer-brand { max-width: 300px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand p { font-size: 14px; color: var(--text-muted); } .footer-cols { display: flex; gap: clamp(36px, 6vw, 72px); flex-wrap: wrap; } .footer-col .footer-h { font-family: 'DM Sans'; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .footer-col a { display: block; font-size: 14px; color: var(--text-muted); padding: 5px 0; transition: color .15s ease; } .footer-col a:hover { color: var(--green-bright); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-faint); } .footer-bottom .tagline { color: var(--green); font-style: italic; font-family: 'DM Serif Display', serif; } .footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .footer-bottom a:hover { color: var(--text-muted); } .modal-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* --- Referanse -------------------------------------------------------------- */ .testimonial blockquote { margin: 0; } .testimonial .t-quote { font-family: 'DM Serif Display', serif; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.25; color: var(--text); margin: 14px 0 24px; } .testimonial blockquote > p:not(.t-quote) { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 14px; max-width: 64ch; } .testimonial .t-who { display: flex; align-items: center; gap: 13px; margin-top: 24px; font-size: 14px; color: var(--text-muted); } .testimonial .t-who strong { color: var(--text); font-size: 15px; } .testimonial .t-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--green); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; } /* --- Juridiske sider (personvern) ------------------------------------------ */ .legal { padding: clamp(56px, 9vw, 100px) 0 clamp(48px, 7vw, 80px); } .legal .wrap { max-width: 720px; } .legal h1 { margin-bottom: 10px; } .legal .updated { font-size: 13px; color: var(--text-faint); margin-bottom: 34px; } .legal h2 { font-size: 20px; margin: 34px 0 12px; } .legal p { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin-bottom: 14px; } .legal ul { margin: 0 0 14px 22px; color: var(--text-muted); font-size: 15px; line-height: 1.65; } .legal li { margin-bottom: 6px; } .legal a { color: var(--green); } .legal strong { color: var(--text); } /* --- Samtykke-banner ------------------------------------------------------- */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 520px; margin: 0 auto; padding: 20px 22px; background: var(--bg-elev-2, #14201a); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .cookie-banner.open { opacity: 1; visibility: visible; transform: none; } .cookie-banner p { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin-bottom: 14px; } .cookie-banner strong { color: var(--text); } .cookie-banner a { color: var(--green); } .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-actions .btn { flex: 1; justify-content: center; min-width: 140px; } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } } /* --- Scroll-reveal -------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; } /* Seksjons-topp helper */ .section-head { max-width: 60ch; margin-bottom: clamp(44px, 6vw, 68px); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { margin-bottom: 16px; } /* --- Responsiv ------------------------------------------------------------ */ @media (max-width: 940px) { .flow { grid-template-columns: repeat(2, 1fr); } .flow-step::after { display: none; } .segments { grid-template-columns: repeat(2, 1fr); } .cards--3, .stats, .position { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 68px; left: 0; right: 0; height: calc(100dvh - 68px); background: var(--bg-elev); padding: 16px 18px 32px; gap: 2px; overflow-y: auto; } .nav-links.open a:not(.btn) { padding: 13px 10px; font-size: 17.5px; } .nav-links.open .nav-drop-menu a { padding: 10px 10px; } .nav-links.open .nav-drop-menu a strong { font-size: 16px; } .nav-links.open .nav-drop-menu a span { font-size: 13.5px; } .nav-links.open .btn { justify-content: center; margin-top: 12px; padding: 15px 24px; font-size: 16px; } .nav-drop-menu, .nav-drop:hover .nav-drop-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; transition: none; } .nav-drop-menu::before { display: none; } .nav-drop > a::after { display: none; } .flow, .segments, .cards--3, .cards--2, .stats, .position { grid-template-columns: 1fr; } .compare-head, .compare-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.1fr); } .compare-head > div, .compare-row > div { padding: 13px 14px; font-size: 13px; } .footer-top { flex-direction: column; } } /* --- Hero-visual: animert hus (fra teaser) ------------------------------- */ .hero--split .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 56px); align-items: center; } .hero-visual { display: flex; justify-content: center; } .house { width: clamp(190px, 27vw, 300px); filter: drop-shadow(0 14px 44px rgba(111,179,128,.22)); } .house svg { display: block; width: 100%; height: auto; } .house .outline { stroke: var(--green); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; } .house .bar { fill: var(--green); transform-box: fill-box; transform-origin: 50% 100%; animation: grow 4.5s cubic-bezier(.4,0,.2,1) infinite; } .house .bar-1 { animation-delay: 0s; } .house .bar-2 { animation-delay: .5s; } .house .bar-3 { animation-delay: 1s; } @keyframes grow { 0% { transform: scaleY(.08); opacity: .25; } 18%, 78% { transform: scaleY(1); opacity: 1; } 92%, 100% { transform: scaleY(.08); opacity: .25; } } @media (max-width: 760px) { .hero--split .wrap { grid-template-columns: 1fr; } .hero--split .hero-visual { order: -1; width: 170px; margin: 0 auto 8px; } .hero { text-align: center; } .hero h1, .hero .lead { margin-left: auto; margin-right: auto; } .hero-cta, .hero-note { justify-content: center; } } /* --- Energimerke-skala E -> C --------------------------------------------- */ .energy-scale { max-width: 460px; } .es-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .es-seg { height: 40px; display: grid; place-items: center; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: #0a120e; border-radius: 6px; opacity: .38; transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease; } .es-a { background: #2f9e44; } .es-b { background: #5cb85c; } .es-c { background: #8ccfa0; } .es-d { background: #d8c84a; } .es-e { background: #e0a44a; } .es-f { background: #d97b4a; } .es-g { background: #c25a4a; } .energy-scale.in-view .es-e { opacity: .8; } .energy-scale.in-view .es-c { opacity: 1; transform: translateY(-5px) scale(1.07); box-shadow: 0 8px 22px -6px rgba(140,207,160,.7); } .es-pointer { position: relative; height: 30px; margin-top: 10px; } .es-pointer .pin { position: absolute; top: 0; left: 64.3%; transform: translateX(-50%); transition: left 1.1s cubic-bezier(.5,.05,.2,1); display: flex; flex-direction: column; align-items: center; font-size: 11px; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; } .es-pointer .pin::before { content: '▲'; color: var(--green-bright); font-size: 11px; margin-bottom: 3px; } .energy-scale.in-view .es-pointer .pin { left: 35.7%; } .es-cap { margin-top: 18px; font-size: 13px; color: var(--text-faint); } /* --- Innsikt-thumbnails: generative mønstre ------------------------------- */ .thumb { position: relative; overflow: hidden; } .thumb::after { content: ''; position: absolute; inset: 0; opacity: .55; } .thumb--analyse::after { background: linear-gradient(120deg, rgba(140,207,160,.22), transparent 62%), repeating-linear-gradient(90deg, transparent 0 13px, rgba(140,207,160,.08) 13px 14px); } .thumb--okonomi::after { background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(140,207,160,.14) 16px 19px); } .thumb--finans::after { background: radial-gradient(circle at 28% 72%, rgba(140,207,160,.22), transparent 52%), radial-gradient(circle at 72% 30%, rgba(111,179,128,.16), transparent 52%); } .thumb--regelverk::after { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(140,207,160,.1) 14px 15px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .hero-note .dot { animation: none; } .es-pointer .pin, .es-seg { transition: none; } * { animation-duration: .001ms !important; } }