/* * VERTEX LOGISTICS design tokens — ported from the original site's * src/styles.css. Night (dark) is the default palette on :root; adding * class="light" to switches to day mode. Kept as raw custom * properties (no Tailwind layer) since this theme is hand-written CSS. */ :root { --radius: 0.375rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --background: oklch(0.19 0.032 259); --foreground: oklch(0.97 0.005 250); --surface: oklch(0.24 0.032 259); --surface-2: oklch(0.28 0.03 258); --card: oklch(0.235 0.031 259); --card-foreground: oklch(0.97 0.005 250); --popover: oklch(0.22 0.031 259); --popover-foreground: oklch(0.97 0.005 250); /* Amber brand extracted from the logo mark */ --brand: oklch(0.806 0.146 74.5); --brand-deep: oklch(0.727 0.163 55); --brand-soft: oklch(0.88 0.09 80); --steel: oklch(0.79 0.006 260); --primary: oklch(0.806 0.146 74.5); --primary-foreground: oklch(0.2 0.035 260); --secondary: oklch(0.28 0.03 258); --secondary-foreground: oklch(0.97 0.005 250); --muted: oklch(0.27 0.028 258); --muted-foreground: oklch(0.72 0.015 258); --accent: oklch(0.3 0.035 258); --accent-foreground: oklch(0.97 0.005 250); --destructive: oklch(0.62 0.21 25); --destructive-foreground: oklch(0.98 0.005 250); --border: oklch(0.35 0.026 258 / 55%); --input: oklch(0.35 0.026 258 / 70%); --ring: oklch(0.806 0.146 74.5 / 60%); --gradient-brand: linear-gradient(100deg, var(--brand-deep), var(--brand)); --gradient-veil: linear-gradient( 180deg, color-mix(in oklab, var(--background) 15%, transparent) 0%, color-mix(in oklab, var(--background) 72%, transparent) 55%, var(--background) 100% ); --gradient-panel: linear-gradient( 160deg, color-mix(in oklab, var(--surface) 92%, white 8%), color-mix(in oklab, var(--background) 88%, black 12%) ); --shadow-panel: 0 24px 60px -32px oklch(0 0 0 / 70%); --shadow-brand: 0 18px 48px -20px color-mix(in oklab, var(--brand) 45%, transparent); --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --font-display: "Sora", "Cairo", ui-sans-serif, system-ui, sans-serif; --font-sans: "Manrope", "Cairo", ui-sans-serif, system-ui, sans-serif; --font-arabic: "Cairo", "Manrope", ui-sans-serif, system-ui, sans-serif; } /* ===== DAY MODE ===== */ html.light { --background: oklch(0.985 0.004 250); --foreground: oklch(0.24 0.035 259); --surface: oklch(0.96 0.006 250); --surface-2: oklch(0.93 0.008 250); --card: oklch(1 0 0); --card-foreground: oklch(0.24 0.035 259); --popover: oklch(1 0 0); --popover-foreground: oklch(0.24 0.035 259); --brand: oklch(0.72 0.16 58); --brand-deep: oklch(0.63 0.16 45); --brand-soft: oklch(0.84 0.11 72); --steel: oklch(0.45 0.02 260); --primary: oklch(0.7 0.165 55); --primary-foreground: oklch(0.99 0.004 250); --secondary: oklch(0.94 0.008 250); --secondary-foreground: oklch(0.26 0.035 259); --muted: oklch(0.95 0.006 250); --muted-foreground: oklch(0.5 0.02 258); --accent: oklch(0.93 0.012 250); --accent-foreground: oklch(0.24 0.035 259); --border: oklch(0.62 0.02 258 / 28%); --input: oklch(0.6 0.02 258 / 40%); --ring: oklch(0.7 0.165 55 / 45%); --gradient-veil: linear-gradient( 180deg, color-mix(in oklab, var(--background) 10%, transparent) 0%, color-mix(in oklab, var(--background) 70%, transparent) 55%, var(--background) 100% ); --gradient-panel: linear-gradient( 160deg, oklch(1 0 0), color-mix(in oklab, var(--surface) 88%, var(--brand-soft) 12%) ); --shadow-panel: 0 24px 60px -34px oklch(0.3 0.04 259 / 28%); --shadow-brand: 0 18px 48px -22px color-mix(in oklab, var(--brand) 40%, transparent); } /* Hero band always stays dark for photo contrast, even in day mode. --gradient-veil is ALSO explicitly re-declared here: html.light already redeclares --gradient-veil (for other light-mode uses) with its own var(--background) baked in — without redeclaring it again here too, the hero would inherit that html.light string wholesale and fade toward the LIGHT background color instead of this dark one, washing out the lower half of the hero text (confirmed by screenshot, not just theory). */ html.light .hero-dark { --background: oklch(0.19 0.032 259); --foreground: oklch(0.97 0.005 250); --muted-foreground: oklch(0.8 0.015 258); --brand: oklch(0.806 0.146 74.5); --brand-deep: oklch(0.727 0.163 55); --border: oklch(0.35 0.026 258 / 55%); --gradient-veil: linear-gradient( 180deg, color-mix(in oklab, var(--background) 15%, transparent) 0%, color-mix(in oklab, var(--background) 72%, transparent) 55%, var(--background) 100% ); background-color: oklch(0.19 0.032 259); color: var(--foreground); } *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.5; } html[dir="rtl"] body { font-family: var(--font-arabic); } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: var(--font-arabic); letter-spacing: 0; } /* Tailwind's preflight zeroes all of these by default; this hand-written theme needs the same reset explicitly. Missing it on dd specifically is what caused the stats-band numbers to sit off-center (browser default `dd { margin-inline-start: 40px }` shrank+shifted its centered text box). */ p, dl, dt, dd, ul, ol, li, figure, blockquote { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } /* Default size for vertex_icon() output — override per use-site as needed. */ svg[aria-hidden="true"] { width: 1em; height: 1em; vertical-align: -0.125em; } ::selection { background: color-mix(in oklab, var(--brand) 40%, transparent); } /* max-w-7xl (1280px) + px-5 sm:px-8 — matches Header/Footer/Section.tsx exactly */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; } @media (min-width: 640px) { .container { padding-inline: 32px; } } .font-display { font-family: var(--font-display); } .text-brand-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } /* NOTE: no border-radius here on purpose — the source .panel utility is background/border/shadow only; each use-site adds its own rounded-*. */ .panel { background: var(--gradient-panel); border: 1px solid var(--border); box-shadow: var(--shadow-panel); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); } .hairline { border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent); } .grid-veil { background-image: linear-gradient(color-mix(in oklab, var(--steel) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--steel) 7%, transparent) 1px, transparent 1px); background-size: 64px 64px; } .eyebrow { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); font-weight: 600; } html[dir="rtl"] .eyebrow { letter-spacing: 0.06em; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; /* px-6 py-3.5 */ border-radius: var(--radius-md); font-weight: 600; font-size: 0.875rem; /* text-sm */ border: 1px solid transparent; transition: transform 0.3s var(--ease-premium), border-color 0.2s; } .btn:hover { transform: translateY(-2px); } .btn-sm { padding: 10px 16px; } /* px-4 py-2.5 — header CTA */ /* Flat bg-primary, NOT the gradient — every real CTA in source uses plain bg-primary; --gradient-brand is reserved for thin accent lines/text-clip only (confirmed by grepping every button in the source components/pages). */ .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-brand); } .btn-secondary { background: transparent; border-color: color-mix(in oklab, var(--steel) 18%, transparent); color: var(--foreground); } .btn-secondary:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); } /* Every real .btn in source wraps its trailing ArrowRight in group-hover:translate-x-1; since .btn is always the hover target itself, a plain :hover suffices. */ .btn svg { transition: transform 0.3s; } .btn:hover svg { transform: translateX(4px); } /* Reveal-on-scroll (paired with assets/js/reveal.js) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); } .reveal-in { opacity: 1; transform: none; } @keyframes vx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-slow { animation: vx-float 7s ease-in-out infinite; } /* Icon micro-animations — only icon-float was ported before; the theme also references icon-spin-slow/icon-scan/icon-swing/icon-drop in PHP templates (tracking badge, header/footer phone+map icons, track button) which were silently doing nothing since these never existed here. */ @keyframes icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes icon-swing { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } } @keyframes icon-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } @keyframes icon-drop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-4px); } 70% { transform: translateY(1px); } } @keyframes icon-spin-slow { to { transform: rotate(360deg); } } @keyframes icon-scan { 0%, 100% { transform: scale(0.94); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes icon-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } .icon-float { animation: icon-float 3.6s var(--ease-premium) infinite; } .icon-swing { transform-origin: 50% 15%; animation: icon-swing 4s ease-in-out infinite; } .icon-beat { animation: icon-beat 2.4s ease-in-out infinite; } .icon-drop { animation: icon-drop 3s ease-in-out infinite; } .icon-spin-slow { animation: icon-spin-slow 14s linear infinite; } .icon-scan { animation: icon-scan 2.2s ease-in-out infinite; } .icon-nudge { animation: icon-nudge 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }