/* =========================================================================== Krila storefront --------------------------------------------------------------------------- THREE PALETTES, ONE STYLESHEET. The owner asked to see soft, bold and deep before choosing. They are not three stylesheets: every colour in this file is a token, and a theme is only a different set of token values on . That means a layout fix lands in all three at once and they can never drift apart. The live theme comes from the site_theme setting, so it is changed in the console. Adding ?theme=bold or ?theme=deep to any URL previews another one without changing the setting. FILL COLOURS ARE NOT TEXT COLOURS. The logo red is beautiful as a button and fails AA as a word on ivory, so it exists twice: --accent for fills, shapes and borders, --accent-ink for the same colour used as letters. Contrast is not eyeballed here: tests/contrast.test.js measures every pair in this file and fails the build under 4.5:1 for body text and 3:1 for large text and interface edges. =========================================================================== */ /* --- Soft luxe: the default, and the one chosen for launch ---------------- */ :root { --bg: #FBF8F5; --surface: #FFFFFF; --surface-2: #F7F1EC; --panel: #F1E4DE; --panel-2: #E9D9D2; --ink: #221D1B; --ink-2: #574E49; --ink-3: #6E635D; --on-accent: #FFFFFF; --line: #E4DAD2; --line-2: #D6C9BF; /* The edge of a control is a user interface boundary and has to clear 3:1, which a decorative hairline does not. They were the same token until tests/contrast.test.mjs measured it at 1.6:1 and the input borders were effectively invisible. Two tokens now: --line-2 divides, --control outlines something you can click. */ --control: #948779; /* Text sitting ON a panel. In the bold palette a panel is near black, so --ink on --panel was black on black: invisible copy that read as a blank hero. Every palette now states what colour words go on its panel. */ --on-panel: #221D1B; --on-panel-2: #574E49; --accent: #C8202A; --accent-shape: #C8202A; --accent-ink: #AB1A22; --accent-soft: #F6E4E2; --accent-hover: #A5141C; --ok: #1F6B4B; --warn: #8A5A12; --error: #A32017; --focus: #1F5FBF; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(34, 29, 27, .06), 0 4px 14px rgba(34, 29, 27, .05); --shadow-2: 0 12px 34px rgba(34, 29, 27, .12); --display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1240px; --header-h: 68px; } /* --- Bold: the logo's own red and black ---------------------------------- */ :root[data-theme="bold"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F4; --panel: #111111; --panel-2: #1D1D1D; --ink: #111111; --ink-2: #444444; --ink-3: #595959; --on-accent: #FFFFFF; --line: #E0E0E0; --line-2: #C4C4C4; --control: #8A8A8A; /* A bold panel is a black block, so the words on it are white. */ --on-panel: #FFFFFF; --on-panel-2: #D8D8D8; --accent: #D81F26; --accent-shape: #D81F26; --accent-ink: #B8161C; --accent-soft: #FDECEC; --accent-hover: #9E1218; --ok: #14663F; --warn: #7A4E0B; --error: #A81C13; --radius: 4px; --radius-sm: 3px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .06); --shadow-2: 0 14px 34px rgba(0, 0, 0, .18); } /* --- Deep: charcoal and plum, an evening palette ------------------------- */ :root[data-theme="deep"] { --bg: #17161A; --surface: #201E24; --surface-2: #29262E; --panel: #3A2833; --panel-2: #46303D; --ink: #F4EFEA; --ink-2: #CFC5BE; --ink-3: #B4A9A2; --on-accent: #FFFFFF; --line: #38333C; --line-2: #4A434F; --control: #7A7182; --on-panel: #F4EFEA; --on-panel-2: #CFC5BE; /* White on #E23237 measures 4.43:1, which is under AA, and 3.63:1 on the brighter hover. A button is words, so the fill darkens; --accent-shape keeps the true logo red for anything that is not carrying text. */ --accent: #C41F27; --accent-shape: #E23237; --accent-ink: #FF8A86; --accent-soft: #3A2226; --accent-hover: #AD1720; --ok: #6FD6A6; --warn: #E9BE72; --error: #FF938C; --focus: #8FB8FF; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); --shadow-2: 0 16px 40px rgba(0, 0, 0, .55); } /* =========================================================================== Base =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; letter-spacing: .002em; } h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem); } h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem); } h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); } p { margin: 0 0 1em; } /* Every interactive thing shows where the keyboard is. Never remove this without replacing it: a shopper on a keyboard loses the page otherwise. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .wrap-narrow { max-width: 780px; } .kicker { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin: 0 0 .8em; } .section { padding: clamp(48px, 6vw, 88px) 0; } .section-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 48px); } .section-head p { color: var(--ink-2); margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 12px 18px; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* =========================================================================== Buttons =========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--body); font-size: .95rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none; text-align: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-ink { background: var(--ink); color: var(--bg); } .btn-ink:hover { background: var(--ink-2); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--control); } .btn-outline:hover { background: var(--surface-2); border-color: var(--ink-3); } /* On a panel the outline button borrows the panel's own text colour, or it vanishes wherever the panel is dark. */ .hero-copy .btn-outline, .band-copy .btn-outline { color: var(--on-panel); border-color: currentColor; } .hero-copy .btn-outline:hover, .band-copy .btn-outline:hover { background: color-mix(in srgb, var(--on-panel) 12%, transparent); border-color: currentColor; } /* Used on a bare