/* ==========================================================================
BSC WEEK 2026 (v3)
Primary: Vibrant Orange #F2600C | Secondary: Charcoal #232323
Background: Cream #FBF6EC | Accent: Gold #C9A227
Display: Anton | Body: Work Sans | Utility/Countdown: JetBrains Mono
Fonts are loaded via + in
the of every page (faster than @import, which serializes behind
this file's own download). Keep that in sync if the font stack changes.
========================================================================== */
:root{
--orange:#F2600C;
--orange-hi:#FF7A24;
--orange-deep:#C94E09;
--charcoal:#232323;
--charcoal-2:#2E2C29;
--cream:#FBF6EC;
--cream-2:#F2EAD8;
--gold:#C9A227;
--gold-hi:#E4C24A;
--ink:#201D1A;
--ink-soft:#5B5650;
--line:rgba(35,35,35,0.12);
--radius:3px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--cream);
color:var(--ink);
font-family:'Work Sans', sans-serif;
line-height:1.6;
overflow-x:hidden;
opacity:0;
transition:opacity .35s ease;
}
body.page-ready{ opacity:1; }
body.page-leaving{ opacity:0; transition:opacity .22s ease; }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,.display{
font-family:'Anton', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:0.3px;
line-height:1.05;
color:var(--charcoal);
}
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.08em; text-transform:uppercase;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
/* ---- Header / Nav ---- */
header{
position:sticky; top:0; z-index:100;
background:rgba(251,246,236,0.94);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1120px; margin:0 auto;}
.nav-logo{display:flex; align-items:center; gap:8px; font-family:'Anton', sans-serif; font-size:20px; color:var(--charcoal); transition:transform .2s ease;}
.nav-logo:hover{transform:translateY(-1px);}
.nav-logo span{color:var(--orange);}
.nav-links{display:flex; flex-wrap:wrap; gap:14px 20px; font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.07em; justify-content:flex-end;}
.nav-links a{position:relative; color:var(--ink-soft); transition:color .2s; padding:4px 0;}
.nav-links a:hover{color:var(--orange-deep);}
.nav-toggle{display:none; background:none; border:none; color:var(--charcoal); font-size:24px;}
.nav-cta{padding:10px 18px !important; background:var(--orange); color:#fff !important; border-radius:20px; font-weight:700;}
@media (max-width:900px){
.nav-links{
position:fixed; top:58px; left:0; right:0; background:var(--cream);
flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:0; max-height:0; overflow:hidden;
transition:max-height .35s ease; border-bottom:1px solid var(--line);
}
.nav-links.open{max-height:calc(100vh - 58px); overflow-y:auto;}
.nav-links a{padding:16px 24px; border-bottom:1px solid var(--line); display:block;}
.nav-toggle{display:block;}
.nav-cta{margin:12px 24px; display:inline-block; text-align:center;}
}
/* ---- Buttons ---- */
.btn{
display:inline-flex; align-items:center; gap:8px;
font-family:'JetBrains Mono', monospace; font-size:13px;
text-transform:uppercase; letter-spacing:0.07em;
padding:15px 28px; border-radius:30px;
border:2px solid var(--orange);
transition:all .2s ease; cursor:pointer;
}
.btn-solid{background:var(--orange); color:#fff; font-weight:700;}
.btn-solid:hover{background:var(--orange-hi); border-color:var(--orange-hi); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--orange-deep); border-color:var(--charcoal);}
.btn-ghost:hover{background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); transform:translateY(-2px);}
.btn-dark{background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); font-weight:700;}
.btn-dark:hover{background:#000; border-color:#000; transform:translateY(-2px);}
/* ---- Hero ---- */
.hero{
position:relative; padding:60px 0 0; text-align:center;
background:
radial-gradient(ellipse at 50% 0%, rgba(242,96,12,0.12), transparent 60%),
var(--cream);
overflow:hidden;
}
.hero-logo{max-width:300px; margin:0 auto 16px; filter:drop-shadow(0 8px 24px rgba(35,35,35,0.25));}
.hero .eyebrow{color:var(--ink-soft); font-size:12px; margin-bottom:12px;}
.hero p.lead{max-width:560px; margin:16px auto 28px; color:var(--ink-soft); font-size:16px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:48px;}
.scratch-divider{
height:14px; margin:0 auto; max-width:1120px;
background:repeating-linear-gradient(115deg, var(--orange) 0 6px, transparent 6px 14px);
clip-path:polygon(0% 40%,4% 0%,9% 55%,14% 10%,20% 60%,26% 5%,33% 50%,40% 0%,47% 45%,54% 10%,61% 55%,68% 15%,75% 50%,82% 5%,89% 45%,96% 15%,100% 40%,100% 100%,0% 100%);
opacity:0.9;
}
/* ---- Countdown ---- */
.countdown-band{
background:var(--charcoal);
padding:34px 0;
transition:background .6s ease;
}
.countdown-band.is-live{
background:linear-gradient(120deg, var(--charcoal), #3a1a05, var(--charcoal));
background-size:200% 200%;
animation:liveGradient 3s ease infinite;
}
@keyframes liveGradient{
0%{ background-position:0% 50%; }
50%{ background-position:100% 50%; }
100%{ background-position:0% 50%; }
}
.countdown-live-banner{
font-family:'Anton',sans-serif;
font-size:clamp(24px,5vw,42px);
letter-spacing:0.02em;
color:var(--gold-hi);
text-align:center;
animation:livePulse 1.1s ease-in-out infinite, liveBurst .6s ease-out;
text-shadow:0 0 18px rgba(242,96,12,0.55), 0 0 36px rgba(201,162,39,0.35);
}
@keyframes livePulse{
0%, 100%{ transform:scale(1); }
50%{ transform:scale(1.06); }
}
@keyframes liveBurst{
0%{ transform:scale(0.7); opacity:0; }
100%{ transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.countdown-band.is-live, .countdown-live-banner{ animation:none !important; }
}
.countdown{
display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.cd-unit{
background:var(--charcoal-2);
border:1px solid rgba(255,255,255,0.08);
border-radius:var(--radius);
padding:16px 20px;
min-width:84px;
text-align:center;
}
.cd-unit .num{
font-family:'JetBrains Mono', monospace; font-weight:700;
font-size:clamp(26px,4vw,38px); color:var(--gold-hi);
line-height:1;
}
.cd-unit .label{
font-family:'JetBrains Mono', monospace; font-size:10px;
text-transform:uppercase; letter-spacing:0.1em; color:#B9B4AC; margin-top:6px;
}
.countdown-caption{
text-align:center; color:#B9B4AC; font-size:12px; margin-top:16px;
font-family:'JetBrains Mono', monospace; letter-spacing:0.06em; text-transform:uppercase;
}
/* ---- Section basics ---- */
section{padding:76px 0;}
.section-head{margin-bottom:40px;}
.section-head .eyebrow{
color:var(--orange-deep); font-weight:800; margin-bottom:6px;
font-family:'Anton', sans-serif; letter-spacing:0.02em; text-transform:uppercase;
font-size:clamp(24px,4.2vw,40px); line-height:1.05;
}
.section-head h2{font-size:clamp(18px,2.4vw,24px); font-family:'Work Sans', sans-serif; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink-soft);}
.section-head p{color:var(--ink-soft); max-width:560px; margin-top:12px; font-size:14.5px;}
.alt-bg{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.dark-bg{background:var(--charcoal); color:var(--cream);}
.dark-bg h2, .dark-bg h3{color:var(--cream);}
.dark-bg .section-head p{color:#C9C4BC;}
/* ---- Why attend / highlights grid ---- */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px;}
.feature-card{
border:1px solid var(--line); border-radius:var(--radius);
padding:26px 22px; background:#fff;
transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 10px 28px rgba(35,35,35,0.08);}
.feature-icon{
width:44px; height:44px; border-radius:50%;
background:rgba(242,96,12,0.12); color:var(--orange-deep);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-family:'JetBrains Mono',monospace; margin-bottom:14px;
}
.feature-card h3{font-size:18px; text-transform:none; font-family:'Work Sans'; font-weight:700; letter-spacing:0; margin-bottom:6px;}
.feature-card p{color:var(--ink-soft); font-size:13px;}
/* ---- Day / stamp cards ---- */
.day-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px;}
.stamp-card{
position:relative; border:1px dashed var(--line); border-radius:var(--radius);
padding:26px 22px 22px; background:#fff;
transition:transform .25s ease, border-color .25s ease;
}
.stamp-card:hover{transform:translateY(-4px); border-color:var(--orange);}
.stamp-badge{
width:54px; height:54px; border:2px solid var(--orange);
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-family:'JetBrains Mono', monospace; font-weight:700; color:#fff;
background:var(--orange);
box-shadow:0 6px 16px rgba(242,96,12,0.35);
transform:rotate(-8deg); margin-bottom:16px; font-size:13px;
}
.stamp-card h3{font-size:22px; margin-bottom:6px;}
.stamp-card .day-tag{color:var(--orange-deep); font-size:12px; margin-bottom:10px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.06em;}
.stamp-card p{color:var(--ink-soft); font-size:14px;}
.stamp-card ul{margin-top:12px; padding-left:0; list-style:none;}
.stamp-card ul li{font-size:13px; color:var(--ink-soft); padding:5px 0 5px 22px; position:relative; border-top:1px solid var(--line);}
.stamp-card ul li:before{content:'✓'; position:absolute; left:0; color:var(--orange); font-size:13px; font-weight:700;}
.day-card-btn{
display:inline-flex; align-items:center; gap:6px;
margin-top:16px; padding:10px 16px;
background:var(--charcoal); color:#fff !important;
border-radius:20px;
font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.05em;
transition:background .2s ease, transform .2s ease;
}
.day-card-btn .arrow{transition:transform .2s ease;}
.stamp-card:hover .day-card-btn{background:var(--orange);}
.stamp-card:hover .day-card-btn .arrow{transform:translateX(4px);}
/* ---- About Bolusmallchops (the company) ---- */
.about-bsc-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
@media (max-width:860px){ .about-bsc-grid{grid-template-columns:1fr; gap:32px;} }
.about-bsc-text p{margin-top:14px; font-size:14.5px; color:var(--ink-soft);}
.about-bsc-text p:first-of-type{margin-top:0;}
.about-bsc-stats{display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.about-bsc-stats div{min-width:84px;}
.about-bsc-stats b{display:block; font-family:'Anton',sans-serif; font-size:26px; color:var(--orange-deep);}
.about-bsc-stats span{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);}
.about-bsc-slider-frame{position:relative;}
.bsc-slider-stamp{
position:absolute; top:-14px; right:10px; z-index:3;
width:60px; height:60px; border-radius:50%;
background:var(--charcoal); color:var(--cream); border:2px solid var(--gold);
font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.15;
transform:rotate(8deg); box-shadow:0 6px 16px rgba(35,35,35,0.18);
}
.bsc-slider{
position:relative; overflow:hidden;
border-radius:var(--radius); border:1px solid var(--line); background:var(--charcoal);
aspect-ratio:3/4; touch-action:pan-y;
}
.bsc-slide{
position:absolute; inset:0; width:100%; height:100%;
opacity:0; transition:opacity .6s ease;
}
.bsc-slide.active{ opacity:1; }
.bsc-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.bsc-slider-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.bsc-slider-dots button{width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:.25s ease;}
.bsc-slider-dots button.active{background:var(--orange-deep); width:22px; border-radius:5px;}
@media (prefers-reduced-motion: reduce){ .bsc-slide{transition:none;} }
/* ---- Poster / gallery grid ---- */
.poster-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
.poster-card{border:1px solid var(--line); overflow:hidden; border-radius:var(--radius); background:#fff; transition:box-shadow .25s ease, transform .25s ease;}
.poster-card:hover{box-shadow:0 10px 26px rgba(35,35,35,0.1); transform:translateY(-3px);}
.poster-card img{width:100%; height:auto; transition:transform .5s ease;}
.poster-card:hover img{transform:scale(1.06);}
.poster-card .cap{padding:14px 16px; font-size:13px; color:var(--ink-soft);}
/* ---- Sponsors ---- */
.sponsor-tiers{display:grid; gap:28px;}
.sponsor-tier .tier-label{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;}
.sponsor-row{display:flex; gap:16px; flex-wrap:wrap;}
.sponsor-slot{
flex:1; min-width:140px; height:80px;
border:1px dashed rgba(255,255,255,0.25); border-radius:var(--radius);
display:flex; align-items:center; justify-content:center;
font-family:'JetBrains Mono',monospace; font-size:11px; color:#8f8a82; text-transform:uppercase;
}
/* ---- Forms ---- */
.form-card{border:1px solid var(--line); padding:32px; border-radius:var(--radius); background:#fff;}
label{display:block; font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:6px;}
.field{margin-bottom:20px;}
input, select, textarea{
width:100%; background:var(--cream); border:1px solid var(--line); color:var(--ink);
padding:12px 14px; font-family:'Work Sans', sans-serif; font-size:14px; border-radius:var(--radius);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--orange);}
.radio-row{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{border:1px solid var(--line); padding:9px 16px; border-radius:20px; font-size:13px; cursor:pointer; transition:.2s;}
.radio-pill input{display:none;}
.radio-pill.checked{border-color:var(--orange); background:rgba(242,96,12,0.1); color:var(--orange-deep);}
/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:20px 0; display:flex; justify-content:space-between; align-items:center;
font-family:'Work Sans'; font-weight:700; font-size:16px; color:var(--charcoal);
}
.faq-q .plus{font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--orange); transition:transform .25s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{color:var(--ink-soft); font-size:14px; padding-bottom:20px;}
/* ---- Contact / socials ---- */
.social-grid{display:flex; gap:14px; flex-wrap:wrap;}
.social-chip{border:1px solid var(--line); padding:12px 18px; border-radius:20px; font-family:'JetBrains Mono', monospace; font-size:13px; display:flex; align-items:center; gap:8px; transition:.2s; background:#fff;}
.social-chip:hover{border-color:var(--orange); color:var(--orange-deep);}
/* ---- WhatsApp FAB ---- */
.wa-fab{
position:fixed; bottom:22px; right:22px; z-index:200;
width:56px; height:56px; border-radius:50%; background:#25D366;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,0.25); transition:transform .2s;
}
.wa-fab:hover{transform:scale(1.08);}
.wa-fab svg{width:28px; height:28px; fill:#fff;}
/* ---- Footer ---- */
footer{background:var(--charcoal); color:#C9C4BC; padding:44px 0 30px; text-align:center; font-size:13px;}
footer .foot-logo{font-family:'Anton', sans-serif; color:var(--orange); font-size:18px; margin-bottom:10px;}
footer .foot-links{display:flex; gap:18px; justify-content:center; margin-top:14px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;}
footer .foot-links a:hover{color:var(--orange-hi);}
/* ---- Reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1; transform:none; transition:none;}
html{scroll-behavior:auto;}
}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
/* ---- Day detail pages ---- */
.day-hero{
position:relative; padding:56px 0 60px; text-align:center;
background:
radial-gradient(ellipse at 50% 0%, rgba(242,96,12,0.14), transparent 60%),
var(--cream);
border-bottom:1px solid var(--line);
}
.day-hero .giant-num{
font-family:'Anton', sans-serif; font-size:clamp(70px,16vw,160px);
color:transparent; -webkit-text-stroke:2px var(--orange);
line-height:0.85; letter-spacing:2px; margin-bottom:6px;
}
.day-hero .day-of{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;}
.day-hero h1{font-size:clamp(30px,6vw,58px); max-width:720px; margin:0 auto 14px;}
.day-hero .tagline{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:16px;}
.day-hero p.lead{max-width:560px; margin:0 auto 26px; color:var(--ink-soft);}
.theme-badge{
display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.08em; color:#fff; background:var(--orange-deep);
padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.day-hero.has-bg-slideshow .theme-badge{ background:var(--gold); color:#1a1208; }
.day-nav-strip{
display:flex; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
background:var(--charcoal);
}
.day-nav-link{
flex:1; padding:16px 14px; text-align:center;
font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
color:#EDE8DD; transition:.2s;
border-right:1px solid rgba(255,255,255,0.1);
}
.day-nav-link:last-child{border-right:none;}
.day-nav-link:hover{background:var(--orange); color:#fff;}
.day-nav-link.disabled{opacity:0.3; pointer-events:none;}
.day-nav-link .arrow{display:block; font-size:16px; margin-top:2px;}
.day-nav-link.home{color:var(--gold-hi); background:rgba(201,162,39,0.1);}
.day-nav-link.home:hover{background:var(--gold); color:var(--charcoal);}
.breadcrumb{
background:var(--cream-2); border-bottom:1px solid var(--line);
padding:10px 0;
font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
}
.breadcrumb a{color:var(--orange-deep); font-weight:700;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:var(--ink-soft); margin:0 6px;}
.breadcrumb .current{color:var(--ink-soft);}
@media (max-width:700px){
.day-nav-link{padding:12px 6px; font-size:10px; line-height:1.4;}
.day-nav-link .arrow{font-size:14px; margin-top:1px;}
.day-nav-link.home{font-size:9px;}
}
.info-strip{display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.info-chip{
display:flex; align-items:center; gap:8px;
font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:9px 16px; background:#fff;
}
.info-chip b{color:var(--charcoal); font-weight:700;}
.timeline{border-left:2px solid var(--line); margin-left:8px; padding-left:28px;}
.timeline-item{position:relative; padding-bottom:30px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
content:''; position:absolute; left:-33px; top:4px;
width:10px; height:10px; border-radius:50%; background:var(--orange); border:2px solid var(--cream);
}
.timeline-item .t-time{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--orange-deep); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:4px;}
.timeline-item h3{font-size:17px; text-transform:none; font-family:'Work Sans'; font-weight:700; letter-spacing:0; margin-bottom:4px;}
.timeline-item p{color:var(--ink-soft); font-size:14px;}
/* ==========================================================================
ANIMATION LAYER
========================================================================== */
/* Hero: BSC WEEK wordmark — CIRCLE frame, gold border, nothing cropped */
.logo-frame{
width:190px; height:190px;
margin:0 auto 18px;
border-radius:50%;
background:#111;
border:5px solid var(--gold);
overflow:hidden;
box-shadow:0 14px 32px rgba(35,35,35,0.28);
animation:bob 5s ease-in-out infinite;
display:flex; align-items:center; justify-content:center;
}
.logo-frame .hero-logo{
width:78%; height:78%;
object-fit:contain;
margin:0; filter:none; animation:none;
}
@keyframes bob{
0%, 100%{ transform:translateY(0); filter:drop-shadow(0 8px 24px rgba(35,35,35,0.25)); }
50%{ transform:translateY(-8px); filter:drop-shadow(0 16px 34px rgba(242,96,12,0.28)); }
}
/* Hero: Bolu Small Chops mascot — same SIZE as the logo circle above, but rounded square, nothing cropped */
.mascot-frame{
position:relative;
width:190px; height:190px;
margin:0 auto 18px;
border-radius:28px;
background:#111;
border:5px solid var(--gold);
overflow:hidden;
box-shadow:0 14px 32px rgba(35,35,35,0.28);
animation:floaty 4.5s ease-in-out infinite;
display:flex; align-items:center; justify-content:center;
}
.mascot-frame img{
width:78%; height:78%; object-fit:contain;
}
@keyframes floaty{
0%, 100%{ transform:translateY(0) rotate(-2deg); }
50%{ transform:translateY(-10px) rotate(2deg); }
}
/* Drifting background embers on hero */
.hero{ position:relative; }
.hero-embers{
position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.hero-mascot-bg{
position:absolute;
top:50%; left:50%;
width:min(760px, 130vw);
height:min(760px, 130vw);
transform:translate(-50%,-50%);
background-image:url('assets/mascot-white-cutout.png');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:0.08;
pointer-events:none;
z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }
.ember{
position:absolute; bottom:-20px; border-radius:50%;
background:radial-gradient(circle at 32% 28%, #fff, var(--orange-hi) 40%, rgba(255,120,20,0.55) 68%, transparent 78%);
opacity:0; pointer-events:none;
animation:rise ease-in infinite;
will-change:transform, opacity;
}
@keyframes rise{
0%{ transform:translateY(0) translateX(0) scale(0.5); opacity:0; }
10%{ opacity:0.95; }
35%{ transform:translateY(-120px) translateX(calc(var(--drift,20px) * -0.6)) scale(1.05); }
60%{ transform:translateY(-230px) translateX(var(--drift,20px)) scale(0.95); opacity:0.9; }
85%{ transform:translateY(-340px) translateX(calc(var(--drift,20px) * 1.4)) scale(1.2); opacity:0.6; }
100%{ transform:translateY(-420px) translateX(calc(var(--drift,20px) * 1.6)) scale(0.15); opacity:0; }
}
/* Scratch divider shimmer */
.scratch-divider{ position:relative; overflow:hidden; }
.scratch-divider::after{
content:''; position:absolute; top:0; left:-40%; height:100%; width:40%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{
0%{ left:-40%; }
100%{ left:140%; }
}
/* Countdown pulse */
.cd-unit{ animation:pulse-in 0.5s ease backwards; }
.cd-unit:nth-child(1){ animation-delay:0.05s; }
.cd-unit:nth-child(2){ animation-delay:0.15s; }
.cd-unit:nth-child(3){ animation-delay:0.25s; }
.cd-unit:nth-child(4){ animation-delay:0.35s; }
@keyframes pulse-in{
0%{ transform:scale(0.85); opacity:0; }
100%{ transform:scale(1); opacity:1; }
}
.cd-unit .num{ display:inline-block; animation:tick-glow 2s ease-in-out infinite; }
@keyframes tick-glow{
0%, 100%{ text-shadow:0 0 0 rgba(228,194,74,0); }
50%{ text-shadow:0 0 18px rgba(228,194,74,0.55); }
}
/* Staggered reveal (children of a .reveal-group get incremental delay) */
.reveal-group .reveal:nth-child(1){ transition-delay:0.05s; }
.reveal-group .reveal:nth-child(2){ transition-delay:0.12s; }
.reveal-group .reveal:nth-child(3){ transition-delay:0.19s; }
.reveal-group .reveal:nth-child(4){ transition-delay:0.26s; }
.reveal-group .reveal:nth-child(5){ transition-delay:0.33s; }
.reveal-group .reveal:nth-child(6){ transition-delay:0.40s; }
/* Stamp badge wiggle on hover, wobble entrance */
.stamp-badge{ animation:wobble-in 0.5s ease backwards; }
.stamp-card:hover .stamp-badge{ animation:wiggle 0.5s ease; }
@keyframes wobble-in{
0%{ transform:rotate(-8deg) scale(0.6); opacity:0; }
100%{ transform:rotate(-8deg) scale(1); opacity:1; }
}
@keyframes wiggle{
0%, 100%{ transform:rotate(-8deg); }
25%{ transform:rotate(6deg); }
75%{ transform:rotate(-16deg); }
}
/* Button shimmer sweep */
.btn-solid, .btn-dark{ position:relative; overflow:hidden; }
.btn-solid::after, .btn-dark::after{
content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
transform:skewX(-20deg);
transition:left 0.6s ease;
}
.btn-solid:hover::after, .btn-dark:hover::after{ left:130%; }
/* Feature card icon pop */
.feature-card{ animation:fade-up 0.6s ease backwards; }
.feature-icon{ transition:transform 0.3s ease; }
.feature-card:hover .feature-icon{ transform:scale(1.15) rotate(-6deg); }
@keyframes fade-up{
0%{ transform:translateY(14px); opacity:0; }
100%{ transform:translateY(0); opacity:1; }
}
/* Giant day number subtle breathing glow on day pages */
.giant-num{ animation:breathe 4s ease-in-out infinite; }
@keyframes breathe{
0%, 100%{ -webkit-text-stroke-width:2px; }
50%{ -webkit-text-stroke-width:3px; }
}
/* Crown / gold block glow pulse */
.crown-block, [style*="border:1px solid var(--gold)"]{ animation:gold-breathe 3.5s ease-in-out infinite; }
@keyframes gold-breathe{
0%, 100%{ box-shadow:0 0 0 rgba(201,162,39,0); }
50%{ box-shadow:0 0 36px rgba(201,162,39,0.18); }
}
/* WhatsApp FAB idle pulse ring */
.wa-fab{ animation:fab-pop 0.6s ease; }
.wa-fab::before{
content:''; position:absolute; inset:0; border-radius:50%;
border:2px solid #25D366; opacity:0.6;
animation:fab-ring 2.2s ease-out infinite;
}
@keyframes fab-ring{
0%{ transform:scale(1); opacity:0.5; }
100%{ transform:scale(1.7); opacity:0; }
}
@keyframes fab-pop{
0%{ transform:scale(0); }
70%{ transform:scale(1.15); }
100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
.mascot-spot, .hero-logo, .ember, .scratch-divider::after, .cd-unit, .cd-unit .num,
.stamp-badge, .btn-solid::after, .btn-dark::after, .feature-card, .giant-num,
.crown-block, .wa-fab::before, .wa-fab{ animation:none !important; transition:none !important; }
body{ opacity:1 !important; transition:none !important; }
}
/* ---- Day hero photo background (crossfade slideshow) ---- */
.day-hero.has-bg-slideshow{
position:relative;
padding:80px 0 70px;
overflow:hidden;
background:var(--charcoal);
}
.bg-slideshow{ position:absolute; inset:0; z-index:0; }
.bg-slideshow img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; animation:bgCrossfade 12s ease-in-out infinite;
}
.bg-slideshow img:nth-child(1){ animation-delay:0s; }
.bg-slideshow img:nth-child(2){ animation-delay:6s; }
@keyframes bgCrossfade{
0%{ opacity:0; }
6%{ opacity:1; }
44%{ opacity:1; }
50%{ opacity:0; }
100%{ opacity:0; }
}
.day-hero.has-bg-slideshow::before{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(20,18,15,0.82) 0%, rgba(20,18,15,0.6) 45%, var(--cream) 96%);
}
.day-hero.has-bg-slideshow .wrap{ position:relative; z-index:2; }
.day-hero.has-bg-slideshow .giant-num{ -webkit-text-stroke-color:var(--gold-hi); }
.day-hero.has-bg-slideshow .day-of{ color:var(--gold-hi); }
.day-hero.has-bg-slideshow h1{ color:#fff; }
.day-hero.has-bg-slideshow .tagline{ color:var(--orange-hi); }
.day-hero.has-bg-slideshow p.lead{ color:#E8E3D8; }
.day-hero.has-bg-slideshow .info-chip{ background:rgba(20,18,15,0.55); border-color:rgba(255,255,255,0.25); color:#F2EAD8; }
.day-hero.has-bg-slideshow .info-chip b{ color:#fff; }
@media (prefers-reduced-motion: reduce){
.bg-slideshow img{ animation:none !important; opacity:1 !important; }
.bg-slideshow img:nth-child(2){ display:none; }
}
/* ---- Vendor multi-step flow ---- */
.vendor-progress{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:28px; }
.vendor-progress-step{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); opacity:0.5; transition:opacity .25s; }
.vendor-progress-step.active{ opacity:1; color:var(--orange-deep); }
.vendor-progress-step.done{ opacity:1; color:var(--gold); }
.vendor-progress-step span{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; background:var(--cream); }
.vendor-progress-step.active span{ border-color:var(--orange); background:var(--orange); color:#fff; }
.vendor-progress-step.done span{ border-color:var(--gold); background:var(--gold); color:#fff; }
.vendor-progress-line{ width:28px; height:1px; background:var(--line); }
.vendor-step{ animation:vendorStepIn .35s ease; }
@keyframes vendorStepIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.vendor-id-badge{ display:flex; align-items:center; justify-content:space-between; border:1px dashed var(--orange-deep); border-radius:var(--radius); padding:10px 14px; margin-bottom:18px; background:var(--cream-2); }
.vendor-id-badge span{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.vendor-id-badge b{ font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:0.03em; color:var(--orange-deep); }
.price-box{ text-align:center; border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--cream); margin-bottom:18px; }
.price-box-label{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
.price-box-amount{ font-family:'Anton',sans-serif; font-size:40px; color:var(--orange-deep); margin:6px 0; }
.price-box-badge{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:#fff; background:var(--orange-deep); text-transform:uppercase; letter-spacing:0.06em; padding:5px 12px; border-radius:999px; margin-bottom:8px; }
.price-box-note{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.account-box{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:#fff; }
.account-box-title{ font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:10px; }
.account-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:14px; }
.account-row:first-of-type{ border-top:none; }
.account-row span{ color:var(--ink-soft); }
.account-row b{ color:var(--ink); font-weight:700; }
.upload-box{ border:1px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center; cursor:pointer; transition:.2s; background:var(--cream); }
.upload-box:hover{ border-color:var(--orange); }
.upload-box .upload-icon{ font-size:28px; display:block; margin-bottom:8px; }
.upload-box p{ font-size:13px; color:var(--ink-soft); }
.upload-box img#uploadPreview{ max-width:100%; max-height:220px; border-radius:8px; }
.vendor-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:44px 0; animation:loaderFadeIn .3s ease; }
.vendor-loader p{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
.loader-rings{ position:relative; width:52px; height:52px; }
.loader-rings span{ position:absolute; inset:0; border-radius:50%; border:3px solid transparent; }
.loader-rings span:nth-child(1){ border-top-color:var(--orange); border-right-color:var(--orange-hi); animation:spin .85s cubic-bezier(.5,.1,.5,.9) infinite; }
.loader-rings span:nth-child(2){ inset:9px; border-bottom-color:var(--gold); border-left-color:var(--gold-hi); animation:spinReverse 1.2s linear infinite; }
.loader-bar{ width:170px; height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:35%; background:linear-gradient(90deg, var(--orange), var(--gold)); border-radius:999px; animation:loaderSlide 1.15s ease-in-out infinite; }
/* legacy single-ring spinner kept for compatibility */
.spinner{ width:38px; height:38px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--orange); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spinReverse{ to{ transform:rotate(-360deg); } }
@keyframes loaderSlide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(390%); } }
@keyframes loaderFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
/* ---- Admin dashboard ---- */
.admin-wrap{ padding:40px 0 80px; }
.admin-tag{
font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase;
letter-spacing:0.08em; background:var(--orange-deep); color:#fff; padding:4px 10px; border-radius:999px;
}
.admin-login-card{
max-width:420px; margin:40px auto; padding:32px; background:#fff;
border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 28px rgba(35,35,35,0.06);
}
.admin-login-card h1{ font-size:26px; margin-bottom:8px; }
.admin-sub{ color:var(--ink-soft); font-size:13px; margin-bottom:22px; }
.admin-error{ color:#c0392b; font-size:13px; margin-top:10px; }
.admin-setup-note{
margin-top:18px; padding:12px 14px; border:1px dashed var(--line); border-radius:10px;
font-size:12px; color:var(--ink-soft); line-height:1.6;
}
.admin-setup-note code{ background:var(--cream); padding:1px 5px; border-radius:4px; }
.admin-header-row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:22px; }
.admin-stats{ display:flex; gap:12px; flex-wrap:wrap; }
.admin-stat{
display:flex; flex-direction:column; align-items:center; justify-content:center;
min-width:78px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.admin-stat b{ font-family:'Anton',sans-serif; font-size:22px; color:var(--charcoal); }
.admin-stat span{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--ink-soft); }
.admin-stat.is-confirmed b{ color:#1a8f4e; }
.admin-stat.is-rejected b{ color:#c0392b; }
.admin-stat.is-submitted b{ color:var(--orange-deep); }
.admin-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.admin-toolbar input[type="text"]{
flex:1; min-width:220px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; font-size:13px;
}
.admin-toolbar select{
padding:10px 14px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:#fff;
}
.admin-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:960px; }
.admin-table th{
text-align:left; padding:12px 14px; background:var(--cream); border-bottom:1px solid var(--line);
font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);
}
.admin-table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table .mono{ font-family:'JetBrains Mono',monospace; font-size:12px; }
.admin-details-cell{ max-width:220px; color:var(--ink-soft); }
.admin-date-cell{ white-space:nowrap; color:var(--ink-soft); }
.admin-empty{ text-align:center; color:var(--ink-soft); padding:30px !important; }
.admin-proof-link{ color:var(--orange-deep); font-weight:700; }
.admin-status-badge{
display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase;
padding:4px 10px; border-radius:999px; font-weight:700;
}
.admin-status-badge.status-submitted{ background:#fff3e0; color:var(--orange-deep); }
.admin-status-badge.status-confirmed{ background:#e6f7ee; color:#1a8f4e; }
.admin-status-badge.status-rejected{ background:#fdeceb; color:#c0392b; }
.admin-status-select{
padding:6px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; background:#fff;
}
/* ==========================================================================
HOME REFRESH — hero rebuild, About pillars, Partner, vendor flow strip,
Get Involved grid. Appended as its own layer so the original rules above
stay untouched and this block can be scanned as one unit.
========================================================================== */
/* ---- Hero: headline / tagline / meta chip ---- */
.hero-title{
font-size:clamp(44px,11vw,104px);
line-height:0.95;
margin:4px 0 2px;
}
.hero-tagline{
font-family:'JetBrains Mono', monospace;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
font-size:clamp(13px,2.6vw,17px);
color:var(--orange-deep);
margin:0 0 18px;
}
.hero-meta{
display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700;
text-transform:uppercase; letter-spacing:0.06em; color:var(--ink);
border:1px solid var(--line); background:#fff;
border-radius:20px; padding:10px 20px; margin-bottom:30px;
}
.hero-meta .sep{ color:var(--orange); }
@media (max-width:480px){
.hero .hero-ctas .btn{ width:100%; justify-content:center; }
}
/* ---- About: short pillar strip (replaces long paragraph stack) ---- */
.about-pillars{
display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:36px;
}
@media (max-width:760px){ .about-pillars{ grid-template-columns:repeat(2, 1fr); } }
.pillar{ text-align:left; }
.pillar .pillar-icon{
width:40px; height:40px; border-radius:50%;
background:rgba(242,96,12,0.1); color:var(--orange-deep);
display:flex; align-items:center; justify-content:center;
font-size:18px; margin-bottom:10px;
}
.pillar b{
display:block; font-family:'Anton',sans-serif; font-size:15px;
letter-spacing:0.02em; text-transform:uppercase; color:var(--charcoal); margin-bottom:4px;
}
.pillar p{ font-size:13px; color:var(--ink-soft); }
/* ---- Dark-background feature cards (Partner section, Day 5 lineup) ----
Lets .feature-card sit inside a .dark-bg section with zero inline styles. */
.dark-bg .feature-card{ background:var(--charcoal-2); border-color:rgba(255,255,255,0.1); }
.dark-bg .feature-card h3{ color:var(--cream); }
.dark-bg .feature-card p{ color:#C9C4BC; }
.dark-bg .feature-icon{ background:rgba(201,162,39,0.18); color:var(--gold-hi); }
/* ---- Vendor 4-step flow chips (reuses .info-strip/.info-chip shell) ---- */
.flow-num{
display:inline-flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:50%;
background:var(--orange); color:#fff; font-weight:700; font-size:11px;
margin-right:6px; flex-shrink:0;
}
.flow-arrow{ color:var(--line); font-weight:700; align-self:center; }
/* ---- Get Involved: 4-card grid ---- */
.involve-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.involve-card{
text-align:center; padding:32px 22px;
border:1px solid var(--line); border-radius:var(--radius); background:#fff;
transition:transform .2s ease, box-shadow .2s ease;
}
.involve-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(35,35,35,0.08); }
.involve-card .feature-icon{ margin:0 auto 14px; }
.involve-card h3{ font-size:18px; text-transform:none; font-family:'Work Sans'; font-weight:700; letter-spacing:0; margin-bottom:6px; }
.involve-card p{ color:var(--ink-soft); font-size:13px; margin-bottom:18px; }
.involve-card .btn{ font-size:12px; padding:12px 20px; }