/* ===================================================================== AdsDrop — Enhancement Layer (composition depth + elegant motion) --------------------------------------------------------------------- - Presentation ONLY. No content/text changes. Brand colors preserved. - Loads AFTER style.css. Safe: reveal hiding applies only when JS adds `.anim-ready` to , so content always shows if JS is off. - RTL-first (Arabic) with LTR support. Honors prefers-reduced-motion. ===================================================================== */ :root { /* Brand identity = black (#1a1a1a) + orange (#FF5A24). NO blue. Neutralize the legacy blue tokens site-wide (override base style.css). */ --accent-color: #FF5A24; /* was #4A90E2 (blue) — now brand orange */ --light-blue: #FFE9E0; /* was #E8F4F8 (blue) — now warm peach tint */ /* depth + motion tokens */ --ad-ease: cubic-bezier(0.22, 1, 0.36, 1); --ad-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ad-orange-2: #ff8a4d; /* warm light orange — brand-safe accent */ --ad-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --ad-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08); --ad-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14), 0 8px 18px rgba(15, 23, 42, 0.08); --ad-glow-orange: 0 18px 40px rgba(255, 90, 36, 0.28); --ad-ring: rgba(255, 90, 36, 0.45); } /* ===================================================================== 1) SECTION RHYTHM & DEPTH — richer, deeper composition ===================================================================== */ section { padding-top: 96px; padding-bottom: 96px; } /* Premium accent under every section title (decorative — no text) */ .section-title { position: relative; padding-bottom: 0.9rem; } .section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--secondary-color), var(--ad-orange-2)); box-shadow: 0 4px 12px rgba(255, 90, 36, 0.35); } /* ===================================================================== 2) HERO — animated brand gradient mesh + refined entrance ===================================================================== */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); } /* Soft floating brand-color blobs behind hero content */ .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; z-index: 0; pointer-events: none; will-change: transform; } .hero::before { width: 520px; height: 520px; top: -160px; inset-inline-end: -120px; background: radial-gradient(circle, rgba(255, 90, 36, 0.30), transparent 65%); animation: adFloatA 16s var(--ad-ease) infinite alternate; } .hero::after { width: 460px; height: 460px; bottom: -180px; inset-inline-start: -100px; background: radial-gradient(circle, rgba(255, 138, 77, 0.22), transparent 65%); animation: adFloatB 20s var(--ad-ease) infinite alternate; } .hero .container { position: relative; z-index: 1; } @keyframes adFloatA { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-40px, 50px, 0) scale(1.12); } } @keyframes adFloatB { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(40px, -40px, 0) scale(1.15); } } /* Refined hero image frame */ .hero-image { box-shadow: var(--ad-shadow-lg); transition: transform 0.6s var(--ad-ease); } .hero-image-wrapper:hover .hero-image { transform: translateY(-4px); } /* ===================================================================== 3) PREMIUM CARDS — layered depth + refined hover ===================================================================== */ .service-card, .testimonial-card-modern { position: relative; border-radius: 16px; box-shadow: var(--ad-shadow-sm); transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease), border-color 0.4s var(--ad-ease); overflow: hidden; } /* Gradient top accent that grows on hover */ .service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--secondary-color), var(--ad-orange-2)); transform: scaleX(0); transform-origin: var(--ad-origin, right); transition: transform 0.45s var(--ad-ease); } .service-card:hover { transform: translateY(-8px); box-shadow: var(--ad-shadow-lg); border-color: transparent; } .service-card:hover::before { transform: scaleX(1); } /* Service icon: branded halo + pop on hover */ .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 90, 36, 0.14), rgba(255, 138, 77, 0.10)); box-shadow: inset 0 0 0 1px rgba(255, 90, 36, 0.18); transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease); } .service-card:hover .service-icon { transform: translateY(-3px) scale(1.06) rotate(-3deg); box-shadow: var(--ad-glow-orange), inset 0 0 0 1px rgba(255, 90, 36, 0.3); } /* Service image zoom on hover */ .service-image { border-radius: 12px; } .service-image img { transition: transform 0.6s var(--ad-ease); } .service-card:hover .service-image img { transform: scale(1.06); } /* Service link arrow micro-interaction */ .service-link { position: relative; } .service-link::after { content: "←"; display: inline-block; margin-inline-start: 6px; transition: transform 0.3s var(--ad-ease); } body[dir="ltr"] .service-link::after { content: "→"; } .service-card:hover .service-link::after { transform: translateX(-4px); } body[dir="ltr"] .service-card:hover .service-link::after { transform: translateX(4px); } /* ===================================================================== 4) PROCESS STEPS — connected, glowing numbers ===================================================================== */ .step-card { background: var(--white); border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: var(--ad-shadow-sm); transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease); padding: 2.5rem 1.75rem; } .step-card:hover { transform: translateY(-6px); box-shadow: var(--ad-shadow-md); } .step-number { position: relative; background: linear-gradient(135deg, var(--secondary-color), #ff7a4d); transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease); } .step-number::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed rgba(255, 90, 36, 0.35); animation: adSpin 14s linear infinite; } .step-card:hover .step-number { transform: scale(1.08); box-shadow: 0 10px 26px rgba(255, 90, 36, 0.45); } @keyframes adSpin { to { transform: rotate(360deg); } } /* ===================================================================== 5) STATS — gradient numbers + glass cards ===================================================================== */ .stat-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8)); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 18px; padding: 2.25rem 1.5rem; box-shadow: var(--ad-shadow-sm); transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease); } .stat-card:hover { transform: translateY(-6px); box-shadow: var(--ad-shadow-md); } .stat-number { background: linear-gradient(135deg, var(--secondary-color), var(--ad-orange-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ===================================================================== 6) PARTNER / CLIENT cards — refined hover ===================================================================== */ .partner-item { transition: transform 0.4s var(--ad-ease), box-shadow 0.4s var(--ad-ease); border-radius: 14px; } .partner-item:hover { transform: translateY(-5px); box-shadow: var(--ad-shadow-md); } .client-logo.client-card:hover { transform: translateY(-6px); box-shadow: var(--ad-shadow-lg); } /* ===================================================================== 7) BUTTONS — premium shine sweep ===================================================================== */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ad-ease); z-index: -1; } .btn:hover::after { left: 130%; } /* ===================================================================== 8) PROFESSIONAL LANGUAGE SWITCHER — segmented toggle w/ globe ===================================================================== */ .language-switcher { position: relative; gap: 0; padding: 4px; padding-inline-start: 30px; background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); } /* Globe icon */ .language-switcher::before { content: ""; position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: currentColor; color: var(--text-color); opacity: 0.55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E") center/contain no-repeat; } .language-switcher .lang-btn { position: relative; z-index: 1; background: transparent; border: none; padding: 0.38rem 0.85rem; border-radius: 999px; color: var(--text-color); transition: color 0.3s var(--ad-ease); } .language-switcher .lang-btn:hover { background: transparent; color: var(--primary-color); } .language-switcher .lang-btn.active { background: linear-gradient(135deg, var(--secondary-color), #ff7a4d); color: var(--white); border-color: transparent; box-shadow: 0 4px 12px rgba(255, 90, 36, 0.35); } /* ===================================================================== 9) SCROLL REVEAL SYSTEM — staggered, elegant Only active when JS adds `.anim-ready` to (safe fallback). ===================================================================== */ .anim-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ad-ease-out), transform 0.7s var(--ad-ease-out); transition-delay: calc(var(--ad-i, 0) * 90ms); will-change: opacity, transform; } .anim-ready .reveal.reveal-left { transform: translateX(-32px); } .anim-ready .reveal.reveal-right { transform: translateX(32px); } .anim-ready .reveal.reveal-scale { transform: scale(0.94); } .anim-ready .reveal.is-visible { opacity: 1; transform: none; } /* ===================================================================== 10b) SIDE MENU — keep the scroll-progress bar from showing over the open mobile menu overlay (z-index fix). ===================================================================== */ html.mobile-menu-open .scroll-progress-indicator { opacity: 0; pointer-events: none; } /* Fix leftover BLUE shadows on the floating call button (brand = orange/black) */ .floating-call-btn { box-shadow: 0 4px 12px rgba(26, 26, 26, 0.35) !important; } .floating-call-btn:hover { box-shadow: 0 6px 20px rgba(255, 90, 36, 0.5) !important; } /* ===================================================================== 10) ACCESSIBILITY — respect reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after, .step-number::after { animation: none !important; } .anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } * { scroll-behavior: auto !important; } }