/* =================================== CRITICAL CSS - Inline in Above-the-fold content only ≤ 12 KB =================================== */ :root { /* Colors */ --color-primary: #ea1217; --color-primary-dark: #b30d0f; --color-bg-dark: #0F1419; --color-bg-dark-secondary: #16191f; --color-text-primary: #f0f0f0; --color-text-secondary: #9e9e9e; --color-border: #2a2a2a; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Typography */ --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-size-h1: clamp(24px, 1.3vw, 48px); --font-size-body: clamp(14px, 0.9vw, 16px); --line-height-heading: 1.15; --line-height-body: 1.5; --font-weight-bold: 700; --font-weight-regular: 400; /* Transitions */ --transition-fast: 100ms ease-out; --transition-normal: 200ms ease-out; } /* Light mode overrides */ html[data-theme="light"] { --color-bg-dark: #ffffff; --color-text-primary: #212121; --color-text-secondary: #616161; --color-border: #e0e0e0; } /* ===== RESET & BASE ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--color-bg-dark); color: var(--color-text-primary); font-family: var(--font-primary); font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-regular); transition: background-color var(--transition-normal), color var(--transition-normal); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); margin-bottom: var(--spacing-md); } p { margin-bottom: var(--spacing-md); } /* ===== HEADER ===== */ .site-header { background-color: var(--color-bg-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 0; z-index: 100; transition: background-color var(--transition-normal); } .site-header__inner { position: relative; display: flex; align-items: center; justify-content: flex-start; max-width: 1280px; margin: 0 auto; padding: 10px var(--spacing-lg); gap: var(--spacing-lg); } .site-navigation { display: flex; align-items: center; } .main-navigation { display: flex; align-items: center; justify-content: flex-start; } @media (min-width: 768px) { .main-navigation { flex: 1 1 auto; justify-content: center; } } .site-navigation a { color: var(--color-text-primary); padding: var(--spacing-sm) var(--spacing-md); transition: color var(--transition-fast); } .site-navigation a:hover { color: var(--color-primary); } /* ===== DARK MODE BUTTON ===== */ .dark-mode-toggle { margin-left: auto; background: rgba(255, 255, 255, 0.1); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.15); } .dark-mode-toggle svg { width: 18px; height: 18px; transition: opacity var(--transition-normal); } .dark-mode-icon { opacity: 1; } .light-mode-icon { opacity: 0; position: absolute; } /* Icon visibility in light mode */ html[data-theme="light"] .dark-mode-icon { opacity: 0; position: absolute; } html[data-theme="light"] .light-mode-icon { opacity: 1; position: static; } /* ===== HERO SECTION ===== */ .hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), var(--color-bg-dark-secondary)); color: white; padding: var(--spacing-2xl) var(--spacing-lg); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1); z-index: 0; } .hero__content { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 clamp(12px, 3.5vw, 32px); } .hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xl); text-align: center; } .hero__text h1 { font-size: clamp(28px, 5vw, 48px); color: #ffffff; margin-bottom: var(--spacing-md); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); font-weight: 700; letter-spacing: -0.5px; } .hero__subtitle { font-size: var(--font-size-body); color: #ffffff; margin-bottom: var(--spacing-lg); max-width: 600px; opacity: 0.95; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); font-weight: 400; letter-spacing: 0.2px; } .hero__gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--color-bg-dark)); z-index: 0; } .hero__small-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 0; } /* ===== CONTAINER ===== */ .container { max-width: clamp(1200px, 95vw, 1280px); margin: 0 auto; padding: 0 clamp(12px, 3.5vw, 32px); width: 100%; } /* ===== FOCUS & ACCESSIBILITY ===== */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } button, a, [role="button"] { position: relative; } button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ===== SKIP LINK ===== */ .skip-to-content { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: 8px 16px; z-index: 10000; text-decoration: none; border-radius: 0 0 4px 0; } .skip-to-content:focus { top: 0; } /* ===== REDUCED MOTION ===== */ @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; } } /* ===== PRINT ===== */ @media print { .site-header, .hero__gradient, button, .skip-to-content { display: none; } }