/** * Fabrixa — Language Switcher Styling * Targets TranslatePress switcher in WP menu (item class: .fabrixa-lang-switcher) * * Design: * Desktop: Code only (EN ⌄, NL ⌄) in coral pill, navy dropdown with flags + native names * Mobile: Flag + native name in menu, coral hover state, opens to flat list * * Brand tokens: #18202D navy, #E95121 coral, #F0F0F0 cream, #9AA4B2 slate */ /* ============================================ 1. DESKTOP (>1024px) ============================================ */ @media (min-width: 1025px) { /* Container */ .fabrixa-lang-switcher { position: relative; margin-left: 8px !important; } /* Top-level link (the "EN ⌄" pill) */ .fabrixa-lang-switcher > a { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; background: rgba(233, 81, 33, 0.12) !important; /* coral 12% */ border: 1px solid rgba(233, 81, 33, 0.35) !important; border-radius: 999px !important; color: #E95121 !important; font-family: 'Poppins', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; transition: all 0.2s ease !important; } .fabrixa-lang-switcher > a:hover { background: #E95121 !important; color: #FFFFFF !important; border-color: #E95121 !important; } /* Hide flag image on desktop top-level */ .fabrixa-lang-switcher > a img, .fabrixa-lang-switcher > a .trp-flag-image { display: none !important; } /* Replace full language name with code via attribute trick. TranslatePress outputs lang in href like /nl/, /fr/ — we use ::after with content. */ /* Hide the original text label on top-level link */ .fabrixa-lang-switcher > a { font-size: 0 !important; /* hide all child text */ } .fabrixa-lang-switcher > a::after { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } /* Default: EN (matches en-US, en-GB, en, etc.) */ .fabrixa-lang-switcher > a::after { content: "EN \25BE"; } /* Per-language code via data-fbx-lang attribute (set via JS in functions.php). Bulletproof — reads URL path directly instead of trusting WP/TP attributes. */ html[data-fbx-lang="nl"] .fabrixa-lang-switcher > a::after { content: "NL \25BE"; } html[data-fbx-lang="fr"] .fabrixa-lang-switcher > a::after { content: "FR \25BE"; } html[data-fbx-lang="de"] .fabrixa-lang-switcher > a::after { content: "DE \25BE"; } html[data-fbx-lang="it"] .fabrixa-lang-switcher > a::after { content: "IT \25BE"; } html[data-fbx-lang="pt"] .fabrixa-lang-switcher > a::after { content: "PT \25BE"; } html[data-fbx-lang="es"] .fabrixa-lang-switcher > a::after { content: "ES \25BE"; } html[data-fbx-lang="uk"] .fabrixa-lang-switcher > a::after { content: "UK \25BE"; } /* Dropdown panel * IMPORTANT: top is 100% (no gap) and the visual 8px offset comes from * padding-top inside the menu. Without this, the cursor can leave the * trigger and fall into a no-element gap before reaching the menu, * causing :hover to flip off and the menu to close prematurely. */ .fabrixa-lang-switcher > ul.sub-menu { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; min-width: 200px !important; padding: 16px 0 8px !important; /* 8px visual offset baked into top padding + 8px existing list padding */ margin-top: 0 !important; background: #18202D !important; border: 1px solid rgba(154, 164, 178, 0.2) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important; z-index: 9999 !important; } /* Invisible bridge: a transparent strip at the top of the menu's bounding box * that prevents the cursor from "falling out" while transitioning from trigger * to menu. The padding above already does this, but this ::before is a safety * net for browsers/zoom levels where padding alone isn't enough. */ .fabrixa-lang-switcher > ul.sub-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .fabrixa-lang-switcher:hover > ul.sub-menu, .fabrixa-lang-switcher.open > ul.sub-menu, .fabrixa-lang-switcher:focus-within > ul.sub-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Dropdown items */ .fabrixa-lang-switcher > ul.sub-menu > li { list-style: none !important; margin: 0 !important; } .fabrixa-lang-switcher > ul.sub-menu > li > a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 16px !important; color: #F0F0F0 !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; transition: background 0.15s ease, color 0.15s ease !important; } .fabrixa-lang-switcher > ul.sub-menu > li > a:hover { background: rgba(233, 81, 33, 0.15) !important; color: #E95121 !important; } /* Highlight active language in dropdown */ .fabrixa-lang-switcher > ul.sub-menu > li.current-language > a, .fabrixa-lang-switcher > ul.sub-menu > li.trp-current-language > a { background: rgba(233, 81, 33, 0.08) !important; color: #E95121 !important; font-weight: 600 !important; } /* Flag images in dropdown */ .fabrixa-lang-switcher > ul.sub-menu img, .fabrixa-lang-switcher > ul.sub-menu .trp-flag-image { display: inline-block !important; width: 18px !important; height: auto !important; border-radius: 2px !important; flex-shrink: 0 !important; } } /* ============================================ 2. MOBILE (≤1024px) ============================================ */ @media (max-width: 1024px) { /* Push switcher to the bottom of the mobile menu */ .pxl-menu__primary > .fabrixa-lang-switcher, .pxl-mobile-menu > .fabrixa-lang-switcher { order: 999 !important; margin-top: 24px !important; padding-top: 24px !important; border-top: 1px solid rgba(154, 164, 178, 0.15) !important; } /* Top-level link (current language with flag) */ .fabrixa-lang-switcher > a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 20px !important; color: #F0F0F0 !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; text-transform: none !important; } .fabrixa-lang-switcher > a:active { background: rgba(233, 81, 33, 0.08) !important; } /* Show flag on mobile */ .fabrixa-lang-switcher > a img, .fabrixa-lang-switcher > a .trp-flag-image { display: inline-block !important; width: 22px !important; height: auto !important; border-radius: 2px !important; } /* Sub-menu (dropdown) */ .fabrixa-lang-switcher > ul.sub-menu { background: rgba(233, 81, 33, 0.04) !important; padding: 8px 0 !important; margin-top: 4px !important; border-radius: 8px !important; } .fabrixa-lang-switcher > ul.sub-menu > li > a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 32px !important; color: #F0F0F0 !important; font-size: 14px !important; font-weight: 400 !important; } .fabrixa-lang-switcher > ul.sub-menu > li > a:active { background: rgba(233, 81, 33, 0.12) !important; color: #E95121 !important; } .fabrixa-lang-switcher > ul.sub-menu img, .fabrixa-lang-switcher > ul.sub-menu .trp-flag-image { display: inline-block !important; width: 20px !important; height: auto !important; border-radius: 2px !important; } /* Active language highlight */ .fabrixa-lang-switcher > ul.sub-menu > li.current-language > a, .fabrixa-lang-switcher > ul.sub-menu > li.trp-current-language > a { color: #E95121 !important; font-weight: 600 !important; } } /* ============================================ 3. UTILITIES — Hide BrightHub's native menu elements inside the switcher ============================================ BrightHub renders with two children: and . We replace both with our own ::after content. */ .fabrixa-lang-switcher > a > .pxl-menu__text, .fabrixa-lang-switcher > a > i, .fabrixa-lang-switcher > a > i.caseicon-angle-arrow-down, .fabrixa-lang-switcher > a > [class*="caseicon"], .fabrixa-lang-switcher > a > [class*="pxl-icon"] { display: none !important; } /* Also hide any chevron that's a sibling of (defensive) */ .fabrixa-lang-switcher > .pxl-anchor-divider, .fabrixa-lang-switcher > .pxl-icon-line, .fabrixa-lang-switcher > i, .fabrixa-lang-switcher .menu-item-has-children > a::after { display: none !important; } /* Hide TranslatePress floating bottom-right switcher (we use menu version only) */ .trp-language-switcher.trp-floater { display: none !important; } /* ============================================ 4. PILL HEIGHT FIX (desktop only) ============================================ The
  • in BrightHub's menu is tall (full nav height). The inherits that height and the coral pill background stretches into a tall oval. Force pill to natural height. */ @media (min-width: 1025px) { .fabrixa-lang-switcher { display: inline-flex !important; align-items: center !important; align-self: center !important; height: auto !important; } .fabrixa-lang-switcher > a { height: auto !important; line-height: 1 !important; align-self: center !important; } }