/* =========================================================================== * Loyal Sathi — shop theming * * A shop supplies two colours. Everything else is worked out here. * * --main the dark brand tone: headers, buttons, body text * --accent the stamps, the highlights, the call to action * --on-main light or dark text for sitting on --main (set by PHP) * --accent-ink a darkened accent that is readable as text (set by PHP) * * Those four arrive as an inline style on the element carrying .ls-themed — * index.php puts it on , and the settings page puts it on the little * preview card. Because both use this same file, the preview cannot drift * away from the real thing. * * Mixing happens in oklab rather than sRGB: blending a saturated colour * toward white in sRGB drains the hue out of it and leaves the tints looking * muddy, where oklab keeps them recognisably the shop's colour. * * Used by everything a shop owns — their customers' card and their own admin * panel — because the panel is their view of their business, not a platform * tool. The super admin panel deliberately does not carry .ls-themed, so it * keeps the fixed platform palette from tokens.css whichever shop you are * looking at. * ======================================================================== */ .ls-themed{ /* --- brand ------------------------------------------------------------ */ --navy: var(--main); --navy-deep: color-mix(in oklab, var(--main) 74%, #000); --navy-soft: color-mix(in oklab, var(--main) 86%, #fff); --ink: color-mix(in oklab, var(--main) 88%, #000); --gold: var(--accent); --gold-soft: color-mix(in oklab, var(--accent) 46%, #fff); /* Accent-coloured text and small icons on a light surface. The plain accent is a fill colour and rarely readable; PHP darkens it until it is. */ --gold-ink: var(--accent-ink); --gold-wash: color-mix(in oklab, var(--accent) 17%, #fff); --cream: color-mix(in oklab, var(--accent) 6%, #fff); /* --- surfaces --------------------------------------------------------- Tinted a few percent toward the accent so the page reads as one piece rather than as brand colours dropped onto a stock grey background. */ --bg: color-mix(in oklab, var(--accent) 9%, #fff); --surface: #fff; --surface-2: color-mix(in oklab, var(--accent) 6%, #fff); --surface-3: color-mix(in oklab, var(--accent) 13%, #fff); --line: color-mix(in oklab, var(--accent) 20%, #fff); --line-strong: color-mix(in oklab, var(--accent) 33%, #fff); /* --- text ------------------------------------------------------------- Carrying a little of the main colour keeps body copy from looking like plain black sitting on a coloured page. */ --text: color-mix(in oklab, var(--main) 86%, #000); --text-muted: color-mix(in oklab, var(--main) 62%, #fff); --text-soft: color-mix(in oklab, var(--main) 42%, #fff); --text-on-dark: var(--on-main); /* --- composed ---------------------------------------------------------- */ --grad-navy: linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%); --grad-gold: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, color-mix(in oklab, var(--accent) 80%, #000) 100%); --shadow-gold: 0 8px 28px color-mix(in srgb, var(--accent) 32%, transparent); } /* Browsers without color-mix keep tokens.css's fixed palette, so the card is still perfectly usable — it simply is not in the shop's own colours. */ @supports not (color: color-mix(in oklab, red 50%, blue)){ .ls-themed{ --navy: var(--main); --gold: var(--accent); --text-on-dark: var(--on-main); --gold-ink: var(--accent-ink); } } /* ---------------------------------------------------------- cover image --- */ /* * An optional photo across the top of the card. The shop chooses the picture; * we cannot choose how busy it is, so the name and tagline always sit on a * gradient scrim in the shop's own main colour. That keeps the text readable * over a bright sky or a white wall without washing the photo out. */ .has-cover .topbar{ position: relative; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--main) 35%, transparent) 0%, color-mix(in srgb, var(--main) 88%, transparent) 100%), var(--cover-image); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 132px; align-items: flex-end; } .has-cover .topbar .brand, .has-cover .topbar .tagline{ text-shadow: 0 1px 3px color-mix(in srgb, var(--main) 70%, transparent); }