/* ===========================================================================
BJÖRKLIDENS - THEME-TOGGLE (Thomas skiss vs Befintlig)
Laddas SIST i . Innehåller bara theme-switching-logik.
Två teman:
data-theme="warm" (default) = Thomas skiss / warm-craft (Merriweather/Raleway)
data-theme="green" = Befintlig live-look (Roboto + sage-grönt)
Befintlig emulerar live-sajten maximalt: sage header, sage scrim, sage
trust-band, pill-knappar, rundare cards, Roboto-typografi. Syftet är att
kunden ska KÄNNA skillnaden mellan en generisk grön look och Thomas skiss.
=========================================================================== */
/* ---------------------------------------------------------------------------
0. ROBOTO: borttagen infor launch. Anvandes bara av den inerta green-temat
(Befintlig). Designvaljaren ar borttagen och sajten ar last till warm, sa
den render-blockerande externa font-importen behovs inte langre.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
1. THEME TOGGLE WIDGET (floating, pos:fixed bottom-right)
--------------------------------------------------------------------------- */
.theme-toggle {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 9000;
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px;
background: rgba(38, 34, 32, 0.88);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border-radius: 999px;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
font-family: 'Raleway', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: grab;
user-select: none;
-webkit-user-select: none;
transition: bottom 0.25s ease, box-shadow 0.2s ease;
}
.theme-toggle.is-dragging {
cursor: grabbing;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.theme-toggle__btn {
cursor: pointer;
}
.theme-toggle__btn {
appearance: none;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.7);
padding: 0.55rem 1rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
white-space: nowrap;
}
/* Hover-effekt borttagen på toggle-knapparna (inga färgskift utom aria-pressed) */
.theme-toggle__btn[aria-pressed="true"] {
background: #fff;
color: #1a1a1a;
}
.theme-toggle__label {
color: rgba(255, 255, 255, 0.5);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 0 0.6rem 0 0.8rem;
display: inline-flex;
align-items: center;
}
@media (max-width: 540px) {
.theme-toggle { bottom: 0.75rem; right: 0.75rem; padding: 3px; }
.theme-toggle__btn { padding: 0.45rem 0.75rem; font-size: 0.72rem; }
.theme-toggle__label { display: none; }
}
/* ===========================================================================
2. BEFINTLIG (data-theme="green") - LIVE-SAJT-EMULERING
=========================================================================== */
/* ---------------------------------------------------------------------------
2.1 Typografi: Roboto över hela linjen
--------------------------------------------------------------------------- */
:root[data-theme="green"] body,
:root[data-theme="green"] input,
:root[data-theme="green"] button,
:root[data-theme="green"] select,
:root[data-theme="green"] textarea {
font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
:root[data-theme="green"] h1,
:root[data-theme="green"] h2,
:root[data-theme="green"] h3,
:root[data-theme="green"] h4,
:root[data-theme="green"] h5,
:root[data-theme="green"] h6,
:root[data-theme="green"] .price,
:root[data-theme="green"] .spec__value,
:root[data-theme="green"] .product-card__title,
:root[data-theme="green"] .cat-card__title,
:root[data-theme="green"] .cat-card__price {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0;
}
:root[data-theme="green"] h1 { font-weight: 900; }
/* ---------------------------------------------------------------------------
2.2 SOLID HEADER (.site-header på undersidor) -> sage-grön
--------------------------------------------------------------------------- */
:root[data-theme="green"] .site-header {
background: #3f8577;
border-bottom: none;
box-shadow: 0 2px 14px rgba(33, 75, 69, 0.22);
}
:root[data-theme="green"] .site-header__logo img {
filter: brightness(0) invert(1);
}
:root[data-theme="green"] .site-nav__item > a {
color: #fff;
}
:root[data-theme="green"] .site-nav__item > a:hover,
:root[data-theme="green"] .site-nav__item > a[aria-current="page"],
:root[data-theme="green"] .site-nav__item--active > a {
color: var(--bj-cream);
}
:root[data-theme="green"] .site-nav__item > a::after {
background: var(--bj-cream);
}
:root[data-theme="green"] .site-nav__item.has-mega > a::before {
color: rgba(255, 255, 255, 0.85);
}
:root[data-theme="green"] .site-header__phone {
color: #fff;
}
:root[data-theme="green"] .site-header__hamburger span {
background: #fff;
}
/* ---------------------------------------------------------------------------
2.3 OVERLAY HEADER (.topbar på startsidan) -> solid sage band
--------------------------------------------------------------------------- */
:root[data-theme="green"] .topbar {
background: #3f8577;
box-shadow: 0 2px 14px rgba(33, 75, 69, 0.22);
}
:root[data-theme="green"] .topbar__inner {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* topbar__logo har redan invert-filter, behåll */
/* ---------------------------------------------------------------------------
2.4 HERO SCRIM (.hero::before) -> sage tint
--------------------------------------------------------------------------- */
/* Hero-overlay i Befintlig: svart 70% (matchar live, ger text-kontrast) */
:root[data-theme="green"] .hero::before {
background: rgba(0, 0, 0, 0.7);
}
:root[data-theme="green"] .hero::after {
opacity: 0;
}
:root[data-theme="green"] .hero h1,
:root[data-theme="green"] .hero__lead,
:root[data-theme="green"] .hero .eyebrow {
font-family: 'Roboto', system-ui, sans-serif;
}
:root[data-theme="green"] .hero h1 {
font-weight: 700;
letter-spacing: -0.01em;
}
/* ---------------------------------------------------------------------------
2.5 TRUST-BAND och USP-BAR -> sage
--------------------------------------------------------------------------- */
:root[data-theme="green"] .trust,
:root[data-theme="green"] .usp-bar {
background: #3f8577;
color: #fff;
}
:root[data-theme="green"] .trust__item,
:root[data-theme="green"] .usp-bar__item {
color: #fff;
}
:root[data-theme="green"] .trust__item svg,
:root[data-theme="green"] .usp-bar__icon {
color: var(--bj-cream);
}
/* ---------------------------------------------------------------------------
2.6 KNAPPAR -> pill (999px) över alla varianter
--------------------------------------------------------------------------- */
:root[data-theme="green"] .btn,
:root[data-theme="green"] .btn--primary,
:root[data-theme="green"] .btn--secondary,
:root[data-theme="green"] .btn--green,
:root[data-theme="green"] .btn--outline,
:root[data-theme="green"] .btn--ghost,
:root[data-theme="green"] .btn--cream,
:root[data-theme="green"] .btn--white,
:root[data-theme="green"] .btn--large {
border-radius: 999px;
}
/* ---------------------------------------------------------------------------
2.7 CARDS -> rundare (18px) för max live-känsla
--------------------------------------------------------------------------- */
:root[data-theme="green"] .card,
:root[data-theme="green"] .product-card,
:root[data-theme="green"] .cat-card,
:root[data-theme="green"] .duo__card,
:root[data-theme="green"] .guide-card,
:root[data-theme="green"] .pcard,
:root[data-theme="green"] .mega-menu {
border-radius: 18px;
}
:root[data-theme="green"] .product-card__media {
border-radius: 18px 18px 0 0;
}
/* ---------------------------------------------------------------------------
2.8 EYEBROW och accent-typografi -> Roboto + neutralare färg
--------------------------------------------------------------------------- */
:root[data-theme="green"] .eyebrow,
:root[data-theme="green"] .cat-card__count,
:root[data-theme="green"] .guide-card__topic,
:root[data-theme="green"] .mega-menu__title {
font-family: 'Roboto', system-ui, sans-serif;
color: var(--bj-stone);
font-weight: 700;
}
:root[data-theme="green"] .hero .eyebrow {
color: var(--bj-cream);
}
/* ---------------------------------------------------------------------------
2.9 SECTION--CTA (stora gröna fältet längst ner) -> sage istället för deep
--------------------------------------------------------------------------- */
:root[data-theme="green"] .section--cta {
background: linear-gradient(135deg, #3f8577 0%, #2D6357 100%);
}
/* ---------------------------------------------------------------------------
2.10 FOOTER -> samma deep brand-grön som live
--------------------------------------------------------------------------- */
:root[data-theme="green"] .footer {
background: #2D6357;
}
/* ---------------------------------------------------------------------------
2.11 LINK-färger i löptext -> sage istället för forest
--------------------------------------------------------------------------- */
:root[data-theme="green"] :where(main p, main li, .faq__answer, .section__lead, .card__text) a {
color: #3f8577;
}
:root[data-theme="green"] :where(main p, main li, .faq__answer, .section__lead, .card__text) a:hover {
color: #2D6357;
}
/* ---------------------------------------------------------------------------
2.12 MEGA-MENU innehåll -> bibehåll läsbarhet (vit bakgrund kvar)
Bara accent-färger uppdateras
--------------------------------------------------------------------------- */
:root[data-theme="green"] .card__link,
:root[data-theme="green"] .cat-card__cta,
:root[data-theme="green"] .duo__card__cta {
color: #3f8577;
}
/* ---------------------------------------------------------------------------
2.22 MEGA-MENY HELGRÖN MED VIT TEXT (max generic-look som live)
Default warm: vit panel, charcoal text, beige CTA-kort.
Green: helgrön panel, vit text, lätt transparent CTA-kort, vit knapp.
--------------------------------------------------------------------------- */
:root[data-theme="green"] .mega-menu {
background: #3f8577;
border: none;
box-shadow: 0 22px 50px rgba(33, 75, 69, 0.32);
color: #fff;
}
:root[data-theme="green"] .mega-menu .mega-menu__title {
color: rgba(255, 255, 255, 0.62);
font-weight: 700;
letter-spacing: 0.14em;
}
:root[data-theme="green"] .mega-menu li a {
color: #fff;
font-weight: 500;
position: relative;
transition: color 0.18s ease, background 0.18s ease;
padding: 0.5rem 0.6rem;
margin-left: -0.6rem;
border-radius: 8px;
}
:root[data-theme="green"] .mega-menu li a small {
color: rgba(255, 255, 255, 0.7);
transition: color 0.18s ease;
}
:root[data-theme="green"] .mega-menu li a:hover {
color: var(--bj-cream);
background: rgba(255, 255, 255, 0.1);
}
:root[data-theme="green"] .mega-menu li a:hover small {
color: rgba(255, 255, 255, 0.85);
}
:root[data-theme="green"] .mega-menu__cta {
background: transparent;
border: none;
color: #fff;
border-radius: 0;
padding: 0;
}
:root[data-theme="green"] .mega-menu__cta .eyebrow {
color: rgba(255, 255, 255, 0.6);
}
:root[data-theme="green"] .mega-menu__cta p {
color: rgba(255, 255, 255, 0.92);
}
:root[data-theme="green"] .mega-menu__cta .btn {
background: #fff;
color: #3f8577;
border-color: #fff;
font-weight: 700;
white-space: nowrap;
width: auto;
align-self: flex-start;
padding: 0.7rem 1.5rem;
text-align: center;
}
:root[data-theme="green"] .mega-menu__cta .btn:hover {
background: var(--bj-cream);
color: #2D6357;
border-color: var(--bj-cream);
}
/* ---------------------------------------------------------------------------
2.13 INPUT-fält i konfiguratorn -> rundare hörn
--------------------------------------------------------------------------- */
:root[data-theme="green"] .cfg__opt,
:root[data-theme="green"] .cfg__total,
:root[data-theme="green"] input[type="text"],
:root[data-theme="green"] input[type="email"],
:root[data-theme="green"] input[type="tel"],
:root[data-theme="green"] textarea,
:root[data-theme="green"] select {
border-radius: 12px;
}
/* ---------------------------------------------------------------------------
2.15 LIVE-EMULERING EXTRA: centrerad hero + sage-panel bakom lead-texten
(Matchar live-sajtens "Där kvalitet och expertis möts"-block)
--------------------------------------------------------------------------- */
:root[data-theme="green"] .hero {
align-items: center;
}
:root[data-theme="green"] .hero__inner {
text-align: center;
max-width: 920px;
margin: 0 auto;
padding-top: clamp(5rem, 12vh, 7rem);
padding-bottom: clamp(4rem, 10vh, 6rem);
}
:root[data-theme="green"] .hero h1 {
max-width: none;
margin: 0 auto;
font-size: clamp(2.2rem, 5.5vw, 4.2rem);
}
:root[data-theme="green"] .hero .eyebrow {
display: block;
text-align: center;
}
:root[data-theme="green"] .hero__lead {
max-width: 760px;
margin: 1.6rem auto 2rem;
background: rgba(63, 133, 119, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 22px;
padding: 1.6rem 2.2rem;
color: #fff;
text-align: center;
}
:root[data-theme="green"] .hero__cta {
justify-content: center;
}
/* ---------------------------------------------------------------------------
2.16 CENTRERADE SECTION-RUBRIKER (mer generic, som live)
Default warm har vänsterställd rubrik. Green centrerar.
--------------------------------------------------------------------------- */
:root[data-theme="green"] .section__title,
:root[data-theme="green"] .section__lead,
:root[data-theme="green"] section > .container > h2,
:root[data-theme="green"] section > .container > .eyebrow,
:root[data-theme="green"] section > .container > p.lead {
text-align: center;
}
:root[data-theme="green"] .section__lead,
:root[data-theme="green"] section > .container > p.lead {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------------------
2.17 PAGE-HEADER (sidheader på undersidor) centrerad i green
Default warm vänsterställd. Green matchar generic-look.
--------------------------------------------------------------------------- */
:root[data-theme="green"] .page-header__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
:root[data-theme="green"] .page-header .breadcrumb {
justify-content: center;
}
/* ---------------------------------------------------------------------------
2.21 MEGA-MENY VIEWPORT-FIX (gäller BÅDA teman)
Default-positionering centrerar menyn under nav-item via
translateX(-50%). När viewporten är < 1280px och nav-itemet ligger
till vänster (Produkter), hamnar vänster del av menyn utanför
viewporten. Snap till vänster-anchor på mindre skärmar.
--------------------------------------------------------------------------- */
/* Mega-menyn ankras till VIEWPORT, inte nav-item. Alla tre menyer
(Produkter/Tjänster/Guider) hamnar på exakt samma centrerade plats. */
.site-nav__item.has-mega > .mega-menu {
position: fixed;
top: var(--mega-menu-top, 64px);
left: 50%;
transform: translateX(-50%) translateY(8px);
max-width: min(92vw, 1100px);
}
.site-nav__item.has-mega:hover > .mega-menu,
.site-nav__item.has-mega:focus-within > .mega-menu {
transform: translateX(-50%) translateY(0);
}
/* Bridge-element (förhindrar att menyn stängs när musen rör sig mellan
nav-item och menyn) - behöver justeras för fixed-positionering. */
.site-nav__item.has-mega::after {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 20px;
}
/* ---------------------------------------------------------------------------
GEMENSAM REGEL FÖR BÅDA TEMAN
"Kan förlängas per 120 cm." - extra rad under spec-list på alla pcards.
Gemensam fakta för alla garage/carport-modeller per research §B4.
--------------------------------------------------------------------------- */
.pcard .spec-list::after {
content: "Kan förlängas per 120 cm.";
flex: 0 0 100%;
display: block;
margin-top: 0.6rem;
color: var(--bj-stone);
font-family: var(--font-primary);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
line-height: 1.4;
}
/* I Befintlig: Roboto + lite mer luft */
:root[data-theme="green"] .pcard .spec-list::after {
font-family: 'Roboto', system-ui, sans-serif;
font-size: 1.05rem;
margin-top: 0.35rem;
font-weight: 400;
}
/* Touch-open state (satt av JS pa touch-devices, two-tap pattern) */
.site-nav__item.has-mega.is-touch-open > .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}
/* ---------------------------------------------------------------------------
2.20 HERO-BILD TOGGLE per tema (warm = G50 utomhus, green = hantverkare)
HTML har två ![]()
-element, vi visar bara en åt gången.
--------------------------------------------------------------------------- */
/* Hero-bild togglas per tema: warm visar G50-utomhus, green visar
hantverkare-i-verkstad. Båda viewports (desktop + mobile) använder
samma toggle-logik. */
:root[data-theme="warm"] .hero__img--green { display: none; }
:root[data-theme="green"] .hero__img--warm { display: none; }
/* ---------------------------------------------------------------------------
2.19 NEUTRAL VITGRÅ BAKGRUND (live: var(--gray) = #f1f1f0)
Hela sidans bg flippas från varm papper-cream till neutral vitgrå.
Cards/panels behåller vit för kontrast.
--------------------------------------------------------------------------- */
:root[data-theme="green"] body,
:root[data-theme="green"] main {
background: #f1f1f0;
}
:root[data-theme="green"] .page-header,
:root[data-theme="green"] .section--light,
:root[data-theme="green"] .section--alt {
background: #f1f1f0;
border-bottom: none;
}
/* Solid headerns blur-bakgrund: ren #f1f1f0 utan blur skulle se underligt ut,
men headern ÄR sage-grön i green-tema så ingen ändring behövs här. */
/* Produkt-kort behåller vit (kontrast mot #f1f1f0).
OBS: .mega-menu inte med här - den styrs av 2.22-regeln (helgrön bg) */
:root[data-theme="green"] .pcard,
:root[data-theme="green"] .cat-card,
:root[data-theme="green"] .duo__card,
:root[data-theme="green"] .guide-card,
:root[data-theme="green"] .product-card {
background: #fff;
}
/* ---------------------------------------------------------------------------
2.18 PRODUKTKORT (.pcard) MINIMAL-LOOK SOM LIVE
Helt vit bg, minimalt med info, stor mörk pill-knapp "BERÄKNA PRIS"
Döljer beskrivning + flatten spec-list till plain textrad
--------------------------------------------------------------------------- */
:root[data-theme="green"] .pcard {
background: #fff;
border-color: rgba(38, 34, 32, 0.06);
border-radius: 18px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
padding: 0;
}
/* Hover-effekt borttagen på ALLA cards i Befintlig (matchar live's statiska UI) */
:root[data-theme="green"] .pcard,
:root[data-theme="green"] .product-card,
:root[data-theme="green"] .cat-card,
:root[data-theme="green"] .duo__card,
:root[data-theme="green"] .guide-card,
:root[data-theme="green"] .card {
transition: none;
}
:root[data-theme="green"] .pcard:hover,
:root[data-theme="green"] .product-card:hover,
:root[data-theme="green"] .cat-card:hover,
:root[data-theme="green"] .duo__card:hover,
:root[data-theme="green"] .guide-card:hover,
:root[data-theme="green"] .card:hover {
transform: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
border-color: rgba(38, 34, 32, 0.06);
}
:root[data-theme="green"] .product-card:hover .product-card__media img,
:root[data-theme="green"] .pcard:hover .pcard__media img,
:root[data-theme="green"] .pcard__media img,
:root[data-theme="green"] .product-card__media img {
transform: none;
transition: none;
}
:root[data-theme="green"] .pcard__media {
background: #fff;
padding: 1rem 1rem 0.4rem;
}
:root[data-theme="green"] .pcard__body {
padding: 1.6rem 1.8rem 1.8rem;
gap: 0.9rem;
}
:root[data-theme="green"] .pcard__title {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
font-size: 1.4rem;
line-height: 1.25;
color: var(--bj-charcoal);
margin-bottom: 0.2rem;
}
/* OBS: .pcard__desc tas INTE bort i Befintlig (SEO/content-paritet
mellan teman). Tidigare doldes den för "minimal-look" på modellsidor,
men det dolde också beskrivningar på guide-monteringskort med viktigt
SEO-innehåll. Stylar ner istället. */
:root[data-theme="green"] .pcard__desc {
font-size: 0.9rem;
color: var(--bj-stone);
margin: 0.4rem 0 0.3rem;
line-height: 1.5;
font-family: 'Roboto', system-ui, sans-serif;
}
/* Flatten spec-list till en rad plain text: "405 x 605 cm, 25 m²"
Använder flex med wrap, alla items renderas inline-flex med komma mellan.
Plus injectar "Kan förlängas per 120 cm." som ::after (gemensamt för alla
garage/carport-modeller per research §B4). */
:root[data-theme="green"] .pcard .spec-list {
display: flex;
flex-wrap: wrap;
gap: 0;
border: none;
padding: 0;
margin: 0.3rem 0 0;
font-size: 1.05rem;
color: var(--bj-stone);
font-family: 'Roboto', system-ui, sans-serif;
line-height: 1.55;
}
:root[data-theme="green"] .pcard .spec-list .spec {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 0;
padding: 0;
margin: 0;
}
:root[data-theme="green"] .pcard .spec-list .spec > svg {
display: none;
}
:root[data-theme="green"] .pcard .spec-list .spec > span {
display: inline;
font-family: inherit;
font-size: 1.05rem;
}
:root[data-theme="green"] .pcard .spec-list .spec > span > span {
display: none;
}
:root[data-theme="green"] .pcard .spec-list .spec b {
font-family: inherit;
font-weight: 400;
font-size: 1.05rem;
color: var(--bj-stone);
text-transform: lowercase;
letter-spacing: 0;
line-height: 1.5;
}
:root[data-theme="green"] .pcard .spec-list .spec b::first-letter {
text-transform: uppercase;
}
/* Comma + space mellan spec-items */
:root[data-theme="green"] .pcard .spec-list .spec + .spec::before {
content: ", ";
white-space: pre;
}
/* Lägg in "cm" efter första spec (mått-värdet är typ "405 x 605" utan enhet) */
:root[data-theme="green"] .pcard .spec-list .spec:first-child b::after {
content: " cm";
}
/* (Green-specifik spec-list::after definieras nedan som global regel) */
/* Footer: pris ovanför knapp, knapp full-bredd mörk pill */
:root[data-theme="green"] .pcard__foot {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 0.6rem;
padding-top: 0;
border-top: none;
align-items: stretch;
}
:root[data-theme="green"] .pcard__foot .price {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
font-size: 1.8rem;
line-height: 1.1;
color: #3f8577;
margin: 0.4rem 0 0.2rem;
}
:root[data-theme="green"] .pcard__foot .price small {
display: none;
}
/* Knapp: byt "Se modell" -> "BERÄKNA PRIS", mörk charcoal, full-bredd */
:root[data-theme="green"] .pcard__foot .btn {
background: #1F1F1F;
color: #fff;
border-color: #1F1F1F;
border-radius: 999px;
padding: 1.1rem 1.2rem;
width: 100%;
font-size: 0;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 0.3rem;
}
:root[data-theme="green"] .pcard__foot .btn::before {
content: "Beräkna pris";
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
:root[data-theme="green"] .pcard__foot .btn:hover {
background: #2E2E2E;
border-color: #2E2E2E;
transform: none;
}
/* ---------------------------------------------------------------------------
2.23 KONTAKTSIDA i Befintlig
Vänster kontakt-info: ljus sage #A4B8A6 med rundade hörn.
Höger form-card: grön #416659 med vita inputs och mörk pill-knapp.
--------------------------------------------------------------------------- */
:root[data-theme="green"] .kontakt-info {
background: #A4B8A6;
border-radius: 22px;
padding: 2rem 2.2rem;
color: var(--bj-charcoal);
}
:root[data-theme="green"] .kontakt-info h3 {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
margin-top: 1.2rem;
margin-bottom: 0.3rem;
}
:root[data-theme="green"] .kontakt-info h3:first-child {
margin-top: 0;
}
:root[data-theme="green"] .kontakt-info a {
color: #2D6357;
text-decoration: underline;
}
:root[data-theme="green"] .kontakt-info a:hover {
color: var(--bj-charcoal);
}
/* Höger column: wrappa form i grönt card via :has() selector */
:root[data-theme="green"] .kontakt-grid > div:not(.kontakt-info) {
background: #416659;
border-radius: 22px;
padding: 2.4rem 2.4rem 2.6rem;
color: #fff;
}
:root[data-theme="green"] .kontakt-grid > div:not(.kontakt-info) h2 {
color: #fff;
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.3;
margin: 0;
}
:root[data-theme="green"] .kontakt-grid > div:not(.kontakt-info) .lead {
color: rgba(255, 255, 255, 0.92);
font-family: 'Roboto', system-ui, sans-serif;
}
/* Form-fält: vit bg, ingen visuell border, små rundade hörn */
:root[data-theme="green"] .form__label {
color: #fff;
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 600;
font-size: 0.95rem;
}
:root[data-theme="green"] .form__input,
:root[data-theme="green"] .form__select {
background: transparent;
color: #fff;
border: 1.5px solid #fff;
border-radius: 999px;
padding: 1.1rem 1.6rem;
font-family: 'Roboto', system-ui, sans-serif;
font-size: 1rem;
height: auto;
}
:root[data-theme="green"] .form__textarea {
background: transparent;
color: #fff;
border: 1.5px solid #fff;
border-radius: 22px;
padding: 1.1rem 1.6rem;
font-family: 'Roboto', system-ui, sans-serif;
font-size: 1rem;
min-height: 6.5rem;
}
:root[data-theme="green"] .form__input::placeholder,
:root[data-theme="green"] .form__textarea::placeholder {
color: rgba(255, 255, 255, 0.6);
}
:root[data-theme="green"] .form__input:focus,
:root[data-theme="green"] .form__textarea:focus,
:root[data-theme="green"] .form__select:focus {
outline: 2px solid var(--bj-cream);
outline-offset: 2px;
border-color: var(--bj-cream);
}
/* Select-pilen blir nu osynlig mot transparent grön bg. Byt till cream */
:root[data-theme="green"] .form__select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1.4rem center;
padding-right: 3rem;
}
:root[data-theme="green"] .form__select option {
background: #416659;
color: #fff;
}
:root[data-theme="green"] .form__help {
color: rgba(255, 255, 255, 0.78);
}
:root[data-theme="green"] .form__help a {
color: var(--bj-cream);
text-decoration: underline;
}
/* Skicka-knappen: mörk charcoal pill, full bredd */
:root[data-theme="green"] form.form > button[type="submit"],
:root[data-theme="green"] form.form .btn[type="submit"] {
background: #1F1F1F;
color: #fff;
border-color: #1F1F1F;
border-radius: 999px;
width: 100%;
align-self: stretch !important;
padding: 1.1rem 1.2rem;
font-size: 0;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
}
:root[data-theme="green"] form.form > button[type="submit"]::before,
:root[data-theme="green"] form.form .btn[type="submit"]::before {
content: "Skicka";
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
:root[data-theme="green"] form.form > button[type="submit"]:hover {
background: #2E2E2E;
transform: none;
}
/* ---------------------------------------------------------------------------
2.24 OM-OSS-SIDAN i Befintlig: ett stort vit card på grå bg
Döljer alla split-bilder, stackar all text i en enda vit container.
Använder :has() för att bara matcha sidor med .section--split.
--------------------------------------------------------------------------- */
:root[data-theme="green"] main:has(.section--split) {
background: #fff;
border-radius: 22px;
padding: 2.5rem 2.5rem 3rem;
margin: 1.5rem auto 3rem;
max-width: 1100px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
:root[data-theme="green"] main:has(.section--split) .section {
padding: 0.8rem 0;
background: transparent;
}
:root[data-theme="green"] main:has(.section--split) .section--split .container {
padding: 0;
max-width: none;
}
:root[data-theme="green"] main:has(.section--split) .about-split {
display: block;
grid-template-columns: none;
gap: 0;
}
/* about-split-bilder visas också i Befintlig (Thomas påpekade att samma
bilder ska synas i båda teman, så vi inte verkar "halvgöra" Befintlig). */
:root[data-theme="green"] main:has(.section--split) .about-split__media {
display: block;
margin: 1rem 0;
}
:root[data-theme="green"] main:has(.section--split) .about-split__media img {
width: 100%;
height: auto;
border-radius: 12px;
}
:root[data-theme="green"] main:has(.section--split) .about-split__text {
max-width: none;
}
:root[data-theme="green"] main:has(.section--split) .about-split__text h2 {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
font-size: 1.35rem;
margin-top: 1.4rem;
margin-bottom: 0.6rem;
}
/* Feature-img flyttad till botten av cardet, visad i sin helhet (ingen crop) */
:root[data-theme="green"] main:has(.section--split) {
display: flex;
flex-direction: column;
}
:root[data-theme="green"] main:has(.section--split) .section--feature-img {
order: 99;
padding: 0;
margin: 2.5rem -2.5rem -3rem;
}
:root[data-theme="green"] main:has(.section--split) .section--feature-img .container {
padding: 0;
max-width: none;
}
:root[data-theme="green"] main:has(.section--split) .section--feature-img figure {
margin: 0;
border-radius: 0 0 22px 22px;
overflow: hidden;
}
:root[data-theme="green"] main:has(.section--split) .section--feature-img img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
:root[data-theme="green"] main:has(.section--split) .section--feature-img figcaption {
display: none;
}
/* ---------------------------------------------------------------------------
2.25 NYHETSKORT (.news-card) i Befintlig: rundade vita med plain text
--------------------------------------------------------------------------- */
:root[data-theme="green"] .news-card {
background: #fff;
border: 1px solid rgba(38, 34, 32, 0.06);
border-radius: 22px;
padding: 1.6rem 1.8rem 1.8rem;
font-family: 'Roboto', system-ui, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
:root[data-theme="green"] .news-card:hover {
transform: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
border-color: rgba(38, 34, 32, 0.06);
}
:root[data-theme="green"] .news-card__date {
font-family: 'Roboto', system-ui, sans-serif;
color: var(--bj-charcoal);
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0;
text-transform: none;
}
:root[data-theme="green"] .news-card__title {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
color: var(--bj-charcoal);
font-size: 1.2rem;
}
:root[data-theme="green"] .news-card__excerpt {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-size: 0.95rem;
}
:root[data-theme="green"] .news-card__cta {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 600;
}
:root[data-theme="green"] .news-card:hover .news-card__cta::after {
transform: none;
}
/* ---------------------------------------------------------------------------
2.26 GUIDE-KORT (.guide-card) i Befintlig: samma plain look som news-card
--------------------------------------------------------------------------- */
:root[data-theme="green"] .guide-card {
background: #fff;
border: 1px solid rgba(38, 34, 32, 0.06);
border-radius: 22px;
padding: 1.6rem 1.8rem 1.8rem;
font-family: 'Roboto', system-ui, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
:root[data-theme="green"] .guide-card:hover {
transform: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
border-color: rgba(38, 34, 32, 0.06);
}
:root[data-theme="green"] .guide-card__topic {
font-family: 'Roboto', system-ui, sans-serif;
color: var(--bj-charcoal);
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0;
text-transform: none;
}
:root[data-theme="green"] .guide-card h3 {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
color: var(--bj-charcoal);
font-size: 1.2rem;
}
:root[data-theme="green"] .guide-card p {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-size: 0.95rem;
}
:root[data-theme="green"] .guide-card a,
:root[data-theme="green"] .guide-card__cta {
color: var(--bj-charcoal);
}
/* ---------------------------------------------------------------------------
2.27 GUIDE-SIDANS .gcard och .guide-feature (egna klasser med inline-CSS)
Samma vit/plain-look + helt utan hover
--------------------------------------------------------------------------- */
:root[data-theme="green"] .guide-feature {
background: #fff;
border: 1px solid rgba(38, 34, 32, 0.06);
border-radius: 22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
:root[data-theme="green"] .guide-feature__body .eyebrow {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
:root[data-theme="green"] .guide-feature__body h2 {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
color: var(--bj-charcoal);
}
:root[data-theme="green"] .guide-feature__body p {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
}
:root[data-theme="green"] .gcard {
background: #fff;
border: 1px solid rgba(38, 34, 32, 0.06);
border-radius: 22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: none;
}
:root[data-theme="green"] .gcard:hover {
transform: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
border-color: rgba(38, 34, 32, 0.06);
}
:root[data-theme="green"] .gcard:hover .gcard__media img,
:root[data-theme="green"] .gcard__media img {
transform: none;
transition: none;
}
:root[data-theme="green"] .gcard__title {
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
color: var(--bj-charcoal);
}
:root[data-theme="green"] .gcard__desc {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
}
:root[data-theme="green"] .gcard__cta {
color: var(--bj-charcoal);
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 600;
}
:root[data-theme="green"] .gcard:hover .gcard__cta::after {
transform: none;
}
:root[data-theme="green"] .gcard__media__overlay {
background: #1F1F1F;
color: #fff;
font-family: 'Roboto', system-ui, sans-serif;
letter-spacing: 0.08em;
border-radius: 999px;
padding: 0.4rem 0.85rem;
}
/* ---------------------------------------------------------------------------
2.28 ARTICLE-CONTENT i vit card på guide/nyhets-undersidor
Wrapper all article.prose-text i en vit fula card med rundade hörn.
Gäller alla guide-sidor, nyhetsartiklar, info-sidor som använder
article.prose-mönstret.
--------------------------------------------------------------------------- */
:root[data-theme="green"] article.prose {
background: #fff;
border-radius: 22px;
padding: 2.5rem clamp(1.5rem, 4vw, 3rem) 3rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
margin: 0 auto 2rem;
max-width: 880px;
}
/* FAQ-sektioner under prose blir också vita cards för konsistens */
:root[data-theme="green"] .section--light .container > .section__head,
:root[data-theme="green"] .section--light .container > .faq,
:root[data-theme="green"] .section--light .container > details,
:root[data-theme="green"] .section--light .container > .faq-list {
background: #fff;
border-radius: 22px;
padding: 2rem 2.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
margin: 0 auto 2.5rem;
max-width: 880px;
}
/* Extra luft mellan intro-card och produkt-grid under */
:root[data-theme="green"] .section__head {
margin-bottom: 3rem;
}
:root[data-theme="green"] .pcard-grid,
:root[data-theme="green"] .product-grid,
:root[data-theme="green"] .cat-grid,
:root[data-theme="green"] .guide-grid {
margin-top: 1rem;
}
/* ===========================================================================
MOBILE NAV (modern slide-in från höger, grupperad layout)
Best practice: vänsterställd typografi, hierarki, CTA-area underst,
logo + close överst, touch-friendly tap-targets (min 44px).
=========================================================================== */
.mobile-nav {
/* Override baseline-flex-styling + säkerställ full viewport-täckning */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
position: fixed !important;
inset: 0 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: 100vw !important;
max-width: 100% !important;
height: 100vh !important;
height: 100dvh !important; /* dynamic viewport — beaktar mobile URL-bar */
min-height: 100vh !important;
min-height: 100dvh !important;
background: var(--bj-paper);
z-index: 1000;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0s;
box-shadow: none;
overflow: hidden;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.mobile-nav.active {
transform: translateX(0) !important;
}
.mobile-nav:not(.active) {
transform: translateX(100%) !important;
pointer-events: none;
}
.mobile-nav.active {
transform: translateX(0);
}
/* Backdrop overlay som täcker viewporten bakom menyn */
.mobile-nav::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(20, 28, 24, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: -1;
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: none;
}
.mobile-nav.active::before {
opacity: 1;
pointer-events: auto;
}
.mobile-nav__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.3rem;
background: #3f8577;
border-bottom: none;
flex-shrink: 0;
}
.mobile-nav__brand img {
height: 32px;
width: auto;
display: block;
filter: brightness(0) invert(1);
}
.mobile-nav__close {
appearance: none;
background: rgba(255, 255, 255, 0.14);
border: none;
width: 40px;
height: 40px;
border-radius: 999px;
cursor: pointer;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease;
}
.mobile-nav__close:hover, .mobile-nav__close:focus {
background: rgba(255, 255, 255, 0.28);
}
.mobile-nav__body {
flex: 1;
overflow-y: auto;
padding: 1.2rem 1.3rem 1rem;
background: var(--bj-paper);
-webkit-overflow-scrolling: touch;
}
.mobile-nav__section {
margin-bottom: 0.4rem;
border-bottom: 1px solid var(--bj-border-warm);
padding-bottom: 0.4rem;
}
.mobile-nav__section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.mobile-nav__title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bj-forest);
margin: 0;
padding: 0.95rem 0.4rem;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
border-radius: 8px;
transition: background 0.15s ease;
}
.mobile-nav__title:hover, .mobile-nav__title:focus-visible {
background: var(--bj-paper);
outline: none;
}
/* Sektion utan toggle (Tjänster): cursor default, ingen hover.
Chevron visas men permanent roterad i öppen-position (konsekvens). */
.mobile-nav__section--always-open > .mobile-nav__title {
cursor: default;
}
.mobile-nav__section--always-open > .mobile-nav__title:hover {
background: transparent;
}
.mobile-nav__section--always-open .mobile-nav__chevron {
transform: rotate(180deg);
opacity: 0.5;
}
.mobile-nav__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease;
color: var(--bj-forest);
flex-shrink: 0;
}
.mobile-nav__section.is-open .mobile-nav__chevron {
transform: rotate(180deg);
}
/* Accordion: dölj content default helt (display:none), visa när .is-open */
.mobile-nav__section > a,
.mobile-nav__section > .mobile-nav__see-all {
display: none !important;
}
.mobile-nav__section.is-open > a,
.mobile-nav__section.is-open > .mobile-nav__see-all,
.mobile-nav__section--always-open > a,
.mobile-nav__section--always-open > .mobile-nav__see-all {
display: flex !important;
}
.mobile-nav__body a {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.7rem 0.6rem !important;
color: var(--bj-charcoal) !important;
text-decoration: none !important;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
font-family: var(--font-heading) !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 1.3 !important;
text-align: left !important;
}
.mobile-nav__body a:hover, .mobile-nav__body a:focus,
.mobile-nav__body a[aria-current="page"] {
background: var(--bj-paper);
color: var(--bj-forest) !important;
}
.mobile-nav__body a small {
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.78rem;
color: var(--bj-stone);
letter-spacing: 0;
text-transform: none;
}
.mobile-nav__see-all {
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--bj-forest) !important;
font-family: var(--font-primary) !important;
padding: 0.5rem 0.6rem !important;
margin-top: 0.2rem;
}
.mobile-nav__cta-area {
padding: 1rem 1.3rem 1.3rem;
border-top: 1px solid var(--bj-border-warm);
display: flex;
flex-direction: column;
gap: 0.8rem;
background: var(--bj-paper);
flex-shrink: 0;
}
/* Grön separator-linje där CTA-knappen tidigare var */
.mobile-nav__divider {
height: 3px;
background: #3f8577;
border-radius: 2px;
margin: 0.3rem 0 0.4rem;
}
/* 4-ikoner-rad (telefon, email, Facebook, Instagram) */
.mobile-nav__icons {
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.2rem 0 0;
}
.mobile-nav__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
border-radius: 999px !important;
background: var(--color-bg-white) !important;
color: var(--bj-forest) !important;
border: 1.5px solid var(--bj-border-warm) !important;
text-decoration: none !important;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mobile-nav__icon:hover, .mobile-nav__icon:focus {
background: var(--bj-forest) !important;
color: var(--bj-paper-white) !important;
border-color: var(--bj-forest) !important;
}
/* Befintlig-tema: pillade knappar, Roboto */
/* ===========================================================================
BEFINTLIG-TEMA: helgrön mobile-meny med vit text (matchar live-sajten)
=========================================================================== */
:root[data-theme="green"] .mobile-nav {
background: var(--theme-accent, #3f8577);
}
:root[data-theme="green"] .mobile-nav__top {
background: var(--theme-accent, #3f8577);
}
:root[data-theme="green"] .mobile-nav__body {
background: var(--theme-accent, #3f8577);
}
:root[data-theme="green"] .mobile-nav__cta-area {
background: var(--theme-accent, #3f8577);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
:root[data-theme="green"] .mobile-nav__section {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="green"] .mobile-nav__title {
color: #fff;
font-family: 'Roboto', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
}
:root[data-theme="green"] .mobile-nav__title:hover,
:root[data-theme="green"] .mobile-nav__title:focus-visible {
background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="green"] .mobile-nav__chevron {
color: #fff;
opacity: 0.85;
}
:root[data-theme="green"] .mobile-nav__body a {
color: #fff !important;
font-family: 'Roboto', system-ui, sans-serif !important;
}
:root[data-theme="green"] .mobile-nav__body a:hover,
:root[data-theme="green"] .mobile-nav__body a[aria-current="page"] {
color: var(--bj-cream) !important;
background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="green"] .mobile-nav__body a small {
color: rgba(255, 255, 255, 0.7);
font-family: 'Roboto', system-ui, sans-serif;
}
:root[data-theme="green"] .mobile-nav__see-all {
color: var(--bj-cream) !important;
}
:root[data-theme="green"] .mobile-nav__divider {
background: rgba(255, 255, 255, 0.4);
}
:root[data-theme="green"] .mobile-nav__body a {
font-family: 'Roboto', system-ui, sans-serif !important;
font-weight: 600 !important;
}
:root[data-theme="green"] .mobile-nav__body a small {
font-family: 'Roboto', system-ui, sans-serif;
}
:root[data-theme="green"] .mobile-nav__icon {
color: var(--theme-accent, #3f8577) !important;
border-color: var(--theme-accent, #3f8577) !important;
}
:root[data-theme="green"] .mobile-nav__icon:hover {
background: var(--theme-accent, #3f8577) !important;
color: #fff !important;
}
/* Lägg Befintlig-temats accent-färg som CSS-variabel (för återanvändning) */
:root[data-theme="green"] {
--theme-accent: #3f8577;
}
/* ===========================================================================
TRUST-BAR MOBILE LAYOUT (båda teman)
På smal mobil blir 4 items i flex-wrap ojämnt. Byt till grid 2x2
för bättre läsbarhet. På extra smal: 1 kol stack.
=========================================================================== */
@media (max-width: 600px) {
.trust__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 1rem;
justify-content: stretch;
padding: 1rem 0;
}
.trust__item {
font-size: 0.86rem;
gap: 0.45rem;
}
}
@media (max-width: 380px) {
.trust__row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
/* ===========================================================================
GLOBAL HEADER (båda teman): grön header med vit logo + nav.
Mega-menyn är ORÖRD i warm-tema (vit panel med charcoal text).
I green-tema overridar 2.22 mega-menyn separat.
=========================================================================== */
.site-header {
background: #3f8577;
border-bottom: none;
box-shadow: 0 2px 14px rgba(33, 75, 69, 0.22);
}
.site-header__logo img {
filter: brightness(0) invert(1);
}
.site-nav__item > a {
color: #fff;
}
.site-nav__item > a:hover,
.site-nav__item > a[aria-current="page"],
.site-nav__item--active > a {
color: var(--bj-cream);
}
.site-nav__item > a::after {
background: var(--bj-cream);
}
.site-nav__item.has-mega > a::before {
color: rgba(255, 255, 255, 0.85);
}
.site-header__phone {
color: #fff;
}
.site-header__hamburger span {
background: #fff;
}
/* ===========================================================================
3. LIGHTBOX (gemensam för båda teman, med tema-specifika overrides)
Thomas skiss: elegant mörk overlay med blur, rundade hörn, soft shadow,
cirkel-knappar och Raleway-caption.
Befintlig: helt svart bg, kantiga rektangulära knappar, Roboto, flat look.
=========================================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: 9500;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 28, 24, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
opacity: 0;
transition: opacity 0.28s ease;
padding: 3rem;
}
.lightbox.is-open {
opacity: 1;
}
.lightbox[hidden] {
display: none !important;
}
.lightbox__inner {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.lightbox__figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 100%;
}
.lightbox__img {
display: block;
max-width: 100%;
max-height: 75vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4);
background: #1a1a1a;
}
.lightbox__caption {
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-primary);
font-size: 0.95rem;
text-align: center;
max-width: 720px;
line-height: 1.5;
letter-spacing: 0.005em;
}
.lightbox__counter {
color: var(--bj-cream);
font-family: var(--font-primary);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Cirkel-knappar */
.lightbox__close,
.lightbox__nav {
position: absolute;
width: 48px;
height: 48px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
transform: scale(1.06);
}
.lightbox__close {
top: 1.5rem;
right: 1.5rem;
}
.lightbox__nav--prev {
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
}
.lightbox__nav--prev:hover {
transform: translateY(-50%) scale(1.06);
}
.lightbox__nav--next {
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
}
.lightbox__nav--next:hover {
transform: translateY(-50%) scale(1.06);
}
@media (max-width: 700px) {
.lightbox { padding: 1rem; }
.lightbox__close, .lightbox__nav { width: 40px; height: 40px; }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.lightbox { transition: none; }
.lightbox__close:hover, .lightbox__nav:hover { transform: none; }
.lightbox__nav--prev:hover, .lightbox__nav--next:hover { transform: translateY(-50%); }
}
/* ---------------------------------------------------------------------------
Befintlig: enklare lightbox (svart bg, kantiga knappar, ingen blur, plain)
--------------------------------------------------------------------------- */
:root[data-theme="green"] .lightbox {
background: rgba(0, 0, 0, 0.96);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
:root[data-theme="green"] .lightbox__img {
border-radius: 0;
box-shadow: none;
}
:root[data-theme="green"] .lightbox__caption {
font-family: 'Roboto', system-ui, sans-serif;
color: rgba(255, 255, 255, 0.78);
font-size: 0.9rem;
}
:root[data-theme="green"] .lightbox__counter {
font-family: 'Roboto', system-ui, sans-serif;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.08em;
}
:root[data-theme="green"] .lightbox__close,
:root[data-theme="green"] .lightbox__nav {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
:root[data-theme="green"] .lightbox__close:hover,
:root[data-theme="green"] .lightbox__nav:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
transform: none;
}
:root[data-theme="green"] .lightbox__nav--prev:hover {
transform: translateY(-50%);
}
:root[data-theme="green"] .lightbox__nav--next:hover {
transform: translateY(-50%);
}
/* ---------------------------------------------------------------------------
2.14 Smooth theme-byte (transition på färger/bakgrunder)
Hjälper kunden känna förändringen
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
body,
.site-header, .topbar, .hero::before, .trust, .usp-bar,
.section--cta, .footer,
.btn, .card, .product-card, .cat-card, .duo__card, .guide-card,
.site-nav__item > a, .site-header__logo img, .topbar__logo img {
transition:
background-color 0.28s ease,
background 0.28s ease,
color 0.22s ease,
border-radius 0.22s ease,
filter 0.22s ease,
font-family 0.05s ease;
}
}