... existing content ...
The first class turns on the shared background engine; the second
selects which of the 10 palettes/patterns to paint with. Presets are
swappable by changing only that second class name — everything else
(waves, drops, glass, shadow, decorations) reads from CSS custom
properties set per-preset, so the structural CSS never has to change.
2. Everything below the two required classes is optional sugar:
.bbb-bg__pattern -> the tiled texture layer (auto-included via
::before; no markup needed)
.bbb-bg__wave -> a large flowing bottom wave divider (add one
if a screen wants the wave motif)
.bbb-bg__decor -> absolute-positioned wrapper for floating
drops / cells / sparkles (optional
s)
.bbb-bg__drop (premium teardrop w/ shine, 8 positions: --1…--8)
.bbb-bg__cell (biconcave "blood cell" ring, --1 … --6)
.bbb-bg__sparkle (4-point sparkle, --1 … --5)
.bbb-bg__orb (soft floating blur circle, --1 … --4)
.bbb-bg__glass -> a glass-morphism card surface, drop this
around any existing card/panel to pick up
the preset's glass + shadow treatment
.bbb-bg__content -> plain z-index wrapper to keep real content
above the decorative layers
Every preset defines the SAME set of custom properties (--bg-*), so the
structural rules further down only have to be written once and simply
inherit whichever palette is active. Colors are drawn from the existing
brand tokens in app.css (garnet / midnight / gold / porcelain) so every
preset stays on-brand rather than introducing a new palette.
Nothing here touches auth, REST calls, the DB, or any existing template.
========================================================================== */
/* --------------------------------------------------------------------------
1. SHARED ENGINE — one set of structural rules, driven by CSS variables
-------------------------------------------------------------------------- */
.bbb-bg {
/* Large, single flowing wave — one broad, soft-crested curve (not a
jagged multi-bump line) so it reads as one premium ribbon of white,
matching the reference hero-card silhouette. */
--bg-drop-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2040%22%3E%3Cpath%20d%3D%22M16%200C16%200%2030%2018.5%2030%2027C30%2034.2%2023.7%2040%2016%2040C8.3%2040%202%2034.2%202%2027C2%2018.5%2016%200%2016%200Z%22/%3E%3C/svg%3E");
--bg-wave-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C150%20C220%2C40%20420%2C210%20660%2C160%20C880%2C115%201040%2C30%201260%2C70%20C1350%2C86%201400%2C110%201440%2C130%20L1440%2C320%20L0%2C320%20Z%22/%3E%3C/svg%3E");
--bg-wave2-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C210%20C260%2C270%20480%2C170%20720%2C185%20C960%2C200%201100%2C270%201340%2C220%20C1390%2C210%201420%2C200%201440%2C195%20L1440%2C320%20L0%2C320%20Z%22/%3E%3C/svg%3E");
--bg-plus-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202H15V9H22V15H15V22H9V15H2V9H9V2Z%22/%3E%3C/svg%3E");
--bg-sparkle-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200C12.8%206.2%2013.8%2010.2%2016%2012.4C18.2%2014.6%2022%2015.6%2024%2016C22%2016.4%2018.2%2017.4%2016%2019.6C13.8%2021.8%2012.8%2025.8%2012%2032C11.2%2025.8%2010.2%2021.8%208%2019.6C5.8%2017.4%202%2016.4%200%2016C2%2015.6%205.8%2014.6%208%2012.4C10.2%2010.2%2011.2%206.2%2012%200Z%22/%3E%3C/svg%3E");
--bg-diamond-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20d%3D%22M0%2010L6%200H18L24%2010L12%2032L0%2010Z%22/%3E%3C/svg%3E");
/* Faceted "premium badge" ring — used as a subtle corner emblem so
every preset carries the same luxury medical mark as the reference. */
--bg-emblem-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20opacity%3D%22.55%22%20d%3D%22M60%206c14%2018%2036%2032%2048%2036-4%2028-16%2054-48%2072-32-18-44-44-48-72%2012-4%2034-18%2048-36Z%22/%3E%3Cpath%20fill%3D%22%23fff%22%20opacity%3D%22.9%22%20d%3D%22M60%2038c0%200%2016%2015%2016%2023.6%200%209.5-7.5%2016.4-16%2016.4s-16-6.9-16-16.4C44%2053%2060%2038%2060%2038Z%22/%3E%3C/svg%3E");
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--bg-base, var(--bbb-porcelain));
background-image: var(--bg-gradient);
transition: background-color .4s var(--ease-smooth, ease);
}
/* Fill-parent convenience modifier for screens that already manage height
(e.g. a modal or an embedded panel) instead of a full viewport screen. */
.bbb-bg--fill {
min-height: 0;
height: 100%;
}
.bbb-bg--viewport {
min-height: 100vh;
}
/* Tiled texture layer — one shared ::before, recoloured per preset purely
via blend mode + opacity, so no per-preset pattern image is required. */
.bbb-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--bg-pattern);
background-repeat: repeat;
background-size: var(--bg-pattern-size, 96px 96px);
background-position: center;
opacity: var(--bg-pattern-opacity, .5);
mix-blend-mode: var(--bg-pattern-blend, overlay);
}
/* Soft radial vignette / directional light-source layer — this is what
gives every preset its "soft lighting" premium depth. Supports up to
two stacked light sources per preset (set inside --bg-glow itself). */
.bbb-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: var(--bg-glow);
}
.bbb-bg__content {
position: relative;
z-index: 4;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
/* --- Wave divider(s) — large, flowing, layered for depth --------------- */
.bbb-bg__wave {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
height: clamp(120px, 30vw, 260px);
pointer-events: none;
background-color: var(--bg-wave-color);
background-image: var(--bg-wave-sheen, none);
-webkit-mask: var(--bg-wave-svg) no-repeat bottom / 100% 100%;
mask: var(--bg-wave-svg) no-repeat bottom / 100% 100%;
opacity: var(--bg-wave-opacity, .96);
filter: drop-shadow(0 -14px 26px rgba(0, 0, 0, .12));
}
.bbb-bg__wave--soft {
z-index: 1;
height: clamp(140px, 34vw, 300px);
background-color: var(--bg-wave-color-soft, var(--bg-wave-color));
-webkit-mask-image: var(--bg-wave2-svg);
mask-image: var(--bg-wave2-svg);
opacity: var(--bg-wave-opacity-soft, .5);
filter: none;
}
/* --- Floating decoration layer ---------------------------------------- */
.bbb-bg__decor {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
/* Premium teardrop, with a soft inner shine baked in via a background
gradient painted *under* the same mask, so it reads as a glossy,
dimensional drop rather than a flat silhouette. */
.bbb-bg__drop {
position: absolute;
width: 24px;
height: 30px;
background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 46%);
background-color: var(--bg-drop-color);
background-blend-mode: soft-light;
-webkit-mask: var(--bg-drop-svg) no-repeat center / contain;
mask: var(--bg-drop-svg) no-repeat center / contain;
opacity: var(--bg-drop-opacity, .85);
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .2));
animation: bbbBgFloat 7s ease-in-out infinite;
}
.bbb-bg__drop--sm { width: 13px; height: 17px; }
.bbb-bg__drop--md { width: 24px; height: 30px; }
.bbb-bg__drop--lg { width: 38px; height: 48px; }
.bbb-bg__drop--1 { top: 8%; left: 6%; animation-delay: 0s; }
.bbb-bg__drop--2 { top: 18%; right: 10%; animation-delay: .6s; }
.bbb-bg__drop--3 { top: 42%; left: 4%; animation-delay: 1.2s; }
.bbb-bg__drop--4 { top: 60%; right: 6%; animation-delay: 1.8s; }
.bbb-bg__drop--5 { top: 74%; left: 14%; animation-delay: 2.4s; }
.bbb-bg__drop--6 { top: 30%; left: 46%; animation-delay: 3s; }
.bbb-bg__drop--7 { top: 10%; left: 40%; animation-delay: 3.6s; }
.bbb-bg__drop--8 { top: 55%; right: 32%; animation-delay: 4.2s; }
@keyframes bbbBgFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(4deg); }
}
/* "Blood cell" biconcave ring — gradient ring plus a faint inner core
highlight, so it reads as a soft dimensional disc rather than a flat
doughnut outline. */
.bbb-bg__cell {
position: absolute;
width: 46px;
height: 46px;
border-radius: 50%;
background:
radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .35), transparent 38%),
radial-gradient(circle at 50% 50%, transparent 0 34%, var(--bg-cell-color) 36% 100%);
box-shadow: inset 0 0 14px rgba(0, 0, 0, .14), 0 6px 16px -6px rgba(0, 0, 0, .18);
opacity: var(--bg-cell-opacity, .5);
animation: bbbBgFloat 9s ease-in-out infinite;
}
.bbb-bg__cell--1 { top: 14%; right: 14%; width: 62px; height: 62px; animation-delay: .3s; }
.bbb-bg__cell--2 { top: 66%; left: 8%; width: 42px; height: 42px; animation-delay: 1.4s; }
.bbb-bg__cell--3 { top: 40%; right: 26%; width: 30px; height: 30px; animation-delay: 2.5s; }
.bbb-bg__cell--4 { top: 82%; right: 40%; width: 52px; height: 52px; animation-delay: .9s; }
.bbb-bg__cell--5 { top: 22%; left: 30%; width: 26px; height: 26px; animation-delay: 1.9s; }
.bbb-bg__cell--6 { top: 6%; left: 60%; width: 36px; height: 36px; animation-delay: 3.2s; }
.bbb-bg__sparkle {
position: absolute;
width: 16px;
height: 20px;
background-color: var(--bg-sparkle-color, var(--bbb-gold));
-webkit-mask: var(--bg-sparkle-svg) no-repeat center / contain;
mask: var(--bg-sparkle-svg) no-repeat center / contain;
opacity: var(--bg-sparkle-opacity, .8);
filter: drop-shadow(0 0 6px currentColor);
animation: bbbBgTwinkle 3.4s ease-in-out infinite;
}
.bbb-bg__sparkle--1 { top: 12%; left: 20%; animation-delay: 0s; }
.bbb-bg__sparkle--2 { top: 24%; right: 18%; animation-delay: .5s; width: 10px; height: 13px; }
.bbb-bg__sparkle--3 { top: 50%; left: 8%; animation-delay: 1s; width: 20px; height: 25px; }
.bbb-bg__sparkle--4 { top: 70%; right: 12%; animation-delay: 1.5s; }
.bbb-bg__sparkle--5 { top: 84%; left: 36%; animation-delay: 2s; width: 12px; height: 15px; }
@keyframes bbbBgTwinkle {
0%, 100% { opacity: var(--bg-sparkle-opacity, .8); transform: scale(1); }
50% { opacity: .25; transform: scale(.75); }
}
/* Soft floating blur "orb" — used by glass-heavy presets. */
.bbb-bg__orb {
position: absolute;
border-radius: 50%;
background: var(--bg-orb-color);
filter: blur(2px);
opacity: var(--bg-orb-opacity, .5);
animation: bbbBgFloat 11s ease-in-out infinite;
}
.bbb-bg__orb--1 { width: 90px; height: 90px; top: 10%; right: 8%; }
.bbb-bg__orb--2 { width: 46px; height: 46px; top: 68%; left: 10%; animation-delay: 1.6s; }
.bbb-bg__orb--3 { width: 130px; height: 130px; bottom: -30px; right: -30px; animation-delay: 2.4s; }
.bbb-bg__orb--4 { width: 60px; height: 60px; top: 38%; left: 4%; animation-delay: .8s; }
/* Optional luxury corner emblem — a faceted droplet mark, dormant unless
a screen opts in (matches the app icon language from the reference). */
.bbb-bg__emblem {
position: absolute;
top: 6%;
right: 6%;
width: clamp(70px, 13vw, 130px);
height: clamp(70px, 13vw, 130px);
background-image: var(--bg-emblem-svg);
background-repeat: no-repeat;
background-size: contain;
opacity: var(--bg-emblem-opacity, .16);
pointer-events: none;
}
/* --- Glass card surface — brighter rim light + soft top sheen ---------- */
.bbb-bg__glass {
position: relative;
z-index: 4;
background: var(--bg-glass-bg);
border: 1px solid var(--bg-glass-border);
border-radius: var(--radius-lg, 30px);
box-shadow: var(--bg-shadow), inset 0 1px 0 rgba(255, 255, 255, .35);
-webkit-backdrop-filter: blur(var(--bg-glass-blur, 18px));
backdrop-filter: blur(var(--bg-glass-blur, 18px));
}
/* Medical plus / heartbeat accent icon, mask-based like the drop. */
.bbb-bg__icon-plus {
position: absolute;
width: 20px;
height: 20px;
background-color: var(--bg-icon-color, #fff);
-webkit-mask: var(--bg-plus-svg) no-repeat center / contain;
mask: var(--bg-plus-svg) no-repeat center / contain;
opacity: var(--bg-icon-opacity, .55);
}
/* Faceted diamond accent, used by the luxury preset. */
.bbb-bg__diamond {
position: absolute;
width: 18px;
height: 24px;
background-color: var(--bg-diamond-color, var(--bbb-gold));
-webkit-mask: var(--bg-diamond-svg) no-repeat center / contain;
mask: var(--bg-diamond-svg) no-repeat center / contain;
opacity: var(--bg-diamond-opacity, .8);
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .25));
}
@media (prefers-reduced-motion: reduce) {
.bbb-bg__drop,
.bbb-bg__cell,
.bbb-bg__sparkle,
.bbb-bg__orb {
animation: none;
}
}
/* Mobile tuning — smaller decorations, lighter pattern, so nothing feels
cramped on narrow app-shell screens, while the wave keeps its large,
flowing premium proportions. */
@media (max-width: 480px) {
.bbb-bg { --bg-pattern-size: 64px 64px; }
.bbb-bg__drop { width: 17px; height: 21px; }
.bbb-bg__cell { width: 32px; height: 32px; }
.bbb-bg__wave { height: clamp(90px, 30vw, 170px); }
.bbb-bg__wave--soft { height: clamp(108px, 34vw, 200px); }
.bbb-bg__emblem { opacity: calc(var(--bg-emblem-opacity, .16) * .7); }
}
/* --------------------------------------------------------------------------
2. PRESET 1 — Premium Blood Red
Deep luxury red gradient, glossy blood-drop pattern, large flowing white
wave, soft top-left light source.
-------------------------------------------------------------------------- */
.bbb-bg--preset-1 {
--bg-gradient: radial-gradient(120% 90% at 15% 0%, rgba(255, 92, 122, .38) 0%, transparent 55%),
radial-gradient(70% 50% at 100% 100%, rgba(122, 16, 48, .5) 0%, transparent 60%),
linear-gradient(160deg, var(--bbb-garnet-bright, #FF5C7A) 0%, var(--bbb-garnet, #D1264E) 42%, var(--bbb-garnet-deep, #7A1030) 100%);
--bg-pattern: var(--bg-drop-pattern, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M20%2014C20%2014%2028%2024.6%2028%2030.4C28%2035.1%2024.4%2039%2020%2039C15.6%2039%2012%2035.1%2012%2030.4C12%2024.6%2020%2014%2020%2014Z%22/%3E%3Cpath%20d%3D%22M70%2050C70%2050%2078%2060.6%2078%2066.4C78%2071.1%2074.4%2075%2070%2075C65.6%2075%2062%2071.1%2062%2066.4C62%2060.6%2070%2050%2070%2050Z%22/%3E%3C/g%3E%3C/svg%3E"));
--bg-pattern-opacity: .35;
--bg-pattern-blend: soft-light;
--bg-glow: radial-gradient(60% 45% at 85% 8%, rgba(255, 255, 255, .22), transparent 70%),
radial-gradient(40% 30% at 8% 92%, rgba(255, 255, 255, .1), transparent 70%);
--bg-wave-color: #FDF8F5;
--bg-wave-color-soft: #FCE3E8;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .97;
--bg-wave-opacity-soft: .5;
--bg-drop-color: #FFFFFF;
--bg-drop-opacity: .55;
--bg-cell-color: rgba(255, 255, 255, .35);
--bg-glass-bg: rgba(255, 255, 255, .16);
--bg-glass-border: rgba(255, 255, 255, .32);
--bg-emblem-opacity: .14;
--bg-shadow: 0 24px 56px -18px rgba(122, 16, 48, .6);
color: #FFF7F5;
}
/* --------------------------------------------------------------------------
3. PRESET 2 — Bandhan Inspired
Modern warm gradient with a wide, elegant white wave and glossy drop
decorations, professional/trustworthy premium feel.
-------------------------------------------------------------------------- */
.bbb-bg--preset-2 {
--bg-gradient: radial-gradient(85% 65% at 88% -12%, rgba(255, 122, 148, .34), transparent 62%),
radial-gradient(50% 40% at 6% 96%, rgba(122, 16, 48, .3), transparent 65%),
linear-gradient(150deg, #A31038 0%, var(--bbb-garnet, #D1264E) 38%, #B8123F 70%, #7A1030 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M20%2014C20%2014%2028%2024.6%2028%2030.4C28%2035.1%2024.4%2039%2020%2039C15.6%2039%2012%2035.1%2012%2030.4C12%2024.6%2020%2014%2020%2014Z%22/%3E%3Cpath%20d%3D%22M70%2050C70%2050%2078%2060.6%2078%2066.4C78%2071.1%2074.4%2075%2070%2075C65.6%2075%2062%2071.1%2062%2066.4C62%2060.6%2070%2050%2070%2050Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-size: 120px 120px;
--bg-pattern-opacity: .22;
--bg-pattern-blend: overlay;
--bg-glow: radial-gradient(55% 40% at 20% 100%, rgba(255, 255, 255, .14), transparent 70%),
radial-gradient(45% 35% at 90% 0%, rgba(255, 92, 122, .28), transparent 70%);
--bg-wave-color: #FFFFFF;
--bg-wave-color-soft: #FBE3E8;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: 1;
--bg-wave-opacity-soft: .55;
--bg-drop-color: rgba(255, 255, 255, .6);
--bg-drop-opacity: .82;
--bg-cell-color: rgba(255, 255, 255, .3);
--bg-glass-bg: rgba(255, 255, 255, .97);
--bg-glass-border: rgba(255, 255, 255, .65);
--bg-emblem-opacity: .12;
--bg-shadow: 0 26px 52px -16px rgba(60, 8, 24, .55);
color: #FFF6F4;
}
/* --------------------------------------------------------------------------
4. PRESET 3 — Minimal White
White base, soft red accents, clean medical look, wide pale-blush wave.
-------------------------------------------------------------------------- */
.bbb-bg--preset-3 {
--bg-base: var(--bbb-porcelain, #F7F4F0);
--bg-gradient: radial-gradient(70% 55% at 100% 0%, rgba(209, 38, 78, .1), transparent 70%),
radial-gradient(60% 50% at 0% 100%, rgba(209, 38, 78, .06), transparent 70%),
linear-gradient(180deg, #FFFFFF 0%, var(--bbb-porcelain, #F7F4F0) 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23D1264E%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4%22%3E%3Cpath%20d%3D%22M20%2014C20%2014%2028%2024.6%2028%2030.4C28%2035.1%2024.4%2039%2020%2039C15.6%2039%2012%2035.1%2012%2030.4C12%2024.6%2020%2014%2020%2014Z%22/%3E%3Cpath%20d%3D%22M70%2050C70%2050%2078%2060.6%2078%2066.4C78%2071.1%2074.4%2075%2070%2075C65.6%2075%2062%2071.1%2062%2066.4C62%2060.6%2070%2050%2070%2050Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-size: 108px 108px;
--bg-pattern-opacity: .2;
--bg-pattern-blend: normal;
--bg-glow: radial-gradient(45% 30% at 80% 6%, rgba(255, 255, 255, .6), transparent 70%);
--bg-wave-color: var(--bbb-blush, #FBE9EE);
--bg-wave-color-soft: #FFFFFF;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .95;
--bg-wave-opacity-soft: .6;
--bg-drop-color: var(--bbb-garnet, #D1264E);
--bg-drop-opacity: .2;
--bg-cell-color: rgba(209, 38, 78, .14);
--bg-glass-bg: rgba(255, 255, 255, .88);
--bg-glass-border: rgba(209, 38, 78, .14);
--bg-emblem-opacity: .08;
--bg-shadow: var(--shadow-card, 0 20px 40px -22px rgba(25, 19, 32, .24));
color: var(--bbb-ink, #191320);
}
/* --------------------------------------------------------------------------
5. PRESET 4 — Dark Blood
Dark luxury red/plum, glass effect, deep premium shadow, glowing drops.
-------------------------------------------------------------------------- */
.bbb-bg--preset-4 {
--bg-base: var(--bbb-midnight, #15111D);
--bg-gradient: radial-gradient(80% 60% at 80% -10%, rgba(209, 38, 78, .4), transparent 60%),
radial-gradient(60% 45% at 10% 100%, rgba(255, 92, 122, .12), transparent 65%),
linear-gradient(165deg, #23101B 0%, var(--bbb-midnight, #15111D) 45%, #0D0A12 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M20%2014C20%2014%2028%2024.6%2028%2030.4C28%2035.1%2024.4%2039%2020%2039C15.6%2039%2012%2035.1%2012%2030.4C12%2024.6%2020%2014%2020%2014Z%22/%3E%3Cpath%20d%3D%22M70%2050C70%2050%2078%2060.6%2078%2066.4C78%2071.1%2074.4%2075%2070%2075C65.6%2075%2062%2071.1%2062%2066.4C62%2060.6%2070%2050%2070%2050Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-opacity: .14;
--bg-pattern-blend: overlay;
--bg-glow: radial-gradient(45% 35% at 15% 90%, rgba(255, 92, 122, .2), transparent 70%),
radial-gradient(35% 25% at 85% 10%, rgba(255, 255, 255, .08), transparent 70%);
--bg-wave-color: #1C1420;
--bg-wave-color-soft: #120E16;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 92, 122, .16), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .92;
--bg-wave-opacity-soft: .55;
--bg-drop-color: var(--bbb-garnet-bright, #FF5C7A);
--bg-drop-opacity: .6;
--bg-cell-color: rgba(209, 38, 78, .32);
--bg-glass-bg: rgba(255, 255, 255, .07);
--bg-glass-border: rgba(255, 255, 255, .12);
--bg-glass-blur: 24px;
--bg-emblem-opacity: .1;
--bg-shadow: var(--shadow-card-dk, 0 24px 48px -20px rgba(0, 0, 0, .6));
color: #F4EFEA;
}
/* --------------------------------------------------------------------------
6. PRESET 5 — Medical Blue
Hospital white base, cool blue gradient, medical cross pattern, calm
clinical premium feel.
-------------------------------------------------------------------------- */
.bbb-bg--preset-5 {
--bg-base: #F3F8FC;
--bg-gradient: radial-gradient(70% 55% at 100% 0%, rgba(46, 118, 199, .2), transparent 70%),
radial-gradient(55% 40% at 0% 100%, rgba(46, 118, 199, .1), transparent 70%),
linear-gradient(175deg, #FFFFFF 0%, #EAF3FB 55%, #DCEBF7 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202H15V9H22V15H15V22H9V15H2V9H9V2Z%22%20fill%3D%22%232E76C7%22%20opacity%3D%220.35%22/%3E%3C/svg%3E");
--bg-pattern-size: 60px 60px;
--bg-pattern-opacity: .28;
--bg-pattern-blend: normal;
--bg-glow: radial-gradient(45% 35% at 85% 4%, rgba(255, 255, 255, .7), transparent 70%),
radial-gradient(50% 40% at 0% 100%, rgba(46, 118, 199, .12), transparent 70%);
--bg-wave-color: #DCEBF7;
--bg-wave-color-soft: #FFFFFF;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .96;
--bg-wave-opacity-soft: .55;
--bg-drop-color: #2E76C7;
--bg-drop-opacity: .22;
--bg-cell-color: rgba(46, 118, 199, .18);
--bg-sparkle-color: #2E76C7;
--bg-sparkle-opacity: .5;
--bg-orb-color: rgba(46, 118, 199, .22);
--bg-orb-opacity: .5;
--bg-icon-color: #2E76C7;
--bg-icon-opacity: .4;
--bg-glass-bg: rgba(255, 255, 255, .82);
--bg-glass-border: rgba(46, 118, 199, .2);
--bg-emblem-opacity: .07;
--bg-shadow: 0 20px 42px -20px rgba(24, 60, 99, .32);
color: var(--bbb-ink, #191320);
}
/* --------------------------------------------------------------------------
7. PRESET 6 — Red Wave
Large flowing double waves front-and-centre, soft gradient, premium
directional lighting from the top-right.
-------------------------------------------------------------------------- */
.bbb-bg--preset-6 {
--bg-gradient: radial-gradient(70% 55% at 100% -5%, rgba(255, 92, 122, .3), transparent 60%),
linear-gradient(155deg, #E23A5D 0%, var(--bbb-garnet, #D1264E) 50%, #9C1638 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4%22%3E%3Cpath%20d%3D%22M20%2014C20%2014%2028%2024.6%2028%2030.4C28%2035.1%2024.4%2039%2020%2039C15.6%2039%2012%2035.1%2012%2030.4C12%2024.6%2020%2014%2020%2014Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-size: 64px 64px;
--bg-pattern-opacity: .2;
--bg-pattern-blend: overlay;
--bg-glow: radial-gradient(60% 45% at 90% 0%, rgba(255, 255, 255, .25), transparent 70%),
radial-gradient(40% 30% at 5% 95%, rgba(255, 255, 255, .1), transparent 70%);
--bg-wave-color: #FFFFFF;
--bg-wave-color-soft: #FCEEF1;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: 1;
--bg-wave-opacity-soft: .55;
--bg-drop-color: #FFFFFF;
--bg-drop-opacity: .45;
--bg-cell-color: rgba(255, 255, 255, .28);
--bg-glass-bg: rgba(255, 255, 255, .94);
--bg-glass-border: rgba(255, 255, 255, .55);
--bg-emblem-opacity: .13;
--bg-shadow: 0 26px 52px -18px rgba(80, 10, 30, .48);
color: #FFF6F4;
}
/* --------------------------------------------------------------------------
8. PRESET 7 — Glass Premium
Glassmorphism, blurred floating orbs, translucent wave, airy premium
lighting from two soft sources.
-------------------------------------------------------------------------- */
.bbb-bg--preset-7 {
--bg-gradient: linear-gradient(150deg, #F0879A 0%, #E85C79 45%, var(--bbb-garnet, #D1264E) 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.4%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2242%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22%20opacity%3D%220.32%22/%3E%3C/svg%3E");
--bg-pattern-opacity: .3;
--bg-pattern-blend: soft-light;
--bg-glow: radial-gradient(60% 50% at 20% 10%, rgba(255, 255, 255, .34), transparent 70%),
radial-gradient(50% 45% at 90% 90%, rgba(255, 255, 255, .2), transparent 70%);
--bg-wave-color: rgba(255, 255, 255, .55);
--bg-wave-color-soft: rgba(255, 255, 255, .28);
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .82;
--bg-wave-opacity-soft: .4;
--bg-drop-color: #FFFFFF;
--bg-drop-opacity: .6;
--bg-orb-color: rgba(255, 255, 255, .38);
--bg-orb-opacity: .65;
--bg-cell-color: rgba(255, 255, 255, .3);
--bg-glass-bg: rgba(255, 255, 255, .24);
--bg-glass-border: rgba(255, 255, 255, .5);
--bg-glass-blur: 28px;
--bg-emblem-opacity: .16;
--bg-shadow: 0 24px 50px -16px rgba(122, 16, 48, .42);
color: #FFF9F8;
}
/* --------------------------------------------------------------------------
9. PRESET 8 — Abstract Blood
Modern abstract shapes on a porcelain base, blood-cell-inspired graphics,
minimal decoration, premium editorial feel.
-------------------------------------------------------------------------- */
.bbb-bg--preset-8 {
--bg-base: var(--bbb-porcelain, #F7F4F0);
--bg-gradient: radial-gradient(65% 55% at 85% 12%, rgba(209, 38, 78, .18), transparent 65%),
radial-gradient(55% 45% at 8% 85%, rgba(255, 92, 122, .13), transparent 65%),
linear-gradient(180deg, #FFFFFF 0%, var(--bbb-porcelain, #F7F4F0) 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%23D1264E%22%20stroke-width%3D%221.4%22%20opacity%3D%220.4%22/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2242%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23D1264E%22%20stroke-width%3D%221.2%22%20opacity%3D%220.32%22/%3E%3C/svg%3E");
--bg-pattern-opacity: .5;
--bg-pattern-blend: normal;
--bg-glow: radial-gradient(40% 30% at 90% 0%, rgba(255, 255, 255, .8), transparent 70%);
--bg-wave-color: #FFFFFF;
--bg-wave-color-soft: #FCE9ED;
--bg-wave-sheen: linear-gradient(120deg, rgba(209, 38, 78, .06), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .5;
--bg-wave-opacity-soft: .3;
--bg-drop-color: var(--bbb-garnet, #D1264E);
--bg-drop-opacity: .14;
--bg-cell-color: rgba(209, 38, 78, .24);
--bg-cell-opacity: .8;
--bg-glass-bg: rgba(255, 255, 255, .84);
--bg-glass-border: rgba(209, 38, 78, .16);
--bg-emblem-opacity: .08;
--bg-shadow: var(--shadow-card, 0 20px 38px -22px rgba(25, 19, 32, .24));
color: var(--bbb-ink, #191320);
}
/* --------------------------------------------------------------------------
10. PRESET 9 — Bangladesh Theme
Deep emerald ground with a garnet light source, premium national feel,
minimal pattern, large pale wave.
-------------------------------------------------------------------------- */
.bbb-bg--preset-9 {
--bg-gradient: radial-gradient(60% 45% at 78% -5%, rgba(209, 38, 78, .3), transparent 65%),
linear-gradient(165deg, #0B5A38 0%, #0A4A2F 45%, #073823 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M40%200H0V40%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22/%3E%3C/svg%3E");
--bg-pattern-size: 44px 44px;
--bg-pattern-opacity: .1;
--bg-pattern-blend: overlay;
--bg-glow: radial-gradient(38% 32% at 78% 30%, rgba(209, 38, 78, .58), transparent 68%),
radial-gradient(30% 24% at 10% 95%, rgba(255, 255, 255, .07), transparent 70%);
--bg-wave-color: #F3ECE3;
--bg-wave-color-soft: #E6DFD3;
--bg-wave-sheen: linear-gradient(120deg, rgba(194, 154, 85, .18), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .96;
--bg-wave-opacity-soft: .5;
--bg-drop-color: var(--bbb-garnet-bright, #FF5C7A);
--bg-drop-opacity: .55;
--bg-cell-color: rgba(255, 255, 255, .22);
--bg-glass-bg: rgba(255, 255, 255, .1);
--bg-glass-border: rgba(255, 255, 255, .24);
--bg-emblem-opacity: .16;
--bg-shadow: 0 26px 52px -18px rgba(4, 30, 18, .58);
color: #F3ECE3;
}
/* Abstract "red disc" emblem, evocative rather than a literal flag/map. */
.bbb-bg--preset-9 .bbb-bg__emblem {
position: absolute;
top: 14%;
right: 12%;
width: clamp(90px, 16vw, 170px);
height: clamp(90px, 16vw, 170px);
border-radius: 50%;
background: radial-gradient(circle at 38% 32%, var(--bbb-garnet-bright, #FF5C7A) 0%, var(--bbb-garnet, #D1264E) 55%, var(--bbb-garnet-deep, #7A1030) 100%);
box-shadow: 0 0 64px 12px rgba(209, 38, 78, .38), inset 0 2px 8px rgba(255, 255, 255, .3);
opacity: .92;
}
/* --------------------------------------------------------------------------
11. PRESET 10 — Luxury Medical
Deep plum-and-gold, very premium, soft gradients, luxury glass card
background, elegant faceted decoration.
-------------------------------------------------------------------------- */
.bbb-bg--preset-10 {
--bg-base: var(--bbb-midnight, #15111D);
--bg-gradient: radial-gradient(75% 60% at 12% 0%, rgba(194, 154, 85, .24), transparent 60%),
radial-gradient(55% 40% at 92% 100%, rgba(209, 38, 78, .18), transparent 65%),
linear-gradient(160deg, #241521 0%, var(--bbb-midnight-2, #2B1830) 45%, var(--bbb-midnight, #15111D) 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%220.45%22%3E%3Cpath%20d%3D%22M18%206C18.5%2010.5%2019.5%2012.5%2022%2014C19.5%2015.5%2018.5%2017.5%2018%2022C17.5%2017.5%2016.5%2015.5%2014%2014C16.5%2012.5%2017.5%2010.5%2018%206Z%22/%3E%3Cpath%20d%3D%22M60%2040C60.4%2043.5%2061.2%2045%2063%2046.2C61.2%2047.4%2060.4%2048.9%2060%2052.4C59.6%2048.9%2058.8%2047.4%2057%2046.2C58.8%2045%2059.6%2043.5%2060%2040Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-opacity: .16;
--bg-pattern-blend: screen;
--bg-glow: radial-gradient(45% 35% at 90% 100%, rgba(209, 38, 78, .28), transparent 70%),
radial-gradient(30% 22% at 10% 8%, rgba(194, 154, 85, .18), transparent 70%);
--bg-wave-color: #1C1420;
--bg-wave-color-soft: #120E16;
--bg-wave-sheen: linear-gradient(120deg, rgba(194, 154, 85, .22), rgba(255, 255, 255, 0) 55%);
--bg-wave-opacity: .94;
--bg-wave-opacity-soft: .55;
--bg-drop-color: var(--bbb-gold, #C29A55);
--bg-drop-opacity: .55;
--bg-cell-color: rgba(194, 154, 85, .28);
--bg-diamond-color: var(--bbb-gold, #C29A55);
--bg-diamond-opacity: .88;
--bg-glass-bg: rgba(255, 255, 255, .06);
--bg-glass-border: rgba(194, 154, 85, .38);
--bg-glass-blur: 22px;
--bg-emblem-opacity: .18;
--bg-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(194, 154, 85, .12) inset;
color: #F4EFEA;
}
.bbb-bg--preset-10 .bbb-bg__glass {
border-image: linear-gradient(135deg, rgba(194, 154, 85, .65), rgba(194, 154, 85, 0) 40%, rgba(194, 154, 85, .45)) 1;
}
.bbb-bg--preset-10 .bbb-bg__emblem {
background-image: var(--bg-emblem-svg);
filter: drop-shadow(0 0 10px rgba(194, 154, 85, .4));
}
/* --------------------------------------------------------------------------
12. PRESET 11 — BBB Signature Premium Hero
The studio "master design language" reference itself, made into its own
preset: the deepest, richest garnet gradient in the collection, a fine
hexagon medical-tech grid, extra-large glossy blood drops at varied
opacity, a wide soft-crested white wave with a warm sheen, and the
brightest glass surface + tallest shadow of any preset — intended to
read as the flagship / hero option in the gallery.
-------------------------------------------------------------------------- */
.bbb-bg--preset-11 {
--bg-gradient: radial-gradient(130% 95% at 12% -8%, rgba(255, 92, 122, .46) 0%, transparent 52%),
radial-gradient(90% 70% at 100% 4%, rgba(255, 60, 96, .28) 0%, transparent 58%),
radial-gradient(80% 60% at 100% 100%, rgba(58, 6, 22, .65) 0%, transparent 62%),
linear-gradient(165deg, #C21C46 0%, var(--bbb-garnet, #D1264E) 30%, #8E1236 62%, #4C0C22 100%);
--bg-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22104%22%20height%3D%2290%22%20viewBox%3D%220%200%20104%2090%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.1%22%20opacity%3D%220.55%22%3E%3Cpath%20d%3D%22M26%200L52%2015V45L26%2060L0%2045V15Z%22/%3E%3Cpath%20d%3D%22M78%2015L104%2030V60L78%2075L52%2060V30Z%22/%3E%3Cpath%20d%3D%22M26%2060L52%2075V105L26%20120L0%20105V75Z%22/%3E%3C/g%3E%3C/svg%3E");
--bg-pattern-size: 104px 90px;
--bg-pattern-opacity: .16;
--bg-pattern-blend: soft-light;
--bg-glow: radial-gradient(52% 40% at 88% 6%, rgba(255, 255, 255, .3), transparent 70%),
radial-gradient(46% 34% at 10% 4%, rgba(255, 180, 195, .22), transparent 68%),
radial-gradient(36% 26% at 6% 96%, rgba(255, 255, 255, .08), transparent 70%);
--bg-wave-color: #FFFFFF;
--bg-wave-color-soft: #FCE0E6;
--bg-wave-sheen: linear-gradient(120deg, rgba(255, 231, 210, .55), rgba(255, 255, 255, 0) 60%);
--bg-wave-opacity: 1;
--bg-wave-opacity-soft: .58;
--bg-drop-color: #FFFFFF;
--bg-drop-opacity: .92;
--bg-cell-color: rgba(255, 255, 255, .4);
--bg-cell-opacity: .6;
--bg-sparkle-color: var(--bbb-gold, #C29A55);
--bg-sparkle-opacity: .85;
--bg-orb-color: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
--bg-orb-opacity: .45;
--bg-glass-bg: rgba(255, 255, 255, .92);
--bg-glass-border: rgba(255, 255, 255, .7);
--bg-glass-blur: 24px;
--bg-emblem-opacity: .17;
--bg-shadow: 0 32px 64px -20px rgba(58, 6, 22, .68), 0 0 0 1px rgba(255, 255, 255, .06) inset;
color: #FFF7F5;
}
/* Extra-large "hero" drop size, layered shine + rim light, exclusive to
this preset so its decorations read a size class above every other
preset in the gallery. */
.bbb-bg--preset-11 .bbb-bg__drop {
background-image: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 50%);
filter: drop-shadow(0 12px 20px rgba(58, 6, 22, .3));
}
.bbb-bg--preset-11 .bbb-bg__drop--lg {
width: 46px;
height: 58px;
}
.bbb-bg--preset-11 .bbb-bg__glass {
border-image: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .5)) 1;
}
.bbb-bg--preset-11 .bbb-bg__emblem {
background-image: var(--bg-emblem-svg);
filter: drop-shadow(0 0 14px rgba(255, 255, 255, .5));
}
/* --------------------------------------------------------------------------
3. PRESET REGISTRY (reference only — for the Background Manager)
-------------------------------------------------------------------------- */
/*
preset-1 Premium Blood Red
preset-2 Bandhan Inspired
preset-3 Minimal White
preset-4 Dark Blood
preset-5 Medical Blue
preset-6 Red Wave
preset-7 Glass Premium
preset-8 Abstract Blood
preset-9 Bangladesh Theme
preset-10 Luxury Medical
preset-11 BBB Signature Premium Hero
*/