/* ========================================================================== ROKULUS CRITICAL CSS Inlined in for instant paint - KEEP UNDER 10KB ========================================================================== */ /* ----------------------------- CSS VARIABLES / DESIGN TOKENS ----------------------------- */ :root { /* Colors - Rock/vintage aesthetic */ --color-black: #0a0a0a; --color-white: #fafafa; --color-cream: #f5f2eb; /* Primary - Worn leather brown */ --color-primary-900: #1c1410; --color-primary-800: #3d2c22; --color-primary-700: #5e4434; --color-primary-600: #7f5c46; --color-primary-500: #a07458; --color-primary-400: #b3927a; --color-primary-300: #c6b09c; --color-primary-200: #d9cebe; --color-primary-100: #ece6de; /* Accent - Vintage gold */ --color-accent-500: #c9a227; --color-accent-400: #d4b94d; --color-accent-300: #dfcf73; /* Neutral - Stone grays */ --color-neutral-900: #1a1a1a; --color-neutral-800: #2d2d2d; --color-neutral-700: #404040; --color-neutral-600: #525252; --color-neutral-500: #737373; --color-neutral-400: #a3a3a3; --color-neutral-300: #d4d4d4; --color-neutral-200: #e5e5e5; --color-neutral-100: #f5f5f5; /* Semantic */ --color-success: #4a7c59; --color-warning: #c9a227; --color-error: #9b2c2c; /* Typography */ --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif; --font-accent: 'Oswald', sans-serif; /* Fluid type scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); --text-4xl: clamp(2.5rem, 2rem + 3vw, 4rem); --text-5xl: clamp(3rem, 2.5rem + 4vw, 5rem); /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-gap: clamp(3rem, 5vw, 6rem); /* Layout */ --container-max: 1280px; --container-padding: clamp(1rem, 4vw, 2rem); --grid-gap: clamp(1rem, 2vw, 1.5rem); /* Borders & Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-full: 9999px; --border-width: 1px; --border-color: var(--color-neutral-200); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Z-index */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } } /* ----------------------------- CRITICAL RESET ----------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-neutral-900); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----------------------------- CRITICAL LAYOUT (Above fold) ----------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } /* Header - always visible first */ .header { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--color-white); border-bottom: var(--border-width) solid var(--border-color); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; } .header__logo { height: 2rem; width: auto; } .header__nav { display: none; } @media (min-width: 768px) { .header__inner { height: 5rem; } .header__nav { display: flex; gap: var(--space-6); } } .header__nav-link { font-family: var(--font-accent); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-neutral-700); text-decoration: none; transition: color var(--transition-fast); } .header__nav-link:hover { color: var(--color-neutral-900); } .header__actions { display: flex; align-items: center; gap: var(--space-4); } /* Hero section - LCP element */ .hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100% ); } .hero__content { position: relative; z-index: 1; text-align: center; color: var(--color-white); padding: var(--space-8); } .hero__title { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); } .hero__subtitle { font-size: var(--text-lg); margin-bottom: var(--space-6); opacity: 0.9; } /* Critical button styles */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-accent); font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; border: var(--border-width) solid transparent; border-radius: 0; cursor: pointer; transition: all var(--transition-fast); } .btn--primary { background-color: var(--color-white); color: var(--color-neutral-900); border-color: var(--color-white); } .btn--primary:hover { background-color: var(--color-neutral-100); }