/* ========================================================================== PROMAX DARK — vibrant glass + bento + neon theme v1.0 Activated ONLY when has class .px-dark (toggle). Light theme stays 100% intact when this class is absent. Palette sampled from the CV: deep navy base + cyan / magenta / violet / lime / orange neon accents. Loaded after promax-enhance.css. No DOM/structure changes. ========================================================================== */ html.px-dark { --d-bg: #06080f; --d-bg-2: #0a0e1a; --d-bg-3: #0e1322; --d-surface: rgba(255, 255, 255, .045); --d-surface-2: rgba(255, 255, 255, .07); --d-border: rgba(255, 255, 255, .10); --d-border-2: rgba(255, 255, 255, .16); --d-text: #e8edf5; --d-text-dim: #9aa6bb; --d-cyan: #22D3EE; --d-magenta: #FF2D9B; --d-violet: #7C5CFF; --d-lime: #3DE686; --d-yellow: #FFD23F; --d-orange: #FF6A2B; --d-grad-bar: linear-gradient(90deg, #FF2D9B 0%, #7C5CFF 50%, #22D3EE 100%); --d-grad-btn: linear-gradient(135deg, #FF6A2B 0%, #FF2D9B 55%, #7C5CFF 110%); --d-glow-cyan: 0 0 0 1px rgba(34,211,238,.45), 0 16px 48px -14px rgba(34,211,238,.45); --d-glow-mag: 0 0 0 1px rgba(255,45,155,.45), 0 16px 48px -14px rgba(255,45,155,.45); background: var(--d-bg); color-scheme: dark; /* Override the base theme's own design tokens so every element that uses them flips automatically (catches all page variants: homepage1-5, contact, blog, inner pages). Light surfaces → dark, dark text → light. */ --ztc-bg-bg-1: #0a0e1a; /* was #fff */ --ztc-bg-bg-4: #0e1322; /* was #F2F2F2 */ --ztc-bg-bg-6: #0d1120; /* was #F4F4F9 */ --ztc-bg-bg-8: #0a0e1a; /* was #F5F3F4 */ --ztc-bg-bg-10: #0a0e1a; /* was #F5F3F4 */ --ztc-text-text-2: #ffffff; /* was #1C2127 dark text */ --ztc-text-text-3: #9aa6bb; /* was #5A6470 body gray */ --ztc-border-border-1: rgba(255,255,255,.10); --ztc-border-border-2: rgba(255,255,255,.14); } /* ---------- 1. Base surfaces + typography -------------------------------- */ html.px-dark body { background: var(--d-bg) !important; color: var(--d-text); } html.px-dark h1, html.px-dark h2, html.px-dark h3, html.px-dark h4, html.px-dark h5, html.px-dark h6, html.px-dark .vl-section-title, html.px-dark .title, html.px-dark .f-heading { color: #ffffff !important; } html.px-dark p, html.px-dark li, html.px-dark span, html.px-dark .desc p, html.px-dark .content-area p { color: var(--d-text-dim); } html.px-dark a { color: var(--d-text); } /* ambient neon glows behind the page (fixed, very subtle) */ html.px-dark body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 30% at 12% 8%, rgba(124,92,255,.16), transparent 60%), radial-gradient(38% 28% at 88% 18%, rgba(34,211,238,.13), transparent 60%), radial-gradient(45% 35% at 80% 92%, rgba(255,45,155,.12), transparent 62%); } html.px-dark .hero3-arrow-slider, html.px-dark .vl-footer3-section-area { position: relative; z-index: 1; } /* header must stay ABOVE everything (do not trap it at a low z-index) */ html.px-dark body > header { position: relative; z-index: 9990; } /* ---------- 2. Section backgrounds → dark ------------------------------- */ html.px-dark .about3, html.px-dark .service3, html.px-dark .project3, html.px-dark .choose3, html.px-dark .contact1, html.px-dark .testimonial3-section-area, html.px-dark .hero-inner-area, html.px-dark .project-inner-details, html.px-dark .blog-section, html.px-dark .blog-details, html.px-dark [class*="sp1"], html.px-dark [class*="sp2"] { background: transparent !important; } html.px-dark .service3, html.px-dark .choose3 { background: var(--d-bg-2) !important; } /* inner-page breadcrumb / banner area */ html.px-dark .hero-inner-area { background: linear-gradient(180deg, #0a0e1a, #06080f) !important; position: relative; overflow: hidden; } html.px-dark .hero-inner-area::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 80% 0%, rgba(124,92,255,.22), transparent 60%); } /* ---------- 3. Header → dark glass -------------------------------------- */ html.px-dark #vl-header-sticky.px-scrolled .row-bg1 { background: rgba(10, 14, 26, .78) !important; border-bottom: 1px solid var(--d-border) !important; box-shadow: 0 16px 40px -20px #000 !important; } html.px-dark #vl-header-sticky.px-scrolled .vl-main-menu nav > ul > li > a { color: var(--d-text) !important; } html.px-dark .vl-main-menu nav > ul > li > a { color: #eef2f8 !important; } html.px-dark .vl-main-menu nav > ul > li:hover > a { color: var(--d-cyan) !important; } html.px-dark .sub-menu { background: #0c1120 !important; border: 1px solid var(--d-border) !important; } html.px-dark .sub-menu li a { color: var(--d-text-dim) !important; } html.px-dark .sub-menu li a:hover { color: var(--d-cyan) !important; } /* logo gets a clean light chip so the JPG logo stays readable on dark */ html.px-dark .vl-logo img, html.px-dark .vl-offcanvas-logo img, html.px-dark .footer-logo-area img { background: #ffffff; border-radius: 10px; padding: 6px 10px; } html.px-dark .vl-offcanvas-wrapper { background: #0a0e1a !important; } html.px-dark .vl-offcanvas-menu ul li a { color: var(--d-text) !important; } /* ---------- 4. Glassmorphism cards (bento tiles) ------------------------ */ html.px-dark .project-boxarea, html.px-dark .counter-boxarea, html.px-dark .main-content-boxarea, html.px-dark .choose3 .choose-boxarea, html.px-dark .blog-boxarea, html.px-dark .testimonial-boxarea, html.px-dark .inner-box, html.px-dark .contact-widget-area { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 20px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -34px #000 !important; } html.px-dark .project-boxarea:hover, html.px-dark .main-content-boxarea:hover, html.px-dark .blog-boxarea:hover { border-color: rgba(34, 211, 238, .5) !important; box-shadow: var(--d-glow-cyan) !important; } html.px-dark .counter-boxarea:hover { border-color: rgba(255,45,155,.5) !important; box-shadow: var(--d-glow-mag) !important; } html.px-dark .project-boxarea .content-area p, html.px-dark .project-boxarea .desc p { color: var(--d-text-dim) !important; } html.px-dark .project-boxarea .title, html.px-dark .project-boxarea:hover .title { color: #fff !important; } html.px-dark .project-boxarea:hover .title { color: var(--d-cyan) !important; } /* ---------- 5. Section labels, titles, dividers ------------------------ */ html.px-dark .vl-section-subtitle { background: rgba(124, 92, 255, .14) !important; color: #c9bcff !important; border: 1px solid rgba(124, 92, 255, .35) !important; box-shadow: 0 0 22px -6px rgba(124,92,255,.5); } html.px-dark .vl-section-subtitle::before { background: var(--d-grad-bar) !important; } html.px-dark .heading3 .vl-section-title::after, html.px-dark .about3 .vl-section-title::after, html.px-dark .service3 .vl-section-title::after, html.px-dark .project3 .vl-section-title::after, html.px-dark .choose3 .vl-section-title::after, html.px-dark .contact1 .vl-section-title::after, html.px-dark .testimonial3-section-area .vl-section-title::after, html.px-dark .px-sec-head h2::after { background: var(--d-grad-bar) !important; box-shadow: 0 0 18px -2px rgba(124,92,255,.7); } /* ---------- 6. Buttons → neon gradient + glow -------------------------- */ html.px-dark .vl-btn3 { background: var(--d-grad-btn) !important; box-shadow: 0 14px 34px -12px rgba(255,45,155,.6), 0 0 0 1px rgba(255,255,255,.06) inset !important; color: #fff !important; } html.px-dark .vl-btn3:hover { box-shadow: 0 20px 46px -14px rgba(124,92,255,.75) !important; } html.px-dark .hero3-heading .vl-btn3[style*="transparent"] { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.45) !important; } html.px-dark .readmore { color: var(--d-cyan) !important; } html.px-dark .tabs-button .nav-link, html.px-dark .service3 .nav-pills .nav-link { background: var(--d-surface) !important; color: var(--d-text) !important; border: 1px solid var(--d-border) !important; } html.px-dark .tabs-button .nav-link.active, html.px-dark .service3 .nav-pills .nav-link.active { background: var(--d-grad-btn) !important; color: #fff !important; border-color: transparent !important; } /* ---------- 7. Stat numbers → bright + neon glow (readable) ------------- NOTE: a `background:!important` shorthand forces `background-clip:border-box!important`, which defeats `background-clip:text` and renders the number as a solid gradient BLOB. So use a solid fill. */ html.px-dark .counter-boxarea h2, html.px-dark .counter-boxarea h2 .counter, html.px-dark .counter-boxarea h2 span { background: none !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 0 18px rgba(34,211,238,.75), 0 0 6px rgba(124,92,255,.6); transition: transform .45s var(--px-ease-spring), text-shadow .45s var(--px-ease); } html.px-dark .counter-boxarea::before { background: var(--d-grad-bar) !important; } /* hover animation on each stat card */ html.px-dark .counter-boxarea:hover h2, html.px-dark .counter-boxarea:hover h2 .counter, html.px-dark .counter-boxarea:hover h2 span { transform: scale(1.14); text-shadow: 0 0 30px rgba(34,211,238,.95), 0 0 10px rgba(124,92,255,.85); } html.px-dark .counter-boxarea:hover .icons { transform: translateY(-6px) rotate(-6deg) scale(1.08); } html.px-dark .counter-boxarea .icons { transition: transform .5s var(--px-ease-spring); } /* give the four cards distinct neon hover accents */ html.px-dark .counter-boxarea:hover { border-color: rgba(34,211,238,.6) !important; } html.px-dark .col-md-6:nth-child(2) .counter-boxarea:hover { border-color: rgba(124,92,255,.6) !important; box-shadow: 0 0 0 1px rgba(124,92,255,.7), 0 22px 60px -18px rgba(124,92,255,.6) !important; } /* ---------- 8. Accordion / lists --------------------------------------- */ html.px-dark .accordion-item, html.px-dark .about-accordion-area .accordion-item { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 16px !important; } html.px-dark .accordion-button { background: transparent !important; color: #fff !important; } html.px-dark .accordion-button:not(.collapsed) { color: var(--d-cyan) !important; } html.px-dark .accordion-body { color: var(--d-text-dim) !important; } /* ---------- 9. Forms → dark + neon focus ------------------------------- */ html.px-dark input, html.px-dark textarea, html.px-dark select, html.px-dark .nice-select { background: rgba(255,255,255,.05) !important; border: 1px solid var(--d-border) !important; color: #fff !important; } html.px-dark input::placeholder, html.px-dark textarea::placeholder { color: #6f7d93 !important; } html.px-dark input:focus, html.px-dark textarea:focus { border-color: var(--d-cyan) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.25) !important; } html.px-dark .contact-widget-area { background: var(--d-surface) !important; } /* inner-page content callout/highlight boxes (e.g. .pera grey panels) */ html.px-dark .pera, html.px-dark .project-main-details .pera, html.px-dark [class*="gray-box"], html.px-dark [class*="grey-box"], html.px-dark .highlight-box, html.px-dark .note-box, html.px-dark .faq-box, html.px-dark .project-main-details .inner-box, html.px-dark .single-box { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 16px !important; } html.px-dark .pera *, html.px-dark .single-box * { color: var(--d-text-dim) !important; } html.px-dark .pera h1, html.px-dark .pera h2, html.px-dark .pera h3, html.px-dark .pera h4, html.px-dark .pera h5, html.px-dark .pera strong { color: #fff !important; } /* ---------- 10. Logo marquee on dark ----------------------------------- */ html.px-dark .px-marquee-section { background: var(--d-bg-2) !important; } html.px-dark .px-marquee-track img { filter: grayscale(100%) brightness(0) invert(1); opacity: .55; } html.px-dark .px-marquee-track img:hover { filter: none; opacity: 1; } /* ---------- 11. Misc: testimonials, before/after, footer --------------- */ html.px-dark .testimonial3-section-area { background: var(--d-bg) !important; } html.px-dark .px-ba-section { background: var(--d-bg-2) !important; } html.px-dark .px-marquee-section, html.px-dark .px-ba-section { position: relative; z-index: 1; } /* footer already dark from enhance layer — align border accents */ html.px-dark .vl-footer3-section-area { background-image: linear-gradient(135deg, #0a0e1a 0%, #0e1322 100%) !important; } html.px-dark .vl-footer3-section-area::before { background: var(--d-grad-bar) !important; } /* progress ring + scroll-top on dark */ html.px-dark .progress-wrap svg.progress-circle path { stroke: var(--d-cyan) !important; } /* "OUR VALUED CLIENTS" native — give EVERY logo a uniform white tile so transparent-background logos are as prominent as the others. */ html.px-dark marquee img { background: #ffffff !important; border-radius: 10px; padding: 9px 14px; margin: 0 9px; vertical-align: middle; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55); transition: transform .35s var(--px-ease-spring), box-shadow .35s var(--px-ease); } html.px-dark marquee img:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 26px -8px rgba(34, 211, 238, .55); } html.px-dark marquee + hr, html.px-dark marquee ~ hr, html.px-dark hr { border-color: rgba(255,255,255,.12) !important; opacity: 1; } /* ---------- 12. Theme toggle button ------------------------------------ */ .px-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(18,21,26,.16); background: #fff; color: #EC4A05; cursor: pointer; font-size: 17px; transition: transform .35s var(--px-ease-spring), box-shadow .3s var(--px-ease), background-color .3s, color .3s; vertical-align: middle; } .px-theme-toggle:hover { transform: translateY(-2px) rotate(-12deg); box-shadow: 0 10px 24px -10px rgba(0,0,0,.3); } html.px-dark .px-theme-toggle { background: rgba(255,255,255,.08); border-color: var(--d-border-2); color: var(--d-yellow); box-shadow: 0 0 22px -6px rgba(255,210,63,.6); } .px-theme-toggle-wrap { display: inline-flex; align-items: center; margin-left: 14px; } /* ---------- 13. Alternate page variants (contact / homepage1-2-4-5) ----- */ /* header bar: dark glass on every page variant */ html.px-dark .row-bg1 { background: rgba(10, 14, 26, .6) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* all footer variants → dark */ html.px-dark [class*="vl-footer"][class*="section-area"] { background-color: #0a0e1a !important; background-image: linear-gradient(135deg, #0a0e1a 0%, #0e1322 100%) !important; } html.px-dark [class*="vl-footer"][class*="section-area"] p, html.px-dark [class*="vl-footer"][class*="section-area"] li, html.px-dark [class*="vl-footer"][class*="section-area"] span, html.px-dark [class*="vl-footer"][class*="section-area"] a { color: rgba(255,255,255,.74) !important; } html.px-dark [class*="vl-footer"][class*="section-area"] h1, html.px-dark [class*="vl-footer"][class*="section-area"] h2, html.px-dark [class*="vl-footer"][class*="section-area"] h3, html.px-dark [class*="vl-footer"][class*="section-area"] h4, html.px-dark [class*="vl-footer"][class*="section-area"] .f-heading { color: #fff !important; } /* all button variants → neon gradient */ html.px-dark .vl-btn1, html.px-dark .vl-btn2, html.px-dark .vl-btn4, html.px-dark .vl-btn5 { background: var(--d-grad-btn) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 34px -12px rgba(255,45,155,.55) !important; } /* project filter tabs (.prj-filter-btn) → readable glass pills */ html.px-dark .prj-filter-btn { color: rgba(255,255,255,.8) !important; background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; transition: color .3s var(--px-ease), background-color .3s var(--px-ease), border-color .3s var(--px-ease), box-shadow .3s var(--px-ease), transform .3s var(--px-ease-spring); } html.px-dark .prj-filter-btn:hover { color: #fff !important; border-color: rgba(34,211,238,.55) !important; box-shadow: 0 0 20px -6px rgba(34,211,238,.65); transform: translateY(-2px); } html.px-dark .prj-filter-btn.active { background: var(--d-grad-btn) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 26px -10px rgba(255,45,155,.6); } /* contact + generic content cards → glass */ html.px-dark .contact-boxarea, html.px-dark .contact-main-boxarea, html.px-dark .calnow-boxes, html.px-dark .calnow-box, html.px-dark .team-boxarea, html.px-dark .price-boxarea, html.px-dark .faq-boxarea, html.px-dark .service-boxarea { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 18px !important; } /* ---------- 14. Custom INLINE-styled SEO content blocks ---------------- index + service pages hardcode light backgrounds inline (#F5F6F7 / #ffffff / #fff). Inline styles beat class rules, so target them by [style] and use !important. Gold (#F2A900) accents + dark (#1C2127) blocks are left as-is. */ html.px-dark [style*="background:#F5F6F7"], html.px-dark [style*="background: #F5F6F7"], html.px-dark [style*="background:#ffffff"], html.px-dark [style*="background: #ffffff"], html.px-dark [style*="background:#fff;"], html.px-dark [style*="background:#fff "], html.px-dark [style*="background: #fff"] { background-color: var(--d-bg-2) !important; background-image: none !important; border-color: var(--d-border) !important; } /* FAQ
/ accordions → light text on dark */ html.px-dark details { color: var(--d-text-dim) !important; } html.px-dark details summary { color: #ffffff !important; } html.px-dark details summary::marker, html.px-dark details summary::-webkit-details-marker { color: var(--d-cyan); } /* roof-type / feature list panel */ html.px-dark ul.list { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 16px !important; } html.px-dark ul.list li { color: var(--d-text-dim) !important; border-color: var(--d-border) !important; } /* boxed cards among them (gold top-border / bordered FAQ rows) → glassy */ html.px-dark [style*="#F5F6F7;border-top"], html.px-dark [style*="border:1px solid #e3e6e9"] { background-color: var(--d-bg-3) !important; } /* make sure text inside these blocks is readable (keep gold accents) */ html.px-dark [style*="background:#F5F6F7"] :not([style*="#F2A900"]):not(a), html.px-dark [style*="background:#ffffff"] :not([style*="#F2A900"]):not(a), html.px-dark [style*="background:#fff"] :not([style*="#F2A900"]):not(a) { color: var(--d-text-dim); } html.px-dark [style*="background:#F5F6F7"] h1, html.px-dark [style*="background:#F5F6F7"] h2, html.px-dark [style*="background:#F5F6F7"] h3, html.px-dark [style*="background:#F5F6F7"] h4, html.px-dark [style*="background:#ffffff"] h1, html.px-dark [style*="background:#ffffff"] h2, html.px-dark [style*="background:#ffffff"] h3, html.px-dark [style*="background:#ffffff"] h4 { color: #fff; } /* ---------- 15. Testimonials / Google reviews (class: others-boxarea) --- */ html.px-dark .others-boxarea, html.px-dark .testimonial3-section-area .others-boxarea { background: var(--d-surface) !important; border: 1px solid var(--d-border) !important; border-radius: 22px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* the quote bubble + all review text → readable light */ html.px-dark .testimonial3-section-area .others-boxarea p, html.px-dark .others-boxarea p, html.px-dark .others-boxarea .para, html.px-dark .others-boxarea span, html.px-dark .others-boxarea li, html.px-dark .testimonial3-section-area p { color: var(--d-text) !important; } html.px-dark .others-boxarea h1, html.px-dark .others-boxarea h2, html.px-dark .others-boxarea h3, html.px-dark .others-boxarea h4, html.px-dark .others-boxarea h5, html.px-dark .others-boxarea .title { color: #fff !important; } html.px-dark .others-boxarea .sub-title, html.px-dark .others-boxarea .designation { color: var(--d-text-dim) !important; } /* the inner quote panel often has its own light tint — force glassy dark */ html.px-dark .others-boxarea [class*="content"], html.px-dark .others-boxarea [class*="text"], html.px-dark .others-boxarea [style*="background"] { background: rgba(255,255,255,.035) !important; border-color: var(--d-border) !important; } /* ========================================================================== 16. EXTRA VIBRANCE — animated neon, shimmer dividers, glow pulses ========================================================================== */ /* gradient divider bars shimmer + glow-pulse */ html.px-dark .vl-section-title::after, html.px-dark .px-sec-head h2::after, html.px-dark .counter-boxarea::before, html.px-dark .vl-footer3-section-area::before, html.px-dark [class*="vl-footer"][class*="section-area"]::before { background-size: 220% 100% !important; animation: px-shimmer 4s linear infinite, px-glowpulse 2.6s ease-in-out infinite; } @keyframes px-shimmer { 0%{background-position:0% 0} 100%{background-position:220% 0} } @keyframes px-glowpulse { 0%,100% { filter: drop-shadow(0 0 4px rgba(124,92,255,.5)); } 50% { filter: drop-shadow(0 0 14px rgba(34,211,238,.85)); } } /* stronger neon card hover glows */ html.px-dark .project-boxarea:hover { box-shadow: 0 0 0 1px rgba(34,211,238,.7), 0 22px 60px -18px rgba(34,211,238,.6) !important; } html.px-dark .counter-boxarea:hover { box-shadow: 0 0 0 1px rgba(255,45,155,.7), 0 22px 60px -18px rgba(255,45,155,.6) !important; } html.px-dark .choose3 .choose-boxarea:hover { box-shadow: 0 0 0 1px rgba(124,92,255,.7), 0 22px 60px -18px rgba(124,92,255,.6) !important; } /* buttons get a brighter, animated neon halo */ html.px-dark .vl-btn3 { box-shadow: 0 0 22px -4px rgba(255,45,155,.7), 0 14px 34px -12px rgba(124,92,255,.6) !important; } /* animated conic glow ring around stat cards */ html.px-dark .counter-boxarea { position: relative; overflow: hidden; } /* section subtitle badge glows brighter */ html.px-dark .vl-section-subtitle { box-shadow: 0 0 26px -4px rgba(124,92,255,.7) !important; } /* ---------- 17. FIRE embers + WATER ripple particles (JS-spawned) ------- */ .px-ember { position: absolute; z-index: 1; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFE07A 0%, #FF8A1E 45%, #FF3D00 80%, transparent 100%); box-shadow: 0 0 10px 2px rgba(255,120,20,.8); opacity: 0; animation: px-ember-rise var(--px-ember-dur, 3.2s) ease-out forwards; } @keyframes px-ember-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-160px) translateX(var(--px-ember-x, 12px)) scale(1.15); } } /* water ripple already exists (.px-drop); brighten it in dark with a cyan tint */ html.px-dark .px-drop { border-color: rgba(120, 225, 255, .7); box-shadow: 0 0 12px rgba(34,211,238,.5); } html.px-dark .px-drop::after { border-color: rgba(120,225,255,.45); } @media (prefers-reduced-motion: reduce) { html.px-dark body::before { display: none; } html.px-dark .vl-section-title::after, html.px-dark .px-sec-head h2::after, html.px-dark .counter-boxarea::before, html.px-dark [class*="vl-footer"][class*="section-area"]::before { animation: none !important; } .px-ember { display: none !important; } }