/** Shopify CDN: Minification failed Line 429:0 Unexpected "}" **/ /* Critical Above-the-Fold CSS for Kent Traders - Performance Optimized */ /* Inline this in theme.liquid for immediate rendering */ /* CSS Reset & Base Styles - Optimized for Performance */ *{box-sizing:border-box;margin:0;padding:0} *::before,*::after{box-sizing:border-box} /* Performance-focused Body Styles */ body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; line-height:1.6; color:#333; background:#fff; font-display:swap; text-rendering:optimizeSpeed; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Critical Image Optimization */ img{ max-width:100%; height:auto; vertical-align:middle; border-style:none; } /* CRITICAL FIX: Force visibility of above-the-fold images */ .header__logo-main, .header__normal-logo, .header__sticky-logo, .header__mobile-logo, .t4s-header__logo img, .header .logo img, .hero img, .banner img:first-child { opacity: 1 !important; visibility: visible !important; display: block !important; transition: none !important; } /* Simplified logo visibility - single logo approach */ .t4s-header__logo .header__logo-main, .t4s-header__logo img.header__logo-main, img.header__logo-main { opacity: 1 !important; visibility: visible !important; display: block !important; transition: none !important; transform: none !important; width: auto !important; max-width: 100% !important; height: auto !important; } /* Disable lazy loading conflicts for critical images */ .header img[loading], .logo img[loading], .hero img[loading], .t4s-header__logo img, .header__logo-main { opacity: 1 !important; visibility: visible !important; } /* Force immediate logo rendering - override all lazy loading */ .t4s-header__logo img, .header__logo-main { will-change: auto !important; content-visibility: visible !important; } /* Links and Interaction */ a{ text-decoration:none; color:inherit; background-color:transparent; touch-action:manipulation; } /* Performance-Optimized Header */ .header{ background:#fff; padding:1rem 0; box-shadow:0 2px 4px rgba(0,0,0,0.05); position:sticky; top:0; z-index:100; contain:layout style paint; will-change:transform; } .header-container{ max-width:1200px; margin:0 auto; padding:0 1rem; display:flex; justify-content:space-between; align-items:center; } .logo{ font-size:1.5rem; font-weight:bold; color:#0055a5; contain:layout style; } /* Navigation Critical Styles */ .nav{ display:flex; gap:2rem; contain:layout style; } .nav a{ padding:0.5rem 1rem; border-radius:4px; transition:background-color 0.2s ease; min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; } .nav a:hover{ background:#f5f5f5; } /* Hero Section Critical - Performance Optimized */ .hero{ min-height:60vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0055a5,#003d7a); color:#fff; text-align:center; padding:2rem 1rem; contain:layout style paint; position:relative; overflow:hidden; } .hero-content{ z-index:2; position:relative; } .hero-content h1{ font-size:clamp(2rem,5vw,3.5rem); margin-bottom:1rem; line-height:1.2; font-display:swap; font-weight:700; contain:layout style; } .hero-content p{ font-size:1.2rem; margin-bottom:2rem; opacity:0.9; max-width:600px; margin-left:auto; margin-right:auto; } /* Critical Button Styles */ .btn{ display:inline-block; background:#0055a5; color:#fff; padding:0.75rem 2rem; border:none; border-radius:4px; font-size:1rem; cursor:pointer; transition:all 0.2s ease; text-transform:uppercase; letter-spacing:0.5px; min-width:48px; min-height:48px; font-weight:600; text-align:center; text-decoration:none; line-height:1.2; touch-action:manipulation; } .btn:hover,.btn:focus{ background:#003d7a; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,85,165,0.3); } .btn-white{ background:#fff; color:#0055a5; } .btn-white:hover,.btn-white:focus{ background:#f5f5f5; } /* Product Grid Above Fold - Performance Optimized */ .product-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; padding:2rem 1rem; max-width:1200px; margin:0 auto; contain:layout style; } .product-card{ background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:transform 0.3s ease,box-shadow 0.3s ease; contain:layout style paint; } .product-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.15); } .product-image{ width:100%; height:250px; object-fit:cover; background:#f8f9fa; display:block; } .product-info{ padding:1.5rem; } .product-title{ font-size:1.1rem; font-weight:600; margin-bottom:0.5rem; color:#333; line-height:1.4; } .product-price{ font-size:1.2rem; font-weight:bold; color:#0055a5; } /* Collection Grid Critical */ .collection-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; padding:2rem 1rem; contain:layout style; } .collection-card{ position:relative; border-radius:8px; overflow:hidden; height:300px; background:#f8f9fa; contain:layout style paint; } .collection-image{ width:100%; height:100%; object-fit:cover; display:block; } .collection-overlay{ position:absolute; inset:0; background:linear-gradient(45deg,rgba(0,85,165,0.8),rgba(0,61,122,0.6)); display:flex; align-items:center; justify-content:center; color:#fff; } .collection-title{ font-size:1.5rem; font-weight:bold; text-align:center; padding:1rem; } /* Loading States and Animations */ .loading{ background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:loading 1.5s infinite; } @keyframes loading{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* Performance and Accessibility Optimizations */ .account-link{ display:inline-block; padding:12px 16px; min-width:48px; min-height:48px; font-size:16px; text-decoration:none; color:inherit; touch-action:manipulation; } .chat-toggle{ min-width:48px; min-height:48px; padding:12px; touch-action:manipulation; } .visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* Performance Hints */ .will-change{will-change:transform} .contain-layout{contain:layout} .contain-style{contain:style} .contain-paint{contain:paint} /* Layout Stability - Prevent CLS */ .aspect-ratio-16-9{aspect-ratio:16/9} .aspect-ratio-1-1{aspect-ratio:1/1} .aspect-ratio-4-3{aspect-ratio:4/3} /* Responsive Critical Styles */ @media (max-width:768px){ .nav{ flex-direction:column; gap:1rem; position:absolute; top:100%; left:0; right:0; background:#fff; padding:1rem; box-shadow:0 4px 12px rgba(0,0,0,0.1); display:none; } .nav.active{ display:flex; } .hero-content h1{ font-size:2rem; } .btn{ padding:0.5rem 1.5rem; font-size:0.9rem; } .product-grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; padding:1rem; } .collection-grid{ grid-template-columns:1fr; gap:1rem; padding:1rem; } } @media (max-width:480px){ .hero{ min-height:50vh; padding:1rem; } .hero-content h1{ font-size:1.8rem; } .hero-content p{ font-size:1rem; } .product-grid{ grid-template-columns:1fr; } } /* Print Styles */ @media print{ .nav,.btn,.chat-toggle{display:none} .hero{min-height:auto;background:#fff;color:#000} } .header-container{flex-direction:column;gap:1rem} .nav{flex-wrap:wrap;justify-content:center} .hero{min-height:50vh} .product-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem} .collection-grid{grid-template-columns:1fr;gap:1rem} } /* Hide non-critical content initially */ .below-fold{opacity:0;transition:opacity 0.5s ease-in-out} .below-fold.loaded{opacity:1} /* Performance optimizations */ .lazy{opacity:0;transition:opacity 0.3s} .lazy.loaded{opacity:1} /* Critical path optimization */ .preload-hidden{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0} /* PAGESPEED OPTIMIZATION: Critical above-the-fold styles only */ /* Reduce Cumulative Layout Shift */ .t4s-header__logo img { width: 125px !important; height: 49px !important; aspect-ratio: 125/49; } /* Improve LCP element rendering */ .hero, .banner, .slideshow { contain: layout style paint; } .hero img, .banner img { content-visibility: auto; contain-intrinsic-size: 1200px 600px; } /* Reduce render blocking - critical navigation only */ .t4s-header { contain: layout style; will-change: auto; } /* Optimize font rendering for better performance */ body, .t4s-body { font-display: swap; text-rendering: optimizeSpeed; -webkit-font-smoothing: subpixel-antialiased; } /* Prevent layout shift in product grids */ .product-item { aspect-ratio: 1/1.2; contain: layout style paint; } .product-item img { content-visibility: auto; contain-intrinsic-size: 300px 360px; } /* Optimize largest contentful paint elements */ .hero-content, .banner-content { contain: layout style paint; }