/* --------------------------------------------------------------------------- Colour palettes — the only file in css/ that contains a colour literal. style.css never names a hue. It asks for a ROLE (--c-primary, --c-dark, --c-signal) and this file decides what colour that role is. That split is what makes a palette swap safe: previously the site had a variable called --green holding a brown value, which is how a stylesheet starts lying to the next person who reads it. HOW TO SWITCH PALETTE --------------------- Permanently: move the `:root,` prefix onto the palette you want. That is the whole change — one line, this file, nothing else. The site's markup never names a palette. The `html` in `html[data-palette="..."]` is load-bearing; do not drop it. A bare attribute selector is (0,1,0), exactly the same as `:root`, and `:root` matches the html element unconditionally — so whichever of the two came later in the file won, and every ?palette= preview silently rendered the default instead. Adding `html` makes the named blocks (0,1,1) so they outrank `:root` no matter where the default block sits. To preview without committing: add data-palette to the html element or append ?palette=zold to any URL (see the inline script in ). Roles come from the brand sheet's own labels: oldalháttér, kártya, sötét felület, elsődleges, kiemelés sötét sávon, jelzés, hajszálvonal. ADDING A PALETTE ---------------- Copy a block, rename the attribute value, replace the values. Every role below must be present — a missing one silently inherits from :root and you get one stray colour from the other scheme. Two contrast constraints the components assume. Check them, because a palette that breaks either still *looks* fine while failing WCAG AA: --c-signal carries --c-on-dark text on the .tag badge (13.5px, so it needs 4.5:1, not the 3:1 large-text allowance), and appears as link text on --c-page in the nav. --c-highlight must reach 4.5:1 on --c-dark; it is the headline accent and the price figure on every dark band. All three palettes below satisfy both. The -rgb triplets are the same colours as their named counterparts, kept as bare channels so they can be used at partial opacity: rgb(var(--c-page-rgb) / .92). A plain hex cannot do that, which is why six overlay colours used to be hardcoded. Per-palette logo/favicon/avatar files live in brand//; the copies at brand/ top level are the active set. See brand/BRAND.md. --------------------------------------------------------------------------- */ /* === Bükk & antracit ==================================================== */ html[data-palette="bukk"] { /* surfaces */ --c-page: #FBF8F3; /* oldalháttér */ --c-surface: #FFFFFF; /* kártya, nav, beviteli mező */ --c-dark: #2A2724; /* sötét felület: IKEA-sáv, összegző, láblécek */ --c-dark-raised: #3A342C; /* kiemelt panel / elválasztó a sötét felületen */ /* primary — bükk */ --c-primary: #7A5230; /* elsődleges: gombok, linkek, ikonok, logó */ --c-primary-dark: #523620; /* hover / pressed. NOT a surface in this palette */ --c-primary-light: #9A6C41; /* pulzáló pont, gomb-hover sötéten */ --c-primary-tint: #F2E9DD; /* ikon-chip, ársáv háttér */ /* highlight on dark — homok */ --c-highlight: #E0B579; /* kiemelt címsorrész és összeg sötét sávon */ /* signal — petrol. Figures and badges only, never a primary button. */ --c-signal: #2F6E62; /* megtakarítás összege, IKEA-konyha link */ --c-signal-light: #43907F; /* badge kitöltés sötéten */ --c-signal-dark: #1F5049; /* pressed */ /* type */ --c-heading: #22201D; /* címsorok */ --c-body: #4A443C; /* folyószöveg */ --c-muted: #6E665B; /* képaláírás, meta */ --c-on-dark: #F5F0E8; /* főszöveg sötéten */ --c-on-dark-2: #E3D7C4; /* másodlagos sötéten */ --c-on-dark-3: #C4B79F; /* képaláírás sötéten */ /* lines */ --c-border: #EAE1D3; /* hajszálvonal, kártyakeret */ --c-border-soft: #F1E9DC; /* sorelválasztó a kalkulátorban */ --c-border-strong: #D9CDB9; /* mező- és másodlagos gomb keret */ /* state */ --c-error: #FFD9C2; /* űrlaphiba a sötét/elsődleges panelen */ /* channels for partial opacity — same colours as above */ --c-page-rgb: 251 248 243; --c-primary-rgb: 122 82 48; --c-shadow-rgb: 34 32 29; } /* === Bükk & fenyő ======================================================== Bükk's warm materials against a cool forest-green dark instead of a neutral anthracite, with a copper accent replacing petrol. Why the accent had to move: petrol sits in the same hue family as this dark surface, so the badge sank into the band it is supposed to stand on (ΔE 25 — technically separate, visibly not). Copper is the opposite temperature to the surface, which is what makes it read as a signal here (ΔE 51 from the dark). The known trade: copper is only ΔE 12 from --c-primary, so on light surfaces it reads as a beech relative rather than a separate colour. It bites in exactly one place — the savings figure sitting near beech text — and every alternative that is both AA-compliant and clearly distinct from beech turned out to be a red, which is the wrong signal for "megtakarítás" and "ingyenes". Warm-on-warm was accepted deliberately over red. Verified in the places these are actually used: nav link 5.2:1 on paper, badge text 4.8:1 on the fill, sand highlight 6.8:1 on the dark, savings figure 6.3:1 on tint. Body text on the dark surface is 11.3:1. */ :root, html[data-palette="bukk-fenyo"] { --c-page: #FBF8F3; --c-surface: #FFFFFF; --c-dark: #203632; /* fenyő — cool, unlike Bükk's neutral antracit */ --c-dark-raised: #2C4641; /* 1.26 against the dark: a hairline, not a band */ --c-primary: #7A5230; --c-primary-dark: #523620; --c-primary-light: #9A6C41; --c-primary-tint: #F2E9DD; --c-highlight: #E0B579; /* sand still carries on the cooler dark */ --c-signal: #975A32; /* réz — badge fill, IKEA-konyha link */ --c-signal-light: #B87340; /* currently unreferenced; completes the ramp */ --c-signal-dark: #7A4726; /* nav hover, savings figure */ --c-heading: #22201D; --c-body: #4A443C; --c-muted: #6E665B; --c-on-dark: #F5F0E8; --c-on-dark-2: #E3D7C4; --c-on-dark-3: #C4B79F; --c-border: #EAE1D3; --c-border-soft: #F1E9DC; --c-border-strong: #D9CDB9; --c-error: #FFD9C2; --c-page-rgb: 251 248 243; --c-primary-rgb: 122 82 48; --c-shadow-rgb: 34 32 29; } /* === Zöld (the original scheme) ========================================= Note: --c-dark is a single value here, so the IKEA band, the summary card and the footer all share it. The original site used two different darks (#1F4E39 for the band, #143224 elsewhere); that split does not survive the move to role-based tokens, and the palette rules call for one dark surface per page anyway. Switching back to Zöld gives a tidier two-tone page than the site originally had, not a byte-for-byte restoration. The amber ramp is shifted one step darker than the original site's. At the old values --c-signal #B4762A gave 3.2:1 behind the .tag badge and 3.5:1 as the nav link, against 4.5:1 at those sizes. Both were latent rather than new: the nav colour never applied at all because of a specificity bug, and the badge used the lighter step with dark text, so neither failure was visible until those two rules started working. Shifting rather than merely darkening keeps three distinct steps — the old base becomes the light step, and #6B4518 extends the ramp at the bottom. Now 5.5:1 for the nav link, 5.1:1 for the badge, 7.4:1 for the savings figure. #D99A3D, the original lightest amber, is dropped: it is too pale to carry light text and nothing else used it. */ html[data-palette="zold"] { --c-page: #FAF7F2; --c-surface: #FFFFFF; --c-dark: #143224; --c-dark-raised: #3A332B; --c-primary: #2E6B4F; --c-primary-dark: #1F4E39; --c-primary-light: #3D9467; --c-primary-tint: #EAF2ED; --c-highlight: #8FCBAA; --c-signal: #8A5A20; --c-signal-light: #B4762A; --c-signal-dark: #6B4518; --c-heading: #26211B; --c-body: #4A4238; --c-muted: #6B6053; --c-on-dark: #F3EDE3; --c-on-dark-2: #D6E6DC; --c-on-dark-3: #CDBFA8; --c-border: #E9E2D6; --c-border-soft: #F0EAE0; --c-border-strong: #D8CFC0; --c-error: #FFD9C2; --c-page-rgb: 250 247 242; --c-primary-rgb: 46 107 79; --c-shadow-rgb: 38 33 27; }