/** * SKP Unified Language Switcher — Production CSS * Extracted from approved flag-dropdown.html prototype * * v1.1 — Portal pattern: on mobile the dropdown is moved to via JS * to escape backdrop-filter containing block on Kadence sticky header. * Portaled dropdown gets .skp-lang__dropdown--portaled class. */ /* === Flags — rectangular images via flagcdn.com === */ .skp-flag { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); } .skp-flag--lg { width: 22px; height: 16px; border-radius: 2px; } /* === Language Switcher Container === */ .skp-lang { position: relative; display: inline-flex; z-index: 100; } /* === Toggle Button === */ .skp-lang__toggle { display: flex; align-items: center; gap: 7px; padding: 6px 12px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #3A3A3A; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); user-select: none; font-family: inherit; line-height: 1.4; } .skp-lang__toggle:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .skp-lang__toggle:focus-visible { outline: 2px solid #2B6CB0; outline-offset: 2px; } .skp-lang__code { font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.3px; } .skp-lang__chevron { width: 12px; height: 12px; transition: transform 0.2s; opacity: 0.5; } .skp-lang[data-open="true"] .skp-lang__chevron { transform: rotate(180deg); } /* === Dropdown (desktop: absolute inside .skp-lang) === */ .skp-lang__dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; max-height: 440px; overflow-y: auto; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); padding: 4px 0; display: none; overscroll-behavior: contain; } /* Desktop: show when parent has data-open */ .skp-lang[data-open="true"] .skp-lang__dropdown { display: block; animation: skp-in 0.15s ease-out; } /* Portal mode: dropdown is moved to , show via own class */ .skp-lang__dropdown--portaled { display: block !important; animation: skp-sheet-in 0.3s ease-out; } @keyframes skp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes skp-sheet-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* === Option Row — high specificity beats Kadence header widget link styles === */ .header-html .skp-lang__option, .skp-lang__option.skp-lang__option { display: flex; align-items: center; gap: 10px; padding: 7px 14px; text-decoration: none; color: #3A3A3A; font-size: 14px; cursor: pointer; transition: background 0.12s; border: none; background: none; width: 100%; text-align: left; } .header-html .skp-lang__option:hover, .header-html .skp-lang__option:focus, .header-html .skp-lang__option:visited, .skp-lang__option.skp-lang__option:hover, .skp-lang__option.skp-lang__option:focus, .skp-lang__option.skp-lang__option:visited { background: #F7F7F5; text-decoration: none; color: #3A3A3A; } .skp-lang__option--active { font-weight: 600; background: #FAFAF8; } .skp-lang__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skp-lang__check { color: #2B6CB0; font-weight: 700; font-size: 15px; flex-shrink: 0; } /* === Divider: ——— 37 More Languages ——— === */ .skp-lang__divider { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 2px 0; } .skp-lang__divider::before, .skp-lang__divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.10); } .skp-lang__divider-label { font-size: 10px; font-weight: 600; color: #A0AEC0; letter-spacing: 0.3px; white-space: nowrap; } /* === Scrollbar — visible, warm === */ .skp-lang__dropdown::-webkit-scrollbar { width: 7px; } .skp-lang__dropdown::-webkit-scrollbar-track { background: #F0F0EC; border-radius: 4px; margin: 6px 0; } .skp-lang__dropdown::-webkit-scrollbar-thumb { background: #B0AFA8; border-radius: 4px; min-height: 40px; } .skp-lang__dropdown::-webkit-scrollbar-thumb:hover { background: #8A8A80; } /* === Backdrop overlay (mobile bottom-sheet) === */ .skp-lang__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 9998; transition: background 0.3s ease; -webkit-tap-highlight-color: transparent; } .skp-lang__backdrop--active { background: rgba(0,0,0,0.35); } /* === Body scroll lock when sheet is open === */ body.skp-lang-sheet-open { overflow: hidden !important; } /* === Mobile: bottom sheet (portaled to ) === */ @media (max-width: 640px) { /* Portaled dropdown: fixed bottom sheet on */ .skp-lang__dropdown--portaled { position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-height: 65vh; border-radius: 14px 14px 0 0; min-width: unset; border-bottom: none; z-index: 9999; box-shadow: 0 -4px 24px rgba(0,0,0,0.15); } /* Handle bar at top of sheet */ .skp-lang__dropdown--portaled::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 2px; margin: 10px auto 6px; } .skp-lang__dropdown--portaled .skp-lang__option { padding: 12px 18px; } /* Non-portaled dropdown (desktop-style fallback, should not show on mobile) */ .skp-lang__dropdown:not(.skp-lang__dropdown--portaled) { /* Keep original positioning if JS fails */ position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-height: 65vh; border-radius: 14px 14px 0 0; min-width: unset; border-bottom: none; } }