/* ORDANE shared UI: language modal + desktop nav spacing. Loaded on every page (EN + localized) by build_i18n.py. The language overlay is portaled to by ui.js, so its position:fixed centers on the viewport instead of being trapped by the sticky header's backdrop-filter containing block. */ /* ---------------- Language trigger (stays in the nav) ---------------- */ /* .top-right groups the language trigger with the "Back" link on inner pages; .lang-corner floats it on the chrome-less thanks page. */ .top-right { display: flex; align-items: center; gap: 14px; } .top-right .lang-modal { margin-inline-end: 0; } .lang-corner { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 10; } .lang-corner .lang-modal { margin-inline-end: 0; } .lang-modal { margin-inline-end: var(--sp-2); position: relative; } .lang-trigger { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: .05em; color: var(--ink-inverse-muted); padding: 6px 9px; border: 1px solid var(--border-dark); border-radius: var(--r-md, 8px); transition: color var(--t-base, .2s) var(--ease, ease), border-color var(--t-base, .2s) var(--ease, ease); } .lang-trigger::-webkit-details-marker { display: none; } .lang-trigger:hover { color: var(--ink-inverse); border-color: var(--gold-dim); } .lang-code { font-weight: 600; } /* ---------------- Overlay (portaled to ) ---------------- */ .lang-backdrop { display: none; } .lang-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(8,19,32,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1099; } .lang-panel { display: none; } .lang-panel.is-open { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(680px, calc(100vw - 2rem)); max-height: min(80vh, 620px); overflow-y: auto; background: var(--navy-raised); border: 1px solid var(--border-dark); border-radius: 12px; z-index: 1100; box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: langPop .16s var(--ease, ease); } @keyframes langPop { from { opacity: 0; transform: translate(-50%,-48%); } to { opacity: 1; transform: translate(-50%,-50%); } } @media (prefers-reduced-motion: reduce) { .lang-panel.is-open { animation: none; } } .lang-panel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); border-bottom: 1px solid var(--border-dark); position: sticky; top: 0; background: var(--navy-raised); } .lang-panel-head strong { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink-inverse); font-weight: 600; } .lang-x { cursor: pointer; color: var(--ink-inverse-muted); font-size: 24px; line-height: 1; padding: 2px 10px; border-radius: 6px; } .lang-x:hover { color: var(--ink-inverse); background: var(--navy); } .lang-search { width: calc(100% - var(--sp-3) * 2); margin: var(--sp-3) var(--sp-3) 0; padding: .7rem .9rem; background: var(--navy); border: 1px solid var(--border-dark); border-radius: 8px; color: var(--ink-inverse); font-family: var(--font-sans); font-size: .95rem; } .lang-search::placeholder { color: var(--ink-inverse-muted); } .lang-search:focus { outline: none; border-color: var(--gold-dim); } .lang-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--sp-2) var(--sp-2) var(--sp-3); margin: 0; } @media (min-width: 560px) { .lang-grid { grid-template-columns: 1fr 1fr; } } .lang-grid a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; color: var(--ink-inverse-muted); text-decoration: none; font-size: .95rem; } .lang-grid a:hover { background: var(--navy); color: var(--ink-inverse); } .lang-grid a[aria-current="true"] { color: var(--gold-strong); } .lang-grid .flag { width: 26px; height: 26px; } .lang-grid li.hide { display: none; } .lang-empty { display: none; padding: 4px 18px 20px; color: var(--ink-inverse-muted); font-size: .9rem; } .lang-empty.show { display: block; } /* ---------------- Round flags ---------------- */ .flag { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-size: cover; background-position: center; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; } .flag-en { background-image: url(/assets/flags/en.svg); } .flag-pt { background-image: url(/assets/flags/pt.svg); } .flag-es { background-image: url(/assets/flags/es.svg); } .flag-fr { background-image: url(/assets/flags/fr.svg); } .flag-de { background-image: url(/assets/flags/de.svg); } .flag-it { background-image: url(/assets/flags/it.svg); } .flag-ja { background-image: url(/assets/flags/ja.svg); } .flag-ko { background-image: url(/assets/flags/ko.svg); } .flag-zh { background-image: url(/assets/flags/zh.svg); } .flag-nl { background-image: url(/assets/flags/nl.svg); } .flag-sv { background-image: url(/assets/flags/sv.svg); } .flag-da { background-image: url(/assets/flags/da.svg); } .flag-no { background-image: url(/assets/flags/no.svg); } .flag-fi { background-image: url(/assets/flags/fi.svg); } .flag-pl { background-image: url(/assets/flags/pl.svg); } .flag-cs { background-image: url(/assets/flags/cs.svg); } .flag-vi { background-image: url(/assets/flags/vi.svg); } .flag-ar { background-image: url(/assets/flags/ar.svg); } /* ---------------- RTL ---------------- The layout itself mirrors automatically: every directional rule in the pages uses logical properties (margin-inline-*, padding-inline-*, border-inline-*, inset-inline-*, text-align: start/end), so `dir="rtl"` on flips them. Only the pieces CSS logic cannot infer are listed here. Deliberately NOT mirrored: the expand chevrons (built from physical border-right + border-bottom + rotate) point down/up, which reads the same in any script. */ /* The marquee scrolls toward the start edge. In RTL that edge is on the right, so the track has to travel the other way or the strip drifts off-screen. */ [dir="rtl"] .ticker-track { animation-name: tickmove-rtl; } @keyframes tickmove-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* Force LTR ONLY on elements whose content is entirely Latin/numeric: a wallet address or a language code. Do NOT do this to elements that merely CONTAIN a price (.num, .ticker-track): they hold Arabic prose too, and forcing the whole run to LTR throws the sentence's final period to the wrong edge and detaches the currency sign. The browser's own bidi algorithm already places "$139" correctly inside Arabic text. */ [dir="rtl"] .pay-addr, [dir="rtl"] .phone-input .dial, [dir="rtl"] .lang-code { direction: ltr; unicode-bidi: isolate; } /* The phone field itself is a Latin-numeric entry box in every locale. */ [dir="rtl"] .phone-input input { direction: ltr; text-align: start; } /* The country list is Latin throughout ("Brazil (+55)"). CSS cannot reach inside an