/* ═══════════════════════════════════════════════ Q Sine Case Studies Widget — Frontend CSS Version: 1.2.0 ═══════════════════════════════════════════════ */ /* ── HOW ELEMENTOR GLOBAL COLORS WORK ────────── Elementor stores global colors as CSS variables on :root with the pattern: --e-global-color-{id} To find your exact variable names: 1. Open your site in browser 2. Right-click → Inspect → go to or 3. Look for --e-global-color-XXXXXXXX variables 4. Replace the values below with your actual IDs ─────────────────────────────────────────────── */ :root { /* These point to YOUR Elementor global colors. Replace the fallback hex if the variable name differs — check via browser DevTools */ --qsine-purple: var(--e-global-color-primary, #6B2D8B); --qsine-gold: var(--e-global-color-accent, #F5A800); --qsine-green: var(--e-global-color-secondary, #00A651); } /* ── ACCENT PRESET CLASSES ── */ .qsine-accent-purple { --card-accent: var(--qsine-purple); } .qsine-accent-gold { --card-accent: var(--qsine-gold); } .qsine-accent-green { --card-accent: var(--qsine-green); } /* Stat number inherits accent */ .qsine-cs-stat-number { color: var(--card-accent, #6B2D8B); } .qsine-cs-divider { background: var(--card-accent, #6B2D8B); } .qsine-cs-cta { background: var(--card-accent, #F5A800); } .qsine-cs-card::before { background: var(--card-accent, #6B2D8B); } .qsine-cs-card::after { background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, #6B2D8B) 20%, transparent) 0%, transparent 70%); } .qsine-cs-stat { border-color: color-mix(in srgb, var(--card-accent, #6B2D8B) 25%, transparent); } /* ── WRAP ── */ .qsine-cs-wrap { width: 100%; box-sizing: border-box; } /* ── HEADER ── */ .qsine-cs-header { margin-bottom: 48px; } .qsine-cs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #F5A800; margin-bottom: 14px; } .qsine-cs-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #F5A800; animation: qsine-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes qsine-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } .qsine-cs-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; color: #1A1A2E; margin: 0 0 16px; } .qsine-cs-title-gradient { background: linear-gradient(135deg, #6B2D8B 0%, #F5A800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; padding-left: 6px; } .qsine-cs-subtitle { font-size: 16px; line-height: 1.75; color: #4A5568; max-width: 640px; margin: 0; } /* ── GRID ── */ .qsine-cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } /* ── CARD BASE ── */ .qsine-cs-card { position: relative; background: #1A1A2E; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 0; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; } /* Accent bar on top */ .qsine-cs-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-accent, #6B2D8B); border-radius: 20px 20px 0 0; } /* Subtle corner glow */ .qsine-cs-card::after { content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, #6B2D8B) 20%, transparent) 0%, transparent 70%); pointer-events: none; } .qsine-cs-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--card-accent, #6B2D8B) 40%, transparent); } /* ── STYLE VARIANTS ── */ /* Glassmorphism */ .qsine-style-glass .qsine-cs-card { background: rgba(26, 26, 46, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Minimal Light */ .qsine-style-minimal .qsine-cs-card { background: #FFFFFF; border: 1px solid #E8DFF0; box-shadow: 0 4px 24px rgba(107, 45, 139, 0.08); } .qsine-style-minimal .qsine-cs-client { color: #1A1A2E !important; } .qsine-style-minimal .qsine-cs-row-value { color: #2C2C3E !important; } .qsine-style-minimal .qsine-cs-row-label { color: #6B2D8B !important; } /* Gradient Dark */ .qsine-style-gradient .qsine-cs-card { background: linear-gradient(145deg, #1A1A2E 0%, #2C1A3E 100%); } /* ── TOP ROW ── */ .qsine-cs-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; } /* ── TAG ── */ .qsine-cs-tag { display: inline-block; background: rgba(245, 168, 0, 0.15); color: #F5A800; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 50px; white-space: nowrap; } /* ── STAT BOX ── */ .qsine-cs-stat { display: flex; flex-direction: column; align-items: flex-end; background: rgba(107, 45, 139, 0.1); border: 1px solid rgba(107, 45, 139, 0.2); border-radius: 12px; padding: 10px 16px; min-width: 90px; text-align: right; flex-shrink: 0; } .qsine-cs-stat-number { font-size: 42px; font-weight: 800; line-height: 1; color: #F5A800; font-variant-numeric: tabular-nums; letter-spacing: -1px; } .qsine-cs-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #A0A0B0; margin-top: 4px; } /* ── CLIENT NAME ── */ .qsine-cs-client { font-size: 20px; font-weight: 700; color: #FFFFFF; line-height: 1.3; margin: 0 0 20px; } /* ── DIVIDER ── */ .qsine-cs-divider { height: 2px; width: 48px; background: #6B2D8B; border-radius: 2px; margin-bottom: 20px; opacity: 0.6; } /* ── DETAILS ── */ .qsine-cs-details { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; flex: 1; } .qsine-cs-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .qsine-cs-row:last-child { border-bottom: none; } .qsine-cs-row-icon { font-size: 14px; line-height: 1.5; flex-shrink: 0; margin-top: 1px; } .qsine-cs-row-content { display: flex; flex-direction: column; gap: 2px; } .qsine-cs-row-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #A0A0B0; } .qsine-cs-row-value { font-size: 14px; font-weight: 500; color: #E2E8F0; line-height: 1.5; } /* Highlight the After Solution row */ .qsine-cs-row:last-child .qsine-cs-row-value { color: #00CF66; font-weight: 700; } /* ── CTA BUTTON ── */ .qsine-cs-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #F5A800; color: #0A0A0A; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; padding: 14px 28px; border-radius: 50px; transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; margin-top: auto; width: 100%; text-align: center; } .qsine-cs-cta svg { transition: transform 0.25s ease; flex-shrink: 0; } .qsine-cs-cta:hover { background: #6B2D8B !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107, 45, 139, 0.4); } .qsine-cs-cta:hover svg { transform: translateX(4px); } /* ═══════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════ */ /* Tablet */ @media (max-width: 1024px) { .qsine-cs-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .qsine-cs-stat-number { font-size: 32px; } .qsine-cs-card { padding: 24px; } } /* Large Mobile */ @media (max-width: 767px) { .qsine-cs-grid { grid-template-columns: 1fr; gap: 16px; } .qsine-cs-title { font-size: 28px; } .qsine-cs-stat-number { font-size: 36px; } .qsine-cs-header { margin-bottom: 32px; } } /* Small Mobile */ @media (max-width: 480px) { .qsine-cs-card { padding: 20px; } .qsine-cs-client { font-size: 17px; } .qsine-cs-top-row { flex-direction: column; } .qsine-cs-stat { align-items: flex-start; text-align: left; width: 100%; } }