/* ============================================ CUSTOM HELP SCOUT DOCS CSS Template CSS for TRMS Help Center ============================================ */ /* ============================================ CSS VARIABLES - Design Tokens ============================================ */ :root { /* Base palette tokens (from Mode 1.tokens.json) — only the shades actually referenced by the semantic tokens below are kept. */ --berry-100: #FCE0DE; --berry-500: #ED453C; --november-50: #E8E9EA; --november-100: #D0D3D5; --november-300: #A1A7AB; --november-600: #5B646D; --november-900: #15222E; --rainforest-100: #BEF4CD; --rainforest-500: #22C550; --signatur-600: #1A9ED5; --signatur-800: #0F5B7B; --topgolf-100: #D0E6FB; --topgolf-700: #0B4C8C; --traffic-100: #FCF0CF; --traffic-500: #F4B93B; --white: #FFFFFF; /* Semantic tokens (from Colors.json) — trimmed to the ones this file actually uses. */ /* General */ --general-brand-darker: var(--signatur-800); --general-brand-primary: var(--signatur-600); /* Text */ --text-text-action: var(--signatur-600); --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); /* Background */ --background-bg-primary-reversed: var(--november-900); --background-bg-surface: #F9FDFF; /* Decorative */ --decorative-deco-info: var(--topgolf-100); --decorative-deco-negative: var(--berry-100); --decorative-deco-positive: var(--rainforest-100); --decorative-deco-warning: var(--traffic-100); /* Border */ --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-warning: var(--traffic-500); } /* ============================================ 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 Inline SVG data URIs - no external host, so nothing to go down. Source art: Icons SVG/icon_*.svg. Regenerate with svg2css.py after re-exporting; don't hand-edit the data URIs below. ===================*/ /* TRMS's id is "collection-1" */ #collection-1 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M12.5 15.83V15H10.83C10.38 15 9.98 14.84 9.66 14.51C9.33 14.18 9.17 13.79 9.17 13.33V6.67H7.5V7.5C7.5 7.96 7.34 8.35 7.01 8.68C6.68 9 6.29 9.17 5.83 9.17H3.33C2.87 9.17 2.48 9 2.16 8.68C1.83 8.35 1.67 7.96 1.67 7.5V4.17C1.67 3.71 1.83 3.32 2.16 2.99C2.48 2.66 2.87 2.5 3.33 2.5H5.83C6.29 2.5 6.68 2.66 7.01 2.99C7.34 3.32 7.5 3.71 7.5 4.17V5H12.5V4.17C12.5 3.71 12.66 3.32 12.99 2.99C13.32 2.66 13.71 2.5 14.17 2.5H16.67C17.12 2.5 17.52 2.66 17.84 2.99C18.17 3.32 18.33 3.71 18.33 4.17V7.5C18.33 7.96 18.17 8.35 17.84 8.68C17.52 9 17.12 9.17 16.67 9.17H14.17C13.71 9.17 13.32 9 12.99 8.68C12.66 8.35 12.5 7.96 12.5 7.5V6.67H10.83V13.33H12.5V12.5C12.5 12.04 12.66 11.65 12.99 11.32C13.32 11 13.71 10.83 14.17 10.83H16.67C17.12 10.83 17.52 11 17.84 11.32C18.17 11.65 18.33 12.04 18.33 12.5V15.83C18.33 16.29 18.17 16.68 17.84 17.01C17.52 17.34 17.12 17.5 16.67 17.5H14.17C13.71 17.5 13.32 17.34 12.99 17.01C12.66 16.68 12.5 16.29 12.5 15.83ZM14.17 7.5H16.67V4.17H14.17V7.5ZM14.17 15.83H16.67V12.5H14.17V15.83ZM3.33 7.5H5.83V4.17H3.33V7.5Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /* What's New's id is "collection-7" */ #collection-7 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M5.92 9.46C6.11 9.07 6.31 8.69 6.52 8.33C6.73 7.97 6.96 7.61 7.21 7.25L6.04 7.02L4.29 8.77L5.92 9.46ZM15.96 3.73C14.99 3.76 13.95 4.04 12.84 4.58C11.74 5.12 10.74 5.85 9.83 6.75C9.25 7.33 8.73 7.96 8.27 8.62C7.81 9.29 7.47 9.92 7.25 10.5L9.63 12.85C10.21 12.63 10.83 12.29 11.5 11.83C12.17 11.38 12.79 10.85 13.38 10.27C14.28 9.37 15 8.37 15.54 7.27C16.08 6.17 16.37 5.14 16.4 4.17C16.4 4.11 16.39 4.06 16.36 4C16.34 3.94 16.31 3.9 16.27 3.85C16.23 3.81 16.18 3.78 16.12 3.76C16.07 3.74 16.01 3.73 15.96 3.73ZM10.9 7.55C10.9 7.09 11.06 6.69 11.38 6.37C11.69 6.06 12.09 5.9 12.56 5.9C13.03 5.9 13.43 6.06 13.75 6.37C14.07 6.69 14.23 7.09 14.23 7.55C14.23 8.02 14.07 8.41 13.75 8.73C13.43 9.05 13.03 9.21 12.56 9.21C12.09 9.21 11.69 9.05 11.38 8.73C11.06 8.41 10.9 8.02 10.9 7.55ZM10.67 14.19L11.35 15.83L13.1 14.08L12.88 12.92C12.51 13.17 12.15 13.39 11.79 13.59C11.43 13.8 11.06 13.99 10.67 14.19ZM17.98 3.06C18.09 4.59 17.84 6.08 17.23 7.53C16.62 8.98 15.65 10.37 14.33 11.69L14.75 13.75C14.81 14.03 14.79 14.3 14.71 14.56C14.62 14.83 14.49 15.06 14.29 15.25L11.67 17.88C11.46 18.08 11.21 18.16 10.92 18.11C10.62 18.07 10.42 17.9 10.31 17.62L9.04 14.65L5.48 11.08L2.5 9.81C2.22 9.7 2.06 9.5 2 9.21C1.94 8.92 2.02 8.67 2.23 8.46L4.85 5.83C5.05 5.64 5.28 5.5 5.55 5.42C5.82 5.33 6.1 5.32 6.38 5.37L8.44 5.79C9.76 4.47 11.14 3.51 12.59 2.9C14.05 2.28 15.53 2.03 17.06 2.15C17.17 2.16 17.28 2.19 17.4 2.24C17.51 2.29 17.6 2.35 17.69 2.44C17.77 2.52 17.84 2.62 17.89 2.73C17.93 2.84 17.97 2.95 17.98 3.06ZM3.27 13.31C3.76 12.83 4.35 12.58 5.05 12.57C5.75 12.57 6.35 12.81 6.83 13.29C7.32 13.78 7.56 14.37 7.55 15.07C7.55 15.77 7.3 16.37 6.81 16.85C6.15 17.52 5.36 17.92 4.45 18.04C3.54 18.17 2.63 18.29 1.71 18.42C1.83 17.5 1.96 16.59 2.08 15.68C2.21 14.77 2.6 13.98 3.27 13.31ZM4.46 14.48C4.22 14.72 4.06 15 3.97 15.33C3.88 15.67 3.81 16.01 3.75 16.35C4.1 16.3 4.44 16.23 4.77 16.15C5.1 16.06 5.39 15.9 5.63 15.67C5.79 15.5 5.88 15.3 5.9 15.06C5.91 14.83 5.83 14.62 5.67 14.46C5.5 14.29 5.3 14.21 5.06 14.22C4.83 14.23 4.63 14.31 4.46 14.48Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /* Other Resources's id is "collection-39" */ #collection-39 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M17.5 10.83H15.83C15.6 10.83 15.4 10.75 15.24 10.59C15.08 10.43 15 10.24 15 10C15 9.76 15.08 9.57 15.24 9.41C15.4 9.25 15.6 9.17 15.83 9.17H17.5C17.74 9.17 17.93 9.25 18.09 9.41C18.25 9.57 18.33 9.76 18.33 10C18.33 10.24 18.25 10.43 18.09 10.59C17.93 10.75 17.74 10.83 17.5 10.83ZM13.83 14C13.97 13.81 14.15 13.69 14.38 13.67C14.6 13.64 14.81 13.69 15 13.83L16.33 14.83C16.53 14.97 16.64 15.15 16.67 15.38C16.69 15.6 16.64 15.81 16.5 16C16.36 16.19 16.18 16.31 15.96 16.33C15.74 16.36 15.53 16.31 15.33 16.17L14 15.17C13.81 15.03 13.69 14.85 13.67 14.62C13.64 14.4 13.69 14.19 13.83 14ZM16.33 5.17L15 6.17C14.81 6.31 14.6 6.36 14.38 6.33C14.15 6.31 13.97 6.19 13.83 6C13.69 5.81 13.64 5.6 13.67 5.38C13.69 5.15 13.81 4.97 14 4.83L15.33 3.83C15.53 3.69 15.74 3.64 15.96 3.67C16.18 3.69 16.36 3.81 16.5 4C16.64 4.19 16.69 4.4 16.67 4.63C16.64 4.85 16.53 5.03 16.33 5.17ZM4.17 12.5H3.33C2.88 12.5 2.48 12.34 2.16 12.01C1.83 11.68 1.67 11.29 1.67 10.83V9.17C1.67 8.71 1.83 8.32 2.16 7.99C2.48 7.66 2.88 7.5 3.33 7.5H6.67L9.56 5.75C9.84 5.58 10.12 5.58 10.41 5.75C10.69 5.92 10.83 6.16 10.83 6.48V13.52C10.83 13.84 10.69 14.08 10.41 14.25C10.12 14.42 9.84 14.42 9.56 14.25L6.67 12.5H5.83V15C5.83 15.24 5.75 15.43 5.59 15.59C5.43 15.75 5.24 15.83 5 15.83C4.76 15.83 4.57 15.75 4.41 15.59C4.25 15.43 4.17 15.24 4.17 15V12.5ZM9.17 12.04V7.96L7.13 9.17H3.33V10.83H7.13L9.17 12.04ZM11.67 12.79V7.21C12.04 7.54 12.34 7.95 12.57 8.43C12.8 8.91 12.92 9.43 12.92 10C12.92 10.57 12.8 11.09 12.57 11.57C12.34 12.05 12.04 12.46 11.67 12.79Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /* Range's id is "collection-160" */ #collection-160 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M13.3 4.94C11.81 3.92 10.7 3.81 9.59 4.16C8.76 4.42 7.92 3.89 7.5 3.67C7.5 3.67 7.5 3.24 7.5 2.82C7.5 2.39 6.67 2.39 6.67 2.82C6.67 3.24 6.67 13.42 6.67 13.85C6.67 14.27 7.5 14.27 7.5 13.85C7.5 13.42 7.5 6.21 7.5 6.21C8.03 6.51 8.29 6.78 8.89 6.73C9.48 6.68 10.06 6.46 10.54 6.09C11.64 5.24 12.9 5.16 13.28 5.07C13.29 5.06 13.31 5.06 13.31 5.05C13.32 5.04 13.33 5.02 13.33 5.01C13.33 5 13.33 4.98 13.33 4.97C13.32 4.96 13.31 4.95 13.3 4.94Z' fill='%230F5B7B'/%3E%3Cpath d='M5.42 11.67C5.65 11.67 5.83 11.85 5.83 12.08V12.92C5.83 13.15 5.65 13.33 5.42 13.33H4.27L3.51 15.83H16.49L15.73 13.33H8.75C8.52 13.33 8.33 13.15 8.33 12.92V12.08C8.33 11.85 8.52 11.67 8.75 11.67H16.04C16.57 11.67 17.04 11.98 17.23 12.46L17.26 12.56L18.28 15.89C18.52 16.69 17.91 17.5 17.06 17.5H2.94C2.09 17.5 1.48 16.69 1.72 15.89L2.74 12.56L2.77 12.46C2.96 11.98 3.43 11.67 3.96 11.67H5.42Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /* App's id is "collection-189" */ #collection-189 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M10.83 15.42C10.83 16.53 9.17 16.53 9.17 15.42C9.17 14.31 10.83 14.31 10.83 15.42Z' fill='%230F5B7B'/%3E%3Cpath d='M12.5 1.67H7.5C6.19 1.67 5 2.77 5 4.12V15.88C5 17.23 6.19 18.33 7.5 18.33H12.5C13.81 18.33 15 17.23 15 15.88V4.13C15 2.77 13.81 1.67 12.5 1.67ZM13.33 15.87C13.33 16.25 12.92 16.67 12.5 16.67H7.5C7.08 16.67 6.67 16.25 6.67 15.83V4.17C6.67 3.75 7.08 3.33 7.5 3.33H12.5C13.03 3.33 13.33 3.75 13.33 4.17V15.87Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /* Games's id is "collection-233" */ #collection-233 .collection-head { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23c5e9f8'/%3E%3Cg transform='translate(5.6 5.6) scale(1.04)'%3E%3Cpath d='M7.92 7.77V12.23C7.92 12.56 8.06 12.81 8.35 12.96C8.65 13.11 8.93 13.1 9.21 12.92L12.67 10.71C12.93 10.56 13.06 10.32 13.06 10C13.06 9.68 12.93 9.44 12.67 9.29L9.21 7.08C8.93 6.9 8.65 6.89 8.35 7.04C8.06 7.19 7.92 7.44 7.92 7.77ZM10 18.33C8.85 18.33 7.76 18.11 6.75 17.68C5.74 17.24 4.85 16.65 4.1 15.9C3.35 15.15 2.76 14.26 2.32 13.25C1.89 12.24 1.67 11.15 1.67 10C1.67 8.85 1.89 7.76 2.32 6.75C2.76 5.74 3.35 4.85 4.1 4.1C4.85 3.35 5.74 2.76 6.75 2.32C7.76 1.89 8.85 1.67 10 1.67C11.15 1.67 12.24 1.89 13.25 2.32C14.26 2.76 15.15 3.35 15.9 4.1C16.65 4.85 17.24 5.74 17.68 6.75C18.11 7.76 18.33 8.85 18.33 10C18.33 11.15 18.11 12.24 17.68 13.25C17.24 14.26 16.65 15.15 15.9 15.9C15.15 16.65 14.26 17.24 13.25 17.68C12.24 18.11 11.15 18.33 10 18.33ZM10 16.67C11.85 16.67 13.42 16.02 14.72 14.72C16.02 13.42 16.67 11.85 16.67 10C16.67 8.15 16.02 6.58 14.72 5.28C13.42 3.98 11.85 3.33 10 3.33C8.15 3.33 6.58 3.98 5.28 5.28C3.98 6.58 3.33 8.15 3.33 10C3.33 11.85 3.98 13.42 5.28 14.72C6.58 16.02 8.15 16.67 10 16.67Z' fill='%230F5B7B'/%3E%3C/g%3E%3C/svg%3E"); } /*================= 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; } /* ============================================ START PAGE: TWO COLUMNS INSTEAD OF THREE ============================================ Help Scout picks the container class itself from the number of collections, and with five it picks .threeCol, whose base.css rule is `width:30.5%; margin:0 1% 2em` - three per row. The class can't be changed from CSS, so widen the cards until only two fit instead. Two cards take 2 x (46% + 1.5% + 1.5%) = 98%, leaving 2% of slack. That slack matters: the cards are inline-block, so the newline between them in the markup renders as a space, and without room for it the second card wraps to its own row. Scoped to >=769px on purpose. base.css stacks the cards full width below that, and this file loads after base.css, so an unscoped rule would beat it on mobile and leave two cramped columns on a phone. */ @media (min-width: 769px) { .threeCol .collection { width: 46%; margin: 0 1.5% 2em; } } /* ============================================ 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; } /* Related articles (shown above the sidebar's search/category list on article pages) sit in a different container than #sidebar and don't inherit its padding, so on mobile they render flush against the left edge instead of lined up with the categories below them. Match #sidebar's inset so both blocks align. */ #main-content .related { 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 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) Notes: * To hide another collection, add its ID to the selector list in section 1 below: #mainNav .nav li a[href^="/collection/-"]{display:none;} * Weglot language switcher styling (the navbar pill design) now lives in Weglot's own dashboard Custom CSS field, not here — see Weglot Dashboard > Settings > Language Switcher > Advanced Options > Custom CSS. The two rules just below are the only Weglot-adjacent pieces left in this file, because they're really general navbar stacking rules (needed so the switcher's dropdown, wherever it's styled, can overflow above the search hero). ════════════════════════════════════════════════════════════════ */ /* ---------------------------------------------- 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-"], /* TRMS */ #mainNav .nav li a[href^="/collection/160-"], /* Range */ #mainNav .nav li a[href^="/collection/39-"], /* Other Resources */ #mainNav .nav li a[href^="/collection/189-"] { /* App */ 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 */ } /* Lift the whole navbar above the search hero (#docsSearch) so the language switcher's open dropdown — which overflows the navbar — stacks over the search field instead of being painted behind it. Kept here (rather than moved into Weglot's Custom CSS) because it's general page stacking, not switcher-specific styling. */ #mainNav { position: relative; z-index: 100; } #docsSearch { position: relative; z-index: 1; }