/* Language switcher. A quiet pill in the header nav that opens a small menu; inside the mobile drawer the same menu expands in place instead of floating. Wayfinding, not a call to action — it borrows the nav's type and the site's frosted panel treatment rather than the blue button styling. */ .i18n-switch { position: relative; margin-inline-start: 12px; font-family: "Diatype REKKI Medium", "Diatype REKKI Medium Placeholder", sans-serif; font-size: 13px; line-height: 20px; letter-spacing: -0.015em; } .i18n-trigger { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 2px; font: inherit; letter-spacing: inherit; color: rgba(255, 255, 255, 0.62); background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; } .i18n-trigger:hover, .i18n-trigger:focus-visible, .i18n-trigger[aria-expanded="true"] { color: #fff; } .i18n-trigger:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Flags: the trigger carries all three and shows only the page's own, so the built pages differ by nothing but their . */ .i18n-flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); } .i18n-trigger .i18n-flag { display: none; } html[lang="fr"] .i18n-trigger .i18n-flag[data-flag="fr"], html[lang="en"] .i18n-trigger .i18n-flag[data-flag="en"], html[lang="ar"] .i18n-trigger .i18n-flag[data-flag="ar"] { display: block; } .i18n-current { min-width: 1.4em; text-align: center; } .i18n-chevron { flex: none; opacity: 0.7; transition: transform 180ms ease; } .i18n-trigger[aria-expanded="true"] .i18n-chevron { transform: rotate(180deg); } .i18n-menu { /* The header nav clips its overflow, so the floating menu is placed in viewport coordinates by i18n.js rather than against the switcher. */ position: fixed; z-index: 2147483000; min-width: 0; padding: 6px; background: rgba(14, 14, 16, 0.82); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } .i18n-menu[hidden] { display: none; } .i18n-lang { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: rgba(255, 255, 255, 0.62); text-decoration: none; border-radius: 8px; transition: color 180ms ease, background-color 180ms ease; } .i18n-lang:hover, .i18n-lang:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); } .i18n-lang:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .i18n-lang.is-active { color: #fff; } .i18n-code { flex: 1 1 auto; min-width: 1.9em; color: rgba(255, 255, 255, 0.62); } .i18n-lang.is-active .i18n-code { color: #fff; } .i18n-check { flex: none; opacity: 0; color: #fff; } .i18n-lang.is-active .i18n-check { opacity: 1; } /* Inside the drawer there is no room to float: the menu pushes the nav down. */ /* The drawer lays its sections out with explicit flex order, so the switcher needs one too — otherwise it would jump ahead of the links it should follow. */ #view-mobile .i18n-switch { order: 99; width: 100%; margin-inline-start: 0; padding: 20px 0 8px; font-size: 15px; } #view-mobile .i18n-trigger { width: 100%; justify-content: flex-start; padding: 10px 0; } #view-mobile .i18n-current { flex: 1 1 auto; text-align: start; } #view-mobile .i18n-menu { position: static; min-width: 0; margin-top: 8px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .i18n-trigger, .i18n-lang, .i18n-chevron { transition: none; } }