/* ============================================================
Ampy Hero 1 | KLASSBASERAD. Ersatter helt den ID-baserade versionen.
Matchad mot prototyp "B". Full responsiv.
VARFOR :not(#_) — Bricks skriver ut elementinstallningar som
ID-regler (#brxe-xxxx, specificitet 1,0,0). En ren klass ar 0,1,0
och forlorar. :not(#_) matchar allt, andrar inget, och lyfter
regeln till 1,1,0 sa den vinner. Ingen !important behovs.
Flyttar du installningarna in i de globala klasserna i Bricks kan
:not(#_) tas bort overallt.
VARFOR KLASSER — Bricks-komponenter renderar hashade klasser, inte
id:n, och id:n regenereras nar en sektion klistras in pa nytt. Bada
dodar ID-baserad CSS. Klasserna overlever bada.
============================================================ */
/* FRAME: slöja, inramning, vertikal centrering */
.home-hero__floating-banner:not(#_){
justify-content:center; align-items:stretch; gap:0;
padding:0 clamp(24px,5vw,84px);
border-radius:22px;
background-position:62% 60%;
}
.home-hero__floating-banner:not(#_)::before{
content:""; position:absolute; inset:0; z-index:0;
pointer-events:none; border-radius:inherit;
background:
linear-gradient(98deg, rgba(9,11,50,.68) 0%, rgba(9,11,50,.46) 42%, rgba(9,11,50,.12) 66%, rgba(9,11,50,.02) 100%),
linear-gradient(0deg, rgba(9,11,50,.38) 0%, rgba(9,11,50,0) 26%);
}
/* CONTENT stack */
.home-hero__block:not(#_){ position:relative; z-index:1; max-width:880px; gap:18px; padding:0; }
/* H1 */
.home-hero__heading:not(#_){
font-size:clamp(36px,4.6vw,60px); line-height:1.07; font-weight:700;
letter-spacing:-.018em; color:#fff; text-wrap:balance;
}
/* Subtext */
.home-hero__text:not(#_), .home-hero__text:not(#_) p{
font-size:clamp(17px,1.55vw,22px); line-height:1.58; font-weight:400;
color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(9,11,50,.35); max-width:none;
}
/* CTA */
.home-hero__cta:not(#_){
align-self:flex-start; gap:16px; min-height:58px; padding:11px 26px;
border-radius:16px; margin-top:14px; color:hsl(237 35% 24%);
font-size:16px; font-weight:500; line-height:1;
box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(9,11,50,.10), 0 14px 32px -8px rgba(9,11,50,.40);
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.home-hero__cta:not(#_):hover{
transform:translateY(-1.5px); filter:saturate(1.06) brightness(1.02);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 6px rgba(9,11,50,.12), 0 18px 38px -8px rgba(9,11,50,.46);
}
.home-hero__cta:not(#_):active{ transform:translateY(0); }
.home-hero__cta:not(#_) svg{ transition:transform .16s ease; }
.home-hero__cta:not(#_):hover svg{ transform:scale(1.18); }
/* PROOF row, nere till hoger */
.home-hero__trust:not(#_){
z-index:1; top:auto; left:auto;
right:clamp(24px,3vw,44px); bottom:clamp(20px,3vh,32px);
gap:14px; align-items:center; color:#fff; font-size:14.5px;
text-shadow:0 1px 8px rgba(9,11,50,.45);
}
.home-hero__rating-text:not(#_){ font-size:14.5px; color:#fff; font-weight:400; }
.home-hero__volume-proof:not(#_){ font-size:14.5px; color:#fff; text-align:left; }
.home-hero__rating-text:not(#_) strong,
.home-hero__volume-proof:not(#_) strong{ font-weight:700; }
/* avdelare fore volymtexten (inget separatorelement finns i bygget) */
.home-hero__volume-proof:not(#_)::before{
content:""; display:inline-block; width:1px; height:15px;
margin-right:14px; background:rgba(255,255,255,.45); vertical-align:-3px;
}
/* stjarnbehallare + de fem stjarnorna (nu egna klasser, ingen svg-descendant) */
.home-hero__rating-stars:not(#_){
display:inline-flex; align-items:center; gap:2.5px;
flex:0 0 auto; width:auto; min-width:0; height:auto; background:none;
}
.home-hero__rating-star:not(#_){ width:14px; height:14px; flex:0 0 auto; fill:#fff; }
.home-hero__rating-star:not(#_) path{ fill:#fff; }
/* Google "G": hug 16px-ikonen sa den inte blaser upp raden */
.home-hero__trust:not(#_) .bricks-link-wrapper{
display:inline-flex; align-items:center; line-height:1;
height:16px; min-height:0; max-height:16px; flex:0 0 auto;
}
.home-hero__google-icon:not(#_){ width:16px; height:16px; flex:0 0 auto; }
/* horn stramas at pa sma skarmar */
@media (max-width:992px){
.home-hero__floating-banner:not(#_){ border-radius:18px; }
}
/* tablet / liten landscape 561 till 992 */
@media (min-width:561px) and (max-width:992px){
.home-hero__block:not(#_){ max-width:640px; }
.home-hero__floating-banner:not(#_){ padding:0 clamp(30px,6vw,60px); }
.home-hero__heading:not(#_){ font-size:clamp(38px,6.2vw,50px); }
.home-hero__text:not(#_), .home-hero__text:not(#_) p{ font-size:clamp(16px,2.3vw,19px); }
.home-hero__trust:not(#_){ right:24px; bottom:20px; }
}
/* stor tablet / liten desktop 993 till 1200 */
@media (min-width:993px) and (max-width:1200px){
.home-hero__block:not(#_){ max-width:720px; }
.home-hero__heading:not(#_){ font-size:clamp(38px,4.4vw,46px); }
}
/* telefon, max 560: slöjan tyngre nedtill, proof staplas nere till vanster */
@media (max-width:560px){
.home-hero__floating-banner:not(#_){ padding:0 24px 7vh; background-position:66% 62%; }
.home-hero__floating-banner:not(#_)::before{
background:
linear-gradient(180deg, rgba(9,11,50,.30) 0%, rgba(9,11,50,.24) 30%, rgba(9,11,50,.28) 62%, rgba(9,11,50,.64) 100%),
linear-gradient(98deg, rgba(9,11,50,.28) 0%, rgba(9,11,50,.05) 60%);
}
.home-hero__block:not(#_){ max-width:none; gap:14px; }
.home-hero__heading:not(#_){ font-size:36px; }
.home-hero__text:not(#_), .home-hero__text:not(#_) p{ font-size:15.5px; line-height:1.55; }
.home-hero__cta:not(#_){ min-height:52px; padding:9px 22px; gap:12px; font-size:15px; margin-top:12px; }
/* proof: nere till vanster, betygsrad overst, volym radbryts under */
.home-hero__trust:not(#_){
left:24px; right:auto; bottom:20px; flex-wrap:wrap;
gap:9px; font-size:13.5px; max-width:calc(100% - 48px);
}
.home-hero__rating-text:not(#_){ font-size:13.5px; }
.home-hero__rating-star:not(#_){ width:13.5px; height:13.5px; }
.home-hero__volume-proof:not(#_){ flex-basis:100%; font-size:13.5px; opacity:.92; }
.home-hero__volume-proof:not(#_)::before{
display:block; width:26px; height:1px; margin:0 0 9px; background:rgba(255,255,255,.38);
}
}
/* ============================================================
PARITY PASS 2026-07-26 — append, keep last in this file.
Verifierat mot prototyp B vid 1879px och 360px (iPhone 12 mini).
============================================================ */
/* Textkolumnen: prototypen ar 712px (880 container minus 2x84 padding),
inte 880. Detta ensamt fixar radbrytningen i brodtexten. */
.home-hero__block:not(#_){ max-width:712px; }
@media (min-width:993px) and (max-width:1200px){
.home-hero__block:not(#_){ max-width:712px; } /* var 720 = bredare an bas */
}
/* H1-brytningen. Prototypen loser den med en hard efter "hemmet,".
Vi vill inte ha HTML i ett redigerbart faalt, och utan br vill de tva
vyerna ha OLIKA varden:
desktop (712px): wrap -> "Elinstallationer i hemmet," / "gjort ordentligt."
mobil (255px): balance -> "Elinstallationer" / "i hemmet," / "gjort ordentligt."
Balance ar basvardet i regeln ovan, sa mobilen behover ingen egen rad:
det racker att den har overstyrningen bara galler over 560px.
Uppmatt: byter man varden rakt av gar den andra vyn sonder. */
@media (min-width:561px){
.home-hero__heading:not(#_){ text-wrap:wrap; }
}
/* Mobil: Bricks lagger 16px marginal over OCH under textelementet ovanpa
flex-gap 14px. Det trycker upp hela stacken 16px mot prototypen.
Matning: h1 y 159 -> 175, CTA y 419 -> 403. Prototyp: 175 / 402. */
@media (max-width:560px){
.home-hero__text:not(#_){ margin-top:0; margin-bottom:0; }
}
/* "Over 3 000 installationer per ar" doldes pa mobil av en oskopad regel i
kontaktformularets Code-element ([data-mf="vol"]{display:none !important}).
Den ar nu skopad dar. Detta ar balte-och-hangslen om formularets CSS
skulle rullas tillbaka.
OBS: bara <=560. I bandet 561-768 anvander hero fortfarande sin inline-
variant med lodrat streck, sa display:block dar skulle bryta raden. */
@media (max-width:560px){
.home-hero__volume-proof:not(#_){
display:block !important;
font-size:13.5px !important;
line-height:1 !important;
}
}
/* Mini-menyn under hero: 40px var for tight. Ett steg upp pa skalan. */
.home-hero > .brxe-container:not(.home-hero__floating-banner):not(#_){
padding-top:var(--apspace-2xl);
}
/* ------------------------------------------------------------
HOJD. Ersatter Bricks-faltet _heightMin: 85vh pa Floating banner
(Layout > Min height) — ta bort det faltet i Bricks.
Prototypens .vb2__frame:
height:calc(100svh - var(--header-h,7.6rem) - 48px);
min-height:620px; max-height:950px;
@media (max-width:992px){ ...6.6rem... - 26px; min-height:520px }
--header-h finns inte pa ampy.se, sa fallbacken skrivs ut direkt:
7.6rem = 76px (barens hojd efter parity-fixen), 6.6rem = 66px (mobilbaren,
satt i header-CSS:en). Root font-size ar 10px pa bada, sa rem gar 1:1.
svh, inte vh: vh raknar med adressfaltet utfallt pa mobil, vilket ger en
hero som hoppar nar faltet fars in. Prototypen anvander svh av samma skal.
Matning: 950px vid 1879x1134 och 520px vid 360x612 — identiskt med
prototypen, och 85vh gav 1021px respektive 520px.
------------------------------------------------------------ */
.home-hero__floating-banner:not(#_){
height:calc(100svh - 7.6rem - 48px);
min-height:620px;
max-height:950px;
}
@media (max-width:992px){
.home-hero__floating-banner:not(#_){
height:calc(100svh - 6.6rem - 26px);
min-height:520px;
/* max-height:950px arvs fran basregeln, precis som i prototypen */
}
}
/* ------------------------------------------------------------
MOBIL: sektionens sidopadding och h1-bredden.
Prototypens sektion har 10px sidopadding, inte 8.3 (--apspace-2xs).
Det ger banner 340 istallet for 344, och innehallet x=34 istallet for 32.
255px-taket pa h1: med balance (se regeln ovan) bryts raden ratt forst
nar boxen ar smalare an "Elinstallationer i" (259px) men bredare an
"Elinstallationer" (244.1px). Balance ensamt vid 292px ger fel rad 1.
OBS: 255px ar avstamt mot exakt denna rubriktext. Andras copyn maste
vardet raknas om — det ar den enda regeln i filen som inte sjalvlaker.
------------------------------------------------------------ */
@media (max-width:560px){
.home-hero:not(#_){
padding-left:10px !important;
padding-right:10px !important;
}
.home-hero__heading:not(#_){ max-width:255px; }
}
/* ============================================================================
Ampy, "Din elektriker för hela hemmet" (homepage block 2)
Lives in the Bricks Code element's CSS pane (cssCode), bound to ACF dynamic
tags for the title/lead. Sits inside a Bricks Section.
VERSION CHECK: if .ampy-elfirma__wrap has ANY max-width or padding on it,
this file is an OLD copy. Current version is `.ampy-elfirma__wrap{width:100%;}`
and nothing more.
OWNERSHIP RULE (the thing that kept breaking):
The Bricks Section owns ALL outer layout: content max-width, horizontal
padding, and top/bottom spacing. This file owns ONLY the internal rhythm:
the title to lead gap, the header to cards gap, and the gaps between cards.
Never add padding or max-width to .ampy-elfirma or .ampy-elfirma__wrap, or it
stacks on top of the Section's and the block insets twice.
Other notes:
- Everything scoped under .ampy-elfirma, so zero leakage into the theme.
- Units are px (WordPress does NOT use the 62.5% rem base the prototype used).
- Responsive via @container, so the block adapts to its column, not just the
viewport (with a @media fallback for browsers without container queries).
- TYPOGRAPHY IS INHERITED FROM BRICKS ON PURPOSE: Bricks already serves
Plus Jakarta Sans for headings and Outfit for body. This block sets NO
font-family anywhere, so the title picks up Plus Jakarta and the body copy
picks up Outfit via the normal cascade. Do not pin font-family here or you
override Bricks' heading font.
- Photos are set per card as a CSS var (--photo) in the HTML; if a photo is
missing or blocked, the per-card aurora gradient shows, so no broken image.
- width:100% + align-self:stretch are REQUIRED: container-type:inline-size
applies inline-size containment, so the root's width must not depend on its
contents. Inside Bricks' flex .brxe-section a non-stretched auto-width child
would collapse to ~0 and break every title character onto its own line.
- The lead wrapper is a
, NOT a
: the ACF field runs through wpautop,
which wraps the text in its own
. A
cannot legally contain a
, so
the browser hoists the inner one out and dumps the text into a bare, uncapped
(the "one long line" bug). A
holds the wpautop
legally, so the
width cap at the END of this file actually sticks.
============================================================================ */
.ampy-elfirma{
container-type:inline-size; /* @container reference */
width:100%; /* definite inline size (see note) */
align-self:stretch; /* survive any flex parent alignment */
--ap-navy:#090b32; --ap-teal:#00a991;
--ap-blue:#5eb1bf; --ap-blue-bright:#74c2ce; /* owner-picked sky-blue CTA */
--ap-offwhite:#f5f9ff; --ap-white:#ffffff;
--ink:#0f123c; --ink-muted:#565e82; --ap-black:#1e1e1e;
--shadow-card:0 16px 40px -12px rgba(9,11,50,.28),0 4px 10px -4px rgba(9,11,50,.18);
--shadow-card-h:0 30px 60px -14px rgba(9,11,50,.38),0 10px 20px -6px rgba(9,11,50,.22);
--shadow-blue:0 10px 24px -6px rgba(94,177,191,.55);
--ring:0 0 0 3px rgba(0,169,145,.9);
--ease:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
display:block;
color:var(--ink);line-height:1.6;
font-feature-settings:"kern" 1,"liga" 1;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
/* no padding, no margin, no max-width: the Bricks Section owns outer spacing */
}
.ampy-elfirma *,.ampy-elfirma *::before,.ampy-elfirma *::after{box-sizing:border-box;}
.ampy-elfirma a{color:inherit;text-decoration:none;}
.ampy-elfirma img,.ampy-elfirma svg{display:block;max-width:100%;}
.ampy-elfirma ::selection{background:rgba(0,169,145,.22);}
/* full-width pass-through. Do NOT add max-width or padding here, see header. */
.ampy-elfirma__wrap{width:100%;}
/* centred header, font-family inherited from Bricks (Plus Jakarta / Outfit) */
.ampy-elfirma__head{max-width:960px;margin-inline:auto;text-align:center;}
.ampy-elfirma__title{max-width:600px;margin:0 auto;
font-size:clamp(28px,23px + 1.1vw,38px);font-weight:500;line-height:1.2;
letter-spacing:-.01em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word;}
.ampy-elfirma__lead{margin:24px auto 0;max-width:600px;
font-size:clamp(17px,16.2px + .25vw,18.5px);font-weight:300;line-height:1.5;
color:var(--ink-muted);text-wrap:pretty;}
/* neutralise any inline element the theme or plugins inject into the lead
(auto-linked keywords etc.) so no word renders in the site link teal */
.ampy-elfirma .ampy-elfirma__lead *{color:inherit;text-decoration:none;}
/* three equal square cards, 30px gutters. margin-top is the header to cards gap. */
.ampy-elfirma__grid{margin-top:clamp(48px,30px + 2vw,64px);
display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.ampy-elfirma__card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
border-radius:20px;background:var(--ap-navy);box-shadow:var(--shadow-card);
-webkit-tap-highlight-color:transparent;
transition:transform 280ms var(--ease),box-shadow 280ms var(--ease);}
/* aspect-ratio fallback for very old browsers (iOS < 15) */
.ampy-elfirma__card::before{content:"";display:block;padding-top:100%;}
@supports (aspect-ratio:1/1){ .ampy-elfirma__card::before{display:none;} }
.ampy-elfirma__card:hover,.ampy-elfirma__card:focus-visible{
transform:translateY(-4px);box-shadow:var(--shadow-card-h);outline:0;}
.ampy-elfirma__card:focus-visible{box-shadow:var(--ring),var(--shadow-card-h);}
/* photo layer (from --photo) over a per-card aurora fallback (--fallback) */
.ampy-elfirma__media{position:absolute;inset:0;z-index:0;
background-position:center;background-size:cover;background-repeat:no-repeat;
background-image:var(--photo,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),var(--fallback);
transform:scale(1);transition:transform 640ms var(--ease-out);}
.ampy-elfirma__card:hover .ampy-elfirma__media,
.ampy-elfirma__card:focus-visible .ampy-elfirma__media{transform:scale(1.08);will-change:transform;}
.ampy-elfirma__card.is-elservice{--fallback:radial-gradient(600px 440px at 78% 16%,rgba(0,169,145,.5),transparent 60%),linear-gradient(180deg,#0d1350,#06082a);}
.ampy-elfirma__card.is-laddbox{--fallback:radial-gradient(560px 420px at 74% 84%,rgba(57,194,129,.46),transparent 60%),linear-gradient(180deg,#0d1145,#06082a);}
.ampy-elfirma__card.is-batteri{--fallback:radial-gradient(540px 420px at 20% 20%,rgba(0,169,145,.44),transparent 60%),linear-gradient(180deg,#0b0e38,#05061f);}
/* overall legibility overlay; deepens on hover */
.ampy-elfirma__overlay{position:absolute;inset:0;z-index:1;
background:radial-gradient(125% 105% at 50% 50%,rgba(9,11,50,.30),rgba(9,11,50,.56));
transition:background 420ms var(--ease);}
.ampy-elfirma__card:hover .ampy-elfirma__overlay,
.ampy-elfirma__card:focus-visible .ampy-elfirma__overlay{
background:radial-gradient(125% 105% at 50% 50%,rgba(9,11,50,.34),rgba(9,11,50,.62));}
/* centred content. The soft centre scrim guarantees the white title stays
AA-legible over ANY photo, while the card edges keep the photo vivid. */
.ampy-elfirma__body{position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
text-align:center;padding:24px;color:var(--ap-white);
background:radial-gradient(ellipse 82% 56% at 50% 50%,rgba(9,11,50,.60) 0%,rgba(9,11,50,.30) 52%,transparent 78%);}
.ampy-elfirma__cardtitle{font-size:clamp(20px,15px + 1.1vw,30px);font-weight:700;line-height:1.05;
letter-spacing:-.022em;color:var(--ap-white);overflow-wrap:break-word;hyphens:auto;
text-shadow:0 1px 24px rgba(0,0,0,.4);transition:transform 220ms var(--ease-out);}
.ampy-elfirma__card:hover .ampy-elfirma__cardtitle,
.ampy-elfirma__card:focus-visible .ampy-elfirma__cardtitle{transform:translateY(-2px);}
/* CTA pill, sky-blue with black text */
.ampy-elfirma__cta{display:inline-flex;align-items:center;gap:8px;
padding:15px 32px;border-radius:999px;
background:var(--ap-blue);color:var(--ap-black);
font-size:clamp(14px,13px + .3vw,16px);font-weight:700;letter-spacing:.01em;
box-shadow:var(--shadow-blue);
transition:background 200ms var(--ease),transform 200ms var(--ease-out),box-shadow 200ms var(--ease);}
.ampy-elfirma__cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out);}
.ampy-elfirma__card:hover .ampy-elfirma__cta,
.ampy-elfirma__card:focus-visible .ampy-elfirma__cta{
background:var(--ap-blue-bright);transform:translateY(-2px);
box-shadow:0 14px 30px -6px rgba(94,177,191,.6);}
.ampy-elfirma__card:hover .ampy-elfirma__cta svg,
.ampy-elfirma__card:focus-visible .ampy-elfirma__cta svg{transform:translateX(3px);}
/* quiet load stagger */
@keyframes ampy-elfirma-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.ampy-elfirma .rise{animation:ampy-elfirma-rise 520ms var(--ease-out) both;}
.ampy-elfirma .d1{animation-delay:.05s;} .ampy-elfirma .d2{animation-delay:.12s;}
.ampy-elfirma .d3{animation-delay:.20s;} .ampy-elfirma .d4{animation-delay:.28s;} .ampy-elfirma .d5{animation-delay:.36s;}
/* ---- responsive: container-based (adapts to the block's column) ---- */
@container (max-width:767px){
.ampy-elfirma__grid{grid-template-columns:1fr;gap:24px;max-width:440px;margin-inline:auto;}
.ampy-elfirma__cta{padding:14px 28px;}
}
/* fallback for browsers without container queries (older Safari) */
@supports not (container-type:inline-size){
@media (max-width:767px){
.ampy-elfirma__grid{grid-template-columns:1fr;gap:24px;max-width:440px;margin-inline:auto;}
.ampy-elfirma__cta{padding:14px 28px;}
}
}
@media (prefers-reduced-motion:reduce){
.ampy-elfirma *,.ampy-elfirma *::before,.ampy-elfirma *::after{animation:none !important;transition:none !important;}
}
@media (forced-colors:active){ .ampy-elfirma__card:focus-visible{outline:2px solid;outline-offset:2px;} }
/* print: browsers drop backgrounds, so fall back to a plain legible list */
@media print{
.ampy-elfirma__grid{grid-template-columns:1fr;gap:10px;}
.ampy-elfirma__card{aspect-ratio:auto;background:#fff;box-shadow:none;border:1px solid #ccc;}
.ampy-elfirma__card::before{display:none;}
.ampy-elfirma__media,.ampy-elfirma__overlay{display:none;}
.ampy-elfirma__body{position:static;background:none;color:#000;align-items:flex-start;padding:12px;}
.ampy-elfirma__cardtitle{color:#000;text-shadow:none;}
.ampy-elfirma__cta{color:#000;background:none;box-shadow:none;padding:4px 0;}
}
/* ============================================================================
LEAD WIDTH LOCK, keep LAST in this file.
The lead wrapper is a
(see header note). The wpautop
lives inside it.
============================================================================ */
.ampy-elfirma .ampy-elfirma__head .ampy-elfirma__lead{
max-width:600px !important;
width:auto !important;
margin:24px auto 0 !important;
}
/* the wpautop