/* ============================================================ Oula Wasata — Cinematic scroll experience (homepage only) Layered on top of style.css. Scoped to body.cine Navy #1E3D7D · Azure #0082B6 · Void #060B18 ============================================================ */ :root { --void: #060B18; --void-2: #0A1226; --void-3: #0E1B3A; --ink: #E9EFF9; --ink-dim: #9FB0CC; --azure-glow: #29ABE2; --gold: #C9A96A; --display-font: 'Fraunces', Georgia, 'Times New Roman', serif; } html[lang="ar"] body.cine { --display-font: 'Tajawal', 'Segoe UI', system-ui, sans-serif; } body.cine { background: var(--void); } /* Lenis companion CSS — required so native (keyboard / assistive-tech) scrolling is adopted instead of fought. Lenis adds .lenis/.lenis-smooth to . */ html.lenis, html.lenis body { height: auto; } html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ticker { position: relative; } .ticker-label { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0; background: var(--gold); color: #0A1226; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 10px 2px; z-index: 1; border-start-end-radius: 6px; border-end-end-radius: 6px; } html[lang="ar"] .ticker-label { letter-spacing: .02em; } /* ---------- Header over the void ---------- */ body.cine .site-header { background: rgba(6, 11, 24, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(41, 171, 226, 0.12); transition: background .35s ease; } body.cine .site-header .main-nav a { color: var(--ink); } body.cine .site-header .main-nav a:hover, body.cine .site-header .main-nav a.active { color: var(--azure-glow); border-bottom-color: var(--azure-glow); } body.cine .lang-switch { color: var(--ink); border-color: rgba(233, 239, 249, 0.25); } body.cine .lang-switch:hover { color: var(--azure-glow); border-color: var(--azure-glow); } body.cine .nav-toggle { color: var(--ink); } body.cine .btn-outline { border-color: var(--azure-glow); color: var(--azure-glow); } body.cine .btn-outline:hover { background: var(--azure-glow); color: var(--void); } body.cine .topbar { background: #04070F; } /* Mobile nav drop-down needs a solid dark panel on the cinematic page */ @media (max-width: 960px) { body.cine .main-nav { background: var(--void-2); } } /* ---------- Shared dark-section chrome ---------- */ .cine-dark { background: var(--void); color: var(--ink); position: relative; } .cine-dark h2, .cine-dark h3 { color: #fff; } .cine-dark .eyebrow { color: var(--azure-glow); } .cine-display { font-family: var(--display-font); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.12; } html[lang="ar"] .cine-display { font-weight: 800; letter-spacing: 0; line-height: 1.3; } .cine-lead { color: var(--ink-dim); font-size: 1.08rem; max-width: 560px; } .cine-note { color: var(--ink-dim); font-size: .78rem; letter-spacing: .04em; } /* ============================================================ 1 · HERO — pinned canvas frame scrub ============================================================ */ .cine-hero { position: relative; background: var(--void); } .cine-hero .pin-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .cine-hero canvas, .cine-hero .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cine-hero .hero-poster { object-fit: cover; } .hero-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 45%, transparent 55%, rgba(6,11,24,.72) 100%), linear-gradient(to top, rgba(6,11,24,.88) 0%, transparent 26%); } .hero-copy { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6vw 9vh; pointer-events: none; } .hero-copy > * { pointer-events: auto; } .hero-copy .eyebrow { color: var(--azure-glow); margin-bottom: 14px; } .hero-copy h1 { font-family: var(--display-font); color: #fff; font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 4.4rem); line-height: 1.08; max-width: 15em; margin: 0; } html[lang="ar"] .hero-copy h1 { font-weight: 800; line-height: 1.28; } .hero-copy .cine-lead { margin: 18px 0 28px; } .hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero-scroll-hint { position: absolute; bottom: 22px; inset-inline-end: 6vw; z-index: 3; color: var(--ink-dim); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } html[lang="ar"] .hero-scroll-hint { letter-spacing: .04em; } .hero-scroll-hint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--azure-glow), transparent); animation: hint-drop 2.2s ease-in-out infinite; } @keyframes hint-drop { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } } /* second act of the hero scrub — line that fades in mid-orbit */ .hero-act { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8vw; pointer-events: none; opacity: 0; } .hero-act p { font-family: var(--display-font); color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 500; max-width: 22em; line-height: 1.3; } html[lang="ar"] .hero-act p { font-weight: 700; } /* ============================================================ 2 · HERITAGE — Four decades of trust ============================================================ */ .cine-heritage { padding: 16vh 0 12vh; background: linear-gradient(to bottom, var(--void) 0%, var(--void-2) 100%); } .heritage-head { max-width: 760px; margin: 0 auto 10vh; text-align: center; padding: 0 24px; } .era-rail { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; } .era-rail::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 43px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(41,171,226,.45) 12%, rgba(41,171,226,.45) 88%, transparent); } .era { display: flex; gap: 34px; padding: 5vh 0; align-items: flex-start; } .era-year { flex: 0 0 40px; text-align: center; position: relative; z-index: 1; font-family: var(--display-font); color: var(--azure-glow); font-size: 1.05rem; font-weight: 600; padding-top: 2px; } .era-year::after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--azure-glow); box-shadow: 0 0 14px rgba(41,171,226,.9); margin: 12px auto 0; } .era-body h3 { font-family: var(--display-font); font-size: 1.5rem; margin-bottom: 8px; font-weight: 600; } html[lang="ar"] .era-body h3 { font-weight: 700; } .era-body p { color: var(--ink-dim); max-width: 560px; } /* ============================================================ 3 · PLATFORM — macro scrub + feature stops ============================================================ */ .cine-platform .pin-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .cine-platform canvas, .cine-platform .macro-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .platform-shade { position: absolute; inset: 0; background: linear-gradient(to inline-end, rgba(6,11,24,.82) 0%, rgba(6,11,24,.45) 38%, transparent 65%); } [dir="ltr"] .platform-shade { background: linear-gradient(90deg, rgba(6,11,24,.85) 0%, rgba(6,11,24,.45) 42%, transparent 68%); } [dir="rtl"] .platform-shade { background: linear-gradient(270deg, rgba(6,11,24,.85) 0%, rgba(6,11,24,.45) 42%, transparent 68%); } .platform-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 6vw; max-width: 640px; } .platform-copy .stop { position: absolute; max-width: 480px; opacity: 0; } .platform-copy .stop h3 { font-family: var(--display-font); font-size: clamp(1.5rem, 2.8vw, 2.3rem); margin-bottom: 12px; font-weight: 600; } html[lang="ar"] .platform-copy .stop h3 { font-weight: 700; } .platform-copy .stop p { color: var(--ink-dim); } .platform-copy .stop .k { color: var(--azure-glow); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 10px; font-weight: 700; } html[lang="ar"] .platform-copy .stop .k { letter-spacing: .03em; } .platform-badges { padding: 10vh 6vw; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: var(--void-2); } .platform-badges .store-badge { border-color: rgba(233,239,249,.2); color: var(--ink); background: rgba(255,255,255,.03); } .platform-badges .store-badge:hover { border-color: var(--azure-glow); color: #fff; } .platform-badges .store-badge .big { color: #fff; } /* ============================================================ 4 · STRENGTH — exploded scrub + spec callouts ============================================================ */ .cine-strength .pin-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .cine-strength canvas, .cine-strength .exploded-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .strength-title { position: absolute; top: 9vh; inset-inline: 0; text-align: center; z-index: 2; padding: 0 24px; } .spec-grid { position: absolute; bottom: 7vh; inset-inline: 0; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 5vw; text-align: center; } .spec { opacity: 0; transform: translateY(18px); } .spec strong { display: block; font-family: var(--display-font); color: #fff; font-size: clamp(1.05rem, 1.9vw, 1.6rem); font-weight: 600; margin-bottom: 4px; } html[lang="ar"] .spec strong { font-weight: 700; } .spec span { color: var(--ink-dim); font-size: .78rem; letter-spacing: .05em; } .spec::before { content: ""; display: block; width: 26px; height: 1px; background: var(--gold); margin: 0 auto 12px; opacity: .8; } /* ============================================================ 5 · LEADERSHIP & GOVERNANCE ============================================================ */ .cine-leaders { padding: 14vh 0 10vh; background: linear-gradient(to bottom, var(--void-2), var(--void)); } .leaders-head { text-align: center; max-width: 720px; margin: 0 auto 8vh; padding: 0 24px; } .leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .leader-grid.execs { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-top: 26px; } .leader { position: relative; border-radius: 14px; overflow: hidden; background: var(--void-3); } .leader .frame { position: relative; aspect-ratio: 4/5; overflow: hidden; } .leader img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) brightness(.92) contrast(1.06); transform: scale(1.12); will-change: transform; } .leader .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(30,61,125,.55), rgba(6,11,24,.55) 70%), linear-gradient(to top, rgba(6,11,24,.92), transparent 45%); mix-blend-mode: normal; } .leader .frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(41,171,226,.28), transparent 55%); mix-blend-mode: overlay; } .leader figcaption { position: absolute; bottom: 0; inset-inline: 0; z-index: 2; padding: 16px 18px; } .leader figcaption strong { color: #fff; display: block; font-size: .98rem; } .leader figcaption span { color: var(--ink-dim); font-size: .8rem; } .gov-band { max-width: 1180px; margin: 10vh auto 0; padding: 30px 32px; border: 1px solid rgba(41,171,226,.25); border-radius: 16px; background: rgba(14,27,58,.35); display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .gov-band p { color: var(--ink-dim); max-width: 640px; font-size: .95rem; } .gov-band .gov-links { display: flex; gap: 18px; flex-wrap: wrap; } .gov-band a { color: var(--azure-glow); font-weight: 600; font-size: .92rem; } .gov-band a:hover { color: #fff; } /* ============================================================ 6+7 · CONVERSION — light zone (steps, CTA) ============================================================ */ .light-zone { background: var(--bg); position: relative; } .void-to-light { height: 14vh; background: linear-gradient(to bottom, var(--void), var(--bg)); } /* Atmosphere film strip between dark and light */ .cine-atmos { position: relative; height: 72vh; overflow: hidden; background: var(--void); } .cine-atmos video, .cine-atmos img.atmos-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cine-atmos .atmos-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at center, transparent 30%, rgba(6,11,24,.55) 100%); padding: 0 8vw; } .cine-atmos .atmos-caption p { font-family: var(--display-font); color: #fff; font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 2.1rem); max-width: 24em; } html[lang="ar"] .cine-atmos .atmos-caption p { font-weight: 700; } /* ---------- Reveal primitives ---------- .rv elements are visible by default; GSAP animates them FROM a hidden state only when the full experience is running. .spec / .stop / .hero-act are timeline-driven, so they ship hidden and are forced visible in static-mode and no-js. */ .static-mode .spec, .no-js .spec { opacity: 1; transform: none; } .static-mode .platform-copy .stop, .no-js .platform-copy .stop { position: static; opacity: 1; margin-bottom: 34px; } .static-mode .hero-act, .no-js .hero-act { display: none; } /* ---------- Static / reduced-motion mode ---------- */ .static-mode .pin-stage { height: auto; min-height: 60vh; } .static-mode .cine-hero .pin-stage { height: 92vh; } .static-mode canvas { display: none; } .hero-poster, .macro-poster, .exploded-poster { display: none; } .static-mode .hero-poster, .static-mode .macro-poster, .static-mode .exploded-poster, .no-js .hero-poster, .no-js .macro-poster, .no-js .exploded-poster { display: block; } .static-mode .cine-platform .pin-stage { height: 100vh; } /* static/mobile: strength section flows normally — the exploded poster becomes a banner between title and specs instead of a full-viewport backdrop that collides with the text on narrow screens */ .static-mode .cine-strength .pin-stage { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; background: var(--void-2); padding-bottom: 9vh; } .static-mode .cine-strength .strength-title { position: static; order: 0; padding: 11vh 24px 5vh; } .static-mode .cine-strength .exploded-poster { position: static; order: 1; width: 100%; height: 46vh; object-fit: cover; } .static-mode .cine-strength .spec-grid { position: static; order: 2; margin-top: 6vh; } .static-mode .hero-scroll-hint::after { animation: none; } @media (prefers-reduced-motion: reduce) { .hero-scroll-hint::after { animation: none; } .ticker-track { animation: none; padding-inline-start: 0; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .spec-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; } } @media (max-width: 900px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } .leader-grid.execs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { /* static mobile hero: keep the device visible but let the copy win */ .static-mode .cine-hero .hero-poster { opacity: .42; object-position: 72% 24%; } /* ---- full cinematic on phones (body.cine-mobile) ---- */ /* deepen the bottom vignette so hero copy stays readable over the render */ .cine-mobile .hero-vignette { background: radial-gradient(ellipse 120% 66% at 50% 38%, transparent 48%, rgba(6,11,24,.78) 100%), linear-gradient(to top, rgba(6,11,24,.94) 0%, rgba(6,11,24,.5) 22%, transparent 40%); } .cine-mobile .hero-copy { padding-bottom: 12vh; } /* platform: shade from the bottom (portrait) instead of the side */ .cine-mobile .platform-shade { background: linear-gradient(to top, rgba(6,11,24,.9) 0%, rgba(6,11,24,.55) 42%, transparent 72%) !important; } .cine-mobile .platform-copy { justify-content: flex-end; padding-bottom: 13vh; max-width: none; } .cine-mobile .platform-copy .stop { max-width: 86vw; } /* strength: keep the pinned scene but compact the callouts */ .cine-mobile .strength-title { top: 12vh; } .cine-mobile .spec-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; bottom: 5vh; } .cine-mobile .spec strong { font-size: .95rem; } .cine-mobile .spec span { font-size: .66rem; letter-spacing: .02em; } .cine-mobile .spec::before { margin-bottom: 8px; } } @media (max-width: 640px) { .hero-copy { padding-bottom: 14vh; } .spec-grid { grid-template-columns: repeat(2, 1fr); } .era-rail::before { inset-inline-start: 19px; } .era { gap: 20px; } .era-year { flex-basis: 30px; font-size: .9rem; } .gov-band { padding: 22px; } .platform-copy .stop { max-width: 86vw; } }