/* ==========================================================================
Vadtal Dham - Homepage design system
Scoped to the public homepage only (body.vd-home). Loaded exclusively by
resources/views/web/home/*.blade.php, so no other page is affected.
========================================================================== */
:root {
--vd-primary: #E57D4B;
--vd-primary-dark: #C96538;
--vd-primary-light: #F09A6E;
--vd-primary-tint: #F6C9B0;
--vd-deep: #8A4526;
--vd-gold: #C9954F;
--vd-gold-soft: #E9CFA6;
--vd-hero-gold: #FFB347;
--vd-cream: #FFF8F3;
--vd-warm-white: #FFFCFA;
--vd-soft: #FFF4ED;
--vd-card: #FFFFFF;
--vd-text: #2B2522;
--vd-text-2: #756B66;
/* #9C918B measured 3.07:1 on white and is only ever used at 11-13.5px,
so it is darkened to clear WCAG AA (5.2:1 on white, 4.8:1 on --vd-soft). */
--vd-text-3: #746B65;
--vd-border: #EAD8CE;
--vd-border-soft: #F3E4DA;
/* Surfaces that carry small white text. #E57D4B is the brand fill
(header bar, footer, primary buttons); a slightly deeper shade of the
same hue provides gradient depth. */
--vd-on-dark-1: #E57D4B;
--vd-on-dark-2: #C96538;
--vd-r-xs: 8px;
--vd-r-sm: 12px;
--vd-r-md: 16px;
--vd-r-lg: 22px;
--vd-r-xl: 28px;
--vd-r-pill: 999px;
--vd-sh-xs: 0 1px 2px rgba(43,37,34,.05);
--vd-sh-sm: 0 1px 2px rgba(43,37,34,.05), 0 4px 12px -4px rgba(43,37,34,.10);
--vd-sh-md: 0 2px 6px rgba(43,37,34,.05), 0 14px 32px -14px rgba(138,69,38,.22);
--vd-sh-lg: 0 4px 12px rgba(43,37,34,.06), 0 30px 64px -28px rgba(138,69,38,.32);
--vd-ease: cubic-bezier(.22,.61,.36,1);
--vd-t: .28s var(--vd-ease);
--vd-container: 1280px;
--vd-gut: 24px;
--vd-rail-w: 200px;
--vd-figure-h: min(64vh, 560px);
--vd-font: 'Inter', 'Noto Sans Gujarati', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--vd-font-display: 'Poppins', 'Noto Sans Gujarati', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--vd-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--vd-font-guj: 'Noto Sans Gujarati', 'Nirmala UI', 'Shruti', 'Poppins', sans-serif;
}
/* --------------------------------------------------------------------------
Reset / base (this page does not load Bootstrap, so it owns its own reset)
-------------------------------------------------------------------------- */
.vd-home *,
.vd-home *::before,
.vd-home *::after { box-sizing: border-box; }
html.vd-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.vd-home {
margin: 0;
padding: 0;
width: 100%;
/* `clip` keeps the sticky header working; `hidden` is the older fallback
and would turn into a scroll container that breaks it. */
overflow-x: hidden;
overflow-x: clip;
background: var(--vd-warm-white);
color: var(--vd-text);
font-family: var(--vd-font);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Element resets go through :where() so their specificity stays at (0,0,1).
A plain `.vd-home a` would be (0,1,1) and would beat every single-class
component rule below it - e.g. it would repaint .vd-topbar__live white. */
:where(.vd-home) h1, :where(.vd-home) h2, :where(.vd-home) h3,
:where(.vd-home) h4, :where(.vd-home) h5, :where(.vd-home) h6 {
margin: 0;
font-family: var(--vd-font-display);
font-weight: 600;
line-height: 1.25;
color: var(--vd-text);
letter-spacing: -.01em;
}
:where(.vd-home) p { margin: 0; }
:where(.vd-home) ul, :where(.vd-home) ol { margin: 0; padding: 0; list-style: none; }
:where(.vd-home) a { color: inherit; text-decoration: none; transition: color var(--vd-t); }
:where(.vd-home) img { max-width: 100%; height: auto; border: 0; display: block; }
:where(.vd-home) iframe { border: 0; max-width: 100%; }
:where(.vd-home) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.vd-home) input, :where(.vd-home) select, :where(.vd-home) textarea { font: inherit; }
:where(.vd-home) svg { display: block; }
:where(.vd-home) figure { margin: 0; }
.vd-home :focus-visible {
outline: 2px solid var(--vd-primary-dark);
outline-offset: 3px;
}
/* #6: on brand-orange surfaces an orange ring is invisible - invert it. */
.vd-topbar :focus-visible,
.vd-footer :focus-visible,
.vd-card__head :focus-visible,
.vd-rail :focus-visible,
.vd-hero__btn--solid:focus-visible {
outline-color: #fff;
}
.vd-guj { font-family: var(--vd-font-guj); line-height: 1.75; }
.vd-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
Layout primitives
-------------------------------------------------------------------------- */
.vd-container {
width: 100%;
max-width: var(--vd-container);
margin: 0 auto;
padding: 0 var(--vd-gut);
}
.vd-section { padding: 68px 0; position: relative; }
.vd-section--tight { padding: 48px 0; }
.vd-section--cream { background: var(--vd-cream); }
.vd-section--soft { background: var(--vd-soft); }
/* Photo Gallery only: faded event plate on a light ground, a low-opacity
black veil, and a light tray that highlights the card row. */
.vd-section--gallery {
background-color: #EFE8E0;
isolation: isolate;
}
.vd-section--gallery::before {
content: '';
position: absolute;
inset: 0;
background: url('../images/gallery-wash.jpg') center center / cover no-repeat;
opacity: .22;
pointer-events: none;
z-index: 0;
}
.vd-section--gallery::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .12);
pointer-events: none;
z-index: 0;
}
.vd-section--gallery > .vd-container {
position: relative;
z-index: 1;
}
.vd-section--gallery .vd-carousel {
--vd-g-gap: 16px;
--vd-g-arrow: 54px;
--vd-g-cols: 4;
background: var(--vd-primary);
border-radius: var(--vd-r-xl);
padding: 18px var(--vd-g-arrow) 16px;
box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .28);
}
.vd-section--gallery .vd-carousel__track {
gap: var(--vd-g-gap);
padding: 6px 0 8px;
}
.vd-section--gallery .vd-thumb {
flex: 0 0 calc((100% - (var(--vd-g-gap) * (var(--vd-g-cols) - 1))) / var(--vd-g-cols));
width: auto;
max-width: none;
background: #fff;
box-shadow: var(--vd-sh-sm);
}
.vd-section--gallery .vd-carousel__nav {
width: 40px;
height: 40px;
margin: 0;
padding: 0;
background: #fff;
color: var(--vd-primary-dark);
border-color: #fff;
}
.vd-section--gallery .vd-carousel__nav:hover {
background: #fff;
color: var(--vd-primary-dark);
border-color: #fff;
transform: translateY(-50%) scale(1.06);
}
.vd-section--gallery .vd-carousel__nav--prev { left: 7px; }
.vd-section--gallery .vd-carousel__nav--next { right: 7px; }
.vd-sec-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.vd-sec-head__eyebrow {
display: block;
font-family: var(--vd-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--vd-primary-dark);
margin-bottom: 12px;
}
.vd-sec-head__eyebrow.vd-guj {
font-family: var(--vd-font-guj);
letter-spacing: .04em;
text-transform: none;
}
.vd-sec-head h2 {
font-family: var(--vd-font-display);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 700;
color: var(--vd-deep);
letter-spacing: 0;
line-height: 1.2;
}
.vd-sec-head h2.vd-guj {
font-family: var(--vd-font-guj);
font-size: clamp(24px, 3vw, 40px);
color: var(--vd-text);
}
.vd-sec-head .vd-orn { margin-top: 16px; }
.vd-sec-head p {
margin-top: 16px;
color: var(--vd-text-2);
font-size: 15px;
line-height: 1.7;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.vd-orn {
display: flex; align-items: center; justify-content: center;
gap: 12px;
}
/* section-level utilities */
.vd-center-cta { display: flex; justify-content: center; margin-top: 30px; }
.vd-empty {
text-align: center; color: var(--vd-text-3);
font-size: 13.5px; padding: 22px 4px;
}
.vd-orn i {
display: block; height: 2px; width: 72px;
background: linear-gradient(90deg, transparent, var(--vd-primary-tint) 30%, var(--vd-primary));
}
.vd-orn i + i { background: linear-gradient(90deg, var(--vd-primary), var(--vd-primary-tint) 70%, transparent); }
.vd-orn span {
width: 11px; height: 11px; border-radius: 2px;
background: var(--vd-primary); transform: rotate(45deg); flex: 0 0 auto;
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.vd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 12px 24px;
border-radius: var(--vd-r-pill);
font-family: var(--vd-font-display);
font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
line-height: 1; white-space: nowrap; cursor: pointer;
transition: transform var(--vd-t), box-shadow var(--vd-t), background var(--vd-t), color var(--vd-t), border-color var(--vd-t);
}
.vd-btn i { font-size: 13px; }
.vd-btn--primary {
background: linear-gradient(135deg, var(--vd-on-dark-1) 0%, var(--vd-on-dark-2) 100%);
color: #fff;
box-shadow: 0 6px 18px -8px rgba(201,101,56,.75);
}
.vd-btn--primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(201,101,56,.85); }
.vd-btn--ghost {
background: #fff; color: var(--vd-primary-dark);
border: 1px solid var(--vd-border);
box-shadow: var(--vd-sh-xs);
}
.vd-btn--ghost:hover { color: var(--vd-primary-dark); border-color: var(--vd-primary-light); transform: translateY(-2px); box-shadow: var(--vd-sh-sm); }
.vd-btn--light {
background: rgba(255,255,255,.16); color: #fff;
border: 1px solid rgba(255,255,255,.45);
}
.vd-btn--light:hover { background: #fff; color: var(--vd-primary-dark); }
.vd-btn--sm { padding: 9px 18px; font-size: 11.5px; }
.vd-btn--block { display: flex; width: 100%; }
/* --------------------------------------------------------------------------
Top announcement bar
-------------------------------------------------------------------------- */
.vd-topbar {
background: linear-gradient(90deg, var(--vd-on-dark-2) 0%, var(--vd-on-dark-1) 52%, var(--vd-on-dark-2) 100%);
color: #fff;
font-size: 12.5px;
position: relative; z-index: 60;
}
.vd-topbar__in {
display: flex; align-items: center; gap: 16px;
min-height: 40px; padding-top: 5px; padding-bottom: 5px;
}
.vd-topbar__jai {
font-family: var(--vd-font-display); font-weight: 600;
letter-spacing: .04em; white-space: nowrap; color: #fff;
}
.vd-topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.28); flex: 0 0 auto; }
.vd-topbar__item { color: #fff; white-space: nowrap; }
.vd-topbar__item b { font-weight: 600; color: #fff; }
.vd-topbar__spacer { flex: 1 1 auto; }
.vd-topbar__social { display: flex; align-items: center; gap: 6px; }
.vd-topbar__social a {
width: 27px; height: 27px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.15); color: #fff; font-size: 12.5px;
transition: background var(--vd-t), transform var(--vd-t), color var(--vd-t);
}
.vd-topbar__social a:hover { background: #fff; color: var(--vd-primary-dark); transform: translateY(-1px); }
.vd-topbar__live {
display: inline-flex; align-items: center; gap: 7px;
background: #fff; color: var(--vd-primary-dark);
padding: 6px 15px; border-radius: var(--vd-r-pill);
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap;
transition: transform var(--vd-t), box-shadow var(--vd-t);
}
.vd-topbar__live:hover { color: var(--vd-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.vd-dot {
width: 7px; height: 7px; border-radius: 50%; background: #E2402F;
box-shadow: 0 0 0 0 rgba(226,64,47,.7);
animation: vd-pulse 2s infinite;
flex: 0 0 auto;
}
@keyframes vd-pulse {
0% { box-shadow: 0 0 0 0 rgba(226,64,47,.65); }
70% { box-shadow: 0 0 0 7px rgba(226,64,47,0); }
100% { box-shadow: 0 0 0 0 rgba(226,64,47,0); }
}
/* --------------------------------------------------------------------------
Header / navigation
-------------------------------------------------------------------------- */
.vd-header {
background: var(--vd-warm-white);
border-bottom: 1px solid var(--vd-border-soft);
position: sticky; top: 0; z-index: 55;
transition: box-shadow var(--vd-t), background var(--vd-t);
}
.vd-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(138,69,38,.4); }
.vd-header__in { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.vd-brand { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.vd-brand__mark {
width: 210px;
height: auto;
max-height: 58px;
object-fit: contain;
object-position: left center;
flex: 0 0 auto;
}
.vd-nav { margin-left: auto; }
.vd-nav__list {
display: flex; align-items: center; gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.vd-nav__list > li { position: relative; list-style: none; }
.vd-nav__link {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 13px; border-radius: var(--vd-r-xs);
font-family: var(--vd-font-display);
font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--vd-text); white-space: nowrap;
transition: color var(--vd-t), background var(--vd-t);
}
.vd-nav__link .fa { font-size: 10px; opacity: .6; transition: transform var(--vd-t); }
.vd-nav__link:hover { color: var(--vd-primary-dark); background: var(--vd-soft); }
.vd-nav__list > li:hover > .vd-nav__link .fa { transform: rotate(180deg); }
.vd-nav__link.is-active { color: var(--vd-primary-dark); font-weight: 600; }
.vd-nav__link.is-active::after {
content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px;
height: 2px; border-radius: 2px; background: var(--vd-primary);
}
.vd-nav__drop {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 236px; padding: 8px;
margin: 0;
list-style: none;
background: #fff; border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-md); box-shadow: var(--vd-sh-md);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s var(--vd-ease), transform .2s var(--vd-ease), visibility .2s;
z-index: 30;
}
.vd-nav__drop > li { list-style: none; margin: 0; padding: 0; }
.vd-nav__list > li:hover > .vd-nav__drop,
.vd-nav__list > li:focus-within > .vd-nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.vd-nav__drop li a {
display: block; padding: 9px 12px; border-radius: var(--vd-r-xs);
font-size: 13.5px; color: var(--vd-text-2); line-height: 1.4;
transition: background var(--vd-t), color var(--vd-t), padding-left var(--vd-t);
}
.vd-nav__drop li a:hover { background: var(--vd-soft); color: var(--vd-primary-dark); padding-left: 16px; }
.vd-nav__drop--right { left: auto; right: 0; }
.vd-burger {
display: none;
width: 44px; height: 44px; border-radius: var(--vd-r-sm);
align-items: center; justify-content: center;
border: 1px solid var(--vd-border); background: #fff;
color: var(--vd-primary-dark); font-size: 17px;
margin-left: auto; flex: 0 0 auto;
}
/* THE BARS ARE DRAWN HERE, NOT TAKEN FROM THE ICON FONT.
Font Awesome is fetched from cdnjs, and on an install that cannot reach it -
a LAN-only deployment, a blocked CDN, a slow first paint - every .fa glyph
resolves to nothing. Everywhere else on the site that costs an ornament; on
this button it costs the ONLY affordance, leaving a blank white square where
the mobile menu should be, which is exactly how it was reported.
Three bars out of a box-shadow need no font, and font-size:0 hides the glyph
on installs where the CDN did answer so the two cannot double up. */
.vd-burger .fa {
position: relative;
width: 18px; height: 2px;
border-radius: 2px;
background: currentColor;
font-size: 0;
box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.vd-burger .fa::before,
.vd-burger .fa::after { content: none; }
/* Mobile drawer */
.vd-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
background: var(--vd-warm-white);
box-shadow: -20px 0 60px -20px rgba(43,37,34,.4);
transform: translateX(100%);
/* visibility, not just transform: a closed drawer must leave the tab order,
otherwise keyboard users tab into an off-screen menu. */
visibility: hidden;
transition: transform .32s var(--vd-ease), visibility .32s;
z-index: 120; display: flex; flex-direction: column;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.vd-drawer.is-open { transform: translateX(0); visibility: visible; }
.vd-drawer__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 18px; border-bottom: 1px solid var(--vd-border-soft);
position: sticky; top: 0; background: var(--vd-warm-white); z-index: 2;
}
.vd-drawer__head .vd-brand__mark { width: min(200px, calc(100vw - 96px)); max-height: 52px; }
.vd-drawer__close {
width: 38px; height: 38px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vd-soft); color: var(--vd-primary-dark); font-size: 16px;
flex: 0 0 auto;
}
.vd-drawer__body { padding: 10px 12px 26px; }
.vd-drawer__body > ul { list-style: none; margin: 0; padding: 0; }
.vd-drawer__body > ul > li { border-bottom: 1px solid var(--vd-border-soft); list-style: none; }
.vd-drawer__body > ul > li:last-child { border-bottom: 0; }
.vd-drawer__link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 13px 10px; text-align: left;
font-family: var(--vd-font-display);
font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
color: var(--vd-text);
}
.vd-drawer__link.is-active { color: var(--vd-primary-dark); font-weight: 600; }
.vd-drawer__link .fa { font-size: 12px; color: var(--vd-primary); transition: transform var(--vd-t); }
.vd-drawer__link[aria-expanded="true"] .fa { transform: rotate(180deg); }
.vd-drawer__sub { display: none; padding: 0 0 10px 10px; }
.vd-drawer__sub.is-open { display: block; }
.vd-drawer__sub a {
display: block; padding: 9px 10px; border-left: 2px solid var(--vd-border);
font-size: 13.5px; color: var(--vd-text-2);
}
.vd-drawer__sub a:hover { color: var(--vd-primary-dark); border-left-color: var(--vd-primary); }
.vd-drawer__foot { margin-top: 16px; padding: 0 10px; display: grid; gap: 10px; }
.vd-scrim {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
background: rgba(43,37,34,.45);
opacity: 0; visibility: hidden; transition: opacity .3s var(--vd-ease), visibility .3s;
z-index: 110;
}
.vd-scrim.is-open { opacity: 1; visibility: visible; }
body.vd-locked { overflow: hidden; }
/* --------------------------------------------------------------------------
Hero
Centered wordmark between the Thakorji murti (left) and Aacharya Maharaj
(right). The temple photograph sits behind a black transparent overlay.
The six shortcut destinations are a coloured rail on the right. Scoped to
body.vd-home.
-------------------------------------------------------------------------- */
.vd-hero {
position: relative;
overflow: hidden;
background: #1A1A1A;
padding: 4px 0 28px;
isolation: isolate;
}
.vd-hero__watermark {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
overflow: hidden;
background: #1A1A1A;
}
.vd-hero__watermark img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 44%;
display: block;
/* Graded to the reference. The source plate is a bright blue-sky
photograph, and a light sepia could not overcome the blue, so it is
fully warm-toned and then re-saturated before the overlay lands on it. */
transform: scale(1.14);
transform-origin: 50% 44%;
filter: brightness(.72) contrast(1.06) sepia(.85) saturate(1.25) hue-rotate(-8deg);
}
.vd-hero__watermark::after {
content: '';
position: absolute; inset: 0;
/* Vignette: readable centre behind the wordmark, deep corners. Kept neutral
black - the warm tone comes from the sepia grade on the plate beneath, so
tinting the overlay too would push the shadows muddy. */
background:
radial-gradient(118% 88% at 50% 42%,
rgba(0, 0, 0, .16) 0%,
rgba(0, 0, 0, .42) 55%,
rgba(0, 0, 0, .70) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, .36) 0%,
rgba(0, 0, 0, .18) 32%,
rgba(0, 0, 0, .28) 66%,
rgba(0, 0, 0, .58) 100%);
}
.vd-hero > .vd-container {
/* Only pad when the docked rail actually overlaps the centred column. */
padding-right: max(
var(--vd-gut),
calc(var(--vd-rail-w) - (100vw - min(100vw, var(--vd-container))) / 2)
);
}
.vd-hero__grid {
position: relative; z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) minmax(0, 1fr);
grid-template-areas: "deity copy maharaj";
align-items: end;
gap: 8px 16px;
}
/* ------------------------------------------------------------------ copy -- */
.vd-hero__copy {
grid-area: copy;
align-self: center;
text-align: center;
max-width: 540px;
margin: 0 auto;
padding: 8px 8px 8px;
position: relative;
z-index: 4;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.vd-hero__mantra {
margin: 0;
color: var(--vd-hero-gold);
font-size: clamp(13px, 1.15vw, 16px);
font-weight: 600;
letter-spacing: .04em;
text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.vd-hero h1 {
margin: 8px 0 0;
font-family: var(--vd-font-display);
font-size: clamp(40px, 5.2vw, 68px);
font-weight: 700; line-height: 1.05; letter-spacing: .06em;
text-transform: uppercase;
color: var(--vd-hero-gold);
text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.vd-hero h1 span { display: block; color: var(--vd-hero-gold); }
.vd-hero__lead {
margin: 12px auto 0;
font-size: clamp(14.5px, 1.3vw, 16.5px);
color: #FFFFFF; line-height: 1.65; max-width: 520px;
font-weight: 500;
text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.vd-hero__cta {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px;
}
.vd-hero__btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 11px 22px 11px 16px;
border-radius: var(--vd-r-pill);
text-align: left;
line-height: 1.15;
transition: transform var(--vd-t), box-shadow var(--vd-t), background var(--vd-t), color var(--vd-t), border-color var(--vd-t);
}
.vd-hero__btn .fa { font-size: 22px; flex: 0 0 auto; }
.vd-hero__btn b {
display: block;
font-family: var(--vd-font-display);
font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vd-hero__btn small {
display: block; margin-top: 2px;
font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .9;
}
.vd-hero__btn--solid {
background: var(--vd-primary); color: #fff;
box-shadow: 0 10px 22px -8px rgba(229,125,75,.6);
}
.vd-hero__btn--solid:hover { background: var(--vd-primary-dark); color: #fff; transform: translateY(-2px); }
.vd-hero__btn--ghost {
background: #fff; color: var(--vd-primary);
border: 1.5px solid var(--vd-primary);
box-shadow: var(--vd-sh-xs);
}
.vd-hero__btn--ghost:hover { color: var(--vd-primary-dark); border-color: var(--vd-primary-dark); transform: translateY(-2px); }
.vd-hero__figure {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
margin-bottom: -8px;
z-index: 3;
min-width: 0;
}
.vd-hero__figure--deity { grid-area: deity; justify-content: flex-end; padding-right: 4px; }
.vd-hero__figure--maharaj { grid-area: maharaj; justify-content: flex-start; padding-left: 4px; }
/* Left murti only. Height matches Maharaj; width is wide enough for the
group plates (m5/m6 ~0.94) so contain can show the full image — no crop
and no change to the copy column or the right portrait. */
.vd-hero__deity-stage {
position: relative;
width: min(100%, calc(var(--vd-figure-h) * 0.95));
height: var(--vd-figure-h);
max-width: 100%;
max-height: var(--vd-figure-h);
flex: 0 0 auto;
overflow: hidden;
}
.vd-hero__figure--deity .vd-hero__deity {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: var(--vd-figure-h);
object-fit: contain;
object-position: right bottom;
opacity: 0;
transition: opacity .7s var(--vd-ease), transform .6s var(--vd-ease);
}
.vd-hero__figure--deity .vd-hero__deity.is-active { opacity: 1; }
.vd-hero__figure img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: var(--vd-figure-h);
object-fit: contain;
object-position: center bottom;
background: transparent;
transition: transform .6s var(--vd-ease);
}
.vd-hero__figure:hover img { transform: translateY(-8px); }
.vd-hero__maharaj {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* ------------------------------------------------------------------ rail -- */
.vd-rail {
position: absolute;
right: 0;
top: 10px;
bottom: 40px;
z-index: 5;
width: var(--vd-rail-w);
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 0;
padding-right: env(safe-area-inset-right, 0px);
}
.vd-rail__item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) 10px;
align-items: center; gap: 7px;
padding: 8px 10px 8px 8px;
color: #fff;
border-radius: 10px 0 0 10px;
background: linear-gradient(105deg, #A24F2C 0%, #E57D4B 100%);
box-shadow: -4px 4px 12px -6px rgba(90,44,20,.4);
transition: transform var(--vd-t), box-shadow var(--vd-t), filter var(--vd-t);
}
.vd-rail__item > .fa:first-child {
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.2); color: #fff;
font-size: 13px;
}
.vd-rail__item span { min-width: 0; }
.vd-rail__item b {
display: block;
font-family: var(--vd-font-display);
font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
color: #fff; line-height: 1.2;
}
.vd-rail__item small {
display: block; margin-top: 2px;
font-size: 10px; color: rgba(255,255,255,.88); line-height: 1.25;
}
.vd-rail__go { font-size: 12px; color: rgba(255,255,255,.8); }
.vd-rail__item:hover {
transform: translateX(-4px);
filter: brightness(1.06);
color: #fff;
box-shadow: -6px 6px 16px -6px rgba(90,44,20,.48);
}
/* ------------------------------------------------------- entrance motion -- */
.vd-js .vd-hero__copy > *,
.vd-js .vd-hero__figure,
.vd-js .vd-rail__item {
opacity: 0;
transform: translateY(16px);
animation: vd-hero-in .8s var(--vd-ease) forwards;
}
.vd-js .vd-hero__figure { transform: translateY(20px) scale(.985); animation-name: vd-hero-rise; }
.vd-js .vd-hero__copy > *:nth-child(1) { animation-delay: .05s; }
.vd-js .vd-hero__copy > *:nth-child(2) { animation-delay: .12s; }
.vd-js .vd-hero__copy > *:nth-child(3) { animation-delay: .18s; }
.vd-js .vd-hero__copy > *:nth-child(4) { animation-delay: .24s; }
.vd-js .vd-hero__copy > *:nth-child(5) { animation-delay: .30s; }
.vd-js .vd-hero__figure--deity { animation-delay: .14s; }
.vd-js .vd-hero__figure--maharaj { animation-delay: .2s; }
.vd-js .vd-rail__item:nth-child(1) { animation-delay: .34s; }
.vd-js .vd-rail__item:nth-child(2) { animation-delay: .39s; }
.vd-js .vd-rail__item:nth-child(3) { animation-delay: .44s; }
.vd-js .vd-rail__item:nth-child(4) { animation-delay: .49s; }
.vd-js .vd-rail__item:nth-child(5) { animation-delay: .54s; }
.vd-js .vd-rail__item:nth-child(6) { animation-delay: .59s; }
@keyframes vd-hero-in {
to { opacity: 1; transform: none; }
}
@keyframes vd-hero-rise {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* --------------------------------------------------------------------------
Floating quick-action card
-------------------------------------------------------------------------- */
.vd-quick {
position: relative;
z-index: 6;
margin-top: -36px;
overflow: visible;
}
.vd-quick::before {
content: '';
position: absolute;
left: 50%;
top: 0;
z-index: 0;
width: 140vw;
height: 96px;
transform: translateX(-50%);
background: var(--vd-warm-white);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
pointer-events: none;
}
.vd-quick::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 48px;
bottom: -1px;
z-index: 0;
background: var(--vd-warm-white);
pointer-events: none;
}
.vd-quick .vd-container { position: relative; z-index: 1; }
.vd-quick__card {
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-xl);
box-shadow: var(--vd-sh-lg);
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
overflow: hidden;
}
.vd-quick__item {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 5px; padding: 14px 10px 12px;
border-right: 1px solid var(--vd-border-soft);
transition: background var(--vd-t), transform var(--vd-t);
}
.vd-quick__item:last-child { border-right: 0; }
.vd-quick__item::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--vd-primary); transform: scaleX(0); transform-origin: 50% 50%;
transition: transform var(--vd-t);
}
.vd-quick__item:hover { background: var(--vd-soft); }
.vd-quick__item:hover::after { transform: scaleX(1); }
.vd-quick__ico {
width: 38px; height: 38px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--vd-primary);
border: 0;
color: #fff; font-size: 15px;
transition: background var(--vd-t), transform var(--vd-t);
}
.vd-quick__item:hover .vd-quick__ico {
background: var(--vd-primary-dark);
color: #fff; transform: translateY(-3px);
}
.vd-quick__t {
font-family: var(--vd-font-display);
font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--vd-primary); line-height: 1.3;
}
.vd-quick__s { font-size: 11.5px; color: var(--vd-text-3); line-height: 1.35; }
/* --------------------------------------------------------------------------
Today's panchang details (homepage popup)
-------------------------------------------------------------------------- */
.vd-tithi__box {
display: flex; flex-direction: column;
min-width: 0;
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: 18px;
box-shadow: var(--vd-sh-md);
overflow: hidden;
}
.vd-tithi__box--plain {
border: 0; border-radius: 0; box-shadow: none;
}
.vd-tithi__head {
display: flex; align-items: center; gap: 10px;
padding: 15px 18px;
background: linear-gradient(100deg, var(--vd-on-dark-1) 0%, var(--vd-on-dark-2) 100%);
color: #fff;
}
.vd-tithi__badge {
flex: 0 0 auto;
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.18);
color: #fff; font-size: 12px;
}
.vd-tithi__title {
font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vd-tithi__grid {
display: flex; flex-direction: column;
}
.vd-tithi__cell,
.vd-tithi__note {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 2px; text-align: left;
padding: 10px 16px;
min-width: 0;
border-top: 1px solid var(--vd-border-soft);
}
.vd-tithi__cell:first-child { border-top: 0; }
.vd-tithi__cell small,
.vd-tithi__note small {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--vd-primary-dark); font-family: var(--vd-font);
}
.vd-tithi__cell b {
font-family: var(--vd-font-guj);
font-size: 15px; font-weight: 700; color: var(--vd-text);
line-height: 1.4; word-break: break-word;
}
.vd-tithi__note {
background: var(--vd-soft);
}
.vd-tithi__note b {
font-family: var(--vd-font-guj);
font-size: 13.5px; font-weight: 600; color: var(--vd-deep);
line-height: 1.5; word-break: break-word;
}
/* --------------------------------------------------------------------------
Card shell
-------------------------------------------------------------------------- */
.vd-card {
background: var(--vd-card);
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-lg);
box-shadow: var(--vd-sh-sm);
overflow: hidden;
display: flex; flex-direction: column;
transition: box-shadow var(--vd-t);
}
.vd-card__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 20px;
background: linear-gradient(100deg, var(--vd-on-dark-1) 0%, var(--vd-on-dark-2) 100%);
color: #fff;
}
.vd-card__head h3 {
color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.vd-card__head h3.vd-guj { font-size: 16px; }
.vd-card__more {
font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: #fff; display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.vd-card__more:hover { color: #fff; }
.vd-card__more .fa { font-size: 10px; transition: transform var(--vd-t); }
.vd-card__more:hover .fa { transform: translateX(3px); }
.vd-card__body { padding: 8px 18px 18px; flex: 1 1 auto; }
.vd-card__foot { padding: 0 18px 18px; }
/* --------------------------------------------------------------------------
Info teasers — three compact cards; details open in homepage popups
-------------------------------------------------------------------------- */
.vd-infotease {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.vd-tease {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-width: 0;
padding: 20px 16px 22px 18px;
text-align: left;
overflow: hidden;
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: 16px;
box-shadow: var(--vd-sh-sm);
transition: box-shadow var(--vd-t), transform var(--vd-t);
}
.vd-tease:hover {
box-shadow: var(--vd-sh-md);
transform: translateY(-2px);
}
.vd-tease__art {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
overflow: hidden;
}
/* Corner mandala */
.vd-tease__art::before {
content: '';
position: absolute; right: -32px; top: -40px;
width: 128px; height: 128px; border-radius: 50%;
background:
repeating-conic-gradient(from 12deg, rgba(229,125,75,.16) 0 7deg, transparent 7deg 18deg),
radial-gradient(circle, rgba(229,125,75,.10) 0 38%, transparent 39%);
opacity: .7;
}
/* Temple spires along the bottom-left */
.vd-tease__art::after {
content: '';
position: absolute; left: 6px; bottom: 0;
width: 92px; height: 34px;
opacity: .22;
background-color: var(--vd-primary);
-webkit-mask: url("data:image/svg+xml;utf8,") center bottom / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center bottom / contain no-repeat;
}
.vd-tease__ico {
position: relative; z-index: 1;
width: 52px; height: 52px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--vd-on-dark-1), var(--vd-on-dark-2));
color: #fff; font-size: 20px;
box-shadow: 0 8px 18px -10px rgba(201,101,56,.8);
}
.vd-tease__ico::before {
content: '';
position: absolute; inset: -13px;
border-radius: 50%;
background:
repeating-conic-gradient(from 0deg, rgba(229,125,75,.18) 0 5deg, transparent 5deg 15deg);
-webkit-mask: radial-gradient(circle, transparent 58%, #000 59% 68%, transparent 69%);
mask: radial-gradient(circle, transparent 58%, #000 59% 68%, transparent 69%);
pointer-events: none;
}
.vd-tease__copy {
position: relative; z-index: 1;
min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.vd-tease__copy b {
font-family: var(--vd-font-display);
font-size: 16px; font-weight: 600; color: var(--vd-primary-dark);
line-height: 1.25;
}
.vd-tease__copy small {
font-family: var(--vd-font);
font-size: 12px; color: var(--vd-text-3); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-tease__go {
position: relative; z-index: 1;
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #FFE8D6;
color: var(--vd-primary-dark); font-size: 13px;
transition: background var(--vd-t), transform var(--vd-t);
}
.vd-tease:hover .vd-tease__go { background: #FFD9BE; transform: translateX(3px); }
.vd-tease:focus-visible { outline: 2px solid var(--vd-primary-dark); outline-offset: 3px; }
.vd-card:hover { box-shadow: var(--vd-sh-md); }
/* mahotsav + schedule popup lists */
.vd-card--board {
border-radius: 18px;
box-shadow: var(--vd-sh-md);
}
.vd-card--board .vd-card__head { padding: 15px 20px; }
.vd-card--board .vd-card__body { padding: 6px 14px 16px; }
.vd-card--board .vd-card__foot { padding: 0 14px 16px; }
.vd-card--board .vd-date,
.vd-modal--info .vd-date {
background: linear-gradient(160deg, var(--vd-on-dark-1), var(--vd-on-dark-2));
border: 0;
box-shadow: 0 6px 14px -8px rgba(201,101,56,.7);
}
.vd-card--board .vd-date b,
.vd-modal--info .vd-date b { color: #fff; }
.vd-card--board .vd-date span,
.vd-modal--info .vd-date span { color: rgba(255,255,255,.86); }
.vd-card--board .vd-eventlist a,
.vd-modal--info .vd-eventlist a {
padding: 13px 22px 13px 8px;
}
.vd-card--board .vd-eventlist a:hover,
.vd-modal--info .vd-eventlist a:hover { background: linear-gradient(90deg, #FFF4ED, #fff); }
/* Upcoming mahotsav list */
.vd-eventlist { padding-top: 2px; }
.vd-eventlist > li + li { border-top: 1px solid var(--vd-border-soft); }
.vd-eventlist a {
position: relative;
display: grid; grid-template-columns: 50px 56px minmax(0, 1fr); gap: 14px;
align-items: center;
padding: 12px 22px 12px 6px;
border-radius: var(--vd-r-sm);
transition: background var(--vd-t);
}
/* chevron affordance, drawn rather than added to the markup */
.vd-eventlist a::after {
content: '\f105'; font-family: FontAwesome;
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
font-size: 14px; color: var(--vd-border);
transition: color var(--vd-t), transform var(--vd-t);
}
.vd-eventlist a:hover { background: var(--vd-soft); }
.vd-eventlist a:hover::after { color: var(--vd-primary); transform: translateY(-50%) translateX(3px); }
.vd-date {
text-align: center; border-radius: 10px;
background: linear-gradient(160deg, var(--vd-soft), #FFEEE3);
border: 1px solid var(--vd-border-soft);
padding: 8px 2px;
}
.vd-date b {
display: block; font-family: var(--vd-font-display);
font-size: 20px; font-weight: 700; line-height: 1; color: var(--vd-primary-dark);
font-variant-numeric: tabular-nums;
}
.vd-date span {
display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--vd-text-3); margin-top: 4px;
}
.vd-eventlist figure {
width: 56px; height: 56px; border-radius: 10px;
overflow: hidden; background: var(--vd-soft); border: 1px solid var(--vd-border-soft);
}
.vd-eventlist figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vd-ease); }
.vd-eventlist a:hover figure img { transform: scale(1.07); }
.vd-eventlist__t {
font-family: var(--vd-font-display); font-size: 13.5px; font-weight: 600;
color: var(--vd-text); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-eventlist__d {
font-size: 11.5px; color: var(--vd-text-3); margin-top: 4px;
display: flex; align-items: center; gap: 6px;
}
.vd-eventlist__d::before {
content: '\f133'; font-family: FontAwesome; font-size: 10px; color: var(--vd-primary);
}
/* Today's darshan - fills the row height so the picture carries the section */
.vd-darshan__stage {
position: relative;
margin: 14px 0 0;
border-radius: var(--vd-r-md);
overflow: hidden;
background: linear-gradient(160deg, var(--vd-soft), #FFE7D8);
border: 1px solid var(--vd-border-soft);
flex: 1 1 auto;
min-height: 300px;
}
.vd-darshan__stage img,
.vd-darshan__stage .vd-fade {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
opacity: 0; transition: opacity .7s var(--vd-ease);
}
.vd-darshan__stage img.is-active { opacity: 1; }
.vd-darshan__stage::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
background: linear-gradient(180deg, rgba(28,20,16,0) 0%, rgba(28,20,16,.72) 100%);
pointer-events: none;
}
.vd-darshan__cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 18px 18px 16px; text-align: center; color: #fff;
}
.vd-darshan__cap b {
display: block; font-family: var(--vd-font-display);
font-size: 17px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff;
text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.vd-darshan__cap span {
display: block; font-size: 12.5px; color: rgba(255,255,255,.92); margin-top: 4px;
text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.vd-darshan__live {
position: absolute; top: 14px; left: 14px; z-index: 3;
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.95); color: var(--vd-primary-dark);
padding: 6px 13px; border-radius: var(--vd-r-pill);
font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
box-shadow: var(--vd-sh-sm);
}
.vd-darshan__play {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
}
.vd-darshan__play span {
width: 62px; height: 62px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.95); color: var(--vd-primary-dark); font-size: 19px;
padding-left: 4px;
box-shadow: 0 10px 30px -8px rgba(0,0,0,.55);
transition: transform var(--vd-t), background var(--vd-t);
}
.vd-darshan__play:hover span { transform: scale(1.07); background: #fff; }
/* Today's schedule — every published row stays visible */
.vd-sched { padding-top: 4px; }
.vd-sched > li {
display: grid; grid-template-columns: 86px 34px minmax(0, 1fr);
align-items: center; gap: 12px;
padding: 9px 8px;
border-radius: 10px;
}
.vd-sched > li:nth-child(odd) { background: var(--vd-soft); }
.vd-sched__time {
font-family: var(--vd-font-display);
font-size: 12px; font-weight: 700; color: var(--vd-primary-dark);
font-variant-numeric: tabular-nums; letter-spacing: .02em;
background: #fff;
border: 1px solid var(--vd-primary-tint);
border-radius: var(--vd-r-pill);
padding: 5px 0;
text-align: center;
}
.vd-sched__ico {
width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #FFF4ED, #FFE7D8);
color: var(--vd-primary-dark); font-size: 13px;
border: 1px solid var(--vd-border-soft);
}
.vd-sched__name { font-size: 13.5px; color: var(--vd-text); font-weight: 600; line-height: 1.35; }
.vd-sched li.is-close .vd-sched__time {
color: var(--vd-text-3);
border-color: #E8DFD8;
background: #F7F4F2;
}
.vd-sched li.is-close .vd-sched__name { color: var(--vd-text-3); font-weight: 500; }
.vd-sched li.is-close .vd-sched__ico { background: #F7F4F2; color: var(--vd-text-3); border-color: #EFE9E5; }
/* --------------------------------------------------------------------------
Generic carousel (scroll-snap, touch friendly, arrow controlled)
-------------------------------------------------------------------------- */
.vd-carousel { position: relative; }
.vd-carousel__track {
display: flex; gap: 20px;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 6px 2px 14px;
scrollbar-width: none;
}
.vd-carousel__track::-webkit-scrollbar { height: 0; display: none; }
.vd-carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.vd-carousel__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; color: var(--vd-primary-dark);
border: 1px solid var(--vd-border);
box-shadow: var(--vd-sh-md);
font-size: 15px; z-index: 4;
transition: background var(--vd-t), color var(--vd-t), opacity var(--vd-t), transform var(--vd-t);
}
.vd-carousel__nav:hover { background: var(--vd-primary); color: #fff; border-color: var(--vd-primary); }
/* A ghosted arrow reads as a rendering fault on the cream ground, so an
arrow that cannot move the track is taken out of the picture entirely. */
.vd-carousel__nav[disabled] { opacity: 0; visibility: hidden; cursor: default; }
.vd-carousel__nav--prev { left: -18px; }
.vd-carousel__nav--next { right: -18px; }
.vd-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.vd-dots:empty { display: none; }
.vd-dots button {
width: 8px; height: 8px; border-radius: 50%;
background: var(--vd-border); padding: 0;
transition: width var(--vd-t), background var(--vd-t);
}
.vd-dots button.is-active { width: 22px; border-radius: var(--vd-r-pill); background: var(--vd-primary); }
/* --------------------------------------------------------------------------
Thumb card (events / darshan / photos)
-------------------------------------------------------------------------- */
.vd-thumb {
display: block; width: 300px;
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-md);
overflow: hidden;
box-shadow: var(--vd-sh-sm);
transition: transform var(--vd-t), box-shadow var(--vd-t), border-color var(--vd-t);
}
.vd-thumb:hover { transform: translateY(-5px); box-shadow: var(--vd-sh-md); border-color: var(--vd-primary-tint); }
.vd-thumb figure {
position: relative; overflow: hidden;
aspect-ratio: 4 / 3; background: var(--vd-soft);
}
.vd-thumb figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vd-ease); }
.vd-thumb:hover figure img { transform: scale(1.06); }
.vd-thumb__body { padding: 14px 16px 16px; }
.vd-thumb__t {
font-family: var(--vd-font-display); font-size: 14px; font-weight: 600;
color: var(--vd-text); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 39px;
}
.vd-thumb__m {
display: flex; align-items: center; gap: 7px;
margin-top: 8px; font-size: 12px; color: var(--vd-text-3);
}
.vd-thumb__m .fa { color: var(--vd-primary); font-size: 11px; }
/* --------------------------------------------------------------------------
Upcoming programmes + today's darshan
-------------------------------------------------------------------------- */
.vd-feature {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
gap: 22px;
align-items: stretch;
margin-top: 22px;
}
.vd-feature > .vd-card {
min-width: 0;
display: flex; flex-direction: column;
}
.vd-feature > .vd-card .vd-card__body {
display: flex; flex-direction: column; flex: 1 1 auto;
}
.vd-feature .vd-darshan__stage {
flex: 1 1 auto;
min-height: 0;
aspect-ratio: auto;
}
.vd-panel {
position: relative; overflow: hidden;
border-radius: var(--vd-r-xl);
background:
radial-gradient(120% 120% at 8% 0%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
linear-gradient(150deg, var(--vd-soft) 0%, #FFE7D8 100%);
border: 1px solid var(--vd-border);
box-shadow: var(--vd-sh-md);
padding: 22px 22px 20px;
display: flex; flex-direction: column;
min-width: 0;
}
.vd-panel::before,
.vd-panel::after {
content: ''; position: absolute; width: 190px; height: 190px;
background: radial-gradient(circle at 30% 30%, rgba(229,125,75,.14), rgba(229,125,75,0) 68%);
border-radius: 50%; pointer-events: none;
}
.vd-panel::before { top: -60px; left: -50px; }
.vd-panel::after { bottom: -70px; right: -50px; }
.vd-panel__head {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 18px;
}
.vd-panel__head .vd-sec-head__eyebrow {
margin-bottom: 8px;
}
.vd-panel__head h2 {
font-family: var(--vd-font-guj);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 700;
color: var(--vd-text);
letter-spacing: 0;
line-height: 1.25;
}
.vd-panel__head .vd-orn { margin-top: 10px; }
.vd-panel__body { position: relative; z-index: 2; flex: 1 1 auto; }
/* mahotsav slider inside the panel */
.vd-mahotsav {
position: relative;
border-radius: var(--vd-r-lg);
overflow: hidden;
background: #fff;
border: 1px solid var(--vd-border-soft);
box-shadow: var(--vd-sh-sm);
aspect-ratio: 16 / 9;
}
/* the CMS "main slider" images are wide banners rather than event posters */
.vd-mahotsav--wide { aspect-ratio: 21 / 9; }
/* The featured programme poster is a 3:2 plate. A 21:9 frame around it left a
third of the card empty on each side, so the frame matches the artwork and
is capped so it cannot stretch into dead space on wide viewports. */
.vd-mahotsav--feature {
aspect-ratio: 3 / 2;
box-shadow: var(--vd-sh-md);
}
/* contain, never cover - these posters carry text that must not be cropped */
.vd-mahotsav--feature img { object-fit: contain; }
.vd-mahotsav a, .vd-mahotsav .vd-mahotsav__slide {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0; transition: opacity .8s var(--vd-ease);
pointer-events: none;
}
.vd-mahotsav .is-active { opacity: 1; pointer-events: auto; }
.vd-mahotsav img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.vd-mahotsav__empty {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
text-align: center; color: var(--vd-text-3); font-size: 13.5px; width: 80%;
}
/* --------------------------------------------------------------------------
Announcements
-------------------------------------------------------------------------- */
.vd-section--announce {
background-color: var(--vd-cream);
background-image:
radial-gradient(80% 55% at 0% 100%, var(--vd-primary-tint) 0%, transparent 58%),
radial-gradient(70% 50% at 100% 0%, var(--vd-primary-tint) 0%, transparent 52%);
overflow: hidden;
padding-bottom: 72px;
}
.vd-announce__mark,
.vd-announce__motif,
.vd-announce__dots {
position: absolute;
pointer-events: none;
z-index: 0;
}
.vd-announce__mark--left {
left: -20px;
top: 8px;
width: min(38vw, 420px);
height: min(42vw, 460px);
background: url('../images/announce-temple.jpg') left top / contain no-repeat;
opacity: .38;
mix-blend-mode: screen;
}
.vd-announce__mark--right {
right: -28px;
bottom: -12px;
width: min(36vw, 400px);
height: min(40vw, 440px);
background: url('../images/announce-temple.jpg') right bottom / contain no-repeat;
opacity: .32;
mix-blend-mode: screen;
transform: scaleX(-1);
}
.vd-announce__motif {
width: 120px;
height: 120px;
border: 2px solid var(--vd-primary-tint);
border-radius: 50%;
opacity: .28;
}
.vd-announce__motif--conch {
left: 4%;
top: 42%;
background:
radial-gradient(circle at 50% 50%, transparent 34%, var(--vd-primary-tint) 35% 37%, transparent 38%);
}
.vd-announce__motif--conch::after {
content: '';
position: absolute;
inset: 28%;
border: 2px solid var(--vd-primary-tint);
border-radius: 50% 50% 50% 0;
transform: rotate(-20deg);
}
.vd-announce__motif--diya {
right: 7%;
top: 12%;
background:
radial-gradient(circle at 50% 58%, var(--vd-primary-tint) 0 8px, transparent 9px),
radial-gradient(ellipse at 50% 72%, var(--vd-primary-tint) 0 22px, transparent 23px);
}
.vd-announce__dots {
width: 88px;
height: 88px;
opacity: .28;
background-image: radial-gradient(var(--vd-primary) 1.1px, transparent 1.2px);
background-size: 12px 12px;
}
.vd-announce__dots--tl { left: 18%; top: 18px; }
.vd-announce__dots--br { right: 16%; bottom: 64px; }
.vd-section--announce > .vd-container { position: relative; z-index: 1; }
.vd-announce {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px 16px;
}
.vd-section--announce .vd-ann {
flex: 0 0 152px;
width: 152px;
display: block;
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-md);
overflow: hidden;
box-shadow: var(--vd-sh-sm);
transition: transform var(--vd-t), box-shadow var(--vd-t), border-color var(--vd-t);
}
.vd-section--announce .vd-ann:hover {
transform: translateY(-5px);
box-shadow: var(--vd-sh-md);
border-color: var(--vd-primary-tint);
}
.vd-section--announce .vd-ann figure {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--vd-soft);
margin: 0;
}
.vd-section--announce .vd-ann figure img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .6s var(--vd-ease);
}
.vd-section--announce .vd-ann:hover figure img { transform: scale(1.04); }
.vd-section--announce .vd-ann__body {
padding: 10px 10px 12px;
text-align: left;
border-top: 1px solid var(--vd-border-soft);
}
.vd-section--announce .vd-ann__d {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--vd-font-display);
font-size: 11.5px;
font-weight: 700;
color: var(--vd-primary);
}
.vd-section--announce .vd-ann__d .fa {
color: var(--vd-primary);
font-size: 12px;
}
.vd-section--announce .vd-ann__t {
margin-top: 4px;
font-size: 12.5px;
font-weight: 700;
color: var(--vd-text);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vd-announce__cta {
padding-right: 10px;
gap: 12px;
box-shadow: 0 10px 24px -10px rgba(201, 101, 56, .8);
}
.vd-announce__cta-go {
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: var(--vd-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* --------------------------------------------------------------------------
Quick links (arch-top shrine tiles)
Homepage only: .vd-qlink is written solely by home_view #quick_links, so
inner pages and other modules never match these rules.
Flex rather than grid: the tile count is odd, and a centred final row reads
as composed where a grid's left-aligned orphan reads as a mistake.
-------------------------------------------------------------------------- */
.vd-qlinks {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 18px 16px;
padding-top: 10px; /* room for the crown diamond on each tile */
}
.vd-qlink {
--vd-qlink-arch: 72px 72px 18px 18px / 50px 50px 18px 18px;
position: relative;
isolation: isolate;
flex: 0 1 186px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
padding: 28px 14px 18px;
min-height: 168px;
background:
radial-gradient(120% 64% at 50% -8%, rgba(255,231,216,.92), transparent 62%),
#fff;
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-qlink-arch);
box-shadow:
var(--vd-sh-xs),
inset 0 1px 0 rgba(255,255,255,.9);
transition: transform var(--vd-t), box-shadow var(--vd-t), border-color var(--vd-t);
}
/* kalash diamond on the crown — same language as .vd-orn */
.vd-qlink::before {
content: '';
position: absolute;
top: -6px; left: 50%;
width: 11px; height: 11px;
border-radius: 2px;
background: linear-gradient(135deg, var(--vd-gold-soft), var(--vd-gold));
box-shadow: 0 0 0 3px var(--vd-soft), 0 1px 2px rgba(43,37,34,.12);
transform: translateX(-50%) rotate(45deg);
z-index: 2;
pointer-events: none;
transition: background var(--vd-t);
}
/* gold inlay that follows the arch */
.vd-qlink::after {
content: '';
position: absolute; inset: 7px;
border-radius: 62px 62px 12px 12px / 42px 42px 12px 12px;
border: 1px solid rgba(201,149,79,.32);
pointer-events: none;
transition: border-color var(--vd-t);
}
.vd-qlink:hover,
.vd-qlink:focus-visible {
transform: translateY(-6px);
box-shadow: var(--vd-sh-md);
border-color: var(--vd-primary-tint);
}
.vd-qlink:hover::before,
.vd-qlink:focus-visible::before {
background: linear-gradient(135deg, var(--vd-gold), var(--vd-primary));
}
.vd-qlink:hover::after,
.vd-qlink:focus-visible::after {
border-color: rgba(201,149,79,.62);
}
.vd-qlink__ring {
position: relative; z-index: 1;
width: 48px; height: 48px; flex: 0 0 auto;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--vd-soft), #FFE7D8);
border: 1px solid var(--vd-border-soft);
color: var(--vd-primary-dark); font-size: 20px;
transform: rotate(45deg);
box-shadow: 0 8px 16px -10px rgba(138,69,38,.35);
transition: background var(--vd-t), color var(--vd-t), box-shadow var(--vd-t), border-color var(--vd-t);
}
.vd-qlink__ring .fa,
.vd-qlink__ring img { transform: rotate(-45deg); }
.vd-qlink:hover .vd-qlink__ring,
.vd-qlink:focus-visible .vd-qlink__ring {
background: linear-gradient(150deg, var(--vd-primary), var(--vd-primary-dark));
color: #fff;
border-color: transparent;
box-shadow: 0 10px 22px -10px rgba(201,101,56,.8);
}
.vd-qlink__ring img { width: 26px; height: 26px; object-fit: contain; }
.vd-qlink__label {
position: relative; z-index: 1;
font-family: var(--vd-font-display);
font-size: 13px; font-weight: 600; color: var(--vd-text); line-height: 1.35;
}
.vd-qlink small { display: block; font-size: 11px; color: var(--vd-text-3); font-weight: 400; margin-top: 3px; }
/* --------------------------------------------------------------------------
Mobile applications
-------------------------------------------------------------------------- */
.vd-apps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.vd-app {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 12px;
padding: 20px 14px 16px;
background: #fff;
border: 1px solid var(--vd-border-soft);
border-radius: var(--vd-r-lg);
box-shadow: var(--vd-sh-xs);
transition: transform var(--vd-t), box-shadow var(--vd-t), border-color var(--vd-t);
}
.vd-app:hover { transform: translateY(-4px); box-shadow: var(--vd-sh-md); border-color: var(--vd-primary-tint); }
.vd-app__ico {
width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto;
background: var(--vd-soft); border: 1px solid var(--vd-border-soft);
overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.vd-app__ico img { width: 100%; height: 100%; object-fit: contain; }
.vd-app__body { min-width: 0; width: 100%; }
.vd-app__t {
font-family: var(--vd-font-display);
font-size: 14px; font-weight: 600; color: var(--vd-text); line-height: 1.3;
}
.vd-app__s { font-size: 12px; color: var(--vd-text-3); margin-top: 3px; line-height: 1.4; }
.vd-app__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.vd-store {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: var(--vd-r-pill);
background: var(--vd-text); color: #fff;
font-size: 10.5px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
transition: background var(--vd-t), transform var(--vd-t), color var(--vd-t);
}
.vd-store .fa { font-size: 13px; }
.vd-store:hover { background: var(--vd-primary-dark); color: #fff; transform: translateY(-1px); }
.vd-store--alt { background: #fff; color: var(--vd-text); border: 1px solid var(--vd-border); }
.vd-store--alt:hover { background: var(--vd-soft); color: var(--vd-primary-dark); }
/* --------------------------------------------------------------------------
Recent photos
-------------------------------------------------------------------------- */
.vd-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
gap: 14px;
}
.vd-photo {
position: relative; display: block; overflow: hidden;
border-radius: var(--vd-r-md);
aspect-ratio: 1 / 1;
background: var(--vd-soft);
border: 1px solid var(--vd-border-soft);
box-shadow: var(--vd-sh-xs);
transition: transform var(--vd-t), box-shadow var(--vd-t);
}
.vd-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vd-ease); }
.vd-photo::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
background: linear-gradient(180deg, rgba(43,37,34,0), rgba(43,37,34,.72));
opacity: 0; transition: opacity var(--vd-t);
}
.vd-photo__cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 10px 12px; color: #fff; font-size: 11.5px; line-height: 1.35;
opacity: 0; transform: translateY(6px);
transition: opacity var(--vd-t), transform var(--vd-t);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-photo:hover { transform: translateY(-4px); box-shadow: var(--vd-sh-md); }
.vd-photo:hover img { transform: scale(1.08); }
.vd-photo:hover::after,
.vd-photo:hover .vd-photo__cap { opacity: 1; transform: translateY(0); }
/* --------------------------------------------------------------------------
Virtual tour
-------------------------------------------------------------------------- */
.vd-tour {
border-radius: var(--vd-r-xl);
overflow: hidden;
border: 1px solid var(--vd-border);
box-shadow: var(--vd-sh-md);
background: #fff;
padding: 10px;
}
.vd-tour__frame {
border-radius: var(--vd-r-lg); overflow: hidden;
aspect-ratio: 21 / 9; min-height: 280px; background: var(--vd-soft);
}
.vd-tour__frame iframe { width: 100%; height: 100%; display: block; }
/* --------------------------------------------------------------------------
Decorative temple divider
-------------------------------------------------------------------------- */
.vd-divider {
position: relative; line-height: 0;
background: var(--vd-cream);
overflow: hidden;
}
.vd-divider svg { width: 100%; height: auto; min-width: 1100px; display: block; }
.vd-divider--onfoot { background: var(--vd-warm-white); }
/* --------------------------------------------------------------------------
Footer
Three bands, matching the supplied design sheet:
1. THE INVOCATION - cream, a shikhara skyline watermark, the Jai
Swaminarayan title, a lotus rule, the devotional line, and the
Faith / Tradition / Service mark on the right.
2. THE WALL - deep brown, five columns, a quarter-mandala at each left
corner, floral pillars between the columns, the mandir photograph
dissolving into the right edge, closed by a carved jali course.
3. THE BASE - credit, policy links, benediction.
EVERY ornament in the sheet is drawn here rather than shipped as a PNG:
footer-top-bg (the skyline) is the existing web.home.skyline partial,
footer-right-temple is the homepage's own hero/temple.webp toned warm, and
pattern-left, divider-1, divider-2, divider-vertical, border-bottom, the
social discs, the contact discs and button-subscribe are CSS or inline SVG.
Nothing here adds an image request or an icon font.
PALETTE - the six codes from the sheet, and nothing else:
#5A2E17 dark #8B4513 brown #B05A32 terracotta
#D7995D gold #F3E1D3 cream #FFFFFF white
EVERY value that changes responsively is a --vd-f-* custom property
declared ONCE, here, on footer.vd-footer. vadtal-page.css consumes those
tokens and must never redeclare one: that is what makes a media query in
this file automatically reach body.vd-page, where vadtal-page.css loads
last and its higher-specificity rules would otherwise pin the desktop
shape at every breakpoint.
-------------------------------------------------------------------------- */
footer.vd-footer {
/* --- palette: the six codes from the design sheet, section 12 --- */
--vd-f-dark: #5A2E17;
--vd-f-brown: #8B4513;
--vd-f-terra: #B05A32;
--vd-f-gold: #D7995D;
--vd-f-cream: #F3E1D3;
--vd-f-ink: #FFFFFF;
--vd-f-ink-2: var(--vd-f-cream);
--vd-f-line: rgba(215,153,93,.30);
/* --- responsive tokens: the ONLY things the breakpoints below touch --- */
--vd-f-vow-pt: 44px; /* invocation band padding */
--vd-f-vow-pb: 40px;
--vd-f-jai: 34px; /* invocation title size */
--vd-f-quote: 14px;
/* The shrine column is the widest because it has a hard floor the others
do not: six social discs must sit on ONE row. At --vd-f-disc 38px and a
9px gap that row is 273px, so the ratio below has to keep this column
above that at every width where the five-column grid still applies. */
--vd-f-cols: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.15fr);
--vd-f-gap: 0 56px;
--vd-f-gap-h: 28px; /* half the gutter: where the pillars sit */
/* The footer runs WIDER than the site's --vd-container, deliberately.
That token is 1280px (1360 over 1600px), which on a 1920 screen leaves
280px of dead wall either side of five columns - the design sheet has
them spanning nearly the full width instead. This is scoped to the
footer's own containers, so the header and every content section keep
the site width they had. */
--vd-f-max: 1720px;
--vd-f-pt: 44px; /* wall padding */
--vd-f-pb: 44px;
--vd-f-logo: 215px;
--vd-f-photo: 28%; /* mandir photograph width */
--vd-f-mandala: 190px;
--vd-f-jali: 18px; /* carved course closing the wall */
--vd-f-disc: 38px; /* social disc - see the note on --vd-f-cols */
--vd-f-tdisc: 34px; /* contact disc */
position: relative;
margin: 0;
padding: 0;
width: 100%;
background: var(--vd-f-dark);
color: var(--vd-f-ink);
font-family: var(--vd-font);
isolation: isolate;
}
footer.vd-footer .vd-container { max-width: var(--vd-f-max); }
footer.vd-footer ul { list-style: none; margin: 0; padding: 0; }
footer.vd-footer a { color: var(--vd-f-ink); text-decoration: none; }
footer.vd-footer a:hover,
footer.vd-footer a:focus { color: var(--vd-f-gold); text-decoration: none; }
/* ==========================================================================
1. THE INVOCATION (sheet 1, 2, 3, 7)
========================================================================== */
.vd-fvow {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #FEFAF6 0%, #FAEFE4 55%, var(--vd-f-cream) 100%);
padding: var(--vd-f-vow-pt) 0 var(--vd-f-vow-pb);
text-align: center;
}
/* The skyline partial, laid in as a watermark and hung off the bottom edge so
the spires rise out of the band.
height:auto is load-bearing. The partial's viewBox is 1440x180 and it sets
preserveAspectRatio="xMidYMax slice", so pinning the