/* ===================================================
GLOBAL REUSABLE SPOTLIGHT BORDER & GLASS SYSTEM
=================================================== */
/* Base Card Container */
.spotlight-glow-card {
position: relative !important;
border-radius: 24px !important;
border: 1px solid #e5e7eb !important; /* Outer subtle border */
background-color: transparent !important;
padding: 1.5px !important; /* Gap between outer border and inner card */
overflow: hidden !important;
isolation: isolate !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Moving Glowing Track (Border between Outer & Inner) */
.spotlight-glow-card::before {
content: "";
position: absolute;
inset: -2px;
background: radial-gradient(
280px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
var(--card-accent, #3b82f6) 0%,
var(--card-accent-2, #6366f1) 40%,
var(--card-accent-3, #9333ea) 70%,
transparent 85%
);
opacity: var(--glow-opacity, 0);
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
pointer-events: none;
}
/* Glass Ambient Light Inside the Card */
.spotlight-glow-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
320px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
var(--card-accent, #3b82f6) 0%,
var(--card-accent-2, #6366f1) 45%,
transparent 75%
);
filter: blur(28px);
opacity: calc(var(--glow-opacity, 0) * 0.25); /* Subtle Ambiance */
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 0;
pointer-events: none;
}
/* Inner Frosted Surface */
/* Elementor container ke pehle direct child ya '.spotlight-inner' class */
.spotlight-glow-card > .e-con,
.spotlight-glow-card > .elementor-widget-wrap,
.spotlight-glow-card > .spotlight-inner {
position: relative !important;
z-index: 2 !important;
background: rgba(255, 255, 255, 0.88) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border-radius: 22.5px !important;
height: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ===================================================
COLOR THEMES (Utility Classes for Elementor)
=================================================== */
/* Theme 1: Blue / Purple */
.glow-theme-purple {
--card-accent: #3b82f6;
--card-accent-2: #6366f1;
--card-accent-3: #9333ea;
}
/* Theme 2: Green / Emerald */
.glow-theme-green {
--card-accent: #10b981;
--card-accent-2: #22c55e;
--card-accent-3: #0d9488;
}
/* Theme 3: Rose / Pink */
.glow-theme-pink {
--card-accent: #ef4444;
--card-accent-2: #f43f5e;
--card-accent-3: #db2777;
}
/* Theme 4: Amber / Orange */
.glow-theme-orange {
--card-accent: #f59e0b;
--card-accent-2: #f97316;
--card-accent-3: #dc2626;
}
/* Theme 5: Violet / Indigo */
.glow-theme-indigo {
--card-accent: #8b5cf6;
--card-accent-2: #6366f1;
--card-accent-3: #4f46e5;
}
/* Theme 6: Cyan / Sky */
.glow-theme-cyan {
--card-accent: #06b6d4;
--card-accent-2: #3b82f6;
--card-accent-3: #4f46e5;
}
