/* ==========================================================================
Nordisk Solteknik — implementation of "Nordisk Solteknik.dc.html"
Design canvas: desktop artboard 1440 / mobile artboard 390.
Type and spacing interpolate linearly between those two widths so the
rendered values match the canvas exactly at 390px and at 1180px+.
========================================================================== */
/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* --- Tokens --------------------------------------------------------------- */
:root{
/* colour */
/* ── Colour ───────────────────────────────────────────────────────────
Anchored on the logo: #024D68 hsl(196 96% 21%) and #FFC000 hsl(45 100% 50%).
The blue scale is one hue (196°) held constant so every tint reads as the
same colour at different strengths. Neutrals carry a slight cool cast so
they sit with the blue instead of fighting it.
Distribution target — 60 / 30 / 10:
60% neutral grounds (--paper, --surface)
30% blue family (tints for large areas, deep for punctuation)
10% amber (CTAs, selection, one accent band per page)
Six grounds, each one step apart, so two in sequence never read as one
block. Light: paper → surface → tint. Dark: blue → dark → deep.
Every page walks down that ladder and closes on the deepest.
──────────────────────────────────────────────────────────────────────── */
--brand-900:#012C3C;
--brand-800:#023F55;
--brand:#024D68; /* logo blue */
--brand-600:#036487;
--brand-500:#037DAA;
--brand-300:#3CB2DD;
--brand-100:#D3E7EE;
--brand-50:#E7F1F6;
--brand-25:#F3F8FA;
--accent:#FFC000; /* logo amber */
--accent-hover:#E8AE00;
--accent-50:#FFF6DC;
/* The amber is never painted flat. It is treated as a lit surface: a sunlit
side and a shaded side of the same logo yellow, so a yellow area reads as
light falling on something rather than as a slab of ink. */
--accent-lit:#FFD75E;
--accent-shade:#F2A900;
/* Unused since the buttons were flattened — kept because putting the
gradient face back is then a one-line change in .btn--accent. */
--accent-face:linear-gradient(158deg,var(--accent-lit) 0%,var(--accent) 46%,var(--accent-shade) 100%);
--accent-face-hover:linear-gradient(158deg,var(--accent) 0%,var(--accent-hover) 46%,#D89800 100%);
--ink:#0E1A20;
--ink-muted:#46585F;
--ink-faint:#7C8E96;
--hair:#DCE5E8;
--hair-strong:#C7D5DA;
--surface:#F1F5F7;
--surface-raised:#FFFFFF;
--surface-sunken:#E4EBEE;
/* deep grounds are brand blue now, not near-black — the site reads light */
--dark:var(--brand-800);
--dark-fg:#EAF3F7;
--dark-body:#C9DEE7;
--dark-hair:#0A5A75;
--dark-border:#10688A;
--blue:var(--brand); /* alias kept for existing figure/link usages */
/* type */
/* Geist, på Julius besked. Var Familjen Grotesk. Självvärdad som förut:
netlify.toml sätter font-src 'self', så ett CDN-anrop hade blockerats av
CSP:n och sidan tyst fallit tillbaka på system-ui.
Variabel vikt 400-700 i samma två snitt, latin och latin-ext, med samma
unicode-range som förut. Ext-snittet bär bland annat de tecken som
tidigare låg i det gamla, och åäö ligger i latin-snittet. */
--sans:"Geist",system-ui,-apple-system,sans-serif;
/* --fig hette --mono och var IBM Plex Mono. Borttagen på Julius besked: han
ville inte se den någonstans på sajten, sidfoten inräknad.
Variabeln finns kvar, med nytt namn, för att den bar en ROLL och inte ett
typsnitt: siffror, mått, koder och bildtexter under en figur. Femtiosju
regler pekade på den. Att peka om dem till --sans en och en hade varit
samma ändring utspridd på femtiosju ställen, och nästa gång rollen ska
byta utseende hade den inte funnits kvar att byta på.
Namnet fick inte stå kvar som --mono. En variabel som heter mono och inte
är monospaced är en fälla för den som läser regeln och tror sig veta vad
den ger.
TABELLSIFFRORNA HÅLLER. Det var den enda verkliga risken: kolumnerna i
lönsamhetskalkylen ligger på font-variant-numeric:tabular-nums, och med ett
proportionellt typsnitt utan tabellsiffror hade de blivit ojämna. Mätt i
webbläsaren: tio siffror i rad i Familjen Grotesk var exakt lika breda för
alla tio tecknen, både med och utan tabular-nums.
EFTER BYTET TILL GEIST GÄLLER DET INTE LÄNGRE UTAN VIDARE, och det är värt
att veta. Geist har PROPORTIONELLA siffror i grunden: mätt på samma sätt
skiljer tio ettor och tio nollor 129,6 px vid 40 px. Med tabular-nums är
skillnaden noll. Kolumnerna håller alltså bara så länge regeln som sätter
dem också sätter font-variant-numeric.
Genomgånget vid bytet: tjugofyra av reglerna som använder --fig sätter
tabular-nums, och det är de som står i kolumn — kalkylens rader,
antagandelistan, jämförelsens tal. De trettiotvå övriga är ensamma tal och
bildtexter, där siffrornas bredd inte har något att linjera mot.
Lägger man en ny sifferkolumn måste tabular-nums med. */
--fig:var(--sans);
--fs-body:clamp(16px,calc(15.01px + 0.253vw),18px); /* 16 → 18 */
--fs-mono:clamp(13px,calc(12.51px + 0.127vw),14px); /* 13 → 14 */
--fs-mono-sm:clamp(12px,calc(11.51px + 0.127vw),13px); /* 12 → 13 */
/* Type scale taken from design-variation-1 (2026-07-31). The old ramp
topped out at 67px, which made the headline the loudest thing on every
page and left section headings competing with it. This one is short:
54 hero, 48 page, 32 section, 26 sub. The drama moves to photography and
to the space between blocks, which is what the reference set does.
Interpolated 390 → 1180 like everything else in this file. */
--fs-lead:clamp(18px,calc(15.04px + 0.759vw),24px); /* 18 → 24 */
--fs-h1:clamp(34px,calc(27.09px + 1.772vw),48px); /* 34 → 48 */
--fs-h1-hero:clamp(36px,calc(27.11px + 2.278vw),54px); /* 36 → 54 */
--fs-h2:clamp(26px,calc(23.04px + 0.759vw),32px); /* 26 → 32 */
--fs-h2-sm:clamp(22px,calc(20.03px + 0.506vw),26px); /* 22 → 26 */
--fs-h3:clamp(19px,calc(16.53px + 0.633vw),24px); /* 19 → 24 */
--fs-num-xl:clamp(34px,calc(25.11px + 2.278vw),52px); /* 34 → 52 */
--fs-num-lg:clamp(28px,calc(22.08px + 1.519vw),40px); /* 28 → 40 */
/* space */
--gutter:clamp(20px,calc(6.18px + 3.544vw),48px); /* 20 → 48 */
/* Also from design-variation-1: every step down one notch, so a section
breathes without the page becoming a scroll. Paired with the shorter
type ramp above; they were tuned together and do not separate well. */
--pad-xl:clamp(56px,calc(40.20px + 4.051vw),88px); /* 56 → 88 */
--pad-lg:clamp(48px,calc(36.15px + 3.038vw),72px); /* 48 → 72 */
--pad-md:clamp(40px,calc(28.15px + 3.038vw),64px); /* 40 → 64 */
--pad-sm:clamp(32px,calc(24.10px + 2.025vw),48px); /* 32 → 48 */
--card-pad:clamp(20px,calc(14.08px + 1.519vw),32px); /* 20 → 32 */
/* 1180 → 1220, the one container change taken from the variation. The
radii there (32/24/14/pill) are deliberately NOT adopted: the corner
treatment is the part of that design Julius did not want. */
--measure:1220px;
--radius:8px;
--radius-sm:4px;
}
/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--surface);
color:var(--ink);
font-family:var(--sans);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
/* height:auto hör ihop med max-width:100% och saknades. Utan den fortsätter
HTML-attributet height att gälla som använd höjd medan max-width krymper
bredden, och bilden dras ut. Det slog mot varje bild vars figur saknar egen
regel: diagrammet i artikel-kvartspris.html är 1600x900 i filen och
renderade 1124 brett men 900 högt, alltså ett liggande diagram pressat till
stående. Regeln ligger först i filen, så varje senare regel med en verklig
höjd (.shopcard__media img, .media-slot--photo img, .teampair__item img)
vinner precis som förut. */
img,svg,iframe{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
a:hover{color:var(--blue)}
/* …but not on a blue ground, where --blue on --brand-800/900 is unreadable. */
.utility a:hover,.hero a:hover,.section--blue a:hover,.section--dark a:hover,
.section--deep a:hover,.closer a:hover{color:#fff}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* --- Layout primitives ---------------------------------------------------- */
.container{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--pad-xl) 0}
.section--lg{padding:var(--pad-lg) 0}
.section--md{padding:var(--pad-md) 0}
.section--top{border-top:1px solid var(--hair)}
/* Grounds set background-COLOR, never the shorthand: the glow system paints
background-image, and a shorthand anywhere later would silently wipe it. */
.section--white{background-color:var(--surface-raised)}
.section--dark{background-color:var(--dark);color:var(--dark-fg)}
.section--dark .section--top,.section--dark+.section--top{border-color:var(--dark-hair)}
.stack{display:flex;flex-direction:column}
/* --- Type ----------------------------------------------------------------- */
.eyebrow{
display:block;
font-family:var(--sans);
font-size:15px;
font-weight:500;
color:var(--ink-muted);
}
.eyebrow--faint{color:var(--ink-faint)}
.eyebrow--light{color:var(--dark-body)}
.eyebrow--accent{color:var(--accent)}
.eyebrow--blue{color:var(--blue);letter-spacing:normal;text-transform:none}
.h1{font-size:var(--fs-h1);font-weight:600;line-height:1.06;letter-spacing:-.03em}
.h1--hero{font-size:var(--fs-h1-hero);line-height:1.04;letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.h2--sm{font-size:var(--fs-h2-sm);line-height:1.12}
.h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.h4{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.muted{color:var(--ink-muted);text-wrap:pretty}
.faint{color:var(--ink-faint)}
.on-dark-body{color:var(--dark-body);text-wrap:pretty}
.mono{font-family:var(--sans);font-size:15px}
.num{font-family:var(--fig);font-variant-numeric:tabular-nums}
.note{font-family:var(--sans);font-size:15px;color:var(--ink-faint)}
@media (min-width:901px){
.m-20ch{max-width:20ch}.m-22ch{max-width:22ch}.m-24ch{max-width:24ch}
.m-26ch{max-width:26ch}.m-40ch{max-width:40ch}.m-42ch{max-width:42ch}
.m-44ch{max-width:44ch}.m-46ch{max-width:46ch}.m-52ch{max-width:52ch}
.m-54ch{max-width:54ch}.m-56ch{max-width:56ch}.m-58ch{max-width:58ch}
.m-60ch{max-width:60ch}.m-62ch{max-width:62ch}.m-64ch{max-width:64ch}
.m-68ch{max-width:68ch}.m-88ch{max-width:88ch}
}
/* --- Buttons -------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:15px 26px;
border:1px solid transparent;border-radius:var(--radius-sm);
font-family:var(--sans);font-size:16px;font-weight:500;
line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn--sm{padding:14px 24px}
.btn--xs{padding:12px 22px}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-600);color:#fff}
/* On dark ground the primary flips to white so it stays the loudest thing.
All five blue grounds are listed — a brand-blue button on a brand-blue band
would disappear. */
.hero .btn--primary,.section--dark .btn--primary,.section--blue .btn--primary,
.section--deep .btn--primary,.closer .btn--primary{background:var(--surface-raised);color:var(--ink)}
.hero .btn--primary:hover,.section--dark .btn--primary:hover,.section--blue .btn--primary:hover,
.section--deep .btn--primary:hover,.closer .btn--primary:hover{background:#e7eae9;color:var(--ink)}
.btn--ghost{border-color:var(--hair);color:var(--ink)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--ghost-dark{border-color:var(--dark-border);color:var(--dark-fg)}
.btn--ghost-dark:hover{border-color:var(--dark-fg);color:var(--dark-fg)}
.btn--ghost-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost-light:hover{border-color:#fff;color:#fff}
.btn--phone{font-size:var(--fs-lead);letter-spacing:.04em;text-transform:none}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.btn-row--tight{gap:16px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;
border-bottom:1px solid var(--hair);
font-family:var(--sans);font-size:var(--fs-mono);
text-decoration:none;white-space:nowrap;
transition:border-color .15s ease}
.link-arrow:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:640px){
.btn-row{flex-direction:column;align-items:stretch;gap:12px}
.btn-row .btn{width:100%}
.btn-row .note,.btn-row .link-arrow{align-self:flex-start}
.btn{padding:16px 22px}
.btn--sm,.btn--xs{padding:14px 22px}
}
/* --- Header --------------------------------------------------------------- */
.utility{
background:var(--dark);color:var(--dark-body);
font-family:var(--sans);font-size:14px;
}
.utility__inner{
max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:38px;
}
.utility a{text-decoration:none}
/* The rating travels in the bar rather than occupying a section of its own.
Svea Solar does the same with Trustpilot, and it is strictly better: proof is
visible on every page and every scroll position instead of once, and it frees
the start page of an 89-line carousel. */
@media (max-width:640px){
.utility__inner{flex-wrap:wrap;gap:4px 16px;padding-top:6px;padding-bottom:6px}
}
.site-header{background:var(--surface-raised);border-bottom:1px solid var(--hair);position:relative;z-index:100}
.site-header__inner{
max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;
}
.site-header__logo{flex:none;line-height:0;display:block}
.site-header__logo img{width:168px;height:auto}
.site-header__logo--light{display:none}
.site-nav ul{display:flex;align-items:center;gap:26px}
/* Top-level links only. The "Mer" dropdown lives inside .site-nav, so a bare
`.site-nav a` also paints the panel's links — which is how they ended up
white-on-white over the hero. Every bar-level rule is scoped to the direct
children; .nav-menu owns its own links. */
.site-nav > ul > li > a{
position:relative;display:block;padding:8px 0;
font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;white-space:nowrap;
}
.site-nav > ul > li > a:hover{color:var(--ink)}
.site-nav > ul > li > a[aria-current="page"]{color:var(--ink)}
.site-nav > ul > li > a[aria-current="page"]::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
}
.nav-toggle{display:none}
/* Overlay header (hero pages) */
.site-header--overlay{
position:absolute;top:0;left:0;right:0;z-index:3;
background:transparent;border-bottom:0;
}
.site-header--overlay .utility{
background:transparent;color:rgba(255,255,255,.72);
border-bottom:1px solid rgba(255,255,255,.16);
}
.site-header--overlay .utility a:hover{color:#fff}
/* Mejladressen lyfts ur barens 72 % vitt. Den är den enda av de tre
uppgifterna man ska kunna läsa av på en gång, och mot ett fotografi var den
det som föll bort först. Betyget och klockslaget ligger kvar på 72: de är
sammanhang, inte kontaktväg. */
.site-header--overlay .utility__mail{color:rgba(255,255,255,.94)}
.site-header--overlay .site-header__logo img{width:104px}
.site-header--overlay .site-header__logo--dark{display:none}
.site-header--overlay .site-header__logo--light{display:block}
.site-header--overlay .site-nav > ul > li > a{color:rgba(255,255,255,.8)}
.site-header--overlay .site-nav > ul > li > a:hover,
.site-header--overlay .site-nav > ul > li > a[aria-current="page"]{color:#fff}
.site-header__panel{display:none}
@media (max-width:1100px){
.utility{display:none}
.site-header__inner{min-height:64px;padding:0 var(--gutter)}
.site-header__logo img{width:132px}
.site-header--overlay .site-header__logo img{width:84px}
.site-header--overlay .site-header__inner{border-bottom:1px solid rgba(255,255,255,.16)}
.site-header__cta{display:none}
.site-nav{display:none}
.nav-toggle{flex:none;display:inline-flex;align-items:center;gap:8px;
padding:10px 14px;border:1px solid var(--hair);border-radius:var(--radius-sm);
background:none;color:var(--ink);
font-family:var(--sans);font-size:13px;cursor:pointer}
.site-header--overlay .nav-toggle{border-color:rgba(255,255,255,.4);color:#fff}
.nav-toggle__bars{position:relative;display:block;width:16px;height:10px}
.nav-toggle__bars span{position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.nav-toggle__bars span:first-child{top:0}
.nav-toggle__bars span:last-child{bottom:0}
.site-header__panel[data-open="true"]{
display:block;background:var(--surface-raised);
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
padding:16px var(--gutter) 32px;
}
/* :not(.btn) matters: without it this rule also paints the panel's
primary button, which put --ink-muted on --brand at roughly 1.9:1. */
.site-header__panel a:not(.btn){display:block;font-size:16px;font-weight:500;color:var(--ink-muted);text-decoration:none}
.site-header__panel li{border-bottom:1px solid var(--hair)}
.site-header__panel li a{padding:16px 0}
.site-header__panel li a[aria-current="page"]{color:var(--ink)}
.site-header__panel__meta{
display:flex;flex-direction:column;gap:8px;margin-top:24px;
font-family:var(--sans);font-size:15px;
}
.site-header__panel .btn{display:flex;margin-top:24px;width:100%}
}
/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;display:flex;align-items:stretch;min-height:740px;background-color:var(--dark);overflow:hidden}
.hero__media{position:absolute;inset:0;margin:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* scrim is the deepest brand blue, not neutral black — the photo sinks into
the palette instead of into a grey hole. Alphas nudged up to hold the same
text contrast now that the tint is a shade lighter than #12191D. */
.hero__scrim{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(1,44,60,.75) 0%,rgba(1,44,60,.47) 42%,rgba(1,44,60,.84) 100%);
}
.hero__body{
position:relative;z-index:1;display:flex;flex-direction:column;
width:100%;max-width:var(--measure);margin:0 auto;
padding:172px var(--gutter) 40px;
}
.hero__rating{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hero h1{margin-bottom:24px;color:#fff}
.hero__lead{margin-bottom:36px;color:rgba(255,255,255,.86)}
.hero__rating b{font-family:var(--fig);font-size:14px;font-weight:500;color:#fff}
.hero__rating span:last-child{font-size:14px;color:rgba(255,255,255,.82)}
.hero__brands{display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px;margin-top:auto;padding-top:72px}
.hero__brands p{flex:none;font-family:var(--sans);font-size:var(--fs-mono);color:rgba(255,255,255,.6)}
.hero__brands ul{display:flex;flex-wrap:wrap;align-items:center;gap:20px 44px}
.hero__brands img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.8}
@media (max-width:900px){
.hero{min-height:640px}
.hero__body{padding:120px var(--gutter) 32px}
.hero__rating{gap:10px;margin-bottom:20px}
.hero h1{margin-bottom:16px}
.hero__lead{margin-bottom:28px}
.hero__brands{gap:16px 28px;padding-top:56px}
.hero__brands ul{gap:16px 26px}
.hero__brands img{height:20px}
}
/* --- Page header (non-hero pages) ---------------------------------------- */
.page-head{max-width:var(--measure);margin:0 auto;padding:var(--pad-md) var(--gutter) var(--pad-sm)}
.page-head .eyebrow{margin-bottom:16px}
.page-head h1{margin-bottom:24px}
/* --- Stars ---------------------------------------------------------------- */
.stars{display:flex;gap:3px}
.stars svg{width:15px;height:15px;fill:var(--accent)}
.stars svg.is-empty{fill:var(--hair)}
.stars--sm svg{width:14px;height:14px}
/* --- Split (label column + content column) -------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start}
.split--narrow{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:112px}
.split--end{align-items:end}
.split--tight{gap:96px}
@media (max-width:980px){
.split,.split--narrow,.split--tight{grid-template-columns:minmax(0,1fr);gap:32px}
}
/* --- Numbered list (metod / USP teaser) ----------------------------------- */
.rule-list li{
display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
padding:12px 0;border-top:1px solid var(--hair);
}
.rule-list li:last-child{border-bottom:1px solid var(--hair)}
.rule-list .num{font-size:var(--fs-mono);color:var(--blue)}
.reason-list li{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:32px 0;border-top:1px solid var(--hair)}
.reason-list .num{font-size:var(--fs-mono);line-height:1.7;color:var(--ink-faint)}
.reason-list h3{margin-bottom:8px}
@media (max-width:900px){
.reason-list li{gap:16px;padding:24px 0}
.reason-list h3{margin-bottom:6px}
}
/* --- Column grids --------------------------------------------------------- */
.cols{display:grid;gap:32px}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--gap-24{gap:24px}
.cols--gap-16{gap:16px}
@media (max-width:900px){
.cols--4,.cols--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.cols--4,.cols--3,.cols--2{grid-template-columns:minmax(0,1fr);gap:20px}
}
.tile{padding-top:24px;border-top:1px solid var(--hair)}
.tile h3{margin-bottom:8px}
.tile--sm{padding-top:20px}
.tile--sm h3{font-size:19px}
.tile--sm p{font-size:16px}
/* --- Section heading rows ------------------------------------------------- */
.head-row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}
.head-row .eyebrow{margin-bottom:16px}
.head-row h2{margin-bottom:0}
/* --- Process (ordered steps) ---------------------------------------------- */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.process li{padding-top:24px;border-top:1px solid var(--hair)}
.process__num{
display:block;margin-bottom:16px;font-family:var(--fig);
font-size:var(--fs-num-lg);line-height:1;color:var(--hair);font-variant-numeric:tabular-nums;
}
.process h3{margin-bottom:8px}
@media (max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.process{grid-template-columns:minmax(0,1fr);gap:24px}}
/* --- Cards ---------------------------------------------------------------- */
.card{background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--card-pad)}
.card--flat{background:var(--surface);border-style:dashed}
.card--dark{background-color:var(--dark);border-color:transparent;color:var(--dark-fg)}
.card--dark p{color:var(--dark-body);text-wrap:pretty}
.card--plain{padding:32px 24px}
.card__stack{display:flex;flex-direction:column;gap:12px}
/* --- Compare (lönsamhet) -------------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:860px){.compare{grid-template-columns:minmax(0,1fr)}}
.compare article{display:flex;flex-direction:column;gap:24px}
.compare__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.compare__tag{font-family:var(--sans);font-size:var(--fs-mono);white-space:nowrap}
.compare__label{margin-bottom:10px;font-family:var(--sans);font-size:var(--fs-mono);color:var(--ink-faint)}
.compare__figure{font-family:var(--fig);font-size:var(--fs-num-lg);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.meter{height:10px;background:var(--surface-sunken);border-radius:999px;overflow:hidden}
.meter span{display:block;height:100%;border-radius:999px}
.meter+p{margin-top:10px;font-family:var(--fig);font-size:var(--fs-mono-sm);letter-spacing:.04em;color:var(--ink-faint)}
/* --- Swing (startsidans avkastning) --------------------------------------- */
/* Two bars and the difference between them. The bars are the argument: 5 397
next to 15 750 needs no sentence explaining it. The figure below is the same
subtraction the reader can check in their head — 15 750 − 5 397 = 10 353 —
which is the whole reason it is worth showing all three rather than just the
saving. Reuses .meter, so the bar animation and track colour are shared with
the breakdown on lonsamhet.html.
A third row (what the anläggning costs) slots in without touching the CSS,
which is where the price bands go once they exist. */
.swing{display:flex;flex-direction:column;gap:24px}
.swing__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:baseline}
.swing__row .meter{grid-column:1/-1}
.swing__lbl{font-family:var(--sans);font-size:15px;color:var(--ink-muted)}
.swing__fig{font-family:var(--fig);font-size:26px;font-weight:500;line-height:1;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.swing__fig--good{color:var(--brand)}
.swing__sum{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding-top:24px;border-top:1px solid var(--hair)}
.swing__sum-lbl{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink)}
.swing__sum-fig{font-family:var(--fig);font-size:var(--fs-num-lg);font-weight:500;
line-height:1;letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums}
.swing__note{font-size:13px;line-height:1.55;color:var(--ink-faint);text-wrap:pretty}
@media (max-width:600px){
.swing__row{grid-template-columns:minmax(0,1fr)}
.swing__fig{font-size:22px}
}
.kv{margin:0;border-top:1px solid var(--hair)}
.kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.kv dt{font-size:16px;color:var(--ink-muted)}
.kv dd{margin:0;font-family:var(--fig);font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
.savings{
display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 40px;
padding:32px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:40px;
}
.savings__figure{
font-family:var(--fig);font-size:var(--fs-num-xl);font-weight:500;line-height:1;
letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums;
}
.footnote-row{
display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:32px;
margin-top:40px;padding-top:32px;border-top:1px solid var(--hair);
}
/* --- Compact review banner ----------------------------------------------
Replaces the carousel on the start page. Two real quotes, verbatim and
unedited — the shortest two of the eleven, chosen so the band stays one row
rather than trimming somebody's words to fit. The aggregate and the
verification note stay, because the Omnibus rules require saying how reviews
are handled and because publishing the unflattering half is the point. */
.reviewbar{padding:var(--pad-sm) 0;border-top:1px solid var(--hair)}
.reviewbar__inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:start}
.reviewbar__score{display:flex;flex-direction:column;gap:8px;flex:none}
.reviewbar__figure{display:flex;align-items:baseline;gap:10px}
.reviewbar__figure b{font-family:var(--fig);font-size:38px;font-weight:500;
line-height:1;letter-spacing:-.03em;color:var(--brand)}
.reviewbar__figure span{font-size:15px;color:var(--ink-muted)}
.reviewbar__note{max-width:34ch;font-size:13px;line-height:1.55;color:var(--ink-faint);text-wrap:pretty}
.reviewbar__quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.reviewbar__quotes li{display:flex;flex-direction:column;gap:10px}
.reviewbar__quotes p{font-size:17px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.reviewbar__quotes cite{font-family:var(--sans);font-size:14px;font-weight:500;
font-style:normal;color:var(--ink-muted)}
@media (max-width:860px){
.reviewbar__inner{grid-template-columns:minmax(0,1fr);gap:28px}
.reviewbar__quotes{grid-template-columns:minmax(0,1fr);gap:24px}
}
/* --- Reviews carousel ----------------------------------------------------- */
.reviews{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:start;padding-top:32px;border-top:1px solid var(--brand)}
.reviews__viewport{overflow:hidden}
.reviews__track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.reviews__track article{flex:0 0 100%;display:flex;flex-direction:column;gap:24px;padding-right:56px}
.reviews__quote{max-width:42ch;font-size:var(--fs-h2-sm);line-height:1.3;letter-spacing:-.02em;text-wrap:pretty}
.reviews__by{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-muted)}
.reviews__aside{display:flex;flex-direction:column;align-items:flex-end;gap:20px;width:140px}
.reviews__count{font-family:var(--fig);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.reviews__bar{width:140px;height:2px;background:var(--hair)}
.reviews__bar span{display:block;height:100%;background:var(--brand);transition:width .45s ease}
.reviews__nav{display:flex;gap:8px}
.reviews__nav button{
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;flex:none;
border:1px solid var(--hair);border-radius:var(--radius-sm);
background:var(--surface-raised);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
transition:border-color .15s ease;
}
.reviews__nav button:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:900px){
.reviews{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px}
.reviews__track article{gap:14px;padding-right:0}
.reviews__aside{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
.reviews__bar{flex:1;margin:0 16px}
}
/* --- Figure / chart card -------------------------------------------------- */
.figure-card{margin-top:var(--pad-sm);padding:var(--card-pad);background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius)}
.figure-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.figure-card__note{max-width:88ch;margin-top:24px;padding-top:24px;border-top:1px solid var(--hair);font-size:16px;line-height:1.6;color:var(--ink-muted);text-wrap:pretty}
/* --- Checklist (vad du får, dark) ----------------------------------------- */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.checklist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--dark-hair)}
.checklist svg{width:18px;height:18px;flex:none;margin-top:3px}
.checklist h3{margin-bottom:4px;font-size:19px;letter-spacing:-.01em}
.checklist p{font-size:16px;line-height:1.6;color:var(--dark-body);text-wrap:pretty}
@media (max-width:860px){.checklist{grid-template-columns:minmax(0,1fr)}}
/* --- Accordion (USP) ------------------------------------------------------ */
.accordion{border-top:1px solid var(--hair)}
.accordion li{border-bottom:1px solid var(--hair)}
.accordion__trigger{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;
width:100%;padding:24px 0;border:0;background:none;text-align:left;cursor:pointer;
font-family:var(--sans);color:var(--ink);transition:color .15s ease;
}
.accordion__trigger:hover{color:var(--blue)}
.accordion__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em}
.accordion__sign{
font-family:var(--fig);font-size:24px;line-height:1;color:var(--ink-faint);
transition:transform .2s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__sign{transform:rotate(45deg);color:var(--ink)}
.accordion__panel{display:none}
.accordion__panel[data-open="true"]{display:block}
.accordion__panel p{max-width:58ch;padding:0 0 28px 42px;font-size:18px;line-height:1.6;color:var(--ink-muted);text-wrap:pretty}
@media (max-width:640px){
.accordion__trigger{gap:12px;padding:20px 0}
.accordion__panel p{padding:0 0 24px 0;font-size:16px}
}
/* --- Tabs ----------------------------------------------------------------- */
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs--sub{gap:24px}
.tab{
position:relative;padding:0 0 16px;border:0;background:none;cursor:pointer;
font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;
color:var(--ink-faint);white-space:nowrap;transition:color .15s ease;
}
.tab:hover{color:var(--ink-muted)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"]::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}
.tabs--sub .tab{font-size:16px;font-family:var(--sans);font-weight:500}
.tabpanel{display:none}
.tabpanel[data-open="true"]{display:block}
.tabpanels{padding-top:48px}
.tabpanels--sub{padding-top:32px}
@media (max-width:900px){
.tabs{gap:20px}
.tabpanels{padding-top:32px}
}
/* --- Product feature card (image + copy) ---------------------------------- */
.feature{display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.feature__media{min-height:420px;background:var(--surface);border-right:1px solid var(--hair)}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__body{display:flex;flex-direction:column;gap:20px;padding:40px}
.feature__list{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--hair)}
.feature__list ul{display:flex;flex-direction:column;gap:8px;color:var(--ink-muted)}
@media (max-width:860px){
.feature{grid-template-columns:minmax(0,1fr)}
.feature__media{min-height:0;aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--hair)}
.feature__body{padding:24px 20px;gap:16px}
}
.gallery figure{margin:0;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.supplier{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--hair)}
.supplier img{max-height:28px;width:auto;filter:grayscale(1);opacity:.75}
/* Mafi ships a white wordmark. It used to be inverted to sit on the light row,
which painted it literal #000 — the blackest shape on the site. Masked
instead, so the glyph is filled with the brand blue at the same weight as the
greyscaled logos beside it. */
.supplier__mark{
display:block;height:28px;background-color:var(--brand);opacity:.75;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
}
.supplier__mark--mafi{
width:82px;
-webkit-mask-image:url("../assets/img/logo-mafi.png");
mask-image:url("../assets/img/logo-mafi.png");
}
/* JA Solar, AIKO och LONGi levererades också som vita ordmärken, samma fall
som Mafi ovan, så de maskas på samma vis i stället för att inverteras.
Bredden är filens egen proportion vid 28 px höjd: 385/68, 259/68, 181/68. */
/* JA Solars beskärning är bara bokstäver, utan märke eller punkt som sticker
upp, så versalhöjden är hela filhöjden. På radens gemensamma 28 px blev
ordet synligt större än AIKO och LONGi bredvid, som bär ett märke ovanför
texten. Höjden är satt en bit lägre så att BOKSTÄVERNA väger lika, samma
princip som --bh i hero-raden. 385/68 vid 24 px höjd ger 136 px. */
/* Nya filen från Julius, 8 augusti 2026: ordmärket på EN rad i stället för två,
vitt på genomskinlig botten, beskuret till bläckets egen låda (1298x175,
7,417:1). Höjden är därför satt som JA Solars och av samma skäl: beskärningen
är bara bokstäver, utan märke eller punkt som sticker upp, så filhöjden ÄR
versalhöjden och 24 px väger lika mot grannarna. Det gamla värdet, 40 px,
räknades för den tvåradiga logotypen. Bredden är filens proportion:
1298/175 vid 24 px ger 178. */
.supplier__mark--greenhero{
height:24px;width:178px;
-webkit-mask-image:url("../assets/img/logo-greenhero-1298.webp");
mask-image:url("../assets/img/logo-greenhero-1298.webp");
}
.supplier__mark--jasolar{
height:24px;width:136px;
-webkit-mask-image:url("../assets/img/logo-jasolar.webp");
mask-image:url("../assets/img/logo-jasolar.webp");
}
.supplier__mark--aiko{
width:107px;
-webkit-mask-image:url("../assets/img/logo-aiko.webp");
mask-image:url("../assets/img/logo-aiko.webp");
}
/* Växelriktar- och batterimärkena, tillagda 8 augusti 2026 på kommentar 44:
leverantörsraden fanns bara på solpanelsfliken med fem märken, medan
växelriktare och batterier hade ETT märke var som ![]()
. Raden ska säga
samma sak på alla fyra flikarna.
Höjderna är inte satta på känsla. Karusellen i hero bär redan en tuning per
logotyp via --bh, gjord så att varje märkes TEXT läses lika stort, och den
relationen gäller lika mycket i den här raden. Ankaret är JA Solar, som
finns i båda: 17 px i karusellen mot 24 här, alltså faktor 1,41. Varje höjd
nedan är karusellens --bh gånger den faktorn. Bredden är filens egen
proportion vid den höjden; alla sex filerna är 68 px höga. */
.supplier__mark--sigenergy{
height:24px;width:199px;
-webkit-mask-image:url("../assets/img/logo-sigenergy-mark.webp");
mask-image:url("../assets/img/logo-sigenergy-mark.webp");
}
.supplier__mark--growatt{
height:24px;width:143px;
-webkit-mask-image:url("../assets/img/logo-growatt-mark.webp");
mask-image:url("../assets/img/logo-growatt-mark.webp");
}
.supplier__mark--solis{
height:31px;width:85px;
-webkit-mask-image:url("../assets/img/logo-solis-mark.webp");
mask-image:url("../assets/img/logo-solis-mark.webp");
}
.supplier__mark--huawei{
height:25px;width:111px;
-webkit-mask-image:url("../assets/img/logo-huawei-mark.webp");
mask-image:url("../assets/img/logo-huawei-mark.webp");
}
.supplier__mark--sungrow{
height:21px;width:171px;
-webkit-mask-image:url("../assets/img/logo-sungrow-mark.webp");
mask-image:url("../assets/img/logo-sungrow-mark.webp");
}
.supplier__mark--byd{
height:37px;width:61px;
-webkit-mask-image:url("../assets/img/logo-byd-mark.webp");
mask-image:url("../assets/img/logo-byd-mark.webp");
}
/* Nordmount är också ett vitt märke, 456/68 vid 28 px höjd ger 188 px. */
.supplier__mark--nordmount{
width:188px;
-webkit-mask-image:url("../assets/img/logo-nordmount-mark.webp");
mask-image:url("../assets/img/logo-nordmount-mark.webp");
}
.supplier__mark--longi{
width:75px;
-webkit-mask-image:url("../assets/img/logo-longi.webp");
mask-image:url("../assets/img/logo-longi.webp");
}
/* Trina levererar ett vitt ordmärke med en RÖD PUNKT över i:et, på genomskinlig
botten. Punkten behöver inte avmättas: masken använder bara alfakanalen, så
både bokstäverna och punkten målas i samma --ink-muted som grannarna. Det är
hela skälet till att raden maskar vita märken i stället för att invertera dem
— se noten vid .supplier__mark.
1036/243 vid 28 px höjd ger 119 px. */
.supplier__mark--trina{
width:119px;
-webkit-mask-image:url("../assets/img/logo-trina.webp");
mask-image:url("../assets/img/logo-trina.webp");
}
/* --- Frequency panel ------------------------------------------------------ */
.freq{background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--card-pad)}
.freq__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.freq__head h3{font-family:var(--sans);font-size:var(--fs-mono);font-weight:400;color:var(--ink-muted)}
.freq__badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;
border:1px solid var(--hair);border-radius:999px;
font-family:var(--sans);font-size:var(--fs-mono);
color:var(--ink-muted);white-space:nowrap}
.freq__badge span:first-child{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);flex:none}
.freq__value{display:flex;align-items:baseline;gap:8px;margin-bottom:32px}
.freq__value b{font-family:var(--fig);font-size:var(--fs-num-xl);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.freq__value span{font-family:var(--fig);font-size:var(--fs-lead);color:var(--ink-muted)}
.freq__scale{position:relative;height:1px;background:var(--hair);margin-bottom:16px}
.freq__scale span:first-child{position:absolute;left:50%;top:-5px;width:1px;height:11px;background:var(--ink-faint)}
.freq__scale span:last-child{position:absolute;left:56%;top:-4px;width:2px;height:9px;background:var(--blue);transform:translateX(-1px)}
.freq__ticks{display:flex;justify-content:space-between;font-family:var(--fig);font-size:var(--fs-mono);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.freq__foot{margin-top:24px;padding-top:24px;border-top:1px solid var(--hair);font-size:14px;line-height:1.55;color:var(--ink-muted)}
.freq__foot span{display:block;margin-top:8px;font-family:var(--fig);font-size:var(--fs-mono);color:var(--ink-faint)}
/* --- Video facade --------------------------------------------------------- */
.video-card{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.video-card__frame{position:relative;aspect-ratio:16/9;background:var(--dark);border-bottom:1px solid var(--hair);overflow:hidden}
.video-card__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.video-card__play img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);opacity:.9;transition:opacity .2s ease}
.video-card__play:hover img{opacity:1}
.video-card__play span{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video-card__play svg{width:54px;height:54px}
.video-card__body{display:flex;flex-direction:column;gap:12px;padding:24px}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
@media (max-width:640px){.video-card__body{padding:20px}}
/* --- Case cards ----------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:32px}
.filters>span{font-family:var(--sans);font-size:var(--fs-mono);color:var(--ink-faint);margin-right:4px}
.filter{
padding:8px 16px;border:1px solid var(--hair);border-radius:999px;background:var(--surface-raised);
font-family:var(--fig);font-size:var(--fs-mono);letter-spacing:.04em;color:var(--ink-muted);
cursor:pointer;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.filter:hover{border-color:var(--brand-300);color:var(--brand)}
.filter[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.case-list{display:flex;flex-direction:column;gap:32px}
.case{background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.case[hidden]{display:none}
.case__top{display:grid;grid-template-columns:1fr 1fr}
.case__media{aspect-ratio:4/3;background:var(--surface);border-right:1px solid var(--hair)}
.case__media img{width:100%;height:100%;object-fit:cover}
.case__intro{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px}
.case__meta{font-family:var(--sans);font-size:var(--fs-mono);color:var(--ink-muted)}
.case__intro h3{font-size:var(--fs-h2-sm)}
.case__specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:32px;border-top:1px solid var(--hair);background:var(--surface)}
.spec{padding-top:20px;border-top:1px solid var(--hair)}
.spec h4{margin-bottom:8px;font-family:var(--sans);font-size:var(--fs-mono);font-weight:400;color:var(--ink-faint)}
.spec__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0}
.spec__row span:first-child{font-size:14px;color:var(--ink-muted)}
.spec__row span:last-child{font-family:var(--fig);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.spec__row--total{margin-top:4px;border-top:1px solid var(--hair)}
.spec__row--total span:first-child{color:var(--ink);font-weight:600}
.spec__row--total span:last-child{font-weight:500}
@media (max-width:1080px){.case__specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
.case__top{grid-template-columns:minmax(0,1fr)}
.case__media{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--hair)}
.case__intro{padding:20px;gap:10px}
.case__specs{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px}
.spec{padding-top:16px}
.spec__row{padding:6px 0}
.spec__row span{font-size:13px}
}
/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--surface-raised);border-top:1px solid var(--hair);padding:var(--pad-md) 0 32px}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-footer__logo{display:block;line-height:0}
.site-footer__logo img{width:168px;height:auto;margin-bottom:16px}
.site-footer p.site-footer__blurb{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-muted)}
.site-footer h2{margin:0 0 16px;font-family:var(--sans);font-size:var(--fs-mono);font-weight:400;color:var(--ink-muted)}
.site-footer ul{display:flex;flex-direction:column;gap:8px}
.site-footer ul a{font-size:14px;color:var(--ink-muted);text-decoration:none}
.site-footer ul a:hover{color:var(--ink)}
.site-footer__legal{
display:flex;flex-wrap:wrap;gap:8px 24px;margin:var(--pad-md) 0 0;padding-top:24px;
border-top:1px solid var(--hair);font-family:var(--fig);font-size:var(--fs-mono);color:var(--ink-muted);
}
@media (max-width:860px){
.site-footer__grid{grid-template-columns:minmax(0,1fr);gap:40px}
.site-footer__logo img{width:148px}
.site-footer nav ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.site-footer__legal{margin-top:48px}
}
/* --- Misc ----------------------------------------------------------------- */
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:100;
padding:12px 20px;background:var(--accent);color:var(--ink);
font-family:var(--fig);font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0}
/* --- Contact cards -------------------------------------------------------- */
.contact-card{padding:var(--card-pad);background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);display:flex;flex-direction:column;gap:12px}
.contact-card h3{font-family:var(--sans);font-size:var(--fs-mono);font-weight:400;color:var(--ink-muted)}
.contact-card a,.contact-card p{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;text-decoration:none;line-height:1.25}
.contact-card small{font-family:var(--fig);font-size:var(--fs-mono);color:var(--ink-faint);font-weight:400;letter-spacing:.02em}
/* --- Map embed ------------------------------------------------------------ */
.map-embed{border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--surface-raised)}
.map-embed iframe{width:100%;height:680px;border:0;display:block}
@media (max-width:760px){.map-embed iframe{height:940px}}
/* --- County grid ---------------------------------------------------------- */
.lan{padding-top:24px;border-top:1px solid var(--hair)}
.lan h3{margin-bottom:4px}
.lan__count{margin-bottom:16px;font-family:var(--sans);font-size:var(--fs-mono);color:var(--ink-faint)}
.lan ul{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.lan li{padding:7px 0;border-bottom:1px solid var(--hair);font-size:16px;color:var(--ink-muted)}
@media (max-width:640px){.lan ul{grid-template-columns:1fr}}
/* --- House size cards ----------------------------------------------------- */
.houses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.house{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.house__media{aspect-ratio:4/3;background:var(--surface);border-bottom:1px solid var(--hair);display:grid;place-items:center}
.house__media img{width:100%;height:100%;object-fit:contain}
.house__body{display:flex;flex-direction:column;gap:8px;padding:24px}
/* ==========================================================================
Galleri — a justified photo wall that configures itself
The number of photos per slide varies and is not known when this is written,
so nothing here counts children or targets a slide. Each figure declares its
own aspect ratio in --ar and the row maths falls out of that:
flex-basis ∝ --ar → within a row, widths land in proportion to aspect
aspect-ratio: --ar → so every figure in that row resolves to one height
Rows therefore justify edge to edge whatever mix of portrait and landscape
arrives. js/site.js fills in --ar from the file's own dimensions, so adding
a photo is adding an ![]()
and nothing else.
========================================================================== */
.gal{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.gal__item{
--ar:1.5; /* replaced per photo — this is only the fallback */
flex:var(--ar) 1 calc(var(--ar) * 210px);
/* A short last row would otherwise stretch one photo across the full width.
Capping the width caps the row height instead, so a leftover sits at a
sane size and simply leaves space to its right. 320 is tuned so a lone
leftover lands at roughly the height of a full row rather than looming
20% larger than the photos above it. */
max-width:calc(var(--ar) * 320px);
aspect-ratio:var(--ar);
min-width:min(160px,100%);
margin:0;position:relative;overflow:hidden;
border:1px solid var(--hair);border-radius:var(--radius);
background-color:var(--surface);
cursor:zoom-in;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.gal__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.gal__item img{display:block;width:100%;height:100%;object-fit:cover}
/* ==========================================================================
Photo rasterisation — why these two lines exist
The solar-panel grid shimmered at rest but looked clean for the instant a
card was mid-hover-transform. That is the tell: mid-transform the photo sits
on its own compositor layer and is filtered smoothly (mip/trilinear); the
moment the transition settles the layer is dropped and the image returns to
the main raster path, which filters a fractional downscale poorly. A regular
grid of panel cells is the worst possible input for that — the sampling beats
against the cell pitch and you get moire.
Promoting the image to its own layer keeps it on the smooth path permanently.
Only photographs are listed: doing this to text containers softens type, and
doing it to every image would waste layer memory for no gain. Layers only
cost while a slide is open — hidden panels are display:none.
========================================================================== */
.gal__item img,
.install__media img,
.artcard .shot img,
.shot > img,
.hero__media img{
transform:translateZ(0);
backface-visibility:hidden;
}
.gal__item figcaption{
position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;
background-image:linear-gradient(transparent,rgba(6,32,42,.72));
color:#fff;font-family:var(--fig);font-size:var(--fs-mono-sm);
letter-spacing:.03em;opacity:0;transition:opacity .25s ease;
}
.gal__item:hover figcaption,.gal__item:focus-visible figcaption{opacity:1}
/* Dots instead of named tabs. The houses have no names, and inventing labels
for a slideshow is how a gallery ends up lying about which house is which —
so position is the only thing the control claims. Still a real tablist, so
initTabs() drives it and arrow keys work; the aria-label carries the "3 av
11" that a sighted user reads off the dots themselves. */
.slidenav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px}
.slidenav__arrow{
display:grid;place-items:center;flex:none;width:42px;height:42px;
border:1px solid var(--hair);border-radius:50%;background-color:var(--surface-raised);
color:var(--brand);font:17px/1 system-ui;cursor:pointer;
transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.slidenav__arrow:hover:not(:disabled){border-color:var(--brand);background-color:var(--brand-25)}
.slidenav__arrow:disabled{opacity:.32;cursor:default}
.slidenav__arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.dot{
width:10px;height:10px;padding:0;border:0;border-radius:50%;
background-color:var(--hair);cursor:pointer;
transition:background-color .2s ease,transform .2s var(--ease-out);
}
.dot:hover{background-color:var(--ink-faint)}
.dot[aria-selected="true"]{background-color:var(--brand);transform:scale(1.4)}
.dot:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.dot{transition:none}}
/* The panels sit straight under the page head now that no tab row precedes
them, so they do not need the tab row's clearance. */
.tabpanels--flush{padding-top:0}
/* Slides differ in height by a whole row of photos, so swapping one for another
used to snap everything below it in a single frame. site.js transitions the
wrapper's height across the swap; this clips the taller slide while it is
mid-collapse. The height is inline and temporary — at rest the wrapper is
auto, so a late-loading photo or a window resize is never fighting a fixed
pixel value. */
.tabpanels--flush.is-resizing{overflow:hidden}
/* The incoming slide's own fade would stack on top of the height transition and
read as two separate movements. Under a height animation it only needs to
appear. */
.tabpanels--flush.is-resizing .tabpanel[data-open="true"]{animation:none}
/* aspect-ratio carries the row maths (Chrome 88, Safari 15, Firefox 89 — early
2021). Anything older loses the figure's height completely and the wall
collapses, so fall back to fixed-height rows: not justified, but tidy. */
@supports not (aspect-ratio: 1 / 1) {
.gal__item{height:230px;flex:1 1 300px;max-width:none}
.gal__item img{height:100%}
}
.gal-empty{
width:100%;padding:44px 20px;text-align:center;color:var(--ink-faint);
border:1px dashed var(--hair);border-radius:var(--radius);text-wrap:pretty;
}
/* --- lightbox ------------------------------------------------------------- */
.lightbox{
position:fixed;inset:0;z-index:200;display:none;
place-items:center;padding:clamp(12px,3vw,40px);
background-color:rgba(6,26,34,.92);
}
.lightbox[data-open="true"]{display:grid}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;
border-radius:var(--radius);display:block}
.lightbox__bar{
position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;
align-items:center;justify-content:center;gap:10px 18px;
padding:18px 20px;color:rgba(255,255,255,.82);
font-family:var(--fig);font-size:var(--fs-mono-sm);letter-spacing:.04em;
}
.lightbox button{
border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
border-radius:999px;width:42px;height:42px;font:18px/1 system-ui;cursor:pointer;
transition:background-color .2s ease,border-color .2s ease;
}
.lightbox button:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lightbox__close{position:absolute;top:16px;right:16px}
@media (prefers-reduced-motion:reduce){
.gal__item{transition:none}
.gal__item:hover{transform:none}
}
/* ==========================================================================
Artiklar — search + bento browse
The bento is deliberately uneven: one feature card two rows tall beside two
half-height ones, so a three-item list does not read as a stalled 3-col grid
waiting for a fourth. Cards are , so the whole tile is the hit area.
Search is progressive — with no JS the field is hidden and every card shows.
========================================================================== */
.searchbar{display:grid;gap:10px;max-width:52ch}
.searchbar__field{position:relative;display:flex;align-items:center}
.searchbar__field svg{position:absolute;left:15px;width:17px;height:17px;
color:var(--ink-faint);pointer-events:none}
.searchbar input{
width:100%;padding:13px 15px 13px 42px;
border:1px solid var(--hair);border-radius:999px;
background-color:var(--surface-raised);
font-family:var(--sans);font-size:16px;color:var(--ink);
transition:border-color .2s ease,box-shadow .2s ease;
}
.searchbar input:focus{outline:none;border-color:var(--blue);
box-shadow:0 0 0 3px rgba(3,125,170,.16)}
.searchbar__count{font-family:var(--fig);font-size:var(--fs-mono-sm);
letter-spacing:.04em;color:var(--ink-faint)}
html:not(.js) .searchbar{display:none}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-rows:minmax(0,auto);gap:24px}
.bento__item{display:flex}
.bento__item--feature{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento__item--feature{grid-column:span 2;grid-row:auto}
}
@media (max-width:600px){
.bento{grid-template-columns:minmax(0,1fr)}
.bento__item--feature{grid-column:span 1}
}
.bento__item[hidden]{display:none}
.artcard{
display:flex;flex-direction:column;width:100%;
background-color:var(--surface-raised);border:1px solid var(--hair);
border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease-out);
}
.artcard:hover{border-color:var(--ink-faint);transform:translateY(-2px);
box-shadow:var(--shadow-md)}
.artcard .shot{border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none}
.artcard__body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.artcard__meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
font-family:var(--fig);font-size:var(--fs-mono-sm);letter-spacing:.04em;
color:var(--ink-faint)}
.artcard__title{font-size:21px;line-height:1.25;letter-spacing:-.015em;
text-wrap:pretty}
.bento__item--feature .artcard__title{font-size:var(--fs-h2-sm)}
.artcard__excerpt{font-size:16px;line-height:1.6;color:var(--ink-muted);
text-wrap:pretty}
/* The byline is what stops the grid reading as anonymous content marketing —
these are written by a person at the company, so the person is on the card. */
.artcard__foot{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;
align-items:center;justify-content:space-between;gap:8px 14px}
.artcard__by{display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:500;color:var(--ink-muted)}
/* Monogram underneath, photo laid over it — the same pattern as the team grid,
so a byline without a headshot still looks deliberate rather than broken. */
.artcard__avatar,.byline__avatar{
position:relative;overflow:hidden;
display:grid;place-items:center;flex:none;border-radius:50%;
background-color:var(--brand-50);color:var(--brand);
font-family:var(--fig);font-weight:500;letter-spacing:.04em;user-select:none;
}
.artcard__avatar img,.byline__avatar img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center top;
}
.artcard__avatar{width:26px;height:26px;font-size:10px}
.byline__avatar{width:34px;height:34px;font-size:11px;
box-shadow:inset 0 0 0 1px var(--brand-100)}
.artcard__more{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--brand)}
.artcard:hover .artcard__more{text-decoration:underline}
.search-empty{padding:40px 0;border-top:1px solid var(--hair);
color:var(--ink-muted);text-wrap:pretty}
/* ==========================================================================
Artikel — the reading page
One column, measured in ch like the rest of the site. Nothing here is a new
colour or a new ground; an article is a page-head plus prose.
========================================================================== */
/* SAMMA MÅTT SOM TEXTEN, inte hela containern. Omslaget låg på 1124 px medan
brödtexten och diagrammet under den ligger på 68ch, alltså 694. Bilden var
därmed 62 % bredare än allt annat i artikeln och tog över uppslaget; det var
den Julius kallade för stor.
Noten som stod här sa att artikeln ska öppna med sin bild och inte möta den
halvvägs ned. Det gör den fortfarande — den ligger först och är fortfarande
artikelns största objekt. Den delar bara spalt med texten nu, så artikeln har
EN vänsterkant i stället för två. */
.article__cover{max-width:68ch;margin:0 0 var(--pad-sm)}
.article__cover img{display:block;width:100%;height:auto;
border:1px solid var(--hair);border-radius:var(--radius)}
.article__cover figcaption{margin-top:12px;font-family:var(--fig);
font-size:var(--fs-mono-sm);letter-spacing:.03em;color:var(--ink-faint);
text-wrap:pretty}
.article{max-width:68ch}
.article > * + *{margin-top:24px}
.article h2{margin-top:48px;font-size:var(--fs-h2-sm);line-height:1.2;
letter-spacing:-.02em}
.article h3{margin-top:36px;font-size:21px;letter-spacing:-.015em}
.article p{font-size:18px;line-height:1.7;color:var(--ink-muted);
text-wrap:pretty}
.article p b,.article p strong{color:var(--ink);font-weight:600}
.article ul{display:grid;gap:12px;padding-left:22px}
.article li{font-size:18px;line-height:1.65;color:var(--ink-muted);
text-wrap:pretty}
.article .shot{margin-top:36px}
.article figcaption{margin-top:10px;font-family:var(--fig);
font-size:var(--fs-mono-sm);letter-spacing:.03em;color:var(--ink-faint);
text-wrap:pretty}
.pull{margin:40px 0;padding:28px 32px;border-left:2px solid var(--accent);
background-color:var(--brand-25);border-radius:0 var(--radius) var(--radius) 0}
.pull p{font-size:21px;line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.pull cite{display:block;margin-top:14px;font-family:var(--fig);
font-size:var(--fs-mono-sm);font-style:normal;letter-spacing:.04em;
color:var(--ink-faint)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
margin-top:28px;padding-top:20px;border-top:1px solid var(--hair);
font-family:var(--fig);font-size:var(--fs-mono-sm);letter-spacing:.04em;
color:var(--ink-faint)}
.byline b{font-family:var(--sans);font-size:15px;font-weight:600;
letter-spacing:0;color:var(--ink)}
/* ==========================================================================
Forms
There was no