/* ========================================================================== SHABABEEK - DESIGN TOKENS Single source of truth. Every value below maps 1:1 to a theme.json token in the WordPress build. Nothing in site.css should hardcode a colour, size, or duration that isn't declared here. ========================================================================== */ :root { /* --------------------------------------------------------------------- COLOUR - Midnight navy primary, ivory ground, teal innovation accent, amber used sparingly as premium punctuation. --------------------------------------------------------------------- */ --c-navy-900: #05121F; /* deepest - hero grounds, footer */ --c-navy-800: #081A2B; /* primary brand navy */ --c-navy-700: #0E2740; /* raised surfaces on navy */ --c-navy-600: #16344F; /* borders on navy */ --c-navy-400: #7C93A8; /* muted text on navy - 5.5:1, AA at small size */ --c-navy-200: #A9BACB; /* secondary text on navy */ --c-ivory-50: #FDFCFA; /* page ground */ --c-ivory-100: #FAF7F2; /* alternating section ground */ --c-ivory-200: #F2EDE4; /* card ground on ivory */ --c-ivory-300: #E4DCCF; /* hairlines on ivory */ --c-teal-600: #07766C; /* teal, links + small text - 5.4:1 on ivory */ --c-teal-500: #12A899; /* teal, primary accent - decorative fills only */ --c-teal-400: #2AC4B4; /* teal, on-navy accent */ --c-teal-100: #D6F2EE; /* teal wash */ --c-amber-600: #8F5E0C; /* amber, text-safe on ivory - 5.4:1 */ --c-amber-500: #DFA23C; /* amber, primary premium accent */ --c-amber-200: #F6E3C2; /* amber wash */ --c-ink: #0C1B27; /* body text on light */ --c-ink-muted: #4C5F6E; /* secondary text on light */ --c-ink-faint: #586A7A; /* tertiary text on light - 5.5:1, AA on every ivory ground */ --c-white: #FFFFFF; /* Semantic aliases - components reference these, never the raw ramp. */ --ground: var(--c-ivory-50); --ground-alt: var(--c-ivory-100); --ground-invert: var(--c-navy-800); --surface: var(--c-white); --surface-invert: var(--c-navy-700); --text: var(--c-ink); --text-muted: var(--c-ink-muted); --text-faint: var(--c-ink-faint); --text-invert: var(--c-white); --text-invert-muted: var(--c-navy-200); --accent: var(--c-teal-600); --accent-invert: var(--c-teal-400); --premium: var(--c-amber-600); --premium-invert: var(--c-amber-500); --line: var(--c-ivory-300); --line-invert: var(--c-navy-600); /* Focus ring: 3.36:1 on ivory and 5.11:1 on navy, so one value satisfies WCAG 1.4.11 on both light and inverted sections. */ --focus: #0F9B8D; /* --------------------------------------------------------------------- TYPE - Manrope for headings (geometric, confident). Inter for body (unmatched screen readability). Both are variable fonts and both have a genuine Arabic companion, which is why they were chosen over Space Grotesk, whose Arabic support is nonexistent. --------------------------------------------------------------------- */ --font-display: "Manrope", "Noto Kufi Arabic", system-ui, sans-serif; --font-body: "Inter", "Noto Sans Arabic", system-ui, sans-serif; /* Fluid scale. clamp() means no breakpoint-specific font sizes anywhere. */ --t-hero: clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem); --t-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); --t-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3.125rem); --t-h3: clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem); --t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); --t-lead: clamp(1.0625rem, 1.0rem + 0.5vw, 1.375rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; --t-eyebrow: 0.75rem; --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.45; --lh-relaxed: 1.68; --ls-hero: -0.035em; --ls-heading: -0.022em; --ls-body: -0.005em; --ls-eyebrow: 0.16em; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extra: 800; /* --------------------------------------------------------------------- SPACE - 4px base. --------------------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem); --section-y-tight: clamp(3rem, 2rem + 4vw, 6rem); /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container: 1280px; --container-wide: 1560px; --container-text: 68ch; --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); /* --------------------------------------------------------------------- RADIUS - Restrained. Windows have crisp corners; only interactive chrome gets softened. --------------------------------------------------------------------- */ --r-none: 0; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* --------------------------------------------------------------------- ELEVATION - Two levels only, both tinted with navy rather than neutral black so shadows read as palette instead of dirt. --------------------------------------------------------------------- */ --e-1: 0 1px 2px rgba(8, 26, 43, 0.05), 0 4px 16px rgba(8, 26, 43, 0.05); --e-2: 0 2px 4px rgba(8, 26, 43, 0.06), 0 18px 48px rgba(8, 26, 43, 0.11); /* --------------------------------------------------------------------- MOTION - One custom bezier is the brand's movement signature: a confident settle with no overshoot. --------------------------------------------------------------------- */ --d-fast: 160ms; --d-base: 280ms; --d-slow: 560ms; --d-reveal: 900ms; --ease: cubic-bezier(0.22, 0.61, 0.28, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* --------------------------------------------------------------------- WINDOW DESIGN LANGUAGE A Shababeek "window" is a rectangular portal with a visible mullion grid - the crossbars of a real window - through which content is seen. These tokens keep every frame dimensionally consistent. --------------------------------------------------------------------- */ --win-frame: 1px; --win-inset: clamp(8px, 1.2vw, 16px); --win-ratio-portrait: 3 / 4; --win-ratio-landscape: 4 / 3; --win-ratio-panorama: 16 / 9; --win-ratio-tall: 2 / 3; --z-base: 1; --z-raised: 10; --z-header: 100; --z-overlay: 200; } /* ========================================================================== REDUCED MOTION - Collapse durations to near-instant rather than disabling transitions outright. State changes stay legible; nothing moves. Handled once, here, so no component needs its own media query. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } } /* ========================================================================== RTL - Arabic gets its own stack and looser leading, because Arabic glyphs carry more vertical detail and crowd at Latin line heights. Direction itself is handled by logical properties throughout site.css, never by mirrored overrides. ========================================================================== */ [dir="rtl"] { --font-display: "Noto Kufi Arabic", "Manrope", system-ui, sans-serif; --font-body: "Noto Sans Arabic", "Inter", system-ui, sans-serif; --lh-tight: 1.28; --lh-snug: 1.42; --lh-normal: 1.72; --lh-relaxed: 1.95; --ls-hero: 0; /* never letter-space Arabic - it breaks the joins */ --ls-heading: 0; --ls-body: 0; --ls-eyebrow: 0.04em; }