/* * theme.css -- design-token overlay (added 2026-05-03) * * Loaded LAST in MasterPage.master so its rules win over * master.css / mystyle.css for selectors they don't already define. * Pure additive: no existing element/class is overridden by intent. * * Tokens are CSS variables on :root so they cascade everywhere and * future per-page polish can reference them without hardcoding hex. */ :root { --brand-red: #375935; /* matches existing top header bar */ --saffron: #e6ac1a; /* matches existing yellow nav + footer */ --saffron-deep: #CB9E00; /* matches existing gold price band */ --ink: #1f1a17; /* primary body text */ --paper: #fffaf2; /* warm off-white background */ --rule: #f0e6d2; /* hairline borders */ --radius: 12px; --shadow-sm: 0 2px 6px rgba(0,0,0,0.08); --shadow-md: 0 6px 18px rgba(0,0,0,0.12); } /* Base typography. body inline style sets padding/margin/width but not font-family, so this rule lands cleanly without !important. */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Devanagari content. Apply with class="devanagari" or lang="hi". */ [lang="hi"], .devanagari { font-family: 'Noto Serif Devanagari', Georgia, serif; } /* Opt-in card pattern for puja tiles and event listings. Add class="bd-card" to any container that needs the pattern; existing markup is untouched until adopted. */ .bd-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } /* ---------- Mobile sticky CTA bar ---------------------------------- Markup lives in MasterPage.master as
with three anchors: Call / WhatsApp / Book Puja. Hidden on >=768px; visible at the bottom of the viewport on phones. */ .bd-cta-bar { display: none; } @media (max-width: 767px) { .bd-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998; background: var(--saffron); border-top: 1px solid rgba(0,0,0,0.15); box-shadow: 0 -2px 8px rgba(0,0,0,0.10); height: 56px; } .bd-cta-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; border-right: 1px solid rgba(255,255,255,0.25); } .bd-cta-bar a:last-child { border-right: 0; } .bd-cta-bar a i { font-size: 18px; margin-bottom: 2px; } /* Hide the legacy floating WhatsApp button on mobile -- the CTA bar's WhatsApp action replaces it. Targeted via inline-style attribute match on the existing master markup; uses !important to beat the inline `display:` (none set, so this just hides). */ body > form > div[style*="position: fixed"][style*="bottom: 10px"][style*="left: 10px"] { display: none !important; } /* Push page content above the bar so nothing is hidden behind it. Beats the inline `padding: 0px` on . */ body { padding-bottom: 56px !important; } } /* ---------- Trust strip (Ship D) ---------------------------------- Horizontal pill of credibility signals (priests / secure / free Kundli). Place above the H1 / hero on booking pages so the reassurance is visible at decision-time. Pure additive -- wrap a div with class="bd-trust-strip" and put .bd-trust-item spans inside, each containing a Font Awesome + label text. */ .bd-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; margin: 12px auto 18px; padding: 10px 14px; max-width: 900px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 14px; color: var(--ink); box-shadow: var(--shadow-sm); } .bd-trust-strip .bd-trust-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .bd-trust-strip i { color: var(--saffron); font-size: 16px; } /* ---------- Puja card contrast fix (Ship C) ----------------------- Existing tile has background:#F0BB00 with color:#fff, which fails contrast on body text. .bd-puja-card overrides at the tile level to cream + dark text, keeping the saffron identity via a 6px header band. Inner price-band div retains its own inline styling (own bg + white text) -- that's fine, the band is a focal element. */ .bd-puja-card { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-sm); overflow: hidden; } .bd-puja-card::before { content: ''; display: block; height: 6px; background: var(--saffron); margin: -1px -1px 0; } /* ---------- Puja/product card description text (2026-05-03 fix) ---- Legacy descriptions stored in tblpooja.descriptions / tbl_settings often contain inline style="color:#fff" or color="#FFFFFF" from the old admin rich-text editor -- fine when card bg was yellow, invisible now that cards are cream. Force every text descendant in the body areas of a .bd-puja-card to dark, EXCEPT the gold price band which intentionally has white-on-gold contrast. Selector strategy: .bd-puja-card * -> dark text (catches inline overrides via !important) .bd-puja-card div[style*="background-color: #CB9E00"] * -> reverts the price band's children back to white */ .bd-puja-card, .bd-puja-card span, .bd-puja-card p, .bd-puja-card div, .bd-puja-card label, .bd-puja-card font, .bd-puja-card a, .bd-puja-card li, .bd-puja-card strong, .bd-puja-card b, .bd-puja-card em, .bd-puja-card i, .bd-puja-card td { color: var(--ink) !important; } /* Price band (deep gold) keeps white text. Both color variants seen. */ .bd-puja-card div[style*="background-color: #CB9E00"], .bd-puja-card div[style*="background-color:#CB9E00"], .bd-puja-card div[style*="background-color: #CB9E00"] *, .bd-puja-card div[style*="background-color:#CB9E00"] * { color: #ffffff !important; } /* Order Now bottom band keeps white text on its own gold background. */ .bd-puja-card .order_now_div, .bd-puja-card .order_now_div *, .bd-puja-card .order_now_link { color: #ffffff !important; } /* Out-of-stock badge stays red. */ .bd-puja-card [id$="divoutofstock"], .bd-puja-card [id*="divoutofstock"] { color: #d32f2f !important; } /* The Watch-video pill stays brand red. */ .bd-puja-card .bd-tile-watch a { color: #E40025 !important; } /* ---------- Card overflow fixes (2026-05-03) --------------------- Legacy markup uses default content-box sizing on inner divs, so `width: 100% + padding: 10px` overflows the card boundary by 20px. Force border-box on every card descendant so padding stays inside. Also fixes long product titles ("Brihaspati Prasad Box Small | Made with Purest Cow(s) Ghee") that previously bled past the card edge. */ .bd-puja-card, .bd-puja-card *, .bd-puja-card *::before, .bd-puja-card *::after { box-sizing: border-box; } /* Long titles wrap cleanly without spilling past card edges. */ .bd-puja-card [id*="Label1"], .bd-puja-card span[id*="Label1"], .bd-puja-card div:first-child > span:first-child { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } /* The price band's INNER div had inline height:15px while its content uses 20px font -- text bled out top + bottom. Auto-height fixes it without losing the gold band aesthetic (parent div keeps padding). */ .bd-puja-card div[style*="background-color: #CB9E00"] > div[style*="height: 15px"], .bd-puja-card div[style*="background-color:#CB9E00"] > div[style*="height: 15px"], .bd-puja-card div[style*="background-color: #CB9E00"] > div[style*="height:15px"], .bd-puja-card div[style*="background-color:#CB9E00"] > div[style*="height:15px"] { height: auto !important; min-height: 32px; line-height: 1.2; } /* Description containers -- prevent overflow from long unbreakable strings (URLs / SKU codes / Sanskrit transliterations). */ .bd-puja-card [id*="Div3"], .bd-puja-card [id*="Div5"], .bd-puja-card .content1 { overflow-wrap: anywhere; word-break: break-word; } /* Force any rich-text descendant to respect container width. */ .bd-puja-card [id*="Div3"] *, .bd-puja-card [id*="Div5"] *, .bd-puja-card .content1 * { max-width: 100%; overflow-wrap: anywhere; } /* ---------- Header pill (Login / Cart / Logout / Account) ----------- Inline style="width:95px; height:28px" + 4px padding-top renders the pill at 32px content-box, which clips Login text descenders on tall font fallbacks. Auto-height keeps the pill clean across fonts. */ #logindiv, #logdiv, #MYAC, #divcart { height: auto !important; min-height: 32px; padding-top: 4px; padding-bottom: 4px; box-sizing: border-box; } /* ---------- Card vertical layout (no awkward gaps) ----------------- Different products / pujas have wildly different image aspect ratios + description lengths. Without flex, cards with shorter content leave a big white block above their bottom edge. Solution: flex-column + flex:1 on description + margin-top:auto on order bar -> all cards in a row align top + bottom edges, gaps absorb gracefully into the description block. */ .bd-puja-card { display: flex !important; flex-direction: column; } /* Image area: don't let it stretch -- keep its 250px (or natural) height. */ .bd-puja-card > div:nth-child(2), .bd-puja-card > div[style*="height: 250px"], .bd-puja-card > div[style*="height:250px"] { flex: 0 0 auto; } /* Description block grows to fill remaining height -- absorbs any gap. */ .bd-puja-card [id*="Div3"], .bd-puja-card [id*="Div5"] { flex: 1 1 auto; } /* Order-now bar pinned to the bottom of every card. */ .bd-puja-card .order_now_div { margin-top: auto; flex: 0 0 auto; } /* ---------- Card image consistency ------------------------------- Some product images are tall (mala), some are square (prasad box), some are wide (yantra). Without a uniform crop, the 250px-tall image container shows different vertical alignment on each card. object-fit: cover gives a clean uniform crop while preserving the product's centre. */ .bd-puja-card > div[style*="height: 250px"] img, .bd-puja-card > div[style*="height:250px"] img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* ---------- Card row flex grid (2026-05-03) ---------------------- Legacy DataList markup uses `RepeatColumns="3" RepeatLayout="Flow"` plus zerogrid's `.col-2-6 { width:33.33%; float:left }`. With uneven card heights, float:left makes shorter cards leave gaps that the next card "fills" -- producing 3+1+3 staggered layouts where row breaks were not intended. ASP.NET DataList renders as:
<- DataList itself <- per-item wrapper
<- zerogrid column
... <- card So any selector targeting `.panel > .col-2-6` misses the two span layers between. The fix below uses :has() to walk those spans. align-items:stretch makes every card in a row share the tallest card's height so no card "catches" on a previous row's bottom. Only applied at >=768px so the mobile 100% stack rule from zerogrid still wins on phones. :has() -- Chrome 105+, Safari 15.4+, Firefox 121+. Older browsers fall back to the original float (still functional, just with the stagger). Baseline since late 2023. */ @media (min-width: 768px) { /* The DataList span: turn into wrapping flex container. */ span:has(> span > .col-2-6), span:has(> span > .col-1-3) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; width: 100% !important; } /* Per-item wrapper span: vanish from box tree so .col-2-6 becomes the direct flex item. display:contents preserves children but removes the wrapper's own box, so flex layout treats .col-2-6 as the item. */ span:has(> .col-2-6), span:has(> .col-1-3) { display: contents !important; } /* col-2-6 / col-1-3 are now flex items at 33.33%, not floated. Already 33.33% in zerogrid; we just need to drop the float and stretch. */ .col-2-6, .col-1-3 { float: none !important; } span > .col-2-6, span > .col-1-3 { display: flex !important; box-sizing: border-box; } /* Defensive fallback: col-2-6 sits directly under .panel / .innerbox. */ .panel:has(> .col-2-6), .innerbox:has(> .col-2-6), .panel:has(> .col-1-3), .innerbox:has(> .col-1-3) { display: flex; flex-wrap: wrap; align-items: stretch; } .col-2-6 > .bd-puja-card, .col-1-3 > .bd-puja-card { flex: 1 1 auto; width: 94%; margin: 0 3%; } } /* ---------- Sticky product CTA bar (Ship E) ----------------------- On productdetail.aspx the global Call/WhatsApp/Book master bar is suppressed in favour of a single full-width "Add to Cart -- ₹X" action. Page sets via a tiny master-injected hook (or productdetail's own startup script). */ .bd-product-cta-bar { display: none; } @media (max-width: 767px) { .bd-product-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; height: 56px; background: var(--brand-red); box-shadow: 0 -2px 8px rgba(0,0,0,0.15); } .bd-product-cta-bar a, .bd-product-cta-bar button { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; border: 0; background: transparent; cursor: pointer; } /* When the page declares a product CTA, hide the master's generic Call/WhatsApp/Book bar. Toggle is body.bd-product-cta -- set by productdetail.aspx itself, so other pages are unaffected. */ body.bd-product-cta .bd-cta-bar { display: none !important; } } /* ---------- Video lightbox (Ship B) ------------------------------- Tile pages add a small ▶ overlay on each puja image whose row has videourl set. Click opens a single shared modal with the iframe. The modal markup lives once on the page; JS sets iframe src from the clicked tile's data-video attribute. */ .bd-tile-video { position: relative; display: inline-block; width: 100%; } .bd-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.15s; } .bd-tile-video:hover .bd-play-overlay { background: rgba(228,0,37,0.85); } .bd-play-overlay::after { content: ''; display: block; width: 0; height: 0; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; } .bd-video-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.88); z-index: 99999; align-items: center; justify-content: center; padding: 16px; } .bd-video-modal.open { display: flex; } .bd-video-modal-inner { position: relative; width: 100%; max-width: 880px; } .bd-video-modal-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #000; } .bd-video-modal-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .bd-video-modal-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; background: transparent; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } /* ---------- Phase 1: Form-field modernization --------------------- Override the legacy .txtBox (defined in mystyle.css with Calibri, blue border, 35px height) without removing the original rule. theme.css loads after mystyle.css so these rules win on cascade order -- no !important needed. Saffron focus state matches brand. min-height 40px hits the touch- friendly threshold without disrupting tightly-packed admin grids that rely on shorter inputs. */ .txtBox { border: 1px solid var(--rule); background: #fff; font-family: inherit; /* lets body's Inter cascade through; was hardcoded Calibri */ font-size: 16px; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .txtBox:hover { border-color: #c9beaa; } .txtBox:focus { border-color: var(--saffron); outline: none; box-shadow: 0 0 0 3px rgba(230, 172, 26, 0.25); } .txtBox:disabled, .txtBox[readonly] { background: #f5f1ea; color: #6b6259; cursor: not-allowed; } /* underline-style txtBox2 (used in registration / cart_login) */ .txtBox2 { border: 0; border-bottom: 1.5px solid var(--rule); background: transparent; font-family: inherit; font-size: 16px; min-height: 40px; padding: 8px 4px; width: 95%; color: var(--ink); transition: border-color 0.15s; } .txtBox2:focus { border-bottom-color: var(--saffron); outline: none; } /* ---------- Phase 1: Button polish -------------------------------- .btn and .bigbtn keep their existing yellow/red brand colours (those are intentional). We add hover/active/focus states for affordance and a subtle shadow to lift them off the page. Existing red-on-yellow contrast is suboptimal for accessibility, but a brand recolour is a product decision out of scope for Phase 1 -- defer until owner sign-off. */ .btn, .bigbtn { font-family: inherit; transition: background-color 0.15s, box-shadow 0.15s, transform 0.05s; } .btn:hover, .bigbtn:hover { background-color: #CB9E00; } .btn:active, .bigbtn:active { transform: translateY(1px); } .btn:focus-visible, .bigbtn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; } /* ---------- Phase 1: Membership status banner --------------------- Rendered at the top of MyMemberShip.aspx via the statusBanner public field set in the code-behind. Three states: active (green-tinted), warning (saffron -- within 15 days of expiry), inactive (dashed border). Keeps it scannable without overpowering the page. */ .bd-membership-banner { margin: 12px auto 18px; padding: 16px 20px; max-width: 900px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 16px; text-align: center; box-shadow: var(--shadow-sm); } .bd-membership-banner strong { font-size: 18px; } .bd-membership-banner.bd-status-active { background: #f0f7ed; border-color: #c5e0b4; } .bd-membership-banner.bd-status-warning { background: #fff8e6; border-color: var(--saffron); } .bd-membership-banner.bd-status-inactive { background: var(--paper); border-style: dashed; } /* ---------- Manokamna Tokri timeline (Phase 5) ---------------------- Vertical timeline of "Today / next Thursday / N Thursdays remaining / completed". Used by MyManokamnatokri.aspx and (eventually) the compact summary in MyOrder.aspx. Pure CSS -- no JS, no images. */ .bd-tokri-timeline { list-style: none; margin: 16px 0; padding: 0; position: relative; } .bd-tokri-timeline:before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); } .bd-tokri-timeline li { position: relative; padding: 6px 6px 14px 36px; color: var(--ink); font-size: 14px; } .bd-tokri-timeline li:before { content: ""; position: absolute; left: 4px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--rule); } .bd-tokri-timeline li.is-done:before { background: #1a6e2c; border-color: #1a6e2c; } .bd-tokri-timeline li.is-today:before { background: var(--saffron); border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(230, 172, 26, 0.20); } .bd-tokri-timeline li.is-upcoming:before { background: #fff; } .bd-tokri-timeline li .bd-tokri-date { display: block; font-weight: 600; color: var(--ink); } .bd-tokri-timeline li .bd-tokri-meta { display: block; font-size: 12px; color: #6b6056; } /* ---------- Benefit chips (Phase 1, 2026-05-04) ----------------- Renders below the bd-tile-watch video pill (when present) and above the gold price band. Single visual style -- saffron icon on cream pill. Hardcoded chip->puja map lives in js/bd-chips.js. */ .bd-chip-strip { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px 4px; justify-content: center; /* clear:both is critical: card markup uses float:left for image containers (some with height:200px holding 250px-tall images, causing overflow on Membership.aspx). Without clear, chips would float up next to the image instead of starting a new row below. */ clear: both; width: 100%; /* Empty strip collapses (no chips for this puja) so layout stays tight. */ min-height: 0; } .bd-chip-strip:empty { display: none; } .bd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #fff; border: 1px solid var(--rule); color: var(--ink) !important; white-space: nowrap; letter-spacing: 0.2px; line-height: 1.2; /* Defeat any inherited weirdness from legacy .bd-puja-card text rules. */ text-decoration: none; } /* The icon inside each chip -- saffron, line-art SVG. */ .bd-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--saffron-deep, #CB9E00); display: inline-block; vertical-align: middle; } .bd-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } /* Mobile: tighter chips so 3 still fit on one line */ @media (max-width: 480px) { .bd-chip { font-size: 10px; padding: 3px 8px 3px 6px; gap: 3px; } .bd-icon { width: 11px; height: 11px; } .bd-chip-strip { gap: 4px; padding: 6px 8px 4px; } } /* ============================================================ Mobile public-page fixes (Phase 1.1, 2026-05-04) ----------- Issues found at mobile widths (<600px): - .bd-trust-strip items had `white-space: nowrap` so the long "Performed by Expert Priests..." item overflowed left + right edges on phones (<420px viewport) - Long-value got clipped because input elements don't wrap text natively (Book_Onlinepuja's "To Book Single Manokamna Tokri, Click Here!" and other long buttons across the site) ============================================================ */ @media (max-width: 600px) { /* Trust strip: stack vertically, allow each line to wrap */ .bd-trust-strip { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; font-size: 13px; text-align: left; margin-left: 8px; margin-right: 8px; } .bd-trust-strip .bd-trust-item { white-space: normal; text-align: left; line-height: 1.4; /* Defeat any inline white-space:nowrap from old markup */ word-break: normal; overflow-wrap: break-word; } /* Icon stays inline at the start of the item line */ .bd-trust-strip .bd-trust-item i { flex-shrink: 0; } /* All .btn variants (incl ) wrap text instead of clipping. Targets known long-value buttons: - Book_Onlinepuja: "To Book Single Manokamna Tokri, Click Here!" - BrihaspatiDhamMandirGallery: "Book Abhimantrit Product and Prasad" - userhome: "My Parivar (saved family for puja)" */ .btn, input.btn, input[type="button"].btn, input[type="submit"].btn, .bigbtn, input.bigbtn, input[type="button"].bigbtn, input[type="submit"].bigbtn { white-space: normal !important; word-break: normal; overflow-wrap: break-word; max-width: 100%; height: auto !important; line-height: 1.3; box-sizing: border-box; display: inline-block; } } /* ---------- Universal rounded form fields (2026-05-04) ----------- The .txtBox class already has border-radius: 10px, but many forms across the site (esp. admin pages, registration, search filters) use plain ,