/* ════════════════════════════════════════════════════════════════
SuperCat DS — Marketing footer · .kfoot
────────────────────────────────────────────────────────────────
▸ Class prefix: `.kfoot` = "kit footer"
▸ Site-wide marketing footer. Brand block · column groups ·
theme-aware. Modern editorial layout — wordmark left, three
link columns, fine print at the bottom rule.
▸ Framework-agnostic. Theme-reactive through tokens — no extra
CSS needed for dark mode (just flip [data-theme]).
────────────────────────────────────────────────────────────────
API
Tokens consumed:
--surface-{page,2,card} --text-{primary,body,muted,faint}
--color-{gold,crimson} --border-{subtle,default}
--space-N --radius-{md,lg,xl}
--font-{sans,mono} --text-* size ramp
--shadow-1 --duration-base --ease-out
════════════════════════════════════════════════════════════════ */
:where(.kfoot) {
--kfoot-pad-y: clamp(56px, 7vw, 104px);
/* Horizontal padding matches the marketing-nav outer padding so the
footer content aligns with the nav pill at every viewport.
--kfoot-max is computed from --kfoot-pad-x so the inner content area
stays at 1480px under BOTH box-sizing modes (browser content-box AND
Tailwind/shadcn border-box). .kfoot-shell sets box-sizing: border-box
explicitly below to lock it down regardless of consumer reset. */
--kfoot-pad-x: clamp(12px, 2.4vw, 28px);
--kfoot-max: calc(1480px + 2 * var(--kfoot-pad-x));
--kfoot-gap-col: clamp(32px, 4vw, 64px);
--kfoot-gap-link: var(--space-2);
/* Footer is ALWAYS dark — same character as the .vn marketing nav.
These are absolute values (not theme tokens) so the surface stays
consistent across light + dark page themes. */
--kfoot-bg: #131211;
--kfoot-bg-elev: #1F1E1C;
--kfoot-fg: color-mix(in oklch, #EBE6D7 86%, transparent);
--kfoot-fg-strong: #EBE6D7;
--kfoot-fg-muted: color-mix(in oklch, #EBE6D7 60%, transparent);
--kfoot-fg-faint: color-mix(in oklch, #EBE6D7 38%, transparent);
--kfoot-border: color-mix(in oklch, #EBE6D7 10%, transparent);
}
.kfoot {
display: block;
position: relative;
width: 100%;
background: var(--kfoot-bg);
color: var(--kfoot-fg);
font-family: var(--font-sans);
}
/* Editorial top-edge — a thin gold hairline that matches the brand
spike on the wordmark. On the dark surface the gold pops crisper. */
.kfoot::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0,
color-mix(in oklch, var(--color-gold) 70%, transparent) 30%,
color-mix(in oklch, var(--color-gold) 70%, transparent) 70%,
transparent 100%);
}
/* ── Shell — three-column flex with brand at left, CTA at right ── */
.kfoot-shell {
box-sizing: border-box; /* see token block: keeps content 1480 under any reset */
max-width: var(--kfoot-max);
margin: 0 auto;
padding: var(--kfoot-pad-y) var(--kfoot-pad-x) clamp(28px, 3vw, 44px);
display: grid;
grid-template-columns: 1.1fr 1.4fr 1fr;
gap: var(--kfoot-gap-col);
align-items: start;
}
@media (max-width: 960px) {
.kfoot-shell {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* ── Brand lead block ──────────────────────────────────────────── */
.kfoot-lead {
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.kfoot-brand {
display: inline-block;
color: var(--kfoot-fg-strong);
text-decoration: none;
transition: opacity var(--duration-base) var(--ease-out);
}
.kfoot-brand:hover { opacity: 0.7; }
.kfoot-brand:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-crimson) 22%, transparent);
border-radius: var(--radius-sm);
}
.kfoot-brand-logo {
display: block;
width: 100%;
max-width: 220px;
height: auto;
}
/* Color logo — letters take currentColor (cream), mark stays gold.
These rules use bare class selectors because descendant selectors
don't reliably penetrate the