Cookie Banner Visual Studio & Configurator

The Banner Visual Studio allows developers and compliance officers to customize the visual presentation, interactive behavior, and branding of the consent banner.

---

Layout Configurations

Layout Option	Best For	Visual Position
Floating Bottom Pill	SaaS, modern web apps	Bottom-left or bottom-right floating card with subtle glow.
Full-Width Bottom Bar	E-commerce storefronts	Docked edge-to-edge bar at the bottom of the viewport.
Centered HUD Modal	Strict GDPR / Enterprise	High-priority overlay requiring affirmative visitor choice.
Minimalist Tab / Reticle	Luxury & portfolio brands	Compact HUD node expanding upon visitor interaction.

---

Color Themes & Presets

1. Cyber Slate (Default): Deep dark blue background (#020617), cyan neon accents (#22d3ee), and geometric reticle brackets.
2. Minimal Dark: Monochromatic charcoal background (#09090b) with crisp white typography.
3. Clean Light: High-contrast daylight theme (#ffffff) with subtle border shadows for light-themed storefronts.
4. Custom CSS Mode: Inject proprietary stylesheet rules directly into the isolated Shadow DOM.

---

Custom CSS Overrides

/* Example: Customizing Banner Typography and Border Glow */
#consent-shield-banner {
  --cs-bg: #020617;
  --cs-border: rgba(34, 211, 238, 0.4);
  --cs-accent: #22d3ee;
  --cs-font-family: 'Rajdhani', sans-serif;
  --cs-border-radius: 4px;
}

#consent-shield-banner .cs-btn-primary {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}