/* ========================================================================== AE Creative — Design tokens & base reset Extracted verbatim from the original :root token block and base rules. ========================================================================== */ :root{ --bg:#09090C; --bg-1:#0F0F14; --bg-2:#16161E; --bg-3:#1E1E29; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --text:#F4F4F7; --text-2:#A2A2B0; --text-3:#6A6A78; --brand-blue:#3B6BFF; --brand-violet:#9B54FF; --brand:#6B5FFF; --brand-soft:rgba(107,95,255,.16); --brand-line:rgba(107,95,255,.40); --grad:linear-gradient(135deg,#3B6BFF 0%,#9B54FF 100%); --grad-text:linear-gradient(110deg,#6E92FF 0%,#B57BFF 100%); --ok:#2FBF71; --warn:#F5B733; --err:#FF5A6A; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:999px; --e-2:0 6px 22px rgba(0,0,0,.40); --e-3:0 20px 50px rgba(0,0,0,.50); --e-glow:0 10px 44px rgba(107,95,255,.34); --container:1200px; --ff-display:'Sora',sans-serif; --ff-body:'IBM Plex Sans',sans-serif; --ff-mono:'IBM Plex Mono',monospace; --ff-ar:'IBM Plex Sans Arabic',sans-serif; --ease:cubic-bezier(.22,1,.36,1); /* ---- Theme-able chrome tokens ---- Dark-mode defaults below equal the exact literal values every component used before the light theme existed — so leaving [data-theme="light"] off (or never toggling) renders pixel-identical to the original design. Only [data-theme="light"] below overrides these; every component that used a hardcoded rgba(255,255,255,X) for "text/border on this piece of dark chrome" now points here. */ --header-text:#fff; --header-text-muted:rgba(255,255,255,.75); --header-control-bg:rgba(255,255,255,.05); --header-control-border:rgba(255,255,255,.18); --header-control-text:#fff; --header-bg-scrolled:rgba(9,9,12,.82); --mobile-menu-bg:rgba(9,9,12,.97); --footer-bg:#07070b; --footer-text:#fff; --footer-text-2:rgba(255,255,255,.65); --footer-text-3:rgba(255,255,255,.5); --footer-text-4:rgba(255,255,255,.4); --footer-icon:rgba(255,255,255,.7); --footer-input-bg:rgba(255,255,255,.04); --surface-glass:rgba(255,255,255,.035); --surface-glass-hover:rgba(255,255,255,.065); --surface-tint:rgba(255,255,255,.03); /* Interior page hero (.page-hero — solid var(--bg), not a photo/video hero): title/desc used to hardcode white assuming a permanently dark backdrop. The homepage/portfolio/media-production/case-study/project hero (photo or video, `.hero`) is NOT affected — its always-dark overlay means its own white text stays hardcoded (see layout.css). */ --surface-title:#fff; --surface-desc:rgba(255,255,255,.75); /* Stat counters (.stat__value) use their own gradient var, decoupled from --grad-text — --grad-text also paints .text-gradient spans that only ever sit on the always-dark hero/CTA photo overlays, so it must stay untouched; counters sit on plain theme-colored cards and need their own light-mode-safe gradient. */ --stat-grad:var(--grad-text); --selection-text:#fff; } /* ========================================================================== Light theme — activated by , set by assets/js/theme.js (persisted in localStorage, defaulting to the OS prefers-color-scheme). Dark mode above is untouched by this block, so never toggling stays pixel-identical to the original design. Strategy: remap the small set of core surface/text/border/shadow tokens that nearly every component already reads through var() — that alone re-themes most of the site with no per-component edits. The remaining overrides below are the chrome-specific tokens added to :root above, for components that used to hardcode a literal white/rgba value assuming an always-dark backdrop (header, footer, glass cards, page hero, stat counters). Deliberately NOT touched here: --brand and its soft/line/gradient variants (checked for contrast on the light card background — ~4.46:1, effectively passing — and darkening would hurt the same tokens' OTHER use on always-dark photo/video overlays), and every hardcoded white/rgba(255,255,255,X) left in layout.css/cards.css/ etc. that sits on a photo, video, or gradient — those backdrops don't change with site theme, so the white text/icons on them stay put. */ :root[data-theme="light"]{ --bg-primary:#F7F5F0; --bg-secondary:#EFEBE3; --bg-card:#FFFFFF; --text-primary:#14141A; --text-secondary:#5A5A66; --border:#E2DDD3; --shadow:0 4px 20px rgba(20,20,26,.08); --bg:var(--bg-primary); --bg-1:var(--bg-secondary); --bg-2:var(--bg-card); --bg-3:var(--bg-card); --line:var(--border); --line-2:#D8D2C5; --text:var(--text-primary); --text-2:var(--text-secondary); --text-3:#86818A; --e-2:0 6px 22px rgba(20,20,26,.10); --e-3:0 20px 50px rgba(20,20,26,.14); --e-glow:0 10px 40px rgba(107,95,255,.24); --header-text:var(--text-primary); --header-text-muted:var(--text-secondary); --header-control-bg:rgba(20,20,26,.05); --header-control-border:var(--border); --header-control-text:var(--text-primary); --header-bg-scrolled:rgba(247,245,240,.88); --mobile-menu-bg:rgba(247,245,240,.97); --footer-bg:var(--bg-secondary); --footer-text:var(--text-primary); --footer-text-2:var(--text-secondary); --footer-text-3:var(--text-secondary); --footer-text-4:var(--text-secondary); --footer-icon:var(--text-secondary); --footer-input-bg:rgba(20,20,26,.04); --surface-glass:rgba(255,255,255,.7); --surface-glass-hover:rgba(255,255,255,.92); --surface-tint:rgba(20,20,26,.035); --surface-title:var(--text-primary); --surface-desc:var(--text-secondary); --stat-grad:linear-gradient(110deg,#2A4FD6 0%,#7A3FE0 100%); --selection-text:var(--text-primary); } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ff-ar); -webkit-font-smoothing:antialiased; } /* Smooth theme toggling — scoped to a class JS adds ~1 frame after first paint, so the FOUC-prevention script's synchronous data-theme set never itself gets an unwanted fade. Universal-selector specificity is low enough that any component's own more-specific `transition` (e.g. .hover-lift-4's transform) still wins over this. */ html.theme-ready,html.theme-ready *{ transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } ::selection{background:rgba(107,95,255,.35);color:var(--selection-text)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} /* Arabic localization: force approved Arabic font + neutralize Latin tracking. Layout/tokens unchanged. */ #ar-root,#ar-root *{font-family:var(--ff-ar) !important;letter-spacing:normal !important} /* Prevents the decorative glow elements (hero, final CTA) from causing horizontal scroll. */ .page{overflow-x:hidden}