/* =====================================================================
Blueleaves — Particle Field Loader
Self-contained, dependency-free. Dark + Light themes.
Dark : white logo, SKY BLUE (#38C6FF) particles on deep navy
Light : navy logo, DEEP BLUE (#1676D6) particles on paper
Palette matched to the mobile loader (packages/studio-ui/src/components/
ParticleLoader.tsx) on 2026-08-18 — owner picked the dark pane of the
"Option E / Dense" demo: deep-space navy ground, sky-blue particles.
Was lime #BAFF29, the pre-Glacier accent.
---------------------------------------------------------------------
Usage: add .is-dark or .is-light to the .bl-loader element.
===================================================================== */
.bl-loader {
/* ---- DARK theme tokens (default) ---- */
--bl-accent: rgba(56, 198, 255, 0.85); /* particle fill */
--bl-accent-glow: rgba(56, 198, 255, 0.80); /* particle glow */
--bl-logo-glow: rgba(56, 198, 255, 0.65); /* logo halo */
position: relative;
width: 160px;
height: 160px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Theme: dark (explicit, same as default) */
.bl-loader.is-dark {
--bl-accent: rgba(56, 198, 255, 0.85);
--bl-accent-glow: rgba(56, 198, 255, 0.80);
--bl-logo-glow: rgba(56, 198, 255, 0.65);
}
/* Theme: light — deepened lime so it reads on cream/white */
.bl-loader.is-light {
--bl-accent: rgba(22, 118, 214, 0.85);
--bl-accent-glow: rgba(22, 118, 214, 0.70);
--bl-logo-glow: rgba(22, 118, 214, 0.55);
}
/* ---- Logo ---- */
.bl-loader__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: auto;
z-index: 2;
filter: drop-shadow(0 0 20px var(--bl-logo-glow));
animation: bl-float 4s ease-in-out infinite;
}
/* Show the correct logo for the active theme */
.bl-loader__logo--light { display: none; }
.bl-loader.is-light .bl-loader__logo--dark { display: none; }
.bl-loader.is-light .bl-loader__logo--light { display: block; }
@keyframes bl-float {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-8px); }
}
/* ---- Particles ---- */
.bl-loader__particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--bl-accent);
box-shadow: 0 0 8px var(--bl-accent-glow);
animation: bl-particle-orbit 2.4s ease-in-out infinite; /* Option E — matches mobile ORBIT_MS */
}
/* ⚠ nth-of-type, NOT nth-child. The loader's first two children are the two
![]()
logos, so :nth-child(1)/(2) matched NOTHING and particles 5 and 6 fell
off the end of the list entirely — they rendered UNPOSITIONED, stacked in the
corner, while two position rules went unused. Particles are the only
children, so nth-of-type counts exactly them. (Found 2026-08-18.)
Geometry and delays are byte-for-byte the mobile PARTICLES array
(packages/studio-ui/src/components/ParticleLoader.tsx) so the two platforms
render the identical field: the first six are the original positions, the
last four are Option E's additions interleaved on the half-beats. */
.bl-loader__particle:nth-of-type(1) { top: 20%; left: 50%; animation-delay: 0s; }
.bl-loader__particle:nth-of-type(2) { top: 50%; left: 80%; animation-delay: 0.5s; }
.bl-loader__particle:nth-of-type(3) { top: 80%; left: 50%; animation-delay: 1s; }
.bl-loader__particle:nth-of-type(4) { top: 50%; left: 20%; animation-delay: 1.5s; }
.bl-loader__particle:nth-of-type(5) { top: 35%; left: 35%; animation-delay: 2s; }
.bl-loader__particle:nth-of-type(6) { top: 35%; left: 65%; animation-delay: 2.5s; }
.bl-loader__particle:nth-of-type(7) { top: 65%; left: 35%; animation-delay: 0.75s; }
.bl-loader__particle:nth-of-type(8) { top: 65%; left: 65%; animation-delay: 1.25s; }
.bl-loader__particle:nth-of-type(9) { top: 28%; left: 72%; animation-delay: 1.75s; }
.bl-loader__particle:nth-of-type(10) { top: 72%; left: 28%; animation-delay: 2.25s; }
@keyframes bl-particle-orbit {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
25% { opacity: 1; }
50% { transform: translate(-20px, -20px) scale(1.5); opacity: 0.8; }
75% { opacity: 1; }
}
/* ---- Sizes (optional) ---- */
.bl-loader.bl-sm { width: 100px; height: 100px; }
.bl-loader.bl-sm .bl-loader__logo { height: 32px; }
.bl-loader.bl-lg { width: 200px; height: 200px; }
.bl-loader.bl-lg .bl-loader__logo { height: 64px; }
/* ---- Fullscreen overlay (optional) ---- */
.bl-loading-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.bl-loading-overlay.is-active { display: flex; }
.bl-loading-overlay.is-dark { background: #0E1A2E; backdrop-filter: blur(8px); } /* DEEP_SPACE — same as mobile */
.bl-loading-overlay.is-light { background: rgba(240, 235, 221, 0.92); backdrop-filter: blur(8px); }
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.bl-loader__logo,
.bl-loader__particle { animation: none; }
}
/* ---------------------------------------------------------------------
Webapp auto-theme integration (2026-06-04)
When the loader is placed inside the webapp (html[data-theme="dark"]
sets the app theme), it picks the matching variant automatically — no
need to add .is-dark / .is-light at the call site. .is-dark / .is-light
explicit overrides still work and win.
--------------------------------------------------------------------- */
html[data-theme="dark"] .bl-loader:not(.is-light) {
--bl-accent: rgba(56, 198, 255, 0.85);
--bl-accent-glow: rgba(56, 198, 255, 0.80);
--bl-logo-glow: rgba(56, 198, 255, 0.65);
}
html[data-theme="dark"] .bl-loader:not(.is-light) .bl-loader__logo--dark { display: block; }
html[data-theme="dark"] .bl-loader:not(.is-light) .bl-loader__logo--light { display: none; }
html:not([data-theme="dark"]) .bl-loader:not(.is-dark) {
--bl-accent: rgba(22, 118, 214, 0.85);
--bl-accent-glow: rgba(22, 118, 214, 0.70);
--bl-logo-glow: rgba(22, 118, 214, 0.55);
}
html:not([data-theme="dark"]) .bl-loader:not(.is-dark) .bl-loader__logo--dark { display: none; }
html:not([data-theme="dark"]) .bl-loader:not(.is-dark) .bl-loader__logo--light { display: block; }