/* Shared language switcher — neutral styling that works on any page chrome (light/dark, gradient header or plain). Pages can wrap .lang-switch in their own positioning element, or use .lang-switch-fixed to pin it to the top-right corner. */ .lang-switch { position: relative; display: inline-block; } /* Pin to a corner on pages without a nav bar to host it (auth, simple pages). */ .lang-switch-fixed { position: fixed; top: 16px; right: 70px; z-index: 1001; } .lang-switch-toggle { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.35); color: inherit; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.85rem; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease; } .lang-switch-toggle:hover { background: rgba(128, 128, 128, 0.2); } .lang-switch-toggle .fa-chevron-down { font-size: 0.7rem; opacity: 0.8; transition: transform 0.3s ease; } .lang-switch.open .lang-switch-toggle .fa-chevron-down { transform: rotate(180deg); } .lang-switch-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 120px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 6px; display: none; z-index: 1100; } .lang-switch.open .lang-switch-menu { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; color: #1a1a2e; transition: background 0.2s ease; } .lang-option:hover { background: rgba(0, 0, 0, 0.06); } /* Dark mode: most pages toggle .dark-mode on (cg-theme). Flip the menu to a dark card. */ html.dark-mode .lang-switch-menu { background: #16161f; border-color: rgba(255, 255, 255, 0.14); } html.dark-mode .lang-option { color: #f4f4f6; } html.dark-mode .lang-option:hover { background: rgba(255, 255, 255, 0.1); }