/* ============================================================================ Bas Recovery — public site design tokens ---------------------------------------------------------------------------- PALETTE SOURCE: sampled directly from the brand-kit logo artwork (Bas Recovery Brand Guidlines/Logo/White bg.jpg, 3375×3375). The two dominant non-white colours are: #FF8800 orange (4,931 samples) — "BAS" and "RECOVERY" wordmark #131313 black (9,130 samples) — the flatbed truck silhouette The brand is ORANGE ON BLACK ON WHITE. An earlier draft used a deep plum (#380A2A) taken from a stray colour spec — that is not in the logo and has been removed entirely. CONTRAST: white text on #FF8800 measures 2.39:1, which fails WCAG AA and is why the CTAs were hard to see. BLACK text on #FF8800 measures 7.76:1 — it passes comfortably AND it is exactly the logo's own colour relationship. Every primary button is therefore black-on-orange. #FF8800 is a BUTTON FILL, never text on a light surface. For orange text use --orange-deep, which is darkened until it clears 4.5:1 on BOTH --bg and --bg-warm. Measure against every surface a colour actually lands on; white alone is not enough, and --bg-warm is the tighter of the two. ========================================================================== */ :root{ /* ---- Brand, straight from the logo ------------------------------------ */ --orange:#FF8800; /* THE brand colour. Buttons and accents only. */ --orange-hot:#FFA033; /* hover */ --orange-deep:#A85A00; /* orange TEXT. 5.09:1 on white, 4.83:1 on --bg-warm. Both clear AA. Do not lighten: the previous #C25E00 measured only 4.29:1 and failed on body-size text. */ --black:#131313; /* logo black — headings, body, primary surfaces */ --black-soft:#2A2A2A; /* ---- Surfaces --------------------------------------------------------- */ --bg:#FFFFFF; --bg-warm:#FFF8F1; /* faint orange tint, not beige */ --bg-sand:#FFF1E2; --ink:#1C1C1C; --ink-2:#4E4E4E; /* 8.6:1 on white */ --ink-3:#6C6C6C; /* lightest text allowed. Quoted ratio is the WORST surface, not white: 4.73:1 on --bg-sand, 4.99 on --bg-warm, 5.25 on white. The old #767676 was 4.54 on white but only 4.09 on --bg-sand, i.e. it failed where it was used. */ --line:#D8D8D8; /* 1.7:1 — decorative rules ONLY, never a control */ --line-strong:#9A9A9A; /* 2.9:1 — visible borders on interactive things */ --line-soft:#EDEDED; /* ---- Night band (hero + footer) --------------------------------------- */ --night:#131313; /* the logo black, used flat */ --night-2:#1E1E1E; --on-night:#FFFFFF; --on-night-2:#C9C9C9; /* 9.7:1 on #131313 */ /* ---- Semantic --------------------------------------------------------- */ --ok:#1B7F44; --warn:#B25A00; --danger:#C4231A; --info:#1D5BBF; /* WhatsApp green, darkened until white text clears AA. The brand green (#25D366) and even a muted #1FA855 only reach 3.09:1 with white, which fails for button-sized text. Same hue, lower lightness: 4.94:1. */ --wa:#188141; --wa-hot:#198543; /* hover — still 4.69:1 with white */ /* ---- Type ------------------------------------------------------------- */ /* Montserrat for Latin — geometric, wide, heavy, matches the logo wordmark. Cairo follows it in the stack purely to catch Arabic glyphs, which Montserrat does not contain. unicode-range in fonts.css means an English page never downloads Cairo. Both OFL. */ --font-display:'Montserrat', 'Cairo', 'Segoe UI', system-ui, sans-serif; --font-body:'Montserrat', 'Cairo', 'Segoe UI', system-ui, sans-serif; --font-mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Montserrat runs optically small and wide. Headings need tighter tracking than a default sans, and the logo's own wordmark is tightly set. */ --track-display:-.025em; --track-eyebrow:.14em; --fs-hero:clamp(38px, 6vw, 72px); --fs-h1:clamp(31px, 4.4vw, 50px); --fs-h2:clamp(25px, 3vw, 36px); --fs-h3:clamp(20px, 2.1vw, 25px); --fs-lead:clamp(18px, 1.6vw, 22px); --fs-body:17px; --fs-sm:15px; --fs-xs:13.5px; --fs-2xs:12px; --lh-tight:1.05; --lh-head:1.15; --lh-body:1.62; /* ---- Space ------------------------------------------------------------ */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px; --sp-10:120px; --gutter:clamp(20px, 5vw, 56px); --maxw:1240px; --maxw-text:68ch; /* ---- Radius / elevation ---------------------------------------------- */ --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; --sh-sm:0 1px 2px rgba(19,19,19,.07), 0 2px 6px rgba(19,19,19,.05); --sh:0 2px 4px rgba(19,19,19,.06), 0 10px 26px -8px rgba(19,19,19,.16); --sh-lg:0 30px 60px -22px rgba(19,19,19,.34); --sh-orange:0 6px 20px -6px rgba(255,136,0,.55); /* ---- Motion ---------------------------------------------------------- */ --ease:cubic-bezier(.2,.75,.2,1); --t-fast:.16s; --t:.28s; --t-slow:.55s; /* ---- Layout ---------------------------------------------------------- */ --header-h:74px; --callbar-h:66px; } /* Arabic. Dubai carries both scripts, so the family does not change — only the metrics do. Arabic needs more vertical room and does not use uppercase, so letter-spaced caps are switched off. */ html[lang="ar"]{ --fs-body:18px; --lh-body:1.9; --lh-head:1.4; } html[lang="ar"] .eyebrow, html[lang="ar"] .trust-lbl, html[lang="ar"] .ftr .ftr-h{ text-transform:none; letter-spacing:0; } /* Night mode follows the OS. A consumer site should not ask people to configure it, so there is no toggle in the nav. */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --bg:#151515; --bg-warm:#1C1A18; --bg-sand:#231F1A; --ink:#F5F5F5; --ink-2:#C4C4C4; --ink-3:#9A9A9A; --black:#F5F5F5; /* headings invert */ --line:#333333; --line-strong:#5A5A5A; --line-soft:#242424; --orange-deep:#FFA033; /* orange text needs to lighten on dark */ --sh:0 10px 26px -8px rgba(0,0,0,.7); --sh-lg:0 30px 60px -22px rgba(0,0,0,.8); } }