/* * LDF Ojibwe Translator — frontend styles. * * Intentionally minimal. The Elementor language-switcher widget exposes its * own Style controls (active/inactive colors, padding, radius, typography) * that override these defaults. Anything here is a fallback so the toggle * still looks reasonable when dropped into a non-Elementor template or when * the widget's controls haven't been customized yet. */ /* ----------------------------------------------------------------------------- * Language switcher (default toggle) * -------------------------------------------------------------------------- */ .ldf-ojibwe-switcher { display: inline-flex; align-items: stretch; gap: 0; padding: 2px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; background: #fff; font-family: inherit; font-size: 0.875rem; line-height: 1; user-select: none; } .ldf-ojibwe-switcher__btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0.4rem 0.85rem; border-radius: 999px; font: inherit; letter-spacing: 0.02em; transition: background-color 120ms ease, color 120ms ease; } .ldf-ojibwe-switcher__btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } .ldf-ojibwe-switcher__btn:focus:not(:focus-visible) { outline: 0; } .ldf-ojibwe-switcher__btn:hover { background: rgba(0, 0, 0, 0.04); } .ldf-ojibwe-switcher__btn[aria-pressed="true"], .ldf-ojibwe-switcher__btn.is-active { background: #1f3a5f; /* LDF deep blue fallback */ color: #fff; } .ldf-ojibwe-switcher__btn[aria-pressed="true"]:hover, .ldf-ojibwe-switcher__btn.is-active:hover { background: #1a3252; } .ldf-ojibwe-switcher__btn[disabled], .ldf-ojibwe-switcher__btn[aria-busy="true"] { opacity: 0.6; cursor: progress; } /* Compact variant — for header bars where vertical space is tight. */ .ldf-ojibwe-switcher--compact { font-size: 0.75rem; } .ldf-ojibwe-switcher--compact .ldf-ojibwe-switcher__btn { padding: 0.25rem 0.6rem; } /* ----------------------------------------------------------------------------- * Document-level language state * * Tiny optional hook: themes / Elementor widgets can target * [data-ldf-lang="oji"] .my-thing { ... } * to tweak typography (e.g. slightly tighter line-height for longer Ojibwe * words). We do NOT change anything globally here. * -------------------------------------------------------------------------- */ html[data-ldf-lang] body { /* Subtle hook for theme overrides; deliberately no visual change by default. */ } /* ----------------------------------------------------------------------------- * Skip / utility classes * -------------------------------------------------------------------------- */ /* * Any element the page author tags with data-no-translate is left alone by * the JS. No visual treatment is applied — this rule exists only so the * attribute reads as "intentional" in browser devtools. */ [data-no-translate] { /* no-op; documented as a translator opt-out */ } /* Visually hidden helper — used by the switcher's screen-reader label. */ .ldf-ojibwe-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- * Optional swap transition * * When the JS swaps text nodes in place there's no layout shift to mask, but * if a theme wants a gentle fade it can add `ldf-ojibwe-fade` to and * the descendant text containers will fade between swaps. * -------------------------------------------------------------------------- */ body.ldf-ojibwe-fade [data-elementor-type] *, body.ldf-ojibwe-fade article, body.ldf-ojibwe-fade .entry-content { transition: opacity 120ms ease; } body.ldf-ojibwe-fade.ldf-ojibwe-swapping [data-elementor-type] *, body.ldf-ojibwe-fade.ldf-ojibwe-swapping article, body.ldf-ojibwe-fade.ldf-ojibwe-swapping .entry-content { opacity: 0.85; } /* ----------------------------------------------------------------------------- * Print * * Hide the toggle when printing — the printed page is whichever language was * active at the time of print, which is what the user wants. * -------------------------------------------------------------------------- */ @media print { .ldf-ojibwe-switcher { display: none !important; } } /* ----------------------------------------------------------------------------- * Admin preview mode — click-to-edit affordances * * When the page is rendered inside the wp-admin Translation Editor iframe, * translator.js sets [data-ldf-preview="1"] on . Every translatable * run carries data-ldf-hash; we make those runs visibly clickable so staff * know what they can edit. None of this affects the live, non-admin site. * -------------------------------------------------------------------------- */ html[data-ldf-preview] [data-ldf-hash] { cursor: pointer; transition: outline-color 80ms ease, background-color 80ms ease; outline: 1px dashed transparent; outline-offset: 2px; } html[data-ldf-preview] [data-ldf-hash]:hover { outline-color: rgba( 34, 113, 177, 0.6 ); /* WP admin blue */ background-color: rgba( 34, 113, 177, 0.08 ); } /* Status-tinted hover so staff get a quick read on which strings still * need work without opening the sidebar. */ html[data-ldf-preview] [data-ldf-hash][data-ldf-status="missing"]:hover { outline-color: rgba( 214, 54, 56, 0.7 ); /* red */ background-color: rgba( 214, 54, 56, 0.08 ); } html[data-ldf-preview] [data-ldf-hash][data-ldf-status="unverified"]:hover { outline-color: rgba( 219, 166, 23, 0.8 ); /* amber */ background-color: rgba( 219, 166, 23, 0.10 ); } html[data-ldf-preview] [data-ldf-hash][data-ldf-status="verified"]:hover { outline-color: rgba( 0, 163, 42, 0.6 ); /* green */ background-color: rgba( 0, 163, 42, 0.08 ); } /* Disable link underlines / pointer changes from theme styles overriding * ours — we want the run to look uniformly clickable, not navigational. */ html[data-ldf-preview] a[data-ldf-hash], html[data-ldf-preview] [data-ldf-hash] a { cursor: pointer; }