/* ===================================================================== FUTURISTIC THEME OVERRIDE · navy / cyan + violet · glass + glow Loaded last in so it overrides the per-page inline :root tokens. Purely additive — recolors every var(--*) driven element site-wide. ===================================================================== */ /* ---- 1. Token remap : the whole design system recolors from here ---- */ :root{ --bg-body:#060912; --bg-section:#0a0f1e; --bg-card:#0e1626; --bg-card-hover:#131d33; --bg-input:#0b1220; --border:#1b2740; --border-light:#2a3b5e; --accent:#22d3ee; /* cyan */ --accent-hover:#4fe3f2; --orange:#9b7bff; /* remapped → violet (cyan + purple duo) */ --white:#f2f6ff; --text:#c4cde6; --text-muted:#8a95b8; --text-dim:#59648a; --glow-cyan:rgba(34,211,238,.55); --glow-violet:rgba(155,123,255,.55); } /* ---- 2. Ambient background : layered glows + faint grid, fixed ---- */ body{ background: radial-gradient(1100px 720px at 10% -10%, rgba(34,211,238,.10), transparent 60%), radial-gradient(1000px 720px at 100% 0%, rgba(139,92,246,.13), transparent 55%), radial-gradient(900px 900px at 50% 118%, rgba(34,211,238,.06), transparent 60%), var(--bg-body) !important; background-attachment:fixed !important; position:relative; } body::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(120,160,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.035) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } body>*{position:relative;z-index:1} /* ---- 3. Typography accents ---- */ h1,h2,h3,h4,h5,h6{letter-spacing:.5px} ::selection{background:var(--accent);color:#04121a} /* ---- 4. Header : glass ---- */ .il-header{ background:rgba(8,12,22,.72) !important; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid rgba(34,211,238,.16) !important; box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 40px -20px rgba(34,211,238,.35); } .il-nav a:hover,.il-nav a.active{text-shadow:0 0 18px var(--glow-cyan)} .il-nav a.active::after, .il-dropdown-menu{box-shadow:0 0 22px -6px var(--glow-cyan)} /* ---- 5. Buttons : gradient + glow ---- */ .il-btn-accent{ background:linear-gradient(135deg,#22d3ee 0%,#6d8cff 55%,#9b7bff 100%) !important; color:#05121a !important;font-weight:700; box-shadow:0 6px 26px -8px rgba(34,211,238,.7), inset 0 1px 0 rgba(255,255,255,.25); border:none; } .il-btn-accent:hover{ color:#05121a !important; box-shadow:0 10px 34px -6px rgba(155,123,255,.75), inset 0 1px 0 rgba(255,255,255,.35); transform:translateY(-2px); } .il-btn-outline{ border:1px solid rgba(34,211,238,.5) !important;color:var(--accent) !important; background:rgba(34,211,238,.04) !important; } .il-btn-outline:hover{ background:rgba(34,211,238,.14) !important;color:#eaffff !important; box-shadow:0 0 24px -4px var(--glow-cyan); } /* ---- 6. Cards / panels : subtle gradient, inset light, hover glow ---- */ .il-card,.il-form-card,.il-feature-card,.il-testimonial,.il-steps,.il-result-card{ background:linear-gradient(180deg, rgba(20,30,52,.72), rgba(12,19,34,.72)) !important; border:1px solid var(--border) !important; border-radius:14px !important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -40px rgba(0,0,0,.9); } .il-card:hover,.il-feature-card:hover{ border-color:rgba(34,211,238,.55) !important; box-shadow:0 0 0 1px rgba(34,211,238,.2), 0 20px 50px -24px rgba(34,211,238,.35) !important; transform:translateY(-4px); } .il-result-header{ background:linear-gradient(90deg, rgba(34,211,238,.10), rgba(155,123,255,.06)) !important; border-bottom:1px solid rgba(34,211,238,.18) !important; } .il-step-icon,.il-contact-icon{ background:radial-gradient(circle at 30% 20%, rgba(34,211,238,.18), rgba(12,19,34,.6)) !important; border:1px solid rgba(34,211,238,.35) !important; box-shadow:0 0 22px -6px var(--glow-cyan); } /* ---- 7. Section labels / links glow ---- */ .il-section-label{ border-color:rgba(34,211,238,.5) !important; background:rgba(34,211,238,.06); box-shadow:0 0 20px -6px var(--glow-cyan); } .il-hero-label,.il-hero h4{text-shadow:0 0 20px var(--glow-cyan)} /* ---- 8. Inputs : glow focus ---- */ .il-input,.il-select,.il-textarea{ background:rgba(9,14,26,.85) !important;border-radius:10px !important; border:1px solid var(--border) !important; } .il-input:focus,.il-select:focus,.il-textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(34,211,238,.15), 0 0 22px -6px var(--glow-cyan) !important; } /* ---- 9. Page banner : gradient + glow underline ---- */ .il-page-banner{ background: radial-gradient(700px 240px at 20% 0%, rgba(34,211,238,.14), transparent 70%), radial-gradient(700px 240px at 90% 100%, rgba(155,123,255,.14), transparent 70%), var(--bg-section) !important; border-bottom:1px solid rgba(34,211,238,.18) !important; } .il-page-banner h1{text-shadow:0 0 34px rgba(34,211,238,.3)} /* ---- 10. Hero overlay tint toward blue ---- */ .il-hero::before{ background:linear-gradient(120deg, rgba(6,9,18,.9) 0%, rgba(8,14,30,.7) 45%, rgba(14,10,34,.62) 100%) !important; } /* ---- 11. Footer ---- */ .il-footer{ background:linear-gradient(180deg, #070b16, #05070f) !important; border-top:1px solid rgba(34,211,238,.14) !important; } .il-footer-socials a:hover{ background:linear-gradient(135deg,#22d3ee,#9b7bff) !important; border-color:transparent !important;box-shadow:0 0 20px -4px var(--glow-cyan); } /* ---- 12. Timeline dots glow (legacy result markup) ---- */ .il-history-dot{box-shadow:0 0 14px var(--glow-cyan)} .il-latest-update{ background:rgba(34,211,238,.06) !important; border-left:3px solid var(--accent) !important; box-shadow:inset 0 0 30px -12px var(--glow-cyan); } /* ---- 13. Scrollbar ---- */ ::-webkit-scrollbar-thumb{background:linear-gradient(#22d3ee,#9b7bff) !important;border-radius:6px} /* ---- 13b. Tracking search "console" (only the two tracking forms) ---- */ form[action="realtime-tracking.php"]{position:relative} form[action="realtime-tracking.php"] input[type="text"]{ font-family:var(--font-display),monospace !important; text-transform:uppercase;letter-spacing:5px !important;text-align:center; font-size:17px !important;padding:18px 16px !important; background:rgba(6,10,20,.9) !important; border:1px solid rgba(34,211,238,.35) !important; box-shadow:inset 0 0 26px -12px var(--glow-cyan); } form[action="realtime-tracking.php"] input[type="text"]::placeholder{ letter-spacing:3px;color:var(--text-dim); } form[action="realtime-tracking.php"] input[type="text"]:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 30px -6px var(--glow-cyan) !important; } /* tracking-page banner headline gets a stronger glow */ .il-page-banner h1{text-shadow:0 0 40px rgba(34,211,238,.4)} /* ---- 14. Motion ---- */ @keyframes fx-pulse{0%,100%{opacity:1}50%{opacity:.4}} @media (prefers-reduced-motion:no-preference){ .il-btn-accent{transition:all .25s ease} }