*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:#f5f5f5;background:#000 url("/assets/img/garage-bg.jpg") center/cover fixed no-repeat}
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);pointer-events:none}
.announcement-bar{width:100%;background:#111;color:#fff;font-size:14px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:1px solid #222}
.announcement-rotator{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header{position:sticky;top:0;z-index:1000;background:#0b0b0b;border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.5px}
.brand img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:#fff;text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.hamburger{display:none;background:0 0;border:0;color:#fff;font-size:22px}
.cart-btn{background:#e11d48;border:0;color:#fff;padding:8px 12px;border-radius:10px;display:flex;align-items:center;gap:8px;cursor:pointer}
.cart-count{background:#fff;color:#000;border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
@media (max-width:768px){
.nav{display:none}.hamburger{display:block}
.mobile-menu{display:none;background:rgba(0,0,0,.9);border-top:1px solid rgba(255,255,255,.08)}
.mobile-menu a{display:block;padding:12px 16px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu.show{display:block}
}
.hero{position:relative;min-height:46vh;display:grid;place-items:center;padding:48px 16px;background:url("/assets/img/hero-gary.jpg") center/cover no-repeat;border-bottom:1px solid rgba(255,255,255,.08);margin-top:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.hero .content{position:relative;z-index:2;text-align:center;max-width:900px}
.hero h1{margin:0 0 8px;font-size:clamp(28px,5vw,48px)}.hero p{margin:0 0 20px;opacity:.95}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;gap:8px;cursor:pointer}
.btn.primary{background:#dc2626;border-color:#dc2626}.btn.secondary{background:#111}.btn:hover{filter:brightness(1.06)}
.section{max-width:1200px;margin:0 auto;padding:28px 16px}.section h2{margin:0 0 16px;font-size:clamp(22px,3.6vw,32px)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}.col-12{grid-column:span 12}.col-6{grid-column:span 6}.col-4{grid-column:span 4}
@media (max-width:900px){.col-6,.col-4{grid-column:span 12}}
.card{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fcfbfb}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:14px;display:grid;gap:8px}.card-title{font-weight:700;font-size:18px}.price{font-size:16px;opacity:.9}.meta{font-size:14px;opacity:.8;line-height:1.4}.actions{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.video-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.video-wrap iframe{width:100%;height:100%;display:block;border:0}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:1000}
.modal{position:fixed;inset:auto 0 0 auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:80vh;overflow:auto;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;display:none;z-index:1001}
.modal.show,.modal-backdrop.show{display:block}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-body{padding:16px}
.modal-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:8px;justify-content:flex-end}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:10px}.cart-item .ci-title{font-weight:600}.cart-item .ci-meta{font-size:13px;opacity:.8}
.cart-summary{display:grid;gap:6px;margin-top:10px}
.input,select,textarea{width:100%;background:#0f0f0f;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px}
label{font-size:14px;opacity:.9;display:block;margin:8px 0 6px}
.fieldset{border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:10px;margin-top:10px}.fieldset legend{padding:0 6px;opacity:.9}
.checkbox,.radio{display:flex;align-items:center;gap:8px}
.badge-featured{position:absolute;top:10px;left:10px;background:#dc2626;color:#fff;font-weight:700;padding:6px 10px;border-radius:999px;font-size:12px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;opacity:.9}
.carousel-nav:hover{filter:brightness(1.1)}.carousel-nav.prev{left:8px}.carousel-nav.next{right:8px}
.btn.is-selected{outline:3px solid #dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.35) inset;}
@media (min-width: 769px){html, body{background-attachment: fixed !important;background-size: cover !important;background-position: center center !important;}}
@media (max-width: 768px){html, body{ background: #000 !important; opacity: .9; background-attachment: scroll !important; }body::before{content: "";position: fixed;inset: 0;background: url("/assets/img/garage-bg.jpg") center/cover no-repeat;z-index: -1; pointer-events: none;}}
/* === Header brand image a bit wider === */
.brand img{width: 75px;height:56px;object-fit:cover;border-radius:10px}
/* === Card media slides fill container (force-fit images/iframes) === */
.card-media .slide{width:100%;height:100%;display:block}
.card-media .slide img{width:100%;height:100%;object-fit:cover;display:block}
.card-media .slide iframe{width:100%;height:100%;display:block}
/* === Footer styled to match header === */
.footer{background:#0b0b0b;border-top:1px solid rgba(255,255,255,.08);padding:16px;text-align:center;color:#fff;opacity:.95}
/* === Link styling to blend with text === */
a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)}
a:hover{opacity:1;text-decoration-color:rgba(255,255,255,.6)}
/* === Mobile header: hamburger left, brand centered, cart right; hero centered === */
@media (max-width:768px){
.header-inner{position:relative;justify-content:center}
.hamburger{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:block}
.brand{margin:0 auto}
.cart-btn{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.hero .content{text-align:center;margin:0 auto}
}
/* === FIX: Mobile menu visible anywhere on page === */
@media (max-width:768px){
.mobile-menu{
position: fixed;
top: 64px; /* approx header height */
left: 0; right: 0;
z-index: 1002;
max-height: 70vh;
overflow:auto;
backdrop-filter: blur(2px);
}
}
/* === FIX: Shirt images not cut off (contain) === */
.card-media.contain { background:#ffffff; }
.card-media.contain .slide,
.card-media.contain img { object-fit: contain !important; background:#ffffff; }
/* === FIX: Questions section panel matches card body transparency === */
.section-questions .questions-panel{
background: rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:16px;
max-width: 800px;
}
.overlay-panel{
background: rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:16px;
max-width: 800px;
}
/* === FIX: Improve visibility of Add to Cart buttons === */
.btn.accent{ background:#374151; border-color:#4b5563; }
.btn.accent:hover{ filter: none; box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset; }
/* Ensure generic .btn (non-primary) is at least visible on dark background */
.btn{ background:#1f2937; border-color:#374151; }
.btn.secondary{ background:#111; }
/* Footer link styling more obvious */
.footer a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* ==== NAV: never show mobile menu on desktop ==== */
.mobile-menu { display: none; } /* base default */
@media (max-width:768px){
.mobile-menu { display: none; }
.mobile-menu.show { display: block; }
}
/* Keep header above the slide-out menu; place menu just below header */
:root{ --header-h: 72px; }
.header{ z-index: 1100; }
@media (max-width:768px){
.mobile-menu{
position: fixed;
top: var(--header-h);
left: 0; right: 0;
z-index: 1000; /* lower than header so hamburger remains clickable */
max-height: 70vh;
overflow: auto;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(2px);
border-top: 1px solid rgba(255,255,255,.08);
}
}
/* ==== DONATIONS: center single card on desktop ==== */
#donate .grid { justify-content: center; }
#donate .card { place-self: center; }
/* ==== CHEVELLE CARD: centered, side-by-side on desktop ==== */
#chevelle .grid { justify-content: center; }
#chevelle .card { place-self: center; width: 100%; max-width: 1100px; }
.card.side-by-side{
display: grid;
grid-template-columns: 1.35fr 1fr; /* media left, info right */
align-items: stretch;
}
@media (max-width: 900px){
.card.side-by-side{ display: block; }
}
/* ==== CHEVELLE VIDEO: fill media area with correct aspect ratio ==== */
.card-media.video { aspect-ratio: 16/9; background:#000; }
.card-media.video .slide,
.card-media.video iframe{
width: 100%;
height: 100%;
display: block;
}
/* (Optional) Nudge card body spacing for the side-by-side layout */
.card.side-by-side .card-body{ padding: 18px; }
/* === PATCH: Center Donations card on desktop === */
#donate .grid{
display:flex;
justify-content:center;
}
#donate .grid > .card{
max-width:760px;
}
/* === PATCH: Chevelle card centered & side-by-side on desktop === */
#chevelle .grid{
display:flex;
justify-content:center;
}
@media (min-width:901px){
#chevelle .card{
display:grid;
grid-template-columns: 1.4fr 1fr; /* media left, info right */
align-items: stretch;
width:100%;
max-width:1200px;
}
#chevelle .card .card-media{ aspect-ratio:16/9; background:#000; height:100%; }
#chevelle .card .card-media .slide,
#chevelle .card .card-media iframe{ width:100%; height:100%; display:block; border:0; }
#chevelle .card .card-body{ padding:18px; max-height:100%; overflow:auto; }
}
@media (max-width:900px){
#chevelle .card{ display:block; }
}
/* === PATCH: Hide mobile nav on desktop; open below header on mobile === */
.mobile-menu{ display:none !important; }
:root{ --header-h: 72px; }
.header{ z-index: 1100; }
@media (max-width:768px){
.mobile-menu{
position: fixed;
top: var(--header-h);
left:0; right:0;
max-height:70vh;
overflow:auto;
background: rgba(0,0,0,0.92);
border-top:1px solid rgba(255,255,255,.08);
z-index:1000; /* below header so hamburger stays clickable */
display:none !important;
}
.mobile-menu.show{ display:block !important; }
}
/* Contact link emphasis */
.contact-link{ text-decoration: underline; font-weight:600; }
/* Center the Area52 logo and set media background black */
.card-media.card-media:has(img[src*="area52.jpg"],img[src*="dts.jpg"]) {
background: #000; /* full media section background */
display: flex; /* center contents */
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
}
.card-media img[src*="area52.jpg"],img[src*="dts.jpg"] {
object-fit: contain;
width: 80%; /* slightly narrower for better balance */
height: auto;
margin: 0 auto;
display: block;
background: transparent; /* image itself stays transparent */
padding: 0;
}
/* === AREA52 MEDIA: center logo and black media background === */
.card-media:has(img[src*="area52.jpg"]) {
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
/* Override image sizing to keep full logo visible and centered */
.card-media img[src*="area52.jpg"] {
object-fit: contain !important;
width: 80%;
height: auto;
margin: 0 auto;
display: block;
background: transparent;
padding: 0;
}
/* === Incremental patch for fundraiser.css (stacking fix for instant Thank You) === */
/* Ensure the Thank You modal is always above any underlying form modals */
#thankyou-modal { z-index: 1003; }
/* Backdrop remains at 1000 per base stylesheet */
/* payments row container; JS toggles visibility */
#thanks-payments{display:flex;gap:.5rem;flex-wrap:wrap;}
/* Prevent iOS/Android auto-zoom on form inputs inside modals */
@media (max-width: 768px){
input, select, textarea { font-size:16px !important; line-height:1.3; }
}
/* --- ALERT MODAL: center on screen + full-modal background image --- */
#alert-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 560px);
max-height: 90vh;
overflow: hidden;
z-index: 1003;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
background: url('../img/danosstrongicon.png') center/contain no-repeat, rgba(0,0,0,0.85);
color: #fff;
}
#alert-modal .modal-header,
#alert-modal .modal-body {
position: relative;
z-index: 1;
background: transparent !important;
}
#alert-modal::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 0;
}
/* Force title to white */
#alert-modal .modal-header strong {
color: #ffffff !important;
}
/* =============================
v1.1 Centering Patch (2025-10-24)
- Centers all section headers
- Centers Shirts grid & cards
- Centers "About the Chevelle" copy
- Centers "Questions" copy block
- Centers card titles for visual consistency
============================= */
.section h2{ text-align:center; }
/* About the Chevelle copy (overlay panel above the video) */
#video .overlay-panel{
margin: 0 auto;
text-align: center;
}
/* Questions panel */
.section-questions .questions-panel{
margin: 0 auto;
text-align: center;
max-width: 800px;
}
/* Card titles */
.card .card-title{ text-align:center; }