/* ============================================================================ ARABS PEARL — custom stylesheet ============================================================================ Most of the page's look comes from Tailwind utility classes written directly in index.html (bg-primary, rounded-3xl, etc.) — Tailwind is configured inline in index.html's . This file only holds what Tailwind can't express: CSS variables, keyframe animations, ::before/ ::after pseudo-elements, and a handful of custom component classes (.btn, .card-hover, .reveal, ...) used as class="..." throughout the HTML. Sections in this file: 1. Brand variables + base resets 2. Language toggle (.ar / .en show/hide) 3. Scroll-reveal animation 4. Decorative section backgrounds (dot texture) 5. Buttons (.btn, .btn-primary, .btn-ghost) 6. Cards (.card-hover — service cards, mission/vision cards) 7. Gallery + lightbox 8. Nav underline + active-link state 9. Misc widgets (counters, back-to-top, floaty arrow) 10. Clients marquee 11. Scrollbar + header shadow + section divider ============================================================================ */ /* Brand colors as CSS variables, used by the custom classes below (.btn-primary, .card-hover, .nav-link, etc.). IMPORTANT: these must match the colors.primary / colors.accent / colors.ink values in index.html's tailwind.config — if you change the brand palette, update BOTH places or colors will look inconsistent between Tailwind classes (bg-primary) and these custom rules (var(--brand-blue)). */ :root{ --ease-out-expo: cubic-bezier(.16,1,.3,1); /* snappy-start, gentle-stop easing for reveals/hovers */ --ease-soft: cubic-bezier(.4,0,.2,1); /* smoother easing for color/opacity transitions */ --brand-blue: #2b75ba; --brand-navy: #0f2338; --brand-green: #3fae59; } html{ scroll-behavior:smooth; } body{ font-family:'Cairo', sans-serif; } /* Bilingual show/hide: every string on the page is written twice, wrapped in and . Whichever doesn't match the current language (set on by script.js's language toggle) is hidden here. */ .lang-en .ar{ display:none !important; } .lang-ar .en{ display:none !important; } /* ---------- selection & focus ---------- */ ::selection{ background:var(--brand-blue); color:#fff; } a, button{ transition:all .35s var(--ease-soft); } /* ---------- reveal on scroll ---------- */ /* Starting state for any element with class="reveal": invisible + shifted down. script.js watches these with an IntersectionObserver and adds .in once each element scrolls into view, which triggers the transition below. Elements already carrying "in" in their class list in the HTML (e.g. the Hero text) skip the animation and show immediately on page load. */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); will-change:transform,opacity; } .reveal.in{ opacity:1; transform:translateY(0); } .reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; } .reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; } .bg-hero-overlay{ background:linear-gradient(180deg, rgba(15,35,56,.5) 0%, rgba(15,35,56,.72) 55%, rgba(15,35,56,.97) 100%); } /* ---------- section texture: faint recycle-arrow watermark ---------- */ .section-texture{ position:relative; isolation:isolate; } .section-texture::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 24 24' fill='none' stroke='%232b75ba' stroke-width='1.1'%3E%3Cpath d='M4 7h11l-2-2m2 2-2 2M20 17H9l2 2m-2-2 2-2M6 12l3-5h6l3 5-3 5H9l-3-5Z' opacity='0'/%3E%3C/svg%3E"); opacity:.04; background-size:340px; } .section-texture--dots::before{ background-image:radial-gradient(circle, rgba(43,117,186,.16) 1.4px, transparent 1.4px); background-size:26px 26px; opacity:.5; -webkit-mask-image:radial-gradient(ellipse 60% 60% at 85% 15%, black 0%, transparent 70%); mask-image:radial-gradient(ellipse 60% 60% at 85% 15%, black 0%, transparent 70%); } /* ---------- buttons ---------- */ .btn{ position:relative; overflow:hidden; isolation:isolate; } .btn::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(120px 60px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 70%); transition:opacity .4s var(--ease-soft); } .btn:hover::before{ opacity:1; } .btn-primary{ background:linear-gradient(135deg, var(--brand-blue), #215d95); box-shadow:0 8px 24px -8px rgba(43,117,186,.55); } .btn-primary:hover{ box-shadow:0 14px 32px -8px rgba(43,117,186,.7); transform:translateY(-2px); } .btn-ghost:hover{ transform:translateY(-2px); } .btn-arrow{ display:inline-block; transition:transform .4s var(--ease-out-expo); } .btn:hover .btn-arrow{ transform:translateX(4px); } .lang-ar .btn:hover .btn-arrow{ transform:translateX(-4px); } /* ---------- cards ---------- */ .card-hover{ transition:transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo), border-color .45s var(--ease-soft); position:relative; } .card-hover:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -18px rgba(15,35,56,.28); border-color:var(--brand-blue) !important; } .card-hover .icon-wrap{ transition:transform .45s var(--ease-out-expo), background-color .45s var(--ease-soft), color .45s var(--ease-soft); } .card-hover:hover .icon-wrap{ transform:scale(1.1) rotate(-6deg); background-color:var(--brand-blue); color:#fff; } .card-hover::after{ content:''; position:absolute; top:0; right:0; left:0; height:3px; border-radius:0 0 999px 999px; background:linear-gradient(90deg, var(--brand-blue), var(--brand-green)); transform:scaleX(0); transform-origin:center; transition:transform .45s var(--ease-out-expo); } .card-hover:hover::after{ transform:scaleX(1); } /* ---------- gallery ---------- */ .gallery-item{ cursor:zoom-in; } .gallery-item img{ transition:transform .6s var(--ease-out-expo), filter .5s ease; } .gallery-item:hover img{ filter:brightness(.85) saturate(1.1); } .play-badge span{ transition:transform .4s var(--ease-out-expo); } .gallery-item:hover .play-badge span{ transform:scale(1.12); } #lightbox{ backdrop-filter:blur(10px); transition:opacity .3s ease; } #lightboxMedia img, #lightboxMedia video{ animation:lightbox-in .4s var(--ease-out-expo); } @keyframes lightbox-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } /* ---------- nav ---------- */ .nav-link{ position:relative; color:#0f2338; } .nav-link::after{ content:''; position:absolute; bottom:-4px; right:0; left:auto; width:0; height:2px; background:linear-gradient(90deg, var(--brand-blue), var(--brand-green)); transition:width .35s var(--ease-out-expo); } .lang-en .nav-link::after{ right:auto; left:0; } .nav-link:hover::after, .nav-link.active::after{ width:100%; } .nav-link.active{ color:var(--brand-blue); } /* ---------- misc ---------- */ .stat-num{ font-variant-numeric:tabular-nums; } .spin-slow{ animation:spin-slow 7s linear infinite; } @keyframes spin-slow{ to{ transform:rotate(360deg); } } .float-y{ animation:float-y 4.5s ease-in-out infinite; } @keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } #backToTop{ opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft); } #backToTop.show{ opacity:1; pointer-events:auto; transform:translateY(0); } /* Client logos strip: index.html lists the chips twice back-to-back inside #clientsTrack (static HTML, not JS-generated), then this animation slides the whole thing left by exactly 50% (= the width of one copy) on a loop, so it appears to scroll forever with no visible seam. Increase the "32s" to slow it down. ".marquee-wrap{ direction:ltr }" below is required, not decorative: #clientsTrack is much wider than its wrapper (it holds 40 chips). Per the CSS spec, when a block box is wider than its containing block, which edge it anchors to (and where the overflow spills) is decided by the DIRECTION OF THE PARENT (the containing block), not the direction of the box itself — so the fix has to be set on the parent (.marquee-wrap, the
that directly wraps #clientsTrack in index.html), not on #clientsTrack/ .marquee-track. (An earlier attempt set direction:ltr on .marquee-track itself, which per this same spec rule has no effect on the anchor side — that's why it didn't fully fix the Arabic-mode bug.) Without this, in Arabic mode () the track anchors to its parent's RIGHT edge instead of the left, throwing off which portion is visible and where the animation starts from. Do not remove this, and do not "simplify" it back onto .marquee-track — it must stay on the wrapper. (No animation-direction:reverse and no :hover-pause either — both were tried earlier and made things worse/more confusing for the same reason.) */ .marquee-wrap{ direction:ltr; } .marquee-track{ animation:marquee 32s linear infinite; } /* No :hover{ animation-play-state:paused } rule on purpose — it used to pause the strip on mouse-over so visitors could read a name, but the track spans the full section width, so the cursor resting anywhere over it froze the whole thing. That read as "it plays once then stops." Removed so the strip never stops moving under any circumstance. */ @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* Chip appearance is plain CSS (not Tailwind utility classes) on purpose — see the Clients section comment in index.html for why. */ .client-chip{ display:inline-block; flex-shrink:0; background:#fff; border:1px solid #e2e8f0; color:var(--brand-navy); font-size:.875rem; font-weight:700; white-space:nowrap; padding:.875rem 1.5rem; border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft), color .35s var(--ease-soft); } .client-chip:hover{ transform:translateY(-4px); box-shadow:0 14px 26px -12px rgba(15,35,56,.25); border-color:var(--brand-blue); color:var(--brand-blue); } ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#eef2f6; } ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--brand-blue), var(--brand-green)); border-radius:8px; } /* Added to
by script.js once the page is scrolled past ~40px */ header.scrolled{ box-shadow:0 8px 24px -16px rgba(15,35,56,.25); } /* Thin decorative gradient line used once, between the Gallery and Clients sections in index.html, wrapped in
. */ .brand-divider{ height:3px; max-width:220px; margin-inline:auto; border-radius:999px; background:linear-gradient(90deg, transparent, var(--brand-blue), var(--brand-green), transparent); }