/* ============================================================================ Poojamandhir tenant theme — home page ---------------------------------------------------------------------------- Served as for the tenant whose body is . EVERY selector in this file MUST be scoped under #t-poojamandhir so it can never leak onto the flagship (vedamandir) or another tenant. Do not add a bare/global rule here. Design tokens (Poojamandhir Figma, node 5874:9732): maroon accent #6E1717 hero deep #3E0A05 -> #480A03 ink text #211D19 cream hairline #EDE4D7 cream panel #FAF7F1 UI/nav font Manrope ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Ramabhadra&family=Noto+Sans+Telugu:wght@400;500;600;700&display=swap'); #t-poojamandhir { --vl-maroon: #6E1717; --vl-hero-a: #3E0A05; --vl-hero-b: #480A03; --vl-ink: #211D19; --vl-hairline: #EDE4D7; --vl-cream: #FAF7F1; --vl-gold: #D8A24A; --vl-green: #01AD5F; /* Latin glyphs resolve to Fraunces/Manrope; Telugu glyphs (which those lack) fall through to Ramabhadra titles / Noto Sans Telugu body per the brand. */ --vl-sans: 'Manrope', 'Noto Sans Telugu', system-ui, -apple-system, 'Segoe UI', sans-serif; --vl-serif: 'Fraunces', 'Ramabhadra', Georgia, 'Times New Roman', serif; /* Ramabhadra (Telugu titles) ships a SINGLE weight, so a font-weight:600/700 on a serif heading makes the browser FAUX-bold it — too heavy, uneven strokes. Turn synthesis off tenant-wide (inherited): Ramabhadra then renders at its natural weight, while Fraunces / Manrope / Noto Sans Telugu keep their REAL loaded weights (synthesis only ever affected the weightless font). Boss, 2026-08-14. */ font-synthesis: none; } /* ============================================================================ S1 HEADER / NAV (Figma node 5874:9734) ========================================================================== */ #t-poojamandhir .nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--vl-hairline); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } #t-poojamandhir .nav-inner { width: min(1280px, 96%); height: 80px; gap: 32px; } /* Logo: constrain by HEIGHT, never width — the admin's aspect ratio is theirs. */ #t-poojamandhir .brand img { width: auto; height: 52px; } /* Nav links — sentence case, Manrope 14/20, no uppercase, no underline. */ #t-poojamandhir .nav-links { gap: 32px; } #t-poojamandhir .nav-links a { font-family: var(--vl-sans); font-weight: 500; font-size: 14px; line-height: 20px; text-transform: none; letter-spacing: 0; color: rgba(33, 29, 25, 0.9); padding: 8px 0; } #t-poojamandhir .nav-links a:hover, #t-poojamandhir .nav-links a.is-active { color: var(--vl-maroon); font-weight: 600; } /* Figma active state is colour-only — no underline bar. */ #t-poojamandhir .nav-links a.is-active::before { display: none; } /* WhatsApp: solid maroon button, white label, no green, no "Need Help?" hint. */ #t-poojamandhir .nav-wa { font-family: var(--vl-sans); height: auto; gap: 0; padding: 10px 20px; border-radius: 6px; border: 1px solid var(--vl-maroon); background: var(--vl-maroon); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #t-poojamandhir .nav-wa:hover { background: #5a1212; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #t-poojamandhir .nav-wa img, #t-poojamandhir .nav-wa .nav-wa-hint { display: none; } #t-poojamandhir .nav-wa-text { line-height: 20px; } #t-poojamandhir .nav-wa-label { color: #fff; font-weight: 600; font-size: 14px; line-height: 20px; } /* Language trigger — plain text (globe + label + caret), no pill chrome. */ #t-poojamandhir .nav-actions .lang-trigger { height: auto; padding: 8px 8px; border: 0; background: transparent; color: var(--vl-ink); font-family: var(--vl-sans); font-weight: 500; font-size: 14px; } #t-poojamandhir .nav-actions .lang-trigger:hover { background: transparent; box-shadow: none; } #t-poojamandhir .lang-trigger .chev { color: var(--vl-ink); } /* Mobile: base makes the WA pill icon-only, but we hid the (green) icon — so restore the maroon label instead of leaving an empty pill. */ @media (max-width: 1024px) { #t-poojamandhir .nav-wa { padding: 8px 14px; } #t-poojamandhir .nav-wa .nav-wa-text { display: flex; } } /* ============================================================================ S2 HERO (Figma node 5874:9761) Left copy column + right promo-card image, on a dark-maroon diagonal gradient warming toward the bottom-right. ========================================================================== */ #t-poojamandhir .km-hero { position: relative; overflow: hidden; padding: 0; background: linear-gradient(135deg, #0A0A0A 0%, #1A0005 25%, #5B1901 50%, #58220E 75%, #882F0F 100%) } #t-poojamandhir .hero::after{ display:none; } #t-poojamandhir .km-hero:before { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 111px; height: 659px; pointer-events: none; background: center / 100% 100% no-repeat url("/assets/home-v2/right-mandala.svg"); } #t-poojamandhir .km-hero-card { width: min(1280px, 92%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 68px 0 72px; } /* Copy column — slides stack; only the active one shows. */ #t-poojamandhir .km-hero-copy { flex: 1 1 auto; max-width: 620px; min-width: 0; } #t-poojamandhir .km-hero-slide { display: none; } #t-poojamandhir .km-hero-slide.is-on { display: block; } #t-poojamandhir .km-hero-title { margin: 0; font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 40px; line-height: 1.2; color: #fff; } /* Sub-paragraph under the headline (Figma hero) — muted cream body copy on the maroon band, constrained so it wraps in ~3 lines like the design. */ #t-poojamandhir .km-hero-sub { margin: 18px 0 0; max-width: 520px; font-family: var(--vl-sans); font-weight: 400; font-size: 15px; line-height: 1.75; color: rgba(250, 247, 241, 0.74); } #t-poojamandhir .km-hero-meta { margin: 20px 0 0; } #t-poojamandhir .km-hero-price { font-family: var(--vl-serif); font-weight: 600; font-size: 30px; line-height: 1.3; color: #fff; } /* Design CTA hugs its label ("Book Pooja Now"), left-aligned under the price — not the full-width copy-column bar the base drew. */ #t-poojamandhir .km-hero-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 24px; width: auto; max-width: 100%; padding: 18px 40px; background: #783F30; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0px 0px 20px rgba(231, 137, 9, 0.3); border-radius: 6px; font-family: var(--vl-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.43px; color: #fff; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; } #t-poojamandhir .km-hero-cta:hover { background: #8a4a38; box-shadow: 0 0 14px rgba(231, 137, 9, 0.45); } /* ---- Trust badges (S2.5) — maroon band of gold-bordered stat chips, continuing the hero's maroon down to the cream service strip below. ---- */ #t-poojamandhir .vl-trust { padding: 36px 16px 36px; border-top: 1px solid rgba(201, 162, 39, 0.3); } #t-poojamandhir .vl-trust-row { max-width: 1040px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } #t-poojamandhir .vl-trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(216, 162, 74, 0.45); border-radius: 999px; } #t-poojamandhir .vl-trust-num { font-family: var(--vl-serif); font-weight: 600; font-size: 18px; line-height: 1; color: var(--vl-gold); } #t-poojamandhir .vl-trust-lbl { font-family: var(--vl-sans); font-weight: 500; font-size: 13px; line-height: 1.3; color: rgba(250, 247, 241, 0.9); } /* ---- Service strip (S2.6) — five points on a cream band under the trust chips. */ #t-poojamandhir .vl-services { background: var(--vl-cream); border-bottom: 1px solid var(--vl-hairline); padding: 18px 16px; } #t-poojamandhir .vl-services-row { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } #t-poojamandhir .vl-service { display: inline-flex; align-items: center; gap: 12px; flex: 1 1 190px; min-width: 180px; } #t-poojamandhir .vl-service-ic { color: var(--vl-maroon); display: inline-flex; flex: 0 0 auto; } #t-poojamandhir .vl-service-text { display: flex; flex-direction: column; gap: 2px; } #t-poojamandhir .vl-service-title { font-family: var(--vl-sans); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--vl-ink); } #t-poojamandhir .vl-service-sub { font-family: var(--vl-sans); font-weight: 400; font-size: 12px; line-height: 1.3; color: #6B5C54; } @media (max-width: 640px) { #t-poojamandhir .vl-trust-lbl { font-size: 12px; } #t-poojamandhir .vl-services-row { justify-content: flex-start; } #t-poojamandhir .vl-service { flex: 1 1 45%; min-width: 140px; } } /* Right promo card — the artwork carries its own baked-in promo (title, Book Now chip); we frame it in the maroon card with a hairline gold edge. */ #t-poojamandhir .km-hero-art { flex: 0 0 auto; width: 480px; max-width: 42%; position: relative; /* Figma hero card: artwork inside a rounded maroon card with a gold border and a warm maroon gradient; the date + temple strip sits under the image. */ padding: 8px; border-radius: 22px; background: linear-gradient(158deg, #5C130B 0%, #3E0A05 58%, #2C0703 100%); border: 1.5px solid rgba(216, 162, 74, 0.55); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.40); } #t-poojamandhir .km-hero-frame { display: none; } #t-poojamandhir .km-hero-frame.is-on { display: block; } #t-poojamandhir .km-hero-frame img { width: 100%; height: auto; display: block; border-radius: 14px; cursor: pointer; } /* Date badge + temple name under the artwork — a light strip with a white tear-off calendar badge (maroon month / dark day) and dark temple text, as the design. */ #t-poojamandhir .km-hero-cardmeta { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 12px; background: var(--vl-cream); border-radius: 12px; } #t-poojamandhir .km-hero-datebadge { flex: 0 0 auto; width: 40px; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; text-align: center; border: 1px solid var(--vl-hairline); background: #fff; } #t-poojamandhir .km-hero-badge-month { background: var(--vl-green); color: #fff; font-family: var(--vl-sans); font-weight: 700; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 0; line-height: 1.35; } #t-poojamandhir .km-hero-badge-day { color: var(--vl-ink); font-family: var(--vl-serif); font-weight: 700; font-size: 16px; padding: 3px 0; line-height: 1; } #t-poojamandhir .km-hero-cardmeta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #t-poojamandhir .km-hero-cardtemple { font-family: var(--vl-sans); font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--vl-ink); } #t-poojamandhir .km-hero-carddate { font-family: var(--vl-sans); font-weight: 400; font-size: 11px; line-height: 1.3; color: #6B5C54; } /* Slide dots sit OUTSIDE the card, in a row just below it (centred under the card column, on the hero background). */ #t-poojamandhir .km-hero-dots { position: absolute; top: calc(100% + 14px); left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } #t-poojamandhir .km-hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.45); cursor: pointer; } #t-poojamandhir .km-hero-dot.is-on { background: var(--vl-gold); width: 20px; } /* The Poojamandhir home design carries no featured-package rail under the hero (kailasamandir's own design did). Hide it here so the page reads hero -> trust -> how-it-works as the Figma does. */ #t-poojamandhir .km-rail-sec { display: none; } /* ---- Hero: mobile (<=1024) stacks copy over art ---- */ @media (max-width: 1024px) { #t-poojamandhir .km-hero-card { flex-direction: column; align-items: stretch; gap: 28px; padding: 36px 0 40px; } #t-poojamandhir .km-hero-title { font-size: 28px; } #t-poojamandhir .km-hero-price { font-size: 24px; } #t-poojamandhir .km-hero-cta { width: 100%; margin-top: 20px; padding: 16px 22px; font-size: 16px; } #t-poojamandhir .km-hero-art { width: 100%; max-width: 100%; } } /* ============================================================================ S5 HOW IT WORKS (.journey) (Figma node 5874:12786) 4 gold-numbered steps on white. The presenter puts a CMS icon in each circle; the Figma shows a number, so we hide the icon and draw the number with a CSS counter. Per-step descriptions are not in this presenter's DOM. ========================================================================== */ #t-poojamandhir .journey { background: #fff; padding: 30px 0 50px; } #t-poojamandhir .journey-grid { gap: 0; } #t-poojamandhir .journey-grid h2, #t-poojamandhir .journey-grid .display { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.44px; color: #1B1310; padding: 0 0 30px; } #t-poojamandhir .journey-steps { align-items: flex-start; justify-content: center; gap: 10px; width: min(1232px, 92%); margin: 0 auto; counter-reset: jstep; } #t-poojamandhir .jstep { counter-increment: jstep; flex: 1 1 0; max-width: 300px; gap: 0; justify-content: flex-start; padding: 8px 14px; } #t-poojamandhir .jstep:first-child .jstep-label { margin-left: 0; } #t-poojamandhir .jstep-num { width: 68px; height: 68px; border-radius: 34px; background: linear-gradient(180deg, #C86E03 0%, #E78909 100%); box-shadow: 0 8px 20px rgba(200, 110, 3, 0.28); margin-bottom: 18px; font-family: var(--vl-serif); font-weight: 700; font-size: 18px; line-height: 1; color: #fff; } #t-poojamandhir .jstep-num img { display: none; } #t-poojamandhir .jstep-num::before { content: counter(jstep, decimal-leading-zero); } #t-poojamandhir .jstep-label { font-family: var(--vl-serif); font-weight: 600; font-size: 16px; line-height: 1.33; color: #1B1310; } #t-poojamandhir .jstep-label span { color: #7A0C14; font-weight: 600; } /* The Poojamandhir design has no arrows between steps. */ #t-poojamandhir .step-arrow { display: none; } @media (max-width: 1024px) { #t-poojamandhir .journey { padding: 24px 0 32px; } #t-poojamandhir .journey-steps { flex-direction: column; flex-wrap: nowrap; align-items: center; row-gap: 28px; } #t-poojamandhir .jstep { flex: 0 0 auto; width: 100%; max-width: 320px; align-items: center; } } /* ============================================================================ S6 OUR UPCOMING ONLINE PUJAS (.pujas / .puja-grid) (Figma 5874:12833) 3-col card grid on white. Centred serif heading. The category filter chips are not in the Poojamandhir design, so they are hidden here. ========================================================================== */ #t-poojamandhir .pujas { background: #fff; padding: 50px 0 60px; } #t-poojamandhir .pujas-head { flex-direction: column; align-items: center; gap: 0; margin-bottom: 28px; } #t-poojamandhir .pujas-head h2, #t-poojamandhir .pujas-head .display { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; color: #211D19; text-align: center; } /* Category filter is absent from the Poojamandhir design (View All Pujas still reaches the full catalogue). */ #t-poojamandhir .pujas-filter { display: none; } /* ---- Card ---- */ #t-poojamandhir .puja-card { background: #fff; border: 1px solid #D4D4D4; border-radius: 12px; overflow: hidden; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } #t-poojamandhir .puja-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); border-color: #D4D4D4; } #t-poojamandhir .puja-img { border-radius: 0; aspect-ratio: 370 / 247; background: #F7F1E7; position: relative; } #t-poojamandhir .puja-img img { object-fit: cover; /* No zoom-in on card hover (Boss) — the base pages scale the image 1.03 on hover; id-specificity here overrides it on home + every list page. */ transform: none; } /* Temple-gopuram arch (puja_card_design.svg — Boss's exact asset): white fill + a black 21% hairline stroke. Painted at the bottom of the image in the card-body colour so it flows into .puja-body below; overlaps only the LOWER image. EVERY SVG attribute is SINGLE-quoted because the surrounding url("…") is double-quoted — pasting the raw SVG (with fill="white") breaks the CSS string and the whole theme falls back to flagship. */ #t-poojamandhir .puja-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: -37px; height: 34%; pointer-events: none; background: bottom center / 100% 100% no-repeat url("data:image/svg+xml,"); } /* Wishlist / share overlay is not in the Poojamandhir card design. */ #t-poojamandhir .puja-acts { display: none; } #t-poojamandhir .puja-body { padding: 20px; gap: 10px; } /* Category tag — warm gold/tan, uppercase, left aligned (no stars/rule). */ #t-poojamandhir .puja-yaga { justify-content: flex-start; font-family: var(--vl-sans); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.6px; color: #B88A3B; } #t-poojamandhir .puja-yaga .left-linearline, #t-poojamandhir .puja-yaga .right-linearline, #t-poojamandhir .puja-yaga .yaga-ic { display: none; } #t-poojamandhir .puja-name { font-family: var(--vl-serif); font-weight: 600; font-size: 18px; line-height: 1.39; color: #211D19; } /* No short-description line in the Poojamandhir card. */ #t-poojamandhir .puja-desc { display: none; } /* Temple = plain icon row; date = boxed cream panel. */ #t-poojamandhir .puja-date-place { border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 10px; } #t-poojamandhir .puja-date { font-family: var(--vl-sans); font-weight: 500; font-size: 14px; line-height: 16px; color: rgba(33, 29, 25, 0.8); padding: 0; margin: 0; width: 100%; gap: 6px; } #t-poojamandhir .puja-date.templename { border-bottom: 0; } #t-poojamandhir .puja-date:not(.templename) { background: rgba(247, 241, 231, 0.8); border: 1px solid #EDE4D7; border-radius: 6px; padding: 10px; font-weight: 600; font-size: 12px; color: #211D19; } /* Footer — Per Booking above the price, maroon net, small struck original. */ #t-poojamandhir .puja-foot { border-top: 1px solid #EDE4D7; padding-top: 12px; gap: 12px; align-items: flex-end; /* Price bottom-left, Book/Participate button hard in the bottom-right corner — matches the home grid card, whose base already sets space-between. The list pages' base leaves it at normal, which packed the button beside the price. */ justify-content: space-between; } #t-poojamandhir .puja-price { flex-direction: column; } #t-poojamandhir .puja-per { order: -1; margin: 0 0 2px; font-family: var(--vl-sans); font-weight: 500; font-size: 12px; line-height: 16px; color: rgba(33, 29, 25, 0.6); } #t-poojamandhir .puja-amt { font-family: var(--vl-serif); font-weight: 600; font-size: 18px; line-height: 1.3; color: #6E1717; } #t-poojamandhir .puja-amt span { font-family: var(--vl-serif); font-weight: 600; font-size: 12px; line-height: 16px; color: rgba(33, 29, 25, 0.4); text-decoration-line: line-through; margin-right: 5px; } #t-poojamandhir .book-btn { width: auto; /* Pin the button to the bottom-right corner in every case — with a price beside it (pujas/packages) AND alone (chadavas has no base price, so space-between would otherwise leave the lone button on the left). */ margin-left: auto; gap: 8px; background: #6E1717; color: #fff; border-radius: 8px; padding: 11px 18px; font-family: var(--vl-sans); font-weight: 700; font-size: 12px; line-height: 16px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #t-poojamandhir .book-btn:hover { background: #5a1212; } #t-poojamandhir .book-ic { width: 14px; height: 14px; background: transparent; } #t-poojamandhir .book-ic img { width: 14px; filter: brightness(0) invert(1); } /* View-all pill — maroon outline. */ #t-poojamandhir .view-all-pill { border-color: #6E1717; color: #6E1717; } @media (max-width: 1024px) { #t-poojamandhir .pujas { padding: 32px 0 40px; } #t-poojamandhir .pujas-head h2, #t-poojamandhir .pujas-head .display { font-size: 26px; } #t-poojamandhir .book-btn { width: auto; } } /* ============================================================================ S7 WORDS FROM OUR DEVOTEES (.quotes) (Figma node 5874:13113) 3 white testimonial cards on a cream band. The presenter carries no rating stars or reviewer role; the 5-star row is static in the design, so it is drawn with CSS. Reviewer role is not in this presenter's DOM. ========================================================================== */ #t-poojamandhir .quotes { background: #FAF7F1 !important; padding: 56px 0 64px; } #t-poojamandhir .quotes .display, #t-poojamandhir .quotes h2 { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; color: #211D19; text-align: center; margin-bottom: 36px; } #t-poojamandhir .quote-rail { grid-template-columns: repeat(3, 1fr); gap: 24px; } #t-poojamandhir .qcard { background: #fff; border: 1px solid #EDE4D7; border-radius: 16px; padding: 28px 26px; align-items: flex-start; text-align: left; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); } /* Static 5-star rating row the design shows on every card. */ #t-poojamandhir .qcard::before { content: "\2605\2605\2605\2605\2605"; display: block; margin-bottom: 16px; color: var(--vl-gold); font-size: 15px; letter-spacing: 3px; } #t-poojamandhir .qmark { position: absolute; top: 22px; right: 24px; margin: 0; } #t-poojamandhir .qmark img { width: 48px; height: auto; opacity: 0.16; } #t-poojamandhir .qtext { font-family: var(--vl-sans); font-weight: 400; font-size: 14px; line-height: 1.7; color: #6B5C54; text-align: left; border-bottom: 0; padding-bottom: 0; margin: 0 0 20px; } #t-poojamandhir .qfoot { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; } #t-poojamandhir .qav { width: 44px; height: 44px; } #t-poojamandhir .qname { font-family: var(--vl-sans); font-weight: 700; font-size: 15px; line-height: 1.3; color: #211D19; text-align: left; } #t-poojamandhir .qdot.is-on { background: #6E1717; } @media (max-width: 1024px) { #t-poojamandhir .quotes .display, #t-poojamandhir .quotes h2 { font-size: 26px; } } /* ============================================================================ S8 QUESTIONS? WE'RE HERE. (.faq) (Figma node 5874:13198) Left intro + Contact button; right FAQ accordion. The Figma's "Devotee Support Services" phone/email card is not in this presenter's DOM. ========================================================================== */ #t-poojamandhir .faq { background: #fff; padding: 64px 0 72px; } /* The Poojamandhir design's "Questions? We're Here." column carries no "— FAQ" eyebrow above the heading. */ #t-poojamandhir .faq-eyebrow { display: none; } #t-poojamandhir .faq-head h2, #t-poojamandhir .faq-head .display { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; color: #211D19; } #t-poojamandhir .faq-sub { font-family: var(--vl-sans); color: #6B5C54; } /* Contact button — solid maroon, 6px radius (not the base pill). */ #t-poojamandhir .faq .pill-btn.primary { background: #6E1717; border: 1px solid #6E1717; border-radius: 8px; padding: 14px 24px; font-family: var(--vl-sans); font-weight: 600; font-size: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } /* Accordion */ #t-poojamandhir .faq-item { border: 1px solid #EDE4D7; border-radius: 12px; } #t-poojamandhir .faq-item summary { font-family: var(--vl-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; color: #211D19; } #t-poojamandhir .faq-item[open] { border-color: #6E1717; } #t-poojamandhir .faq-item[open] summary span { color: #6E1717; } #t-poojamandhir .faq-mark { background: #F7F1E7; color: #6B5C54; } #t-poojamandhir .faq-item[open] .faq-mark { background: #6E1717; color: #fff; } #t-poojamandhir .faq-body { font-family: var(--vl-sans); color: #6B5C54; } @media (max-width: 1024px) { #t-poojamandhir .faq { padding: 36px 0 44px; } #t-poojamandhir .faq-head h2, #t-poojamandhir .faq-head .display { font-size: 26px; } } /* ============================================================================ S9 FOOTER (app-vm-footer) (Figma node 5874:13267) The base footer is already the maroon-gradient design; the Poojamandhir repaint is the serif swap to Fraunces. The dark-maroon gradient, gold logo, social row, columns and copyright already match the design. ========================================================================== */ #t-poojamandhir .finale-title { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; } #t-poojamandhir .follow-cap { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 40px; line-height: 1.2; } #t-poojamandhir .foot-col h5 { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; } #t-poojamandhir .foot-brand p, #t-poojamandhir .foot-col a, #t-poojamandhir .finale-sub, #t-poojamandhir .footer-base { font-family: var(--vl-sans); } /* ============================================================================ POOJA-DETAILS PAGE (Poojamandhir skin) ---------------------------------------------------------------------------- RESTRUCTURED (Boss, 2026-08-13) to the accurate poojamandhir design (.claude/theme-work/poojamandhir/figma/design-details.jpg): full-width title bar → two-column body (left 'Puja Details' + testimonial, right promo image + content sections). Tokens: maroon #6E1717, gold #D8A24A, cream #FAF7F1, ink #211D19, hairline #EDE4D7; Fraunces serif / Manrope UI. Every selector stays scoped under #t-poojamandhir so it can never touch the flagship. ========================================================================== */ #t-poojamandhir .pooja-details-container.vl-pd { background: var(--vl-cream); color: var(--vl-ink); font-family: var(--vl-sans); overflow-x: clip; --vl-ink-soft: #453B33; --vl-muted: #6B5C54; --vl-shadow-sm: 0 8px 24px -14px rgba(40, 10, 8, .22); --vl-shadow-md: 0 18px 40px -22px rgba(40, 10, 8, .32); --vl-shadow-lg: 0 28px 70px -32px rgba(40, 10, 8, .38); } #t-poojamandhir .vl-page { width: min(1240px, 92%); margin: 0 auto; } /* ============ FULL-WIDTH TITLE BAR ============ */ #t-poojamandhir .vl-topbar { padding: 30px 0 22px; border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .vl-title { font-family: var(--vl-serif); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -.5px; color: var(--vl-ink); margin: 0 0 18px; } #t-poojamandhir .vl-topbar-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* price */ #t-poojamandhir .vl-price { display: inline-flex; align-items: baseline; gap: 8px; } #t-poojamandhir .vl-price-amt { font-family: var(--vl-sans); font-weight: 800; font-size: 26px; line-height: 1; color: var(--vl-ink); } #t-poojamandhir .vl-price-was { font-family: var(--vl-sans); font-weight: 400; font-size: 15px; color: var(--vl-muted); text-decoration: line-through; } #t-poojamandhir .vl-price-gst { font-size: 11px; color: var(--vl-muted); } #t-poojamandhir .vl-price-soon { font-size: 18px; } #t-poojamandhir .vl-skel { display: inline-block; width: 64px; height: 20px; border-radius: 6px; background: rgba(110,23,23,.14); } /* countdown */ #t-poojamandhir .vl-cd { display: inline-flex; align-items: center; gap: 12px; } #t-poojamandhir .vl-cd-label { font-family: var(--vl-sans); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--vl-muted); max-width: 92px; line-height: 1.25; } #t-poojamandhir .vl-cd-chips { display: inline-flex; gap: 6px; } #t-poojamandhir .vl-chip { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 9px; min-width: 40px; justify-content: center; border: 1px solid var(--vl-hairline); border-radius: 9px; background: #fff; } #t-poojamandhir .vl-chip b { font-family: var(--vl-sans); font-weight: 800; font-size: 15px; color: var(--vl-ink); line-height: 1; } #t-poojamandhir .vl-chip i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--vl-muted); } #t-poojamandhir .vl-cd-closed { display: inline-flex; flex-direction: column; gap: 2px; } #t-poojamandhir .vl-cd-closed b { font-family: var(--vl-serif); font-weight: 600; font-size: 15px; color: var(--vl-maroon); } #t-poojamandhir .vl-cd-closed i { font-style: normal; font-size: 11.5px; color: var(--vl-muted); } /* actions */ #t-poojamandhir .vl-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; } #t-poojamandhir .vl-act { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--vl-hairline); background: #fff; transition: transform .15s, border-color .2s, background .2s; } #t-poojamandhir .vl-act:hover { transform: translateY(-1px); } #t-poojamandhir .vl-act-wa { border-color: rgba(41,167,26,.4); } #t-poojamandhir .vl-act-wa img { width: 22px; height: 22px; } #t-poojamandhir .vl-act-call { color: #1976c5; border-color: rgba(25,118,197,.35); } #t-poojamandhir .vl-act-call:hover { background: rgba(25,118,197,.06); } #t-poojamandhir .vl-book { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--vl-maroon); color: #fff; border: none; border-radius: 999px; font-family: var(--vl-sans); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, transform .15s; } #t-poojamandhir .vl-book:hover { background: #5a1212; transform: translateY(-1px); } #t-poojamandhir .vl-book.is-disabled { opacity: .55; pointer-events: none; } #t-poojamandhir .vl-book-arrow { font-size: 17px; line-height: 1; } #t-poojamandhir .vl-book-notify.notify-set { background: #0E8B3F; } /* ============ TWO-COLUMN LAYOUT ============ */ #t-poojamandhir .vl-layout { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; padding: 30px 0 70px; } #t-poojamandhir .vl-left { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; } #t-poojamandhir .vl-right { min-width: 0; } /* ---- Puja Details card ---- */ #t-poojamandhir .vl-detcard { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; overflow: hidden; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .vl-detcard-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--vl-maroon); color: #FFF7EE; font-family: var(--vl-serif); font-weight: 600; font-size: 17px; } #t-poojamandhir .vl-detcard-dash { width: 22px; height: 2px; border-radius: 2px; background: var(--vl-gold); flex-shrink: 0; } #t-poojamandhir .vl-detrows { padding: 4px 18px 8px; } #t-poojamandhir .vl-detrow { padding: 13px 0; border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .vl-detrow:last-child { border-bottom: none; } #t-poojamandhir .vl-detlabel { display: block; font-family: var(--vl-sans); font-size: 13px; font-weight: 700; color: var(--vl-ink); margin-bottom: 3px; } #t-poojamandhir .vl-detval { display: block; font-family: var(--vl-sans); font-size: 13px; line-height: 1.4; color: var(--vl-muted); } #t-poojamandhir .vl-detval-sub { color: var(--vl-muted); } #t-poojamandhir .vl-detval-was { text-decoration: line-through; } /* ---- testimonial ---- */ #t-poojamandhir .vl-testi { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; padding: 20px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .vl-testi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } #t-poojamandhir .vl-testi-quote { width: 26px; height: 26px; opacity: .9; } #t-poojamandhir .vl-testi-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--vl-sans); font-weight: 700; font-size: 13px; color: var(--vl-ink); } #t-poojamandhir .vl-testi-rate img { width: 14px; height: 14px; } #t-poojamandhir .vl-testi-text { margin: 0 0 16px; font-family: var(--vl-sans); font-size: 13.5px; line-height: 1.6; color: var(--vl-ink-soft); } #t-poojamandhir .vl-testi-foot { display: flex; align-items: center; gap: 10px; } #t-poojamandhir .vl-testi-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--vl-cream); } #t-poojamandhir .vl-testi-by { display: flex; flex-direction: column; } #t-poojamandhir .vl-testi-name { font-family: var(--vl-sans); font-weight: 700; font-size: 13.5px; color: var(--vl-ink); } #t-poojamandhir .vl-testi-role { font-family: var(--vl-sans); font-size: 11.5px; color: var(--vl-muted); } /* ---- package start banner (package-details only, data-gated) ---- */ #t-poojamandhir .vl-startcard { background: var(--vl-cream); border: 1px solid var(--vl-hairline); border-radius: 16px; padding: 16px 18px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .vl-startcard-word { display: inline-block; font-family: var(--vl-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vl-maroon); margin-bottom: 6px; } #t-poojamandhir .vl-startcard-p { margin: 0; font-family: var(--vl-sans); font-size: 13px; line-height: 1.55; color: var(--vl-ink-soft); } /* ---- tier picker (data-gated) ---- */ #t-poojamandhir .vl-tiers { display: flex; flex-direction: column; gap: 10px; } #t-poojamandhir .vl-tier { display: block; cursor: pointer; } #t-poojamandhir .vl-tier input { position: absolute; opacity: 0; pointer-events: none; } #t-poojamandhir .vl-tier-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 2px solid var(--vl-hairline); border-radius: 12px; } #t-poojamandhir .vl-tier input:checked + .vl-tier-card { border-color: var(--vl-maroon); background: rgba(110,23,23,.05); } #t-poojamandhir .vl-tier-ic { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } #t-poojamandhir .vl-tier-copy { display: flex; flex-direction: column; min-width: 0; } #t-poojamandhir .vl-tier-name { font-family: var(--vl-sans); font-weight: 700; font-size: 14px; color: var(--vl-ink); } #t-poojamandhir .vl-tier-sub { font-size: 12px; color: var(--vl-muted); } #t-poojamandhir .vl-tier-price { font-family: var(--vl-sans); font-weight: 700; font-size: 14px; color: var(--vl-maroon); } #t-poojamandhir .vl-tier-price s { font-weight: 400; font-size: 12px; color: var(--vl-muted); margin-right: 5px; } #t-poojamandhir .vl-tier-price em { font-style: normal; font-size: 10px; font-weight: 500; color: var(--vl-muted); } #t-poojamandhir .vl-tier-badge { position: absolute; top: -10px; left: 12px; padding: 2px 8px; background: var(--vl-gold); color: #3A2A0C; border-radius: 7px; font-family: var(--vl-sans); font-weight: 700; font-size: 11px; } /* ============ RIGHT MAIN — promo image ============ */ #t-poojamandhir .vl-hero { position: relative; border-radius: 16px; overflow: hidden; background: #1a0807; box-shadow: var(--vl-shadow-md); margin-bottom: 34px; } #t-poojamandhir .vl-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } #t-poojamandhir .vl-hero-track::-webkit-scrollbar { display: none; } #t-poojamandhir .vl-hero-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; } #t-poojamandhir .vl-hero-slide .media-image, #t-poojamandhir .vl-hero-slide .media-video, #t-poojamandhir .vl-hero-video, #t-poojamandhir .vl-hero-video video { width: 100%; display: block; } #t-poojamandhir .vl-hero-slide .media-image { object-fit: cover; } #t-poojamandhir .vl-hero-video { position: relative; } #t-poojamandhir .vl-hero-sound { position: absolute; bottom: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; cursor: pointer; } #t-poojamandhir .vl-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--vl-maroon); display: grid; place-items: center; box-shadow: var(--vl-shadow-sm); transition: background .2s, color .2s; } #t-poojamandhir .vl-hero-nav:hover { background: var(--vl-maroon); color: #FFF7EE; } #t-poojamandhir .vl-hero-nav.prev { left: 14px; } #t-poojamandhir .vl-hero-nav.next { right: 14px; } #t-poojamandhir .vl-hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } #t-poojamandhir .vl-hero-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); border: none; cursor: pointer; transition: width .2s, background .2s; } #t-poojamandhir .vl-hero-dot.is-active { background: #fff; width: 22px; border-radius: 9px; } #t-poojamandhir .vl-hero-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 3; } #t-poojamandhir .vl-tool { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--vl-maroon); border: none; display: grid; place-items: center; cursor: pointer; box-shadow: var(--vl-shadow-sm); transition: background .2s, transform .15s; } #t-poojamandhir .vl-tool:hover { transform: translateY(-1px); } #t-poojamandhir .vl-tool.is-on svg { fill: var(--vl-maroon); } #t-poojamandhir .vl-tool img { width: 16px; height: 16px; } #t-poojamandhir .vl-hero-missing { aspect-ratio: 16 / 10; display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 14px; } /* ============ SECTIONS ============ */ #t-poojamandhir .vl-sec { scroll-margin-top: 90px; margin-bottom: 40px; } #t-poojamandhir .vl-sec:last-child { margin-bottom: 0; } #t-poojamandhir .vl-sec-h { font-family: var(--vl-serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.4px; color: var(--vl-ink); margin: 0 0 16px; } #t-poojamandhir .vl-prose { font-family: var(--vl-sans); font-size: 15px; line-height: 1.75; color: var(--vl-ink-soft); } #t-poojamandhir .vl-prose p { margin: 0 0 14px; } #t-poojamandhir .vl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: none; border: none; cursor: pointer; color: var(--vl-maroon); font-family: var(--vl-sans); font-weight: 700; font-size: 14px; } /* benefits — single-column red-check list */ #t-poojamandhir .vl-benefits, #t-poojamandhir .vl-recv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } #t-poojamandhir .vl-benefit { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .vl-benefit:last-child { border-bottom: none; } #t-poojamandhir .vl-check { width: 22px; height: 22px; color: var(--vl-maroon); flex-shrink: 0; margin-top: 1px; } #t-poojamandhir .vl-benefit-b { display: flex; flex-direction: column; gap: 3px; } #t-poojamandhir .vl-benefit-t { font-family: var(--vl-sans); font-weight: 700; font-size: 15px; color: var(--vl-ink); } #t-poojamandhir .vl-benefit-d { font-family: var(--vl-sans); font-size: 13.5px; line-height: 1.55; color: var(--vl-muted); } /* procedure — numbered 01-04 */ #t-poojamandhir .vl-proc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } #t-poojamandhir .vl-proc-row { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .vl-proc-row:last-child { border-bottom: none; } #t-poojamandhir .vl-proc-n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(110,23,23,.35); color: var(--vl-maroon); display: grid; place-items: center; font-family: var(--vl-sans); font-weight: 700; font-size: 11px; } #t-poojamandhir .vl-proc-b { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; } #t-poojamandhir .vl-proc-t { font-family: var(--vl-sans); font-weight: 600; font-size: 15px; color: var(--vl-ink); } #t-poojamandhir .vl-proc-d { font-family: var(--vl-sans); font-size: 13.5px; line-height: 1.55; color: var(--vl-muted); } /* temple */ #t-poojamandhir .vl-temple { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; } #t-poojamandhir .vl-temple-img { position: relative; border-radius: 12px; overflow: hidden; background: #1a0807; aspect-ratio: 1 / 1; } #t-poojamandhir .vl-temple-track { display: flex; height: 100%; overflow-x: auto; scrollbar-width: none; } #t-poojamandhir .vl-temple-track::-webkit-scrollbar { display: none; } #t-poojamandhir .vl-temple-slide { flex: 0 0 100%; height: 100%; } #t-poojamandhir .vl-temple-img .media-image { width: 100%; height: 100%; object-fit: cover; } #t-poojamandhir .vl-temple-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } #t-poojamandhir .vl-temple-name { margin: 0 0 6px; font-family: var(--vl-serif); font-weight: 700; font-size: 19px; color: var(--vl-ink); } #t-poojamandhir .vl-temple-loc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--vl-sans); font-size: 12.5px; font-weight: 600; color: var(--vl-maroon); margin-bottom: 10px; } #t-poojamandhir .vl-temple-loc img { width: 14px; height: 14px; } #t-poojamandhir .vl-temple-p { margin: 0; font-family: var(--vl-sans); font-size: 14px; line-height: 1.65; color: var(--vl-ink-soft); } /* what you will receive */ #t-poojamandhir .vl-recv-row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .vl-recv-row:last-child { border-bottom: none; } #t-poojamandhir .vl-recv-text { font-family: var(--vl-sans); font-size: 14.5px; line-height: 1.5; color: var(--vl-ink-soft); padding-top: 1px; } /* FAQs */ #t-poojamandhir .vl-faqs { display: flex; flex-direction: column; gap: 10px; } #t-poojamandhir .vl-faq { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } #t-poojamandhir .vl-faq.is-open { border-color: var(--vl-maroon); box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .vl-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; } #t-poojamandhir .vl-faq-text { font-family: var(--vl-sans); font-weight: 600; font-size: 15px; color: var(--vl-ink); } #t-poojamandhir .vl-faq.is-open .vl-faq-text { color: var(--vl-maroon); } #t-poojamandhir .vl-faq-mark { color: var(--vl-muted); flex-shrink: 0; transition: transform .25s, color .2s; } #t-poojamandhir .vl-faq.is-open .vl-faq-mark { transform: rotate(180deg); color: var(--vl-maroon); } #t-poojamandhir .vl-faq-a { padding: 0 20px 18px; font-family: var(--vl-sans); font-size: 13.5px; line-height: 1.65; color: var(--vl-muted); } #t-poojamandhir .vl-faq-a p { margin: 0; } /* gallery + reviews (data-gated, below FAQs) */ #t-poojamandhir .vl-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #t-poojamandhir .vl-gal-cell { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #ece6e3; border: none; padding: 0; cursor: pointer; } #t-poojamandhir .vl-gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } #t-poojamandhir .vl-gal-cell:hover img { transform: scale(1.04); } #t-poojamandhir .vl-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } #t-poojamandhir .vl-review { position: relative; padding: 20px; background: #fff; border: 1px solid var(--vl-hairline); border-radius: 14px; } #t-poojamandhir .vl-review-rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--vl-sans); font-weight: 700; font-size: 14px; color: var(--vl-ink); } #t-poojamandhir .vl-review-rate img { width: 14px; height: 14px; } #t-poojamandhir .vl-review-text { font-family: var(--vl-sans); font-size: 14px; line-height: 1.6; color: var(--vl-ink-soft); margin: 10px 0; } #t-poojamandhir .vl-review-by { display: flex; align-items: center; gap: 10px; } #t-poojamandhir .vl-review-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--vl-cream); } #t-poojamandhir .vl-review-by span { font-family: var(--vl-sans); font-weight: 600; font-size: 13.5px; color: var(--vl-ink); } /* offerings (chadava) */ #t-poojamandhir .vl-empty { font-family: var(--vl-sans); font-size: 14px; color: var(--vl-muted); } /* Restructured offering cards (Chandu, 2026-08-14): a horizontal header row — image · title · price with the +Add button DIRECTLY UNDER the price — then a full-width description row with a read-more toggle. */ #t-poojamandhir .vl-offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } #t-poojamandhir .vl-offer { border: 1px solid var(--vl-hairline); border-radius: 14px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; } /* Row 1 */ #t-poojamandhir .vl-offer-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; } #t-poojamandhir .vl-offer-media { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--vl-cream); } #t-poojamandhir .vl-offer-media img { width: 100%; height: 100%; object-fit: cover; } #t-poojamandhir .vl-offer-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; } #t-poojamandhir .vl-offer-badge { display: inline-block; width: fit-content; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vl-maroon); } #t-poojamandhir .vl-offer-title { font-family: var(--vl-sans); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--vl-ink); } /* price on top, +Add directly under it, right-aligned */ #t-poojamandhir .vl-offer-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } #t-poojamandhir .vl-offer-price { font-family: var(--vl-sans); font-weight: 700; font-size: 15px; color: var(--vl-ink); white-space: nowrap; } #t-poojamandhir .vl-offer-add { border: none; background: var(--vl-maroon); color: #fff; border-radius: 8px; padding: 7px 18px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; } /* Row 2 */ #t-poojamandhir .vl-offer-foot { border-top: 1px solid var(--vl-hairline); padding-top: 9px; } #t-poojamandhir .vl-offer-desc { font-size: 12.5px; line-height: 1.5; color: var(--vl-muted); max-height: 2.8em; overflow: hidden; margin: 0; } #t-poojamandhir .vl-offer-desc.is-open { max-height: none; } #t-poojamandhir .vl-offer-more { background: none; border: none; color: var(--vl-maroon); font-size: 12px; font-weight: 700; cursor: pointer; padding: 3px 0 0; } #t-poojamandhir .vl-offer-choices { display: flex; flex-wrap: wrap; gap: 8px; } #t-poojamandhir .vl-step { display: inline-flex; align-items: center; gap: 10px; } /* Collapsed view caps the visible offerings — 6 on desktop, 4 on mobile — same as the main site. All cards stay in the DOM; "View more" adds .is-expanded to reveal the rest. SSR-safe: the cap is CSS, no window-width JS. */ #t-poojamandhir .vl-offer-grid:not(.is-expanded) .vl-offer:nth-child(n + 7) { display: none; } #t-poojamandhir .vl-step-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--vl-hairline); background: #fff; cursor: pointer; } #t-poojamandhir .vl-chip-amt { border: 1px solid var(--vl-hairline); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; } #t-poojamandhir .vl-chip-amt.is-picked { border-color: var(--vl-maroon); background: rgba(110,23,23,.06); color: var(--vl-maroon); } /* hidden scroll-spy nav — accurate design has no sub-nav strip */ #t-poojamandhir .vl-tabs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============ DESKTOP STICKY BOOKING BAR ============ */ #t-poojamandhir .booking-bar-wrap { position: sticky; bottom: 0; z-index: 40; padding: 12px 0; pointer-events: none; } #t-poojamandhir .fixed-price-bar { width: min(1200px, 92%); margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 22px; background: #fff; border: 1px solid var(--vl-hairline); border-radius: 20px; box-shadow: var(--vl-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility .3s; pointer-events: auto; } #t-poojamandhir .fixed-price-bar.show { opacity: 1; visibility: visible; transform: translateY(0); } #t-poojamandhir .fixed-price-bar .flower-pic { display: grid; place-items: center; width: 48px; height: 44px; background: var(--vl-cream); box-shadow: 0 0 24px rgba(216, 162, 74, .45); border-radius: 999px; flex-shrink: 0; } #t-poojamandhir .fixed-price-bar .flower-pic img { width: 26px; } #t-poojamandhir .puja-name-details { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } #t-poojamandhir .puja-name-details p { margin: 0; font-family: var(--vl-sans); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--vl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #t-poojamandhir .puja-name-details h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--vl-sans); font-weight: 700; font-size: 26px; color: var(--vl-ink); } /* Strike ONLY the compare-at , never the payable price. The payable price is a (or bare text) and inherits the bold 26px above. */ #t-poojamandhir .puja-name-details h2 s { font-weight: 400; font-size: 15px; text-decoration: line-through; color: var(--vl-muted); } /* Standard CTA (Boss, 2026-08-14): maroon #6E1717, radius 8, white label + white arrow — same on the light sticky bar and the mobile bar. */ #t-poojamandhir .view-all-pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; border-radius: 8px; border: none; background: var(--vl-maroon); color: #fff; font-family: var(--vl-sans); font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; transition: transform .15s, background .2s; } #t-poojamandhir .view-all-pill:hover { transform: translateY(-1px); background: #5a1212; } #t-poojamandhir .view-all-pill .va-ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; } #t-poojamandhir .view-all-pill .va-ic img { width: 16px; } #t-poojamandhir .view-all-pill.notify { background: #0E8B3F; } #t-poojamandhir .view-all-pill.notify:hover { background: #0c7735; } #t-poojamandhir .view-all-pill:disabled { opacity: .6; cursor: default; } /* ============ MOBILE FIXED BAR (hidden on desktop) ============ */ #t-poojamandhir .pd-mobile-cta { display: none; } /* hide the embedded share component's own inline icon button — the hero tool triggers it */ #t-poojamandhir .pd-share-embed .share-icon-button { display: none; } #t-poojamandhir .pd-share-embed { display: block; } /* image lightbox */ #t-poojamandhir .image-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 8, 7, .9); display: grid; place-items: center; padding: 24px; } #t-poojamandhir .image-modal .modal-content { position: relative; max-width: 92vw; max-height: 90vh; } #t-poojamandhir .image-modal .modal-image { max-width: 92vw; max-height: 82vh; border-radius: 12px; } #t-poojamandhir .image-modal .modal-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #fff; cursor: pointer; } #t-poojamandhir .image-modal .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--vl-maroon); cursor: pointer; } #t-poojamandhir .image-modal .prev-btn { left: -54px; } #t-poojamandhir .image-modal .next-btn { right: -54px; } #t-poojamandhir .image-modal .modal-counter { text-align: center; color: #fff; margin-top: 12px; font-family: var(--vl-sans); } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { #t-poojamandhir .vl-layout { grid-template-columns: 1fr; gap: 26px; } #t-poojamandhir .vl-left { position: static; top: auto; order: 2; } #t-poojamandhir .vl-right { order: 1; } #t-poojamandhir .booking-bar-wrap { display: none; } #t-poojamandhir .pd-mobile-cta { display: block; } /* One booking CTA on mobile: the sticky bottom bar. Hide the title-bar's own Book / Notify / Select-Offerings button so it never doubles up. */ #t-poojamandhir .vl-topbar .vl-book { display: none; } /* The site header already carries a WhatsApp button on mobile, so the title bar's own WhatsApp icon is a duplicate — hide it (Boss, 2026-08-14). */ #t-poojamandhir .vl-act-wa { display: none; } } @media (max-width: 720px) { #t-poojamandhir .vl-topbar-row { gap: 14px; } #t-poojamandhir .vl-actions { margin-left: 0; width: 100%; } #t-poojamandhir .vl-book { flex: 1; justify-content: center; } #t-poojamandhir .vl-temple { grid-template-columns: 1fr; } #t-poojamandhir .vl-temple-img { aspect-ratio: 16 / 10; max-width: 320px; } #t-poojamandhir .vl-gal { grid-template-columns: repeat(2, 1fr); } #t-poojamandhir .vl-reviews { grid-template-columns: 1fr; } #t-poojamandhir .vl-offer-grid:not(.is-expanded) .vl-offer:nth-child(n + 5) { display: none; } } /* ============ MOBILE FIXED BOOKING BAR ============ */ #t-poojamandhir .pd-mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--vl-hairline); box-shadow: 0 -3px 16px rgba(33, 29, 25, .12); border-radius: 14px 14px 0 0; } /* Booking-closed state: no price, so the pooja name fills the left and the Notify button sits on the right (Boss, 2026-08-14). */ #t-poojamandhir .pd-mb-name { flex: 1; min-width: 0; font-family: var(--vl-sans); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--vl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Wishlist lives on the hero image (vl-hero-tools) — the sticky bar does not repeat it, so the heart here was a duplicate (Boss, 2026-08-14). */ #t-poojamandhir .pd-mb-wish { display: none; } #t-poojamandhir .pd-mb-price { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; } #t-poojamandhir .pd-mb-amt { font-family: var(--vl-sans); font-weight: 700; font-size: 22px; color: var(--vl-ink); } #t-poojamandhir .pd-mb-was { font-family: var(--vl-sans); font-size: 12px; color: var(--vl-muted); text-decoration: line-through; } #t-poojamandhir .pd-mb-price .pd-price-skel { width: 60px; height: 20px; background: rgba(110,23,23,.14); border-radius: 6px; } #t-poojamandhir .closetime { font-family: var(--vl-sans); font-size: 10px; color: var(--vl-muted); margin-top: 3px; white-space: nowrap; } #t-poojamandhir .pd-mb-btn { flex-shrink: 0; padding: 13px 22px; border: none; border-radius: 8px; background: var(--vl-maroon); color: #fff; font-family: var(--vl-sans); font-weight: 700; font-size: 15px; cursor: pointer; } #t-poojamandhir .pd-mb-btn.notify { background: #0E8B3F; color: #fff; } #t-poojamandhir .pd-mb-btn:disabled { opacity: .6; } /* skeleton */ #t-poojamandhir .pooja-details-skeleton { width: min(1240px, 92%); margin: 24px auto; display: flex; flex-direction: column; gap: 16px; } #t-poojamandhir .pooja-details-skeleton .skeleton { background: linear-gradient(90deg, #f0e9df 25%, #e7ddd0 37%, #f0e9df 63%); background-size: 400% 100%; animation: vlShimmer 1.4s ease infinite; border-radius: 10px; } #t-poojamandhir .skeleton-slider { height: 320px; } #t-poojamandhir .skeleton-title { height: 34px; width: 60%; } #t-poojamandhir .skeleton-text { height: 60px; } #t-poojamandhir .skeleton-price { height: 48px; width: 40%; } #t-poojamandhir .skeleton-info-line { height: 18px; width: 70%; } #t-poojamandhir .skeleton-info-line.short { width: 45%; } #t-poojamandhir .skeleton-countdown { height: 70px; } #t-poojamandhir .skeleton-tabs { height: 44px; } #t-poojamandhir .skeleton-card { height: 240px; } #t-poojamandhir .skeleton-bottom-btn { height: 54px; } @keyframes vlShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } Poojamandhir tenant — LIST / ACCOUNT / PAYMENT-STATUS page styles. Imported by poojamandhir.css. EVERY selector scoped #t-poojamandhir so it can never leak onto the flagship or another tenant. The listing pages (/pujas, /packages, /chadavas) share the .puja-card DOM with the home grid, so the card body (image, gold category, serif title, temple/date rows, Per-Booking price, maroon Book Now) is ALREADY skinned by poojamandhir-home.css. This file skins the page CHROME around those cards (hero search band, section heading, filter chips, image pill, filter modal) plus the Account and Payment-status pages. Tokens (from poojamandhir.css): --vl-maroon #6E1717, --vl-gold #D8A24A, --vl-cream #FAF7F1, --vl-ink #211D19, --vl-hairline #EDE4D7, --vl-serif Fraunces/Ramabhadra, --vl-sans Manrope/Noto Sans Telugu. ========================================================================== */ /* ============================================================================ A. LIST PAGES — /pujas, /packages, /chadavas (.pujas-page) ========================================================================== */ /* ---- Hero search band ---- */ #t-poojamandhir .puja-hero { background: var(--vl-cream); border-bottom: 1px solid var(--vl-hairline); } #t-poojamandhir .puja-hero-title { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 40px; line-height: 1.15; letter-spacing: -0.5px; color: var(--vl-maroon); } #t-poojamandhir .puja-hero-sub { font-family: var(--vl-sans); font-weight: 400; font-size: 15px; line-height: 1.6; color: #6B5C54; } /* Search field — white, hairline border, brand radius. */ #t-poojamandhir .puja-search-field { border: 1px solid var(--vl-hairline); border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } #t-poojamandhir .puja-search-field:focus-within { border-color: var(--vl-maroon); box-shadow: 0 0 0 3px rgba(110, 23, 23, 0.10); } #t-poojamandhir .puja-search-input { font-family: var(--vl-sans); color: var(--vl-ink); } #t-poojamandhir .puja-search-input::placeholder { color: rgba(33, 29, 25, 0.45); } /* Round maroon search-go button. */ #t-poojamandhir .puja-search-go { background: var(--vl-maroon); color: #fff; border-radius: 999px; } #t-poojamandhir .puja-search-go:hover { background: #5a1212; } /* Filter trigger — cream tile with hairline. */ #t-poojamandhir .puja-filter-btn { border: 1px solid var(--vl-hairline); background: #fff; color: var(--vl-maroon); border-radius: 14px; } #t-poojamandhir .puja-filter-btn:hover { border-color: var(--vl-maroon); background: var(--vl-cream); } #t-poojamandhir .puja-filter-count { background: var(--vl-maroon); color: #fff; } /* ---- Listing header + section title ---- */ #t-poojamandhir .puja-list-title { font-family: var(--vl-serif); font-optical-sizing: auto; font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -0.5px; color: var(--vl-ink); } /* ---- Filter chips ---- */ #t-poojamandhir .puja-chip { font-family: var(--vl-sans); font-weight: 600; font-size: 14px; color: rgba(33, 29, 25, 0.85); background: #fff; border: 1px solid var(--vl-hairline); border-radius: 999px; padding: 9px 18px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } #t-poojamandhir .puja-chip:hover { border-color: var(--vl-maroon); color: var(--vl-maroon); } #t-poojamandhir .puja-chip.is-on { background: var(--vl-maroon); border-color: var(--vl-maroon); color: #fff; } #t-poojamandhir .puja-chip-check { color: var(--vl-gold); } #t-poojamandhir .puja-chip-count { background: var(--vl-maroon); color: #fff; } #t-poojamandhir .puja-chip.is-on .puja-chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; } /* ---- Grid: keep the 3-col rhythm and gutter consistent with home ---- */ #t-poojamandhir .puja-list-grid { gap: 24px; } /* ---- Image category pill — cream chip, maroon label (not a stark white tag) ---- */ #t-poojamandhir .puja-pill { font-family: var(--vl-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.4px; color: var(--vl-maroon); background: rgba(250, 247, 241, 0.95); border: 1px solid rgba(216, 162, 74, 0.5); border-radius: 999px; } /* ---- End-of-list + fallback notices ---- */ #t-poojamandhir .end-of-data-container p, #t-poojamandhir .lang-fallback-note { font-family: var(--vl-sans); color: #6B5C54; } #t-poojamandhir .end-of-data-container small { font-family: var(--vl-sans); color: rgba(33, 29, 25, 0.5); } /* ---- Filter modal ---- */ #t-poojamandhir .puja-modal { border-radius: 18px; } #t-poojamandhir .puja-modal-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .puja-modal-tab.is-on { color: var(--vl-maroon); border-color: var(--vl-maroon); } #t-poojamandhir .puja-panel-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .puja-opt input:checked ~ .puja-opt-box, #t-poojamandhir .puja-opt-box:has(~ input:checked) { background: var(--vl-maroon); border-color: var(--vl-maroon); color: #fff; } #t-poojamandhir .puja-btn-clear { font-family: var(--vl-sans); font-weight: 600; color: var(--vl-maroon); border: 1px solid var(--vl-hairline); border-radius: 8px; } #t-poojamandhir .puja-btn-clear:hover { border-color: var(--vl-maroon); } #t-poojamandhir .puja-btn-apply { font-family: var(--vl-sans); font-weight: 700; background: var(--vl-maroon); color: #fff; border-radius: 8px; } #t-poojamandhir .puja-btn-apply:hover { background: #5a1212; } #t-poojamandhir .puja-btn-apply-count { background: rgba(255, 255, 255, 0.22); color: #fff; } /* ---- List pages: mobile ---- */ @media (max-width: 1024px) { #t-poojamandhir .puja-hero-title { font-size: 28px; } #t-poojamandhir .puja-list-title { font-size: 24px; } } /* ============================================================================ B. ACCOUNT — poojamandhir editorial redesign (Boss, 2026-08-14) The account shell reads a --maroon/--ink/--line/--gold/--serif token layer (brand-aliases) that defaulted to the FLAGSHIP palette; the old poojamandhir theme only recoloured a handful of classes, so it read as the flagship look. Here we (1) remap the WHOLE token layer to the poojamandhir palette, and (2) restyle the shell to the pooja-details editorial language — cream ground, Fraunces serif heads, a gold-dash signature, white hairline cards with soft shadows, gold-ringed avatar/icons and the standard maroon (radius-8) buttons. Scoped to #t-poojamandhir so no other tenant shifts. The token remap must sit on BOTH the page root AND app-account-sidebar (the sidebar re-declares the tokens on its own :host via the mixin, shadowing an inherited value). ========================================================================== */ #t-poojamandhir .account-page, #t-poojamandhir app-account-sidebar { --maroon: var(--vl-maroon); --maroon-dk: #5a1212; --maroon-deep: #3a0d0d; --ink: var(--vl-ink); --cream: var(--vl-cream); --gold: var(--vl-gold); --gold-2: #E8C56D; --line: var(--vl-hairline); --muted: #6B5C54; --serif: var(--vl-serif); --sans: var(--vl-sans); /* card/border alpha tints → poojamandhir hairline */ --bp2-a25: var(--vl-hairline); --bp2-a3: var(--vl-hairline); --bp2-a35: var(--vl-hairline); } /* Cream page ground (was flat white). */ #t-poojamandhir .account-page { background: var(--vl-cream); } #t-poojamandhir .account-crumb-current { color: var(--vl-maroon); } /* ---- login prompt (logged-out) ---- */ #t-poojamandhir .account-login { border: 1px solid var(--vl-hairline); border-radius: 20px; background: #fff; box-shadow: var(--vl-shadow-md); } #t-poojamandhir .account-login-ic { background: var(--vl-maroon); color: #fff; box-shadow: 0 0 0 5px rgba(216, 162, 74, 0.18); } #t-poojamandhir .account-login-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .account-login-btn { background: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-login-btn:hover { background: #5a1212; } /* ---- section head: bigger serif + gold-ringed maroon icon chip ---- */ #t-poojamandhir .account-section-title { font-family: var(--vl-serif); font-weight: 600; font-size: 30px; letter-spacing: -0.3px; color: var(--vl-ink); } #t-poojamandhir .account-section-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--vl-maroon); box-shadow: 0 0 0 3px rgba(216, 162, 74, 0.18); } /* ---- sidebar → premium hairline card with a gold-dash signature ---- */ #t-poojamandhir .account-sidebar { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 18px; box-shadow: var(--vl-shadow-sm); padding: 14px; } #t-poojamandhir .account-nav::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--vl-gold); margin: 6px 0 14px 12px; } #t-poojamandhir .account-nav-item { border-radius: 10px; padding: 14px 16px; } #t-poojamandhir .account-nav-item:hover { background: var(--vl-cream); color: var(--vl-maroon); } #t-poojamandhir .account-nav-item.is-on { background: var(--vl-maroon); color: #fff; position: relative; } #t-poojamandhir .account-nav-item.is-on::before { content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 2px; background: var(--vl-gold); } #t-poojamandhir .account-logout { border-radius: 10px; border: 1px solid var(--vl-hairline); color: var(--vl-maroon); } #t-poojamandhir .account-logout:hover { background: var(--vl-cream); } /* ---- profile card: white hairline card, gold-ringed maroon avatar ---- */ #t-poojamandhir .account-profile { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 18px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .account-avatar { background: var(--vl-maroon); box-shadow: 0 0 0 4px rgba(216, 162, 74, 0.22); } #t-poojamandhir .account-profile-name { font-family: var(--vl-serif); font-weight: 600; font-size: 30px; color: var(--vl-ink); } #t-poojamandhir .account-since { background: rgba(216, 162, 74, 0.15); border: 1px solid rgba(216, 162, 74, 0.42); color: #7A5A1E; font-weight: 700; } #t-poojamandhir .account-edit { border-radius: 8px; border: 1px solid var(--vl-hairline); color: var(--vl-maroon); background: #fff; } #t-poojamandhir .account-edit:hover { background: var(--vl-cream); } /* profile edit form */ #t-poojamandhir .account-edit-input { border: 1px solid var(--vl-hairline); border-radius: 10px; } #t-poojamandhir .account-edit-input:focus { border-color: var(--vl-maroon); outline: none; box-shadow: 0 0 0 3px rgba(110, 23, 23, 0.10); } #t-poojamandhir .account-edit-save { background: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-edit-cancel { border-radius: 8px; border: 1px solid var(--vl-hairline); } /* ---- stat tiles → white cards, gold-ringed icons, hover lift ---- */ #t-poojamandhir .account-stat, #t-poojamandhir .account-stat.pink, #t-poojamandhir .account-stat.cream, #t-poojamandhir .account-stat.sage { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } #t-poojamandhir .account-stat:hover { transform: translateY(-3px); box-shadow: var(--vl-shadow-md); border-color: rgba(216, 162, 74, 0.5); } #t-poojamandhir .account-stat-ic, #t-poojamandhir .account-stat.pink .account-stat-ic, #t-poojamandhir .account-stat.cream .account-stat-ic, #t-poojamandhir .account-stat.sage .account-stat-ic { background: rgba(216, 162, 74, 0.16); color: var(--vl-maroon); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(216, 162, 74, 0.35); } #t-poojamandhir .account-stat-title { font-family: var(--vl-serif); font-weight: 600; font-size: 16px; color: var(--vl-ink); } #t-poojamandhir .account-stat-arrow { background: var(--vl-maroon); color: #fff; border-radius: 50%; } /* ---- recent activity cards ---- */ #t-poojamandhir .account-activity-card { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; } #t-poojamandhir .account-activity-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .account-activity-btn { background: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-activity-btn:hover { background: #5a1212; } /* ---- shared add/text buttons + sub-title (carry to the other account pages) ---- */ #t-poojamandhir .account-add-btn { background: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-text-btn { border: 1px solid var(--vl-hairline); color: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-text-btn:hover { background: var(--vl-maroon); color: #fff; } #t-poojamandhir .account-sub-title { font-family: var(--vl-serif); color: var(--vl-ink); } /* ---- security banner → warm gold note ---- */ #t-poojamandhir .account-secure { background: rgba(216, 162, 74, 0.10); border: 1px solid rgba(216, 162, 74, 0.30); color: #6B5C54; border-radius: 14px; } /* ============================================================================ B2. ACCOUNT SUB-PAGE CONTENT — bookings, subscriptions, wishlist, address, wallet, support, about. The shared shell (sidebar, section heads, buttons, tokens) already carries; here we unify the per-page CONTENT into the same editorial card language — white hairline cards, soft shadows, serif titles, gold-ringed feature icons, standard maroon buttons. Visual props only (no layout changes) so the base grids/spacing stay intact. ========================================================================== */ /* ---- Bookings / Subscriptions (.sub-* system) ---- */ #t-poojamandhir .sub-card { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .sub-card-title, #t-poojamandhir .sub-card-puja { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .sub-card-id { color: var(--vl-maroon); } #t-poojamandhir .sub-chip { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 999px; color: var(--vl-ink); font-family: var(--vl-sans); font-weight: 600; } #t-poojamandhir .sub-chip:hover { border-color: var(--vl-maroon); color: var(--vl-maroon); } #t-poojamandhir .sub-chip.is-on { background: var(--vl-maroon); border-color: var(--vl-maroon); color: #fff; } #t-poojamandhir .sub-chip-check { color: var(--vl-gold); } #t-poojamandhir .sub-btn { border-radius: 8px; } #t-poojamandhir .sub-btn--dark { background: var(--vl-maroon); color: #fff; } #t-poojamandhir .sub-btn--ghost { border: 1px solid var(--vl-hairline); color: var(--vl-maroon); background: #fff; } /* ---- Empty states (bookings / subscriptions) ---- */ #t-poojamandhir .empty-state { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 18px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .empty-state h3 { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .empty-icon { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 6px; border-radius: 50%; background: rgba(216, 162, 74, 0.14); box-shadow: inset 0 0 0 1px rgba(216, 162, 74, 0.35); } #t-poojamandhir .empty-icon svg { width: 40px; height: 40px; fill: var(--vl-maroon); } /* ---- Support (help cards, FAQ, ticket form) ---- */ #t-poojamandhir .account-help-card { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .account-help-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .account-help-link { color: var(--vl-maroon); } #t-poojamandhir .account-faq-item { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 14px; } #t-poojamandhir .account-faq-q { font-family: var(--vl-serif); font-weight: 600; font-size: 17px; color: var(--vl-ink); } #t-poojamandhir .account-faq-toggle { color: var(--vl-maroon); } #t-poojamandhir .account-ticket { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 18px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .account-input, #t-poojamandhir .account-textarea, #t-poojamandhir .account-phone { border: 1px solid var(--vl-hairline); border-radius: 10px; } #t-poojamandhir .account-input:focus, #t-poojamandhir .account-textarea:focus, #t-poojamandhir .account-phone:focus-within { border-color: var(--vl-maroon); outline: none; box-shadow: 0 0 0 3px rgba(110, 23, 23, 0.10); } #t-poojamandhir .account-submit { background: var(--vl-maroon); border-radius: 8px; } #t-poojamandhir .account-submit:hover { background: #5a1212; } /* ---- Wallet ---- */ #t-poojamandhir .account-wallet-card { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 18px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .account-wallet-brand { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .account-wallet-chip, #t-poojamandhir .account-wallet-soon, #t-poojamandhir .account-wallet-feat-tag { background: var(--vl-gold); color: #3A2A0C; border-radius: 999px; } #t-poojamandhir .account-wallet-feat { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 14px; } #t-poojamandhir .account-wallet-feat-ic { background: rgba(216, 162, 74, 0.16); color: var(--vl-maroon); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(216, 162, 74, 0.30); } #t-poojamandhir .account-wallet-feat-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } /* ---- About ---- */ #t-poojamandhir .account-about-head { background: rgba(216, 162, 74, 0.10); border: 1px solid rgba(216, 162, 74, 0.28); border-radius: 20px; } #t-poojamandhir .account-about-lead, #t-poojamandhir .account-feature-title, #t-poojamandhir .account-about-stat-num { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .account-about-stat-num { color: var(--vl-maroon); } #t-poojamandhir .account-feature { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 16px; box-shadow: var(--vl-shadow-sm); } #t-poojamandhir .account-feature-ic { background: var(--vl-maroon); color: #fff; border-radius: 12px; box-shadow: 0 0 0 3px rgba(216, 162, 74, 0.18); } #t-poojamandhir .account-about-stat { background: #fff; border: 1px solid var(--vl-hairline); border-radius: 14px; } /* ============================================================================ C. PAYMENT-STATUS (/status, /paylater-status) (.sk-* system) Auth-gated + needs a live booking context; skinned from the base DOM. Colour already forwards to --brand-* (maroon); here we swap the type to Fraunces/Manrope via the --ps-serif / --ps-sans aliases the page defines. ========================================================================== */ #t-poojamandhir .payment-status-container, #t-poojamandhir .payment-status-skeleton { --ps-serif: var(--vl-serif); --ps-sans: var(--vl-sans); /* The .sk design funnels its colour through the base --brand-* tokens, which default to the FLAGSHIP maroon (#8B0E01) and an ORANGE accent (#FF5722). poojamandhir never remapped them, so the page rendered off-brand (orange badge rings, orange step numbers, orange "paid" amount). Remap the exact tokens the .sk SCSS reads to the poojamandhir maroon + gold, scoped to this page only so no approved surface shifts (Boss, 2026-08-14). */ --brand-primary: var(--vl-maroon); /* #6E1717 */ --brand-primary-dark-b: #5a1212; /* primary-button hover */ --brand-primary-accent: var(--vl-gold); /* #D8A24A — was #FF5722 orange */ --brand-primary-accent-dark: #B0801F; /* darker gold (hero-strong accent) */ --brand-ink: var(--vl-ink); --bp-a55: rgba(110, 23, 23, 0.5); /* badge glow (was maroon rgba) */ --bpac-a5: rgba(216, 162, 74, 0.45); /* "paid" chip shadow (was orange) */ --bpac-a7: rgba(216, 162, 74, 0.5); /* primary-button shadow (was orange) */ } /* Booking-id chip + summary/next cards — brand hairline + radius. */ #t-poojamandhir .sk-card { border-radius: 16px; } #t-poojamandhir .sk-orderid strong { color: var(--vl-maroon); } #t-poojamandhir .sk-next-title, #t-poojamandhir .sk-summary-name { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } #t-poojamandhir .sk-paid .amt { font-family: var(--vl-serif); color: var(--vl-maroon); } /* Standard poojamandhir button radius (the .sk kit ships 12px pills). */ #t-poojamandhir .sk-btn { border-radius: 8px; } #t-poojamandhir .sk-card { border: 1px solid var(--vl-hairline); box-shadow: var(--vl-shadow-sm); } /* ============================================================================ C2. CHECKOUT — user-details-form (.variant-checkout-classic / .ck-* system) Same pattern as the .sk status page: the whole checkout funnels its colour through a --ck-* token layer that forwards to the base --brand-* set (flagship maroon + ORANGE accent) and ships Cormorant serif. Remapping those tokens (and the --brand-* they read, since the ck SCSS also uses them directly) recolours the ENTIRE checkout — stepper, devotee form, order rail, review/payment, prasadam, safety strip — to the poojamandhir maroon + gold + cream + Fraunces, scoped to this page so nothing else shifts (Boss, 2026-08-14). ========================================================================== */ #t-poojamandhir .variant-checkout-classic { /* the --brand-* the ck tokens + the ck SCSS read directly */ --brand-primary: var(--vl-maroon); --brand-primary-dark-b: #5a1212; --brand-primary-accent: var(--vl-gold); /* gold, was #FF5722 orange */ --brand-primary-accent-dark: #B0801F; --brand-primary-accent-c: #B0801F; --brand-ink: var(--vl-ink); --brand-muted: #6B5C54; --bpac-a12: rgba(216, 162, 74, 0.12); /* --ck-* layer: type + neutral lines → poojamandhir */ --ck-serif: var(--vl-serif); --ck-sans: var(--vl-sans); --ck-line: var(--vl-hairline); --ck-field: var(--vl-hairline); --ck-card-line: var(--vl-hairline); --ck-peach: var(--vl-cream); --ck-peach-line: rgba(216, 162, 74, 0.30); background: var(--vl-cream); } /* Standard maroon radius-8 on the primary checkout CTAs (the kit ships larger radii). */ #t-poojamandhir .ck-order-cta, #t-poojamandhir .ck-sticky-btn, #t-poojamandhir .ck-update-cta, #t-poojamandhir .ck-phone-verify, #t-poojamandhir .ckp-add, #t-poojamandhir .ck-addr-save, #t-poojamandhir .ck-apply-btn { border-radius: 8px; } /* ============================================================================ D. LOGIN / OTP MODAL (app-otp-modal — .modal-content.mobile-modal / .otp-modal) Shared component (ViewEncapsulation.None) rendered under the tenant , so #t-poojamandhir scopes it. Repaint the card, title, primary pill button, inputs and OTP boxes into the poojamandhir palette so login matches the theme. ========================================================================== */ #t-poojamandhir .modal-content.mobile-modal, #t-poojamandhir .modal-content.otp-modal { border-radius: 22px; border: 1px solid var(--vl-hairline); box-shadow: 0 24px 60px rgba(40, 10, 5, 0.28); } #t-poojamandhir .modal-content .modal-title { font-family: var(--vl-serif); font-weight: 600; color: var(--vl-ink); } /* Primary CTA → maroon 8px button with a white arrow, matching the standard poojamandhir "Book Now →" action button everywhere else. */ #t-poojamandhir .modal-content .pill-btn.primary { background: var(--vl-maroon); border-color: var(--vl-maroon); border-radius: 8px; color: #fff; font-family: var(--vl-sans); font-weight: 700; gap: 8px; } #t-poojamandhir .modal-content .pill-btn.primary:hover:not([disabled]) { background: #5a1212; } #t-poojamandhir .modal-content .pill-btn.primary .pill-text, #t-poojamandhir .modal-content .pill-btn.primary .continue-label { color: #fff; } /* Show the trailing arrow, tinted white to sit on maroon (the asset is a red arrow that clashed, which is why it used to be hidden). Strip the base's white circular chip so it reads as a bare arrow, matching the standard button. */ #t-poojamandhir .modal-content .pill-btn.primary .pill-icon { display: inline-flex; background: transparent; box-shadow: none; } #t-poojamandhir .modal-content .pill-btn.primary .pill-icon img { filter: brightness(0) invert(1); } /* The OTP step's label already ends in "→", so its pill-icon would be a second arrow — hide it there and keep the single text arrow. */ #t-poojamandhir .modal-content.otp-modal .pill-btn.primary .pill-icon { display: none; } /* Mobile-number + country field. */ #t-poojamandhir .modal-content .mobile-input-container, #t-poojamandhir .modal-content .country-code { border-color: var(--vl-hairline); } #t-poojamandhir .modal-content .mobile-input:focus { outline: none; } #t-poojamandhir .modal-content .mobile-input-container:focus-within { border-color: var(--vl-maroon); } /* OTP digit boxes. */ #t-poojamandhir .modal-content .otp-input { border: 1px solid var(--vl-hairline); border-radius: 12px; color: var(--vl-ink); font-family: var(--vl-sans); } #t-poojamandhir .modal-content .otp-input:focus { outline: none; border-color: var(--vl-maroon); box-shadow: 0 0 0 3px rgba(110, 23, 23, 0.12); } /* Links + accents. */ #t-poojamandhir .modal-content .consent-note a, #t-poojamandhir .modal-content .resend-link, #t-poojamandhir .modal-content .timer { color: var(--vl-maroon); } #t-poojamandhir .modal-content .resend-link { cursor: pointer; font-weight: 600; } /* ============================================================================ E. FOOTER — poojamandhir minimal footer (.vmf-veda, rendered only for this tenant by the vm-footer component branch). Light cream band: brand + about + socials on top, the trust-proof row, a contact line, then copyright + legal. ========================================================================== */ #t-poojamandhir .vmf-veda { background: var(--vl-cream); border-top: 1px solid var(--vl-hairline); color: var(--vl-ink); } #t-poojamandhir .vmf-veda-wrap { max-width: 1200px; margin: 0 auto; padding: 34px 24px 0; } #t-poojamandhir .vmf-veda-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } #t-poojamandhir .vmf-veda-brand { max-width: 560px; } #t-poojamandhir .vmf-veda-logo img { height: 34px; width: auto; } #t-poojamandhir .vmf-veda-about { margin-top: 10px; font-family: var(--vl-sans); font-size: 14px; line-height: 1.6; color: #6B5C54; } #t-poojamandhir .vmf-veda-social { display: inline-flex; gap: 12px; flex: 0 0 auto; } #t-poojamandhir .vmf-veda-social .sicon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, filter 0.15s ease; } #t-poojamandhir .vmf-veda-social .sicon:hover { transform: translateY(-2px); filter: brightness(1.08); } #t-poojamandhir .vmf-veda-social .sicon.fb { background: #1877F2; } #t-poojamandhir .vmf-veda-social .sicon.ig { background: #E1306C; } #t-poojamandhir .vmf-veda-social .sicon.x { background: #14171A; } #t-poojamandhir .vmf-veda-social .sicon.yt { background: #FF0000; } #t-poojamandhir .vmf-veda-proof { display: flex; flex-wrap: wrap; gap: 28px; margin: 22px 0 20px; } #t-poojamandhir .vmf-veda-proof span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vl-sans); font-size: 14px; font-weight: 500; color: var(--vl-ink); } #t-poojamandhir .vmf-veda-proof img { width: 18px; height: 18px; } #t-poojamandhir .vmf-veda-mid { border-top: 1px solid var(--vl-hairline); padding: 15px 0; display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; } #t-poojamandhir .vmf-veda-mid a, #t-poojamandhir .vmf-veda-mid > span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--vl-sans); font-size: 13px; color: #6B5C54; text-decoration: none; } #t-poojamandhir .vmf-veda-mid a:hover { color: var(--vl-maroon); } #t-poojamandhir .vmf-veda-base { border-top: 1px solid var(--vl-hairline); padding: 15px 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } #t-poojamandhir .vmf-veda-copy { font-family: var(--vl-sans); font-size: 13px; color: #6B5C54; } #t-poojamandhir .vmf-veda-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; } #t-poojamandhir .vmf-veda-legal a { position: relative; font-family: var(--vl-sans); font-size: 13px; color: #6B5C54; text-decoration: none; } #t-poojamandhir .vmf-veda-legal a:not(:last-child)::after { content: "|"; position: absolute; right: -11px; color: rgba(33, 29, 25, 0.25); } #t-poojamandhir .vmf-veda-legal a:hover { color: var(--vl-maroon); } @media (max-width: 640px) { #t-poojamandhir .vmf-veda-top { flex-direction: column; } #t-poojamandhir .vmf-veda-base { flex-direction: column; align-items: flex-start; } } #t-poojamandhir .account-profile::after, #t-poojamandhir .account-wallet-card::after{ display:none; }