/* =========================================================================
DonXtraBoost 2026 — premium AI/tech skin.
Deep pure black + electric blue. GLASS + GLOW + BLUE GRADIENTS are in.
Only rule that stays hard: NO purple / magenta.
Load order: LAST in . Rollback: delete the in layouts/app.blade.php.
========================================================================= */
:root {
--donx-bg: #000000;
--donx-bg-2: #05070d;
--donx-panel: #0D1117;
--donx-panel-2: #131A26;
--donx-panel-strong: #161B26;
--donx-glass: linear-gradient(160deg, rgba(20, 28, 44, 0.92), rgba(10, 14, 22, 0.72));
--donx-border: rgba(0, 229, 255, 0.22);
--donx-border-hot: rgba(0, 229, 255, 0.45);
--donx-blue: #00f0ff;
--donx-blue-2: #00c8ff;
--donx-purple: #00c8ff;
--donx-violet: #00f0ff;
--donx-green: #00f0ff;
--donx-text: #FFFFFF;
--donx-muted: #94A3B8;
--donx-soft: #94A3B8;
--donx-grad: linear-gradient(90deg, #00d2ff 0%, #00c8ff 100%);
--donx-glow: 0 0 34px rgba(0, 240, 255, 0.4);
--donx-glow-soft: 0 0 24px rgba(0, 240, 255, 0.22);
--donx-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
--donx-radius: 16px;
--luxe-cyan: #00f0ff;
--luxe-purple: #00c8ff;
--neon-cyan: #00f0ff;
--electric-blue: #00c8ff;
--border-glow: rgba(0, 210, 255, 0.35);
--ambient-cyan: rgba(0, 240, 255, 0.2);
--card-bg: rgba(9, 18, 38, 0.65);
/* neutralise the vendor theme's orange/violet accent var (style.css) */
--violet: #00e5ff;
--smokeWhite: #94A3B8;
}
/* vendor base theme used --violet for kickers, titles, dots, borders */
.review-box .title, .donx-review-box .title,
.testimonial-section .title, .review-box .designation,
.header-text h5, .donx-section-heading h5,
.donx-stories-kicker, .shop-top-kicker, .services-topbar-badge i {
color: #00e5ff !important;
}
/* =========================================================================
TYPOGRAPHY — Space Grotesk (display) + Inter (body). Readable, premium.
========================================================================= */
body, .donx-public-nav, .navbar, .nav-link, p, li, td, th, span, small, label,
input, textarea, select, button, .btn, .btn-smm, .footer-section, .header-text p {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .002em; }
h1, h2, h3, h4, h5, h6,
.header-text h1, .header-text h2, .header-text h2, .header-text h3, .header-text h4, .header-text h5,
.donx-section-heading h2, .donx-section-heading h3, .donx-section-heading h5, .donx-hero-copy h1,
.donx-story-title, #donx-stories h2, .shop-price, .donx-ref-headline strong,
.accordion-button, .donx-stat-item strong {
font-family: 'Space Grotesk', 'Sora', -apple-system, sans-serif !important;
letter-spacing: -.02em !important;
font-weight: 700 !important;
}
/* section H3 headings — big, tight, white */
.header-text h2, .header-text h3, .donx-section-heading h2, .donx-section-heading h3, #donx-stories h2 {
font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
line-height: 1.12 !important;
color: #ffffff !important;
}
/* kickers / eyebrows — spaced uppercase, cyan */
.header-text h5, .donx-section-heading h5, .donx-stories-kicker, .shop-top-kicker,
.donx-how-chip, .services-topbar-badge {
font-family: 'Inter', sans-serif !important;
font-size: 11.5px !important; font-weight: 700 !important;
letter-spacing: .2em !important; text-transform: uppercase !important;
}
/* body copy — legible, higher contrast, comfortable measure */
p, .header-text p, .donx-hero-typewriter, .service-box p, .feature-box p,
.donx-work-card p, .donx-counter-card p, .donx-story-excerpt, .donx-review-box p,
.about-section p, .learn-more h5, .contact-section p, .footer-section p {
color: #b9c6d8 !important;
line-height: 1.72 !important;
font-size: 15.5px !important;
font-weight: 400 !important;
}
.donx-review-box p, .donx-story-excerpt { font-size: 15px !important; }
.footer-section .links a, .footer-section .widget-link { color: #9fb0c6 !important; font-size: 14px !important; }
.footer-section h5 { color: #eaf6ff !important; font-family: 'Space Grotesk', sans-serif !important; }
/* ---- Ground: pure black with a faint blue depth vignette ------------- */
html, body {
background-color: #000000 !important;
}
body {
/* deep pure black — only a whisper of blue near the very top */
background-image:
radial-gradient(circle at 88% 10%, rgba(0, 200, 255, 0.10) 0%, transparent 38%) !important;
background-attachment: fixed !important;
}
::-webkit-scrollbar-track { background: #000000 !important; }
::-webkit-scrollbar-thumb {
background: linear-gradient(#00c8ff, #00f0ff) !important;
border-radius: 10px !important;
}
/* ---- Mouse glow: keep the rich radial the site had, recoloured blue --- */
#donx-global-glow {
background: radial-gradient(circle,
rgba(0, 229, 255, 0.28) 0%,
rgba(0, 200, 255, 0.16) 42%,
transparent 72%) !important;
mix-blend-mode: screen;
}
/* =========================================================================
HEADER — glass bar, cyan hairline, soft glow
========================================================================= */
.donx-public-nav,
.deep-blue-header,
.navbar.deep-blue-header {
background: rgba(6, 9, 16, 0.72) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(0, 229, 255, 0.14) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45) !important;
}
.donx-public-nav .donx-nav-shell {
position: relative !important;
background: linear-gradient(160deg, rgba(20, 28, 44, 0.7), rgba(10, 14, 22, 0.55)) !important;
border: 1px solid rgba(0, 229, 255, 0.18) !important;
border-radius: 20px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 24px rgba(0, 229, 255, 0.08) !important;
}
/* moving data-chain along the header border */
.donx-public-nav .donx-nav-shell::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: conic-gradient(from var(--donx-deg, 0deg),
rgba(0,240,255,0) 0deg, rgba(0,240,255,0) 200deg,
#00f0ff 250deg, #7dfcff 270deg, #00f0ff 290deg, rgba(0,240,255,0) 340deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: donxRingSpin 5s linear infinite;
pointer-events: none;
}
/* logo — premium: crisp cyan glow, lift on hover */
.donx-public-nav .donx-nav-logo img {
filter: drop-shadow(0 0 2px rgba(0,240,255,.7)) drop-shadow(0 0 12px rgba(0,240,255,.35)) !important;
transition: filter .3s ease, transform .3s ease !important;
}
.donx-public-nav .donx-nav-logo:hover img {
filter: drop-shadow(0 0 3px rgba(0,240,255,.9)) drop-shadow(0 0 20px rgba(0,240,255,.6)) !important;
transform: scale(1.04) !important;
}
.donx-public-nav .nav-link:hover,
.donx-public-nav .nav-link.active,
.donx-public-nav .navbar-nav .nav-link:hover,
.donx-public-nav .navbar-nav .nav-link.active {
color: #ffffff !important;
background: rgba(0, 229, 255, 0.14) !important;
border-radius: 12px !important;
box-shadow: 0 0 18px rgba(0, 229, 255, 0.25) !important;
text-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important;
}
/* nav links Home/About/Services/Contact — always-on scanning underline */
.donx-public-nav .navbar-nav .nav-link { position: relative !important; overflow: hidden; }
.donx-public-nav .navbar-nav .nav-link::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
background: linear-gradient(90deg, transparent 0%, #00f0ff 45%, #7dfcff 50%, #00f0ff 55%, transparent 100%);
background-size: 240% 100%; background-repeat: no-repeat;
opacity: .30; border-radius: 2px;
animation: donxNavScan 3.2s linear infinite;
}
.donx-public-nav .navbar-nav .nav-link:hover::after,
.donx-public-nav .navbar-nav .nav-link.active::after {
opacity: 1; box-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0,240,255,.5);
}
@keyframes donxNavScan { from { background-position: 240% 0; } to { background-position: -40% 0; } }
/* Shop / How To Use — always-on shine sweeping to the right */
.donx-public-nav .donx-how-btn, .donx-public-nav .donx-shop-btn {
background-image: linear-gradient(110deg, transparent 18%, rgba(0,240,255,.38) 44%, rgba(0,240,255,.06) 56%, transparent 82%) !important;
background-size: 260% 100% !important;
background-repeat: no-repeat !important;
animation: donxSweep 2.8s linear infinite !important;
}
@keyframes donxSweep { from { background-position: 230% 0; } to { background-position: -70% 0; } }
/* =========================================================================
SECTION GROUNDS — ONE CONTINUOUS PAGE.
Sections are transparent windows onto the shared body canvas (fixed
ambient blue glow). No black blocks, no hard borders → no "divided" feel.
Each section then has an AI figure woven faintly behind it, edges fully
masked so it melts into the same dark space.
========================================================================= */
.home-section.donx-premium-home,
.about-section, .service-section, .feature-section, .achievement-section,
.how-it-works, .learn-more, .testimonial-section, .faq-section,
.contact-section, .payment-gateway, .blog-section, #donx-stories,
.footer-section, .donx-premium-footer {
background: transparent !important;
background-color: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
position: relative;
overflow: hidden;
}
/* woven ambient AI figure — per section, alternating side + facing + framing */
.feature-section::before, .service-section::before, .how-it-works::before,
.learn-more::before, .achievement-section::before, .testimonial-section::before,
.payment-gateway::before, .faq-section::before, #donx-stories::before,
.contact-section::before, .footer-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
opacity: .30;
pointer-events: none;
}
/* Home section order: hero(faces LEFT) → achievement → feature → how_it_works
→ service → testimonial → payment → footer. Alternate facing top-to-bottom. */
/* faces RIGHT, anchored right edge (opposite of the hero) */
.achievement-section::before,
.how-it-works::before,
.testimonial-section::before,
.footer-section::before,
#donx-stories::before {
background-position: right center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 88%, transparent 100%);
}
/* faces LEFT (mirrored). scaleX(-1) mirrors the box, so "right center" here
lands the figure on the visual LEFT edge. */
.feature-section::before,
.service-section::before,
.payment-gateway::before,
.learn-more::before,
.contact-section::before {
background-position: right center;
transform: scaleX(-1);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 48%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 48%, transparent 100%);
}
/* FAQ: centred + large, very faint — atmosphere only */
.faq-section::before {
background-position: center center;
background-size: cover;
opacity: .07;
-webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent 75%);
mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent 75%);
}
.feature-section::before { background-image: url("../img/ai-city/donx-ai-4.webp"); }
.service-section::before { background-image: url("../img/ai-city/donx-ai-2.webp"); }
.how-it-works::before { background-image: url("../img/ai-city/donx-ai-6.webp"); }
.learn-more::before { background-image: url("../img/ai-city/donx-ai-3.webp"); }
.achievement-section::before { background-image: url("../img/ai-city/donx-ai-5.webp"); opacity: .24; }
.testimonial-section::before { background-image: url("../img/ai-city/donx-ai-7.webp"); }
.payment-gateway::before {
background-image: url("../img/ai-city/donx-payment-bg.webp") !important;
background-position: center center !important;
background-size: cover !important;
transform: none !important;
opacity: .28 !important;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent) !important;
mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent) !important;
}
.faq-section::before { background-image: url("../img/ai-city/donx-ai-6.webp"); }
#donx-stories::before { background-image: url("../img/ai-city/donx-ai-3.webp"); }
.contact-section::before { background-image: url("../img/ai-city/donx-ai-4.webp"); }
.footer-section::before { background-image: url("../img/ai-city/donx-ai-2.webp"); opacity: .16; }
/* reveal disabled — content always visible */
.donx-reveal-armed .donx-reveal-i{opacity:1!important;transform:none!important;}
/* keep all real section content above the woven layers */
.feature-section > *, .service-section > *, .how-it-works > *, .learn-more > *,
.achievement-section > *, .testimonial-section > *, .payment-gateway > *,
.faq-section > *, #donx-stories > *, .contact-section > *, .footer-section > * {
position: relative;
z-index: 1;
}
@media (max-width: 991.98px) {
.feature-section::before, .service-section::before, .how-it-works::before,
.learn-more::before, .achievement-section::before, .testimonial-section::before,
.payment-gateway::before, .faq-section::before, #donx-stories::before,
.contact-section::before, .footer-section::before { opacity: .06 !important; }
.feature-section::after, .service-section::after, .how-it-works::after,
.learn-more::after, .achievement-section::after, .testimonial-section::after,
.payment-gateway::after, #donx-stories::after, .contact-section::after {
animation: none; opacity: .3;
}
}
/* =========================================================================
CARDS / PANELS — glass, cyan edge, glow on hover (rounded, NOT chamfered)
========================================================================= */
.service-box, .feature-box, .work-box, .donx-work-card,
.review-box, .donx-review-box, .counter-box, .donx-counter-card,
.donx-about-card, .metric-card, .shop-card, .shop-top-card,
.shop-related-item, .shop-buy-card, .donx-story-card,
.services-topbar-card, .donx-contact-form, .contact-section .text-box,
.login-section .text-box {
background: rgba(9, 18, 38, 0.65) !important;
background-image: linear-gradient(160deg, rgba(12, 22, 44, 0.78), rgba(6, 10, 20, 0.6)) !important;
border: 1px solid rgba(0, 210, 255, 0.35) !important;
border-radius: 16px !important;
clip-path: none !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.37),
0 0 15px rgba(0, 200, 255, 0.22),
inset 0 0 15px rgba(0, 240, 255, 0.1) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out !important;
}
.service-box:hover, .feature-box:hover, .donx-work-card:hover,
.donx-review-box:hover, .donx-counter-card:hover, .donx-about-card:hover,
.shop-card:hover, .donx-story-card:hover, .metric-card:hover {
transform: translateY(-6px) !important;
border-color: #00f0ff !important;
box-shadow:
0 0 25px rgba(0, 240, 255, 0.45),
0 30px 70px rgba(0, 0, 0, 0.6),
inset 0 0 20px rgba(0, 240, 255, 0.2) !important;
}
/* Icon tiles inside cards -> glowing gradient chip */
.service-box .icon-box, .feature-box .icon-box, .donx-work-card .icon-box,
.donx-counter-card .icon-box, .donx-about-card .icon-box, .work-box .icon-box,
.feature-section .feature-box .icon-box, .service-section .service-box .icon-box,
.how-it-works .donx-work-card .icon-box, .achievement-section .donx-counter-card .icon-box,
.about-section .donx-about-card .icon-box, .how-it-works .work-box .icon-box,
.donx-how-v3 .work-box .icon-box, .donx-step-card .icon-box, .info-box .icon-box {
background: linear-gradient(135deg, #00c8ff, #00f0ff) !important;
background-image: linear-gradient(135deg, #00c8ff, #00f0ff) !important;
border: 1px solid rgba(0, 240, 255, 0.5) !important;
border-radius: 12px !important;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.35) !important;
color: #001018 !important;
}
.service-box .icon-box img, .feature-box .icon-box img,
.donx-counter-card .icon-box img, .donx-about-card .icon-box img {
filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.5)) !important;
}
.donx-work-card .icon-box i, .work-box .icon-box i { color: #ffffff !important; }
/* =========================================================================
BUTTONS — small/medium GLASS chips, electric-cyan glow. No big solid
pills, no full-circle radius. Same treatment for primary + secondary,
primary just glows harder.
========================================================================= */
.btn-smm, .donx-primary-cta, .donx-order-btn, .donx-header-cta,
.shop-page .btn-primary, .shop-show-page .btn-primary,
.service-page .btn-primary, .btn.btn-primary,
.service-section .service-box .read-more, .donx-stories-viewall-btn,
.donx-secondary-cta, .btn-outline-light, .btn.btn-outline-light,
.donx-shop-btn, .donx-how-btn, .donx-login-btn {
position: relative !important;
background: rgba(0, 240, 255, 0.06) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(0, 240, 255, 0.30) !important;
border-radius: 9px !important;
clip-path: none !important;
color: #d6ffff !important;
font-weight: 700 !important;
font-size: 13.5px !important;
padding: 9px 18px !important;
box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.08) !important;
text-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
transition: transform .18s ease, background .25s ease !important;
}
/* glowing border ring — STATIC and EVEN on every edge, identical on all CTAs
(a moving arc / uneven conic read as a broken or disabled button). */
@property --donx-deg { syntax: ''; initial-value: 0deg; inherits: false; }
.btn-smm::after, .donx-primary-cta::after, .donx-order-btn::after, .donx-header-cta::after,
.btn.btn-primary::after, .service-section .service-box .read-more::after,
.donx-stories-viewall-btn::after, .donx-secondary-cta::after, .btn-outline-light::after,
.donx-shop-btn::after, .donx-how-btn::after, .donx-login-btn::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
padding: 1.5px !important;
background: linear-gradient(135deg, #00f0ff, #00c8ff 55%, #00f0ff) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
animation: none !important;
opacity: .9 !important;
pointer-events: none !important;
}
@keyframes donxRingSpin { to { --donx-deg: 360deg; } }
.btn-smm:hover, .donx-primary-cta:hover, .donx-order-btn:hover, .donx-header-cta:hover,
.btn.btn-primary:hover, .service-section .service-box .read-more:hover,
.donx-stories-viewall-btn:hover, .donx-secondary-cta:hover, .btn-outline-light:hover,
.donx-shop-btn:hover, .donx-how-btn:hover, .donx-login-btn:hover {
transform: translateY(-2px) !important;
background: rgba(0, 240, 255, 0.14) !important;
color: #ffffff !important;
}
.donx-primary-cta, .donx-order-btn, .donx-header-cta, .btn.btn-primary {
background: rgba(0, 240, 255, 0.10) !important;
animation: donxCtaPulse 2.8s ease-in-out infinite !important;
}
/* soft expanding halo — the one living effect the primary CTAs keep (a
gentle breathing glow, not a spinner) */
@keyframes donxCtaPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,240,255,.30), inset 0 0 10px rgba(0,240,255,.08); }
50% { box-shadow: 0 0 0 4px rgba(0,240,255,.10), 0 0 22px rgba(0,240,255,.38), inset 0 0 14px rgba(0,240,255,.16); }
}
.donx-header-cta { padding: 8px 18px !important; }
.donx-public-nav .donx-how-btn, .donx-public-nav .donx-shop-btn { border-radius: 9px !important; }
/* Plain nav-style link — reference "Login" (no button chrome, glows on hover) */
.donx-nav-plain-link {
color: #cfe0ff !important;
font-weight: 700 !important;
background: none !important;
border: 0 !important;
padding: 8px 6px !important;
text-decoration: none !important;
transition: color .2s ease, text-shadow .2s ease;
}
.donx-nav-plain-link:hover {
color: #ffffff !important;
text-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
}
/* Mobile round icon buttons in the header */
.donx-public-nav .donx-navbar-toggler,
.donx-public-nav .donx-shop-btn.icon-width,
.donx-public-nav .btn-smm.icon-width,
.donx-mobile-order-shortcut .btn-smm {
background: linear-gradient(135deg, #00c8ff, #00e5ff) !important;
background-image: linear-gradient(135deg, #00c8ff, #00e5ff) !important;
border: 0 !important;
border-radius: 50% !important;
clip-path: none !important;
box-shadow: 0 8px 24px rgba(0, 229, 255, 0.4) !important;
}
/* =========================================================================
FORM CONTROLS — glass dark, cyan focus glow (no stark white)
========================================================================= */
.home-section .form-control, .home-section .form-select,
.about-section .form-control,
.service-page .form-control, .service-page .form-select,
.services-filter-grid .form-control, .services-filter-grid .form-select,
.shop-search .form-control, .shop-search .form-select,
.shop-page .form-control, .shop-page .form-select,
.donx-contact-form .form-control, .contact-section .form-control,
.footer-section .form-control, .donx-newsletter-box .form-control,
.donx-login-vault .form-control, .donx-auth-glass .form-control,
.country_code_vault_select {
background: rgba(13, 17, 23, 0.85) !important;
background-image: none !important;
border: 1px solid rgba(0, 229, 255, 0.22) !important;
border-radius: 10px !important;
color: #ffffff !important;
}
.service-page .form-control:focus, .service-page .form-select:focus,
.services-filter-grid .form-control:focus, .services-filter-grid .form-select:focus,
.shop-search .form-control:focus, .shop-search .form-select:focus,
.donx-contact-form .form-control:focus, .footer-section .form-control:focus,
.donx-login-vault .form-control:focus, .donx-auth-glass .form-control:focus {
border-color: #00e5ff !important;
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18), 0 0 24px rgba(0, 229, 255, 0.22) !important;
background: rgba(13, 17, 23, 0.95) !important;
}
.shop-search .form-control::placeholder,
.service-page .form-control::placeholder,
.donx-contact-form .form-control::placeholder { color: #94A3B8 !important; opacity: 1 !important; }
.form-select option { background: #0D1117 !important; color: #ffffff !important; }
/* =========================================================================
BADGES / PILLS / CHIPS
========================================================================= */
.services-topbar-badge, .services-active-chip, .shop-mini-badge,
.donx-hero-badge, .donx-how-chip, .donx-stories-kicker, .shop-top-kicker {
background: rgba(0, 229, 255, 0.12) !important;
background-image: none !important;
border: 1px solid rgba(0, 229, 255, 0.3) !important;
color: #eaf6ff !important;
box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.1) !important;
}
.shop-empty { background: rgba(13,17,23,0.85) !important; border: 1px solid rgba(0, 229, 255,0.2) !important; border-radius: 16px !important; }
.shop-stock-badge.in { background: rgba(0, 229, 255, 0.16) !important; color: #bfe6ff !important; }
/* Banner strip */
.banner-section, .page-banner, .inner-banner {
background: #000000 !important;
background-image: radial-gradient(90% 100% at 50% 0%, rgba(0, 200, 255,0.12), transparent 70%) !important;
border-color: rgba(0, 229, 255, 0.18) !important;
}
/* Accordions */
.accordion-item {
background: linear-gradient(160deg, rgba(20,28,44,0.9), rgba(10,14,22,0.7)) !important;
border: 1px solid rgba(0, 229, 255,0.2) !important;
border-radius: 14px !important;
}
.accordion-button:not(.collapsed) {
background: rgba(0, 229, 255, 0.14) !important;
color: #ffffff !important;
box-shadow: inset 0 0 24px rgba(0, 229, 255, 0.12) !important;
}
/* Decorative multi-colour icon chips -> blue gradient */
.donx-luxe-card i, a.donx-luxe-card i, .donx-ref-card i,
.donx-luxe-card.card-yt i, .donx-luxe-card.card-ig i, .donx-luxe-card.card-tt i,
.donx-luxe-card.card-music i, .donx-luxe-card.card-order i,
a.donx-luxe-card.card-yt i, a.donx-luxe-card.card-tt i, a.donx-luxe-card.card-ig i,
a.donx-luxe-card.card-music i, .ref-youtube i, .ref-tiktok i, .ref-instagram i, .ref-order i {
background: linear-gradient(135deg, #00c8ff, #00e5ff) !important;
background-image: linear-gradient(135deg, #00c8ff, #00e5ff) !important;
color: #ffffff !important;
box-shadow: 0 0 20px rgba(0, 229, 255, 0.3) !important;
}
/* Accent text that was purple */
.donx-gradient-word {
background: linear-gradient(135deg, #00f0ff 0%, #00c8ff 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5)) !important;
}
#donx-stories .donx-stories-kicker, #donx-stories .donx-story-meta,
#donx-stories .donx-story-open, #donx-stories .donx-story-category {
color: #00e5ff !important;
}
#donx-stories .donx-story-quote {
border-left-color: #00e5ff !important;
background: rgba(0, 229, 255, 0.08) !important;
}
/* =========================================================================
HARD FIX: AOS init is unreliable on this theme, so [data-aos] elements can
stay at opacity:0 forever. Force them visible. NOTE: transform is left
alone here on purpose — donx-fx.js pins each card to a neutral 3D transform
and animates it toward the cursor on hover, and a "transform: none
!important" here would kill that tilt.
========================================================================= */
[data-aos], .aos-init, .aos-animate {
opacity: 1 !important;
visibility: visible !important;
}
/* neutralise AOS's resting offset so nothing sits shifted if it never animates */
.feature-box, .service-box, .work-box, .donx-work-card, .review-box,
.donx-review-box, .counter-box, .donx-counter-card, .donx-about-card,
.metric-card, .shop-card, .donx-story-card, .services-topbar-card {
transform: none;
}
/* =========================================================================
3D TILT — cards lean toward the cursor (JS adds the inline transform +
a moving glare). Just the easing + polish live here.
========================================================================= */
.donx-tilt {
transform-style: preserve-3d;
transition: transform .18s cubic-bezier(.22,.61,.36,1),
box-shadow .25s ease, border-color .25s ease;
will-change: transform;
}
.donx-tilt.is-tilting { transition: box-shadow .25s ease, border-color .25s ease; }
.donx-tilt > * { transform: translateZ(0.01px); }
.donx-tilt .donx-tilt-glare {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%),
rgba(0,240,255,.18), rgba(0,240,255,0) 60%);
opacity: 0; transition: opacity .25s ease; z-index: 2;
}
.donx-tilt.is-tilting .donx-tilt-glare { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
.donx-tilt { transform: none !important; transition: none; }
.donx-tilt .donx-tilt-glare { display: none; }
}
/* =========================================================================
GLASS BOOST + FOOTER BALANCE (2026 polish)
========================================================================= */
/* stronger frosted glass so the blur actually reads */
.service-box, .feature-box, .work-box, .donx-work-card,
.review-box, .donx-review-box, .counter-box, .donx-counter-card,
.donx-about-card, .metric-card, .shop-card, .shop-top-card,
.donx-story-card, .services-topbar-card, .donx-contact-form {
background: linear-gradient(160deg, rgba(22,32,50,.62), rgba(10,16,26,.5)) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
backdrop-filter: blur(18px) saturate(1.2) !important;
border: 1px solid rgba(0,240,255,.28) !important;
}
/* footer — balanced spacing, tighter rhythm */
.footer-section .overlay, .donx-premium-footer .overlay { padding-top: 70px !important; padding-bottom: 34px !important; }
.footer-section .box h5, .donx-premium-footer .box h5 { margin-bottom: 16px !important; font-size: 15px !important; }
.footer-section .box .links li, .donx-premium-footer .box .links li { margin-bottom: 9px !important; }
.footer-section .copyright, .donx-premium-footer .copyright {
margin-top: 34px !important; padding-top: 22px !important;
border-top: 1px solid rgba(0,240,255,.14) !important;
}
.footer-section .donx-footer-brand p { margin-top: 14px !important; }
.footer-section .social-links a, .donx-premium-footer .social-links a {
width: 38px !important; height: 38px !important; display: inline-grid !important; place-items: center !important;
border: 1px solid rgba(0,240,255,.28) !important; border-radius: 10px !important;
background: rgba(0,240,255,.06) !important; transition: all .2s ease !important;
}
.footer-section .social-links a:hover { background: rgba(0,240,255,.16) !important; box-shadow: 0 0 18px rgba(0,240,255,.35) !important; }
/* =========================================================================
2026 polish PASS 3
- payment / what-we-do real background images
- GLASS RING framing on section wrappers + footer
- animated scan underline reused on footer copyright + section kickers
- water-drop ripple + smooth press on buttons
========================================================================= */
/* ---- PAYMENT PARTNERS: real uploaded background -------------------------
base theme pins .payment-gateway::before to a 1px separator line; undo the
size pin so the image actually has a box to paint into. */
.payment-gateway::before {
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: auto !important;
height: auto !important;
background-image: url("../img/ai-city/donx-payment-bg.webp") !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
transform: none !important;
opacity: .55 !important;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
}
/* ---- "WHAT WE DO" (feature-section): real uploaded background ---------- */
.feature-section::before {
background-image: url("../img/ai-city/donx-whatwedo-bg.webp") !important;
background-position: center center !important;
background-size: cover !important;
transform: none !important;
opacity: .5 !important;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
}
/* =========================================================================
GLASS RING — a framed glass panel around each major section's content.
Light on fill, strong on the ring; cheap blur so scroll stays fast.
========================================================================= */
.feature-section > .container,
.service-section > .container,
.testimonial-section > .container,
.payment-gateway > .container,
.how-it-works > .container,
.contact-section > .container {
position: relative;
z-index: 1;
padding: 46px clamp(18px, 4vw, 54px) !important;
border-radius: 26px;
background: linear-gradient(160deg, rgba(14,22,38,.42), rgba(7,11,20,.30));
border: 1px solid rgba(0,240,255,.22);
box-shadow:
0 0 0 1px rgba(0,240,255,.06) inset,
0 0 34px rgba(0,240,255,.10),
0 30px 80px rgba(0,0,0,.42);
}
/* travelling sheen on the ring edge */
.feature-section > .container::after,
.service-section > .container::after,
.payment-gateway > .container::after,
.testimonial-section > .container::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--donx-deg, 0deg),
rgba(0,240,255,0) 0deg, rgba(0,240,255,.55) 48deg, rgba(0,240,255,0) 120deg,
rgba(0,240,255,0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: donxRingSpin 9s linear infinite;
pointer-events: none;
opacity: .7;
}
@media (max-width: 991.98px) {
.feature-section > .container, .service-section > .container,
.testimonial-section > .container, .payment-gateway > .container,
.how-it-works > .container, .contact-section > .container {
padding: 30px 16px !important;
border-radius: 18px;
}
}
/* ---- FOOTER: same glass-ring language ------------------------------------ */
.footer-section .overlay, .donx-premium-footer .overlay {
position: relative;
border-radius: 26px 26px 0 0;
background: linear-gradient(180deg, rgba(12,20,34,.46), rgba(6,10,18,.30)) !important;
border: 1px solid rgba(0,240,255,.18);
border-bottom: 0;
box-shadow: 0 -18px 60px rgba(0,0,0,.4), 0 0 30px rgba(0,240,255,.08) inset;
}
/* =========================================================================
ANIMATED SCAN UNDERLINE — reuse on footer copyright + section kickers
========================================================================= */
@keyframes donxScanLine {
0% { background-position: -140% 0; }
100% { background-position: 240% 0; }
}
.donx-section-heading h5, .header-text h5,
.footer-section .copyright > div:first-child span,
.donx-premium-footer .copyright > div:first-child span {
position: relative;
display: inline-block;
}
.donx-section-heading h5::after, .header-text h5::after,
.footer-section .copyright > div:first-child span::after,
.donx-premium-footer .copyright > div:first-child span::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -8px;
width: clamp(120px, 40%, 260px);
height: 2px;
border-radius: 2px;
background:
linear-gradient(90deg, transparent, rgba(0,240,255,.9), transparent) no-repeat,
rgba(0,240,255,.12);
background-size: 45% 100%, 100% 100%;
animation: donxScanLine 3.4s linear infinite;
}
.footer-section .copyright > div:first-child span::after,
.donx-premium-footer .copyright > div:first-child span::after { bottom: -9px; width: 100%; left: 0; transform: none; }
/* =========================================================================
BUTTONS — crisp springy tap: quick press-in, glow flash, spring back
========================================================================= */
.btn-smm, .btn, .btn.btn-primary, .donx-primary-cta, .donx-secondary-cta,
.donx-order-btn, .donx-header-cta, .donx-shop-btn, .donx-how-btn,
.donx-stories-viewall-btn, .btn-outline-light {
overflow: hidden !important;
-webkit-tap-highlight-color: transparent;
/* release = springy settle (slight overshoot) */
transition: transform .34s cubic-bezier(.34, 1.4, .5, 1),
background .25s ease, box-shadow .3s ease, filter .25s ease !important;
}
.btn-smm:active, .btn:active, .btn.btn-primary:active, .donx-primary-cta:active,
.donx-secondary-cta:active, .donx-order-btn:active, .donx-header-cta:active,
.donx-shop-btn:active, .donx-how-btn:active, .donx-stories-viewall-btn:active,
.btn-outline-light:active {
/* press-in = fast + firm */
transform: scale(.93) !important;
transition: transform .07s ease-out, box-shadow .07s ease-out, filter .07s ease-out !important;
filter: brightness(1.18) !important;
box-shadow: 0 0 26px rgba(0,240,255,.55),
inset 0 0 20px rgba(0,240,255,.3) !important;
}
@media (prefers-reduced-motion: reduce) {
.btn-smm:active, .btn:active, .donx-primary-cta:active, .donx-secondary-cta:active { transform: none !important; }
.donx-section-heading h5::after, .header-text h5::after,
.footer-section .copyright > div:first-child span::after, .feature-section > .container::after,
.service-section > .container::after, .payment-gateway > .container::after,
.testimonial-section > .container::after { animation: none; }
}
/* =========================================================================
PAGE VOLT — the system wire, continued from the hero down the whole page,
crossing every section separator, chip to chip. Fixed to the left gutter
so it reads as one continuous line while you scroll. Zero layout impact.
========================================================================= */
.donx-page-volt {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 70px;
z-index: 0;
pointer-events: none;
opacity: .8;
}
.donx-page-volt svg { width: 100%; height: 100%; display: block; overflow: visible; }
.donx-page-volt .pv-wire { fill: none; stroke: rgba(0,240,255,.16); stroke-width: 1.6; }
.donx-page-volt .pv-flow {
fill: none;
stroke: #00f0ff;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 34 260;
filter: drop-shadow(0 0 6px rgba(0,240,255,.9));
animation: donxPageFlow 5.5s linear infinite;
}
@keyframes donxPageFlow { to { stroke-dashoffset: -1176; } }
.donx-page-volt .pv-node rect {
fill: #06131c;
stroke: #00f0ff;
stroke-width: 1.4;
filter: drop-shadow(0 0 7px rgba(0,240,255,.55));
}
.donx-page-volt .pv-node .pv-scr { fill: rgba(0,240,255,.20); stroke-width: 0; filter: none; }
.donx-page-volt .pv-node line { stroke: #00f0ff; stroke-width: 1.6; }
.donx-page-volt .pv-node { animation: donxPcBlink 3.6s steps(1) infinite; }
.donx-page-volt .pv-node:nth-of-type(3) { animation-delay: -.9s; }
.donx-page-volt .pv-node:nth-of-type(4) { animation-delay: -1.8s; }
.donx-page-volt .pv-node:nth-of-type(5) { animation-delay: -2.7s; }
@keyframes donxPcBlink { 0%,92%{opacity:1} 94%{opacity:.35} 96%{opacity:1} 98%{opacity:.5} }
@media (max-width: 1200px) { .donx-page-volt { opacity: .5; width: 54px; } }
@media (max-width: 991.98px) { .donx-page-volt { display: none; } }
@media (prefers-reduced-motion: reduce) {
.donx-page-volt .pv-flow, .donx-page-volt .pv-node { animation: none; }
}
/* =========================================================================
2026 polish PASS 4 — applies on ALL pages
- premium search bars + magnifier icon
- Client Stories section framed as a glass-ring panel on /about + /blogs
- kill the CMS purple that leaks onto tables / active states
========================================================================= */
/* ---- CMS purple lock: --violet is re-pinned to cyan in the layout, but be
explicit for the couple of places that hard-referenced the old value ---- */
.service-page .table thead,
.service-page .table thead tr {
background: linear-gradient(90deg, rgba(0,229,255,.14), rgba(0,120,200,.10)) !important;
color: #eafcff !important;
}
.service-page .table thead th {
background: transparent !important;
color: #bff3ff !important;
border-color: rgba(0,229,255,.20) !important;
letter-spacing: .04em;
}
.deep-blue-header .nav-link.active,
.nav-link.active, .page-item.active .page-link,
.pagination .active > .page-link {
background-color: rgba(0,229,255,.16) !important;
border-color: rgba(0,229,255,.4) !important;
color: #ffffff !important;
}
/* ---- SEARCH BARS — glass, cyan focus ring, magnifier icon -------------- */
.services-filter-grid .form-control,
.services-filter-grid .form-select,
.shop-search .form-control,
.shop-search .form-select,
.donx-search .form-control,
input.form-control[placeholder*="Search" i],
input.form-control[placeholder*="search" i] {
background: rgba(10, 16, 26, 0.72) !important;
background-color: rgba(10, 16, 26, 0.72) !important;
border: 1px solid rgba(0, 240, 255, 0.26) !important;
color: #eaf6ff !important;
border-radius: 12px !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.06) !important;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.services-filter-grid .form-control::placeholder,
.shop-search .form-control::placeholder,
input.form-control[placeholder*="Search" i]::placeholder {
color: #8fa6bd !important; opacity: 1 !important;
}
.services-filter-grid .form-control:focus,
.services-filter-grid .form-select:focus,
.shop-search .form-control:focus,
.shop-search .form-select:focus,
input.form-control[placeholder*="Search" i]:focus {
border-color: #00f0ff !important;
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.16),
0 0 22px rgba(0, 240, 255, 0.28) !important;
background: rgba(12, 19, 30, 0.9) !important;
}
/* dark dropdown lists so options are readable */
.services-filter-grid .form-select option,
.shop-search .form-select option {
background: #0b1018 !important; color: #eaf6ff !important;
}
/* magnifier glyph on the free-text search field */
.services-filter-grid .input-box .form-control,
.shop-search input.form-control[type="text"],
input.form-control[placeholder*="Search" i] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
padding-left: 42px !important;
}
.shop-search .btn-primary,
.services-filter-grid .btn {
border-radius: 12px !important;
}
/* ---- CLIENT STORIES — framed glass-ring panel (about + blogs) ---------- */
#donx-stories > .container {
position: relative;
padding: 44px clamp(18px, 4vw, 52px) !important;
border-radius: 26px;
background: linear-gradient(160deg, rgba(14,22,38,.42), rgba(7,11,20,.30));
border: 1px solid rgba(0,240,255,.22);
box-shadow: 0 0 0 1px rgba(0,240,255,.06) inset,
0 0 34px rgba(0,240,255,.10),
0 30px 80px rgba(0,0,0,.42);
}
#donx-stories > .container::after {
content: "";
position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: conic-gradient(from var(--donx-deg, 0deg),
rgba(0,240,255,0) 0deg, rgba(0,240,255,.55) 48deg, rgba(0,240,255,0) 120deg,
rgba(0,240,255,0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: donxRingSpin 9s linear infinite;
pointer-events: none; opacity: .7;
}
@media (max-width: 991.98px) {
#donx-stories > .container {
padding: 26px 15px !important; border-radius: 18px;
}
}
/* ---- inner-page containers: gentle ring so every page matches home ----- */
.about-section > .container,
.blog-section:not(#donx-stories) > .container,
.faq-section > .container {
position: relative;
border-radius: 22px;
border: 1px solid rgba(0,240,255,.16);
background: linear-gradient(160deg, rgba(12,20,34,.32), rgba(7,11,20,.22));
padding: 38px clamp(16px, 3.5vw, 44px) !important;
box-shadow: 0 22px 60px rgba(0,0,0,.36);
}
/* =========================================================================
2026 polish PASS 5
- auth pages (login / register) brought into the cyan-glass system
- drop the scattered "AI symbol" glyphs / ambient robot bg on utility pages
- services top bar: premium chips + readable dropdowns
- contact "Get in touch" form: real glass fields
========================================================================= */
/* ---- kill the floating social/AI glyphs + ambient robot on utility pages */
.vault-holo-icon { display: none !important; }
.service-page .donx-page-ai-bg,
.contact-section .donx-page-ai-bg,
.donx-login-vault .donx-page-ai-bg,
.donx-auth-page .donx-page-ai-bg { display: none !important; }
/* ---- AUTH GLASS — neon cyan, matches the rest of the site --------------- */
.donx-login-vault .donx-auth-glass {
background: linear-gradient(160deg, rgba(12,20,34,.72), rgba(6,10,18,.82)) !important;
border: 1px solid rgba(0,240,255,.30) !important;
border-top: 1px solid rgba(0,240,255,.5) !important;
box-shadow: 0 30px 80px rgba(0,0,0,.72),
inset 0 1px 0 rgba(255,255,255,.10),
0 0 44px rgba(0,240,255,.14) !important;
}
body .donx-login-vault .donx-auth-glass .form-control,
body .donx-login-vault .form-control {
background: rgba(10,16,26,.6) !important;
border: 1px solid rgba(0,240,255,.20) !important;
border-bottom: 2px solid rgba(0,240,255,.32) !important;
border-radius: 10px !important;
color: #eaf6ff !important;
}
body .donx-login-vault .form-control:focus {
background: rgba(12,19,30,.9) !important;
border-color: #00f0ff !important;
border-bottom-color: #00f0ff !important;
box-shadow: 0 0 0 3px rgba(0,240,255,.16), 0 0 22px rgba(0,240,255,.28) !important;
}
body .donx-login-vault .form-control::placeholder { color: #8fa6bd !important; opacity: 1 !important; }
.donx-login-vault button[type="submit"] {
background: linear-gradient(135deg, #00c8ff, #00f0ff) !important;
color: #041016 !important;
box-shadow: 0 10px 30px rgba(0,240,255,.28), 0 0 22px rgba(0,240,255,.3) !important;
}
.donx-login-vault .glass-icon-btn {
background: rgba(0,240,255,.05) !important;
border: 1px solid rgba(0,240,255,.22) !important;
color: #d6ffff !important;
}
.donx-login-vault .glass-icon-btn:hover {
background: rgba(0,240,255,.14) !important;
box-shadow: 0 0 18px rgba(0,240,255,.35) !important;
}
/* the mouse-follow tilt on .donx-auth-glass is JS inline transform — our
.donx-tilt system leaves it alone; nothing to do here. */
/* ---- SERVICES top bar: premium chips (beats premium.css 0,2,0 !important) */
.service-page .services-topbar-head .services-topbar-badge,
.service-page .services-topbar-badge {
display: inline-flex !important; align-items: center; gap: 8px;
padding: 8px 14px !important;
border-radius: 10px !important;
background: rgba(0,240,255,.06) !important;
border: 1px solid rgba(0,240,255,.28) !important;
color: #d6ffff !important;
box-shadow: inset 0 0 14px rgba(0,240,255,.08), 0 0 16px rgba(0,240,255,.12) !important;
letter-spacing: .12em !important; text-transform: uppercase !important;
font-size: 10.5px !important; font-weight: 700 !important;
}
.service-page .services-topbar-badge i { color: #00f0ff !important; }
.service-page .services-topbar-head h5 {
display: inline-flex; align-items: center; gap: 9px;
color: #eafcff !important;
}
.services-topbar-head h5::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: #00f0ff; box-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0,240,255,.6);
animation: donxCtaPulse 2.4s ease-in-out infinite;
}
/* ---- SERVICES dropdowns: dark, readable option lists (beats page rule) - */
.service-page .services-filter-grid .form-select,
.service-page .services-filter-grid select.form-select {
color: #eaf6ff !important;
background-color: rgba(10,16,26,.72) !important;
}
.service-page .services-filter-grid .form-select option,
.service-page .services-filter-grid .form-select optgroup,
.service-page .services-filter-grid select.form-select option {
background: #0b1018 !important;
background-color: #0b1018 !important;
color: #eaf6ff !important;
}
/* ---- CONTACT "Get in touch" — glass fields, room to breathe ----------- */
.donx-contact-form { width: 100% !important; }
.donx-contact-form h4 {
color: #eafcff !important; letter-spacing: .12em; text-transform: uppercase;
font-size: 13px !important; margin-bottom: 18px !important;
}
.donx-contact-form .form-control,
.donx-contact-form textarea.form-control {
background: rgba(10,16,26,.6) !important;
border: 1px solid rgba(0,240,255,.22) !important;
border-radius: 12px !important;
color: #eaf6ff !important;
min-height: 50px;
padding: 12px 14px !important;
}
.donx-contact-form textarea.form-control { min-height: 140px; }
.donx-contact-form .form-control::placeholder { color: #8fa6bd !important; opacity: 1 !important; }
.donx-contact-form .form-control:focus {
background: rgba(12,19,30,.9) !important;
border-color: #00f0ff !important;
box-shadow: 0 0 0 3px rgba(0,240,255,.16), 0 0 22px rgba(0,240,255,.28) !important;
}
.contact-section .info-box {
background: linear-gradient(160deg, rgba(14,22,38,.55), rgba(8,12,20,.4)) !important;
border: 1px solid rgba(0,240,255,.20) !important;
border-radius: 14px !important;
}
/* ---- modal safety: never let a section wrapper trap a fixed modal ----- */
.modal, .modal-backdrop { position: fixed !important; }
/* =========================================================================
2026 polish PASS 6 — LOGIN / REGISTER
- full-bleed AI-city background (wired per page in the blade)
- rotating cyan glow halo behind the auth card (Pinterest ref)
========================================================================= */
/* DARK glass card — near-opaque so the rotating halo behind it reads only on
the RIM (Pinterest ref). donx-fx.js wraps the card in .donx-auth-halo. */
body .donx-login-vault .donx-auth-glass {
position: relative;
z-index: 1;
background: linear-gradient(160deg, rgba(9,14,26,.94), rgba(5,9,16,.97)) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
backdrop-filter: blur(10px) saturate(1.1) !important;
border: 1px solid rgba(0,240,255,.34) !important;
border-top: 1px solid rgba(0,240,255,.55) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.72),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* the halo wrapper — rotating cyan glow strictly BEHIND the opaque card */
.donx-auth-halo { position: relative; display: block; width: 100%; }
.donx-auth-halo::before,
.donx-auth-halo::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 34px;
z-index: 0;
background: conic-gradient(from var(--donx-deg, 0deg),
#00f0ff, #0aa2ff, #00e5ff, #8bfcff, #00c8ff, #00f0ff);
filter: blur(18px);
animation: donxRingSpin 6s linear infinite;
pointer-events: none;
}
.donx-auth-halo::after {
inset: -20px;
filter: blur(46px);
opacity: .5;
animation-duration: 13s;
animation-direction: reverse;
}
.donx-auth-halo > .donx-auth-glass { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.donx-auth-halo::before, .donx-auth-halo::after { animation: none; }
}
/* the ambient blurred orbs behind everything — ease them back now there's
a real photo + halo doing the work */
.donx-login-vault::before,
.donx-login-vault::after { opacity: .3 !important; }
@media (max-width: 767px) {
.donx-auth-halo::before { inset: -2px; filter: blur(12px); }
.donx-auth-halo::after { inset: -12px; filter: blur(30px); }
}
/* =========================================================================
2026 polish PASS 7
- hero right column: "What We Do" premium glass cards
- restore + restyle the ephemeral AI-host mascot (greets on load / CTA hover)
- global modal = cyan-dark glass (story modals stay in place now)
========================================================================= */
/* ---- HERO RIGHT STAGE — live glass clock + client-message stack ------- */
.donx-hero-stage {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 380px;
margin-left: auto;
padding: 4px 0;
}
.donx-premium-home .donx-globe { opacity: .16 !important; z-index: 0 !important; }
/* the clock — transparent frosted glass (hero shows through) */
.donx-clock { width: 218px; height: 218px; position: relative; flex: none; }
.donx-clock-face {
position: absolute; inset: 0;
border-radius: 50%;
overflow: hidden; /* keep the hands inside the dial — no stray line */
background:
radial-gradient(130% 130% at 30% 22%, rgba(255,255,255,.16), rgba(255,255,255,.03) 46%, rgba(0,240,255,.02) 100%);
border: 1px solid rgba(255,255,255,.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 0 44px rgba(0,240,255,.08),
0 30px 70px rgba(0,0,0,.38),
0 0 52px rgba(0,240,255,.14);
-webkit-backdrop-filter: blur(7px) saturate(1.35);
backdrop-filter: blur(7px) saturate(1.35);
animation: donxClockBreathe 7s ease-in-out infinite;
}
@keyframes donxClockBreathe {
0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 44px rgba(0,240,255,.08), 0 30px 70px rgba(0,0,0,.38), 0 0 46px rgba(0,240,255,.12); }
50% { transform: scale(1.012); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 50px rgba(0,240,255,.12), 0 34px 78px rgba(0,0,0,.42), 0 0 64px rgba(0,240,255,.2); }
}
.donx-clock-tick {
position: absolute; left: 50%; top: 50%;
width: 2px; height: 9px; margin: -104px 0 0 -1px;
background: rgba(0,240,255,.5);
transform-origin: 1px 104px;
transform: rotate(calc(var(--t) * 30deg));
border-radius: 2px;
}
.donx-clock-tick:nth-child(3n+1) { height: 13px; background: #00f0ff; box-shadow: 0 0 8px rgba(0,240,255,.7); margin-top: -106px; }
/* social tiles placed around the dial (JS builds + shuffles these) */
.donx-clock-slots { position: absolute; inset: 0; }
.donx-clk-tile {
position: absolute; left: 50%; top: 50%;
width: 34px; height: 34px; margin: -17px 0 0 -17px;
display: grid; place-items: center;
border-radius: 10px;
background: linear-gradient(155deg, rgba(20,30,48,.95), rgba(8,13,22,.92));
border: 1px solid rgba(0,240,255,.28);
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 8px 18px rgba(0,0,0,.5),
0 0 16px rgba(0,240,255,.22);
font-size: 15px;
transform:
rotate(var(--ang)) translateY(-78px) rotate(calc(var(--ang) * -1))
translateY(var(--fy, 0)) translateZ(0);
animation: donxTileFloat 4.5s ease-in-out infinite;
animation-delay: calc(var(--d, 0) * -1s);
}
@keyframes donxTileFloat {
0%, 100% { --fy: 0px; filter: brightness(1); }
50% { --fy: -9px; filter: brightness(1.15); }
}
.donx-clk-tile.p-youtube { color: #ff3d3d; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(255,61,61,.35); }
.donx-clk-tile.p-instagram { color: #ff7ab0; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(255,122,176,.3); }
.donx-clk-tile.p-tiktok { color: #7dfcff; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(0,240,255,.4); }
.donx-clk-tile.p-facebook { color: #4aa3ff; box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 16px rgba(74,163,255,.35); }
.donx-clk-tile.p-twitter { color: #7dd3ff; }
.donx-clk-tile.p-music { color: #00f0ff; }
/* hands (JS rotates them to the real time every second) */
.donx-clock-hand {
position: absolute; left: 50%; bottom: 50%;
transform-origin: 50% 100%;
border-radius: 4px;
transform: translateX(-50%) rotate(0deg);
}
.donx-h-hour { width: 4px; height: 52px; background: #dff9ff; box-shadow: 0 0 10px rgba(0,240,255,.5); }
.donx-h-min { width: 3px; height: 74px; background: #9fefff; box-shadow: 0 0 10px rgba(0,240,255,.5); }
.donx-h-sec { width: 2px; height: 86px; background: #00f0ff; box-shadow: 0 0 12px rgba(0,240,255,.9); }
.donx-clock-hub {
position: absolute; left: 50%; top: 50%;
width: 66px; height: 66px; margin: -33px 0 0 -33px;
display: grid; place-items: center;
border-radius: 50%;
background: radial-gradient(circle at 42% 34%, rgba(0,240,255,.28), rgba(4,8,14,.92) 72%);
border: 1.5px solid rgba(0,240,255,.7);
box-shadow: 0 0 26px rgba(0,240,255,.6), inset 0 0 14px rgba(0,240,255,.3);
z-index: 6;
}
.donx-clock-hub img {
width: 54px; height: 54px; object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0,240,255,.65)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
animation: donxTileFloat 4s ease-in-out infinite;
}
.donx-clock-cap {
display: inline-flex; align-items: center; gap: 7px;
margin: 0;
color: #bdd3e6;
font: 500 12px/1 'Inter', sans-serif;
letter-spacing: .02em;
}
.donx-clock-cap i { color: #00f0ff; }
/* incoming-message stack (What our clients say) */
.donx-msg-stack {
width: 100%;
display: flex; flex-direction: column; gap: 9px;
perspective: 800px;
}
.donx-msg {
display: flex; align-items: flex-start; gap: 11px;
padding: 12px 14px;
border-radius: 16px;
background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
border: 1px solid rgba(255,255,255,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 18px 38px rgba(0,0,0,.32),
0 0 22px rgba(0,240,255,.08);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
backdrop-filter: blur(18px) saturate(1.5);
opacity: 0;
transform: translateX(30px) translateY(8px) scale(.96);
animation: donxMsgSlide .62s cubic-bezier(.22,.72,.24,1) forwards;
animation-delay: calc(.9s + var(--i) * .6s);
}
@keyframes donxMsgSlide {
from { opacity: 0; transform: translateX(30px) translateY(8px) scale(.96); }
60% { opacity: 1; }
to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
.donx-msg-ico {
flex: none; width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 9px;
background: linear-gradient(135deg, #00c8ff, #00f0ff);
color: #041016; font-size: 13px;
box-shadow: 0 0 14px rgba(0,240,255,.4);
}
.donx-msg-body { min-width: 0; }
.donx-msg-top {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.donx-msg-top strong {
color: #eafcff;
font: 700 12px/1.2 'Space Grotesk', 'Sora', sans-serif;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.donx-msg-top span {
flex: none;
color: #6fe0ff; font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
}
.donx-msg-body p {
margin: 3px 0 0;
color: #d3dfec;
font-size: 11.5px; line-height: 1.4;
}
@media (max-width: 1199.98px) {
.donx-hero-stage { max-width: 320px; }
.donx-clock { width: 190px; height: 190px; }
.donx-clk-tile { transform: rotate(var(--ang)) translateY(-66px) rotate(calc(var(--ang) * -1)) translateY(var(--fy, 0)); width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 13px; }
.donx-clock-tick { margin-top: -90px; transform-origin: 1px 90px; }
.donx-clock-tick:nth-child(3n+1) { margin-top: -92px; }
.donx-h-hour { height: 44px; } .donx-h-min { height: 64px; } .donx-h-sec { height: 74px; }
.donx-msg-body p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.donx-clk-tile, .donx-clock-hub img, .donx-msg { animation: none !important; }
}
/* ---- AI-HOST MASCOT — ephemeral greeter, restyled + repositioned ----- */
/* override the stale premium.css positioning (it pinned this to top-centre).
Fixed to the lower-left of the viewport so it's always fully visible when
it appears, and never fights the hero copy / CTAs / social rail. */
body .donx-premium-home .donx-ai-host,
body .donx-ai-host {
display: flex !important;
position: fixed !important;
left: 16px !important;
right: auto !important;
top: auto !important;
bottom: 16px !important;
transform: translateY(14px) scale(.96) !important;
flex-direction: column-reverse !important;
align-items: flex-start !important;
gap: 8px !important;
z-index: 60 !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
body .donx-ai-host.is-active {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s !important;
}
body .donx-ai-host-avatar {
flex: none !important;
width: 58px !important; height: 58px !important;
border-radius: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
box-shadow: none !important;
}
body .donx-ai-host-avatar img {
width: 100% !important; height: 100% !important;
object-fit: contain !important;
filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(0,240,255,.45));
animation: donxMascotFloat 4.5s ease-in-out infinite;
}
@keyframes donxMascotFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
body .donx-ai-host-bubble {
max-width: 232px !important;
margin-bottom: 0 !important;
margin-left: 6px !important;
padding: 11px 15px !important;
border-radius: 4px 16px 16px 16px !important;
background: linear-gradient(160deg, rgba(10,16,28,.94), rgba(6,10,18,.96)) !important;
-webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
border: 1px solid rgba(0,240,255,.34) !important;
color: #eafcff !important;
font: 500 12.5px/1.55 'Inter', sans-serif !important;
box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 24px rgba(0,240,255,.18) !important;
}
@media (max-width: 991.98px) {
body .donx-premium-home .donx-ai-host, body .donx-ai-host { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
body .donx-ai-host-avatar img { animation: none; }
}
/* ---- MODALS — cyan-dark glass everywhere (safety net + upgrade) ------ */
.modal .modal-content {
background: linear-gradient(160deg, rgba(12,19,30,.98), rgba(6,10,18,.99)) !important;
border: 1px solid rgba(0,240,255,.28) !important;
border-radius: 18px !important;
color: #eaf3ff !important;
box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 40px rgba(0,240,255,.1) !important;
}
.modal .modal-header, .modal .modal-footer { border-color: rgba(0,240,255,.16) !important; }
.modal .modal-title { color: #ffffff !important; }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6) !important; }
/* the Client-Stories modal stays inside #donx-stories now — make sure no
wrapper can turn it into a clipped, abs-positioned box, AND no wrapper
establishes a stacking context that would trap the modal below the
body-level .modal-backdrop (which was dimming + blocking the popup). */
#donx-stories, #donx-stories > .container {
transform: none !important;
filter: none !important;
perspective: none !important;
}
#donx-stories > .container { z-index: auto !important; }
#donx-stories .modal { z-index: 1060 !important; }
/* =========================================================================
PASS 8 — MOBILE PERFORMANCE + POLISH (<= 991px)
Phones were janking on: backdrop-filter on dozens of elements,
background-attachment:fixed, ~10MB of woven section PNGs, the 6MB hero
video, a globe video, and a dozen infinite conic/keyframe animations.
Below 992px we drop all of it and fall back to solid dark panels +
static cyan edges/glows — same language, no repaint storm.
========================================================================= */
@media (max-width: 991.98px) {
/* 1 — no fixed background attachment (worst mobile scroll offender) */
html, body { background-attachment: scroll !important; }
body { background-image: none !important; background: #000 !important; }
#donx-global-glow { display: none !important; }
/* 2 — kill EVERY backdrop-filter; swap glass transparency for solid dark */
*, *::before, *::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.donx-public-nav, .deep-blue-header, .navbar.deep-blue-header { background: #05080f !important; }
.donx-public-nav .donx-nav-shell {
background: #0b1220 !important; border-color: rgba(0,240,255,.22) !important;
}
.service-box, .feature-box, .work-box, .donx-work-card, .review-box,
.donx-review-box, .counter-box, .donx-counter-card, .donx-about-card,
.metric-card, .shop-card, .shop-top-card, .donx-story-card,
.services-topbar-card, .donx-contact-form, .contact-section .text-box,
.login-section .text-box, .accordion-item, .donx-hd-card, .shop-empty {
background: #0c1524 !important;
background-image: none !important;
}
.feature-section > .container, .service-section > .container,
.testimonial-section > .container, .payment-gateway > .container,
.how-it-works > .container, .contact-section > .container,
#donx-stories > .container, .about-section > .container,
.blog-section:not(#donx-stories) > .container, .faq-section > .container,
.footer-section .overlay, .donx-premium-footer .overlay {
background: #080d16 !important;
background-image: none !important;
}
.services-filter-grid .form-control, .services-filter-grid .form-select,
.shop-search .form-control, .shop-search .form-select,
input.form-control[placeholder*="Search" i],
.donx-contact-form .form-control, .donx-contact-form textarea.form-control,
.donx-login-vault .form-control, body .donx-login-vault .form-control {
background: #0b1018 !important;
}
body .donx-login-vault .donx-auth-glass { background: #0a0f1a !important; }
.modal .modal-content { background: #0b1220 !important; background-image: none !important; }
.donx-ai-host-bubble, body .donx-ai-host-bubble { background: #0b1220 !important; }
/* 3 — stop every decorative infinite animation (no per-frame repaint) */
.donx-nav-shell::after, .donx-page-volt, .donx-page-volt *,
[class*="cta"]::after, [class*="btn"]::after,
.feature-section > .container::after, .service-section > .container::after,
.payment-gateway > .container::after, .testimonial-section > .container::after,
#donx-stories > .container::after,
.donx-auth-halo::before, .donx-auth-halo::after,
.donx-section-heading h5::after, .header-text h5::after,
.footer-section .copyright > div:first-child span::after,
.donx-premium-footer .copyright > div:first-child span::after,
.nav-link::after, .donx-nav-plain-link::after,
.donx-primary-cta, .donx-order-btn, .donx-header-cta, .btn.btn-primary,
.donx-ai-host-avatar img, .services-topbar-head h5::before,
.donx-globe, .donx-volt, .donx-chip, .donx-gradient-word,
.donx-premium-home::after, .donx-hero-badge span::after {
animation: none !important;
}
/* the conic-ring pseudos: hide outright so the gradient never repaints */
.donx-nav-shell::after,
.btn-smm::after, .donx-primary-cta::after, .donx-secondary-cta::after,
.donx-order-btn::after, .donx-header-cta::after, .donx-shop-btn::after,
.donx-how-btn::after, .donx-stories-viewall-btn::after, .btn-outline-light::after,
.btn.btn-primary::after, .service-section .service-box .read-more::after,
.feature-section > .container::after, .service-section > .container::after,
.payment-gateway > .container::after, .testimonial-section > .container::after,
#donx-stories > .container::after,
.donx-auth-halo::before, .donx-auth-halo::after {
display: none !important;
}
/* 4 — drop the heavy media: woven PNGs, section videos, hero video */
.feature-section::before, .service-section::before, .how-it-works::before,
.learn-more::before, .achievement-section::before, .testimonial-section::before,
.payment-gateway::before, .faq-section::before, #donx-stories::before,
.contact-section::before, .footer-section::before {
background-image: none !important;
display: none !important;
}
.achievement-section .donx-globe-bg { display: none !important; }
.donx-page-ai-bg, .donx-page-ai-bg-video, .donx-hero-bg-video { display: none !important; }
.donx-hero-bg { background: #02040c !important; }
.donx-login-vault { background-image: none !important; background: #02040c !important; }
/* 5 — static cyan edge instead of the animated pulse on primary CTAs */
.donx-primary-cta, .donx-order-btn, .donx-header-cta, .btn.btn-primary {
box-shadow: 0 0 18px rgba(0,240,255,.26), inset 0 0 10px rgba(0,240,255,.1) !important;
}
/* 6 — organised mobile rhythm, premium spacing */
.feature-section, .service-section, .testimonial-section, .payment-gateway,
.how-it-works, .contact-section, #donx-stories, .about-section, .faq-section,
.achievement-section {
padding-top: 44px !important; padding-bottom: 44px !important;
}
.feature-section > .container, .service-section > .container,
.testimonial-section > .container, .payment-gateway > .container,
.how-it-works > .container, .contact-section > .container,
#donx-stories > .container, .about-section > .container {
padding: 22px 15px !important;
border-radius: 16px !important;
border: 1px solid rgba(0,240,255,.16) !important;
}
.donx-section-heading h2, .donx-section-heading h3, .header-text h2, .header-text h3, #donx-stories h2 {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
}
.service-box, .feature-box, .counter-box, .donx-counter-card, .donx-review-box,
.donx-about-card, .shop-card, .donx-story-card {
border-radius: 14px !important;
}
/* modal fits the small screen cleanly */
.modal-dialog { margin: .6rem !important; }
}
/* very small phones — one-column stats, larger tap targets */
@media (max-width: 575.98px) {
.donx-premium-home .donx-trust-stats { gap: 10px !important; }
.donx-premium-home .donx-stat-item { flex: 1 1 100% !important; }
.btn-smm, .btn, .donx-primary-cta, .donx-secondary-cta { min-height: 46px !important; }
.donx-hd-card { padding: 12px 13px !important; }
}
/* =========================================================================
PASS 9
- readable form controls (no dark-on-dark "hidden word")
- premium mobile header buttons + organised mobile menu
- HOME: sections stack as overlapping panels, not one long flat list
========================================================================= */
/* ---- FORM CONTROLS: never render a label/placeholder invisible -------- */
select.form-select, .form-select {
color: #eaf6ff !important;
}
select.form-select option, .form-select option, .form-select optgroup {
background: #0b1018 !important;
color: #eaf6ff !important;
}
.form-control::placeholder, textarea::placeholder { color: #8fa6bd !important; opacity: 1 !important; }
/* selects that show a placeholder-style first option */
.form-select:has(option[value=""]:checked) { color: #9fb2c6 !important; }
/* ---- HOME ONLY: overlapping "panel stack" — sections slide up over each
other instead of reading as one long flat list. Scoped with :has() so
only the page with the premium hero gets it. --------------------------- */
body:has(.donx-premium-home) :is(
.feature-section, .service-section, .how-it-works,
.achievement-section, .testimonial-section, .payment-gateway) {
position: relative;
margin-top: -42px;
border-radius: 36px 36px 0 0;
background: linear-gradient(180deg, #05090f 0%, #02040a 72%) !important;
box-shadow: 0 -28px 60px rgba(0,0,0,.62) !important;
}
body:has(.donx-premium-home) .feature-section { z-index: 2; }
body:has(.donx-premium-home) .service-section { z-index: 3; }
body:has(.donx-premium-home) .how-it-works { z-index: 4; }
body:has(.donx-premium-home) .achievement-section { z-index: 5; }
body:has(.donx-premium-home) .testimonial-section { z-index: 6; }
body:has(.donx-premium-home) .payment-gateway { z-index: 7; }
body:has(.donx-premium-home) :is(.footer-section, .donx-premium-footer) {
position: relative; z-index: 8;
margin-top: -42px;
border-radius: 36px 36px 0 0;
box-shadow: 0 -28px 60px rgba(0,0,0,.62);
}
/* the inner glass-ring container is redundant now the section is the panel */
body:has(.donx-premium-home) :is(
.feature-section, .service-section, .testimonial-section,
.payment-gateway, .how-it-works, .achievement-section) > .container {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
@media (max-width: 991.98px) {
body:has(.donx-premium-home) :is(
.feature-section, .service-section, .how-it-works, .achievement-section,
.testimonial-section, .payment-gateway, .footer-section, .donx-premium-footer) {
margin-top: -26px;
border-radius: 24px 24px 0 0;
}
}
/* ---- MOBILE HEADER: premium glass action buttons ------------------- */
@media (max-width: 991.98px) {
.donx-public-nav .donx-navbar-toggler,
.donx-public-nav .donx-mobile-order-shortcut .btn-smm,
.donx-public-nav .btn-smm.icon-width,
.donx-public-nav .donx-shop-btn.icon-width {
width: 44px !important; height: 44px !important;
min-width: 44px !important; min-height: 44px !important;
border-radius: 13px !important;
background: linear-gradient(160deg, rgba(0,240,255,.16), rgba(10,16,26,.72)) !important;
border: 1px solid rgba(0,240,255,.42) !important;
color: #eafcff !important;
box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px rgba(0,240,255,.2),
inset 0 0 12px rgba(0,240,255,.08) !important;
}
.donx-public-nav .donx-navbar-toggler i,
.donx-public-nav .donx-mobile-order-shortcut .btn-smm i,
.donx-public-nav .btn-smm.icon-width i { color: #7dfcff !important; font-size: 16px !important; }
.donx-public-nav .donx-navbar-toggler[aria-expanded="true"] {
background: linear-gradient(160deg, rgba(0,240,255,.3), rgba(10,16,26,.8)) !important;
box-shadow: 0 0 20px rgba(0,240,255,.5) !important;
}
.donx-public-nav .donx-nav-shell { padding: 8px 12px !important; gap: 8px !important; }
.donx-public-nav .donx-nav-logo img { max-width: 106px !important; }
/* ---- MOBILE MENU: solid panel, one consistent item style -------- */
.donx-public-nav .donx-nav-menu.navbar-collapse,
.deep-blue-header .navbar-collapse {
margin-top: 12px !important;
padding: 12px !important;
border-radius: 16px !important;
border: 1px solid rgba(0,240,255,.22) !important;
background: #070c16 !important;
box-shadow: 0 30px 70px rgba(0,0,0,.65) !important;
}
.donx-public-nav .donx-nav-menu ul,
.donx-public-nav .donx-nav-menu .navbar-nav {
list-style: none !important; margin: 0 !important; padding: 0 !important;
display: block !important; width: 100% !important;
}
.donx-public-nav .donx-nav-menu li,
.donx-public-nav .donx-nav-menu .nav-item {
list-style: none !important;
display: block !important;
width: 100% !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
.donx-public-nav .donx-nav-menu li::marker { content: "" !important; }
.donx-public-nav .donx-nav-menu .nav-item:last-child { margin-bottom: 0 !important; }
.donx-public-nav .donx-nav-menu .nav-link {
display: flex !important; align-items: center !important; gap: 10px !important;
width: 100% !important;
padding: 13px 15px !important;
border-radius: 11px !important;
background: rgba(0,240,255,.045) !important;
border: 1px solid rgba(0,240,255,.14) !important;
color: #dbe9f5 !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
text-align: left !important;
text-transform: none !important;
}
.donx-public-nav .donx-nav-menu .nav-link i { color: #00f0ff !important; width: 18px; text-align: center; }
.donx-public-nav .donx-nav-menu .nav-link:hover,
.donx-public-nav .donx-nav-menu .nav-link.active {
background: rgba(0,240,255,.13) !important;
border-color: rgba(0,240,255,.42) !important;
color: #ffffff !important;
box-shadow: 0 0 16px rgba(0,240,255,.22) !important;
}
.donx-public-nav .donx-nav-menu .nav-link::after,
.donx-public-nav .donx-nav-menu .nav-link::before { display: none !important; }
}
/* =========================================================================
PASS 10 — reconnect the chain to the section glass borders (HOME)
The page-volt is the continuous spine; each stacked panel now has a real
cyan glass border and a chip node that sits on the spine and taps into
that border. donx-fx.js injects one .donx-sect-node per panel.
========================================================================= */
/* bring back the glass border on the home panels */
body:has(.donx-premium-home) :is(
.feature-section, .service-section, .how-it-works,
.achievement-section, .testimonial-section, .payment-gateway) {
border: 1px solid rgba(0,240,255,.22) !important;
border-bottom: 0 !important;
}
body:has(.donx-premium-home) :is(.footer-section, .donx-premium-footer) {
border-top: 1px solid rgba(0,240,255,.22) !important;
}
/* page-volt: keep the wire + data pulse as the spine, drop its free-floating
chips (they never lined up with anything) */
.donx-page-volt .pv-node { display: none !important; }
.donx-page-volt .pv-wire { stroke: rgba(0,240,255,.22) !important; }
/* chip node on each panel's top-left — sits on the spine, arm into the border */
.donx-sect-node {
position: absolute;
left: 23px;
top: -13px;
width: 24px;
height: 24px;
z-index: 6;
pointer-events: none;
display: block;
}
.donx-sect-node::before {
content: "";
position: absolute; inset: 0;
border-radius: 6px;
background: #06131c;
border: 1.4px solid #00f0ff;
box-shadow: 0 0 12px rgba(0,240,255,.55), inset 0 0 8px rgba(0,240,255,.22);
animation: donxPcBlink 3.6s steps(1) infinite;
}
.donx-sect-node:nth-of-type(2)::before { animation-delay: -.9s; }
.donx-sect-node:nth-of-type(3)::before { animation-delay: -1.8s; }
.donx-sect-node::after {
content: "";
position: absolute;
left: calc(100% - 1px);
top: 50%;
width: 30px;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg, #00f0ff, rgba(0,240,255,.15));
box-shadow: 0 0 6px rgba(0,240,255,.6);
}
@media (max-width: 991.98px) {
.donx-sect-node { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.donx-sect-node::before { animation: none !important; }
}
/* pagination arrows: our li{font-family:Inter!important} was leaking onto the
FontAwesome , blanking the glyph — pin it back to the icon font */
#pagination .page-link i, .pagination .page-link i, nav#pagination i {
font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro", "FontAwesome" !important;
font-weight: 900 !important;
}
/* SEO: section titles promoted -> . .learn-more uses a bare heading
with no class rule outside media queries — pin its size so it is unchanged. */
.learn-more > h2 { font-size: 32px; font-weight: 700; }
/* =========================================================================
CURSOR GLOW — electronic-glass / liquid halo, on EVERY page + section
(desktop + fine pointer only; mobile keeps it hidden for performance).
High z-index + screen blend + pointer-events:none = pure added light,
never blocks clicks, shows over the stacked section panels too.
========================================================================= */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
#donx-global-glow {
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: 600px !important;
height: 600px !important;
margin: 0 !important;
border-radius: 50% !important;
z-index: 2147483000 !important;
pointer-events: none !important;
mix-blend-mode: screen !important;
opacity: 0;
transition: opacity .35s ease !important;
will-change: transform, opacity;
background:
radial-gradient(circle at 50% 50%,
rgba(215,250,255,.30) 0%,
rgba(70,235,255,.17) 14%,
rgba(0,205,255,.06) 30%,
transparent 47%),
radial-gradient(circle at 50% 50%,
transparent 39%,
rgba(0,240,255,.17) 43%,
rgba(150,252,255,.10) 47%,
transparent 56%),
radial-gradient(circle at 50% 50%,
rgba(0,180,255,.16) 0%,
rgba(0,120,255,.07) 45%,
transparent 72%) !important;
background-blend-mode: screen, screen, normal !important;
filter: blur(3px) saturate(1.35) !important;
}
/* the "lens" — a crisp glass ring that gently breathes */
#donx-global-glow::after {
content: "";
position: absolute;
inset: 33%;
border-radius: 50%;
border: 1.5px solid rgba(170,252,255,.5);
box-shadow:
0 0 34px rgba(0,240,255,.4), 0 0 70px rgba(0,200,255,.25),
inset 0 0 34px rgba(0,240,255,.22);
animation: donxGlowLens 3.4s ease-in-out infinite;
}
@keyframes donxGlowLens {
0%, 100% { transform: scale(1); opacity: .78; }
50% { transform: scale(1.07); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#donx-global-glow::after { animation: none; }
}
}
/* =========================================================================
AUTH FORMS (login / register) — fields were washing out over the busy
background + cursor glow. Give them real frosted glass so they always
read, and a strong focus state so the field "comes back" when clicked.
========================================================================= */
body .donx-login-vault .donx-auth-glass .form-control,
body .donx-login-vault .form-control,
body .donx-login-vault .input-group,
body .donx-login-vault .country_code_vault_select {
/* near-solid so EVERY box is always clearly visible — empty or filled,
and regardless of the cursor glow passing over it */
background: rgba(11, 17, 28, 0.96) !important;
border: 1px solid rgba(0, 240, 255, 0.22) !important;
border-radius: 12px !important;
color: #eafcff !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
body .donx-login-vault .input-group .form-control {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body .donx-login-vault .form-control::placeholder,
body .donx-login-vault .country_code_vault_select { color: #9fb2c6 !important; }
body .donx-login-vault .form-control { color: #eafcff !important; }
/* Chrome autofill was tinting fields purple — keep them dark */
body .donx-login-vault .form-control:-webkit-autofill,
body .donx-login-vault .form-control:-webkit-autofill:focus,
body .donx-login-vault .form-control:-webkit-autofill:hover {
-webkit-box-shadow: 0 0 0 1000px rgba(11, 17, 28, 0.99) inset !important;
-webkit-text-fill-color: #eafcff !important;
caret-color: #eafcff !important;
border: 1px solid rgba(0, 240, 255, 0.22) !important;
}
/* focus — pop bright, cyan ring + glow */
body .donx-login-vault .donx-auth-glass .form-control:focus,
body .donx-login-vault .form-control:focus,
body .donx-login-vault .input-group:focus-within,
body .donx-login-vault .country_code_vault_select:focus {
background: rgba(12, 20, 33, 0.97) !important;
border-color: #00f0ff !important;
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18),
0 0 26px rgba(0, 240, 255, 0.32) !important;
outline: none !important;
color: #ffffff !important;
}
body .donx-login-vault .input-group:focus-within .form-control { color: #ffffff !important; }
@media (max-width: 991.98px) {
/* fully solid, no blur on phones (performance) */
body .donx-login-vault .donx-auth-glass .form-control,
body .donx-login-vault .form-control,
body .donx-login-vault .input-group,
body .donx-login-vault .country_code_vault_select {
background: #0c1322 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body .donx-login-vault .input-group .form-control { background: transparent !important; }
body .donx-login-vault .donx-auth-glass .form-control:focus,
body .donx-login-vault .form-control:focus,
body .donx-login-vault .input-group:focus-within { background: #10203a !important; }
}
/* =========================================================================
GLOBAL FORM FIELDS — every text input / select / textarea, every page.
They were washing out under the site-wide cursor glow (screen blend).
Solid dark fill = always visible; clear focus state.
========================================================================= */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
textarea,
select,
.form-control,
.form-select {
background-color: rgba(12, 18, 30, 0.97) !important;
color: #eaf3ff !important;
border: 1px solid rgba(0, 240, 255, 0.20) !important;
border-radius: 12px !important;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"])::placeholder,
textarea::placeholder { color: #8fa6bd !important; opacity: 1 !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
background-color: rgba(15, 24, 38, 1) !important;
border-color: #00f0ff !important;
box-shadow: 0 0 0 3px rgba(0,240,255,.16), 0 0 22px rgba(0,240,255,.28) !important;
outline: none !important;
color: #ffffff !important;
}
/* native select option lists readable */
select option, select optgroup, .form-select option, .form-select optgroup {
background: #0b1018 !important; color: #eaf3ff !important;
}
/* browser autofill must not paint fields light */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px rgba(12, 18, 30, 1) inset !important;
-webkit-text-fill-color: #eaf3ff !important;
caret-color: #eaf3ff !important;
border: 1px solid rgba(0, 240, 255, 0.20) !important;
}
/* the phone input INSIDE the .input-group stays clear (the group carries the fill) */
.input-group > .form-control { background-color: transparent !important; border: 0 !important; }
/* stragglers: page-specific field rules that still used a translucent fill */
.donx-contact-form .form-control,
.donx-contact-form textarea,
.donx-contact-form textarea.form-control,
.services-filter-grid .form-control,
.services-filter-grid .form-select,
.service-page .services-filter-grid .form-select,
.shop-search .form-control,
.shop-search .form-select,
.service-page .form-control,
.service-page .form-select,
.donx-search .form-control {
background-color: rgba(12, 18, 30, 0.97) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* =========================================================================
MOBILE SLIDE-OVER SCROLL (home) — matches the reference:
the hero PINS to the top full-screen, and the content below scrolls up
OVER it like a rounded sheet. Pure CSS, phones only.
========================================================================= */
@media (max-width: 991.98px) {
body:has(.donx-premium-home) .donx-premium-home {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 0 !important;
min-height: 100vh !important;
min-height: 100svh !important;
padding-top: 108px !important;
padding-bottom: 40px !important;
}
/* the first content section is the sheet that rides up over the hero */
body:has(.donx-premium-home) .feature-section {
position: relative !important;
z-index: 3 !important;
margin-top: -18px !important;
border-radius: 30px 30px 0 0 !important;
background: #04070e !important;
box-shadow: 0 -22px 48px rgba(0, 0, 0, .62) !important;
}
/* everything else already overlaps via the panel-stack rules */
}
/* =========================================================================
/custom-services buttons — give them the site's glowing border ring
========================================================================= */
.donx-business-btn {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
}
.donx-business-btn::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
padding: 1.6px !important;
background: linear-gradient(135deg, #00f0ff, #00c8ff 55%, #00f0ff) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 2 !important;
}
.donx-business-btn-primary,
.donx-business-btn-profile {
animation: donxCtaPulse 2.8s ease-in-out infinite !important;
}
.donx-business-btn:hover::after {
background: linear-gradient(135deg, #8bfcff, #00f0ff 55%, #8bfcff) !important;
}