/* ============================================================= VARIABLES — Al Zahraa Construction — Design Tokens Single source of truth for colour, type, spacing, motion, etc. NEVER hard-code a hex, px spacing, or font stack elsewhere. No component styles belong in this file. ============================================================= */ :root { /* ========================================================== COLOUR PALETTE ========================================================== */ /* ---- Brand: deep engineering navy ---- */ --az-navy-900: #0a1a2f; /* darkest — hero overlays, footer */ --az-navy-800: #0f2742; /* primary surfaces */ --az-navy-700: #163457; /* hover on navy */ --az-navy-600: #1e4d7b; /* secondary / links on light */ --az-navy-100: #e6edf5; /* light navy tint — chip hover, subtle fills */ /* ---- Accent: safety amber (roads & signage) ---- */ --az-amber-600: #c98900; --az-amber-500: #f2a900; /* PRIMARY ACCENT — CTAs, underlines, stat numbers */ --az-amber-400: #ffc33d; --az-amber-100: #fff3d6; /* ---- Neutrals: concrete & asphalt ---- */ --az-ink-900: #11161c; /* body text */ --az-gray-700: #3a424c; --az-gray-600: #6b7480; /* muted text */ --az-gray-400: #a9b1bc; /* disabled, dividers on dark */ --az-gray-200: #e3e6eb; /* borders */ --az-gray-100: #f2f4f7; --az-gray-50: #f7f8fa; /* alternating section bg */ --az-sand-100: #f5f1ea; /* warm alt section bg */ --az-white: #ffffff; /* ---- Status ---- */ --az-success: #2e7d5b; --az-warning: #e08700; --az-danger: #c0392b; /* ---- Semantic aliases: USE THESE IN COMPONENTS ---- */ --color-bg: var(--az-white); --color-bg-alt: var(--az-gray-50); --color-bg-warm: var(--az-sand-100); --color-bg-dark: var(--az-navy-900); --color-surface: var(--az-white); --color-text: var(--az-ink-900); --color-text-muted: var(--az-gray-600); --color-text-invert: var(--az-white); --color-primary: var(--az-navy-800); --color-primary-hover: var(--az-navy-700); --color-on-primary: var(--az-white); --color-accent: var(--az-amber-500); --color-accent-hover: var(--az-amber-600); --color-on-accent: var(--az-navy-900); --color-border: var(--az-gray-200); --color-focus: var(--az-amber-500); /* ---- Overlays for hero video/images ---- */ --overlay-hero: linear-gradient( 180deg, rgba(10, 26, 47, 0.72) 0%, rgba(10, 26, 47, 0.45) 45%, rgba(10, 26, 47, 0.85) 100% ); --overlay-card: linear-gradient( 180deg, rgba(10, 26, 47, 0) 35%, rgba(10, 26, 47, 0.88) 100% ); /* ========================================================== TYPOGRAPHY ========================================================== */ --font-en-heading: "Barlow Condensed", "Archivo", system-ui, sans-serif; --font-en-body: "Inter", system-ui, -apple-system, sans-serif; --font-ar-heading: "Cairo", "Tajawal", system-ui, sans-serif; --font-ar-body: "Tajawal", "Cairo", system-ui, sans-serif; --font-heading: var(--font-en-heading); --font-body: var(--font-en-body); /* Fluid scale — clamp(min, preferred, max) */ --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem); /* hero H1 */ --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.8125rem; /* uppercase label above H2 */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.7; /* body copy — generous, this is a content-heavy site */ --lh-loose: 1.85; /* Arabic body — Arabic needs more leading */ --ls-tight: -0.02em; --ls-eyebrow: 0.16em; /* ========================================================== SPACING — 4px base scale ========================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* vertical rhythm between page sections */ --section-y: clamp(4rem, 2rem + 7vw, 8rem); --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* ========================================================== LAYOUT — container widths ========================================================== */ --container: 1280px; --container-wide: 1520px; --container-text: 760px; /* max width for long-form paragraphs */ --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* ========================================================== RADIUS ========================================================== */ --radius-0: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ========================================================== SHADOW ========================================================== */ --shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.06), 0 1px 3px rgba(10, 26, 47, 0.08); --shadow-md: 0 4px 12px rgba(10, 26, 47, 0.08), 0 2px 4px rgba(10, 26, 47, 0.06); --shadow-lg: 0 12px 32px rgba(10, 26, 47, 0.12), 0 4px 8px rgba(10, 26, 47, 0.06); --shadow-xl: 0 24px 60px rgba(10, 26, 47, 0.18); /* ========================================================== MOTION ========================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; /* ========================================================== Z-INDEX ========================================================== */ --z-base: 1; --z-sticky: 100; --z-navbar: 500; --z-dropdown: 600; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* ========================================================== NAVBAR HEIGHTS ========================================================== */ /* Sized to contain the stacked logo lockup at its current visual size: visible artwork is 125.6px tall at the 200px box (113px at 180px when scrolled) + --space-3 / --space-2 padding above and below. */ --navbar-h: 150px; --navbar-h-scrolled: 130px; } /* ============================================================= ARABIC / RTL TYPE OVERRIDES ============================================================= */ html[lang="ar"] { --font-heading: var(--font-ar-heading); --font-body: var(--font-ar-body); --lh-base: var(--lh-loose); --ls-tight: 0; /* never negative-track Arabic */ --ls-eyebrow: 0.04em; /* Arabic does not letter-space well */ } /* Breakpoints (mobile-first, use min-width): sm 480px | md 768px | lg 1024px | xl 1280px | 2xl 1536px */