/* ============================================================ ENSPECTA ENERGI — Design System v3 "Skog & Guld" Källa: godkänd palett från variant-a (preview) Archivo (display) · Inter (body) — i KEYTO-familjen, ingen kursiv. Accent görs med vikt + grön/guld färg (samma mönster som KEYTO-bandet). Archivo/Inter självhostas via @font-face längre ned (DS v4, variabla woff2 som täcker Archivo 500-900 + Inter 400-700). Google-@import borttagen 2026-06-24 (render-blockerande) — preloads ligger i . ============================================================ */ :root { /* Behåller v1-variabelnamn, nya värden — alla inline-styles följer med */ --navy: #103e2a; /* djup skogsgrön — mörka sektioner */ --navy-2: #15543a; --navy-3: #1b6b43; --green: #1b6b43; /* primär skogsgrön */ --green-2: #2a8a57; --orange: #d9c89a; /* guldaccent (ersätter orange) */ --orange-2: #c9b67f; --white: #fdfcf9; --off-white: #f6f4ef; /* cream — sidbas */ --gray-100: #efece4; --gray-200: #e4dfd4; /* sand */ /* Var #7a8279, vilket gav 3,9:1 mot cremen. Tonen anvands genomgaende till liten text (etiketter, hint, smatext i knappar) dar AA kraver 4,5, sa den ar morkad ett snapp i stallet for att lappas per stalle. Samma kulor. (KEYTO-granskningen 2026-08-14.) */ --gray-500: #6b7370; --gray-700: #46514a; --text: #1a1a1a; --text-2: #46514a; --pale: #eaf4ee; --gold: #d9c89a; --radius: 14px; --radius-lg: 22px; --shadow: 0 2px 20px rgba(16,62,42,0.07); --shadow-lg: 0 18px 56px rgba(16,62,42,0.13); --transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } /* Lenis tar över */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: 'Inter', sans-serif; font-weight: 400; color: var(--text); background: var(--off-white); line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--gold); color: var(--text); } /* ---------- Scrollprogress (signaturdetalj) ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--green), var(--gold)); z-index: 1000; } /* ---------- Scroll reveals ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .anim-delay-0, .anim-delay-1, .anim-delay-2, .anim-delay-3 { animation: none !important; opacity: 1 !important; } } /* ---------- Nav ---------- */ nav { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 18px 5%; background: rgba(246,244,239,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(26,26,26,0.06); transition: padding 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } nav.scrolled { padding: 12px 5%; box-shadow: 0 1px 24px rgba(16,62,42,0.08); } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; } .nav-logo svg { width: 28px; height: 28px; } .nav-links { display: flex; align-items: center; justify-content: center; gap: 30px; flex: 1; } /* Centrerad meny. Navet har tre barn: logga, lankar, CTA. Mittkolumnen tar allt kvarvarande utrymme och centrerar sig i det, sa lankarna hamnar mitt pa sidan i stallet for att klumpa ihop sig till hoger vid CTA:n. */ .nav-links a { color: var(--text-2); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--green); } /* Navposter far aldrig brytas mitt i ordet ("E-\nWay"). Produktsidorna har 9 poster, sa gapet krymper i stallet nar utrymmet tryter, anda ner till hamburgaren vid 980px. */ .nav-links a { white-space: nowrap; } @media (max-width: 1440px) { .nav-links { gap: 20px; } } @media (max-width: 1240px) { .nav-links { gap: 14px; } .nav-links a { font-size: 0.86rem; } .nav-cta, a.nav-cta { padding: 10px 16px; font-size: 0.84rem; } } /* Sju lankar sedan Serviceavtal lades till. Menyn far plats aven utan detta (matt: 29px luft vid 981px), men marginalen ar tunnare an plattformarnas egen variation i fontrendering. Bara gapet krymper, textstorleken lamnas ifred, 0.86rem ar redan i underkant for menytext. */ @media (max-width: 1120px) { .nav-links { gap: 10px; } } .nav-cta, a.nav-cta { background: var(--green); color: var(--white) !important; padding: 11px 22px; border-radius: 100px; font-weight: 600; font-size: 0.9rem; transition: background 0.25s, transform 0.25s; } .nav-cta:hover { background: var(--navy); transform: translateY(-1px); } /* Hamburgare, injiceras av site.js. Dold på desktop, syns under 980px. */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px -6px -8px 0; color: var(--green); line-height: 0; } .nav-toggle svg { width: 26px; height: 26px; } /* ---------- Hero ---------- */ .hero { min-height: 86vh; display: flex; align-items: center; padding: 72px 5% 88px; position: relative; overflow: hidden; background: var(--off-white); } /* mörka inline-gradienter på undersidor remappas i HTML till grön familj */ .hero-inner { max-width: 1180px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.14fr 0.86fr; gap: 56px; align-items: center; } .hero-tag { display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); background: var(--pale); border: 1px solid rgba(27,107,67,0.18); padding: 8px 16px; border-radius: 100px; margin-bottom: 26px; } .hero-tag::before { content: ""; width: 22px; height: 1px; background: var(--gold); } .hero-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 5.4vw, 4.3rem); line-height: 1.16; letter-spacing: -0.004em; color: var(--text); margin-bottom: 30px; text-wrap: balance; /* Jamn radfordelning, inga ensamma ord sist. */ text-wrap: balance; } .hero-title span { font-style: normal; font-weight: 800; letter-spacing: -0.01em; color: var(--green); } /* Optimax-villkor i korthet (e-way). Kompakt prisruta, medvetet fåordig: bara de uppgifter kunden behöver för att jämföra ett elavtal. */ .optimax-terms { margin: 36px auto 0; max-width: 560px; background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 24px 28px; } .optimax-terms-head { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; } .optimax-terms-list { margin: 0; } .optimax-terms-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--gray-200); } .optimax-terms-list > div:last-child { border-bottom: 0; } .optimax-terms-list dt { color: var(--text-2); font-size: 0.92rem; margin: 0; } .optimax-terms-list dd { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--text); text-align: right; white-space: nowrap; } .optimax-terms-note { margin: 14px 0 0; font-size: 0.78rem; color: var(--text-2); opacity: 0.8; } @media (max-width: 480px) { .optimax-terms { padding: 20px 18px; } .optimax-terms-list > div { gap: 12px; } } /* Delad hero (text + bild): textkolumnen är ca 586 px, där spricker 4.3rem och text-wrap: balance delar då första raden mitt itu. Mindre grad + pretty låter den explicita
-brytningen hålla. */ .hero-title.hero-title-split { font-size: clamp(2.6rem, 4.6vw, 3.8rem); text-wrap: pretty; } .hero-subtitle { font-size: 1.08rem; font-weight: 400; color: var(--text-2); max-width: 54ch; margin-bottom: 36px; line-height: 1.85; text-wrap: pretty; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 44px; margin-top: 52px; flex-wrap: wrap; } .hero-stat-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 2.1rem; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; } .hero-stat-num span { font-size: 1rem; font-weight: 600; color: var(--gray-500); margin-left: 3px; } .hero-stat-label { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); margin-top: 4px; } .hero-visual { position: relative; } .hero-visual img { width: 100%; height: auto; border-radius: var(--radius-lg); } /* Mörk hero-variant (undersidor): vit text */ .hero[style*="linear-gradient"] .hero-title { color: var(--white); } .hero[style*="linear-gradient"] .hero-title span { color: var(--gold); } .hero[style*="linear-gradient"] .hero-subtitle { color: rgba(253,252,249,0.72); } .hero[style*="linear-gradient"] .hero-stat-num { color: var(--white); } .hero[style*="linear-gradient"] .hero-tag { background: rgba(217,200,154,0.1); border-color: rgba(217,200,154,0.28); color: var(--gold); } /* ---------- Knappar ---------- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px; border-radius: 100px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.96rem; text-decoration: none; transition: transform 0.25s var(--ease-out), background 0.25s, box-shadow 0.25s, border-color 0.25s; } .btn-primary { /* Fast skogsgrön botten. Knappen ligger ofta i en mörk hero, där --green är omskriven till en ljus nyans, och vit text på den blir oläslig. */ background: #1b6b43; color: var(--white); box-shadow: 0 6px 22px rgba(27,107,67,0.26); } .btn-primary:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16,62,42,0.3); } .btn-secondary { background: transparent; color: var(--text); border: 1.5px solid rgba(26,26,26,0.22); } .btn-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); } .hero[style*="linear-gradient"] .btn-secondary, .cta-banner .btn-secondary, .specs-section .btn-secondary { color: var(--white); border-color: rgba(253,252,249,0.34); } .hero[style*="linear-gradient"] .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } /* ---------- Sektioner & typografi ---------- */ section { padding: 96px 5%; } .section-inner { max-width: 1180px; margin: 0 auto; } .section-tag { display: inline-flex; align-items: center; gap: 10px; font-family: 'Archivo', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 24px; } .section-tag::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex-shrink: 0; } .section-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.22; letter-spacing: 0; color: var(--text); margin-bottom: 24px; text-wrap: balance; } .section-title span { font-style: normal; font-weight: 800; color: var(--green); } .section-subtitle { font-size: 1.04rem; font-weight: 400; color: var(--text-2); max-width: 64ch; line-height: 1.85; margin-bottom: 8px; } /* Mörka sektioner (inline background var(--navy)) */ section[style*="--navy"] .section-title, .specs-section .section-title { color: var(--white); } section[style*="--navy"] .section-title span { color: var(--gold); } section[style*="--navy"] .section-subtitle { color: rgba(253,252,249,0.66); } /* ---------- Hub-kort (kategorisidor) ---------- */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; margin-top: 34px; } .hub-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 34px 28px 30px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; position: relative; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s; } .hub-card::after { content: "→"; position: absolute; top: 30px; right: 26px; font-size: 1.1rem; color: var(--gray-200); transition: color 0.3s, transform 0.3s var(--ease-out); } a.hub-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(27,107,67,0.3); } a.hub-card:hover::after { color: var(--green); transform: translateX(4px); } .hub-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--pale) !important; /* slår ut gamla inline-gradienter */ color: var(--green); margin-bottom: 22px; } .hub-card-icon svg { width: 25px; height: 25px; } .hub-card-category { font-family: 'Archivo', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; } .hub-card h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.32rem; letter-spacing: -0.015em; margin-bottom: 10px; } .hub-card p { font-size: 0.9rem; font-weight: 400; color: var(--text-2); line-height: 1.8; flex: 1; } /* ---------- Badges ---------- */ .badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 6px 13px; border-radius: 100px; margin: 4px 6px 0 0; letter-spacing: 0.02em; } /* Fast skogsgrönt: chippet har alltid ljus botten, även inuti en mörk hero, och ska därför inte följa den ljusa grönnyansen som gäller på mörka ytor. */ .badge-green { background: var(--pale); color: #1b6b43; border: 1px solid rgba(27,107,67,0.16); } .badge-orange { background: rgba(217,200,154,0.22); color: var(--badge-gold-fg, #7d6838); border: 1px solid rgba(217,200,154,0.5); } /* ---------- Features ---------- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 48px; } .feature-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 30px 26px; } .feature-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--pale); display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 0; margin-bottom: 24px; } .feature-icon svg { width: 22px; height: 22px; } .feature-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.04rem; margin-bottom: 10px; letter-spacing: -0.01em; } .feature-desc { font-size: 0.88rem; font-weight: 400; color: var(--text-2); line-height: 1.8; } /* ---------- Kalkylator (signaturkomponent) ---------- */ .calc-section { background: var(--pale); } .calc-box { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 48px; max-width: 880px; margin: 48px auto 0; text-align: left; box-shadow: var(--shadow); } .calc-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 6px; } .calc-subtitle { font-size: 0.9rem; font-weight: 400; color: var(--text-2); margin-bottom: 30px; } .calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 34px; } .calc-field label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; } .calc-field input, .calc-field select { width: 100%; padding: 13px 15px; border: 1.5px solid var(--gray-200); border-radius: 11px; font-family: 'Inter', sans-serif; font-size: 0.98rem; color: var(--text); background: var(--off-white); transition: border-color 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; } .calc-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231b6b43' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } .calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(27,107,67,0.1); } .calc-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; background: var(--navy); border-radius: 16px; padding: 34px 30px; } .calc-result-item { text-align: center; padding: 6px 14px; position: relative; } .calc-result-item + .calc-result-item::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: rgba(253,252,249,0.12); } .calc-result-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.72rem; letter-spacing: -0.02em; color: var(--white); white-space: nowrap; } .calc-result-num[id$="net"], .calc-result-num[id="e-net"] { color: var(--gold); } .calc-result-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(253,252,249,0.55); margin-top: 7px; line-height: 1.5; } /* Skogsgrönt mot djupgrön botten ger bara 1,85:1 och är oläsligt. Genom att skriva om variabeln inuti de mörka ytorna får även inline-satt color:var(--green) rätt nyans, utan att någon enskild rad behöver ändras. */ .calc-result, .specs-section, .cta-banner, .hero[style*="linear-gradient"], #grid-rewards, [style*="background:var(--navy)"], [style*="background: var(--navy)"], [style*="background:#103e2a"], footer, .calc-panel.dark, .dark-surface { --green: #57c88c; --green-2: #7ad4a5; --badge-gold-fg: #e6d4a6; } /* ---------- Specs ---------- */ .specs-section { background: var(--navy); } .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 44px; } .spec-item { background: rgba(253,252,249,0.05); border: 1px solid rgba(253,252,249,0.1); border-radius: var(--radius); padding: 22px 20px; } .spec-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(253,252,249,0.5); margin-bottom: 8px; } .spec-value { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.32rem; color: var(--white); letter-spacing: -0.015em; } .spec-value small { font-size: 0.78rem; font-weight: 500; color: rgba(253,252,249,0.6); } /* ---------- Trust ---------- */ .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 44px; } .trust-item { text-align: left; } .trust-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--pale); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .trust-icon svg { width: 21px; height: 21px; } .trust-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 8px; } .trust-desc { font-size: 0.86rem; font-weight: 400; color: var(--text-2); line-height: 1.8; } /* ---------- CTA-banner ---------- */ .cta-banner { background: var(--navy); text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 78% 110%, rgba(217,200,154,0.13), transparent 70%); } .cta-banner .section-inner { position: relative; } .cta-banner .section-subtitle { margin: 0 auto 36px; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta-banner .btn-primary { background: var(--gold); color: var(--navy); box-shadow: 0 8px 26px rgba(217,200,154,0.3); } .cta-banner .btn-primary:hover { background: var(--white); } /* ---------- Footer ---------- */ footer { background: #0c2e20; padding: 56px 5% 30px; } .footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(253,252,249,0.1); } .footer-brand p { color: rgba(253,252,249,0.5); font-size: 0.85rem; line-height: 1.65; margin: 16px 0 14px; max-width: 30ch; } .footer-tel { display: block; color: rgba(253,252,249,0.8); text-decoration: none; font-size: 0.88rem; font-weight: 600; padding: 4px 0; } .footer-tel:hover { color: var(--gold); } .footer-logo { display: flex; align-items: center; gap: 10px; font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--white); text-decoration: none; font-size: 1rem; } .footer-col h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; /* 0.42 gav 3,7:1 mot den morkgrona foten, under AA for den har lilla graden. */ color: rgba(253,252,249,0.58); margin: 0 0 14px; } /* Lankarna laag pa 19 px hoga traffytor, alltsa under halva den 44 px som ett finger behover. Padding lyfter dem utan att glesa ut kolumnen visuellt. */ .footer-col a { display: block; color: rgba(253,252,249,0.72); text-decoration: none; font-size: 0.88rem; padding: 9px 0; transition: color 0.2s; } .footer-col a:hover { color: var(--gold); } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 24px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; gap: 26px; } } .footer-copy { max-width: 1180px; margin: 26px auto 0; font-size: 0.78rem; color: rgba(253,252,249,0.62); } /* Reco-utmarkelsen i footern. Badgen ar en vit cirkel, den behover luft mot den morka plattan men ska inte konkurrera med logotypen. */ .footer-reco { max-width: 1180px; margin: 22px auto 0; } .footer-reco img { display: block; } /* ---------- Produktbild ---------- */ .product-card-hero { border-radius: var(--radius-lg); overflow: hidden; } .vs-badge { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 0.8rem; background: var(--gold); color: var(--navy); border-radius: 100px; padding: 8px 16px; } /* ---------- Entrance (hero) ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .anim-delay-0 { animation: rise 0.8s var(--ease-out) 0.05s both; } .anim-delay-1 { animation: rise 0.8s var(--ease-out) 0.16s both; } .anim-delay-2 { animation: rise 0.8s var(--ease-out) 0.27s both; } .anim-delay-3 { animation: rise 0.8s var(--ease-out) 0.38s both; } /* ---------- Fokus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } .lead-form input:focus-visible, .lead-form textarea:focus-visible, .lead-form select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } input[type=range].calc-slider:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } /* ---------- Mobil ---------- */ @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; gap: 44px; } .hero { min-height: auto; padding: 56px 6% 64px; } .nav-toggle { display: inline-flex; align-items: center; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; /* Helt täckande, inte 0,98. Mot en mörk hero lästes rubriken igenom bakom menylänkarna, och blur räddar inte det. */ background: var(--off-white); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(16,62,42,0.1); box-shadow: 0 18px 32px rgba(16,62,42,0.10); padding: 6px 6% 18px; display: none; } nav.nav-open .nav-links { display: flex; } nav > .nav-cta { display: inline-flex; margin-left: auto; } .nav-links a { display: block !important; padding: 14px 2px; font-size: 1rem; border-bottom: 1px solid rgba(16,62,42,0.06); } .nav-links a.nav-cta { display: block !important; margin-top: 14px; text-align: center; border-bottom: none; } .nav-links .nav-phone { display: block !important; padding: 14px 2px; } section { padding: 68px 6%; } .calc-box { padding: 30px 22px; } .calc-result { grid-template-columns: 1fr 1fr; gap: 18px 0; } .calc-result-item:nth-child(odd)::before { display: none; } .hero-stats { gap: 28px; } .footer-inner { flex-direction: column; align-items: flex-start; } } /* Under 480px konkurrerade logga, telefonknapp, CTA och hamburgare om samma rad utan att nagon av dem gav vika, sa knappen bröts (KEYTO-granskningen 2026-08-14). Egen brytpunkt som krymper delarna i stallet for att lata dem trangas ihop. */ @media (max-width: 480px) { nav { padding: 14px 4%; gap: 10px; } nav.scrolled { padding: 10px 4%; } .nav-logo img { height: 30px !important; } nav > .nav-cta { padding: 9px 13px; font-size: 0.78rem; white-space: nowrap; } .nav-toggle { padding: 6px; margin: -6px -4px -6px 0; } .nav-toggle svg { width: 24px; height: 24px; } } /* Pa de riktigt smala telefonerna (iPhone SE och nedat) racker inte krympningen. CTA:n far ga ner ytterligare i storlek, men den doljs aldrig: den ar sidans viktigaste vag vidare och ska finnas kvar aven pa 320px. */ @media (max-width: 380px) { nav { gap: 6px; } .nav-logo img { height: 26px !important; } nav > .nav-cta { padding: 8px 11px; font-size: 0.72rem; } } /* ============================================================ DS v3 — Räknesnurra, Kampanj, Brand band (juni 2026) ============================================================ */ /* ---------- Calculator app ---------- */ .calc-app { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; max-width: 1180px; margin: 0 auto; align-items: start; } .calc-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow); } .calc-panel.dark { background: var(--navy); border-color: rgba(255,255,255,0.1); color: var(--white); position: sticky; top: 86px; } .calc-label { font-family: 'Archivo', sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-500); margin: 22px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .calc-label:first-child { margin-top: 0; } .calc-label .hint { font-weight: 500; letter-spacing: 0.03em; text-transform: none; font-size: 0.7rem; color: var(--gray-500); } .opt-row { display: flex; gap: 8px; } .opt-btn { flex: 1; padding: 12px 8px; border: 1.5px solid var(--gray-200); background: var(--white); border-radius: 11px; cursor: pointer; font-family: 'Archivo', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--gray-700); transition: all 0.18s var(--ease-out); text-align: center; line-height: 1.3; } .opt-btn small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.66rem; color: var(--gray-500); margin-top: 3px; } .opt-btn:hover { border-color: var(--green-2); transform: translateY(-1px); } .opt-btn.active { border-color: var(--green); background: var(--pale); color: var(--green); } .opt-btn.active small { color: var(--green); } .opt-btn .badge { display: inline-block; font-size: 0.56rem; font-weight: 700; background: var(--gold); color: var(--navy); border-radius: 100px; padding: 2px 8px; margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; } /* Rekommenderad storlek: gron pill, till skillnad fran den gula "Populär". Flyttar sig nar besokaren andrar forbrukning. */ .opt-btn .badge-rek { background: var(--green); color: var(--white); letter-spacing: 0.03em; text-transform: none; font-size: 0.6rem; padding: 2px 9px; max-width: 100%; white-space: normal; } .opt-btn.active .badge-rek { background: var(--green); color: var(--white); } .rek-note { font-family: 'Inter', sans-serif; font-size: 0.72rem; line-height: 1.45; color: var(--gray-500); margin: 8px 2px 0; display: none; } .rek-note.on { display: block; } .zone-row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; } .zone-map { width: 100%; height: auto; display: block; filter: brightness(0) saturate(100%) invert(28%) sepia(85%) saturate(420%) hue-rotate(115deg) brightness(0.82) contrast(0.95); transition: opacity 0.25s; } .zone-opts { display: flex; flex-direction: column; gap: 8px; } .zone-btn { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: 11px; background: var(--white); cursor: pointer; transition: all 0.18s; font-family: 'Inter', sans-serif; font-size: 0.86rem; color: var(--gray-700); text-align: left; width: 100%; } .zone-btn strong { font-family: 'Archivo', sans-serif; font-size: 0.82rem; } .zone-btn.active { border-color: var(--green); background: var(--pale); color: var(--green); } .slider-wrap { padding: 4px 2px 0; } input[type=range].calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 100px; outline: none; background: linear-gradient(90deg, var(--green) var(--fill, 50%), var(--gray-200) var(--fill, 50%)); } input[type=range].calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); cursor: grab; box-shadow: 0 2px 8px rgba(16,62,42,0.25); transition: transform 0.15s; } input[type=range].calc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); } input[type=range].calc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); cursor: grab; } .slider-value { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--green); } /* Result panel */ .result-eyebrow { font-family: 'Archivo', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .result-big { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--white); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; } .result-big .unit { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0; } .result-underline { height: 3px; width: 84px; border-radius: 100px; margin: 14px 0 4px; background: linear-gradient(90deg, var(--gold), rgba(217,200,154,0.2)); } .result-rows { margin-top: 18px; } .result-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.86rem; color: rgba(255,255,255,0.85); } .result-row .sub { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.66); margin-top: 2px; } .result-row .val { font-family: 'Archivo', sans-serif; font-weight: 700; white-space: nowrap; color: var(--white); } .result-row .val.gold { color: var(--gold); } .result-row .pill { display: inline-block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.07em; background: rgba(217,200,154,0.18); color: var(--gold); border-radius: 100px; padding: 2px 8px; margin-left: 7px; text-transform: uppercase; vertical-align: 1px; } .result-meta { display: flex; gap: 22px; margin-top: 18px; } .result-meta div { flex: 1; } .result-meta .k { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--white); } .result-meta .l { font-size: 0.66rem; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; } /* Financing */ .fin-row { display: flex; gap: 8px; margin-top: 8px; } .fin-btn { flex: 1; padding: 10px 6px; border: 1.5px solid rgba(255,255,255,0.18); background: transparent; border-radius: 11px; cursor: pointer; font-family: 'Archivo', sans-serif; font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.85); transition: all 0.18s; text-align: center; line-height: 1.35; } .fin-btn small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.62rem; color: rgba(255,255,255,0.66); margin-top: 2px; } .fin-btn.active { border-color: var(--gold); background: rgba(217,200,154,0.1); color: var(--gold); } .fin-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.68rem; color: rgba(255,255,255,0.55); } /* LF Finans logotyp i sina egna farger. Den lag tidigare under filter: invert(1) brightness(1.8), vilket vande blatt till orange och rott till cyan. En partners logotyp far inte fargas om. Mot mork botten losas det med en vit platta, inte med filter. */ .fin-note img { height: 16px; width: auto; background: #fff; padding: 5px 8px; border-radius: 6px; box-sizing: content-box; } .energy-declaration-badge { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(217,200,154,0.42); border-radius: 12px; background: linear-gradient(110deg, rgba(217,200,154,0.14), rgba(217,200,154,0.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .energy-declaration-badge strong { display: block; margin-top: 2px; color: var(--white); font-family: 'Archivo', sans-serif; font-size: 0.9rem; font-weight: 700; } .energy-declaration-badge__eyebrow { display: block; color: var(--gold); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; text-transform: uppercase; } .energy-declaration-badge__validity { flex: 0 0 auto; color: rgba(255,255,255,0.7); font-size: 0.68rem; white-space: nowrap; } /* Lead form */ .lead-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); } .lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lead-form input { width: 100%; padding: 12px 14px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.88rem; } .lead-form input::placeholder { color: rgba(255,255,255,0.4); } .lead-form input:focus { border-color: var(--gold); } .lead-form .wide { grid-column: 1 / -1; } .lead-submit { grid-column: 1 / -1; padding: 15px; border: none; border-radius: 100px; background: var(--gold); color: var(--navy); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; } .lead-submit:hover { background: #e6d8af; transform: translateY(-1px); } .lead-fine { font-size: 0.64rem; color: rgba(255,255,255,0.62); margin-top: 10px; text-align: center; } /* Lanken hit hade ingen egen farg och foll tillbaka pa webblasarens blaa, som pa den morkgrona botten hamnade pa 1,3:1 och knappt gick att lasa (KEYTO-granskningen 2026-08-14). */ .lead-fine a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .lead-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; color: rgba(255,255,255,0.72); font-size: 0.72rem; line-height: 1.45; text-align: left; cursor: pointer; } .lead-consent input[type="checkbox"] { flex: 0 0 auto; width: auto; padding: 0; margin: 3px 0 0; accent-color: var(--gold); cursor: pointer; } .lead-consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .lead-success { text-align: center; padding: 28px 10px; } .lead-success .check { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 1.4rem; color: var(--navy); } /* ---------- KEYTO brand band ---------- */ .brand-band { padding: 56px 5%; background: var(--white); border-top: 1px solid var(--gray-100); } .brand-band-inner { max-width: 1180px; margin: 0 auto; text-align: center; } .brand-band-label { font-family: 'Archivo', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 26px; } .brand-band-logos { display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap; } .brand-band-logos img { height: 26px; width: auto; opacity: 0.55; filter: grayscale(1); transition: all 0.25s; } .brand-band-logos img:hover { opacity: 1; filter: none; } .brand-band-logos img.tall { height: 34px; } /* ---------- Trust chips ---------- */ .trust-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .trust-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 500; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-200); border-radius: 100px; padding: 9px 16px; } .trust-chip svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; } /* Chip finns i tva varianter: som gar att klicka och som bara ar en uppgift. De sag identiska ut, sa besokaren kunde inte se vilka som ledde nagonstans (KEYTO-granskningen 2026-08-14). Nu bar bara lankarna hover, fokusring och pekare. */ a.trust-chip { text-decoration: none; cursor: pointer; transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s; } a.trust-chip:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-sm); } a.trust-chip:active { transform: translateY(0); } a.trust-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } span.trust-chip { cursor: default; } /* Betygschip i hero (DS v7). Ligger forst bland trust-chips sa betyget syns ovanfor vikningen. */ a.trust-chip-rating { text-decoration: none; border-color: rgba(27,107,67,0.28); transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s; } a.trust-chip-rating:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-sm); } a.trust-chip-rating:active { transform: translateY(0); } .trust-chip-rating svg { width: 14px; height: 14px; } .trust-chip-rating strong { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .trust-chip-rating .tc-stars { color: #8a6410; letter-spacing: 1px; font-size: 0.72rem; } /* ---------- Kampanj ---------- */ .campaign-hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--navy); padding: 90px 5%; } .campaign-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 60%; transform: scale(1.12); will-change: transform; } .campaign-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,30,20,0.4), rgba(8,30,20,0.12) 35%, rgba(8,30,20,0.45)); } .glass-card { position: relative; z-index: 2; max-width: 720px; width: 100%; padding: 52px 54px; text-align: center; border-radius: 26px; background: rgba(16,62,42,0.42); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 28px 80px rgba(0,0,0,0.35); } .campaign-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Archivo', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--gold); color: var(--navy); border-radius: 100px; padding: 8px 18px; margin-bottom: 22px; } .glass-card h1 { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--white); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px; } .glass-card h1 em { font-style: normal; font-weight: 800; color: var(--gold); } .glass-card p.lede { color: rgba(255,255,255,0.82); font-size: 1.05rem; max-width: 520px; margin: 0 auto 28px; } .campaign-price-row { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 26px; } .campaign-price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 2.6rem; color: var(--white); } .campaign-price-was { font-size: 1rem; color: rgba(255,255,255,0.5); text-decoration: line-through; } .campaign-price-note { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: -18px; margin-bottom: 26px; } .bundle-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; max-width: 980px; margin: 0 auto; } .bundle-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .bundle-plus { align-self: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.5rem; box-shadow: var(--shadow); } .bundle-card img { width: 100%; height: 190px; object-fit: contain; margin-bottom: 18px; } .bundle-card h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; } .bundle-card ul { list-style: none; margin-top: 12px; } .bundle-card li { display: flex; gap: 10px; font-size: 0.88rem; color: var(--text-2); padding: 6px 0; } .bundle-card li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; } .sticky-cta { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 950; display: flex; align-items: center; gap: 16px; background: var(--navy); color: var(--white); border-radius: 100px; padding: 12px 14px 12px 24px; box-shadow: 0 18px 48px rgba(8,30,20,0.4); transition: transform 0.4s var(--ease-out); border: 1px solid rgba(255,255,255,0.12); } .sticky-cta.show { transform: translateX(-50%) translateY(0); } .sticky-cta .s-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; } .sticky-cta .s-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.6); } .sticky-cta a { background: var(--gold); color: var(--navy); border-radius: 100px; padding: 11px 22px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.84rem; text-decoration: none; white-space: nowrap; transition: background 0.2s; } .sticky-cta a:hover { background: #e6d8af; } .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; } .step-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow); } .step-num { font-family: 'Archivo', sans-serif; font-style: normal; font-weight: 800; font-size: 2rem; color: #7d6838; line-height: 1; margin-bottom: 12px; } .step-card h3 { font-family: 'Archivo', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .step-card p { font-size: 0.88rem; color: var(--text-2); } /* FAQ accordion */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--gray-200); } .faq-item h3 { font-family: 'Archivo', sans-serif; font-weight: 700; } .faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 4px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text); } .faq-q .chev { transition: transform 0.3s var(--ease-out); color: var(--green); flex-shrink: 0; } .faq-item.open .chev { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); } /* Utan denna regel oppnades
men svaret laag kvar pa max-height 0, sa varje FAQ-svar pa /faq/ och /finansiering/ var osynligt for besokaren. Verifierat 2026-08-05: hojden var 0 px aven med open satt. */ details.faq-item[open] .faq-a { max-height: 60rem; } .faq-a p { padding: 0 4px 20px; font-size: 0.92rem; color: var(--text-2); max-width: 640px; } @media (max-width: 980px) { .calc-app { grid-template-columns: 1fr; } .calc-panel.dark { position: static; } .bundle-grid { grid-template-columns: 1fr; } .bundle-plus { transform: rotate(90deg); margin: -6px auto; } .step-grid { grid-template-columns: 1fr; } .glass-card { padding: 38px 26px; } .result-big { font-size: 2.9rem; } .lead-grid { grid-template-columns: 1fr; } .brand-band-logos { gap: 28px; } .sticky-cta { width: calc(100% - 24px); justify-content: space-between; } } /* ============================================================ DS v3.1 — Mobilfixar & kontrast (juni 2026) ============================================================ */ html, body { overflow-x: clip; } img, svg, video { max-width: 100%; } .opt-btn, .fin-btn, .zone-btn { min-width: 0; } .opt-row { flex-wrap: wrap; } .opt-row .opt-btn { min-width: 30%; } .result-meta .k { white-space: nowrap; font-size: clamp(1.02rem, 4vw, 1.3rem); } /* Mörka sektioner: säkerställ läsbar text */ section[style*="--navy"] .trust-desc, .cta-banner .trust-desc { color: rgba(253,252,249,0.72); } .cta-banner .section-subtitle, section[style*="--navy"] .section-subtitle { color: rgba(253,252,249,0.72); } /* Footer på mörk botten: vit logga */ footer .footer-logo img { content: url('/assets/brand/logo-white.png'); } /* KEYTO-band: läsbara loggor */ .brand-band-logos img { height: 24px; opacity: 0.7; filter: grayscale(1) contrast(1.1); } .brand-band-logos img.tall { height: 40px; filter: none; opacity: 0.9; border-radius: 8px; } @media (max-width: 980px) { .hero-inner > * { min-width: 0; } .hero-title { overflow-wrap: break-word; hyphens: manual; font-size: clamp(1.85rem, 8vw, 2.5rem) !important; line-height: 1.12; } .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone-row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; } .calc-panel { padding: 26px 18px; } .glass-card h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } .result-big { font-size: 2.6rem; } .campaign-price { font-size: 2rem; } .hero-stats { flex-wrap: wrap; } .fin-row { flex-wrap: wrap; } .fin-btn { min-width: 31%; } } /* ============================================================ DS v3.2 — Definitiva mobilfixar (overflow-rotorsaker) ============================================================ */ html, body { overflow-x: clip !important; max-width: 100vw; } /* Grid/flex-barn får aldrig tvinga max-content-bredd */ .calc-app > *, .zone-opts, .zone-btn, .zone-btn > span, .calc-panel, .opt-row, .lead-grid > * { min-width: 0; } .calc-label { flex-wrap: wrap; } .calc-label .hint { white-space: normal; } @media (max-width: 980px) { /* Inline-definierade fleras kolumners grids → en kolumn på mobil */ section [style*="grid-template-columns"]:not(.lead-grid):not(.zone-row) { grid-template-columns: 1fr !important; } /* Mini-kalkylatorernas resultat: låt siffror brytas */ .calc-result { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .calc-result-num { white-space: normal !important; font-size: clamp(1.1rem, 5.5vw, 1.5rem); overflow-wrap: anywhere; } .calc-result-item { min-width: 0; padding: 0 8px; } /* Jämförelsetabell: horisontell scroll i container */ .compare-table { display: block !important; overflow-x: auto !important; max-width: 100%; } .compare-table thead, .compare-table tbody { display: table; width: max-content; min-width: 100%; } .hero-stats > * { min-width: 0; } } /* ============================================================ DS v4 — KEYTO Brand Band (förslag: skicka denna) juni 2026 Trogen implementation av KEYTO-designen. Egen typografi (Archivo/Inter) och KEYTO-blå — medvetet, bandet bär GRUPPENS identitet, inte Enspectas. ============================================================ */ @font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap; src:url('/assets/brand/keyto-band/fonts/archivo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; } @font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap; src:url('/assets/brand/keyto-band/fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20C0; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/brand/keyto-band/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; } @font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/brand/keyto-band/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20C0; } .kbb-section { padding: 64px 5%; } .kbb-wrap { max-width: 920px; margin: 0 auto; } .kbb { position: relative; display: block; text-decoration: none; background: #FFFFFF; border: 1px solid #E2E7EB; border-radius: 16px; overflow: hidden; color: #0E1A36; box-shadow: 0 4px 18px rgba(14,26,54,.06); font-family: 'Inter', system-ui, sans-serif; } .kbb .bb-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 92% 18%, rgba(0,0,0,.04) 0%, transparent 50%), radial-gradient(ellipse at 8% 95%, rgba(0,0,0,.025) 0%, transparent 50%); } .kbb .bb-top { position: relative; z-index: 1; display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; padding: 22px 28px 18px; align-items: center; } .kbb .bb-logo { width: 96px; height: 64px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #E2E7EB; padding-right: 22px; } .kbb .bb-logo img { max-width: 100%; max-height: 60px; object-fit: contain; display: block; border-radius: 8px; } .kbb .bb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kbb .bb-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Archivo','Inter',sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #0C48E4; margin-bottom: 6px; } .kbb .bb-eyebrow::before { content: ""; width: 20px; height: 1.5px; background: #0C48E4; } .kbb .bb-quote { font-family: 'Archivo','Inter',sans-serif; font-weight: 800; font-size: 23px; line-height: 1.1; letter-spacing: -.02em; color: #0E0E0E; margin: 0 0 4px; } .kbb .bb-quote em { font-style: normal; font-weight: 800; color: #0C48E4; } .kbb .bb-meta { font-size: 11px; line-height: 1.45; color: #5A6580; margin: 0; max-width: 460px; } .kbb .bb-cta { font-family: 'Archivo','Inter',sans-serif; font-size: 11px; font-weight: 700; color: #0C48E4; letter-spacing: .02em; white-space: nowrap; text-align: right; } .kbb .bb-powered { position: relative; z-index: 1; border-top: 1px solid #E2E7EB; background: linear-gradient(180deg, #F7F8FB 0%, #FFFFFF 100%); padding: 16px 28px 0; font-size: 9px; font-weight: 700; letter-spacing: .3em; /* 9px text kraver 4.5:1. Gamla #9aa0ad lag pa 2.6 (KEYTO-granskningen 2026-08-14). */ text-transform: uppercase; color: #676e7c; } .kbb .bb-logos { position: relative; z-index: 1; background: #FFFFFF; padding: 16px 0 20px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); } .kbb .bb-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: kbb-scroll 28s linear infinite; } .kbb .bb-track:hover { animation-play-state: paused; } .kbb .bb-track img { height: 28px; width: auto; object-fit: contain; opacity: .55; filter: grayscale(100%); transition: opacity .25s ease, filter .25s ease; flex-shrink: 0; max-width: none; } .kbb .bb-track img:hover { opacity: 1; filter: grayscale(0%); } @keyframes kbb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .kbb .bb-track { animation: none; } } @media (max-width: 640px) { .energy-declaration-badge { align-items: flex-start; flex-direction: column; gap: 7px; } .kbb .bb-top { grid-template-columns: 1fr; gap: 16px; padding: 22px 22px 16px; text-align: center; } .kbb .bb-logo { border-right: none; padding-right: 0; width: 100%; height: 52px; } .kbb .bb-text { align-items: center; } .kbb .bb-eyebrow { justify-content: center; } .kbb .bb-meta { max-width: 100%; } .kbb .bb-cta { text-align: center; } .kbb .bb-quote { font-size: 20px; } .kbb .bb-track { gap: 40px; } .kbb .bb-track img { height: 24px; } } /* ============================================================ DS v4.1 — Mobil UX-rytm (audit juni 2026) Inline-paddings (90-96px) skapade döda zoner mellan sektioner på mobil. Normaliserar vertikal rytm + lyfter mikrotext. ============================================================ */ @media (max-width: 980px) { section { padding-top: clamp(44px, 10vw, 60px) !important; padding-bottom: clamp(44px, 10vw, 60px) !important; } .campaign-hero { padding-top: 80px !important; padding-bottom: 36px !important; min-height: auto; } .kbb-section { padding-top: 40px !important; padding-bottom: 40px !important; } .section-title { margin-bottom: 14px; } .section-subtitle { margin-bottom: 28px; } /* Mikrotext-lyft */ .calc-label { font-size: 0.7rem; } .result-eyebrow { font-size: 0.68rem; } .opt-btn .badge { font-size: 0.6rem; } .hub-card-category, .section-tag { font-size: 0.72rem; } } @media (max-width: 980px) { .result-meta { flex-wrap: wrap; gap: 14px 18px; } .result-meta div { flex: 1 1 38%; min-width: 0; } } /* ---------- Cursor-spotlight + organiska blobs (enspectaenergi.se-känsla) ---------- */ .glow-bg { position: relative; overflow: hidden; } .glow-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-color, rgba(217,200,154,0.20)), transparent 62%); opacity: 1; transition: background 0.15s linear; } .glow-bg > .section-inner, .glow-bg > * { position: relative; z-index: 1; } .glow-bg > .blob { z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.5; pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: no-preference) { .blob { animation: blobFloat 16s ease-in-out infinite; } } @keyframes blobFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-22px) scale(1.09); } } /* ---------- Kursivaccent: guld på mörka sektioner (granskning 2026-06-15) ---------- */ section[style*="var(--navy)"] .section-title span, .glow-bg .section-title span, .cta-banner .section-title span, .specs-section .section-title span, .cta-banner .hero-title span { color: var(--gold) !important; } /* ============ Enkla fixar (Ibbe: håll det enkelt) 2026-06-15 ============ */ /* Kontrast: sekundärtext + eyebrows på mörka ytor -> cream/guld (läsbarhet/WCAG) */ section[style*="var(--navy)"] .section-subtitle, section[style*="var(--navy)"] .feature-desc, section[style*="var(--navy)"] p, .glow-bg .section-subtitle, .glow-bg .feature-desc, .glow-bg p, .cta-banner .section-subtitle, .specs-section .section-subtitle { color: rgba(246,244,239,0.84) !important; } section[style*="var(--navy)"] .section-tag, .glow-bg .section-tag, .cta-banner .section-tag, .specs-section .section-tag { color: var(--gold) !important; } section[style*="var(--navy)"] .hero-stat-label, .glow-bg .hero-stat-label { color: rgba(246,244,239,0.7) !important; } /* Subtil kort-skugga (rent, inte pråligt) */ .hub-card, .package-card, .plan-card, .feature-card { box-shadow: var(--shadow); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Klickbart telefonnr i nav (enkel, tydlig väg att ringa) */ .nav-phone { color: var(--green); font-weight: 700; text-decoration: none; font-size: 0.92rem; white-space: nowrap; transition: color .2s; } .nav-phone:hover { color: var(--navy); } @media (max-width: 880px) { .nav-phone { display: none; } } /* ============================================================ DS v5 — Hub-kort v2 (premium produktkort, 2026-06-24) Enhetlig produktskala + spotlight-platta + markskugga + elevation + spec-chips. Per DESIGN_REVIEW Tier 2 + referenser. ============================================================ */ .hub-card { border-radius: 20px; box-shadow: 0 8px 24px rgba(16,62,42,0.08); padding: 20px 22px 18px; } .hub-card::after { display: none; } /* hörnpilen ersatt av .hub-foot */ .hub-card-icon { display: none; } /* produktbilden är hjälten, chip-ikonen redundant */ .hub-card p { flex: initial; line-height: 1.6; font-size: 0.86rem; } a.hub-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(16,62,42,0.16); border-color: rgba(217,200,154,0.65); } .hub-media { position: relative; height: 228px; border-radius: 16px; margin-bottom: 14px; background: linear-gradient(180deg, #eef0f2 0%, #dfe2e6 100%); border: 1px solid var(--gray-200); overflow: hidden; display: flex; align-items: center; justify-content: center; } .hub-shot { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hub-specs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .hub-specs span { font-size: 0.72rem; font-weight: 600; color: var(--green); background: var(--pale); border: 1px solid rgba(27,107,67,0.16); border-radius: 100px; padding: 5px 11px; } .hub-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gray-200); } .hub-go { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.84rem; color: var(--green); } a.hub-card:hover .hub-go { color: var(--navy); } @media (max-width: 980px) { .hub-media { height: 208px; } } /* ============================================================ DS v5 — Sticky CTA grön variant (hub, 2026-06-24) Återkommande grön pill som glider in efter hero. Återanvänder .sticky-cta-basens fixed/centrering/slide; bara färg + layout skiljer (basen är guld kampanjvarianten — rör den inte). ============================================================ */ .sticky-cta.green { gap: 10px; padding: 13px 24px; opacity: 0; background: var(--green); border: 1px solid rgba(255,255,255,0.14); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.2s; } .sticky-cta.green.show { opacity: 1; } .sticky-cta.green:hover { background: var(--green-2); } .sticky-cta.green svg { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 640px) { .sticky-cta.green { justify-content: center; width: auto; } } @media (prefers-reduced-motion: reduce) { .sticky-cta.green { transition: background 0.2s; } } /* ============================================================ Google-omdömesrad (delad) — slank live-rad via Places API. Markup: