/* ========================================================================= BlipIt! i18n CSS — RTL overrides + Multi-script font support Add this to your main app.css or include as a separate file. RTL styles activate automatically via [dir="rtl"] on ========================================================================= */ /* ----------------------------------------------------------------- 1. MULTI-SCRIPT FONT IMPORTS (Noto Sans family) Covers: Latin, Arabic, Devanagari, Tamil, CJK, Korean ----------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&family=Noto+Sans+Arabic:wght@300;400;500;600&family=Noto+Sans+Devanagari:wght@300;400;500;600&family=Noto+Sans+Tamil:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&family=Noto+Sans+KR:wght@300;400;500;600&display=swap'); /* ----------------------------------------------------------------- 2. FONT STACK — extends JetBrains Mono with Noto Sans fallbacks ----------------------------------------------------------------- */ :root { --font-i18n: 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', sans-serif; } /* Apply Noto Sans as fallback for non-Latin content */ .entry-content, textarea, .insight-text, .highlight-text, .mood-narrative, .vibe-check { font-family: var(--font-active), var(--font-i18n); } /* Language picker and nav items — use Noto for native script names */ .lang-picker-option, .lang-native-name { font-family: var(--font-i18n); } /* ----------------------------------------------------------------- 3. LANGUAGE PICKER COMPONENT ----------------------------------------------------------------- */ .lang-picker-wrapper { position: relative; display: inline-block; } .lang-picker-toggle { background: none; border: 1px solid var(--border-light); border-radius: var(--border-radius); padding: 4px 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color var(--transition), color var(--transition); } .lang-picker-toggle:hover { border-color: var(--text-primary); color: var(--text-primary); } .lang-picker-toggle .lang-flag { font-size: 1rem; line-height: 1; } .lang-picker-toggle .lang-chevron { font-size: 0.6rem; transition: transform 0.2s ease; } .lang-picker-toggle[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); } .lang-picker-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--bg-paper); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; display: none; padding: 4px 0; } .lang-picker-dropdown.open { display: block; } .lang-picker-option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; text-decoration: none; color: var(--text-primary); font-size: 0.8rem; transition: background 0.15s ease; white-space: nowrap; } .lang-picker-option:hover { background: var(--bg-secondary); } .lang-picker-option.active { background: var(--bg-secondary); font-weight: 500; } .lang-picker-option .option-flag { font-size: 1.1rem; flex-shrink: 0; } .lang-picker-option .option-native { flex: 1; } .lang-picker-option .option-check { color: var(--success); font-size: 0.75rem; flex-shrink: 0; } /* ----------------------------------------------------------------- 4. RTL OVERRIDES — activated by [dir="rtl"] on ----------------------------------------------------------------- */ /* Base direction */ [dir="rtl"] body { text-align: right; } /* Header / Nav */ [dir="rtl"] .nav-left { margin-left: auto; margin-right: 0; } [dir="rtl"] .nav-right { margin-right: auto; margin-left: 0; } [dir="rtl"] .header-nav { flex-direction: row-reverse; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } /* Entry cards */ [dir="rtl"] .entry-content { text-align: right; direction: rtl; } [dir="rtl"] .entry-meta { flex-direction: row-reverse; } [dir="rtl"] .entry-meta-left { flex-direction: row-reverse; } [dir="rtl"] .entry-actions { flex-direction: row-reverse; } /* Input / textarea */ [dir="rtl"] textarea, [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="search"] { text-align: right; direction: rtl; } /* Buttons */ [dir="rtl"] .btn-primary, [dir="rtl"] .btn-oauth { flex-direction: row-reverse; } /* Forms */ [dir="rtl"] .form-group label { text-align: right; } [dir="rtl"] .auth-footer { text-align: right; } /* Filters / Pills */ [dir="rtl"] .filter-pills { flex-direction: row-reverse; } [dir="rtl"] .filter-section { text-align: right; } /* Mood badge */ [dir="rtl"] .mood-badge { margin-left: 6px; margin-right: 0; } /* Char counter */ [dir="rtl"] .char-counter { text-align: left; /* Numbers stay LTR-aligned */ direction: ltr; } /* Insights */ [dir="rtl"] .insight-card { text-align: right; } [dir="rtl"] .pattern-timeline { flex-direction: row-reverse; } [dir="rtl"] .highlight-entry { flex-direction: row-reverse; } [dir="rtl"] .mood-bar-row { flex-direction: row-reverse; } /* Settings */ [dir="rtl"] .settings-section { text-align: right; } [dir="rtl"] .settings-inline-form .form-group input { text-align: right; } [dir="rtl"] .connected-badge { margin-left: 8px; margin-right: 0; } /* Footer */ [dir="rtl"] .site-footer { text-align: right; } /* Landing page */ [dir="rtl"] .how-step { flex-direction: row-reverse; } [dir="rtl"] .feature-card { text-align: right; } /* Language picker — RTL: dropdown opens to left */ [dir="rtl"] .lang-picker-dropdown { right: auto; left: 0; } [dir="rtl"] .lang-picker-option { flex-direction: row-reverse; } /* Auth divider */ [dir="rtl"] .auth-divider { direction: ltr; /* Keep the "or" divider sensible */ } /* Favorites star position */ [dir="rtl"] .fav-btn { left: 8px; right: auto; } /* Search icon */ [dir="rtl"] .search-icon { left: auto; right: 10px; } [dir="rtl"] .search-input { padding-left: 12px; padding-right: 32px; } /* ----------------------------------------------------------------- 5. SETTINGS — Language Selector Section ----------------------------------------------------------------- */ .settings-language-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; } .settings-lang-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--border-radius); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; font-size: 0.8rem; } .settings-lang-option:hover { border-color: var(--text-secondary); background: var(--bg-secondary); } .settings-lang-option.selected { border-color: var(--text-primary); background: var(--bg-secondary); font-weight: 500; } .settings-lang-option input[type="radio"] { display: none; } .settings-lang-flag { font-size: 1.1rem; flex-shrink: 0; } .settings-lang-name { font-family: var(--font-i18n); line-height: 1.3; } .settings-lang-name small { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }