/* ---- Global base ---- NOTE: use overflow-x: clip, NOT hidden. `overflow-x: hidden` makes a scroll container, which breaks Lenis (it measures window.scrollY) and produces a delayed, janky scroll feel. */ * { -webkit-tap-highlight-color: transparent; } html { background: #0b0f19; scroll-behavior: auto; overflow-x: clip; } body { background: #0b0f19; color: #e7ecf5; font-family: 'Space Grotesk', 'Tajawal', 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.01em; overflow-x: clip; } ::selection { background: rgba(245,158,11,0.35); color: #fff; } /* ---- Mono label voice (matches the Nexus reference) ---- */ .text-xs.uppercase, .text-[10px].uppercase, .text-[9px].uppercase { font-family: 'JetBrains Mono', 'Tajawal', ui-monospace, monospace; letter-spacing: 0.18em; } @media (prefers-reduced-motion: reduce) { [data-reveal] { transform: none !important; opacity: 1 !important; } .scroll-cue { animation: none; } } /* ---- Glassmorphism ---- IMPORTANT: no backdrop-filter on purpose. Blurring behind every card, and especially behind the fixed navbar, repaints constantly on scroll and is the #1 cause of jank on Windows. A translucent solid background + hairline border reads as glass at a fraction of the cost. */ .glass { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } /* ---- Hero height ---- 100svh = small viewport height, so the hero fills the visible area on mobile while the iOS/Android URL bar is expanded. Browsers without svh fall back to the min-h-screen (100vh) utility below. */ #hero { min-height: 100svh; } /* ---- Radial background glow layers ---- */ .glow-hero { background: radial-gradient(600px circle at 20% 15%, rgba(245,158,11,0.12), transparent 60%), radial-gradient(650px circle at 85% 30%, rgba(34,211,238,0.12), transparent 60%), radial-gradient(550px circle at 60% 80%, rgba(16,185,129,0.10), transparent 60%); } .glow-sabaah { background: radial-gradient(700px circle at 50% 40%, rgba(245,158,11,0.10), transparent 65%); } .glow-wfrlee { background: radial-gradient(700px circle at 50% 40%, rgba(16,185,129,0.10), transparent 65%); } .glow-onegate { background: radial-gradient(700px circle at 50% 40%, rgba(34,211,238,0.10), transparent 65%); } /* ---- White CTA buttons ---- The config defines `base: #0b0f19` as a color and the buttons carry `text-base text-base` (font-size + color). Tailwind only emits the font-size utility for that name, so lock the intended dark text in. */ .bg-white.cta-glow { color: #0b0f19; } /* ---- Underline link hover ---- */ .anchor { position: relative; } .anchor::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s ease; } .anchor:hover::after { transform: scaleX(1); transform-origin: left; } /* ---- Arrow bounce on CTA ---- */ .scroll-cue { animation: floatDown 2.2s ease-in-out infinite; } @keyframes floatDown { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} } /* Hide nav before scroll */ .nav-hidden { transform: translateY(-100%) translateY(-1rem); opacity: 0; } /* ---- Platform cards: enhanced with dual-layer glow ---- */ .tilt-card { transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .tilt-card:hover { box-shadow: 0 25px 60px -12px rgba(0,0,0,0.5), 0 0 30px -10px var(--glow-color, rgba(255,255,255,0.06)), 0 0 80px -20px var(--glow-color, rgba(255,255,255,0.03)); } .tilt-card:hover { border-color: var(--glow-color, rgba(255,255,255,0.15)); } /* ---- Scan-line on tilt-cards ---- */ .tilt-card.scan-overlay::after { color: var(--glow-color, rgba(255,255,255,0.5)); } /* ---- Glow color vars per platform ---- */ .glow-wfrlee-card { --glow-color: rgba(16,185,129,0.3); } .glow-onegate-card { --glow-color: rgba(34,211,238,0.3); } .glow-sabaah-card { --glow-color: rgba(245,158,11,0.3); } /* ---- Pillar card hover ---- */ .pillar-card { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease; } .pillar-card:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: 0 20px 50px -15px rgba(0,0,0,0.4), 0 0 30px -10px var(--glow-color, rgba(255,255,255,0.04)), 0 0 60px -20px var(--glow-color, rgba(255,255,255,0.02)); } /* ---- CTA button hover glow ---- */ .cta-glow { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cta-glow::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.15), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .cta-glow:hover::after { opacity: 1; } .cta-glow.touch-active::after { opacity: 1; } .cta-glow:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 40px -10px rgba(255,255,255,0.2); } /* ---- Magnetic link hover ---- */ .magnetic-link { display: inline-block; transition: transform 0.3s cubic-bezier(0.03, 0.98, 0.52, 0.99); } /* ---- Floating orb animation ---- */ .float-orb { animation: floatOrb 6s ease-in-out infinite; will-change: transform; } .float-orb-delay { animation-delay: -2s; } .float-orb-slow { animation-duration: 8s; } @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(15px, -20px) scale(1.05); } 50% { transform: translate(-10px, -35px) scale(0.95); } 75% { transform: translate(20px, -15px) scale(1.03); } } /* ---- Scroll-driven reveal (initial hidden state; GSAP animates) ---- Elements fade in as the user scrolls. No 3D transforms / will-change shortcuts — keeps GPU layers low for smooth, lag-free scrolling. */ /* ---- Logo / icon chips: subtle 3D pop on hover (no full rotation) ---- */ .logo-hover { transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; } .logo-hover:hover { transform: perspective(520px) rotateX(9deg) rotateY(-7deg) translateZ(22px) scale(1.08); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55); } /* ---- Step item hover (each numbered row grows as its own section) ---- */ .step-item { position: relative; border-radius: 0.9rem; z-index: 1; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, box-shadow 0.35s ease; } .step-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; opacity: 0; transition: border-color 0.35s ease, opacity 0.35s ease; pointer-events: none; } .step-item > span { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease; } .step-item:hover { transform: scale(1.06); background: rgba(255,255,255,0.08); box-shadow: 0 18px 36px -18px var(--glow-color, rgba(0,0,0,0.5)); z-index: 5; } .step-item:hover > span, .step-item:hover > p { position: relative; z-index: 2; } .step-item:hover::before { border-color: var(--glow-color, rgba(255,255,255,0.2)); opacity: 1; } .step-item:hover > span { transform: scale(1.22); box-shadow: 0 12px 28px -14px var(--glow-color, rgba(255,255,255,0.4)), inset 0 0 0 1px var(--glow-color, rgba(255,255,255,0.25)); } .step-item > p { transition: transform 0.4s ease, color 0.35s ease; } .step-item:hover > p { transform: scale(1.02); color: rgba(255,255,255,0.96); } .step-item:hover > p strong { color: #fff; } /* ---- Check item stagger (revealed via GSAP) ---- */ .check-item { transition: transform 0.3s ease, opacity 0.3s ease; } /* ---- Contact card border: gradient mix of amber, emerald, cyan (border only) ---- */ #contact-form { border: 1px solid transparent; background: linear-gradient(#0f1421, #0f1421) padding-box, linear-gradient(115deg, #f59e0b, #10b981, #22d3ee) border-box; } /* ---- Noise texture overlay (film-grain polish) ---- */ .noise-bg::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.018; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Subtle grid background ---- */ .grid-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 80px 80px; } /* ---- Scan-line sweep animation ---- */ .scan-overlay { position: relative; overflow: hidden; } .scan-overlay::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0.25; animation: scan-line 4s linear infinite; pointer-events: none; } @keyframes scan-line { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ---- Pulse glow utility ---- */ .pulse-glow { animation: pulseGlow 3s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ---- Shimmer utility ---- */ .shimmer { background-size: 200% 100%; animation: shimmer 2.5s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ---- Shimmering gradient text ---- */ .text-shimmer { background-image: linear-gradient(110deg, #f59e0b 0%, #10b981 45%, #22d3ee 65%, #f59e0b 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s ease-in-out infinite; } /* ---- Glow pulse utility (box-shadow) ---- */ .glow-pulse { animation: glowPulse 3s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 10px var(--glow-color, rgba(255,255,255,0.05)); } 50% { box-shadow: 0 0 30px var(--glow-color, rgba(255,255,255,0.12)), 0 0 80px var(--glow-color, rgba(255,255,255,0.04)); } } /* ---- Self-drawing SVG lines ---- */ .draw-svg { stroke-dasharray: 1000; stroke-dashoffset: 1000; } /* ---- Full-page 3D scroll progress bar ---- */ #scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #f59e0b, #10b981, #22d3ee); transform-origin: 0 50%; z-index: 60; } /* ---- Hologram canvas: force a composited layer. Without this, iOS Safari may drop the canvas bitmap during scroll repaints, causing the globe to vanish while scrolling. */ #hologram { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } body.lang-ar, body.lang-ar .font-display { font-family: 'Tajawal', 'Plus Jakarta Sans', Inter, sans-serif; } body.lang-ar .tracking-widest, body.lang-ar .tracking-[0.25em] { letter-spacing: 0; } /* ---- Reduced motion overrides ---- */ @media (prefers-reduced-motion: reduce) { .tilt-card, .pillar-card, .cta-glow, .magnetic-link, .float-orb, .float-orb-delay, .float-orb-slow, .logo-hover, .step-item, .pulse-glow, .shimmer, .text-shimmer, .glow-pulse, .scan-overlay::after, .draw-svg { animation: none !important; transition: none !important; transform: none !important; } [data-3d-reveal], [data-3d-reveal-child] { opacity: 1 !important; transform: none !important; } #scroll-progress { display: none; } .draw-svg { stroke-dashoffset: 0 !important; } }