/* selfievo-ui · brand/customers.css — one block per customer. That is the whole system. ──────────────────────────────────────────────────────────────────── TO ONBOARD A NEW CUSTOMER 1. Drop their logo in `brand/customers/.`. Prefer SVG. Prefer a variant that reads on a charcoal background — colour usually beats the black-on-transparent "BW" cut. 2. Add one block below. 3. Nothing else. No template edit, no Python, no rebuild. ──────────────────────────────────────────────────────────────────── The key is a PREFIX of the tenant slug, not the whole slug, because one brand is many tenants. Aukro is `aukro` and `aukro.cz-preprod`; Heureka is `heureka-production`, `heureka-demo` and `heureka-webinar-demo`; 4camping is `4camping.cz` and `4camping-test`. Twelve prefixes cover nineteen live tenants, and a new `-staging` or `-preprod` variant of any of them is covered on the day it is created without touching this file. That is also the bug this file shipped with in v0.7.0. The keys were invented — `citfin`, `heureka-group`, `vyprodej-povleceni` — and matched exactly ONE of the ninety-eight real tenants, `aukro`. Every other customer fell back to a monogram. The slugs below were read from the live registry (`cc_tenant_directory`), not guessed. A prefix is only safe while no unrelated brand starts with it. All twelve were checked against the full registry and none collides. Check again before adding a short one. A customer with no block is not broken: `partials/_brand.html` falls back to a monogram built from the slug, so an unknown tenant still gets an identity. Seventy-nine of the ninety-eight tenants are in that state today — the design system simply has no artwork for them, and its readme is explicit that missing assets are to be asked for, never approximated. Two knobs, and only two: --brand-customer-logo the file from step 1, followed by `var(--brand-tile)`. It is a full `background` shorthand: the tile's opaque colour is what covers the monogram underneath, so a logo with a transparent background never shows two identities at once. --brand-customer-tint their colour, used ONLY on the monogram that stands in when they have no logo. It never becomes the product accent: the design system gives the orange 100 % of the brand energy, and spending it per tenant would leave the product with no voice of its own. Omit it and the lockup uses the orange. The selector is a bare attribute, not `:root`, on purpose. A token set on an element BELOW the root wins by INHERITANCE, so it cannot be beaten by a later `:root` rule in another stylesheet — specificity never enters it. It also means the attribute works ANYWHERE: on it themes a whole page, and on one

it themes that row alone, which is what lets the customer picker show nineteen different logos on one screen. Tints were sampled from the logo files themselves (most saturated bright pixel), not invented, and each one clears 3:1 on --surface. WHICH TILE. A mark drawn for a white page — navy, deep red, black — is invisible on charcoal, so it names `--brand-tile-plate` and sits on light instead. That is not a compromise: it is showing the mark on the background its owner drew it for. Twelve of the thirty-six need it, and which twelve was decided by LOOKING at every logo on both tiles at the real size, because measuring "is this readable" kept disagreeing with the eye — Citfin measured 91 % readable and was unreadable on screen. Inverting is only an option for a GREYSCALE mark; inverting a colour mark turns a navy brand orange. */ /* ---- Colour logos: read as-is on charcoal ---- */ [data-customer^="4camping"] { /* 4camping.cz · 4camping-test */ --brand-customer-logo: url("customers/4camping.png") var(--brand-tile); --brand-customer-tint: #009EE4; } [data-customer^="aukro"] { /* aukro · aukro.cz-preprod */ --brand-customer-logo: url("customers/aukro.png") var(--brand-tile); --brand-customer-tint: #FF5721; } [data-customer^="citfin"] { /* citfin.cz */ --brand-customer-logo: url("customers/citfin.png") var(--brand-tile-plate); --brand-customer-tint: #95C317; } [data-customer^="heureka"] { /* heureka-production · -demo · -webinar-demo */ --brand-customer-logo: url("customers/heureka-group.png") var(--brand-tile-plate); --brand-customer-tint: #0096FF; } [data-customer^="onio"] { /* onio.cz · onio-test */ --brand-customer-logo: url("customers/onio.png") var(--brand-tile); --brand-customer-tint: #ED9A3C; } [data-customer^="raynet"] { /* raynet-production · raynet-dev-test */ --brand-customer-logo: url("customers/raynet.svg") var(--brand-tile); --brand-customer-tint: #00B2BB; } [data-customer^="ricany"] { /* ricany-mesto · ricany-demo */ --brand-customer-logo: url("customers/ricany.png") var(--brand-tile); --brand-customer-tint: #64AE22; } [data-customer^="skippay"] { /* skippay.cz */ --brand-customer-logo: url("customers/skippay.png") var(--brand-tile-plate); --brand-customer-tint: #1D82F1; } [data-customer^="vyprodejpovleceni"] { /* vyprodejpovleceni.cz */ --brand-customer-logo: url("customers/vyprodej-povleceni.avif") var(--brand-tile-plate); --brand-customer-tint: #3D9CA0; } /* ---- Marks that shipped black-on-transparent ---- Their PNGs were inverted once, on the way into this package, rather than flipped with a CSS filter: a filter over the logo layer would invert the opaque tile behind it too and leave a white square on a charcoal page. The asset now ships in the form the dark surface needs. No tint: a black mark carries no colour to borrow, so these lockups keep the product orange. */ [data-customer^="fabini"] { /* fabini.cz */ --brand-customer-logo: url("customers/fabini.png") var(--brand-tile); } [data-customer^="knihydobrovsky"] { /* knihydobrovsky.cz */ --brand-customer-logo: url("customers/knihy-dobrovsky.png") var(--brand-tile); } [data-customer^="rituals"] { /* rituals.cz */ --brand-customer-logo: url("customers/rituals.png") var(--brand-tile); } /* ============================================================ Marks fetched from each customer's own site ============================================================ The twelve blocks above use artwork supplied with the design system. The blocks below do not: their marks were pulled from each tenant's website because no artwork was supplied for them. That is a deliberate exception to the design system's rule that a missing asset is asked for and never approximated, and it is why they are kept in their own section — replace any of them the moment real artwork arrives. Twenty-four of fifty-one sites yielded a mark I could confirm belonged to the tenant. The rest are still monograms: scraping a homepage reliably returns the wrong thing — a payment badge, a hosting sticker, a brand the shop resells — and a logo that names the wrong company is worse than initials. Seven of them are drawn for a white page and vanish on charcoal, so they name `--brand-tile-plate` instead of `--brand-tile`. Inverting them was not an option: these are colour marks, and inverting one turns a navy brand orange. */ [data-customer^="blazekfm"] { --brand-customer-logo: url("customers/blazekfm.cz.png") var(--brand-tile); --brand-customer-tint: #EC0D16; } [data-customer^="blueroad"] { --brand-customer-logo: url("customers/blueroad.cz.png") var(--brand-tile); } [data-customer^="czechsporttravel"] { --brand-customer-logo: url("customers/czechsporttravel.cz.png") var(--brand-tile); --brand-customer-tint: #A8D640; } [data-customer^="dertouristik"] { --brand-customer-logo: url("customers/dertouristik.cz.png") var(--brand-tile); --brand-customer-tint: #F7002B; } [data-customer^="earplugs"] { --brand-customer-logo: url("customers/earplugs.cz.png") var(--brand-tile-plate); } [data-customer^="elny"] { --brand-customer-logo: url("customers/elny.cz.png") var(--brand-tile); --brand-customer-tint: #00A4E8; } [data-customer^="eppi"] { --brand-customer-logo: url("customers/eppi.cz.png") var(--brand-tile-plate); } [data-customer^="fanda-nhl"] { --brand-customer-logo: url("customers/fanda-nhl.cz.png") var(--brand-tile-plate); } [data-customer^="golden-gate"] { --brand-customer-logo: url("customers/golden-gate.png") var(--brand-tile-plate); } [data-customer^="higarden"] { --brand-customer-logo: url("customers/higarden.cz.png") var(--brand-tile); } [data-customer^="husse"] { --brand-customer-logo: url("customers/husse.cz.png") var(--brand-tile); } [data-customer^="kapritz"] { --brand-customer-logo: url("customers/kapritz.sk.png") var(--brand-tile); --brand-customer-tint: #01A6E5; } [data-customer^="legitas"] { --brand-customer-logo: url("customers/legitas.png") var(--brand-tile-plate); } [data-customer^="livero"] { --brand-customer-logo: url("customers/livero.cz.png") var(--brand-tile); } [data-customer^="monkeymum"] { --brand-customer-logo: url("customers/monkeymum.png") var(--brand-tile); } [data-customer^="movitenergy"] { --brand-customer-logo: url("customers/movitenergy.cz.png") var(--brand-tile-plate); } [data-customer^="olivie"] { --brand-customer-logo: url("customers/olivie.cz.png") var(--brand-tile); } [data-customer^="pepperfield"] { --brand-customer-logo: url("customers/pepperfield.cz.png") var(--brand-tile); } [data-customer^="protrek"] { --brand-customer-logo: url("customers/protrek.cz.png") var(--brand-tile); } [data-customer^="sanvio"] { --brand-customer-logo: url("customers/sanvio.cz.png") var(--brand-tile-plate); } [data-customer^="smartemailing"] { --brand-customer-logo: url("customers/smartemailing.cz.png") var(--brand-tile-plate); --brand-customer-tint: #4FAF3A; } [data-customer^="tdt"] { --brand-customer-logo: url("customers/tdt.cz.png") var(--brand-tile); --brand-customer-tint: #97BD08; } [data-customer^="tipa"] { --brand-customer-logo: url("customers/tipa.eu.png") var(--brand-tile); --brand-customer-tint: #00A6E4; } [data-customer^="zvirecipotreby"] { --brand-customer-logo: url("customers/zvirecipotreby.cz.png") var(--brand-tile); --brand-customer-tint: #249824; }