/* Otter Lab — i18n layer: nav language switcher + full-page RTL. Loaded after base/hero/sections so its overrides win. */ /* ─── Nav language switcher ─── */ .lang-switch { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1; color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); transition: color var(--t-micro) var(--ease-spring), border-color var(--t-micro) var(--ease-spring), background var(--t-micro) var(--ease-spring); } .lang-btn:hover { color: var(--text); border-color: var(--border-cyan); } .lang-globe { flex-shrink: 0; opacity: .85; } .lang-current { letter-spacing: .02em; } .lang-caret { flex-shrink: 0; opacity: .6; transition: transform var(--t-micro) var(--ease-spring); } .lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); } .lang-btn[aria-expanded="true"] { color: var(--text); border-color: var(--border-cyan); } .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 80; min-width: 176px; max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; margin: 0; list-style: none; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(14,17,22,0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 64px rgba(0,0,0,0.55); } .lang-menu[hidden] { display: none; } .lang-menu li { list-style: none; } .lang-menu button { display: block; width: 100%; text-align: start; padding: 9px 13px; border-radius: 9px; cursor: pointer; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid transparent; transition: color var(--t-micro) var(--ease-smooth), background var(--t-micro) var(--ease-smooth); } .lang-menu button:hover { color: var(--text); background: rgba(255,255,255,0.05); } .lang-menu button[aria-selected="true"] { color: var(--text); background: rgba(0,229,255,0.09); border-color: var(--border-cyan); font-weight: 600; } .lang-btn:focus-visible, .lang-menu button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* keep the switcher comfortably sized next to the hamburger on small screens */ @media (max-width: 560px) { .lang-btn { height: 38px; padding: 0 10px; } .lang-btn .lang-current { display: none; } /* globe + caret only — saves width */ } /* ─── Full-page RTL (Arabic / Hebrew) ───────────────────────────────────────── dir="rtl" on mirrors the document. Most flex/grid + logical properties flip automatically; the rules below fix the few physical-direction cases. The console/log surfaces carry their own dir="ltr" (set in the HTML) so their layouts, animations and log text stay intact. */ html[dir="rtl"] .lang-menu { inset-inline-end: 0; } /* dropdown caret arrow inside the eco CTA already mirrors via sections.css ([dir=rtl]); under page RTL the eco-intro inherits rtl, so its CTA arrow flips there too. */ html[dir="rtl"] .eco-cta-arrow { transform: scaleX(-1); } html[dir="rtl"] .eco-cta:hover .eco-cta-arrow { transform: scaleX(-1) translateX(3px); } /* the stat-lines / posture keys use mono + start alignment — already logical; nothing to do. Metaphor + global caption stay centered (via .global); the global lead is start-aligned (logical — flips to right in RTL on its own). */ html[dir="rtl"] .metaphor-line, html[dir="rtl"] .metaphor-sub { text-align: center; } /* numeric/policy code lines must read LTR even mid-RTL paragraph */ html[dir="rtl"] .lc-audit, html[dir="rtl"] .audit-line { direction: ltr; text-align: left; }