/*! Kvant brand — CSS custom properties + SSR utility classes.
* Source of truth: kvant.tokens.json. Keep values in sync by hand.
* Values transcribed from the official Kvant Brand Guide PDF.
*
* Use when you are NOT running a Tailwind build (plain HTML, htmx / maler
* server-rendered fragments):
*
* Then either use the CSS variables directly or the .kvant-* helpers below.
*
* Variable names are semantic roles (--kvant-ink, --kvant-indigo, …), not
* the guide's literal colour names — see the mapping table below. Roles are
* kept stable across brand-guide revisions; only their values change.
*
* role guide name hex used by app code
* --kvant-ink Core Black #282926 body text, logos, CTAs
* --kvant-ink-muted Carbon Grey #4A4B46 secondary text, containers on Core Black
* --kvant-slate System Teal #759093 eyebrows, captions, containers on Base/Core/Mint
* --kvant-surface Surface White #FFFFFF page background
* --kvant-surface-alt Base Grey #F4F4F4 section background, neutral ground
* --kvant-indigo Quantum Blue #5F5AFF the ONE electric accent — icons, small type details, sparingly
* --kvant-mint-bg Surface Mint #ECFCEC positive surface tint
* --kvant-pixel-black Pixel Black #000000 graphic PATTERNS ONLY — never text/UI/background
*
* --kvant-mint (#8ED899) and --kvant-coral / --kvant-coral-bg are success/
* error UI states the print guide doesn't define (it has no semantic status
* colours) — drawn from the guide's data-visualisation palette rather than
* invented from scratch, but treat them as an app-level extension, not core
* brand colour. Never substitute for Quantum Blue as *the* accent.
*
* Fonts are self-hosted from brand/fonts/ (see @font-face below) so every
* visitor gets the real Kvant typefaces, not a system-font substitute.
*
* Dark mode: automatic via prefers-color-scheme, or force it with
* / , or the .dark class.
*/
@font-face {
font-family: "ALT Maria Clara";
src: url("./fonts/alt-maria-clara.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "TeX Gyre Heros";
src: url("./fonts/texgyreheros-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "TeX Gyre Heros";
src: url("./fonts/texgyreheros-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "TeX Gyre Heros";
src: url("./fonts/texgyreheros-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "TeX Gyre Heros";
src: url("./fonts/texgyreheros-bolditalic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&display=swap");
:root {
/* Brand */
--kvant-indigo: #5F5AFF;
--kvant-indigo-ink: #FFFFFF;
--kvant-ink: #282926;
--kvant-ink-muted: #4A4B46;
--kvant-slate: #759093;
--kvant-pixel-black: #000000; /* patterns only — see note above */
/* Surfaces */
--kvant-surface: #FFFFFF;
--kvant-surface-alt: #F4F4F4;
--kvant-border: #E6E6E6;
--kvant-border-strong: #DBDBD7;
/* Status (app extension, sourced from the guide's data-viz palettes) */
--kvant-mint-bg: #ECFCEC;
--kvant-mint: #8ED899;
--kvant-coral-bg: #FFC7CC;
--kvant-coral: #FF8A80;
/* Neutrals */
--kvant-neutral: #B9BAB5;
--kvant-neutral-strong: #999999;
/* Type */
--kvant-font-display: "ALT Maria Clara", "Archivo Black", Impact, sans-serif;
--kvant-font-sans: "TeX Gyre Heros", Helvetica, Arial, sans-serif;
--kvant-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--kvant-tracking-eyebrow: 0.08em;
--kvant-tracking-tight: -0.02em;
--kvant-tracking-tighter: -0.03em;
--kvant-tracking-tightest: -0.04em;
/* Shape */
--kvant-radius-sm: 4px;
--kvant-radius-md: 8px;
--kvant-radius-lg: 14px;
--kvant-radius-pill: 999px;
--kvant-shadow-sm: 0 1px 2px rgba(40, 41, 38, 0.06);
--kvant-shadow-md: 0 4px 16px rgba(40, 41, 38, 0.08);
--kvant-shadow-lg: 0 12px 40px rgba(40, 41, 38, 0.12);
--kvant-focus-ring: 0 0 0 3px rgba(95, 90, 255, 0.35);
}
/* Dark — auto (system), unless an explicit light theme is set */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--kvant-indigo: #7B77FF;
--kvant-ink: #F4F4F4;
--kvant-ink-muted: #B9BAB5;
--kvant-slate: #96ABAE;
--kvant-surface: #282926;
--kvant-surface-alt: #31322E;
--kvant-border: #4A4B46;
--kvant-border-strong: #5C5D58;
--kvant-mint-bg: #20302A;
--kvant-coral-bg: #3A2325;
--kvant-neutral: #7A7B76;
}
}
/* Dark — forced by attribute or class (wins in both directions) */
:root[data-theme="dark"],
.dark {
--kvant-indigo: #7B77FF;
--kvant-ink: #F4F4F4;
--kvant-ink-muted: #B9BAB5;
--kvant-slate: #96ABAE;
--kvant-surface: #282926;
--kvant-surface-alt: #31322E;
--kvant-border: #4A4B46;
--kvant-border-strong: #5C5D58;
--kvant-mint-bg: #20302A;
--kvant-coral-bg: #3A2325;
--kvant-neutral: #7A7B76;
}
/* ---------------------------------------------------------------------------
* Optional SSR helpers. Namespaced .kvant-* so they never clash with Tailwind.
* Keep this list short — Tailwind is the primary styling path.
* ------------------------------------------------------------------------- */
.kvant-root {
background: var(--kvant-surface);
color: var(--kvant-ink);
font-family: var(--kvant-font-sans);
font-weight: 700; /* the guide uses one weight — bold — for body copy at all scales */
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Legal text / dense secondary copy — the guide's one exception to bold body */
.kvant-text--regular { font-weight: 400; }
.kvant-eyebrow {
font-family: var(--kvant-font-mono);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: var(--kvant-tracking-eyebrow);
text-transform: uppercase;
color: var(--kvant-slate);
}
/* Bracket a label the way the guide does: [A], [Search & Consulting Systems] */
.kvant-eyebrow--bracketed::before { content: "["; }
.kvant-eyebrow--bracketed::after { content: "]"; }
.kvant-display {
font-family: var(--kvant-font-display);
font-weight: 400;
text-transform: uppercase; /* headlines are ALWAYS uppercase in this system */
letter-spacing: var(--kvant-tracking-tighter);
line-height: 1.08;
color: var(--kvant-ink);
margin: 0;
}
.kvant-display--hero { font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: var(--kvant-tracking-tightest); line-height: 0.95; }
.kvant-accent { color: var(--kvant-indigo); }
.kvant-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.375rem;
font-family: var(--kvant-font-sans);
font-weight: 700;
font-size: 0.9375rem;
line-height: 1;
color: var(--kvant-indigo-ink);
background: var(--kvant-indigo);
border: 1px solid var(--kvant-indigo);
border-radius: var(--kvant-radius-pill);
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.kvant-btn:hover { opacity: 0.88; }
.kvant-btn:focus-visible { outline: none; box-shadow: var(--kvant-focus-ring); }
.kvant-btn--ghost {
color: var(--kvant-ink);
background: transparent;
border-color: var(--kvant-border-strong);
}
.kvant-btn--ghost:hover { background: var(--kvant-surface-alt); opacity: 1; }
.kvant-card {
background: var(--kvant-surface);
border: 1px solid var(--kvant-border);
border-radius: var(--kvant-radius-lg);
padding: 1.5rem;
box-shadow: var(--kvant-shadow-sm);
}
/* Card-composition label/link: a square bullet marks label titles and links,
* e.g. "▪ FOR CLIENTS ->" per Typography [Cards] in the guide. */
.kvant-label {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--kvant-font-mono);
font-size: 0.75rem;
letter-spacing: var(--kvant-tracking-eyebrow);
text-transform: uppercase;
color: var(--kvant-ink);
}
.kvant-label::before { content: "▪"; color: var(--kvant-indigo); font-size: 0.7em; }
a.kvant-label { text-decoration: none; }
a.kvant-label:hover { color: var(--kvant-indigo); }
.kvant-quote {
margin: 0;
padding-left: 1.25rem;
border-left: 2px solid var(--kvant-slate);
font-size: 1.125rem;
line-height: 1.55;
color: var(--kvant-ink);
}
.kvant-quote cite {
display: block;
margin-top: 0.75rem;
font-family: var(--kvant-font-mono);
font-size: 0.75rem;
font-style: normal;
letter-spacing: var(--kvant-tracking-eyebrow);
text-transform: uppercase;
color: var(--kvant-slate);
}
/* Numbers-forward proof block: 400+ recruitments…
*/
.kvant-stat { margin: 0; color: var(--kvant-ink-muted); font-size: 0.9375rem; }
.kvant-stat > b {
display: block;
font-family: var(--kvant-font-display);
font-weight: 400;
font-size: clamp(2rem, 4vw, 3.25rem);
letter-spacing: var(--kvant-tracking-tighter);
line-height: 1.05;
color: var(--kvant-ink);
}
/* ---------------------------------------------------------------------------
* Typographic hierarchy blocks — see Typography [Hero/Secondary/Focus Blocks]
* in the guide. Pick ONE per section: hero for a short punchy sub-line, focus
* when there is no headline at all (pull-quotes, lead paragraphs).
* ------------------------------------------------------------------------- */
.kvant-hero-block .kvant-display { font-size: clamp(2.5rem, 5.5vw, 5.5rem); }
.kvant-hero-block .kvant-eyebrow { margin: 0 0 0.75rem; }
.kvant-hero-block p:not(.kvant-eyebrow) { margin-top: 1rem; font-size: 1.125rem; color: var(--kvant-ink-muted); }
/* Secondary block: headline is reduced because the body copy below it is
* long-form (not a short sub-heading) — keep the two in visual balance. */
.kvant-secondary-block .kvant-display { font-size: clamp(2rem, 3.5vw, 3rem); }
.kvant-secondary-block p:not(.kvant-eyebrow) { margin-top: 1rem; font-size: 1.0625rem; max-width: 52ch; }
/* Focus block: no headline — a lead paragraph or pull-quote set larger. */
.kvant-focus-block { font-size: 1.375rem; line-height: 1.45; max-width: 42ch; }
.kvant-focus-block .kvant-eyebrow { display: block; margin-bottom: 0.75rem; font-size: 1.5rem; text-transform: none; font-family: var(--kvant-font-sans); font-weight: 700; letter-spacing: 0; color: var(--kvant-ink); }
/* ---------------------------------------------------------------------------
* Graphics — "connecting the dots": pixel/dot patterns built from CSS only.
* Use Pixel Black (#000000) exclusively inside these, on a brand-colour
* container — never as page text or background outside this context.
* ------------------------------------------------------------------------- */
.kvant-pattern-dots {
--kvant-pattern-size: 28px;
background-image: radial-gradient(var(--kvant-pixel-black) 1.5px, transparent 1.5px);
background-size: var(--kvant-pattern-size) var(--kvant-pattern-size);
background-position: 0 0;
}
.kvant-pattern-grid {
--kvant-pattern-size: 24px;
background-image:
linear-gradient(var(--kvant-pixel-black) 1px, transparent 1px),
linear-gradient(90deg, var(--kvant-pixel-black) 1px, transparent 1px);
background-size: var(--kvant-pattern-size) var(--kvant-pattern-size);
}
/* Logo clear-space: wrap a logo ![]()
/