/* thanksgiving.css — Thanksgiving overlay for the JTD Electric LLC light homepage.
Switch on: add class "is-thanksgiving" to and link this stylesheet.
Switch off: remove the class, or omit this file.
Does not change layout, copy, partner logos, or green buttons. */
.is-thanksgiving{
--thanks-amber:#C56A16;
--thanks-amber-deep:#8B4A12;
--thanks-gold:#C9A227;
--thanks-rust:#B8431E;
--thanks-banner-bg:#FBF4E8;
--thanks-banner-h:36px;
}
/* Slim top greeting in warm amber/orange */
.is-thanksgiving .thanks-banner{
margin:0;
height:var(--thanks-banner-h);
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(180deg, #FDF8EF 0%, #F8EEDC 100%);
border-bottom:1px solid rgba(197,106,22,.22);
font-family:var(--display), 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
font-size:13px;
font-weight:600;
letter-spacing:.045em;
word-spacing:.12em;
line-height:1;
color:var(--thanks-amber);
text-align:center;
padding:0 20px;
white-space:nowrap;
}
/* Soft warm amber glow in the hero — text stays charcoal, buttons stay green */
.is-thanksgiving .hero{
isolation:isolate;
background:
radial-gradient(ellipse 58% 72% at 82% 48%, rgba(212,140,40,.16), transparent 64%),
radial-gradient(ellipse 42% 52% at 8% 100%, rgba(184,90,30,.09), transparent 56%),
radial-gradient(ellipse 50% 40% at 50% 0%, rgba(232,186,90,.08), transparent 60%),
#FFFFFF;
}
/* ---- Falling autumn leaves, hero only ---- */
.is-thanksgiving .thanks-fall{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
/* Maple silhouette via mask so color can vary per leaf */
.is-thanksgiving .thanks-leaf{
position:absolute;
top:-12%;
width:20px;
height:20px;
background-color:var(--thanks-amber);
opacity:.7;
animation:thanks-leaf-fall var(--t,16s) linear var(--d,0s) infinite;
will-change:transform;
filter:drop-shadow(0 1px 1px rgba(80,40,10,.12));
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.is-thanksgiving .hero-copy,
.is-thanksgiving .hero-visual{position:relative;z-index:2}
@keyframes thanks-leaf-fall{
0%{top:-8%;transform:translateX(0) rotate(var(--r0,-12deg))}
25%{top:25%;transform:translateX(16px) rotate(calc(var(--r0,-12deg) + 70deg))}
50%{top:52%;transform:translateX(-14px) rotate(calc(var(--r0,-12deg) + 160deg))}
75%{top:78%;transform:translateX(12px) rotate(calc(var(--r0,-12deg) + 250deg))}
100%{top:108%;transform:translateX(-8px) rotate(calc(var(--r0,-12deg) + 360deg))}
}
.is-thanksgiving .thanks-leaf:nth-child(1){left:8%; --t:17s; --d:-5s; --r0:-18deg; background-color:#C56A16; width:22px;height:22px}
.is-thanksgiving .thanks-leaf:nth-child(2){left:19%; --t:14s; --d:-10s; --r0:22deg; background-color:#B8431E; width:16px;height:16px;opacity:.62}
.is-thanksgiving .thanks-leaf:nth-child(3){left:31%; --t:19s; --d:-3s; --r0:-8deg; background-color:#C9A227; width:24px;height:24px}
.is-thanksgiving .thanks-leaf:nth-child(4){left:44%; --t:15.5s;--d:-12s; --r0:30deg; background-color:#8B3A1A; width:15px;height:15px;opacity:.6}
.is-thanksgiving .thanks-leaf:nth-child(5){left:56%; --t:18s; --d:-7s; --r0:-25deg; background-color:#D07A20; width:20px;height:20px}
.is-thanksgiving .thanks-leaf:nth-child(6){left:68%; --t:13.5s;--d:-1s; --r0:12deg; background-color:#A33B1E; width:18px;height:18px}
.is-thanksgiving .thanks-leaf:nth-child(7){left:80%; --t:16.5s;--d:-9s; --r0:-30deg; background-color:#C9A227; width:17px;height:17px;opacity:.65}
.is-thanksgiving .thanks-leaf:nth-child(8){left:91%; --t:20s; --d:-14s; --r0:6deg; background-color:#C45C26; width:23px;height:23px}
.is-thanksgiving .thanks-leaf:nth-child(9){left:13%; --t:15s; --d:-16s; --r0:18deg; background-color:#B8431E; width:14px;height:14px;opacity:.55}
.is-thanksgiving .thanks-leaf:nth-child(10){left:73%; --t:17.5s;--d:-4s; --r0:-14deg; background-color:#C56A16; width:19px;height:19px}
/* Small static fall-leaf cluster in the hero's lower-right corner */
.is-thanksgiving .thanks-corner{
position:absolute;
right:0;
bottom:0;
width:200px;
height:150px;
pointer-events:none;
z-index:1;
opacity:.88;
background:url("data:image/svg+xml;utf8,") right bottom/contain no-repeat;
}
@media (max-width:900px){
.is-thanksgiving .thanks-corner{width:130px;height:98px}
}
@media (max-width:760px){
.is-thanksgiving{--thanks-banner-h:32px}
.is-thanksgiving .thanks-banner{
font-size:12px;
letter-spacing:.03em;
word-spacing:.08em;
padding:0 12px;
}
.is-thanksgiving .thanks-corner{width:108px;height:82px}
.is-thanksgiving .thanks-leaf{width:15px;height:15px}
}
@media (max-width:420px){
.is-thanksgiving .thanks-banner{
font-size:11px;
letter-spacing:.03em;
word-spacing:.06em;
white-space:normal;
line-height:1.3;
height:auto;
min-height:var(--thanks-banner-h);
padding:7px 12px;
}
}
@media (prefers-reduced-motion:reduce){
.is-thanksgiving .thanks-leaf{
animation:none;
top:auto;
}
.is-thanksgiving .thanks-leaf:nth-child(odd){top:16%}
.is-thanksgiving .thanks-leaf:nth-child(even){top:48%}
.is-thanksgiving .thanks-leaf:nth-child(3n){top:72%}
}
/* Same amber glow and leaf stage on estimate / thank-you page heroes */
.is-thanksgiving .page-hero{
isolation:isolate;
position:relative;
overflow:hidden;
background:
radial-gradient(ellipse 58% 72% at 82% 48%, rgba(212,140,40,.16), transparent 64%),
radial-gradient(ellipse 42% 52% at 8% 100%, rgba(184,90,30,.09), transparent 56%),
radial-gradient(ellipse 50% 40% at 50% 0%, rgba(232,186,90,.08), transparent 60%),
#FFFFFF;
}
.is-thanksgiving .page-hero .container{position:relative;z-index:2}