/* ============================================================ SREE JK DEVELOPERS — LANGUAGE CSS File: global/language.css Purpose: - English / Telugu visibility - Language switching UI states - Telugu typography support - Language transition handling - Accessibility support IMPORTANT: Language switching logic belongs to language.js. This file handles styling only. ============================================================ */ /* ============================================================ 01. LANGUAGE VISIBILITY SYSTEM ============================================================ */ /* By default both language elements can exist in the DOM. JavaScript adds the active language class to : html.lang-en html.lang-te */ html.lang-en [data-lang="te"], html.lang-te [data-lang="en"] { display: none !important; } html.lang-en [data-lang="en"], html.lang-te [data-lang="te"] { display: revert; } /* ============================================================ 02. LANGUAGE-SPECIFIC TEXT ============================================================ */ [data-lang="en"] { font-family: var(--font-primary); } [data-lang="te"] { font-family: var(--font-telugu); line-height: 1.75; } /* ============================================================ 03. TELUGU TYPOGRAPHY ============================================================ */ html.lang-te { font-family: var(--font-telugu); } html.lang-te body { font-family: var(--font-telugu); } html.lang-te h1, html.lang-te h2, html.lang-te h3, html.lang-te h4, html.lang-te h5, html.lang-te h6 { font-family: var(--font-telugu); line-height: 1.35; } html.lang-te p { line-height: 1.85; } html.lang-te button, html.lang-te input, html.lang-te textarea, html.lang-te select { font-family: var(--font-telugu); } /* ============================================================ 04. LANGUAGE SWITCHER ============================================================ */ .language-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--color-background-soft); border: 1px solid var(--color-border); border-radius: var(--radius-full); } .language-switcher button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 34px; padding: 6px 12px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 700; cursor: pointer; transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal); } .language-switcher button:hover { color: var(--color-primary); } .language-switcher button.active, .language-switcher button[aria-selected="true"] { background: var(--color-primary); color: var(--color-text-white); box-shadow: var(--shadow-sm); } /* ============================================================ 05. LANGUAGE SWITCHER — DARK BACKGROUND ============================================================ */ .language-switcher-dark { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } .language-switcher-dark button { color: rgba(255, 255, 255, 0.75); } .language-switcher-dark button:hover { color: var(--color-text-white); } .language-switcher-dark button.active, .language-switcher-dark button[aria-selected="true"] { background: var(--color-accent); color: #111827; } /* ============================================================ 06. LANGUAGE LABELS ============================================================ */ .language-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; } /* ============================================================ 07. LANGUAGE TRANSITION ============================================================ */ .language-content { transition: opacity var(--transition-fast); } .language-switching .language-content { opacity: 0.65; } /* ============================================================ 08. TELUGU-SPECIFIC SPACING ============================================================ */ html.lang-te .section-label { letter-spacing: normal; text-transform: none; } html.lang-te .btn { line-height: 1.4; } html.lang-te .form-label { line-height: 1.6; } /* ============================================================ 09. MIXED LANGUAGE CONTENT ============================================================ */ /* Useful when an English brand/project name appears inside Telugu content. */ .brand-text, .project-name, .english-text { font-family: var(--font-primary); } /* ============================================================ 10. LANGUAGE DIRECTION ============================================================ */ html[lang="en"] { direction: ltr; } html[lang="te"] { direction: ltr; } /* ============================================================ 11. ACCESSIBILITY ============================================================ */ .language-switcher button:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================ 12. MOBILE LANGUAGE SWITCHER ============================================================ */ @media (max-width: 767px) { .language-switcher { gap: 2px; padding: 3px; } .language-switcher button { min-width: 40px; min-height: 32px; padding: 5px 9px; } } /* ============================================================ 13. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .language-content, .language-switcher button { transition: none; } } /* ============================================================ END OF LANGUAGE CSS ============================================================ */