/* ========================================================================= ROVA v5 — Design Tokens Source: Rova Brand Framework (palette, typography, logo) + catalogue. Usage: import once at the root. All components consume these variables. ========================================================================= */ /* ---------- Fonts ---------------------------------------------------------- Brand fonts are commercial. Licence them for web before launch: - Pontiac Black (display, Latin) → fontspring.com - Priori Sans OT (text, Latin) → emigre.com - Akhand Arabic (display, Arabic) → indiantypefoundry.com Until the licences arrive, the free fallbacks below are used (Google Fonts): Lexend (≈ Pontiac), Fira Sans (≈ Priori Sans), Alexandria (≈ Akhand Arabic), IBM Plex Sans Arabic (Arabic text, already used in the brand PPT template). --------------------------------------------------------------------------- */ /* Fonts are loaded with in index.html (faster than @import). */ :root { /* ---- Brand palette (from the framework, exact) ---- */ --rova-oxford-blue: #1A2237; /* primary dark · "Oxford Blue" */ --rova-green-blue: #1366AF; /* primary brand · "Green Blue" */ --rova-jordy-blue: #97B3DB; /* secondary · "Jordy Blue" */ --rova-colombia: #D7E6F5; /* tint · "Colombia Blue" */ --rova-floral: #F9F3EC; /* warm neutral · "Floral White" */ --rova-white: #FFFFFF; /* ---- Extended scales (derived, for UI states only) ---- */ --blue-50: #EEF4FB; --blue-100: #D7E6F5; /* = colombia */ --blue-200: #B6CDEA; --blue-300: #97B3DB; /* = jordy */ --blue-400: #5A8CC8; --blue-500: #1366AF; /* = green blue */ --blue-600: #0F5899; --blue-700: #0E4F8A; --blue-800: #0B3F70; --navy-700: #2A3550; --navy-800: #1F2942; --navy-900: #1A2237; /* = oxford */ --navy-950: #111829; --sand-50: #FDFAF6; --sand-100: #F9F3EC; /* = floral */ --sand-200: #EFE5D8; --sand-300: #E2D4C2; /* Brass accent: product material colour. Use ONLY for tiny details (hairlines, "MOP5" seals, hover underline on dark). Never for CTAs. */ --brass-400: #C9A24B; --brass-500: #B08A3A; /* Ink (text) */ --ink-900: #1A2237; /* headings on light */ --ink-700: #2F3A52; /* body on light */ --ink-500: #4A5468; /* secondary text, 6.9:1 on floral */ --ink-300: #8A93A6; /* disabled / placeholders (not for body) */ /* Feedback */ --success-500: #1E8A5A; --warning-500: #C77700; --danger-500: #C2362F; /* gas-safety warnings only */ --whatsapp: #25D366; /* ---- Semantic tokens (light surface = default) ---- */ --color-bg: var(--rova-floral); --color-bg-elevated: var(--rova-white); --color-bg-muted: var(--sand-200); --color-bg-tint: var(--rova-colombia); --color-bg-inverse: var(--rova-oxford-blue); --color-bg-brand: var(--rova-green-blue); --color-text: var(--ink-700); --color-text-strong: var(--ink-900); --color-text-muted: var(--ink-500); --color-text-inverse: var(--rova-floral); --color-text-inverse-muted: var(--rova-jordy-blue); --color-text-brand: var(--rova-green-blue); --color-border: rgba(26, 34, 55, 0.12); --color-border-strong: rgba(26, 34, 55, 0.24); --color-border-inverse: rgba(215, 230, 245, 0.18); --color-action: var(--rova-green-blue); --color-action-hover: var(--blue-700); --color-action-press: var(--blue-800); --color-on-action: var(--rova-white); --color-focus: var(--blue-400); /* ---- Typography ---- */ --font-display: "Pontiac", "Lexend", "Alexandria", system-ui, sans-serif; --font-sans: "Priori Sans OT", "Fira Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-display-ar: "Akhand Arabic", "Alexandria", "IBM Plex Sans Arabic", sans-serif; --font-sans-ar: "IBM Plex Sans Arabic", "Alexandria", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* product codes */ /* Fluid type scale (1.25 → 1.333), 360px → 1440px */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20→24 */ --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); /* 24→32 */ --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem); /* 30→44 */ --text-4xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); /* 36→60 */ --text-5xl: clamp(2.75rem, 1.9rem + 3.8vw, 5.25rem); /* 44→84 hero */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.6; --leading-ar: 1.8; /* Arabic needs more line height */ --tracking-display: 0.02em; /* Pontiac is wide; keep near 0 */ --tracking-eyebrow: 0.16em; /* uppercase eyebrows */ /* ---- Spacing (4px base) ---- */ --space-0: 0; --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; --section-y: clamp(3rem, 2rem + 3vw, 5rem); /* vertical rhythm */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* ---- Layout ---- */ --container: 1280px; --container-wide: 1440px; --container-prose: 68ch; --header-h: 76px; /* ---- Radius: the logo is a circle, the brand template uses pills ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; /* ---- Elevation (cool, navy-tinted shadows, never grey/black) ---- */ --shadow-xs: 0 1px 2px rgba(26, 34, 55, 0.06); --shadow-sm: 0 2px 8px rgba(26, 34, 55, 0.07); --shadow-md: 0 10px 30px -10px rgba(26, 34, 55, 0.18); --shadow-lg: 0 24px 60px -20px rgba(26, 34, 55, 0.28); --shadow-product: 0 30px 40px -24px rgba(17, 24, 41, 0.45); /* under cut-outs */ --ring-focus: 0 0 0 3px var(--rova-floral), 0 0 0 5px var(--color-focus); /* ---- Motion: "flow" (water), calm and precise ---- */ --ease-flow: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-valve: cubic-bezier(0.65, 0, 0.35, 1); /* open/close, toggles */ --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 600ms; --dur-reveal: 900ms; /* ---- Headings (EN; Arabic overrides below) ---- */ --heading-1-size: var(--text-5xl); --heading-1-leading: 1.04; --heading-2-size: var(--text-4xl); --heading-3-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28→40 */ /* ---- Z-index ---- */ --z-header: 50; --z-dropdown: 60; --z-fab: 70; --z-modal: 100; /* ---- v5 additions ---- */ --brass-tint: #F4EADB; /* warm tile behind brass products, family-safety band */ --chrome-tint: #E6EEF7; /* cool tile behind chrome products, home-map band */ --brass-glow: rgb(227 169 85 / 0.2); --gas-yellow: #E0AE3A; /* gas pipe in the house drawing (matches the gas handle) */ /* Presentation-template blue, used under the footer splash */ --brand-gradient: linear-gradient(180deg, #1A4E77 0%, #12639F 55%, #0074BD 100%); } /* Inverse (dark) sections: add .theme-navy or .theme-blue to any section */ .theme-navy { --color-bg: var(--rova-oxford-blue); --color-bg-elevated: var(--navy-800); --color-text: var(--rova-colombia); --color-text-strong: var(--rova-floral); --color-text-muted: var(--rova-jordy-blue); --color-text-brand: var(--rova-jordy-blue); --color-border: var(--color-border-inverse); --color-action: var(--rova-floral); --color-action-hover: var(--rova-colombia); --color-on-action: var(--rova-oxford-blue); background: var(--color-bg); color: var(--color-text); } .theme-blue { --color-bg: var(--rova-green-blue); --color-text: var(--rova-floral); --color-text-strong: var(--rova-white); --color-text-muted: var(--rova-colombia); --color-text-brand: var(--rova-colombia); --color-border: rgba(255, 255, 255, 0.22); --color-action: var(--rova-floral); --color-action-hover: var(--rova-white); --color-on-action: var(--rova-oxford-blue); background: var(--color-bg); color: var(--color-text); } /* Arabic / RTL */ :lang(ar) { --font-display: var(--font-display-ar); --font-sans: var(--font-sans-ar); --leading-normal: var(--leading-ar); --tracking-display: 0; --tracking-eyebrow: 0; --heading-1-size: clamp(2.375rem, 1.6rem + 3.2vw, 4.5rem); /* 38→72 */ --heading-1-leading: 1.3; --heading-2-size: clamp(1.875rem, 1.5rem + 1.6vw, 3rem); /* 30→48 */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }