/* Light is the default theme: it lives in :root, so it is also what renders with JavaScript disabled. Dark is the override. app.js sets before first paint. */ :root { /* ---- surface ramp -------------------------------------------------- */ --bg: #f4f8f7; --bg-elev: #ffffff; --bg-elev-2: #e9f1ef; --surface: rgba(8, 45, 48, .040); --surface-hover: rgba(8, 45, 48, .075); --surface-strong:rgba(8, 45, 48, .065); --line: rgba(8, 60, 62, .13); --line-strong: rgba(8, 60, 62, .24); /* ---- ink ramp ------------------------------------------------------ */ --ink: #082027; --ink-soft: #26454c; --muted: #56767b; --muted-dim: #547174; /* 4.8:1 on --bg, 5.2:1 on a card */ /* ---- brand --------------------------------------------------------- */ /* --mint is the *accent* — text, icons, borders — and is much deeper here than the brand mint, because #2bdcaf on white is about 1.7:1. --grad is a *fill* carrying near-black text, so it stays bright in both themes. --grad-text is the gradient used for clipped headline text and does track the theme. */ --mint: #067a62; --mint-bright: #14c69c; --cyan: #0f8fb8; --blue: #1a6fe0; --grad: linear-gradient(120deg, #86ffe1 0%, #2bdcaf 42%, #35c9ee 100%); --grad-text: linear-gradient(120deg, #0cc194 0%, #06967a 45%, #0d8bb4 100%); --grad-soft: linear-gradient(120deg, rgba(6,122,98,.13), rgba(15,143,184,.13)); --accent-wash: rgba(6, 122, 98, .10); --accent-edge: rgba(6, 122, 98, .28); --accent-faint: rgba(6, 122, 98, .055); /* ---- composed surfaces --------------------------------------------- */ --card-bg: linear-gradient(165deg, #ffffff, rgba(255,255,255,.72)); --header-bg: rgba(244, 248, 247, .86); --drawer-bg: rgba(244, 248, 247, .98); --float-bg: rgba(255, 255, 255, .94); --glass-bg: rgba(255, 255, 255, .72); --overlay: rgba(12, 34, 38, .42); --core-bg: radial-gradient(circle at 32% 28%, rgba(20,198,156,.28), rgba(255,255,255,.94) 66%); --input-bg: #fbfdfd; --input-bg-focus: #ffffff; --input-border: rgba(8, 60, 62, .20); --shot-border: rgba(8, 60, 62, .18); --shot-shadow: 0 2px 8px rgba(8, 45, 48, .07); --marquee-bg: rgba(255, 255, 255, .60); --logo-ink: #10100f; --fig-bg: rgba(8, 45, 48, .028); --fig-dot: rgba(8, 60, 62, .11); --tag-shadow: 0 18px 44px -20px rgba(8, 45, 48, .28); --grid-line: rgba(8, 70, 72, .07); --scrim: linear-gradient(180deg, transparent 62%, rgba(8,32,39,.28)); --cta-bg: linear-gradient(140deg, rgba(6,122,98,.12), rgba(15,143,184,.07) 55%, rgba(255,255,255,.9)); --footer-bg: linear-gradient(180deg, transparent, rgba(6, 122, 98, .05)); --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356767b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --selection: rgba(6, 122, 98, .22); --canvas-op: .58; --aura-op: .38; --ok-bg: rgba(6,122,98,.10); --ok-edge: rgba(6,122,98,.36); --ok-ink: #045243; --err-bg: rgba(200,40,40,.07); --err-edge: rgba(200,40,40,.28); --err-ink: #a52020; --shadow-sm: 0 2px 8px rgba(8, 45, 48, .07); --shadow: 0 18px 44px -20px rgba(8, 45, 48, .28); --shadow-lg: 0 40px 80px -32px rgba(8, 45, 48, .34); --btn-shadow: 0 12px 28px -12px rgba(6, 122, 98, .48); --btn-shadow-hover: 0 18px 40px -12px rgba(6, 122, 98, .62); /* ---- type ---------------------------------------------------------- */ /* Tajawal carries both Latin and Arabic, so EN and AR read as one family — same choice as the TradingAgents / alistocks front ends. */ --font: "Tajawal", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; --font-ar: "Tajawal", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif; --font-num:"Tajawal", "Noto Sans Arabic", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ---- metrics ------------------------------------------------------- */ --wrap: 1200px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-pill: 999px; --header-h: 76px; --ease: cubic-bezier(.22, 1, .36, 1); --dur: .5s; color-scheme: light; } /* =============================================================== DARK THEME Only tokens change — no component rule is duplicated, so the two themes cannot drift apart. */ [data-theme="dark"] { --bg: #050c0f; --bg-elev: #08151a; --bg-elev-2: #0b1d23; --surface: rgba(255, 255, 255, .034); --surface-hover: rgba(255, 255, 255, .058); --surface-strong:rgba(255, 255, 255, .06); --line: rgba(148, 214, 202, .13); --line-strong: rgba(148, 214, 202, .26); --ink: #ecfaf6; --ink-soft: #c2d8d4; --muted: #85a2a0; --muted-dim: #6f8d8c; /* 5.5:1 on --bg — small text needs 4.5 */ --mint: #2bdcaf; --mint-bright: #86ffe1; --cyan: #35c9ee; --blue: #2f8cff; --grad-text: var(--grad); --grad-soft: linear-gradient(120deg, rgba(134,255,225,.14), rgba(53,201,238,.14)); --accent-wash: rgba(43, 220, 175, .10); --accent-edge: rgba(43, 220, 175, .24); --accent-faint: rgba(43, 220, 175, .045); --card-bg: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); --header-bg: rgba(5, 12, 15, .82); --drawer-bg: rgba(5, 12, 15, .97); --float-bg: rgba(8, 21, 26, .90); --glass-bg: rgba(255, 255, 255, .034); --overlay: rgba(2, 7, 9, .82); --core-bg: radial-gradient(circle at 32% 28%, rgba(134,255,225,.30), rgba(5,12,15,.94) 66%); --input-bg: rgba(0, 0, 0, .26); --input-bg-focus: rgba(0, 0, 0, .40); --input-border: rgba(148, 214, 202, .13); --shot-border: rgba(148, 214, 202, .13); --shot-shadow: none; --marquee-bg: rgba(255, 255, 255, .015); --logo-ink: #f2f6f5; --fig-bg: rgba(0, 0, 0, .22); --fig-dot: rgba(148, 214, 202, .10); --tag-shadow: 0 2px 10px rgba(0, 0, 0, .3); --grid-line: rgba(148, 214, 202, .055); --scrim: linear-gradient(180deg, transparent 55%, rgba(5,12,15,.55)); --cta-bg: linear-gradient(140deg, rgba(43,220,175,.14), rgba(53,201,238,.08) 55%, rgba(255,255,255,.02)); --footer-bg: linear-gradient(180deg, transparent, rgba(43, 220, 175, .035)); --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385a2a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --selection: rgba(43, 220, 175, .30); --canvas-op: .85; --aura-op: .5; --ok-bg: rgba(43,220,175,.11); --ok-edge: rgba(43,220,175,.34); --ok-ink: #a8f5df; --err-bg: rgba(255,107,107,.10); --err-edge: rgba(255,107,107,.32); --err-ink: #ffb3b3; --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3); --shadow: 0 18px 50px -18px rgba(0, 0, 0, .75); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85); --btn-shadow: 0 12px 34px -12px rgba(43, 220, 175, .70); --btn-shadow-hover: 0 18px 46px -12px rgba(43, 220, 175, .85); color-scheme: dark; } /* ------------------------------------------------------------------ 2 base */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; overflow-x: clip; /* clip does not create a scroll container */ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); transition: background-color .38s var(--ease), color .38s var(--ease); font-family: var(--font); font-size: 16px; line-height: 1.62; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; line-height: 1.16; letter-spacing: -.018em; font-weight: 800; } p { margin: 0; } ::selection { background: var(--selection); color: var(--ink); } :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; } .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; } .skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200; padding: 12px 20px; border-radius: var(--r-sm); background: var(--mint); color: #04211a; font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 16px; } /* ---------------------------------------------------------------- 3 layout */ .wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; } .section { position: relative; padding: clamp(72px, 9vw, 130px) 0; overflow: hidden; overflow: clip; } .section + .section { padding-top: 0; } .section--tight { padding-block: clamp(56px, 6vw, 88px); } .section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } .section-head--start { margin-inline: 0; text-align: start; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 18px; } .eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); } .eyebrow::after { background: linear-gradient(270deg, transparent, var(--line-strong)); } .section-head--start .eyebrow::before, .section-head--start .eyebrow::after { display: none; } .section-title { font-size: clamp(31px, 4.6vw, 55px); margin-bottom: 18px; } .section-title .hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .section-sub { color: var(--muted); font-size: clamp(15px, 1.5vw, 17.5px); max-width: 62ch; margin-inline: auto; } .section-head--start .section-sub { margin-inline: 0; } /* ambient background ornaments */ .aura { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: var(--aura-op); pointer-events: none; } .aura--mint { background: radial-gradient(circle, rgba(43,220,175,.42), transparent 68%); } .aura--cyan { background: radial-gradient(circle, rgba(53,201,238,.30), transparent 68%); } .aura--blue { background: radial-gradient(circle, rgba(47,140,255,.24), transparent 68%); } .grid-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 78%); } /* ------------------------------------------------------------ 4 components */ /* --- buttons --- */ .btn { --btn-pad: 14px 26px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-pad); border-radius: var(--r-pill); font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .ico { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--grad); color: #032019; box-shadow: var(--btn-shadow); } .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: linear-gradient(120deg, #fff, var(--mint-bright) 45%, var(--cyan)); transition: opacity .28s var(--ease); } .btn--primary:hover::after { opacity: 1; } .btn--primary:hover { box-shadow: var(--btn-shadow-hover); } .btn--ghost { background: var(--glass-bg); border: 1px solid var(--line-strong); color: var(--ink); backdrop-filter: blur(8px); } .btn--ghost:hover { background: var(--surface-hover); border-color: var(--mint); color: var(--ink); } .btn--wide { width: 100%; } .btn--sm { --btn-pad: 10px 18px; font-size: 13.5px; } /* arrow that flips with direction */ .arrow { transition: transform .28s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } [dir="rtl"] .arrow { transform: scaleX(-1); } [dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); } /* --- cards --- */ .card { position: relative; isolation: isolate; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .38s var(--ease); overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-wash), transparent 62%); transition: opacity .45s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); } .card:hover::before { opacity: 1; } /* --- chips / tags --- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent-wash); border: 1px solid var(--accent-edge); color: var(--mint); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; } .chip--plain { background: var(--surface); border-color: var(--line); color: var(--ink-soft); } /* --- badge dot --- */ .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 0 4px var(--accent-wash); } .dot--live { animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-edge); } 50% { box-shadow: 0 0 0 8px transparent; } } /* ---------------------------------------------------------------- 5 header */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 90; height: var(--header-h); display: flex; align-items: center; transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s; border-bottom: 1px solid transparent; } .site-header.is-stuck { background: var(--header-bg); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line); } .header-inner { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; display: flex; align-items: center; gap: 22px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; } .brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--grad); color: #032019; font-size: 21px; font-weight: 800; line-height: 1; box-shadow: 0 10px 26px -10px rgba(43, 220, 175, .85); } .brand-name { font-size: 23px; letter-spacing: -.016em; } .brand-name span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .nav a { position: relative; padding: 9px 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600; color: var(--ink-soft); transition: color .25s var(--ease), background-color .25s var(--ease); } .nav a:hover { color: var(--ink); background: var(--surface); } .nav a.is-active { color: var(--mint); } .nav a.is-active::after { content: ""; position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); } .header-actions { display: flex; align-items: center; gap: 10px; } .lang-switch { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); } .lang-switch button { padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted); transition: color .25s var(--ease), background .25s var(--ease); } .lang-switch button[aria-pressed="true"] { background: var(--grad); color: #032019; } .lang-switch button:not([aria-pressed="true"]):hover { color: var(--ink); } /* Theme toggle. Both icons are always in the DOM and cross-fade, so the button never reflows and there is nothing to swap on click. */ .theme-toggle { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .theme-toggle:hover { color: var(--mint); border-color: var(--line-strong); background: var(--surface-hover); } .theme-toggle .ico { position: absolute; width: 19px; height: 19px; transition: opacity .3s var(--ease), transform .45s var(--ease); } /* The button offers the theme you are *not* in. Light is the default, so the moon shows first. */ .theme-toggle .ico-sun { opacity: 0; transform: rotate(70deg) scale(.5); } .theme-toggle .ico-moon { opacity: 1; transform: none; } [data-theme="dark"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(-70deg) scale(.5); } [data-theme="dark"] .theme-toggle .ico-sun { opacity: 1; transform: none; } .burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); place-items: center; } .burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); } .burger span + span { margin-top: 4px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 95; background: var(--drawer-bg); backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 90px 32px 40px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; } .drawer.is-open { opacity: 1; visibility: visible; transform: none; } .drawer a { color: var(--ink); padding: 15px 4px; font-size: 25px; font-weight: 800; letter-spacing: -.016em; border-bottom: 1px solid var(--line); } .drawer a:hover { color: var(--mint); } .drawer .drawer-cta { margin-top: 26px; border: 0; } /* ------------------------------------------------------------------ 6 hero */ .hero { position: relative; min-height: min(100svh, 900px); display: flex; align-items: center; padding: calc(var(--header-h) + 56px) 0 72px; overflow: hidden; } #hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: var(--canvas-op); } .hero .aura--mint { width: 620px; height: 620px; top: -180px; inset-inline-end: -160px; } .hero .aura--blue { width: 520px; height: 520px; bottom: -220px; inset-inline-start: -180px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--ink-soft); backdrop-filter: blur(8px); margin-bottom: 26px; } [dir="rtl"] .hero-badge { padding: 8px 10px 8px 16px; } .hero h1 { font-size: clamp(36px, 5.2vw, 64px); letter-spacing: -.022em; line-height: 1.12; max-width: 15ch; margin-bottom: 24px; } .hero h1 .hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-lede { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); max-width: 56ch; margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 40px; } .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 26px; border-top: 1px solid var(--line); } .hero-trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); font-weight: 600; } .hero-trust-item svg { width: 16px; height: 16px; color: var(--mint); flex: none; } /* orbit visual */ .orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; margin-inline: auto; display: grid; place-items: center; } .orbit-ring { position: absolute; border-radius: 50%; border: 1px solid var(--line); inset: 0; } .orbit-ring:nth-child(2) { inset: 13%; border-color: rgba(148,214,202,.1); } .orbit-ring:nth-child(3) { inset: 26%; border-style: dashed; border-color: rgba(148,214,202,.14); } .orbit-spin { position: absolute; inset: 0; animation: spin 34s linear infinite; } .orbit-spin--rev { inset: 13%; animation: spin 26s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } .orbit-sat { position: absolute; top: -13px; inset-inline-start: calc(50% - 13px); width: 26px; height: 26px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 22px rgba(43, 220, 175, .8); } .orbit-spin--rev .orbit-sat { background: linear-gradient(120deg, var(--cyan), var(--blue)); box-shadow: 0 0 22px rgba(53, 201, 238, .8); width: 18px; height: 18px; top: -9px; inset-inline-start: calc(50% - 9px); } .orbit-core { position: relative; width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--core-bg); border: 1px solid var(--line-strong); box-shadow: inset 0 0 60px var(--accent-wash), 0 30px 80px -30px var(--accent-edge); font-size: clamp(36px, 5.6vw, 58px); font-weight: 800; letter-spacing: -.04em; backdrop-filter: blur(6px); } .orbit-core span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .orbit-tag { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 1px; padding: 11px 15px; border-radius: 14px; background: var(--float-bg); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); box-shadow: var(--tag-shadow); animation: float 6s ease-in-out infinite; } .orbit-tag b { font-size: 13px; font-weight: 700; } .orbit-tag i { font-size: 11.5px; font-style: normal; color: var(--muted); } .orbit-tag--1 { top: 4%; inset-inline-start: -4%; } .orbit-tag--2 { top: 30%; inset-inline-end: -8%; animation-delay: -1.5s; } .orbit-tag--3 { bottom: 20%; inset-inline-start: -8%; animation-delay: -3s; } .orbit-tag--4 { bottom: -2%; inset-inline-end: 4%; animation-delay: -4.5s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* --------------------------------------------------------------- 7 marquee */ .marquee { position: relative; padding: 26px 0; border-block: 1px solid var(--line); background: var(--marquee-bg); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; gap: 56px; animation: slide 42s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } @keyframes slide-rtl { to { transform: translateX(50%); } } [dir="rtl"] .marquee-track { animation-name: slide-rtl; } .marquee-item { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .3s var(--ease); } .marquee-item:hover { color: var(--ink); } .marquee-item svg { width: 22px; height: 22px; flex: none; } /* -------------------------------------------------------------- 9 services */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .svc { display: flex; flex-direction: column; gap: 16px; } .svc-icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--mint); } .svc-icon svg { width: 26px; height: 26px; } .svc h3 { font-size: 20.5px; letter-spacing: -.014em; } .svc p { color: var(--muted); font-size: 14.8px; } /* ---- service card diagrams ------------------------------------------------ A small schematic per service, drawn on a dotted canvas so it reads as a wiring diagram rather than decoration. Everything is stroked in theme tokens, so the figures follow light/dark with no duplicate markup. Deliberately text-free — and deliberately NOT mirrored in Arabic. Flipping would reverse the provider logos inside the identity diagram, and technical figures conventionally stay left-to-right in Arabic documents too. */ .svc-fig { position: relative; border-radius: 14px; border: 1px solid var(--line); background-color: var(--fig-bg); background-image: radial-gradient(var(--fig-dot) 1px, transparent 1px); background-size: 13px 13px; padding: 12px 14px; overflow: hidden; margin-top: auto; } .svc-fig svg { display: block; width: 100%; height: auto; overflow: visible; } .fig-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-linecap: round; } .fig-flow { fill: none; stroke: var(--mint); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 5 7; animation: fig-flow 1.9s linear infinite; } @keyframes fig-flow { to { stroke-dashoffset: -24; } } .fig-box { fill: var(--bg-elev); stroke: var(--line-strong); stroke-width: 1.2; } .fig-fill { fill: var(--mint); } .fig-soft { fill: var(--accent-wash); stroke: none; } .fig-ink { fill: var(--muted-dim); } .fig-line { stroke: var(--muted-dim); stroke-width: 2.4; stroke-linecap: round; opacity: .5; } .fig-pulse { transform-box: fill-box; transform-origin: center; animation: fig-pulse 2.9s ease-in-out infinite; } @keyframes fig-pulse { 0%, 100% { transform: scale(.82); opacity: .38; } 50% { transform: scale(1.2); opacity: .05; } } .fig-blink { animation: fig-blink 2.4s ease-in-out infinite; } @keyframes fig-blink { 0%, 100% { opacity: 1; } 50% { opacity: .32; } } .fig-d1 { animation-delay: -.6s; } .fig-d2 { animation-delay: -1.2s; } .fig-d3 { animation-delay: -1.8s; } /* Provider logos on the identity card. They keep their official colours, so they sit on a neutral chip rather than inheriting the accent. */ .brand-marks { display: flex; flex-wrap: wrap; gap: 9px; margin-top: -2px; } .brand-marks span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); transition: transform .28s var(--ease), border-color .28s var(--ease); } .brand-marks span:hover { transform: translateY(-2px); border-color: var(--line-strong); } .brand-marks svg { width: 21px; height: 21px; } .svc-list { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; } .svc-list span { padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 11.8px; font-weight: 600; color: var(--ink-soft); } /* feature (big) cards */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; } .feature { padding: 34px; } .feature .chip { margin-bottom: 20px; } .feature h3 { font-size: 23px; margin-bottom: 12px; letter-spacing: -.016em; } .feature p { color: var(--muted); font-size: 15px; margin-bottom: 20px; } .feature ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; } .feature li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-soft); } .feature li svg { width: 18px; height: 18px; color: var(--mint); flex: none; margin-top: 3px; } /* ------------------------------------------------------------ 10 portfolio */ .filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 42px; } .filter { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; font-weight: 700; color: var(--ink-soft); transition: all .3s var(--ease); } .filter svg { width: 18px; height: 18px; } .filter:hover { border-color: var(--line-strong); color: var(--ink); } .filter[aria-pressed="true"] { background: var(--grad); color: #032019; border-color: transparent; box-shadow: var(--btn-shadow); } .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .work { display: flex; flex-direction: column; gap: 16px; padding: 20px; animation: rise .5s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .work-top { display: flex; align-items: center; gap: 11px; } .work-logo { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--mint); font-weight: 800; font-size: 14px; overflow: hidden; } .work-logo img { width: 100%; height: 100%; object-fit: cover; } .work-top h3 { font-size: 18px; letter-spacing: -.012em; } .work-shot { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-elev-2); border: 1px solid var(--shot-border); box-shadow: var(--shot-shadow); } .work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s var(--ease); } .work:hover .work-shot img { transform: scale(1.05); } .work-shot::after { content: ""; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; } .work-tags { display: flex; flex-wrap: wrap; gap: 7px; } .work-tag { padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-strong); border: 1px solid var(--line); font-size: 11.8px; font-weight: 700; color: var(--ink-soft); } .work p.work-desc { font-size: 14px; color: var(--muted); } .work .btn { margin-top: auto; } .pager { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 42px; } .pager button { min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14.5px; color: var(--ink-soft); transition: all .25s var(--ease); } .pager button:hover:not(:disabled) { border-color: var(--mint); color: var(--ink); } .pager button[aria-current="true"] { background: var(--grad); color: #032019; border-color: transparent; } .pager button:disabled { opacity: .32; cursor: not-allowed; } .pager svg { width: 17px; height: 17px; } [dir="rtl"] .pager svg { transform: scaleX(-1); } /* --- modal --- */ .modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: var(--overlay); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .modal.is-open { opacity: 1; visibility: visible; } .modal-panel { width: min(1120px, 100%); height: min(86vh, 820px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 22px; padding: 22px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.985); transition: transform .35s var(--ease); overflow: hidden; } .modal.is-open .modal-panel { transform: none; } .modal-shot { min-height: 0; border-radius: var(--r); overflow-y: auto; overflow-x: hidden; background: var(--bg-elev-2); border: 1px solid var(--shot-border); scrollbar-width: thin; } .modal-shot img { width: 100%; height: auto; } .modal-side { min-height: 0; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding-inline-end: 4px; } .modal-head { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-radius: var(--r); background: var(--accent-wash); border: 1px solid var(--accent-edge); } .modal-head h3 { font-size: 19px; } .modal-close { width: 44px; height: 44px; flex: none; margin-inline-start: auto; display: grid; place-items: center; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); transition: all .25s var(--ease); } .modal-close:hover { background: rgba(255, 90, 90, .16); border-color: rgba(255,90,90,.4); } .modal-close svg { width: 18px; height: 18px; } .modal-block h4 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; margin-bottom: 9px; color: var(--ink); } .modal-block h4 svg { width: 16px; height: 16px; color: var(--mint); } .modal-block p { font-size: 14.2px; color: var(--muted); } .modal-cta { margin-top: auto; } /* -------------------------------------------------------------- 11 process */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px; } .step { position: relative; padding: 28px 24px; } .step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--mint); letter-spacing: .1em; margin-bottom: 16px; display: block; } .step h3 { font-size: 18.5px; margin-bottom: 9px; letter-spacing: -.012em; } .step p { font-size: 14.2px; color: var(--muted); } .step::after { content: ""; position: absolute; top: 34px; inset-inline-end: -14px; width: 8px; height: 8px; border-top: 2px solid var(--line-strong); border-inline-end: 2px solid var(--line-strong); transform: rotate(45deg); } [dir="rtl"] .step::after { transform: rotate(225deg); } .step:last-child::after { display: none; } /* ---------------------------------------------------------------- 12 about */ .about-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .about-points { display: grid; gap: 16px; margin-top: 28px; } .about-point { display: flex; gap: 15px; align-items: flex-start; } .about-point-ico { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--mint); } .about-point-ico svg { width: 20px; height: 20px; } .about-point b { display: block; font-size: 15.5px; margin-bottom: 3px; } .about-point p { font-size: 14.2px; color: var(--muted); } .stack-cloud { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; } .stack-cloud span { padding: 8px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: all .25s var(--ease); } .stack-cloud span:hover { border-color: var(--mint); color: var(--ink); transform: translateY(-2px); } /* ------------------------------------------------------------------ 13 faq */ .faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .3s var(--ease), background .3s var(--ease); } .faq-item.is-open { border-color: var(--line-strong); background: var(--accent-faint); } .faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 24px; text-align: start; font-size: 16.2px; font-weight: 700; letter-spacing: -.02em; } .faq-q i { margin-inline-start: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--mint); font-style: normal; font-size: 19px; line-height: 1; transition: transform .35s var(--ease), background .3s var(--ease); } .faq-item.is-open .faq-q i { transform: rotate(45deg); background: var(--accent-wash); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { padding: 0 24px 22px; color: var(--muted); font-size: 14.8px; } /* -------------------------------------------------------------- 14 contact */ .contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .contact-cards { display: grid; gap: 13px; } .contact-card { display: flex; align-items: center; gap: 15px; padding: 19px 21px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: all .3s var(--ease); } .contact-card:hover { border-color: var(--mint); background: var(--surface-hover); transform: translateY(-2px); } .contact-card-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--mint); } .contact-card-ico svg { width: 21px; height: 21px; } .contact-card small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .contact-card b { font-size: 15.5px; font-weight: 700; word-break: break-word; } .contact-card[dir="ltr"] b { unicode-bidi: plaintext; } .form-card { padding: clamp(24px, 3vw, 36px); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .field { display: flex; flex-direction: column; gap: 7px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 700; color: var(--ink-soft); } .field label .req { color: var(--mint); } .field input, .field select, .field textarea { width: 100%; padding: 13px 16px; border-radius: 13px; background: var(--input-bg); border: 1px solid var(--input-border); font-size: 14.8px; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { resize: vertical; min-height: 128px; line-height: 1.6; } .field select { appearance: none; background-image: var(--select-caret); background-repeat: no-repeat; background-position: right 15px center; background-size: 17px; padding-inline-end: 42px; } [dir="rtl"] .field select { background-position: left 15px center; padding-inline-end: 16px; padding-inline-start: 42px; } .field select option { background: var(--bg-elev); color: var(--ink); } .field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mint); background: var(--input-bg-focus); box-shadow: 0 0 0 3px var(--accent-wash); } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--err-edge); } .field-error { font-size: 12.4px; color: var(--err-ink); min-height: 0; } .field:not(.has-error) .field-error { display: none; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; } .form-note { font-size: 12.6px; color: var(--muted-dim); flex: 1 1 210px; } .form-status { display: none; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 15px 18px; border-radius: var(--r); font-size: 14.2px; font-weight: 600; } .form-status.is-shown { display: flex; } .form-status svg { width: 19px; height: 19px; flex: none; margin-top: 2px; } .form-status--ok { background: var(--ok-bg); border: 1px solid var(--ok-edge); color: var(--ok-ink); } .form-status--err { background: var(--err-bg); border: 1px solid var(--err-edge); color: var(--err-ink); } .spinner { width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(3, 32, 25, .3); border-top-color: #032019; animation: spin .7s linear infinite; } /* ------------------------------------------------------------------ 15 cta */ .cta-band { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 76px); border-radius: var(--r-lg); background: var(--cta-bg); border: 1px solid var(--line-strong); text-align: center; } .cta-band h2 { font-size: clamp(28px, 4vw, 46px); margin-bottom: 16px; } .cta-band p { color: var(--ink-soft); max-width: 58ch; margin-inline: auto; margin-bottom: 30px; } .cta-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; } /* --------------------------------------------------------------- 16 footer */ .site-footer { border-top: 1px solid var(--line); padding: 58px 0 34px; background: var(--footer-bg); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 38px; margin-bottom: 42px; } .footer-about p { color: var(--muted); font-size: 14.2px; margin: 16px 0 20px; max-width: 40ch; } .footer-col h3 { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 17px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer-col a, .footer-col li { font-size: 14.2px; color: var(--muted); transition: color .25s var(--ease); } .footer-col a:hover { color: var(--mint); } .socials { display: flex; gap: 10px; } .socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); transition: all .25s var(--ease); } .socials a:hover { border-color: var(--mint); color: var(--mint); transform: translateY(-2px); } .socials svg { width: 18px; height: 18px; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13.2px; color: var(--muted-dim); } /* ---------------------------------------------------------- 17 floating UI */ .to-top { position: fixed; z-index: 80; inset-inline-end: 22px; bottom: 22px; /* the WhatsApp pill used to sit here */ width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--float-bg); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); transform: translateY(90px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease), border-color .25s; } .to-top.is-shown { transform: none; opacity: 1; } .to-top:hover { border-color: var(--mint); color: var(--mint); } .to-top svg { width: 19px; height: 19px; } .progress-bar { position: fixed; inset-inline: 0; top: 0; z-index: 100; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); } [dir="rtl"] .progress-bar { transform-origin: 100% 50%; } /* --------------------------------------------------------------- 18 reveal */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* ------------------------------------------------------------------ 19 RTL */ /* Tajawal covers both scripts, so the family never changes — only the optical settings do. Arabic needs looser leading and no negative tracking. */ [dir="rtl"] body { font-family: var(--font-ar); } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.5; /* room for tashkeel above the cap line */ } [dir="rtl"] .section-title { line-height: 1.45; padding-top: .1em; } [dir="rtl"] .hero h1 { line-height: 1.5; letter-spacing: 0; max-width: 17ch; padding-top: .12em; } [dir="rtl"] .eyebrow { letter-spacing: .03em; } [dir="rtl"] .faq-q, [dir="rtl"] .work-top h3, [dir="rtl"] .svc h3, [dir="rtl"] .step h3, [dir="rtl"] .feature h3 { line-height: 1.5; } [dir="rtl"] .btn { letter-spacing: 0; } [dir="rtl"] .step-num { font-family: var(--font-num); } /* keep phone numbers / emails readable in RTL */ [dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; } /* ----------------------------------------------------------- 20 responsive */ @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero h1 { max-width: none; } .hero-lede { margin-inline: auto; } .hero-actions, .hero-trust { justify-content: center; } .orbit { max-width: 400px; order: -1; } .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .modal-panel { grid-template-columns: 1fr; max-height: 90vh; } .modal-shot { max-height: 42vh; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 900px) { .nav { display: none; } .burger { display: grid; margin-inline-start: auto; } .header-actions { gap: 8px; } .header-actions .btn { display: none; } .theme-toggle { width: 38px; height: 38px; } .step::after { display: none; } } @media (max-width: 640px) { :root { --header-h: 66px; } .wrap, .header-inner { width: calc(100% - 32px); } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .work-grid { grid-template-columns: 1fr; } .modal { padding: 12px; } .modal-panel { padding: 14px; } .cta-actions .btn { width: 100%; } .filters { gap: 8px; } .filter { padding: 11px 18px; font-size: 13.5px; } } @media (max-width: 380px) { } /* --------------------------------------------------------- 21 motion / a11y */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } #hero-canvas { display: none; } } @media print { .site-header, .to-top, .progress-bar, .modal, .drawer { display: none !important; } body { background: #fff; color: #000; } } /* --------------------------------------------------- 22 no-JS / fail-safe */ .no-js [data-reveal] { opacity: 1; transform: none; } .no-js .to-top, .no-js .progress-bar { display: none; }