:root { --bg: #fdf6ec; --surface: #ffffff; --ink: #2b2117; --muted: #7a6a53; --accent: #b8551f; --accent-soft: #f3d9c4; --border: #e7dcc9; --shadow: 0 2px 10px rgba(90, 60, 20, 0.08); --radius: 14px; --maxw: 820px; } /* Dark theme. Activated by data-theme="dark" on , set by theme.js (and a pre-paint inline script in each page's head to avoid a flash). Only the palette variables change; the rest of the CSS reads them. */ :root[data-theme="dark"] { --bg: #1c1712; --surface: #262019; --ink: #f0e7da; --muted: #b3a084; --accent: #e8823f; --accent-soft: #47331f; --border: #3a3025; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } /* The header keeps its warm gradient; deepen it slightly for dark mode. */ :root[data-theme="dark"] .site-header { background: linear-gradient(160deg, #6e3413, #4a230d); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } /* Header */ .site-header { background: linear-gradient(160deg, #b8551f, #9c3f14); color: #fff5ec; padding: 34px 0 30px; text-align: center; box-shadow: var(--shadow); } .site-header .om { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 4px; background: #fdf6ec; border-radius: 50%; box-shadow: 0 2px 8px rgba(60, 30, 10, 0.25); } .site-header .om img { width: 44px; height: 64px; object-fit: contain; display: block; } .site-header h1 { margin: 6px 0 4px; font-size: clamp(24px, 5vw, 34px); font-weight: 700; letter-spacing: 0.5px; } .site-header p { margin: 0; opacity: 0.9; font-size: 15px; } .site-header a.back { display: inline-block; margin-bottom: 10px; color: #ffe6d3; font-size: 14px; } /* Controls */ .controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 10px; align-items: center; } .search { flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 16px; color: var(--ink); } .search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .filters { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; transition: all 0.15s ease; } .chip:hover { border-color: var(--accent); } .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Cards / list */ .list { display: grid; gap: 14px; margin: 18px 0 40px; list-style: none; padding: 0; } .card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(90, 60, 20, 0.14); text-decoration: none; } .card .badge { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0.8px; /* letter-spacing adds trailing space after the last glyph, which pushes the text visually left inside the pill; pull it back so the caps sit centred. */ text-indent: 0.8px; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 8px; } /* The uppercase caps render ~1px below the pill's optical centre (the font's ascent/descent leading isn't symmetric around the caps, and at this small size integer padding can't resolve the last pixel). A tiny upward transform nudges just the glyphs — not the pill box — onto the exact centre. Measured against the actual painted pixels. */ .card .badge { transform: translateY(-1px); } .card h2 { margin: 0; font-size: 21px; color: var(--ink); } .card .subtitle { margin: 4px 0 0; color: var(--muted); font-size: 14px; } .empty { text-align: center; color: var(--muted); padding: 40px 0; } /* Detail page */ .detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 24px 30px; box-shadow: var(--shadow); margin: 24px 0 50px; } .lang-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 6px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; } .verse { white-space: pre-wrap; font-size: clamp(19px, 2.6vw, 23px); line-height: 2.1; padding: 24px 4px; text-align: center; } /* Meaning tab: an explanation, not a verse — read it left-aligned. */ .verse.meaning { white-space: normal; text-align: left; line-height: 1.6; } .meaning-list { margin: 0; display: grid; gap: 18px; } .meaning-list dt { font-weight: 700; color: var(--accent, #b8551f); } .meaning-list dd { margin: 4px 0 0; } .meaning-text { margin: 0; } /* Footer */ .site-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 0 40px; } .site-footer .credit { margin-top: 6px; font-size: 12px; opacity: 0.75; } .site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 14px; } .site-footer .footer-links a { color: var(--accent); text-decoration: none; font-weight: 600; } .site-footer .footer-links a:hover { text-decoration: underline; } /* Reading size toggle */ .reader-tools { display: flex; justify-content: center; gap: 8px; padding-top: 10px; } .reader-tools button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; } .reader-tools button:hover { border-color: var(--accent); color: var(--accent); } /* --------------------------------------------------------------------------- PWA & mobile refinements --------------------------------------------------------------------------- */ /* Respect device safe areas (notches / home indicator) in standalone mode. */ .container { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } .site-header { padding-top: max(34px, calc(env(safe-area-inset-top) + 18px)); } .site-footer { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 20px)); } /* Offline banner — slides down from the top when there is no connection. */ .offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #4a3520; color: #fff5ec; text-align: center; font-size: 14px; padding: 8px 12px; transform: translateY(-100%); transition: transform 0.25s ease; padding-top: max(8px, env(safe-area-inset-top)); } .offline-bar.show { transform: translateY(0); } /* Consent banner — slides up from the bottom on first visit. */ .consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #4a3520; color: #fff5ec; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(60, 30, 10, 0.28); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; transform: translateY(120%); transition: transform 0.3s ease; } .consent-bar.show { transform: translateY(0); } .consent-text { margin: 0; font-size: 14px; line-height: 1.5; max-width: 560px; } .consent-actions { display: flex; gap: 10px; flex-shrink: 0; } .consent-btn { border: 1px solid transparent; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; } .consent-accept { background: var(--accent); color: #fff; } .consent-accept:hover { background: #a4491a; } .consent-decline { background: transparent; color: #fff5ec; border-color: rgba(255, 245, 236, 0.5); } .consent-decline:hover { border-color: #fff5ec; } /* iOS "Add to Home Screen" hint — iOS Safari can't show the install button. */ .ios-install-hint { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 6px 22px rgba(90, 60, 20, 0.22); display: flex; align-items: center; gap: 12px; transform: translateY(140%); transition: transform 0.3s ease; } .ios-install-hint.show { transform: translateY(0); } .ios-install-text { margin: 0; font-size: 14px; line-height: 1.5; flex: 1; } .ios-share-glyph { display: inline-block; border: 1.5px solid currentColor; border-radius: 5px; padding: 0 5px; font-weight: 700; line-height: 1.2; color: var(--accent); } .ios-install-close { flex-shrink: 0; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; height: 32px; cursor: pointer; border-radius: 8px; } .ios-install-close:hover { background: var(--bg); color: var(--ink); } /* Floating "Install app" button. */ .install-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(90, 60, 20, 0.28); cursor: pointer; } .install-btn:hover { background: #a4491a; } /* Larger, finger-friendly tap targets and no accidental zoom on iOS (font-size >= 16px on inputs prevents Safari's auto-zoom). */ @media (max-width: 600px) { .site-header { padding-bottom: 24px; } .chip { padding: 11px 18px; font-size: 15px; } .search { font-size: 16px; } .reader-tools button { width: 44px; height: 44px; font-size: 18px; } .detail { padding: 8px 16px 26px; } .card { padding: 16px 18px; } } /* Prevent long verse lines from overflowing on narrow screens. */ .verse { overflow-wrap: break-word; } /* --------------------------------------------------------------------------- UI language switcher (interface localisation: English / Hindi / Gujarati) --------------------------------------------------------------------------- */ .lang-switcher { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 45; display: flex; gap: 2px; padding: 3px; background: rgba(255, 245, 236, 0.92); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 2px 10px rgba(90, 60, 20, 0.18); backdrop-filter: saturate(1.2) blur(4px); } .lang-btn { border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; line-height: 1.2; transition: background 0.15s ease, color 0.15s ease; } .lang-btn:hover { color: var(--accent); } .lang-btn.active { background: var(--accent); color: #fff; } @media (max-width: 600px) { .lang-btn { padding: 8px 12px; font-size: 13px; } } /* --------------------------------------------------------------------------- Dark / light theme toggle button --------------------------------------------------------------------------- */ /* Default (fallback) placement: fixed, just left of the switcher. Used only if the button couldn't be nested inside the switcher (e.g. switcher missing). */ .theme-toggle { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(148px, calc(env(safe-area-inset-right) + 138px)); z-index: 46; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 245, 236, 0.92); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(90, 60, 20, 0.18); backdrop-filter: saturate(1.2) blur(4px); } :root[data-theme="dark"] .theme-toggle { background: rgba(38, 32, 25, 0.92); } .theme-toggle:hover { border-color: var(--accent); } /* Preferred placement: a flex item inside the language-switcher pill, so it flows next to the language buttons and never overlaps them. */ .theme-toggle--inline { position: static; z-index: auto; width: auto; height: auto; border: none; background: transparent; box-shadow: none; backdrop-filter: none; padding: 6px 10px; border-radius: 999px; color: var(--muted); } .theme-toggle--inline:hover { border: none; color: var(--accent); } @media (max-width: 600px) { .theme-toggle { width: 42px; height: 42px; } .theme-toggle--inline { width: auto; height: auto; padding: 8px 10px; } } /* --------------------------------------------------------------------------- Favorites — star on each card, and the button on the item page --------------------------------------------------------------------------- */ /* The card is the positioning context for its star. */ .card { position: relative; } .fav-star { position: absolute; /* Vertically centre the 40px hit-area on the badge row: the badge starts at the card's top padding (18px) and is ~24px tall, so its centre is ~30px from the card top; 30 − 40/2 = 10px keeps the star locked to that row. */ top: 10px; right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 999px; transition: color 0.15s ease, transform 0.1s ease, background 0.15s ease; } .fav-star:hover { color: var(--accent); background: var(--accent-soft); } .fav-star.on { color: #e8a33f; } .fav-star:active { transform: scale(0.88); } /* Keep the card title clear of the star. */ .card h2 { padding-right: 36px; } /* Item-page favorite + share buttons live in the reader-tools row. */ .reader-tools .fav-btn.on { color: #e8a33f; border-color: var(--accent); } .share-btn { /* Icon-only, square button matching the other reader-tools controls. Sizing/border/colors are inherited from `.reader-tools button`. */ display: inline-flex; align-items: center; justify-content: center; padding: 0; } .share-btn .share-icon { display: block; } /* Brief confirmation tint after the copy-link fallback succeeds. */ .share-btn.copied { color: var(--accent); border-color: var(--accent); }