/* Floom design system — locked from v5/02 (refraction).
Imported by every page in /design-final/.
Federico's note: previous variants felt flat — fix via parallax + floating motion + layered shadows. */
/* Display: Bricolage Grotesque (variable axes for opsz/wdth/wght) — original modern grotesque, free.
Body: Inter. Code: JetBrains Mono. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* Whiter base — closer to ChatGPT reference, away from cream cardboard */
--bg: #fbfaf3;
--bg-2: #f7f5ec;
--paper: #ffffff;
--ink: #1a2520;
--ink-soft: #5a6259;
--ink-mute: #8a9088;
--emerald: #0a5230;
--emerald-dark: #053a22;
--sage: #b8c8b1;
--sage-tint: rgba(149,169,142,0.14);
--line: rgba(26,37,32,0.08);
--line-soft: rgba(26,37,32,0.04);
--glass-bg: rgba(255,255,255,0.45);
--glass-bg-strong: rgba(255,255,255,0.62);
--glass-edge: rgba(255,255,255,0.96);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
font-family: "Inter", system-ui, sans-serif;
background: var(--bg); color: var(--ink);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* ── AURORA BG — visible sage corners, near-white base ── */
.ambient {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
/* sage aurora upper-right — visibly present */
radial-gradient(60% 55% at 100% -8%, rgba(149,169,142,0.55), rgba(149,169,142,0.10) 40%, transparent 70%),
/* sage aurora lower-left */
radial-gradient(65% 60% at -10% 110%, rgba(149,169,142,0.42), rgba(149,169,142,0.08) 45%, transparent 75%),
/* near-white base wash */
linear-gradient(165deg, #fbfaf6 0%, #f5f3e8 100%);
}
.grain {
position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ── NAV ── */
nav.brand-nav {
position: relative; z-index: 5;
padding: 24px 36px 0;
max-width: 1200px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
}
/* ── NAV-APP: canonical sticky nav for logged-in product pages
(Library, Library-skill, Settings, Docs)
Apply via