/* * Light mode · ljust färgläge för hela sajten * ──────────────────────────────────────────────────────────────────────────── * STATUS: AKTIVT (2026-09-13) * ──────────────────────────────────────────────────────────────────────────── * Filen svarar på TVÅ krokar, och båda behövs: * * html.color-scheme--alt ← ACSS färglägesväxlare. Detta är vägen * besökare och redaktörer faktiskt använder. * html[data-gmfy-theme="light"] ← manuell krok för test via konsolen. * * Fram till 2026-09-13 fanns BARA den andra. Växlade man i gränssnittet fick * man därför inte det här temat alls, utan ACSS egen halvfärdiga alt-palett: * sidan förblev mörk, brand-grönt blev #6ba90b och enstaka ytor vände medan * andra inte gjorde det. Det var inte en bugg i temat — temat kopplades helt * enkelt aldrig in. Ta aldrig bort alt-selektorn utan att samtidigt ge * växlaren en annan krok. * * ACSS option-prefers-color-scheme står "off", så ingen får ljust läge enbart * för att operativsystemet står i ljust. Slås den på gäller den här filen * automatiskt för dem också — kontrollera då sidorna en gång till. * * VARFÖR INTE BRICKS EGET data-brx-theme: Bricks 2.2 stämplar redan * data-brx-theme på vid varje sidladdning (includes/setup.php, * set_project_default_mode) och projektets default-läge är ostatt, alltså * "light". Sajtens MÖRKA utseende körs med andra ord redan under namnet * "light" i Bricks. Hade den här filen hakat på det attributet skulle ljust * läge ha slagit på för alla, direkt. Och att rätta default-läget till "dark" * går inte heller: ACSS växlare tolkar det som "visa alt-paletten", och * eftersom ACSS website-color-scheme redan ÄR dark blir alt den andra * paletten — brand-grönt byter då till #6ba90b över hela sajten. Testat och * bekräftat. Lämna bricks_style_manager ostatt. * * FÖRUTSÄTTNING: sajten färgas till 100 % av CSS-variabler. Det finns noll råa * hex-värden i Bricks sidinnehåll och sex i de globala klasserna, så nästan * hela det ljusa läget är en omdefiniering av tokens — inte en omskrivning av * CSS. Den här filen är det enda stället i temat där de ljusa literalerna får * skrivas, precis som style.css är det enda stället för de mörka. * * TVÅ SAKER SOM INTE ÄR EN REN INVERTERING — läs dem innan du ändrar något: * * 1. GRÖNT HAR TVÅ ROLLER. Brand-grönt #9ee627 har 1,5:1 mot vitt och kan * aldrig bära text i ljust läge. Därför skiljer temat på --green * (fyllning) och --green-ink (text/ikon/linje). I mörkt läge är de samma * kulör, här är de det inte. Sätt aldrig --green-ink till brand-grönt. * * 2. HEADERN FÖLJER MED, FOOTERN INTE. ACSS deklarerar om hela sin palett på * .header och .footer (se automatic-variables.css rad 2), och en * deklaration på själva elementet vinner över den som ärvs från . * Ingen av dem växlar alltså av sig själv. HEADERN växlar ändå, via ett * eget --hdr-*-lager i components/header/header.css som ACSS inte pinnar; * lägger du till något i headern ska det färgas med --hdr-*, inte med * --white/--text-light/--base. FOOTERN är fortfarande mörk. Se avsnitt 6. */ html[data-gmfy-theme="light"], html.color-scheme--alt { /* ═══════════════════════════════════════════════════════════════════════ 1. YTOR OCH BLÄCK ═══════════════════════════════════════════════════════════════════════ */ color-scheme: light; /* formulärkontroller, scrollbars */ /* Mörkt läge har TRE tonala steg (#0a0a0a → #131313 → #1a1a1a) och varje steg är ett lyft mot ljusare. Ljust läge hade bara två, eftersom kort och panel båda låg på rent vitt — djupmodellen tappade sitt översta trappsteg och sidan blev platt. Ljust har ingen höjd kvar ovanför vitt, så steget flyttas NEDÅT i stället: sidan går ett snäpp djupare och ger korten luft att stå i. */ --bg-page: #EFF1EC; /* sida (mörk: #0a0a0a) */ --bg: #FFFFFF; /* kort (mörk: #131313) */ --bg-elev: #FFFFFF; /* modal/panel (mörk: #1a1a1a) — skiljs från kort med skugga, inte ljushet */ --bg-sunken: #E5E8E1; /* chips, tomma mätare, bildplatshållare */ --bg-input: #FFFFFF; --ink: #0F1110; /* rubriker, pris — 18:1 mot sidan */ --ink-2: #4A4F4C; /* brödtext — 7,9:1 */ /* AVVIKER FRÅN RIKTLINJERNA. Där står #6B716D, mätt mot vitt (4,9:1). Men etiketter och meta ligger i praktiken lika ofta på Yta 2 (#EAECE7), och där faller #6B716D till 3,6:1 — under AA. #646966 klarar alla tre ytor: 5,8:1 mot kort, 5,3:1 mot sidan, 4,9:1 mot Yta 2. */ --ink-3: #646966; --ink-4: #9AA09C; /* EJ i riktlinjerna. Dekorativt/inaktivt, under AA — använd aldrig för läsbar text. */ --line: #DADDD6; /* kortkanter, avdelare */ --line-2: #E4E7E0; /* svagare avdelare inuti kort */ --line-strong: #B9BDB4; /* hover, aktiva fält */ /* Mörkt läge separerar ytor med ljushet. Ljust läge har inte den marginalen — kort och sida ligger 5 % isär — så höjd bärs av kant plus skugga. */ --shadow-elev: 0 1px 2px rgba(15, 17, 16, .05), 0 8px 24px rgba(15, 17, 16, .07); /* Vilande kortskugga. DESIGN.md förbjuder vilande skuggor på kort — men den regeln är skriven för den tonala svartmodellen, där ljushet bär hierarkin. Här finns ingen sådan marginal (kort mot sida är 4 %), så kanten ensam får bära allt. Skuggan är det som gör kortet till ett objekt i stället för en ruta. Offset + mjuk blur, aldrig en centrerad halo. */ --shadow-card: 0 1px 2px rgba(15, 17, 16, .04), 0 2px 8px rgba(15, 17, 16, .05); --shadow-card-hover: 0 2px 4px rgba(15, 17, 16, .05), 0 8px 20px rgba(15, 17, 16, .08); /* ═══════════════════════════════════════════════════════════════════════ 2. GRÖNT — TVÅ ROLLER ═══════════════════════════════════════════════════════════════════════ */ /* --green är oförändrat brand-grönt. Bara fyllning: primärknapp, badge, fylld mätare. Alltid mörkt bläck ovanpå (12,6:1). */ --green-deep: #86D216; /* hover på grön fyllning */ --on-green: #0F1110; /* basdefinitionen är var(--bg-page), som slutar vara mörk här — sätts om explicit */ /* ── ACSS alt-palett skriver om brand-grönt. Ta tillbaka det. ───────────── När .color-scheme--alt är aktiv byter ACSS hela primary-rampen till sin andra kulör, #6ba90b. Det är fel: brand-grönt är #9ee627 och ändras inte av att sidan blir ljus — det är bara dess ROLL som krymper till fyllning. Utan det här blocket byter varje grön knapp, badge och SVG-fyllning kulör så fort besökarens OS står i ljust läge. Värdena är ACSS egna main-värden, kopierade oförändrade. */ --primary: #9ee627; --primary-hex: #9ee627; --primary-hsl: 83 79% 53%; --primary-rgb: 158 230 39; --primary-r: 158; --primary-g: 230; --primary-b: 39; --primary-hover: #aeea4d; --primary-semi-light: #b6ec5f; --primary-semi-dark: #6aa013; --primary-trans-10: rgba(158, 230, 39, 0.1); --primary-trans-20: rgba(158, 230, 39, 0.2); --primary-trans-30: rgba(158, 230, 39, 0.3); --primary-trans-40: rgba(158, 230, 39, 0.4); --primary-trans-50: rgba(158, 230, 39, 0.5); --primary-trans-60: rgba(158, 230, 39, 0.6); --primary-trans-70: rgba(158, 230, 39, 0.7); --primary-trans-80: rgba(158, 230, 39, 0.8); --primary-trans-90: rgba(158, 230, 39, 0.9); /* Allt som är text, ikon, bock, stjärna eller tunn linje. AVVIKER FRÅN RIKTLINJERNA av samma skäl som --ink-3: riktlinjernas #457A00 är uppmätt mot vitt (5,2:1) och klarar sidan (4,7:1), men faller till 4,4:1 mot Yta 2 — och byggarens stegnummer och bockar står just där. #3F7000 är samma kulörton ett snäpp mörkare och håller 4,5:1 mot alla fyra ytorna: 6,0 mot kort · 5,4 mot sidan · 5,4 mot grön ton · 5,0 mot Yta 2. */ --green-ink: #3F7000; /* Riktlinjernas "gröna ton" (#EEF6E0 / kant #CFE3A8) finns inte som token — komponenterna blandar fram sin egen ton ad hoc med color-mix(in oklab, var(--green) 4–20%, transparent), vilket ger rätt familj men fem olika styrkor. Att samla dem på en token är en egen upprensning; den ändrar mörkt läge och hör inte hemma här. */ /* ═══════════════════════════════════════════════════════════════════════ 3. STATUS ═══════════════════════════════════════════════════════════════════════ */ /* Tonerna och kanterna ur riktlinjerna (#FBF3E4/#EBD3A0, #FDF0EE/#F1C2BB) saknar motsvarighet i temat — status ritas i dag som ren text plus prick, utan tonad platta. Läggs de till är det de värdena som gäller. */ --stock-low: #8A5A00; /* 5,4:1 mot #FBF3E4, 5,9:1 mot vitt */ --stock-out: #B42318; /* 5,9:1 mot #FDF0EE, 6,4:1 mot vitt */ --error: var(--stock-out); /* OK-status har ingen egen kulör — den återanvänder grönt bläck på grön ton. */ /* ═══════════════════════════════════════════════════════════════════════ 4. ACSS-TOKENS SOM BRICKS-DATAN KONSUMERAR ──────────────────────────────────────────────────────────────────────── Sidinnehållet i Bricks refererar 90 färgbärande ACSS-variabler. De som bär polaritet i namnet (--white, --text-light, --neutral …) betyder i ACSS "ljus kulör" respektive "mörk kulör", inte "förgrund"/"bakgrund". De måste därför byta plats i ljust läge, exakt som ACSS egen .color-scheme--alt gör — men med paletten ovan i stället för ACSS raka invertering till rena gråtoner. ═══════════════════════════════════════════════════════════════════════ */ --white: #0F1110; /* "den ljusa kulören" = nu den mörka */ --black: #FFFFFF; --white-trans-10: rgba(15, 17, 16, .10); --white-trans-20: rgba(15, 17, 16, .20); --white-trans-60: rgba(15, 17, 16, .60); --white-trans-80: rgba(15, 17, 16, .80); --black-trans-10: rgba(255, 255, 255, .10); --black-trans-20: rgba(255, 255, 255, .20); --black-trans-60: rgba(255, 255, 255, .60); --black-trans-80: rgba(255, 255, 255, .80); --text-light: #0F1110; --text-light-muted: #4A4F4C; --text-dark: #FFFFFF; --text-dark-muted: rgba(255, 255, 255, .80); /* Neutralskalan inverteras: --neutral är ACSS mörkaste ände. */ --neutral: #FFFFFF; --neutral-hover: #F4F5F2; --neutral-ultra-light: #0F1110; --neutral-light: #DADDD6; --neutral-semi-light: #9AA09C; --neutral-semi-dark: #6B716D; --neutral-dark: #4A4F4C; --neutral-ultra-dark: #EAECE7; --neutral-trans-10: rgba(15, 17, 16, .06); --neutral-trans-20: rgba(15, 17, 16, .12); --neutral-trans-40: rgba(15, 17, 16, .24); --neutral-trans-50: rgba(15, 17, 16, .32); --neutral-trans-60: rgba(15, 17, 16, .45); --neutral-trans-80: rgba(15, 17, 16, .60); /* Basskalan likaså. Mappa på ROLL, inte på position i skalan: --base-ultra-dark är i mörkt läge #1a1a1a, alltså ett litet steg FRÅN --base — en dämpad panel och en nätt hårfin linje. Bricks-datan använder den till båda. Dess ljusa motsvarighet är därför Yta 2, inte en kraftig linjekulör. */ --base: #FFFFFF; --base-hover: #F4F5F2; --base-ultra-light: #0F1110; --base-light: #4A4F4C; --base-semi-light: var(--ink-3); --base-semi-dark: #9AA09C; --base-dark: #DADDD6; --base-ultra-dark: #EAECE7; --base-trans-20: rgba(15, 17, 16, .12); --base-trans-80: rgba(15, 17, 16, .60); --base-dark-trans-30: rgba(15, 17, 16, .18); /* ACSS bg-alias följer sina neutraler av sig själva, men de som pekar på en ände av skalan måste sättas om för hand. */ --bg-ultra-dark: #FFFFFF; --bg-dark: #EAECE7; --bg-light: #DADDD6; --bg-ultra-light: #0F1110; --body-bg-color: var(--bg-page); --device-bg-color: var(--bg-page); --heading-color: var(--ink); --body-color: var(--ink-2); /* ── Grönt i Bricks-datan ──────────────────────────────────────────────── Ett medvetet vägval, och det enda stället där ljust läge inte kan bli korrekt av tokens ensamt: --primary lämnas som brand-grönt, för de 23 ställen i Bricks-datan där det är en FYLLNING är sajtens primära CTA:er. Priset är att de ~50 ställen där Bricks-datan använder --primary/--secondary som BLÄCK (ikonfyllning, aktiv menypost, hover-färg) måste pekas om till --green-ink i byggaren. Se rapporten. Merparten av dem ligger i header/footer, som ändå förblir mörka — där är de redan rätt. --secondary är redan ACSS djupare gröna och används i temat som hover-bläck; här blir den riktlinjernas hover för grönt bläck. */ --secondary: #365F00; --secondary-hover: #2B4C00; --primary-ultra-light: #EEF6E0; --primary-light: #CFE3A8; --primary-dark: var(--green-ink); /* Badgen på /om-gameify/ ("Byggmesteren", "Optimaliseringsmesteren") är en YTA målad med den här token. Lämnad mörk blev den mörkgrön platta med grönt bläck ovanpå: 2,44:1. Kontrollerat i Bricks globala klasser att token används på exakt ETT ställe och alltid som bakgrund, aldrig som textfärg — därför kan den vändas till den ljusa gröna tonen utan att något annat påverkas. Blir #3F7000 på #EEF6E0 = 6,0:1. */ --primary-ultra-dark: #EEF6E0; /* Knapp- och tabelltokens som Bricks/Woo läser direkt. */ --line-color: var(--line); --border-color: var(--line); --table-bg: var(--bg); --table-bg-odd: var(--bg-page); --table-bg-even: var(--bg); } /* ═════════════════════════════════════════════════════════════════════════ 5. DET SOM INTE ÄR EN FÄRGVARIABEL Regler där mörkt läge bakat in sin polaritet i värdet i stället för i en token, och effekter som är ritade för att lysa mot svart. ═════════════════════════════════════════════════════════════════════════ */ /* ── ACSS gröna knappvarianter ─────────────────────────────────────────────── `.btn--primary` används 73 gånger och `.btn--outline` 51. ACSS färgar dem med --primary rakt av, vilket inte överlever ett ljust läge: .btn--primary hover-bakgrund --secondary + hover-text --white → mörk text på mörkgrönt .btn--primary.btn--outline text och kant --primary → 1,5:1 mot vitt --focus-color --primary-light (#e0f7bb) → osynlig fokusring Knappens FYLLNING lämnas orörd — den ska vara brand-grön. Det är bläcket, kanten, hover-läget och fokusringen som pekas om. */html[data-gmfy-theme="light"] .btn--primary, html.color-scheme--alt .btn--primary { --btn-text-color: var(--on-green); --btn-background-hover: var(--green-deep); --btn-text-color-hover: var(--on-green); --btn-border-color-hover: var(--green-deep); --focus-color: var(--green-ink); }html[data-gmfy-theme="light"] .btn--primary.btn--outline, html.color-scheme--alt .btn--primary.btn--outline { --btn-text-color: var(--green-ink); --btn-border-color: var(--green-ink); --btn-background-hover: var(--green); --btn-text-color-hover: var(--on-green); --btn-border-color-hover: var(--green); --focus-color: var(--green-ink); } /* ── Ytor som förblir mörka, och som därför behåller ljust bläck ───────────── Två sorter: 1. SEKTIONER MED MEDIA BAKOM TEXTEN. Hero-videon på startsidan har ingen bakgrundsfärg — dess verkliga botten är filmen, som är mörk i båda färglägena. Utan den här pinningen blir rubrik och brödtext mörka mot mörkt. Klassen .has-bg-video sätter Bricks själv. .on-media finns här för framtida sektioner med bakgrundsBILD: sätt den klassen på sektionen i Bricks. I dag är hero-videon den enda media-botten på hela sajten. 2. FLYTANDE LAGER MED HÅRDKODAD MÖRK BAKGRUND: jämförelsefältet, produkt- modalens lightbox, Twitch-spelaren, språkväljarens dropdown. Att overlays stannar mörka är en vanlig och här avsiktlig lösning — men bläcket inuti måste pinnas tillbaka. Ska de byggas om till ljusa ytor är det ett eget arbete per komponent. Specialfallet är .x-offcanvas_inner — mobilmenyn. Den byggs i HEADER-mallen men Bricks renderar den utanför .header, så ACSS låsta selektorer når den inte. Den är headerns mobilvariant och ska följa headern, alltså mörk. Det är också därför migreringen av grönt-som-bläck medvetet hoppade över _bricks_page_header_2 och _bricks_page_footer_2. */html[data-gmfy-theme="light"] .has-bg-video, html.color-scheme--alt .has-bg-video, html[data-gmfy-theme="light"] .on-media, html.color-scheme--alt .on-media, html[data-gmfy-theme="light"] .x-offcanvas_inner, html.color-scheme--alt .x-offcanvas_inner, html[data-gmfy-theme="light"] .gcmp__bar, html.color-scheme--alt .gcmp__bar, html[data-gmfy-theme="light"] .gcmp__modal, html.color-scheme--alt .gcmp__modal, html[data-gmfy-theme="light"] .gcmp__add, html.color-scheme--alt .gcmp__add, html[data-gmfy-theme="light"] .pcb-pmodal, html.color-scheme--alt .pcb-pmodal, html[data-gmfy-theme="light"] .gtw__player, html.color-scheme--alt .gtw__player, /* .gflang__toggle STOD HÄR och är medvetet borttagen. Blocket pinnar ljust bläck (--ink #f2f2f2) för flytande lager som stannar mörka, och knappen låg med så länge headern var mörk. Sedan headern följer färgläget (components/header/header.css) hade den pinningen gett #f2f2f2 på en ljus headerrad — 1,2:1, språkväljaren hade försvunnit. Knappen ärver nu --hdr-link i stället. LISTAN som fälls ut är fortfarande ett mörkt lager och står kvar nedan. */ html[data-gmfy-theme="light"] .gflang__list, html.color-scheme--alt .gflang__list { --ink: #f2f2f2; --ink-2: #d9d9d9; --ink-3: #a6a6a6; --ink-4: #595959; --white: #ffffff; --black: #000000; --text-light: #ffffff; --text-light-muted: rgba(255, 255, 255, .8); --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .14); --bg: #131313; --bg-elev: #1a1a1a; /* --bg-sunken och --bg-page MÅSTE med. Blocket pinnade från början bara bläck och --bg/--bg-elev, men jämförelsefältets kort målas med --bg-sunken (product-compare.css: .gcmp__bar-item) och det är EN AV FYRA ytstokens som dessa overlays faktiskt använder. Ljust läge ger #E5E8E1, alltså en nästan vit platta — och ovanpå den står titeln på det pinnade ljusa --ink #f2f2f2. 1,05:1. Produktnamnen försvann helt, medan "Velg produkt" bredvid syntes eftersom dess ruta är transparent och står direkt mot den svarta baren. Pinnar man bläcket till ljust måste varje yta det kan hamna på pinnas med. */ --bg-sunken: #1f1f1f; --bg-page: #0a0a0a; /* --bg-ultra-dark är FEMTE ytstoken och saknades. ACSS inverterar rampen: #000000 i mörkt läge, #FFFFFF i ljust. Mobilmenyns bakgrund sätts i header-mallen till var(--bg-ultra-dark), så hela .x-offcanvas_inner blev vit medan bläcket ovan pinnades ljust — vit text på vitt, 1,0:1, och mobilnavigationen försvann helt i ljust läge. Pinnad till mörkt läges egna värde, så ljust läge återger exakt vad mörkt gör. */ --bg-ultra-dark: #000000; --green-ink: var(--green); /* mot svart bär brand-grönt text igen */ color: var(--ink); } /* Bricks dropdown och mini-korgen deklarerar sin färg som "sidans bakgrund", vilket bara betydde mörk text så länge sidan var mörk. */html[data-gmfy-theme="light"] .cart-detail.off-canvas, html.color-scheme--alt .cart-detail.off-canvas, html[data-gmfy-theme="light"] ul.brx-dropdown-content, html.color-scheme--alt ul.brx-dropdown-content { color: var(--ink); } /* Mini-korgen är ljus redan i mörkt läge och har därför egna regler som antar att --white är vitt och --base är mörkt. Båda byter ände här. */html[data-gmfy-theme="light"] .widget_shopping_cart_content, html.color-scheme--alt .widget_shopping_cart_content { --white: #ffffff; }html[data-gmfy-theme="light"] .widget_shopping_cart_content .pcs-btn--ghost, html.color-scheme--alt .widget_shopping_cart_content .pcs-btn--ghost { color: var(--ink); border-color: var(--line-strong); } /* Det överstrukna ordinarie priset på tjänsteraderna står på vit 72 % i style.css — osynligt mot ljus yta. Samma avsikt som där (dämpat, men tydligt läsbart: opaciteten höjdes en gång från .5 till .72 just därför) bärs här av --ink-3, 4,9:1 mot Yta 2. Mini-korgens off-canvas-variant har redan en egen mörk regel i style.css och behöver ingen överskrivning. */ html[data-gmfy-theme="light"] .woocommerce-cart-form del .amount, html.color-scheme--alt .woocommerce-cart-form del .amount, html[data-gmfy-theme="light"] .cart-detail:not(.off-canvas) del .amount, html.color-scheme--alt .cart-detail:not(.off-canvas) del .amount, html[data-gmfy-theme="light"] tr.gameify-inkludert-verdi del .amount, html.color-scheme--alt tr.gameify-inkludert-verdi del .amount { color: var(--ink-3); } /* Innehållstabellernas rubrikplatta och radlinjer står på vit 6–12 % i style.css och försvinner helt mot ljus yta — tabellen tappar sitt rutnät och läser som ett block löptext. Samma tre nivåer bärs här av ytan och de två linjetokens. !important krävs: basreglerna har det, och utan blir specificiteten irrelevant. */ html[data-gmfy-theme="light"] .wp-block-table thead th, html.color-scheme--alt .wp-block-table thead th { background: var(--bg-sunken); border-bottom: 2px solid var(--line-strong) !important; } /* :not(:last-child) är nödvändigt, inte prydnad: basens `tbody tr:last-child td { border-bottom: none }` saknar !important, så en obegränsad regel här hade ritat tillbaka linjen under sista raden. */ html[data-gmfy-theme="light"] .wp-block-table tbody tr:not(:last-child) td, html.color-scheme--alt .wp-block-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--line) !important; } /* "Inkludert verdi"-raden i totals sätter också vit 80 % i style.css. */ html[data-gmfy-theme="light"] tr.gameify-inkludert-verdi th, html.color-scheme--alt tr.gameify-inkludert-verdi th, html[data-gmfy-theme="light"] tr.gameify-inkludert-verdi td, html.color-scheme--alt tr.gameify-inkludert-verdi td { color: var(--ink-2); } /* Stegnumren och stegetiketterna i byggaren är läsbar text, inte dekor, men står på --ink-4: 2,2:1 mot Yta 2. --ink-3 håller 4,9:1 och är fortfarande tydligt dämpat mot --ink, så hierarkin klarat/aktivt/kommande överlever. Mörkt läge har samma problem (2,7:1) och bör ses över separat — det är ingen ändring som hör hemma i ett ljust färgläge. */html[data-gmfy-theme="light"] .pcb-chip-num, html.color-scheme--alt .pcb-chip-num, html[data-gmfy-theme="light"] .pcb-tick, html.color-scheme--alt .pcb-tick { color: var(--ink-3); } /* Punkten i steg-eyebrown står på hover-grönt och blir för svag mot ljust. */html[data-gmfy-theme="light"] .pcb-step-eyebrow .eyebrow-dot, html.color-scheme--alt .pcb-step-eyebrow .eyebrow-dot { color: var(--green-ink); } /* Composite-formuläret sätter sin egen ljusa hårfin linje. */html[data-gmfy-theme="light"] .cart_group.composite_form.full_width, html.color-scheme--alt .cart_group.composite_form.full_width { --cf-border-hi: rgba(15, 17, 16, .18); } /* Glow-card är en neon-spotlight mot svart. Mot #F4F5F2 blir samma effekt en smutsig fläck — kulören går till grönt bläck och styrkan ned till en aning. */html[data-gmfy-theme="light"] .glow-card, html.color-scheme--alt .glow-card { --glow-color: 63, 112, 0; --glow-opacity-inner: .07; --glow-opacity-border: .55; } /* Retro-rutnätet tonas mot sidan, inte mot svart, och tappar lyskraften. */html[data-gmfy-theme="light"] .retro-grid, html.color-scheme--alt .retro-grid { --rg-color: 63, 112, 0; --rg-alpha: .22; --rg-opacity: .35; --rg-fade: var(--bg-page); } /* Höjd bärs av skugga när ljushetsskillnaden är borta. */html[data-gmfy-theme="light"] .brxe-popup .brx-popup-content, html.color-scheme--alt .brxe-popup .brx-popup-content, html[data-gmfy-theme="light"] .pcb-pmodal, html.color-scheme--alt .pcb-pmodal, html[data-gmfy-theme="light"] .grev-modal, html.color-scheme--alt .grev-modal { box-shadow: var(--shadow-elev); } /* ═════════════════════════════════════════════════════════════════════════ 5b. YTMATERIAL — djup, avdelningar och kanter ──────────────────────────────────────────────────────────────────────── Mörkt läge bygger djup av tre svartnivåer plus hårfin kant, och får liv av retro-rutnätet och glöden. Ljust läge ärvde tokens men inget av materialet: 31 vita ytor mot en sida 4 % ifrån, kanter på 5 % kontrast, två gradienter på hela startsidan. Resultatet läste som ett omålat utkast. Det här avsnittet ger tillbaka motsvarigheten — inte genom att härma svartnivåerna, utan genom de tre verktyg ljust läge faktiskt har: en aning lutning i ytan, en mjuk skugga som bär höjd, och avdelare som tonar ut i stället för att kapa. Allt ligger under tröskeln för att märkas som effekt; det ska kännas som material, inte som dekor. ═════════════════════════════════════════════════════════════════════════ */ /* ── Sidans botten ────────────────────────────────────────────────────────── En knappt mätbar vertikal lutning (2 % ljushet över hela sidan) gör att långa sidor inte läser som en enda död yta. Fixerad så den inte rullar. */html[data-gmfy-theme="light"] body, html.color-scheme--alt body { background-image: linear-gradient(180deg, #F4F6F1 0%, var(--bg-page) 60%); background-attachment: fixed; } /* ── Kort får materialet tillbaka ─────────────────────────────────────────── Listan är explicit, inte [class*="card"]. Wildcard träffade 34 element varav 12 var BEM-BARN (card-features__container-info) som fick en andra ram inuti sitt förälderkort. Att filtrera bort barnen på namnmönster går inte heller: grev__card är ett ÄKTA kort med __ i namnet. Lägg till nya kortklasser här. Lutningen är 1,5 % — precis nog att kanten uppåt läser som ljusinfall och ytan inte blir platt, långt under vad ögat läser som en gradient. */html[data-gmfy-theme="light"] .glow-card, html.color-scheme--alt .glow-card, html[data-gmfy-theme="light"] .gfaq__item, html.color-scheme--alt .gfaq__item, html[data-gmfy-theme="light"] .grev-card, html.color-scheme--alt .grev-card, html[data-gmfy-theme="light"] .grev__card, html.color-scheme--alt .grev__card, html[data-gmfy-theme="light"] .gcmp__card, html.color-scheme--alt .gcmp__card, html[data-gmfy-theme="light"] .pcs-card, html.color-scheme--alt .pcs-card, html[data-gmfy-theme="light"] .card-products-archive, html.color-scheme--alt .card-products-archive, html[data-gmfy-theme="light"] .card-features, html.color-scheme--alt .card-features, /* html[data-gmfy-theme="light"] .gameify-slikk-fungerer-det-card, html.color-scheme--alt .gameify-slikk-fungerer-det-card */ { background-image: linear-gradient(180deg, #FFFFFF 0%, #FBFCFA 100%); border-color: var(--line); /* box-shadow: var(--shadow-card); */ transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1), border-color .3s cubic-bezier(.2, .7, .2, 1); } /* Glöd är ett verb även här: kortet lyfter bara när något händer. */html[data-gmfy-theme="light"] .glow-card:hover, html.color-scheme--alt .glow-card:hover, html[data-gmfy-theme="light"] .grev-card:hover, html.color-scheme--alt .grev-card:hover, html[data-gmfy-theme="light"] .card-products-archive:hover, html.color-scheme--alt .card-products-archive:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); } /* ── Bricks eget dragspel ─────────────────────────────────────────────────── .gameify-faq__item (Bricks-byggt dragspel på /tjenester/ och /om-gameify/, 14 instanser) målas med var(--white). I ACSS betyder --white "den ljusa kulören", inte "vit", så i ljust läge blir den #0F1110 — plattan blev mörk medan texten gick till --ink-2 (#4A4F4C). Mörkgrått på nästan svart, 1,4:1. Det är alltså INTE min gfaq-komponent (den använder --bg-elev och var redan rätt) utan Bricks globala klass med samma roll. Den får samma material som övriga kort. */html[data-gmfy-theme="light"] .gameify-faq__item, html.color-scheme--alt .gameify-faq__item { background-color: var(--bg); background-image: linear-gradient(180deg, #FFFFFF 0%, #FBFCFA 100%); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-card); } /* Rubriker inuti dragspelet. Skrivs som separata selektorer, INTE :is(...) — kommatecken inuti en funktionell pseudo-klass går inte att dela på naivt, och duplicerings-steget som la till alt-selektorn gjorde just det. Resultatet blev ogiltig CSS som tystade ALLT efter sig i filen. */ html[data-gmfy-theme="light"] .gameify-faq__item h1, html[data-gmfy-theme="light"] .gameify-faq__item h2, html[data-gmfy-theme="light"] .gameify-faq__item h3, html[data-gmfy-theme="light"] .gameify-faq__item h4, html[data-gmfy-theme="light"] .gameify-faq__item h5, html[data-gmfy-theme="light"] .gameify-faq__item h6, html[data-gmfy-theme="light"] .gameify-faq__item strong, html.color-scheme--alt .gameify-faq__item h1, html.color-scheme--alt .gameify-faq__item h2, html.color-scheme--alt .gameify-faq__item h3, html.color-scheme--alt .gameify-faq__item h4, html.color-scheme--alt .gameify-faq__item h5, html.color-scheme--alt .gameify-faq__item h6, html.color-scheme--alt .gameify-faq__item strong { color: var(--ink); } /* ── Avdelningar ──────────────────────────────────────────────────────────── Mörkt läge skiljer seksjoner med svartnivåer. Ljust läge har inte den marginalen, och en genomgående 1px-linje tvärs sidan läser som ett snitt. En linje som tonar ut i båda ändar avdelar utan att kapa — samma jobb, utan hårdheten. */html[data-gmfy-theme="light"] hr, html.color-scheme--alt hr, html[data-gmfy-theme="light"] .brxe-divider .line, html.color-scheme--alt .brxe-divider .line { border: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%); } /* ── Mjukare kanter ───────────────────────────────────────────────────────── Systemets 2px-kant är ritad för knappar, som ska kunna bära glöd utan att bli tunna (DESIGN.md, Shapes). På ett KORT blir samma vikt ett hårt snitt — det är de ramarna som läser som "för hårda". Kort går till hårfin kant och låter skuggan bära höjden i stället. */html[data-gmfy-theme="light"] .gfaq__item, html.color-scheme--alt .gfaq__item, html[data-gmfy-theme="light"] .grev-card, html.color-scheme--alt .grev-card, html[data-gmfy-theme="light"] .grev__card, html.color-scheme--alt .grev__card, html[data-gmfy-theme="light"] .pcs-card, html.color-scheme--alt .pcs-card, html[data-gmfy-theme="light"] .card-features, html.color-scheme--alt .card-features, html[data-gmfy-theme="light"] .gameify-slikk-fungerer-det-card, html.color-scheme--alt .gameify-slikk-fungerer-det-card { border-width: 1px; } /* .btn--neutral-light beräknas till nästan svart fyllning i BÅDA färglägena (mätt: bg #0F1110 identiskt mörkt/ljust) — den följer alltså inte temat alls. Mot ljust kort blir den en hård svart platta. Här får den samma roll som i resten av systemet: en dämpad sekundärknapp som inte konkurrerar med den gröna primären. OBS: mot mörk sida är samma knapp nästan osynlig. Det är en separat bugg i mörkt läge och rättas inte härifrån. Fyllningen sitter i Bricks per-element-CSS (#brxe-id, specificitet 1,0,0) och går inte att peka om härifrån utan !important — och den behöver det inte: en fylld mörk sekundärknapp bredvid en outline ÄR rätt hierarki. Det som var trasigt var att texten följde med till mörkt och blev svart på svart. Den fyllda får vit text, outline-varianten mörk text på mjukare kant. */ html[data-gmfy-theme="light"] .btn--neutral-light, html.color-scheme--alt .btn--neutral-light { color: #FFFFFF; border-color: var(--line-strong); }html[data-gmfy-theme="light"] .btn--neutral-light.btn--outline, html.color-scheme--alt .btn--neutral-light.btn--outline { background-color: transparent; color: var(--ink); }html[data-gmfy-theme="light"] .btn--neutral-light:hover, html.color-scheme--alt .btn--neutral-light:hover, html[data-gmfy-theme="light"] .btn--neutral-light:focus-visible, html.color-scheme--alt .btn--neutral-light:focus-visible { background-color: var(--ink); color: #FFFFFF; border-color: var(--ink); } /* ── Bilder mot ljus yta ──────────────────────────────────────────────────── Produktfoton ligger på vit platta i båda lägena. Mot mörk sida ramar sidan in dem av sig själv; mot ljus sida flyter de ut i ytan. En hårfin kant räcker för att ge dem tillbaka sin avgränsning. */html[data-gmfy-theme="light"] .woocommerce-product-gallery img, html.color-scheme--alt .woocommerce-product-gallery img, html[data-gmfy-theme="light"] .card-products-archive img, html.color-scheme--alt .card-products-archive img { border-radius: var(--radius-m); } /* ═════════════════════════════════════════════════════════════════════════ 6. HEADER OCH FOOTER I LJUST LÄGE HEADERN FÖLJER NUMERA FÄRGLÄGET. Inledningen högst upp i den här filen sa i åratal motsatsen ("header och footer följer inte med"); det stämmer inte längre och punkt 2 där är uppdaterad. Växlingen görs INTE här utan i components/header/header.css, med ett eget --hdr-*-lager i stället för att flippa ACSS variabler på .header. Varför inte den skiss som stod här förr (blocket som vände --white, --base, --text-light … på .header): ACSS pinnar samma palett på flera selektorer, och en av dem är .brxe-woocommerce-mini-cart. Där ligger hela KUNDVAGNSLÅDAN, inte bara ikonen — den hade vänts till ljus som sidoeffekt av ett headerjobb. Skissen krävde dessutom en andra logotypfil; --hdr-*-lagret färgar i stället om ordbilden i den inlinade SVG:n och slipper två filer som kan glida isär. FOOTERN ÄR MÖRK, ÄVEN I LJUST LÄGE. Den ingick inte i skissen och det är ett medvetet val: en mörk avslutning under en ljus sida är en normal lösning, och den gör att logotypens ordbild inte behöver bytas. ACSS pinning på .footer räcker för att hålla den där — inget eget block behövs. OM DEN NÅGON GÅNG SKA VÄNDAS: greppet är att flippa ACSS variabler på .footer (till skillnad från headern, som har ett eget --hdr-*-lager). Det fungerar här därför att .footer är en egen pinningpunkt utan delade element. Fyra saker måste följa med samtidigt, annars blir footern oläsbar: 1. Globala klassen `footer` har _cssCustom `.footer__description.brxe-text a { color: var(--primary) !important }` — brand-grönt som BLÄCK, 1,5:1 mot ljus yta. Pekas om till var(--green-ink) i byggaren; !important gör att CSS inte kommer åt det. 2. Globala klassen `footer__menu` har samma sak på hover och aktiv. 3. components/newsletter/newsletter.css har ett block med hårdkodade rgba(255,255,255,…) under rubriken "Klar för att stå i en mörk sidfot". Det blocket kan tas bort helt — basreglerna använder redan tokens som växlar rätt i båda lägena. 4. Logotypen i footern är Bricks `logo`-element, alltså en och inte en inlinad SVG som i headern. Grupp-id-tricket i header.css biter inte på den; den behöver en egen fil med grönt märke och mörk ordbild. ═════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════════ 7. SEKTIONSAVDELNING OCH KONTROLLER ÖVER MEDIA ═════════════════════════════════════════════════════════════════════════ */ /* ── spotlight-grey: sektionsavdelaren ────────────────────────────────────── Ligger på åtta sektioner (startsidan, produktarkivet, Om Gameify, produkt- sidan) och är det som skiljer dem åt i mörkt läge. Den är INTE en ljussättning utan en avdelare: gradienten sitter i sektionens ÖVERKANT och är starkast precis där, så ljusstyrkesprånget vid y=0 blir den synliga sömmen mellan två sektioner. Därför behåller ljusa läget geometrin (50% 0%, samma 75 % avtoning) och vänder bara kulören — mörk tvätt istället för ljus. Flyttas gradienten till botten försvinner sömmen helt och sidan blir en sammanhängande vit yta. Kulören är neutral: grönt vore fel här, det är en signalfärg och åtta dekorativa gröna sektioner bryter mot att den ska betyda något. */ html.color-scheme--alt .spotlight-grey, html[data-gmfy-theme="light"] .spotlight-grey { background-image: radial-gradient( ellipse at 50% 0%, rgba(15, 17, 16, .055) 0%, transparent 75% ); } /* ── spotlight: hårdkodad mörk platta ─────────────────────────────────────── Klassen sätter background-color: #0d1117 rakt i sin _cssCustom, en literal som ingen token når. Två block på Om Gameify förblev därför mörka mitt i en ljus sida. Ytan blir kortvit; den gröna radialen får vara kvar men dämpas från .15 till .08 — mot svart läser 15 % som en svag glöd, mot vitt som en tydlig grön tvätt. */ html.color-scheme--alt .spotlight, html[data-gmfy-theme="light"] .spotlight { background-color: var(--bg); background-image: radial-gradient( ellipse at 50% 0%, rgba(158, 230, 39, .08) 0%, transparent 60% ); border: 1px solid var(--line); border-radius: var(--radius-m); } /* ── Kontroller som ligger ÖVER bilder ────────────────────────────────────── Galleriets paus-knapp och prickar svävar över fotografier, inte över sidans yta. Bilderna är lika mörka i båda färglägena, så kontrollerna ska bära ljust bläck oavsett tema — precis som .has-bg-video i avsnitt 5. Buggen: knappen ärvde color: var(--ink), som i ljust läge blir #0F1110, på background: rgba(10,10,10,.55). Mörk ikon på mörk platta, oläslig. Aktiv prick hade samma problem: --green-ink är #3F7000 i ljust läge och försvinner mot ett foto. Över media gäller brand-grönt. */ html.color-scheme--alt .ggal__toggle, html[data-gmfy-theme="light"] .ggal__toggle { color: #fff; border-color: rgba(255, 255, 255, .22); background: rgba(10, 10, 10, .55); } html.color-scheme--alt .ggal__toggle:hover, html[data-gmfy-theme="light"] .ggal__toggle:hover { background: rgba(10, 10, 10, .8); border-color: rgba(255, 255, 255, .35); } html.color-scheme--alt .ggal__dot.is-active::before, html[data-gmfy-theme="light"] .ggal__dot.is-active::before { background: var(--primary); } html.color-scheme--alt .ggal__dot:focus-visible, html.color-scheme--alt .ggal__toggle:focus-visible, html[data-gmfy-theme="light"] .ggal__dot:focus-visible, html[data-gmfy-theme="light"] .ggal__toggle:focus-visible { outline-color: var(--primary); } /* ── Filterchips och filterknapp (produktarkivet) ─────────────────────────── Båda målas med var(--black). I ACSS betyder --black "den mörka kulören", inte "svart" — ljust läge vänder den till #FFFFFF, och resultatet blev vita chips på ett vitt kort, helt utan kant. Samma fälla som .gameify-faq__item med --white; leta efter fler ytor målade med polaritetsbärande tokens. Översättningen behåller RELATIONEN, inte kulören: i mörkt läge är chipset #000 mot kortets #131313, alltså en nedsänkt yta som viker undan för kortet. Ljust läge speglar det med --bg-sunken mot kortvitt. Att behålla svart bokstavligt hade vänt relationen — sju massiva svarta block som hoppar fram ur sidan i stället för att ligga still. */ /* Bricks per-element-CSS vinner med ID-specificitet: #brxe-ytwbot[data-mode="button"] .bricks-button (1,2,1) Ingen klass-selektor kan slå den utan !important. Men regeln läser TOKENS — background-color: var(--bg-ultra-dark) och color: var(--white) — så i stället för att slåss om specificiteten sätts tokens om, scopat till filterelementet. Bricks egen regel producerar då rätt kulör av sig själv. Samma grepp funkar överallt där Bricks per-element-CSS står i vägen. */ html[data-gmfy-theme="light"] .brxe-filter-checkbox, html.color-scheme--alt .brxe-filter-checkbox { --bg-ultra-dark: var(--bg-sunken); --white: var(--ink-2); } html[data-gmfy-theme="light"] .brxe-filter-checkbox label:hover, html.color-scheme--alt .brxe-filter-checkbox label:hover { --white: var(--ink); } /* Kanten sätts inte av Bricks, så den kan tas direkt. */ html[data-gmfy-theme="light"] .brx-option-text.bricks-button, html.color-scheme--alt .brx-option-text.bricks-button { border-color: var(--line); } html[data-gmfy-theme="light"] label:hover .brx-option-text.bricks-button, html.color-scheme--alt label:hover .brx-option-text.bricks-button { border-color: var(--line-strong); } /* Valt chip: grönt bläck bär markeringen redan, men mot en ljus platta behöver det tonen under sig för att läsas som "på" och inte bara som färgad text. --green-ink mot --primary-ultra-light ger 6,0:1. */ html[data-gmfy-theme="light"] .brxe-filter-checkbox label:has(:checked), html.color-scheme--alt .brxe-filter-checkbox label:has(:checked) { --bg-ultra-dark: var(--primary-ultra-light); } html[data-gmfy-theme="light"] label:has(:checked) .brx-option-text.bricks-button, html.color-scheme--alt label:has(:checked) .brx-option-text.bricks-button { border-color: var(--green-ink); } /* Filterknappen: svart fyllning med ljus text i mörkt läge, men i ljust blev den grått på grått (#989898 botten, #6B6C6C text — ca 1,9:1). Den är en sekundär handling bredvid chipsen, så den blir outline i stället för fylld. */ html[data-gmfy-theme="light"] .brxe-filter-submit.btn--neutral, html.color-scheme--alt .brxe-filter-submit.btn--neutral { background-color: transparent; border-color: var(--line-strong); color: var(--ink); } html[data-gmfy-theme="light"] .brxe-filter-submit.btn--neutral:hover, html.color-scheme--alt .brxe-filter-submit.btn--neutral:hover { background-color: var(--ink); border-color: var(--ink); color: #fff; } /* ═════════════════════════════════════════════════════════════════════════ 8. PC-BYGGARENS SCEN ═════════════════════════════════════════════════════════════════════════ */ /* .pcb deklarerar sina egna lokala tokens (--art-*, --shadow) rakt på roten i pc-builder.css. De ligger utanför temats semantiska lager och följde därför inte med när sidan vände: hela scenen förblev en svart platta mitt på en ljus sida. Selektorn nedan är html[…] .pcb (0,2,1) och vinner över .pcb (0,1,0). ÖVERSÄTTNINGEN VÄNDER SCENEN, INTE CHASSIT. Illustrationen föreställer en svart dator, och en svart dator är svart oavsett vilket färgläge sidan står i — inverteras den blir det en annan produkt. Det som vänder är ytan den står på. Chassit läser då som ett mörkt föremål mot ljus bakgrund i stället för mörkt mot mörkt, alltså HÖGRE kontrast än i mörkt läge, inte lägre. Av samma skäl lämnas --art-shadow svart: golvskuggan på 35 % ger en tydlig grå ellips mot den ljusa scenen, vilket är precis vad den ska göra. */ html[data-gmfy-theme="light"] .pcb, html.color-scheme--alt .pcb { --art-bg-1: var(--bg-page); --art-bg-2: var(--bg-sunken); /* Hovringsskuggan på valkorten är tung svart (.4/.35) — rätt mot #0a0a0a, smutsig mot vitt. Temats ljusa skuggor finns redan definierade. */ --shadow: var(--shadow-card-hover); --shadow-lg: var(--shadow-elev); } /* Grön ambiens i scenen — MEDVETET SOM BAKGRUNDSGRADIENT, INTE SOM BLURRAT LAGER. Referensen får sin gröna dis från ett element med filter: blur(). .pcb-build-stage har overflow: hidden, så ett sådant lager kapas rakt av mot scenens kant och lämnar den hårda gröna fyrkanten i övre vänstra hörnet. Mot svart syns kapningen inte (grönt mot svart tonar ut i ingenting), mot ljust blir den en kil. En gradient i background-image kan inte ge den artefakten, förutsatt att den når transparent innan den rör kanten. Därför är den liten och väl innanför: centrum 34%/24%, radie 52%/38%, helt utslocknad vid 72 % — ytterkanten hamnar runt 50 % in på scenen och nuddar aldrig overflow-kanten. Grönt vid .18 är utgångsvärdet. Det är den enda siffran som ska röras om ambiensen känns för svag eller för skrikig; geometrin ska stå. */ html[data-gmfy-theme="light"] .pcb-build-stage, html.color-scheme--alt .pcb-build-stage { background-image: radial-gradient(52% 38% at 34% 24%, rgba(158, 230, 39, .18) 0%, transparent 72%), linear-gradient(180deg, var(--art-bg-1), var(--art-bg-2)); }