/* ============================================================================ * Soil Depot - bilingual UI: the EN/ES toggle + the no-flash guard. * Reuses the brand variables declared on :root by nav.css (loaded just before). * ========================================================================== */ /* No-flash: hide a Spanish page's body until the engine has translated it. * visibility (not display) preserves layout so there is no reflow on reveal. * Applied ONLY to /es/ pages (html[lang=es] gets .sd-lang-pending in ); * English pages never receive the class, so they are never hidden. */ html.sd-lang-pending body { visibility: hidden !important; } /* ---- the EN/ES toggle pill ---- */ .sd-lang-toggle { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--sdn-line, rgba(36, 27, 15, .12)); background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 3px; line-height: 1; -webkit-backdrop-filter: saturate(140%) blur(6px); backdrop-filter: saturate(140%) blur(6px); vertical-align: middle; } .sd-lang-toggle--d { margin: 0 12px; } .sd-lang-btn { -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer; font: 800 12px/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .06em; color: var(--sdn-ink-70, rgba(36, 27, 15, .72)); padding: 6px 11px; border-radius: 999px; white-space: nowrap; min-width: 34px; text-align: center; transition: background .2s var(--sdn-ease, ease), color .2s var(--sdn-ease, ease); } .sd-lang-btn:hover { color: var(--sdn-green-d, #23601f); } .sd-lang-btn.is-active { color: #fff; background: linear-gradient(180deg, #3a9b3f, var(--sdn-green-d, #23601f)); box-shadow: 0 2px 7px rgba(35, 96, 31, .30), inset 0 1px 0 rgba(255, 255, 255, .22); } .sd-lang-btn:focus-visible { outline: 2px solid var(--sdn-green, #2E7D32); outline-offset: 2px; } /* condensed header: shrink the pill a touch to match the smaller bar */ body.sd-nav-scrolled .sd-lang-toggle--d .sd-lang-btn { padding: 5px 9px; } /* mobile drawer: full-width, larger tap targets */ .sd-lang-toggle--m { display: flex; justify-content: center; width: calc(100% - 32px); margin: 6px auto 16px; box-sizing: border-box; } .sd-lang-toggle--m .sd-lang-btn { flex: 1 1 0; padding: 11px 0; font-size: 14px; text-align: center; } /* desktop vs mobile visibility (Astra's header breakpoint is ~922px) */ @media (max-width: 921px) { .sd-lang-toggle--d { display: none; } } @media (min-width: 922px) { .sd-lang-toggle--m { display: none; } } @media (prefers-reduced-motion: reduce) { .sd-lang-btn { transition: none; } }