/* Devotsav — tenant theme. Scope: #t-devotsav ONLY. Tokens sampled from .claude/theme-work/devotsav/design/{home,pooja-details}.jpg Spec: .claude/theme-work/devotsav/spec.md Primary action is DEEP GREEN #098b62 (green -> orange -> maroon -> green, 2026-08-27); #8C0E00 stays the ICON/accent maroon; there is no gold. */ #t-devotsav{ /* ── canonical brand remap (auto-themes account / payment-status / checkout) ── */ --brand-primary:#098b62; --brand-primary-dark:#087A56; --brand-accent:#8C0E00; --brand-accent-dark:#731513; --brand-ink:#323232; --brand-muted:#6B6B6B; --brand-line:#E7E1E1; --brand-ground:#FFFAF4; --brand-surface:#FFFFFF; /* Poppins/Cormorant lead, the main site's Telugu faces follow. Neither Latin face has Telugu coverage, so a Telugu glyph never reaches them and falls through to Lohit/Ramabhadra — Latin is untouched. Without the fallback the glyph landed on system-ui (Boss, 2026-08-27). */ --brand-serif:'Ramabhadra','Cormorant Infant',Georgia,serif; --brand-sans:'Lohit Telugu', 'Poppins',system-ui,-apple-system,sans-serif; /* ── devotsav palette ── */ --dv-white:#FFFFFF; --dv-header:#F9F8F4; --dv-cream:#FFFAF4; --dv-peach:#FFEDD5; --dv-ink:#323232; --dv-ink-card:#222222; --dv-muted:#6B6B6B; --dv-maroon:#8C0E00; --dv-wordmark:#731513; --dv-flame:#FE4C06; --dv-chip-ink:#72101F; /* The primary action, and its hover at 88% of each channel. It moved green → orange → maroon → green again across 2026-08-27, so the --dv-green* names read true once more — but the VALUE is the deep green #098b62, not the original #00B05F, so do not "restore" it from an older file. Three greens live here and they are NOT interchangeable: this one is the action, --dv-green-badge is a success marker, and --dv-whatsapp is WhatsApp's own brand colour. Only this pair follows the CTA. */ --dv-green:#098b62; --dv-green-dark:#087A56; --dv-green-badge:#32A56E; --dv-whatsapp:#098b62; --dv-terracotta:#C15608; --dv-tint-pink:#EFD7D7; --dv-tint-yellow:#FEEFC4; --dv-tint-green:#CEE9D6; --dv-tint-rose:#FAD2D0; --dv-chip-cream:#FBF4E4; --dv-chip-mauve:#F1E8E9; --dv-clock-bg:#FBF5F5; /* ── THE container measure (Boss, 2026-08-28) ───────────────────────────── ONE width for every surface — header, home, details, footer and the list pages — and it is the FLAGSHIP's: styles.scss ships `.container{ width:min(1280px,92%) }`, so Devotsav now sits on the same grid as main Vedamandir instead of its own per-section measures. This replaces the old --dv-cw scale factor (.92 applied to each design width). That kept the mock's three-width rhythm — header 1520, hero 1548, journey/grid 1240, how-it-works 1132, details 1384, footer 1335 — and those figures are still written into the comments below as the derivation, but the rendered measure is this single number. Widen or narrow the whole tenant here and nowhere else. The % fallbacks (92% / 100% / calc(100% - 96px)) are deliberately kept: they already track the viewport and are what small screens land on. The section-head ornament stays at its measured 1174 — narrower than 1280, so it sits inside the container on every surface with no overhang. */ --dv-cmax:1280px; --dv-radius-btn:8px; --dv-radius-card:12px; --dv-radius-panel:14px; /* THE per-language control spot for every surface outside .dv-home (which keeps its own --dv-font-* pair). Telugu body → Lohit, Telugu headings and CTAs → Ramabhadra, matching what styles.scss already does for the main site (`#te-text h1..h6, button { font-family:'Ramabhadra' }`). ORDER IS THE WHOLE MECHANISM — the browser walks the stack per GLYPH, not per element, so the Latin face must lead and the Telugu face must trail. Ramabhadra is a Telugu face that also ships rough Latin glyphs: put it first and every English heading and CTA renders in it (Boss, 2026-08-27: "use english noto sans font for this because its in english"). Noto Sans leads instead — it has NO Telugu coverage, so Telugu still falls through to Ramabhadra exactly as before, and English gets a real sans. */ --dv-sans:var(--brand-sans); --dv-serif:var(--brand-serif); --dv-title:'Ramabhadra','Noto Sans',system-ui,-apple-system,sans-serif; /* Ramabhadra (Telugu titles) is single-weight — faux-bolding it looks broken. */ font-synthesis:none; } /* Headings and CTAs take the Ramabhadra stack; everything else keeps Lohit. ~60 rules (most of pooja-details) name var(--dv-sans) inside a `font:` shorthand, and a shorthand on the element beats any generic font-family rule — so the TOKEN is rebound on these elements instead of re-declaring the font on all of them. Custom properties cascade on their own, and (1,0,1) here out- ranks the (1,0,0) root above, so the same shorthand resolves to the title stack on a heading or button and the body stack everywhere else. */ #t-devotsav :is(h1,h2,h3,h4,h5,h6,button,.dv-btn,.dv-btn-plain,.book-btn,.nav-wa){ --dv-sans:var(--dv-title); /* the per-surface aliases are declared on CONTAINERS, so a heading inside one inherits the value already substituted there — each needs rebinding too. */ --dv-font-sans:var(--dv-title); --dvl-sans:var(--dv-title); --ck-sans:var(--dv-title); --ps-sans:var(--dv-title); --sk-sans:var(--dv-title); } /* ══════════════════════════════════════════════════════════════════════════ HEADER — presenter: components/vm-header/themes/devotsav/header Design: design/home.jpg + design/pooja-details.jpg, exported 3× from a 1920 frame (both canvas heights divide by 3 and are odd, so 2×/4× are out). Every number below is /3 of a measured source pixel span: band 318px → 106px, ground #F9F8F4, NO border, NO blur nav link "Home" cap-to-baseline 35px → 11.67px ⇒ 16px/500 Poppins link gap 127px → 42px (glyph edge to glyph edge) logo lockup 577×134 → 192×45 ⇒ constrain by HEIGHT (45px), width auto WhatsApp pill 430×110 → 143×37, radius 8, right edge 199px from 1920 pill label 304×25 → 101×8.3 cap ⇒ 12px/600, centred, white, 21px side padding (⚠ see the caveat below) The nav+logo run is centred on the PAGE (measured group centre 958.8 ≈ 960), NOT the logo — the left arm is simply the narrower one. A plain justify-content:center flex row reproduces that exactly. ⚠ CAVEAT — the pill LABEL's typeface is not Poppins. At the mock's cap height (8.3px) "WhatsApp Support" measures 101px; Poppins 600 needs ~124px for the same cap height, i.e. the mock's face is ~18% narrower (Google Sans/Product Sans shape). The nav links DO match Poppins (Home 47.3 vs 46.7, Account 64.6 vs 63.0, measured). So the pill is sized by its TOKENS — height 37, radius 8, fill, 21px padding, 12px/600 label — and its width floats with the CMS label rather than being frozen at the mock's 144px. Needs a Boss call on the button font before the remaining pages, since it affects every CTA. ══════════════════════════════════════════════════════════════════════════ */ #t-devotsav .dv-hdr .nav{ background:var(--dv-header); border-bottom:0; /* the mock's band is flat cream — the flagship's blur tints it grey */ backdrop-filter:none; -webkit-backdrop-filter:none; } /* position:relative so the WhatsApp pill AND the lockup can be parked on the container's edges without joining the centred run. Boss (2026-08-27): logo LEFT, menu CENTRED. The template splits the links around .brand (left arm / brand / right arm); lifting .brand out of the flow closes the two arms into one run, and the 42px gap here matches the in-arm link gap so the seam is invisible — it reads as a single evenly-spaced menu centred on the page. */ #t-devotsav .dv-hdr .nav-inner{ position:relative; width:min(var(--dv-cmax),92%); /* design 1520 → flagship measure */ height:106px; display:flex; align-items:center; justify-content:center; gap:42px; } #t-devotsav .dv-hdr .nav-links{ display:flex; align-items:center; gap:42px; justify-self:auto; } #t-devotsav .dv-hdr .nav-links a{ font-family:var(--dv-sans); font-size:16px; font-weight:500; line-height:1.2; letter-spacing:0; text-transform:none; color:var(--dv-ink); padding:6px 0; white-space:nowrap; } #t-devotsav .dv-hdr .nav-links a:hover{ color:var(--dv-wordmark); } /* The mock draws no active affordance at all (every link is the same #323232). Colour-only is the smallest honest keep — dropping it entirely would leave the header with no "where am I". The flagship's 2px underline bar is off. */ #t-devotsav .dv-hdr .nav-links a.is-active{ color:var(--dv-wordmark); } #t-devotsav .dv-hdr .nav-links a.is-active::before{ display:none; } /* Both mocks park the lockup's ink 7px ABOVE the band's centre (ink centre 45.7 in a 0-106 band, while the nav text and — in the pooja-details mock — the pill are centred at ~52.8). Two independent mocks agreeing is intent, not a slip: the lotus base carries the visual weight low, so the lockup is optically raised. Desktop only; the mobile bar re-centres it. Parked absolutely on the container's LEFT edge (Boss, 2026-08-27) so the menu can centre on the page independently of the lockup's width — the admin can re-upload a wider or narrower lockup and the menu will not shift. */ #t-devotsav .dv-hdr .brand{ position:absolute; left:0; top:50%; justify-self:auto; padding:0; gap:0; transform:translateY(calc(-50% - 7px)); } /* HEIGHT, never width — the admin can re-upload the lockup at any aspect. 60px, not the mock's measured 45px (Boss, 2026-08-27). */ #t-devotsav .dv-hdr .brand img{ width:auto; height:60px; display:block; } #t-devotsav .dv-hdr .nav-actions{ position:absolute; right:0; top:50%; transform:translateY(-50%); gap:12px; } #t-devotsav .dv-hdr .nav-wa{ box-sizing:border-box; height:37px; min-width:144px; padding:0 18px; gap:8px; border:0; border-radius:var(--dv-radius-btn); background:var(--dv-whatsapp); justify-content:center; font-family:var(--dv-sans); } #t-devotsav .dv-hdr .nav-wa:hover{ background:#07704f; box-shadow:none; } /* The mock draws the pill label-only, but Boss (2026-08-25) kept the glyph and the main site's behaviour: icon in the top-right corner at every size. The shared asset is green-on-transparent — brightness(0)+invert makes it white without adding a second copy of the icon to the repo. The "Need Help?" second line stays dropped: the mock's pill is a single 37px row. */ #t-devotsav .puja-yaga span { line-height: 130%; } #t-devotsav .dv-hdr .nav-wa img{ display:block; width:16px; height:16px; flex:0 0 auto; filter:brightness(0) invert(1); } #t-devotsav .dv-hdr .nav-wa-hint{ display:none; } #t-devotsav .dv-hdr .nav-wa-text{ align-items:center; } #t-devotsav .dv-hdr .nav-wa-label{ color:#fff; font-family:var(--dv-sans); font-size:12px; font-weight:600; line-height:1; white-space:nowrap; } /* ── header, 1025…1280 ──────────────────────────────────────────────────── The lockup is pinned left and the menu is centred on the PAGE, so the space between them is (container − menu)/2 − logo width — and that closes as the viewport narrows. At 60px tall the lockup measures ~197 wide, which collides with the centred menu just above 1024, the last width before the links hide. Both levers ease off here rather than one doing all the work, and the height cut matters most: the admin can re-upload the lockup at ANY aspect, so a wider one would collide sooner. */ @media (max-width:1280px){ #t-devotsav .dv-hdr .brand img{ height:48px; } #t-devotsav .dv-hdr .nav-links{ gap:30px; } } /* ── header, ≤1024 ──────────────────────────────────────────────────────── No mobile mock exists. Derived, not invented: keep the desktop identity (cream band, centred lockup) and fall back to the flagship's icon-only WhatsApp button, which is the only thing that fits beside it at 430. */ @media (max-width:1024px){ /* The base positions .nav-actions ABSOLUTELY, which is fine for a 36px icon-only button but overlaps the wordmark by 40px once the label is shown (Boss's mobile spec). Return it to flow and lay the bar out as a row: a centred logo cannot coexist with a right-aligned 159px labelled button at 430 unless the lockup shrinks below ~90px, which is unreadable. */ #t-devotsav .dv-hdr .nav-inner{ height:64px; justify-content:space-between; gap:10px; } #t-devotsav .dv-hdr .nav-actions{ position:static; transform:none; inset:auto; } /* the base hides these at ≤1024; the id-scoped display:flex above would otherwise out-rank it and drag six links onto a 430px bar. */ #t-devotsav .dv-hdr .nav-links{ display:none; } /* back into the flow — the desktop rule parks it absolutely on the left so the menu can centre; here space-between needs it as a real flex item. */ #t-devotsav .dv-hdr .brand{ position:static; transform:none; } #t-devotsav .dv-hdr .brand img{ height:34px; } /* Boss (2026-08-25): mobile keeps the LABEL as well as the glyph, and the button is MAROON here, not green — the green pill fights the logo at this size, and maroon ties the action back to the wordmark. */ #t-devotsav .dv-hdr .nav-wa{ min-width:0; width:auto; height:34px; padding:0 11px; gap:6px; background:var(--dv-whatsapp); } #t-devotsav .dv-hdr .nav-wa:hover{ background:var(--dv-wordmark); } #t-devotsav .dv-hdr .nav-wa img{ display:block; width:15px; height:15px; flex:0 0 auto; /* the shared asset is green-on-transparent; brightness(0)+invert makes it white without adding a second copy of the icon to the repo. */ filter:brightness(0) invert(1); } #t-devotsav .dv-hdr .nav-wa-text{ display:flex; } #t-devotsav .dv-hdr .nav-wa-label{ font-size:11px; } } /* ── minimal mobile bar + mobile bottom nav ─────────────────────────────── Both live inside the header component and are shared chrome, so neither mock draws them. Not invented: only the flagship's colours and type are swapped for this tenant's tokens, so no vedamandir maroon/blue leaks onto a devotsav surface. Geometry is left exactly as the base sets it. */ #t-devotsav .dv-hdr .vm-minibar{ background:var(--dv-header); border-bottom:1px solid var(--brand-line); } #t-devotsav .dv-hdr .vm-minibar-back, #t-devotsav .dv-hdr .vm-minibar-title{ color:var(--dv-ink); font-family:var(--dv-sans); } #t-devotsav .dv-hdr .vm-ic-btn.wa{ background:var(--dv-whatsapp); } #t-devotsav .dv-hdr .vm-ic-btn.call{ background:var(--dv-maroon); } #t-devotsav .dv-hdr .mobile-nav{ background:var(--dv-header); border-top:1px solid var(--brand-line); box-shadow:0 -2px 12px rgba(50,50,50,.06); } #t-devotsav .dv-hdr .mobile-nav-label{ font-family:var(--dv-sans); color:var(--dv-muted); font-weight:600; } #t-devotsav .dv-hdr .mobile-nav-item.is-active .mobile-nav-label{ color:var(--dv-green); font-weight:700; } /* ══ [B] pooja-details ══════════════════════════════════════════════════════ Presenter: pages/pooja-details/themes/devotsav/details/ Design: design/pooja-details.jpg — 1920 frame, exported 3×. EVERY px below is a measured source span ÷ 3. Key spans: container 4152px → 1384 (page 1920, symmetric 268 margins) hero group 3864px → 1288 = rail 86 + 16 + media 588 + 48 + right 550 media card 1764×966 → 588×322, radius 16 rail cell 258×309 → 86×103, gap 6.3 → 6, fill #F4F0ED right col 1650px → 550 (badge, title, price, detail card, CTA all flush left) detail card 1650×540 → 550×180, 1px #E5E5E5, top y=382 countdown box 144×126 → 48×42, fill #FBF5F5, 1px #E7CBC7 green CTA 930×135 → 310×45, radius 8, top y=641 cream band starts y 2443 → 814 tab hairline x 804..4956 → 268..1652, #D7D7D7, active underline 3px ink body grid left 692 / gap 65 / right 627; benefit card 297 + gap 32 The primary action is DEEP GREEN #098b62; #8C0E00 is icon-only; no gold. TYPE SCALE (Boss, 2026-08-27) — every size on this page was rescaled in one pass: the half-step one-offs (9.5 / 11.5 / 12.5 / 13.5) were snapped onto the scale, then 2px was ADDED to everything. 18 distinct sizes → 14, all integers: 38 26 24 22 20 19 18 17 16 15 14 13 12 11 The numbers below are the ORIGINAL 1920-frame measurements and are NOT restated — read them as the derivation, then apply the +2. ═════════════════════════════════════════════════════════════════════════ */ #t-devotsav .dv-details{ --dv-wrap:min(var(--dv-cmax), calc(100% - 96px)); /* design 1384 */ --dv-hero-right:550px; --dv-hero-left:690px; background:var(--dv-white); font-family:var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .container{ max-width:none; width:100%; padding:0; margin:0; } #t-devotsav .dv-details .content-scroll{ background:var(--dv-white); } /* ── HERO ───────────────────────────────────────────────────────────────── */ #t-devotsav .dv-details .main-pooja-details{ width:var(--dv-wrap); margin:0 auto; padding:65px 0 24px; position:relative; /* ── beaded-lotus watermarks, hero only (Boss, 2026-08-27) ────────────── Same glyph and strength as the home page. Two constraints shape how: · .dv-tabs and .dv-side are position:sticky, and an overflow:hidden ancestor kills sticky SILENTLY — so nothing here adds a clip context. That rules out the .dv-top trick the home block uses. · this wrapper is only 1384 wide, but the watermarks sit at the VIEWPORT edges, so they are pushed out with calc(50% - 50vw). The half-off-edge look is drawn by BACKGROUND-POSITION on a half-width box, not by hanging the box past the viewport — which would have added a horizontal scrollbar with no overflow:hidden anywhere to absorb it. */ --pd-orn:url('https://d1lgb33831op6u.cloudfront.net/bg-hero-black.63cfc6a8c9979019.png'); --pd-orn-full:220px; /* whole glyph — matches home's --dv-orn-w */ --pd-orn-show:110px; /* the sliver that stays on screen */ --pd-orn-opacity:.06; --pd-orn-bottom:-115px; } #t-devotsav .dv-details .main-pooja-details::before, #t-devotsav .dv-details .main-pooja-details::after{ content:''; position:absolute; bottom:var(--pd-orn-bottom); width:var(--pd-orn-show); height:calc(var(--pd-orn-full) * 1550 / 1332); /* the source's own ratio */ background-image:var(--pd-orn); background-repeat:no-repeat; background-size:var(--pd-orn-full) auto; opacity:var(--pd-orn-opacity); pointer-events:none; z-index:0; } /* flush to the viewport's left edge, showing the glyph's RIGHT half */ #t-devotsav .dv-details .main-pooja-details::before{ left:calc(50% - 50vw); background-position:right center; } /* flush to the viewport's right edge, showing the glyph's LEFT half */ #t-devotsav .dv-details .main-pooja-details::after{ right:calc(50% - 50vw); background-position:left center; } #t-devotsav .dv-details .dv-hero{ display:grid; grid-template-columns:minmax(0,var(--dv-hero-left)) var(--dv-hero-right); column-gap:48px; justify-content:center; align-items:start; /* above the watermark pseudo-elements on .main-pooja-details: a positioned element out-paints a STATIC sibling whatever the source order, so without this the mandalas would sit on top of the trust badges. */ position:relative; z-index:1; } #t-devotsav .dv-details .dv-media-row{ display:grid; grid-template-columns:86px minmax(0,1fr); column-gap:16px; align-items:stretch; } /* Rail: three admin-set platform totals, stacked to the media's height. */ #t-devotsav .dv-details .dv-rail{ display:grid; grid-template-rows:repeat(3,1fr); gap:6px; margin:0; padding:0; border:0; background:none; } #t-devotsav .dv-details .dv-rail .pd-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 4px; text-align:center; background:#F4F0ED; border-radius:8px; } #t-devotsav .dv-details .dv-rail .pd-stat-num{ font:700 18px/1.15 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .dv-rail .pd-stat-label{ font:400 13px/1.25 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .dv-rail .pd-stat-divider{ display:none; } /* Media card */ #t-devotsav .dv-details .slider-column{ min-width:0; } #t-devotsav .dv-details .pd-media{ position:relative; aspect-ratio:588/322; border-radius:16px; overflow:hidden; background:#EFE9E4; } #t-devotsav .dv-details .pd-media-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } #t-devotsav .dv-details .pd-media-track::-webkit-scrollbar{ display:none; } #t-devotsav .dv-details .pd-media-slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; } #t-devotsav .dv-details .pd-media-slide img.media-image, #t-devotsav .dv-details .pd-media-slide video.media-video{ width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; } #t-devotsav .dv-details .video-container{ position:relative; height:100%; } #t-devotsav .dv-details .sound-indicator{ position:absolute; right:12px; bottom:12px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.45); color:#fff; cursor:pointer; } #t-devotsav .dv-details .pd-media-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.9); display:grid; place-items:center; padding:0; } #t-devotsav .dv-details .pd-media-arrow img{ width:14px; height:14px; } #t-devotsav .dv-details .pd-media-arrow.prev{ left:12px; transform:translateY(-50%) rotate(90deg); } #t-devotsav .dv-details .pd-media-arrow.next{ right:12px; transform:translateY(-50%) rotate(-90deg); } #t-devotsav .dv-details .pd-media-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; } #t-devotsav .dv-details .pd-media-dot{ width:6px; height:6px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.55); } #t-devotsav .dv-details .pd-media-dot.active{ background:#fff; width:16px; border-radius:3px; } #t-devotsav .dv-details .pd-media-missing{ display:grid; place-items:center; color:var(--dv-muted); font-size:16px; } /* Trust 2×2 — aligned to the media's left edge (rail 86 + gap 16). */ #t-devotsav .dv-details .pd-trust-desktop{ display:grid; grid-template-columns:repeat(2,287px); row-gap:10px; margin:57px 0 0 102px; } #t-devotsav .dv-details .pd-trust-mobile{ display:none; } #t-devotsav .dv-details .pd-trust-item{ display:flex; align-items:center; gap:14px; min-height:56px; } #t-devotsav .dv-details .pd-trust-item .mq-ic{ width:34px; height:34px; object-fit:contain; flex:0 0 34px; } #t-devotsav .dv-details .pd-trust-item span{ font:500 15px/1.35 var(--dv-sans); color:var(--dv-ink); max-width:220px; } /* ── HERO RIGHT: identity → price → detail card → CTA ────────────────────── */ #t-devotsav .dv-details .dv-hero-info{ min-width:0; padding:0; } #t-devotsav .dv-details .dv-ribbon{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:5px 10px 0 10px; border-radius:4px; background:var(--dv-green-badge); color:#fff; font:600 16px/1 var(--dv-sans); letter-spacing:.06em; text-transform:uppercase; max-width:100%; } #t-devotsav .dv-details .dv-ribbon .yaga-ic{ width: 15px; height: 15px; margin-top: -5px; filter: brightness(0) invert(1); } #t-devotsav .dv-details .dv-ribbon span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #t-devotsav .dv-details .pd-title{ margin:8px 0 0; font-family:var(--dv-serif-title,var(--dv-sans)); font-size:var(--dv-title-size,34px); font-weight:var(--dv-title-weight,700); line-height:49px; color:var(--dv-ink); letter-spacing:-.01em; overflow-wrap:anywhere; } /* "Price" caption above the amount (Boss, 2026-08-27). The design draws it but NO element carries it — .pd-price holds only was/amt/incl-gst — and this file is the only one in scope, so it is generated copy. ⚠ Two known costs, recorded not hidden: generated content is invisible to crawlers, and it cannot be translated by the CMS. The .lang-* class the presenter puts on .dv-details is the hook for the second one — see below. Sits on the BLOCK, not on .pd-price-amt: .pd-price is a baseline flex row, so a ::before on the amount itself would land beside it, not above it. */ #t-devotsav .dv-details .dv-price-block{ margin-top:24px; } #t-devotsav .dv-details .dv-price-block::before{ content:'Price'; display:block; margin-bottom:2px; font:400 15px/1.3 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .dv-price-block .pd-price{ display:flex; align-items:baseline; gap:10px; } #t-devotsav .dv-details .pd-price-amt{ font:700 26px/1.2 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-price-was{ font:400 17px/1.2 var(--dv-sans); color:var(--dv-muted); text-decoration:line-through; } #t-devotsav .dv-details .pd-incl-gst{ font:400 13px/1.2 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-price-skel{ display:inline-block; width:110px; height:22px; border-radius:6px; background:linear-gradient(90deg,#EFEBE7,#F7F4F1,#EFEBE7); } /* Tier picker — only mounts when the puja really offers a choice (Boss, 2026-08-25). */ #t-devotsav .dv-details .pd-package-options{ margin-top:16px; } #t-devotsav .dv-details .pd-package-fieldset{ border:0; margin:0; padding:0; } #t-devotsav .dv-details .pd-package-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } #t-devotsav .dv-details .pd-package-option{ cursor:pointer; } #t-devotsav .dv-details .pd-package-option input{ position:absolute; opacity:0; pointer-events:none; } #t-devotsav .dv-details .pd-package-card{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--dv-line,#E7E1E1); border-radius:12px; background:#fff; } #t-devotsav .dv-details .pd-package-option input:checked + .pd-package-card{ border-color:var(--dv-green); box-shadow:inset 0 0 0 1px var(--dv-green); } #t-devotsav .dv-details .pd-package-icon img{ width:28px; height:28px; object-fit:contain; } #t-devotsav .dv-details .pd-package-title{ font:600 15px/1.2 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-package-subtitle{ font:400 13px/1.3 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-package-price{ font:700 16px/1.3 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-package-was{ font:400 13px/1.3 var(--dv-sans); color:var(--dv-muted); text-decoration:line-through; margin-right:6px; } #t-devotsav .dv-details .pd-package-badge{ position:absolute; top:-8px; right:10px; padding:2px 7px; border-radius:999px; background:var(--dv-green); color:#fff; font:600 11px/1.5 var(--dv-sans); } #t-devotsav .dv-details .pd-package-radio-indicator{ margin-left:auto; width:15px; height:15px; border-radius:50%; border:1.5px solid var(--dv-line,#E7E1E1); } #t-devotsav .dv-details .pd-package-option input:checked + .pd-package-card .pd-package-radio-indicator{ border-color:var(--dv-green); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 9px var(--dv-green); } /* Detail card */ #t-devotsav .dv-details .dv-detail-card{ margin-top:20px; border:1px solid #E5E5E5; border-radius:14px; background:#fff; } #t-devotsav .dv-details .dv-detail-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #E5E5E5; } #t-devotsav .dv-details .dv-detail-ic{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--dv-maroon); display:grid; place-items:center; } #t-devotsav .dv-details .dv-detail-ic img{ width:13px; height:13px; filter:brightness(0) invert(1); } #t-devotsav .dv-details .dv-detail-head .pd-meta-value{ font:600 17px/1.25 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .dv-detail-head .pd-meta-sub{ font-weight:400; color:var(--dv-muted); } #t-devotsav .dv-details .dv-detail-body{ padding:12px 16px 14px; } #t-devotsav .dv-details .dv-detail-label{ font:600 16px/1.2 var(--dv-sans); color:var(--dv-ink); margin-bottom:8px; } #t-devotsav .dv-details .dv-detail-body .pd-meta-row{ display:flex; align-items:center; gap:8px; } #t-devotsav .dv-details .dv-detail-body .pd-meta-ic img{ width: 21px; height: 22px; display:block; } #t-devotsav .dv-details .dv-detail-body .pd-meta-value{ font:400 15px/1.3 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .dv-detail-body .pd-meta-sub, #t-devotsav .dv-details .dv-detail-body .ist-note{ color:var(--dv-muted); } #t-devotsav .dv-details .countdown-section{ margin-top:12px; } #t-devotsav .dv-details .pd-clock{ display:flex; align-items:flex-start; gap:6px; } #t-devotsav .dv-details .pd-clock-box{ min-width: 59px; padding: 0 6px; height: 50px; border-radius:8px; background:var(--dv-clock-bg); border:1px solid #E7CBC7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; } #t-devotsav .dv-details .pd-clock-num{ font:700 19px/1 var(--dv-sans); color:var(--dv-maroon); } #t-devotsav .dv-details .pd-clock-lbl{ font:500 11px/1 var(--dv-sans); color:var(--dv-muted); text-transform:uppercase; letter-spacing:.04em; } #t-devotsav .dv-details .pd-clock-ic{ font:700 16px/42px var(--dv-sans); color:#000; align-self:flex-start; } #t-devotsav .dv-details .booking-closed-container{ margin-top:10px; } #t-devotsav .dv-details .booking-closed-message{ display:flex; flex-direction:column; gap:3px; } #t-devotsav .dv-details .booking-closed-text{ font:600 16px/1.3 var(--dv-sans); color:var(--dv-maroon); } #t-devotsav .dv-details .booking-closed-subtext{ font:400 14px/1.4 var(--dv-sans); color:var(--dv-muted); } /* Primary CTA */ #t-devotsav .dv-details .dv-cta-row{ margin-top:80px; } #t-devotsav .dv-details .dv-cta{ width:310px; max-width:100%; height:50px; border-radius:8px; background:var(--dv-green); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; } #t-devotsav .dv-details .dv-cta:hover{ background:var(--dv-green-dark); } #t-devotsav .dv-details .dv-cta.is-disabled{ opacity:.55; cursor:not-allowed; } #t-devotsav .dv-details .dv-cta .bookpuja-text{ letter-spacing:.05em; text-transform:uppercase; } #t-devotsav .dv-details .dv-cta-arrow{ display:grid; place-items:center; } #t-devotsav .dv-details .pd-notify-discound{ width:310px; max-width:100%; height:45px; border-radius:8px; border:0; cursor:pointer; background:var(--dv-maroon); color:#fff; letter-spacing:.05em; text-transform:uppercase; } #t-devotsav .dv-details .pd-help-btns{ display:flex; gap:10px; margin-top:14px;width: 100%; } #t-devotsav .dv-details .pd-help-btn{ display:inline-flex; align-items:center; gap:7px; height: 45px; padding: 1px 16px; border:1px solid #E3DED6; border-radius:8px; background:#fff; text-decoration:none; font:500 16px/1 var(--dv-sans); color:var(--dv-ink); width: 100%; justify-content: center; } #t-devotsav .dv-details .pd-help-btn img, #t-devotsav .dv-details .pd-help-btn svg{ width:16px; height:16px; margin-top: -4px; } #t-devotsav .dv-details .pd-help-btn.call svg{ stroke:var(--dv-maroon); } #t-devotsav .dv-details .pd-share{ margin-top:14px; } #t-devotsav .dv-details .share-whishlist-btns{ display:flex; gap:10px; } #t-devotsav .dv-details .wishlist-btn, #t-devotsav .dv-details .share-btn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:1px solid #E3DED6; border-radius:8px; background:#fff; cursor:pointer; font:500 14px/1 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .wishlist-btn.is-saved{ color:var(--dv-maroon); border-color:var(--dv-maroon); } #t-devotsav .dv-details .share-btn img{ width:14px; height:14px; } #t-devotsav .dv-details .pd-share-embed{ display:none; } /* ── TAB STRIP ──────────────────────────────────────────────────────────── */ /* The cream band starts ABOVE the tab labels (design: y 814) and runs full-bleed. */ /* One cream band from the tab strip to the end of the page. It is also the sticky nav's containing block — sticky never travels outside its parent, so a short band-only wrapper pinned the strip for 129px and then let it go. */ #t-devotsav .dv-details .dv-cream{ background:var(--dv-cream); padding:92px 0 0; position: relative; z-index: 1; } #t-devotsav .dv-details .dv-tabs{ width:var(--dv-wrap); margin:0 auto; padding:0; display:flex; justify-content:center; gap:54px; flex-wrap:nowrap; border-bottom:1px solid #D7D7D7; overflow-x:auto; scrollbar-width:none; background:transparent; } #t-devotsav .dv-details .dv-tabs::-webkit-scrollbar{ display:none; } #t-devotsav .dv-details .dv-tabs .tab-button{ border:0; background:none; cursor:pointer; padding:0 0 14px; white-space:nowrap; font:500 19px/1.2 var(--dv-sans); color:var(--dv-ink); border-bottom:3px solid transparent; margin-bottom:-1px; } #t-devotsav .dv-details .dv-tabs .tab-button.active{ font-weight:600; border-bottom-color:#111; } /* The cream band runs from the tab strip to the end of the page. */ #t-devotsav .dv-details .dv-body, #t-devotsav .dv-details .dv-bottom{ background:var(--dv-cream); } /* ── BODY GRID ──────────────────────────────────────────────────────────── */ #t-devotsav .dv-details .dv-body{ width:var(--dv-wrap); margin:0 auto; padding:62px 0 0; display:grid; grid-template-columns:minmax(0,1fr) 627px; column-gap:65px; align-items:start; } #t-devotsav .dv-details .dv-main{ min-width:0; padding-left:13px; background:transparent; } #t-devotsav .dv-details .dv-about-body{ background:transparent; padding:0; border:0; } #t-devotsav .dv-details .pd-section{ margin:0 0 46px; scroll-margin-top:120px; } #t-devotsav .dv-details .pd-section-title{ margin:0 0 18px; font:700 38px/1.15 var(--dv-sans); color:var(--dv-ink); letter-spacing:-.01em; } #t-devotsav .dv-details .pd-prose{ font:400 16px/1.72 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-prose h1, #t-devotsav .dv-details .pd-prose h2, #t-devotsav .dv-details .pd-prose h3, #t-devotsav .dv-details .pd-prose h4, #t-devotsav .dv-details .pd-prose strong, #t-devotsav .dv-details .pd-prose b{ font-size:17px; font-weight:700; color:var(--dv-ink); line-height:1.5; } #t-devotsav .dv-details .pd-prose p{ margin:0 0 16px; } #t-devotsav .dv-details .pd-prose ul{ list-style:none; margin:14px 0; padding:0; } #t-devotsav .dv-details .pd-prose li{ position:relative; padding:9px 0 9px 16px; border-bottom:1px solid #EAE3DE; } #t-devotsav .dv-details .pd-prose li::before{ content:"•"; position:absolute; left:2px; color:var(--dv-muted); } #t-devotsav .dv-details .read-more-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; border:0; background:none; cursor:pointer; padding:0; font:600 15px/1 var(--dv-sans); color:var(--dv-maroon); } #t-devotsav .dv-details .read-more-btn img{ width:11px; height:11px; } #t-devotsav .dv-details .read-more-btn.is-open img{ transform:rotate(180deg); } #t-devotsav .dv-details .infonote{ display:none; } /* Procedure */ #t-devotsav .dv-details .pd-timeline{ display:flex; flex-direction:column; gap:16px; } #t-devotsav .dv-details .pd-step{ display:flex; gap:14px; align-items:flex-start; } #t-devotsav .dv-details .pd-step-num{ border-radius: 50%; background: var(--dv-tint-rose); color: var(--dv-maroon); display: flex; align-items: center; font-size:16px; justify-content: center; padding: 10px; width: 35px; line-height: 100%; height: 35px; } #t-devotsav .dv-details .pd-step-card h4{ margin:0 0 3px; font:700 17px/1.35 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-step-card p{ margin:0; font:400 15px/1.6 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-core-tag{ display:inline-block; margin-bottom:5px; padding:2px 8px; border-radius:999px; background:var(--dv-chip-cream); color:var(--dv-chip-ink); font:600 11px/1.6 var(--dv-sans); text-transform:uppercase; letter-spacing:.05em; } /* Temple */ #t-devotsav .dv-details .pd-temple{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; } #t-devotsav .dv-details .pd-temple-img{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; } #t-devotsav .dv-details .pd-temple-track{ display:flex; height:100%; overflow-x:auto; scrollbar-width:none; } #t-devotsav .dv-details .pd-temple-track::-webkit-scrollbar{ display:none; } #t-devotsav .dv-details .pd-temple-name{ margin:0 0 6px; font:700 20px/1.3 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-temple-loc{ display:flex; align-items:center; gap:6px; margin-bottom:10px; font:500 14px/1.4 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-temple-loc img{ width:13px; height:13px; } #t-devotsav .dv-details .pd-temple-body p{ margin:0; font:400 15px/1.7 var(--dv-sans); color:var(--dv-muted); } /* What you receive */ #t-devotsav .dv-details .pd-receive{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } #t-devotsav .dv-details .pd-receive-card{ position:relative; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #EAE3DE; border-radius:12px; background:#fff; } #t-devotsav .dv-details .pd-receive-num{ position:absolute; top:8px; right:12px; font:700 13px/1 var(--dv-sans); color:var(--dv-tint-pink); } #t-devotsav .dv-details .pd-receive-ic img{ width:26px; height:26px; object-fit:contain; } #t-devotsav .dv-details .pd-receive-card h4{ margin:0; font:500 15px/1.45 var(--dv-sans); color:var(--dv-ink); } /* Chadhava offerings — the pricing mechanism for catalog_type 2. */ #t-devotsav .dv-details .pd-offerings-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } #t-devotsav .dv-details .pd-offering-card{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; padding:12px; border:1px solid #EAE3DE; border-radius:12px; background:#fff; } #t-devotsav .dv-details .pd-offering-media{ border-radius:8px; overflow:hidden; aspect-ratio:1; background:#F4F0ED; } #t-devotsav .dv-details .pd-offering-media img{ width:100%; height:100%; object-fit:cover; } #t-devotsav .dv-details .pd-offering-badge{ display:inline-block; margin-bottom:4px; padding:2px 7px; border-radius:999px; background:var(--dv-chip-cream); color:var(--dv-chip-ink); font:600 11px/1.5 var(--dv-sans); } #t-devotsav .dv-details .pd-offering-title{ font:600 16px/1.35 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-offering-desc{ margin:4px 0 0; font:400 14px/1.5 var(--dv-sans); color:var(--dv-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #t-devotsav .dv-details .pd-offering-desc.is-open{ -webkit-line-clamp:unset; overflow:visible; } #t-devotsav .dv-details .pd-offering-more{ border:0; background:none; padding:0; cursor:pointer; margin-top:3px; font:600 13px/1 var(--dv-sans); color:var(--dv-maroon); } #t-devotsav .dv-details .pd-offering-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; } #t-devotsav .dv-details .pd-offering-price{ font:700 16px/1 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-offering-add{ height:30px; padding:0 16px; border-radius:8px; border:0; cursor:pointer; background:var(--dv-green); color:#fff; font:600 13px/1 var(--dv-sans); text-transform:uppercase; letter-spacing:.04em; } #t-devotsav .dv-details .pd-offering-stepper{ display:flex; align-items:center; gap:10px; height:30px; padding:0 8px; border:1px solid var(--dv-green); border-radius:8px; } #t-devotsav .dv-details .pd-step-btn{ border:0; background:none; cursor:pointer; padding:0; width:18px; font:600 17px/1 var(--dv-sans); color:var(--dv-green); } #t-devotsav .dv-details .pd-step-qty{ font:600 15px/1 var(--dv-sans); color:var(--dv-ink); min-width:14px; text-align:center; } #t-devotsav .dv-details .pd-offering-choices{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; } #t-devotsav .dv-details .pd-choice-chip{ height:29px; padding:0 13px; border-radius:999px; cursor:pointer; border:1px solid #E3DED6; background:#fff; font:600 14px/1 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-choice-chip.is-picked{ background:var(--dv-green); border-color:var(--dv-green); color:#fff; } #t-devotsav .dv-details .pd-offerings-viewmore{ margin-top:14px; height:38px; padding:0 20px; border-radius:8px; cursor:pointer; border:1px solid #E3DED6; background:#fff; font:600 14px/1 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-offerings-empty{ font:400 15px/1.6 var(--dv-sans); color:var(--dv-muted); } /* ── BODY RIGHT: benefit cards + the two help cards ──────────────────────── */ #t-devotsav .dv-details .dv-side{ min-width:0; display:flex; flex-direction:column; gap:30px; } #t-devotsav .dv-details .dv-benefits{ margin:0; } #t-devotsav .dv-details .dv-sr-title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #t-devotsav .dv-details .pd-benefits{ display:grid; grid-template-columns:repeat(2,297px); gap:32px; justify-content:start; } /* justify-content is DECLARED, not left to default (Boss, 2026-08-27): the cards stretch to a common row height, and something upstream was centring the content inside them — so a 1-line title sat ~15px lower than the 2-line title beside it and the row read as staggered. Stating flex-start here wins on specificity regardless of where the centring came from. */ #t-devotsav .dv-details .pd-benefit{ border:1px solid #1A1A1A; border-radius:12px; padding:22px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; } #t-devotsav .dv-details .pd-benefit-ic{ display:none; } #t-devotsav .dv-details .pd-benefit h4{ margin:0; font:700 19px/1.35 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-benefit p{ margin:0; font:400 14px/1.6 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .dv-help-cards{ display:grid; grid-template-columns:repeat(2,297px); gap:32px; justify-content:start; } #t-devotsav .dv-details .dv-help-cards .pd-card{ border:1px solid #EAE3DE; border-radius:12px; background:#fff; padding:18px 16px; } #t-devotsav .dv-details .pd-card-head{ display:flex; align-items:flex-start; gap:9px; padding-bottom:12px; border-bottom:1px solid #EFE7E2; } #t-devotsav .dv-details .dv-card-ic{ flex:0 0 26px; width:26px; height:26px; border-radius:7px; background:var(--dv-maroon); display:grid; place-items:center; } #t-devotsav .dv-details .dv-card-ic img{ width:13px; height:13px; filter:brightness(0) invert(1); } #t-devotsav .dv-details .pd-card-head h3{ margin:0; font:600 19px/1.2 var(--dv-serif); color:var(--dv-ink); } #t-devotsav .dv-details .pd-card-head small{ font:500 11px/1.4 var(--dv-sans); color:var(--dv-muted); text-transform:uppercase; letter-spacing:.08em; } #t-devotsav .dv-details .pd-incl-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; } #t-devotsav .dv-details .pd-incl-list li{ display:flex; gap:9px; align-items:flex-start; font:400 14px/1.45 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-incl-check{ flex:0 0 16px; width:16px; height:16px; border-radius:50%; margin-top:1px; background: #098b621c; color:var(--dv-green); display:grid; place-items:center; } #t-devotsav .dv-details .pd-advisor{ text-align:center; } #t-devotsav .dv-details .pd-advisor h3{ margin:0; font:600 19px/1.25 var(--dv-serif); color:var(--dv-ink); } #t-devotsav .dv-details .pd-advisor p{ margin:7px 0 0; font:400 14px/1.55 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-advisor-btns{ display:flex; flex-direction:column; gap:9px; margin-top:16px; padding-top:16px; border-top:1px solid #EFE7E2; } #t-devotsav .dv-details .pd-advisor-btn{ display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:8px; text-decoration:none; font:600 15px/1.15 var(--dv-sans); } #t-devotsav .dv-details .pd-advisor-btn.whatsapp{ background:var(--dv-whatsapp); color:#fff; } #t-devotsav .dv-details .pd-advisor-btn.whatsapp img{ width:17px; height:17px; filter:brightness(0) invert(1); } #t-devotsav .dv-details .pd-advisor-btn.call{ background:#fff; border:1px solid #E3DED6; color:var(--dv-ink); } #t-devotsav .dv-details .pd-advisor-btn.call img{ width:17px; height:17px; } #t-devotsav .dv-details .pd-advisor-note{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:13px; font:400 11px/1.4 var(--dv-sans); color:var(--dv-muted); } #t-devotsav .dv-details .pd-dot-live{ width:6px; height:6px; border-radius:50%; background:var(--dv-green); } /* ── GALLERY + FAQ ──────────────────────────────────────────────────────── */ /* FAQ + Gallery read as part of the LEFT column (Boss, 2026-08-27). They are markup siblings of .dv-body, not children of .dv-main, and CSS cannot reparent them — so this MIRRORS .dv-body's grid and drops both sections into column 1. Copying the track list rather than hard-coding 692px means the two stay locked together if the body grid is ever retuned; the 13px matches .dv-main's own inset so the headings share one left edge. */ #t-devotsav .dv-details .dv-bottom{ width:var(--dv-wrap); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) 627px; column-gap:65px; } #t-devotsav .dv-details .dv-bottom > *{ grid-column:1; width:auto; margin-inline:0; padding-left:13px; } #t-devotsav .dv-details .pooja-gallery-section{ padding-top:26px; } #t-devotsav .dv-details .pd-gallery-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } #t-devotsav .dv-details .pd-gallery-cell{ border-radius:10px; overflow:hidden; aspect-ratio:1; cursor:pointer; } #t-devotsav .dv-details .pd-gallery-cell img{ width:100%; height:100%; object-fit:cover; display:block; } #t-devotsav .dv-details .dv-faq-band{ padding:40px 0 70px; } #t-devotsav .dv-details .pd-faq-list{ display:flex; flex-direction:column; gap:14px; } #t-devotsav .dv-details .pd-faq-item{ border:1px solid #1A1A1A; border-radius:8px; background:var(--dv-cream); overflow:hidden; } #t-devotsav .dv-details .pd-faq-summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; cursor:pointer; } #t-devotsav .dv-details .pd-faq-q{ font:500 17px/1.4 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-faq-mark{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#111; color:#fff; display:grid; place-items:center; } #t-devotsav .dv-details .pd-faq-mark .mk-close{ display:none; } #t-devotsav .dv-details .pd-faq-item.is-open .pd-faq-mark .mk-plus{ display:none; } #t-devotsav .dv-details .pd-faq-item.is-open .pd-faq-mark .mk-close{ display:block; } #t-devotsav .dv-details .pd-faq-answer{ padding:0 18px 16px; } #t-devotsav .dv-details .pd-faq-answer p{ margin:0; font:400 15px/1.7 var(--dv-sans); color:var(--dv-muted); } /* ── STICKY / MOBILE BARS ───────────────────────────────────────────────── */ #t-devotsav .dv-details .pd-sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; gap:20px; padding:12px max(24px, calc((100% - var(--dv-wrap)) / 2)); background:#fff; border-top:1px solid #E7E1E1; transform:translateY(110%); transition:transform .22s ease; } #t-devotsav .dv-details .pd-sticky-bar.show{ transform:translateY(0); } #t-devotsav .dv-details .pd-sticky-info{ display:flex; flex-direction:column; gap:2px; min-width:0; } #t-devotsav .dv-details .pd-sticky-name{ font:600 16px/1.3 var(--dv-sans); color:var(--dv-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; } #t-devotsav .dv-details .pd-sticky-price strong{ font:700 18px/1.2 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-sticky-was{ font:400 14px/1.2 var(--dv-sans); color:var(--dv-muted); text-decoration:line-through; margin-left:7px; } #t-devotsav .dv-details .pd-sticky-bar .view-all-pill{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:9px; height:45px; padding:0 30px; border:0; border-radius:8px; cursor:pointer; background:var(--dv-green); color:#fff; font:600 15px/1 var(--dv-sans); text-transform:uppercase; letter-spacing:.05em; } #t-devotsav .dv-details .pd-sticky-bar .view-all-pill.notify{ background:var(--dv-maroon); } #t-devotsav .dv-details .pd-sticky-bar .view-all-pill:disabled{ opacity:.55; cursor:not-allowed; } #t-devotsav .dv-details .pd-mobile-cta{ display:none; } /* ── [B] pooja-details · MOBILE (≤900) ─────────────────────────────────────── The design has no mobile frame, so this is a derivation, not a port. Rules: the hero stacks, the rail becomes a 3-up stat row under the media, and the ONLY booking action on a phone is the sticky bottom bar (Boss, 2026-08-25) — the in-hero green CTA and the WhatsApp/Call pair hide there, because the header already owns WhatsApp and the bar already owns Book. */ @media (max-width:900px){ #t-devotsav .dv-details{ --dv-wrap:calc(100% - 32px); } #t-devotsav .dv-details .main-pooja-details{ padding:16px 0 8px; } #t-devotsav .dv-details .dv-hero{ grid-template-columns:minmax(0,1fr); row-gap:18px; } #t-devotsav .dv-details .dv-media-row{ grid-template-columns:minmax(0,1fr); row-gap:10px; } #t-devotsav .dv-details .pd-media{ aspect-ratio:16/10; border-radius:12px; } /* Rail (.pd-rating): three stats side by side UNDER the slider. The markup puts it before .pd-media for the desktop 86px-left-track layout, so on one column it stacked above — order:1 drops it past the media, which has the default 0 (Boss, 2026-08-27). Visual only; reading order is unchanged, and stats after the image is the sensible order to hear them in anyway. */ #t-devotsav .dv-details .dv-rail{ grid-template-rows:none; grid-template-columns:repeat(3,1fr); gap:8px; order:1; } #t-devotsav .dv-details .dv-rail .pd-stat{ padding:8px 4px; } #t-devotsav .dv-details .pd-trust-desktop{ display:none; } #t-devotsav .dv-details .pd-trust-mobile{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; } #t-devotsav .dv-details .pd-trust-item{ min-height:auto; gap:10px; } #t-devotsav .dv-details .pd-trust-item .mq-ic{ width:26px; height:26px; flex-basis:26px; } #t-devotsav .dv-details .pd-trust-item span{ font-size:13px; max-width:none; } #t-devotsav .dv-details .pd-title{ font-size:24px; line-height:32px; margin-top:10px; } #t-devotsav .dv-details .dv-price-block{ margin-top:12px; } #t-devotsav .dv-details .pd-price-amt{ font-size:22px; } #t-devotsav .dv-details .dv-detail-card{ margin-top:14px; } #t-devotsav .dv-details .pd-clock-box{ min-width: 57px; height: 54px; padding: 9px 6px 0px 6px; } /* One CTA on a phone, and it lives in the sticky bar. */ #t-devotsav .dv-details .dv-cta-row{ display:none; } #t-devotsav .dv-details .pd-sticky-bar{ display:none; } #t-devotsav .dv-details .pd-mobile-cta{ display:block; } #t-devotsav .dv-details .dv-cream{ padding:26px 0 0; } #t-devotsav .dv-details .dv-tabs{ justify-content:flex-start; gap:24px; padding:0 16px; width:100%; } #t-devotsav .dv-details .dv-tabs .tab-button{ font-size:16px; padding-bottom:10px; } #t-devotsav .dv-details .dv-body{ grid-template-columns:minmax(0,1fr); row-gap:34px; padding-top:28px; } #t-devotsav .dv-details .dv-main{ padding-left:0; } /* the bottom sections mirror the body grid, so they collapse with it — otherwise the 627px second track would keep squeezing column 1 on a phone. */ #t-devotsav .dv-details .dv-bottom{ grid-template-columns:minmax(0,1fr); } #t-devotsav .dv-details .dv-bottom > *{ padding-left:0; } #t-devotsav .dv-details .pd-section{ margin-bottom:32px; scroll-margin-top:96px; } #t-devotsav .dv-details .pd-section-title{ font-size:26px; margin-bottom:14px; } #t-devotsav .dv-details .pd-benefits, #t-devotsav .dv-details .dv-help-cards{ grid-template-columns:minmax(0,1fr); gap:14px; } #t-devotsav .dv-details .pd-receive, #t-devotsav .dv-details .pd-offerings-grid{ grid-template-columns:minmax(0,1fr); } #t-devotsav .dv-details .pd-temple{ grid-template-columns:minmax(0,1fr); } #t-devotsav .dv-details .pd-gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } #t-devotsav .dv-details .dv-faq-band{ padding:24px 0 40px; } #t-devotsav .dv-details .pd-faq-q{ font-size:15px; } #t-devotsav .dv-details .pd-faq-summary{ padding:13px 14px; } /* Mobile booking bar — themed to devotsav, same behaviour as the main site. */ #t-devotsav .dv-details .pd-mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-top:1px solid #E7E1E1; box-shadow:0 -4px 18px rgba(0,0,0,.07); } #t-devotsav .dv-details .pd-mb-price{ display:flex; flex-direction:column; gap:1px; min-width:0; } #t-devotsav .dv-details .pd-mb-amt{ font:700 19px/1.2 var(--dv-sans); color:var(--dv-ink); } #t-devotsav .dv-details .pd-mb-was{ font:400 14px/1.2 var(--dv-sans); color:var(--dv-muted); text-decoration:line-through; margin-left:6px; } #t-devotsav .dv-details .pd-mobile-bar .closetime{ font:400 12px/1.3 var(--dv-sans); color:var(--dv-muted); white-space:nowrap; } #t-devotsav .dv-details .pd-mobile-bar .closetime strong{ color:var(--dv-maroon); font-weight:600; } #t-devotsav .dv-details .pd-mb-btn{ margin-left:auto; flex:0 0 auto; height:44px; padding:0 22px; border:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; background:var(--dv-green); color:#fff; font:600 14px/1 var(--dv-sans); text-transform:uppercase; letter-spacing:.04em; } #t-devotsav .dv-details .pd-mb-btn.notify{ background:var(--dv-maroon); } #t-devotsav .dv-details .pd-mb-btn:disabled{ opacity:.55; cursor:not-allowed; } #t-devotsav .dv-details .pd-mobile-bar.is-closed{ justify-content:flex-end; } /* The fixed bar must not cover the end of the page. */ #t-devotsav .dv-details .pd-desktop-footer{ padding-bottom:74px; } } /* ── [B] package-details ───────────────────────────────────────────────────── The page reuses the whole pooja-details block above (same presenter DOM); the root carries `dv-details dv-package`. Only the two package-only elements — the recurrence chip and the start-date line — need their own rules, and the countdown never renders for a package. */ #t-devotsav .dv-package .pd-cadence-chip{ display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:var(--dv-chip-cream); color:var(--dv-chip-ink); font:600 10px/1.7 var(--dv-sans); letter-spacing:.03em; white-space:nowrap; } #t-devotsav .dv-package .pd-meta-start{ margin-top:7px; font:400 12px/1.5 var(--dv-sans); color:var(--dv-muted); } /* ── [B] checkout + payment-status · TOKEN REMAP ───────────────────────────── These pages are NOT redesigned. They funnel every colour through an alias layer that forwards to the canonical --brand-* set, so remapping the aliases at each page root themes them whole. The gap this closes: the alias layer reads --brand-primary-accent* (flagship ORANGE #FF5722 / #A54C0B / #C15608), which the tenant root never defined — so checkout and both status pages were still painting flagship orange on devotsav. Devotsav has no orange: its accent is maroon #8C0E00, and since 2026-08-27 its action is the deep green #098b62. ⚠ The GREEN success badge is SEMANTIC. --sk-green / --sk-green-soft / --sk-green-line and the --ck-green* trio are deliberately NOT touched, even though green is now this brand's primary — "paid" must not read as "brand". ═════════════════════════════════════════════════════════════════════════ */ #t-devotsav{ /* the accent triplet the alias layers read but the tenant root had not set */ --brand-primary-accent:#8C0E00; --brand-primary-accent-b:#731513; --brand-primary-accent-c:#C15608; --brand-primary-accent-dark:#731513; --brand-primary-accent-dark-b:#8C0E00; --brand-primary-accent-dark-c:#C15608; } /* checkout_classic — the alias block sits on .variant-checkout-classic */ #t-devotsav .variant-checkout-classic{ --ck-maroon:var(--dv-green); --ck-maroon-dk:var(--dv-green-dark); --ck-orange:var(--dv-maroon); --ck-orange-dk:var(--dv-wordmark); --ck-orange-bar:var(--dv-terracotta); --ck-ink:var(--dv-ink); --ck-ink-2:var(--dv-ink-card); --ck-muted:var(--dv-muted); --ck-muted-2:#9A9A9A; --ck-line:var(--brand-line); --ck-field:#D7D0CB; --ck-card-line:var(--brand-line); --ck-peach:var(--dv-chip-cream); --ck-peach-line:#EFE3CE; --ck-radius:12px; --ck-radius-sm:8px; --ck-serif:var(--dv-serif); --ck-sans:var(--dv-sans); --ck-shadow:none; --ck-shadow-card:none; } /* payment-status + paylater-status — both routes render .payment-status-container > .sk */ #t-devotsav .payment-status-container, #t-devotsav .payment-status-skeleton{ --ps-serif:var(--dv-serif); --ps-sans:var(--dv-sans); } #t-devotsav .sk{ --sk-maroon:var(--dv-green); --sk-orange:var(--dv-maroon); --sk-orange-dk:var(--dv-wordmark); --sk-ink:var(--dv-ink); --sk-ink-2:var(--dv-ink-card); --sk-muted:var(--dv-muted); --sk-line:var(--brand-line); --sk-card-line:var(--brand-line); --sk-peach:var(--dv-chip-cream); --sk-peach-line:#EFE3CE; --sk-serif:var(--dv-serif); --sk-sans:var(--dv-sans); --sk-shadow:none; /* the warm radial wash behind the hero is flagship peach — devotsav's is cream */ background: radial-gradient(1200px 460px at 50% -120px, var(--dv-cream) 0%, rgba(255,250,244,0) 70%), #fff; } /* ══ [A] home ═══════════════════════════════════════════════════════════════ Presenter: pages/landing-page/themes/devotsav/home/ Design: design/home.jpg — 5760×14283. 14283 is ODD, so a 2× or 4× export is arithmetically impossible; /3 divides both axes cleanly ⇒ the frame is 1920×4761 CSS px and EVERY number below is a measured source span ÷ 3. Verified at 1920 (apples-to-apples with the frame) then 1440 and 430. Page bands, measured (CSS px from the top of the document): header 0 … 106 #F9F8F4 hero+rail 106 … 1038 #FFFFFF journey+grid …2588.7 #F9F8F4 doubts+FAQ …3710 left half #FFEDD5 · right half #FFFAF4 (split at 960) how-it-works …4397 #FFFFFF footer …4761 #F9F8F4 ══════════════════════════════════════════════════════════════════════════ */ /* Custom elements are inline by default and landing-page.component.scss only block-ifies app-home-base / app-home-kailasamandir. Without this the whole presenter sits in an inline box. */ #t-devotsav app-home-devotsav{ display:block; } #t-devotsav .dv-home{ /* measured, and not already in the shared token block above */ --dv-slate:#595C63; /* meta / date / temple / card rows */ --dv-dash:#CCCCCC; /* hero hairline (dashed, 2px on / 2px off) */ --dv-card-line:#EDE6DE; /* journey card hairline */ --dv-rule:#F1E3C0; /* section-head gradient rule + its diamonds */ --dv-serif-ink:#4B2A21; /* Cormorant section heads */ --dv-ghost-line:#74736F; /* VIEW ALL PUJA'S hairline + label */ --dv-jnum:#FCF4F2; /* the pale numeral behind a journey card */ /* The mock does NOT use one grid — hero+rail 1548 · journey+grid 1240 · how-it-works 1132 — but the tenant now does (Boss, 2026-08-28): all three resolve to --dv-cmax, the flagship's 1280. The names are kept so a single band can be re-differentiated later without re-threading four call sites. */ --dv-w-lg:min(var(--dv-cmax),92%); --dv-w-md:min(var(--dv-cmax),92%); --dv-w-sm:min(var(--dv-cmax),92%); /* Telugu is NOT overridden — these stacks put the DESIGN's Latin face FIRST and fall through to the MAIN SITE's Telugu faces (Lohit Telugu for body, Ramabhadra for headings, which is exactly what styles.scss's #te-text block sets globally). Poppins has no Telugu coverage, so no Telugu glyph ever reaches it and a Telugu franchise renders the same Telugu it renders on every other page. Boss, 2026-08-25: no per-tenant Telugu override. */ --dv-font-sans:'Poppins','Lohit Telugu',system-ui,-apple-system,sans-serif; --dv-font-title:'Noto Sans','Ramabhadra',system-ui,-apple-system,sans-serif; --dv-font-serif:'Cormorant Infant','Ramabhadra',Georgia,serif; background:var(--dv-white); font-family:var(--dv-font-sans); color:var(--dv-ink); } /* styles.scss ships `#te-text p, li { font-family:'Lohit Telugu'; font-size:16px }` and `#te-text h1..h6, button { font-family:'Ramabhadra' }`. A MATCHING rule always beats an INHERITED one, so the stack has to be named on the elements themselves or every

