/* ============================================ */ /* VARAHI TEMPLE — HIGH-CONVERTING FUNNEL CSS */ /* Expert Funnel Builder Style */ /* ============================================ */ :root { --gold: #FFD700; --gold-dark: #D4AF37; --maroon: #8B0000; --dark: #111111; --danger: #e74c3c; --success: #27ae60; } /* ============================================ */ /* RESET & BASE */ /* ============================================ */ * { box-sizing: border-box; } html, body { font-family: 'Poppins', 'Mukta Malar', sans-serif; color: #222; background: #fff; margin: 0; padding: 0; width: 100%; -webkit-font-smoothing: antialiased; } /* Clip sideways overflow on the root only. Putting overflow-x on too forces its overflow-y to `auto`, which makes body a scroll container — and then every position:sticky descendant silently stops sticking, because it anchors to a box that never scrolls. The root's overflow propagates to the viewport, so this clips just the same. */ html { overflow-x: hidden; } @media (max-width: 991px) { body { overflow-x: hidden; width: 100%; position: relative; } } img { max-width: 100%; } .text-gold { color: var(--gold) !important; } .text-gold-dark { color: #ffb300 !important; } .text-white-75 { color: rgb(255 255 255) !important; } .text-white-50 { color: rgb(255 255 255) !important; } .fw-900 { font-weight: 900 !important; } .bg-gold { background-color: var(--gold) !important; } /* Utilities */ .relative-z { position: relative; z-index: 10; } /* ============================================ */ /* URGENCY TOP BAR */ /* ============================================ */ .urgency-bar { background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%); color: #000000; text-align: center; padding: 8px 15px; font-size: 1.05rem; font-weight: 600; position: relative; z-index: 1100; } .live-dot { display: inline-block; width: 8px; height: 8px; background: #ff0000; border-radius: 50%; margin-right: 5px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ============================================ */ /* NAVBAR */ /* ============================================ */ .funnel-nav { background: linear-gradient(180deg, #5C1212 0%, #3E0A0A 100%); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(212, 175, 55, 0.35); padding: 8px 0; z-index: 1050; } .brand-title { font-family: 'Mukta Malar', sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1.15; background: linear-gradient(180deg, #FFE9A8 0%, #FFC940 45%, #E09B12 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-tagline { font-family: 'Mukta Malar', sans-serif; font-size: 0.88rem; font-weight: 600; color: #E8B94A; letter-spacing: 0.5px; } .nav-logo { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 2px solid var(--gold-dark); } /* Keep the brand and the language switch on a single row in mobile/tablet (Bootstrap's navbar container wraps by default, which pushed the dropdown onto its own line). */ @media (max-width: 991.98px) { .funnel-nav .container { flex-wrap: nowrap; gap: 10px; } /* Let the brand text shrink/truncate instead of forcing a wrap */ .funnel-nav .navbar-brand { min-width: 0; } .funnel-nav .navbar-brand .brand-title, .funnel-nav .navbar-brand .brand-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The dropdown keeps its natural size and stays pinned to the right. Scoped to div so it doesn't also catch the .navbar-brand anchor, which carries d-flex too and does need to be allowed to shrink. */ .funnel-nav .container > div.d-flex { flex: 0 0 auto; } } /* Phones: stack the navbar instead — brand on the first row, language switch centred underneath. Side by side, the dropdown was getting clipped on very narrow handsets (e.g. the 344px Galaxy Z Fold cover screen). */ @media (max-width: 576px) { .funnel-nav .container { flex-direction: column; align-items: center; gap: 8px; } /* Bootstrap's brand margin would push the row off-centre */ .funnel-nav .navbar-brand { margin-right: 0; justify-content: center; } /* The brand owns the whole row now, so let the full title show */ .funnel-nav .navbar-brand .brand-title, .funnel-nav .navbar-brand .brand-tagline { overflow: visible; text-overflow: clip; } .funnel-nav .container > div.d-flex { justify-content: center; } } .btn-cta-nav { background: linear-gradient(135deg, #FFD700, #D4AF37); color: #000000 !important; font-weight: 700; font-size: 0.85rem; padding: 8px 20px; border-radius: 5px; text-decoration: none; border: none; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); transition: all 0.2s; } .btn-cta-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5); color: #4A0E0E !important; } /* Custom Language Dropdown */ .lang-dropdown-btn { border: 1px solid rgba(212, 175, 55, 0.5) !important; color: #F3E3BE !important; background: rgba(255, 255, 255, 0.07); font-weight: 600; } .lang-dropdown-btn:hover, .lang-dropdown-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); border-color: var(--gold-dark) !important; color: #fff !important; } .custom-lang-menu { border-radius: 12px; border: 1px solid #f0e6d2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 8px 0; } .custom-lang-menu .dropdown-item { padding: 10px 20px; font-weight: 600; color: #333; transition: all 0.2s; } .custom-lang-menu .dropdown-item:hover { background: #fdfaf3; } .custom-lang-menu .dropdown-item.active-lang { background: #fdf3d8; color: #5c4b27; } .lang-badge { background: #f1f2f6; color: #888; font-size: 0.7rem; padding: 4px 6px; border-radius: 4px; font-weight: 700; } .active-lang .lang-badge { background: #e8dee6; background: #e6dfcf; /* slight darker for active */ } /* ============================================ */ /* HERO SECTION */ /* ============================================ */ .hero-section { background: #0d0d0d; padding: 50px 40px 60px; border-bottom: 4px solid #8c0e01; position: relative; overflow: hidden; } /* Background video fills the hero section absolutely */ .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* Darkens the left so the copy stays readable, fades out over the deity */ .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgb(8 4 4 / 89%) 0%, rgb(8 4 4 / 60%) 35%, rgb(8 4 4 / 0%) 58%, rgb(8 4 4 / 0%) 100%); pointer-events: none; z-index: 1; } .pre-headline { font-size: 0.95rem; letter-spacing: 1.5px; text-transform: uppercase; } .hero-badge { display: inline-block; padding: 7px 22px; border-radius: 50px; border: 1px solid #A9761E; background: linear-gradient(180deg, #F6D477 0%, #E9B948 52%, #D19A2B 100%); color: #a82400; font-family: 'Mukta Malar', sans-serif; font-size: 1.25rem; font-weight: 999; letter-spacing: 0.3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* Scarcity strip above the hero CTA. Sits on the dark artwork, so it carries its own translucent panel and a warm border to read as urgent. */ .hero-scarcity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 18px; border-radius: 10px; background: rgb(140 14 1 / 79%); border: 1px solid rgba(255, 193, 7, 0.55); color: #FFE8C2; font-size: 0.98rem; font-weight: 600; } .hero-scarcity>i { color: #FFC107; } .hero-scarcity strong { color: #FFD700; font-weight: 800; } .hero-scarcity-slots strong { color: #FF6B5E; } .hero-scarcity-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.25); } .main-headline { font-family: 'Mukta Malar', sans-serif; font-size: clamp(1.9rem, 1.9vw + 0.7rem, 2.75rem); font-weight: 800; line-height: 1.25; text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.7); /* Balance the wrapped lines so the right edge isn't ragged/zig-zag */ text-wrap: balance; } .highlight-text { background: linear-gradient(180deg, transparent 60%, rgba(255, 215, 0, 0.3) 60%); padding: 0 5px; } .sub-headline { font-size: 1.25rem; max-width: 800px; margin: 0 auto; line-height: 1.7; font-weight: 800; /* Balance the wrapped lines so the edges aren't ragged/zig-zag */ text-wrap: balance; } .trust-row { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } /* Hero copy sits left from lg up; stays centred on smaller screens */ @media (min-width: 992px) { /* Break out of the centred container so the copy hugs the left edge */ .hero-section .container { max-width: 100%; padding-left: clamp(24px, 3vw, 54px); } .hero-section .sub-headline { margin: 0; } .hero-section .trust-row, .hero-section .social-proof-row { justify-content: flex-start; } /* The CTA's width:100%/max-width:620px is for the centred sections. Here it would stretch into a bar whose centred label breaks the left edge. */ .hero-section .btn-funnel-cta { width: auto; max-width: 100%; } } /* ============================================ */ /* HERO — ULTRAWIDE */ /* Past ~1600px the hero box goes to ~2.8:1 */ /* while the artwork is 1.78:1, so `contain` */ /* leaves a dead band at the right edge and a */ /* hard vertical seam where it stops painting. */ /* Size the art by its own aspect and pin it */ /* right, then dissolve its left edge into the */ /* ground — no seam, no band, nothing cropped. */ /* ============================================ */ @media (min-width: 1600px) { .hero-section { --hero-container: 1400px; } /* Put the copy back in a centred container — full-bleed on an ultrawide is an unreadable line length. The dark ground still spans edge to edge. */ .hero-section .container { max-width: var(--hero-container); padding-left: 12px; } .hero-video-bg { /* Right edge lands on the container's right edge, not the screen's. `right` resolves against the padding box, which is the section's full width — the same box the container is centred in. */ inset: 0 calc((100% - var(--hero-container)) / 2) 0 auto; width: auto; height: 100%; aspect-ratio: 1672 / 941; /* matches the box aspect exactly, so this crops nothing */ object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); } } /* ============================================ */ /* HERO — MOBILE / TABLET (stacked) */ /* Artwork on top, copy below it. No overlay — */ /* the two never sit on top of each other. */ /* ============================================ */ @media (max-width: 991.98px) { .hero-section { padding: 0 0 45px; background: linear-gradient(180deg, #2A0808 0%, #0d0d0d 100%); } /* Out of the absolute layer, into normal flow as a real block video */ .hero-video-bg { position: static; width: 100%; height: auto; object-fit: contain; object-position: center; display: block; margin-bottom: 30px; border-bottom: 1px solid rgba(212, 175, 55, 0.35); } /* Nothing to darken any more — the copy has its own background */ .hero-section::before { display: none; } .hero-section .main-headline { text-shadow: none; } } .trust-row span { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; font-weight: 600; } /* Social Proof Row */ .social-proof-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.75rem; margin-left: -10px; } .avatar:first-child { margin-left: 0; } /* ============================================ */ /* MASTER CTA BUTTON */ /* ============================================ */ .btn-funnel-cta { display: inline-block; background: linear-gradient(180deg, #f5c518 0%, #e6a817 50%, #d49a15 100%); border-bottom: 5px solid #b8860b; color: #1a1a1a !important; text-transform: none; font-weight: 900; font-size: 1.25rem; padding: 16px 32px; border-radius: 10px; text-decoration: none; transition: all 0.15s ease; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45); max-width: 620px; width: 100%; line-height: 1.3; letter-spacing: -0.5px; position: relative; overflow: hidden; } .btn-funnel-cta::before { content: ''; position: absolute; top: -50%; left: -100%; width: 200%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shine 3s infinite; } @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } .btn-funnel-cta:hover { transform: translateY(2px); border-bottom-width: 3px; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); color: #1a1a1a !important; } .text-danger { --bs-text-opacity: 1; color: #8c0e01 !important; } .cta-sub { display: block; font-size: 0.85rem; font-weight: 500; opacity: 0.7; margin-top: 5px; color: black; } .pulse-fast { animation: pulse-beat 2s ease-in-out infinite; } @keyframes pulse-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .arrow-move { animation: arrow-shift 0.8s infinite alternate; } @keyframes arrow-shift { from { transform: translateX(0); } to { transform: translateX(6px); } } /* ============================================ */ /* SECTION BADGES & HEADLINES */ /* ============================================ */ .section-badge { display: inline-block; padding: 10px 24px; border-radius: 50px; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; } .section-headline { font-family: 'Mukta Malar', sans-serif; font-size: 3.3rem; font-weight: 800; line-height: 1.3; color: #1a1a1a; /* Balance the wrapped lines so long headings (e.g. the pain-section question) don't wrap ragged/zig-zag like the hero headline used to */ text-wrap: balance; } .single-line-heading { white-space: nowrap; font-size: clamp(1rem, 2.5vw + 0.5rem, 3.3rem) !important; } /* ============================================ */ /* PAIN SECTION */ /* ============================================ */ /* ============================================ */ /* PARCHMENT GROUND */ /* Shared by the pain and FAQ sections. */ /* ============================================ */ .parchment-section { /* Cream ground + a fine gold lattice with a dot at every crossing, and a soft gold wash bleeding in from the top and bottom edges. */ background-color: #F8F1DD; background-image: linear-gradient(180deg, rgba(198, 158, 48, 0.07) 0%, rgba(198, 158, 48, 0) 14%, rgba(198, 158, 48, 0) 86%, rgba(198, 158, 48, 0.07) 100%), radial-gradient(circle, rgba(176, 137, 44, 0.06) 1.1px, transparent 1.4px), repeating-linear-gradient(45deg, rgba(176, 137, 44, 0.028) 0 1px, transparent 1px 15px), repeating-linear-gradient(-45deg, rgba(176, 137, 44, 0.028) 0 1px, transparent 1px 15px); background-size: auto, 30px 30px, auto, auto; padding: 70px 0; position: relative; overflow: hidden; } /* Gold flourishes either side of the heading, replacing the red badge */ .ornament-heading { display: flex; align-items: center; justify-content: center; gap: 18px; color: #6B1008; } .ornament-heading::before, .ornament-heading::after { content: ''; flex: 0 1 90px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-dark)); } .ornament-heading::after { background: linear-gradient(90deg, var(--gold-dark), transparent); } .chakra-bg { position: absolute; width: 600px; height: 600px; opacity: 0.15; z-index: 1; pointer-events: none; } .chakra-left { top: 50%; left: -200px; animation: rotateLeft 70s linear infinite; } .chakra-right { top: 50%; right: -200px; animation: rotateRight 70s linear infinite; } @keyframes rotateLeft { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(-360deg); } } @keyframes rotateRight { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } /* ============================================ */ /* BENEFITS GRID (நற்பயன்கள்) */ /* Six coloured cards on the parchment ground, */ /* gold icon + heading, light description. */ /* ============================================ */ .benefit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .benefit-box { text-align: center; padding: 20px 10px 18px; border-radius: 14px; border: 1.5px solid var(--gold-dark); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } .benefit-icon { margin-bottom: 12px; line-height: 0; } /* ---- Sprite from ico.png (2172×724, 6 columns) ---- */ /* 750% zoom crops tightly around each badge (≈96% fill) */ .benefit-sprite { width: 85%; max-width: 145px; aspect-ratio: 1; margin: 0 auto 10px; background-image: url('../images/ico.webp'); background-repeat: no-repeat; background-size: 610% auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4)); } .benefit-sprite--wealth { background-position: 2% 50%; } .benefit-sprite--protection { background-position: 21% 50%; } .benefit-sprite--victory { background-position: 40.5% 50%; } .benefit-sprite--family { background-position: 59.5% 50%; } .benefit-sprite--health { background-position: 79% 50%; } .benefit-sprite--education { background-position: 98% 50%; } .benefit-box h4 { color: #8c0e01; font-family: 'Mukta Malar', sans-serif; font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; } .benefit-box p { color: rgb(12 12 12 / 85%); font-size: 0.9rem; line-height: 1.55; margin: 0; } /* The six colours, lit from the centre — same family as the pain cards */ .benefit-box--wealth { /* background: radial-gradient(circle at 50% 32%, #9E1A30 0%, #6B0F1C 100%);*/ } .benefit-box--protection { /* background: radial-gradient(circle at 50% 32%, #17573F 0%, #0C3324 100%);*/ } .benefit-box--victory { /* background: radial-gradient(circle at 50% 32%, #1B3C7E 0%, #0E2049 100%);*/ } .benefit-box--family { /* background: radial-gradient(circle at 50% 32%, #5C1A6B 0%, #350D3E 100%);*/ } .benefit-box--health { /* background: radial-gradient(circle at 50% 32%, #954507 0%, #632B04 100%); } .benefit-box--education { /*background: radial-gradient(circle at 50% 32%, #10635F 0%, #073A38 100%);*/ } /* 6 across only on the widest screens; step down gracefully */ @media (max-width: 1199.98px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .benefit-grid { grid-template-columns: 1fr; } } .pain-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pain-box { display: flex; flex-direction: column; border: 1.5px solid var(--gold-dark); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); } .pain-icon-img { width: 100%; height: 225px; object-fit: cover; display: block; border-bottom: 1.5px solid var(--gold-dark); } .pain-box-body { flex: 1; padding: 20px 22px 24px; } /* Each box carries its own colour, so the copy has to read light */ .pain-box-body strong { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.45; color: #FFD98A; margin-bottom: 8px; } .pain-box-body p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); } /* The six colours, lit from the centre like the reference cards */ .pain-box--debt { background: radial-gradient(circle at 50% 35%, #9E1A30 0%, #6B0F20 100%); } .pain-box--job { background: radial-gradient(circle at 50% 35%, #17573F 0%, #0C3324 100%); } .pain-box--marriage { background: radial-gradient(circle at 50% 35%, #1B3C7E 0%, #0E2049 100%); } .pain-box--blackmagic { background: radial-gradient(circle at 50% 35%, #5C1A6B 0%, #350D3E 100%); } .pain-box--health { background: radial-gradient(circle at 50% 35%, #954507 0%, #632B04 100%); } .pain-box--family { background: radial-gradient(circle at 50% 35%, #10635F 0%, #073A38 100%); } @media (max-width: 991.98px) { .pain-list { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 575.98px) { .pain-list { grid-template-columns: 1fr; } } /* ============================================ */ /* SOLUTION SECTION */ /* ============================================ */ /* ============================================ */ /* EMERALD GROUND */ /* Shared by the solution, video and */ /* testimonial sections. */ /* ============================================ */ .emerald-section { /* Deep green ground with the light pooling in the centre */ background-color: #083227; background-image: radial-gradient(ellipse at 50% 40%, #0E4E3D 0%, #072A21 70%, #041A15 100%); position: relative; overflow: hidden; } /* Everything on the green ground has to read light */ .emerald-section .section-headline { color: #FFF3D6; } /* A dark outline button is invisible on the green — carry it in gold instead */ .emerald-section .btn-outline-dark { border-color: var(--gold-dark); color: var(--gold); } .emerald-section .btn-outline-dark:hover { background: var(--gold); border-color: var(--gold); color: #1A1A1A; } /* Section intro copy. Bootstrap's .text-dark is !important so this has to be too. Keyed on .opacity-75 so the white testimonial cards — whose copy is .opacity-85 — keep their dark text. */ .emerald-section p.text-dark.opacity-75 { color: rgba(255, 255, 255, 0.85) !important; } /* The per-section badge colours (danger / success / dark / warning) all fall apart on green. One gold pill across the lot. */ .emerald-section .section-badge { border: 1px solid #A9761E; background: linear-gradient(180deg, #F6D477 0%, #E9B948 52%, #D19A2B 100%) !important; color: #5A1A08 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* ============================================ */ /* SOLUTION SECTION */ /* ============================================ */ .solution-section>.container>.row p { color: rgba(255, 255, 255, 0.85) !important; } .solution-section>.container>.row p strong { color: var(--gold); } .step-card { border: 2.5px solid var(--gold-dark); border-radius: 16px; padding: 42px 22px 28px; height: 100%; position: relative; transition: transform 0.3s; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } .step-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); } /* One colour per step, lit from the centre like the reference badges */ .step-card--one { background: radial-gradient(circle at 50% 35%, #A01A2C 0%, #6B0F1C 100%); } .step-card--two { background: radial-gradient(circle at 50% 35%, #1A6B4C 0%, #0D3A29 100%); } .step-card--three { background: radial-gradient(circle at 50% 35%, #1A4E8F 0%, #0D2A55 100%); } .step-card h4 { color: var(--gold); font-size: 1.2rem; line-height: 1.45; margin-bottom: 10px; } .step-card p { color: rgba(255, 255, 255, 0.85); font-size: 0.98rem; line-height: 1.6; margin: 0; } .step-number { position: absolute; top: -22.5px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle at 50% 35%, #3E0A0A 0%, #1C0303 100%); border: 1.5px solid var(--gold-dark); color: var(--gold); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.25rem; } .step-icon { font-size: 2.6rem; margin-bottom: 15px; color: var(--gold); } /* Betel leaf (வெற்றிலை) drawn inline so it stays crisp and needs no request */ .step-icon--leaf { line-height: 0; } .leaf-svg { width: auto; height: 3rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } .leaf-svg .leaf-body { fill: #55B848; } .leaf-svg .leaf-veins { stroke: #F4FBF2; stroke-width: 4; opacity: 0.92; } /* Raster step icon (yaagam fire) — sized to sit level with the leaf and the remaining glyph icons */ .step-icon--img { line-height: 0; } .step-icon-img { width: auto; height: 3.4rem; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); } /* ============================================ */ /* DEITIES SECTION */ /* ============================================ */ /* ============================================ */ /* CRIMSON GROUND */ /* Shared by the deities and offer sections. */ /* ============================================ */ .crimson-section { /* Deep red ground, lit in the centre and falling away at the corners */ background-color: #4A0810; background-image: radial-gradient(ellipse at 50% 38%, #8E1520 0%, #5A0A12 58%, #350509 100%); } .deities-section { padding: 70px 0; border-top: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); } .deity-card { border: 1.5px solid var(--gold-dark); border-radius: 12px; padding: 20px 15px; text-align: center; color: #fff; transition: all 0.3s; height: 100%; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); } /* bg-dark on the deep red ground separates at only 1.67:1 — use the gold pill the hero and solution sections already use. */ .deities-section .section-badge { border: 1px solid #A9761E; background: linear-gradient(180deg, #F6D477 0%, #E9B948 52%, #D19A2B 100%) !important; color: #5A1A08 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .deity-card h6 { color: var(--gold); } .deity-card small { color: rgba(255, 255, 255, 0.85); } /* Three colours cycling down the grid, so every row reads maroon / green / navy. Keyed off position rather than a class, so the deity markup stays untouched. */ .deities-section .row>[class*="col-"]:nth-child(3n+1) .deity-card { background: radial-gradient(circle at 50% 35%, #7A1A20 0%, #47080D 100%); } .deities-section .row>[class*="col-"]:nth-child(3n+2) .deity-card { background: radial-gradient(circle at 50% 35%, #1B5140 0%, #0C2C22 100%); } .deities-section .row>[class*="col-"]:nth-child(3n) .deity-card { background: radial-gradient(circle at 50% 35%, #232F5C 0%, #101733 100%); } .deity-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); } .deity-icon { font-size: 2.2rem; display: block; margin-bottom: 8px; } /* ============================================ */ /* TESTIMONIALS */ /* ============================================ */ .testimonial-section { /* Ground comes from .emerald-section — a `background` shorthand here would reset its gradient, and this rule sits later in the file. */ padding: 70px 0; } .testimonial-card { background: #fff; border: 1px solid #eee; border-top: 5px solid var(--gold-dark); border-radius: 12px; padding: 30px; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); } .testi-avatar { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1rem; flex-shrink: 0; } /* ============================================ */ /* OFFER SECTION */ /* ============================================ */ .offer-section { /* Ground comes from .crimson-section — no `background` shorthand here, it would reset the gradient (this rule sits later in the file). */ border-top: 1px solid var(--gold-dark); } .offer-box { background: rgba(255, 255, 255, 0.03); border: 2px solid var(--gold-dark); border-radius: 16px; } .offer-item { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-size: 1rem; } .offer-item:last-of-type { border-bottom: none; } .offer-value { /* 0.4 was tuned against the old near-black ground; on the crimson it drops to 2.56:1. These struck-through prices are the value anchor — they have to stay readable. */ color: rgba(255, 255, 255, 0.75); text-decoration: line-through; font-size: 0.9rem; } .total-row { border-top: 2px dashed var(--gold-dark); } .value-strike { text-decoration: line-through; /* --danger red read fine on the old near-black ground; on the crimson it is red-on-red at 2.29:1. A warm off-white carries the strikethrough instead. */ color: rgba(255, 235, 235, 0.8); font-size: 1.5rem; font-weight: 700; } /* Bootstrap's .text-success green lands at 1.93:1 on the crimson — and green-on-red is the worst case for red-green colour blindness besides. */ .crimson-section .text-success { color: #00cb6d !important; } .price-tag { font-size: 4rem; font-weight: 900; color: var(--gold); line-height: 1; text-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } /* Timer */ .funnel-timer { display: inline-flex; gap: 12px; } .timer-block { background: #fff; color: #000; padding: 10px 18px; border-radius: 8px; min-width: 75px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.2); } .timer-block span { display: block; font-size: 2rem; font-weight: 900; line-height: 1; } .timer-block small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: #666; } /* ============================================ */ /* FAQ SECTION */ /* ============================================ */ .faq-section { /* Ground comes from .parchment-section — no `background` shorthand here, it would reset the pattern (this rule sits later in the file). */ padding: 70px 0; } .faq-subtitle { color: #6F6140; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 600; } /* Two columns, as in the reference. align-items:start so an open panel grows on its own instead of stretching its row-mate. The chevron vars have to live here, not on .faq-section: Bootstrap declares them on .accordion itself, which would beat an inherited value. */ .faq-section .accordion { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 0 22px; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1A10'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B1008'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .faq-section .accordion-item { border: 1.5px solid #D9BC72 !important; border-radius: 8px !important; overflow: hidden; background: transparent; } .faq-section .accordion-button { font-family: 'Mukta Malar', sans-serif; font-size: 1.05rem; background: #FBF6E8; color: #8B1A10; border: none; box-shadow: none !important; padding: 14px 18px; } .faq-section .accordion-button:not(.collapsed) { background: #F5EAD0; color: #6B1008; } .faq-section .accordion-body { background: #FDFBF4; color: #4A3B22 !important; border-top: 1px solid #E6D3A0; } @media (max-width: 767.98px) { .faq-section .accordion { grid-template-columns: 1fr; } } /* ============================================ */ /* FINAL CTA SECTION */ /* ============================================ */ .final-cta-section { background: linear-gradient(135deg, var(--maroon) 0%, #4a0000 100%); position: relative; overflow: hidden; } .final-cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 50%); pointer-events: none; } /* ============================================ */ /* FOOTER */ /* ============================================ */ /* ============================================ */ /* SAPPHIRE GROUND */ /* Shared by the temple-location section and */ /* the footer. */ /* ============================================ */ .sapphire-section { /* Deep blue, lit in the centre and falling away at the corners */ background-color: #102454; background-image: radial-gradient(ellipse at 50% 40%, #1E3F8F 0%, #102454 62%, #08122E 100%); position: relative; } /* This section was built for a white ground — everything has to read light now */ .sapphire-section h3, .sapphire-section strong { color: #FFF3D6; } .sapphire-section .text-muted { color: rgba(255, 255, 255, 0.8) !important; } /* Bootstrap's green lands ~2.5:1 on the blue */ .sapphire-section .text-success { color: #7BE8A8 !important; } .sapphire-section .section-badge { border: 1px solid #A9761E; background: linear-gradient(180deg, #F6D477 0%, #E9B948 52%, #D19A2B 100%) !important; color: #5A1A08 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* A dark outline button is invisible on the blue — carry it in gold instead */ .sapphire-section .btn-outline-dark { border-color: var(--gold-dark); color: var(--gold); } .sapphire-section .btn-outline-dark:hover { background: var(--gold); border-color: var(--gold); color: #1A1A1A; } .funnel-footer { /* Ground comes from .sapphire-section — no `background` shorthand here, it would reset the gradient (this rule sits later in the file). */ border-top: 3px solid var(--gold-dark); } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; transition: all 0.3s; font-size: 0.9rem; } .footer-social:hover { background: var(--gold); color: #000; transform: translateY(-2px); } /* ============================================ */ /* STICKY BOTTOM CTA (Mobile) */ /* ============================================ */ .sticky-bottom-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(135deg, #f5c518, #d49a15); padding: 0; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2); } .sticky-bottom-cta a { display: block; padding: 14px 20px; color: #1a1a1a !important; font-weight: 900; font-size: 1.1rem; text-decoration: none; letter-spacing: -0.3px; } /* ============================================ */ /* MEDIA / VIDEOS */ /* ============================================ */ .video-card { background: #0d0d0d; border: 2px solid var(--gold-dark); border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .video-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4); } .video-thumb-container { position: relative; cursor: pointer; } .video-thumb-container img { width: 100%; height: 100%; object-fit: cover; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: #e74c3c; background: #fff; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); transition: all 0.3s; } .video-card:hover .play-icon { transform: translate(-50%, -50%) scale(1.1); color: #c0392b; } .vertical-video .video-thumb-container { aspect-ratio: 9/16; } .horizontal-video .video-thumb-container { aspect-ratio: 16/9; } /* ============================================ */ /* LIVE TOAST NOTIFICATION */ /* ============================================ */ .live-toast { position: fixed; top: 120px; right: 20px; background: #fff; border-left: 4px solid var(--success); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); padding: 12px 15px; display: flex; align-items: center; gap: 12px; z-index: 10000; transform: translateY(-150%); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); max-width: 300px; } .live-toast.show { transform: translateY(0); opacity: 1; } .toast-img { width: 40px; height: 40px; border-radius: 50%; background: #f1f2f6; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .toast-content p { margin: 0; font-size: 0.85rem; line-height: 1.3; color: #333; } .toast-time { display: block; font-size: 0.7rem; color: #888; margin-top: 3px; } /* ============================================ */ /* RESPONSIVE */ /* ============================================ */ @media (max-width: 991px) { .main-headline { font-size: 2.2rem; } .sub-headline { font-size: 1.1rem; } .section-headline { font-size: 1.8rem; } .btn-funnel-cta { font-size: 1.1rem; padding: 14px 24px; } .price-tag { font-size: 3rem; } body { padding-bottom: 55px; } } .deity-card h6 { font-size: 24px !important; } .deity-card small { font-size: 1em !important; } @media (max-width: 576px) { .main-headline { font-size: 1.75rem; } .sub-headline { font-size: 1rem; } .section-headline { font-size: 2.5rem; } /* The pain-section question is much longer than the other headings, so it gets a slightly smaller size on phones. Everything else keeps 2.5rem. */ .pain-section .section-headline { font-size: 2.2rem; } .single-line-heading { white-space: normal !important; font-size: clamp(1.2rem, 5vw, 1.8rem) !important; } .btn-funnel-cta { font-size: 1rem; padding: 12px 20px; } .hero-section { padding: 0 0 40px; } /* Shrink the brand a touch so the full title + language switch fit one row */ .brand-title { font-size: 1.15rem; } .brand-tagline { font-size: 0.78rem; } .lang-dropdown-btn { padding-left: 0.7rem !important; padding-right: 0.7rem !important; } .pain-icon-img { height: 180px; } .urgency-bar { font-size: 0.75rem; padding: 6px 10px; } .trust-row { flex-direction: column; align-items: center; gap: 10px; } .trust-row span { font-size: 0.85rem; } .timer-block { min-width: 60px; padding: 8px 12px; } .timer-block span { font-size: 1.5rem; } .live-toast { top: 110px; right: 10px; left: auto; transform: translateY(-150%); width: auto; max-width: 300px; } .live-toast.show { transform: translateY(0); } /* ---- Malayalam only ---------------------------------------------- Malayalam words run far longer than the other scripts, so at phone widths its headings overflow / get clipped. Scoped via the page's lang attribute so no other language page is affected. */ html[lang="ml"] .main-headline { font-size: 1.55rem; } /* Deity cards are half-width on phones (~136px of usable space) and the Malayalam labels are single long words, so they spilled outside the card. Size them down and let a word break rather than overflow. */ html[lang="ml"] .deity-card h6 { font-size: 18px !important; } html[lang="ml"] .deity-card small { font-size: 12px !important; } html[lang="ml"] .deity-card h6, html[lang="ml"] .deity-card small { overflow-wrap: break-word; word-break: break-word; } html[lang="ml"] .section-headline { font-size: 1.8rem; } html[lang="ml"] .final-cta-section h2.display-5 { font-size: 1.3rem; } /* ---- Tamil only --------------------------------------------------- "ஸ்ரீ பிரத்யங்கிரா" is one long unbreakable word and ran ~5px past the edge of the half-width deity card on phones. A slightly smaller title fits it without having to break the word mid-way. */ html[lang="ta"] .deity-card h6 { font-size: 22px !important; } /* ---- English only -------------------------------------------------- Transliterated names like "Sarabeswarar" / "Pratiyangara" are long single tokens that ran past the half-width deity card on phones. */ html[lang="en"] .deity-card h6 { font-size: 18px !important; } } /* ============================================ */ /* INLINE VIDEO PLAYER */ /* The thumbnail becomes the player in place — */ /* no popup, and the card keeps its own box. */ /* ============================================ */ .video-thumb-container.is-playing { overflow: hidden; border-radius: 8px; background: #000; } .video-thumb-container.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }