/* ============================================================
KOI POND — DESIGN TOKENS + TYPE SYSTEM
One coherent system, applied site-wide.
Fonts load via in each page's (single combined
Google Fonts request) — no @import here.
Display — Space Grotesk (headings, editorial moments)
Body/UI — Inter (variable sans, 400–800)
Pixel — PF Tempesta Seven (bitmap, branded moments only)
Tailwind-side equivalents live in assets/tw-theme.js — keep in sync.
============================================================ */
:root {
/* surfaces */
--kp-cream-50: #FDFCF5;
--kp-cream-100: #FAF7EE; /* THE surface */
--kp-cream-200: #EFEAD9;
/* ink (pond scale) */
--kp-ink: #0A0A06;
--kp-ink-700: #1A1A14;
--kp-ink-500: #525248;
--kp-ink-300: #A3A39A;
--kp-ink-100: #E8E8E2;
/* koi orange */
--kp-koi-50: #FFF4ED;
--kp-koi-100: #FFDCC7;
--kp-koi-400: #FF8F4A;
--kp-koi-500: #FF6B1E;
--kp-koi-600: #E55510;
--kp-koi-700: #B53D08;
/* reeds (secondary accent, success) */
--kp-reed-300: #B8B85F;
--kp-reed-500: #94944A;
/* pond water (dark green — koi ponds aren't blue) */
--kp-water-500: #1F4A3E;
--kp-water-700: #14332B;
--kp-water-900: #0E241E;
/* depth */
--kp-shadow-card: 0 1px 2px rgba(10,10,6,0.03), 0 8px 30px -10px rgba(10,10,6,0.08);
--kp-shadow-lift: 0 2px 4px rgba(10,10,6,0.04), 0 16px 40px -16px rgba(10,10,6,0.14);
--kp-shadow-cta: 0 8px 24px -6px rgba(255,107,30,0.45);
/* shape */
--kp-r-card: 1rem;
--kp-r-field: .75rem;
--kp-r-pill: 9999px;
/* motion */
--kp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- PF Tempesta Seven (pixel) ---------- */
@font-face {
font-family: 'PF Tempesta Seven';
src: url('/assets/fonts/pf_tempesta_seven.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PF Tempesta Seven';
src: url('/assets/fonts/pf_tempesta_seven_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PF Tempesta Seven Compressed';
src: url('/assets/fonts/pf_tempesta_seven_compressed.ttf') format('truetype');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PF Tempesta Seven Compressed';
src: url('/assets/fonts/pf_tempesta_seven_compressed_bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'PF Tempesta Seven Condensed';
src: url('/assets/fonts/pf_tempesta_seven_condensed.ttf') format('truetype');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PF Tempesta Seven Extended';
src: url('/assets/fonts/pf_tempesta_seven_extended.ttf') format('truetype');
font-weight: 400;
font-display: swap;
}
/* ---------- Base typography reset ---------- */
html {
/* Optical fluid scaling base */
font-size: 16px;
text-rendering: optimizeLegibility;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 400;
font-size: 14.5px;
line-height: 1.55;
letter-spacing: -0.005em;
font-feature-settings: 'ss01', 'cv11', 'cv02', 'cv03', 'cv04'; /* Inter: alt 1, single-storey a, slashed zero, alt l, alt y */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #0A0A06;
}
/* ---------- Headings (Space Grotesk display) ---------- */
h1, .h1 {
font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
line-height: 1.08;
letter-spacing: -0.03em;
color: #0A0A06;
}
h2, .h2 {
font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.8vw + 0.875rem, 1.375rem);
line-height: 1.2;
letter-spacing: -0.02em;
color: #0A0A06;
}
h3, .h3 {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.3;
letter-spacing: -0.01em;
font-feature-settings: 'ss01';
}
/* ---------- Display class (landing hero, big editorial moments) ---------- */
.display {
font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.04;
color: #0A0A06;
}
.display em {
font-style: italic;
font-weight: 300;
}
.display-italic {
font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
}
/* ---------- Body utilities (paragraph rhythm) ---------- */
p { line-height: 1.55; }
.lede {
font-size: 1rem;
line-height: 1.55;
color: rgba(10, 10, 6, 0.78);
letter-spacing: -0.005em;
}
.editorial { line-height: 1.65; letter-spacing: -0.005em; }
/* ---------- Eyebrow / overline ---------- */
.eyebrow {
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(10, 10, 6, 0.65);
-webkit-font-smoothing: antialiased;
}
.eyebrow-light {
color: rgba(255, 255, 255, 0.65);
}
/* Magazine-style numeric labels */
.num-label {
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-style: normal;
font-weight: 500;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
}
/* ---------- Pixel utilities (use sparingly) ---------- */
.pixel {
font-family: 'PF Tempesta Seven', ui-monospace, monospace;
font-weight: 400;
letter-spacing: 0.05em;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
image-rendering: pixelated;
}
.pixel-bold { font-family: 'PF Tempesta Seven', ui-monospace, monospace; font-weight: 700; -webkit-font-smoothing: none; }
.pixel-compressed { font-family: 'PF Tempesta Seven Compressed', ui-monospace, monospace; -webkit-font-smoothing: none; }
.pixel-condensed { font-family: 'PF Tempesta Seven Condensed', ui-monospace, monospace; -webkit-font-smoothing: none; }
.pixel-extended { font-family: 'PF Tempesta Seven Extended', ui-monospace, monospace; -webkit-font-smoothing: none; }
/* Score / numeric display — tabular figures, slightly tighter */
.numeric {
font-family: 'Inter', system-ui, sans-serif;
font-feature-settings: 'tnum', 'ss01';
letter-spacing: -0.02em;
}
/* ---------- Logo system ---------- */
.logo {
display: block;
height: 3.5rem;
width: auto;
user-select: none;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.logo-sm { height: 2.5rem; } /* 40px */
.logo-md { height: 3.5rem; } /* 56px */
.logo-lg { height: 22rem; } /* 352px — hero-scale brand presence */
.logo-xl { height: 7rem; } /* 112px — alt hero / footer */
.logo-nav { height: 2.5rem; } /* 40px mobile / 48px desktop — navbar */
@media (min-width: 768px) { .logo-nav { height: 3rem; } }
/* Dark-context variant — flattens logo to white silhouette */
.logo-dark { filter: brightness(0) invert(1); }
/* Hover micro-interaction for floating standalone logos.
Subtle lift + shadow bloom — feels alive without being noisy. */
a:hover > .logo:not(.logo-dark) {
transform: translateY(-2px) scale(1.03);
filter: drop-shadow(0 14px 28px rgba(255, 107, 30, 0.18))
drop-shadow(0 6px 12px rgba(10, 10, 6, 0.15));
}
a:hover > .logo.logo-dark {
transform: translateY(-2px) scale(1.03);
filter: brightness(0) invert(1)
drop-shadow(0 8px 16px rgba(255, 255, 255, 0.25));
}
/* Default resting drop-shadow on free-floating logos (no container) */
.logo-float {
filter: drop-shadow(0 6px 14px rgba(10, 10, 6, 0.10))
drop-shadow(0 2px 4px rgba(10, 10, 6, 0.06));
}
a:hover > .logo-float {
filter: drop-shadow(0 14px 28px rgba(255, 107, 30, 0.22))
drop-shadow(0 6px 12px rgba(10, 10, 6, 0.14));
}
/* Entrance animation — gentle rise on first paint */
@keyframes logoRise {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.logo-enter { animation: logoRise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.logo-enter { animation: none; }
.logo { transition: none; }
a:hover > .logo { transform: none; }
}
/* ---------- User initials avatar (rendered by lib/auth-gate.js) ---------- */
.kp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FF8F4A, #B53D08);
color: #FFF4ED;
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.02em;
text-transform: uppercase;
border-radius: 9999px;
flex-shrink: 0;
user-select: none;
width: 2rem; /* 32px — sidebar default */
height: 2rem;
}
.kp-avatar.kp-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 13.5px; }
.kp-avatar.kp-avatar-lg { width: 4rem; height: 4rem; font-size: 18px; }
/* =========================================================
Nav gamification — HUD + koi pond + pills + micro-interactions
Injected by lib/nav-gamify.js into the dark sidebar (.kp-gami).
All colors are light-on-dark to sit on the #0A0A06 sidebar.
========================================================= */
/* wrapper takes the leftover sidebar space below the nav links, so the pond
fills the gap and the profile footer stays pinned to the bottom */
.kp-gami { display: flex; flex-direction: column; gap: .625rem; padding: 0 .75rem .25rem; flex: 1 1 auto; min-height: 0; }
/* ---- Stats HUD ---- */
.kp-hud {
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,107,30,.10), rgba(255,255,255,.02));
border-radius: .75rem;
padding: .625rem .7rem;
display: flex; flex-direction: column; gap: .5rem;
}
.kp-hud-streak { display: flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 700; color: #fff; }
.kp-hud-streak .kp-flame { font-size: 13px; line-height: 1; filter: saturate(1.2); }
.kp-hud-streak.is-cold { color: rgba(255,255,255,.6); font-weight: 600; }
.kp-hud-streak .kp-streak-sub { margin-left: auto; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; }
.kp-hud-lvl { display: flex; align-items: center; gap: .4rem; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.92); }
.kp-hud-lvl .kp-medal { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.kp-hud-lvl .kp-lvl-num { color: #FF8F4A; }
.kp-hud-lvl .kp-xp-sub { margin-left: auto; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.45); }
.kp-xpbar { position: relative; height: 6px; border-radius: 999px; background: rgba(255,143,74,.14); overflow: hidden; }
.kp-xpbar > span {
position: absolute; inset: 0 auto 0 0; height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #FF8F4A, #FF6B1E);
width: 0;
transition: width 900ms cubic-bezier(.22,1,.36,1);
}
/* ---- Koi pond ---- */
/* deep green water — real koi ponds aren't blue */
.kp-pond {
position: relative; flex: 1 1 auto; min-height: 88px;
border-radius: .75rem; overflow: hidden;
border: 1px solid rgba(184,184,95,.22);
background:
radial-gradient(120% 80% at 50% 0%, rgba(184,184,95,.16), transparent 60%),
linear-gradient(180deg, var(--kp-water-500) 0%, var(--kp-water-700) 55%, var(--kp-water-900) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* soft static light on the water (no motion — kept calm) */
.kp-pond::before {
content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
background: radial-gradient(60% 50% at 30% 20%, rgba(255,255,255,.08), transparent 70%),
radial-gradient(50% 40% at 75% 35%, rgba(255,255,255,.05), transparent 70%);
pointer-events: none;
}
.kp-pond-label {
position: absolute; left: .6rem; right: .6rem; bottom: .5rem; z-index: 2;
display: flex; align-items: center; gap: .35rem;
font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.82);
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.kp-pond-label .kp-pond-sub { margin-left: auto; font-weight: 600; color: rgba(255,255,255,.5); }
.kp-pond-empty {
position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 0 .75rem;
font-size: 10.5px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.55);
}
/* a single koi = teardrop body + tail, drifting across the pond */
.kp-koi {
position: absolute; width: 16px; height: 9px; z-index: 1; will-change: transform;
animation: kpSwim linear infinite;
}
.kp-koi > .kp-koi-body {
position: absolute; inset: 0 3px 0 0; border-radius: 60% 45% 45% 60% / 60% 60% 40% 40%;
background: var(--koi-c, #FF8F4A);
box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.35);
}
.kp-koi > .kp-koi-tail {
position: absolute; right: 0; top: 50%; width: 6px; height: 8px; transform: translateY(-50%);
background: var(--koi-c, #FF8F4A); opacity: .9;
clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
}
.kp-koi.kp-koi-white { --koi-c: #F4F1E8; }
.kp-koi.kp-koi-gold { --koi-c: #FFCE54; }
.kp-koi.kp-koi-calico { --koi-c: #FF6B1E; }
.kp-koi.kp-koi-black { --koi-c: #3A3A44; }
/* The sprite faces LEFT (blunt head left, tail fin right), so it must be
mirrored (scaleX(-1)) while travelling right and upright while travelling
left — otherwise the koi swim tail-first. */
@keyframes kpSwim {
0% { transform: translate(-24px, 0) scaleX(-1); }
48% { transform: translate(180px, 6px) scaleX(-1); }
50% { transform: translate(182px, 6px) scaleX(1); }
98% { transform: translate(-22px, -4px) scaleX(1); }
100% { transform: translate(-24px, 0) scaleX(-1); }
}
/* level-up celebration ripple */
.kp-pond.is-levelup::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
border-radius: 999px; border: 2px solid rgba(255,206,84,.9); transform: translate(-50%,-50%);
animation: kpRipple 1200ms ease-out 2;
}
@keyframes kpRipple { from { width: 8px; height: 8px; opacity: .9; } to { width: 180px; height: 180px; opacity: 0; } }
/* ---- Nav pills ---- */
.kp-pill {
margin-left: auto; display: inline-flex; align-items: center; gap: .2rem;
font-size: 10.5px; font-weight: 800; line-height: 1;
padding: .15rem .4rem; border-radius: 999px;
background: rgba(255,107,30,.18); color: #FFB27A; border: 1px solid rgba(255,107,30,.28);
}
/* ---- Nav link micro-interactions (subtle, hover-only) ---- */
.nav-link svg { transition: transform .18s cubic-bezier(.22,1,.36,1); }
.nav-link:hover svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
.kp-koi { animation: none !important; }
}
/* =========================================================
App shell — shared chrome for all signed-in pages.
Add class="kp-app" to ; sidebar stays ink (#0A0A06).
Replaces the per-page duplicated styles.
========================================================= */
body.kp-app { background-color: var(--kp-cream-100); position: relative; }
/* warm top wash — morning light on the pond, not blue sky */
body.kp-app::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(120% 70% at 50% -10%, #FFF4ED 0%, rgba(255,244,237,0) 60%),
linear-gradient(180deg, var(--kp-cream-50) 0%, var(--kp-cream-100) 100%);
}
.card-shadow { box-shadow: var(--kp-shadow-card); }
.nav-link { display:flex; align-items:center; gap:.625rem; padding:.5rem .75rem; border-radius:.625rem; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.7); transition:all .15s; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-link.active { background:var(--kp-koi-500); color:#fff; }
.check::before {
content:""; display:inline-block; width:14px; height:14px;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain; background-repeat:no-repeat; margin-right:6px; vertical-align:-2px;
}
/* ---- Skeleton loading blocks ---- */
.kp-skel {
position: relative; overflow: hidden;
border-radius: .625rem;
background: var(--kp-cream-200);
}
.kp-skel::after {
content: ""; position: absolute; inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation: kpSkel 1.4s ease-in-out infinite;
}
@keyframes kpSkel { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.kp-skel::after { animation: none; }
}
/* ---- Empty state ("the pond is still") ---- */
.kp-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .75rem; text-align: center;
padding: 3rem 1.5rem;
border: 1px dashed var(--kp-ink-100);
border-radius: var(--kp-r-card);
background: rgba(253,252,245,.6);
}
.kp-empty .kp-empty-mark {
width: 44px; height: 44px; border-radius: 999px;
border: 1.5px solid rgba(148,148,74,.45);
display: flex; align-items: center; justify-content: center;
color: var(--kp-reed-500);
box-shadow: 0 0 0 6px rgba(184,184,95,.08);
}
.kp-empty h3 { color: var(--kp-ink); }
.kp-empty p { font-size: 13px; color: var(--kp-ink-500); max-width: 34ch; }