/* ============================================================
TWO STEP INN — Help Scout Docs Custom Stylesheet
------------------------------------------------------------
Paste into: Settings (gear) > Docs Sites > [Your Site] >
Custom Code > External CSS (or upload as a .css file).
TOKEN SYSTEM: to reskin this for a different festival, only
the 8 values in :root below need to change. Everything else
reads from them.
NOTE: Several settings below (header background, nav text
color, link color, article text color) can ALSO be set
directly in Docs Settings > Branding with no code at all.
Set those there first — this stylesheet only needs to cover
what Settings can't do (fonts, card styling, hero band, etc).
============================================================ */
:root {
/* --- Per-festival inputs (the only 4 colors a new festival sets) --- */
--brand-bg: #F1E5CC; /* body background */
--brand-header: #40080F; /* header + search band bg */
--brand-accent: #098169; /* buttons / links / active nav / card accent */
--brand-btn-text: #FFFFFF; /* button label color — use a dark value instead if a festival's button/accent is light */
/* --- Computed, not set per-festival — these derive from the
inputs above so nobody has to eyeball a hover shade or a
muted-header-text shade for each new site. --- */
--brand-accent-hover: color-mix(in srgb, var(--brand-accent) 85%, black 15%);
--brand-accent-text: color-mix(in srgb, var(--brand-accent) 80%, black 20%); /* raw --brand-accent as TEXT on --brand-bg only measures ~3.9:1, below WCAG AA's 4.5:1 — this darkens it just enough to clear that bar (~5.5:1 with the current values) without changing the accent used for buttons/borders. Used anywhere accent color is rendered as text on the light body background: links, active sidebar nav, category article-counts. */
--brand-header-soft: rgba(255, 255, 255, 0.7); /* muted text ON the dark hero band (subtitle, sponsor label) — a translucent white works on any header color without a per-festival value */
/* --- Fixed constants — same for every festival, not exposed
as inputs. Neutral (no warm/cool tint) so they read correctly
against any --brand-bg a future festival picks. --- */
--brand-text: #1A1A1A; /* near-black article/body text */
--brand-text-soft: #5C5C5C; /* muted/meta text — neutral gray */
--brand-card-border: #DADADA; /* card + divider lines — neutral light gray */
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Load display + body fonts. If your plan/CSP blocks @import,
add the Google Fonts tags via Insert Code
instead and delete this line. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* ---------------------------------------------------------
Global type
--------------------------------------------------------- */
body {
background: var(--brand-bg);
color: var(--brand-text);
font-family: var(--font-body);
}
a { color: var(--brand-accent-text); }
a:hover { color: var(--brand-accent-hover); }
/* ---------------------------------------------------------
Search / hero band
#docsSearch and #searchBar are Help Scout's own documented
selectors (confirmed via their "Popular Docs Styling Tricks"
support article).
--------------------------------------------------------- */
#docsSearch {
background: var(--brand-header);
padding: 64px 32px 56px;
border-bottom: 5px solid var(--brand-accent);
}
#docsSearch h1 {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
}
/* VERIFY: selector for the site-description subtitle text under
the H1 isn't documented by Help Scout. Inspect your live page
(the "Search tickets, schedule, safety info & more" line) and
adjust this if it doesn't apply. */
#docsSearch p {
color: var(--brand-header-soft);
}
#searchBar {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Corners are intentionally square — rounding the input's left
corner caused a persistent white artifact we couldn't fully
resolve (see git history / prior notes), and clipping it via
the parent broke Help Scout's native search-suggestions
dropdown. Square corners avoid both problems entirely. */
#searchBar .search-query {
background: #fff;
border: none;
box-shadow: none;
color: var(--brand-text-soft);
-webkit-appearance: none;
appearance: none;
}
#searchBar button {
background: var(--brand-accent);
border: none;
color: var(--brand-btn-text);
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
-webkit-appearance: none;
appearance: none;
}
/* ---------------------------------------------------------
Live search-suggestions dropdown (#serp-dd)
This is a native Help Scout feature, not something we built.
VERIFY: exact classes for the result list items aren't
confirmed — inspect one and adjust .result li / a below if
this doesn't match the real markup.
--------------------------------------------------------- */
#serp-dd {
background: #fff;
border: 1px solid var(--brand-card-border);
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
text-align: left;
overflow: hidden;
}
#serp-dd .result li a {
display: block;
padding: 10px 16px;
color: var(--brand-text) !important;
}
#serp-dd .result li a:hover {
background: var(--brand-bg);
color: var(--brand-accent-hover) !important;
}
#searchBar button span,
#searchBar button i {
background: transparent !important;
color: inherit !important;
}
#searchBar button:hover {
background: var(--brand-accent-hover);
border-color: var(--brand-accent-hover);
}
/* ---------------------------------------------------------
Category cards
.category-list .category is Help Scout's own documented
selector (confirmed).
--------------------------------------------------------- */
.category-list .category {
background: #FFFFFF;
border: 1px solid var(--brand-card-border);
border-top: 3px solid var(--brand-accent);
border-radius: 4px;
text-align: center;
}
/* VERIFY: exact tag/class for the category title and article
count aren't documented by Help Scout. h3 is a reasonable
guess; inspect your live category card and adjust if it
doesn't hit. */
.category-list .category h3 {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--brand-text);
}
.category-list .category p,
.category-list .category span {
color: var(--brand-accent-text);
font-weight: 600;
font-size: 13px;
}
/* ---------------------------------------------------------
Most Popular Articles list
.popArticles is confirmed via Inspect Element on the live site.
The default bullet icon is a font-icon:
with its glyph drawn by ::before. We clear that glyph and mask
in our own line-icon instead, colored from --brand-accent so it
stays in sync with the rest of the palette automatically.
--------------------------------------------------------- */
.popArticles a {
color: var(--brand-text) !important;
}
.popArticles a:hover {
color: var(--brand-accent-hover) !important;
}
.popArticles .icon-article-doc {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: -3px;
background-color: var(--brand-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%202.5h7.5L19%207v14a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1z%22/%3E%3Cpath%20d%3D%22M14%202.5V7h5%22/%3E%3Cpath%20d%3D%22M9%2012.5h6M9%2015.8h6M9%209.2h3.5%22/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%202.5h7.5L19%207v14a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1z%22/%3E%3Cpath%20d%3D%22M14%202.5V7h5%22/%3E%3Cpath%20d%3D%22M9%2012.5h6M9%2015.8h6M9%209.2h3.5%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.popArticles .icon-article-doc::before {
content: "" !important;
}
/* ---------------------------------------------------------
Header nav links
Nav Text Color / Nav Active Color can be set directly in
Docs Settings — only add this if you need the font treatment
Settings can't provide.
--------------------------------------------------------- */
.navBar a, .nav a {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.3px;
}
/* ---------------------------------------------------------
"Get Tickets" header button
Injected by JS directly into #mainNav so it stays visible
next to the logo on mobile, independent of whatever Help
Scout's own collapsible nav does at small screen widths.
--------------------------------------------------------- */
.custom-header-cta {
position: absolute;
top: 50%;
right: max(20px, calc(50% - 640px));
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 500;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.3px;
color: var(--brand-btn-text) !important;
background: var(--brand-accent);
padding: 8px 14px;
border-radius: 4px;
white-space: nowrap;
z-index: 10;
}
.custom-header-cta:hover {
background: var(--brand-accent-hover);
color: var(--brand-btn-text) !important;
}
@media (max-width: 600px) {
.custom-header-cta {
right: 12px;
font-size: 11px;
padding: 6px 10px;
}
}
/* ---------------------------------------------------------
Category sidebar (on individual category/article pages)
#sidebar .nav-list a is confirmed via Inspect Element —
Help Scout's default color here is a flat #858585 gray.
--------------------------------------------------------- */
#sidebar .nav-list a {
color: var(--brand-text-soft) !important;
}
#sidebar .nav-list a:hover,
#sidebar .nav-list li.active a {
color: var(--brand-accent-text) !important;
}
/* ---------------------------------------------------------
Article/category content panel
.contentWrapper is confirmed via Inspect Element.
--------------------------------------------------------- */
.contentWrapper {
border: 1px solid var(--brand-card-border) !important;
border-radius: 8px;
}
/* ---------------------------------------------------------
Footer
footer.center is confirmed via Inspect Element on the HOME
PAGE only. Article/category page templates use a plain