/* ============================================================ 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) { isolation: isolate; } /* ---------------- Ambient moving gradient glow (top-of-page state only, no wave) ---------------- IMPORTANT: this used to be overflow:hidden on the navbar itself, which also clipped the "Pages" dropdown menu (a descendant of the nav) so it rendered invisible on desktop. Instead, the glow lives on a dedicated .zt-navbar-glow wrapper that is the ONLY thing clipped — the dropdown menu is a sibling of that wrapper, so it's never cut off. */ .navbar-light:not(.sticky-top) > .zt-navbar-glow { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .navbar-light:not(.sticky-top) > .zt-navbar-glow::before { content: ''; position: absolute; inset: -60% -20%; pointer-events: none; background: linear-gradient( 100deg, var(--zt-indigo) 0%, var(--zt-violet) 25%, var(--zt-cyan) 50%, var(--zt-pink) 75%, var(--zt-indigo) 100% ); background-size: 300% 300%; filter: blur(30px); opacity: 0.55; mix-blend-mode: screen; animation: ztNavGradientPan 16s ease-in-out infinite; } @keyframes ztNavGradientPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .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) > .zt-navbar-glow::before { 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; } } /* ============================================================ NAVBAR: "Pages" DROPDOWN — OPEN ON HOVER (DESKTOP ONLY) Below the lg breakpoint the menu stays click/tap driven (Bootstrap's default collapse behavior for mobile). ============================================================ */ @media (min-width: 992px) { .navbar .nav-item.dropdown { position: relative; } .navbar .nav-item.dropdown > .dropdown-menu { /* remove the default top gap so the cursor never "loses" the menu while moving from the link down into it */ margin-top: 0; top: 100%; /* fade/slide in smoothly instead of Bootstrap's instant display:none/block */ display: block; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .navbar .nav-item.dropdown:hover > .dropdown-menu, .navbar .nav-item.dropdown:focus-within > .dropdown-menu, .navbar .nav-item.dropdown > .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* keep the caret rotated while the menu is open, like a normal dropdown */ .navbar .nav-item.dropdown:hover > .dropdown-toggle::after, .navbar .nav-item.dropdown:focus-within > .dropdown-toggle::after { transform: rotate(180deg); } .navbar .dropdown-toggle::after { transition: transform 0.18s ease; } }