/* ============================================================ APL EL — Designsystem (bygger på Wolfbits installatörsmall) Färger styrs av teman: . Standard (utan attribut) = "gul", nära dagens aplel.se. ============================================================ */ :root, [data-theme="gul"]{ /* APL-gul: gul/guld som på dagens aplel.se, grafit som mörk ton */ --primary: #F5C400; /* fyllnad: knappar, prickar, linjer */ --on-primary: #17191C; /* text på --primary (10.7:1) */ --accent-ink: #7A5C00; /* accent som text på ljus botten (6.3:1 mot vitt) */ --accent-light: #FFD94D; /* accent som text på mörk botten */ --navy: #17191C; --navy-2: #262A30; --ink: #17191C; --muted: #5B5D61; --bg: #F7F6F1; --line: #E6E3DA; } [data-theme="lugn"]{ /* Modern & lugn: dov petrol mot blågrått — mindre "byggarbetsplats" */ --primary: #2B7A78; /* vit text 5.1:1 */ --on-primary: #FFFFFF; --accent-ink: #23625F; /* 7.0:1 mot vitt */ --accent-light: #8FD1C9; --navy: #1E2B33; --navy-2: #2B3B45; --ink: #1B262D; --muted: #56646C; --bg: #F3F6F6; --line: #DDE5E6; } [data-theme="marin"]{ /* Marin & himmel: djup marinblå med mjuk himmelsblå accent */ --primary: #6FA8DC; /* mörk text 6.9:1 */ --on-primary: #0F1B2D; --accent-ink: #2D5F8F; /* 6.8:1 mot vitt */ --accent-light: #A9CDEE; --navy: #152238; --navy-2: #22324D; --ink: #152238; --muted: #58627A; --bg: #F5F6F8; --line: #E0E4EB; } :root{ --primary-dark: color-mix(in oklab, var(--primary) 82%, #000); --primary-soft: color-mix(in oklab, var(--primary) 12%, #fff); --primary-softer: color-mix(in oklab, var(--primary) 5%, #fff); --card: #FFFFFF; --radius: 10px; --radius-lg: 16px; --radius-btn: 8px; --shadow-sm: 0 1px 2px rgba(20,22,26,.06), 0 2px 8px rgba(20,22,26,.05); --shadow-md: 0 2px 6px rgba(20,22,26,.07), 0 12px 32px rgba(20,22,26,.09); --font-head: 'Archivo', 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; --container: 1180px; } /* Temabyte ska kännas mjukt */ body, .btn, .card, .cta-banner, .section-navy, .page-hero, .site-footer{ transition-property:background-color, color, border-color, box-shadow, transform; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--accent-ink); text-decoration:none; } h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.12; margin:0 0 .5em; letter-spacing:-.015em; text-wrap:balance; } h1{ font-size:clamp(2.3rem,5vw,3.5rem); font-weight:800; } h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:750; } h3{ font-size:1.25rem; font-weight:700; } p{ margin:0 0 1em; text-wrap:pretty; } .lede{ font-size:1.18rem; color:var(--muted); max-width:62ch; } .container{ max-width:var(--container); margin:0 auto; padding:0 28px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 14px; } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--primary); border-radius:2px; } /* ---------- Knappar ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:1rem; padding:14px 24px; border-radius:var(--radius-btn); border:1.5px solid transparent; cursor:pointer; transition:all .18s ease; white-space:nowrap; } .btn-sm{ padding:9px 20px; font-size:.92rem; } .btn-primary{ background:var(--primary); color:var(--on-primary); } .btn-primary:hover{ background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in oklab, var(--primary) 35%, transparent); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--accent-ink); color:var(--accent-ink); background:var(--primary-softer); } .btn-white{ background:#fff; color:var(--navy); } .btn-white:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.25); } .btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); } .btn-outline-white:hover{ border-color:#fff; background:rgba(255,255,255,.1); } .arrow{ transition:transform .18s ease; } .btn:hover .arrow, .card-link:hover .arrow{ transform:translateX(3px); } /* ---------- Header ---------- */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .header-inner{ display:flex; align-items:center; gap:34px; height:74px; } .brand{ display:flex; align-items:center; flex-shrink:0; } .brand-logo{ height:40px; width:auto; } .brand-word{ font-family:var(--font-head); font-style:italic; font-weight:800; font-size:1.5rem; letter-spacing:.02em; color:var(--accent-ink); } .main-nav{ display:flex; align-items:center; gap:6px; margin-left:auto; } .main-nav > a, .nav-item > a{ font-family:var(--font-head); font-weight:600; font-size:.97rem; color:var(--ink); padding:9px 14px; border-radius:9px; transition:color .15s, background .15s; white-space:nowrap; } .main-nav > a:hover, .nav-item > a:hover{ color:var(--accent-ink); background:var(--primary-softer); } .main-nav a.active{ color:var(--accent-ink); } .nav-item{ position:relative; } .nav-item .caret{ font-size:.7em; margin-left:4px; opacity:.55; } .sub-menu{ position:absolute; top:calc(100% + 8px); left:6px; min-width:240px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease; } .nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .sub-menu a{ padding:10px 14px; border-radius:9px; color:var(--ink); font-weight:600; font-size:.95rem; font-family:var(--font-head); } .sub-menu a:hover{ background:var(--primary-softer); color:var(--accent-ink); } .header-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; } .header-tel{ font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:.97rem; } .header-tel:hover{ color:var(--accent-ink); } .nav-toggle{ display:none; } /* transparent header ovanpå hero */ body.has-hero .site-header:not(.scrolled){ background:transparent; border-color:transparent; backdrop-filter:none; } .brand .logo-light{ display:none; } body.has-hero .site-header:not(.scrolled) .logo-dark{ display:none; } body.has-hero .site-header:not(.scrolled) .logo-light{ display:block; } body.has-hero .site-header:not(.scrolled) :is(.main-nav > a, .nav-item > a, .header-tel){ color:#fff; } body.has-hero .site-header:not(.scrolled) :is(.main-nav > a, .nav-item > a):hover{ background:rgba(255,255,255,.12); color:#fff; } .site-header.scrolled{ box-shadow:var(--shadow-sm); } /* ---------- Hero (startsida) ---------- */ .hero{ position:relative; min-height:92vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--navy); } .hero video, .hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero .hero-img{ object-position:center 70%; } .hero .scrim{ position:absolute; inset:0; background:linear-gradient(75deg, rgba(16,14,12,.88) 0%, rgba(16,14,12,.62) 45%, rgba(16,14,12,.25) 100%); } .hero-content{ position:relative; z-index:2; padding:140px 28px 90px; max-width:720px; } .hero h1{ color:#fff; margin-bottom:18px; } .hero .lede{ color:rgba(255,255,255,.85); font-size:1.25rem; margin-bottom:34px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:54px; } .trust-row{ display:flex; gap:12px; flex-wrap:wrap; } .trust-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:.88rem; color:rgba(255,255,255,.92); background:rgba(255,255,255,.08); backdrop-filter:blur(4px); } .trust-chip b{ color:#fff; } /* ---------- Sub-page hero ---------- */ .page-hero{ background: linear-gradient(105deg, color-mix(in oklab, var(--navy) 96%, var(--primary)) 0%, var(--navy-2) 60%, color-mix(in oklab, var(--navy-2) 82%, var(--primary)) 100%); color:#fff; padding:158px 0 72px; position:relative; overflow:hidden; } .page-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 120px); } .page-hero h1{ color:#fff; max-width:18ch; } .page-hero .lede{ color:rgba(255,255,255,.82); } .breadcrumb{ display:flex; gap:8px; font-size:.9rem; color:rgba(255,255,255,.6); margin-bottom:20px; font-family:var(--font-head); font-weight:600; } .breadcrumb a{ color:rgba(255,255,255,.85); } .breadcrumb a:hover{ color:#fff; } .page-hero .back-link{ margin-top:16px; } .page-hero .back-link a{ color:rgba(255,255,255,.85); font-family:var(--font-head); font-weight:600; font-size:.95rem; } .page-hero .back-link a:hover{ color:#fff; } /* ---------- Sektioner ---------- */ .section{ padding:88px 0; } .section-tight{ padding:64px 0; } .section-head{ max-width:640px; margin-bottom:46px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head.center .eyebrow{ justify-content:center; } .section-head.center .eyebrow::before{ display:none; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .section-white{ background:#fff; border-block:1px solid var(--line); } .section-navy{ background:linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; } .section-navy h2{ color:#fff; } .section-navy p{ color:rgba(255,255,255,.8); } .section-navy .eyebrow{ color:var(--accent-light); } .section-navy .eyebrow::before{ background:var(--primary); } /* ---------- Kort ---------- */ .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; gap:0; } a.card{ color:var(--ink); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--primary) 30%, var(--line)); } .card h3{ margin-bottom:8px; } .card p{ color:var(--muted); font-size:1rem; margin-bottom:18px; } .icon-tile{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); color:var(--accent-ink); margin-bottom:20px; flex-shrink:0; } .icon-tile svg{ width:26px; height:26px; } .card-link{ margin-top:auto; font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--accent-ink); display:inline-flex; align-items:center; gap:8px; } /* ---------- Tjänstelista (startsida) ---------- */ .service-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start; } .service-split .section-head{ margin-bottom:0; position:sticky; top:110px; } .service-split .section-head .lede{ margin-bottom:28px; } .service-split .section-head h2{ margin-bottom:22px; } .service-split .section-head .lede + .btn, .service-split .section-head h2 + .lede{ margin-top:0; } .service-list{ border-top:2px solid var(--ink); } .service-row{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px 6px; border-bottom:1px solid var(--line); color:var(--ink); transition:padding .18s ease, background .18s ease; } .service-row h3{ font-size:1.5rem; margin:0 0 4px; transition:color .15s; } .service-row p{ margin:0; color:var(--muted); font-size:1rem; max-width:52ch; } .service-row .arrow{ font-size:1.5rem; color:var(--accent-ink); flex-shrink:0; } .service-row:hover{ padding-left:16px; background:#fff; } .service-row:hover h3{ color:var(--accent-ink); } .service-row:hover .arrow{ transform:translateX(4px); } @media (max-width: 1020px){ .service-split{ grid-template-columns:1fr; gap:36px; } .service-split .section-head{ position:static; } } @media (max-width: 760px){ .service-row{ padding:20px 2px; } .service-row h3{ font-size:1.25rem; } } /* ---------- Behörighet (Elsäkerhetsverket) ---------- */ .reg-band{ display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 36px; } .reg-logo img{ height:54px; width:auto; } .reg-band h3{ margin:0 0 6px; } .reg-band p{ margin:0; color:var(--muted); font-size:1rem; max-width:64ch; } @media (max-width: 1020px){ .reg-band{ grid-template-columns:1fr; gap:20px; padding:26px 24px; } .reg-band .btn{ justify-self:start; } } /* ---------- Statband ---------- */ .stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .stat{ text-align:left; padding:26px 28px; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line); } .stat .num{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--accent-ink); line-height:1; letter-spacing:-.02em; } .stat .lbl{ color:var(--muted); font-size:.97rem; margin-top:8px; } /* ---------- Media / bilder ---------- */ .media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); } .media img{ width:100%; height:100%; object-fit:cover; } .placeholder{ border-radius:var(--radius-lg); border:1.5px dashed color-mix(in oklab, var(--primary) 35%, var(--line)); background:repeating-linear-gradient(45deg, var(--primary-softer) 0 14px, #fff 14px 28px); display:flex; align-items:center; justify-content:center; min-height:260px; color:var(--muted); font-family:ui-monospace, monospace; font-size:.85rem; text-align:center; padding:20px; } .placeholder span{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px; line-height:1.55; max-width:34ch; } .placeholder b{ color:var(--accent-ink); } /* ---------- Checklista ---------- */ .check-list{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px; } .check-list li{ display:flex; gap:13px; align-items:flex-start; } .check-list .tick{ width:24px; height:24px; border-radius:50%; background:var(--primary-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; flex-shrink:0; margin-top:2px; font-family:var(--font-head); } .section-navy .check-list .tick{ background:rgba(255,255,255,.14); color:#fff; } /* ---------- Process-steg ---------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; } .step{ padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); position:relative; } .step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--accent-ink); display:inline-block; margin-bottom:12px; padding:4px 12px; background:var(--primary-soft); border-radius:999px; } .step h3{ font-size:1.08rem; } .step p{ color:var(--muted); font-size:.95rem; margin:0; } /* ---------- Certifikat ---------- */ .cert-band{ display:flex; gap:14px; flex-wrap:wrap; } .cert-pill{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; background:#fff; border:1px solid var(--line); border-radius:999px; font-family:var(--font-head); font-weight:700; font-size:.93rem; color:var(--ink); } .cert-pill .dot{ width:9px; height:9px; border-radius:50%; background:var(--primary); } a.cert-pill{ text-decoration:none; transition:border-color .2s, box-shadow .2s; } a.cert-pill:hover{ border-color:color-mix(in oklab, var(--primary) 30%, var(--line)); box-shadow:var(--shadow-sm); } .logo-strip{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; opacity:.7; } .logo-strip img{ height:44px; width:auto; filter:brightness(0) opacity(.65); transition:filter .2s; } .logo-strip img:hover{ filter:brightness(0) opacity(1); } /* ---------- CTA-sektion ---------- */ .cta-banner{ background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--primary) 22%, transparent) 0, transparent 55%), linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 100%); border-top:4px solid var(--primary); border-radius:var(--radius-lg); padding:60px 56px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-banner h2{ color:#fff; margin:0 0 6px; } .cta-banner p{ color:rgba(255,255,255,.85); margin:0; font-size:1.1rem; } .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; } /* ---------- Formulär ---------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:flex; flex-direction:column; gap:7px; } .field.full{ grid-column:1 / -1; } .field label{ font-family:var(--font-head); font-weight:600; font-size:.92rem; } .field input, .field select, .field textarea{ font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:13px 16px; border:1.5px solid var(--line); border-radius:11px; background:#fff; transition:border-color .15s, box-shadow .15s; width:100%; } .field textarea{ min-height:130px; resize:vertical; } .field :is(input,select,textarea):focus{ outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } .hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .cf-turnstile{ min-height:65px; } .form-tabs{ display:flex; gap:8px; margin-bottom:26px; background:var(--bg); padding:6px; border-radius:999px; width:max-content; } .form-tab{ border:none; background:transparent; cursor:pointer; padding:10px 22px; border-radius:999px; font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--muted); transition:all .15s; } .form-tab.active{ background:#fff; color:var(--accent-ink); box-shadow:var(--shadow-sm); } .form-success{ display:none; padding:18px 22px; border-radius:var(--radius); background:#EAF7EE; border:1px solid #BFE5C8; color:#1C6B33; font-weight:600; } .form-success.show{ display:block; } .form-error{ display:none; padding:18px 22px; border-radius:var(--radius); background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; font-weight:600; } .form-error.show{ display:block; } /* ---------- Footer ---------- */ .site-footer{ background:var(--navy); color:rgba(255,255,255,.78); padding:72px 0 0; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:54px; } .site-footer .brand-logo{ height:38px; margin-bottom:18px; } .site-footer h4{ color:#fff; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; } .footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .footer-links a{ color:rgba(255,255,255,.78); transition:color .15s; } .footer-links a:hover{ color:#fff; } .site-footer p{ color:rgba(255,255,255,.7); } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.9rem; color:rgba(255,255,255,.5); } /* ---------- Artiklar / kunskapsbank ---------- */ .filter-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:40px; } .chip{ border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; padding:9px 20px; border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:.92rem; transition:all .15s; } .chip:hover{ border-color:var(--accent-ink); color:var(--accent-ink); } .chip.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); } .search-field{ margin-left:auto; min-width:260px; } .search-field input{ width:100%; padding:11px 18px; border:1.5px solid var(--line); border-radius:999px; font-family:var(--font-body); font-size:.97rem; background:#fff; } .search-field input:focus{ outline:none; border-color:var(--accent-ink); } .article-card .cat{ display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--primary-soft); padding:5px 12px; border-radius:999px; margin-bottom:14px; align-self:flex-start; } .article-card h3{ font-size:1.15rem; } .article-layout{ display:grid; grid-template-columns:minmax(0,720px) 320px; gap:64px; justify-content:center; } .prose{ max-width:720px; } .prose h2{ font-size:1.55rem; margin-top:1.6em; } .prose p{ font-size:1.1rem; color:#33302C; } /* ---------- Bildkort (tjänst/lösning med bild i toppen) ---------- */ .img-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.img-card{ color:var(--ink); } .img-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--primary) 30%, var(--line)); } .img-card .img-card-thumb{ width:100%; aspect-ratio:16/10; overflow:hidden; } .img-card .img-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .img-card:hover .img-card-thumb img{ transform:scale(1.04); } .img-card .img-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:8px; flex:1; } .img-card .img-card-body h3{ margin:0; font-size:1.2rem; } .img-card .img-card-body p{ color:var(--muted); font-size:.98rem; margin:0 0 16px; flex:1; } .img-card .img-card-body .btn{ align-self:flex-start; } /* ---------- FAQ ---------- */ .faq{ display:flex; flex-direction:column; gap:14px; max-width:760px; } .faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; } .faq summary{ font-family:var(--font-head); font-weight:700; cursor:pointer; font-size:1.05rem; } .faq details[open] summary{ color:var(--accent-ink); margin-bottom:8px; } .faq p{ margin:0; color:var(--muted); } /* ---------- Team ---------- */ .person-card{ text-align:left; } .person-card .avatar{ width:100%; aspect-ratio:1/1.05; border-radius:var(--radius); margin-bottom:18px; background:repeating-linear-gradient(45deg, var(--primary-softer) 0 14px, #fff 14px 28px); border:1.5px dashed color-mix(in oklab, var(--primary) 30%, var(--line)); display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:ui-monospace, monospace; font-size:.8rem; } .person-card .avatar-img{ width:100%; aspect-ratio:1/1.05; object-fit:cover; object-position:center 20%; border-radius:var(--radius); margin-bottom:18px; } .person-card .role{ color:var(--accent-ink); font-family:var(--font-head); font-weight:600; font-size:.9rem; margin-bottom:10px; } .person-card .meta{ font-size:.95rem; color:var(--muted); display:flex; flex-direction:column; gap:3px; } .person-card .meta a{ color:var(--muted); } .person-card .meta a:hover{ color:var(--accent-ink); } /* ---------- Reveal-animationer ---------- */ @media (prefers-reduced-motion: no-preference){ [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } [data-reveal].in{ opacity:1; transform:none; } } /* ---------- Tre kolumner (steg/statband) på desktop ---------- */ @media (min-width: 1021px){ .steps.cols-3, .stat-band.cols-3{ grid-template-columns:repeat(3,1fr); } } /* ---------- Responsivt ---------- */ @media (max-width: 1020px){ .grid-4, .stat-band, .steps{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } .footer-grid{ grid-template-columns:1fr 1fr; } .split{ grid-template-columns:1fr; gap:40px; } .article-layout{ grid-template-columns:1fr !important; } /* hamburger-nav fr.o.m. surfplatta — desktopnav får inte plats under ~1100px */ .main-nav{ position:fixed; inset:74px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch; padding:18px 22px 26px; gap:4px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); transform:translateY(-130%); transition:transform .25s ease; z-index:99; visibility:hidden; } body.nav-open .main-nav{ transform:none; visibility:visible; } .main-nav > a, .nav-item > a{ color:var(--ink) !important; padding:13px 10px; font-size:1.05rem; } .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 18px; } .nav-toggle{ display:flex; flex-direction:column; gap:5px; justify-content:center; background:none; border:none; cursor:pointer; padding:10px; margin-left:auto; } .nav-toggle span{ width:24px; height:2.5px; background:currentColor; border-radius:2px; color:var(--ink); transition:.2s; } body.has-hero .site-header:not(.scrolled) .nav-toggle span{ background:#fff; } body.nav-open .site-header{ background:#fff !important; } body.nav-open .site-header .logo-dark{ display:block !important; } body.nav-open .site-header .logo-light{ display:none !important; } body.nav-open .nav-toggle span{ background:var(--ink); } .header-cta{ margin-left:auto; } .nav-toggle{ margin-left:0; } } @media (max-width: 760px){ body{ font-size:16.5px; } .section{ padding:60px 0; } .grid-2, .grid-3, .form-grid{ grid-template-columns:1fr; } .hero{ min-height:86vh; } .hero .hero-img{ object-position:9% 70%; } /* visa servicebilen till vänster i bilden */ .hero-content{ padding:116px 20px 64px; } .hero h1{ font-size:clamp(1.8rem, 7.2vw, 2.2rem); line-height:1.18; margin-bottom:20px; } .hero .lede{ font-size:1.05rem; line-height:1.6; margin-bottom:30px; } .hero-actions{ gap:10px; margin-bottom:40px; } .trust-chip{ font-size:.82rem; padding:7px 14px; } .cta-banner{ padding:42px 30px; } .search-field{ margin-left:0; width:100%; } .brand-logo{ height:30px; } .offer-brands .brand-logo{ height:28px; } .header-tel{ display:none; } .header-cta .btn{ display:none; } .grid-4{ grid-template-columns:1fr; } .stat-band, .steps{ grid-template-columns:1fr 1fr; } } /* ---------- Tack-sida (QR / ej i meny) ---------- */ body.thank-you-page{ background:#fff; } .thank-you-header{ padding:28px 0 12px; text-align:center; border-bottom:1px solid var(--line); } .thank-you-header .brand-logo{ height:40px; width:auto; margin:0 auto; } .thank-you-main{ padding:56px 0 72px; } .thank-you-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } .thank-you-media{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; max-width:100%; } .thank-you-page .thank-you-media img{ width:100%; max-width:100%; height:auto; display:block; } .thank-you-copy h1{ max-width:none; margin-bottom:16px; } .thank-you-copy .lede{ margin-bottom:24px; } .thank-you-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin-top:28px; } .thank-you-note{ font-size:.95rem; color:var(--muted); margin:0; max-width:42ch; } @media (max-width: 900px){ .thank-you-main{ padding:40px 0 56px; } .thank-you-grid{ grid-template-columns:1fr; gap:24px; } .thank-you-media{ order:-1; width:100%; margin-bottom:28px; } } /* ---------- Offert-sida (Wolfbit → kund, ej i meny) ---------- */ body.offer-page{ background:var(--bg); } .offer-chrome{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .offer-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px; } .offer-brands{ display:flex; align-items:center; gap:14px; color:var(--muted); font-weight:700; } .offer-brands .brand-logo{ height:34px; } .offer-meta{ margin:0; text-align:right; font-size:.85rem; line-height:1.45; color:var(--muted); } .offer-nav{ border-top:1px solid var(--line); } .offer-nav .container{ display:flex; gap:4px; overflow-x:auto; } .offer-nav a{ font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink); padding:11px 14px; white-space:nowrap; } .offer-nav a:first-child{ padding-left:0; } .offer-nav a:hover{ color:var(--accent-ink); } .offer-page section[id]{ scroll-margin-top:120px; } .offer-hero h1{ font-size:clamp(2.1rem,4.4vw,3.1rem); } .offer-note{ margin:34px 0 0; padding:18px 22px; max-width:760px; background:var(--primary-softer); border-left:3px solid var(--primary); border-radius:0 var(--radius) var(--radius) 0; font-size:1rem; color:var(--ink); } .section-white .offer-note{ background:var(--bg); } .offer-plans{ align-items:stretch; } .offer-plan{ position:relative; padding:32px 28px; } .offer-plan:hover{ transform:none; } .offer-plan--main{ border:2px solid var(--primary); box-shadow:var(--shadow-md); } .offer-badge{ position:absolute; top:-13px; left:30px; background:var(--primary); color:var(--on-primary); font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:999px; } .offer-plan .offer-price{ font-family:var(--font-head); font-weight:800; font-size:2.2rem; line-height:1; letter-spacing:-.02em; color:var(--ink) !important; margin:6px 0 24px !important; } .offer-plan .check-list{ margin-bottom:22px; } .offer-plan .check-list li span:last-child{ color:var(--ink); } .offer-plan .offer-pay{ margin:auto 0 0 !important; padding-top:18px; border-top:1px solid var(--line); font-size:.93rem !important; } .brand-concept{ margin:0; display:flex; flex-direction:column; gap:14px; } .brand-concept img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); } .brand-concept figcaption{ padding:8px 4px 0; } .brand-concept figcaption h3{ margin:0 0 6px; } .brand-concept figcaption p{ margin:0; color:var(--muted); font-size:1rem; } .brand-vehicle{ margin:46px 0 0; } .brand-vehicle img{ width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); } .brand-vehicle figcaption{ margin-top:12px; font-size:.9rem; color:var(--muted); } /* Offert: tack-kort (A6, liggande 148×105) */ .tack-cards{ display:flex; flex-direction:column; gap:18px; } .tack-card{ aspect-ratio:148/105; width:min(440px,100%); border-radius:12px; padding:26px 28px; box-shadow:var(--shadow-md); display:flex; font-size:.95rem; line-height:1.5; } .tack-card p{ margin:0; } .tack-card--front{ background:var(--navy); color:rgba(255,255,255,.82); flex-direction:column; justify-content:space-between; } .tack-card--front img{ height:34px; width:auto; align-self:flex-start; } .tack-big{ font-family:var(--font-head); font-weight:800; font-size:1.7rem; line-height:1.15; color:#fff; margin-bottom:6px !important; } .tack-tel{ font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--primary); } .tack-card--back{ background:#fff; border:1px solid var(--line); color:var(--ink); align-items:center; gap:22px; margin-left:auto; } .tack-card--back > div{ display:flex; flex-direction:column; gap:10px; } .tack-h{ font-family:var(--font-head); font-weight:800; font-size:1.25rem; } .tack-small{ font-size:.78rem; color:var(--muted); margin-top:4px !important; } .tack-qr{ width:120px; height:120px; flex-shrink:0; } .tack-caption{ font-size:.9rem; color:var(--muted); margin:4px 0 0; } @media (max-width: 760px){ .tack-card{ padding:20px; font-size:.85rem; } .tack-big{ font-size:1.35rem; } .tack-qr{ width:92px; height:92px; } } .offer-footer{ background:var(--navy); color:rgba(255,255,255,.65); padding:26px 0; font-size:.9rem; } .offer-footer .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } .offer-footer a{ color:rgba(255,255,255,.85); } @media (max-width: 760px){ .offer-top{ flex-direction:column; align-items:flex-start; gap:8px; } .offer-meta{ text-align:left; } .offer-hero{ padding-top:40px; } } /* Offert: skärmar (dator, surfplatta, mobil) */ .offer-devices{ display:flex; align-items:flex-end; justify-content:center; gap:34px; margin:0 0 46px; flex-wrap:wrap; } .offer-device{ margin:0; background:#1A1A1A; box-shadow:var(--shadow-md); flex-shrink:0; } .offer-device img{ display:block; width:100%; height:auto; } .offer-device--laptop{ width:min(560px,100%); padding:12px 12px 0; border-radius:16px 16px 0 0; position:relative; margin-bottom:14px; } .offer-device--laptop img{ border-radius:4px 4px 0 0; } .offer-device--laptop::after{ content:""; position:absolute; left:-5%; right:-5%; bottom:-14px; height:14px; background:#2A2A2A; border-radius:0 0 14px 14px; } .offer-device--tablet{ width:250px; padding:12px; border-radius:22px; } .offer-device--tablet img{ border-radius:10px; } .offer-device--phone{ width:150px; padding:7px; border-radius:26px; } .offer-device--phone img{ border-radius:20px; } @media (max-width: 760px){ .offer-devices{ gap:20px; } .offer-device--tablet{ width:200px; } .offer-device--phone{ width:120px; } } /* ============================================================ APL EL — tillägg mot mallen ============================================================ */ /* ---------- Logotyp (inline SVG, följer temat) ---------- */ .brand{ color:var(--ink); } .brand-mark{ display:flex; align-items:center; gap:10px; height:40px; } .brand-mark svg{ height:40px; width:auto; display:block; } .brand-mark .lm-box{ fill:var(--primary); } .brand-mark .lm-a{ fill:var(--on-primary); } .brand-mark .lm-bolt{ fill:var(--primary); } .brand-mark .lm-word{ fill:currentColor; } .brand-mark .lm-sub{ fill:currentColor; opacity:.62; } body.has-hero .site-header:not(.scrolled) .brand{ color:#fff; } body.nav-open .site-header .brand{ color:var(--ink) !important; } .site-footer .brand-mark, .tack-card .brand-mark{ color:#fff; } .thank-you-header .brand-mark, .offer-brands .brand-mark{ color:var(--ink); justify-content:center; } @media (max-width: 760px){ .brand-mark, .brand-mark svg{ height:32px; } } /* ---------- Delad hero (startsida) ---------- */ .hero-split{ position:relative; color:#fff; overflow:hidden; background: radial-gradient(circle at 12% 110%, color-mix(in oklab, var(--primary) 20%, transparent) 0, transparent 45%), linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); padding:148px 0 120px; } .hero-split::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px); } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center; } .hero-split .eyebrow{ color:var(--accent-light); } .hero-split .eyebrow::before{ background:var(--primary); } .hero-split h1{ color:#fff; margin-bottom:22px; font-size:clamp(2.3rem,5vw,3.7rem); } .hero-split h1 .hl{ color:var(--primary); } .hero-split .lede{ color:rgba(255,255,255,.84); font-size:1.2rem; margin-bottom:34px; } .hero-media{ position:relative; } .hero-media .placeholder{ min-height:460px; aspect-ratio:4/5; background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,.02) 14px 28px); border-color:rgba(255,255,255,.3); } .hero-media .placeholder span{ background:var(--navy); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2); } .hero-media .placeholder b{ color:var(--accent-light); } .hero-badge{ position:absolute; left:-28px; bottom:34px; z-index:3; background:var(--primary); color:var(--on-primary); border-radius:var(--radius); padding:16px 20px; box-shadow:0 14px 34px rgba(0,0,0,.35); font-family:var(--font-head); font-weight:800; line-height:1.25; font-size:1rem; } .hero-badge small{ display:block; font-weight:600; font-size:.82rem; opacity:.8; } @media (max-width: 1020px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } .hero-media .placeholder{ aspect-ratio:16/10; min-height:260px; } .hero-badge{ left:16px; bottom:-18px; } } @media (max-width: 760px){ .hero-split{ padding:112px 0 84px; } .hero-split h1{ font-size:clamp(1.9rem, 8vw, 2.4rem); line-height:1.15; } .hero-split .lede{ font-size:1.05rem; } } /* ---------- Fyra tjänsteplattor, överlappar heron ---------- */ .tiles-overlap{ position:relative; z-index:3; margin-top:-64px; } .service-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; } .service-tile{ display:flex; flex-direction:column; padding:30px 28px 28px; color:var(--ink); border-right:1px solid var(--line); position:relative; transition:background .18s ease; } .service-tile:last-child{ border-right:none; } .service-tile::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .service-tile:hover{ background:var(--primary-softer); } .service-tile:hover::before{ transform:scaleX(1); } .service-tile .icon-tile{ width:46px; height:46px; margin-bottom:18px; } .service-tile h3{ font-size:1.3rem; margin-bottom:6px; } .service-tile p{ color:var(--muted); font-size:.98rem; margin:0 0 16px; } .service-tile .card-link{ margin-top:auto; } @media (max-width: 1020px){ .service-tiles{ grid-template-columns:repeat(2,1fr); } .service-tile:nth-child(2){ border-right:none; } .service-tile:nth-child(-n+2){ border-bottom:1px solid var(--line); } } @media (max-width: 560px){ .tiles-overlap{ margin-top:-40px; } .service-tiles{ grid-template-columns:1fr; } .service-tile{ border-right:none; border-bottom:1px solid var(--line); padding:24px 22px; } .service-tile:last-child{ border-bottom:none; } } /* ---------- Trygghetsband (ersätter behörighetsbandet) ---------- */ .trust-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden; } .trust-item{ padding:28px 30px; border-right:1px solid var(--line); display:flex; gap:16px; align-items:flex-start; } .trust-item:last-child{ border-right:none; } .trust-item .icon-tile{ width:44px; height:44px; margin:0; } .trust-item h3{ font-size:1.1rem; margin:0 0 4px; } .trust-item p{ margin:0; color:var(--muted); font-size:.97rem; } @media (max-width: 900px){ .trust-band{ grid-template-columns:1fr; } .trust-item{ border-right:none; border-bottom:1px solid var(--line); } .trust-item:last-child{ border-bottom:none; } } /* ---------- Undersidornas hero: accentlinje ---------- */ .page-hero{ border-bottom:4px solid var(--primary); } /* ---------- Tema-panel (demo, inte för produktion) ---------- */ .theme-panel{ position:fixed; right:16px; bottom:16px; z-index:500; font-family:var(--font-body); font-size:.85rem; color:var(--ink); } .theme-panel-toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:9px 14px 9px 10px; box-shadow:var(--shadow-md); font:inherit; font-weight:700; } .theme-panel-toggle .sw{ width:18px; height:18px; border-radius:50%; background:conic-gradient(#F5C400 0 33%, #2B7A78 0 66%, #6FA8DC 0); } .theme-panel-body{ position:absolute; right:0; bottom:calc(100% + 10px); width:250px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:14px; display:none; } .theme-panel.open .theme-panel-body{ display:block; } .theme-panel-body p{ margin:0 0 10px; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .theme-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; background:none; border:1px solid transparent; border-radius:var(--radius); padding:9px 10px; font:inherit; color:var(--ink); } .theme-opt:hover{ background:var(--bg); } .theme-opt[aria-pressed="true"]{ border-color:var(--ink); background:var(--bg); } .theme-opt .dots{ display:flex; flex-shrink:0; } .theme-opt .dots i{ width:16px; height:16px; border-radius:50%; border:2px solid #fff; margin-left:-5px; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .theme-opt .dots i:first-child{ margin-left:0; } .theme-opt b{ display:block; font-size:.9rem; } .theme-opt small{ display:block; color:var(--muted); font-size:.76rem; } .theme-panel-note{ margin:10px 2px 0 !important; font-size:.72rem !important; letter-spacing:0 !important; text-transform:none !important; font-weight:500 !important; } @media print{ .theme-panel{ display:none; } } /* Länkar i löptext på mörka ytor */ .section-navy a:not(.btn), .cta-banner a:not(.btn), .hero-split a:not(.btn){ color:var(--accent-light); text-decoration:underline; text-underline-offset:3px; } /* Stegrutor: långa ord (t.ex. "Dokumentation") får inte bryta rutnätet på mobil */ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } .step h3{ overflow-wrap:break-word; hyphens:auto; } @media (min-width: 1021px){ .steps.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width: 1020px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 420px){ .steps{ grid-template-columns:1fr; } }