/* ========================================================================== TOSHWORLD RESOURCES INTERNATIONAL 01 — DESIGN TOKENS The single source of truth. Every value below maps to an Elementor Global Colour, Global Font, or a Container/Spacing preset. See HANDOVER.md § 3 "Design system → Elementor". ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — BRAND PALETTE (Elementor › Site Settings › Global Colours) Rule of use: Navy + neutrals → carry every page. Blue → interaction (links, focus, hovers, active states). Orange → conversion only ("Request a Quote"). If it is orange, clicking it moves the visitor toward a sale. Purple + logo → incidental creative accents (colour strip, charts). ---------------------------------------------------------------------- */ --tw-blue: #16B8F2; --tw-orange: #F5A623; --tw-navy: #071421; --tw-navy-soft: #101F32; --tw-off-white: #F7F8FA; --tw-white: #FFFFFF; --tw-ink: #17202A; --tw-muted: #667085; --tw-purple: #8B5CF6; /* Secondary logo tones — used ONLY in the colour-control strip motif. */ --tw-magenta: #E5157A; --tw-yellow: #FDD000; /* Derived tints & shades — not new brand colours. --tw-blue-ink exists for accessibility: Toshworld Blue on white is 2.3:1 and fails WCAG for text. Blue-ink is 4.97:1 on off-white. */ --tw-blue-ink: #0A73A0; --tw-blue-dim: #0E93C4; --tw-orange-deep: #E0901A; --tw-navy-tint: #18293D; --tw-grey-100: #ECEFF3; --tw-grey-200: #DDE2E9; --tw-wa-green: #25D366; /* WhatsApp status dot only — never a fill */ /* ---------------------------------------------------------------------- COLOUR — SEMANTIC ROLES Components consume these, never the raw palette. The .on-dark scope re-points them, so any component inverts without knowing it did. ---------------------------------------------------------------------- */ --bg: var(--tw-white); --bg-alt: var(--tw-off-white); --fg: var(--tw-ink); --fg-muted: var(--tw-muted); --line: var(--tw-grey-200); --line-soft: var(--tw-grey-100); --accent: var(--tw-blue); /* fills, rules, decorative */ --accent-text: var(--tw-blue-ink); /* text-sized blue on light */ --surface: var(--tw-white); /* cards on an alt background */ --fg-on-dark: #EAF0F7; --fg-muted-on-dark: #8FA3B8; --line-on-dark: rgba(255, 255, 255, 0.12); --line-on-dark-soft: rgba(255, 255, 255, 0.06); --focus: var(--tw-blue); --focus-offset: 3px; /* ---------------------------------------------------------------------- TYPOGRAPHY (Elementor › Global Fonts) Display: Sora — geometric, tight, editorial at large sizes. Text: Manrope — humanist, warm, legible at 16–19px. ---------------------------------------------------------------------- */ --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --font-text: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fluid scale — each clamp() spans the brief's mobile→desktop range. */ --fs-hero: clamp(2.75rem, 1.05rem + 7.4vw, 6.5rem); /* 44 → 104 */ --fs-display: clamp(2.25rem, 1.30rem + 4.2vw, 4.5rem); /* 36 → 72 */ --fs-h2: clamp(2rem, 1.40rem + 2.6vw, 3.5rem); /* 32 → 56 */ --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* 24 → 32 */ --fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 → 24 */ --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18 → 24 */ --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 → 19 */ --fs-small: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 */ --fs-mega: clamp(3.25rem, 1.20rem + 9.1vw, 8rem); /* 52 → 128 */ --lh-tight: 0.98; --lh-snug: 1.12; --lh-normal: 1.45; --lh-relaxed: 1.65; --ls-mega: -0.035em; --ls-tight: -0.02em; --ls-normal: -0.01em; --ls-eyebrow: 0.18em; --ls-wide: 0.08em; /* ---------------------------------------------------------------------- SPACE & LAYOUT (Elementor › Container padding presets) ---------------------------------------------------------------------- */ --section-y: clamp(4.5rem, 2.6rem + 6.4vw, 10rem); /* 72 → 160 */ --section-y-lg: clamp(5.5rem, 2.8rem + 8.6vw, 12.5rem); /* 88 → 200 */ --section-y-sm: clamp(3.5rem, 2.2rem + 4vw, 6.5rem); /* 56 → 104 */ --gutter: clamp(1.25rem, 0.35rem + 3.2vw, 4rem); /* 20 → 64 */ --shell: 1360px; /* content max-width (brief: 1280–1400) */ --shell-wide: 1600px; /* full-bleed media rails */ --measure: 62ch; /* max reading width (~70 characters in Manrope) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-pill: 100px; --shadow-lift: 0 30px 60px -30px rgba(7, 20, 33, 0.35); --shadow-deep: 0 50px 100px -35px rgba(0, 0, 0, 0.8); /* ---------------------------------------------------------------------- MOTION — one house curve; four durations. Never bouncy. ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* expo-out: the house curve */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --dur-fast: 200ms; --dur: 420ms; --dur-slow: 760ms; --dur-reveal: 1000ms; --z-base: 1; --z-sticky: 50; --z-float: 90; --z-header: 100; --z-overlay: 200; } /* Dark scope. Any section carrying .on-dark re-points the semantic roles. Page heroes and conversion strips are always navy, so they join the scope automatically. */ .on-dark, .page-hero, .convert { --bg: var(--tw-navy); --bg-alt: var(--tw-navy-soft); --surface: var(--tw-navy-soft); --fg: var(--fg-on-dark); --fg-muted: var(--fg-muted-on-dark); --line: var(--line-on-dark); --line-soft: var(--line-on-dark-soft); --accent-text: var(--tw-blue); /* bright blue passes 8.1:1 on navy */ } .on-dark--soft { --bg: var(--tw-navy-soft); --bg-alt: var(--tw-navy); --surface: var(--tw-navy); } .on-alt { --bg: var(--tw-off-white); --surface: var(--tw-white); } /* Honour the OS reduced-motion setting. Entrance states are neutralised outright rather than played back quickly, so nothing is ever stranded mid-reveal. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } [data-reveal], .lines .line > span, [data-mask] { opacity: 1 !important; translate: none !important; clip-path: none !important; } }