/* ============================================================
css/biome.css — SYNC 3.0 Biome System · Shared Interior Stylesheet
============================================================
Inject into every interior page AFTER nav-overlay.css / gate-modal.css.
Adds: deepforest body, Flower of Life fixed grid, biome token layer,
content-card + d-card glow system, and page-level glass surface overrides.
Interior pages at root depth:
Interior pages in sub-folders:
============================================================ */
/* ── 1. Design tokens (biome layer) ─────────────────────────────────── */
:root {
--bioglow: #4ade80;
--sunpulse: #fbbf24;
--deepforest: #0a1f0f;
/* Card glow system */
--card-glow-rest:
0 0 15px rgba(74,222,128,0.18),
0 0 35px rgba(74,222,128,0.10),
inset 0 0 20px rgba(251,191,36,0.06);
--card-glow-hover:
0 0 25px rgba(74,222,128,0.55),
0 0 55px rgba(74,222,128,0.30),
0 0 80px rgba(251,191,36,0.15);
/* SYNC 3.0 ink scale (if not already declared by page) */
--ink-950: #05100B;
--ink-900: #0B1710;
--ink-800: #101E17;
--ink-700: #17281F;
--ink-600: #223429;
--ink-500: #3A4E42;
/* Signal */
--signal-500: #7CFF6B;
--signal-400: #9BFF8C;
--signal-600: #4EE83C;
--signal-300: #C4FFBA;
/* Semantic */
--sun: #F5C542;
--sky: #6AB7D6;
--coral: #F27151;
/* Foreground */
--fg1: #F4FBEF;
--fg2: #B5C7B9;
--fg3: #6D8377;
/* Radii (safe to re-declare) */
--r-0: 0; --r-1: 2px; --r-2: 6px; --r-3: 12px; --r-4: 20px; --r-pill: 999px;
/* Fonts (fallback in case page doesn't load them) */
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--font-body: 'Inter', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
/* Glow primitives */
--glow-signal: 0 0 24px rgba(124,255,107,0.35);
--glow-signal-strong: 0 0 48px rgba(124,255,107,0.55), 0 0 12px rgba(124,255,107,0.8);
}
/* ── 2. Body: deepforest + radial warmth ─────────────────────────────── */
body {
background-color: var(--deepforest) !important;
background-image:
radial-gradient(circle at 30% 20%, rgba(251,191,36,0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(74,222,128,0.06) 0%, transparent 50%) !important;
}
/* ── 3. Flower of Life — fixed overlay via body::before ──────────────── */
/*
We use body::before so interior pages get the grid with ZERO HTML edits.
z-index: -1 pushes it behind all page content.
*/
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='121.24' viewBox='0 0 140 121.24'%3E%3Cdefs%3E%3Cstyle%3Ecircle%7Bfill:none;stroke:%234ade80;stroke-width:0.6;%7D%3C/style%3E%3C/defs%3E%3Ccircle cx='70' cy='60.62' r='35'/%3E%3Ccircle cx='35' cy='60.62' r='35'/%3E%3Ccircle cx='105' cy='60.62' r='35'/%3E%3Ccircle cx='52.5' cy='30.31' r='35'/%3E%3Ccircle cx='87.5' cy='30.31' r='35'/%3E%3Ccircle cx='52.5' cy='90.93' r='35'/%3E%3Ccircle cx='87.5' cy='90.93' r='35'/%3E%3C/svg%3E");
background-size: 140px 121px;
opacity: 0.07;
animation: biome-sacred-breathe 13s ease-in-out infinite;
}
@keyframes biome-sacred-breathe {
0%, 100% { opacity: 0.07; transform: scale(1); }
50% { opacity: 0.12; transform: scale(1.03); }
}
/* Note: if a page already has body::before in use, add class="biome-bg" to
and swap the above selector to html.biome-bg body::before */
/* ── 4. Content card — universal biome glass ─────────────────────────── */
.content-card,
.d-card,
.biome-card {
background: rgba(10,31,15,0.72);
border: 1px solid rgba(74,222,128,0.22);
box-shadow: var(--card-glow-rest);
transition:
border-color 0.4s cubic-bezier(0.23,1,0.32,1),
box-shadow 0.4s cubic-bezier(0.23,1,0.32,1),
transform 0.4s cubic-bezier(0.23,1,0.32,1);
}
.content-card:hover,
.d-card:hover,
.biome-card:hover {
border-color: rgba(74,222,128,0.42);
box-shadow: var(--card-glow-hover);
transform: translateY(-3px);
}
/* ── 5. Text selection ───────────────────────────────────────────────── */
::selection {
background: var(--signal-500);
color: var(--deepforest);
}
/* ── 6. Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--deepforest); }
::-webkit-scrollbar-thumb {
background: rgba(74,222,128,0.28);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(74,222,128,0.50); }
/* ── 7. Biome utility classes ────────────────────────────────────────── */
/* Glass surface panels — transparent with biome border */
.biome-glass {
background: rgba(10,31,15,0.68);
border: 1px solid rgba(74,222,128,0.18);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
}
/* Biome glow text */
.biome-text-glow {
color: var(--bioglow);
text-shadow: 0 0 18px rgba(74,222,128,0.45);
}
/* Sunpulse accent text */
.sunpulse-text {
color: var(--sunpulse);
text-shadow: 0 0 12px rgba(251,191,36,0.35);
}
/* Biome section separator */
.biome-rule {
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(74,222,128,0.22) 20%,
rgba(251,191,36,0.14) 50%,
rgba(74,222,128,0.22) 80%,
transparent);
border: none;
margin: 0;
}
/* ── 8. Accessibility ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
opacity: 0.07;
}
.content-card,
.d-card,
.biome-card {
transition: none;
}
}