/* ========================================================= CLOCKWORK — Custom Styles (Light / White Theme) Tailwind handles layout/spacing/color utilities. This file only holds what Tailwind can't: keyframes, gradients, glow effects, noise texture, marquee, RTL. ========================================================= */ :root { --color-bg: #ffffff; --color-bg-soft: #fff5f6; --color-red: #ff1b3d; --color-red-deep: #c40826; --color-red-glow: #ff4d67; --color-ink: #17181c; --color-muted: #6b6b70; --color-line: #f4dde0; } html { overflow-x: hidden; } * { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; background-color: var(--color-bg); color: var(--color-ink); overflow-x: hidden; position: relative; } /* --------------------------------------------------------- Arabic mode — swap to Cairo (Poppins has no Arabic glyphs) and flip layout via the native [dir="rtl"] the language toggle sets on . --------------------------------------------------------- */ html[dir="rtl"] body { font-family: "Cairo", "Poppins", sans-serif; } /* Side nav lives flush against the *start* edge — flip it to the right in RTL instead of mirroring every Tailwind class. */ html[dir="rtl"] #side-nav-wrap { left: auto; right: 0; } /* WhatsApp button flips to the opposite corner in RTL so it never collides with the side nav. */ html[dir="rtl"] #whatsapp-float { right: auto; left: 1rem; } @media (min-width: 1024px) { html[dir="rtl"] #whatsapp-float { left: 1.5rem; } } /* --------------------------------------------------------- Site-wide left/right margin — 100px on desktop, scaling down on smaller screens. Hero (#home) is exempt and stays full-bleed edge-to-edge (it cancels the body padding out). Fixed elements (header, floating side nav) are naturally unaffected since they're positioned relative to the viewport, not the body's padding box. --------------------------------------------------------- */ #home { margin-left: -100px; margin-right: -100px; } /* Capability marquee ribbon — also full-bleed, no site margin */ #capability-marquee { margin-left: -100px; margin-right: -100px; } /* @media (max-width: 1279px) { body { padding-left: 48px; padding-right: 48px; } #home { margin-left: -48px; margin-right: -48px; } #capability-marquee { margin-left: -48px; margin-right: -48px; } } */ /* @media (max-width: 767px) { body { padding-left: 20px; padding-right: 20px; } #home { margin-left: -20px; margin-right: -20px; } #capability-marquee { margin-left: -20px; margin-right: -20px; } } */ /* --------------------------------------------------------- Noise texture overlay — subtle grain so flat areas don't look like a default AI gradient. --------------------------------------------------------- */ .noise-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* --------------------------------------------------------- Glowing red mesh blobs --------------------------------------------------------- */ .blob { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: 0.4; will-change: transform; } .blob-one { background: radial-gradient(circle at 30% 30%, var(--color-red) 0%, var(--color-red-glow) 55%, transparent 75%); animation: blob-float-1 14s ease-in-out infinite; } .blob-two { background: radial-gradient(circle at 60% 60%, var(--color-red-glow) 0%, var(--color-red) 55%, transparent 75%); animation: blob-float-2 18s ease-in-out infinite; } @keyframes blob-float-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.15); } 66% { transform: translate(-30px, 20px) scale(0.9); } } @keyframes blob-float-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, 30px) scale(0.95); } 66% { transform: translate(35px, -25px) scale(1.1); } } /* --------------------------------------------------------- Hero background strip — continuous right-to-left loop --------------------------------------------------------- */ .hero-slide-track { display: flex; height: 100%; width: max-content; animation: hero-marquee 32s linear infinite; } #hero-slider, .hero-slide-track { direction: ltr; } .hero-slide-img { height: 100%; width: 100vw; object-fit: cover; flex-shrink: 0; } @keyframes hero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --------------------------------------------------------- About section — box grid background --------------------------------------------------------- */ .about-grid-bg { background-image: linear-gradient(rgba(23, 24, 28, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 24, 28, 0.09) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); } /* --------------------------------------------------------- Service VIDEO cards — "Roles we place" section. Each card is a looping muted clip (poster image until a real clip is dropped in) with a simple text overlay: title + paragraph. --------------------------------------------------------- */ .service-video-card { background-color: var(--color-ink); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .service-video-card:hover { transform: translateY(-6px); border-color: rgba(255, 27, 61, 0.35); box-shadow: 0 24px 44px -20px rgba(255, 27, 61, 0.3); } .service-video-card video { transition: transform 0.6s ease; } .service-video-card:hover video { transform: scale(1.05); } .service-card-bar { transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .service-video-card:hover .service-card-bar { transform: scaleX(1); } /* --------------------------------------------------------- News cards --------------------------------------------------------- */ .news-card { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .news-card:hover { transform: translateY(-6px); border-color: rgba(255, 27, 61, 0.3); box-shadow: 0 20px 40px -20px rgba(255, 27, 61, 0.2); } /* --------------------------------------------------------- News slider --------------------------------------------------------- */ .news-slider-track { scrollbar-width: none; -ms-overflow-style: none; } .news-slider-track::-webkit-scrollbar { display: none; } .news-nav-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; border: 1px solid var(--color-line); color: var(--color-ink); background: #fff; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; } .news-nav-btn:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; } .news-nav-btn:active { transform: scale(0.94); } .news-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; background: #fff; color: var(--color-ink); border-color: var(--color-line); } /* --------------------------------------------------------- Contact / Career application forms --------------------------------------------------------- */ .form-input { width: 100%; border-radius: 0.9rem; border: 1px solid var(--color-line); background: #fff5f6; padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--color-ink); transition: border-color 0.25s ease, box-shadow 0.25s ease; appearance: none; } .form-input:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 4px rgba(255, 27, 61, 0.12); } .form-input.field-error { border-color: var(--color-red-deep); box-shadow: 0 0 0 4px rgba(196, 8, 38, 0.12); } select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; } html[dir="rtl"] select.form-input { background-position: left 1rem center; padding-right: 1.1rem; padding-left: 2.5rem; } .form-error-msg { color: var(--color-red-deep); font-size: 0.78rem; margin-top: 0.35rem; display: none; } .form-error-msg.show { display: block; } .file-drop { border: 1.5px dashed var(--color-line); border-radius: 0.9rem; padding: 1.4rem; text-align: center; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease; } .file-drop:hover, .file-drop.drag-over { border-color: var(--color-red); background: var(--color-bg-soft); } /* Sponsorship / radio option cards (career form) */ .radio-card { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--color-line); border-radius: 0.9rem; padding: 0.9rem 1.1rem; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease; } .radio-card:hover { border-color: var(--color-red); background: var(--color-bg-soft); } .radio-card input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--color-red); flex-shrink: 0; } .radio-card input[type="radio"]:checked ~ span { color: var(--color-red-deep); font-weight: 600; } /* --------------------------------------------------------- About section — word-by-word scroll reveal --------------------------------------------------------- */ .about-word { color: #e3cfd2; transition: none; } .stat-card { position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-red), var(--color-red-glow)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .stat-card:hover { transform: translateY(-6px); border-color: rgba(255, 27, 61, 0.35); box-shadow: 0 20px 40px -20px rgba(255, 27, 61, 0.25); } .stat-card:hover::before { transform: scaleX(1); } /* --------------------------------------------------------- Shimmering gradient text --------------------------------------------------------- */ .text-shimmer { background: linear-gradient(90deg, var(--color-red-deep) 0%, var(--color-red-glow) 25%, var(--color-red) 50%, var(--color-red-deep) 75%, var(--color-red-glow) 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 5s linear infinite; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } } /* --------------------------------------------------------- Glow pulse --------------------------------------------------------- */ .glow-pulse { animation: glow-pulse 2.4s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 27, 61, 0.55), 0 0 20px 2px rgba(255, 27, 61, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(255, 27, 61, 0), 0 0 34px 6px rgba(255, 27, 61, 0.55); } } .dot-ping::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--color-red); animation: dot-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes dot-ping { 0% { transform: scale(1); opacity: 0.7; } 75%, 100% { transform: scale(2.4); opacity: 0; } } /* --------------------------------------------------------- Marquee --------------------------------------------------------- */ .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --------------------------------------------------------- Nav underline --------------------------------------------------------- */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0%; height: 2px; background: linear-gradient(90deg, var(--color-red), var(--color-red-glow)); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* --------------------------------------------------------- Floating side nav — sticky, flush against the left edge (right edge in RTL). Red square boxes stacked vertically, each with a visible label. Slides in from the start edge on load. Desktop only — mobile uses the bottom bar. --------------------------------------------------------- */ .side-nav-in { animation: side-nav-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; } @keyframes side-nav-in { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } html[dir="rtl"] .side-nav-in { animation-name: side-nav-in-rtl; } @keyframes side-nav-in-rtl { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .side-nav-link { position: relative; } .side-nav-link:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } /* --------------------------------------------------------- Language toggle button --------------------------------------------------------- */ .lang-toggle-btn { cursor: pointer; } /* --------------------------------------------------------- Floating WhatsApp button — fixed, every page. Sits above the mobile bottom bar; drops to the corner on desktop. --------------------------------------------------------- */ #whatsapp-float { position: fixed; z-index: 60; right: 1rem; bottom: 5.25rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 9999px; background: #25D366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; } #whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(37, 211, 102, 0.65); } @media (min-width: 1024px) { #whatsapp-float { right: 1.5rem; bottom: 1.5rem; } } /* --------------------------------------------------------- Mobile bottom menu bar — fixed tab bar, mobile/tablet only --------------------------------------------------------- */ #mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-nav-item svg { transition: transform 0.25s ease; } .mobile-nav-item:hover svg, .mobile-nav-item:active svg { transform: translateY(-2px); } .mobile-nav-item.active { color: var(--color-red); } @media (max-width: 1023px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* --------------------------------------------------------- Scroll-reveal fade-up --------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- Header entrance sequence (page load) --------------------------------------------------------- */ .load-fade { opacity: 0; transform: translateY(-14px); animation: load-fade 0.7s ease forwards; } @keyframes load-fade { to { opacity: 1; transform: translateY(0); } } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.25s; } .delay-3 { animation-delay: 0.4s; } .delay-4 { animation-delay: 0.55s; } /* --------------------------------------------------------- Sticky header background transition --------------------------------------------------------- */ #site-header { transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } #site-header.scrolled { box-shadow: 0 8px 30px -14px rgba(255, 27, 61, 0.25); } /* --------------------------------------------------------- AOS fallback — if the third-party scroll-reveal library fails to load (offline machine, blocked CDN, ad-blocker), its own CSS leaves every [data-aos] element invisible. main.js adds .no-aos to in that case so content still shows instead of silently disappearing. --------------------------------------------------------- */ html.no-aos [data-aos] { opacity: 1 !important; transform: none !important; } /* --------------------------------------------------------- Reduced motion respect --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, .blob, .text-shimmer, .glow-pulse, .marquee-track, .hero-slide-track, .reveal, .load-fade { animation: none !important; transition: none !important; } .side-nav-in { animation: none !important; opacity: 1 !important; transform: none !important; } .service-video-card:hover video { transform: none !important; } }