/* ========================================================================== 3 Lions — Hero System Design Tokens (assets/css/tokens.css) Loaded AFTER /css/tokens.css so it augments (never silently breaks) the existing palette. Brand colours are redefined to identical values (safe). Consumed by assets/css/hero.css. ========================================================================== */ /* -------------------------------------------------------------------------- Self-hosted display face. font-display:swap keeps text visible while the woff2 loads; the stack falls back to Roboto if the file is absent. Primary weight (600) is preloaded from each page . -------------------------------------------------------------------------- */ @font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ----- Brand (echoes existing values; safe to restate) ----- */ --navy: #012169; --navy-700: #001A54; --navy-800: #000F3D; --navy-900: #00082A; --navy-600: #1B3A8C; /* tint */ --navy-500: #2F4FA2; /* tint */ --red: #CF081F; --red-600: #A8061A; --red-400: #E8293E; /* tint */ /* ----- White tints (referenced by hero text on dark mesh) ----- */ --color-white: #FFFFFF; --color-white-95: rgba(255, 255, 255, 0.95); --color-white-90: rgba(255, 255, 255, 0.90); --color-white-80: rgba(255, 255, 255, 0.80); --color-white-70: rgba(255, 255, 255, 0.70); --color-white-60: rgba(255, 255, 255, 0.60); --color-white-50: rgba(255, 255, 255, 0.50); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-12: rgba(255, 255, 255, 0.12); --color-white-08: rgba(255, 255, 255, 0.08); /* ----- Type families ----- */ --font-display: 'Clash Display', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ----- 8px spacing scale ----- */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 2.5rem; /* 40px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --sp-12: 6rem; /* 96px */ /* ----- 1.25 (major-third) type scale, fluid via clamp ----- */ --ts-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); /* step -2..-1 */ --ts-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* step 0..+1 */ --ts-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* step +1..+2 */ --ts-h2: clamp(1.5625rem, 1.4rem + 0.8vw, 1.953rem); /* 1.25^2..^3 */ --ts-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.815rem); /* up to 1.25^6 */ --ts-display: clamp(2.75rem, 1.9rem + 4vw, 4.768rem); /* home, 1.25^7 */ /* ----- Hero atmosphere (no flat fills) ----- */ /* Layered radial gradient-mesh in brand navy/red. */ --hero-mesh: radial-gradient(120% 120% at 12% 8%, rgba(43, 79, 162, 0.55) 0%, rgba(1, 33, 105, 0) 42%), radial-gradient(120% 120% at 88% 0%, rgba(207, 8, 31, 0.30) 0%, rgba(1, 33, 105, 0) 38%), radial-gradient(140% 140% at 78% 110%, rgba(15, 26, 84, 0.85) 0%, rgba(1, 33, 105, 0) 55%), linear-gradient(135deg, #00123f 0%, #012169 48%, #001a54 100%); /* Subtle grain (inline SVG fractal noise) layered over the mesh. */ --hero-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); --hero-grain-opacity: 0.06; /* ----- Hero photo art (curated, in assets/images/services) ----- Each is a webp-first image-set with a png fallback. Wired into hero backgrounds *under* a navy overlay (see hero.css) so white text keeps ≥4.5:1 contrast regardless of the photo's local luminance. */ --hero-img-home: image-set(url("/assets/images/services/hero-homepage.webp") type("image/webp"), url("/assets/images/services/hero-homepage.png") type("image/png")); --hero-img-automation: image-set(url("/assets/images/services/hub-automation.webp") type("image/webp"), url("/assets/images/services/hub-automation.png") type("image/png")); --hero-img-business-personalization: image-set(url("/assets/images/services/hub-business-personalization.webp") type("image/webp"), url("/assets/images/services/hub-business-personalization.png") type("image/png")); --hero-img-content-marketing: image-set(url("/assets/images/services/hub-content-marketing.webp") type("image/webp"), url("/assets/images/services/hub-content-marketing.png") type("image/png")); --hero-img-creative-design: image-set(url("/assets/images/services/hub-creative-design.webp") type("image/webp"), url("/assets/images/services/hub-creative-design.png") type("image/png")); --hero-img-enterprise-intelligence: image-set(url("/assets/images/services/hub-enterprise-intelligence.webp") type("image/webp"), url("/assets/images/services/hub-enterprise-intelligence.png") type("image/png")); --hero-img-financial-back-office: image-set(url("/assets/images/services/hub-financial-back-office.webp") type("image/webp"), url("/assets/images/services/hub-financial-back-office.png") type("image/png")); --hero-img-research-analytics: image-set(url("/assets/images/services/hub-research-analytics.webp") type("image/webp"), url("/assets/images/services/hub-research-analytics.png") type("image/png")); --hero-img-strategic-bidding: image-set(url("/assets/images/services/hub-strategic-bidding.webp") type("image/webp"), url("/assets/images/services/hub-strategic-bidding.png") type("image/png")); --hero-img-voice-telephony-ops: image-set(url("/assets/images/services/hub-voice-telephony.webp") type("image/webp"), url("/assets/images/services/hub-voice-telephony.png") type("image/png")); --hero-img-web-app-development: image-set(url("/assets/images/services/hub-web-app-development.webp") type("image/webp"), url("/assets/images/services/hub-web-app-development.png") type("image/png")); /* ----- Hero motion ----- */ --hero-reveal-duration: 640ms; --hero-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --hero-stagger: 90ms; }