/* ============================================================ OneTwo Logistics — Design Tokens Brand: petrol teal + cyan glow · Glassmorphism · Light/Dark Semantic vars flip by [data-theme]; .dark-zone forces dark locally (so the hero/footer stay cinematic even in light mode) ============================================================ */ :root { /* -- Brand primitives (theme independent) -- */ --petrol: #0e6a8e; --petrol-600: #0c5c7c; --petrol-700: #0a4a63; --petrol-900: #06303f; --cyan: #21b7ec; --cyan-bright: #5fd0f5; --abyss: #04141c; --abyss-2: #071f2b; --abyss-3: #0a2b3a; --ice: #dceef5; --electric: #5b7cfa; /* indigo pop, used sparingly */ --hot: #ff5d8f; /* accent spark, tiny doses only */ --grad-bold: linear-gradient(115deg, #0a4a63 0%, #0e6a8e 38%, #21b7ec 72%, #5fd0f5 100%); --grad-mesh: radial-gradient(58% 78% at 84% 10%, rgba(33,183,236,.26), transparent 62%), radial-gradient(55% 75% at 10% 28%, rgba(14,106,142,.30), transparent 64%), radial-gradient(60% 80% at 52% 110%, rgba(33,183,236,.12), transparent 62%); /* -- Fonts -- */ --font-latin: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "Cairo", system-ui, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", monospace; /* --font-ui is swapped between latin/arabic on by i18n.js */ --font-ui: var(--font-arabic); /* -- Fluid type scale -- */ --fs-mega: clamp(3.4rem, 1rem + 9vw, 8rem); --fs-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); --fs-h1: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); --fs-h2: clamp(1.8rem, 1.25rem + 2.4vw, 3rem); --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.55rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.55vw, 1.3rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; /* -- Spacing scale -- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-pad: clamp(2.2rem, 1.5rem + 1.4vw, 3.4rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); --maxw: 1400px; --maxw-narrow: 920px; /* -- Radii -- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-2xl: 44px; --r-pill: 999px; /* -- Motion -- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 0.18s; --dur-2: 0.35s; --dur-3: 0.6s; --dur-4: 0.9s; /* -- z-index -- */ --z-bg: 0; --z-base: 1; --z-raise: 10; --z-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-cursor: 2000; /* ========== SEMANTIC — LIGHT (default) ========== */ --bg: #eaf1f5; --bg-2: #e2edf1; --bg-tint: radial-gradient(900px 540px at 90% -4%, rgba(33,183,236,.20), transparent 60%), radial-gradient(760px 520px at -6% 26%, rgba(14,106,142,.16), transparent 58%), radial-gradient(820px 560px at 55% 106%, rgba(33,183,236,.14), transparent 60%); --surface: #ffffff; --surface-2: #f4f8fa; --text: #082430; --text-soft: #2c4b57; --text-mute: #5f7883; --border: rgba(8,36,48,.10); --border-strong: rgba(8,36,48,.16); --brand: #0e6a8e; --accent: #0e6a8e; --accent-2: #21b7ec; --on-accent: #ffffff; --link: #0c5c7c; /* glass */ --glass: rgba(255,255,255,.8); --glass-strong: rgba(255,255,255,.92); --glass-border: rgba(255,255,255,.95); --glass-hi: rgba(255,255,255,1); --glass-edge: rgba(8,36,48,.08); /* subtle definition on light */ --glass-blur: 16px; /* shadows */ --shadow-sm: 0 2px 8px rgba(8,36,48,.06), 0 1px 2px rgba(8,36,48,.06); --shadow-md: 0 10px 30px -8px rgba(8,36,48,.14), 0 4px 10px -4px rgba(8,36,48,.08); --shadow-lg: 0 30px 70px -20px rgba(8,36,48,.28), 0 10px 24px -12px rgba(8,36,48,.16); --shadow-glow: 0 8px 40px -6px rgba(33,183,236,.45); --ring: 0 0 0 3px rgba(33,183,236,.35); /* gradients / signature */ --grad-brand: linear-gradient(120deg, #0e6a8e 0%, #21b7ec 100%); --grad-cyan: linear-gradient(120deg, #21b7ec 0%, #5fd0f5 100%); --grad-line: linear-gradient(90deg, transparent, #21b7ec, transparent); --line-color: rgba(33,183,236,.55); --line-glow: drop-shadow(0 0 6px rgba(33,183,236,.7)); color-scheme: light; } /* ========== SEMANTIC — DARK ========== */ [data-theme="dark"] { --bg: #071f29; --bg-2: #0a2733; --bg-tint: linear-gradient(180deg, rgba(10,42,55,.5), transparent 30%, transparent 70%, rgba(10,42,55,.5)), radial-gradient(900px 620px at 88% -6%, rgba(33,183,236,.22), transparent 60%), radial-gradient(820px 560px at -6% 16%, rgba(14,106,142,.24), transparent 60%), radial-gradient(820px 560px at 55% 106%, rgba(33,183,236,.14), transparent 60%); --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.03); --text: #eaf5f9; --text-soft: #b7d3dd; --text-mute: #7ea2ae; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --brand: #33c0f0; --accent: #35c6f2; --accent-2: #5fd0f5; --on-accent: #04141c; --link: #5fd0f5; --glass: rgba(255,255,255,.06); --glass-strong: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.15); --glass-hi: rgba(255,255,255,.24); --glass-edge: rgba(255,255,255,.12); --glass-blur: 16px; --shadow-sm: 0 2px 10px rgba(0,0,0,.4); --shadow-md: 0 14px 40px -12px rgba(0,0,0,.55); --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.7), 0 12px 30px -16px rgba(0,0,0,.5); --shadow-glow: 0 8px 50px -6px rgba(33,183,236,.5); --ring: 0 0 0 3px rgba(95,208,245,.4); --grad-brand: linear-gradient(120deg, #21b7ec 0%, #5fd0f5 100%); --line-color: rgba(95,208,245,.6); --line-glow: drop-shadow(0 0 7px rgba(95,208,245,.85)); color-scheme: dark; } /* ========== DARK ZONE — forces dark locally ========== Used on hero / CTA / footer so they stay cinematic even while the page is in light mode. Mirrors dark values. */ .dark-zone { --bg: #04141c; --bg-2: #071f2b; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.03); --text: #eaf5f9; --text-soft: #b7d3dd; --text-mute: #86a7b3; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --brand: #33c0f0; --accent: #35c6f2; --accent-2: #5fd0f5; --on-accent: #04141c; --link: #5fd0f5; --glass: rgba(255,255,255,.06); --glass-strong: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.15); --glass-hi: rgba(255,255,255,.24); --glass-edge: rgba(255,255,255,.12); --line-color: rgba(95,208,245,.6); --line-glow: drop-shadow(0 0 7px rgba(95,208,245,.85)); color-scheme: dark; }