/* 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); min-height: 44px; 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: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(640px, calc(100vw - 2rem)); max-height: min(84vh, 640px); overflow: hidden; background: linear-gradient(180deg, #16263d 0%, var(--navy-raised, #122135) 40%); border: 1px solid var(--gold-dim, rgba(185,151,91,.35)); border-radius: 14px; z-index: 1100; box-shadow: 0 28px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(185,151,91,.08) inset; 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; } } /* Sticky chrome: title + search stay put while the grid scrolls. */ .lang-panel-chrome { flex: none; background: inherit; border-bottom: 1px solid var(--border-dark); padding-bottom: 4px; } .lang-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; } .lang-panel-head strong { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; color: var(--ink-inverse); font-weight: 600; letter-spacing: .01em; } .lang-x { cursor: pointer; color: var(--ink-inverse-muted); font-size: 22px; line-height: 1; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; } .lang-x:hover { color: var(--ink-inverse); background: var(--navy); border-color: var(--border-dark); } .lang-search-wrap { position: relative; margin: 0 20px 16px; } .lang-search-wrap::before { content: ""; position: absolute; inset-inline-start: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: no-repeat center / 16px 16px; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; opacity: .9; } .lang-search { width: 100%; box-sizing: border-box; padding: .75rem 1rem .75rem 2.5rem; background: var(--navy-deep, #081320); border: 1px solid var(--border-dark); border-radius: 10px; color: var(--ink-inverse); font-family: var(--font-sans); font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease; } .lang-search::placeholder { color: var(--ink-inverse-muted); } .lang-search:focus { outline: none; border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(185,151,91,.14); } .lang-search::-webkit-search-cancel-button { -webkit-appearance: none; } .lang-grid { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-gutter: stable; } @media (min-width: 560px) { .lang-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 20px 22px; } } .lang-grid a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--ink-inverse); text-decoration: none; font-size: .95rem; font-weight: 500; line-height: 1.25; transition: background .12s ease, border-color .12s ease, color .12s ease; } .lang-grid a:hover { background: rgba(255,255,255,.04); border-color: var(--border-dark); color: var(--ink-inverse); } .lang-grid a:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; } .lang-grid a[aria-current="true"] { color: var(--gold-strong); background: rgba(185,151,91,.12); border-color: rgba(185,151,91,.4); box-shadow: inset 3px 0 0 var(--gold); font-weight: 600; } .lang-grid .flag { width: 28px; height: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,0,0,.25); } .lang-grid li.hide { display: none; } .lang-empty { display: none; padding: 8px 22px 22px; 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