/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── LIGHT is the default theme. The dark palette is applied by setting data-theme="dark" on (see theme.js). Only the values change between themes — no selector anywhere needs to know which theme is active. ------------------------------------------------------------------------- */ :root { /* surfaces */ --obsidian: #F7F9FD; --midnight: #EDF2FA; --deep: #E3EBF7; --smoke: #E8EEF8; --card: #FFFFFF; --surface-hover: #F1F6FD; --gradient-stop: #EEF3FB; --field-bg: #FFFFFF; /* text */ --white: #0B1220; --ice: #14203A; --muted: #5A6A85; --placeholder: rgba(90, 106, 133, 0.65); --on-accent: #FFFFFF; /* lines */ --border: #DCE4F1; --border-soft: rgba(160, 178, 204, 0.55); --border-softer: rgba(160, 178, 204, 0.45); --border-faint: rgba(160, 178, 204, 0.35); --border-track: rgba(160, 178, 204, 0.5); --outline-border: rgba(11, 18, 32, 0.18); /* chrome */ --nav-bg: rgba(247, 249, 253, 0.85); --nav-bg-top: rgba(247, 249, 253, 0); --nav-bg-solid: rgba(255, 255, 255, 0.97); /* neutral tints layered over a surface */ --tint-1: rgba(11, 18, 32, 0.05); --tint-2: rgba(11, 18, 32, 0.03); --tint-3: rgba(11, 18, 32, 0.022); /* accents */ --electric: #0057E0; --cyan: #0286AC; --gold: #8A6000; --mint: #00785A; --danger: #CE2B33; --attention: #B45309; /* problem-section accent — caution, not error */ /* download modal */ --modal-bg: #FFFFFF; --modal-text: #101828; --modal-muted: #667085; --modal-field-bg: #F4F5F7; --modal-field-focus-bg: #FFFFFF; --modal-placeholder: #98A2B3; --modal-scrim: rgba(5, 8, 16, 0.55); --modal-shadow: rgba(16, 24, 40, 0.28); --radius: 14px; --font: 'Arial', 'Helvetica Neue', sans-serif; /* content shell — nav, sections and footer all align to this edge. Widened from 1440px up; see the extra-large tier. */ --shell: 1160px; --shell-pad: 40px; } [data-theme="dark"] { /* surfaces */ --obsidian: #0A0A0F; --midnight: #0D1B2A; --deep: #0F2942; --smoke: #1C2D40; --card: #111827; --surface-hover: #0D1520; --gradient-stop: #0A111F; --field-bg: rgba(10, 10, 15, 0.7); /* text */ --white: #FFFFFF; --ice: #F0F4FF; --muted: #8899BB; --placeholder: rgba(136, 153, 187, 0.5); --on-accent: #FFFFFF; /* lines */ --border: #1E3A5F; --border-soft: rgba(30, 58, 95, 0.5); --border-softer: rgba(30, 58, 95, 0.4); --border-faint: rgba(30, 58, 95, 0.3); --border-track: rgba(30, 58, 95, 0.6); --outline-border: rgba(255, 255, 255, 0.2); /* chrome */ --nav-bg: rgba(10, 10, 15, 0.85); --nav-bg-top: rgba(10, 10, 15, 0); --nav-bg-solid: rgba(10, 10, 15, 0.97); /* neutral tints layered over a surface */ --tint-1: rgba(255, 255, 255, 0.06); --tint-2: rgba(255, 255, 255, 0.03); --tint-3: rgba(255, 255, 255, 0.02); /* accents */ --electric: #0066FF; --cyan: #00D4FF; --gold: #FFB800; --mint: #00D68F; --danger: #FF3B5C; --attention: #FFA733; /* download modal */ --modal-bg: #111827; --modal-text: #F0F4FF; --modal-muted: #8899BB; --modal-field-bg: rgba(10, 10, 15, 0.6); --modal-field-focus-bg: rgba(10, 10, 15, 0.85); --modal-placeholder: #6B7C99; --modal-scrim: rgba(2, 4, 9, 0.75); --modal-shadow: rgba(0, 0, 0, 0.55); } /* ── ARABIC WEBFONT (self-hosted; only fetched on pages with lang="ar") ── El Messiri is a variable font (400–700 in one file), so the whole weight range costs two requests: one Arabic subset and one Latin subset for the Latin glyphs that appear inside Arabic copy (numerals, brand names, URLs). */ /* arabic */ @font-face { font-family: 'El Messiri'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/el-messiri-400-700-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* latin */ @font-face { font-family: 'El Messiri'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/el-messiri-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Arabic pages swap the family and get a little more leading — Arabic sets taller than Latin at the same size. */ [lang="ar"] { --font: 'El Messiri', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } [lang="ar"] body { line-height: 1.8; } /* ── LANGUAGE MENU ── A globe + the active language code in the nav; clicking it opens a small dropdown listing every locale we ship. Driven by lang-menu.js. */ .lang-menu { position: relative; flex: none; } .lang-menu__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: color .2s, border-color .2s, transform .2s; } .lang-menu__btn:hover { color: var(--electric); border-color: var(--electric); transform: translateY(-1px); } .lang-menu__btn:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; } .lang-menu__globe { width: 16px; height: 16px; display: block; flex: none; } /* the caret flips to point up while the menu is open */ .lang-menu__caret { width: 10px; height: 10px; display: block; flex: none; opacity: .75; transition: transform .2s; } .lang-menu__btn[aria-expanded="true"] .lang-menu__caret { transform: rotate(180deg); } .lang-menu__list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 120; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--nav-bg-solid, var(--card)); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); } .lang-menu__list[hidden] { display: none; } .lang-menu__list li { margin: 0; } /* wins over the generic .nav-links a rules — these are menu rows, not links in the bar, so they take no underline and no tracking */ .nav-links .lang-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; letter-spacing: normal; text-decoration: none; transition: background .15s, color .15s; } .nav-links .lang-menu__list a:hover, .nav-links .lang-menu__list a:focus-visible { background: color-mix(in srgb, var(--electric) 12%, transparent); color: var(--electric); outline: none; } /* the language you are already reading */ .nav-links .lang-menu__list a[aria-current="true"] { color: var(--white); font-weight: 700; } .lang-menu__abbr { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; opacity: .7; } /* each row is set in its own script so the native name reads correctly */ .lang-menu__list [lang="ar"] .lang-menu__name { font-family: 'El Messiri', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 14px; } /* ── RESET (shared by every page) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ========================================================================== HOME (index.html) ========================================================================== */ html.page-home { scroll-behavior: smooth; overflow-x: hidden; } .page-home body { background: var(--obsidian); color: var(--white); font-family: var(--font); line-height: 1.6; overflow-x: hidden; cursor: none; } /* ── CUSTOM CURSOR ── */ .page-home #cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; background: var(--electric); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width .2s, height .2s, background .2s, opacity .2s; mix-blend-mode: normal; } .page-home #cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 1.5px solid rgba(0, 102, 255, 0.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: transform .12s ease-out, width .25s, height .25s, border-color .25s; } .page-home body:hover #cursor { opacity: 1; } .page-home a:hover~#cursor, .page-home button:hover~#cursor { width: 20px; height: 20px; background: var(--cyan); } /* ── MOUSE PARALLAX CANVAS ── */ .page-home #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.4; } /* ── BACK TO TOP ── */ /* ── NAV (shared by every page: home and legal) ── */ /* Keeps the nav logo flush with the container's content edge at every width. max() holds it at the padding value while the viewport is narrower than the shell, then tracks the centred shell once it is wider. */ .page-home nav, .page-legal nav, .page-home nav.scrolled, .page-legal nav.scrolled { padding-inline: max(var(--shell-pad), calc((100% - var(--shell)) / 2 + var(--shell-pad))); } .page-home nav, .page-legal nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding-block: 20px; background: var(--nav-bg-top); backdrop-filter: blur(0px); transition: background .4s, backdrop-filter .4s, padding .4s; } .page-home nav.scrolled, .page-legal nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(20px); padding-block: 14px; border-bottom: 1px solid var(--border-soft); } .page-home .nav-logo svg { width: 36px; height: 36px; } .page-home .nav-logo-text { font-size: 18px; font-weight: 700; letter-spacing: 0.05em; color: var(--white); } .page-home .nav-logo-text span { color: var(--electric); } /* ── SECTIONS BASE ── */ .page-home section { position: relative; z-index: 1; } .page-home .container { max-width: var(--shell); margin: 0 auto; padding: 0 var(--shell-pad); } .page-home .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--electric); margin-bottom: 18px; } .page-home .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.1; color: var(--white); margin-bottom: 20px; } .page-home .section-sub { font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 640px; } /* ── HERO ── */ .page-home #hero { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; } .page-home .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .page-home .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 102, 255, 0.1); border: 1px solid rgba(0, 102, 255, 0.3); padding: 6px 16px; border-radius: 40px; margin-bottom: 28px; } .page-home .hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse 2s infinite; } .page-home .hero-tag span { font-size: 12px; color: var(--cyan); letter-spacing: 0.08em; font-weight: 600; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(0.8) } } .page-home .hero-headline { font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: var(--white); margin-bottom: 28px; } .page-home .hero-headline .accent { color: var(--electric); } .page-home .hero-headline .underline-word { position: relative; display: inline-block; } .page-home .hero-headline .underline-word::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: var(--electric); border-radius: 2px; } .page-home .hero-sub { font-size: 18px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; max-width: 520px; } .page-home .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; } .page-home .btn-primary { background: var(--electric); color: var(--on-accent); padding: 15px 32px; border-radius: 50px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s, transform .25s, box-shadow .25s; display: inline-flex; align-items: center; gap: 8px; } .page-home .btn-primary:hover { background: #0055DD; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 102, 255, 0.35); } .page-home .btn-outline { background: transparent; color: var(--white); padding: 15px 32px; border-radius: 50px; /* these two only matter when the class is on a