/* ========================================================= FUTRON LOGISTICS — BASE DESIGN SYSTEM Light-first (matches the original Framer design: white bg, black text, gray subheads) with an automatic Ion Slate dark switch under prefers-color-scheme, plus a manual toggle that stamps data-theme="light|dark" on and wins in both directions. Persisted in localStorage (see js/main.js). Doctrine applied (see foundation-knowledge.md A-C): - 60-30-10: bg 60% / surface+border 30% / accent 10%. The single most-saturated element per viewport is the primary CTA ("Request a Route"). Secondary actions are outline-only. - WCAG AA: body-weight text uses --color-text-secondary, an AA-safe gray (#52525B light / #9CA6B4 dark). The lighter #999999-grade gray is reserved for large/display text (hero subhead) and decorative, non-essential microtext. - Type: ~1.25 modular scale (16/20/25/31/39/49) for the general rhythm; H1/H3 are pinned to the measured Framer values (40-48px / 22px) per design-DNA fidelity. - Whitespace: ~120px max vertical section rhythm. ========================================================= */ :root { /* ---------- THEME TOKENS: LIGHT (default) ---------- CRYO INDIGO accents over the original Framer white/black/gray base. */ --color-bg: #FFFFFF; --color-surface: #F6F7F8; --color-surface-2: #EEF0F2; --color-border: #E5E7EB; --color-text: #0A0A0A; --color-text-secondary: #52525B; /* AA-safe body/nav/footer/card copy */ --color-text-tertiary: #999999; /* large/display text + decorative only */ --color-accent: #3D3B98; /* Indigo */ --color-accent-light: #6B6FD6; /* Indigo-Light */ --color-accent-cyan: #39D2E8; /* Cyan-Line */ --color-warn: #F59E0B; --color-danger: #EF4444; --color-cta-bg: #000000; --color-cta-bg-hover: #1A1A1A; --color-cta-text: #FFFFFF; --color-dot: #1A1A1A; --color-nav-bg: rgba(255, 255, 255, 0.86); --color-shadow: rgba(17, 20, 24, 0.14); /* NEON EMBER — dark-only accent hues, still declared in light scope so components can reference them without erroring; unused in light. */ --teal-core: #0B6E6E; --teal-bright: #00B5AD; --magenta-core: #AC61B9; --magenta-hot: #FF2A6D; /* Typography */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Layout */ --max-width: 1280px; --gutter: clamp(20px, 5vw, 64px); --radius: 14px; --radius-sm: 8px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur-med: 420ms; --dur-slow: 720ms; } /* ---------- THEME TOKENS: DARK (system preference, no manual override) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0B0F14; --color-surface: #111827; --color-surface-2: #1F2937; --color-border: #1F2937; --color-text: #E5E7EB; --color-text-secondary: #9CA6B4; --color-text-tertiary: #8B94A3; --color-accent: #85EBD9; /* Accent-Cyan */ --color-accent-light: #65DC98; /* Accent-Mint */ --color-accent-cyan: #85EBD9; --color-warn: #F59E0B; --color-danger: #EF4444; --color-cta-bg: #0B468C; --color-cta-bg-hover: #0E64B3; --color-cta-text: #F3F4F6; --color-dot: #85EBD9; --color-nav-bg: rgba(11, 15, 20, 0.82); --color-shadow: rgba(0, 181, 173, 0.22); } } /* ---------- THEME TOKENS: manual override via toggle ---------- */ :root[data-theme="dark"] { --color-bg: #0B0F14; --color-surface: #111827; --color-surface-2: #1F2937; --color-border: #1F2937; --color-text: #E5E7EB; --color-text-secondary: #9CA6B4; --color-text-tertiary: #8B94A3; --color-accent: #85EBD9; --color-accent-light: #65DC98; --color-accent-cyan: #85EBD9; --color-warn: #F59E0B; --color-danger: #EF4444; --color-cta-bg: #0B468C; --color-cta-bg-hover: #0E64B3; --color-cta-text: #F3F4F6; --color-dot: #85EBD9; --color-nav-bg: rgba(11, 15, 20, 0.82); --color-shadow: rgba(0, 181, 173, 0.22); } :root[data-theme="light"] { --color-bg: #FFFFFF; --color-surface: #F6F7F8; --color-surface-2: #EEF0F2; --color-border: #E5E7EB; --color-text: #0A0A0A; --color-text-secondary: #52525B; --color-text-tertiary: #999999; --color-accent: #3D3B98; --color-accent-light: #6B6FD6; --color-accent-cyan: #39D2E8; --color-warn: #F59E0B; --color-danger: #EF4444; --color-cta-bg: #000000; --color-cta-bg-hover: #1A1A1A; --color-cta-text: #FFFFFF; --color-dot: #1A1A1A; --color-nav-bg: rgba(255, 255, 255, 0.86); --color-shadow: rgba(17, 20, 24, 0.14); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0; } input, select, textarea { font-family: inherit; font-size: 15px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); } /* Visible keyboard focus rings everywhere (component quality bar) */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } ::selection { background: var(--color-accent-light); color: #FFFFFF; } @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; scroll-behavior: auto !important; } } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--max-width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { position: relative; padding: clamp(64px, 10vw, 120px) 0; } .section-inner { position: relative; z-index: 2; } /* ---------- Typography scale ---------- ~1.25 modular scale (16/20/25/31/39/49) for the general rhythm; H1 (40-48) and card H3 (22) are pinned to the measured Framer values per design-DNA fidelity. */ h1, .h1 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; } h2, .h2 { font-size: clamp(25px, 3.2vw, 31px); font-weight: 700; line-height: 1.18; } h3, .h3 { font-size: 22px; font-weight: 700; } .lede { font-size: 20px; line-height: 1.5; color: var(--color-text-secondary); max-width: 62ch; } .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } /* ---------- Label / metadata microtext system ---------- Labels are accents, not containers. Subtle indigo in light mode, cyan in dark mode — never neon-washed (10% accent budget). */ .label-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .metadata-strip { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .metadata-strip::before { content: ""; width: 22px; height: 1px; background: var(--color-accent); opacity: 0.6; } .metadata-strip .status-live { color: var(--color-accent-light); } .corner-stamp { position: absolute; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text); opacity: 0.14; pointer-events: none; white-space: nowrap; } .corner-stamp.tr { top: 16px; right: 18px; } .corner-stamp.bl { bottom: 16px; left: 18px; } /* Real barcode-strip vector (Fox Rockett Label Vectors Vol.1, "Label - 82") replaces the earlier CSS-striped placeholder divider. Recolors via fill:currentColor -> the page's --color-accent (indigo/cyan light-dark on the business site, teal on Uniform Lab). Kept at a divider-level opacity, not full strength — it's an accent, not a focal graphic. */ .divider-barcode-vector { display: block; width: 100%; max-width: 420px; height: auto; /* the consuming has no viewBox of its own (only the it references does), so height:auto can't derive an intrinsic ratio on its own and falls back to the UA default (150px) — pin the real ratio explicitly. */ aspect-ratio: 294.51 / 40.85; margin: 30px auto; opacity: 0.5; color: var(--color-accent); } /* Small globe-wireframe watermark (Label - 90), reused wherever a decorative "reach/coverage" mark is wanted. Always aria-hidden, pointer-events:none, and capped to a low opacity budget. */ .footer-globe-watermark { position: absolute; right: 18px; bottom: 10px; width: 44px; height: auto; aspect-ratio: 89.87 / 193.23; opacity: 0.07; color: var(--color-text-secondary); pointer-events: none; z-index: -1; /* stays behind footer-grid/footer-legal, see .hero-globe-watermark note */ } .site-footer { position: relative; overflow: hidden; } /* ---------- Buttons ---------- 60-30-10: one filled (accent/CTA) button per viewport max; everything else is outline/ghost so it recedes. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 100px; font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-cta-bg); color: var(--color-cta-text); border-color: var(--color-cta-bg); } .btn-primary:hover { background: var(--color-cta-bg-hover); box-shadow: 0 10px 26px -10px var(--color-shadow); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); border-radius: var(--radius-sm); } .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-neon { background: transparent; color: var(--teal-bright); border-color: var(--teal-core); border-radius: var(--radius-sm); } .btn-neon:hover { background: rgba(0, 181, 173, 0.1); border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(0, 181, 173, 0.15); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); flex-shrink: 0; position: relative; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-med) var(--ease-out); } .theme-toggle:hover { border-color: var(--color-accent); } .theme-toggle svg { width: 18px; height: 18px; position: absolute; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } /* default (light): show sun, hide moon */ .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); } .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(-40deg); } /* effective dark (system, no override) */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-toggle .icon-sun { opacity: 0; transform: scale(0.5) rotate(40deg); } html:not([data-theme]) .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } } /* manual overrides always win */ html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: scale(0.5) rotate(40deg); } html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } html[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(-40deg); } /* ---------- Theme-conditional visibility utilities ---------- .theme-light-only / .theme-dark-only : show only in the given effective theme. Used for wordmark + wireframe asset swaps. Gated on :not([data-theme]) so manual overrides never race the media-query branch regardless of CSS source order. */ .theme-dark-only { display: none; } .theme-light-only { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-light-only { display: none; } html:not([data-theme]) .theme-dark-only { display: block; } } html[data-theme="dark"] .theme-light-only { display: none; } html[data-theme="dark"] .theme-dark-only { display: block; } html[data-theme="light"] .theme-light-only { display: block; } html[data-theme="light"] .theme-dark-only { display: none; } /* ---------- Nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 100; background: var(--color-nav-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--color-border); transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav-logo { display: inline-flex; align-items: center; } .nav-logo img { height: 24px; width: auto; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); transition: color var(--dur-fast) var(--ease-out); position: relative; } .nav-links a:hover { color: var(--color-text); } .nav-links a.active { color: var(--color-accent); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: none; width: 32px; height: 32px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--color-text); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav-toggle span { top: 15px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } .nav-toggle.open span { background: transparent; } .nav-toggle.open span::before { transform: translateY(8px) rotate(45deg); } .nav-toggle.open span::after { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 860px) { .nav-links { display: none; } .nav-cta .btn-primary { display: none; } .nav-toggle { display: block; } .site-nav.mobile-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--color-bg); padding: 24px var(--gutter) 32px; gap: 20px; border-bottom: 1px solid var(--color-border); } .site-nav.mobile-open .nav-links a { font-size: 16px; } .site-nav.mobile-open .nav-cta .btn-primary { display: inline-flex; margin: 4px var(--gutter) 24px; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); padding: 56px 0 40px; background: var(--color-surface); transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-col h4 { font-size: 13px; color: var(--color-accent); margin-bottom: 14px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; } .footer-col a, .footer-col p { display: block; color: var(--color-text-secondary); font-size: 14px; margin-bottom: 10px; transition: color var(--dur-fast) var(--ease-out); } .footer-col a:hover { color: var(--color-text); } .footer-legal { border-top: 1px solid var(--color-border); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--color-text-secondary); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > * { transition-delay: calc(var(--i, 0) * 80ms); } /* ---------- Misc utility ---------- */ .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .badge-row { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); } .badge-row span { display: inline-flex; align-items: center; gap: 8px; } .badge-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-light); box-shadow: 0 0 8px var(--color-accent-light); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #FFFFFF; padding: 10px 16px; z-index: 999; font-weight: 600; } .skip-link:focus { left: var(--gutter); top: 8px; }