/* ============================================================ FLOCKLER HELP CENTER — Custom CSS for Help Scout Docs Built from Flockler Brand Guidelines V1.0 (April 2026) ------------------------------------------------------------ Palette balance the brand calls for: 70–80% neutral base · 10–20% text/structure · 5–10% accent Lilac = accent (use sparingly) · Maroon = key CTAs & depth ============================================================ */ /* ----- Brand tokens (from the guidelines' colour palette) ----- */ :root { --flk-maroon: #35141F; /* key CTAs, header surface, depth */ --flk-lilac: #B5A3FE; /* accent / active state on dark */ --flk-lilac-dark: #816ECE; /* large UI accents, borders, hovers */ --flk-lilac-link: #6A55B0; /* AA-safe link colour on white * */ --flk-lilac-50: #DAD1FF; --flk-lilac-25: #EDE8FF; /* subtle highlight surface */ --flk-black: #141717; /* body text */ --flk-neutral: #FDFDFD; /* page + cards */ --flk-neutral-dark: #F7F5F2; /* warm section background */ --flk-gray-dark: #898B8B; /* muted meta text */ --flk-gray-mid: #DEDEDE; /* card borders */ --flk-gray-light: #F3F3F3; --flk-radius: 12px; /* generous corners, per brand imagery */ --flk-radius-sm: 10px; /* —— TEMPORARY "BLUE PHASE" —————————————————————————————— Keeps the help centre visually tied to the still-blue app. When you rebrand the app, swap these four values to the brand equivalents noted on each line and the whole site follows. */ --flk-accent: #1d4ed8; /* app blue → rebrand: var(--flk-maroon) */ --flk-accent-hover: #1740bf; /* darker blue → rebrand: var(--flk-lilac-dark) */ --flk-accent-soft: #EEF2FF; /* light band → rebrand: var(--flk-lilac-25) */ --flk-accent-ring: #BFD0FF; /* focus/underline → rebrand: var(--flk-lilac-50) */ } /* * Brand "Dark Lilac" (#816ECE) is ~4.2:1 on white — just under the WCAG AA 4.5:1 bar for body-size text. We use the real Dark Lilac for buttons, borders and large UI (3:1 is enough there) and a slightly darkened shade (--flk-lilac-link, ~5.9:1) for inline/small text, honouring the brand's own "always check accessibility" rule. */ /* ============================================================ 1. TYPOGRAPHY — General Sans Load the font via the field (see the .txt instructions), then apply it everywhere. ============================================================ */ body, button, input, .docsSearch, #docsSearch h1 { font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--flk-black); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .collection-title, .category h2 { font-weight: 600; /* Semi Bold */ letter-spacing: -0.01em; /* tighten display sizes slightly */ color: var(--flk-black); } p, li { font-weight: 400; } /* Regular */ /* ============================================================ 2. PAGE + SECTION BACKGROUNDS Keep the base calm, light and a touch warm (Neutral-Dark) rather than the cool grey it ships with. ============================================================ */ body { background-color: var(--flk-neutral); } /* ============================================================ 3. SEARCH HERO (#docsSearch) A soft accent band gives search gentle emphasis without shouting. Uses --flk-accent-soft so it tracks the theme. ============================================================ */ #docsSearch { background: var(--flk-accent-soft); border-bottom: 1px solid var(--flk-gray-mid); padding-top: 56px; padding-bottom: 56px; } #docsSearch h1 { color: var(--flk-black); font-weight: 600; } /* Search input */ #searchBar .search-query { background: var(--flk-neutral); border: 1px solid var(--flk-gray-mid); border-radius: var(--flk-radius-sm); box-shadow: none; color: var(--flk-black); } #searchBar .search-query:focus { border-color: var(--flk-accent); box-shadow: 0 0 0 3px var(--flk-accent-ring); outline: none; } /* Search button — matches the app's accent colour (blue for now). White text clears AA contrast on the blue. Hover darkens slightly. */ #searchBar button { background: var(--flk-accent); border-color: transparent; border-radius: var(--flk-radius-sm); color: #ffffff; font-weight: 500; transition: background-color 0.15s ease; } #searchBar button:hover { background: var(--flk-accent-hover); border-color: transparent; color: #ffffff; } /* ============================================================ 4. CATEGORY CARDS (.category-list .category) White cards, soft border, rounded corners, and a quiet accent hover so the grid feels responsive without overpowering. ============================================================ */ .category-list .category { background-color: var(--flk-neutral); border: 1px solid var(--flk-gray-mid); border-radius: var(--flk-radius); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .category-list .category:hover { background-color: var(--flk-accent-soft); border-color: var(--flk-accent); box-shadow: 0 4px 16px rgba(20, 23, 23, 0.06); } /* ============================================================ 5. COLLECTION BLOCKS (.twoCol / .threeCol .collection) Match the category cards for a consistent system. ============================================================ */ .twoCol .collection, .threeCol .collection { background: var(--flk-neutral); border: 1px solid var(--flk-gray-mid); border-radius: var(--flk-radius); } /* ============================================================ 6. LINKS Tracks the accent (blue for now). Help Scout's native "Link color" setting also covers article links; this keeps the homepage links consistent. On rebrand, point these at var(--flk-lilac-link) for an AA-safe lilac. ============================================================ */ a, .article-list a, #fullArticle a { color: var(--flk-accent); } a:hover { color: var(--flk-accent-hover); } /* Article-count links inside cards ("6 articles") — weighted up slightly so they read as a deliberate accent. ↓ VERIFY the selector with your browser inspector and adjust. */ .category .count, .category-list .category a { color: var(--flk-accent); font-weight: 500; } /* ============================================================ 7. ACCESSIBLE FOCUS STATES (brand: "always check accessibility") ============================================================ */ a:focus-visible, button:focus-visible, .search-query:focus-visible { outline: 2px solid var(--flk-accent); outline-offset: 2px; } /* ============================================================ 8. OPTIONAL TIDY-UPS ============================================================ */ /* Hide the "Last updated" date on articles — uncomment to enable. .articleFoot time.lu { display: none; } */ /* ============================================================ 9. TOP NAVIGATION — bold links + TEXT underline on active Tabs are Semi Bold; the active tab (and hover) underlines the text itself, offset just below the letters — like the main website — rather than a line across the bottom of the tab. The Contact pill (href="#") is excluded so it keeps its border. ============================================================ */ #fullHeader nav a, #fullHeader ul a, header nav a, header ul a, .navbar .nav > li > a { font-weight: 600; /* Semi Bold */ } /* Text underline on hover + active browse tab (not the Contact pill). */ .navbar .nav > li > a[href*="/collection/"]:hover, .navbar .nav > li.active > a[href*="/collection/"], .navbar .nav > .active > a[href*="/collection/"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* Hide the theme's bottom-of-tab indicator (the little caret/line under the active tab) so only the clean text underline shows. If a caret persists, it's a different element — send me the active tab's HTML and I'll target it exactly. */ .navbar .nav > .active > a::after, .navbar .nav > .active::after, .navbar .nav > li.active::before { display: none !important; } .navbar .nav > .active > a { border-bottom: none; box-shadow: none; } /* ============================================================ 10. HOMEPAGE COLLECTION ORDER (optional — see note below) ------------------------------------------------------------ The reliable way to reorder these is to drag the collections in Manage > Docs > [site] > Collections — that reorders the nav AND the homepage together and survives theme updates. If you'd rather force it in CSS, uncomment the block below. It keys off each collection's link, so order doesn't depend on the markup order. NOTE: `order` only takes effect if the collections' shared parent is flex/grid — confirm the parent in your inspector and set its display there if needed. ------------------------------------------------------------ .collections, .docs-collections, #docsArticleList { display: flex; flex-direction: column; } .collection:has(a[href*="150-getting-started"]) { order: 1; } .collection:has(a[href*="156-embed-customise"]) { order: 2; } .collection:has(a[href*="159-content-moderation"]) { order: 3; } .collection:has(a[href*="51-account-billing"]) { order: 4; } --- Hide any stray collection block from the homepage: --- .collection:has(a[href*="source-default"]) { display: none; } ============================================================ */ /* ============================================================ 11. LOGO — vertical centring + shift left for tab room The theme's Bootstrap navbar is float-based; forcing it to flex breaks the bar, so we leave display/float alone and only touch the logo's own padding/margin. - 21/21 top/bottom evens out the theme's 31/11 (which sat the new logo low). Same total height, so nothing else shifts. - Removing the left padding and pulling it left frees room on the right so the tabs (incl. the admin-only "Source Default Category") stop overlapping the logo. Increase the negative margin if you need even more room. ============================================================ */ .navbar .brand { padding-top: 21px; padding-bottom: 21px; padding-left: 0; margin-left: -52px; /* shift the logo left; nudge as needed */ } /* ============================================================ 12. HOMEPAGE-ONLY NAV (logo + Contact only) On the main page the collection tabs just repeat the cards below, so we hide them there — logo stays left, Contact sits on the right. Collection and article pages are untouched and keep the full nav for jumping between sections. ------------------------------------------------------------ SCOPE: the big search hero (#docsSearch) renders ONLY on the homepage, so body:has(#docsSearch) targets the homepage and nothing else. (If a future build tags the homepage with a class instead, e.g. .home, swap the scope to that.) ============================================================ */ /* Hide the collection tabs on the homepage only (hide the whole

so no empty gaps remain). The lone Contact is floated right by the rule a little further down. */ body:has(#docsSearch) .navbar .nav > li:has(> a[href*="/collection/"]) { display: none; } /* (No duplicate-guard here: Contact isn't the last node in the menu markup, so :not(:last-child) would hide Contact itself. If a real duplicate ever appears, delete it in Manage > Docs.) */ /* Centre Contact vertically and pin it to the content's right edge. Floating it sat it low in the tall hero bar; absolute centring on the container is reliable whatever the bar height. The flex line gives the (otherwise floated) Contact a real height so the translateY(-50%) centres it properly. */ body:has(#docsSearch) .navbar, body:has(#docsSearch) .navbar .container { position: relative; } body:has(#docsSearch) .navbar .nav { position: absolute; top: 50%; right: 0; /* nudge (e.g. 16px) to inset from the edge */ transform: translateY(-50%); float: none; margin: 0; display: flex; align-items: center; } /* The inner-page nudge isn't needed once Contact is centred here. */ body:has(#docsSearch) .navbar .nav > li > a[href="#"] { margin-top: 0; } /* ============================================================ 13. CONTACT BUTTON — compact outlined pill with a mail icon Overrides the theme's line-height:32px and 11px vertical padding (the reason it looked too tall), so it sits as a neat pill centred on the bar. ============================================================ */ .navbar .nav > li > a[href="#"] { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; /* INNER PAGES: line Contact up with the tab labels. Increase = lower, decrease = higher. */ padding: 7px 16px; line-height: 1; /* overrides .navbar .nav a { line-height:32px } */ border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 999px; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; } .navbar .nav > li > a[href="#"]::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain; } .navbar .nav > li > a[href="#"]:hover { background-color: rgba(255, 255, 255, 0.14); border-color: #ffffff; } /* ============================================================ 14. HOMEPAGE COLLECTIONS — stronger hierarchy + section icons Scoped to the homepage only (body:has(#docsSearch)); collection and article pages are left completely untouched. Additive only, so if a selector misses, nothing breaks — the styling just won't apply, and we can adjust. ============================================================ */ /* Heavier collection (section) headings so they stand apart from the lighter category card titles — a clear browse hierarchy. */ body:has(#docsSearch) .collection-category > h2, body:has(#docsSearch) .collection-category > h2 > a { font-weight: 700; letter-spacing: -0.02em; } /* A small icon before each collection heading to anchor the eye. Icons are CSS masks tinted with currentColor, so they match the heading colour. Keyed by collection link → only these four get one (no stray empty boxes on any other collection). */ body:has(#docsSearch) .collection-category a[href*="150-getting-started"]::before, body:has(#docsSearch) .collection-category a[href*="156-embed-customise"]::before, body:has(#docsSearch) .collection-category a[href*="159-content-moderation"]::before, body:has(#docsSearch) .collection-category a[href*="51-account-billing"]::before { content: ""; display: inline-block; width: 0.92em; height: 0.92em; margin-right: 0.45em; vertical-align: -0.12em; background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } /* Getting Started → play/start */ body:has(#docsSearch) .collection-category a[href*="150-getting-started"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E"); } /* Embed & Customise → code brackets */ body:has(#docsSearch) .collection-category a[href*="156-embed-customise"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E"); } /* Content & Moderation → shield */ body:has(#docsSearch) .collection-category a[href*="159-content-moderation"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E"); } /* Account & Billing → card */ body:has(#docsSearch) .collection-category a[href*="51-account-billing"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E"); } /* Reduced-motion: disable hover transitions for those who ask. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }