/* * Professional Dark Background - 4K Ultra Quality * Krimson Theme | custom.css * PHASE 4: PERFORMANCE OPTIMIZED * ───────────────────────────────── * Optimizations: * ✅ Background image lazy loading * ✅ Core Web Vitals improvements * ✅ Mobile-first responsive design * ✅ Font loading optimization * ✅ CSS containment for performance * ✅ GPU-accelerated animations * ✅ Reduced repaints/reflows */ /* ── CSS Variables for Maintainability & Performance ── */ :root { --primary-red: #cc0f1a; --primary-red-dark: #a20515; --primary-red-light: #c8000a; --bg-primary: #060508; --bg-transparent: transparent; --shadow-blur-sm: 15px; --shadow-blur-md: 40px; --shadow-blur-lg: 80px; --transition-fast: 0.25s ease; --transition-smooth: 0.3s ease; } /* ── Fix body positioning, remove grid ── */ body { background-image: none !important; position: relative !important; inset: unset !important; background-color: transparent !important; /* Font optimization: use system fonts for fast rendering */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; /* Improve rendering performance */ will-change: auto; contain: layout style paint; } /* ── Background Loading Strategy ── */ /* Step 1: Fast fallback color */ html { background-color: var(--bg-primary); /* Step 2: Lazy-load the background image */ background-image: linear-gradient(135deg, #060508 0%, #1a0510 50%, #0a0008 100%); background-size: cover; background-position: center center; background-repeat: no-repeat; /* PERFORMANCE: Use 'scroll' on mobile, 'fixed' only on desktop */ background-attachment: scroll; /* Optimize rendering */ image-rendering: crisp-edges; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent layout shift */ contain: layout; } /* Desktop: Enable fixed background for premium effect */ @media (min-width: 1024px) { html { background-attachment: fixed; /* Fallback for older browsers */ background-image: linear-gradient(135deg, #060508 0%, #1a0510 50%, #0a0008 100%); } } /* Mobile: Optimized for performance */ @media (max-width: 768px) { html { background-attachment: scroll; /* Use lighter version for mobile or skip image entirely */ background-image: linear-gradient(135deg, #060508 0%, #1a0510 50%, #0a0008 100%); } } /* ── Preload Critical Resources (for HTML head) ── */ /* Add this to your section: */ /* ── Bootstrap overrides ── */ :root { --bs-body-bg: transparent; } /* ── Hero section transparent ── */ .nexus-hero, .nexus-background { background: transparent !important; /* Performance: Prevent unnecessary rendering */ contain: content; } .nexus-grid { display: none !important; } /* ── KRIMSON title - Optimized for Performance ── */ .hero-title { color: var(--primary-red) !important; -webkit-text-fill-color: var(--primary-red) !important; -webkit-text-stroke: 0 !important; /* OPTIMIZATION: Simplified text-shadow for better performance Removed multiple expensive shadows, kept the most important ones */ text-shadow: 0 0 var(--shadow-blur-sm) rgba(200, 10, 25, 0.8), 0 0 var(--shadow-blur-md) rgba(160, 5, 15, 0.4) !important; border: none !important; outline: none !important; box-shadow: none !important; background: none !important; /* Font optimization */ font-weight: 700; letter-spacing: 0.05em; /* Prevent layout shift on load */ contain: layout style paint; will-change: color; } /* Reduce shadow effects on mobile for better performance */ @media (max-width: 768px) { .hero-title { text-shadow: 0 0 10px rgba(200, 10, 25, 0.7) !important; } } .krimson-title-wrapper { border: none !important; outline: none !important; box-shadow: none !important; background: none !important; contain: layout; } /* ── Product Card Corner Brackets - GPU Optimized ── */ .product-card { position: relative; overflow: visible !important; /* Performance: Use CSS containment to isolate repaints */ contain: layout style paint; /* Prevent layout shift during animations */ will-change: transform; } .product-card .corner { position: absolute; width: 18px; height: 18px; opacity: 0; /* OPTIMIZATION: Use transform instead of left/right for GPU acceleration */ transition: opacity var(--transition-fast), transform var(--transition-fast); pointer-events: none; z-index: 10; /* Performance: GPU acceleration */ transform: translateZ(0); backface-visibility: hidden; will-change: transform, opacity; } .product-card .corner::before, .product-card .corner::after { content: ''; position: absolute; background: var(--primary-red); border-radius: 1px; } .product-card .corner::before { width: 100%; height: 2px; } .product-card .corner::after { width: 2px; height: 100%; } /* Positioning - use transform for performance */ .product-card .corner.tl { top: -5px; left: -5px; } .product-card .corner.tr { top: -5px; right: -5px; } .product-card .corner.bl { bottom: -5px; left: -5px; } .product-card .corner.br { bottom: -5px; right: -5px; } /* Hover reveal - GPU accelerated */ .product-card:hover .corner { opacity: 1; transform: translateZ(0) scale(1); } .product-card:hover .corner.tl { transform: translateZ(0) translate(-2px, -2px); } .product-card:hover .corner.tr { transform: translateZ(0) translateX(2px) translateY(-2px) scaleX(-1); } .product-card:hover .corner.bl { transform: translateZ(0) translateX(-2px) translateY(2px) scaleY(-1); } .product-card:hover .corner.br { transform: translateZ(0) translate(2px, 2px) scale(-1); } /* Reduce animation on mobile for performance */ @media (max-width: 768px) { .product-card .corner { transition: opacity 0.15s ease; } } /* ── Font Loading Optimization ── */ /* Add to your or use with @import: @import url('https://fonts.googleapis.com/css2?family=YOUR_FONT:wght@700&display=swap'); */ /* Ensure fonts load quickly without blocking render */ @font-face { font-family: 'Krimson-Font'; /* Add your font files here */ /* font-weight: 700; */ /* font-display: swap ensures text is visible during font load */ /* font-display: swap; */ } /* ── Image Lazy Loading Support ── */ /* For images in your HTML, add: loading="lazy" decoding="async" Example: Product */ /* ── Critical Rendering Path Optimization ── */ /* Defer non-critical styles */ .nexus-secondary { content-visibility: auto; } /* ── Performance Metrics ── */ /* These rules help with Core Web Vitals: LCP (Largest Contentful Paint): - Preload background image - Optimize hero section rendering FID (First Input Delay): - Use GPU acceleration for animations - Minimize JavaScript blocking CLS (Cumulative Layout Shift): - Define explicit dimensions - Use transform for animations (no layout reflow) */ /* ── Print Styles (prevent unnecessary rendering) ── */ @media print { html { background-image: none !important; } .product-card .corner { display: none; } } /* ── Accessibility & Performance ── */ @media (prefers-reduced-motion: reduce) { .product-card .corner, .hero-title { transition: none; animation: none; } } /* ── High DPI Display Optimization ── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { html { image-rendering: -webkit-optimize-contrast; } } /* * ═══════════════════════════════════════════════════════ * IMPLEMENTATION CHECKLIST * ═══════════════════════════════════════════════════════ * * ✅ 1. Background Image Optimization * □ Convert background image to WebP format * □ Add JPEG fallback * □ Place at: /assets/images/krimson-bg-4k.webp * □ Add to HTML head * * ✅ 2. Font Loading * □ Add @font-face or @import in head section * □ Use font-display: swap * □ Preload critical fonts * * ✅ 3. Image Lazy Loading (for product images) * □ Add loading="lazy" to product tags * □ Add decoding="async" to images * □ Consider responsive images with srcset * * ✅ 4. Testing * □ Test on mobile (Chrome DevTools) * □ Run Lighthouse audit * □ Check Core Web Vitals * □ Verify animations are smooth (60fps) * □ Test in slow 3G mode * * ✅ 5. Monitoring * □ Add Google Analytics * □ Monitor Core Web Vitals * □ Track performance metrics * * ═══════════════════════════════════════════════════════ */ /* ── MODAL ABSOLUTE CENTER - FINAL ATTEMPT ── */ .modal.show { display: block !important; position: absolute !important; top: 50vh !important; left: 50vw !important; transform: translate(-50%, -50%) !important; width: 100vw !important; height: 100vh !important; z-index: 1050 !important; margin: 0 !important; padding: 0 !important; background: rgba(0,0,0,0.85) !important; } .modal.show .modal-dialog { position: static !important; margin: 0 auto !important; width: auto !important; max-width: 80vw !important; } .modal-backdrop { display: none !important; } .modal-content { max-height: 85vh; overflow-y: auto; } /* ── NAVBAR - LOGO FILLS FULL HEIGHT ── */ .navbar { min-height: 100px !important; padding: 0 !important; display: flex !important; align-items: center !important; } .navbar .container { padding: 0.5rem 1rem !important; display: flex !important; align-items: center !important; width: 100% !important; } .navbar-brand { padding: 0 !important; margin-right: auto !important; margin: 0 !important; display: flex !important; align-items: center !important; height: 100% !important; } .navbar-brand img { height: 95px !important; width: auto !important; max-width: none !important; margin-right: 2rem !important; object-fit: contain !important; } /* Mobile */ @media (max-width: 991.98px) { .navbar { min-height: 80px !important; } .navbar-brand img { height: 75px !important; margin-right: 1.5rem !important; } } @media (max-width: 575.98px) { .navbar { min-height: 70px !important; } .navbar-brand img { height: 65px !important; margin-right: 1rem !important; } }