/* Theme Name: Hello Elementor Child Theme URI: https://example.com/hello-elementor-child Description: Child theme for Hello Elementor Author: Your Name Author URI: https://example.com Template: hello-elementor Version: 1.0.0 */ /* — Your custom CSS goes below this line — */ /* ------------------------------------------------------------------ Final Holo + Texture (Fixed): subtle shimmer + VMAX‐style fleck + cursor holo ------------------------------------------------------------------ */ /* (A) The container “card”—it tilts, and holds CSS vars for the hover layer */ .album-3d-container { position: relative; overflow: hidden; /* clip pseudo‐elements to rounded shape */ background: transparent; /* no unwanted box color behind the art */ border-radius: 20px; /* ← MATCH this exactly to the Elementor radius */ transition: transform 0.3s ease-out;/* smooth tilt / ease-back */ height: fit-content; /* Custom props for controlling the ::after hover layer */ --holo-opacity: 0; /* 0 = hidden, 1 = fully visible */ --mouse-x: 50%; /* fallback center for white highlight */ --mouse-y: 50%; /* fallback center for white highlight */ --holo-x: 50%; /* fallback center for holo wash */ --holo-y: 50%; /* fallback center for holo wash */ } /* (B) The simply fills the container—no border-radius on it */ .album-3d-container img { display: block; width: 100%; height: 300px; /* your fixed desktop height */ object-fit: cover; /* preserve aspect ratio, crop if needed */ border-radius: 0; /* container handles rounding */ background: transparent; /* no background behind the JPG/PNG */ z-index: 0; /* beneath both pseudo‐elements */ } /* (C) BASE SHIMMER + VMAX‐STYLE FLECK: one ::before with two “layers” 1) repeating diagonal texture (white lines α = 0.05) 2) very slow, low-alpha rainbow shimmer (α = 0.03) They share @keyframes that only move the rainbow; the texture stays fixed. */ @keyframes subtle-shimmer-texture { 0% { background-position: 0 0, 0% 0%; } 100% { background-position: 0 0, 100% 100%; } } .album-3d-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* let clicks/hovers pass through */ border-radius: inherit; /* match the container’s rounding */ z-index: 1; /* beneath the hover layer (::after) */ /* Layer 1 (on top): a repeating diagonal‐line texture—white lines α = 0.05, width 1px, spacing 8px Layer 2 (behind): a low-alpha rainbow shimmer (α = 0.03) that drifts via keyframes. */ background: /* Diagonal fleck texture: tiny white lines spaced every 8px */ repeating-linear-gradient( 135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 4px ) no-repeat, /* Slow drifting low-alpha rainbow */ linear-gradient( 60deg, rgba(255, 0, 93, 0.03) 0%, rgba(255, 210, 0, 0.03) 20%, rgba( 0, 255, 159, 0.03) 40%, rgba( 0, 157, 255, 0.03) 60%, rgba(255, 0, 93, 0.03) 80%, rgba(255, 210, 0, 0.03) 100% ); /* background-position: • first layer (texture) is fixed at 0 0, • second layer (rainbow) animates via keyframes: */ background-position: 0 0, var(--shimmer-x, 0%) var(--shimmer-y, 0%); background-size: 100% 100%, /* texture covers the entire area (lines repeat instead) */ 200% 200%; /* shimmer is bigger so the drift is slow/soft */ background-blend-mode: screen; /* brighten underlying colors */ animation: subtle-shimmer-texture 14s linear infinite; opacity: 1; /* always on, but extremely faint */ } /* (D) HOVER LAYER: combines holo-foil + white spotlight in ::after, plus a pulsing We removed the “!important” override so this layer’s opacity truly follows --holo-opacity. */ @keyframes hover-pulse { 0% { opacity: 0.10; } 50% { opacity: 0.15; } 100% { opacity: 0.10; } } /* ------------------------------------------------------------------ Updated HOVER LAYER: separate white “spotlight” opacity from holo opacity ------------------------------------------------------------------ */ .album-3d-container::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; z-index: 2; /* Two stacked background layers: 1) the white, cursor‐driven spotlight (α = var(--spot-opacity)) 2) the holo‐foil rainbow (α = var(--holo-opacity)) We use `background-blend-mode: screen` so both brighten the art beneath. */ background: /* Layer 1: White spotlight */ radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 30%), rgba(255, 255, 255, var(--spot-opacity, 0)) 0%, rgba(255, 255, 255, 0) 45% ), /* Layer 2: Full‐alpha holo rainbow */ linear-gradient( 60deg, rgba(255, 0, 93, var(--holo-opacity, 0.3)) 0%, rgba(255, 210, 0, var(--holo-opacity, 0.3)) 20%, rgba( 0, 255, 159, var(--holo-opacity, 0.3)) 40%, rgba( 0, 157, 255, var(--holo-opacity, 0.3)) 60%, rgba(255, 0, 93, var(--holo-opacity, 0.3)) 80%, rgba(255, 210, 0, var(--holo-opacity, 0.3))100% ); background-size: 100% 100%, /* spotlight covers the entire card */ 200% 200%; /* holo is larger so it can shift under the cursor */ background-position: var(--mouse-x, 50%) var(--mouse-y, 50%), /* spotlight center under cursor */ var(--holo-x, 50%) var(--holo-y, 50%);/* holo shift under cursor */ background-blend-mode: screen; /* No `opacity:` here—each layer’s alpha comes from its own var() */ transition: background-position 0.1s ease-in-out, /* We still transition holo α when --holo-opacity changes */ /* The spotlight α will change instantly but that’s fine. */ background-blend-mode 0s; /* Pulsing animation stays exactly the same as before */ animation: hover-pulse 2s ease-in-out infinite; } /* (E) Mobile/Touch fallback: disable tilt + pseudo-elements */ @media (hover: none), (pointer: coarse) { .album-3d-container { transform: none !important; } .album-3d-container::before, .album-3d-container::after { opacity: 0 !important; animation: none !important; } }