/* BodyFlow v3 — Midnight Aurora (dark glass + cyan / violet) */ :root { --bf-void: #030712; --bf-night: #0f172a; --bf-panel: rgba(15, 23, 42, 0.72); --bf-panel-solid: #111827; --bf-accent-a: #22d3ee; --bf-accent-b: #c084fc; --bf-accent-mix: linear-gradient(135deg, #22d3ee 0%, #a855f7 55%, #f472b6 100%); --bf-text: #f1f5f9; --bf-text-soft: #cbd5e1; --bf-muted: #94a3b8; --bf-line: rgba(148, 163, 184, 0.22); --bf-glow: 0 0 60px rgba(34, 211, 238, 0.12); --bf-radius: 20px; --bf-radius-sm: 12px; --bf-font-display: 'Space Grotesk', system-ui, sans-serif; --bf-font-body: 'IBM Plex Sans', system-ui, sans-serif; } .bf-pattern { background-color: var(--bf-void); background-image: radial-gradient(ellipse 120% 80% at 10% -20%, rgba(34, 211, 238, 0.18), transparent 50%), radial-gradient(ellipse 90% 60% at 90% 10%, rgba(168, 85, 247, 0.2), transparent 45%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(244, 114, 182, 0.08), transparent 50%); } .bf-heading-underline::after { background: var(--bf-accent-mix); height: 5px; border-radius: 4px; } /* Load LAST in — overrides Shopify / GemPages */ html.bodyflow-root { --font-body-family: 'IBM Plex Sans', system-ui, sans-serif !important; --font-heading-family: 'Space Grotesk', system-ui, sans-serif !important; } body.bodyflow-site { font-family: var(--bf-font-body) !important; color: var(--bf-text-soft) !important; background-color: var(--bf-void) !important; background-image: radial-gradient(ellipse 100% 70% at 15% -10%, rgba(34, 211, 238, 0.22), transparent 55%), radial-gradient(ellipse 80% 50% at 85% 0%, rgba(168, 85, 247, 0.2), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 110%, rgba(244, 114, 182, 0.1), transparent 45%), linear-gradient(180deg, #020617 0%, #0f172a 35%, #020617 100%) !important; background-attachment: fixed !important; min-height: 100vh; } body.bodyflow-site.gradient { background-color: var(--bf-void) !important; background-image: radial-gradient(ellipse 100% 70% at 15% -10%, rgba(34, 211, 238, 0.22), transparent 55%), radial-gradient(ellipse 80% 50% at 85% 0%, rgba(168, 85, 247, 0.2), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 110%, rgba(244, 114, 182, 0.1), transparent 45%), linear-gradient(180deg, #020617 0%, #0f172a 35%, #020617 100%) !important; background-attachment: fixed !important; } #MainContent, #MainContent.content-for-layout, main.content-for-layout { background: transparent !important; } .shopify-section { background: transparent !important; } body.bodyflow-site .gps { --g-c-brand: #22d3ee !important; --g-c-text-1: #cbd5e1 !important; --g-c-text-2: #f1f5f9 !important; --g-c-text-3: #020617 !important; --g-c-line-1: rgba(148, 163, 184, 0.25) !important; --g-c-line-2: #64748b !important; --g-c-line-3: #22d3ee !important; --g-c-bg-1: rgba(15, 23, 42, 0.9) !important; --g-c-bg-2: rgba(30, 41, 59, 0.85) !important; --g-c-bg-3: rgba(15, 23, 42, 0.95) !important; --g-font-body: 'IBM Plex Sans', system-ui, sans-serif !important; --g-font-heading: 'Space Grotesk', system-ui, sans-serif !important; } /* Modals — dark glass (when using .bf-modal on overlay) */ body.bodyflow-site .modal-overlay.is-open { backdrop-filter: blur(8px); }