/* ============================================================ ZEALYEN INFOTECH — 2026 REDESIGN LAYER Refreshed palette + glassmorphism + 3D tilt + scroll reveal Loaded after style.css / modern.css — safe to override them. ============================================================ */ :root { /* Refreshed palette: electric indigo -> violet -> cyan */ --zt-indigo: #4F46E5; --zt-violet: #7C3AED; --zt-cyan: #06B6D4; --zt-pink: #EC4899; --zt-ink: #0B0F1A; --zt-ink-2: #11162A; --zt-glass: rgba(11, 15, 26, 0.55); --zt-glass-light: rgba(255, 255, 255, 0.14); --zt-glass-border: rgba(255, 255, 255, 0.18); --zt-gradient-1: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%); --zt-gradient-2: linear-gradient(120deg, #7C3AED 0%, #EC4899 50%, #4F46E5 100%); --zt-gradient-mesh: radial-gradient(at 15% 20%, rgba(79,70,229,0.55) 0px, transparent 50%), radial-gradient(at 85% 10%, rgba(6,182,212,0.45) 0px, transparent 50%), radial-gradient(at 50% 90%, rgba(124,58,237,0.5) 0px, transparent 55%); } /* Prevent decorative shapes/mesh from ever causing horizontal overflow (this is what shows up as extra blank space at page edges/bottom). IMPORTANT: only set this on , not too — if both elements get overflow-x:hidden, the CSS spec forces overflow-y to compute as "auto" on each of them independently, creating two separate scroll containers (i.e. two visible scrollbars) instead of one. */ html { overflow-x: hidden; } /* ---------- Global overrides: brand color refresh ---------- */ .btn-primary, .bg-primary { background: var(--zt-gradient-1) !important; border: none !important; } .btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); } .text-primary { color: var(--zt-indigo) !important; } a { transition: color .25s ease; } /* ============================================================ GLASSMORPHIC NAVBAR — always readable, regardless of hero bg ============================================================ */ @media (min-width: 992px) { .navbar-light, .navbar-light:not(.sticky-top) { background: rgba(11,15,26,0.78) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--zt-glass-border) !important; z-index: 1040 !important; } .navbar-light:not(.sticky-top) { overflow: hidden; isolation: isolate; } /* ---------------- Liquid-glass shimmer (top-of-page state only, no bottom wave) ---------------- */ .navbar-light:not(.sticky-top)::before, .navbar-light:not(.sticky-top)::after { content: ''; position: absolute; inset: -40% -10%; z-index: 0; pointer-events: none; } .navbar-light:not(.sticky-top)::before { background: radial-gradient(28% 55% at 12% 40%, rgba(6,182,212,0.35), transparent 60%), radial-gradient(22% 45% at 45% 65%, rgba(124,58,237,0.30), transparent 60%), radial-gradient(26% 50% at 78% 35%, rgba(79,70,229,0.30), transparent 60%), radial-gradient(20% 40% at 95% 60%, rgba(6,182,212,0.25), transparent 60%); filter: blur(18px); mix-blend-mode: screen; animation: ztWaterDrift 11s ease-in-out infinite alternate; } .navbar-light:not(.sticky-top)::after { background: repeating-linear-gradient( 100deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.03) 14px, transparent 28px, rgba(255,255,255,0.07) 42px, transparent 60px ); mix-blend-mode: overlay; opacity: 0.65; animation: ztWaterShimmer 6.5s linear infinite; } @keyframes ztWaterDrift { 0% { transform: translate(-3%, -2%) scale(1); } 50% { transform: translate(2%, 3%) scale(1.08); } 100% { transform: translate(-2%, 1%) scale(1.02); } } @keyframes ztWaterShimmer { 0% { background-position: 0 0; } 100% { background-position: 220px 0; } } .navbar-light > .container, .navbar-light > .container-fluid { position: relative; z-index: 2; } .navbar-light .navbar-nav .nav-link, .navbar-light:not(.sticky-top) .navbar-nav .nav-link { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35); position: relative; z-index: 2; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light:not(.sticky-top) .navbar-nav .nav-link:hover, .navbar-light:not(.sticky-top) .navbar-nav .nav-link.active { color: #fff !important; } .navbar-light .navbar-nav .nav-link::after { background: linear-gradient(90deg, var(--zt-cyan), var(--zt-violet)) !important; } .navbar-brand { position: relative; z-index: 2; } .navbar-brand .logo1 { display: none !important; } .navbar-brand .logo2 { display: block !important; } .sticky-top.navbar-light { background: rgba(11,15,26,0.9) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 1045 !important; } .sticky-top.navbar-light .navbar-nav .nav-link { color: rgba(255,255,255,0.92) !important; } .sticky-top.navbar-light .navbar-nav .nav-link:hover, .sticky-top.navbar-light .navbar-nav .nav-link.active { color: #fff !important; } } @media (prefers-reduced-motion: reduce) { .navbar-light:not(.sticky-top)::before, .navbar-light:not(.sticky-top)::after { animation: none !important; } } .zt-wave-edge { display: none !important; } /* ============================================================ FIX: Bootstrap modals (e.g. certificate verification popup) were rendering with their top clipped behind the fixed navbar when the modal content was taller than the viewport. Force the modal above the nav and let its body scroll internally instead of pushing the dialog's top edge under the nav. ============================================================ */ .modal { z-index: 2000 !important; } .modal-backdrop { z-index: 1990 !important; } .modal-dialog-centered { padding-top: 90px; padding-bottom: 24px; min-height: calc(100vh - 40px) !important; } .modal-content { max-height: calc(100vh - 130px); display: flex; flex-direction: column; overflow: hidden; } .modal-content > .modal-header, .modal-content > .modal-footer { flex-shrink: 0; } .modal-content > .modal-body { overflow-y: auto; min-height: 0; } @media (max-width: 767.98px) { .modal-dialog-centered { padding-top: 76px; } .modal-content { max-height: calc(100vh - 100px); } } /* ============================================================ FIX: ghost section numerals (".section-title::before") were using --primary-pale (#EFF6FF, near-white) which is invisible on light section backgrounds. Give it real, visible contrast. ============================================================ */ .section-title::before { color: rgba(79, 70, 229, 0.14) !important; -webkit-text-stroke: 1px rgba(79, 70, 229, 0.18); } .hero-header .section-title::before { color: rgba(255, 255, 255, 0.18) !important; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22); } /* ============================================================ HARDENED back-to-top position — belt-and-suspenders fix in case any ancestor transform/filter turns "fixed" into "fixed relative to that ancestor" instead of the viewport. ============================================================ */ body > .back-to-top, .back-to-top { position: fixed !important; right: 28px !important; left: auto !important; bottom: 28px !important; top: auto !important; z-index: 2147483647 !important; } /* ============================================================ ANIMATED GRADIENT MESH HERO BACKGROUND ============================================================ */ .hero-header { position: relative; background: var(--zt-ink) !important; overflow: hidden; } .hero-header::before { content: ''; position: absolute; inset: -10%; background: var(--zt-gradient-mesh); filter: blur(40px); animation: ztMeshShift 16s ease-in-out infinite alternate; z-index: 0; } .hero-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,26,0.15) 0%, rgba(11,15,26,0.55) 100%); z-index: 0; } .hero-header > .container, .hero-header > * { position: relative; z-index: 1; } .hero-header, .hero-header * { color: #fff; } .hero-header .text-muted, .hero-header p { color: rgba(255,255,255,0.78) !important; } @keyframes ztMeshShift { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(-3%, 2%) rotate(6deg) scale(1.08); } 100% { transform: translate(2%, -3%) rotate(-4deg) scale(1.05); } } /* Floating 3D decorative blobs — used inside hero, optional element .zt-float-shape */ .zt-float-shape { position: absolute; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; background: var(--zt-gradient-2); opacity: 0.35; filter: blur(2px); animation: ztFloat 9s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes ztFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-24px) rotate(12deg); } } /* ============================================================ 3D TILT CARDS — apply .zt-tilt to any card element JS (redesign-2026.js) sets --rx/--ry on mousemove ============================================================ */ .zt-tilt { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out, box-shadow .3s ease; will-change: transform; transform-style: preserve-3d; } .zt-tilt:hover { box-shadow: 0 30px 60px -12px rgba(79,70,229,0.35), 0 0 0 1px rgba(124,58,237,0.15); } .zt-tilt-content { transform: translateZ(30px); } /* Apply tilt by default to common existing card classes */ .why-card, .testimonial-card, .service-item, .process-line, .card { will-change: transform; } /* ============================================================ SCROLL-REVEAL — element gets .zt-in when it enters viewport ============================================================ */ .zt-reveal { opacity: 0; transform: translateY(36px) scale(0.98); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); } .zt-reveal.zt-in { opacity: 1; transform: translateY(0) scale(1); } /* stagger helper: add zt-reveal-1..6 for delay steps */ .zt-reveal-1.zt-in { transition-delay: .05s; } .zt-reveal-2.zt-in { transition-delay: .12s; } .zt-reveal-3.zt-in { transition-delay: .19s; } .zt-reveal-4.zt-in { transition-delay: .26s; } .zt-reveal-5.zt-in { transition-delay: .33s; } .zt-reveal-6.zt-in { transition-delay: .40s; } /* ============================================================ GRADIENT TEXT + GLOW BUTTON — trend accents ============================================================ */ .zt-gradient-text { background: var(--zt-gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .zt-glow-btn { position: relative; overflow: hidden; isolation: isolate; } .zt-glow-btn::before { content: ''; position: absolute; inset: -2px; background: var(--zt-gradient-2); z-index: -1; opacity: 0; transition: opacity .35s ease; filter: blur(14px); } .zt-glow-btn:hover::before { opacity: 0.85; } /* ============================================================ ANIMATED GRADIENT BACKDROP for CTA / newsletter sections ============================================================ */ .newsletter { background: var(--zt-gradient-1) !important; background-size: 200% 200% !important; animation: ztGradientPan 10s ease infinite; } @keyframes ztGradientPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ============================================================ FOOTER — richer depth + glass accents ============================================================ */ #footer { background-color: var(--zt-ink) !important; } #footer::before { background: linear-gradient(180deg, rgba(79,70,229,0.18), rgba(11,15,26,0.85)) !important; } .zt-footer-cta-inner { position: relative; z-index: 1; } /* ============================================================ REDUCED MOTION SUPPORT ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-header::before, .zt-float-shape, .newsletter { animation: none !important; } .zt-reveal { opacity: 1; transform: none; transition: none; } .zt-tilt { transform: none !important; } } @media (max-width: 991.98px) { .zt-tilt { transform: none !important; } }