/*
* Compass Classroom — HelpScout Docs Theme
* Upload via: Manage > Docs > [Site] > Custom Code > Upload Stylesheet
*
* Add this to "Insert Code":
*
*
*
*/
/* ── Variables ──────────────────────────────────────────────────────── */
:root {
--brand-blue: #2B5D9A;
--brand-blue-dark: #204674;
--brand-gold: #F5B000;
--ui-type: #16161D;
--ui-dark-grey: #404C64;
--ui-mid-grey: #A0A9BB;
--ui-light-grey: #F1F4F8;
--ui-background: #FFFFFF;
--font-serif: 'Lora', Georgia, serif;
--font-sans: 'Lato', system-ui, sans-serif;
--shadow-card: 0px 4px 18px 0px rgba(0, 0, 0, 0.08);
--shadow-button: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
--shadow-elevated: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
/* ── Global ─────────────────────────────────────────────────────────── */
body {
font-family: var(--font-sans);
color: var(--ui-type);
background-color: var(--ui-light-grey);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a {
color: var(--brand-blue);
transition: color 0.2s ease;
}
a:hover {
color: var(--brand-blue-dark);
}
/* ── Navigation / Header ────────────────────────────────────────────── */
.navbar .navbar-inner {
background: #FFFFFF;
border-bottom: 1px solid var(--ui-light-grey);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
height: 64px;
}
.navbar .navbar-inner .container-fluid {
height: 64px;
padding: 0 24px;
}
/* Logo */
a.brand>img {
height: 38px;
width: auto;
vertical-align: middle;
}
.navbar .brand {
padding: 0;
display: flex;
align-items: center;
height: 64px;
}
/* Nav links */
.navbar .nav li {
font-family: var(--font-sans);
font-size: 13px;
}
.navbar .nav li a,
.navbar .icon-private-w {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ui-dark-grey);
transition: color 0.2s ease;
}
.navbar .nav li a:hover {
color: var(--brand-blue);
background: transparent;
}
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
color: var(--brand-blue);
background: transparent;
}
/* Desktop: primary nav must not float under the brand (many long labels overlap logo) */
@media screen and (min-width: 761px) {
#mainNav .navbar-inner {
height: auto;
min-height: 64px;
}
#mainNav .navbar-inner .container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 24px;
row-gap: 8px;
height: auto;
min-height: 64px;
}
#mainNav .brand {
float: none;
flex: 0 0 auto;
}
#mainNav .btn-navbar {
float: none;
flex: 0 0 auto;
}
#mainNav .nav-collapse {
float: none;
flex: 1 1 auto;
min-width: 0;
}
#mainNav .nav-collapse .nav {
/* Help Scout launch-*.css uses position:absolute on ul.nav at min-width:769px — that pulls the list out of flex and over the logo */
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100%;
float: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 4px 12px;
margin: 0;
}
#mainNav .nav-collapse .nav > li {
float: none;
}
}
/* ── Search Hero ────────────────────────────────────────────────────── */
#docsSearch {
background-color: var(--ui-dark-grey);
background-image: none;
border-top: none;
border-bottom: none;
padding: 56px 24px 52px;
text-align: center;
margin-bottom: 0;
}
#docsSearch h1 {
font-family: var(--font-serif);
font-size: 42px;
font-weight: 400;
color: #FFFFFF;
letter-spacing: -0.01em;
margin-top: 0;
margin-bottom: 28px;
padding: 0;
text-align: center;
}
/* Search input */
input.search-query {
font-family: var(--font-sans);
font-size: 16px;
color: var(--ui-type);
background: #FFFFFF;
border: 2px solid transparent;
border-radius: 5px 0 0 5px;
box-shadow: none;
padding: 12px 16px;
transition: border-color 0.2s ease;
}
input.search-query:focus {
border-color: var(--brand-gold);
outline: none;
box-shadow: none;
}
input.search-query::placeholder {
color: var(--ui-mid-grey);
}
/* Search button */
#searchBar button {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: var(--brand-blue);
color: #FFFFFF;
border: none;
border-radius: 0 5px 5px 0;
padding: 0 28px;
height: 50px;
position: static;
box-shadow: var(--shadow-button);
transition: background 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
flex-shrink: 0;
}
#searchBar button:hover {
background: var(--brand-blue-dark);
box-shadow: var(--shadow-elevated);
}
/* ── Home Page — Category List ──────────────────────────────────────── */
.category-list {
text-align: left;
background: var(--ui-light-grey);
padding: 40px 0;
}
/* Individual category cards */
.category-list .category {
background: #FFFFFF;
border-radius: 16px;
box-shadow: var(--shadow-card);
border: none;
padding: 28px 24px;
transition: box-shadow 0.2s ease;
min-height: auto;
}
/* Category card title (h3) */
.category-list h3,
.category-list .category h3 {
font-family: var(--font-serif) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--ui-type) !important;
line-height: 1.3 !important;
margin-bottom: 6px !important;
}
.category-list h3 a,
.category-list .category h3 a {
font-family: var(--font-serif) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--ui-type) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.category-list h3 a:hover,
.category-list .category h3 a:hover {
color: var(--brand-blue) !important;
}
/* Category description */
.category-list .category p {
font-family: var(--font-sans);
font-size: 16px;
color: var(--ui-dark-grey);
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
margin-bottom: 14px;
}
/* Article count in category */
.category-list .category .article-count {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
color: var(--brand-blue);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ── Collection Category Page (browse a single collection) ──────────── */
.collection-category h2,
.collection-category .collection-header h2 {
font-family: var(--font-serif) !important;
font-size: 30px !important;
font-weight: 700 !important;
color: var(--ui-type) !important;
margin: 0 0 20px !important;
letter-spacing: 0 !important;
text-align: left !important;
}
.collection-category h2 a,
.collection-category .collection-header h2 a {
font-family: var(--font-serif) !important;
font-size: 30px !important;
font-weight: 700 !important;
color: var(--ui-type) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.collection-category h2 a:hover {
color: var(--brand-blue) !important;
}
/* ── Two/Three Column Collection Grid ───────────────────────────────── */
.twoCol .collection,
.threeCol .collection {
background: #FFFFFF;
border-radius: 16px;
box-shadow: var(--shadow-card);
border-color: transparent;
padding: 28px 24px;
}
/* ── Article Links (home, collections) ──────────────────────────────── */
#serp-dd .result a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a span {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 400;
color: var(--brand-blue);
text-transform: none;
letter-spacing: 0;
text-decoration: none;
transition: color 0.2s ease;
}
#serp-dd .result a:hover,
.collection a:hover,
.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover {
color: var(--brand-blue-dark);
text-decoration: underline;
}
/* ── Article Page ───────────────────────────────────────────────────── */
#main-content {
background: none;
float: right;
margin-bottom: 2em;
padding: 32px 0 0 28px;
}
/* Article title */
#fullArticle .title,
.contentWrapper h1 {
font-family: var(--font-serif) !important;
font-size: 44px !important;
font-weight: 400 !important;
color: var(--ui-type) !important;
line-height: 1.15 !important;
margin: 0 0 24px 0 !important;
}
/* Article body */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle dd,
#fullArticle table {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
color: var(--ui-type);
letter-spacing: 0;
line-height: 1.7;
}
#fullArticle blockquote {
border-left: 3px solid var(--brand-blue);
padding-left: 20px;
margin: 20px 0;
color: var(--ui-dark-grey);
font-style: italic;
background: none;
}
#fullArticle strong {
color: var(--ui-type);
font-weight: 700;
}
#fullArticle code {
background: var(--ui-light-grey);
color: var(--ui-dark-grey);
border-radius: 4px;
padding: 2px 6px;
font-size: 14px;
}
#fullArticle pre {
background: var(--ui-dark-grey);
color: #F1F4F8;
border-radius: 8px;
padding: 20px 24px;
overflow-x: auto;
}
/* Article headings */
#fullArticle h2 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 700;
color: var(--ui-type);
margin-top: 32px;
margin-bottom: 12px;
}
#fullArticle h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 700;
color: var(--ui-type);
margin-top: 24px;
margin-bottom: 8px;
}
#fullArticle h4 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
color: var(--ui-dark-grey);
font-style: normal;
margin-top: 20px;
margin-bottom: 6px;
}
/* Article images */
#fullArticle img {
display: block;
margin: 1em 0 2em;
border-radius: 8px;
box-sizing: border-box;
max-width: 100%;
}
.contentWrapper p {
font-family: var(--font-sans);
color: var(--ui-type);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
margin-top: 0;
margin-bottom: 16px;
word-wrap: break-word;
}
/* ── Sidebar ────────────────────────────────────────────────────────── */
#sidebar h3 {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ui-dark-grey);
margin-bottom: 8px;
}
#sidebar .nav-list a {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ui-type);
font-weight: 400;
padding: 6px 0;
line-height: 1.5;
text-decoration: none;
transition: color 0.2s ease;
display: block;
margin-left: 0;
}
#sidebar .nav-list a:hover {
color: var(--brand-blue);
}
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
color: var(--brand-blue);
font-weight: 700;
background: none;
text-shadow: none;
text-decoration: none;
}
/* ── Article Footer ─────────────────────────────────────────────────── */
.articleFoot p,
.articleFoot time {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ui-dark-grey);
font-weight: 400;
font-style: normal;
display: inline-block;
}
.articleFoot time.lu {
color: var(--ui-mid-grey);
}
/* ── Buttons (general) ──────────────────────────────────────────────── */
.btn {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: var(--brand-blue);
color: #FFFFFF;
border: none;
border-radius: 4px;
padding: 8px 20px;
box-shadow: var(--shadow-button);
transition: background 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
background: var(--brand-blue-dark);
color: #FFFFFF;
box-shadow: var(--shadow-elevated);
text-shadow: none;
}
.btn-navbar {
background: transparent;
color: var(--ui-dark-grey);
box-shadow: none;
border: none;
}
.btn-navbar:hover,
.btn-navbar:focus,
.btn-navbar:active,
.btn-navbar.active {
background: transparent;
color: var(--ui-dark-grey);
box-shadow: none;
}
/* ── Category Page Sort ─────────────────────────────────────────────── */
#categoryHead {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
row-gap: 16px;
}
#categoryHead h1,
#categoryHead h2 {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding-right: 8px;
}
#categoryHead .ort {
position: static !important;
float: none !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: auto;
flex: 0 0 auto;
margin-left: auto;
align-self: center;
flex-shrink: 0;
}
/* Platform default is #categoryHead .sort { position:absolute; right:0; top:8px } — that paints over the h1. */
#categoryHead .sort,
#categoryHead .ort .sort,
#main-content #categoryHead .sort {
position: static !important;
float: none !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
z-index: auto;
}
#categoryHead select#sortBy {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ui-dark-grey);
font-weight: 400;
}
/* ── Contact Modal ──────────────────────────────────────────────────── */
#contactModal h2,
.abuse h2 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 700;
color: var(--ui-type);
background: #FFFFFF;
border-bottom: 1px solid var(--ui-light-grey);
padding: 16px 20px;
margin: 0;
border-radius: 16px 16px 0 0;
}
#contactModal .control-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
color: var(--ui-dark-grey);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ── Search Results ─────────────────────────────────────────────────── */
#serp-dd .result a {
font-weight: 400;
color: var(--brand-blue);
}
/* ── Footer ─────────────────────────────────────────────────────────── */
footer p a {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ui-mid-grey);
font-weight: 400;
text-decoration: none;
transition: color 0.2s ease;
}
footer p a:hover {
color: var(--brand-blue);
}
/* =============================================
SEARCH BAR - Put input and button on one row
============================================= */
#searchBar {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
max-width: 620px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
}
#searchBar input.search-query {
flex: 1;
width: auto !important;
}
/* =============================================
2-COLUMN GRID for collection sections
============================================= */
.twoCol.row-fluid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px 20px;
text-align: left;
max-width: 1120px;
margin: 0 auto;
box-sizing: border-box;
}
section.collection {
display: block !important;
width: auto !important;
margin: 0 !important;
text-align: left;
}
/* =============================================
LEFT-ALIGN section headings & descriptions
============================================= */
.collection-head {
text-align: left;
padding: 12px 0 24px;
}
.collection-head h2 {
font-weight: 700;
text-align: left;
font-size: 24px;
}
.collection-head p {
text-align: left;
}
/* =============================================
LEFT-ALIGN article links in collection body
============================================= */
.collection-body {
text-align: left;
}
.collection-body .article-list-link,
.collection-body a,
.collection-body .popArticles a {
text-align: left;
}
/* Browse all articles link */
.collection a.see-all,
.collection .view-all,
.collection>a:last-child {
text-align: left;
display: block;
}
/* =============================================
FIX 1: Force first collection card to column 1
(prevents the empty top-left gap)
============================================= */
section.collection:first-child {
grid-column-start: 1 !important;
}
/* =============================================
FIX 2: Collection heading anchor inherits h2 size
(fixes small/light heading text)
============================================= */
section.collection .collection-head h2 a {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit;
}
/* =============================================
SIDEBAR SEARCH BUTTON OVERRIDES
============================================= */
#sidebar #searchBar button {
box-shadow: none;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#sidebar #searchBar button:hover,
#sidebar #searchBar button:focus,
#sidebar #searchBar button:active {
box-shadow: none;
}
#sidebar #searchBar button i.icon-search {
display: flex;
align-items: center;
justify-content: center;
}
/* =============================================
FIX 2: White text on "View in Help Scout" button
(visible to logged-in users on article pages)
============================================= */
a.admin-edit.btn,
a.admin-edit.btn:link,
a.admin-edit.btn:visited {
color: #ffffff !important;
}
a.admin-edit.btn:hover,
a.admin-edit.btn:focus,
a.admin-edit.btn:active {
color: #ffffff !important;
}
/* ── Responsive ─────────────────────────────────────────────────────── */
@media screen and (max-width: 1105px) {
section.category-list .category {
width: 48.2%;
}
}
@media screen and (max-width: 760px) {
section.category-list .category {
box-sizing: border-box;
margin: 0 0 20px;
width: 100%;
}
/* Article + sidebar: stack to one column (Bootstrap 2 span grid + #main-content float) */
#contentArea .row-fluid > #main-content,
#contentArea .row-fluid > #sidebar {
width: 100%;
float: none;
margin-left: 0;
box-sizing: border-box;
}
#contentArea #main-content {
float: none;
padding: 24px 20px 0;
}
#contentArea #sidebar {
margin-top: 1.5em;
}
#categoryHead {
flex-direction: column;
align-items: stretch;
}
#categoryHead .ort {
margin-left: 0;
align-self: stretch;
}
#categoryHead .sort,
#categoryHead .ort .sort,
#main-content #categoryHead .sort {
position: static !important;
}
#categoryHead select#sortBy {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#fullArticle .title,
.contentWrapper h1 {
font-size: 30px;
}
#fullArticle h2 {
font-size: 22px;
}
.twoCol.row-fluid {
grid-template-columns: 1fr !important;
}
.navbar .nav-collapse {
background: #FFFFFF;
box-shadow: var(--shadow-card);
padding: 10px 0;
border-radius: 0 0 8px 8px;
z-index: 100;
}
/* Hide mobile nav drawer when closed, show when toggled open */
.navbar .nav-collapse.collapse:not(.in) {
display: none !important;
}
.navbar .nav-collapse.in {
display: block;
}
}
@media (max-width: 480px) {
#fullArticle .title,
.contentWrapper h1 {
font-size: 26px;
}
}