/* ========================================================================== Caven theme — animations, layout polish, and component styles. Loaded both on the front-end and in the editor. ========================================================================== */ :root { --caven-magenta: #FF2D87; --caven-electric-pink: #FF6BB1; --caven-deep-blue: #1F3DC9; --caven-bright-blue: #3354FF; --caven-royal-purple: #6B1FB1; --caven-ink: #0A0F2C; --caven-cream: #FDF8F0; --caven-easing: cubic-bezier(.2,.7,.2,1); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Skip link (accessibility) */ .caven-skip-link { position: absolute; top: 0; left: 0; padding: 0.75rem 1.25rem; background: var(--caven-magenta); color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8125rem; text-decoration: none; transform: translateY(-120%); transition: transform .2s var(--caven-easing); z-index: 1000; } .caven-skip-link:focus { transform: translateY(0); outline: none; } /* Focus rings — visible only via keyboard */ *:focus-visible { outline: 2px solid var(--caven-magenta); outline-offset: 3px; border-radius: 0; } .wp-element-button:focus-visible, .wp-block-button__link:focus-visible { outline-offset: 4px; } /* ========================================================================== Header — sticky, transparent, scroll-state The .wp-block-template-part wrapper takes position:sticky because it is the element WordPress renders around our header part; sticky on the inner .caven-header would never trigger because its parent has the same height. ========================================================================== */ header.wp-block-template-part:has(.caven-header), header.wp-block-template-part.caven-header-wrapper { position: sticky; top: 0; z-index: 100; } /* Body scroll-lock when the mobile nav overlay is open. JS adds .caven-menu-open to and while the overlay is visible. Both elements get overflow:hidden because iOS Safari ignores html-only overflow:hidden in some cases. overscroll-behavior:none kills rubber-band scrolling that would otherwise leak through to the underlying page. */ html.caven-menu-open, body.caven-menu-open { overflow: hidden !important; overscroll-behavior: none; } .caven-header { background: transparent; transition: background .35s var(--caven-easing), backdrop-filter .35s var(--caven-easing), border-color .35s var(--caven-easing); border-bottom: 1px solid transparent; } .caven-header.is-scrolled { background: rgba(10, 15, 44, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(255, 45, 135, 0.18); } /* The mobile nav overlay opens via WP Interactivity API at position:fixed; inset:0. When .caven-header carries backdrop-filter, it becomes the containing block for fixed descendants (per CSS Backdrop Filter spec); combined with the body overflow:hidden that un-sticks the header above, the overlay ends up anchored to the header's document-flow position — off-screen above the viewport when the user is scrolled. Drop the filter while the menu is open so the overlay anchors to the viewport again. The blur is invisible behind the full-screen overlay anyway. */ html.caven-menu-open .caven-header.is-scrolled, body.caven-menu-open .caven-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; } .caven-header__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 0.5rem + 1vw, 2rem); max-width: 1440px; margin-inline: auto; width: 100%; } /* Logo (SVG inline) */ .caven-logo { display: inline-flex; align-items: center; color: var(--caven-cream); text-decoration: none; transition: opacity .25s var(--caven-easing); } .caven-logo:hover { opacity: 0.85; } .caven-logo img, .caven-logo svg { display: block; height: clamp(1.5rem, 1.2rem + 0.6vw, 2rem); width: auto; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.4)); } .caven-logo__triangle { color: var(--caven-magenta); } /* Navigation — desktop styling overrides for core/navigation */ .caven-header .wp-block-navigation { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.95rem); } .caven-header .wp-block-navigation a, .caven-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--caven-cream); text-decoration: none; position: relative; padding: 0.6rem 0.25rem; transition: color .2s var(--caven-easing); } /* Underline below the link (secondary indicator). */ .caven-header .wp-block-navigation a::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.25rem; height: 1px; background: var(--caven-magenta); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--caven-easing); } .caven-header .wp-block-navigation a:hover, .caven-header .wp-block-navigation .current-menu-item > a { color: #fff; } .caven-header .wp-block-navigation a:hover::after, .caven-header .wp-block-navigation a:focus-visible::after, .caven-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); } /* Magenta triangle indicator above each nav item — drops in on hover/focus, reuses the wordmark's triangle motif. The SVG is inlined as a data URI so no extra request and the magenta fill is encoded directly. */ .caven-header .wp-block-navigation a::before, .caven-header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content::before { content: ""; position: absolute; top: -0.4em; left: 50%; width: 0.75em; height: 0.6em; transform: translateX(-50%) translateY(-8px); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(0 0 10px rgba(255, 45, 135, 0.75)); opacity: 0; transition: opacity .28s var(--caven-easing), transform .28s var(--caven-easing); pointer-events: none; } .caven-header .wp-block-navigation a:hover::before, .caven-header .wp-block-navigation a:focus-visible::before, .caven-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before, .caven-header .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::before, .caven-header .wp-block-navigation .current-menu-item > a::before { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .caven-header .wp-block-navigation a::before, .caven-header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content::before { transition: opacity .15s linear; transform: translateX(-50%) translateY(0); } } /* Hide the indicator triangle inside dropdown panels and inside the mobile overlay — it would feel redundant against the panel layout. */ .caven-header .wp-block-navigation__submenu-container a::before, .wp-block-navigation__responsive-container.is-menu-open a::before, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before { display: none !important; } /* Touch devices: hover state can stick after a tap, leaving a nav item visually "selected" until the user taps elsewhere. Suppress the desktop hover affordances when the device has no real hover. */ @media (hover: none) { .caven-header .wp-block-navigation a::after, .caven-header .wp-block-navigation a::before, .caven-header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content::before { display: none !important; } .caven-header .wp-block-navigation a:hover, .caven-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--caven-cream); } .caven-header .wp-block-navigation__responsive-container-open:hover { color: var(--caven-cream); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { transform: none; } } /* Submenu chevrons */ .caven-header .wp-block-navigation__submenu-icon { color: var(--caven-magenta); transition: transform .25s var(--caven-easing); } .caven-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon, .caven-header .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation__submenu-icon { transform: rotate(180deg); } /* Submenu dropdowns */ .caven-header .wp-block-navigation__submenu-container { background: rgba(10, 15, 44, 0.96); backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 45, 135, 0.22); border-radius: 0; padding: 0.4rem; min-width: 220px; box-shadow: 0 24px 56px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--caven-easing), transform .25s var(--caven-easing); pointer-events: none; } /* Open the submenu on hover (mouse), focus-within (keyboard), or when the toggle reports aria-expanded="true" (Interactivity API click/Enter). The height/width/visibility resets counter core's hidden defaults at L93–113 of wp-includes/blocks/navigation/style.css, which are kept applied for items with class `open-on-hover-click` because core's open-rule excludes them. */ .caven-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .caven-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container, .caven-header .wp-block-navigation-item.has-child:has(> button[aria-expanded="true"]) > .wp-block-navigation__submenu-container { opacity: 1; visibility: visible; height: auto; width: auto; overflow: visible; transform: translateY(0); pointer-events: auto; } .caven-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 0.85rem; letter-spacing: 0.06em; } .caven-header .wp-block-navigation__submenu-container a::after { display: none; } .caven-header .wp-block-navigation__submenu-container a:hover { background: rgba(255, 45, 135, 0.12); color: var(--caven-electric-pink); } /* Hamburger button (mobile + tablet) */ .caven-header .wp-block-navigation__responsive-container-open { color: var(--caven-cream); min-width: 44px; min-height: 44px; padding: 10px; transition: color .2s var(--caven-easing); } .caven-header .wp-block-navigation__responsive-container-open:hover { color: var(--caven-magenta); } .caven-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; } /* Raise WP core's overlay-menu breakpoint from 600px up to 1024px so the inline list never wraps to a second/third row on tablet & small-laptop viewports. Counters core/style.css min-width:600px rules; scoped to .caven-header so other navigation blocks elsewhere on the site are unaffected. The Interactivity-API JS that toggles `is-menu-open` is viewport-agnostic, so the burger keeps working exactly as it does on phones today. */ @media (max-width: 1023.98px) { .caven-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .caven-header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container-open { display: flex !important; } .caven-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: block !important; } } /* Mobile overlay */ .wp-block-navigation__responsive-container.is-menu-open { background: var(--caven-ink) !important; background-image: radial-gradient(circle at 20% 20%, rgba(255, 45, 135, 0.45), transparent 50%), radial-gradient(circle at 80% 80%, rgba(31, 61, 201, 0.55), transparent 55%), linear-gradient(160deg, #1F3DC9 0%, #6B1FB1 60%, #FF2D87 100%) !important; background-size: 200% 200%, 200% 200%, 100% 100%; animation: caven-base-drift 18s ease-in-out infinite; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.18; pointer-events: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100dvh; padding: clamp(4.5rem, 14vh, 7rem) 1rem 3rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem) !important; width: min(30rem, 94vw); margin-inline: auto; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; text-align: center; justify-content: center !important; /* override desktop's flex-end */ } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100% !important; text-align: center !important; flex: 1 1 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: inline-block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(2rem, 1.5rem + 4vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: none; color: #fff; padding: 0.4rem 0; transition: color .2s var(--caven-easing), transform .2s var(--caven-easing); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--caven-magenta); transform: translateX(8px); } @media (prefers-reduced-motion: no-preference) { .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { opacity: 0; animation: caven-mobile-stagger .55s var(--caven-easing) forwards; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .05s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .10s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .15s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .20s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .25s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .30s; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .35s; } } @keyframes caven-mobile-stagger { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Submenus inside the mobile overlay: list inline, smaller */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0.25rem auto 0.5rem; opacity: 1; transform: none; pointer-events: auto; gap: 0.25rem; align-items: center !important; justify-content: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { justify-content: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem); font-weight: 500; color: rgba(253, 248, 240, 0.78); letter-spacing: 0.04em; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--caven-magenta); } /* Close button polish — 44x44 hit area meets WCAG 2.5.5 / Apple HIG */ .wp-block-navigation__responsive-container-close { color: #fff; min-width: 44px; min-height: 44px; padding: 10px; transition: color .2s var(--caven-easing), transform .2s var(--caven-easing); } .wp-block-navigation__responsive-container-close:hover { color: var(--caven-magenta); transform: rotate(90deg); } /* ========================================================================== Hero — three-layer animated wave gradient ========================================================================== */ .caven-hero { position: relative; min-height: clamp(34rem, 60svh + 9rem, 56rem); display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; background: var(--caven-ink); margin-top: calc(-1 * (clamp(1.5rem, 1.2rem + 0.75vw, 2.5rem) * 2 + 1.75rem)); /* pull under sticky header */ padding-block: clamp(5rem, 3.5rem + 6vw, 9rem) !important; /* compensate so content sits below header, fluid both ends */ padding-inline: clamp(1rem, 0.5rem + 2vw, 3rem) !important; } .caven-hero__layer { position: absolute; inset: -10%; pointer-events: none; z-index: 0; will-change: transform, background-position; } /* Frosted-aurora bg: the colour layers behind get a heavy blur+saturate so they read as moving dreamy clouds. The SVG neon ribbons (further down) stay sharp on top, providing the "something is happening through the haze" cue. Inset extended to -25% so the blurred edges don't reveal the hero boundary. */ /* Layer 1: base diagonal gradient that slowly drifts */ .caven-hero__layer--base { inset: -25%; background: linear-gradient(135deg, #1F3DC9 0%, #3354FF 22%, #6B1FB1 50%, #FF2D87 78%, #FF6BB1 100%); background-size: 220% 220%; filter: blur(60px) saturate(1.45) brightness(1.05); } /* Layers 2-4: color blobs that travel right-to-left like waves of light. Alphas bumped past their pre-blur values so the clouds still read strongly after diffusion. */ .caven-hero__layer--wave-1 { inset: -25%; background: radial-gradient(closest-side at center, rgba(255, 45, 135, 1) 0%, rgba(255, 107, 177, 0.7) 35%, rgba(255, 45, 135, 0) 65%); mix-blend-mode: screen; filter: blur(70px) saturate(1.5); } .caven-hero__layer--wave-2 { inset: -25%; background: radial-gradient(closest-side at center, rgba(31, 61, 201, 1) 0%, rgba(51, 84, 255, 0.75) 35%, rgba(31, 61, 201, 0) 65%); mix-blend-mode: screen; filter: blur(70px) saturate(1.5); } .caven-hero__layer--wave-3 { inset: -25%; background: radial-gradient(closest-side at center, rgba(255, 107, 177, 0.85) 0%, rgba(255, 107, 177, 0) 60%); mix-blend-mode: screen; filter: blur(60px) saturate(1.4); } /* Noise: keeps the gradient organic, not banded */ .caven-hero__layer--noise { background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.16; } /* Vignette: subtle darkening at the edges so the wordmark pops */ .caven-hero__layer--vignette { background: radial-gradient(ellipse at center, rgba(10,15,44,0) 50%, rgba(10,15,44,0.45) 100%); pointer-events: none; } /* SVG sine-wave ribbons — laser/oscilloscope feel, sweep right-to-left. Each layer is 200% wide; translating -50% slides exactly one full pattern period off-screen to the left while the duplicate half rolls in from the right, so the loop is seamless. mix-blend-mode: screen lets the strokes glow over the gradient like neon. */ .caven-hero__layer--svgwave { inset: auto; top: 0; left: 0; width: 200%; height: 100%; mix-blend-mode: screen; z-index: 1; } .caven-hero__layer--svgwave svg { display: block; width: 100%; height: 100%; overflow: visible; } .caven-hero__svgwave { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* Wave intensities tuned down so the wordmark reads first; the ribbons stay visible as ambient motion but no longer compete with the type. */ .caven-hero__svgwave--1 { stroke: #FF2D87; stroke-width: 2px; filter: drop-shadow(0 0 12px #FF2D87) drop-shadow(0 0 22px rgba(255,45,135,0.45)); opacity: 0.6; } .caven-hero__svgwave--2 { stroke: #FF6BB1; stroke-width: 1.5px; filter: drop-shadow(0 0 10px #FF6BB1) drop-shadow(0 0 18px rgba(255,107,177,0.4)); opacity: 0.45; } .caven-hero__svgwave--3 { stroke: #3354FF; stroke-width: 2.25px; filter: drop-shadow(0 0 14px #3354FF) drop-shadow(0 0 24px rgba(31,61,201,0.4)); opacity: 0.55; } .caven-hero__svgwave--4 { stroke: #FF6BB1; stroke-width: 1.25px; filter: drop-shadow(0 0 8px #FF6BB1); opacity: 0.35; } @media (prefers-reduced-motion: no-preference) { .caven-hero__layer--svgwave-1 { animation: caven-svgwave-rtl 14s linear infinite; } .caven-hero__layer--svgwave-2 { animation: caven-svgwave-rtl 22s linear infinite; animation-delay: -4s; } .caven-hero__layer--svgwave-3 { animation: caven-svgwave-rtl 11s linear infinite; animation-delay: -3s; } .caven-hero__layer--svgwave-4 { animation: caven-svgwave-rtl 30s linear infinite; animation-delay: -8s; } } @keyframes caven-svgwave-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: no-preference) { .caven-hero__layer--base { animation: caven-base-drift 38s ease-in-out infinite; } .caven-hero__layer--wave-1 { animation: caven-wave-rtl-1 24s linear infinite; } .caven-hero__layer--wave-2 { animation: caven-wave-rtl-2 32s linear infinite; animation-delay: -9s; } .caven-hero__layer--wave-3 { animation: caven-wave-rtl-3 19s linear infinite; animation-delay: -5s; } } @keyframes caven-base-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Right-to-left sweeps with sinusoidal vertical bob and gentle scale pulse. Linear timing keeps the horizontal velocity steady — the wave-like feel comes from the vertical undulation between keyframes. */ @keyframes caven-wave-rtl-1 { 0% { transform: translate( 140%, 4%) scale(1.05); } 16% { transform: translate( 85%, -2%) scale(1.15); } 33% { transform: translate( 35%, 5%) scale(1.0); } 50% { transform: translate( -15%, -3%) scale(1.18); } 66% { transform: translate( -55%, 4%) scale(0.92); } 83% { transform: translate( -95%, -3%) scale(1.05); } 100% { transform: translate(-140%, 4%) scale(1.05); } } @keyframes caven-wave-rtl-2 { 0% { transform: translate( 145%, -5%) scale(1.0); } 20% { transform: translate( 85%, 3%) scale(0.92); } 40% { transform: translate( 30%, -4%) scale(1.2); } 60% { transform: translate( -25%, 5%) scale(1.05); } 80% { transform: translate( -85%, -3%) scale(0.95); } 100% { transform: translate(-145%, -5%) scale(1.0); } } @keyframes caven-wave-rtl-3 { 0% { transform: translate( 135%, 0%) scale(0.9); } 25% { transform: translate( 60%, 4%) scale(1.05); } 50% { transform: translate( -10%, -4%) scale(1.15); } 75% { transform: translate( -75%, 3%) scale(0.95); } 100% { transform: translate(-135%, 0%) scale(0.9); } } .caven-hero__content { position: relative; z-index: 1; width: 100%; max-width: min(78rem, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1rem, 0.4rem + 2.2vw, 2.75rem); } /* Eyebrow — Dallas · Cedar Springs · Since 1969 — anchors the wordmark to a place and a heritage. Cream text, magenta dots, hairline rules either side. */ .caven-eyebrow { margin: 0; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(0.5rem, 0.4rem + 0.5vw, 0.85rem); font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: clamp(0.7rem, 0.62rem + 0.25vw, 0.875rem); letter-spacing: clamp(0.22em, 0.18em + 0.25vw, 0.34em); text-transform: uppercase; color: rgba(253, 248, 240, 0.82); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .caven-eyebrow__rule { display: inline-block; width: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(253, 248, 240, 0.7), transparent); } .caven-eyebrow__dot { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: var(--caven-magenta); box-shadow: 0 0 10px rgba(255, 45, 135, 0.85); transform: translateY(-1px); } /* Wordmark — supplied brand lockup (caven-full-white.png) including the "We Welcome Everyone" tagline. Fluid width keeps the lockup in scale with the hero. */ .caven-wordmark { position: relative; display: inline-block; color: var(--caven-cream); filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.35)); } .caven-wordmark--lockup { width: clamp(14rem, 4rem + 50vw, 80rem); max-width: 100%; line-height: 0; } .caven-wordmark__image { display: block; width: 100%; height: auto; } /* Soft halo behind the wordmark — lifts the lockup off the busy gradient without darkening the surrounding hero. Pure-CSS radial. */ .caven-wordmark__halo { position: absolute; inset: -18% -8%; z-index: -1; background: radial-gradient(ellipse at 50% 55%, rgba(10, 15, 44, 0.55) 0%, rgba(10, 15, 44, 0.28) 35%, rgba(10, 15, 44, 0) 70%); pointer-events: none; filter: blur(6px); } .caven-wordmark__text { display: inline-block; } .caven-wordmark__v { position: relative; display: inline-block; } .caven-wordmark .triangle { position: absolute; top: 0.20em; /* nestled inside the V's upper interior */ left: 50%; transform: translateX(-50%); width: 0.26em; height: 0.215em; color: var(--caven-magenta); display: inline-block; pointer-events: none; filter: drop-shadow(0 0 24px rgba(255,45,135,0.85)); } .caven-wordmark .triangle svg { width: 100%; height: 100%; display: block; } @media (prefers-reduced-motion: no-preference) { .caven-wordmark .triangle { animation: caven-tri-pulse 3.2s ease-in-out infinite; } } @keyframes caven-tri-pulse { 0%, 100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 24px rgba(255,45,135,0.75)); } 50% { transform: translateX(-50%) scale(1.08); filter: drop-shadow(0 0 36px rgba(255,45,135,1)); } } .caven-tagline { font-family: "Bricolage Grotesque", sans-serif; letter-spacing: 0.42em; font-weight: 500; text-transform: uppercase; font-size: clamp(0.875rem, 0.7rem + 0.6vw, 1.1rem); color: var(--caven-cream); text-shadow: 0 2px 12px rgba(0,0,0,0.35); } /* Hero buttons — fluid row gap and refined hover */ .caven-hero .wp-block-buttons.is-layout-flex { gap: clamp(0.5rem, 0.3rem + 0.7vw, 1rem); flex-wrap: wrap; justify-content: center; } .caven-hero .wp-block-button__link { position: relative; overflow: hidden; padding-block: clamp(0.7rem, 0.55rem + 0.55vw, 1.05rem); padding-inline: clamp(1.25rem, 0.95rem + 1.25vw, 2.25rem); font-size: clamp(0.8125rem, 0.78rem + 0.18vw, 0.95rem); letter-spacing: clamp(0.08em, 0.07em + 0.12vw, 0.14em); line-height: 1.2; transition: transform .35s var(--caven-easing), color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .35s var(--caven-easing); } .caven-hero .wp-block-button__link:hover { transform: translateY(-2px); } /* Primary CTA — brand magenta with a soft glow that intensifies on hover. */ .caven-hero .caven-btn--solid .wp-block-button__link { box-shadow: 0 12px 32px rgba(255, 45, 135, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .caven-hero .caven-btn--solid .wp-block-button__link:hover { background-color: var(--caven-electric-pink) !important; box-shadow: 0 18px 44px rgba(255, 45, 135, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* Ghost CTA — cream outline with a triangle that nods downward on hover to echo the wordmark's V triangle and signal "scroll/jump down". */ .caven-hero .caven-btn--ghost .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.65em; background-color: rgba(253, 248, 240, 0.04); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .caven-hero .caven-btn--ghost .wp-block-button__link:hover { background-color: rgba(253, 248, 240, 0.12); color: var(--caven-cream) !important; border-color: var(--caven-cream) !important; } .caven-hero .caven-btn__arrow { display: inline-flex; width: 0.8em; height: 0.55em; color: var(--caven-magenta); filter: drop-shadow(0 0 6px rgba(255, 45, 135, 0.6)); transition: transform .35s var(--caven-easing); } .caven-hero .caven-btn__arrow svg { width: 100%; height: 100%; display: block; } .caven-hero .caven-btn--ghost .wp-block-button__link:hover .caven-btn__arrow { transform: translateY(2px); } /* Scroll indicator — a small "Step Inside" eyebrow, hairline drop-line, and a single chevron that gently bobs. More confident than three stacked arrows; reads as an invitation rather than a wayfinding glyph. */ .caven-hero__scroll { position: absolute; bottom: clamp(1rem, 0.5rem + 1.5vw, 2.25rem); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(0.35rem, 0.25rem + 0.4vw, 0.6rem); color: var(--caven-cream); opacity: 0.78; z-index: 2; text-decoration: none; transition: opacity .2s ease, transform .35s var(--caven-easing); } .caven-hero__scroll:hover { opacity: 1; transform: translateX(-50%) translateY(2px); } .caven-hero__scroll-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.78rem); letter-spacing: 0.32em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .caven-hero__scroll-line { display: block; width: 1px; height: clamp(1.25rem, 0.75rem + 1vw, 2rem); background: linear-gradient(180deg, rgba(253, 248, 240, 0) 0%, rgba(253, 248, 240, 0.85) 100%); } .caven-hero__scroll-chevron { width: clamp(14px, 12px + 0.4vw, 20px); height: auto; color: var(--caven-magenta); filter: drop-shadow(0 0 8px rgba(255, 45, 135, 0.65)); } @media (prefers-reduced-motion: no-preference) { .caven-hero__scroll-chevron { animation: caven-scroll-bob 2.2s ease-in-out infinite; } } @keyframes caven-scroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ========================================================================== Marquee ========================================================================== */ .caven-marquee { position: relative; display: flex; overflow: hidden; width: 100%; white-space: nowrap; border-top: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); padding-block: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); background: var(--caven-ink); } .caven-marquee__track { display: flex; flex: 0 0 auto; min-width: 100%; gap: clamp(1.5rem, 1rem + 2vw, 3rem); padding-right: clamp(1.5rem, 1rem + 2vw, 3rem); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(2rem, 1.2rem + 4vw, 6rem); letter-spacing: -0.02em; line-height: 1; color: var(--caven-cream); text-transform: uppercase; } @media (prefers-reduced-motion: no-preference) { .caven-marquee__track { animation: caven-marquee 35s linear infinite; } .caven-marquee.is-reverse .caven-marquee__track { animation-direction: reverse; animation-duration: 55s; } .caven-marquee:hover .caven-marquee__track { animation-play-state: paused; } } @keyframes caven-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .caven-marquee__item { display: inline-flex; align-items: center; gap: clamp(1rem, 0.7rem + 1vw, 1.75rem); } .caven-marquee__item .triangle { display: inline-block; width: 0.5em; height: 0.42em; color: var(--caven-magenta); flex-shrink: 0; } .caven-marquee__item .triangle svg { width: 100%; height: 100%; display: block; } .caven-marquee__item--accent { color: var(--caven-magenta); } /* ========================================================================== Venue cards ========================================================================== */ .caven-venue-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); } @media (min-width: 640px) { .caven-venue-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .caven-venue-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .caven-venue-grid { grid-template-columns: repeat(6, 1fr); } .caven-venue-grid > * { grid-column: span 2; } .caven-venue-grid > :nth-child(1) { grid-column: span 4; } /* Station 4: 2/3 (headliner) */ .caven-venue-grid > :nth-child(2) { grid-column: span 2; } .caven-venue-grid > :nth-child(3) { grid-column: span 2; } .caven-venue-grid > :nth-child(4) { grid-column: span 2; } .caven-venue-grid > :nth-child(5) { grid-column: span 2; } .caven-venue-grid > :nth-child(6) { grid-column: span 6; } /* Cheat Code: full width */ .caven-venue-grid > :nth-child(6) .caven-venue__name { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); } } .caven-venue { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(280px, 22vw, 400px); padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); color: var(--caven-cream); overflow: hidden; isolation: isolate; transition: transform .45s var(--caven-easing), box-shadow .45s var(--caven-easing); text-decoration: none; } .caven-venue::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,107,177,0.55), transparent 55%); opacity: 0; transition: opacity .45s var(--caven-easing); z-index: 0; } .caven-venue::after { content: "▼"; position: absolute; right: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); bottom: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); color: var(--caven-magenta); font-size: 1.25rem; opacity: 0; transform: translateX(-12px); transition: opacity .45s var(--caven-easing), transform .45s var(--caven-easing); z-index: 2; } .caven-venue > * { position: relative; z-index: 1; } .caven-venue:hover, .caven-venue:focus-visible { transform: translateY(-10px); box-shadow: 0 0 56px rgba(255,45,135,0.55), 0 0 112px rgba(255,107,177,0.32), 0 24px 48px -8px rgba(10,15,44,0.6); outline: none; } .caven-venue:hover::before, .caven-venue:focus-visible::before { opacity: 1; } .caven-venue:hover::after, .caven-venue:focus-visible::after { opacity: 1; transform: translateX(0); } .caven-venue__eyebrow { font-family: "Bricolage Grotesque", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(253,248,240,0.85); display: inline-flex; align-items: center; gap: 0.6em; } .caven-venue__eyebrow .triangle { width: 0.85em; height: 0.7em; color: var(--caven-magenta); } .caven-venue__eyebrow .triangle svg { width:100%; height:100%; display:block; } .caven-venue__name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3rem); margin: 0; color: #fff; overflow-wrap: break-word; hyphens: auto; } .caven-venue__name span { display: block; font-size: 0.55em; margin-top: 0.4em; letter-spacing: 0; } /* Venue cards that show a brand logo image instead of text — center the logo, cap its height fluidly, and add a soft shadow so it floats above the card's gradient. The h3 is preserved for accessibility (alt text). */ .caven-venue__name--logo { display: flex; align-items: center; justify-content: flex-start; min-height: clamp(5rem, 3rem + 7vw, 9rem); } .caven-venue__name--logo img { max-height: clamp(4.5rem, 3rem + 6vw, 8rem); max-width: 70%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.35)); transition: transform .35s var(--caven-easing); } .caven-venue:hover .caven-venue__name--logo img, .caven-venue:focus-visible .caven-venue__name--logo img { transform: scale(1.04); } /* Cheat Code card (last child) is full-width — give its logo a bit more room */ .caven-venue-grid > :nth-child(6) .caven-venue__name--logo img { max-height: clamp(6rem, 4rem + 8vw, 11rem); } .caven-venue__meta { font-family: "Inter", sans-serif; font-size: 0.875rem; color: rgba(253,248,240,0.78); display: flex; gap: 0.75rem; flex-wrap: wrap; } .caven-venue__meta span + span::before { content: "·"; margin-right: 0.75rem; color: var(--caven-magenta); } /* ========================================================================== Team grid ========================================================================== */ .caven-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); margin-top: clamp(2rem, 1rem + 3vw, 4rem); } .caven-team-card { position: relative; aspect-ratio: 3/4; display: flex; align-items: flex-end; overflow: hidden; transition: transform .35s var(--caven-easing), box-shadow .35s var(--caven-easing); } .caven-team-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,15,44,0.6) 100%); pointer-events: none; } .caven-team-card:hover { transform: translateY(-8px); box-shadow: 0 0 40px rgba(255,45,135,.45), 0 16px 32px -8px rgba(10,15,44,0.6); } .caven-team-card__body { position: relative; z-index: 1; width: 100%; padding: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem); color: #fff; } .caven-team-card__name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.05; } .caven-team-card__role { margin-top: 0.4em; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; opacity: 0.78; } /* ========================================================================== Crossroads timeline ========================================================================== */ .caven-timeline { display: grid; grid-template-columns: minmax(120px, 22%) 1fr; gap: clamp(2rem, 1rem + 3vw, 5rem); padding-block: clamp(2rem, 1rem + 3vw, 4rem); border-top: 1px solid rgba(255,255,255,0.12); } .caven-timeline__year { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.9; color: var(--caven-magenta); } .caven-timeline__body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; color: var(--caven-cream); max-width: 60ch; } .caven-timeline__body h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; margin-bottom: 0.6rem; color: #fff; } @media (max-width: 720px) { .caven-timeline { grid-template-columns: 1fr; } } /* ========================================================================== Press strip / CTA / Footer polish ========================================================================== */ .caven-press-strip { background: var(--caven-ink); } .caven-cta-tonight { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--caven-magenta), var(--caven-electric-pink)); color: #fff; } .caven-cta-tonight::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .caven-footer .caven-footer-mark { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; } .caven-footer .caven-footer-links { list-style: none; padding: 0; margin: 0; } .caven-footer .caven-footer-links li { padding: .25rem 0; } .caven-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; } .caven-footer a:hover { border-bottom-color: rgba(255,255,255,0.7); } /* Footer link triangle: same magenta motif, slides in from the left on hover. Rotated 90° clockwise so it points right (▶) — reads as "go to". */ .caven-footer .caven-footer-links a { position: relative; display: inline-flex; align-items: center; transition: padding-left .25s var(--caven-easing), border-color .2s ease; } .caven-footer .caven-footer-links a::before { content: ""; display: inline-block; width: 0.55em; height: 0.45em; margin-right: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; background-position: center; transform: rotate(-90deg) translateX(-6px); /* points right; offset hides it */ opacity: 0; transition: opacity .25s var(--caven-easing), transform .25s var(--caven-easing), margin-right .25s var(--caven-easing); filter: drop-shadow(0 0 6px rgba(255,45,135,0.7)); } .caven-footer .caven-footer-links a:hover::before, .caven-footer .caven-footer-links a:focus-visible::before { opacity: 1; transform: rotate(-90deg) translateX(0); margin-right: 0.45em; } /* Legal & employee strip — small uppercase row above the copyright. */ .caven-footer .caven-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-top: clamp(1rem, 0.5rem + 1vw, 1.75rem); border-top: 1px solid rgba(255, 255, 255, 0.18); font-family: "Bricolage Grotesque", sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } .caven-footer .caven-footer-legal a { color: rgba(255, 255, 255, 0.78); text-decoration: none; border-bottom: 1px solid transparent; padding-block: 0.25rem; transition: color .2s ease, border-color .2s ease; } .caven-footer .caven-footer-legal a:hover, .caven-footer .caven-footer-legal a:focus-visible { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.7); } .caven-footer .caven-footer-legal__sep { color: rgba(255, 255, 255, 0.35); user-select: none; } .caven-footer .caven-footer-legal__ext { display: inline-block; margin-left: 0.15em; font-size: 0.85em; opacity: 0.7; } /* ========================================================================== Reveal-on-scroll (JS adds .is-visible) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .caven-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--caven-easing), transform .9s var(--caven-easing); } .caven-reveal.is-visible { opacity: 1; transform: none; } } /* ========================================================================== Editor canvas tweaks ========================================================================== */ .is-root-container, .editor-styles-wrapper { background: var(--caven-ink); color: var(--caven-cream); } /* ========================================================================== Hero — club-scene layers (spotlights, bokeh, crowd) + frosted-glass panel that blurs the chaos behind the text so the wordmark stays readable. ========================================================================== */ /* Spotlight cones from above — three swaying beams that read as stage lights. */ .caven-hero__layer--spotlights { inset: 0; z-index: 0; mix-blend-mode: screen; filter: blur(28px); opacity: 0.9; } .caven-hero__layer--spotlights svg { display: block; width: 100%; height: 100%; } .caven-hero__beam { transform-box: fill-box; transform-origin: 50% 0%; } @media (prefers-reduced-motion: no-preference) { .caven-hero__beam--1 { animation: caven-beam-sway-1 9s ease-in-out infinite; } .caven-hero__beam--2 { animation: caven-beam-sway-2 13s ease-in-out infinite -3s; } .caven-hero__beam--3 { animation: caven-beam-sway-3 11s ease-in-out infinite -6s; } } @keyframes caven-beam-sway-1 { 0%, 100% { transform: rotate(-9deg); opacity: 0.7; } 50% { transform: rotate(9deg); opacity: 1; } } @keyframes caven-beam-sway-2 { 0%, 100% { transform: rotate(7deg); opacity: 0.55; } 50% { transform: rotate(-7deg); opacity: 0.95; } } @keyframes caven-beam-sway-3 { 0%, 100% { transform: rotate(-6deg); opacity: 0.65; } 50% { transform: rotate(8deg); opacity: 1; } } /* Bokeh — out-of-focus light dots drifting up through the hero. */ .caven-hero__layer--bokeh { inset: 0; z-index: 0; mix-blend-mode: screen; } .caven-hero__bokeh { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: radial-gradient(circle, rgba(255, 220, 240, 0.95), rgba(255, 220, 240, 0)); filter: blur(3px); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .caven-hero__bokeh { animation: caven-bokeh-float 14s ease-in-out infinite; } } @keyframes caven-bokeh-float { 0% { transform: translateY(20px) scale(0.7); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 0.85; } 100% { transform: translateY(-70px) scale(1.25); opacity: 0; } } .caven-hero__bokeh:nth-child(1) { top: 22%; left: 5%; width: 14px; height: 14px; animation-duration: 12s; animation-delay: -0.5s; } .caven-hero__bokeh:nth-child(2) { top: 48%; left: 11%; width: 8px; height: 8px; animation-duration: 16s; animation-delay: -3s; background: radial-gradient(circle, rgba(170, 200, 255, 0.85), transparent); } .caven-hero__bokeh:nth-child(3) { top: 70%; left: 18%; width: 11px; height: 11px; animation-duration: 13s; animation-delay: -7s; } .caven-hero__bokeh:nth-child(4) { top: 32%; left: 27%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: -2s; } .caven-hero__bokeh:nth-child(5) { top: 58%; left: 34%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: -5s; background: radial-gradient(circle, rgba(255, 200, 230, 0.9), transparent); } .caven-hero__bokeh:nth-child(6) { top: 78%; left: 44%; width: 9px; height: 9px; animation-duration: 15s; animation-delay: -9s; } .caven-hero__bokeh:nth-child(7) { top: 38%; left: 56%; width: 14px; height: 14px; animation-duration: 17s; animation-delay: -1s; } .caven-hero__bokeh:nth-child(8) { top: 62%; left: 63%; width: 7px; height: 7px; animation-duration: 12s; animation-delay: -6s; background: radial-gradient(circle, rgba(170, 200, 255, 0.85), transparent); } .caven-hero__bokeh:nth-child(9) { top: 47%; left: 72%; width: 10px; height: 10px; animation-duration: 14s; animation-delay: -10s; } .caven-hero__bokeh:nth-child(10) { top: 28%; left: 80%; width: 13px; height: 13px; animation-duration: 16s; animation-delay: -4s; background: radial-gradient(circle, rgba(255, 200, 230, 0.85), transparent); } .caven-hero__bokeh:nth-child(11) { top: 72%; left: 87%; width: 8px; height: 8px; animation-duration: 13s; animation-delay: -8s; } .caven-hero__bokeh:nth-child(12) { top: 52%; left: 93%; width: 9px; height: 9px; animation-duration: 11s; animation-delay: -11s; } .caven-hero__bokeh:nth-child(13) { top: 82%; left: 25%; width: 7px; height: 7px; animation-duration: 19s; animation-delay: -13s; background: radial-gradient(circle, rgba(170, 200, 255, 0.85), transparent); } .caven-hero__bokeh:nth-child(14) { top: 84%; left: 75%; width: 11px; height: 11px; animation-duration: 14s; animation-delay: -2s; } /* Crowd silhouettes anchoring the bottom — blurred heads bobbing in the pit. */ .caven-hero__layer--crowd { inset: auto 0 -2% 0; height: clamp(8rem, 22%, 16rem); z-index: 1; } .caven-hero__layer--crowd svg { display: block; width: 100%; height: 100%; fill: rgba(6, 8, 22, 0.88); filter: blur(2.5px) drop-shadow(0 -10px 26px rgba(255, 45, 135, 0.22)); } @media (prefers-reduced-motion: no-preference) { .caven-hero__layer--crowd { animation: caven-crowd-bob 5.5s ease-in-out infinite; } } @keyframes caven-crowd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Frosted-glass panel — backdrop-blur centered behind the content. The mask fades the effect to transparent at the edges so you still see the chaos out past the text, but the wordmark gets a clean frosted canvas. */ .caven-hero__layer--glass { inset: 0; z-index: 2; backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); background: radial-gradient( ellipse 60% 50% at 50% 48%, rgba(10, 15, 44, 0.42) 0%, rgba(10, 15, 44, 0.18) 45%, rgba(10, 15, 44, 0) 78% ); -webkit-mask-image: radial-gradient( ellipse 72% 62% at 50% 48%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 28%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 88% ); mask-image: radial-gradient( ellipse 72% 62% at 50% 48%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 28%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 88% ); } /* Raise text and scroll indicator above the glass layer (z-index 2). */ .caven-hero__content { z-index: 3; } .caven-hero__scroll { z-index: 4; }