/* ── inlined: tokens/fonts.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — FONTS Using Inter for all display and body text. ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap'); /* ── inlined: tokens/colors.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — COLOR TOKENS Primary: #003a5d (Deep Navy) Secondary: #1f91cf (Sky Blue) Accent: #f05231 (Coral / CTA) ===================================================== */ :root { /* --- NAVY SCALE --- */ --color-navy-950: #001421; --color-navy-900: #001e30; --color-navy-800: #002d47; --color-navy-700: #003a5d; /* Brand Primary */ --color-navy-600: #004e7a; --color-navy-500: #0062a0; --color-navy-400: #1f7fb5; --color-navy-300: #1f91cf; /* Brand Secondary / Sky Blue */ --color-navy-200: #5ab0df; --color-navy-100: #a8d5f0; --color-navy-50: #e8f4fb; /* --- CORAL SCALE --- */ --color-coral-900: #7a1c0d; --color-coral-700: #b83c22; --color-coral-500: #f05231; /* Brand CTA / Accent */ --color-coral-400: #f3734f; --color-coral-200: #f9b5a5; --color-coral-100: #fde5df; --color-coral-50: #fef4f2; /* --- ORANGE SCALE (Logo globe) --- */ --color-orange-500: #f7941d; --color-orange-200: #fbc878; --color-orange-50: #fef5e6; /* --- NEUTRAL SCALE --- */ --color-gray-950: #0d1317; --color-gray-900: #1a2128; --color-gray-800: #252e38; --color-gray-700: #374451; --color-gray-600: #4a5561; --color-gray-500: #58595b; /* Logo tagline charcoal */ --color-gray-400: #7a8796; --color-gray-300: #9faab5; --color-gray-200: #c0c8d0; --color-gray-100: #e2e6ea; --color-gray-50: #f4f6f8; --color-white: #ffffff; /* --- SEMANTIC SURFACE --- */ --color-bg: var(--color-white); --color-bg-subtle: var(--color-gray-50); --color-bg-navy: var(--color-navy-700); --color-bg-navy-dark: var(--color-navy-900); /* --- SEMANTIC TEXT --- */ --color-text-primary: var(--color-gray-900); --color-text-secondary: var(--color-gray-600); --color-text-muted: var(--color-gray-400); --color-text-inverse: var(--color-white); --color-text-link: var(--color-navy-300); --color-text-link-hover:var(--color-navy-700); /* --- SEMANTIC BORDER --- */ --color-border: var(--color-gray-100); --color-border-strong:var(--color-gray-200); --color-border-focus: var(--color-navy-300); /* --- BRAND ALIASES --- */ --color-brand-primary: var(--color-navy-700); --color-brand-secondary: var(--color-navy-300); --color-brand-cta: var(--color-coral-500); --color-brand-orange: var(--color-orange-500); /* --- STATUS --- */ --color-success: #1a7f5a; --color-success-bg: #e6f4ef; --color-warning: #b45309; --color-warning-bg: #fef3c7; --color-error: #c0392b; --color-error-bg: #fdecea; --color-info: var(--color-navy-300); --color-info-bg: var(--color-navy-50); } /* ── inlined: tokens/typography.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — TYPOGRAPHY TOKENS ===================================================== */ :root { /* --- FONT FAMILIES --- */ --font-display: 'Inter', system-ui, sans-serif; --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* --- FONT WEIGHTS --- */ --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; --weight-black: 900; /* --- TYPE SCALE (px) --- */ --text-xs: 11px; --text-sm: 13px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 76px; /* --- LINE HEIGHTS --- */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7; /* --- LETTER SPACING --- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; } /* --- BASE DOCUMENT STYLES --- */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-primary); margin: 0; } h1 { font-size: var(--text-5xl); font-weight: var(--weight-extrabold); } h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); } h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); } h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); } h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } p { margin: 0; } a { color: var(--color-text-link); text-decoration: none; } a:hover { color: var(--color-text-link-hover); text-decoration: underline; } code, pre { font-family: var(--font-mono); font-size: 0.9em; } /* ── inlined: tokens/spacing.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — SPACING TOKENS Base unit: 4px ===================================================== */ :root { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- SEMANTIC SPACING --- */ --gap-xs: var(--space-2); /* 8px — icon gap, tight inline */ --gap-sm: var(--space-3); /* 12px — compact stacks */ --gap-md: var(--space-6); /* 24px — standard gap */ --gap-lg: var(--space-8); /* 32px — section internal */ --gap-xl: var(--space-12); /* 48px — between major blocks */ /* --- SECTION PADDING --- */ --section-padding-sm: var(--space-12); /* 48px */ --section-padding-md: var(--space-20); /* 80px */ --section-padding-lg: var(--space-32); /* 128px */ /* --- LAYOUT --- */ --container-max: 1280px; --container-narrow: 800px; --container-wide: 1440px; --container-padding: var(--space-8); /* 32px side gutter */ /* --- BORDER RADIUS --- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; } /* ── inlined: tokens/shadows.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — SHADOW TOKENS Clean, professional shadows. Navy-tinted for depth. ===================================================== */ :root { --shadow-none: none; /* Subtle lift — cards, list items */ --shadow-sm: 0 1px 3px rgba(0, 58, 93, 0.06), 0 1px 2px rgba(0, 58, 93, 0.04); /* Standard — dropdowns, popovers */ --shadow-md: 0 4px 12px rgba(0, 58, 93, 0.10), 0 2px 4px rgba(0, 58, 93, 0.06); /* Elevated — modals, drawers */ --shadow-lg: 0 12px 32px rgba(0, 58, 93, 0.14), 0 4px 12px rgba(0, 58, 93, 0.08); /* Heavy — major overlays */ --shadow-xl: 0 24px 64px rgba(0, 58, 93, 0.18), 0 8px 24px rgba(0, 58, 93, 0.10); /* Navy accent — hover state on cards */ --shadow-navy: 0 6px 20px rgba(0, 58, 93, 0.22), 0 2px 6px rgba(0, 58, 93, 0.12); /* Coral accent — CTA / highlight hover */ --shadow-coral: 0 6px 20px rgba(240, 82, 49, 0.28), 0 2px 8px rgba(240, 82, 49, 0.16); /* Inset — pressed states */ --shadow-inset: inset 0 1px 3px rgba(0, 58, 93, 0.12); } /* ── inlined: tokens/motion.css ── */ /* ===================================================== EUTILITY DESIGN SYSTEM — MOTION TOKENS Professional, measured. No bounce or spring. ===================================================== */ :root { /* --- DURATION --- */ --duration-instant: 0ms; /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 350ms; /* @kind other */ --duration-slower: 500ms; /* @kind other */ /* --- EASING --- */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */ /* --- SHORTHAND TRANSITIONS --- */ --transition-fast: all var(--duration-fast) var(--ease-out); --transition-base: all var(--duration-base) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-out); --transition-colors: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); } /* ===================================================== EUTILITY DESIGN SYSTEM — ROOT STYLESHEET Import this single file to get all tokens + base styles. ===================================================== */ /* ===== MOBILE SAFETY NET — CSS-only, works even if responsive JS never runs ===== Below 720px every inline multi-column grid stacks to one column and flex rows are allowed to wrap. Marquee tracks and elements marked data-no-stack are exempt. */ @media (max-width: 720px) { #root section [style*="grid-template-columns"]:not([data-no-stack]), #root footer [style*="grid-template-columns"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } #root section div[style*="display: flex"]:not([class*="track"]):not([data-no-stack]), #root section div[style*="display:flex"]:not([class*="track"]):not([data-no-stack]) { flex-wrap: wrap; } #root section, #root footer { min-width: 0; } #root section h1, #root section h2 { overflow-wrap: break-word; } } /* Global overflow guard — stop any wide element forcing horizontal scroll on phones. `clip` (where supported) also forbids programmatic sideways scroll, which keeps iOS Safari from widening its layout viewport / letting the background "swipe" away. */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* Overscroll (rubber-band) regions match the brand navy instead of flashing white */ html { background-color: #003a5d; } body { background-color: #f5f8fa; } @media (max-width: 820px) { img, canvas, svg, video { max-width: 100%; } /* Hero stat row: wrap the 5 stats instead of overflowing the viewport */ [style*="border-top: 1px solid rgba(255, 255, 255, 0.12)"][style*="padding-top: 36px"] { flex-wrap: wrap !important; row-gap: 28px !important; } [style*="border-top: 1px solid rgba(255, 255, 255, 0.12)"][style*="padding-top: 36px"] > div { flex: 0 0 50% !important; padding-left: 0 !important; padding-right: 14px !important; border-right: none !important; } } /* ===================================================== RESPONSIVE LAYER Inline React styles cannot carry media queries, so we match the serialized inline `style` attribute and adapt multi-column grids to the viewport at breakpoints. The serialized form is e.g. "grid-template-columns: repeat(3, 1fr)" / "grid-template-columns: 1fr 1fr" — substring matching is reliable across the site's inline grids. ===================================================== */ /* Large tablets / small laptops */ @media (max-width: 1024px) { [style*="grid-template-columns: repeat(4"]:not([data-no-stack]) { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns: 1.2fr 1fr 0.7fr 0.9fr"]:not([data-no-stack]) { grid-template-columns: 1fr 1fr !important; } /* Footer: 4 columns -> 2 */ [style*="grid-template-columns: 1.4fr 1fr 1fr 1.1fr"]:not([data-no-stack]) { grid-template-columns: 1fr 1fr !important; } } /* Tablets / large phones */ @media (max-width: 820px) { [style*="grid-template-columns: 1fr 1fr"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(2"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(3"]:not([data-no-stack]) { grid-template-columns: repeat(2, 1fr) !important; } /* collapse oversized column gaps once stacked */ [style*="grid-template-columns: 1fr 1fr"]:not([data-no-stack]) { column-gap: 0 !important; } /* tame huge row gaps once split sections stack */ [style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"]:not([data-no-stack]) { gap: 36px !important; } [style*="grid-template-columns: 1fr 1fr"][style*="gap: 28px 80px"]:not([data-no-stack]) { gap: 24px !important; } [style*="grid-template-columns: 1fr 1fr"][style*="gap: 40px 88px"]:not([data-no-stack]) { gap: 32px !important; } [style*="grid-template-columns: 1fr 1fr"][style*="gap: 0 88px"]:not([data-no-stack]) { gap: 0 !important; } /* section header rows (heading left, button right) wrap instead of cramming */ [style*="align-items: flex-end"][style*="justify-content: space-between"] { flex-wrap: wrap; row-gap: 18px; } } /* Phones */ @media (max-width: 560px) { [style*="grid-template-columns: repeat(3"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } [style*="grid-template-columns: repeat(4"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } [style*="grid-template-columns: 1.2fr 1fr 0.7fr 0.9fr"]:not([data-no-stack]) { grid-template-columns: 1fr !important; } /* Footer: single column, tighter gap */ [style*="grid-template-columns: 1.4fr 1fr 1fr 1.1fr"]:not([data-no-stack]) { grid-template-columns: 1fr !important; gap: 28px !important; } /* Scale section headings down on phones (inline sizes can't carry media queries) */ h1[style*="font-size: 38px"], h2[style*="font-size: 38px"], h3[style*="font-size: 38px"] { font-size: 29px !important; } h1[style*="font-size: 46px"], h2[style*="font-size: 46px"] { font-size: 33px !important; } }