on this page loses Poppins. :where() keeps the specificity at (1,1,0) — one class more than #te-text's (1,0,1) and nothing else. Scoped to this page's four section wrappers, so the shared header keeps run 1's rules and the shared footer keeps its own block below. */ #t-devotsav .dv-home .dv-top :where(p,li,ul,ol,span,a,b,s,button,summary,div,h1,h2,h3,h4), #t-devotsav .dv-home .dv-warm :where(p,li,ul,ol,span,a,b,s,button,summary,div,h1,h2,h3,h4), #t-devotsav .dv-home .dv-help :where(p,li,ul,ol,span,a,b,s,button,summary,div,h1,h2,h3,h4){ font-family:var(--dv-font-sans); } /* headings keep the main site's Telugu TITLE face (Ramabhadra) behind Poppins */ #t-devotsav .dv-home .dv-hero-title, #t-devotsav .dv-home .dv-card-title, #t-devotsav .dv-home .dv-help-title, #t-devotsav .dv-home .dv-faq-head, #t-devotsav .dv-home .dv-rail-title{ font-family:var(--dv-font-title); } /* The mock is static: no entrance animation. Neutralising it here also keeps a section screenshot deterministic (the base fades [data-reveal] in from 0). */ #t-devotsav .dv-home [data-reveal]{ opacity:1; transform:none; } #t-devotsav .dv-home .dv-wrap-md{ width:var(--dv-w-md); margin:0 auto; } #t-devotsav .dv-home .dv-wrap-sm{ width:var(--dv-w-sm); margin:0 auto; } /* ── shared: primary button ────────────────────────────────────────────── Measured 194.67 × 50.33, radius 8, label cap-height 10 (⇒ 14px Poppins), 31.3px side padding. The WIDTH FLOATS with the label: it is CMS-editable per language, so freezing the mock's 194.67 would clip the first edit. */ #t-devotsav .dv-home .dv-btn{ display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 31px; border:0; border-radius:var(--dv-radius-btn); background:var(--dv-green); color:#fff; font-family:var(--dv-sans); font-size:18px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1; cursor:pointer; transition:background .18s ease; } #t-devotsav .dv-home .dv-btn:hover{ background:var(--dv-green-dark); } #t-devotsav .dv-home .dv-btn--block{ display:flex; width:100%; } /* the plain-text second CTA beside it — measured cap-height 10, #727272 */ #t-devotsav .dv-home .dv-btn-plain{ border:0; background:none; padding:0 8px; color:#727272; font-family:var(--dv-sans); font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; } #t-devotsav .dv-home .dv-btn-plain:hover{ color:var(--dv-ink); } /* ── shared: benefit chips (DATA-GATED — see the presenter's benefitTags) ── Measured 19px tall, radius 999, 8px gap, 10px uppercase #72101F label. Nothing supplies per-pooja tags today, so this row never renders; it is styled so it is correct the day admin populates pooja_type_map AND the card feed selects it. It must never be faked. */ #t-devotsav .dv-home .dv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; } #t-devotsav .dv-home .dv-chip{ display:inline-flex; align-items:center; height:19px; padding:0 11px; border-radius:999px; background:var(--dv-chip-cream); color:var(--dv-chip-ink); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } #t-devotsav .dv-home .dv-chip:nth-child(even){ background:var(--dv-chip-mauve); } /* ── shared: section head — Cormorant text between two peach diamonds on a gradient rule. Measured: rule 1px, x 375…1549 (1174 wide, centred), peak colour #F1E3C0 fading to transparent both ways; text #4B2A21. */ /* the whole ornament is a FIXED 1174 wide (measured x 375…1549, centred on the page), and the two rules absorb whatever the label does not use — so a long Telugu heading shortens the rules instead of widening the ornament. */ #t-devotsav .dv-home .dv-shead{ display:flex; align-items:center; justify-content:center; gap:11px; width:min(1174px,100%); margin:0 auto; font-weight:400; } #t-devotsav .dv-home .dv-shead-rule{ flex:1 1 auto; min-width:0; height:1px; background:linear-gradient(90deg,transparent,var(--dv-rule)); } #t-devotsav .dv-home .dv-shead-rule:last-child{ background:linear-gradient(90deg,var(--dv-rule),transparent); } #t-devotsav .dv-home .dv-shead-dot{ flex:0 0 auto; width:7px; height:7px; background:#F0B183; transform:rotate(45deg); } #t-devotsav .dv-home .dv-shead-txt{ flex:0 0 auto; font-family:var(--dv-font-serif); font-weight:600; color:var(--dv-serif-ink); white-space:nowrap; } /* ══ S1 HERO ══════════════════════════════════════════════════════════════ Split: copy left (658 wide), creative right (842×461.67 ⇒ ~1.823), 48px gap, inside a 1548 container. The mock's own container is 8px off-centre (194 left / 178 right); centring it is the correct responsive reading. */ /* The mock's two beaded-lotus mandala watermarks (they bled off both edges level with the pastel rail) are deliberately NOT painted — Boss, 2026-08-25: "remove the background images in home page at packages scroll". They were the only image assets this theme shipped beside its stylesheet, so a real branding.css_url upload is now a single self-contained file. */ #t-devotsav .dv-home .dv-top{ position:relative; overflow:hidden; background:var(--dv-white); } /* The base home template ships four side-frame.svg corner ornaments. The devotsav presenter does not render them, yet they are visible at both edges level with the rail in the 2026-08-27 capture — so something outside this theme still mounts them. Suppressed here because the fix has to stay inside this stylesheet; if they persist, the source is upstream of the theme. */ #t-devotsav .corner-design{ display:none; } /* ── beaded-lotus watermarks (Boss, 2026-08-27) ─────────────────────────── Replaces the suppressed side-frame corners with the tenant's own mandala. Two of them, bleeding off the left and right edges level with the rail, the way the mock draws them. Remote URL on purpose — the sheet stays a single self-contained upload with no local asset beside it. The art is BLACK line work on transparency, so the opacity token is doing all the work: at full strength it would read as a diagram, not a watermark. ALL FOUR knobs live here — size, opacity, and the two edge offsets. */ #t-devotsav .dv-home .dv-top{ --dv-orn:url('https://d1lgb33831op6u.cloudfront.net/bg-hero-black.63cfc6a8c9979019.png'); --dv-orn-w:220px; --dv-orn-opacity:.06; --dv-orn-bleed:-100px; /* ~half the glyph sits outside the viewport */ --dv-orn-bottom:120px; } #t-devotsav .dv-home .dv-top::before, #t-devotsav .dv-home .dv-top::after{ content:''; position:absolute; bottom:var(--dv-orn-bottom); width:var(--dv-orn-w); aspect-ratio:1332/1550; /* the source's own ratio */ background:var(--dv-orn) no-repeat center/contain; opacity:var(--dv-orn-opacity); /* z-index:0 keeps it in the positioned layer, where .dv-hero-inner (z-index:1) and the later-in-tree .dv-rail-inner both still paint above it. Without it the watermark would sit over the rail cards, since a positioned element out-paints the static .dv-rail regardless of source order. */ z-index:0; pointer-events:none; } #t-devotsav .dv-home .dv-top::before{ left:var(--dv-orn-bleed); } #t-devotsav .dv-home .dv-top::after{ right:var(--dv-orn-bleed); } /* Header→hero gap. Measured: design 73.00px (band bottom 106.00 → eyebrow ink 179.00) on its own 1920 frame. Held as a fixed 72.7px it is exact at 1920 but reads heavy below it, because the design's own rhythm would scale down with the frame — at 1440 the mock's proportions put this nearer 55px (Boss, 2026-08-25). 3.8vw reproduces 73px at 1920 and tracks the mock's proportion under it; the floor keeps it from collapsing on small laptops. */ #t-devotsav .dv-home .dv-hero-inner{ position:relative; z-index:1; width:var(--dv-w-lg); margin:0 auto; display:grid; grid-template-columns:658fr 842fr; column-gap:48px; align-items:start; } /* The copy column centres against the art (Boss, 2026-08-27). The grid keeps align-items:start so the art holds its 46px top offset and still sets the row height; overriding only this column lets the copy float to the middle of it. Had no rule of its own before — this is its first. */ #t-devotsav .dv-home .dv-hero-copy{ align-self:center; } /* one slide visible at a time; the others are removed from flow so the hero height tracks the live slide instead of the tallest one. */ #t-devotsav .dv-home .dv-hero-slide{ display:none; } #t-devotsav .dv-home .dv-hero-slide.is-on{ display:block; } #t-devotsav .dv-home .dv-eyebrow{ display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:500; letter-spacing:.04em; line-height:1.2; text-transform:uppercase; color:var(--dv-ink); } #t-devotsav .dv-home .dv-eyebrow-ic{ flex:0 0 auto; color:var(--dv-ink); } #t-devotsav .dv-home .dv-hero-title{ margin:9px 0 0; font-size:38px; line-height:49px; font-weight:700; letter-spacing:-.005em; color:var(--dv-ink); } /* three lines then an ellipsis — the mock's own subtitle is clamped ("…ritual con…"), and an unclamped CMS paragraph would push the CTA off the fold. */ #t-devotsav .dv-home .dv-hero-sub{ margin:14px 0 0; font-size:18px; line-height:26px; font-weight:400; color:var(--dv-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } #t-devotsav .dv-home .dv-hero-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin:22px 0 0; font-size:15px; line-height:1.2; color:var(--dv-slate); } #t-devotsav .dv-home .dv-hero-meta .dv-meta-item{ display:inline-flex; align-items:center; gap:4px; } #t-devotsav .dv-home .dv-hero-meta .dv-meta-item + .dv-meta-item::before{ content:'·'; margin-right:5px; color:var(--dv-slate); } /* The design sets all three numerals bold — price, rating and booked count (Boss, 2026-08-27). Price and booked count ship inside ; the rating is a BARE text node beside the svg, so there is no element to weight and the ITEM carries it instead. :has() picks the rating item without relying on position, which *ngIf makes unreliable — any of the three can be absent. */ #t-devotsav .dv-home .dv-hero-meta b{ font-weight:700; } #t-devotsav .dv-home .dv-hero-meta .dv-meta-item:has(> .dv-star){ font-weight:700; } #t-devotsav .dv-home .dv-star{ color:var(--dv-slate); width:11px; height:11px; /* centred against the numeral, and never squeezed by the flex row */ flex:0 0 auto; align-self:center; margin-top: -9px; } #t-devotsav .dv-home .dv-hero-slide .dv-chips{ margin-top:18px; } /* dashed hairline — measured 2.2px dash / 1.9px gap, #CCC, 658 wide. A gradient reproduces the mock's rhythm; CSS `dashed` does not. */ #t-devotsav .dv-home .dv-hero-rule{ height:1px; margin:23px 0 0 0; background-image:repeating-linear-gradient(90deg,var(--dv-dash) 0 2px,transparent 2px 4px); } #t-devotsav .dv-home .dv-hero-row{ display:flex; align-items:center; gap:10px; margin:16px 0 0; font-size:18px; line-height:1.25; color:var(--dv-slate); } #t-devotsav .dv-home .dv-hero-rule + .dv-hero-row{ margin-top:27.3px; } /* display:block + object-fit so a non-square source asset centres on its own box instead of being stretched to 18×18 and sitting off-centre — the row itself was already align-items:center. */ #t-devotsav .dv-home .dv-hero-row img{ flex:0 0 auto; width:18px; height:18px; display:block; object-fit:contain; align-self:center; margin-top: -7px; } #t-devotsav .dv-home .dv-hero-row .dv-row-strong{ font-weight:600; } #t-devotsav .dv-home .dv-hero-ctas{ display:flex; align-items:center; gap:47px; margin:29px 0 0; } /* Capped ~10% under the 842 grid column (Boss, 2026-08-27) and pushed flush RIGHT, so the art's right edge still lines up with the container edge every section below aligns to. Capping here rather than narrowing the grid column keeps the 658 copy column exactly where it is — re-proportioning the `fr` pair would have widened the copy instead of just shrinking the art. */ #t-devotsav .dv-home .dv-hero-art{ margin-top:46px; position:relative; max-width:760px; margin-left:auto; } #t-devotsav .dv-home .dv-hero-frame{ display:none; } #t-devotsav .dv-home .dv-hero-frame.is-on{ display:block; } /* No aspect-ratio: the creative sizes itself. A 3/2 box used to be pinned here with a note claiming the art column ran ~99px taller than the mock's 1.82:1 — measured at 1920 on 2026-08-27 the box renders 845×472 (1.79:1), i.e. the mock's ratio, so the note described something that was not happening. object-fit + the dark ground stay as the safety net for an odd creative. */ #t-devotsav .dv-home .dv-hero-art img{ display:block; width:100%; object-fit:contain; border-radius:10px; cursor:pointer; background:#1a0807; } /* ══ S2 PASTEL SLIDE-PICKER RAIL ═══════════════════════════════════════════ Measured: 4 cards 373×116, 16px gap, radius 8, tinted BY POSITION; the 4th fades under two 51px circular arrows parked on the container's right edge. */ /* 64px, not the 174px this started as. The original figure dated from when the rail sat directly under the hero and the mock's mandala watermarks filled the band; both are gone (Boss, 2026-08-25 / 2026-08-27), so it read as a ~177px void. THE ONLY desktop declaration for this — the duplicate that used to live at EOF was folded in here so the ≤1280 / ≤1024 overrides below can win again (an unconditional rule later in the file out-ranks them at every width). */ #t-devotsav .dv-home .dv-rail{ padding:64px 0 65px; } #t-devotsav .dv-home .dv-rail-inner{ position:relative; width:var(--dv-w-lg); margin:0 auto; } #t-devotsav .dv-home .dv-rail-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } /* the mock fades the last card out under the arrows */ #t-devotsav .dv-home .dv-rail-inner::after{ content:''; position:absolute; inset:0 0 0 auto; width:230px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%); pointer-events:none; } #t-devotsav .dv-home .dv-rail-card{ display:flex; align-items:center; gap:0; height:116px; padding:8px 8px 8px 22px; border:0; border-radius:8px; background:var(--dv-tint-pink); text-align:left; cursor:pointer; overflow:hidden; font-family:var(--dv-sans); } #t-devotsav .dv-home .dv-rail-card[data-tint="1"]{ background:var(--dv-tint-yellow); } #t-devotsav .dv-home .dv-rail-card[data-tint="2"]{ background:var(--dv-tint-green); } #t-devotsav .dv-home .dv-rail-card[data-tint="3"]{ background:var(--dv-tint-rose); } #t-devotsav .dv-home .dv-rail-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px; padding-right:14px; } #t-devotsav .dv-home .dv-rail-title{ font-size:16px; line-height:137%; font-weight:500; color:var(--dv-ink-card); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #t-devotsav .dv-home .dv-rail-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 12px; font-size:13px; line-height:1.2; color:#6E6E6E; } #t-devotsav .dv-home .dv-rail-rating{ display:inline-flex; align-items:center; gap:3px; } /* padding + background = the mock's lighter inner frame around the thumbnail, with no extra element in the DOM. */ #t-devotsav .dv-home .dv-rail-thumb{ flex:0 0 auto; box-sizing:border-box; width:183px; height:100%; padding:9px; object-fit:cover; background:rgba(255,255,255,.38); border-radius:24px; } #t-devotsav .dv-home .dv-rail-nav{ position:absolute; right:7px; top:50%; transform:translateY(-50%); display:flex; gap:11px; z-index:2; } #t-devotsav .dv-home .dv-rail-arrow{ width:51px; height:51px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:#FBFBFB; color:#1A1A1A; box-shadow:0 4px 18px rgba(0,0,0,.10); cursor:pointer; } #t-devotsav .dv-home .dv-rail-arrow:hover{ background:#fff; } /* ══ WARM BAND (journey + puja grid) ══════════════════════════════════════ */ #t-devotsav .dv-home .dv-warm{ background:var(--dv-header); } /* ══ S3 "From Booking to Divine Blessings" ════════════════════════════════ Head ink 1084.7…1103.7 (19 tall incl. descender) ⇒ ~21px Cormorant. Four white cards 291.3×68, 24.3 gap, in the 1240 container. */ #t-devotsav .dv-home .dv-journey{ padding:39.7px 0 0; } #t-devotsav .dv-home .dv-journey .dv-shead-txt{ font-size:21px; line-height:1.25; } #t-devotsav .dv-home .dv-jgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:23px; } #t-devotsav .dv-home .dv-jcard{ position:relative; display:flex; align-items:center; justify-content:center; min-height:68px; padding:8px 14px; border:1px solid var(--dv-card-line); border-radius:10px; background:var(--dv-white); overflow:hidden; } #t-devotsav .dv-home .dv-jnum{ position:absolute; left:14px; top:66%; transform:translateY(-50%); font-size:52px; font-weight:700; line-height:1; color:var(--dv-jnum); pointer-events:none; } #t-devotsav .dv-home .dv-jlabel{ position:relative; text-align:center; font-size:14px; line-height:20px; font-weight:400; color:#3B2A22; /* Ramabhadra for Telugu, not Lohit (Boss, 2026-08-27) — the title stack. Latin is unaffected: Poppins still leads it. */ font-family:var(--dv-title); } /* the CMS marks the emphasised half of every step with a . The stack is repeated on it because the block's :where(…span…) rule MATCHES the span, and a matching rule beats the inherited one — dropping it here would put the emphasised half back on Lohit while the rest of the line stayed Ramabhadra. */ #t-devotsav .dv-home .dv-jlabel span{ font-weight:700; font-family:var(--dv-title); } /* ══ S4 PUJA GRID ═════════════════════════════════════════════════════════ Head ink 1238.3…1263.3 (25 tall) ⇒ ~28px Cormorant. Cards 390 wide × 583, 3 columns, 35 column gap / 24 row gap, radius 12, 16 padding; artwork 358×238.7 = exactly 3:2. */ #t-devotsav .dv-home .dv-pujas{ padding:34.2px 0 0; } #t-devotsav .dv-home .dv-pujas .dv-shead-txt{ font-size:28px; line-height:1.25; } /* ── CATEGORY FILTER CHIPS (restored — Boss, 2026-08-25) ────────────────── The mock has NO chip row, so nothing here could be measured off it. Every number is DERIVED from the design's own control ladder, all measured ÷3: tag badge 19 · filter chip 38 · CTA 50 · rail arrow 51 · ghost 53 · pill 70 — a secondary interactive control sits between the passive badge and the CTA. Gap 8px IS measured: the hero's HEALTH→WEALTH gap is 23 source px ÷3 = 7.7. Radius 999 is this design's only chip/pill radius (tag chips, "Speak to Devotee Care"). Label 13px/500 interpolates the design's own ramp (9.5px on a 19px badge → 14px on a 50px button). Colour: white fill + the design's hairline on the warm #F9F8F4 band; ACTIVE is maroon, not green. Green is this tenant's PRIMARY-ACTION colour (spec §1) and is already spent on every BOOK PUJA NOW in the grid directly below — a green chip would read as a second call to action. Maroon is the spec's accent/state role, and it is what the base's .filter-chip.is-on uses, so lifting this row into the base later needs no re-think. Markup is the BASE's (.pujas-filter/.filter-chip/.filter-tick) — the `dv-` companion classes exist only to keep this styling namespaced per SPLIT.md. */ #t-devotsav .dv-home .dv-filter{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:24px 0 0; overflow:visible; } #t-devotsav .dv-home .dv-fchip{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 20px; border:1px solid var(--brand-line); border-radius:999px; background:var(--dv-white); color:var(--dv-slate); font-family:var(--dv-font-sans); font-size:13px; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; transition:background-color .18s,border-color .18s,color .18s; } #t-devotsav .dv-home .dv-fchip:hover{ border-color:var(--dv-maroon); color:var(--dv-maroon); } #t-devotsav .dv-home .dv-fchip:focus-visible{ outline:2px solid var(--dv-maroon); outline-offset:2px; } #t-devotsav .dv-home .dv-fchip.is-on{ background:var(--dv-maroon); border-color:var(--dv-maroon); color:#FFFFFF; } /* the tick only exists on the selected chip — it is the state's confirmation, so it must not reserve width while the chip is off (that would make the row jitter as the selection moves). */ #t-devotsav .dv-home .dv-ftick{ display:none; width:16px; height:16px; flex:0 0 16px; border-radius:50%; background:#FFFFFF; color:var(--dv-maroon); place-items:center; } #t-devotsav .dv-home .dv-fchip.is-on .dv-ftick{ display:grid; } #t-devotsav .dv-home .dv-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:35px; row-gap:24px; margin-top:32.8px; } /* ONE .puja-card. /pujas, /packages and /chadavas re-skin this same class, so every rule here has to hold for a card that is not on the home page. The base (.vmv2 .puja-card) ships a shadow, 10px padding and a hover lift — all three are explicitly unset, not merely overridden by later rules. */ /* MEASURED: the mock's puja card carries NO hairline — it is a clean white block on the warm #F9F8F4 ground (sampled at the card's top, left and bottom edges: warm → white in one pixel, no border colour between). Card 390 wide, 16 padding, so the artwork is exactly 358 across. ⚠ /pujas and /packages (run 4) sit on a WHITE ground where a borderless white card disappears — that page needs the hairline back, this one must not have it. */ #t-devotsav .dv-home .dv-grid .puja-card{ display:flex; flex-direction:column; padding:16px; border:0; border-radius:var(--dv-radius-card); background:var(--dv-white); box-shadow:none; overflow:hidden; cursor:pointer; } #t-devotsav .dv-home .dv-grid .puja-card:hover{ transform:none; box-shadow:none; } #t-devotsav .dv-home .dv-card-media{ position:relative; border-radius:8px; overflow:hidden; background:#1a0807; } /* 3:2 + contain, NEVER cover: the creatives carry their title, ribbon and temple line BAKED INTO the pixels (gotcha #7). Cropping them loses words. */ #t-devotsav .dv-home .dv-card-media img{ display:block; width:100%; aspect-ratio:3/2; object-fit:contain; } #t-devotsav .dv-home .dv-grid .puja-card:hover .dv-card-media img{ transform:none; } /* NOT in the mock — see the template comment. Small, on the art, low contrast. */ #t-devotsav .dv-home .dv-card-acts{ position:absolute; top:9px; right:9px; display:flex; gap:6px; } #t-devotsav .dv-home .dv-card-act{ width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(255,255,255,.86); color:var(--dv-ink); cursor:pointer; } #t-devotsav .dv-home .dv-card-act.is-saved{ color:var(--dv-maroon); } #t-devotsav .dv-home .dv-card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:0 16px; } #t-devotsav .dv-home .dv-card-title{ margin:21px 0 0; font-size:20px; line-height:25px; font-weight:600; color:var(--dv-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #t-devotsav .dv-home .dv-card-body .dv-chips{ margin-top:13.7px; } #t-devotsav .dv-home .dv-card-kicker{ margin:17px 0 0; font-size:12px; line-height:1; font-weight:400; letter-spacing:.045em; text-transform:uppercase; color:#707070; } #t-devotsav .dv-home .dv-card-row{ display:flex; /* centred, not flex-start (Boss, 2026-08-27) — same call as .dv-hero-row. */ align-items:center; gap:11px; margin:16px 0 0; font-size:15px; line-height:19px; color:var(--dv-slate); } /* the .5px top nudge that used to be here only existed to line the glyph up with the first text line under flex-start; centring makes it a skew. */ #t-devotsav .dv-home .dv-card-row img, #t-devotsav .dv-home .dv-card-row .dv-row-ic{ flex:0 0 auto; width:18px; height:18px; display:block; object-fit:contain; align-self:center; margin-top: -7px; } #t-devotsav .dv-home .dv-card-row .dv-row-ic{ color:var(--dv-maroon); } #t-devotsav .dv-home .dv-card-row .dv-strike{ margin-right:7px; color:#9A9A9A; } /* auto, not a fixed 36: three cards in a row carry different amounts of text and the mock bottom-aligns every CTA. 36 is the floor the mock measures. */ #t-devotsav .dv-home .dv-card-body .dv-btn{ margin-top:auto; padding-top:0; } #t-devotsav .dv-home .dv-card-row:last-of-type{ margin-bottom:36px; } #t-devotsav .dv-home .dv-card-kicker:last-of-type{ margin-bottom:36px; } /* ghost "VIEW ALL PUJA'S": 195.3 × 52.7, radius 8, 1px #74736F, no fill */ #t-devotsav .dv-home .dv-viewall{ display:flex; justify-content:center; padding:24px 0 25.3px; } #t-devotsav .dv-home .dv-ghost{ display:inline-flex; align-items:center; justify-content:center; height:53px; padding:0 27px; border:1px solid var(--dv-ghost-line); border-radius:var(--dv-radius-btn); background:transparent; color:var(--dv-ghost-line); font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; } #t-devotsav .dv-home .dv-ghost:hover{ border-color:var(--dv-ink); color:var(--dv-ink); } #t-devotsav .dv-home .dv-langnote{ margin:18px 0 0; text-align:center; font-size:14px; color:var(--dv-muted); } /* ══ S5 DOUBTS (peach) + FAQ (cream) ══════════════════════════════════════ A full-bleed 50/50 split at x=960. Left pad 76, right column x 1110…1769 (⇒ 150 either side of the right half). Band height 1121.3 in the mock — most of the peach field's lower half was filled by the photo collage, which is OFF for a franchise (showGallery = !isFranchise). Boss (2026-08-25): KEEP the mock height and centre the heading + button in the peach field. */ #t-devotsav .dv-home .dv-help{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:1121px; } /* Top-aligned with the FAQ heading, not centred (Boss, 2026-08-27): the 117px top pad is the SAME figure .dv-help-faq uses, so .dv-help-title's cap line starts level with .dv-faq-head's. The two must be changed together. */ #t-devotsav .dv-home .dv-help-peach{ background:var(--dv-peach); display:flex; align-items:flex-start; padding:117px 76px 60px; } /* …and it rides down with the FAQ list instead of scrolling away. The peach column is 1121px tall against ~300px of copy, so there is ~700px of travel. 106px clears the sticky site header; the rest is breathing room. */ #t-devotsav .dv-home .dv-help-copy{ max-width:740px; position:sticky; top:130px; } #t-devotsav .dv-home .dv-help-title{ margin:0; font-size:40px; line-height:1.15; font-weight:700; color:#000; } #t-devotsav .dv-home .dv-help-sub{ margin:27px 0 0; max-width:712px; font-size:18px; line-height:29px; font-weight:400; color:#000; } /* terracotta pill: 329 × 70.3, radius 999, white label + white circular arrow */ #t-devotsav .dv-home .dv-pill{ display:inline-flex; align-items:center; gap:16px; height: 56px; margin-top:29px; padding:0 12px 0 32px; border-radius:999px; background:var(--dv-terracotta); color:#fff; font-size:19px; font-weight:500; text-decoration:none; } #t-devotsav .dv-home .dv-pill span{ margin-top: 6px; } #t-devotsav .dv-home .dv-pill:hover{ background:#A94806; } #t-devotsav .dv-home .dv-pill-ic{ flex:0 0 auto; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--dv-terracotta); } #t-devotsav .dv-home .dv-help-faq{ background:var(--dv-cream); padding:117px 150px 60px; } #t-devotsav .dv-home .dv-faq-inner{ max-width:659px; } #t-devotsav .dv-home .dv-faq-head{ margin:0; font-size:38px; line-height:1.15; font-weight:700; color:#000; } #t-devotsav .dv-home .dv-faq-list{ margin-top:38.7px; display:flex; flex-direction:column; } #t-devotsav .dv-home .dv-faq-item{ margin:0 0 19.7px; } #t-devotsav .dv-home .dv-faq-item > summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:63.7px; padding:12px 18px 12px 24px; border:1px solid #000; border-radius:8px; list-style:none; cursor:pointer; } #t-devotsav .dv-home .dv-faq-item > summary::-webkit-details-marker{ display:none; } #t-devotsav .dv-home .dv-faq-q{ font-size:18px; line-height:24px; font-weight:400; color:var(--dv-ink); } #t-devotsav .dv-home .dv-faq-mark{ flex:0 0 auto; width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#000; color:#fff; } #t-devotsav .dv-home .dv-faq-item .dv-mark-minus{ display:none; } #t-devotsav .dv-home .dv-faq-item[open] .dv-mark-plus{ display:none; } #t-devotsav .dv-home .dv-faq-item[open] .dv-mark-minus{ display:block; } /* the mock leaves the answer OUTSIDE the bordered box, unboxed */ #t-devotsav .dv-home .dv-faq-body{ padding:11.7px 20px 0; font-size:16px; line-height:25.7px; color:var(--dv-slate); } /* ══ S6 app_section — NOT BUILT ═══════════════════════════════════════════ The mock's "A Temple in Your Pocket" / "How does … Online Puja Works?" band is dropped for this tenant (Boss, 2026-08-25): app_section.phone_image_url is a screenshot of the VEDAMANDIR app and the home content blob is SHARED, so a franchise would publish another brand's product shot as its own — the same leak showGallery / showTestimonials are already gated for. No .dv-works, .dv-steps or .dv-step rules exist any more; the presenter renders no such nodes. Declared in _contracts/home.omissions.json. */ /* ══ RESPONSIVE ═════════════════════════════════════════════════════════════ There is NO mobile mock for this design. Nothing below is invented styling — it is the same tokens, type ramp and rhythm as the 1920 frame, re-flowed to one column, with the desktop-only ornaments (the rail's fade and arrows, the section rules at 430) dropped rather than shrunk into noise. Verified at 1440 and 430: no horizontal scroll at either. */ /* ── ≤1280: the hero container is already fluid here (it caps at --dv-cmax 1280, so below a ~1391 viewport it is the 92% arm), but the rail's four cards stop fitting long before that. */ @media (max-width:1280px){ #t-devotsav .dv-home .dv-rail-track{ grid-template-columns:repeat(2,1fr); } #t-devotsav .dv-home .dv-rail-inner::after{ display:none; } #t-devotsav .dv-home .dv-rail-nav{ position:static; transform:none; justify-content:flex-end; margin-top:14px; } /* the 96px that was here was scaled off the old 174px desktop figure; with the base at 64px it would have made the band JUMP wider below 1280. */ } /* ── ≤1024: one column everywhere. */ @media (max-width:1024px){ #t-devotsav .dv-home .dv-hero{ padding:34px 0 0; } #t-devotsav .dv-home .dv-hero-inner{ grid-template-columns:1fr; row-gap:26px; } /* a 300px glyph is a third of a 430 screen — scale it with the layout rather than dropping it, so the tenant keeps its ornament on a phone. */ #t-devotsav .dv-home .dv-top{ --dv-orn-w:140px; --dv-orn-bleed:-70px; } /* single column here — drop the desktop cap so the art stays full-bleed and left-aligned with the copy instead of floating right. order:-1 lifts it ABOVE the copy (Boss, 2026-08-27): the DOM puts the copy first for desktop's two-column split, and on one column the creative should lead. Visual-only reorder — reading order and focus order are unchanged, which is fine here because the art is decorative and its booking action is duplicated by the CTA below it. */ #t-devotsav .dv-home .dv-hero-art{ margin-top:0; max-width:none; margin-left:0; order:-1; } #t-devotsav .dv-home .dv-hero-title{ font-size:30px; line-height:39px; margin-top:8px; } #t-devotsav .dv-home .dv-hero-sub{ font-size:16px; line-height:24px; margin-top:12px; } #t-devotsav .dv-home .dv-hero-meta{ font-size:14px; margin-top:18px; } #t-devotsav .dv-home .dv-hero-row{ font-size:16px; margin-top:14px; } #t-devotsav .dv-home .dv-hero-rule + .dv-hero-row{ margin-top:22px; } #t-devotsav .dv-home .dv-hero-ctas{ margin-top:24px; gap:24px; } #t-devotsav .dv-home .dv-rail{ padding:56px 0 40px; } #t-devotsav .dv-home .dv-rail-track{ grid-template-columns:1fr; gap:12px; } #t-devotsav .dv-home .dv-rail-nav{ display:none; } #t-devotsav .dv-home .dv-journey{ padding-top:34px; } #t-devotsav .dv-home .dv-jgrid{ grid-template-columns:repeat(2,1fr); gap:14px; } #t-devotsav .dv-home .dv-pujas{ padding-top:34px; } #t-devotsav .dv-home .dv-grid{ grid-template-columns:repeat(2,1fr); column-gap:20px; row-gap:20px; margin-top:24px; } #t-devotsav .dv-home .dv-card-title{ font-size:18px; line-height:24px; margin-top:16px; } #t-devotsav .dv-home .dv-card-body .dv-btn{ margin-top:24px; } #t-devotsav .dv-home .dv-card-row:last-of-type, #t-devotsav .dv-home .dv-card-kicker:last-of-type{ margin-bottom:24px; } /* the mock's tall peach field only exists because a photo collage filled it; with the collage off (franchise) a phone would scroll past an empty block. */ #t-devotsav .dv-home .dv-help{ grid-template-columns:1fr; min-height:0; } #t-devotsav .dv-home .dv-help-peach{ padding:48px 4%; } /* one column here — the peach block sits ABOVE the FAQ rather than beside it, so there is nothing to ride alongside and sticking it would pin the heading over the questions as they scroll. */ #t-devotsav .dv-home .dv-help-copy{ position:static; } #t-devotsav .dv-home .dv-help-title{ font-size:30px; } #t-devotsav .dv-home .dv-help-sub{ font-size:16px; line-height:26px; margin-top:16px; } #t-devotsav .dv-home .dv-pill{ height:60px; font-size:16px; padding:0 10px 0 24px; gap:12px; margin-top:24px; } #t-devotsav .dv-home .dv-pill-ic{ width:40px; height:40px; } #t-devotsav .dv-home .dv-help-faq{ padding:48px 4%; } #t-devotsav .dv-home .dv-faq-inner{ max-width:none; } #t-devotsav .dv-home .dv-faq-head{ font-size:28px; } #t-devotsav .dv-home .dv-faq-list{ margin-top:24px; } #t-devotsav .dv-home .dv-faq-q{ font-size:16px; line-height:22px; } #t-devotsav .dv-home .dv-faq-body{ font-size:15px; line-height:24px; } } /* ── ≤640: single column, and the section rules become noise at this width. */ @media (max-width:640px){ #t-devotsav .dv-home .dv-hero-title{ font-size:26px; line-height:34px; } #t-devotsav .dv-home .dv-hero-ctas{ gap:16px; flex-wrap:wrap; } #t-devotsav .dv-home .dv-btn{ height:46px; padding:0 22px; } #t-devotsav .dv-home .dv-btn-plain{ padding:0; } #t-devotsav .dv-home .dv-shead-rule{ display:none; } #t-devotsav .dv-home .dv-shead{ gap:9px; } #t-devotsav .dv-home .dv-shead-txt{ white-space:normal; text-align:center; } #t-devotsav .dv-home .dv-journey .dv-shead-txt{ font-size:19px; } #t-devotsav .dv-home .dv-pujas .dv-shead-txt{ font-size:23px; } #t-devotsav .dv-home .dv-jgrid{ grid-template-columns:1fr; } #t-devotsav .dv-home .dv-jcard{ min-height:62px; } #t-devotsav .dv-home .dv-grid{ grid-template-columns:1fr; } #t-devotsav .dv-home .dv-viewall{ padding:20px 0 24px; } /* A Telugu category name ("జాతకంలో గ్రహ దోష నివారణ") is far wider than the mock's Latin, so wrapping to three stacked rows would eat the fold. Swipe rail instead: chips keep their size and the row scrolls inside the same .dv-wrap-md column the cards use, so the first chip's left edge lines up with the first card's. Scrollbar hidden; the overflow is contained by this element, so the PAGE never gains a horizontal scrollbar. */ #t-devotsav .dv-home .dv-filter{ flex-wrap:nowrap; justify-content:flex-start; margin:20px 0 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } #t-devotsav .dv-home .dv-filter::-webkit-scrollbar{ display:none; } #t-devotsav .dv-home .dv-fchip{ flex:0 0 auto; height:36px; padding:0 16px; font-size:12.5px; } /* the rail card's thumbnail cannot keep 183px next to a title on a 430 column */ #t-devotsav .dv-home .dv-rail-card{ height:104px; padding-left:16px; } #t-devotsav .dv-home .dv-rail-thumb{ width:132px; padding:7px; } #t-devotsav .dv-home .dv-rail-title{ font-size:15px; line-height:21px; } #t-devotsav .dv-home .dv-rail-meta{ font-size:12px; } #t-devotsav .dv-home .dv-help-title{ font-size:26px; } #t-devotsav .dv-home .dv-faq-head{ font-size:24px; } } /* ══ [A] end home ══════════════════════════════════════════════════════════ */ /* ══ [A] footer ═════════════════════════════════════════════════════════════ Shared component (components/vm-footer) — mechanism C, CSS only, no DOM edit. Design band 4397…4760.3 (363.3 tall) on #F9F8F4, container x 285…1620 (1335). Columns start at 285 · 716 · 1014.7 · 1314. Hairline #CECECE at 4663.5, then a bottom bar: copyright left (#838280, brand word #A43321) and "Follow Us on" + two 17px social marks right. The mock's bottom-right socials live in the component's `.finale` block, which is otherwise entirely dropped here. `display:contents` on .finale lifts its children into the .dark-zone grid so .follow-row can sit beside .footer-base on the same row — no markup change, and the flagship is untouched. */ #t-devotsav .vm-footer{ /* the footer is rendered on every devotsav page, including ones that never mount .dv-home, so it carries its own copy of the two stacks. */ --dv-font-sans:'Poppins','Lohit Telugu',system-ui,-apple-system,sans-serif; --dv-font-serif:'Cormorant Infant','Ramabhadra',Georgia,serif; background:var(--dv-header); } #t-devotsav .vm-footer .dark-zone{ --footer-bg-image:none; box-sizing:border-box; width:min(var(--dv-cmax),92%); /* design 1335 */ margin:0 auto; padding:44px 0 41px; background:var(--dv-header); color:var(--dv-ink); overflow:visible; display:grid; grid-template-columns:1fr auto; } #t-devotsav .vm-footer .dark-bg{ display:none; } #t-devotsav .vm-footer .finale{ display:contents; } #t-devotsav .vm-footer .finale-title, #t-devotsav .vm-footer .finale-sub, #t-devotsav .vm-footer .finale-proof, #t-devotsav .vm-footer .view-all-pill, #t-devotsav .vm-footer .finale br{ display:none; } #t-devotsav .vm-footer .footer-grid{ grid-column:1 / -1; grid-row:1; width:100%; margin:0; padding:0; border-top:0; display:grid; grid-template-columns:431fr 299fr 299fr 306fr; gap:0; } /* col 1 — lockup left-aligned inside a 323-wide centred text block, inset 41 */ #t-devotsav .vm-footer .foot-brand{ margin-left:41px; max-width:323px; text-align:center; } #t-devotsav .vm-footer .foot-brand .brand.light{ display:block; width:-moz-fit-content; width:fit-content; } /* HEIGHT, never width — the admin can re-upload the lockup at any aspect. */ #t-devotsav .vm-footer .foot-brand .brand.light img{ width:auto; height:54px; display:block; } #t-devotsav .vm-footer .foot-brand p{ margin:37px 0 0; font-family:var(--dv-font-sans); font-size:16px; line-height:23px; letter-spacing:0; color:var(--dv-ink); } /* cols 2-4 — Cormorant heads (the mock's only serif besides the section rules) */ #t-devotsav .vm-footer .foot-col{ gap:0; } #t-devotsav .vm-footer .foot-col h5{ margin:0 0 22px; font-family:var(--dv-font-serif); font-weight:600; font-size:26px; line-height:1; letter-spacing:.01em; color:var(--dv-ink); } #t-devotsav .vm-footer .foot-col a{ margin-bottom:16px; gap:9px; font-family:var(--dv-font-sans); font-size:16px; line-height:20px; color:var(--dv-ink); } #t-devotsav .vm-footer .foot-col a:last-child{ margin-bottom:0; } #t-devotsav .vm-footer .foot-col a:hover{ color:var(--dv-wordmark); } #t-devotsav .vm-footer .foot-col a svg{ width:15px; height:15px; margin-top:3px; opacity:1; } /* bottom bar — the hairline is drawn by BOTH cells of row 2 so it reads as one continuous 1px rule across the container. */ #t-devotsav .vm-footer .footer-base{ grid-column:1; grid-row:2; margin-top:52px; padding:32px 0 0; border-top:1px solid #CECECE; } #t-devotsav .vm-footer .fb-inner{ width:auto; margin:0; text-align:left; font-family:var(--dv-font-sans); font-size:16px; line-height:21px; color:#838280; } #t-devotsav .vm-footer .follow-row{ grid-column:2; grid-row:2; margin:52px 0 0; padding:32px 0 0; border-top:1px solid #CECECE; gap:21px; align-items:center; justify-content:flex-end; } #t-devotsav .vm-footer .follow-cap{ font-family:var(--dv-font-sans); font-size:16px; line-height:21px; color:#838280; } #t-devotsav .vm-footer .follow-row .sicon svg{ width:17px; height:17px; } #t-devotsav .vm-footer .follow-row .sicon svg *{ fill:#3B3B3B; stroke:#3B3B3B; } #t-devotsav .vm-footer .follow-row .sicon.yt svg path{ fill:var(--dv-header); stroke:none; } /* the shared rule `body:has(.mobile-nav) .dark-zone{padding-bottom:94px}` clears the fixed bottom bar — that bar only exists ≤1024, so undo it above. */ @media (min-width:1025px){ #t-devotsav .vm-footer .dark-zone{ padding-bottom:41px; } } /* ── footer, responsive. The component ships its own ≤900 / ≤640 grid rules, but they are class-only (0,1,0) and the desktop grid above is id-scoped, so it would otherwise keep four columns on a 430 screen. Re-stated here. */ @media (max-width:1024px){ #t-devotsav .vm-footer .dark-zone{ display:block; padding:40px 0 24px; } #t-devotsav .vm-footer .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } #t-devotsav .vm-footer .foot-brand{ grid-column:1 / -1; margin-left:0; max-width:none; text-align:left; } #t-devotsav .vm-footer .foot-col h5{ font-size:22px; margin-bottom:14px; } #t-devotsav .vm-footer .foot-col a{ font-size:15px; margin-bottom:12px; } #t-devotsav .vm-footer .footer-base{ margin-top:28px; padding-top:20px; } #t-devotsav .vm-footer .fb-inner{ font-size:14px; } #t-devotsav .vm-footer .follow-row{ margin:16px 0 0; padding:0; border-top:0; justify-content:flex-start; } } @media (max-width:640px){ #t-devotsav .vm-footer .footer-grid{ grid-template-columns:1fr; gap:26px; } #t-devotsav .vm-footer .foot-brand p{ margin-top:20px; } } /* ══ [A] end footer ════════════════════════════════════════════════════════ */ /* ── [B] pooja-details + package-details · FIXES (Boss, 2026-08-25) ─────────── 1. Kill the 69px top gap. A global `.section` rule in the base page SCSS puts padding-top:69px on .dv-hero (it reaches this presenter even though the base component never mounts), which pushed the hero down on every puja and package. Measured: media top was 250 instead of 181 at 1440. 2. Wishlist + Share now overlay the carousel, top-right. 3. The right-hand column sticks on desktop while the prose scrolls. 4. Mobile trust badges scroll horizontally instead of wrapping to a 2x2. 5. The section nav sticks under the 106px header on every details page. ═════════════════════════════════════════════════════════════════════════ */ /* 1 ── top gap */ #t-devotsav .dv-details .dv-hero{ padding-top:0; } #t-devotsav .dv-details .content-scroll{ padding-top:0; } /* 2 ── wishlist + share over the carousel */ #t-devotsav .dv-details .dv-media-tools{ position:absolute; top:12px; right:12px; z-index:3; display:flex; gap:8px; } #t-devotsav .dv-details .dv-media-tools .wishlist-btn, #t-devotsav .dv-details .dv-media-tools .share-btn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:0; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.92); color:var(--dv-ink); font:600 13px/1 var(--dv-sans); box-shadow:0 2px 10px rgba(0,0,0,.16); backdrop-filter:blur(3px); } #t-devotsav .dv-details .dv-media-tools .wishlist-btn:hover, #t-devotsav .dv-details .dv-media-tools .share-btn:hover{ background:#fff; } #t-devotsav .dv-details .dv-media-tools .wishlist-btn.is-saved{ color:var(--dv-maroon); } #t-devotsav .dv-details .dv-media-tools .share-btn img{ width:13px; height:13px; } /* the share sheet's own trigger stays hidden — the pill above opens it */ #t-devotsav .dv-details .pd-share{ margin:0; } /* 3 ── sticky right column (desktop only). A grid item's sticky containing block is its GRID AREA. With align-items:start that area collapses to the item's own height, so there is nothing to travel within and the column never pins. The area must span the full row (stretch) while the box stays content-height (height:max-content). */ #t-devotsav .dv-details .dv-body{ align-items:stretch; } #t-devotsav .dv-details .dv-side{ position:sticky; top:158px; align-self:stretch; height:max-content; } /* 5 ── sticky section nav, under the 106px header. The two offset shadows paint the horizontal gutters in cream without bleeding vertically, so the stuck bar is opaque edge to edge. */ #t-devotsav .dv-details .dv-tabs{ /* z-index stays under the header nav (9999) AND under the mobile minibar (40) */ position:sticky; top:106px; z-index:30; background:var(--dv-cream); box-shadow:-100vw 0 0 var(--dv-cream), 100vw 0 0 var(--dv-cream); padding-top: 1rem; } /* sections must clear the header + the stuck nav when the tab strip scrolls to them */ #t-devotsav .dv-details .pd-section{ scroll-margin-top:170px; } @media (max-width:900px){ /* 4 ── trust badges scroll horizontally instead of wrapping */ #t-devotsav .dv-details .pd-trust-mobile{ display:flex; flex-wrap:nowrap; gap:10px; margin-top:16px; overflow-x:auto; scrollbar-width:none; /* bleed to the viewport edges so the row reads as scrollable */ margin-inline:-16px; padding-inline:16px; scroll-snap-type:x proximity; } #t-devotsav .dv-details .pd-trust-mobile::-webkit-scrollbar{ display:none; } #t-devotsav .dv-details .pd-trust-mobile .pd-trust-item{ flex:0 0 auto; max-width:none; gap:8px; scroll-snap-align:start; padding:9px 12px; border:1px solid var(--brand-line); border-radius:10px; background:#fff; } #t-devotsav .dv-details .pd-trust-mobile .pd-trust-item span{ white-space:nowrap; font-size:13px; } /* 3 ── no sticky sidebar on a single-column layout */ #t-devotsav .dv-details .dv-side{ position:static; } /* watermarks scale with the layout, same call as the home block */ #t-devotsav .dv-details .main-pooja-details{ --pd-orn-full:150px; --pd-orn-show:75px; --pd-orn-bottom:24px; } /* 5 ── the mobile header is the slim back bar, not the 106px desktop nav */ #t-devotsav .dv-details .dv-tabs{ top:var(--dv-mobile-hdr,59px); } #t-devotsav .dv-details .pd-section{ scroll-margin-top:120px; } #t-devotsav .dv-details .dv-media-tools{ top:10px; right:10px; } } /* ── [B] details · alignment + image fit (Boss, 2026-08-25) ────────────────── 1. FAQ now precedes Gallery so the page ends in the nav strip's order. 2. The CTA and the WhatsApp/Call pair are centred under the detail card. They were flush-left at 310px inside a 550px column, leaving 240px of ragged white to their right. 3. Images were being CROPPED. Measured: every pooja creative is 3:2 (900x600 / 1200x800) but the media box was 588x322 = 1.826, so `cover` shaved ~18% off the top and bottom — and this is baked-text art, so the temple name and ribbon were being cut off the frame. Box is now 3/2 (matches the art exactly = no bars) AND object-fit is `contain`, so an off-ratio creative letterboxes instead of ever cropping. The stat rail follows the new height on its own — it stretches to the media row. ═════════════════════════════════════════════════════════════════════════ */ /* 2 ── centre the primary action block */ /* Full width (Boss, 2026-08-27) — a DEVIATION from the design, which draws the CTA at 310 inside the 550 column (banner: "green CTA 930×135 → 310×45"). align-items goes centre → stretch, and the two fixed 310px widths are released; without both, stretch alone cannot beat an explicit width. */ #t-devotsav .dv-details .dv-cta-row{ display:flex; flex-direction:column; align-items:stretch; gap:14px; } #t-devotsav .dv-details .dv-cta, #t-devotsav .dv-details .pd-notify-discound{ width:100%; } #t-devotsav .dv-details .pd-help-btns{ margin-top:0; justify-content:center; } /* 3 ── never crop a pooja creative */ #t-devotsav .dv-details .pd-media{ aspect-ratio:3/2; background:#F4F0ED; } #t-devotsav .dv-details .pd-media-slide img.media-image, #t-devotsav .dv-details .pd-media-slide video.media-video{ object-fit:contain; } /* the temple strip in the body carries the same art, same rule */ #t-devotsav .dv-details .pd-temple-img{ aspect-ratio:3/2; background:#F4F0ED; } #t-devotsav .dv-details .pd-temple-track .media-image{ object-fit:contain; } @media (max-width:900px){ #t-devotsav .dv-details .pd-media{ aspect-ratio:3/2; } } /* ── [B] details · FAQ + Gallery measure (Boss, 2026-08-25) ────────────────── Both were stretching to the full 1384 container and reading badly. FAQ: measured on the 1920 reference, the design's FAQ items are 659px wide (x 1110..1769) — a narrow column beside the peach "Doubts?" panel, never a full-width band. That panel was dropped, so the column is kept at its design measure and CENTRED instead of stretched. The heading stays left-aligned inside it, as the design draws it. Gallery: the design is 5 square cells of 258 with a 12 gap. The bug was a fixed 5-column grid holding 4 images — the 5th slot stayed empty, so the row sat left-heavy with a ragged hole on the right. Now the cells keep their design size and CENTRE as a group, so any number of images reads balanced. ═════════════════════════════════════════════════════════════════════════ */ /* Both were CENTRED while they were full-width bands. Now that they sit in the 692 left column they align left with the rest of it (Boss, 2026-08-27). */ #t-devotsav .dv-details .dv-faq-band{ max-width:660px; margin-inline:0; } #t-devotsav .dv-details .pooja-gallery-section .pd-section-title{ text-align:left; } #t-devotsav .dv-details .pd-gallery-grid{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; } /* The design's 258px cell was sized for a 1384 band — five across. In a 692 column it only fits twice and left ~150px of dead space on every row, so the cell now DIVIDES the column three ways instead of holding its old width. */ #t-devotsav .dv-details .pd-gallery-cell{ flex:0 0 calc((100% - 24px) / 3); max-width:100%; aspect-ratio:1; } @media (max-width:900px){ #t-devotsav .dv-details .dv-faq-band{ max-width:none; } #t-devotsav .dv-details .pd-gallery-grid{ gap:8px; } #t-devotsav .dv-details .pd-gallery-cell{ flex:0 0 calc(50% - 4px); } } /* ══ [A] list pages — /pujas · /packages · /chadavas ═══════════════════════ Base-class overrides (`.book-btn` is the base's own class, shared by all three list templates and used nowhere else — verified, so no [B] overlap). Full list-page theming lands in run 4; this block starts with the one defect Boss reported. */ /* The base hovers this button to --brand-primary-accent-dark. On the flagship that token is #A54C0B (burnt orange); under this tenant it resolves to #731513 (maroon). Either way a GREEN button must not hover to a warm hue — it reads as a different button. Boss, 2026-08-25: keep it green, and make the hover better than a flat swap. */ #t-devotsav .book-btn{ transition:background .2s ease, transform .15s ease, box-shadow .2s ease; } #t-devotsav .book-btn:hover{ background:var(--dv-green-dark); box-shadow:0 6px 16px rgba(0,176,95,.28); } #t-devotsav .book-btn:active{ background:#00843F; transform:translateY(0); box-shadow:0 2px 6px rgba(0,176,95,.22); } /* ══ [A] end list pages ═══════════════════════════════════════════════════ */ /* ══ [A] home — hero dots + packages slider ════════════════════════════════ Boss, 2026-08-25: the slider under the hero is PACKAGES now and independent of the hero, so the hero needed its own pagination. Appended at EOF rather than edited into the [A] home block above because a parallel run was writing that region — same-selector, later-wins, no contested old_string. */ #t-devotsav .dv-home .dv-hero-dots{ display:flex; justify-content:center; align-items:center; gap:8px; padding:26px 0 0; } #t-devotsav .dv-home .dv-dot{ width:8px; height:8px; padding:0; border:0; border-radius:999px; background:#E0D8D2; cursor:pointer; transition:background .2s ease, width .2s ease; } #t-devotsav .dv-home .dv-dot:hover{ background:#C3B7AE; } #t-devotsav .dv-home .dv-dot.is-on{ width:22px; background:var(--dv-maroon); } /* Package card content — the slider's shell (.dv-rail*) is unchanged and still carries the mock's tints, geometry and arrows. Only the text block differs: a schedule line and a price+per-booking pair instead of a rating. */ #t-devotsav .dv-home .dv-rail-sched{ color:var(--dv-muted); font-size:11px; line-height:1.3; } #t-devotsav .dv-home .dv-rail-price{ display:flex; align-items:baseline; gap:5px; color:var(--dv-ink-card); font-size:12px; font-weight:600; } #t-devotsav .dv-home .dv-rail-strike{ color:var(--dv-muted); font-weight:400; text-decoration:line-through; } #t-devotsav .dv-home .dv-rail-per{ color:var(--dv-muted); font-size:10px; font-weight:400; } /* ══ [A] end home — hero dots + packages slider ═══════════════════════════ */ /* ── [B] checkout + status · HOVER / GLOW token leak (Boss, 2026-08-25) ────── Boss caught the checkout "Continue" button turning flagship MAROON on hover. Root cause was wider than one button: I audited every --brand- and --bp custom property the checkout + payment-status trees consume against what #t-devotsav defines, and 12 were still inheriting the flagship values from :root. The load-bearing one is --brand-primary-dark-b (#6D0B01): it is the hover colour for EVERY primary button on both pages — .ck-order-cta (the Continue button Boss saw) .ck-phone-verify · .ck-apply-btn · .ckp-add · .ckp-qty-btn .sk-btn-primary · .sk-btn-ghost (payment-status too) and --bp-a55 / --bp-a7 are the drop-shadow GLOW under those buttons, so a green CTA was casting a maroon shadow. --bpac-* derive from --brand-primary-accent-c, which this theme maps to --dv-terracotta (#C15608). That happens to equal the flagship value, so they are pinned here explicitly rather than left to inherit by luck. ═════════════════════════════════════════════════════════════════════════ */ #t-devotsav{ /* primary (DEEP GREEN on this tenant) */ --brand-primary-2:#098b62; --brand-primary-dark-b:#087A56; --bp-a55:rgba(0,176,95,.55); --bp-a7:rgba(0,176,95,.7); --bp2-a06:rgba(0,176,95,.06); /* accent (MAROON on this tenant — never the flagship orange) */ --bpa-a4:rgba(140,14,0,.4); /* terracotta accent-c, pinned to this theme's own value */ --bpac-a08:rgba(193,86,8,.08); --bpac-a1:rgba(193,86,8,.1); --bpac-a12:rgba(193,86,8,.12); --bpac-a25:rgba(193,86,8,.25); --bpac-a5:rgba(193,86,8,.5); /* --bpac-a7 has exactly ONE consumer: the glow under .sk-btn-primary, which is DEEP GREEN on this tenant — so the glow follows the button, not the accent. The other --bpac-* stay terracotta; they tint accent surfaces. */ --bpac-a7:rgba(0,176,95,.7); } /* ══ [A] list pages · run 4 — /pujas · /packages · /chadavas ═══════════════ MECHANISM C (class-override). No presenter, no template edit: the three base templates share ONE `.puja-card` and ONE root wrapper `.pujas-page` (home.component.html:3 `pujas-page`, packages:3 `pujas-page packages-page`, chadavas:3 `pujas-page chadavas-page` — grepped, no fourth user). `.pujas-page` is therefore this surface's ROOT CLASS in the sense of SPLIT.md §6; every selector below carries it. Nothing here can reach the details / checkout / status surfaces, so no [B] overlap is possible. SOURCE OF TRUTH = the home card (`[A] home`, S4 PUJA GRID above). Every number below is copied from there, not re-derived: grid 3 cols · column-gap 35 · row-gap 24 · container 1240 card padding 16 · radius 12 · no shadow · no hover lift · art radius 8 title margin-top 21 · 20/25 · 600 kicker margin-top 17 · 12px · ls .045em · UPPERCASE · #707070 row margin-top 16 · gap 11 · 15/19 · #595C63 · icon 18 · strike #9A9A9A CTA full-bleed · height 50 · radius 8 · #098b62 · 14/600 · ls .04em ONE deliberate departure, and it was asked for: the home card sits on the warm #F9F8F4 band and has NO border; these three list on WHITE, where a borderless white card disappears — so the card gets the design's own hairline (1px --brand-line #E7E1E1). DOM LIMITS (CSS cannot invent a node — recorded, not faked): · the home card's "GET BLESSINGS" kicker is bound to the CMS slot `pujas_section.card_kicker`; no list template binds it. Rather than fake the copy with ::before content (unlocalisable on a Telugu-locked franchise, invisible to crawlers), the kicker SLOT is filled by the element already in that position — `.puja-yaga`, which carries `puja.ribbon` (/pujas) or `puja.tags[1]` (packages/chadavas). Real data, real markup, restyled to the home kicker's type. Where that data is empty the line is simply absent. · `.puja-desc` (short_description) has no counterpart on the home card and is hidden, so the two cards keep the same vertical rhythm. · DOM order is temple→date and ribbon-above-title; the home card is title→kicker→date→temple. Fixed with flex `order`, which is a visual reorder only. ══════════════════════════════════════════════════════════════════════════ */ /* ── page-scoped token remap (mechanism B applied inside C) ──────────────── `.pujas-page` does `@include brand-aliases`, so the whole page — cards, chips, filter modal, empty states — reads --maroon / --line / --serif … Those aliases forward to the canonical --brand-* set, and this tenant maps --brand-primary to GREEN, so every "maroon" accent on this page is currently rendering GREEN (chip tick, filter badge, checkbox, tab marker). Spec §1: green is the PRIMARY-ACTION colour and maroon is the accent/state role — so the alias is re-pointed at the real maroon here, exactly the way the home filter row uses maroon for `.dv-fchip.is-on`. */ #t-devotsav .pujas-page{ --maroon:var(--dv-maroon); --maroon-dk:var(--dv-wordmark); --maroon-deep:var(--dv-wordmark); --ink:var(--dv-ink); --ink-soft:#595C63; --text:var(--dv-ink); --muted:var(--dv-muted); --line:var(--brand-line); --cream:var(--dv-cream); --gold:var(--dv-maroon); /* there is no gold in this palette (spec §2) */ --shadow-sm:none; /* the design's card/field language is flat */ --shadow-md:0 14px 34px -22px rgba(50,50,50,.30); --shadow-lg:0 24px 60px -30px rgba(50,50,50,.35); /* the base hovers the modal's APPLY button (a green button) to --brand-primary-dark-b #6D0B01, a maroon. Same defect class as the .book-btn hover fixed above — keep a green button green. */ --brand-primary-dark-b:var(--dv-green-dark); /* spinner rings are --brand-primary-accent (#FF5722 flagship orange) */ --brand-primary-accent:var(--dv-green); --brand-title-ink:var(--dvl-serif-ink); --brand-title-ink-2:var(--dv-ink); /* local surface tokens. Named dvl-* so they can never collide with the home block's .dv-home-local vars or with session B's. Values are the home block's, copied — not new colours. */ --dvl-slate:#595C63; /* = .dv-home --dv-slate (meta rows) */ --dvl-serif-ink:#4B2A21; /* = .dv-home --dv-serif-ink (section head) */ --dvl-rule:#F1E3C0; /* = .dv-home --dv-rule */ --dvl-diamond:#F0B183; /* = .dv-home .dv-shead-dot */ --dvl-kicker:#707070; /* = .dv-home .dv-card-kicker */ --dvl-strike:#9A9A9A; /* = .dv-home .dv-strike */ --dvl-sans:'Poppins','Lohit Telugu',system-ui,-apple-system,sans-serif; --dvl-title:'Poppins','Ramabhadra',system-ui,-apple-system,sans-serif; --dvl-serif:'Cormorant Infant','Ramabhadra',Georgia,serif; background:var(--dv-white); font-family:var(--dvl-sans); color:var(--dv-ink); } /* styles.scss ships `#te-text p,li{font-family:'Lohit Telugu';font-size:16px}` (1,0,1) and `#te-text .puja-name{font-family:'Ramabhadra'}` (1,1,0). A MATCHING rule beats an INHERITED one, so the stack must be named on the elements. :where() holds this at (1,1,0) — one class above #te-text's (1,0,1), and below every explicit rule further down. Same device the home block uses; Telugu still lands on the main site's faces because Poppins has no Telugu coverage and the fallbacks are the site's own. */ #t-devotsav .pujas-page :where(p,li,ul,ol,span,a,b,s,small,div,button,input,h1,h2,h3,h4){ font-family:var(--dvl-sans); } /* ── the grid container: the flagship's 1280, same as every other Devotsav surface. (It was home's 1240 measure, chosen so a card matched the home card's 390 at 1920 — the cards are fr-based, so they take the extra 40.) */ #t-devotsav .pujas-page .container{ width:min(var(--dv-cmax),92%); margin:0 auto; } /* ══ TOP / HERO ═══════════════════════════════════════════════════════════ The design has no list page, so this is derived: the band takes the header's own #F9F8F4 so header + hero read as one Devotsav field, then the listing drops to white. The flagship's chakra ornaments are dropped — Devotsav's ornament vocabulary is the peach diamond + gradient rule (home section head), never a chakra watermark. */ #t-devotsav .pujas-page .puja-hero{ background:var(--dv-header); padding:56px 0 60px; } #t-devotsav .pujas-page .puja-hero-orn{ display:none; } #t-devotsav .pujas-page .puja-hero-title{ margin:0; font-family:var(--dvl-title); font-weight:700; font-size:38px; /* = .dv-hero-title, the design's H1 */ line-height:49px; letter-spacing:-.005em; color:var(--dv-ink); } #t-devotsav .pujas-page .puja-hero-sub{ margin:14px 0 28px; font-family:var(--dvl-sans); font-size:18px; /* = .dv-hero-sub */ line-height:26px; font-weight:400; color:var(--dv-muted); max-width:720px; } /* ── SEARCH + FILTER BUTTON ─────────────────────────────────────────────── Radius: this design uses 999 for chips/pills ONLY; every box control (CTA, ghost button, WhatsApp pill, countdown box) is radius 8 — so a text FIELD is 8, not the base's 999. Height 52 sits on the design's own control ladder (chip 38 · CTA 50 · ghost 53 · pill 70). Flat: no shadow anywhere in it. */ #t-devotsav .pujas-page .puja-search{ gap:12px; max-width:660px; } #t-devotsav .pujas-page .puja-search-field{ height:52px; padding:0 6px 0 20px; background:var(--dv-white); border:1px solid var(--brand-line); border-radius:var(--dv-radius-btn); box-shadow:none; } #t-devotsav .pujas-page .puja-search-field:focus-within{ border-color:var(--dv-maroon); } #t-devotsav .pujas-page .puja-search-input{ font-family:var(--dvl-sans); font-size:15px; color:var(--dv-ink); } #t-devotsav .pujas-page .puja-search-input::placeholder{ color:var(--dv-muted); opacity:1; } #t-devotsav .pujas-page .puja-search-go{ width:40px; height:40px; border-radius:6px; color:var(--dv-muted); } #t-devotsav .pujas-page .puja-search-go:hover{ color:var(--dv-maroon); } #t-devotsav .pujas-page .puja-filter-btn{ width:52px; height:52px; border:1px solid var(--brand-line); border-radius:var(--dv-radius-btn); background:var(--dv-white); color:var(--dv-ink); box-shadow:none; } #t-devotsav .pujas-page .puja-filter-btn:hover{ border-color:var(--dv-maroon); color:var(--dv-maroon); transform:none; } #t-devotsav .pujas-page .puja-filter-count{ background:var(--dv-maroon); font-family:var(--dvl-sans); } /* ══ LISTING HEAD + FILTER CHIPS ══════════════════════════════════════════ The home's puja section is a CENTRED serif head with the chip row centred underneath it; the base list head is title-left / chips-right. Recomposed to the home's arrangement so the two pages read as the same section. The ::before/::after pair reproduce the home's section-head ornament (1px #F1E3C0 gradient rule + a 7px #F0B183 diamond, fixed 1174 measure). Pure decoration — no copy is generated. */ #t-devotsav .pujas-page .puja-list{ background:var(--dv-white); padding:56px 0 80px; } #t-devotsav .pujas-page .puja-list-head{ flex-direction:column; align-items:center; gap:0; margin-bottom:0; } #t-devotsav .pujas-page .puja-list-head .puja-list-title{ display:flex; align-items:center; justify-content:center; gap:11px; width:min(1174px,100%); margin:0; font-family:var(--dvl-serif); font-style:normal; font-weight:600; font-size:28px; /* = .dv-pujas .dv-shead-txt */ line-height:1.25; letter-spacing:0; text-align:center; color:var(--dvl-serif-ink); } #t-devotsav .pujas-page .puja-list-head .puja-list-title::before, #t-devotsav .pujas-page .puja-list-head .puja-list-title::after{ content:''; flex:1 1 auto; min-width:0; height:7px; background: linear-gradient(90deg,transparent,var(--dvl-rule)) no-repeat left center/calc(100% - 15px) 1px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5L3.5 7L0 3.5Z' fill='%23F0B183'/%3E%3C/svg%3E") no-repeat right center; } #t-devotsav .pujas-page .puja-list-head .puja-list-title::after{ background: linear-gradient(90deg,var(--dvl-rule),transparent) no-repeat right center/calc(100% - 15px) 1px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M3.5 0L7 3.5L3.5 7L0 3.5Z' fill='%23F0B183'/%3E%3C/svg%3E") no-repeat left center; } /* the home row exactly: .dv-fchip — 38 tall, radius 999, hairline, 13/500, ACTIVE = maroon fill (green is spent on every CTA in the grid below). */ #t-devotsav .pujas-page .puja-chips{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; width:100%; margin:24px 0 0; overflow:visible; white-space:normal; } #t-devotsav .pujas-page .puja-chips .puja-chip{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 20px; border:1px solid var(--brand-line); border-radius:999px; background:var(--dv-white); color:var(--dvl-slate); font-family:var(--dvl-sans); font-size:13px; font-weight:500; line-height:1; white-space:nowrap; transition:background-color .18s,border-color .18s,color .18s; } #t-devotsav .pujas-page .puja-chips .puja-chip:hover{ border-color:var(--dv-maroon); color:var(--dv-maroon); background:var(--dv-white); } #t-devotsav .pujas-page .puja-chips .puja-chip.is-on{ background:var(--dv-maroon); border-color:var(--dv-maroon); color:#FFFFFF; font-weight:500; } #t-devotsav .pujas-page .puja-chips .puja-chip-check{ width:16px; height:16px; flex:0 0 16px; background:#FFFFFF; color:var(--dv-maroon); } #t-devotsav .pujas-page .puja-chips .puja-chip-count{ background:var(--dv-maroon); color:#FFFFFF; font-family:var(--dvl-sans); } /* ══ THE CARD — derived line-for-line from the home card ══════════════════ */ #t-devotsav .pujas-page .puja-list-grid{ grid-template-columns:repeat(3,1fr); column-gap:35px; row-gap:24px; margin-top:32.8px; /* = .dv-grid margin-top */ } #t-devotsav .pujas-page .puja-list-grid .puja-card{ display:flex; flex-direction:column; padding:16px; /* the ONE departure from home: these pages are white, so the card needs the design's hairline to read as a card at all. */ border:1px solid var(--brand-line); border-radius:var(--dv-radius-card); background:var(--dv-white); box-shadow:none; overflow:hidden; cursor:pointer; transition:border-color .2s ease; } #t-devotsav .pujas-page .puja-list-grid .puja-card:hover{ transform:none; box-shadow:none; border-color:var(--brand-line); } /* art flush inside the card padding, radius 8, 3:2, CONTAIN — the creatives carry title/ribbon/temple baked into the pixels (gotcha #7). */ #t-devotsav .pujas-page .puja-img{ border-radius:8px; background:#1a0807; } #t-devotsav .pujas-page .puja-list-grid .puja-card:hover .puja-img img{ transform:none; } /* the base tag pill becomes this design's tag chip. DATA-GATED (`tags[0]`): nothing supplies it today (spec §6), so it stays invisible — never faked. */ #t-devotsav .pujas-page .puja-pill{ top:9px; left:9px; height:19px; padding:0 11px; display:inline-flex; align-items:center; border:0; border-radius:999px; background:var(--dv-chip-cream); color:var(--dv-chip-ink); font-family:var(--dvl-sans); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; box-shadow:none; } /* wishlist + share: home is a 27px ROW at 9/9, not the base's 32px column. */ #t-devotsav .pujas-page .puja-acts{ top:9px; right:9px; flex-direction:row; gap:6px; } #t-devotsav .pujas-page .puja-act{ width:27px; height:27px; background:rgba(255,255,255,.86); color:var(--dv-ink); -webkit-backdrop-filter:none; backdrop-filter:none; } #t-devotsav .pujas-page .puja-act:hover{ background:rgba(255,255,255,.96); color:var(--dv-ink); } #t-devotsav .pujas-page .puja-act.is-saved, #t-devotsav .pujas-page .puja-act.is-saved:hover{ color:var(--dv-maroon); } /* body: home insets the TEXT a further 16 inside the card padding, so the art is wider than the copy column. Explicit margins, no flex gap. */ #t-devotsav .pujas-page .puja-body{ display:flex; flex-direction:column; gap:0; padding:0 16px; flex:1; } #t-devotsav .pujas-page .puja-body .puja-name{ order:1; margin:21px 0 0; font-family:var(--dvl-title); font-weight:600; font-size:20px; line-height:25px; letter-spacing:0; color:var(--dv-ink); -webkit-line-clamp:2; } /* THE KICKER SLOT — see the DOM-LIMITS note in the banner. Real data (`ribbon` / `tags[1]`), restyled to the home kicker's type; the base's ornament (two gradient bars + two star glyphs) is dropped because Devotsav has no such divider. `.yaga-ic` is ALSO the temple icon's class inside `.puja-date`, so this hide is scoped to `.puja-yaga` only. */ #t-devotsav .pujas-page .puja-body .puja-yaga{ order:2; justify-content:flex-start; gap:0; margin:17px 0 0; font-family:var(--dvl-sans); font-weight:400; font-size:12px; line-height:1; letter-spacing:.045em; text-transform:uppercase; color:var(--dvl-kicker); } #t-devotsav .pujas-page .puja-yaga .left-linearline, #t-devotsav .pujas-page .puja-yaga .right-linearline, #t-devotsav .pujas-page .puja-yaga .yaga-ic{ display:none; } /* no counterpart on the home card */ #t-devotsav .pujas-page .puja-body .puja-desc{ display:none; } /* meta rows: the base boxes them in a bordered, divided panel; home has plain icon rows. Box off, divider off, and DATE before TEMPLE as on home. */ #t-devotsav .pujas-page .puja-body .puja-date-place{ order:3; display:flex; flex-direction:column; border:0; border-radius:0; margin-top:0; } #t-devotsav .pujas-page .puja-date-place .puja-date{ order:1; display:flex; /* = .dv-home .dv-card-row — the list card is derived from the home card, so the icon/text alignment has to match it (Boss, 2026-08-27). */ align-items:center; gap:11px; width:100%; padding:0; margin:16px 0 0; font-family:var(--dvl-sans); font-size:15px; line-height:19px; font-weight:400; color:var(--dvl-slate); } #t-devotsav .pujas-page .puja-date-place .puja-date.templename{ order:2; border-bottom:0; } #t-devotsav .pujas-page .puja-date-place .puja-date img{ flex:0 0 auto; width:18px; height:18px; margin-top:.5px; object-fit:contain; } /* foot: home has NO dashed rule, NO side-by-side price+button. Price becomes a third meta row (with the home card's rupee-ring glyph), the CTA goes full-bleed underneath and bottom-aligns across a row of cards. */ #t-devotsav .pujas-page .puja-body .puja-foot{ order:4; display:flex; flex-direction:column; align-items:stretch; gap:0; flex:1 1 auto; margin-top:0; padding-top:0; border-top:0; } #t-devotsav .pujas-page .puja-foot .puja-price{ display:flex; flex-direction:row; align-items:flex-start; gap:0; margin:16px 0 36px; /* = row gap 16 · home's 36 floor before the CTA */ white-space:normal; } /* the home card's rupee ring, as a background layer — a GLYPH, not copy. Every SVG attribute is single-quoted and the hex is %23-escaped (gotcha #14). */ #t-devotsav .pujas-page .puja-foot .puja-price::before{ content:''; flex:0 0 18px; width:18px; height:18px; margin:.5px 11px 0 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C0E00' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 7.5h6M9 10.5h6M9 7.5c3 0 4.2 1.4 4.2 3S12 13.5 9.6 13.5L14 17.5'/%3E%3C/svg%3E") no-repeat center/contain; } #t-devotsav .pujas-page .puja-foot .puja-amt{ font-family:var(--dvl-sans); font-weight:400; font-size:15px; line-height:19px; color:var(--dvl-slate); } #t-devotsav .pujas-page .puja-foot .puja-amt span{ font-weight:400; font-size:15px; line-height:19px; text-decoration-line:line-through; color:var(--dvl-strike); margin-right:7px; } #t-devotsav .pujas-page .puja-foot .puja-per{ margin:0 0 0 6px; font-family:var(--dvl-sans); font-weight:400; font-size:15px; line-height:19px; color:var(--dvl-slate); } /* the home CTA verbatim: full-bleed, 50 tall, radius 8, centred label, no arrow badge (the home card has none). Hover/active live in the earlier [A] list pages block — not duplicated here. */ #t-devotsav .pujas-page .puja-foot .book-btn{ display:flex; align-items:center; justify-content:center; gap:0; width:100%; height:50px; margin-top:auto; padding:0 31px; border:0; border-radius:var(--dv-radius-btn); background:var(--dv-green); color:#FFFFFF; /* = .dv-home .dv-btn, which names --dv-sans (NOT the Telugu-body stack) — matched exactly so the two CTAs render the same face on both pages. */ font-family:var(--dv-sans); font-size:14px; font-weight:600; letter-spacing:.04em; line-height:1; text-transform:uppercase; } /* the fill above is (1,3,0) and would out-specify the green hover in the earlier [A] list pages block (1,1,0) — restated here at the same weight so that block keeps working. The lift/shadow/active state stay THERE. */ #t-devotsav .pujas-page .puja-foot .book-btn:hover{ background:var(--dv-green-dark); transform:none; } #t-devotsav .pujas-page .puja-foot .book-btn:active{ background:#00843F; } #t-devotsav .pujas-page .puja-foot .book-ic{ display:none; } /* a chadhava card carries no price (no base amount), so its foot has only the CTA — restore the 36px floor the price row would otherwise have provided. */ #t-devotsav .chadavas-page .puja-body .puja-foot{ padding-top:36px; } /* ══ STATES (loading / empty / end-of-list) ═══════════════════════════════ The base paints these `color:#fff` — white type on the white listing, i.e. invisible. Scoped fix, tenant-only. */ #t-devotsav .pujas-page .puja-loading-container, #t-devotsav .pujas-page .puja-loading-container p, #t-devotsav .pujas-page .puja-refetching p, #t-devotsav .pujas-page .end-of-data-container p, #t-devotsav .pujas-page .end-of-data-container small, #t-devotsav .pujas-page .lang-fallback-note{ color:var(--dv-muted); } #t-devotsav .pujas-page .no-results-content h3{ font-family:var(--dvl-serif); color:var(--dvl-serif-ink); } #t-devotsav .pujas-page .clear-search-btn{ border:0; border-radius:var(--dv-radius-btn); background:var(--dv-green); color:#FFFFFF; font-family:var(--dvl-sans); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; } #t-devotsav .pujas-page .clear-search-btn:hover{ background:var(--dv-green-dark); } /* ══ FILTER MODAL ════════════════════════════════════════════════════════ Mostly themed already by the alias remap at the top of this block (maroon tab marker / checkbox / count badges, green APPLY with a green hover). Only the radius language needs saying: this design has no 22px panels and no 999px rectangular buttons. */ #t-devotsav .pujas-page .puja-modal{ border-radius:var(--dv-radius-panel); } #t-devotsav .pujas-page .puja-modal-title{ font-family:var(--dvl-serif); color:var(--dvl-serif-ink); } #t-devotsav .pujas-page .puja-panel-search{ border-radius:var(--dv-radius-btn); box-shadow:none; background:var(--dv-white); } #t-devotsav .pujas-page .puja-opt-box{ border-radius:5px; } #t-devotsav .pujas-page .puja-btn-clear, #t-devotsav .pujas-page .puja-btn-apply{ height:50px; border-radius:var(--dv-radius-btn); font-family:var(--dvl-sans); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; } #t-devotsav .pujas-page .puja-btn-apply:hover{ transform:none; } #t-devotsav .pujas-page .puja-btn-apply-ic{ display:none; } /* ══ RESPONSIVE — the home block's own breakpoints, so the two pages reflow together. No new design decisions here. ═══════════════════════════════ */ @media (max-width:1200px){ #t-devotsav .pujas-page .puja-hero-title{ font-size:32px; line-height:42px; } #t-devotsav .pujas-page .puja-list-head .puja-list-title{ font-size:26px; } #t-devotsav .pujas-page .puja-body .puja-name{ font-size:20px; } } @media (max-width:1024px){ #t-devotsav .pujas-page .puja-hero{ padding:40px 0 44px; } #t-devotsav .pujas-page .puja-hero-title{ font-size:30px; line-height:39px; } #t-devotsav .pujas-page .puja-hero-sub{ font-size:16px; line-height:24px; } #t-devotsav .pujas-page .puja-list{ padding:44px 0 64px; } #t-devotsav .pujas-page .puja-list-head{ align-items:center; } #t-devotsav .pujas-page .puja-list-grid{ grid-template-columns:repeat(2,1fr); column-gap:20px; row-gap:20px; margin-top:24px; } #t-devotsav .pujas-page .puja-body .puja-name{ font-size:18px; line-height:24px; margin-top:16px; } #t-devotsav .pujas-page .puja-foot .puja-price{ margin-bottom:24px; } /* home's mobile card does NOT bottom-align its CTA — `.dv-card-body .dv-btn` switches from `margin-top:auto` to a flat 24 at this breakpoint. Matched, so the two cards keep the same height for the same content. */ #t-devotsav .pujas-page .puja-foot .book-btn{ margin-top:24px; } #t-devotsav .chadavas-page .puja-body .puja-foot{ padding-top:24px; } } /* ⚠ home.component.scss:1318-1336 ships an UNSCOPED `@media (max-width:768px)` block with `.puja-name{font-size:25px !important}` and `.puja-desc,.puja-date{14px !important}` / `.puja-amt{25px !important}` — the "global !important mobile leak" its own file header warns about. The home presenter escapes it (its card uses .dv-card-* names); this card does not, and !important is the only thing that beats !important. Values are the home card's own ≤1024 mobile sizes, not new ones. */ @media (max-width:768px){ #t-devotsav .pujas-page .puja-body .puja-name{ font-size:18px !important; line-height:24px; } #t-devotsav .pujas-page .puja-date-place .puja-date{ font-size:15px !important; } #t-devotsav .pujas-page .puja-foot .puja-amt, #t-devotsav .pujas-page .puja-foot .puja-amt span{ font-size:15px !important; } } @media (max-width:640px){ #t-devotsav .pujas-page .puja-hero{ padding:32px 0 36px; } #t-devotsav .pujas-page .puja-hero-title{ font-size:26px; line-height:34px; } #t-devotsav .pujas-page .puja-hero-sub{ font-size:15px; line-height:23px; margin-bottom:22px; } #t-devotsav .pujas-page .puja-search-field{ height:48px; padding-left:16px; } #t-devotsav .pujas-page .puja-filter-btn{ width:48px; height:48px; } #t-devotsav .pujas-page .puja-list-head .puja-list-title{ font-size:23px; white-space:normal; } /* the ornament rules become noise at this width — same call as the home block */ #t-devotsav .pujas-page .puja-list-head .puja-list-title::before, #t-devotsav .pujas-page .puja-list-head .puja-list-title::after{ display:none; } #t-devotsav .pujas-page .puja-list-grid{ grid-template-columns:1fr; } /* a Telugu category name is far wider than Latin: swipe rail, not a 3-row wrap. The overflow is contained by this element, so the PAGE never gains a horizontal scrollbar. */ #t-devotsav .pujas-page .puja-chips{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } #t-devotsav .pujas-page .puja-chips::-webkit-scrollbar{ display:none; } #t-devotsav .pujas-page .puja-chips .puja-chip{ flex:0 0 auto; height:36px; padding:0 16px; font-size:12.5px; } #t-devotsav .pujas-page .puja-btn-clear, #t-devotsav .pujas-page .puja-btn-apply{ height:46px; } /* = .dv-home .dv-btn at ≤640 */ #t-devotsav .pujas-page .puja-foot .book-btn{ height:46px; padding:0 22px; } } /* ══ [A] end list pages · run 4 ═══════════════════════════════════════════ */ /* ══ [A] home — packages slider fixes (Boss, 2026-08-25) ═══════════════════ Three defects, two of them one cause: 1+2. The track was `grid-template-columns:repeat(4,1fr)`, sized for exactly the four hero-picker cards it used to hold. With 8 packages it WRAPPED to a second row, and because a wrapping grid never overflows on the x axis, scrollBy() had nothing to scroll — so prev/next were dead. Making it a nowrap flex scroller fixes the second row AND the arrows together. 3. .dv-rail's 174px top padding dates from when the rail sat directly under the hero. Collapsed to 64px — but the declaration NO LONGER LIVES HERE (Boss, 2026-08-27): unconditional and last in the file, it also beat the ≤1280 and ≤1024 overrides, so mobile silently got the desktop padding. It now sits with the base rule in the [A] home block. */ #t-devotsav .dv-home .dv-rail-track{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; /* room for the card shadow, pulled back so the row still starts flush */ padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; } #t-devotsav .dv-home .dv-rail-track::-webkit-scrollbar{ display:none; } /* Three across at a time (Boss, 2026-08-28) — 2 gaps of 16px. Was 4-up, the rhythm inherited from the old 4-column grid; on the 1280 container that left a 308px card, narrower than the 375 the mock drew inside its 1548 band. At 3-up the card is 416 — wider than the design's — and the row still overflows, which is what keeps the arrows and the swipe alive. */ #t-devotsav .dv-home .dv-rail-card{ flex:0 0 calc((100% - 32px) / 3); scroll-snap-align:start; } /* the arrows sit above the fade; make sure they stay clickable now that the track under them is a real scroll container */ #t-devotsav .dv-home .dv-rail-nav{ z-index:2; } /* ══ [A] end home — packages slider fixes ═════════════════════════════════ */ /* Slider card widths per breakpoint. The 3-up calc above is a DESKTOP figure — applied unchanged at 430 it produced a 122px card. Step it down so a card stays readable and the row always overflows (which is what keeps the arrows and the swipe working). There is no ≤1280 step any more: it used to hold the 3-up calc, and now that 3-up IS the base it would be a duplicate that reads like it does something — the same trap the rail-padding comment above documents. 92% of a ≤1280 viewport still gives a ≥382px card at 3-up, so nothing is lost. */ @media (max-width:1024px){ #t-devotsav .dv-home .dv-rail-card{ flex:0 0 calc((100% - 16px) / 2); } } @media (max-width:700px){ /* one card plus a peek, so it reads as swipeable without an arrow */ #t-devotsav .dv-home .dv-rail-card{ flex:0 0 82%; } } /* ══ [A] list pages — drop the "Per Booking" label (Boss, 2026-08-25) ══════ Boss: "remove per booking text there no need that". Removed from the home packages slider in markup; these three pages are CSS-only (base templates, no presenter), so the label is hidden here instead. It is a bare CMS label (`pujas_section.card_per_booking`) with no data in it — the price beside it carries the whole meaning — so hiding it loses nothing and keeps the price row matching the home card, which is what run 4 was derived to do. */ #t-devotsav .pujas-page .puja-foot .puja-per{ display:none; } /* ── [B] details · mobile shows exactly ONE CTA (Boss, 2026-08-25) ─────────── Regression I introduced, and a textbook gotcha #6: the earlier mobile rule `.dv-cta-row{display:none}` and the later top-level centring rule `.dv-cta-row{display:flex}` have the SAME specificity, so the later one won at every width and the hero CTA came back on phones — two "Participate Now" buttons on one screen. Re-asserted through a LONGER selector (id + 3 classes) instead of another equal-specificity rule, so appending to this file later can never revive it. The booking action on a phone lives in the sticky bar only; WhatsApp/Call go with the row because the mobile header already carries both as icon buttons. ═════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ #t-devotsav .dv-details .dv-hero-info .dv-cta-row{ display:none; } #t-devotsav .dv-details .pooja-details-container .pd-sticky-bar, #t-devotsav .dv-details .container .pd-sticky-bar{ display:none; } #t-devotsav .dv-details .container .pd-mobile-cta{ display:block; } } /* ══ [A] home — journey numerals legibility (Boss, 2026-08-25) ═════════════ Boss: "check the numbers clearly its too vague and low opacity". Measured first: the DESIGN's numeral is #FDF5F3 on white and our --dv-jnum (#FCF4F2) matched it almost exactly — so this was faithful, not a build error. The mock is simply near-invisible at real viewing size. Overruling it on Boss's call, with a tone DERIVED from the palette rather than invented: the tenant maroon at 20%, which lands ~#E8CFCC over white — roughly 4x the contrast, still clearly a background numeral and not a second heading. */ #t-devotsav .dv-home .dv-jnum{ color:rgba(140,14,0,.20); } /* == [A] footer - real brand icons (Boss, 2026-08-25) ===================== The shared footer draws its social marks as hand-authored inline SVG paths - a crude lowercase f, a featureless blob for Instagram, two crossed lines for X - on 50px brand-coloured discs. Boss: "icons are worst cant you use main site icons directly here?" These ARE the repo's real brand assets (assets/images/ - the same ones the share sheet uses), embedded as base64 data URIs rather than referenced by path. Why embedded: url() resolves against the STYLESHEET's origin, and in production this sheet is served from branding.css_url on CloudFront while /assets is served from the site origin - a root-relative path would 404 there. Embedding keeps the sheet self-contained, the same reason the mandala PNGs were retired. Shared component untouched: the inline is hidden, not removed, so the flagship and every other tenant are byte-identical. Sized to the design's scale (26px, flat, no disc) instead of the 50px discs. */ #t-devotsav .vm-footer .follow-row{ gap:10px; align-items:center; } #t-devotsav .vm-footer .sicon svg{ display:none; } #t-devotsav .vm-footer .sicon{ width:26px; height:26px; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:contain; border-radius:0; box-shadow:none; opacity:.92; transition:opacity .18s ease, transform .18s ease; } #t-devotsav .vm-footer .sicon:hover{ opacity:1; transform:translateY(-1px); } #t-devotsav .vm-footer .sicon.fb{ background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggc3R5bGU9ImZpbGw6IzE5NzZEMjsiIGQ9Ik00NDgsMEg2NEMyOC43MDQsMCwwLDI4LjcwNCwwLDY0djM4NGMwLDM1LjI5NiwyOC43MDQsNjQsNjQsNjRoMzg0YzM1LjI5NiwwLDY0LTI4LjcwNCw2NC02NFY2NA0KCUM1MTIsMjguNzA0LDQ4My4yOTYsMCw0NDgsMHoiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGQUZBRkE7IiBkPSJNNDMyLDI1NmgtODB2LTY0YzAtMTcuNjY0LDE0LjMzNi0xNiwzMi0xNmgzMlY5NmgtNjRsMCwwYy01My4wMjQsMC05Niw0Mi45NzYtOTYsOTZ2NjRoLTY0djgwaDY0DQoJdjE3Nmg5NlYzMzZoNDhMNDMyLDI1NnoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K"); } #t-devotsav .vm-footer .sicon.ig{ background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF83OF80NTcpIj4NCjxwYXRoIGQ9Ik0yMCAxMC40NTQxQzIwIDQuOTMxMjUgMTUuNTIyOCAwLjQ1NDEwMiAxMCAwLjQ1NDEwMkM0LjQ3NzE1IDAuNDU0MTAyIDAgNC45MzEyNSAwIDEwLjQ1NDFDMCAxNS45NzY5IDQuNDc3MTUgMjAuNDU0MSAxMCAyMC40NTQxQzE1LjUyMjggMjAuNDU0MSAyMCAxNS45NzY5IDIwIDEwLjQ1NDFaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNzhfNDU3KSIvPg0KPHBhdGggb3BhY2l0eT0iMC4xIiBkPSJNMTcuNTI2MiAzLjg3NTAzQzE2LjA2ODMgNi41NTEzNSAxNC4wMDY1IDkuMzExODcgMTEuNDMwMiAxMS44ODgyQzguODUzODQgMTQuNDY0NSA2LjA5MzMxIDE2LjUyMjQgMy40MjA5NCAxNy45ODAzQzMuMjUzNCAxNy44MzQ3IDMuMDkwNjggMTcuNjgyOSAyLjkzMjc4IDE3LjUyNUMxLjk3ODM4IDE2LjYwMjUgMS4yMTcyIDE1LjQ5OTIgMC42OTM2MiAxNC4yNzk0QzAuMTcwMDM5IDEzLjA1OTcgLTAuMTA1NDYzIDExLjc0NzkgLTAuMTE2ODIxIDEwLjQyMDVDLTAuMTI4MTc5IDkuMDkzMTkgMC4xMjQ4MzQgNy43NzY4OCAwLjYyNzQ2NSA2LjU0ODM0QzEuMTMwMSA1LjMxOTc5IDEuODcyMjkgNC4yMDM2MSAyLjgxMDc2IDMuMjY0ODhDMy43NDkyMyAyLjMyNjE1IDQuODY1MiAxLjU4MzY0IDYuMDkzNiAxLjA4MDY3QzcuMzIyIDAuNTc3Njk3IDguNjM4MjUgMC4zMjQzMTYgOS45NjU1OSAwLjMzNTMwNEMxMS4yOTI5IDAuMzQ2MjkxIDEyLjYwNDggMC42MjE0MjcgMTMuODI0NyAxLjE0NDY3QzE1LjA0NDYgMS42Njc5MSAxNi4xNDgxIDIuNDI4NzggMTcuMDcwOSAzLjM4MjkyQzE3LjIyODggMy41NDA4MiAxNy4zODA2IDMuNzA0ODUgMTcuNTI2MiAzLjg3NTAzWiIgZmlsbD0id2hpdGUiLz4NCjxwYXRoIGQ9Ik0xMi4zNjg0IDUuMTkwNDNINy42MzE1NUM2Ljg2MzgyIDUuMTkwNDMgNi4xMjc1MyA1LjQ5NTQxIDUuNTg0NjcgNi4wMzgyOEM1LjA0MTggNi41ODExNSA0LjczNjgyIDcuMzE3NDMgNC43MzY4MiA4LjA4NTE3VjEyLjgyMkM0LjczNjgyIDEzLjU4OTcgNS4wNDE4IDE0LjMyNiA1LjU4NDY3IDE0Ljg2ODlDNi4xMjc1MyAxNS40MTE4IDYuODYzODIgMTUuNzE2NyA3LjYzMTU1IDE1LjcxNjdIMTIuMzY4NEMxMy4xMzYxIDE1LjcxNjcgMTMuODcyNCAxNS40MTE4IDE0LjQxNTMgMTQuODY4OUMxNC45NTgyIDE0LjMyNiAxNS4yNjMxIDEzLjU4OTcgMTUuMjYzMSAxMi44MjJWOC4wODUxN0MxNS4yNjMxIDcuMzE3NDMgMTQuOTU4MiA2LjU4MTE1IDE0LjQxNTMgNi4wMzgyOEMxMy44NzI0IDUuNDk1NDEgMTMuMTM2MSA1LjE5MDQzIDEyLjM2ODQgNS4xOTA0M1pNMTQuMzQyMSAxMi40MDYyQzE0LjM0MjEgMTMuMDM5OSAxNC4wOTAzIDEzLjY0NzcgMTMuNjQyMiAxNC4wOTU4QzEzLjE5NDEgMTQuNTQzOSAxMi41ODYzIDE0Ljc5NTcgMTEuOTUyNiAxNC43OTU3SDguMDQ3MzRDNy40MTM2MSAxNC43OTU3IDYuODA1ODQgMTQuNTQzOSA2LjM1NzczIDE0LjA5NThDNS45MDk2MiAxMy42NDc3IDUuNjU3ODcgMTMuMDM5OSA1LjY1Nzg3IDEyLjQwNjJWOC41MDA5NkM1LjY1Nzg3IDcuODY3MjMgNS45MDk2MiA3LjI1OTQ2IDYuMzU3NzMgNi44MTEzNEM2LjgwNTg0IDYuMzYzMjMgNy40MTM2MSA2LjExMTQ4IDguMDQ3MzQgNi4xMTE0OEgxMS45NTI2QzEyLjU4NjMgNi4xMTE0OCAxMy4xOTQxIDYuMzYzMjMgMTMuNjQyMiA2LjgxMTM0QzE0LjA5MDMgNy4yNTk0NiAxNC4zNDIxIDcuODY3MjMgMTQuMzQyMSA4LjUwMDk2VjEyLjQwNjJaIiBmaWxsPSJ3aGl0ZSIvPg0KPHBhdGggZD0iTTExLjkxOTcgOC41NTMxNEwxMS44OTQ3IDguNTI4MTRMMTEuODczNyA4LjUwNzA4QzExLjM3NjIgOC4wMTEzIDEwLjcwMjQgNy43MzMwNyAxMCA3LjczMzRDOS42NDUzMyA3LjczNTgxIDkuMjk0NiA3LjgwODA4IDguOTY3ODUgNy45NDYwOEM4LjY0MTExIDguMDg0MDggOC4zNDQ3NiA4LjI4NTExIDguMDk1NzMgOC41Mzc2OEM3Ljg0NjcxIDguNzkwMjUgNy42NDk4OCA5LjA4OTQxIDcuNTE2NTEgOS40MTgwN0M3LjM4MzE0IDkuNzQ2NzMgNy4zMTU4MyAxMC4wOTg1IDcuMzE4NDMgMTAuNDUzMUM3LjMxNzkgMTEuMTcyOSA3LjYwMTYzIDExLjg2MzggOC4xMDc5MSAxMi4zNzU1QzguMzU1ODkgMTIuNjI2NSA4LjY1MTM5IDEyLjgyNTYgOC45NzcxNiAxMi45NjExQzkuMzAyOTMgMTMuMDk2NyA5LjY1MjQzIDEzLjE2NiAxMC4wMDUzIDEzLjE2NUMxMC41MzQ1IDEzLjE1MzkgMTEuMDQ5MSAxMi45ODkgMTEuNDg2MyAxMi42OTA1QzExLjkyMzUgMTIuMzkxOSAxMi4yNjQzIDExLjk3MjYgMTIuNDY3MyAxMS40ODM3QzEyLjY3MDIgMTAuOTk0OCAxMi43MjY1IDEwLjQ1NzQgMTIuNjI5MyA5LjkzN0MxMi41MzIxIDkuNDE2NjMgMTIuMjg1NiA4LjkzNTc5IDExLjkxOTcgOC41NTMxNFpNMTAgMTIuMjM3M0M5LjY0NjExIDEyLjI0MjMgOS4yOTg3MiAxMi4xNDE5IDkuMDAyMDQgMTEuOTQ4OUM4LjcwNTM2IDExLjc1NTkgOC40NzI3OCAxMS40NzkgOC4zMzM5IDExLjE1MzRDOC4xOTUwMSAxMC44Mjc5IDguMTU2MSAxMC40Njg0IDguMjIyMDkgMTAuMTIwNkM4LjI4ODA4IDkuNzcyOSA4LjQ1NjAxIDkuNDUyNjUgOC43MDQ1MSA5LjIwMDYyQzguOTUzMDIgOC45NDg1OCA5LjI3MDg2IDguNzc2MTUgOS42MTc2MyA4LjcwNTI2QzkuOTY0NCA4LjYzNDM2IDEwLjMyNDQgOC42NjgyMSAxMC42NTE5IDguODAyNDhDMTAuOTc5NCA4LjkzNjc2IDExLjI1OTUgOS4xNjU0IDExLjQ1NjcgOS40NTkzM0MxMS42NTM5IDkuNzUzMjYgMTEuNzU5MiAxMC4wOTkyIDExLjc1OTIgMTAuNDUzMUMxMS43NjEgMTAuNjg1OCAxMS43MTY4IDEwLjkxNjYgMTEuNjI5MyAxMS4xMzIyQzExLjU0MTggMTEuMzQ3OCAxMS40MTI3IDExLjU0NDEgMTEuMjQ5MyAxMS43MDk4QzExLjA4NiAxMS44NzU1IDEwLjg5MTUgMTIuMDA3NCAxMC42NzcyIDEyLjA5NzlDMTAuNDYyOCAxMi4xODg0IDEwLjIzMjcgMTIuMjM1OCAxMCAxMi4yMzczWiIgZmlsbD0id2hpdGUiLz4NCjxwYXRoIGQ9Ik0xMy40Nzc3IDcuNjA4NkMxMy40Nzg0IDcuNjkzMDQgMTMuNDYyNCA3Ljc3Njc4IDEzLjQzMDcgNy44NTUwM0MxMy4zOTkgNy45MzMyOSAxMy4zNTIyIDguMDA0NTIgMTMuMjkyOSA4LjA2NDY1QzEzLjIzMzYgOC4xMjQ3OCAxMy4xNjMxIDguMTcyNjMgMTMuMDg1MyA4LjIwNTQ2QzEzLjAwNzUgOC4yMzgyOSAxMi45MjQgOC4yNTU0NiAxMi44Mzk2IDguMjU1OTdDMTIuNzU1OCA4LjI1NTkzIDEyLjY3MyA4LjIzOTI4IDEyLjU5NTcgOC4yMDY5OEMxMi41MTg1IDguMTc0NjkgMTIuNDQ4NCA4LjEyNzM4IDEyLjM4OTYgOC4wNjc4MUMxMi4zMDA0IDcuOTc3MzcgMTIuMjM5OCA3Ljg2Mjc2IDEyLjIxNTIgNy43MzgxOEMxMi4xOTA2IDcuNjEzNiAxMi4yMDMxIDcuNDg0NTMgMTIuMjUxMSA3LjM2Njk5QzEyLjI5OTIgNy4yNDk0NSAxMi4zODA3IDcuMTQ4NTkgMTIuNDg1NSA3LjA3NjkzQzEyLjU5MDMgNy4wMDUyNyAxMi43MTM5IDYuOTY1OTYgMTIuODQwOSA2Ljk2Mzg3QzEyLjk4OTUgNi45NjM4NCAxMy4xMzM0IDcuMDE2IDEzLjI0NzUgNy4xMTEyNEwxMy4yNjA2IDcuMTI0MzlDMTMuMjgxOCA3LjE0MTY3IDEzLjMwMTIgNy4xNjEwNyAxMy4zMTg1IDcuMTgyMjlMMTMuMzMzIDcuMTk4MDhDMTMuNDI3MiA3LjMxNDExIDEzLjQ3ODMgNy40NTkxNiAxMy40Nzc3IDcuNjA4NloiIGZpbGw9IndoaXRlIi8+DQo8L2c+DQo8ZGVmcz4NCjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl83OF80NTciIHgxPSIyLjkyODk1IiB5MT0iMy4zODMwNSIgeDI9IjE3LjA3MTEiIHkyPSIxNy41MjUyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjRkFFMTAwIi8+DQo8c3RvcCBvZmZzZXQ9IjAuMTUiIHN0b3AtY29sb3I9IiNGQ0I3MjAiLz4NCjxzdG9wIG9mZnNldD0iMC4zIiBzdG9wLWNvbG9yPSIjRkY3OTUwIi8+DQo8c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iI0ZGMUM3NCIvPg0KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNkMxQ0QxIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPGNsaXBQYXRoIGlkPSJjbGlwMF83OF80NTciPg0KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwLjQ1NDEwMikiLz4NCjwvY2xpcFBhdGg+DQo8L2RlZnM+DQo8L3N2Zz4NCg=="); } #t-devotsav .vm-footer .sicon.x{ background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjI2LjM3IDEyMjYuMzciIHZpZXdCb3g9IjAgMCAxMjI2LjM3IDEyMjYuMzciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcyNy4zNDggNTE5LjI4NCA0NDYuNzI3LTUxOS4yODRoLTEwNS44NmwtMzg3Ljg5MyA0NTAuODg3LTMwOS44MDktNDUwLjg4N2gtMzU3LjMyOGw0NjguNDkyIDY4MS44MjEtNDY4LjQ5MiA1NDQuNTQ5aDEwNS44NjZsNDA5LjYyNS00NzYuMTUyIDMyNy4xODEgNDc2LjE1MmgzNTcuMzI4bC00ODUuODYzLTcwNy4wODZ6bS0xNDQuOTk4IDE2OC41NDQtNDcuNDY4LTY3Ljg5NC0zNzcuNjg2LTU0MC4yNGgxNjIuNjA0bDMwNC43OTcgNDM1Ljk5MSA0Ny40NjggNjcuODk0IDM5Ni4yIDU2Ni43MjFoLTE2Mi42MDRsLTMyMy4zMTEtNDYyLjQ0NnoiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4="); } #t-devotsav .vm-footer .sicon.yt{ background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlhNTElEXzE4NF8iPjxwYXRoIGlkPSJYTUxJRF8xODJfIiBkPSJtNTAxLjMwMSAxMzEuOTY0Yy01Ljg4OC0yMi4xNzItMjMuMjM3LTM5LjYzMy00NS4yNjYtNDUuNTYtMzkuOTI4LTEwLjc2OC0yMDAuMDM1LTEwLjc2OC0yMDAuMDM1LTEwLjc2OHMtMTYwLjEwNyAwLTIwMC4wMzUgMTAuNzY4Yy0yMi4wMjkgNS45MjYtMzkuMzc4IDIzLjM4OC00NS4yNjYgNDUuNTYtMTAuNjk5IDQwLjE4OC0xMC42OTkgMTI0LjAzNi0xMC42OTkgMTI0LjAzNnMwIDgzLjg0OCAxMC42OTkgMTI0LjAzNmM1Ljg4OCAyMi4xNzIgMjMuMjM3IDM5LjYzMyA0NS4yNjYgNDUuNTYgMzkuOTI4IDEwLjc2OCAyMDAuMDM1IDEwLjc2OCAyMDAuMDM1IDEwLjc2OHMxNjAuMTA3IDAgMjAwLjAzNS0xMC43NjhjMjIuMDI5LTUuOTI3IDM5LjM3OC0yMy4zODggNDUuMjY2LTQ1LjU2IDEwLjY5OS00MC4xODggMTAuNjk5LTEyNC4wMzYgMTAuNjk5LTEyNC4wMzZzMC04My44NDgtMTAuNjk5LTEyNC4wMzZ6IiBmaWxsPSIjZjAwIi8+PHBhdGggaWQ9IlhNTElEXzEzNTVfIiBkPSJtMjAzLjYzNiAzMzIuMTI4IDEzMy44MTgtNzYuMTI2LTEzMy44MTgtNzYuMTN6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg=="); } /* == [A] end footer - real brand icons ================================= */ /* ══════════════════════════════════════════════════════════════════════════ [A] account — flagship token leaks (measured, not guessed) Method: .claude/tools/acctprobe.mjs — logs in and walks every rendered element on all 9 account pages reading getComputedStyle. The brand-aliases mixin forwards most aliases to --brand-*, which the day-one block already recolours. The ones below are COMPILED-IN flagship values the remap can never reach, so they survived into this tenant. SELECTORS: the mixin attaches to `:host, .account-page`. bookings and my-subscriptions render NO .account-page element — they match on :host alone — so they need their own element selector or the remap skips them entirely. Verified: neither template contains the class. Both ALSO re-run the mixin on .bookings-container.sub-page (encapsulation None), which shadows the host rule for every descendant — hence that selector too. ════════════════════════════════════════════════════════════════════════ */ #t-devotsav .account-page, #t-devotsav app-account-sidebar, #t-devotsav app-bookings, #t-devotsav app-my-subscriptions, #t-devotsav .bookings-container.sub-page{ --sans:var(--brand-sans); /* was "Noto Sans" — the flagship body face, on every account page */ --ink-soft:var(--dv-ink-card); /* was #2A1F19 warm near-black; devotsav ink is neutral */ --line:var(--brand-line); --cream-2:var(--dv-cream); /* was #F5E4DD flagship pink-cream */ --gold:var(--dv-maroon); /* there is no gold in this palette (spec §1) */ --gold-2:var(--dv-maroon); /* was #E8C56D — flagship GOLD, live on /account/about */ --maroon-deep:var(--dv-wordmark); /* was #2B0807 flagship deep maroon */ /* Warm BROWN shadow. Same flat card language the list pages use. */ --shadow-sm:none; --shadow-md:0 14px 34px -22px rgba(50,50,50,.30); --shadow-lg:0 24px 60px -30px rgba(50,50,50,.35); /* Sourced from flagship maroon rgba(140,14,1). Devotsav's own maroon is #8C0E00 — one step apart, so this is a source fix, not a visible one. */ --bp2-a1:rgba(140,14,0,.10); --bp2-a25:rgba(140,14,0,.25); --bp2-a3:rgba(140,14,0,.30); --bp2-a35:rgba(140,14,0,.35); } /* Two spots where the palette needs a different answer than a straight swap — both sit ON a filled brand panel, so they take the panel's own foreground. */ /* /account/about — stat numerals on the green band. Flagship drew them gold; the label beside them is already white, so white keeps the pair coherent. */ #t-devotsav .account-about-stat-num{ color:var(--dv-white); } /* /account/wallet — "Coming soon" pill. The base sets its text to --brand-primary-deep (#2B0807) over a --gold background: once --gold is devotsav maroon that is near-black on dark maroon, unreadable. */ #t-devotsav .account-wallet-soon{ color:var(--dv-white); } /* == [A] end account - flagship token leaks ============================ */