/* ══════════════════════════════════════════════════════════════════
Kanbanboard marketing site — shared foundation
Tokens lifted verbatim from the app (src/index.css) — the site wears
the product's real skin. Presence palette from src/lib/identity.ts.
Contract for every page:
Header uses .logo / .nav-links / .nav-right / #theme-toggle.
Monster avatar slots:
Flame glyph slots:
Page-specific styles live inline in each page, built from these tokens.
══════════════════════════════════════════════════════════════════ */
/* Light is the default now — bright, colourful, airy. Dark is opt-in.
The colour is brand-true: gradients are built from the product's own
presence palette (identity.ts), never invented hues. */
:root {
color-scheme: light;
--bg: #fbfaff;
--bg-subtle: #f3f1fb;
--bg-element: #ffffff;
--bg-hover: #f0eefa;
--border: #e8e6f2;
--border-hover: #d6d3e6;
--text: #17151f;
--text-secondary: #57536b;
--text-muted: #918da6;
--accent: #7c3aed;
--accent-deep: #6d28d9;
--accent-subtle: rgba(124, 58, 237, 0.07);
--accent-focus: rgba(124, 58, 237, 0.16);
--accent-glow: rgba(124, 58, 237, 0.28);
--danger: #dc2626;
--flame: #ea580c;
--shadow-soft: rgba(76, 40, 140, 0.08);
--shadow-med: rgba(76, 40, 140, 0.13);
--shadow-strong: rgba(60, 30, 110, 0.20);
--overlay: rgba(24, 24, 27, 0.35);
--glass-bg: rgba(255, 255, 255, 0.74);
--radius: 8px;
--radius-sm: 6px;
--radius-lg: 16px;
--radius-xl: 22px;
/* presence palette — identical to src/lib/identity.ts */
--p1: #6366f1; --p2: #14b8a6; --p3: #f59e0b; --p4: #ec4899;
--p5: #0ea5e9; --p6: #84cc16; --p7: #f43f5e; --p8: #a855f7;
/* colourful brand gradients (theme-independent) */
--grad-text: linear-gradient(100deg, #7c3aed 0%, #ec4899 52%, #f97316 100%);
--grad-btn: linear-gradient(122deg, #7c3aed 0%, #6366f1 60%, #0ea5e9 130%);
--grad-btn-glow: rgba(124, 58, 237, 0.42);
}
[data-theme='dark'] {
color-scheme: dark;
--bg: #09090b;
--bg-subtle: #0f0f12;
--bg-element: #18181b;
--bg-hover: #1f1f23;
--border: #27272a;
--border-hover: #3f3f46;
--text: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #52525b;
--accent: #8b5cf6;
--accent-deep: #7c3aed;
--accent-subtle: rgba(139, 92, 246, 0.06);
--accent-focus: rgba(139, 92, 246, 0.12);
--accent-glow: rgba(139, 92, 246, 0.22);
--danger: #ef4444;
--flame: #f97316;
--shadow-soft: rgba(0, 0, 0, 0.35);
--shadow-med: rgba(0, 0, 0, 0.45);
--shadow-strong: rgba(0, 0, 0, 0.6);
--overlay: rgba(0, 0, 0, 0.55);
--glass-bg: rgba(15, 15, 18, 0.72);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background 0.4s ease, color 0.4s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
img, svg { vertical-align: middle; }
::selection { background: var(--accent-glow); color: var(--text); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
/* One focus language for the whole site — mirrors the app's
accent ring. outline:none is always paired with a visible ring. */
:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
border-radius: var(--radius-sm);
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.eyebrow {
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent); font-weight: 600;
}
/* colourful gradient text — for hero keywords and section accents */
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.skip-link {
position: absolute; left: -999px; top: 12px; z-index: 100;
background: var(--bg-element); color: var(--text); padding: 10px 16px;
border-radius: var(--radius); border: 1px solid var(--border);
}
.skip-link:focus { left: 16px; }
/* ── Buttons ── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 550; padding: 11px 20px;
border-radius: 10px; white-space: nowrap;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
border: 1px solid transparent;
}
.btn-primary {
background: var(--grad-btn); color: #fff;
box-shadow: 0 1px 2px rgba(60,30,110,0.18), 0 10px 26px -10px var(--grad-btn-glow);
}
.btn-primary:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.05); box-shadow: 0 1px 2px rgba(60,30,110,0.18), 0 16px 34px -8px var(--grad-btn-glow); }
.btn-ghost { background: var(--bg-element); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.btn-sm { padding: 8px 15px; font-size: 14px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
/* ── Header ── */
header.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--glass-bg);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, background 0.4s ease;
}
header.site-header.scrolled { border-color: var(--border); }
.site-header nav { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.logo-mark {
width: 24px; height: 24px; border-radius: 7px;
background: var(--accent); display: grid;
grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px;
box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.logo-mark i { background: rgba(255,255,255,0.92); border-radius: 1.5px; display: block; }
.logo-mark i:nth-child(2) { opacity: 0.55; }
.logo-mark i:nth-child(3) { opacity: 0.7; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 14.5px; color: var(--text-secondary); font-weight: 500; transition: color 0.15s; padding: 4px 2px; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--text); }
.nav-right { display: flex; gap: 10px; align-items: center; }
.icon-btn {
width: 36px; height: 36px; display: grid; place-items: center;
border-radius: var(--radius); color: var(--text-secondary);
transition: color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--text); background: var(--bg-element); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-right .signin { display: none; } }
/* ── Section scaffolding ── */
section.band { padding: 104px 0; }
section.band.tint { background: linear-gradient(180deg, rgba(139,92,246,0.055), rgba(236,72,153,0.04)); }
.sec-head { max-width: 620px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h1, .sec-head h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-top: 14px; }
.sec-head p { color: var(--text-secondary); font-size: 18px; margin-top: 16px; line-height: 1.6; }
/* gradient divider — the canonical separator from the edge language */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
/* ── Page hero (subpages: pricing, blog, contact) ── */
.page-hero { position: relative; padding: 88px 0 24px; overflow: hidden; }
.page-hero::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(760px 440px at 74% -14%, rgba(139,92,246,0.22), transparent 62%),
radial-gradient(560px 400px at 6% -6%, rgba(236,72,153,0.15), transparent 58%),
radial-gradient(620px 440px at 46% 120%, rgba(14,165,233,0.13), transparent 60%);
pointer-events: none;
}
/* ── CTA box ── */
.cta-box {
position: relative; overflow: hidden;
border-radius: var(--radius-xl); border: 1px solid rgba(139,92,246,0.18);
background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.09) 55%, rgba(14,165,233,0.10));
padding: 64px 40px; text-align: center;
}
.cta-box::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background: radial-gradient(560px 320px at 50% -20%, rgba(139,92,246,0.18), transparent 70%);
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.cta-box p { color: var(--text-secondary); font-size: 18px; margin: 16px auto 0; max-width: 480px; }
.cta-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Footer ── */
footer.site-footer { border-top: 1px solid var(--border); padding: 60px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot-brand p { font-size: 14px; color: var(--text-secondary); margin-top: 14px; max-width: 280px; line-height: 1.55; }
.foot-col { min-width: 0; }
.foot-col h5 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 11px; transition: color 0.15s; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 14px; }
.foot-bottom p { font-size: 13px; color: var(--text-muted); }
.foot-bottom a { color: var(--text-secondary); }
.foot-bottom a:hover { color: var(--text); }
/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ── Monster avatars ── */
.monster-avatar { border-radius: 6px; }
/* ── Reduced motion: freeze every loop into a composed still ── */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; }
}