/** * Thermovest Design Tokens — CSS Custom Properties * Auto-generated from design_tokens.json * Import this file in your main CSS entry point. * * Google Fonts import (add to or @import at top of CSS): * https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); /* ───────────────────────────────────────────── KEYFRAME DEFINITIONS ───────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes countUp { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } } /* ───────────────────────────────────────────── ROOT TOKENS ───────────────────────────────────────────── */ :root { /* — Brand Colors — */ --color-primary: #C8192A; /* logo red — "thermo" */ --color-primary-hover: #B01020; --color-primary-active: #920D1A; --color-primary-light: #FCECEA; /* light red tint */ --color-primary-mid: #E06070; /* mid-tone for gradients */ --color-primary-contrast: #FFFFFF; /* — Neutral Scale — */ --color-neutral-900: #0F1B3D; /* deep navy — hero bg */ --color-neutral-800: #1B3060; /* logo navy — "vest" */ --color-neutral-700: #243070; /* slightly lighter navy */ --color-neutral-600: #4A5068; --color-neutral-500: #6B7280; --color-neutral-400: #9CA3AF; --color-neutral-300: #D1D5DB; --color-neutral-200: #E5E7EB; --color-neutral-100: #F3F4F6; --color-neutral-50: #F9FAFB; --color-neutral-0: #FFFFFF; /* — Accent Colors — */ --color-accent-blue: #3B82F6; --color-accent-blue-light: #EFF6FF; --color-accent-blue-dark: #1D4ED8; --color-accent-yellow: #F59E0B; --color-accent-yellow-light:#FFFBEB; --color-accent-green: #10B981; --color-accent-green-light: #ECFDF5; /* — Semantic Colors — */ --color-text-primary: #0F1B3D; /* navy-tinted text matches logo */ --color-text-secondary: #4A5068; --color-text-muted: #9CA3AF; --color-text-inverse: #FFFFFF; --color-text-inverse-soft: rgba(255, 255, 255, 0.72); --color-surface-page: #F9FAFB; --color-surface-card: #FFFFFF; --color-surface-section: #F3F4F6; --color-surface-dark: #1B3060; /* logo navy for dark sections */ --color-surface-hero: #0F1B3D; /* deep navy for hero */ --color-surface-orange: #C8192A; /* renamed to primary red */ --color-border-default: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-inverse: rgba(255, 255, 255, 0.15); /* — Typography — */ --font-display: 'Outfit', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --font-size-7xl: 4.5rem; /* 72px */ --font-size-stat: 5rem; /* 80px — stat numbers */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --letter-spacing-tighter: -0.04em; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.04em; --letter-spacing-widest: 0.10em; /* — Spacing — */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px; /* — Border Radius — */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* — Shadows — */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.22); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.07); --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.13); --shadow-orange: 0 4px 20px rgba(200, 25, 42, 0.30); /* red glow */ --shadow-orange-hover: 0 8px 32px rgba(200, 25, 42, 0.45); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* — Transitions — */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* — Animations — */ --animation-fade-up: fadeUp 0.6s ease both; --animation-fade-in: fadeIn 0.4s ease both; --animation-slide-right: slideRight 0.5s ease both; --animation-count-up: countUp 0.8s ease both; /* — Layout — */ --container-max-width: 1280px; --container-padding: clamp(16px, 4vw, 48px); --section-padding-y: clamp(64px, 8vw, 120px); --grid-columns: 12; --grid-gap: 24px; /* — Z-Index — */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ───────────────────────────────────────────── BASE RESET & DEFAULTS ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-text-primary); background-color: var(--color-surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ───────────────────────────────────────────── TYPOGRAPHY UTILITIES ───────────────────────────────────────────── */ .type-display-xl { font-family: var(--font-display); font-size: clamp(var(--font-size-5xl), 6vw, var(--font-size-7xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); } .type-display-lg { font-family: var(--font-display); font-size: clamp(var(--font-size-4xl), 4.5vw, var(--font-size-6xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } .type-display-md { font-family: var(--font-display); font-size: clamp(var(--font-size-3xl), 3.5vw, var(--font-size-5xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); } .type-heading-xl { font-family: var(--font-display); font-size: clamp(var(--font-size-2xl), 2.5vw, var(--font-size-4xl)); font-weight: var(--font-weight-bold); line-height: var(--line-height-snug); letter-spacing: var(--letter-spacing-tight); } .type-heading-lg { font-family: var(--font-display); font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-3xl)); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); } .type-heading-md { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); } .type-body-lg { font-family: var(--font-body); font-size: var(--font-size-lg); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); } .type-body-base { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); } .type-body-sm { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); } .type-label { font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; } .type-stat { font-family: var(--font-display); font-size: var(--font-size-stat); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tighter); } /* ───────────────────────────────────────────── LAYOUT UTILITIES ───────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding); } .section { padding-block: var(--section-padding-y); } /* ───────────────────────────────────────────── ANIMATION UTILITIES ───────────────────────────────────────────── */ .animate-fade-up { animation: var(--animation-fade-up); } .animate-fade-in { animation: var(--animation-fade-in); } .animate-slide-right{ animation: var(--animation-slide-right); } .animate-count-up { animation: var(--animation-count-up); } /* Staggered entrance delays */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } /* Scroll-triggered — add via JS IntersectionObserver */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--transition-slower), transform var(--transition-slower); } .reveal.is-visible { opacity: 1; transform: translateY(0); }