/** * Watson V3: Language Switcher + Own-Light utility classes * * Language switcher (.watson-lang-switcher): * - Inline nav with language code pills * - Active state via Polylang current-lang class * - Compact, accessible, RTL-safe * * Own-light utilities (.watson-own-light): * - Additional stylesheet-level overrides that can't be done inline * * @since 2.0.0 (Watson V3) */ /* ------------------------------------------------------------------ */ /* Language Switcher */ /* ------------------------------------------------------------------ */ .watson-lang-switcher { display: inline-flex; align-items: center; } .watson-lang-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; align-items: center; } .watson-lang-switcher li { margin: 0; padding: 0; } .watson-lang-switcher a, .watson-lang-switcher span { display: inline-block; padding: 0.2em 0.55em; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: inherit; border: 1px solid currentColor; border-radius: 3px; opacity: 0.65; transition: opacity 0.15s, background-color 0.15s; line-height: 1.4; } .watson-lang-switcher a:hover, .watson-lang-switcher a:focus { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; } /* Polylang adds .current-lang on the active language item */ .watson-lang-switcher .current-lang a, .watson-lang-switcher .current-lang span { opacity: 1; background-color: currentColor; color: var(--wp--preset--color--background, #fff); } /* Separator between languages */ .watson-lang-switcher li + li::before { content: ''; display: inline-block; width: 1px; height: 0.9em; background: currentColor; opacity: 0.25; margin-right: 0.25rem; vertical-align: middle; } /* Remove separator before first item of pill layout */ .watson-lang-switcher--pills li + li::before { display: none; } /* Dark header variant */ .watson-lang-switcher--light a, .watson-lang-switcher--light span { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .watson-lang-switcher--light .current-lang a { background-color: #fff; color: var(--wp--preset--color--primary, #000); } /* RTL support */ [dir="rtl"] .watson-lang-switcher ul { flex-direction: row-reverse; } /* ------------------------------------------------------------------ */ /* Own-Light Mode Utilities */ /* ------------------------------------------------------------------ */ /** * .watson-own-light is applied to in own-light mode. * Use this parent class to scope heavier-than-needed styles. */ /* Hide decorative background shapes/blobs */ .watson-own-light .decorative-blob, .watson-own-light .decorative-wave, .watson-own-light [class*="background-shape"] { display: none !important; } /* Reduce motion for performance */ @media (prefers-reduced-motion: no-preference) { .watson-own-light * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Compact hero — no full-screen height */ .watson-own-light .wp-block-cover.is-layout-full-height, .watson-own-light .wp-block-cover[style*="min-height: 100vh"] { min-height: 50vh !important; } /* Skip lazyload placeholder shimmer in own-light */ .watson-own-light .lazyload-placeholder { background: #f0f0f0 !important; animation: none !important; } /* ------------------------------------------------------------------ */ /* Bilingual — visual helpers */ /* ------------------------------------------------------------------ */ /* Language-specific content visibility (works alongside Polylang) */ [lang="nl"] .hide-nl, [lang="fr"] .hide-fr { display: none !important; } /* Polylang language notice (admin bar / preview bar) */ .pll-notice--watson { background: var(--wp--preset--color--primary, #0073aa); color: #fff; padding: 0.4em 1em; font-size: 0.8rem; text-align: center; }