/* ============================================================
KH FESTIVAL THEMES v1.5 [KH-FESTTHEME v1.5]
Decorative festival skins for the PUBLIC front website.
A skin is active only when the site owner enables it per
event in the panel (Front Studio -> Festival Themes):
mode Auto = on the event's own date, Manual = right now,
Off (the default for every event) = never.
PAINT ONLY: colours, gradients, motifs and shadows. No
padding / margin / width / height / font-size / flex /
position changes on any layout element - the reader
toolbar geometry stays 100% original (the v1.1 rule).
The only positioned elements are the banner's own ::before
and ::after motif layers, which never change its height.
Every rule is scoped under html[data-khfest] and this file
loads AFTER kh-front-themes.css, so a festival skin layers
over the chosen Front Studio design.
------------------------------------------------------------
v1.3 FOOTER + TOP FIX: in v1.2 the footer kept the design's
colours because (a) the footer's diagonal planes
(.footer-section::before / ::after, painted by style.css and
re-painted by every Front Studio design) had NO festival
rule at all, and (b) Rajyotsava's own deep red / red accent
is nearly identical to the dark-red designs, so even the
rules that did land were invisible. The footer block below
now paints the section, BOTH planes, the bottom strip and
the headings, with a dedicated Karnataka treatment for
Rajyotsava. v1.3 also styles the FESTIVAL SHOWCASE BAND
(.kh-fest-footer-band), a block the loader injects as the
first child of .footer-top while a skin is active.
------------------------------------------------------------
v1.4 (owner's ruling, live test of v2.3.6): FESTIVAL WORK
IS FOOTER ONLY - the header, the site logo and the chosen
design must NEVER be touched by a festival skin. The
three TOP changes v1.3 made are therefore REVERTED here:
the retargeted logo rule is DELETED outright (no rule in
this file touches the header logo at all, and v1.2's dead
.logo-img-wrapper rule is NOT restored - it never matched
anything), .paper-edition loses the !important v1.3 added,
and .date-time-colour is back exactly as v1.2 had it - so
the palette / banner / masthead / toolbar sections are
byte-identical to v1.2 except for that one removed dead
logo rule. The v1.3 footer + band work stays, and the
band's <=640px layout becomes a tight horizontal card
(fixed 96x72 picture, small text, no empty gap) instead
of the full-width stacked block that filled phone screens.
------------------------------------------------------------
v1.5 (owner's live phone test of v2.3.7): the showcase
band's TITLE looked sliced at the top on phones. Cause:
Rajyotsava's band gradient starts with a 16px strip in
#f9c300 - the EXACT colour of its title - while the phone
band's padding-top was only 10px and the title's
line-height 1.15, so the letters' tops sat inside the
same-colour strip and vanished (yellow on yellow). The
same trap exists wherever a title colour meets its own
gradient start (Holi, Independence, and every generic
event - the loader sets a generic event's accent EQUAL
to its --khfest-a). v1.5 fixes the BAND ONLY: title
line-height 1.3 plus a soft dark text-shadow on every
skin, phone padding-top 24px so the text column starts
fully below any top strip, Rajyotsava's phone strip
shrunk to 10px, and the text wrapper given its own
stacking layer above the shimmer and motif layers.
Nothing else changes: palettes, banner, masthead,
toolbar, footer paint and falling FX are untouched.
NOTE FOR THE LOADER: bump the stylesheet stamp to ?v=1.5.
============================================================ */
/* ---------- Skin palettes ---------- */
html[data-khfest="deepavali"]{--khfest-a:#2d0a4e;--khfest-b:#7a1e5e;--khfest-text:#ffe9b0;--khfest-accent:#ffb300;--khfest-deep:#2d0a4e}
html[data-khfest="rajyotsava"]{--khfest-a:#d92323;--khfest-b:#f9c300;--khfest-text:#ffffff;--khfest-accent:#d92323;--khfest-deep:#8d1007}
html[data-khfest="ugadi"]{--khfest-a:#14532d;--khfest-b:#3f9142;--khfest-text:#fef9c3;--khfest-accent:#eab308;--khfest-deep:#14532d}
html[data-khfest="newyear"]{--khfest-a:#0b1035;--khfest-b:#1e2a78;--khfest-text:#ffffff;--khfest-accent:#ffd54f;--khfest-deep:#0b1035}
html[data-khfest="sankranti"]{--khfest-a:#ff6f00;--khfest-b:#0288d1;--khfest-text:#ffffff;--khfest-accent:#ff6f00;--khfest-deep:#5d2600}
html[data-khfest="holi"]{--khfest-a:#ec407a;--khfest-b:#ab47bc;--khfest-text:#ffffff;--khfest-accent:#ec407a;--khfest-deep:#4a1042}
html[data-khfest="ganesha"]{--khfest-a:#e65100;--khfest-b:#fb8c00;--khfest-text:#fff7e0;--khfest-accent:#ffca28;--khfest-deep:#6d2c00}
html[data-khfest="dussehra"]{--khfest-a:#4a0e12;--khfest-b:#7f1d1d;--khfest-text:#ffe9b0;--khfest-accent:#f59e0b;--khfest-deep:#38090d}
html[data-khfest="independence"]{--khfest-a:#FF9933;--khfest-b:#138808;--khfest-text:#ffffff;--khfest-accent:#FF9933;--khfest-deep:#000080}
html[data-khfest="republic"]{--khfest-a:#138808;--khfest-b:#FF9933;--khfest-text:#ffffff;--khfest-accent:#138808;--khfest-deep:#000080}
html[data-khfest="gandhi"]{--khfest-a:#efe6cf;--khfest-b:#e3d5ae;--khfest-text:#4e342e;--khfest-accent:#8d6e63;--khfest-deep:#5d4037}
html[data-khfest="christmas"]{--khfest-a:#b71c1c;--khfest-b:#1b5e20;--khfest-text:#ffffff;--khfest-accent:#c62828;--khfest-deep:#4a0d0d}
html[data-khfest="eid"]{--khfest-a:#004d40;--khfest-b:#00897b;--khfest-text:#e0f2f1;--khfest-accent:#ffca28;--khfest-deep:#00332b}
/* generic defines NO palette here on purpose: the loader prints the
event's own colours as :root variables (--khfest-a / --khfest-b /
--khfest-text / --khfest-accent) and the shared rules below use
them through their fallbacks. */
/* ---------- Festival banner (paint + motif layers only) ---------- */
/* The banner background is an INLINE style from head.php, so the
skin gradient needs !important to win; size/position untouched. */
html[data-khfest] #festival-sticky-header{background:linear-gradient(90deg,var(--khfest-a,#FF9933),var(--khfest-b,#138808))!important;color:var(--khfest-text,#ffffff)!important}
html[data-khfest="rajyotsava"] #festival-sticky-header{background:linear-gradient(180deg,#f9c300 0 52%,#d92323 52% 100%)!important;color:#ffffff!important}
html[data-khfest="holi"] #festival-sticky-header{background:linear-gradient(90deg,#ec407a,#ffb300 30%,#66bb6a 55%,#42a5f5 80%,#ab47bc)!important}
html[data-khfest="independence"] #festival-sticky-header{background:linear-gradient(180deg,#FF9933 0 34%,#ffffff 34% 67%,#138808 67% 100%)!important;color:#000080!important}
html[data-khfest="republic"] #festival-sticky-header{background:linear-gradient(90deg,#FF9933,#ffffff 50%,#138808)!important;color:#000080!important}
html[data-khfest] #festival-sticky-header::before,html[data-khfest] #festival-sticky-header::after{content:"";position:absolute;pointer-events:none}
html[data-khfest] #festival-sticky-header>*{position:relative;z-index:1}
/* diya dots (Deepavali) */
html[data-khfest="deepavali"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(255,179,0,.95) 3px,rgba(255,179,0,0) 4.5px),radial-gradient(circle,rgba(255,122,40,.85) 2px,rgba(255,122,40,0) 3.5px);background-size:56px 30px,56px 30px;background-position:6px 3px,34px 16px;opacity:.55}
html[data-khfest="deepavali"] #festival-sticky-header::after{left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,179,0,.8),transparent)}
/* gold sparkle (New Year) */
html[data-khfest="newyear"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(255,213,79,.95) 2px,rgba(255,213,79,0) 3.5px),radial-gradient(circle,rgba(255,255,255,.8) 1.5px,rgba(255,255,255,0) 3px);background-size:64px 30px,48px 30px;background-position:4px 4px,26px 15px;opacity:.6}
/* neem-mango dots (Ugadi) */
html[data-khfest="ugadi"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(234,179,8,.9) 2.5px,rgba(234,179,8,0) 4px),radial-gradient(circle,rgba(190,242,100,.75) 2px,rgba(190,242,100,0) 3.5px);background-size:52px 30px,52px 30px;background-position:4px 5px,30px 16px;opacity:.55}
/* kite stripes (Sankranti) */
html[data-khfest="sankranti"] #festival-sticky-header::before{inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 10px,rgba(255,255,255,0) 10px 22px)}
/* colour splash dots (Holi) */
html[data-khfest="holi"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.5) 3px,rgba(255,255,255,0) 5px),radial-gradient(circle,rgba(255,255,255,.35) 2px,rgba(255,255,255,0) 4px);background-size:70px 32px,44px 32px;background-position:8px 4px,32px 16px}
/* marigold dots (Ganesha) */
html[data-khfest="ganesha"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(255,202,40,.95) 3px,rgba(255,202,40,0) 4.5px),radial-gradient(circle,rgba(255,112,67,.85) 2.5px,rgba(255,112,67,0) 4px);background-size:50px 30px,50px 30px;background-position:5px 4px,29px 16px;opacity:.6}
/* royal gold dots (Dussehra) */
html[data-khfest="dussehra"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(245,158,11,.9) 2.5px,rgba(245,158,11,0) 4px);background-size:58px 30px;background-position:6px 6px;opacity:.6}
/* snow dots (Christmas) */
html[data-khfest="christmas"] #festival-sticky-header::before{inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 2.5px,rgba(255,255,255,0) 4px),radial-gradient(circle,rgba(255,255,255,.6) 1.8px,rgba(255,255,255,0) 3.2px);background-size:60px 30px,42px 30px;background-position:4px 3px,24px 15px;opacity:.7}
/* crescent (Eid) - pure CSS box-shadow crescent, decoration only */
html[data-khfest="eid"] #festival-sticky-header::after{width:15px;height:15px;border-radius:50%;box-shadow:5px 1px 0 0 rgba(255,202,40,.95);right:30px;top:5px}
/* tricolour base line (Independence / Republic) */
html[data-khfest="independence"] #festival-sticky-header::after,html[data-khfest="republic"] #festival-sticky-header::after{left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#FF9933 0 33%,#f5f5f5 33% 66%,#138808 66% 100%)}
/* Karnataka base line (Rajyotsava) */
html[data-khfest="rajyotsava"] #festival-sticky-header::after{left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#f9c300,#d92323)}
/* soft sheen (Generic) */
html[data-khfest="generic"] #festival-sticky-header::before{inset:0;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 14px,rgba(255,255,255,0) 14px 30px)}
/* ---------- Masthead + homepage accents ---------- */
html[data-khfest] header.header,html[data-khfest][data-khfront] header.header{border-bottom:3px solid var(--khfest-accent,#FF9933)}
html[data-khfest] .date-time-colour{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .badge-edition-label{background-color:var(--khfest-accent,#FF9933);background-image:none;border-color:transparent}
html[data-khfest] .badge-edition-label:hover,html[data-khfest] .badge-edition-label.active{background-color:var(--khfest-b,#138808);color:var(--khfest-text,#ffffff)}
html[data-khfest] .eviewBox{border-top-color:var(--khfest-accent,#FF9933)}
html[data-khfest] .paper-edition{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .multi-link-banner{border-color:var(--khfest-accent,#FF9933)}
html[data-khfest] #webStory .slide img{border-color:var(--khfest-accent,#FF9933)}
/* ---------- Footer accents (v1.3: section + BOTH diagonal planes +
bottom strip now painted, so the skin reaches the whole footer) ---------- */
/* The visible footer is THREE layers: .footer-section's own background
PLUS its ::before / ::after rotated planes (style.css paints them
#1f2f40; every Front Studio design repaints them --khf-footer-shade).
v1.2 coloured only the base layer, so the design's diagonal kept
showing through. The plane rule below is (0,2,2) - it ties the front
themes' plane rule and wins because this file loads after it. */
html[data-khfest] .footer-section{background-color:var(--khfest-deep,#1f2937);background-image:linear-gradient(180deg,var(--khfest-a,#FF9933),var(--khfest-deep,#1f2937) 140px,var(--khfest-deep,#1f2937))}
html[data-khfest] .footer-section::before,html[data-khfest] .footer-section::after{background-color:var(--khfest-deep,#1f2937)}
html[data-khfest] .footer-top .widget-title{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .footer-section a:hover{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .small-post-item .post-date{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .footer-bottom{border-top-color:var(--khfest-accent,#FF9933)}
/* Generic (birthdays / jayantis / punyatithis / world days): the loader
prints ONLY --khfest-a / --khfest-b / --khfest-text / --khfest-accent
for generic - there is no --khfest-deep - so the footer gradient runs
in the event's own two colours and the planes take the second one. */
html[data-khfest="generic"] .footer-section{background-image:linear-gradient(180deg,var(--khfest-a,#FF9933),var(--khfest-b,#138808))}
html[data-khfest="generic"] .footer-section::before,html[data-khfest="generic"] .footer-section::after{background-color:var(--khfest-b,#138808)}
/* Gandhi: --khfest-a is a light parchment that would wash out the white
footer text, so its footer stays the flat deep tone (headings keep
the accent, exactly as v1.2 behaved). */
html[data-khfest="gandhi"] .footer-section{background-image:none}
/* Rajyotsava (Karnataka): red body, a YELLOW band across the top of
the footer, darker-red diagonal planes, yellow headings - the same
yellow-over-red treatment as its banner. Its palette accent IS red,
which is invisible on the red footer, hence the explicit yellows. */
html[data-khfest="rajyotsava"] .footer-section{background-color:#8d1007;background-image:linear-gradient(180deg,#f9c300 0 12px,#d92323 12px,#8d1007 130px,#8d1007)}
html[data-khfest="rajyotsava"] .footer-section::before,html[data-khfest="rajyotsava"] .footer-section::after{background-color:#6d0a04}
html[data-khfest="rajyotsava"] .footer-top .widget-title{color:#f9c300}
html[data-khfest="rajyotsava"] .footer-section a:hover{color:#f9c300}
html[data-khfest="rajyotsava"] .small-post-item .post-date{color:#f9c300}
html[data-khfest="rajyotsava"] .footer-bottom{border-top-color:#f9c300}
/* Republic: its accent green (#138808) is ~2:1 on its own deep navy
footer, so headings/dates take the skin's other flag colour,
saffron (--khfest-b #FF9933), which the palette already carries. */
html[data-khfest="republic"] .footer-top .widget-title{color:#FF9933}
html[data-khfest="republic"] .small-post-item .post-date{color:#FF9933}
/* ============================================================
FESTIVAL SHOWCASE BAND [KH-FESTBAND v1.5]
A celebration block the loader injects as the FIRST CHILD of
.footer-top, only while a festival skin is active (any route:
auto / manual / temporary / preview). It fills the footer's
empty space with the active event's picture, name, date and
greeting, plus a row of the skin's motifs.
MARKUP CONTRACT for the loader (classes styled below):
The band is NEW injected content, so its own padding / flex
layout is its own geometry - no rule here touches the layout
of any pre-existing footer element. Decorative layers
(shimmer, motifs) are pointer-events:none; the text stays
selectable. FOOTER-ONLY EFFECT: the motifs softly glow
(opacity + drop-shadow pulse, staggered), the picture ring
pulses, and a slow shimmer sweeps the band background -
all of it stops under prefers-reduced-motion.
============================================================ */
html[data-khfest] .kh-fest-footer-band{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;text-align:center;padding:18px 16px 16px;margin-bottom:18px;border-radius:10px;color:#ffffff;background:linear-gradient(135deg,var(--khfest-a,#FF9933),var(--khfest-deep,#1f2937));box-shadow:inset 0 2px 0 var(--khfest-accent,#FF9933),inset 0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.22)}
html[data-khfest] .kh-fest-footer-band::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.14) 54%,transparent 68%);background-size:250% 100%;background-position:130% 0;animation:khffb-shimmer 7s ease-in-out infinite;pointer-events:none}
html[data-khfest] .kh-fest-footer-band>*{position:relative;z-index:1}
html[data-khfest] .khffb-img{flex:0 0 auto;width:230px;height:130px;object-fit:cover;border-radius:10px;border:3px solid var(--khfest-accent,#FF9933);box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.35);animation:khffb-ringpulse 3.2s ease-in-out infinite alternate}
html[data-khfest] .khffb-photo{flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:50%;border:3px solid var(--khfest-accent,#FF9933);box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.35);animation:khffb-ringpulse 3.2s ease-in-out infinite alternate}
html[data-khfest] .khffb-main{position:relative;z-index:2;flex:1 1 240px;min-width:220px;text-align:left}
html[data-khfest] .khffb-title{font-size:23px;font-weight:800;letter-spacing:.4px;line-height:1.3;text-transform:uppercase;color:var(--khfest-accent,#FF9933);text-shadow:0 1px 3px rgba(0,0,0,.45)}
html[data-khfest] .khffb-date{margin-top:3px;font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.85)}
html[data-khfest] .khffb-about{margin:7px 0 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.93)}
html[data-khfest] .khffb-motifs{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:13px;pointer-events:none}
html[data-khfest] .khffb-m{display:inline-block;position:relative;width:20px;height:20px;animation:khffb-glow 2.8s ease-in-out infinite alternate}
html[data-khfest] .khffb-m:nth-child(2n){animation-delay:.7s}
html[data-khfest] .khffb-m:nth-child(3n){animation-delay:1.3s}
html[data-khfest] .khffb-m>i{display:block;position:relative;width:100%;height:100%}
/* band motifs (same drawings as the falling layer, standing still) */
html[data-khfest] .khffb-m-diya{width:22px;height:17px}
html[data-khfest] .khffb-m-diya>i::before{content:"";position:absolute;left:0;bottom:0;width:22px;height:11px;border-radius:2px 2px 50% 50%/2px 2px 100% 100%;background:radial-gradient(ellipse at 50% 0%,#ffb300 0%,#b45309 62%,#78350f 100%)}
html[data-khfest] .khffb-m-diya>i::after{content:"";position:absolute;left:50%;bottom:8px;width:6px;height:10px;margin-left:-3px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 78%,#fff7cc 0%,#ffd54f 42%,#ff8f00 100%);transform-origin:50% 100%;animation:khfest-flick .55s ease-in-out infinite alternate}
html[data-khfest] .khffb-m-flag>i{border-radius:2px;background:linear-gradient(180deg,#f9c300 0 50%,#e31e24 50% 100%);box-shadow:0 1px 3px rgba(0,0,0,.28);animation:khfest-wave .9s ease-in-out infinite alternate}
html[data-khfest] .khffb-m-indflag>i{border-radius:2px;background:linear-gradient(180deg,#FF9933 0 33.3%,#ffffff 33.3% 66.6%,#138808 66.6% 100%);box-shadow:0 1px 3px rgba(0,0,0,.28);animation:khfest-wave .9s ease-in-out infinite alternate}
html[data-khfest] .khffb-m-indflag>i>b{position:absolute;left:50%;top:50%;width:38%;height:38%;box-sizing:border-box;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #000080;background:repeating-conic-gradient(#000080 0deg 5deg,transparent 5deg 15deg)}
html[data-khfest] .khffb-m-sparkle>i{background:radial-gradient(circle,#fff3c4 0%,#ffd54f 55%,rgba(255,213,79,0) 78%);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:khfest-twinkle 1.1s ease-in-out infinite alternate}
html[data-khfest] .khffb-m-snow>i{border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,255,255,.75) 60%,rgba(255,255,255,0) 100%);filter:blur(.5px)}
html[data-khfest] .khffb-m-powder>i{border-radius:50%;background:#ec407a}
html[data-khfest] .khffb-motifs .khffb-m-powder:nth-child(4n+2)>i{background:#66bb6a}
html[data-khfest] .khffb-motifs .khffb-m-powder:nth-child(4n+3)>i{background:#ffb300}
html[data-khfest] .khffb-motifs .khffb-m-powder:nth-child(4n)>i{background:#ab47bc}
html[data-khfest] .khffb-m-kite>i{animation:khfest-kiterock 1.6s ease-in-out infinite alternate}
html[data-khfest] .khffb-m-kite>i::before{content:"";position:absolute;inset:2px;background:linear-gradient(135deg,#ff6f00 0 50%,#0288d1 50% 100%);border-radius:2px;transform:rotate(45deg)}
html[data-khfest] .khffb-m-kite>i::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:#ff4081;clip-path:polygon(50% 100%,0 0,100% 0)}
html[data-khfest] .khffb-m-marigold>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,#ffca28,#fb8c00 70%,#e65100);animation:khfest-flutter 2.6s ease-in-out infinite}
html[data-khfest] .khffb-m-goldpetal>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,#ffe082,#f59e0b 70%,#b45309);animation:khfest-flutter 2.6s ease-in-out infinite}
html[data-khfest] .khffb-m-leaf>i{border-radius:0 62% 0 62%;background:linear-gradient(135deg,#66bb6a,#2e7d32);animation:khfest-flutter 2.6s ease-in-out infinite}
html[data-khfest] .khffb-m-crescent>i::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:3.5px 1.5px 0 0 #ffca28}
html[data-khfest] .khffb-m-petal>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,rgba(255,252,240,.95),rgba(239,230,207,.7));animation:khfest-flutter 2.6s ease-in-out infinite}
html[data-khfest] .khffb-m-sparkdot>i{border-radius:50%;background:var(--khfest-a,#FF9933)}
html[data-khfest] .khffb-motifs .khffb-m-sparkdot:nth-child(even)>i{background:var(--khfest-b,#138808)}
/* band per-skin paint (mirrors the footer treatments above) */
html[data-khfest="generic"] .kh-fest-footer-band{background:linear-gradient(135deg,var(--khfest-a,#FF9933),var(--khfest-b,#138808))}
html[data-khfest="rajyotsava"] .kh-fest-footer-band{background:linear-gradient(180deg,#f9c300 0 16px,#d92323 16px,#8d1007 100%)}
html[data-khfest="rajyotsava"] .khffb-title{color:#f9c300}
html[data-khfest="republic"] .khffb-title{color:#FF9933}
html[data-khfest="christmas"] .khffb-title{color:#ffffff}
html[data-khfest="sankranti"] .khffb-title{color:#ffffff}
html[data-khfest="gandhi"] .kh-fest-footer-band{background:linear-gradient(135deg,#8d6e63,#5d4037)}
html[data-khfest="gandhi"] .khffb-title{color:#ffffff}
@keyframes khffb-shimmer{0%{background-position:130% 0}55%,100%{background-position:-130% 0}}
@keyframes khffb-glow{from{opacity:.75;filter:drop-shadow(0 0 2px rgba(255,255,255,.20))}to{opacity:1;filter:drop-shadow(0 0 8px var(--khfest-accent,#FF9933))}}
@keyframes khffb-ringpulse{from{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.35)}to{box-shadow:0 0 0 4px var(--khfest-accent,#FF9933),0 8px 26px rgba(0,0,0,.42)}}
/* <=640px (v1.4): a TIGHT HORIZONTAL CARD - picture fixed at
96x72 (never full-width), portrait 56x56, small text, the
motif row shrunk to a slim line under the text. No forced
min-height and no stacked empty gap: on phones the band is
a compact strip, not a poster.
v1.5: padding-top is 24px (was 10px) so the text column
starts fully BELOW the band gradient's top strip on every
skin, and Rajyotsava's yellow strip shrinks to 10px here -
together with the title's line-height 1.3 and dark
text-shadow this ends the sliced-title look. */
@media (max-width:640px){
html[data-khfest] .kh-fest-footer-band{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;gap:8px 11px;padding:24px 12px 12px;margin-bottom:12px;border-radius:9px}
html[data-khfest="rajyotsava"] .kh-fest-footer-band{background:linear-gradient(180deg,#f9c300 0 10px,#d92323 10px,#8d1007 100%)}
html[data-khfest] .khffb-img{width:96px;height:72px;border-width:2px}
html[data-khfest] .khffb-photo{width:56px;height:56px;border-width:2px}
html[data-khfest] .khffb-main{flex:1 1 0;min-width:0;text-align:left}
html[data-khfest] .khffb-title{font-size:17px}
html[data-khfest] .khffb-date{font-size:12px;margin-top:2px}
html[data-khfest] .khffb-about{font-size:13px;line-height:1.45;margin-top:5px}
html[data-khfest] .khffb-motifs{flex:1 1 100%;gap:9px;justify-content:flex-start}
html[data-khfest] .khffb-m{width:15px;height:15px}
html[data-khfest] .khffb-m-diya{width:17px;height:13px}
html[data-khfest] .khffb-m-diya>i::before{width:17px;height:9px}
html[data-khfest] .khffb-m-diya>i::after{bottom:6px;width:5px;height:8px;margin-left:-2.5px}
}
@media (prefers-reduced-motion:reduce){
html[data-khfest] .kh-fest-footer-band::before,html[data-khfest] .khffb-img,html[data-khfest] .khffb-photo,html[data-khfest] .khffb-m,html[data-khfest] .khffb-m>i,html[data-khfest] .khffb-m>i::before,html[data-khfest] .khffb-m>i::after{animation:none}
}
/* ---------- Reader toolbar accents (COLOURS ONLY - no geometry) ---------- */
html[data-khfest] .navstick{background-color:var(--khfest-deep,#1f2937);background-image:none}
html[data-khfest] .navstick .breadcrumb-item.active{color:var(--khfest-accent,#FF9933)}
html[data-khfest] .dd-button{border-color:var(--khfest-accent,#FF9933)}
html[data-khfest] .custom-pagination .page-link,html[data-khfest] .custom-pagination-m .page-link{background-color:var(--khfest-a,#FF9933);color:var(--khfest-text,#ffffff);border-color:transparent}
html[data-khfest] .custom-pagination .page-item.active .page-link,html[data-khfest] .custom-pagination-m .page-item.active .page-link{background:var(--khfest-accent,#FF9933);color:var(--khfest-text,#ffffff)}
html[data-khfest] .navigation-btn{background:var(--khfest-accent,#FF9933);color:var(--khfest-text,#ffffff)}
html[data-khfest] #croppertool{background-color:var(--khfest-accent,#FF9933);border-color:var(--khfest-accent,#FF9933);color:var(--khfest-text,#ffffff)}
html[data-khfest] #btnlarge{background-color:var(--khfest-b,#138808);color:var(--khfest-text,#ffffff)}
html[data-khfest] .cal_outer{background:var(--khfest-accent,#FF9933)}
html[data-khfest] .cal_outer a{color:var(--khfest-text,#ffffff)}
html[data-khfest] h4.titleTag{background:var(--khfest-accent,#FF9933);color:var(--khfest-text,#ffffff)}
html[data-khfest] .side-thumb .thumtitle{background:var(--khfest-accent,#FF9933);color:var(--khfest-text,#ffffff)}
html[data-khfest] .m-pagination-bar{background-color:var(--khfest-deep,#1f2937);color:var(--khfest-text,#ffffff)}
html[data-khfest] .btn-sq-share{border-color:var(--khfest-accent,#FF9933);color:var(--khfest-accent,#FF9933)}
/* ============================================================
FALLING FESTIVAL EFFECTS v1.2 [KH-FESTFX v1.2]
The wow layer: while a festival skin is active (any route -
preview / temporary activation / manual / auto), the loader
prints ONE small script that builds this overlay: a fixed,
full-screen container with falling motif spans, drawn in
pure CSS (no images, no emoji). The motifs drift down like
snow - gently, in the background of the reading experience.
v1.2 STRUCTURE (the orientation fix): every span is only a
falling CARRIER; the motif itself is drawn on an INNER
inside the span, and the inner carries its own small
animation. Motifs that must stay upright - diyas, flags,
kites, birthday photo cards - fall with khfest-fall-straight
/ khfest-fall-drift, which contain NO rotation at all: a
diya never turns upside down, only its flame flickers (on
the inner), and a flag flutters on the inner khfest-wave
animation instead of tumbling as one stiff element.
Independence Day and Republic Day fly the INDIAN FLAG
(.khfest-fx-indflag: saffron / white / green with the
Ashoka Chakra on an inner ) - the v1.1 tricolour
confetti is retired. Birthday / jayanti events with an
uploaded photo get .khfest-fx-photo cards (the loader
builds ![]()
spans for those).
SAFETY RULES (never break these):
- the container AND every span are pointer-events:none, so
the layer can NEVER intercept a click or a tap;
- the container is position:fixed, so it can NEVER affect
layout, spacing or scrolling of the page;
- animations use transform / opacity ONLY;
- on small screens only 8 motifs show;
- the loader builds NOTHING for visitors who prefer
reduced motion.
All rules below are additive and scoped under .khfest-fx;
no rule above this section is changed by v1.2.
============================================================ */
.khfest-fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9998}
.khfest-fx>span{position:absolute;top:0;left:var(--x,50%);display:block;pointer-events:none;opacity:0;animation:khfest-fall var(--d,10s) linear var(--delay,0s) infinite;will-change:transform,opacity}
.khfest-fx>span>i{display:block;position:relative;width:100%;height:100%;pointer-events:none}
@keyframes khfest-fall{0%{transform:translate3d(0,-10vh,0) rotate(0deg) scale(var(--s,1));opacity:0}8%{opacity:.85}50%{transform:translate3d(1.6vw,50vh,0) rotate(160deg) scale(var(--s,1))}92%{opacity:.85}100%{transform:translate3d(-1.2vw,110vh,0) rotate(330deg) scale(var(--s,1));opacity:0}}
@keyframes khfest-fall-straight{0%{transform:translate3d(0,-10vh,0) scale(var(--s,1));opacity:0}8%{opacity:.88}25%{transform:translate3d(6px,25vh,0) scale(var(--s,1))}50%{transform:translate3d(-6px,50vh,0) scale(var(--s,1))}75%{transform:translate3d(6px,75vh,0) scale(var(--s,1))}92%{opacity:.88}100%{transform:translate3d(0,110vh,0) scale(var(--s,1));opacity:0}}
@keyframes khfest-fall-drift{0%{transform:translate3d(0,-10vh,0) scale(var(--s,1));opacity:0}8%{opacity:.9}30%{transform:translate3d(4vw,32vh,0) scale(var(--s,1))}55%{transform:translate3d(-3.4vw,58vh,0) scale(var(--s,1))}80%{transform:translate3d(3vw,84vh,0) scale(var(--s,1))}92%{opacity:.9}100%{transform:translate3d(-1vw,110vh,0) scale(var(--s,1));opacity:0}}
@keyframes khfest-wave{from{transform:rotate(-4deg) skewY(-5deg)}to{transform:rotate(4deg) skewY(5deg)}}
@keyframes khfest-flick{from{transform:scaleY(.88) skewX(-2deg)}to{transform:scaleY(1.13) skewX(2deg)}}
@keyframes khfest-twinkle{from{transform:rotate(0deg) scale(.82)}to{transform:rotate(90deg) scale(1.15)}}
@keyframes khfest-kiterock{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes khfest-flutter{from{transform:rotateY(0deg) rotate(-8deg)}to{transform:rotateY(360deg) rotate(8deg)}}
@media (max-width:600px){.khfest-fx>span:nth-child(n+9){display:none}}
/* ---------- DIYA (Deepavali) - falls STRAIGHT, only the flame flickers ---------- */
.khfest-fx>span.khfest-fx-diya{width:15px;height:12px;animation-name:khfest-fall-straight}
.khfest-fx>span.khfest-fx-diya>i::before{content:"";position:absolute;left:0;bottom:0;width:15px;height:8px;border-radius:2px 2px 50% 50%/2px 2px 100% 100%;background:radial-gradient(ellipse at 50% 0%,#ffb300 0%,#b45309 62%,#78350f 100%)}
.khfest-fx>span.khfest-fx-diya>i::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:8px;margin-left:-2.5px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 78%,#fff7cc 0%,#ffd54f 42%,#ff8f00 100%);transform-origin:50% 100%;animation:khfest-flick .55s ease-in-out infinite alternate}
/* ---------- KARNATAKA FLAG (Rajyotsava) - yellow over red, waving on the inner ---------- */
.khfest-fx>span.khfest-fx-flag{width:20px;height:13px;animation-name:khfest-fall-straight}
.khfest-fx>span.khfest-fx-flag>i{border-radius:2px;background:linear-gradient(180deg,#f9c300 0 50%,#e31e24 50% 100%);box-shadow:0 1px 3px rgba(0,0,0,.28);animation:khfest-wave .9s ease-in-out infinite alternate}
/* ---------- INDIAN FLAG (Independence / Republic + national days) - tricolour + Ashoka Chakra, waving ---------- */
.khfest-fx>span.khfest-fx-indflag{width:22px;height:15px;animation-name:khfest-fall-straight}
.khfest-fx>span.khfest-fx-indflag>i{border-radius:2px;background:linear-gradient(180deg,#FF9933 0 33.3%,#ffffff 33.3% 66.6%,#138808 66.6% 100%);box-shadow:0 1px 3px rgba(0,0,0,.28);animation:khfest-wave .9s ease-in-out infinite alternate}
.khfest-fx>span.khfest-fx-indflag>i>b{position:absolute;left:50%;top:50%;width:38%;height:38%;box-sizing:border-box;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #000080;background:repeating-conic-gradient(#000080 0deg 5deg,transparent 5deg 15deg)}
/* ---------- PHOTO CARDS (birthdays / jayantis with an uploaded photo) ---------- */
.khfest-fx>span.khfest-fx-photo{width:44px;height:44px;animation-name:khfest-fall-straight}
.khfest-fx>span.khfest-fx-photo>i>img{display:block;width:40px;height:40px;object-fit:cover;margin:0 auto;border:2px solid #ffd54f;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.35);background:#ffffff}
/* ---------- SPARKLE (New Year) - 4-point gold star, twinkling on the inner ---------- */
.khfest-fx>span.khfest-fx-sparkle{width:13px;height:13px}
.khfest-fx>span.khfest-fx-sparkle>i{background:radial-gradient(circle,#fff3c4 0%,#ffd54f 55%,rgba(255,213,79,0) 78%);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:khfest-twinkle 1.1s ease-in-out infinite alternate}
/* ---------- SNOW (Christmas) - soft blurred flakes ---------- */
.khfest-fx>span.khfest-fx-snow{width:9px;height:9px}
.khfest-fx>span.khfest-fx-snow>i{border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,255,255,.75) 60%,rgba(255,255,255,0) 100%);filter:blur(.5px)}
/* ---------- POWDER DOTS (Holi) - cycling festival colours ---------- */
.khfest-fx>span.khfest-fx-powder{width:10px;height:10px}
.khfest-fx>span.khfest-fx-powder>i{border-radius:50%;background:#ec407a}
.khfest-fx>span.khfest-fx-powder:nth-child(4n+2)>i{background:#66bb6a}
.khfest-fx>span.khfest-fx-powder:nth-child(4n+3)>i{background:#ffb300}
.khfest-fx>span.khfest-fx-powder:nth-child(4n)>i{background:#ab47bc}
/* ---------- KITE (Sankranti) - diamond + tail, wide drift, rocking on the inner ---------- */
.khfest-fx>span.khfest-fx-kite{width:16px;height:16px;animation-name:khfest-fall-drift}
.khfest-fx>span.khfest-fx-kite>i{animation:khfest-kiterock 1.6s ease-in-out infinite alternate}
.khfest-fx>span.khfest-fx-kite>i::before{content:"";position:absolute;inset:2px;background:linear-gradient(135deg,#ff6f00 0 50%,#0288d1 50% 100%);border-radius:2px;transform:rotate(45deg)}
.khfest-fx>span.khfest-fx-kite>i::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:#ff4081;clip-path:polygon(50% 100%,0 0,100% 0)}
/* ---------- MARIGOLD PETALS (Ganesha + birthdays without a photo) ---------- */
.khfest-fx>span.khfest-fx-marigold{width:11px;height:9px}
.khfest-fx>span.khfest-fx-marigold>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,#ffca28,#fb8c00 70%,#e65100);animation:khfest-flutter 2.6s ease-in-out infinite}
.khfest-fx>span.khfest-fx-marigold:nth-child(even)>i{background:radial-gradient(circle at 35% 35%,#ffe082,#ffb300 70%,#ff8f00)}
/* ---------- GOLD PETALS (Dussehra) ---------- */
.khfest-fx>span.khfest-fx-goldpetal{width:11px;height:9px}
.khfest-fx>span.khfest-fx-goldpetal>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,#ffe082,#f59e0b 70%,#b45309);animation:khfest-flutter 2.6s ease-in-out infinite}
/* ---------- GREEN LEAVES (Ugadi) - neem-mango leaves ---------- */
.khfest-fx>span.khfest-fx-leaf{width:13px;height:9px}
.khfest-fx>span.khfest-fx-leaf>i{border-radius:0 62% 0 62%;background:linear-gradient(135deg,#66bb6a,#2e7d32);animation:khfest-flutter 2.6s ease-in-out infinite}
.khfest-fx>span.khfest-fx-leaf:nth-child(even)>i{background:linear-gradient(135deg,#9ccc65,#558b2f)}
/* ---------- CRESCENTS + STARS (Eid skin - selectable manually) ---------- */
.khfest-fx>span.khfest-fx-crescent{width:13px;height:13px}
.khfest-fx>span.khfest-fx-crescent>i::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:3.5px 1.5px 0 0 #ffca28}
.khfest-fx>span.khfest-fx-crescent:nth-child(even)>i::before{inset:auto;left:3px;top:3px;width:8px;height:8px;border-radius:0;box-shadow:none;background:#ffd54f;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
/* ---------- WHITE PETALS (Gandhi skin) - very subtle ---------- */
.khfest-fx>span.khfest-fx-petal{width:11px;height:9px}
.khfest-fx>span.khfest-fx-petal>i{border-radius:60% 40% 60% 40%;background:radial-gradient(circle at 35% 35%,rgba(255,252,240,.95),rgba(239,230,207,.7));animation:khfest-flutter 2.6s ease-in-out infinite}
/* ---------- SPARKLE DOTS (Generic + all other days) - the event's own colours ---------- */
.khfest-fx>span.khfest-fx-sparkdot{width:9px;height:9px}
.khfest-fx>span.khfest-fx-sparkdot>i{border-radius:50%;background:var(--khfest-a,#FF9933)}
.khfest-fx>span.khfest-fx-sparkdot:nth-child(even)>i{background:var(--khfest-b,#138808)}
.khfest-fx>span.khfest-fx-sparkdot:nth-child(3n){width:12px;height:12px}
.khfest-fx>span.khfest-fx-sparkdot:nth-child(3n)>i{border-radius:0;background:var(--khfest-a,#FF9933);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}