/* HB Designsystem — ikoner och komponenter enligt byggspec 4a. Allt under .hb-*. Inga globala selektorer, ingen reset. Färgerna hämtas från Elementors globala variabler med hex som reserv. */ :root{ --hb-natt:var(--e-global-color-hb_natt,#160C20); --hb-plommon:var(--e-global-color-hb_plommon,#2A1636); --hb-accent:var(--e-global-color-hb_accent,#F44973); --hb-glod:var(--e-global-color-hb_glod,#E854B1); --hb-tint:var(--e-global-color-hb_rosa_tint,#FFC9E4); /* All brödtext på sajten ska ha samma färg. Den bor i Elementors globala "Brödtext"-färg (Text), så den går att ändra på ett ställe i gränssnittet. Den gamla grå tonen #4A4A4A gjorde korten ljusare än löptexten bredvid. */ --hb-brod:var(--e-global-color-text,#0A0A0A); --hb-etikett:var(--e-global-color-hb_etikett,#8C8C8C); --hb-linje:var(--e-global-color-hb_linje,#E4E8E7); --hb-papper:var(--e-global-color-hb_papper,#FFFFFF); } /* En Elementor-behållare som centrerar sina barn (align-items:center) krymper en widget till innehållets bredd. Våra sektioner har ingen egen bredd — de är fullbredd — så de kollapsade till noll och sidan blev vit. Sektionerna tar alltid hela bredden, oavsett hur behållaren är inställd. */ .hbo,.hbs{width:100%} .elementor-widget-shortcode:has(.hbo), .elementor-widget-shortcode:has(.hbs){width:100%;align-self:stretch} /* Samma sak för banden när de är byggda som Elementor-behållare: står behållaren på align-items:center krymper varje barn till sin innehållsbredd, och ett band utan egen bredd blir en tom remsa. Banden sträcker alltid ut sina barn — bredden begränsas av max-width nedan, inte av flexlayouten. */ .hb-band.e-con,.hb-band > .e-con{--align-items:stretch;align-items:stretch} .hb-band > .e-con,.hb-band > .elementor-widget{width:100%} /* ===================== karusell utan javascript ===================== */ /* Logoraden är en Elementor-karusell som byggs av Swiper i webbläsaren. Kör inte skriptet — annonsblockerare, långsam uppkoppling, ett fel tidigare på sidan — ligger slidesen kvar som en ostylad hög på varandra. Reglerna nedan gäller bara så länge Swiper INTE hunnit initiera, och gör att raden åtminstone ser ut som en rad under tiden. */ .elementor-image-carousel-wrapper:not(.swiper-initialized){overflow:hidden} .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-wrapper{ display:flex;align-items:center;gap:40px;flex-wrap:nowrap} .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide{ flex:0 0 auto;max-width:180px} .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide img{ max-height:70px;width:auto;object-fit:contain} /* ============================ ikoner ============================ */ .hb-ikon{display:inline-block;flex:none;line-height:0;color:var(--hb-natt);width:52px;height:52px} .hb-ikon svg{display:block;width:100%;height:100%} .hb-ikon--s{width:40px;height:40px} .hb-ikon--m{width:52px;height:52px} .hb-ikon--l{width:64px;height:64px} .hb-ikon--xl{width:76px;height:76px} /* på mörkt band ärver mono-varianten vitt */ .hb-band--mork .hb-ikon,.hb-band--plommon .hb-ikon,.hb-mork .hb-ikon{color:var(--hb-papper)} @media (max-width:599px){ .hb-ikon--xl{width:60px;height:60px} .hb-ikon--l{width:56px;height:56px} } /* animerad: strecken ritas i tur och ordning när ikonen kommer in i bild */ .hb-ikon--anim .p{stroke-dasharray:1;stroke-dashoffset:1; animation:hb-rita .5s cubic-bezier(.65,0,.35,1) forwards} .hb-ikon--anim .a{animation-duration:.38s} .hb-ikon--anim .blob{transform-origin:36.5% 38.5%;transform:scale(.6);opacity:0; animation:hb-klick .42s cubic-bezier(.34,1.3,.64,1) forwards} @keyframes hb-rita{to{stroke-dashoffset:0}} @keyframes hb-klick{to{transform:scale(1);opacity:1}} /* utan klassen står ikonen färdigritad — den blir aldrig osynlig */ .hb-ikon--anim:not(.is-synlig) .p{animation:none;stroke-dashoffset:0} .hb-ikon--anim:not(.is-synlig) .blob{animation:none;transform:none;opacity:1} /* ============================ band ============================ */ .hb-band{padding:80px 40px} .hb-band--ljus{background:var(--hb-papper);border-top:1px solid var(--hb-linje)} .hb-band--mork{background:var(--hb-natt)} .hb-band--plommon{background:var(--hb-plommon)} .hb-band > *{max-width:1140px;margin-inline:auto} .hb-band--mork,.hb-band--plommon{color:var(--hb-papper)} /* ==================== etikett och rubrik ==================== */ /* Temat kör Barlow på rubriker och Hind på brödtext. Elementors typsnittsvariabel pekar på Hind för båda och saknar reservkedja, så den går inte att använda här — rubrikerna hämtar sitt typsnitt ur den egna token nedan i stället. Ändras temats rubriktypsnitt är det den raden som gäller. */ /* Endast Barlow 600 laddas lokalt. Rubriker satta i 700 fick en syntetisk fetstil som webbläsaren räknade fram ur 600-filen — den ser smetig ut och var en del av "fel typsnitt". Allt ligger på 600, samma vikt som temats egna rubriker. Vill vi ha 700 måste den vikten laddas först. */ :root{--hb-rubrikfont:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} .hb-etikett{display:block; font-family:var(--hb-rubrikfont); font-size:var(--e-global-typography-hb_etikett-font-size,11px); font-weight:var(--e-global-typography-hb_etikett-font-weight,600); letter-spacing:var(--e-global-typography-hb_etikett-letter-spacing,.16em); line-height:1;text-transform:uppercase;color:var(--hb-etikett);margin:0 0 14px} .hb-rubrik{margin:0; font-family:var(--hb-rubrikfont); font-size:var(--e-global-typography-hb_sektion-font-size,32px); font-weight:600; letter-spacing:var(--e-global-typography-hb_sektion-letter-spacing,-.028em); line-height:var(--e-global-typography-hb_sektion-line-height,1.14em); color:var(--hb-natt)} .hb-band--mork .hb-rubrik,.hb-band--plommon .hb-rubrik{color:var(--hb-papper)} /* Elementor skriver inte ut egna klasser på behållare i den här installationen — bara på widgetar. Ett band som byggts som behållare kan därför inte färga sin text via bandklassen; widgeten får den här i stället. */ /* Widget som ligger kvar i mallen men inte ska visas — t.ex. formuläret som ersattes av hjälpguiden. Kvar för att kunna tas fram igen. */ .hb-dold-widget{display:none !important} .hb-pa-mork,.hb-pa-mork *{color:var(--hb-papper)} .hb-pa-mork-svag,.hb-pa-mork-svag *{color:rgba(255,255,255,.78)} .hb-ingress{margin:18px 0 0;max-width:52ch;color:var(--hb-brod); font-size:var(--e-global-typography-hb_brod-font-size,17px); line-height:var(--e-global-typography-hb_brod-line-height,1.5em)} .hb-band--mork .hb-ingress,.hb-band--plommon .hb-ingress{color:rgba(255,255,255,.78)} /* ============================ knappar ============================ */ .hb-knapp{display:inline-block;font:inherit;cursor:pointer;text-decoration:none; font-size:var(--e-global-typography-hb_knapp-font-size,14.4px); font-weight:var(--e-global-typography-hb_knapp-font-weight,600); line-height:1;padding:13px 24px;border-radius:999px; border:1px solid transparent;background:var(--hb-accent);color:#fff; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease} .hb-knapp--sek{background:transparent;color:var(--hb-natt);border-color:var(--hb-linje)} .hb-band--mork .hb-knapp--sek,.hb-band--plommon .hb-knapp--sek{color:#fff;border-color:rgba(255,255,255,.38)} /* ============================ länk ============================ */ .hb-lank{display:inline-flex;align-items:center;gap:6px;text-decoration:none; font-size:15px;font-weight:600;color:var(--hb-accent); border-bottom:1px solid rgba(244,73,115,.35);padding-bottom:3px; transition:color .2s ease,border-color .2s ease} /* ======================== rutnätskort ======================== */ /* Rutnätets linjer ritas av korten själva, inte av behållarens bakgrund. En ofylld sista rad blev annars en grå tomrektangel. */ .hb-rutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--hb-papper);border:1px solid var(--hb-linje); border-radius:8px;overflow:hidden;margin-top:34px} .hb-rutnat > .hb-kort{box-shadow:0 0 0 1px var(--hb-linje)} .hb-rutnat--2{grid-template-columns:repeat(2,1fr)} .hb-rutnat--6{grid-template-columns:repeat(6,1fr)} .hb-kort{background:var(--hb-papper);padding:26px;display:flex;flex-direction:column} .hb-kort-rubrik{margin:16px 0 0;color:var(--hb-natt);font-family:var(--hb-rubrikfont); font-size:var(--e-global-typography-hb_kort_l-font-size,20px); font-weight:600;letter-spacing:-.02em;line-height:1.18} .hb-kort--liten .hb-kort-rubrik{font-size:var(--e-global-typography-hb_kort_s-font-size,17px);line-height:1.2} .hb-kort-text{margin:8px 0 0;color:var(--hb-brod);font-size:16px;line-height:1.5} .hb-kort-text:last-child{margin-bottom:0} .hb-kort .hb-lank{margin-top:auto;padding-top:15px;align-self:flex-start} @media (max-width:1219px){ .hb-rutnat--6{grid-template-columns:repeat(3,1fr)} } @media (max-width:899px){ .hb-rutnat{grid-template-columns:repeat(2,1fr)} } @media (max-width:599px){ .hb-rutnat,.hb-rutnat--2,.hb-rutnat--6{grid-template-columns:1fr} .hb-band{padding:56px 24px} .hb-knapp{padding:15px 24px} } /* ==================== statistik och citat ==================== */ .hb-siffra{display:block;color:var(--hb-papper); font-size:var(--e-global-typography-hb_statistik-font-size,54px); font-weight:600;letter-spacing:-.03em;line-height:1} .hb-citat{margin:0;color:var(--hb-natt);font-size:17px;line-height:1.5} /* Ett namn är en person, inte en etikett — versaler sparas till menyn och till riktiga etiketter (ETIKETT, NAMN på fält, kategorirader). */ .hb-citat-namn{margin-top:auto;padding-top:18px;color:var(--hb-brod); font-size:15px;font-weight:600;letter-spacing:0;text-transform:none} /* ==================== formulär mot mörk fond ==================== */ .hb-formkort{background:var(--hb-natt);border-radius:8px;padding:26px; box-shadow:0 30px 60px -28px rgba(12,6,20,.55)} .hb-faltstack{display:grid;gap:1px;background:rgba(255,255,255,.1); border-radius:8px;overflow:hidden;margin-bottom:20px} .hb-falt{background:var(--hb-plommon);padding:14px 16px;border:0; font:inherit;font-size:16px;line-height:1.4;color:#fff} .hb-falt::placeholder{color:var(--hb-etikett)} /* Elementors formulärwidget klädd i systemets fältstack: fälten sitter i samma 1 px-rutnät som korten, fast med genomskinlig vit linje. */ .hb-formkort .elementor-form-fields-wrapper{gap:0 !important} .hb-formkort .elementor-field-group{padding:0 !important;margin:0 0 1px !important;width:100% !important} .hb-formkort .elementor-field-group > label{position:absolute !important;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hb-formkort .elementor-field-textual{background:var(--hb-plommon) !important; border:0 !important;border-radius:0 !important;padding:14px 16px !important; font-size:16px !important;line-height:1.4 !important;color:#fff !important; min-height:0 !important;box-shadow:none !important} .hb-formkort .elementor-field-textual::placeholder{color:var(--hb-etikett) !important;opacity:1} .hb-formkort textarea.elementor-field-textual{min-height:120px !important} .hb-formkort .elementor-field-type-submit{margin-top:20px !important} .hb-formkort .elementor-button{background:var(--hb-accent) !important;color:#fff !important; border-radius:999px !important;padding:13px 24px !important; font-size:var(--e-global-typography-hb_knapp-font-size,14.4px) !important; font-weight:600 !important;border:0 !important} .hb-formkort .elementor-message{color:#fff} @media (hover:hover) and (pointer:fine){ /* Hover går i accentfärgens mörkare ton. Glöden är dekor i gradienter, inte en andra knappfärg. */ .hb-formkort .elementor-button:hover{ background:#CD3E64 !important; background:color-mix(in srgb,var(--hb-accent) 82%,var(--hb-natt)) !important} } /* ============================ fokus ============================ */ .hb-band :focus-visible,.hb-knapp:focus-visible,.hb-lank:focus-visible{ outline:2px solid var(--hb-accent);outline-offset:2px} .hb-band--mork :focus-visible,.hb-band--plommon :focus-visible{outline-color:#fff} /* ===================== hovring, bara med mus ===================== */ @media (hover:hover) and (pointer:fine){ /* Temat sätter a:hover{color:#E854B1} globalt — exakt samma rosa som knappens gamla hover-bakgrund. Resultatet var att etiketten försvann helt: rosa text på rosa platta. Knappen mörknar nu i stället för att lysa upp, och färgen skrivs ut uttryckligen så temats regel inte kan vinna. */ .hb-knapp:hover,.hb-knapp:focus,.hb-knapp:focus-visible{ background:#CD3E64; background:color-mix(in srgb,var(--hb-accent) 82%,var(--hb-natt)); border-color:transparent;color:#fff;transform:translateY(-1px)} .hb-knapp--sek:hover{background:transparent;transform:none;border-color:var(--hb-etikett)} .hb-band--mork .hb-knapp--sek:hover,.hb-band--plommon .hb-knapp--sek:hover{border-color:#fff} .hb-lank:hover{color:var(--hb-accent);border-color:var(--hb-accent)} a.hb-kort-rubrik:hover{color:var(--hb-accent)} } @media (prefers-reduced-motion:reduce){ .hb-ikon--anim .p,.hb-ikon--anim .blob{animation:none;stroke-dashoffset:0;transform:none;opacity:1} .hb-knapp{transition:none} } /* ==================== bevisbandet ==================== */ .hb-bevis-tal{display:grid;grid-template-columns:repeat(2,1fr);gap:40px; padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16)} .hb-bevis-etikett{display:block;margin-top:10px;color:rgba(255,255,255,.62); font-size:15px;line-height:1.4} /* Logotyperna i ett jämnt rutnät i stället för en radbrytande flexrad — de har olika proportioner och lade sig annars i en ojämn trappa. Höjden måste sättas med !important: Elementors egen img-regel ligger efter den här. */ /* ============ ikonkort: Elementors Icon Box med våra ikoner ============ Elementor bäddar in uppladdade SVG:er inline och behåller klasserna, så samma streckritning fungerar här som i kortkoden. Ikonen står färdigritad och ritas om vid hover — ingen JS behövs, till skillnad från varianten som startar när den kommer in i bild. */ @keyframes hb-rita-om{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes hb-klick-om{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}} .hb-ikonkort .elementor-icon-box-wrapper{display:flex;flex-direction:column; align-items:flex-start;text-align:left;gap:0} .hb-ikonkort .elementor-icon-box-icon{margin:0 0 14px} .hb-ikonkort .elementor-icon{color:var(--hb-natt);font-size:0} .hb-ikonkort .elementor-icon svg{display:block;width:52px;height:52px; transition:transform .35s cubic-bezier(.34,1.1,.64,1)} .hb-ikonkort .elementor-icon .p{stroke-dasharray:1;stroke-dashoffset:0} .hb-ikonkort .elementor-icon-box-title{margin:0} .hb-ikonkort .elementor-icon-box-title, .hb-ikonkort .elementor-icon-box-title a{color:var(--hb-natt); font-family:var(--hb-rubrikfont); font-size:var(--e-global-typography-hb_kort_s-font-size,17px); font-weight:600;letter-spacing:-.02em;line-height:1.2} .hb-ikonkort .elementor-icon-box-description{margin:8px 0 0;color:var(--hb-brod); font-size:16px;line-height:1.5} /* hela kortet är hovrytan, inte bara ikonen */ .hb-kort:hover .hb-ikonkort .elementor-icon svg, .hb-ikonkort:hover .elementor-icon svg{transform:translateY(-4px)} .hb-kort:hover .hb-ikonkort .elementor-icon .p, .hb-ikonkort:hover .elementor-icon .p{animation:hb-rita-om .55s cubic-bezier(.65,0,.35,1) forwards} .hb-kort:hover .hb-ikonkort .elementor-icon .a, .hb-ikonkort:hover .elementor-icon .a{animation-duration:.42s} .hb-kort:hover .hb-ikonkort .elementor-icon .blob, .hb-ikonkort:hover .elementor-icon .blob{transform-origin:36.5% 38.5%; animation:hb-klick-om .48s cubic-bezier(.34,1.3,.64,1) forwards} @media (prefers-reduced-motion:reduce){ .hb-ikonkort .elementor-icon svg, .hb-ikonkort:hover .elementor-icon svg{transition:none;transform:none} .hb-ikonkort:hover .elementor-icon .p, .hb-ikonkort:hover .elementor-icon .blob{animation:none} } /* Manifestbandet på startsidan: ett stycke som ska läsas långsamt. Större än brödtext, smalare än bandet, och sista raden bär. */ .hb-manifest{max-width:760px;margin-inline:auto} .hb-manifest p{margin:0 0 22px;color:var(--hb-natt);font-size:22px;line-height:1.55} .hb-manifest p:last-child{margin-bottom:0} .hb-manifest strong{font-weight:600} @media (max-width:599px){ .hb-manifest p{font-size:18px} } /* Vägvalen på kontaktsidan: tre korta rader, inte tre stycken prosa. */ .hb-kontakt-vagval{margin-top:34px;padding-top:26px;border-top:1px solid var(--hb-linje)} .hb-kontakt-vagval p{margin:0 0 16px;color:var(--hb-brod);font-size:16px;line-height:1.6} .hb-kontakt-vagval p:last-child{margin-bottom:0} .hb-kontakt-vagval strong{color:var(--hb-natt);font-family:var(--hb-rubrikfont);font-weight:600} /* Elementors omdömeswidget i citatbandet: samma form som resten av korten. */ .hb-omdome .elementor-testimonial-content{margin:0;color:var(--hb-natt); font-size:17px;line-height:1.5} .hb-omdome .elementor-testimonial-meta{margin-top:18px;padding:0} .hb-omdome .elementor-testimonial-meta-inner{justify-content:flex-start} .hb-omdome .elementor-testimonial-name{color:var(--hb-brod);font-size:15px; font-weight:600;letter-spacing:0;text-transform:none; font-family:var(--hb-rubrikfont)} .hb-omdome .elementor-testimonial-job{margin-top:4px;color:var(--hb-etikett); font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7} /* Elementors räknare i bevisbandet. Widgeten skriver rubriken före siffran; vår ordning är tvärtom, så etiketten flyttas ned med flexordning i stället för att bygga om markupen. */ .hb-raknare .elementor-counter{display:flex;flex-direction:column} .hb-raknare .elementor-counter-number-wrapper{order:1; color:var(--hb-papper);font-size:var(--e-global-typography-hb_statistik-font-size,54px); font-weight:600;letter-spacing:-.03em;line-height:1; font-family:var(--hb-rubrikfont)} .hb-raknare .elementor-counter-title{order:2;margin-top:10px; color:rgba(255,255,255,.62);font-size:15px;line-height:1.4;text-align:left} /* Logotyperna som egna bildwidgetar på startsidan — samma behandling som i kortkodens rad, men placerade i Elementors rutnät. */ /* Logotyperna visades förut som vita silhuetter (brightness(0) invert(1)). Det plattade ut allt: SISU:s emblem blev en klump, Sigtunas och Hörbys vapen blev formlösa sköldar. Kundernas märken ska synas som de är — och kommunvapen får man inte färglägga om hur som helst. Därför ligger de på en ljus platta i stället, så originalfärgerna håller mot det mörka bandet. */ .hb-logo img,.hb-logor img{ height:28px !important;width:auto !important;max-width:150px; object-fit:contain;display:block} .hb-logor{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:38px} .hb-logo,.hb-logor img{ background:#fff;border-radius:10px;padding:12px 16px; box-sizing:content-box;opacity:.92; transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease} .hb-logor img:hover,.hb-logo:hover{ opacity:1;transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.28)} /* På ljust band behövs ingen platta. */ .hb-band--ljus .hb-logor img{background:transparent;padding:0;box-shadow:none} @media (max-width:599px){ .hb-bevis-tal{grid-template-columns:1fr;gap:26px} .hb-logor{gap:24px 32px} .hb-logor img{height:22px!important} } /* ===================== Notion-formuläret ===================== Plugget elementor-to-notion skriver egen markup (.notion-form), inte Elementors. Våra formulärregler träffade bara Elementors klasser, så formuläret stod ostylat: vita fält och svart knapp mitt på ett mörkt band. Här får det samma språk som resten. Allt är scopat under .notion-form. */ /* Widgeten skriver ut en tom

som varken syns eller säger något, men räknas som en rubrik i dokumentstrukturen. */ .notion-form-widget > h2:empty{display:none} .notion-form{display:grid;gap:16px;max-width:560px} .notion-form .form-field{display:grid;gap:6px} .notion-form label{ font-family:var(--e-global-typography-hb_etikett-font-family,inherit); font-size:12px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--hb-etikett)} .notion-form .notion-input, .notion-form input[type=text], .notion-form input[type=email], .notion-form input[type=tel], .notion-form textarea{ width:100%;box-sizing:border-box;font:inherit;font-size:16px; padding:13px 16px;border-radius:12px; border:1px solid var(--hb-linje);background:var(--hb-papper); color:var(--hb-brod);transition:border-color .2s ease,box-shadow .2s ease} .notion-form textarea{min-height:132px;resize:vertical} .notion-form .notion-input:focus, .notion-form textarea:focus{ outline:none;border-color:var(--hb-accent); box-shadow:0 0 0 3px rgba(244,73,115,.22)} /* På mörkt band vänder fälten. */ .hb-band--mork .notion-form label, .hb-band--plommon .notion-form label{color:rgba(255,255,255,.72)} .hb-band--mork .notion-form .notion-input, .hb-band--mork .notion-form textarea, .hb-band--plommon .notion-form .notion-input, .hb-band--plommon .notion-form textarea{ background:#1E1626;border-color:rgba(255,255,255,.18);color:#fff} .hb-band--mork .notion-form ::placeholder, .hb-band--plommon .notion-form ::placeholder{color:#6B6280} /* Knappen ska se ut som sajtens övriga knappar. */ /* Pluginets egen stilmall sätter width:100% på knappen. */ .notion-form .notion-submit{ display:inline-flex;align-items:center;gap:9px;justify-self:start; width:auto;max-width:100%; font:inherit;font-size:var(--e-global-typography-hb_knapp-font-size,14.4px); font-weight:600;line-height:1;cursor:pointer; padding:14px 26px;border-radius:999px;border:1px solid transparent; background:var(--hb-accent);color:#fff; transition:background .2s ease,transform .2s ease} .notion-form .notion-submit:hover, .notion-form .notion-submit:focus{ background:#CD3E64; background:color-mix(in srgb,var(--hb-accent) 82%,var(--hb-natt)); color:#fff;transform:translateY(-1px)} /* Knappens ikon skrevs som Font Awesome 6 ("fa-solid"), men sajten laddar Font Awesome 5 där klassen heter "fas". Tecknet fanns alltså aldrig och renderades som en tom ruta. Vi ritar pappersplanet själva i stället, så det inte beror på vilket ikonbibliotek som råkar vara laddat. Bara pappersplanet ritas om: när formuläret skickas byter skriptet ut ikonen mot en spinner och sedan en bock, och de ska få vara sig själva. */ .notion-form .notion-submit i.fa-paper-plane{ width:16px;height:16px;font-size:0;flex:0 0 auto; background:currentColor; -webkit-mask:var(--hb-plan) center/contain no-repeat; mask:var(--hb-plan) center/contain no-repeat} :root{--hb-plan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2.2 11.1 20.6 3.2c.6-.3 1.2.3.9.9l-7.9 18.4c-.3.6-1.1.6-1.3 0l-2.6-6.6a.7.7 0 0 0-.4-.4l-6.6-2.6c-.6-.2-.6-1.1 0-1.3Z'/%3E%3C/svg%3E")} /* Svarsmeddelandet efter skickat formulär. */ .notion-form-widget .notion-message, .notion-form-widget .success-message, .notion-form-widget .error-message{ margin-top:14px;padding:12px 16px;border-radius:12px;font-size:15px} /* ===================== kundomdömen ===================== Antalet kolumner är låst per brytpunkt i stället för auto-fit, så att raderna alltid går jämnt ut: en kolumn i mobil, två på surfplatta, tre på desktop. Fyra omdömen skrivs ut — det fjärde döljs där rutnätet är tre brett, annars hade det stått ensamt på en egen rad. */ .hb-omdomen{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:768px){ .hb-omdomen{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ .hb-omdomen{grid-template-columns:repeat(3,1fr)} .hb-omdomen .hb-omdome:nth-child(n+4){display:none} } .hb-omdome{margin:0;background:var(--hb-papper);border-radius:16px;padding:26px 26px 22px; display:flex;flex-direction:column;gap:16px} .hb-omdome blockquote{margin:0;font-size:16px;line-height:1.65;color:var(--hb-brod)} .hb-omdome blockquote::before{content:"”";display:block;font-family:Barlow,serif; font-size:40px;line-height:.6;color:var(--hb-accent);margin-bottom:10px} .hb-omdome figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto} .hb-omdome-namn{font-weight:600;font-size:15px;color:var(--hb-brod)} .hb-omdome-kalla{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--hb-etikett)} @media (max-width:599px){ .hb-omdome{padding:22px} } /* ===================== mobilmenyn ===================== Astras panel var helsvart med centrerade versaler och utan luft mellan raderna. Den låg utanför sajtens formspråk och var dessutom svår att träffa med tummen. Allt här är scopat under Astras egen panelklass, så inget av det påverkar sidan i övrigt. */ .ast-mobile-popup-drawer .ast-mobile-popup-inner{ background:var(--hb-natt); background:linear-gradient(180deg,var(--hb-plommon) 0%,var(--hb-natt) 62%); box-shadow:none} /* Vänsterställt läser sig bättre än centrerat i en lång lista. */ .ast-mobile-popup-drawer.content-align-center .ast-mobile-popup-content, .ast-mobile-popup-drawer .ast-mobile-popup-content{text-align:left} .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-popup-drawer .ast-nav-menu{padding:8px 0 28px} /* Astra sätter egen svart bakgrund, versaler och centrering på .menu-link via kundanpassad CSS — därför måste de skrivas över uttryckligen. */ .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-popup-drawer .ast-nav-menu, .ast-mobile-popup-drawer .menu-item > a, .ast-mobile-popup-drawer .menu-link{background:transparent !important} .ast-mobile-popup-drawer .menu-item > a, .ast-mobile-popup-drawer .menu-link{ display:flex !important;align-items:center;justify-content:flex-start; padding:15px 26px !important; font-family:Barlow,var(--e-global-typography-hb_rubrik-font-family,sans-serif); font-size:17px !important;font-weight:600; letter-spacing:.01em !important;text-transform:none !important; text-align:left !important;color:#fff !important;border-radius:0; transition:background .18s ease,color .18s ease} /* Tunna avdelare i stället för ett kompakt block. */ .ast-mobile-popup-drawer .ast-nav-menu > .menu-item + .menu-item{ border-top:1px solid rgba(255,255,255,.09)} .ast-mobile-popup-drawer .menu-item > a:hover, .ast-mobile-popup-drawer .menu-item > a:focus, .ast-mobile-popup-drawer .menu-link:hover{ background:rgba(255,255,255,.07) !important;color:#fff !important} /* Sidan man står på ska synas. */ .ast-mobile-popup-drawer .current-menu-item > a, .ast-mobile-popup-drawer .current_page_item > a, .ast-mobile-popup-drawer .current-menu-ancestor > a{ color:var(--hb-tint) !important; box-shadow:inset 3px 0 0 var(--hb-accent)} /* Undermenyer: indragna, mindre och lugnare. */ .ast-mobile-popup-drawer .sub-menu{ background:rgba(0,0,0,.24) !important;padding:4px 0} .ast-mobile-popup-drawer .sub-menu .menu-item > a, .ast-mobile-popup-drawer .sub-menu .menu-link{ padding:12px 26px 12px 42px !important; font-size:15px !important;font-weight:500; color:rgba(255,255,255,.82) !important} .ast-mobile-popup-drawer .sub-menu > .menu-item + .menu-item{border-top:0} /* Pilen som fäller ut undermenyn — större träffyta, tydligare tillstånd. */ .ast-mobile-popup-drawer .ast-menu-toggle{ color:rgba(255,255,255,.75) !important; padding:0 22px !important; transition:transform .2s ease,color .2s ease} .ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .ast-menu-toggle{ color:var(--hb-accent) !important} /* Stängkrysset. */ .ast-mobile-popup-drawer .menu-toggle-close{ color:#fff !important;width:44px;height:44px; border:1px solid rgba(255,255,255,.22);border-radius:999px; display:flex;align-items:center;justify-content:center; transition:border-color .2s ease,background .2s ease} .ast-mobile-popup-drawer .menu-toggle-close:hover{ border-color:var(--hb-accent);background:rgba(244,73,115,.14)} .ast-mobile-popup-drawer .ast-mobile-popup-header{padding:18px 20px} /* ===================== footern ===================== Footern låg på vitt direkt efter sidans mörka band, kontaktikonerna var 169 px stora 3D-illustrationer och nyhetsbrevsknappen var svart. Här får den samma botten som bandet ovanför, ikoner i rimlig storlek och sajtens egen knapp. Allt är scopat under .elementor-location-footer. */ /* Elementor sätter vitt på sektionerna med en selektor som väger tyngre än vår (.elementor-923 .elementor-element.elementor-element-xxx:not(...)), så utan !important vann vitt och hela footern stod ljus med vit text på vitt. Bakgrunden bor på yttersta