/* ============================================================ Global hero background — the homepage hero look (navy → royal blue, cyan/blue glows and a fine grid that fades towards the edges). ------------------------------------------------------------ Loaded on every frontend page: resources/views/frontend/layouts/style.blade.php Use:
…
Source of truth for the colours: public/frontend/css/home-hero.css (.hs) The grid is drawn as background layers (not ::before/::after), so a hero's own decorative pseudo-elements keep working. !important lets this win over page-specific hero backgrounds that load later in . ============================================================ */ :root { --w3-hero-navy: #061634; --w3-hero-navy-2: #0a2a6b; --w3-hero-glow-1: rgba(34, 211, 238, .18); --w3-hero-glow-2: rgba(37, 99, 235, .35); --w3-hero-grid: rgba(255, 255, 255, .05); } .w3-hero-bg { background-color: var(--w3-hero-navy) !important; background-image: radial-gradient(900px 500px at 85% 20%, var(--w3-hero-glow-1), transparent 60%), radial-gradient(700px 500px at 10% 90%, var(--w3-hero-glow-2), transparent 60%), /* fades the grid out towards the edges, like the homepage mask */ radial-gradient(ellipse at center, transparent 30%, rgba(6, 22, 52, .92) 75%), linear-gradient(var(--w3-hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--w3-hero-grid) 1px, transparent 1px), linear-gradient(135deg, var(--w3-hero-navy) 0%, var(--w3-hero-navy-2) 100%) !important; background-size: auto, auto, auto, 48px 48px, 48px 48px, auto !important; background-position: 0 0 !important; background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important; background-attachment: scroll !important; color: #fff; }