/* * DD9 animated hero — styles for the [dd9_hero] shortcode. * * Enqueued in (so the resting background paints on the first frame, no flash) only on pages * that contain the shortcode. The shortcode renders the headline, subhead, and a `.dd9-hero` mount * point; the JS relocates `.dd9-hero` into the containing row and mounts the WebGL canvas there, * behind the content. Everything scopes to the hero via `:has(.dd9-hero)` on the row or the hero's * own classes — so nothing leaks to the rest of the page and none of it hard-codes Salient's row * classes. (The subhead's own typography lives in the main stylesheet: `.dd9-hero-subhead p`.) */ /* ---------- first-paint background + reveal (on the row that holds the shortcode) ---------- */ .wpb_row:has(.dd9-hero) { background: #2a0826; } .wpb_row:has(.dd9-hero) .row-bg { background: transparent; } /* Reveal cover: the resting radial on top of everything until the first WebGL frame paints, then faded out via .dd9-revealed (the JS adds it to the row). */ .wpb_row:has(.dd9-hero)::after { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: 6; pointer-events: none; background: radial-gradient(125% 125% at 18% 8%, #66175e 0%, #2e082e 72%); transition: opacity 1.1s ease; } .wpb_row:has(.dd9-hero).dd9-revealed::after { opacity: 0; } /* Deliberate 1px gradient hairline along the bottom edge — a reproduction of the old build's rounding artifact, where the diagonal background peeked out below the canvas. Repurposes the child theme's .bg-diagonal::before (otherwise hidden behind the canvas here), fully overriding it, and rides above the reveal cover so it's crisp from first paint. Bump the height to taste. */ .wpb_row:has(.dd9-hero)::before { content: ""; display: block; position: absolute; top: auto; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 2px; margin-left: 0; transform: none; z-index: 8; background-image: linear-gradient(67deg, rgb(85, 15, 113) 10%, rgb(135, 29, 127) 57%, rgb(255, 20, 157) 90%); } /* Content columns ride above the canvas + cover. */ .wpb_row:has(.dd9-hero) > .col, .wpb_row:has(.dd9-hero) > [class*="col"] { position: relative; z-index: 7; } /* ---------- canvas host (the shortcode's .dd9-hero, relocated into the row by the JS) ---------- */ .dd9-hero { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: 4; } .dd9hero-canvas, .dd9hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; } .dd9hero-canvas { display: block; } .dd9hero-scrim { pointer-events: none; } /* Fade the headline + subhead for the "Hide the Headline" toggle (Salient renders the headline itself — including its half-text highlight — so we don't touch its opacity/clip otherwise). */ .wpb_row:has(.dd9-hero) .nectar-highlighted-text, .wpb_row:has(.dd9-hero) .dd9-hero-subhead { transition: opacity 0.4s ease; } /* "Hide the Headline" — JS toggles .dd9-hero-bare on the row. The extra class out-specifies the neutralize rule above so opacity:0 wins. */ .wpb_row:has(.dd9-hero).dd9-hero-bare .nectar-highlighted-text, .wpb_row:has(.dd9-hero).dd9-hero-bare .dd9-hero-subhead { opacity: 0 !important; pointer-events: none; } /* ---------- playground: badge + panel ---------- */ .dd9pg { position: fixed; bottom: 28px; right: 28px; z-index: 9999; transition: opacity 0.35s ease, transform 0.35s ease; } .dd9pg[hidden] { display: none; } .dd9pg--away { opacity: 0; pointer-events: none; transform: translateY(10px); } @media (max-width: 767px) { .dd9pg { display: none; } } .dd9pg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; background: rgba(20, 2, 22, 0.5); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.2s, box-shadow 0.3s, background 0.2s; animation: dd9pgB 3.2s ease-in-out infinite; } .dd9pg-badge:hover { transform: translateY(-2px); background: rgba(42, 4, 42, 0.72); box-shadow: 0 6px 30px rgba(255, 20, 157, 0.45); animation: none; } .dd9pg-badge .s { color: #ff149d; font-size: 15px; } @keyframes dd9pgB { 0%, 100% { box-shadow: 0 4px 22px rgba(255, 20, 157, 0.16); } 50% { box-shadow: 0 4px 30px rgba(255, 20, 157, 0.5); } } .dd9pg-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: 288px; max-height: calc(100vh - 110px); overflow-y: auto; background: rgba(14, 1, 16, 0.92); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; padding: 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #eccfe6; font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .dd9pg-panel[hidden] { display: none; } .dd9pg-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .dd9pg-hd b { color: #fff; font-size: 13px; } .dd9pg-x { cursor: pointer; color: #c79bbd; font-size: 18px; line-height: 1; background: none; border: 0; padding: 0; } .dd9pg-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: #9a6f90; margin: 12px 0 6px; } .dd9pg-pre { display: flex; gap: 6px; margin-bottom: 14px; } .dd9pg-pre button { flex: 1; height: 26px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.16); padding: 0; font-size: 0; } .dd9pg-col { display: flex; gap: 8px; } .dd9pg-col label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #b890ad; } .dd9pg-col input { width: 100%; height: 30px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; background: none; cursor: pointer; padding: 2px; } .dd9pg-sl { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; margin: 7px 0; } .dd9pg-sl input { width: 100%; accent-color: #ff149d; } .dd9pg-rs, .dd9pg-tg { width: 100%; background: none; color: #c79bbd; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 8px; cursor: pointer; font-weight: 600; } .dd9pg-rs { margin-top: 12px; } .dd9pg-rs:hover { color: #fff; border-color: rgba(255, 20, 157, 0.5); } .dd9pg-tg { margin-bottom: 10px; } .dd9pg-tg.on { color: #fff; border-color: rgba(255, 20, 157, 0.5); background: rgba(255, 20, 157, 0.12); }