/* ============================================================
TURF PRO LOGIC — Help Scout Docs custom CSS
Paste into: Docs → Settings → Customize → Custom Code → CSS
Add the font (below) to the "Head" HTML box, OR keep
the @import at the top of this file.
------------------------------------------------------------
HEAD HTML (recommended, faster than @import):
------------------------------------------------------------
Selectors below target the LIVE Help Scout Docs theme markup
(classic Bootstrap-based), verified against the running site:
home #docsSearch / #contentArea / .collection-category /
.category-list / a.category / p.article-count / footer.center
category hgroup#categoryHead / ul.articleList
article article#fullArticle > h1.title + prose children /
aside#sidebar / section.related
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
--pine:#0f3b21;
--pine-2:#14532d;
--green:#16a34a;
--hv:#c6f24e; /* lime accent */
--hv-ink:#16240a;
--ink:#111713;
--paper:#f6f5f0;
--paper-2:#eeece3;
--line:#dcdacd;
--muted:#5c6a5f;
--disp:"Barlow Semi Condensed",sans-serif;
--body:"Barlow",system-ui,sans-serif;
--mono:"IBM Plex Mono",monospace;
}
/* ---------- base ---------- */
body,#page-content,.page{background:var(--paper)!important;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.site-title,.category h3,#categoryHead h1{font-family:var(--disp);font-weight:800;letter-spacing:-0.01em;text-transform:uppercase;line-height:1.02}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--pine);text-decoration:underline}
/* ---------- top nav bar (kept clean white) ---------- */
#mainNav,header#mainNav,.navbar{background:#fff!important;border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
#mainNav .navbar-inner{background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}
#mainNav a,.navbar a{font-family:var(--body)!important;font-weight:600!important;text-transform:none!important;font-size:16px!important;color:var(--ink)!important}
#mainNav a:hover,.navbar a:hover{color:var(--green)!important;text-decoration:none!important}
/* ---------- search band -> pine hero (matches marketing) ---------- */
#docsSearch{
background:var(--pine)!important;color:#eaf3ea!important;border:0!important;position:relative;overflow:hidden;
background-image:radial-gradient(120% 80% at 85% -10%,rgba(34,197,94,.18),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px)!important;
}
#docsSearch h1,#docsSearch h2,#docsSearch h3{color:#fff!important}
#docsSearch p,#docsSearch label{color:#c3d6c6!important;font-family:var(--body)!important;text-transform:none!important}
/* search input + button = one aligned unit.
NOTE: the base theme absolutely-positions the button over the input's right
edge — force it back into the flex row (position:static) so they sit flush. */
#docsSearch form,#searchBar{display:flex!important;align-items:stretch!important;position:relative!important;max-width:680px;margin:0 auto;gap:0}
#docsSearch input.search-query,
#docsSearch input[type="text"],#docsSearch input[type="search"],
#docsSearch input:not([type="submit"]):not([type="button"]){
flex:1 1 auto!important;height:56px!important;box-sizing:border-box!important;
font-family:var(--body)!important;font-size:17px!important;color:var(--ink)!important;
background:#fff!important;border:1px solid var(--line)!important;border-right:0!important;
border-radius:2px 0 0 2px!important;padding:0 18px!important;margin:0!important;box-shadow:none!important;
}
#docsSearch input::placeholder{color:var(--muted)!important}
#docsSearch input:focus{outline:0!important;border-color:var(--hv)!important;box-shadow:none!important}
#docsSearch button,#docsSearch input[type="submit"],#docsSearch input[type="button"]{
height:56px!important;box-sizing:border-box!important;flex:0 0 auto!important;margin:0!important;
position:static!important;align-self:stretch!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
background:var(--hv)!important;color:var(--hv-ink)!important;border:0!important;border-radius:0 2px 2px 0!important;
font-family:var(--disp)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.03em!important;padding:0 28px!important;box-shadow:none!important;cursor:pointer;
}
#docsSearch button i,#docsSearch button .icon-search{color:var(--hv-ink)!important}
/* ---------- content wrapper (full-bleed paper bg) ---------- */
#contentArea,#contentArea.container-fluid{background:var(--paper)!important;padding:60px 24px 88px!important;float:none!important}
/* center the heading + grid together (direct parent of both) */
.collection-category{max-width:1080px!important;margin:0 auto!important;float:none!important;padding:0!important}
/* category label ("HELP CENTER") */
.collection-category > h2,.collection-category-title,#collection-1{
font-family:var(--disp)!important;font-weight:800!important;text-transform:uppercase!important;
letter-spacing:.02em!important;font-size:24px!important;color:var(--muted)!important;margin:0 0 26px!important;text-align:left!important
}
/* ---------- collection grid (owned by our CSS, not the base theme) ---------- */
/* NOTE: the base Docs theme pins .category to inline-block/fixed width with side
margins — we must override width/float/margin so cards fill the grid cells. */
.category-list{
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;
max-width:100%!important;margin:0 auto!important;text-align:left!important;float:none!important
}
@media (max-width:640px){.category-list{grid-template-columns:1fr!important}}
/* ---------- collection cards (each .category is an ) ---------- */
.category,.category-list .category,.category-list li{
display:flex!important;flex-direction:column!important;justify-content:center!important;
width:auto!important;min-height:132px!important;margin:0!important;float:none!important;
background:#fff!important;border:1px solid var(--line)!important;border-radius:6px!important;
padding:26px 28px!important;text-align:left!important;
box-shadow:0 20px 40px -28px rgba(15,59,33,.35)!important;
transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease!important
}
.category:hover,.category-list .category:hover,.category-list li:hover{transform:translateY(-3px)!important;border-color:var(--green)!important;box-shadow:0 26px 48px -26px rgba(15,59,33,.45)!important}
.category,.category a{text-decoration:none!important}
.category h2,.category h3,.category h4,.category .category-title{
font-family:var(--disp)!important;font-weight:800!important;text-transform:uppercase!important;
color:var(--ink)!important;letter-spacing:-.005em!important;font-size:20px!important;margin:0 0 10px!important
}
.category:hover h2,.category:hover h3,.category:hover h4{color:var(--green)!important}
/* "N articles" count */
.category .article-count,.category .count,.category small,.category .meta{
font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em!important;
text-transform:uppercase!important;color:var(--green)!important;font-weight:500!important;margin:0!important
}
/* ---------- category page: heading + article list ---------- */
#categoryHead h1{font-size:clamp(28px,3.4vw,40px);color:var(--ink);margin:0 0 8px}
#categoryHead p.descrip{font-family:var(--body);font-size:17px;color:var(--muted);margin:0 0 10px}
#categoryHead .sort select,#categoryHead #sortBy{
font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:2px;padding:8px 10px
}
ul.articleList{list-style:none;margin:8px 0 0;padding:0}
ul.articleList li{border-bottom:1px solid var(--line)}
ul.articleList li a{
display:flex;align-items:center;gap:10px;padding:14px 0;
font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none
}
ul.articleList li a:hover{color:var(--green);text-decoration:none}
ul.articleList li a i{color:var(--green)}
/* ---------- sidebar (article + category layout) ---------- */
#sidebar,.sidebar,aside#sidebar{background:transparent}
#sidebar a,.sidebar a{color:var(--muted);font-weight:500}
#sidebar a:hover,#sidebar .active a,.sidebar .active > a{color:var(--pine);text-decoration:none}
#sidebar .active > a,.sidebar li.active > a{color:var(--green);font-weight:700;box-shadow:inset 3px 0 0 var(--hv);padding-left:12px}
#sidebar h4,.sidebar h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}
/* ---------- article page: title + prose (children of #fullArticle) ---------- */
#fullArticle > h1.title,#fullArticle h1.title{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(30px,4vw,46px);color:var(--ink);margin:0 0 10px}
#fullArticle{font-family:var(--body);font-size:17.5px;line-height:1.7;color:#222b23}
#fullArticle h2{font-family:var(--disp);text-transform:uppercase;font-size:28px;margin:2.2em 0 .6em;color:var(--ink)}
#fullArticle h3{font-family:var(--disp);text-transform:uppercase;font-size:21px;margin:1.8em 0 .5em;color:var(--ink)}
#fullArticle a:not(.btn):not(.printArticle):not(.admin-edit){color:var(--green);text-decoration:underline;text-underline-offset:2px}
#fullArticle a:not(.btn):not(.printArticle):not(.admin-edit):hover{color:var(--pine)}
#fullArticle blockquote{border-left:3px solid var(--hv);background:var(--paper-2);margin:1.4em 0;padding:14px 20px;border-radius:0 4px 4px 0;color:var(--ink)}
#fullArticle code,#fullArticle pre{font-family:var(--mono);font-size:14px}
#fullArticle code{background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:.1em .4em}
#fullArticle pre{background:var(--pine);color:#eaf3ea;border-radius:6px;padding:18px 20px;overflow:auto}
#fullArticle pre code{background:none;border:0;color:inherit}
#fullArticle img{border-radius:6px;border:1px solid var(--line);max-width:100%}
#fullArticle hr{border:0;border-top:1px solid var(--line)}
#fullArticle table th{background:var(--pine);color:#eaf3ea;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em}
#fullArticle table td,#fullArticle table th{border:1px solid var(--line);padding:10px 14px}
/* article utility links (print / admin) — leave them looking like controls */
#fullArticle a.printArticle{color:var(--muted);text-decoration:none}
#fullArticle a.printArticle:hover{color:var(--green)}
/* ---------- buttons ---------- */
.button,.btn,button[type="submit"],input[type="submit"]{
font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
background:var(--hv);color:var(--hv-ink);border:0;border-radius:2px;padding:14px 24px;
box-shadow:0 0 0 1px var(--hv-ink) inset;cursor:pointer;transition:transform .12s ease
}
.button:hover,.btn:hover,button[type="submit"]:hover,input[type="submit"]:hover{transform:translateY(-2px);color:var(--hv-ink)}
/* ---------- related articles ---------- */
.related h3,.related-articles h2{font-family:var(--disp);text-transform:uppercase}
.related a{color:var(--green)}
/* ---------- footer ----------
The base theme nests footer.center inside #contentArea, so it renders as a
dark box constrained to the content width. Break it out to a full-bleed band
(negative viewport margins self-adjust for narrow-centered OR full-width
parents) and center the mono copy. */
#footer,footer#footer,.docs-footer,footer.center{
background:var(--ink)!important;color:#9fb3a2!important;border:0!important;
margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;margin-top:56px!important;
padding:30px 24px!important;text-align:center!important;box-sizing:border-box!important;min-height:0!important;
font-family:var(--mono)!important;font-size:13px!important;letter-spacing:.04em!important
}
#footer p,footer#footer p,.docs-footer p,footer.center p{margin:0!important}
#footer a,.docs-footer a,footer.center a{color:#cfe0d1!important}
#footer a:hover,.docs-footer a:hover,footer.center a:hover{color:var(--hv)!important}
/* ---------- misc chrome ---------- */
::selection{background:var(--hv);color:var(--hv-ink)}
.contact-link,.contact-cta{color:var(--green)}