/* ============================================================= frontend-tokens.css — Design tokens. Import first. Dark mode: ============================================================= */ :root { /* Accent */ --mz-accent: #E8212A; --mz-accent-dark: #B8171C; --mz-accent-light: #FF5058; --mz-accent-rgb: 232, 33, 42; --mz-accent-pale: rgba(232, 33, 42, 0.08); --mz-accent-pale-hover: rgba(232, 33, 42, 0.14); --mz-accent-border: rgba(232, 33, 42, 0.32); --mz-accent-glow: rgba(232, 33, 42, 0.28); /* Gradients */ --mz-gradient-brand: linear-gradient(135deg, #E8212A 0%, #7a0005 100%); --mz-gradient-brand-soft: linear-gradient(135deg, #FF5058 0%, #E8212A 100%); --mz-gradient-brand-h: linear-gradient(90deg, #FF5058 0%, #E8212A 100%); --mz-gradient-mesh: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(232, 33, 42, 0.18) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 10% 30%, rgba(255, 80, 88, 0.09) 0%, transparent 55%); --mz-gradient-dark: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%); /* Dark surfaces */ --mz-dark-bg: #0d0d0d; --mz-dark-surface: #181818; --mz-dark-surface-raised: #222222; --mz-dark-border: rgba(255, 255, 255, 0.07); --mz-border-light: rgba(255, 255, 255, 0.16); /* Light surfaces */ --mz-bg: #f5f4f1; --mz-bg-warm: #faf9f7; --mz-surface: #ffffff; --mz-surface-alt: #f8f7f4; --mz-border: #e3e2de; --mz-border-soft: #eceae6; /* Text — light mode */ --mz-text-body: #3a3a3a; --mz-text-heading: #0d0d0d; --mz-text-muted: #787571; --mz-text-on-dark: rgba(255, 255, 255, 0.94); --mz-text-on-dark-muted: rgba(255, 255, 255, 0.54); --mz-text-on-dark-dim: rgba(255, 255, 255, 0.34); /* Radius */ --mz-radius-xs: 6px; --mz-radius-sm: 10px; --mz-radius-md: 16px; --mz-radius-card: 22px; --mz-radius-xl: 30px; --mz-radius-pill: 999px; /* Motion */ --mz-ease: cubic-bezier(0.22, 1, 0.36, 1); --mz-ease-in: cubic-bezier(0.4, 0, 1, 1); --mz-ease-out: cubic-bezier(0, 0, 0.2, 1); --mz-duration-sm: 0.18s; --mz-duration-md: 0.32s; --mz-duration-lg: 0.55s; /* Shadows */ --mz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06); --mz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07); --mz-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.09); --mz-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --mz-shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.16); --mz-shadow-brand: 0 8px 28px rgba(232, 33, 42, 0.36); --mz-shadow-brand-sm: 0 3px 12px rgba(232, 33, 42, 0.24); /* Spacing */ --mz-space-1: 0.25rem; --mz-space-2: 0.5rem; --mz-space-3: 0.75rem; --mz-space-4: 1rem; --mz-space-5: 1.25rem; --mz-space-6: 1.5rem; --mz-space-8: 2rem; --mz-space-10: 2.5rem; --mz-space-12: 3rem; --mz-space-16: 4rem; --mz-space-20: 5rem; --mz-space-24: 6rem; /* Z-index */ --mz-z-base: 1; --mz-z-raised: 10; --mz-z-navbar: 1000; } /* Dark theme overrides */ [data-theme="dark"] { --mz-bg: #0d0d0d; --mz-bg-warm: #131313; --mz-surface: #181818; --mz-surface-alt: #1f1f1f; --mz-border: rgba(255, 255, 255, 0.08); --mz-border-soft: rgba(255, 255, 255, 0.05); --mz-text-body: rgba(255, 255, 255, 0.76); --mz-text-heading: rgba(255, 255, 255, 0.96); --mz-text-muted: rgba(255, 255, 255, 0.42); --mz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --mz-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --mz-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } /* ── Base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* * FIX: Prevent absolutely-positioned decorative elements (glow orbs, * hero overlays, CTA ghost text) from causing a horizontal gap on mobile. * overflow-x:hidden on html+body together removes the right-side white gap. */ html { overflow-x: hidden; max-width: 100vw; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; line-height: 1.65; color: var(--mz-text-body); background: var(--mz-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100%; transition: background 0.4s ease, color 0.4s ease; } /* Display/heading font: Poppins (replaces Syne) */ h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: var(--mz-text-heading); font-weight: 800; line-height: 1.1; margin-bottom: 0; } /* * Arabic RTL support — Cairo font. * Activates automatically when dir="rtl" is set on . * No JS needed: add dir="rtl" to the tag for Arabic pages. */ [dir="rtl"] { font-family: 'Cairo', 'DM Sans', sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .mz-heading-display, [dir="rtl"] .mz-heading-section, [dir="rtl"] .mz-eyebrow, [dir="rtl"] .mz-btn, [dir="rtl"] .mz-badge, [dir="rtl"] .mz-stat-value { font-family: 'Cairo', sans-serif; font-weight: 700; } a { color: var(--mz-accent); text-decoration: none; transition: color var(--mz-duration-sm) ease; } a:hover { color: var(--mz-accent-dark); } img { max-width: 100%; height: auto; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--mz-bg); } ::-webkit-scrollbar-thumb { background: var(--mz-accent); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--mz-accent-dark); } /* Focus */ :focus-visible { outline: 2px solid var(--mz-accent); outline-offset: 3px; border-radius: var(--mz-radius-xs); }