/* ===================================================================== Pro AF — Electric Daylight refresh theme Scoped under [data-theme="refresh"] so all rules are inert until the attribute is set on . Toggling back to data-theme="classic" (or removing the attribute) restores the original cyberpunk cascade. Vignette "case study" sections (style-realty, style-beauty, style-trade, style-menu, style-locksmith, style-custom, style-fitness, style-transition) are intentionally preserved as-is in both themes — they showcase varied design styles and aren't part of the page chrome. ===================================================================== */ :root { --refresh-bg: #FEFEFC; --refresh-bg-elev: #FFFFFF; --refresh-text: #0F172A; --refresh-text-muted: #64748B; --refresh-text-soft: #94A3B8; --refresh-prim: #3B82F6; --refresh-prim-rgb: 59, 130, 246; --refresh-sec: #A3E635; --refresh-sec-rgb: 163, 230, 53; --refresh-tert: #EC4899; --refresh-tert-rgb: 236, 72, 153; --refresh-border: rgba(15, 23, 42, 0.08); --refresh-border-strong: rgba(15, 23, 42, 0.16); --refresh-grad-hero: linear-gradient(135deg, #3B82F6 0%, #EC4899 100%); --refresh-grad-cta: linear-gradient(90deg, #3B82F6, #A3E635); --refresh-grad-warm: linear-gradient(135deg, #EC4899, #F97316); } /* Smooth color transition when toggling */ html { transition: background-color .25s ease, color .25s ease; } body { transition: background-color .25s ease, color .25s ease; } /* ===================================================================== Base / body ===================================================================== */ html[data-theme="refresh"] { background-color: var(--refresh-bg); color: var(--refresh-text); } html[data-theme="refresh"] body { background-color: var(--refresh-bg); color: var(--refresh-text); } /* ===================================================================== Custom Cursor (index = diamond, studio = circle) ===================================================================== */ html[data-theme="refresh"] .cursor-diamond::before { background: var(--refresh-grad-hero); box-shadow: 0 0 25px rgba(var(--refresh-prim-rgb), 0.45), 0 0 50px rgba(var(--refresh-tert-rgb), 0.25); } html[data-theme="refresh"] .cursor-diamond::after { border-color: rgba(var(--refresh-prim-rgb), 0.55); } html[data-theme="refresh"] #custom-cursor { background: radial-gradient(circle, rgba(var(--refresh-prim-rgb), 0.7), rgba(var(--refresh-tert-rgb), 0.5)); border-color: rgba(var(--refresh-prim-rgb), 0.85); box-shadow: 0 0 20px rgba(var(--refresh-prim-rgb), 0.6), 0 0 40px rgba(var(--refresh-prim-rgb), 0.3), inset 0 0 10px rgba(var(--refresh-prim-rgb), 0.25); } html[data-theme="refresh"] #custom-cursor::before { background: var(--refresh-prim); box-shadow: 0 0 10px var(--refresh-prim); } html[data-theme="refresh"] #custom-cursor::after { border-color: rgba(var(--refresh-prim-rgb), 0.35); } /* ===================================================================== Liquid blobs — soften from neon to airy pastel ===================================================================== */ html[data-theme="refresh"] .liquid-blob { opacity: 0.22; filter: blur(6vw); } html[data-theme="refresh"] .blob-1 { background: linear-gradient(45deg, var(--refresh-prim), var(--refresh-tert)); } html[data-theme="refresh"] .blob-2 { background: linear-gradient(135deg, var(--refresh-sec), var(--refresh-prim)); } html[data-theme="refresh"] .blob-3 { background: linear-gradient(90deg, var(--refresh-tert), var(--refresh-prim)); } /* ===================================================================== Parallax grid lines ===================================================================== */ html[data-theme="refresh"] .grid-lines { background-image: linear-gradient(rgba(var(--refresh-prim-rgb), 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--refresh-tert-rgb), 0.06) 1px, transparent 1px); } /* ===================================================================== Holographic cards — invert from dark/glassy to white/elevated ===================================================================== */ html[data-theme="refresh"] .holo-card { background: var(--refresh-bg-elev); border: 1px solid var(--refresh-border); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } html[data-theme="refresh"] .holo-card::before { background: linear-gradient( 45deg, transparent 30%, rgba(var(--refresh-prim-rgb), 0.10) 50%, rgba(var(--refresh-tert-rgb), 0.10) 60%, transparent 70% ); } html[data-theme="refresh"] .holo-card:hover { border-color: rgba(var(--refresh-prim-rgb), 0.4); box-shadow: 0 16px 40px rgba(var(--refresh-prim-rgb), 0.18); transform: translateY(-5px); } html[data-theme="refresh"] .holo-card .text-white { color: var(--refresh-text) !important; } /* ===================================================================== Glitch text — re-tint shadow channels ===================================================================== */ html[data-theme="refresh"] .glitch-text::before { text-shadow: -2px 0 var(--refresh-tert); } html[data-theme="refresh"] .glitch-text::after { text-shadow: -2px 0 var(--refresh-prim); } /* ===================================================================== Audio equalizer + visualizer ===================================================================== */ html[data-theme="refresh"] .audio-bar { background: var(--refresh-prim); } html[data-theme="refresh"] .viz-ripple { border-color: rgba(var(--refresh-prim-rgb), 0.55); } /* ===================================================================== Stellar play button (index hero) ===================================================================== */ html[data-theme="refresh"] .stellar-play-btn { background: radial-gradient(circle at 30% 30%, #ffffff, #f1f5f9); border: 1px solid rgba(var(--refresh-prim-rgb), 0.4); box-shadow: 0 8px 24px rgba(var(--refresh-prim-rgb), 0.18), inset 0 0 20px rgba(var(--refresh-prim-rgb), 0.06); } html[data-theme="refresh"] .stellar-play-btn:hover { border-color: var(--refresh-prim); box-shadow: 0 12px 36px rgba(var(--refresh-prim-rgb), 0.35), inset 0 0 30px rgba(var(--refresh-prim-rgb), 0.12); } html[data-theme="refresh"] .stellar-play-btn svg { fill: var(--refresh-prim); filter: drop-shadow(0 0 5px rgba(var(--refresh-prim-rgb), 0.5)); } /* ===================================================================== Buffer / progress line ===================================================================== */ html[data-theme="refresh"] .buffer-line { background: linear-gradient(to bottom, transparent, rgba(15,23,42,0.12) 20%, rgba(15,23,42,0.12) 80%, transparent); } html[data-theme="refresh"] .buffer-line-progress { background: var(--refresh-prim); box-shadow: 0 0 10px rgba(var(--refresh-prim-rgb), 0.5), 0 0 20px rgba(var(--refresh-prim-rgb), 0.3); } html[data-theme="refresh"] .buffer-item::before { background: var(--refresh-bg); border-color: rgba(15, 23, 42, 0.25); } html[data-theme="refresh"] .buffer-item:hover::before, html[data-theme="refresh"] .buffer-item.active::before { background: var(--refresh-prim); border-color: var(--refresh-prim); box-shadow: 0 0 15px rgba(var(--refresh-prim-rgb), 0.55); } /* ===================================================================== Studio page hero glow ===================================================================== */ html[data-theme="refresh"] .studio-glow { animation: studio-pulse-refresh 4s ease-in-out infinite; text-shadow: 0 0 10px rgba(var(--refresh-prim-rgb), 0.45), 0 0 20px rgba(var(--refresh-prim-rgb), 0.25), 0 0 30px rgba(var(--refresh-tert-rgb), 0.15); } @keyframes studio-pulse-refresh { 0%, 100% { text-shadow: 0 0 10px rgba(var(--refresh-prim-rgb), 0.45), 0 0 20px rgba(var(--refresh-prim-rgb), 0.25), 0 0 30px rgba(var(--refresh-tert-rgb), 0.15); } 50% { text-shadow: 0 0 15px rgba(var(--refresh-prim-rgb), 0.65), 0 0 25px rgba(var(--refresh-tert-rgb), 0.35), 0 0 40px rgba(var(--refresh-tert-rgb), 0.2); } } /* Inline -webkit-text-stroke on THE STUDIO h1 needs override */ html[data-theme="refresh"] .studio-glow { -webkit-text-stroke: 2px rgba(var(--refresh-prim-rgb), 0.7) !important; } /* ===================================================================== Studio media player (the futuristic play button) ===================================================================== */ html[data-theme="refresh"] .play-button-outer { background: linear-gradient(135deg, rgba(var(--refresh-prim-rgb), 0.08), rgba(var(--refresh-tert-rgb), 0.08)); border-image: linear-gradient(135deg, var(--refresh-prim), var(--refresh-tert)) 1; } html[data-theme="refresh"] .play-button-inner { background: linear-gradient(135deg, rgba(var(--refresh-prim-rgb), 0.18), rgba(var(--refresh-tert-rgb), 0.18)); box-shadow: inset 0 0 20px rgba(var(--refresh-prim-rgb), 0.28), 0 0 30px rgba(var(--refresh-prim-rgb), 0.18); } html[data-theme="refresh"] .play-icon { color: var(--refresh-prim); filter: drop-shadow(0 0 8px rgba(var(--refresh-prim-rgb), 0.65)); } html[data-theme="refresh"] .play-button-glow { background: radial-gradient(circle, rgba(var(--refresh-prim-rgb), 0.35), transparent 70%); } /* ===================================================================== Studio video container + close ===================================================================== */ html[data-theme="refresh"] .video-container { background: var(--refresh-bg-elev); border-image: linear-gradient(135deg, var(--refresh-prim), var(--refresh-tert)) 1; box-shadow: 0 0 30px rgba(var(--refresh-prim-rgb), 0.22), 0 0 60px rgba(var(--refresh-tert-rgb), 0.15), inset 0 0 20px rgba(var(--refresh-prim-rgb), 0.06); } html[data-theme="refresh"] .studio-video { background: var(--refresh-bg-elev); } html[data-theme="refresh"] .close-video { background: var(--refresh-bg-elev); border: 2px solid rgba(var(--refresh-prim-rgb), 0.45); color: var(--refresh-prim); box-shadow: 0 0 20px rgba(var(--refresh-prim-rgb), 0.22); } html[data-theme="refresh"] .close-video:hover { background: rgba(var(--refresh-prim-rgb), 0.12); border-color: var(--refresh-prim); box-shadow: 0 0 30px rgba(var(--refresh-prim-rgb), 0.5); } /* ===================================================================== Studio carousel ===================================================================== */ html[data-theme="refresh"] .slide-inner { background: linear-gradient(135deg, #ffffff, #f8fafc); border: 2px solid rgba(var(--refresh-prim-rgb), 0.25); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12); } html[data-theme="refresh"] .slide-inner::before { background: linear-gradient( 45deg, transparent 30%, rgba(var(--refresh-prim-rgb), 0.12) 50%, transparent 70% ); } html[data-theme="refresh"] .slide.active .slide-inner { border-color: rgba(var(--refresh-prim-rgb), 0.9); box-shadow: 0 0 60px rgba(var(--refresh-prim-rgb), 0.35), 0 20px 80px rgba(15, 23, 42, 0.18); } html[data-theme="refresh"] .slide-info { background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0)); } html[data-theme="refresh"] .slide-title { color: var(--refresh-prim); } html[data-theme="refresh"] .slide-meta { color: var(--refresh-text-muted); } html[data-theme="refresh"] .carousel-nav { background: rgba(var(--refresh-prim-rgb), 0.08); border: 2px solid rgba(var(--refresh-prim-rgb), 0.3); } html[data-theme="refresh"] .carousel-nav:hover { background: rgba(var(--refresh-prim-rgb), 0.18); border-color: rgba(var(--refresh-prim-rgb), 0.8); box-shadow: 0 0 30px rgba(var(--refresh-prim-rgb), 0.45); } html[data-theme="refresh"] .carousel-nav svg { fill: var(--refresh-prim); } html[data-theme="refresh"] .carousel-dot { background: rgba(var(--refresh-prim-rgb), 0.2); border: 1px solid rgba(var(--refresh-prim-rgb), 0.3); } html[data-theme="refresh"] .carousel-dot.active { background: var(--refresh-prim); box-shadow: 0 0 15px rgba(var(--refresh-prim-rgb), 0.55); } /* Studio scanline — soften */ html[data-theme="refresh"] .scanline { background: linear-gradient(to bottom, transparent, rgba(var(--refresh-prim-rgb), 0.18), transparent); } /* Studio service modal */ html[data-theme="refresh"] .video-modal { background: rgba(255, 255, 255, 0.95); } /* ===================================================================== Tailwind utility re-tints (chrome only — vignettes left intact) These cover the accent text colors used in the page chrome / heros. ===================================================================== */ html[data-theme="refresh"] .text-cyan-400, html[data-theme="refresh"] .text-cyan-500 { color: var(--refresh-prim) !important; } html[data-theme="refresh"] .text-pink-400, html[data-theme="refresh"] .text-pink-500 { color: var(--refresh-tert) !important; } html[data-theme="refresh"] .text-purple-400, html[data-theme="refresh"] .text-purple-500 { color: #8B5CF6 !important; } html[data-theme="refresh"] .text-gray-400 { color: var(--refresh-text-muted) !important; } html[data-theme="refresh"] .text-gray-300 { color: var(--refresh-text) !important; } html[data-theme="refresh"] .text-white { color: var(--refresh-text) !important; } /* Gradient text used on "Pay once. Own it forever." headline */ html[data-theme="refresh"] .from-pink-500.to-cyan-500, html[data-theme="refresh"] [class*="from-pink-500"][class*="to-cyan-500"] { background-image: linear-gradient(to right, var(--refresh-tert), var(--refresh-prim)) !important; } /* Cyan border accents commonly used on dividers */ html[data-theme="refresh"] .from-cyan-400\/50 { --tw-gradient-from: rgba(var(--refresh-prim-rgb), 0.5) !important; } /* ===================================================================== Theme toggle button — shared between both themes, lives in both pages ===================================================================== */ .theme-toggle { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(15, 23, 42, 0.72); color: #ffffff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; z-index: 10001; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .theme-toggle:hover { transform: scale(1.08); } .theme-toggle:focus-visible { outline: 2px solid var(--refresh-prim); outline-offset: 3px; } .theme-toggle svg { width: 22px; height: 22px; fill: currentColor; pointer-events: none; } /* In refresh, invert the toggle so it's readable against the light bg */ html[data-theme="refresh"] .theme-toggle { background: #ffffff; color: var(--refresh-text); border: 1px solid var(--refresh-border-strong); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); } /* Hide whichever icon doesn't match the current theme */ html[data-theme="refresh"] .theme-toggle .icon-sun { display: none; } html[data-theme="refresh"] .theme-toggle .icon-moon { display: block; } html:not([data-theme="refresh"]) .theme-toggle .icon-sun { display: block; } html:not([data-theme="refresh"]) .theme-toggle .icon-moon { display: none; } /* No-flash for initial render before JS runs */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } /* ===================================================================== Contrast fixes — translucent white/black utilities on a light page would otherwise be invisible. These targeted overrides remap them to refresh-appropriate values without touching the classic cascade. ===================================================================== */ /* Translucent white text — make it faded dark instead */ html[data-theme="refresh"] .text-white\/20 { color: rgba(15, 23, 42, 0.32) !important; } html[data-theme="refresh"] .text-white\/30 { color: rgba(15, 23, 42, 0.42) !important; } html[data-theme="refresh"] .text-white\/40 { color: rgba(15, 23, 42, 0.5) !important; } html[data-theme="refresh"] .text-white\/50 { color: rgba(15, 23, 42, 0.6) !important; } html[data-theme="refresh"] .text-white\/60 { color: rgba(15, 23, 42, 0.7) !important; } html[data-theme="refresh"] .text-white\/70 { color: rgba(15, 23, 42, 0.8) !important; } /* Translucent white borders — make them visible dark borders */ html[data-theme="refresh"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.06) !important; } html[data-theme="refresh"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.1) !important; } html[data-theme="refresh"] .border-white\/20 { border-color: rgba(15, 23, 42, 0.15) !important; } html[data-theme="refresh"] .border-white\/30 { border-color: rgba(15, 23, 42, 0.2) !important; } /* Translucent white backgrounds (used on the colorful transition vignette for "finally free." pill — keep light since that vignette stays dark) */ /* Translucent black backgrounds — invert to soft light tints on the page chrome. These appear on the Packages card, Status section, and a few accents. */ html[data-theme="refresh"] .bg-black\/30 { background-color: rgba(15, 23, 42, 0.04) !important; } html[data-theme="refresh"] .bg-black\/40 { background-color: rgba(15, 23, 42, 0.05) !important; } html[data-theme="refresh"] .bg-black\/50, html[data-theme="refresh"] .bg-black\/60 { background-color: rgba(15, 23, 42, 0.07) !important; } /* The full-bleed marquee uses bare bg-black — keep it as an intentional dark feature band against the light page. Inside it, text should remain light, so un-override text-white for that descendant context. */ html[data-theme="refresh"] .bg-black .text-white, html[data-theme="refresh"] .bg-black [class*="text-white"] { color: #ffffff !important; } /* Gray scale — keep readable on white */ html[data-theme="refresh"] .text-gray-300 { color: var(--refresh-text) !important; } html[data-theme="refresh"] .text-gray-500 { color: #6b7280 !important; } /* 4.6:1 on white */ html[data-theme="refresh"] .text-gray-600 { color: #4b5563 !important; } /* 7.6:1 on white */ html[data-theme="refresh"] .text-gray-700 { color: #374151 !important; } html[data-theme="refresh"] .text-slate-400 { color: var(--refresh-text-muted) !important; } /* Inline -webkit-text-stroke values — these are inline on hero titles and would be invisible against the light bg. Selector targets only those transparent-fill elements that use text-stroke inline. */ html[data-theme="refresh"] .text-transparent[style*="text-stroke"] { -webkit-text-stroke: 1px var(--refresh-text) !important; } /* Special-case the magenta-stroke "AF" so it carries the accent in refresh */ html[data-theme="refresh"] [style*="text-stroke: 1px rgba(255, 0, 255"] { -webkit-text-stroke: 1px var(--refresh-tert) !important; } /* Buffer items: text-gray-500 already covered above. The HUD spinner uses border-cyan-500/30 which reads fine on white. Red ping dot stays as-is. */ /* Accent border on the Packages card (border-cyan-400/20) — bump to refresh blue */ html[data-theme="refresh"] .border-cyan-400\/20 { border-color: rgba(var(--refresh-prim-rgb), 0.25) !important; } html[data-theme="refresh"] .border-cyan-400\/50 { border-color: rgba(var(--refresh-prim-rgb), 0.55) !important; } /* Cyan/purple gradient bg overlays used on CTAs (from-cyan-900/20 to-purple-900/20) — soften for light bg */ html[data-theme="refresh"] [class*="from-cyan-900\/20"] { --tw-gradient-from: rgba(var(--refresh-prim-rgb), 0.08) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html[data-theme="refresh"] [class*="to-purple-900\/20"] { --tw-gradient-to: rgba(139, 92, 246, 0.08) !important; } html[data-theme="refresh"] [class*="hover\:from-cyan-900\/40"]:hover { --tw-gradient-from: rgba(var(--refresh-prim-rgb), 0.15) !important; } html[data-theme="refresh"] [class*="hover\:to-purple-900\/40"]:hover { --tw-gradient-to: rgba(139, 92, 246, 0.15) !important; } html[data-theme="refresh"] [class*="via-cyan-400\/20"] { --tw-gradient-via: rgba(var(--refresh-prim-rgb), 0.25) !important; } /* Red/orange status indicators — keep red but pick a darker shade for contrast */ html[data-theme="refresh"] .text-red-500\/80 { color: rgba(220, 38, 38, 0.95) !important; } html[data-theme="refresh"] .bg-red-500 { background-color: #dc2626 !important; } /* Green/yellow accents in buffer items — pick darker shades that pop on white */ html[data-theme="refresh"] .text-green-400 { color: #16a34a !important; } html[data-theme="refresh"] .text-green-500 { color: #16a34a !important; } html[data-theme="refresh"] .text-yellow-400 { color: #ca8a04 !important; } html[data-theme="refresh"] .text-yellow-500 { color: #ca8a04 !important; } html[data-theme="refresh"] .text-amber-400 { color: #d97706 !important; } html[data-theme="refresh"] .bg-green-500 { background-color: #16a34a !important; } html[data-theme="refresh"] [class*="bg-green-500\/"] { background-color: rgba(22, 163, 74, 0.6) !important; } /* Purple variants used in buffer + cards */ html[data-theme="refresh"] .text-purple-400\/60 { color: rgba(124, 58, 237, 0.75) !important; } /* Cursor: also clear any lingering transition on the studio cursor for snappier feel */ html[data-theme="refresh"] #custom-cursor { /* hard-override any inherited transition that would lag the pointer */ transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }