/** * TREUPORT Language Switcher Styles */ /* Anti-FOUC + in-place language switch. * Setting opacity on (instead of visibility on ) is bulletproof: * descendants cannot override an ancestor's opacity, so no element can flash. * Layout still computes → no reflow when the class is removed. * pointer-events:none avoids accidental clicks during the brief fade. */ html.i18n-pending { opacity: 0 !important; pointer-events: none !important; } /* Fast, smooth fade between languages */ html { transition: opacity 90ms ease-out; } .lang-switcher { position: relative; display: inline-block; } .lang-current { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; color: white; cursor: pointer; transition: all 0.2s ease; font-size: 14px; } .lang-current:hover { background: rgba(255, 255, 255, 0.25); } /* Light theme variant */ .lang-switcher.light .lang-current { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } .lang-switcher.light .lang-current:hover { background: #e2e8f0; } .lang-flag { font-size: 18px; line-height: 1; } .lang-code { font-weight: 600; text-transform: uppercase; } .lang-arrow { font-size: 10px; transition: transform 0.2s ease; } .lang-dropdown.show + .lang-current .lang-arrow, .lang-current:focus .lang-arrow { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: calc(100% + 5px); right: 0; min-width: 150px; background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1000; overflow: hidden; } .lang-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: none; background: none; cursor: pointer; transition: background 0.15s ease; text-align: left; } .lang-option:hover { background: #f1f5f9; } .lang-option.active { background: #e0f2fe; color: #0369a1; } .lang-option .lang-flag { font-size: 20px; } .lang-option .lang-name { font-size: 14px; font-weight: 500; color: #334155; } .lang-option.active .lang-name { color: #0369a1; font-weight: 600; } /* Positioning variants */ .lang-switcher.top-right { position: fixed; top: 20px; right: 20px; z-index: 100; } .lang-switcher.inline { position: static; } /* Compact variant for headers */ .lang-switcher.compact .lang-current { padding: 6px 10px; } .lang-switcher.compact .lang-code { display: none; } .lang-switcher.compact .lang-flag { font-size: 20px; }