/* ============================================ CUSTOM HELP SCOUT DOCS CSS Template CSS for TRMS Help Center ============================================ */ /* ============================================ CSS VARIABLES - Design Tokens ============================================ */ :root { /* Base palette tokens (from Mode 1.tokens.json) */ /* berry */ --berry-100: #FCE0DE; --berry-200: #FACECC; --berry-300: #F69D98; --berry-400: #F1706A; --berry-50: #F7EEED; --berry-500: #ED453C; --berry-600: #E01F15; --berry-700: #B11910; --berry-800: #83120C; --berry-900: #540C08; /* flamingo */ --flamingo-100: #FDEDF3; --flamingo-200: #F7BFD6; --flamingo-300: #F292B8; --flamingo-400: #ED649B; --flamingo-500: #E7367D; --flamingo-600: #D21963; --flamingo-700: #A4144E; --flamingo-800: #760E38; --flamingo-900: #490923; /* lilac */ --lilac-100: #EEE0FF; --lilac-200: #DFC7FF; --lilac-300: #C294FF; --lilac-400: #A561FF; --lilac-500: #892EFF; --lilac-600: #6C00FA; --lilac-700: #5800C7; --lilac-800: #400094; --lilac-900: #2A0061; /* lime */ --lime-100: #F8FCF2; --lime-200: #E2F3C8; --lime-300: #CCEA9E; --lime-400: #B6E174; --lime-50: #FBFEF8; --lime-500: #9ED84A; --lime-600: #7AB22F; --lime-700: #5C8623; --lime-800: #3E5A17; --lime-900: #27380E; /* mint */ --mint-100: #E6F9F7; --mint-200: #C3F0EA; --mint-300: #8DE0D6; --mint-400: #57D0C2; --mint-50: #F1FCFB; --mint-500: #38D6C9; --mint-600: #1FB1A6; --mint-700: #17857D; --mint-800: #0F5B55; --mint-900: #083632; /* noir */ --noir: #000000; /* november */ --november-100: #D0D3D5; --november-200: #B1B6BB; --november-25: #F3F4F5; --november-300: #A1A7AB; --november-400: #8F969B; --november-50: #E8E9EA; --november-500: #737A82; --november-600: #5B646D; --november-700: #444E58; --november-800: #2C3843; --november-900: #15222E; /* rainforest */ --rainforest-100: #BEF4CD; --rainforest-200: #91EBA8; --rainforest-300: #65E284; --rainforest-400: #38D960; --rainforest-50: #E9FBED; --rainforest-500: #22C550; --rainforest-600: #1A983E; --rainforest-700: #136C2C; --rainforest-800: #0B411A; --rainforest-900: #06210D; /* signatur */ --signatur-100: #C5E9F8; --signatur-200: #89D2EF; --signatur-300: #58C0E7; --signatur-400: #3CB3E0; --signatur-50: #ECF7FD; --signatur-500: #3CB3E0; --signatur-600: #1A9ED5; --signatur-700: #1780AF; --signatur-800: #0F5B7B; --signatur-900: #083C52; /* topgolf */ --topgolf-100: #D0E6FB; --topgolf-200: #A0CDF7; --topgolf-300: #71B4F3; --topgolf-400: #419BEF; --topgolf-50: #E8F3FE; --topgolf-500: #137FEC; --topgolf-600: #0F65BC; --topgolf-700: #0B4C8C; --topgolf-800: #07325D; --topgolf-900: #04192D; /* traffic */ --traffic-100: #FCF0CF; --traffic-200: #F9E1A0; --traffic-300: #F5CB58; --traffic-400: #F5B657; --traffic-50: #FEF8EB; --traffic-500: #F4B93B; --traffic-600: #C1630B; --traffic-700: #904A08; --traffic-800: #603105; --traffic-900: #301803; /* white */ --white: #FFFFFF; /* Semantic tokens (from Colors.json) */ /* General */ --general-brand-darker: var(--signatur-800); --general-brand-primary: var(--signatur-600); --general-brand-secondary: var(--signatur-50); --general-info: var(--topgolf-700); --general-info-darker: var(--topgolf-800); --general-negative: var(--berry-600); --general-negative-darker: var(--berry-700); --general-positive: var(--rainforest-600); --general-positive-darker: var(--rainforest-800); --general-warning: var(--traffic-500); --general-warning-darker: var(--traffic-600); /* Text */ --text-text-action: var(--signatur-600); --text-text-info: var(--topgolf-700); --text-text-inactive: var(--november-300); --text-text-mint: var(--mint-800); --text-text-negative: var(--berry-700); --text-text-positive: var(--rainforest-700); --text-text-primary: var(--november-900); --text-text-primary-reversed: var(--white); --text-text-secondary: var(--november-600); --text-text-secondary-reversed: var(--november-100); --text-text-tertiary: var(--november-500); --text-text-warning: var(--traffic-600); /* Background */ --background-bg-accent: var(--november-100); --background-bg-primary: var(--white); --background-bg-primary-reversed: var(--november-900); --background-bg-secondary: var(--november-25); --background-bg-secondary-reversed: var(--november-800); --background-bg-surface: #F9FDFF; --background-bg-tertiary: var(--november-50); --background-bg-tertiary-reversed: var(--november-700); /* Decorative */ --decorative-deco-brand: var(--signatur-100); --decorative-deco-flamingo: var(--flamingo-100); --decorative-deco-info: var(--topgolf-100); --decorative-deco-lilac: var(--lilac-100); --decorative-deco-lime: var(--lime-100); --decorative-deco-mint: var(--mint-100); --decorative-deco-negative: var(--berry-100); --decorative-deco-neutral: var(--november-100); --decorative-deco-positive: var(--rainforest-100); --decorative-deco-warning: var(--traffic-100); /* Accent */ --accent-accent-brand: var(--signatur-500); --accent-accent-flamingo: var(--flamingo-500); --accent-accent-info: var(--topgolf-500); --accent-accent-lilac: var(--lilac-500); --accent-accent-lime: var(--lime-500); --accent-accent-mint: var(--mint-500); --accent-accent-negative: var(--berry-500); --accent-accent-positive: var(--rainforest-500); --accent-accent-warning: var(--traffic-400); --accent-accent-warning-darker: var(--traffic-600); /* Border */ --border-border-active: var(--signatur-500); --border-border-highlight: var(--november-900); --border-border-info: var(--topgolf-700); --border-border-inactive: var(--november-300); --border-border-negative: var(--berry-500); --border-border-positive: var(--rainforest-500); --border-border-primary: var(--november-50); --border-border-primary-reversed: var(--november-600); --border-border-secondary: var(--november-25); --border-border-tertiary: var(--white); --border-border-transparent: rgba(115, 122, 130, 0.5); --border-border-warning: var(--traffic-500); /* Hover */ --hover-hover-action: rgba(60, 179, 224, 0.1); --hover-hover-info: rgba(11, 76, 140, 0.1); --hover-hover-negative: rgba(224, 31, 21, 0.1); --hover-hover-positive: rgba(34, 197, 80, 0.1); --hover-hover-primary: rgba(21, 34, 46, 0.1); --hover-hover-warning: rgba(244, 185, 59, 0.1); /* Misc */ --overlay: rgba(0, 0, 0, 0.25); --shadow: rgba(21, 34, 46, 0.1); } /* ============================================ FONT FACE ============================================ */ @font-face { font-family: ShieldSans Regular; font-stretch: normal; font-style: normal; font-weight: 400; src: url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.eot); src: url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.eot) format("embedded-opentype"), url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.woff2) format("woff2"), url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.woff) format("woff"); } @font-face { font-family: ShieldSans Bold; font-stretch: normal; font-style: normal; font-weight: 700; src: url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.eot); src: url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.eot) format("embedded-opentype"), url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.woff2) format("woff2"), url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.woff) format("woff"); } @font-face { font-family: Topgolf Condensed; font-stretch: normal; font-style: normal; font-weight: 400; src: url(https://s3.topgolf.com/fonts/brand/TopgolfCondensed-700.woff2) format("woff2"), url(https://s3.topgolf.com/fonts/brand/TopgolfCondensed-700.woff) format("woff"); } /* ============================================ CUSTOM STYLES ============================================ */ body { background-color: var(--background-bg-surface); font-family: "ShieldSans Regular", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding-left: 0 !important; padding-right: 0 !important; color: var(--text-text-primary) } /* ============================================ HOME PAGE ============================================ */ /* Home Page Title */ #docsSearch h1 { font-size: 40px; font-family: "Topgolf Condensed"; font-weight: 300; text-align: center; margin-top: .4em; color: var(--text-text-primary-reversed); padding: 10px; } /* Home Page Search Bar Background */ #docsSearch { background-color: var(--background-bg-primary-reversed); margin-bottom: 3em; padding: 5em 0; } /* Home Page Search Button */ #searchBar button { color: #fff; text-shadow: 0 0px 0px rgba(255,255,255,.0); background: var(--general-brand-primary); border-radius: 0 8px 8px 0; font-size: 18px; font-family: "ShieldSans Bold"; font-weight: 700; padding: 0 1em; height: 50px; position: absolute; width: 50px; display: flex; align-items: center; justify-content: center; } #searchBar button:hover { background: var(--general-brand-darker); text-shadow: 0 0px 0px rgba(255,255,255,.0); } /* Hide the text span, show only icon */ #searchBar button span { display: none; } /* Show and style the search icon */ #searchBar button .icon-search { display: flex !important; align-items: center; justify-content: center; color: var(--text-text-primary-reversed); font-size: 18px; } #searchBar .search-query { border-radius: 8px; font-size: 18px; font-family: inherit; line-height: 22px; width: 100%; height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 60px; padding-left: 14px; margin-bottom: 0; font-weight: 100; letter-spacing: 0px; display: inline-block; color: var(--text-text-secondary); background-color: #fff; border: 1px solid var(--border-border-primary); vertical-align: middle; } #serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a { font-weight: 500; letter-spacing: .25px; color: var(--text-text-action); margin-top: 15px; text-decoration: none; } #serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a { font-weight: 500; letter-spacing: .25px; color: var(--text-text-action); margin-top: 8px; } strong, b { font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Collections */ .icon-article-doc { display: none; } .most-pop-articles .popArticles a, .threeCol .popArticles a, .twoCol .popArticles a { padding: 0; list-style-type: none; } .most-pop-articles .popArticles li, .threeCol .popArticles li, .twoCol .popArticles li { margin-bottom: 1em; line-height: 18px; padding: 0; list-style-type: none; } .threeCol, .twoCol { text-align: left; } .threeCol p, .twoCol p { font-size: 15px; line-height: 1.5em; margin-bottom: 0; margin: 0 0 0px; text-align: left; color: var(--text-text-secondary); } .threeCol h2, .twoCol h2 { font-size: 24px; text-align: left; margin-top: 0px; margin-bottom: 8px; font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 18px; color: inherit; padding-left: 1.75em; } .threeCol .collection, .twoCol .collection { background: #fff; border: 1px solid var(--border-border-primary); border-radius: 8px; margin-bottom: 3em; display: inline-block; vertical-align: top; min-height: 200px; } .twoCol .collection .collection-body, .twoCol .collection .collection-head { padding: 2em; } .threeCol .collection .collection-head, .twoCol .collection .collection-head { margin-bottom: 0em; } .collection-head { min-height: 4em; background-repeat: no-repeat; background-size: 32px 32px; background-position-x: 1.5em; background-position-y: 1.5em; } /*================= IMAGES FOR COLLECTIONS ===================*/ /*FAQ's id is "collection-4"*/ #collection-4 .collection-head { background-image: url(https://i.ibb.co/Zp14HgPH/faq-icon.png); } /*Other resources's id is "collection-39"*/ #collection-39 .collection-head { background-image: url(https://i.ibb.co/ycwL9bpZ/other-resources-icon.png); } /*User Manual's id is "collection-1"*/ #collection-1 .collection-head { background-image: url(https://i.ibb.co/nq1HJXJm/user-manual-icon.png); } /*What's New's id is "collection-7"*/ #collection-7 .collection-head { background-image: url(https://i.ibb.co/QjK6J7mz/whats-new-icon.png); } /*Troubleshooting's id is "collection-160"*/ #collection-160 .collection-head { background-image: url(https://i.ibb.co/20XRyHH8/rangeoperations-icon.png); } /*================= Side navigation when viewing article/category ===================*/ #sidebar h3 { text-transform: uppercase; font-size: 14px; color: var(--text-text-primary); margin-bottom: 4px; } #sidebar .nav-list a { display: inline-block; color: var(--text-text-secondary); font-size: 1.5em; line-height: 1.75em; } /*================= ARTICLE STYLES ===================*/ /* Headings in articles */ #fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 { margin-bottom: .65em; color: var(--text-text-primary); margin: 9px 0; font-family: "ShieldSans Bold"; line-height: 18px; } #fullArticle .title { font-size: 36px; line-height: 40px; } #fullArticle h1 { font-size: 32px; line-height: 40px; } #fullArticle h2 { font-size: 24px; line-height: 32px; } #fullArticle h3 { font-size: 18px; line-height: 24px; } #fullArticle h4 { font-size: 18px; line-height: 25px; } #fullArticle img { border: none; } #fullArticle blockquote,#fullArticle dd,#fullArticle div,#fullArticle li,#fullArticle ol,#fullArticle p,#fullArticle table,#fullArticle ul { font-size: 16px; color: var(--text-text-primary); margin-bottom: 0.5em; } #fullArticle .callout p,#fullArticle .callout-blue p,#fullArticle .callout-green p,#fullArticle .callout-red p,#fullArticle .callout-yellow p,#fullArticle .private-note p { font-size: 16px; color: var(--text-text-primary) } /* Callouts */ #fullArticle .callout, #fullArticle .callout-blue, #fullArticle .callout-green, #fullArticle .callout-red, #fullArticle .callout-yellow { border: 1px solid; border-radius: 8px; color: var(--text-text-primary); font-size: 14px; margin-bottom: 2em; padding: 16px 25px 16px 20px; } #fullArticle .callout-yellow { background: var(--decorative-deco-warning); border-color: var(--border-border-warning); } #fullArticle .callout-blue { background: var(--decorative-deco-info); border-color: var(--border-border-info); } #fullArticle .callout-green { background: var(--decorative-deco-positive); border-color: var(--border-border-positive); } #fullArticle .callout-red { background: var(--decorative-deco-negative); border-color: var(--border-border-negative); } #fullArticle .callout { background: #f1f1f1; border-color: var(--border-border-inactive); } /* ============================================ FIX ARTICLE LINK ALIGNMENT ON WRAP ============================================ */ /* Ensure article links don't indent when text wraps to new line */ .most-pop-articles .popArticles a, .threeCol .popArticles a, .twoCol .popArticles a { display: flex; align-items: flex-start; } .most-pop-articles .popArticles a i, .threeCol .popArticles a i, .twoCol .popArticles a i { flex-shrink: 0; margin-right: 6px; } .most-pop-articles .popArticles a span, .threeCol .popArticles a span, .twoCol .popArticles a span { flex: 1; } /* ============================================ FIX COLLECTION CENTERING ============================================ */ /* Remove extra padding/margin that causes left alignment */ .twoCol.row-fluid { margin-left: 0; text-align: center; } .twoCol .collection { margin-left: 12px; margin-right: 12px; } /* ============================================ RESPONSIVE - MOBILE LAYOUT ============================================ */ @media (max-width: 768px) { /* Prevent horizontal overflow on mobile */ html, body { overflow-x: hidden; max-width: 100%; } .contentWrapper { padding-left: 4em; padding-right: 4em; } #sidebar { padding-left: 2em; padding-right: 2em; } .twoCol .collection, .threeCol .collection { margin-left: 0; } } body { padding-left: 0; padding-right: 0; } /* Reset row-fluid margin to prevent horizontal overflow */ .twoCol.row-fluid { margin-left: 0 !important; margin-right: 0 !important; } /* Make collections stack vertically and full width */ .twoCol .collection, .threeCol .collection { margin-bottom: 2em; box-sizing: border-box; padding: 0 !important; } /* Ensure content area doesn't overflow #contentArea { overflow-x: hidden; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } */ /* Reduce padding on mobile for better space utilization */ .twoCol .collection .collection-body, .threeCol .collection .collection-body { padding: 1.5em !important; } /* Reduce collection head padding on mobile */ .twoCol .collection .collection-head, .threeCol .collection .collection-head { padding: 1.5em !important; } /* Override base.css first-child special case - ensure all collections look the same */ .threeCol .collection:first-child, .twoCol .collection:first-child { padding: 0 !important; padding-top: 0 !important; } .threeCol .collection:first-child .collection-head, .twoCol .collection:first-child .collection-head { padding: 1.5em !important; padding-top: 1.5em !important; } /* Maintain consistent title spacing with icon */ .threeCol h2, .twoCol h2 { padding-left: 1.75em; margin-top: 0; margin-bottom: 8px; } /* Adjust icon positioning for smaller padding */ #collection-113 .collection-head, #collection-104 .collection-head, #collection-107 .collection-head, #collection-110 .collection-head { background-position-x: 1.5em; background-position-y: 1.5em; } /* ============================================ MOBILE SEARCH BUTTON ICON ============================================ */ @media (max-width: 480px) { /* Only apply these styles to the home page (index) with #docsSearch */ #docsSearch { padding: 2em 20px 1.5em !important; } #searchBar { width: 80%; } /* Adjust searchBar on home page to use available width better */ #docsSearch #searchBar { padding: 0; margin: 0 auto; max-width: 100%; position: relative; } /* Make search button more square and properly aligned - HOME PAGE ONLY */ #docsSearch #searchBar button { display: flex !important; align-items: center; justify-content: center; width: 50px !important; height: 50px !important; padding: 0 !important; border-radius: 0 8px 8px 0 !important; background: var(--general-brand-primary) !important; position: absolute !important; top: 0 !important; right: 0 !important; border: 1px solid var(--general-brand-primary) !important; } #docsSearch #searchBar button:hover { background: var(--general-brand-darker) !important; border-color: var(--general-brand-darker) !important; } /* Hide the text span completely - HOME PAGE ONLY */ #docsSearch #searchBar button span { display: none !important; } /* Fix search icon color and centering on mobile - HOME PAGE ONLY */ #docsSearch #searchBar button .icon-search { color: var(--text-text-primary-reversed); display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; position: relative; left: 0; right: 0; margin: 0 auto; } #docsSearch #searchBar button .icon-search:before { display: block; line-height: 1; text-align: center; } /* Adjust search input to work with square button - HOME PAGE ONLY */ #docsSearch #searchBar .search-query { margin-right: 0 !important; padding-right: 60px !important; width: 100% !important; box-sizing: border-box; } /* Better spacing for search title - HOME PAGE ONLY */ #docsSearch h1 { padding: 0 0 0.5em 0 !important; margin-bottom: 0.5em; } /* Sidebar search button (article/category pages) - keep icon visible on all devices */ #sidebar #searchBar button .icon-search { color: var(--text-text-primary-reversed); } } /* ════════════════════════════════════════════════════════════════ NAVBAR + LANGUAGE SWITCHER CUSTOMIZATIONS (added June 2026) - Hide collections from top nav; align logo/links/switcher - Mobile menu button placement + open/close animation (animation also needs the "menu toggle" script in Insert Code — it drives the .in class so the CSS max-height transition can run) - Nav link typography (bold, white, 16px, grey hover) - Weglot language switcher styled as a navbar pill (#2C3843) Notes: * "App" (/collection/189-) left VISIBLE. To hide: #mainNav .nav li a[href^="/collection/189-"]{display:none;} * Remove the Weglot test rule #weglot-switcher-1{background:black} ════════════════════════════════════════════════════════════════ */ /* ---------------------------------------------- NAVBAR (proposed additions) ---------------------------------------------- */ /* 1) Hide collections from the top navigation. Targets the collection ID in the URL, so it survives renames (nav li IDs like #trms change when a collection is renamed). Cosmetic only: collections stay reachable via cards/search/URLs. */ #mainNav .nav li a[href^="/collection/1-"], #mainNav .nav li a[href^="/collection/160-"], #mainNav .nav li a[href^="/collection/39-"] { display: none; } /* 2) Navbar layout (all widths): a wrapping flex row. Replaces the base float/absolute layout, which pins the nav to the navbar's bottom edge on desktop and the burger to the top on mobile. Row 1: brand + burger, vertically centered against each other. Row 2 (mobile): the collapsible menu, full width. */ #mainNav .navbar-inner > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* the base clearfix pseudo-elements would become stray flex items */ #mainNav .navbar-inner > .container-fluid::before, #mainNav .navbar-inner > .container-fluid::after { content: none; } #mainNav .brand { float: none; padding-top: 12px; /* base: 31px top / 11px bottom */ padding-bottom: 12px; } @media (min-width: 769px) { #mainNav .nav-collapse.collapse { position: static; } #mainNav .nav { position: static; /* base pins it to bottom: 0 */ margin: 0; } } /* 3) Mobile: burger in normal flow (never moves), menu animates open AND close. NOTE: replaces the earlier "height: auto !important" hardening snippet — remove that if it was added. height: auto cannot be transitioned (which is why opening snapped while closing animated); max-height drives both directions from the class toggle alone. */ @media (max-width: 768px) { .navbar .btn-navbar { position: static; /* base: absolute, top 0 — caused drift and overlap once the menu expanded */ margin: 0 20px 0 auto; /* auto pushes it right; 20px matches the content gutter below the navbar */ -webkit-transform: none; transform: none; } #mainNav .nav-collapse { flex: 1 1 100%; /* menu takes its own full-width row */ } #mainNav .nav-collapse.collapse { height: auto !important; /* take height out of the equation */ max-height: 0; /* closed state */ overflow: hidden; -webkit-transition: max-height .35s ease; transition: max-height .35s ease; } #mainNav .nav-collapse.collapse.in { max-height: 320px; /* > tallest possible menu; tune if items are added — a large gap adds a small delay before the close becomes visible */ } /* Once the menu is fully open, stop clipping so the language switcher's dropdown can overflow the menu box. During the open/close transition overflow stays hidden (rule above) so the animation still clips cleanly; only the settled-open state releases it. */ #mainNav .nav-collapse.collapse.in { overflow: visible; } } /* 4) Nav link typography: bold, white, 16px, light-grey hover. Overrides the branding-settings colors (#63c3ec / #b1e1f5); the #mainNav prefix outweighs those selectors. */ #mainNav .nav li a { color: var(--text-text-primary-reversed); font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: 16px; } #mainNav .nav .active a { color: var(--text-text-primary-reversed); } #mainNav .nav li a:hover, #mainNav .nav li a:focus, #mainNav .nav .active a:hover, #mainNav .nav .active a:focus { color: var(--text-text-secondary-reversed); /* november-100, #D0D3D5 */ } /* ================================================ WEGLOT LANGUAGE SWITCHER IN NAVBAR (pill style) Goes in trms-custom.css. Targets Weglot's real markup: #weglot-switcher-1 (container) > .weglot_switcher > .wgcurrent (the visible box) and .language-list (the open dropdown). NOTE: remove the Weglot dashboard test rule #weglot-switcher-1 { background-color:black }. ================================================ */ /* Take the switcher out of fixed bottom-corner mode so it flows in the nav (overrides Weglot's .wg-default position rules). */ #mainNav #weglot-switcher-1, #mainNav #weglot-switcher-1 .weglot_switcher.default_dropdown.wg-default { position: static !important; bottom: auto !important; right: auto !important; left: auto !important; } /* Neutralize the container background. Weglot's dashboard test rule (#weglot-switcher-1 { background-color: black }) otherwise shows as a black band behind the pill on mobile, where the container goes full width. Remove that rule in Weglot too — this is a safety net. */ #mainNav #weglot-switcher-1, #mainNav #weglot-switcher-1 .weglot-container, #mainNav #weglot-switcher-1 .weglot_switcher.default_dropdown { background: transparent !important; } /* Desktop: put the nav links and the switcher on one centered row. The