/** * TEAB tema-motor – sajtövergripande ljust/mörkt läge. * * Temat växlas av teab-theme.js genom att lägga `.teab-theme-dark` på . * Sektioner markeras som triggers via Beaver Builders Avancerat → CSS-klass: * .teab-section-dark → hela sidan blir mörk medan sektionen är under headern * .teab-section-light → hela sidan blir ljus * * Delade tema-variabler (alla TEAB-moduler + headern pekar sina ytor hit, så * allt flippar tillsammans). Progressive enhancement: inget händer förrän JS * lagt `.teab-theme-on` på . */ :root { /* Ljust tema (standard) */ --teab-bg: #F8FBF9; --teab-text: #14201A; --teab-muted: #5C6B61; --teab-panel: #FFFFFF; --teab-alt: #F0F0F0; /* kontrast-yta (teab-section-alt) – neutral, väldigt ljusgrå */ --teab-surface-2: #E8E8E8; /* andra kontrastnivå (teab-section-alt2) – ett steg djupare grå */ --teab-border: #E2EBE5; --teab-accent: #008A2B; --teab-accent-bright: #34AC5C; --teab-link: #006420; /* grön länk på ljus yta (WCAG) */ /* Diskret mjuk glöd för logotypen på mörka ytor (tillval via body.teab-logo--glow). Följer loggans alfakanal → lyfter bokstäverna utan att röra loggans pixlar. Alternativet till den vita bottenplattan. */ --teab-logo-glow: drop-shadow(0 0 5px rgba(255,255,255,.18)) drop-shadow(0 0 13px rgba(255,255,255,.09)); } html.teab-theme-dark { /* Mörkt tema – neutralt svart/grått (ingen grön undertone), grön accent kvar. */ --teab-bg: #0F0F0F; --teab-text: #ECECEC; --teab-muted: #9A9A9A; --teab-panel: #1E1E1E; --teab-alt: #191919; /* kontrast-yta – tydligt steg ljusare än bas-bg */ --teab-surface-2: #262626; /* ännu ljusare mörk yta (teab-section-alt2) */ --teab-border: #2C2C2C; --teab-link: #6FC78D; /* ljusare grön länk på mörk yta */ } /* Sidans bakgrund/text följer temat. */ html.teab-theme-on body { background-color: var(--teab-bg); color: var(--teab-text); } /* MJUK MEN LÄTT ÖVERGÅNG (optimerad för Safari/iOS). Under själva temabytet sätter teab-theme.js klassen .teab-theming på och tar bort den efteråt. Tidigare transitionerades VARJE element + pseudo (* , ::before, ::after) på fem egenskaper – det gjorde textgrider sega i WebKit. I stället: - color ÄRVS → transitioneras bara på body, så all brödtext tonar gratis utan en transition per element. - background-color/border-color ÄRVS INTE → transitioneras bara på ytorna som faktiskt byter färg: body, temasektioner och TEAB-komponenter. - rubriker/länkar i temasektioner får explicit temafärg → tonas separat. - inga opacity/fill/pseudo-övergångar (dyrt i WebKit, behövs ej för färgflip). - kortare tid = snabbare känsla, mindre jank på mobil. */ html.teab-theming body { transition: background-color .45s ease, color .45s ease; } html.teab-theming .teab-section, html.teab-theming .teab-section-dark, html.teab-theming .teab-section-light, html.teab-theming .teab-section > .fl-row-content-wrap, html.teab-theming .teab-section-dark > .fl-row-content-wrap, html.teab-theming .teab-section-light > .fl-row-content-wrap, html.teab-theming .teab-header__bar, html.teab-theming [class*="teab-"] { transition: background-color .45s ease, border-color .45s ease, color .45s ease; } html.teab-theming :is(.teab-section, .teab-section-dark, .teab-section-light) :is(h1, h2, h3, h4, h5, h6, .fl-heading-text, a) { transition: color .45s ease; } @media (prefers-reduced-motion: reduce) { html.teab-theming body, html.teab-theming [class*="teab-"], html.teab-theming .teab-section :is(h1, h2, h3, h4, h5, h6, .fl-heading-text, a) { transition: none !important; } } /* Markerade BB-rader följer temats bakgrund i stället för sin egen radfärg. Lägg klassen på radens Avancerat → CSS-klass (teab-section / -dark / -light). Övertrumfar BB:s radbakgrund med !important – sätt alltså INGEN egen radfärg på dessa rader (eller låt den vara, denna vinner ändå). Triggers (-dark/-light) sköts av teab-theme.js; alla tre målar bakgrunden. */ html.teab-theme-on .teab-section, html.teab-theme-on .teab-section-dark, html.teab-theme-on .teab-section-light, html.teab-theme-on .teab-section > .fl-row-content-wrap, html.teab-theme-on .teab-section-dark > .fl-row-content-wrap, html.teab-theme-on .teab-section-light > .fl-row-content-wrap { /* Indirekt så en modifier kan byta yta utan !important-krock. */ background-color: var(--teab-section-bg, var(--teab-bg)) !important; color: var(--teab-text); } /* Kontrast-yta: lägg till .teab-section-alt så får raden en aning ljusare/mörkare "panel"-yta (palettens panel-färg) i stället för bas-bakgrunden. Tema-styrd och finjusteras under Customizer → TEAB Tema → "panel/kort". Ännu ett steg: -alt2. */ html.teab-theme-on .teab-section-alt { --teab-section-bg: var(--teab-alt); } html.teab-theme-on .teab-section-alt2 { --teab-section-bg: var(--teab-surface-2); } /* Rubriker (och BB:s rubrikmodul) i temasektioner följer textfärgen. Astra färgar annars h1–h6 fast så de inte flippar. Sätt INGEN egen färg på BB-rubrikmoduler (då vinner den och flippar inte). */ html.teab-theme-on .teab-section :is(h1, h2, h3, h4, h5, h6, .fl-heading-text), html.teab-theme-on .teab-section-dark :is(h1, h2, h3, h4, h5, h6, .fl-heading-text), html.teab-theme-on .teab-section-light :is(h1, h2, h3, h4, h5, h6, .fl-heading-text) { color: var(--teab-text); } /* …men TEAB-modulerna hanterar sina EGNA kortfärger (vit text på mörka/foto-kort m.m.). Temats rubrikfärgning ska inte måla om text inuti dem – annars blir t.ex. kort-rubrikerna svarta på en teab-section-alt-sektion. Återställ arv. */ html.teab-theme-on :is(.teab-section, .teab-section-dark, .teab-section-light) :is(.teab-areas, .teab-cases, .teab-offices, .teab-contacts, .teab-jobs, .teab-hero) :is(h1, h2, h3, h4, h5, h6, .fl-heading-text) { color: inherit; } @media (prefers-reduced-motion: reduce) { html.teab-theme-on body, html.teab-theme-on .teab-section, html.teab-theme-on .teab-section-dark, html.teab-theme-on .teab-section-light, html.teab-theme-on .teab-section > .fl-row-content-wrap, html.teab-theme-on .teab-section-dark > .fl-row-content-wrap, html.teab-theme-on .teab-section-light > .fl-row-content-wrap { transition: none; } }