57 lines
1.2 KiB
CSS
57 lines
1.2 KiB
CSS
|
@layer utilities {
|
||
|
|
.section-shell {
|
||
|
|
position: relative;
|
||
|
|
isolation: isolate;
|
||
|
|
overflow-x: clip;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-decor {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Default — sections live inside the global ambient (no owned wash) */
|
||
|
|
.bg-band-flat,
|
||
|
|
.bg-section-canvas {
|
||
|
|
background-color: transparent;
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Soft rhythm tint only — translucent so the shared ambient shows through.
|
||
|
|
* Never opaque slabs that restart the canvas.
|
||
|
|
*/
|
||
|
|
.bg-section-muted {
|
||
|
|
background-color: color-mix(in srgb, var(--surface) 18%, transparent);
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .bg-section-muted {
|
||
|
|
background-color: color-mix(in srgb, var(--surface) 16%, transparent);
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Slightly brighter calm pocket — used sparingly for visual rhythm */
|
||
|
|
.bg-section-lift {
|
||
|
|
background-color: transparent;
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .bg-section-lift {
|
||
|
|
background-image: radial-gradient(
|
||
|
|
ellipse 85% 70% at 50% 40%,
|
||
|
|
rgba(232, 240, 238, 0.025),
|
||
|
|
transparent 70%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|