/* Critical CSS for Above-the-Fold Content - Inline in */ /* This prevents layout shifts and FOUC */ /* CSS Variables for Design System */ :root { --primary: #D84A15; /* Darker for better contrast (WCAG AA) */ --primary-dark: #D84A15; --primary-darker: #B83E11; /* Even darker for small text */ --secondary: #FFFFFF; --dark: #111111; --light: #F8F9FA; --header-height: 70px; --bs-primary: #D84A15; } /* Prevent layout shift from scrollbar */ html { overflow-y: scroll; scroll-behavior: smooth; } /* Base reset and box-sizing */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Rubik', sans-serif; font-size: 16px; line-height: 1.6; color: #212529; background-color: #fff; padding-top: var(--header-height); overflow-x: hidden; } /* Fixed Header - No Layout Shift */ .fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1040; height: var(--header-height); background-color: var(--dark); } .navbar { min-height: var(--header-height); height: var(--header-height); padding: 0 1rem; } /* Logo with fixed dimensions - prevents shift */ .header-logo { width: 140px; height: 56px; object-fit: contain; } /* Header text with fixed sizing */ .header-title { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--primary); white-space: nowrap; } .header-tagline { font-size: 0.75rem; line-height: 1.1; color: rgba(255, 255, 255, 0.75); white-space: nowrap; } /* Prevent layout shift from icon fonts - Reserve space for icons */ .bi::before, i.bi::before, .fa::before, i.fa::before, .fab::before, .fas::before, .far::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; width: 1em; text-align: center; } /* Prevent layout shift on main content */ main#main-content { min-height: 100vh; } /* Hero Banner - Fixed aspect ratio prevents shift */ .hero-banner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto 2rem; aspect-ratio: 1140 / 360; overflow: hidden; border-radius: 8px; background-color: #1a1a1a; /* Placeholder color for instant render */ } .hero-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-banner-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; padding: 0 1rem; } .hero-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; } .hero-banner h1 { font-size: 2.5rem; font-weight: 700; color: #fff; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .hero-banner .lead { font-size: 1.25rem; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } /* Skeleton loaders for dynamic content */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 4px; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 1rem; margin-bottom: 0.5rem; } .skeleton-title { height: 2rem; width: 60%; margin-bottom: 1rem; } .skeleton-card { height: 200px; width: 100%; } /* Aspect ratio containers for videos - prevents shift */ .ratio { position: relative; width: 100%; background-color: transparent; /* No background */ } .ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; /* Contain video without cropping */ } .ratio-16x9 { --bs-aspect-ratio: 56.25%; } /* Video player specific styles - Native HTML5 */ #about-main-video { background-color: transparent !important; object-fit: contain; } /* Native video controls styling */ video::-webkit-media-controls-panel { background-color: rgba(0, 0, 0, 0.5); } video::-webkit-media-controls-play-button, video::-webkit-media-controls-volume-slider { filter: brightness(1.2); } /* Ensure container has no background */ .about-video-card-inner { background-color: transparent !important; } /* Mobile optimizations */ @media (max-width: 991.98px) { :root { --header-height: 64px; } .header-logo { width: 100px; height: 40px; } .header-title { font-size: 1.25rem; } .header-tagline { font-size: 0.65rem; } .hero-banner h1 { font-size: 1.75rem; } .hero-banner .lead { font-size: 1rem; } } @media (max-width: 575.98px) { :root { --header-height: 60px; } .header-logo { width: 80px; height: 32px; } .header-title { font-size: 1rem; } .hero-banner h1 { font-size: 1.5rem; } .hero-banner .lead { font-size: 0.9rem; } } /* Utility classes */ .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .bg-light { background-color: var(--light) !important; } .text-uppercase { text-transform: uppercase; } .text-center { text-align: center; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 1200px) { .container { max-width: 1140px; } }