/* ==========================================================================
Lokmanya Tilak Ganesh Utsav 2026 — Shared Stylesheet
========================================================================== */
/* Self-hosted fonts — same-origin, no Google round-trip, near-zero flash. */
@font-face{
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/anton-latin-400.woff2') format('woff2');
}
@font-face{
font-family: 'DM Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/dmsans-latin-var.woff2') format('woff2');
}
:root{
/* Festive palette */
--saffron: #F4841E;
--saffron-dark: #D96D0C;
--maroon: #7A1128;
--maroon-dark: #52091B;
--gold: #C9992D;
--gold-light: #E8C767;
--green: #3F7D45;
--cream: #FAF3E2;
--cream-dark: #F0E2C4;
--paper: #FBF6EA;
--ink: #2E1A0F;
--ink-soft: #6B5842;
--white: #FFFFFF;
--font-display: 'Anton', sans-serif;
--font-body: 'DM Sans', sans-serif;
--radius: 14px;
--radius-sm: 8px;
--shadow-soft: 0 10px 30px rgba(46, 26, 15, 0.10);
--shadow-card: 0 6px 18px rgba(46, 26, 15, 0.12);
--header-h: 116px;
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background-color: #FFFDF3;
/* Light warm-white paper, matching the header tone. The top layer is a
feDiffuseLighting relief map (turbulence used as a bump map, lit from
one side) so folds catch light/shadow like real crumpled paper. It's
blended with soft-light rather than multiply — multiply can only ever
darken (so the average tone kept drifting tan/beige, away from the
header's near-white), while soft-light is symmetric around neutral
gray: highlights lighten, shadows darken, and the overall average
color stays put, matching the header — only the local contrast (the
texture itself) becomes visible. */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='crumple' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='5' seed='11' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' surfaceScale='4.5' diffuseConstant='1' lighting-color='%23ffffff' result='light'%3E%3CfeDistantLight azimuth='235' elevation='62'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='light' type='matrix' values='0.34 0 0 0 0.33 0 0.34 0 0 0.33 0 0 0.34 0 0.33 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23crumple)'/%3E%3C/svg%3E"),
radial-gradient(circle at 0% 0%, rgba(74,58,32,0.07), transparent 32%),
radial-gradient(circle at 100% 100%, rgba(74,58,32,0.06), transparent 32%),
radial-gradient(circle at 100% 0%, rgba(74,58,32,0.04), transparent 28%),
radial-gradient(circle at 0% 100%, rgba(74,58,32,0.04), transparent 28%),
radial-gradient(ellipse 140% 120% at 50% 50%, transparent 65%, rgba(74,58,32,0.05) 100%),
radial-gradient(ellipse 26% 18% at 22% 28%, rgba(120,95,55,0.06), transparent 70%),
radial-gradient(ellipse 22% 16% at 76% 62%, rgba(120,95,55,0.05), transparent 70%),
radial-gradient(ellipse 18% 14% at 58% 18%, rgba(120,95,55,0.045), transparent 70%),
radial-gradient(ellipse 20% 15% at 38% 82%, rgba(120,95,55,0.05), transparent 70%);
background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal;
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display{
font-family: var(--font-display);
color: var(--maroon);
line-height: 1.05;
margin: 0 0 .45em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .01em;
}
h1{ font-size: clamp(2.6rem, 6.8vw, 5.2rem); }
h2{ font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: .02em; }
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
.container{
width: 100%;
/* Capped so content doesn't over-stretch on very wide screens, but still
uses the same edge-hugging padding as the header/hero below the cap —
the hero's own wrapper uses this identical max-width + padding formula
too, so everything stays aligned at any viewport width. */
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 56px);
}
.section{ padding: 72px 0; }
.section--tight{ padding: 48px 0; }
.section--alt{
background: linear-gradient(180deg, rgba(122,17,40,0.04), rgba(122,17,40,0));
}
.section-head{ text-align: center; max-width: 720px; margin: 0 auto 44px; transition: opacity .6s ease, transform .6s ease; }
.eyebrow{
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
font-size: .78rem;
color: var(--saffron-dark);
margin-bottom: 10px;
}
/* Inline-content link style — for links typed inside ACF WYSIWYG fields.
Use class="link-accent" instead of an inline style="" attribute:
TinyMCE strips inline styles on save, but classes survive fine. */
.link-accent{
color: var(--saffron-dark);
font-weight: 700;
}
/* ==========================================================================
Buttons
========================================================================== */
.btn{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px 14px 36px;
border: none;
border-radius: 0;
font-weight: 700;
font-size: .92rem;
text-transform: uppercase;
letter-spacing: .03em;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, clip-path .3s ease;
white-space: nowrap;
overflow: hidden;
isolation: isolate;
/* Same ribbon notch as the header Donate button — a fixed pixel depth
(not a %) so it stays a small flag-tip regardless of button width,
instead of growing huge on wide buttons like btn-block. */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}
.btn::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
opacity: .9;
z-index: 1;
pointer-events: none;
}
.btn::after{
content: "";
position: absolute;
top: 0; bottom: 0; left: -60%;
width: 40%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-20deg);
transition: left .55s ease;
z-index: 2;
pointer-events: none;
}
.btn:hover{
transform: translateY(-2px) scale(1.015);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0px 50%);
}
.btn:hover::after{ left: 130%; }
.btn-primary{
background: linear-gradient(135deg, var(--saffron), var(--gold));
color: var(--white);
box-shadow: 0 10px 22px rgba(244,132,30,0.4);
}
.btn-primary:hover{ box-shadow: 0 14px 28px rgba(244,132,30,0.5); }
/* Flat saffron variant — matches the header Donate button's solid color
exactly, instead of btn-primary's saffron-to-gold gradient. */
.btn-solid{
background: var(--saffron);
color: var(--white);
box-shadow: 0 10px 22px rgba(244,132,30,0.4);
}
.btn-solid:hover{ background: var(--saffron-dark); box-shadow: 0 14px 28px rgba(244,132,30,0.5); }
.btn-outline{
background: var(--white);
border-color: transparent;
color: var(--maroon);
/* `border` paints on the box's original rectangle, but clip-path then
cuts the notch through it — so a real border never reaches that
diagonal edge. drop-shadow operates on the actual clipped silhouette,
so stacking 4 tiny offsets approximates a border that follows the
notch correctly instead of stopping short at it. */
filter:
drop-shadow(2px 0 0 var(--maroon))
drop-shadow(-2px 0 0 var(--maroon))
drop-shadow(0 2px 0 var(--maroon))
drop-shadow(0 -2px 0 var(--maroon));
}
.btn-outline:hover{ background: var(--maroon); color: var(--white); }
.btn-donate{
background: linear-gradient(160deg, var(--maroon), var(--maroon-dark));
color: var(--gold-light);
box-shadow: 0 10px 22px rgba(122,17,40,0.45);
}
.btn-donate:hover{ box-shadow: 0 14px 28px rgba(122,17,40,0.55); }
.btn-sm{ padding: 10px 20px 10px 26px; font-size: .85rem; }
.btn-block{ width: 100%; }
/* Not-yet-linked CTA — keeps the button's look but disables the click/hover
interaction, so it reads as inert rather than a broken link. */
.btn-disabled{ pointer-events: none; opacity: .85; cursor: default; }
/* Forces "Coming Soon" onto its own line only on mobile — a
with
display:none produces no line break at all, so desktop just gets the
normal em-dash-joined phrase on one line. */
.mobile-break{ display: none; }
/* ==========================================================================
Header / Nav
========================================================================== */
.site-header{
position: sticky;
top: 0;
z-index: 500;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(255, 253, 243, 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(122,17,40,0.12);
box-shadow: 0 2px 0 rgba(201,153,45,0.35);
transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* Transparent-over-hero header, used on pages with a full-bleed dark hero image.
Starts transparent with light text; JS adds .scrolled once the user scrolls
past the hero, at which point it becomes the standard cream bar. */
body.has-hero-overlay .site-header{
position: fixed;
left: 0; right: 0; top: 0;
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.has-hero-overlay .site-header .logo{ color: var(--white); }
body.has-hero-overlay .site-header .logo small{ color: rgba(255,255,255,0.68); }
body.has-hero-overlay .site-header .nav-links a{ color: rgba(255,255,255,0.85); }
body.has-hero-overlay .site-header .nav-links a:hover{ color: var(--gold-light); }
body.has-hero-overlay .site-header .nav-links a.active{ color: var(--gold-light); }
body.has-hero-overlay .site-header .nav-toggle span{ background: var(--white); }
body.has-hero-overlay .site-header.scrolled{
background: rgba(255, 253, 243, 0.92);
border-bottom-color: rgba(122,17,40,0.12);
box-shadow: 0 2px 0 rgba(201,153,45,0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.has-hero-overlay .site-header.scrolled .logo{ color: var(--maroon); }
body.has-hero-overlay .site-header.scrolled .logo small{ color: var(--ink-soft); }
body.has-hero-overlay .site-header.scrolled .nav-links a{ color: var(--ink); }
body.has-hero-overlay .site-header.scrolled .nav-links a:hover{ color: var(--maroon); }
body.has-hero-overlay .site-header.scrolled .nav-links a.active{ color: var(--saffron-dark); }
body.has-hero-overlay .site-header.scrolled .nav-toggle span{ background: var(--maroon); }
.nav-wrap{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 56px);
}
.logo{
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--maroon);
flex-shrink: 0;
}
.logo .logo-mark{
width: 100px; height: 100px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.logo small{ display:block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; text-transform: uppercase;}
.nav-links{
justify-self: center;
display: flex;
align-items: center;
gap: clamp(18px, 2.4vw, 34px);
flex-wrap: nowrap;
}
.nav-links a{
position: relative;
padding: 6px 1px;
font-weight: 700;
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
transition: color .2s ease;
}
.nav-links a:hover{ color: var(--maroon); }
.nav-links a.active{ color: var(--saffron-dark); }
.nav-right{ justify-self: end; display: flex; align-items: center; gap: 14px; }
/* ==========================================================================
Language switcher
========================================================================== */
.lang-switch{ position: relative; }
.lang-trigger{
display: flex;
align-items: center;
gap: 6px;
background: var(--white);
border: 1.5px solid rgba(122,17,40,0.15);
padding: 8px 12px;
border-radius: 999px;
font-weight: 700;
font-size: .78rem;
letter-spacing: .03em;
color: var(--maroon);
transition: border-color .2s ease;
}
.lang-trigger:hover{ border-color: rgba(122,17,40,0.35); }
.lang-chevron{
width: 7px; height: 7px;
border-right: 2px solid var(--maroon);
border-bottom: 2px solid var(--maroon);
transform: rotate(45deg);
margin-top: -3px;
transition: transform .2s ease, margin-top .2s ease;
}
.lang-switch.open .lang-chevron{ transform: rotate(-135deg); margin-top: 2px; }
.lang-options{
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
margin: 0;
padding: 6px;
list-style: none;
min-width: 140px;
background: var(--white);
border: 1px solid rgba(122,17,40,0.12);
border-radius: 12px;
box-shadow: 0 16px 34px rgba(46,26,15,0.18);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.lang-switch.open .lang-options{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-option{
padding: 9px 12px;
border-radius: 8px;
font-size: .88rem;
color: var(--ink);
cursor: pointer;
transition: background .15s ease;
}
.lang-option:hover{ background: rgba(244,132,30,0.12); }
.lang-option.active{
background: linear-gradient(135deg, var(--saffron), var(--gold));
color: var(--white);
font-weight: 700;
}
/* On the transparent-over-hero header, match the Donate button's white
text/border until scrolled, same as the rest of the header chrome. */
body.has-hero-overlay .site-header .lang-trigger{
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.35);
color: var(--white);
}
body.has-hero-overlay .site-header .lang-chevron{ border-color: var(--white); }
body.has-hero-overlay .site-header.scrolled .lang-trigger{
background: var(--white);
border-color: rgba(122,17,40,0.15);
color: var(--maroon);
}
body.has-hero-overlay .site-header.scrolled .lang-chevron{ border-color: var(--maroon); }
.header-donate-btn{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
background: var(--saffron);
color: var(--white);
/* Fixed padding in both states — only clip-path/background change on
hover, so the button's box size never changes and the centered nav
next to it (in the grid's flexible middle column) never shifts. */
padding: 13px 24px 13px 30px;
border: none;
border-radius: 0;
font-weight: 700;
font-size: .8rem;
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
/* Same fixed-pixel ribbon notch as .btn, so every CTA on the site — this
one included — shares one consistent button shape/motion language. */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
transition: clip-path .3s ease, background .2s ease;
}
/* Same shine-sweep pseudo-elements as .btn, so hovering this button plays
the identical gradient/sheen animation as every other CTA on the site. */
.header-donate-btn::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%);
opacity: .9;
z-index: 1;
pointer-events: none;
}
.header-donate-btn::after{
content: "";
position: absolute;
top: 0; bottom: 0; left: -60%;
width: 40%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-20deg);
transition: left .55s ease;
z-index: 2;
pointer-events: none;
}
.header-donate-btn:hover{
background: var(--saffron-dark);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0px 50%);
}
.header-donate-btn:hover::after{ left: 130%; }
.header-donate-btn.active{ background: var(--saffron-dark); }
/* CF7 auto-disables the submit button in some cases (e.g. a required
acceptance checkbox un-checking itself on form reset after a
successful send) — without this, a disabled
falls back to inconsistent native browser styling that can look
like it vanished. Keep it clearly visible, just visibly inactive. */
.header-donate-btn:disabled,
.btn:disabled{
opacity: .45;
cursor: not-allowed;
filter: grayscale(.3);
}
.header-donate-btn:disabled:hover{
background: var(--saffron);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}
.nav-toggle{
display: none;
background: none;
border: none;
width: 40px; height: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.nav-toggle span{
width: 24px; height: 2.5px; background: var(--maroon); border-radius: 2px;
}
/* ==========================================================================
Hero
========================================================================== */
/* Mandala watermark motif — available via .motif-mandala for a subtle
temple accent (no longer used on .page-hero bands, removed per request). */
.motif-mandala::before{
content: "";
position: absolute;
top: -110px; right: -110px;
width: 460px; height: 460px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23C9992D' stroke-width='1.2'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='76'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='22'/%3E%3Cline x1='100' y1='4' x2='100' y2='196'/%3E%3Cline x1='4' y1='100' x2='196' y2='100'/%3E%3Cline x1='32' y1='32' x2='168' y2='168'/%3E%3Cline x1='168' y1='32' x2='32' y2='168'/%3E%3Cline x1='100' y1='4' x2='134' y2='38'/%3E%3Cline x1='100' y1='4' x2='66' y2='38'/%3E%3Cline x1='196' y1='100' x2='162' y2='66'/%3E%3Cline x1='196' y1='100' x2='162' y2='134'/%3E%3C/g%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
opacity: .14;
z-index: 0;
pointer-events: none;
animation: spin-slow 120s linear infinite;
}
@keyframes spin-slow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.page-hero .container{ position: relative; z-index: 1; }
.motif-mandala{ position: relative; overflow: hidden; }
.motif-mandala > .container{ position: relative; z-index: 1; }
.motif-mandala--bl::before{ top: auto; right: auto; bottom: -110px; left: -110px; }
.badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .02em;
background: var(--white);
border: 1.5px solid var(--gold);
color: var(--maroon);
box-shadow: var(--shadow-card);
}
.badge.badge-green{ border-color: var(--green); color: var(--green); }
.badge.badge-maroon{ background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); }
.hero-tagline{ line-height: 1.55; }
.hero-cta-row{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* ==========================================================================
Full-bleed image hero (homepage) — header floats transparent on top of it
========================================================================== */
.hero-image-full{
position: relative;
min-height: min(94vh, 800px);
display: flex;
align-items: center;
background-image: url("../img/hero-banner.jpg");
background-size: cover;
background-position: right center;
overflow: hidden;
isolation: isolate;
}
.hero-image-overlay{
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(15,8,4,0.92) 0%, rgba(15,8,4,0.62) 42%, rgba(15,8,4,0.18) 68%, rgba(15,8,4,0) 88%);
z-index: 0;
}
.hero-image-content{
position: relative;
z-index: 1;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding-top: calc(var(--header-h) + 56px);
padding-bottom: 64px;
/* Same max-width + clamp padding formula as .container, so hero copy
lines up exactly with the logo/nav and every section below it, at
any viewport width — instead of drifting apart on wide screens. */
padding-left: clamp(20px, 4vw, 56px);
padding-right: clamp(20px, 4vw, 56px);
}
.hero-copy{
max-width: 720px;
display: flex;
flex-direction: column;
gap: 28px;
}
/* The gap above controls all spacing in the stack — zero out each child's
own margin so nothing adds on top of it and throws the rhythm off.
Scoped with the extra .hero-image-content ancestor so this reliably
outranks the more specific per-child rules below (e.g. .hint-light). */
.hero-image-content .hero-copy > *{ margin-top: 0; margin-bottom: 0; }
.hero-image-content h1{ color: var(--gold-light); text-shadow: 0 6px 28px rgba(0,0,0,.45); }
.hero-image-content .hero-tagline{ color: rgba(255,255,255,0.86); }
.hero-image-content .hint-light{
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold-light);
font-weight: 700;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .06em;
padding: 10px 18px;
border: 1px solid rgba(232,199,103,0.45);
border-radius: 999px;
background: rgba(0,0,0,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
@media (max-width: 980px){
.hero-image-full{ min-height: 88vh; background-position: 92% center; }
.hero-image-overlay{ background: linear-gradient(180deg, rgba(15,8,4,0.55) 0%, rgba(15,8,4,0.88) 55%, rgba(15,8,4,0.96) 100%); }
.hero-image-content{ max-width: 100%; }
}
.placeholder-img{
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
font-weight: 700;
font-size: .95rem;
padding: 20px;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.22), transparent 55%),
linear-gradient(135deg, rgba(0,0,0,0.22), rgba(0,0,0,0.05)),
linear-gradient(135deg, var(--maroon), var(--saffron) 60%, var(--gold) 130%);
box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 50px rgba(0,0,0,0.18);
min-height: 220px;
position: relative;
overflow: hidden;
}
.placeholder-img::before{
content: "🖼";
display: block;
font-size: 1.6rem;
margin-bottom: 8px;
opacity: .85;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.placeholder-img::after{
content: "";
position: absolute;
inset: 12px;
pointer-events: none;
background-repeat: no-repeat;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1,16 L1,1 L16,1' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M6,1 L21,1 L21,16' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M1,6 L1,21 L16,21' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M21,6 L21,21 L6,21' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
background-position: top left, top right, bottom left, bottom right;
background-size: 22px 22px;
opacity: .75;
}
.placeholder-img span{ opacity: .92; line-height: 1.5; position: relative; z-index: 1; }
.placeholder-img.ph-tall{ min-height: 340px; }
.placeholder-img.ph-short{ min-height: 140px; }
.placeholder-img.ph-square{ aspect-ratio: 1/1; min-height: 0; }
.placeholder-img.ph-wide{ aspect-ratio: 16/7; min-height: 0; }
.placeholder-img.ph-green{ background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05)), linear-gradient(135deg, var(--green), #8CB86B 120%); }
.placeholder-img.ph-gold{ background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05)), linear-gradient(135deg, var(--gold), var(--saffron) 120%); }
.placeholder-img:has(.coming-soon-overlay)::before{ display: none; }
.placeholder-img .coming-soon-overlay{
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
padding: 24px;
background: rgba(20,10,5,0.6);
}
.coming-soon-overlay .coming-soon-text{
font-family: var(--font-display);
font-size: clamp(1.5rem, 3.4vw, 2.2rem);
color: var(--gold-light);
text-transform: uppercase;
letter-spacing: .08em;
border: 2px solid var(--gold-light);
padding: 10px 30px;
border-radius: 999px;
}
.coming-soon-overlay .coming-soon-caption{
font-size: .85rem;
font-weight: 700;
color: rgba(255,255,255,0.85);
}
.coming-soon-banner{
display: flex;
align-items: flex-start;
gap: 16px;
background: rgba(201,153,45,0.1);
border: 1px solid rgba(201,153,45,0.35);
border-radius: var(--radius-sm);
padding: 20px 22px;
margin-bottom: 40px;
}
.coming-soon-banner .icon-badge{
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
background: linear-gradient(135deg, var(--gold), var(--saffron));
color: var(--white);
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(201,153,45,.3);
}
.coming-soon-banner strong{
display: block;
font-family: var(--font-display);
text-transform: uppercase;
color: var(--maroon);
font-size: 1rem;
margin-bottom: 4px;
}
.coming-soon-banner p{ margin: 0; }
/* ==========================================================================
Countdown
========================================================================== */
.countdown{
display: flex;
align-items: center;
gap: 16px;
margin-top: 30px;
flex-wrap: wrap;
}
.countdown-sep{
color: var(--gold-light);
font-size: 1rem;
opacity: .55;
line-height: 1;
align-self: center;
margin: 0 -4px;
}
.countdown-item{
position: relative;
background: linear-gradient(165deg, #FFF8E7, #F4E2AE 75%, #E8C767 130%);
border-radius: 10px;
padding: 18px 18px 14px;
min-width: 88px;
text-align: center;
border: 1px solid rgba(122,17,40,0.18);
box-shadow:
0 12px 26px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.7);
overflow: hidden;
}
.countdown-item::before{
content: "";
position: absolute;
top: 8px; left: 50%;
width: 22px; height: 2px;
background: var(--maroon);
transform: translateX(-50%);
border-radius: 2px;
opacity: .55;
}
.countdown-item::after{
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.65), transparent 60%);
pointer-events: none;
}
.countdown-item strong{
position: relative;
z-index: 1;
display: block;
font-family: var(--font-display);
font-size: 2.1rem;
color: var(--maroon);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.countdown-item span{
position: relative;
z-index: 1;
display: block;
margin-top: 6px;
font-size: .66rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--maroon-dark);
font-weight: 700;
opacity: .8;
}
/* ==========================================================================
Stats bar
========================================================================== */
.stats-bar{
background: var(--maroon);
color: var(--white);
padding: 40px 0;
}
.stats-grid{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
text-align: center;
}
.stat-item strong{
display: block;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.3rem);
color: var(--gold-light);
}
.stat-item span{
font-size: .74rem;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .85;
font-weight: 600;
}
/* ==========================================================================
Cards
========================================================================== */
.card-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* ==========================================================================
Instagram media tiles — real video/image files dropped into img/
========================================================================== */
.ig-media-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.ig-media-tile{
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
background: var(--paper);
}
/* Photos stay square-cropped, but reels are tall (9:16) — showing them at
their natural height instead of forcing/cropping to a square. */
.ig-media-tile img{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.ig-media-tile video{
width: 100%;
height: auto;
display: block;
}
.card{
position: relative;
background: var(--paper);
border-radius: var(--radius);
padding: 30px 28px 28px;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, var(--shadow-card);
border: 1px solid rgba(122,17,40,0.08);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, opacity .6s ease;
}
.card::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--saffron), var(--gold) 50%, var(--maroon));
}
.card::after{
content: "";
position: absolute;
top: 14px; right: 14px;
width: 34px; height: 34px;
background-image: radial-gradient(circle, var(--gold) 1.6px, transparent 1.6px);
background-size: 8px 8px;
opacity: .35;
pointer-events: none;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 34px rgba(46,26,15,0.16); }
.card .icon-badge{
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--saffron), var(--gold));
color: var(--white);
margin-bottom: 16px;
box-shadow: 0 6px 14px rgba(244,132,30,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.card h3{ margin-bottom: 8px; }
.card p{ margin-bottom: 0; }
.card-grid > .card:nth-child(even){ transform: translateY(14px); }
.card-grid > .card:nth-child(even):hover{ transform: translateY(8px); }
@media (max-width: 640px){
.card-grid > .card:nth-child(even){ transform: none; }
}
/* ==========================================================================
Mission grid — editorial hairline-bordered cells with a large ghost
numeral instead of an icon badge; reused wherever a card-grid's icon
badges read as too "generic icon card" (About page eco-friendly details,
sculptor credentials, etc).
========================================================================== */
.mission-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
border-top: 1px solid rgba(122,17,40,0.14);
border-left: 1px solid rgba(122,17,40,0.14);
}
.mission-card{
padding: 36px 32px 32px;
border-right: 1px solid rgba(122,17,40,0.14);
border-bottom: 1px solid rgba(122,17,40,0.14);
transition: background .25s ease;
}
.mission-card:hover{ background: rgba(201,153,45,0.06); }
.mission-num{
display: block;
font-family: var(--font-display);
font-size: 2.6rem;
line-height: 1;
color: rgba(201,153,45,0.5);
margin-bottom: 14px;
}
.mission-card h3{ margin-bottom: 10px; }
.mission-card p{ margin-bottom: 0; }
/* ==========================================================================
Mission & Vision merged grid (About page) — 2x2 asymmetric cards: text
tile, dark accent tile, photo+stat tile, text+CTA tile.
========================================================================== */
.mv-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 8px;
}
.mv-tile{
border-radius: 20px;
padding: 34px 32px;
}
.mv-tile--light{
background: #FFFDF3EB;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
justify-content: center;
}
.mv-tile--light h3{ margin-bottom: 12px; }
.mv-tile--light p{ margin-bottom: 0; }
.mv-tile--light .btn, .mv-tile--light .header-donate-btn{ margin-top: 20px; align-self: flex-start; }
.mv-tile--dark{
background: linear-gradient(160deg, var(--saffron), var(--saffron-dark));
box-shadow: 0 16px 32px rgba(244,132,30,0.35);
}
.mv-tile--dark h3{ color: var(--white); margin-bottom: 12px; }
.mv-tile--dark p{ color: rgba(255,255,255,0.9); margin-bottom: 16px; }
.chip--dark{
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.35);
color: var(--white);
}
.mv-tile--photo{
position: relative;
padding: 0;
min-height: 300px;
overflow: hidden;
}
.mv-tile--photo img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mv-tile--photo::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,10,5,0.6) 100%);
}
.mv-stat-bar{
position: absolute;
left: 16px; right: 16px; bottom: 16px;
z-index: 1;
display: flex;
background: linear-gradient(160deg, var(--saffron), var(--saffron-dark));
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}
.mv-stat-bar > div{
flex: 1;
padding: 14px 18px;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.18);
}
.mv-stat-bar > div:last-child{ border-right: none; }
.mv-stat-bar strong{
display: block;
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--white);
}
.mv-stat-bar span{
display: block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
color: rgba(255,255,255,0.82);
}
@media (max-width: 780px){
.mv-grid{ grid-template-columns: 1fr; }
}
.nav-card{
position: relative;
background: var(--white);
border-radius: var(--radius);
padding: 28px 26px 26px;
text-align: left;
box-shadow: var(--shadow-card);
border: 1px solid rgba(122,17,40,0.08);
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .6s ease;
}
.nav-card::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--saffron), var(--gold) 50%, var(--maroon));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.nav-card:hover::before{ transform: scaleX(1); }
.nav-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(46,26,15,0.16); border-color: var(--saffron); }
.nav-card .icon-badge{ margin-bottom: 4px; }
.nav-card .arrow{ font-weight: 700; color: var(--saffron-dark); }
/* ==========================================================================
Page hero (inner pages)
========================================================================== */
.page-hero{
position: relative;
overflow: hidden;
padding: 56px 0 44px;
text-align: center;
background: linear-gradient(180deg, rgba(122,17,40,0.06), transparent);
}
.breadcrumb{
font-size: .8rem;
color: var(--ink-soft);
margin-bottom: 14px;
font-weight: 600;
}
.breadcrumb a{ color: var(--saffron-dark); }
.page-hero p{ max-width: 640px; margin: 0 auto; }
/* Optional full-bleed photo variant for an inner page's .page-hero —
applied only when that page has a hero banner image set in ACF, so
every other inner page is unaffected by default. */
.page-hero--photo{
background-size: cover;
background-position: center;
min-height: min(85vh, 720px);
display: flex;
align-items: center;
}
.page-hero--photo::before{
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,8,4,0.55) 0%, rgba(15,8,4,0.82) 100%);
z-index: 0;
}
.page-hero--photo .container{ position: relative; z-index: 1; width: 100%; }
.page-hero--photo .breadcrumb{ color: rgba(255,255,255,0.75); }
.page-hero--photo .breadcrumb a{ color: var(--gold-light); }
.page-hero--photo .eyebrow{ color: #fff; }
.page-hero--photo h1{ color: var(--gold-light); font-size: clamp(1.8rem, 4.2vw, 3.2rem); text-shadow: 0 6px 28px rgba(0,0,0,.45); }
.page-hero--photo p{ color: rgba(255,255,255,0.88); }
/* ==========================================================================
Tabs (day-wise calendar)
========================================================================== */
.tabs-bar{
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 30px;
scrollbar-width: thin;
}
.tab-btn{
flex-shrink: 0;
background: var(--white);
border: 1.5px solid rgba(122,17,40,0.15);
padding: 10px 18px;
border-radius: 999px;
font-weight: 700;
font-size: .85rem;
color: var(--ink-soft);
transition: border-color .2s ease, transform .15s ease;
}
.tab-btn:hover{ border-color: rgba(122,17,40,0.35); }
.tab-btn.active{
background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
color: var(--white);
border-color: transparent;
box-shadow: 0 8px 18px rgba(122,17,40,0.3);
transform: translateY(-1px);
}
.tab-panel{ display: none; }
.tab-panel.active{ display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(6px);} to{ opacity: 1; transform: translateY(0);} }
/* Editorial hairline layout — a single bordered panel with an internal
divider between the day info and the artist list, rather than the artist
list being individually shadow-boxed .artist-card rows (which read as
generic stacked "cards" rather than one considered piece). */
.day-detail{
display: grid;
grid-template-columns: 1fr 1.6fr;
background: var(--paper);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid rgba(122,17,40,0.1);
}
.day-detail > div:first-child{
padding: 40px 34px;
background: linear-gradient(180deg, rgba(122,17,40,0.035), transparent);
border-right: 1px solid rgba(122,17,40,0.1);
}
.day-detail > div:last-child{ padding: 8px 0; }
.artist-card{
background: none;
border-radius: 0;
padding: 20px 34px;
display: flex;
gap: 16px;
align-items: center;
box-shadow: none;
margin-bottom: 0;
border-bottom: 1px solid rgba(122,17,40,0.08);
transition: background .2s ease;
}
.day-detail .artist-card:last-child{ border-bottom: none; }
.day-detail .artist-card:hover{ background: rgba(201,153,45,0.07); }
.artist-card .placeholder-img{
width: 60px; height: 60px;
min-height: 0;
border-radius: 50%;
font-size: 0;
flex-shrink: 0;
box-shadow: none;
outline: 2px solid rgba(201,153,45,0.4);
outline-offset: 3px;
}
.artist-card .placeholder-img::before{ margin: 0; font-size: 1.2rem; }
.artist-card .placeholder-img::after{ display: none; }
.artist-card h4{ margin: 0 0 2px; font-family: var(--font-body); font-weight: 700; color: var(--ink); }
.artist-card small{ color: var(--saffron-dark); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
/* Mystery/curiosity avatar — lineup cards whose details aren't final yet.
Swaps the usual placeholder-img "picture" icon for a pulsing "?" so the
card reads as an intentional reveal-tease rather than unfinished content. */
.artist-card .placeholder-img.mystery-avatar::before{
content: "?";
font-family: var(--font-display);
font-size: 1.4rem;
margin: 0;
animation: mystery-pulse 2.2s ease-in-out infinite;
}
@keyframes mystery-pulse{
0%, 100%{ opacity: .55; transform: scale(1); }
50%{ opacity: 1; transform: scale(1.15); }
}
.artist-card--mystery h4{ color: var(--ink-soft); font-style: italic; }
.artist-card--solo{ max-width: 420px; margin: 0 auto; }
.tag-celeb{
display: inline-block;
margin-top: 6px;
background: linear-gradient(135deg, var(--gold), var(--saffron));
color: var(--white);
font-size: .68rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
box-shadow: 0 3px 8px rgba(201,153,45,0.4);
}
/* ==========================================================================
Zone / Venue map
========================================================================== */
.map-wrap{
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
background: linear-gradient(160deg, #E9DDBB, #DCCB9C);
aspect-ratio: 16/10;
border: 6px solid var(--white);
}
.zone-hotspot{
position: absolute;
width: 15%;
min-width: 90px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.9);
border: 2px solid var(--saffron);
text-align: center;
font-size: .74rem;
font-weight: 700;
color: var(--maroon);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
transition: transform .15s ease, background .15s ease;
}
.zone-hotspot:hover, .zone-hotspot:focus{
transform: scale(1.08);
background: var(--saffron);
color: var(--white);
z-index: 5;
}
.zone-hotspot .zn{ display:block; font-size: 1.1rem; margin-bottom: 2px; }
.gate-marker{
position: absolute;
background: var(--maroon);
color: var(--gold-light);
font-size: .68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
/* Editorial hairline layout — same premium language as .mission-grid: a
single bordered sheet with dividing rules instead of individually
drop-shadowed cards, and a thin outline-ring icon instead of a solid
filled badge. */
.zone-directory{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
border-top: 1px solid rgba(122,17,40,0.14);
border-left: 1px solid rgba(122,17,40,0.14);
margin-top: 40px;
}
.zone-row{
display: flex;
gap: 16px;
align-items: flex-start;
padding: 26px 24px;
border-right: 1px solid rgba(122,17,40,0.14);
border-bottom: 1px solid rgba(122,17,40,0.14);
transition: background .2s ease;
}
.zone-row:hover{ background: rgba(201,153,45,0.07); }
.zone-row .zn-icon{
width: 44px; height: 44px;
border-radius: 50%;
background: none;
border: 1.5px solid rgba(201,153,45,0.5);
color: var(--maroon);
font-family: var(--font-display);
font-size: .95rem;
letter-spacing: .01em;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.zone-row h4{ margin: 0 0 4px; }
.zone-row p{ margin: 0; }
/* ==========================================================================
Modal
========================================================================== */
.modal-overlay{
position: fixed; inset: 0;
background: rgba(46,26,15,0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.modal-overlay.open{ display: flex; }
.modal-box{
background: var(--paper);
border-radius: var(--radius);
padding: 30px;
max-width: 420px;
width: 100%;
box-shadow: var(--shadow-soft);
position: relative;
}
.modal-close{
position: absolute; top: 14px; right: 16px;
background: none; border: none; font-size: 1.3rem; color: var(--ink-soft);
}
/* ==========================================================================
Timeline (idol making journey)
========================================================================== */
.timeline{ position: relative; padding-left: 30px; }
.timeline::before{
content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
background: var(--gold);
}
.timeline-item{ position: relative; padding-bottom: 34px; transition: opacity .6s ease, transform .6s ease; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
content: ""; position: absolute; left: -30px; top: 4px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--saffron); border: 3px solid var(--paper);
box-shadow: 0 0 0 2px var(--gold);
}
.timeline-item h4{ margin-bottom: 4px; }
.timeline-item p{ margin-bottom: 0; }
/* ==========================================================================
Day schedule — vertical itinerary timeline (time · connecting line ·
activity) used for the daily darshan timings. Replaces a plain bullet
list with something that actually reads as a schedule.
========================================================================== */
.day-schedule{ margin-top: 22px; }
.ds-item{
display: grid;
grid-template-columns: 62px 24px 1fr;
gap: 0 16px;
padding-bottom: 28px;
}
.ds-item:last-child{ padding-bottom: 0; }
.ds-time{
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--maroon);
text-align: right;
line-height: 1.1;
padding-top: 1px;
}
.ds-time span{
display: block;
font-family: var(--font-body);
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--ink-soft);
margin-top: 1px;
}
.ds-marker{ position: relative; display: flex; justify-content: center; }
.ds-marker::before{
content: "";
width: 12px; height: 12px;
border-radius: 50%;
background: var(--saffron);
border: 3px solid var(--paper);
box-shadow: 0 0 0 2px var(--gold);
margin-top: 3px;
position: relative;
z-index: 1;
}
.ds-item:not(:last-child) .ds-marker::after{
content: "";
position: absolute;
top: 20px; bottom: -28px;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: linear-gradient(180deg, var(--gold), rgba(201,153,45,0.18));
}
.ds-content h4{ margin: 0 0 2px; font-size: .98rem; }
.ds-content span{ font-size: .82rem; color: var(--ink-soft); }
.ds-item--break .ds-marker::before{ background: var(--ink-soft); box-shadow: 0 0 0 2px rgba(107,88,66,0.3); }
.ds-item--break .ds-content h4{ color: var(--ink-soft); }
.ds-item--highlight .ds-time{ color: var(--maroon); font-weight: 800; font-size: 1.2rem; }
.ds-item--highlight .ds-marker::before{
width: 16px; height: 16px;
background: var(--maroon);
box-shadow: 0 0 0 4px rgba(122,17,40,0.18);
margin-top: 1px;
}
.ds-item--highlight .ds-content h4{ color: var(--maroon); font-size: 1.1rem; }
.ds-item--highlight .ds-content span{ color: var(--saffron-dark); font-weight: 600; }
/* ==========================================================================
Forms
========================================================================== */
.form-card{
position: relative;
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 46px rgba(46,26,15,0.14);
border: 1px solid rgba(122,17,40,0.08);
transition: opacity .6s ease, transform .6s ease;
}
/* border-radius here (not overflow:hidden on .form-card) keeps the top bar
rounded into the card's corners — overflow:hidden would also clip the
custom-select dropdown list below, since it opens as an absolutely
positioned child that extends past the card's own bottom/sides. */
.form-card::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
border-radius: 20px 20px 0 0;
background: linear-gradient(90deg, var(--saffron), var(--gold) 50%, var(--maroon));
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group{ margin-bottom: 8px; }
.form-group label{
display: block;
font-weight: 700;
font-size: .85rem;
margin-bottom: 6px;
color: var(--maroon);
}
.form-group .hint{ font-size: .76rem; color: var(--ink-soft); font-weight: 400; margin-top: 4px; }
input, select, textarea{
width: 100%;
padding: 13px 16px;
border-radius: 10px;
border: 1.5px solid rgba(122,17,40,0.15);
background: var(--cream);
font-family: inherit;
font-size: .95rem;
color: var(--ink);
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus{
outline: none;
border-color: var(--saffron);
background: var(--white);
box-shadow: 0 0 0 4px rgba(244,132,30,0.15);
}
textarea{ min-height: 100px; resize: vertical; }
/* ==========================================================================
Custom select — replaces the native