/* ========================================================================== Bilingual story pages — visibility + language switch -------------------------------------------------------------------------- Pair with /js/i18n.js, which sets data-lang on before first paint. These rules only ever set `display: none`. They never set a display value for the *visible* side, so each element keeps its own natural display (flex nav, block main, list-item, grid). That is deliberate: an earlier version toggled inline `display:block` and collapsed the flex nav. ========================================================================== */ html[data-lang="en"] .content-hi { display: none; } html[data-lang="hi"] .content-en { display: none; } /* Pages that opt out of the toggle for a specific block (e.g. a poem shown as parallel Hindi/English text) mark it .content-both and it always shows. */ /* --- The EN / हिन्दी switch ------------------------------------------------- Colours resolve against whichever variable names the host page defines; the final literal is the Quantum Mystic value. -------------------------------------------------------------------------- */ .lang-switch { display: inline-flex; background-color: var(--bg-card, var(--surface-color, #0f1420)); border: 1px solid var(--border, var(--border-dim, var(--border-subtle, rgba(201, 168, 76, 0.15)))); border-radius: 20px; padding: 4px; gap: 4px; flex-shrink: 0; } .lang-btn { background: transparent; border: none; color: var(--text-muted, var(--text-secondary, #8a97b0)); font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.78rem; font-weight: 600; line-height: 1.2; padding: 6px 12px; border-radius: 16px; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .lang-btn:hover { color: var(--text-primary, var(--text-light, #e8e4d9)); } .lang-btn[aria-pressed="true"] { background-color: var(--accent-gold, var(--accent-purple, #c9a84c)); color: var(--bg-deep, var(--bg-dark, #0a0e1a)); } .lang-btn:focus-visible { outline: 2px solid var(--accent-gold, #c9a84c); outline-offset: 2px; } /* Devanagari copy reads better with the Devanagari face leading the stack. */ [lang="hi"] p, [lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] li, [lang="hi"] blockquote { font-family: 'Noto Serif Devanagari', 'Noto Sans Devanagari', 'Inter', Georgia, serif; } @media (max-width: 600px) { .lang-btn { padding: 5px 10px; font-size: 0.72rem; } }