/* ===================================================================== DAOS — Live Backgrounds Library Plug-and-play, brand-correct backgrounds. Drop this file in, then add one class to a full-bleed container (body, a section, a slide, a card). --------------------------------------------------------------------- ... Tune with CSS variables (set on the element or :root): --brick-opacity texture strength (default .05 dark / .05 light) --brick-size tile size in px (default 200px) --brick-fade mask gradient for the brick (default none = even) --glow-opacity aurora glow strength (default 1) --anim-speed aurora drift duration (default 22s) Every class makes its host position:relative and lifts real content above the texture (direct children get z-index:1). Texture + glow are pointer-events:none, so they never block clicks. ===================================================================== */ [class^="da-bg-"], [class*=" da-bg-"] { position: relative; isolation: isolate; } [class^="da-bg-"] > *, [class*=" da-bg-"] > * { position: relative; z-index: 1; } /* ---------- FLAT BASES ---------- */ .da-bg-jet { background: #0c0c0e; color: #f0f0f2; } .da-bg-snow { background: #f4f4f8; color: #111120; } /* ---------- BRICK WATERMARK (dark) ---------- */ .da-bg-brick { background: #0c0c0e; color: #f0f0f2; } .da-bg-brick::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("assets/watermark-brick.png"); background-size: var(--brick-size, 190px); opacity: var(--brick-opacity, 0.03); -webkit-mask-image: var(--brick-fade, none); mask-image: var(--brick-fade, none); } /* ---------- BRICK WATERMARK (light) ---------- */ .da-bg-brick-light { background: #f4f4f8; color: #111120; } .da-bg-brick-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("assets/watermark-brick-jet.png"); background-size: var(--brick-size, 190px); opacity: var(--brick-opacity, 0.035); -webkit-mask-image: var(--brick-fade, none); mask-image: var(--brick-fade, none); } /* ---------- AURORA (dark) — drifting purple + lime radial glows ---------- */ .da-bg-aurora { background: #0c0c0e; color: #f0f0f2; overflow: hidden; } .da-bg-aurora::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--glow-opacity, 1); transform-origin: 50% 40%; background: radial-gradient(38% 46% at 22% 28%, rgba(99,41,229,0.32), transparent 70%), radial-gradient(40% 48% at 82% 22%, rgba(193,255,114,0.16), transparent 70%), radial-gradient(48% 56% at 60% 104%, rgba(99,41,229,0.16), transparent 70%); animation: daDrift var(--anim-speed, 22s) ease-in-out infinite; } /* ---------- AURORA (light) ---------- */ .da-bg-aurora-light { background: #f4f4f8; color: #111120; overflow: hidden; } .da-bg-aurora-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--glow-opacity, 1); transform-origin: 50% 40%; background: radial-gradient(40% 50% at 20% 26%, rgba(193,255,114,0.55), transparent 70%), radial-gradient(44% 52% at 84% 18%, rgba(99,41,229,0.16), transparent 70%), radial-gradient(50% 58% at 62% 104%, rgba(193,255,114,0.30), transparent 70%); animation: daDrift var(--anim-speed, 22s) ease-in-out infinite; } /* ---------- SPOTLIGHT — single soft top vignette on jet ---------- */ .da-bg-spotlight { background: #0c0c0e; color: #f0f0f2; } .da-bg-spotlight::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% -8%, rgba(193,255,114,0.10), transparent 60%), radial-gradient(120% 120% at 50% 0%, transparent 40%, rgba(0,0,0,0.55) 100%); } /* ---------- SPOTLIGHT (light) — soft purple top glow on snow ---------- */ .da-bg-spotlight-light { background: #f4f4f8; color: #111120; } .da-bg-spotlight-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% -8%, rgba(99,41,229,0.12), transparent 60%), radial-gradient(120% 120% at 50% 0%, transparent 45%, rgba(17,17,32,0.10) 100%); } /* ---------- SIGNATURE — brick texture + aurora drift (the hero combo) ---------- */ .da-bg-signature { background: #0c0c0e; color: #f0f0f2; overflow: hidden; } .da-bg-signature::before { /* aurora */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--glow-opacity, 1); transform-origin: 40% 30%; background: radial-gradient(40% 48% at 18% 26%, rgba(99,41,229,0.30), transparent 70%), radial-gradient(42% 50% at 86% 18%, rgba(193,255,114,0.15), transparent 70%); animation: daDrift var(--anim-speed, 26s) ease-in-out infinite; } .da-bg-signature::after { /* brick */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("assets/watermark-brick.png"); background-size: var(--brick-size, 190px); opacity: var(--brick-opacity, 0.035); -webkit-mask-image: var(--brick-fade, linear-gradient(105deg, #000 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2) 78%, transparent 100%)); mask-image: var(--brick-fade, linear-gradient(105deg, #000 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2) 78%, transparent 100%)); } /* ---------- SIGNATURE (light) ---------- */ .da-bg-signature-light { background: #f4f4f8; color: #111120; overflow: hidden; } .da-bg-signature-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--glow-opacity, 1); transform-origin: 40% 30%; background: radial-gradient(42% 50% at 18% 24%, rgba(193,255,114,0.50), transparent 70%), radial-gradient(46% 54% at 86% 16%, rgba(99,41,229,0.14), transparent 70%); animation: daDrift var(--anim-speed, 26s) ease-in-out infinite; } .da-bg-signature-light::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("assets/watermark-brick-jet.png"); background-size: var(--brick-size, 190px); opacity: var(--brick-opacity, 0.03); -webkit-mask-image: var(--brick-fade, linear-gradient(105deg, #000 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2) 78%, transparent 100%)); mask-image: var(--brick-fade, linear-gradient(105deg, #000 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2) 78%, transparent 100%)); } @keyframes daDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.08); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .da-bg-aurora::before, .da-bg-aurora-light::before, .da-bg-signature::before, .da-bg-signature-light::before { animation: none; } }