/* ============================================================ SANMAN YOJANA — Light Funeral Scheme Theme Modern, clean, responsive design with accessibility ============================================================ */ :root { --primary: #b45309; --primary-dark: #92400e; --secondary: #78350f; --light: #fef3c7; --white: #ffffff; --text: #1f1917; --text-muted: #78350f; --border: #f3e8d6; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; /* `clip` keeps the sticky header working (it makes no scroll container); `hidden` stays as the fallback for older engines. Declared on too so off-canvas reveal transforms can never widen the page on mobile. */ overflow-x: hidden; overflow-x: clip; } body { font-family: "Poppins", "Noto Sans Devanagari", system-ui, sans-serif; color: var(--text); background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); max-width: 100%; overflow-x: hidden; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", "Noto Serif Devanagari", Georgia, serif; font-weight: 700; letter-spacing: -0.01em; } p { line-height: 1.75; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--light); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 99px; border: 2px solid var(--light); } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } ::selection { background: var(--primary); color: white; } /* Anchored sections clear the sticky header */ section[id], [id="enquiry"] { scroll-margin-top: 7rem; } /* ============================================================ TOP BAR — a shade lighter than before, now that the navbar below it is white, so the two bands don't clash too hard. ============================================================ */ .site-topbar { background: linear-gradient(115deg, var(--secondary) 0%, var(--primary-dark) 50%, var(--secondary) 100%); color: #f2ddc2; /* warm cream — readable on the brown */ /* the sticky header below is z-50 — without a stacking context of its own the language dropdown would open *behind* the navbar on desktop */ position: relative; z-index: 60; } .topbar-link:hover { color: #fbbf24; } /* Social circles in the top bar — tinted glass on the brown instead of the old amber-50 chips, which disappeared against it. */ .tb-soc { background: rgba(255, 255, 255, 0.12); color: #f2ddc2; } .tb-soc:hover { background: rgba(255, 255, 255, 0.24); color: #fff; } .tb-soc-wa:hover { background: #16a34a; color: #fff; } /* ============================================================ BRAND LOGO (navbar) — image only, no frame or backdrop ============================================================ */ .site-logo { display: block; height: 3.9rem; /* mobile */ width: auto; object-fit: contain; } @media (min-width: 640px) { .site-logo { height: 4.6rem; } /* tablet */ } @media (min-width: 1024px) { .site-logo { height: 5.1rem; } /* desktop */ } /* Footer uses the same mark, a touch larger */ .footer-logo { display: block; height: 5.25rem; width: auto; object-fit: contain; } @media (min-width: 640px) { .footer-logo { height: 6rem; } } /* Footer link lists ("Our Services", "Quick Links") — icon + text row */ .fl-link { display: flex; align-items: center; gap: 0.5rem; transition: padding-left 0.25s ease, color 0.25s ease; } .fl-link:hover { padding-left: 6px; } /* ============================================================ NAVBAR BAND — soft, faint white (not solid) so the logo's own white backdrop sits flush without the band feeling like a stark white slab; a light blur keeps it legible over the sticky scroll. ============================================================ */ #siteHeader { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-bottom: 1px solid rgba(180, 83, 9, 0.12); } /* ============================================================ NAVIGATION LINKS ============================================================ */ .nav-link { position: relative; font-weight: 600; font-size: 0.95rem; color: var(--secondary); opacity: 0.85; padding: 0.5rem 0; transition: opacity 0.3s ease, color 0.3s ease; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2.5px; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 99px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-link:hover, .nav-link.active { opacity: 1; color: var(--primary); } .nav-link.active::after, .nav-link:hover::after { width: 100%; } /* "Contact Now" call-to-action in the navbar. The brown band swallowed the old amber-on-amber button, so the fill and the text swap over: warm amber on dark brown lettering. */ .nav-cta { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.625rem; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #4a2308; font-weight: 700; font-size: 0.9rem; line-height: 1; white-space: nowrap; overflow: hidden; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.85); transition: transform 0.25s ease, box-shadow 0.25s ease; } .nav-cta svg { width: 1rem; height: 1rem; transition: transform 0.25s ease; } .nav-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform 0.6s ease; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.95); } .nav-cta:hover svg { transform: translateX(3px); } .nav-cta:hover::after { transform: translateX(120%); } /* Header-row "Contact Now" only belongs on desktop nav (lg+). Below that the hamburger is visible instead, and the same CTA already lives inside the mobile dropdown menu — a plain Tailwind "hidden" class can't win here because .nav-cta's display:inline-flex above has equal specificity and loads later, so this has to override it directly. */ @media (max-width: 1023.98px) { .nav-cta-header { display: none; } } /* Hamburger — amber-tinted chip on the white band */ .menu-btn { background: rgba(180, 83, 9, 0.08); color: var(--secondary); transition: background 0.2s ease, color 0.2s ease; } .menu-btn:hover { background: rgba(180, 83, 9, 0.16); color: var(--primary-dark); } /* The mobile language toggle lives inside the (now white) header, while the same .lang-toggle-light class is also used in the brown top bar — scope this override to the header so the top bar chip is untouched. */ #siteHeader .lang-toggle-light { background: rgba(180, 83, 9, 0.08); color: var(--secondary); border: 1px solid rgba(180, 83, 9, 0.2); } #siteHeader .lang-toggle-light:hover { background: rgba(180, 83, 9, 0.16); color: var(--primary-dark); } /* ============================================================ EYEBROW / KICKER — small rule + uppercase label above a heading. Lives here (not in a page's inline