/* =========================================================
Trimbakeshwar Puja Website — Global Styles
Theme system uses CSS variables so light/dark switch instantly.
========================================================= */
/* NOTE: Google Fonts are NOT imported here any more. A CSS @import is
render-blocking and was costing ~400ms on every page load. The fonts are
now pulled in from the of each HTML page with preconnect +
non-blocking , and the
font-family stacks below fall back to system fonts until they arrive. */
:root{
--font-heading: 'Playfair Display', 'Noto Sans Devanagari', Georgia, 'Times New Roman', serif;
--font-body: 'Poppins', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Single fixed WHITE / light theme — warm off-white background, the same
orange-to-red gradient accents, dark readable text. */
--bg: #ffffff;
--bg-alt: #fbf4ea;
--surface: #ffffff;
--surface-2: #f4ece0;
--text: #241a10;
--text-soft: #4a3b2c;
--text-muted: #8a7a68;
--border: #ecdfcb;
--primary: #ff5b1f; /* orange */
--primary-dark: #d81324; /* red */
--accent: #e8631f; /* warm amber accent, tuned for white bg */
--accent-light: #ff7a3d;
--teal: #128f7a; /* small teal eyebrow accent, as in reference */
--shadow: 0 10px 30px rgba(90,50,10,0.10);
--shadow-lg: 0 20px 60px rgba(90,50,10,0.16);
--gradient-hero: linear-gradient(115deg, rgba(20,8,4,.72) 0%, rgba(90,24,12,.55) 48%, rgba(216,19,36,.30) 100%);
--gradient-gold: linear-gradient(120deg, #ffb066, #ff5b1f 55%, #d81324);
--radius: 18px;
--radius-sm: 10px;
--maxw: 1240px;
}
[data-theme="light"]{
--bg: #ffffff;
--bg-alt: #fbf4ea;
--surface: #ffffff;
--surface-2: #f4ece0;
--text: #241a10;
--text-soft: #4a3b2c;
--text-muted: #8a7a68;
--border: #ecdfcb;
--primary: #ff5b1f;
--primary-dark: #d81324;
--accent: #e8631f;
--accent-light: #ff7a3d;
--shadow: 0 10px 30px rgba(90,50,10,0.10);
--shadow-lg: 0 20px 60px rgba(90,50,10,0.16);
--gradient-hero: linear-gradient(115deg, rgba(20,8,4,.72) 0%, rgba(90,24,12,.55) 48%, rgba(216,19,36,.30) 100%);
--gradient-gold: linear-gradient(120deg, #ffb066, #ff5b1f 55%, #d81324);
}
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
transition: background .35s ease, color .35s ease;
overflow-x: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
input, textarea, select{
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-heading); line-height:1.2; margin: 0 0 .5em; color: var(--text); }
p{ line-height:1.75; color: var(--text-soft); margin:0 0 1em; }
ul{ padding-left: 1.2em; }
button{ font-family: inherit; cursor:pointer; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
section{ padding: 72px 0; }
.section-alt{ background: var(--bg-alt); }
/* ---------- Utility ---------- */
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--teal, var(--primary)); font-weight:600; margin-bottom: 10px;
}
.eyebrow::before{ content:'卐'; opacity:0; } /* placeholder removed visually */
.eyebrow .dot{ width:6px;height:6px;border-radius:50%; background: var(--accent); }
.gold-text{
background: var(--gradient-gold);
-webkit-background-clip: text; background-clip:text; color: transparent;
}
.center{ text-align:center; }
.muted{ color: var(--text-muted); }
.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:8px;
padding: 13px 26px; border-radius: 999px; font-weight:600; font-size: .96rem;
border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
white-space: nowrap;
}
.btn-primary{
background: linear-gradient(120deg, var(--primary), var(--primary-dark));
color: #fff8ee; box-shadow: var(--shadow);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-gold{
background: var(--gradient-gold); color:#fff6ee; box-shadow: var(--shadow);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-outline{
background: transparent; border-color: var(--border); color: var(--text);
}
.btn-outline:hover{ border-color: var(--primary); color: var(--primary); }
.btn-outline-hero{ color:#fff; border-color: rgba(255,255,255,.5); }
.btn-outline-hero:hover{ color:#fff; border-color:#fff; }
.btn-sm{ padding: 8px 16px; font-size: .82rem; }
.btn-block{ width:100%; justify-content:center; }
/* ---------- Header ---------- */
.site-header{
position: sticky; top:0; z-index: 1000;
background: linear-gradient(120deg, #ff7a3d 0%, #ff5b1f 55%, #e2431c 100%);
border-bottom: none;
box-shadow: 0 3px 16px rgba(200,50,10,.22);
}
/* Header sits on an orange gradient — override text/icon colours for contrast */
.site-header .brand, .site-header .brand *{ color:#fff !important; }
.site-header .nav-desktop a{ color: rgba(255,255,255,.92); }
.site-header .nav-desktop a.active, .site-header .nav-desktop a:hover{ color:#fff; }
.site-header .nav-desktop a.active::after{ background:#fff; }
.site-header .nav-dd-trigger{ color: rgba(255,255,255,.92); }
.site-header .nav-dd-trigger:hover{ color:#fff; }
.site-header .icon-btn{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color:#fff; }
.site-header .icon-btn:hover{ background:#fff; color: var(--primary); border-color:#fff; }
.site-header .translate-btn{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color:#fff; }
.site-header .translate-control.open .translate-btn{ background:#fff; color: var(--primary); border-color:#fff; }
.site-header #hamburger-btn{ color:#fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.site-header .call-desktop-only.btn-gold{ background:#fff; color: var(--primary); box-shadow:none; }
.site-header .call-desktop-only.btn-gold:hover{ background:#fff3ea; }
.site-header .container{ padding-left: 30px; padding-right: 30px; }
@media (max-width: 480px){
.site-header .container{ padding-left: 18px; padding-right: 18px; }
}
/* ---------- Header layout ----------
Three fixed zones: brand | nav | actions. Nothing is allowed to wrap onto a
second line, and the nav zone is the only one that flexes. This is what
keeps the menu aligned when Google Translate swaps short Hindi labels
("प्रश्नोत्तर") for much longer English ones ("Questions and Answers") —
previously the nav wrapped and shoved the buttons out of place. */
.header-top{
display:flex; align-items:center; justify-content:space-between;
gap: clamp(10px, 1.6vw, 20px);
padding: 11px 0;
min-height: 68px;
flex-wrap: nowrap;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:0; }
.brand img{ width:44px; height:44px; flex-shrink:0; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.brand-text{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.brand-name{
font-family: var(--font-heading); font-weight:800; font-size:1.12rem; line-height:1.15;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
color: var(--text); text-transform: uppercase; letter-spacing:.02em;
}
.footer-brand{
color: var(--text); text-transform: uppercase; letter-spacing:.02em; font-weight:800;
}
.brand-tag{ font-size:.7rem; color: var(--text-muted); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-desktop{
display:flex; align-items:center; justify-content:center;
gap: clamp(12px, 1.4vw, 24px);
flex-wrap: nowrap; /* never break onto a second line */
flex: 0 1 auto; min-width: 0;
overflow: visible; /* NOTE: overflow-x:hidden + overflow-y:visible computes to auto and would clip the Puja dropdown; the JS fit-check (initHeaderFit) prevents overflow instead */
}
.nav-desktop a{
font-weight:500; font-size: clamp(.8rem, .9vw, .94rem); line-height:1.25;
position:relative; padding: 6px 0; color: var(--text-soft);
white-space:nowrap; flex-shrink:0;
}
.nav-desktop a.active, .nav-desktop a:hover{ color: var(--primary); }
.nav-desktop a.active::after{
content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--gradient-gold); border-radius:2px;
}
.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn{
width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background: var(--surface-2); border:1px solid var(--border); color: var(--text); transition: all .2s ease;
flex-shrink:0;
}
.icon-btn:hover{ background: var(--primary); color:#fff; border-color: var(--primary); }
/* ---------- Translate control ----------
A custom pill (globe icon + "Translate" label) that opens our own
dropdown of languages. The actual Google "Website Translator" widget
still does the translating, but it's rendered fully off-screen — we
just read its