/* ========================================================================= DELICAT STORE BUILDER — NEO GLASS v1.0 Advanced glassmorphism skin + smooth motion for the storefront. Scoped under html.dsb-neo so it never leaks. Reveal states live under html.dsb-js so the page stays fully visible if JavaScript is disabled. Brand: navy #0d1b4d · royal #284696 · sky #5b7ccc · orange #ff5a1f +509 33 11 12 83 · info@delicastoreha.com · www.delicastoreha.com ========================================================================= */ html.dsb-neo{ --ng-navy:#0d1b4d; --ng-royal:#284696; --ng-sky:#5b7ccc; --ng-orange:#ff5a1f; --ng-radius:22px; --ng-blur:16px; --ng-glass:linear-gradient(158deg,rgba(255,255,255,.80),rgba(255,255,255,.55)); --ng-glass-soft:linear-gradient(158deg,rgba(255,255,255,.66),rgba(255,255,255,.40)); --ng-tint:rgba(255,255,255,.55); --ng-border:rgba(255,255,255,.70); --ng-ring:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.32); --ng-shadow:0 20px 48px -16px rgba(13,27,77,.34), 0 8px 18px -10px rgba(40,70,150,.26); --ng-shadow-lg:0 34px 70px -20px rgba(13,27,77,.42), 0 12px 26px -12px rgba(40,70,150,.34); --ng-ease:cubic-bezier(.22,1,.36,1); --ng-aura: radial-gradient(120% 90% at 8% -6%, rgba(91,124,204,.20), transparent 46%), radial-gradient(120% 90% at 104% 4%, rgba(255,90,31,.14), transparent 44%), radial-gradient(140% 120% at 50% 120%, rgba(40,70,150,.16), transparent 55%), linear-gradient(180deg,#eef2ff 0%,#ffffff 42%,#fff5fb 100%); } /* Dark-safe tokens (kept ready in case the dark toggle is re-enabled) */ html.dsb-neo.dlc-theme-dark, html.dsb-neo body.dlc-theme-dark{ --ng-glass:linear-gradient(158deg,rgba(30,38,64,.62),rgba(16,20,36,.42)); --ng-glass-soft:linear-gradient(158deg,rgba(30,38,64,.48),rgba(16,20,36,.30)); --ng-tint:rgba(24,30,54,.46); --ng-border:rgba(255,255,255,.14); --ng-ring:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06); --ng-shadow:0 22px 52px -18px rgba(0,0,0,.60), 0 8px 18px -10px rgba(0,0,0,.45); --ng-shadow-lg:0 40px 80px -22px rgba(0,0,0,.7), 0 14px 30px -12px rgba(0,0,0,.55); --ng-aura: radial-gradient(120% 90% at 8% -6%, rgba(91,124,204,.22), transparent 46%), radial-gradient(120% 90% at 104% 4%, rgba(255,90,31,.16), transparent 44%), linear-gradient(180deg,#070b14 0%,#0a0e1a 60%,#0b1022 100%); } html.dsb-neo{ scroll-behavior:smooth; } html.dsb-neo body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Reusable glass surface primitive */ html.dsb-neo .dsb-glass{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(var(--ng-blur)) saturate(150%); backdrop-filter:blur(var(--ng-blur)) saturate(150%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; } /* ========================================================================= 1 · CONTAINED AMBIENT (gives the frosted panels something to refract, without touching the theme's — fully self-contained) ========================================================================= */ html.dsb-neo .dsb-home, html.dsb-neo .dlc-wrap{ position:relative; z-index:0; } /* Carousels stay transparent (no panel) — the cards are frosted on their own, which keeps the layout clean and avoids stray rounded panels behind them. */ html.dsb-neo .dsb-home{ background:var(--ng-aura)!important; border-radius:26px; box-shadow:var(--ng-shadow); } /* Floating "aura" blobs injected by JS (kept subtle, non-interactive) */ html.dsb-neo .dsb-neo-aura{ position:fixed; inset:-20% -10% auto -10%; height:70vh; z-index:-1; pointer-events:none; filter:blur(60px); opacity:.55; background: radial-gradient(40% 60% at 18% 20%, rgba(91,124,204,.45), transparent 70%), radial-gradient(38% 55% at 82% 8%, rgba(255,90,31,.30), transparent 70%); animation:ngAura 18s var(--ng-ease) infinite alternate; } @keyframes ngAura{ from{ transform:translate3d(-2%,-1%,0) scale(1);} to{ transform:translate3d(3%,2%,0) scale(1.08);} } /* ========================================================================= 2 · MOTION (scroll reveal + entrance). JS adds .dsb-in; hidden state only applies when html.dsb-js is present, so no-JS visitors see everything. ========================================================================= */ html.dsb-js.dsb-neo .dsb-reveal{ opacity:0; transform:translateY(20px) scale(.98); transition:opacity .7s var(--ng-ease), transform .7s var(--ng-ease); will-change:opacity,transform; } html.dsb-js.dsb-neo .dsb-reveal.dsb-in{ opacity:1; transform:none; } /* Gentle floating intro for the primary hero */ html.dsb-neo .dsb-home-hero, html.dsb-neo .dlc-style-hero .dlc-hero-inner{ animation:ngRise .9s var(--ng-ease) both; } @keyframes ngRise{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} } /* ========================================================================= 3 · HOME PREMIUM (.dsb-home-*) ========================================================================= */ html.dsb-neo .dsb-home-top{ background:var(--ng-glass-soft)!important; -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); border:1px solid var(--ng-border); border-radius:999px; box-shadow:var(--ng-ring), var(--ng-shadow); padding:8px 12px; } html.dsb-neo .dsb-home-search input, html.dsb-neo .dsb-home-toggle, html.dsb-neo .dsb-home-cart{ background:var(--ng-tint)!important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring); } /* Hero: keep the dark image, add frosted sheen + brighter glass pills */ html.dsb-neo .dsb-home-hero{ border:1px solid rgba(255,255,255,.16); box-shadow:var(--ng-shadow-lg); isolation:isolate; } html.dsb-neo .dsb-home-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%); background-size:220% 100%; background-position:180% 0; mix-blend-mode:screen; animation:ngSheen 7s var(--ng-ease) infinite; } html.dsb-neo .dsb-home-hero > *{ position:relative; z-index:1; } @keyframes ngSheen{ 0%,60%{background-position:180% 0} 100%{background-position:-40% 0} } html.dsb-neo .dsb-hero-pill{ background:rgba(255,255,255,.16)!important; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); border:1px solid rgba(255,255,255,.28)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px rgba(5,10,30,.28); transition:transform .25s var(--ng-ease); } html.dsb-neo .dsb-hero-pill:hover{ transform:translateY(-2px); } /* Category tiles + wallet tiles + product cards → frosted glass */ html.dsb-neo .dsb-cat, html.dsb-neo .dsb-wallet, html.dsb-neo .dsb-product{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(var(--ng-blur)) saturate(150%); backdrop-filter:blur(var(--ng-blur)) saturate(150%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; transition:transform .32s var(--ng-ease), box-shadow .32s var(--ng-ease); } html.dsb-neo .dsb-cat:hover, html.dsb-neo .dsb-wallet:hover{ transform:translateY(-5px); box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; } html.dsb-neo .dsb-product{ transform:none; } html.dsb-neo .dsb-product:hover{ transform:translateY(-7px); box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; } html.dsb-neo .dsb-product-img{ background:rgba(238,242,255,.5)!important; } html.dsb-neo .dsb-benefits-home{ background:var(--ng-glass-soft)!important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; } html.dsb-neo .dsb-offer{ box-shadow:var(--ng-shadow-lg)!important; border:1px solid rgba(255,255,255,.22); } /* Footer: frosted dark glass */ html.dsb-neo .dsb-home-footer{ background:linear-gradient(180deg,rgba(11,16,48,.86),rgba(7,11,34,.92))!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.10); } html.dsb-neo .dsb-socials span{ background:rgba(255,255,255,.10)!important; border:1px solid rgba(255,255,255,.16); transition:transform .25s var(--ng-ease), background .25s; } html.dsb-neo .dsb-socials span:hover{ transform:translateY(-3px); background:rgba(91,124,204,.35)!important; } /* ========================================================================= 4 · CAROUSEL WIDGET (.dlc-*) ========================================================================= */ /* Universal: ring + depth + smooth lift on EVERY card. No background change, so vibrant promo / dark / offer / plan / hero cards keep their own designs. */ html.dsb-neo .dlc-card{ box-shadow:var(--ng-ring), var(--ng-shadow)!important; border-radius:var(--ng-radius)!important; transition:transform .34s var(--ng-ease), box-shadow .34s var(--ng-ease); transform-style:preserve-3d; } html.dsb-neo .dlc-card:hover{ box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; } /* Frosted glass ONLY on NEUTRAL product cards. We exclude the vibrant wrap styles and promo cards so their gradients and light text stay readable. */ html.dsb-neo .dlc-wrap:not(.dlc-style-dark):not(.dlc-style-offers):not(.dlc-style-stacked):not(.dlc-style-showcase):not(.dlc-style-plans):not(.dlc-style-hero) .dlc-card:not(.dlc-promo-card){ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(var(--ng-blur)) saturate(150%); backdrop-filter:blur(var(--ng-blur)) saturate(150%); border:1px solid var(--ng-border)!important; } html.dsb-neo .dlc-wrap:not(.dlc-style-dark):not(.dlc-style-offers):not(.dlc-style-stacked):not(.dlc-style-showcase):not(.dlc-style-plans):not(.dlc-style-hero) .dlc-imgbox, html.dsb-neo .dlc-circle-imgbox{ background:rgba(255,255,255,.32)!important; } /* Carousel nav arrows → subtle glass. NOTE: we deliberately do NOT touch .dlc-like-btn / .dlc-share-btn / .dlc-hero-heart — glassing them boxed the heart + WhatsApp overlays into opaque rectangles, so they keep native style. */ html.dsb-neo .dlc-arrow{ background:var(--ng-tint)!important; -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), 0 8px 18px rgba(13,27,77,.20)!important; transition:transform .22s var(--ng-ease), box-shadow .22s var(--ng-ease); } html.dsb-neo .dlc-arrow:hover{ transform:translateY(-2px) scale(1.06); } html.dsb-neo .dlc-arrow:active{ transform:scale(.94); } /* "Voir tout" keeps its native vibrant gradient (glassing it turned it into an invisible white blob top-right of each section). Only a gentle hover lift. */ html.dsb-neo .dlc-view-all{ transition:transform .22s var(--ng-ease); } html.dsb-neo .dlc-view-all:hover{ transform:translateY(-2px); } /* ========================================================================= 5 · SEARCH BARS (.dsb-search-*) ========================================================================= */ html.dsb-neo .dsb-search input{ background:var(--ng-glass-soft)!important; -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), 0 8px 20px rgba(13,27,77,.12)!important; } html.dsb-neo .dsb-search-glass{ background:var(--ng-tint)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } /* ========================================================================= 6 · GLASS BUTTONS (CTA + Acheter + push button) with liquid sheen + ripple ========================================================================= */ html.dsb-neo .dlc-btn, html.dsb-neo .dsb-cta, html.dsb-neo .dsb-buy, html.dsb-neo .dsb-more, html.dsb-neo .dsb541-push-btn{ position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -8px rgba(40,70,150,.42); transition:transform .2s var(--ng-ease), box-shadow .2s var(--ng-ease), filter .2s; } html.dsb-neo .dlc-btn::after, html.dsb-neo .dsb-cta::after, html.dsb-neo .dsb-buy::after, html.dsb-neo .dsb541-push-btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); transition:left .6s var(--ng-ease); pointer-events:none; } html.dsb-neo .dlc-btn:hover, html.dsb-neo .dsb-cta:hover, html.dsb-neo .dsb-buy:hover, html.dsb-neo .dsb-more:hover, html.dsb-neo .dsb541-push-btn:hover{ transform:translateY(-2px); filter:saturate(112%); } html.dsb-neo .dlc-btn:hover::after, html.dsb-neo .dsb-cta:hover::after, html.dsb-neo .dsb-buy:hover::after, html.dsb-neo .dsb541-push-btn:hover::after{ left:135%; } html.dsb-neo .dlc-btn:active, html.dsb-neo .dsb-cta:active, html.dsb-neo .dsb-buy:active{ transform:translateY(0) scale(.97); } /* Ripple element (created by JS) */ html.dsb-neo .dsb-ripple{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none; background:rgba(255,255,255,.5); animation:ngRipple .6s ease-out forwards; mix-blend-mode:screen; } @keyframes ngRipple{ to{ transform:scale(2.6); opacity:0; } } /* ========================================================================= 7 · FLOATING WIDGETS (bell · support FAB · live-sales · install sheet) ========================================================================= */ /* Notification bell + panel */ html.dsb-neo .dsb541-panel{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; border-radius:20px!important; animation:ngPop .32s var(--ng-ease) both; } @keyframes ngPop{ from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none} } html.dsb-neo .dsb541-item{ background:var(--ng-tint)!important; border:1px solid var(--ng-border)!important; border-radius:14px!important; transition:transform .2s var(--ng-ease), box-shadow .2s; } html.dsb-neo .dsb541-item:hover{ transform:translateX(3px); box-shadow:0 8px 18px rgba(13,27,77,.16); } html.dsb-neo .dsb541-bell{ transition:transform .25s var(--ng-ease); } html.dsb-neo .dsb541-bell:hover{ transform:rotate(-8deg) scale(1.08); } html.dsb-neo .dsb541-push-btn{ background:linear-gradient(135deg,var(--ng-royal),var(--ng-navy))!important; color:#fff!important; border:1px solid rgba(255,255,255,.25)!important; } /* Support FAB + menu */ html.dsb-neo .dsb-support-menu{ background:transparent; } html.dsb-neo .dsb-support-item{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; } html.dsb-neo .dsb-support-fab{ box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 36px rgba(7,20,63,.4)!important; transition:transform .22s var(--ng-ease), box-shadow .22s; animation:ngFloat 4.5s var(--ng-ease) infinite; } html.dsb-neo .dsb-support-fab:hover{ transform:translateY(-3px) scale(1.04); } @keyframes ngFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } /* Live-sales toast */ html.dsb-neo .dsb-ls-toast{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; border-radius:18px!important; } /* Install banner / sheet (already glassy — unify the ring + motion) */ html.dsb-neo #dliBanner{ box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; } html.dsb-neo #dliOverlay .dli-sheet, html.dsb-neo #dliOverlay > div{ } /* ========================================================================= 8 · TOP-UP PRODUCT PAGE + WALLET CARDS ========================================================================= */ html.dsb-neo .dsb-var-card{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(var(--ng-blur)) saturate(150%); backdrop-filter:blur(var(--ng-blur)) saturate(150%); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; transition:transform .28s var(--ng-ease), box-shadow .28s var(--ng-ease); } html.dsb-neo .dsb-var-card:hover{ transform:translateY(-4px); box-shadow:var(--ng-ring), var(--ng-shadow-lg)!important; } html.dsb-neo .dsb-var-card.is-active, html.dsb-neo .dsb-var-card[aria-pressed="true"]{ box-shadow:var(--ng-ring), 0 0 0 2px var(--ng-royal), var(--ng-shadow-lg)!important; } html.dsb-neo [class*="dsb-v51-"] .dsb-v51-card, html.dsb-neo .dsb-v5-card{ background:var(--ng-glass)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--ng-border)!important; box-shadow:var(--ng-ring), var(--ng-shadow)!important; } /* ========================================================================= 9 · ACCESSIBILITY + PERFORMANCE ========================================================================= */ @media (hover:hover) and (pointer:fine){ html.dsb-neo .dlc-card{ transform:perspective(1000px) rotateX(var(--ng-rx,0deg)) rotateY(var(--ng-ry,0deg)) translateY(var(--ng-ty,0)); } html.dsb-neo .dlc-card:hover{ --ng-ty:-6px; } } /* Lighter blur + no tilt on small screens (Safari/iOS friendliness) */ @media (max-width:600px){ html.dsb-neo{ --ng-blur:11px; } html.dsb-neo .dlc-card{ transform:none!important; } html.dsb-neo .dsb-neo-aura{ opacity:.4; filter:blur(48px); } } /* Devices/users that ask for less motion: kill all movement, keep the glass */ @media (prefers-reduced-motion:reduce){ html.dsb-neo *, html.dsb-neo *::before, html.dsb-neo *::after{ animation:none!important; transition:none!important; } html.dsb-js.dsb-neo .dsb-reveal{ opacity:1!important; transform:none!important; } } /* Graceful fallback where backdrop-filter is unsupported: solid frosted tint */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ html.dsb-neo .dsb-glass, html.dsb-neo .dlc-card, html.dsb-neo .dsb-product, html.dsb-neo .dsb-cat, html.dsb-neo .dsb-wallet, html.dsb-neo .dsb541-panel, html.dsb-neo .dsb-support-item, html.dsb-neo .dsb-ls-toast, html.dsb-neo .dsb-var-card{ background:rgba(255,255,255,.94)!important; } } /* ========================================================================= 10 · DELICAT NEO DARK APP MODE v5.5.2 Turns the full storefront into the neon gaming-app look when Dark Mode is active. Scoped to html.dsb-neo.dlc-theme-dark / body.dlc-theme-dark to avoid affecting light mode. ========================================================================= */ html.dsb-neo.dlc-theme-dark, html.dsb-neo.dlc-theme-dark body, html.dsb-neo body.dlc-theme-dark{ --ng-navy:#090b1a; --ng-royal:#2a44ff; --ng-sky:#42d6ff; --ng-pink:#ff28d7; --ng-purple:#8b35ff; --ng-orange:#ff5a1f; --ng-text:#f8fbff; --ng-muted:#9aa4c7; --ng-glass:linear-gradient(145deg,rgba(20,24,55,.72),rgba(8,10,28,.46)); --ng-glass-soft:linear-gradient(145deg,rgba(18,22,48,.58),rgba(7,9,25,.32)); --ng-tint:rgba(17,20,48,.58); --ng-border:rgba(121,91,255,.28); --ng-ring:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(130,80,255,.15); --ng-shadow:0 0 0 1px rgba(84,105,255,.10), 0 18px 46px rgba(0,0,0,.56), 0 0 32px rgba(124,43,255,.16); --ng-shadow-lg:0 0 0 1px rgba(102,123,255,.15), 0 28px 74px rgba(0,0,0,.74), 0 0 46px rgba(244,38,255,.24); --ng-aura: radial-gradient(90% 55% at 8% -6%, rgba(45,107,255,.26), transparent 58%), radial-gradient(80% 50% at 96% 0%, rgba(255,39,209,.22), transparent 56%), radial-gradient(70% 45% at 50% 100%, rgba(72,220,255,.12), transparent 58%), linear-gradient(180deg,#050712 0%,#080a18 42%,#070712 100%); background:var(--ng-aura)!important; color:var(--ng-text)!important; } html.dsb-neo.dlc-theme-dark body::before, html.dsb-neo body.dlc-theme-dark::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size:34px 34px; opacity:.18; } html.dsb-neo.dlc-theme-dark a, html.dsb-neo body.dlc-theme-dark a{ color:#dfe7ff; } /* Page shells / Elementor containers */ html.dsb-neo.dlc-theme-dark .site, html.dsb-neo.dlc-theme-dark #page, html.dsb-neo.dlc-theme-dark .elementor, html.dsb-neo.dlc-theme-dark .elementor-section, html.dsb-neo.dlc-theme-dark .elementor-container, html.dsb-neo.dlc-theme-dark .elementor-widget-container, html.dsb-neo body.dlc-theme-dark .site, html.dsb-neo body.dlc-theme-dark #page{ background:transparent!important; color:var(--ng-text)!important; } html.dsb-neo.dlc-theme-dark h1, html.dsb-neo.dlc-theme-dark h2, html.dsb-neo.dlc-theme-dark h3, html.dsb-neo.dlc-theme-dark h4, html.dsb-neo.dlc-theme-dark .dlc-title, html.dsb-neo.dlc-theme-dark .dsb-row-title h2, html.dsb-neo body.dlc-theme-dark h1, html.dsb-neo body.dlc-theme-dark h2, html.dsb-neo body.dlc-theme-dark h3{ color:#fff!important; text-shadow:0 0 24px rgba(78,124,255,.18); } html.dsb-neo.dlc-theme-dark p, html.dsb-neo.dlc-theme-dark .dlc-price, html.dsb-neo.dlc-theme-dark .dsb-product-price, html.dsb-neo body.dlc-theme-dark p{ color:#c8d1f2!important; } /* Header/search/notification/cart like the reference app */ html.dsb-neo.dlc-theme-dark header, html.dsb-neo.dlc-theme-dark .site-header, html.dsb-neo.dlc-theme-dark .elementor-location-header, html.dsb-neo.dlc-theme-dark .dsb-home-top, html.dsb-neo body.dlc-theme-dark header, html.dsb-neo body.dlc-theme-dark .site-header, html.dsb-neo body.dlc-theme-dark .elementor-location-header{ background:rgba(6,8,20,.72)!important; -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); border-bottom:1px solid rgba(91,124,255,.18)!important; box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 32px rgba(106,40,255,.12)!important; } html.dsb-neo.dlc-theme-dark .dsb-home-search input, html.dsb-neo.dlc-theme-dark .dsb-search input, html.dsb-neo.dlc-theme-dark input[type="search"], html.dsb-neo.dlc-theme-dark .search-field, html.dsb-neo body.dlc-theme-dark input[type="search"]{ background:rgba(13,17,41,.74)!important; color:#fff!important; border:1px solid rgba(119,91,255,.35)!important; border-radius:20px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px rgba(89,81,255,.18)!important; } html.dsb-neo.dlc-theme-dark .dsb-home-search input::placeholder, html.dsb-neo body.dlc-theme-dark input[type="search"]::placeholder{ color:#8f98bc!important; } /* Round moon toggle / transparent bell / cart indicator */ html.dsb-neo.dlc-theme-dark .dlc-theme-toggle, html.dsb-neo.dlc-theme-dark .dsb-home-toggle{ width:54px!important; height:54px!important; min-width:54px!important; padding:0!important; border-radius:50%!important; background:radial-gradient(circle at 35% 30%,rgba(255,139,42,.95),rgba(102,40,255,.72) 56%,rgba(8,12,34,.88) 100%)!important; border:1px solid rgba(195,104,255,.5)!important; box-shadow:0 0 22px rgba(168,62,255,.6), 0 0 34px rgba(47,114,255,.28)!important; color:#fff!important; font-size:0!important; } html.dsb-neo.dlc-theme-dark .dlc-theme-toggle .dlc-toggle-knob{ background:transparent!important; width:100%; height:100%; } html.dsb-neo.dlc-theme-dark .dlc-theme-toggle .dlc-toggle-knob:before, html.dsb-neo.dlc-theme-dark .dsb-home-toggle:before{ content:'🌙'; font-size:24px; } html.dsb-neo.dlc-theme-dark .dlc-toggle-label{ display:none!important; } html.dsb-neo.dlc-theme-dark .dsb541-bell, html.dsb-neo.dlc-theme-dark .dsb-header-bell, html.dsb-neo.dlc-theme-dark .delicat-notification-bell, html.dsb-neo body.dlc-theme-dark .dsb541-bell{ background:transparent!important; border:0!important; box-shadow:none!important; color:#dfe7ff!important; font-size:28px!important; width:44px!important; height:44px!important; filter:drop-shadow(0 0 10px rgba(169,120,255,.65)); } html.dsb-neo.dlc-theme-dark .dsb541-count, html.dsb-neo.dlc-theme-dark .dsb-notification-count, html.dsb-neo.dlc-theme-dark .cart-contents .count{ background:#ff3e2f!important; color:#fff!important; border:0!important; box-shadow:0 0 0 3px rgba(255,62,47,.16),0 0 18px rgba(255,62,47,.58)!important; } /* Home sections */ html.dsb-neo.dlc-theme-dark .dsb-home, html.dsb-neo body.dlc-theme-dark .dsb-home{ background:transparent!important; color:#fff!important; box-shadow:none!important; max-width:1180px; } html.dsb-neo.dlc-theme-dark .dsb-home-hero, html.dsb-neo body.dlc-theme-dark .dsb-home-hero{ border:1px solid rgba(101,118,255,.36)!important; box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 20px 54px rgba(0,0,0,.58), 0 0 36px rgba(119,61,255,.38)!important; border-radius:28px!important; } html.dsb-neo.dlc-theme-dark .dsb-hero-pill, html.dsb-neo body.dlc-theme-dark .dsb-hero-pill{ background:rgba(255,255,255,.10)!important; border:1px solid rgba(142,161,255,.26)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 18px rgba(72,96,255,.12)!important; } html.dsb-neo.dlc-theme-dark .dsb-cta, html.dsb-neo.dlc-theme-dark .dlc-btn, html.dsb-neo.dlc-theme-dark .dsb-buy, html.dsb-neo.dlc-theme-dark .dsb-more, html.dsb-neo body.dlc-theme-dark .dsb-cta{ background:linear-gradient(135deg,#1f7aff 0%,#7437ff 48%,#ff25b8 100%)!important; color:#fff!important; border:0!important; box-shadow:0 0 22px rgba(107,71,255,.48), 0 10px 26px rgba(0,0,0,.35)!important; } /* Icon/category row: neon square tiles */ html.dsb-neo.dlc-theme-dark .dsb-cat, html.dsb-neo.dlc-theme-dark .dlc-icon-menu a, html.dsb-neo.dlc-theme-dark .dlc-icon-item, html.dsb-neo body.dlc-theme-dark .dsb-cat{ background:linear-gradient(145deg,rgba(21,27,66,.72),rgba(8,12,35,.58))!important; border:1px solid rgba(114,91,255,.32)!important; border-radius:22px!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.42), 0 0 25px rgba(95,62,255,.20)!important; } html.dsb-neo.dlc-theme-dark .dsb-cat i, html.dsb-neo.dlc-theme-dark .dlc-icon-item img, html.dsb-neo.dlc-theme-dark .dlc-icon-item svg{ filter:drop-shadow(0 0 16px rgba(75,153,255,.65)); } /* Carousel sections/cards */ html.dsb-neo.dlc-theme-dark .dlc-wrap, html.dsb-neo body.dlc-theme-dark .dlc-wrap{ background:linear-gradient(145deg,rgba(15,18,44,.52),rgba(6,8,22,.34))!important; border:1px solid rgba(119,91,255,.18)!important; border-radius:26px!important; padding:18px!important; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 46px rgba(0,0,0,.38), 0 0 30px rgba(113,48,255,.15)!important; } html.dsb-neo.dlc-theme-dark .dlc-card, html.dsb-neo.dlc-theme-dark .dsb-product, html.dsb-neo.dlc-theme-dark .dsb-wallet, html.dsb-neo body.dlc-theme-dark .dlc-card, html.dsb-neo body.dlc-theme-dark .dsb-product{ background:linear-gradient(155deg,rgba(25,30,68,.78),rgba(8,11,29,.62))!important; border:1px solid rgba(128,98,255,.28)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 16px 34px rgba(0,0,0,.46), 0 0 24px rgba(71,80,255,.16)!important; } html.dsb-neo.dlc-theme-dark .dlc-imgbox, html.dsb-neo.dlc-theme-dark .dsb-product-img, html.dsb-neo body.dlc-theme-dark .dlc-imgbox{ background:rgba(255,255,255,.06)!important; } html.dsb-neo.dlc-theme-dark .dlc-name, html.dsb-neo.dlc-theme-dark .dsb-product-title{ color:#fff!important; } html.dsb-neo.dlc-theme-dark .dlc-price, html.dsb-neo.dlc-theme-dark .dsb-product-price{ color:#ff8059!important; } html.dsb-neo.dlc-theme-dark .dlc-view-all, html.dsb-neo.dlc-theme-dark .dsb-more{ border-radius:18px!important; padding:10px 16px!important; background:rgba(17,20,48,.62)!important; border:1px solid rgba(147,112,255,.32)!important; box-shadow:0 0 22px rgba(114,72,255,.22)!important; } html.dsb-neo.dlc-theme-dark .dlc-dot.is-active, html.dsb-neo.dlc-theme-dark .dlc-dot.active{ background:#d72cff!important; box-shadow:0 0 14px rgba(215,44,255,.7)!important; } /* Promo/recharge widgets like screenshot */ html.dsb-neo.dlc-theme-dark .dsb-promo-widget, html.dsb-neo.dlc-theme-dark .dsb-recharge-widget, html.dsb-neo.dlc-theme-dark .dsb-promo-exclusive, html.dsb-neo.dlc-theme-dark .dsb-recharge-card, html.dsb-neo body.dlc-theme-dark .dsb-promo-widget, html.dsb-neo body.dlc-theme-dark .dsb-recharge-widget{ background:linear-gradient(135deg,rgba(14,13,42,.92),rgba(27,7,50,.72))!important; border:1px solid rgba(255,43,215,.34)!important; border-radius:24px!important; box-shadow:0 0 34px rgba(255,42,212,.22), inset 0 1px 0 rgba(255,255,255,.10)!important; color:#fff!important; } /* Bottom navigation / footer */ html.dsb-neo.dlc-theme-dark .dsb-bottom-nav, html.dsb-neo.dlc-theme-dark .mobile-bottom-nav, html.dsb-neo.dlc-theme-dark .dsb-home-footer, html.dsb-neo body.dlc-theme-dark .dsb-home-footer{ background:linear-gradient(180deg,rgba(12,15,40,.82),rgba(6,8,24,.92))!important; -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); border:1px solid rgba(129,100,255,.22)!important; box-shadow:0 -12px 34px rgba(0,0,0,.44), 0 0 30px rgba(104,72,255,.14)!important; } /* WooCommerce + general panels */ html.dsb-neo.dlc-theme-dark .woocommerce, html.dsb-neo.dlc-theme-dark .woocommerce div.product, html.dsb-neo.dlc-theme-dark .woocommerce-cart-form, html.dsb-neo.dlc-theme-dark .cart_totals, html.dsb-neo.dlc-theme-dark .woocommerce-checkout-review-order, html.dsb-neo.dlc-theme-dark .woocommerce-MyAccount-content, html.dsb-neo.dlc-theme-dark .woocommerce-MyAccount-navigation, html.dsb-neo.dlc-theme-dark .entry-content, html.dsb-neo body.dlc-theme-dark .woocommerce{ background:transparent!important; color:#fff!important; } html.dsb-neo.dlc-theme-dark table, html.dsb-neo.dlc-theme-dark .woocommerce table.shop_table, html.dsb-neo.dlc-theme-dark form.checkout, html.dsb-neo.dlc-theme-dark .woocommerce form .form-row input.input-text, html.dsb-neo.dlc-theme-dark .woocommerce form .form-row textarea, html.dsb-neo.dlc-theme-dark select{ background:rgba(14,18,43,.72)!important; color:#fff!important; border-color:rgba(126,102,255,.24)!important; } @media(max-width:600px){ html.dsb-neo.dlc-theme-dark .dlc-wrap{ padding:14px!important; border-radius:22px!important; } html.dsb-neo.dlc-theme-dark .dsb-home{ padding:10px!important; } html.dsb-neo.dlc-theme-dark .dsb-home-hero{ border-radius:24px!important; } html.dsb-neo.dlc-theme-dark .dsb-cat{ border-radius:20px!important; } }