/**
* DDC Help Center — Custom Stylesheet
*
* @description Custom stylesheet for Doodle Design Co. Help Scout Help Center
* @author Will S.
* @version 7.4.18
* @date 2026-05-28
* @company Doodle Design Company
* @website https://help.sharpsticker.store
* @platform Help Scout (Standard tier — CSS upload + Insert Code)
*
* Section index
* 1. CSS Custom Properties
* 2. @font-face declarations
* 3. Accessibility (skip-link, focus)
* 4. Base styles
* 5. Hero / Search section
* 5b. Rotating placeholder
* 6. Navbar (brand lockup, links, Contact button, hamburger)
* 7. Category / collection cards (homepage)
* 8. Category background images (per-category icon registry)
* 9. Sidebar
* 10. Category head / sort
* 11. Main content wrapper
* 12. Search results page (#serp)
* 13. Article body (#fullArticle)
* 14. Callout boxes (cool pastel palette)
* 15. Quick Answers accordion
* 16. Tabs component
* 17. Related Articles BEM
* 18. User Guides grid
* 19. Article Ratings (hidden)
* 20. Icons
* 21. Contact Modal
* 22. Modal Overlay
* 23. Footer (light 3-column)
*/
/* ==========================================================================
1. CSS Custom Properties
========================================================================== */
:root {
/* ── Core palette ──────────────────────────────────────────────────────── */
--color-bg: #fff5ee; /* page background */
--color-surface: #fffaf6; /* cards, sidebars, callout fills, footer */
--color-text: #333333; /* primary text, headings, button labels */
--color-text-muted: #7a7370; /* subheads, meta, breadcrumbs */
--color-border: #e8d9cc; /* card borders, hairlines, input borders */
--color-border-strong: #d7c3b0; /* slightly darker hairline for hover/active */
--color-button-bg: #333333;
--color-button-bg-hover: #1f1f1f;
--color-button-text: #fff5ee;
--color-focus-ring: #333333;
--color-code-bg: #f5e6d8; /* warm-tinted inline code background */
--color-code-block-bg: #333333;
--color-code-block-text: #fff5ee;
/* ── Brand aliases (back-compat with v5.2.0 inherited selectors) ──────── */
--color-primary: var(--color-text);
--color-primary-dark: var(--color-button-bg-hover);
--color-primary-light: var(--color-text-muted);
--color-secondary: var(--color-text);
--color-secondary-dark: var(--color-button-bg-hover);
--color-secondary-light: var(--color-text-muted);
--color-accent: var(--color-text-muted);
--color-accent-dark: var(--color-text);
--color-accent-light: var(--color-border-strong);
--color-black: var(--color-text);
--color-white: #ffffff;
/* ── Callout cool pastels ──────────────────────────────────────────────── */
--callout-info-bg: #e6f0f7;
--callout-info-accent: #5b8aa8;
--callout-tip-bg: #e3f1ea;
--callout-tip-accent: #5c9079;
--callout-warn-bg: #fbeede;
--callout-warn-accent: #b1845a;
--callout-important-bg: #f4dee0;
--callout-important-accent: #a76971;
--callout-neutral-bg: rgba(51, 51, 51, 0.05);
--callout-neutral-accent: var(--color-text-muted);
/* Legacy semantic aliases (v5.2.0 selectors still resolve) */
--color-info: var(--callout-info-accent);
--color-info-bg: var(--callout-info-bg);
--color-info-border: var(--callout-info-accent);
--color-warning: var(--callout-warn-accent);
--color-warning-bg: var(--callout-warn-bg);
--color-warning-border: var(--callout-warn-accent);
--color-success: var(--callout-tip-accent);
--color-success-bg: var(--callout-tip-bg);
--color-success-border: var(--callout-tip-accent);
--color-danger: var(--callout-important-accent);
--color-danger-bg: var(--callout-important-bg);
--color-danger-border: var(--callout-important-accent);
/* ── Neutrals (warm-tinted alphas) ─────────────────────────────────────── */
--color-grey-extra-light: rgba(51, 51, 51, 0.08);
--color-grey-light: rgba(51, 51, 51, 0.18);
--color-grey: rgba(51, 51, 51, 0.48);
--color-grey-dark: rgba(51, 51, 51, 0.62);
--color-grey-extra-dark: rgba(51, 51, 51, 0.78);
/* ── Typography ────────────────────────────────────────────────────────── */
--font-family-heading: "Moulay", Georgia, serif;
--font-family-body: "Sentient", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-family-mono: "SF Mono", "Fira Code", Consolas, monospace;
/* Legacy family aliases */
--font-family-primary: var(--font-family-body);
--font-family-secondary: var(--font-family-heading);
--font-family-display: var(--font-family-heading);
--font-family-text: var(--font-family-body);
--font-family-headline: var(--font-family-heading);
--font-family-nav: var(--font-family-body);
/* Body sizes */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-md: 17px;
--font-size-lg: 18px;
--font-line-height-xs: 1.5;
--font-line-height-sm: 1.5;
--font-line-height-base: 1.6;
--font-line-height-lg: 1.55;
/* Heading sizes (desktop) */
--font-size-h1-hero: 64px;
--font-size-h1-page: 40px;
--font-size-h2: 28px;
--font-size-h3: 22px;
--font-size-h4: 18px;
/* ── Spacing ───────────────────────────────────────────────────────────── */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 40px;
--space-4xl: 64px;
--space-5xl: 96px;
--space-6xl: 128px;
/* Legacy spacing aliases */
--spacing-xs: var(--space-xs);
--spacing-sm: var(--space-sm);
--spacing-md: var(--space-md);
--spacing-lg: var(--space-lg);
--spacing-xl: var(--space-xl);
--spacing-2xl: var(--space-2xl);
--spacing-3xl: var(--space-3xl);
--spacing-4xl: var(--space-4xl);
--spacing-5xl: var(--space-5xl);
--spacing-6xl: var(--space-6xl);
/* ── Border radius ─────────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 30px;
--radius-full: 50%;
/* Legacy radius aliases */
--border-radius-xs: var(--radius-xs);
--border-radius-sm: var(--radius-sm);
--border-radius-md: var(--radius-md);
--border-radius-lg: var(--radius-lg);
--border-radius-xl: var(--radius-xl);
--border-radius-pill: var(--radius-pill);
--border-radius-full: var(--radius-full);
/* ── Shadows (softened for warm-cream bg) ──────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(51, 51, 51, 0.06), 0 1px 2px rgba(51, 51, 51, 0.03);
--shadow-md: 0 4px 12px rgba(51, 51, 51, 0.08), 0 2px 4px rgba(51, 51, 51, 0.04);
--shadow-lg: 0 12px 24px rgba(51, 51, 51, 0.08), 0 4px 8px rgba(51, 51, 51, 0.04);
/* ── Transitions ───────────────────────────────────────────────────────── */
--transition-fast: 0.1s ease-in-out;
--transition-normal: 0.2s ease-in-out;
--transition-slow: 0.3s ease-in-out;
/* ── Z-index ───────────────────────────────────────────────────────────── */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-index-sticky: var(--z-sticky);
--z-index-modal: var(--z-modal);
--z-index-modal-backdrop: var(--z-modal-backdrop);
/* ── Article readability ───────────────────────────────────────────────── */
--article-max-width: 75ch;
--article-line-height: 1.6;
--article-paragraph-spacing: 1.25em;
}
/* ==========================================================================
2. @font-face declarations
18 total: 8 Moulay TTF + 10 Sentient OTF (5 weights × 2 styles)
========================================================================== */
/* ── Moulay (headings) ─────────────────────────────────────────────────── */
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-Thin.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-ExtraLight.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-Light.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-Regular.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-Medium.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-SemiBold.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-Bold.ttf?v=1777316100") format("truetype");
}
@font-face {
font-family: "Moulay";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Moulay-ExtraBold.ttf?v=1777316100") format("truetype");
}
/* ── Sentient (body) ───────────────────────────────────────────────────── */
@font-face {
font-family: "Sentient";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Extralight.otf?v=1777316052") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-ExtralightItalic.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Light.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-LightItalic.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Regular.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Italic.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Medium.otf?v=1777316051") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-MediumItalic.otf?v=1777316052") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-Bold.otf?v=1777316052") format("opentype");
}
@font-face {
font-family: "Sentient";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/Sentient-BoldItalic.otf?v=1777316051") format("opentype");
}
/* ==========================================================================
3. Accessibility — Skip Link & Focus Styles
========================================================================== */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
background: var(--color-text);
color: var(--color-button-text);
padding: 10px 20px;
border-radius: var(--radius-md);
font-family: var(--font-family-body);
font-size: var(--font-size-base);
font-weight: 500;
z-index: var(--z-modal);
text-decoration: none;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 16px;
}
:focus-visible {
outline: 2.5px solid var(--color-focus-ring) !important;
outline-offset: 3px !important;
border-radius: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
4. Base Styles
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
background-color: var(--color-bg) !important;
font-family: var(--font-family-body);
font-size: var(--font-size-base);
font-weight: 400;
line-height: var(--font-line-height-base);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
letter-spacing: 0.01em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
color: var(--color-text);
letter-spacing: -0.01em;
margin-top: 0;
}
h1 { font-size: var(--font-size-h1-page); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--font-size-h2); font-weight: 600; line-height: 1.2; }
h3 { font-size: var(--font-size-h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--font-size-h4); font-weight: 500; line-height: 1.3; }
h5 { font-size: var(--font-size-base); font-weight: 500; line-height: 1.4; }
p {
font-family: var(--font-family-body);
color: var(--color-text);
margin: 0 0 var(--article-paragraph-spacing);
}
p:last-child { margin-bottom: 0; }
hr {
height: 1px;
background-color: var(--color-border);
border: none;
margin: var(--space-2xl) 0;
}
a {
color: var(--color-text);
transition: color var(--transition-fast), opacity var(--transition-fast);
}
a:hover {
color: var(--color-text-muted);
}
img {
max-width: 100%;
height: auto;
}
.container-fluid {
max-width: 1200px;
}
#contentArea {
padding: 0 24px;
}
@media (max-width: 768px) {
#contentArea { padding: 0 16px; }
.container-fluid { padding-left: 16px; padding-right: 16px; }
#main-content { padding: 0 16px; }
.contentWrapper { padding: 0 16px; }
}
/* ==========================================================================
5. Hero / Search Section (#docsSearch)
========================================================================== */
#docsSearch {
background-color: var(--color-bg) !important;
background-image: none !important;
min-height: 280px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 96px 24px 48px;
margin-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
#docsSearch h1 {
font-family: var(--font-family-heading) !important;
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 12px;
color: var(--color-text);
font-weight: 800;
text-align: center;
}
/* Hero subhead: CSS-injected so it survives JS failure */
#docsSearch h1::after {
content: "Search our help articles or browse by topic below.";
display: block;
margin-top: 14px;
font-family: var(--font-family-body);
font-size: var(--font-size-lg);
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
color: var(--color-text-muted);
}
#docsSearch #searchBar {
width: 640px !important;
max-width: 100%;
margin-top: 32px;
padding: 0 !important;
display: flex;
align-items: center;
position: relative;
filter: drop-shadow(0 4px 12px rgba(51, 51, 51, 0.08));
}
#docsSearch .search-query {
border: 1.5px solid var(--color-border) !important;
border-radius: var(--radius-pill) !important;
background: var(--color-surface) !important;
color: var(--color-text) !important;
height: 58px !important;
font-family: var(--font-family-body) !important;
font-size: 17px !important;
font-weight: 400;
padding-left: 22px !important;
padding-right: 148px;
width: 100%;
box-sizing: border-box;
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
#docsSearch .search-query::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
#docsSearch .search-query:hover {
border-color: var(--color-border-strong) !important;
}
#docsSearch .search-query:focus {
border-color: var(--color-text) !important;
box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.10) !important;
outline: none;
}
#docsSearch #searchBar button {
background: var(--color-button-bg);
color: var(--color-button-text);
height: 48px;
border-radius: var(--radius-pill);
border: none;
font-family: var(--font-family-body) !important;
font-size: 15px;
font-weight: 500;
padding: 0 28px;
line-height: 1;
transition: background-color var(--transition-fast), transform var(--transition-fast);
position: absolute;
right: 5px;
top: 50%;
margin-top: -24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
}
/* Clean hover/press: stays a solid dark filled pill (just a touch darker + a
slight lift) — never flips to an outlined / light-background state. */
#docsSearch #searchBar button:hover,
#docsSearch #searchBar button:active,
#docsSearch #searchBar button:focus {
background: var(--color-button-bg-hover) !important;
color: var(--color-button-text) !important;
border: none !important;
box-shadow: none !important;
}
#docsSearch #searchBar button:hover { transform: translateY(-1px); }
#docsSearch #searchBar button:active { transform: translateY(0); }
#docsSearch #searchBar button:focus-visible {
outline: 2.5px solid var(--color-focus-ring) !important;
outline-offset: 3px !important;
}
#docsSearch #searchBar button .icon-search::before {
content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2020%2020'%20fill='%23fff5ee'%3E%3Cpath%20fill-rule='evenodd'%20d='M12.323%2013.383a5.5%205.5%200%201%201%201.06-1.06l2.897%202.897a.75.75%200%201%201-1.06%201.06l-2.897-2.897Zm.677-4.383a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z'/%3E%3C/svg%3E");
position: relative;
top: 1px;
}
#docsSearch textarea,
#docsSearch input[type=text] {
box-shadow: none;
-webkit-appearance: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Autocomplete dropdown */
#docsSearch #serp-dd {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
top: 68px;
margin-top: 8px;
border: 1px solid var(--color-border);
background: var(--color-surface);
overflow: hidden;
}
#docsSearch #serp-dd .noResults {
padding: 16px 24px;
font-size: var(--font-size-base);
color: var(--color-text-muted);
font-family: var(--font-family-body);
}
#docsSearch #serp-dd a {
color: var(--color-text);
font-size: var(--font-size-base);
font-family: var(--font-family-body);
font-weight: 400;
padding: 14px 18px;
display: block;
transition: background var(--transition-fast);
}
#docsSearch #serp-dd a:hover {
background: var(--color-grey-extra-light);
}
@media (max-width: 768px) {
#docsSearch {
min-height: 220px;
padding: 48px 16px 40px;
margin-bottom: 16px;
}
#docsSearch h1 {
font-size: clamp(2rem, 7vw, 2.8rem);
line-height: 1.1;
margin-bottom: 8px;
padding: 0 8px;
word-wrap: break-word;
}
#docsSearch h1::after {
font-size: 16px;
margin-top: 10px;
}
#docsSearch #searchBar {
width: 100% !important;
max-width: 540px;
margin-top: 24px;
filter: none;
}
/* Mobile search button: icon only — circular dark pill with just the
magnifier. Hides any "Search" text label via font-size:0 (the icon is
injected as a background-image on .icon-search::before, so it stays). */
#docsSearch #searchBar button {
width: 44px;
height: 44px;
min-height: 44px;
padding: 0 !important;
font-size: 0 !important;
line-height: 0;
border-radius: 50%;
gap: 0;
right: 7px;
margin-top: -22px;
}
/* Dead-centre the magnifier in the round button (the icon wrapper fills the
button and centres its glyph; no baseline nudge). */
#docsSearch #searchBar button .icon-search {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Upsize the magnifier so it reads at icon-only size. */
#docsSearch #searchBar button .icon-search::before {
width: 18px;
height: 18px;
position: static;
top: auto;
display: block;
content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2020%2020'%20fill='%23fff5ee'%3E%3Cpath%20fill-rule='evenodd'%20d='M12.323%2013.383a5.5%205.5%200%201%201%201.06-1.06l2.897%202.897a.75.75%200%201%201-1.06%201.06l-2.897-2.897Zm.677-4.383a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z'/%3E%3C/svg%3E");
}
/* Make room for the round button (44 + 7 right offset + 8 gap = ~60). */
#docsSearch .search-query {
padding-right: 64px !important;
height: 54px !important;
}
}
@media (max-width: 480px) {
#docsSearch h1 { font-size: 2.2rem; }
#docsSearch h1::after { font-size: 15px; }
#docsSearch .search-query {
padding-right: 60px !important;
font-size: 16px !important;
}
/* Slightly smaller round button on the smallest phones. */
#docsSearch #searchBar button {
width: 40px;
height: 40px;
min-height: 40px;
margin-top: -20px;
right: 6px;
}
}
/* ==========================================================================
5b. Rotating Placeholder
JS drives the rotation; CSS owns the animation states.
========================================================================== */
.hs-placeholder-rotator {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-family-body) !important;
font-size: 17px;
font-weight: 400;
color: var(--color-text-muted);
pointer-events: none;
user-select: none;
-webkit-user-select: none;
z-index: 1;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 165px);
will-change: opacity, transform;
transition: opacity 0.2s ease;
}
.hs-placeholder-rotator.hs-ph-in {
animation: hs-ph-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hs-placeholder-rotator.hs-ph-out {
animation: hs-ph-out 0.35s ease-in both;
}
/* Hard hide on focus/typing — display wins over the keyframe fill-mode,
which is what made the old opacity-based hide fail. */
.hs-placeholder-rotator.hs-ph-hidden {
display: none !important;
}
@keyframes hs-ph-in {
from { opacity: 0; transform: translateY(calc(-50% + 8px)); }
to { opacity: 1; transform: translateY(-50%); }
}
@keyframes hs-ph-out {
from { opacity: 1; transform: translateY(-50%); }
to { opacity: 0; transform: translateY(calc(-50% - 6px)); }
}
@media (max-width: 768px) {
.hs-placeholder-rotator { font-size: 15px; max-width: calc(100% - 132px); }
}
@media (max-width: 480px) {
.hs-placeholder-rotator { font-size: 14px; max-width: calc(100% - 118px); }
}
/* ==========================================================================
6. Navbar
========================================================================== */
.navbar {
padding-top: 18px;
padding-bottom: 14px;
background-color: var(--color-bg) !important;
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: none;
border-bottom: none;
transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
will-change: padding, box-shadow;
}
/* Flex row so the brand pins left, nav fills, actions pin right.
The category links are centered via balanced spacers inside .nav.
The header spans the full page width (overriding the global 1200px
.container-fluid cap) with a little breathing room on the sides. */
.navbar .navbar-inner > .container-fluid,
.navbar .navbar-inner > .container {
display: flex;
align-items: center;
gap: 16px;
max-width: none !important;
width: 100%;
padding-left: 32px;
padding-right: 32px;
box-sizing: border-box;
}
.navbar .nav-collapse {
flex: 1 1 auto;
min-width: 0;
}
/* The header is simply sticky on EVERY page — no scroll-shrink, no shadow, no
frosting. The is-scrolled class is still toggled but intentionally has no
visual effect (kept a no-op so any rule keyed off it stays harmless). */
.navbar.is-scrolled {
padding-top: 18px;
padding-bottom: 14px;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.navbar .navbar-inner {
background: none !important;
box-shadow: none !important;
border: none !important;
}
/* ── Brand lockup: icon + "Help" ───────────────────────────────────────── */
/*
* Works in three states:
* (a) Our v6 JS injected ![]()
+ Help
* (b) Old v5.2.0 JS injected hs-logo--text + hs-logo--icon (we hide the text one)
* (c) NO JS — only HelpScout's default with long site name. CSS fakes the lockup
* using a background-image icon + ::after wordmark, and zeroes the default text.
*/
.navbar .brand {
padding: 0;
height: 44px;
display: inline-flex !important;
align-items: center;
gap: 8px;
text-decoration: none !important;
flex-shrink: 0;
color: var(--color-text) !important;
position: relative;
/* (c) CSS fallback icon — kicks in when no ![]()
has been injected */
background-image: url("https://cdn.shopify.com/s/files/1/0684/1162/1687/files/OG_Icon_631b9010-d2c8-471c-8924-c089e76a9463.svg?v=1777316172");
background-repeat: no-repeat;
background-position: left center;
background-size: 40px 40px;
padding-left: 48px;
min-height: 40px;
}
/* (a/b) When JS has injected an ![]()
, drop the CSS bg + padding */
.navbar .brand:has(img.hs-logo) {
background-image: none;
padding-left: 0;
}
/* (b) Old v5.2.0 cross-fade: hide the wordmark image, keep only the icon */
.navbar .brand .hs-logo--text {
display: none !important;
}
/* All real ![]()
logos render at the same compact size — no cross-fade */
.navbar .brand .hs-logo,
.navbar .brand .hs-logo--icon {
height: 40px;
width: 40px;
display: block;
opacity: 1 !important;
transform: none !important;
position: static !important;
transition: opacity var(--transition-normal);
}
/* "Help" wordmark (v6 JS path) */
.navbar .brand .hs-brand-word {
font-family: var(--font-family-heading) !important;
font-weight: 500;
font-size: 24px;
line-height: 1;
color: var(--color-text) !important;
letter-spacing: -0.005em;
transition: color var(--transition-normal);
}
/* (c) No-JS path: HelpScout's default shows the full site name.
Zero its content and replace with "Help" via ::after. */
.navbar .brand > span:not(.hs-brand-word) {
font-size: 0 !important;
line-height: 0 !important;
letter-spacing: 0 !important;
color: transparent !important;
display: inline-flex;
align-items: center;
}
.navbar .brand > span:not(.hs-brand-word)::after {
content: "Help";
display: inline-block;
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 24px;
line-height: 1;
color: var(--color-text);
letter-spacing: -0.005em;
}
/* If v6 JS wordmark is present, hide the ::after fallback */
.navbar .brand:has(.hs-brand-word) > span:not(.hs-brand-word) {
display: none !important;
}
/* ── Nav links + Contact button ────────────────────────────────────────── */
.navbar .nav {
margin: 0;
display: flex;
align-items: center;
gap: 4px;
width: 100%;
float: none;
}
.navbar .nav > li {
display: inline-flex;
align-items: center;
}
/* Balanced spacers centre the category links between brand and actions. */
.navbar .nav .nav-spacer {
flex: 1 1 0;
min-width: 0;
}
.navbar .nav .nav-cat {
flex: 0 0 auto;
}
.navbar .nav .header-actions {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* ── Header dropdowns (Contact us / Return to Doodle) ──────────────────── */
.hs-dropdown {
position: relative;
display: inline-flex;
}
.hs-dd-toggle {
cursor: pointer;
}
/* Caret uses the toggle's text colour via mask, so it stays legible on both
the filled (light text) and outlined (dark text) buttons and on hover. */
.hs-dd-caret {
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='%23333333'%3E%3Cpath%20fill-rule='evenodd'%20d='M5.72%208.47a.75.75%200%200%201%201.06%200l3.47%203.47%203.47-3.47a.75.75%200%201%201%201.06%201.06l-4%204a.75.75%200%200%201-1.06%200l-4-4a.75.75%200%200%201%200-1.06Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='%23333333'%3E%3Cpath%20fill-rule='evenodd'%20d='M5.72%208.47a.75.75%200%200%201%201.06%200l3.47%203.47%203.47-3.47a.75.75%200%201%201%201.06%201.06l-4%204a.75.75%200%200%201-1.06%200l-4-4a.75.75%200%200%201%200-1.06Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
transition: transform var(--transition-fast);
}
.hs-dropdown.is-open .hs-dd-caret {
transform: rotate(180deg);
}
.hs-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 210px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
flex-direction: column;
z-index: var(--z-dropdown);
}
.hs-dropdown.is-open .hs-dropdown-menu {
display: flex;
}
/* Invisible bridge across the 8px gap so hover-open survives the cursor
travelling from the toggle down into the menu. */
.hs-dropdown-menu::before {
content: "";
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
}
/* Both menu items are