/** * Critical CSS - Inline in * Only styles needed for above-the-fold content * Target: < 14KB uncompressed * * Covers: * - CSS Reset * - CSS Variables (colors, typography, spacing) * - Base typography * - Container * - Critical buttons * - Loading states */ /* ===== Degular Font (Critical weights only) ===== */ @font-face { font-family: 'Degular'; src: url('../fonts/NeoshareDegular-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ===== CSS Variables ===== */ :root { /* Brand Colors */ --graphite-grey: #242428; --soft-sand: #F7F2EB; --pure-white: #FFFFFF; --pure-black: #000000; --signal-orange: #E66300; --soft-orange: #F9954A; --trust-blue: #265797; --evergreen: #2E5B5B; /* Theme Variables - Light (default) */ --bg-primary: var(--soft-sand); --bg-secondary: var(--pure-white); --text-primary: var(--graphite-grey); --text-secondary: rgba(36, 36, 40, 0.65); --text-inverse: var(--pure-white); --border-primary: rgba(36, 36, 40, 0.1); --accent-primary: var(--signal-orange); --accent-hover: var(--soft-orange); --accent-light: rgba(230, 99, 0, 0.1); /* Typography Scale (Mobile-first) */ --text-xs: clamp(0.75rem, 0.75rem + 0.0625vw, 0.8125rem); --text-sm: clamp(0.8125rem, 0.8125rem + 0.125vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.125rem); --text-lg: clamp(1rem, 0.875rem + 0.625vw, 1.375rem); --text-xl: clamp(1.125rem, 0.875rem + 1.25vw, 1.625rem); --text-2xl: clamp(1.25rem, 0.875rem + 1.875vw, 2.125rem); --text-3xl: clamp(1.5rem, 1rem + 2.5vw, 3rem); --text-4xl: clamp(1.75rem, 1.25rem + 3vw, 3.75rem); --text-5xl: clamp(2rem, 1.5rem + 5vw, 5.5rem); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Easing */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Dark Theme */ :root[data-theme="dark"] { --bg-primary: #0a0a0a; --bg-secondary: #151515; --text-primary: var(--pure-white); --text-secondary: rgba(255, 255, 255, 0.65); --text-inverse: var(--graphite-grey); --border-primary: rgba(255, 255, 255, 0.1); } /* ===== CSS Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: 'Degular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } /* ===== Typography ===== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } p { margin-bottom: var(--space-md); color: var(--text-secondary); } /* ===== Container ===== */ .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xl); } @media (max-width: 767px) { .container { padding: 0 var(--space-lg); } } /* ===== Buttons (Critical) ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 12px 24px; font-size: 16px; font-weight: 600; border-radius: 0 0 8px 8px; /* Website norm: sharp top, rounded bottom */ text-decoration: none; transition: all 0.2s var(--ease); cursor: pointer; border: none; -webkit-tap-highlight-color: transparent; } /* RESPONSIVE v2.1: Touch-target sizing */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 48px; padding: 14px 24px; } } @media (hover: hover) and (pointer: fine) { .btn { min-height: 36px; } } .btn-primary { background: var(--accent-primary); color: var(--pure-white); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: transparent; border: 2px solid var(--accent-primary); color: var(--accent-primary); } .btn-secondary:hover { background: var(--accent-light); } /* RESPONSIVE v2.1: Focus states */ .btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .btn:focus:not(:focus-visible) { outline: none; } /* ===== Loading States ===== */ /* Loader placeholder (shown while page loads) */ .loader-placeholder { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); color: var(--text-secondary); } /* Hide non-critical content until JS loads */ .progressive-enhance { opacity: 0; transition: opacity 0.3s ease; } .scripts-loaded .progressive-enhance { opacity: 1; } /* Font loading states */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .fonts-loaded body { font-family: 'Degular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Prevent FOIT (Flash of Invisible Text) */ .fonts-failed body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ===== Skip Link (Accessibility) ===== */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 10px 16px; background: var(--accent-primary); color: var(--pure-white); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transform: translateY(-200%); transition: transform 0.2s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* ===== Device-specific optimizations ===== */ /* Mobile-specific */ @media (max-width: 767px) { h1 { font-size: var(--text-3xl); } .btn { min-height: 48px; padding: 14px 20px; } } /* RESPONSIVE v2.1: Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }