/* ============================================================ Avloppsutredningar — designfundament Palett: petrol + teal, kyligt neutralt papper. Typografi: Bricolage Grotesque (rubriker) + Public Sans (brödtext) Tokens styrs via CSS-variabler så Tweaks kan byta tema live. ============================================================ */ /* ---- Färgteman (default = Petrol). Tweaks sätter data-theme på . ---- */ :root, :root[data-theme="petrol"] { --c-paper: #f4f7f8; --c-paper-2: #eaf0f2; --c-surface: #ffffff; --c-ink: #0c2733; --c-ink-soft: #3d5560; --c-muted: #6a808a; --c-line: #d9e3e7; --c-line-soft: #e7eef0; --c-primary: #0d3b4f; /* djup petrol */ --c-primary-2: #14506b; --c-accent: #1f8fab; /* teal */ --c-accent-2: #3fb0c9; --c-accent-ink: #063442; --c-accent-wash:#e3f1f4; --c-dark: #0a2530; /* mörka sektioner */ --c-dark-2: #0d3343; --c-dark-ink: #e7f1f3; --c-dark-muted: #93b3bd; --c-on-accent: #ffffff; } :root[data-theme="skog"] { --c-paper: #f4f6f1; --c-paper-2: #e9efe4; --c-surface: #ffffff; --c-ink: #16261a; --c-ink-soft: #41513f; --c-muted: #6c7d68; --c-line: #dde4d6; --c-line-soft: #e9efe4; --c-primary: #1f3d2b; --c-primary-2: #2c553b; --c-accent: #4e8a4b; --c-accent-2: #6aa84f; --c-accent-ink: #173a1a; --c-accent-wash:#e6efe1; --c-dark: #14271a; --c-dark-2: #1d3526; --c-dark-ink: #e9f1e6; --c-dark-muted: #9fb89a; --c-on-accent: #ffffff; } :root[data-theme="natt"] { --c-paper: #f5f6f8; --c-paper-2: #eaeef3; --c-surface: #ffffff; --c-ink: #11202e; --c-ink-soft: #3c4d5e; --c-muted: #687889; --c-line: #dce2ea; --c-line-soft: #e8edf2; --c-primary: #102a43; --c-primary-2: #1c3b59; --c-accent: #c98a14; --c-accent-2: #e0a52a; --c-accent-ink: #5a3c07; --c-accent-wash:#f6ecd6; --c-dark: #0d2236; --c-dark-2: #15324c; --c-dark-ink: #eaf0f6; --c-dark-muted: #94a8bd; --c-on-accent: #1a1304; } /* ---- Typsnittstema (default = modern). Tweaks sätter data-type. ---- */ :root, :root[data-type="modern"] { --font-head: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif; --font-body: "Public Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --head-tracking: -0.02em; } :root[data-type="klassisk"] { --font-head: "Source Serif 4", Georgia, serif; --font-body: "Public Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --head-tracking: -0.01em; } :root[data-type="neutral"] { --font-head: "Libre Franklin", system-ui, sans-serif; --font-body: "Libre Franklin", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --head-tracking: -0.015em; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--c-paper); color: var(--c-ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: var(--head-tracking); line-height: 1.08; color: var(--c-ink); text-wrap: balance; } /* ---- Layout ---- */ .container { width: min(1180px, 92vw); margin-inline: auto; } .container--narrow { width: min(820px, 92vw); margin-inline: auto; } .section { padding-block: clamp(64px, 9vw, 130px); } .section--tight { padding-block: clamp(48px, 6vw, 84px); } .section--paper2 { background: var(--c-paper-2); } .section--dark { background: var(--c-dark); color: var(--c-dark-ink); } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } /* ---- Typskala ---- */ .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--c-accent); display: inline-block; } .section--dark .eyebrow { color: var(--c-accent-2); } .section--dark .eyebrow::before { background: var(--c-accent-2); } .display { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.03em; } .h-xl { font-size: clamp(30px, 4.4vw, 50px); } .h-lg { font-size: clamp(25px, 3vw, 36px); } .h-md { font-size: clamp(20px, 2vw, 25px); } .lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--c-ink-soft); max-width: 60ch; } .section--dark .lede { color: var(--c-dark-muted); } .muted { color: var(--c-muted); } .section--dark .muted { color: var(--c-dark-muted); } /* ---- Knappar ---- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 15.5px; border: 1.5px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--c-accent); color: var(--c-on-accent); } .btn--primary:hover { background: var(--c-accent-ink); } .btn--solid { background: var(--c-primary); color: #fff; } .btn--solid:hover { background: var(--c-primary-2); } .btn--ghost { border-color: var(--c-line); color: var(--c-ink); background: var(--c-surface); } .btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn--onaccent { background: #fff; color: var(--c-primary); } .btn--onaccent:hover { background: var(--c-accent-wash); } .btn--link { padding: 0; background: none; color: var(--c-accent); font-weight: 600; border: 0; display: inline-flex; align-items: center; gap: 7px; } .btn--link .arr { transition: transform .2s ease; } .btn--link:hover .arr { transform: translateX(4px); } .section--dark .btn--link { color: var(--c-accent-2); } /* ---- Chip / märken ---- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--c-accent-wash); color: var(--c-accent-ink); font-size: 13px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); } .chip--ghost { background: var(--c-surface); color: var(--c-ink-soft); border-color: var(--c-line); } /* ---- Kort ---- */ .card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px; padding: 30px; } .card--pad-lg { padding: 38px; } /* ---- Bildplatshållare (kund laddar upp riktiga foton) ---- */ .ph { position: relative; border-radius: 14px; overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 8%, var(--c-paper)) 0 11px, color-mix(in srgb, var(--c-primary) 13%, var(--c-paper)) 11px 22px); border: 1px solid var(--c-line); color: var(--c-ink-soft); display: grid; place-items: center; min-height: 200px; } .ph__tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-surface); border: 1px solid var(--c-line); padding: 7px 12px; border-radius: 8px; color: var(--c-muted); } .section--dark .ph { background: repeating-linear-gradient(135deg, var(--c-dark-2) 0 11px, color-mix(in srgb, #ffffff 5%, var(--c-dark-2)) 11px 22px); border-color: color-mix(in srgb, #ffffff 12%, transparent); } .section--dark .ph__tag { background: var(--c-dark); border-color: color-mix(in srgb, #ffffff 14%, transparent); color: var(--c-dark-muted); } /* ---- Header / nav ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--c-paper) 82%, transparent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--c-line-soft); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .nav__links { display: flex; align-items: center; gap: 30px; } .nav__links a { font-size: 15px; font-weight: 500; color: var(--c-ink-soft); position: relative; padding: 6px 0; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--c-ink); } .nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--c-accent); border-radius: 2px; } .nav { position: relative; } .nav__cta { display: flex; align-items: center; gap: 14px; } .nav__burger { display: none; appearance: none; border: 1px solid var(--c-line); background: var(--c-surface); border-radius: 10px; width: 44px; height: 44px; place-items: center; color: var(--c-ink); } .nav__burger svg { width: 22px; height: 22px; } @media (max-width: 1024px) { .nav__links { position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 14px; display: none; box-shadow: 0 24px 50px rgba(8, 35, 47, 0.14); } .nav.open .nav__links { display: flex; } .nav__links a { padding: 13px 12px; font-size: 16.5px; border-radius: 9px; } .nav__links a:hover { background: var(--c-paper-2); } .nav__links a[aria-current="page"]::after { display: none; } .nav__links a[aria-current="page"] { background: var(--c-accent-wash); color: var(--c-accent-ink); } .nav__burger { display: inline-grid; } /* Både "Ring oss" och "Kontakta oss" flyttas in i hamburgermenyn så snart menyn blir en dropdown. */ .nav__cta .btn--link, .nav__cta .btn--primary { display: none; } } @media (max-width: 480px) { .logo__name small { display: none; } } /* ---- Logotyp (wordmark) ---- */ .logo { display: inline-flex; align-items: center; gap: 11px; } .logo__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--c-primary); display: grid; place-items: center; flex: none; } .logo__mark svg { width: 20px; height: 20px; } .logo__name { font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--c-ink); line-height: 1; } .logo__name small { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-top: 3px; white-space: nowrap; } .section--dark .logo__name { color: #fff; } .site-footer .logo__mark { background: var(--c-accent); } /* ---- Grids ---- */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---- Sektionsrubrik-block ---- */ .section-head { max-width: 720px; margin-bottom: 52px; } .section-head .eyebrow { margin-bottom: 18px; } .section-head .lede { margin-top: 18px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lede { margin-inline: auto; } .section-head--center .eyebrow { justify-content: center; } /* ---- Statistik ---- */ .stat__num { font-family: var(--font-head); font-size: clamp(34px, 4vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--c-accent); } .section--dark .stat__num { color: var(--c-accent-2); } .stat__label { color: var(--c-ink-soft); font-size: 15px; margin-top: 8px; } .section--dark .stat__label { color: var(--c-dark-muted); } /* ---- Tweakbar textmängd ---- */ [data-density="compact"] .t-more, [data-density="compact"] .t-most, [data-density="normal"] .t-most { display: none !important; } /* ---- Hero-/processvarianter: visa bara aktiv ---- */ .variant { display: none; } [data-hero="split"] .hero--split, [data-hero="statement"] .hero--statement, [data-hero="immersive"] .hero--immersive, [data-process="timeline"] .process--timeline, [data-process="cards"] .process--cards, [data-process="ribbon"] .process--ribbon { display: block; } /* ---- Footer ---- */ .site-footer { background: var(--c-dark); color: var(--c-dark-ink); padding-block: 72px 36px; } .site-footer a { color: var(--c-dark-muted); } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .footer-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-dark-muted); font-weight: 500; margin-bottom: 16px; } .footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; } .footer-bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, #ffffff 12%, transparent); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--c-dark-muted); } /* ---- Hjälpklasser ---- */ .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .wrap { flex-wrap: wrap; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .center { text-align: center; } /* ---- Ikonbricka ---- */ .icon-badge { width: 48px; height: 48px; border-radius: 12px; background: var(--c-accent-wash); color: var(--c-accent-ink); display: grid; place-items: center; flex: none; } .icon-badge svg { width: 24px; height: 24px; } .section--dark .icon-badge { background: color-mix(in srgb, var(--c-accent) 22%, transparent); color: var(--c-accent-2); } /* ---- Sticky-header scroll offset ---- */ section[id], [id].section, [id].section--tight { scroll-margin-top: 90px; } /* ---- Entré-animation ---- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-in { opacity: 1; transform: none; } } /* ============================================================ Sektions-/komponentlayout ============================================================ */ /* ---- Hero: split ---- */ .hero-split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero-split-img { min-height: 460px; height: 100%; } .hero--split .reveal:last-child { position: relative; } .hero-float { position: absolute; left: -18px; bottom: -22px; display: flex; align-items: center; gap: 14px; max-width: 320px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(8, 35, 47, 0.16); } .hero-float strong { display: block; font-size: 15px; } .hero-float .muted { font-size: 13.5px; line-height: 1.4; } .hero-trust { display: flex; gap: 30px; flex-wrap: wrap; } .hero-trust > div { display: flex; flex-direction: column; } .hero-trust strong { font-family: var(--font-head); font-size: 22px; color: var(--c-primary); } .hero-trust span { font-size: 13.5px; color: var(--c-muted); } .hero-puffs { display: grid; gap: 12px; } .hero-puff { display: flex; align-items: center; gap: 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 13px; padding: 13px 16px; } .hero-puff__icon { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--c-accent-wash); color: var(--c-accent-ink); display: grid; place-items: center; } .hero-puff__icon svg { width: 21px; height: 21px; } .hero-puff__text { display: flex; flex-direction: column; line-height: 1.25; } .hero-puff__text strong { font-size: 15.5px; color: var(--c-ink); letter-spacing: -0.01em; line-height: 1.3; } .hero-puff__text span { font-size: 13.5px; color: var(--c-muted); margin-top: 2px; } /* ---- Hero: statement ---- */ .hero-statement { padding-block: clamp(20px, 4vw, 56px); } .hero-statement-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--c-line); padding-top: 36px; max-width: 900px; margin-inline: auto; } .hero-statement-strip .stat__label { max-width: 18ch; margin-inline: auto; } /* ---- Hero: immersive ---- */ .hero-immersive { position: relative; overflow: hidden; } .hero-immersive-bg { position: absolute; inset: 0; border-radius: 0; border: 0; opacity: 0.5; } .hero-immersive-bg .ph__tag { position: absolute; right: 18px; bottom: 18px; } .hero-immersive-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--c-dark) 28%, transparent 95%); } .hero-immersive-inner { position: relative; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } /* ---- Föreläggande ---- */ .forelagg-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; } .forelagg-media { position: relative; } .forelagg-media img { width: 100%; border-radius: 18px; border: 1px solid var(--c-line); box-shadow: 0 24px 60px rgba(8, 35, 47, 0.16); object-fit: cover; aspect-ratio: 4 / 3; } .forelagg-badge { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(8, 35, 47, 0.14); } .forelagg-badge svg { color: var(--c-accent); } .forelagg-list { list-style: none; padding: 0; display: grid; gap: 14px; } .forelagg-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 17px; font-weight: 500; color: var(--c-ink); } .forelagg-list svg { width: 22px; height: 22px; color: var(--c-accent); flex: none; margin-top: 3px; } .forelagg-note { font-family: var(--font-head); font-size: 19px; line-height: 1.4; color: var(--c-ink); padding-left: 18px; border-left: 3px solid var(--c-accent); } .forelagg-note strong { color: var(--c-accent-ink); } @media (max-width: 880px) { .forelagg-grid { grid-template-columns: 1fr; gap: 32px; } .forelagg-media { order: -1; } } /* ---- Logostrip ---- */ .logostrip { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .logostrip__label { font-size: 14.5px; color: var(--c-muted); max-width: 24ch; } .logostrip__items { display: flex; gap: 16px; flex-wrap: wrap; } .logo-ph { min-height: 52px; width: 150px; border-radius: 10px; } .logo-ph .ph__tag { font-size: 10px; padding: 4px 9px; } .kommun-logo { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 10px 22px; border-left: 2px solid var(--c-accent); line-height: 1.15; transition: transform .18s ease, border-color .18s ease; } a.kommun-logo:hover { transform: translateY(-2px); border-left-color: var(--c-primary); } a.kommun-logo:hover .kommun-logo__name { color: var(--c-accent); } .kommun-logo__name { font-family: var(--font-head); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--c-primary); transition: color .18s ease; } .kommun-logo__sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); margin-top: 3px; } /* ---- Kommunsidor ---- */ .crumbs { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-muted); font-family: var(--font-mono); } .crumbs a:hover { color: var(--c-accent); } .crumbs strong { color: var(--c-ink); font-weight: 600; } .kommun-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .kommun-hero__grid { grid-template-columns: 1fr; gap: 36px; } } .kommun-map-wrap { position: relative; } .kommun-map { height: 440px; border-radius: 18px; border: 1px solid var(--c-line); box-shadow: 0 24px 60px rgba(8, 35, 47, 0.18); z-index: 0; } @media (max-width: 900px) { .kommun-map { height: 320px; } } .kommun-map__badge { position: absolute; right: 16px; top: 16px; z-index: 400; display: inline-flex; align-items: center; gap: 8px; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(8, 35, 47, 0.16); } .kommun-map__badge svg { color: var(--c-accent); } .omraden { display: flex; flex-wrap: wrap; gap: 10px; } .omrade[href] { transition: border-color .16s ease, background .16s ease, color .16s ease; } .omrade[href]:hover { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, transparent); color: var(--c-primary); } .omrade { display: inline-flex; align-items: center; padding: 9px 17px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-line); font-size: 14.5px; font-weight: 500; color: var(--c-ink-soft); } .kommun-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } @media (max-width: 1000px) { .kommun-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .kommun-steps { grid-template-columns: 1fr; } } .kommun-step { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 22px; } .kommun-step p { font-size: 14px; margin-top: 8px; } .kommun-cta { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .kommun-cta { grid-template-columns: 1fr; gap: 32px; } } .kommun-link { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-line); transition: border-color .18s ease, transform .18s ease; } .kommun-link:hover { border-color: var(--c-accent); transform: translateY(-2px); } .kommun-link .arr { color: var(--c-accent); } .kommun-hero { padding-bottom: clamp(40px, 5vw, 70px); } /* ---- Intro ---- */ .intro-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .intro-points { display: grid; gap: 16px; } .intro-point { display: flex; align-items: center; gap: 14px; font-weight: 500; } .intro-point svg { width: 22px; height: 22px; color: var(--c-accent); flex: none; } @media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---- Process: timeline ---- */ .timeline { list-style: none; padding: 0; max-width: 800px; margin-inline: auto; position: relative; } .timeline::before { content: ""; position: absolute; left: 31px; top: 22px; bottom: 22px; width: 2px; background: var(--c-line); } .timeline__item { display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding-block: 18px; position: relative; } .timeline__num { width: 64px; height: 64px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-line); display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--c-accent); z-index: 1; } .timeline__body { padding-top: 6px; } .timeline__body p { color: var(--c-ink-soft); margin-top: 6px; max-width: 56ch; } /* ---- Process: cards ---- */ .step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--c-accent); letter-spacing: 0.1em; } .process-cards .card { display: flex; flex-direction: column; } .process-cards .icon-badge { margin-top: 14px; } .card--cta { background: var(--c-primary); color: #fff; border-color: var(--c-primary); justify-content: center; } .card--cta h3 { color: #fff; } .card--cta .muted { color: color-mix(in srgb, #fff 72%, transparent); } /* ---- Process: ribbon ---- */ .ribbon { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; } .ribbon__step { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 22px; height: 100%; } .ribbon__step h3 { margin-top: 8px; } .ribbon__step p { font-size: 14px; margin-top: 8px; } .ribbon__arr { width: 26px; height: 26px; color: var(--c-accent); justify-self: center; } @media (max-width: 1000px) { .ribbon { grid-template-columns: 1fr; } .ribbon__arr { transform: rotate(90deg); justify-self: start; margin-left: 22px; } } /* ---- Vinster ---- */ .vinster-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .vinster-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .vinster-card { background: var(--c-dark-2); border: 1px solid color-mix(in srgb, #fff 12%, transparent); border-radius: 20px; padding: 38px; } .vinster-list { list-style: none; padding: 0; display: grid; gap: 14px; } .vinster-list li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 500; color: var(--c-dark-ink); } .vinster-list svg { width: 20px; height: 20px; color: var(--c-accent-2); flex: none; } .vinster-quote { font-family: var(--font-head); font-size: 19px; line-height: 1.4; color: #fff; padding-left: 18px; border-left: 3px solid var(--c-accent-2); } @media (max-width: 900px) { .vinster-grid { grid-template-columns: 1fr; gap: 36px; } .vinster-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .vinster-stats { grid-template-columns: 1fr; } } /* ---- Fast pris / puff ---- */ .pris-puff { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 44px; align-items: center; background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-2) 58%, var(--c-accent-ink) 130%); border-radius: 22px; padding: clamp(28px, 4vw, 52px); position: relative; overflow: hidden; } .pris-puff::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #fff 14%, transparent); box-shadow: 0 0 0 30px color-mix(in srgb, #fff 5%, transparent); pointer-events: none; } .pris-puff__chip { background: color-mix(in srgb, var(--c-accent) 26%, transparent); color: #fff; border-color: color-mix(in srgb, #fff 24%, transparent); white-space: nowrap; } .pris-puff__chip svg { color: var(--c-accent-2); } .pris-puff__text { color: var(--c-dark-muted); max-width: 52ch; font-size: 17px; } .pris-puff__list { list-style: none; padding: 0; display: grid; gap: 11px; } .pris-puff__list li { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 500; font-size: 15.5px; } .pris-puff__list svg { width: 19px; height: 19px; color: var(--c-accent-2); flex: none; } .pris-puff__right { position: relative; z-index: 1; } .pris-tag { background: var(--c-surface); border-radius: 18px; padding: 28px 26px; text-align: center; display: grid; gap: 6px; box-shadow: 0 24px 60px rgba(8, 35, 47, 0.32); } .pris-tag__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); } .pris-tag__amount { font-family: var(--font-head); font-size: clamp(38px, 5vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; color: var(--c-primary); } .pris-tag__amount small { font-size: 0.42em; font-weight: 600; color: var(--c-ink-soft); letter-spacing: 0; } .pris-tag__sub { font-size: 13.5px; color: var(--c-muted); margin-bottom: 8px; } .pris-tag__btn { justify-content: center; } .pris-tag__guarantee { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-accent-ink); margin-top: 4px; } .pris-tag__guarantee svg { color: var(--c-accent); } @media (max-width: 760px) { .pris-puff { grid-template-columns: 1fr; gap: 28px; } } /* ---- Tomtskanning ---- */ .skan-figure { margin: 0; } .skan-figure img { width: 100%; border-radius: 18px; border: 1px solid var(--c-line); box-shadow: 0 30px 70px rgba(8, 35, 47, 0.22); display: block; } .skan-figure figcaption { margin-top: 14px; font-size: 14px; color: var(--c-muted); text-align: center; max-width: 64ch; margin-inline: auto; } .skan-point { display: flex; flex-direction: column; } /* ---- Service ---- */ .service { } /* ---- Case ---- */ .case__img { min-height: 180px; } .case__quote { font-family: var(--font-head); font-size: 19px; line-height: 1.35; } /* ---- FAQ ---- */ .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; } .faq { display: grid; gap: 0; } .faq__item { border-bottom: 1px solid var(--c-line); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--c-ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__chev { width: 22px; height: 22px; color: var(--c-accent); flex: none; transition: transform .25s ease; } .faq__item[open] .faq__chev { transform: rotate(180deg); } .faq__a { padding: 0 0 24px; color: var(--c-ink-soft); max-width: 62ch; line-height: 1.6; } @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } } /* ---- Kontakt ---- */ .kontakt-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .kontakt-list { list-style: none; padding: 0; display: grid; gap: 18px; } .kontakt-list li { display: flex; align-items: flex-start; gap: 14px; } .kontakt-list svg { width: 22px; height: 22px; color: var(--c-accent-2); flex: none; margin-top: 3px; } .kontakt-list strong { color: #fff; } .kontakt-form { background: var(--c-surface); display: grid; gap: 16px; } .field { display: grid; gap: 7px; } .field label { font-size: 13.5px; font-weight: 600; color: var(--c-ink-soft); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .kontakt-form input, .kontakt-form select, .kontakt-form textarea { font: inherit; font-size: 15px; color: var(--c-ink); padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-paper); width: 100%; } .kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 3px var(--c-accent-wash); } .kontakt-form textarea { resize: vertical; } .kontakt-submit { justify-content: center; margin-top: 4px; } .kontakt-fine { font-size: 12.5px; text-align: center; } @media (max-width: 860px) { .kontakt-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---- Hero responsiv ---- */ @media (max-width: 900px) { .hero-split-grid { grid-template-columns: 1fr; gap: 40px; } .hero-split-img { min-height: 320px; } .hero-float { position: static; max-width: none; margin-top: 16px; } .hero-statement-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hero-statement-strip { grid-template-columns: 1fr 1fr; gap: 18px; } .hero-trust { gap: 20px; } } /* ============================================================ Guide-sida (sa-jobbar-vi) ============================================================ */ .guide-hero { background: var(--c-paper-2); } .guide-toc { position: sticky; top: 94px; display: grid; gap: 4px; align-self: start; } .guide-toc a { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px; border-radius: 10px; font-size: 15px; color: var(--c-ink-soft); } .guide-toc a:hover { background: var(--c-paper-2); color: var(--c-ink); } .guide-toc a b { font-family: var(--font-mono); font-size: 12px; color: var(--c-accent); } .guide-grid { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr; } .guide-toc { position: static; display: none; } } .guide-step { padding-block: 40px; border-top: 1px solid var(--c-line); } .guide-step:first-child { border-top: 0; padding-top: 0; } .guide-step__head { display: flex; align-items: center; gap: 18px; } .guide-step__num { width: 56px; height: 56px; border-radius: 14px; flex: none; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 20px; } .guide-step__body { margin-top: 22px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: start; } .guide-step__body p { color: var(--c-ink-soft); } .guide-checklist { list-style: none; padding: 0; display: grid; gap: 11px; margin-top: 16px; } .guide-checklist li { display: flex; gap: 11px; align-items: flex-start; } .guide-checklist svg { width: 19px; height: 19px; color: var(--c-accent); flex: none; margin-top: 3px; } .guide-aside { background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: 14px; padding: 22px; } .guide-aside h4 { font-size: 14px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 10px; font-weight: 500; } .guide-aside p { font-size: 14.5px; } @media (max-width: 700px) { .guide-step__body { grid-template-columns: 1fr; } } /* ============================================================ Om oss ============================================================ */ .about-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .about-img { min-height: 420px; } @media (max-width: 880px) { .about-hero-grid { grid-template-columns: 1fr; gap: 36px; } .about-img { min-height: 300px; } } .value-card .icon-badge { margin-bottom: 16px; } .team-photo { min-height: 240px; } .team-card h3 { margin-top: 14px; } .team-card .muted { font-size: 14px; } /* ============================================================ MOBIL — justeringar för innehåll tillagt efter grunddesignen ============================================================ */ /* Porträtt i teamkort: håll dem kvadratiska i stället för att min-height ska ge en bred landskapsbeskärning på små skärmar. */ img.team-photo { aspect-ratio: 1 / 1; min-height: 0; } /* Föreläggande-badgen är pinnad i px (left:205/top:300/262x45) för desktop. Bilden blir bara så stor från ca 1130px och uppåt — under det släpps badgen tillbaka till stilmallens flödesposition. */ @media (max-width: 1129px) { .forelagg-badge { left: 18px !important; right: auto !important; top: auto !important; bottom: 18px !important; width: auto !important; height: auto !important; } } @media (max-width: 620px) { .forelagg-badge { left: 12px !important; right: 12px !important; bottom: 12px !important; font-size: 13px; padding: 9px 12px; } /* Kommunchipsen: något tätare när de blir många rader */ .omrade { font-size: 13.5px; padding: 7px 12px; } /* Kundcase-sidornas citat: mindre luft på små skärmar */ .container blockquote { padding: 22px 20px !important; font-size: 1.02rem !important; } /* Felmeddelandet i kontaktformuläret */ #form-fel { font-size: 13.5px; } } /* Kartan på kommunsidorna får inte ta över hela skärmen på mobil */ @media (max-width: 560px) { .kommun-map { height: 260px; } } /* ============================================================ SMÅ SKÄRMAR — inget horisontellt skroll ner till 390px ============================================================ */ /* Grid- och flexbarn krymper inte under sitt innehålls minsta bredd som standard. Det är den vanligaste orsaken till överflöd. */ .kontakt-form input, .kontakt-form select, .kontakt-form textarea { min-width: 0; } .field, .field-row > .field { min-width: 0; } .hero-puff__text, .kontakt-list li > span, .intro-point { min-width: 0; } /* Långa ord (kommunnamn, e-postadresser, URL:er) ska brytas hellre än att skjuta ut sidan. */ h1, h2, h3, .lede, .muted, blockquote, .case__quote { overflow-wrap: break-word; } @media (max-width: 430px) { /* Knappar: tillåt radbrytning i stället för nowrap-överflöd */ .btn { white-space: normal; text-align: center; } /* E-post och telefon på egen rad — två kolumner blir för trångt för platshållartexterna */ .field-row { grid-template-columns: 1fr; gap: 14px; } /* Chips och pris-puff får brytas */ .pris-puff__chip { white-space: normal; } .crumbs { flex-wrap: wrap; row-gap: 4px; } /* Statistikremsan: en kolumn ger läsbara tal i stället för avhuggna etiketter */ .hero-statement-strip { grid-template-columns: 1fr 1fr; gap: 16px; } .hero-trust { flex-wrap: wrap; row-gap: 16px; } } /* Sista skyddsnät: klipp bort eventuellt oförutsett överflöd. 'clip' i stället för 'hidden' så position:sticky i headern fortsätter att fungera. */ @media (max-width: 620px) { html { overflow-x: clip; } } /* CTA inne i hamburgermenyn — visas bara när headerknappen är gömd */ .nav__menu-cta { display: none; } @media (max-width: 1024px) { .nav__menu-cta { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--c-line); } .nav__menu-cta .btn { width: 100%; justify-content: center; font-size: 16px; padding: 14px 18px; } }