/* ===================================================================== TERACHA — language switcher styles (paired with assets/i18n.js) Uses the site's existing CSS custom properties (--bg, --fg, --mid, --faint, --rule, --font-en) so it inherits each page's theme. ===================================================================== */ /* ── Desktop dropdown ───────────────────────────────────────────── */ .lang-dd { position: relative; display: inline-flex; } .lang-dd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-en); font-size: 0.58rem; font-weight: 400; letter-spacing: 0.28em; color: #bbbbbb; transition: color 0.25s; } [data-theme="dark"] .lang-dd-btn { color: #555555; } .lang-dd-btn:hover { color: var(--fg); } .lang-dd-caret { font-size: 0.6rem; letter-spacing: 0; transition: transform 0.25s var(--ease, cubic-bezier(0.16,1,0.3,1)); } .lang-dd.open .lang-dd-caret { transform: rotate(180deg); } .lang-dd-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 200px; max-height: 60vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.18); padding: 0.4rem 0; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.22s, transform 0.22s var(--ease, cubic-bezier(0.16,1,0.3,1)), visibility 0.22s; } .lang-dd.open .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-dd-item { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 0.6rem 1.1rem; text-decoration: none; color: var(--mid); transition: color 0.18s, background 0.18s; } .lang-dd-item:hover { color: var(--fg); background: rgba(127,127,127,0.08); } .lang-dd-item.is-current { color: var(--fg); } .lang-dd-name { font-size: 13px; letter-spacing: 0.04em; } .lang-dd-code { font-family: var(--font-en); font-size: 0.5rem; letter-spacing: 0.18em; color: var(--faint); } .lang-dd-item[dir="rtl"] { flex-direction: row-reverse; } /* ── Mobile: device-native overlaid, so the caret stays tight to the text and tapping opens the OS picker. */ .mob-lang-native { margin-top: 2.2rem; position: relative; display: inline-flex; align-items: center; } .mob-lang-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-en); font-size: 0.82rem; font-weight: 300; letter-spacing: 0.1em; color: var(--faint); pointer-events: none; } .mob-lang-caret { font-size: 0.7rem; letter-spacing: 0; line-height: 1; } .mob-lang-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; opacity: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 16px; /* prevents iOS auto-zoom on focus */ } /* native option menus are rendered by the OS — force legible text */ .mob-lang-select option { color: #000; background: #fff; } /* ── Desktop: separate the language switcher from the theme toggle ── */ .nav-right-group .lang-dd { margin-right: 0.75rem; } /* ── RTL page-level tweaks (when ) ──────────────── */ html[dir="rtl"] .lang-dd-menu { left: 0; right: auto; } /* ── Cookie banner: fixed black, theme-independent, consistent across pages. Normalizes the per-page color drift (incl. Soracha.AI's inverted pill). Colors only — each page keeps its own layout. ─────────────────── */ #ck { background: #0d0d0d !important; color: #f0f0f0 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; } #ck .ck-text { color: #b5b5b5 !important; } #ck .ck-text a { color: #ffffff !important; } #ck .ck-btn, #ck .ck-accept { color: #ffffff !important; background: transparent !important; border-color: rgba(255, 255, 255, 0.45) !important; } #ck .ck-btn:hover, #ck .ck-accept:hover { color: #ffffff !important; opacity: 0.7; } #ck .ck-decline { color: #999999 !important; border-color: transparent !important; } #ck .ck-decline:hover { color: #ffffff !important; opacity: 1; } /* ── Gentle hero entrance — slow the quick 0.8s fadeUp on Soracha.AI / Papers hero elements to a soft 1.5s (matches the soccer page). These classes don't exist on the Home pages, so Home is unaffected. Keeps the per-element stagger delays from each page's `animation` shorthand. ── */ .hero-eyebrow, .hero-sub, .hero-btns, .hero-stats { animation-duration: 1.5s !important; }