/* ================================================
RAFFLE PAGE ONLY
================================================ */
/* -------------------------------
HEADER OFFSET FIX (KEY FIX)
-------------------------------- */
body.page-template-summer-raffle {
--raffle-header-offset: 90px; /* desktop nav height */
}
/* Dark nav since no banner image on this page */
body.page-template-summer-raffle #header,
body.page-template-summer-raffle #header header.header,
body.page-template-summer-raffle #header nav.navbar,
body.page-template-summer-raffle #header .navbar {
background-color: #1a1a1a !important;
background-image: none !important;
}
/* Ensure content is always fully visible at any screen size */
body.page-template-summer-raffle .swfu-raffle {
width: 100% !important;
padding-top: var(--raffle-header-offset) !important; /* FIX */
}
body.page-template-summer-raffle .sr-inner {
width: 100% !important;
max-width: 960px !important;
margin: 0 auto !important;
}
body.page-template-summer-raffle .sr-header {
width: 100% !important;
}
/* Remove extra spacing WordPress adds */
body.page-template-summer-raffle .general-sec {
margin: 0 !important;
padding: 0 !important;
}
body.page-template-summer-raffle #main {
padding: 0 !important;
}
/* -------------------------------
RESPONSIVE HEADER OFFSET
-------------------------------- */
@media (max-width: 1024px) {
body.page-template-summer-raffle {
--raffle-header-offset: 95px;
}
body.page-template-summer-raffle .sr-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
body.page-template-summer-raffle {
--raffle-header-offset: 110px; /* mobile nav usually taller */
}
}
@media (max-width: 600px) {
body.page-template-summer-raffle .sr-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
body.page-template-summer-raffle .sr-cta {
width: 90% !important;
text-align: center !important;
}
}
/* =====================================================
ALL STYLES SCOPED TO .swfu-raffle
===================================================== */
.swfu-raffle *,
.swfu-raffle *::before,
.swfu-raffle *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.swfu-raffle {
font-family: 'Barlow', sans-serif;
background: #ffffff;
color: #1a1a1a;
-webkit-font-smoothing: antialiased;
width: 100%;
position: relative;
/* IMPORTANT: prevent clipping issues */
overflow: visible;
}
.swfu-raffle a { text-decoration: none; color: inherit; }
.swfu-raffle button { font-family: 'Barlow', sans-serif; cursor: pointer; border: none; background: none; }
.swfu-raffle img { max-width: 100%; }
/* ── Background texture ── */
.swfu-raffle .sr-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(232,24,44,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(232,24,44,0.035) 1px, transparent 1px);
background-size: 60px 60px;
}
.swfu-raffle .sr-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(232,24,44,0.06) 0%, transparent 70%);
}
/* ── Inner wrapper ── */
.swfu-raffle .sr-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
padding: 20px 24px 12px;
}
