@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap'); .car-gallery-wrap { font-family:'Inter',-apple-system,sans-serif; max-width:1200px; margin:0 auto; padding:20px 0; } .car-section { margin-bottom:60px; } .car-section-header { display:flex; align-items:center; gap:16px; margin-bottom:36px; } .car-section-badge { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:28px; background:linear-gradient(135deg,#aa0000,#CC0000); box-shadow:0 4px 12px rgba(204,0,0,.25); flex-shrink:0; } .car-section-title { font-family:'Poppins',serif; font-size:clamp(24px,4vw,34px); font-weight:700; margin:0; color:#CC0000; letter-spacing:-0.02em; } .car-section-line { flex:1; height:2px; background:linear-gradient(90deg,#CC0000 0%,transparent 100%); opacity:.2; } .car-folder-section { margin-bottom:48px; } .car-folder-title-wrap { margin-bottom:20px; } .car-folder-title { display:flex; align-items:center; gap:14px; font-size:20px; font-weight:400; color:#CC0000; margin:0; padding:12px 20px; background:linear-gradient(135deg,rgba(204,0,0,.05) 0%,rgba(204,0,0,.01) 100%); border-left:4px solid #CC0000; border-radius:0 10px 10px 0; } .car-folder-icon { font-size:22px; flex-shrink:0; } .car-cal-svg { flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); transition:transform .2s ease; } .car-folder-section:hover .car-cal-svg { transform:scale(1.08) rotate(-2deg); } .car-folder-month { font-family:'Poppins',serif; font-size:16px; } .car-folder-count { margin-left:auto; font-size:12px; font-weight:500; color:#64748b; background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:3px 14px; white-space:nowrap; } /* Grid */ .car-grid { display:grid; gap:20px; } .car-cols-2 { grid-template-columns:repeat(2,1fr); } .car-cols-3 { grid-template-columns:repeat(3,1fr); } .car-cols-4 { grid-template-columns:repeat(4,1fr); } .car-cols-5 { grid-template-columns:repeat(5,1fr); } .car-cols-6 { grid-template-columns:repeat(6,1fr); } @media(max-width:768px){.car-cols-3,.car-cols-4,.car-cols-5,.car-cols-6{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.car-cols-2,.car-cols-3,.car-cols-4,.car-cols-5,.car-cols-6{grid-template-columns:1fr 1fr;}} /* Items */ .car-item { position:relative; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s; background:#f8fafc; } .car-item:hover { transform:translateY(-5px) scale(1.01); box-shadow:0 12px 32px rgba(0,0,0,.15); } .car-item a { display:block; text-decoration:none; color:inherit; } .car-img-wrap { position:relative; overflow:hidden; aspect-ratio:4/3; } .car-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .car-item:hover .car-img-wrap img { transform:scale(1.07); } .car-img-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(204,0,0,.65),rgba(204,0,0,.35)); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; } .car-item:hover .car-img-overlay { opacity:1; } .car-zoom-icon { font-size:28px; transform:scale(0.6); transition:transform .3s; } .car-item:hover .car-zoom-icon { transform:scale(1); } .car-img-caption { padding:10px 12px; font-size:13px; font-weight:500; color:#475569; background:#fff; border-top:1px solid #f1f5f9; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ============================================= LIGHTBOX - Appended to via JS so position:fixed works correctly regardless of theme containers ============================================= */ #car-lightbox { display: none; /* JS opens with display:flex */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 2147483647 !important; /* Maximum possible z-index */ background: rgba(0,0,0,0.92) !important; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; margin: 0 !important; } /* X Close Button — fixed to viewport top-right */ #car_lb_close { position: fixed !important; top: 16px !important; right: 16px !important; width: 46px; height: 46px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.4); color: #fff; font-size: 24px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex !important; align-items: center; justify-content: center; z-index: 2147483647 !important; transition: background .2s, transform .2s; padding: 0; } #car_lb_close:hover { background:rgba(255,255,255,0.35); transform:scale(1.1); } /* Prev / Next arrows — fixed to viewport center sides */ #car_lb_prev, #car_lb_next { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; width: 52px; height: 52px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.35); color: #fff; font-size: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2147483647 !important; transition: background .2s, transform .2s; user-select: none; padding: 0; } #car_lb_prev { left: 16px !important; } #car_lb_next { right: 16px !important; } #car_lb_prev:hover { background:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.1); } #car_lb_next:hover { background:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.1); } /* Image container */ .car-lb-content { position: relative; max-width: 88vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; } .car-lb-content img { display: block; max-width: 88vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.8); } .car-lb-caption { color: rgba(255,255,255,0.85); margin-top: 14px; font-size: 14px; text-align: center; max-width: 600px; font-family:'Inter',sans-serif; } /* WordPress admin bar offset when logged in */ .admin-bar #car-lightbox { top: 0 !important; height: 100% !important; }