blocks * in Zendesk article HTML. In HubSpot, replicate with custom classes. */ /* Note box — pink/red style (matches Zendesk "Note" callout) */ .hs-kb-article .note, .knowledgebase-post .note, p.note, .hs-kb-article .callout-info, .hs-kb-article [data-callout="info"] { background-color: #fff0f1; border: 1px solid #f5b5ba; border-left: 4px solid #cc3340; padding: 16px 20px 16px 50px; margin: 1.5em 0; border-radius: 4px; font-size: 0.944rem; color: #8c232c; position: relative; } /* Note icon (warning triangle) */ .hs-kb-article .note::before, .knowledgebase-post .note::before, p.note::before, .hs-kb-article .callout-info::before { content: '\26A0'; /* ⚠ */ position: absolute; left: 18px; top: 16px; font-size: 1.1rem; line-height: 1; } /* Warning box */ .hs-kb-article .warning, .hs-kb-article .callout-warning, .hs-kb-article [data-callout="warning"] { background-color: #F9FAFB; border-left: 4px solid var(--zello-warning-accent); padding: 1rem 1.25rem; margin: 1.5em 0; border-radius: 0 6px 6px 0; font-size: 0.944rem; color: var(--zello-text); } .hs-kb-article .warning::before, .hs-kb-article .callout-warning::before { display: none; } /* Tip box (optional -- uses tertiary/blue) */ .hs-kb-article .tip, .hs-kb-article .callout-tip, .hs-kb-article [data-callout="tip"] { background-color: #EFF6FF; border-left: 4px solid var(--zello-tertiary); padding: 1rem 1.25rem; margin: 1.5em 0; border-radius: 0 6px 6px 0; font-size: 0.944rem; color: var(--zello-text); } /* Audience notice — blue info box (matches Zendesk info callout) */ .hs-kb-article .audience-notice, .knowledgebase-post .audience-notice, .audience-notice { display: block; background-color: #fff; border: 1px solid #d8dcde; border-left: 4px solid #0250C5; padding: 20px 40px; margin: 1.5em 0; border-radius: 4px; font-size: 0.944rem; color: var(--zello-text); } /* ========================================================================== 12. TABLE OF CONTENTS SIDEBAR ========================================================================== */ /* * Zendesk: Right sidebar, sticky at top (offset 72px for header). * Heading "In this article", ordered list of h2 anchor links. * .table-of-contents -- hidden on mobile, shown lg+. */ .hs-kb-article-sidebar, .hs-kb-table-of-contents { flex: 0 0 var(--zello-sidebar-width); max-width: var(--zello-sidebar-width); } .hs-kb-table-of-contents__inner, .hs-kb-article-sidebar .sidebar-toc { position: sticky; top: calc(var(--zello-header-height) + 1rem); padding-top: 1rem; } .hs-kb-table-of-contents h3, .hs-kb-article-sidebar .toc-title { font-size: 1.111rem; font-weight: 600; color: var(--zello-heading); margin-top: 1.5rem; margin-bottom: 0.75rem; } .hs-kb-table-of-contents ol, .hs-kb-table-of-contents ul { list-style: none; padding: 0; margin: 0; } .hs-kb-table-of-contents li { margin-bottom: 0; } .hs-kb-table-of-contents a, .hs-kb-table-of-contents .nav-link { display: block; padding: 0.375rem 0.75rem; font-size: 0.889rem; color: var(--zello-text); text-decoration: none; border-radius: 4px; transition: background-color 0.15s ease, color 0.15s ease; } .hs-kb-table-of-contents a:hover, .hs-kb-table-of-contents .nav-link:hover { background-color: var(--zello-gray-100); color: var(--zello-heading); text-decoration: none; } .hs-kb-table-of-contents a.active, .hs-kb-table-of-contents .nav-link.active { background-color: var(--zello-gray-200); color: var(--zello-heading); font-weight: 500; } /* Hide sidebar on mobile / tablet */ @media (max-width: 1023px) { .hs-kb-article-sidebar, .hs-kb-table-of-contents { display: none; } } /* ========================================================================== 13. RELATED ARTICLES & ARTICLE NAVIGATION ========================================================================== */ /* * Zendesk: "Related articles" section at bottom, simple list. * Previous/Next article links in a two-column row. */ .hs-kb-article .related-articles, .hs-kb-related-articles { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--zello-gray-200); } .hs-kb-related-articles h2, .related-articles-title { font-size: 1.333rem; font-weight: 700; color: var(--zello-heading); margin-bottom: 1rem; } .hs-kb-related-articles ul { list-style: none; padding: 0; margin: 0; } .hs-kb-related-articles li { margin-bottom: 0.5rem; } .hs-kb-related-articles a { color: var(--zello-link); font-size: 1rem; } /* Prev / Next navigation */ .hs-kb-article-nav, .hs-kb-prev-next { display: flex; justify-content: space-between; margin: 2rem 0; gap: 1rem; } .hs-kb-article-nav a { color: var(--zello-link); font-size: 1rem; } .hs-kb-article-nav h4 { font-size: 0.889rem; color: var(--zello-gray-600); margin-bottom: 0.5rem; } /* ========================================================================== 14. SOCIAL SHARING ========================================================================== */ /* * Zendesk: .share list with icon links (Facebook, X, LinkedIn). * SVG icons, fill-current color. */ .hs-kb-article .share, .hs-kb-social-share { display: flex; list-style: none; gap: 0.75rem; padding: 0; margin: 1.5rem 0; } .hs-kb-social-share a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--zello-gray-600); transition: color 0.15s ease; } .hs-kb-social-share a:hover { color: var(--zello-primary); } .hs-kb-social-share svg { width: 14px; height: 14px; fill: currentColor; } /* ========================================================================== 15. CATEGORY / SECTION CARDS (Home Page) ========================================================================== */ /* * Zendesk: .card.card-body with white bg, subtle border, hover turns * text to primary or inverts bg. Transition-fast. * Grid: 2 columns for content blocks. */ .hs-kb-home-list .category-card, .hs-kb-category-list .hs-kb-category-card, .hs-kb-section-list .hs-kb-section-card { background-color: #fff; border: 1px solid var(--zello-gray-300); border-radius: 8px; padding: 1.5rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .hs-kb-home-list .category-card:hover, .hs-kb-category-list .hs-kb-category-card:hover, .hs-kb-section-list .hs-kb-section-card:hover { border-color: var(--zello-primary); box-shadow: 0 2px 8px rgba(233, 93, 47, 0.1); } .hs-kb-category-card h2, .hs-kb-section-card h2 { font-size: 1.333rem; font-weight: 600; margin-bottom: 0.5rem; } .hs-kb-category-card h2 a, .hs-kb-section-card h2 a { color: var(--zello-heading); text-decoration: none; } .hs-kb-category-card h2 a:hover, .hs-kb-section-card h2 a:hover { color: var(--zello-primary); text-decoration: none; } .hs-kb-category-card p, .hs-kb-section-card p { color: var(--zello-text); font-size: 0.944rem; } /* ========================================================================== 16. CONTACT / CTA BLOCKS ========================================================================== */ /* * Zendesk: Contact cards with gray-200 bg, icon left, text right. * "Get in touch" heading, email contact block. */ .hs-kb-contact-block, .hs-cta-wrapper { background-color: var(--zello-gray-200); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .hs-kb-contact-block h3 { font-size: 1.111rem; font-weight: 600; color: var(--zello-heading); margin-bottom: 0.5rem; } .hs-kb-contact-block p { font-size: 0.889rem; color: var(--zello-text); } /* ========================================================================== 17. FOOTER — zello.com mega-footer ========================================================================== */ .footer-container-wrapper, footer.footer { background-color: var(--zello-footer-bg) !important; color: var(--zello-footer-link); border-top: 1px solid #E5E7EB; padding: 0; } .footer-container-wrapper .footer-container { max-width: var(--zello-container-width); margin: 0 auto; padding: 0 1rem; } /* ========================================================================== 18. BACK TO TOP BUTTON ========================================================================== */ .zello-back-to-top { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1000; width: 40px; height: 40px; background-color: #fff; border: 1px solid var(--zello-gray-300); border-radius: 8px; padding: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease, box-shadow 0.15s ease; } .zello-back-to-top.visible { opacity: 1; visibility: visible; } .zello-back-to-top:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .zello-back-to-top svg { width: 18px; height: 18px; fill: var(--zello-text); } /* ========================================================================== 19. BREADCRUMBS ========================================================================== */ .hs-kb-breadcrumbs, .breadcrumbs { font-size: 0.833rem; color: var(--zello-gray-600); margin-bottom: 1rem; } .hs-kb-breadcrumbs a { color: var(--zello-gray-600); text-decoration: none; } .hs-kb-breadcrumbs a:hover { color: var(--zello-primary); } .hs-kb-breadcrumbs .separator { margin: 0 0.375rem; color: var(--zello-gray-600); } /* ========================================================================== 20. ARTICLE VOTING (hidden in Zendesk theme, but styled just in case) ========================================================================== */ /* * Zendesk setting: show_article_voting = false * But if HubSpot has built-in voting/feedback, style it to match. */ .hs-kb-article-feedback { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--zello-gray-200); font-size: 0.944rem; color: var(--zello-text); } .hs-kb-article-feedback button, .hs-kb-article-feedback .feedback-btn { font-family: var(--zello-font-family); font-size: 0.889rem; font-weight: 500; padding: 0.5rem 1rem; border: 1px solid var(--zello-gray-300); border-radius: 6px; background-color: #fff; color: var(--zello-text); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .hs-kb-article-feedback button:hover { border-color: var(--zello-primary); background-color: var(--zello-gray-100); } /* ========================================================================== 21. POPULAR KEYWORDS / TAGS (Home) ========================================================================== */ /* * Zendesk: Badge-style keyword pills (rounded, translucent bg, blur). * "Popular searches: iOS, Android, Management Console, Windows" */ .hs-kb-popular-keywords, .hs-kb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.5rem 0; } .hs-kb-popular-keywords .tag, .hs-kb-tags a { display: inline-block; font-size: 0.889rem; font-weight: 400; padding: 0.375rem 0.875rem; border-radius: 50px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--zello-text); text-decoration: none; transition: background-color 0.15s ease; } .hs-kb-popular-keywords .tag:hover, .hs-kb-tags a:hover { background-color: rgba(255, 255, 255, 0.9); } /* ========================================================================== 22. SIDEBAR CATEGORY / SECTION LIST ========================================================================== */ /* * Zendesk: Left sidebar (hidden on this article page but exists in templates). * Collapsible category > section > article tree navigation. */ .hs-kb-sidebar, .hs-kb-left-sidebar { flex: 0 0 var(--zello-sidebar-width); max-width: var(--zello-sidebar-width); } .hs-kb-sidebar ul { list-style: none; padding: 0; margin: 0; } .hs-kb-sidebar li a { display: block; padding: 0.5rem 0; font-size: 1rem; color: var(--zello-text); text-decoration: none; font-weight: 500; } .hs-kb-sidebar li a:hover { color: var(--zello-heading); } .hs-kb-sidebar li a.active, .hs-kb-sidebar li.active > a { text-decoration: underline; font-weight: 600; color: var(--zello-heading); } /* Nested section list */ .hs-kb-sidebar ul ul { padding-left: 1rem; } .hs-kb-sidebar ul ul a { font-size: 0.889rem; font-weight: 400; padding: 0.375rem 0; } /* ========================================================================== 23. BUTTONS (Generic) ========================================================================== */ /* * Zendesk: .button, .button-outline, .button-sm classes. * Outline style with border, bg white. */ .hs-kb-article .button, .hs-button, .hs-kb-button { font-family: var(--zello-font-family); font-size: 0.889rem; font-weight: 500; padding: 0.625rem 1.25rem; border-radius: 6px; border: 1px solid var(--zello-primary); background-color: var(--zello-primary); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; transition: background-color 0.15s ease, border-color 0.15s ease; } .hs-kb-article .button:hover, .hs-button:hover, .hs-kb-button:hover { background-color: var(--zello-primary-dark); border-color: var(--zello-primary-dark); color: #fff; text-decoration: none; } /* Outline variant */ .hs-button--outline, .hs-kb-button--outline { background-color: #fff; color: var(--zello-primary); border-color: var(--zello-gray-300); } .hs-button--outline:hover, .hs-kb-button--outline:hover { background-color: var(--zello-gray-100); border-color: var(--zello-primary); color: var(--zello-primary); } /* ========================================================================== 24. FORM FIELDS (Search, Contact) ========================================================================== */ .hs-kb-article input[type="text"], .hs-kb-article input[type="email"], .hs-kb-article textarea, .hs-form-field input, .hs-form-field textarea, .hs-form-field select { font-family: var(--zello-font-family); font-size: 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--zello-gray-300); border-radius: 6px; background-color: #fff; color: var(--zello-text); outline: none; transition: border-color 0.2s ease; width: 100%; } .hs-form-field input:focus, .hs-form-field textarea:focus, .hs-form-field select:focus { border-color: var(--zello-primary); box-shadow: 0 0 0 3px rgba(233, 93, 47, 0.15); } .hs-form-field label { font-size: 0.889rem; font-weight: 600; color: var(--zello-heading); margin-bottom: 0.375rem; display: block; } /* ========================================================================== 25. RESPONSIVE ADJUSTMENTS ========================================================================== */ /* Tablet (below 1024px) */ @media (max-width: 1023px) { :root { --zello-base-font-size: 16px; } h1, .hs-kb-article h1 { font-size: 1.875rem; } h2, .hs-kb-article h2 { font-size: 1.5rem; } .hs-kb-header h1 { font-size: 2rem; } .hs-kb-article-wrapper { flex-direction: column; } .hs-kb-article { max-width: 100%; } /* Stack content + sidebar vertically on tablet — aggressive overrides */ [class*="hs-kb-content-wrapper"], .hs-kb-content-wrapper--sidebar, .hs-kb-content-wrapper--sidebar.-sidebar-left, .hs-kb-content-wrapper--sidebar.-sidebar-right { flex-direction: column !important; display: flex !important; grid-template-columns: 1fr !important; } /* Sidebar goes below content, full width */ aside[class*="hs-kb-sidebar"], .hs-kb-sidebar, aside.hs-kb-sidebar { width: 100% !important; max-width: 100% !important; flex: none !important; position: static !important; border-left: none !important; border-right: none !important; border-inline-start: none !important; border-inline-end: none !important; border-top: 1px solid var(--zello-gray-200) !important; padding: 1.5rem 0 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; margin-top: 1.5rem !important; max-height: none !important; overflow-y: visible !important; order: 2 !important; min-width: 0 !important; flex-basis: auto !important; } /* Content area takes full width, comes first */ div[class*="hs-kb-content"], section.hs-kb-content, .hs-kb-content, .hs-kb-category-listing { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; order: 1 !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } /* Header: hide inline search, keep mobile menu */ .header__search-inline { display: none !important; } /* Header nav: stack if needed */ .header__wrapper--bottom { flex-wrap: wrap !important; } } /* Mobile (below 768px) */ @media (max-width: 767px) { h1, .hs-kb-article h1 { font-size: 1.5rem; word-break: break-word !important; overflow-wrap: anywhere !important; } h2, .hs-kb-article h2 { font-size: 1.25rem; } h3, .hs-kb-article h3 { font-size: 1.1rem; } .hs-kb-header h1 { font-size: 1.5rem; } .hs-kb-header { padding: 1rem 0 0; } .header-container-wrapper { height: auto; min-height: var(--zello-header-height); } .hs-kb-category-nav ul { padding: 0 0.5rem; } .footer-container-wrapper { padding: 1.5rem 0; } footer .footer-nav { flex-direction: column; gap: 0.75rem; } /* NUCLEAR: force column layout on mobile — override everything */ .hs-kb-content-wrapper--sidebar, .hs-kb-content-wrapper--sidebar.-sidebar-left, .hs-kb-content-wrapper--sidebar.-sidebar-right, [class*="hs-kb-content-wrapper"] { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Override HubSpot template responsive-spacing (max-width:1000px + 24px padding) */ .hs-kb-content-wrapper--responsive-spacing { max-width: 100% !important; padding: 0 0.75rem !important; box-sizing: border-box !important; } #main-content { padding: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } /* Remove gray boxed background on mobile — edge-to-edge white */ body, .hs-kb-main-body, .hs-kb-section-body { background-color: #fff !important; } /* Sidebar: full width below content */ .hs-kb-sidebar, aside.hs-kb-sidebar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; order: 2 !important; position: static !important; border-left: none !important; border-right: none !important; border-inline-start: none !important; border-inline-end: none !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; } /* Content: full width, first — kill template padding + negative margin */ section.hs-kb-content, .hs-kb-content, .hs-kb-content.-sidebar-left, .hs-kb-category-listing { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; order: 1 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; margin-top: 0 !important; } /* Article content: prevent text overflow */ .knowledgebase-post, .hs-kb-content, .hs-kb-article { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } /* Images must fit mobile screen */ .knowledgebase-post img { max-width: 100% !important; height: auto !important; } /* Tables: allow horizontal scroll */ .knowledgebase-post table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* Breadcrumbs: compact on mobile — kill template 24px margin */ .hs-kb-breadcrumbs { flex-wrap: wrap !important; font-size: 0.8rem !important; gap: 0.25rem !important; } .hs-kb-breadcrumb-container { padding: 0.5rem 0 0.5rem !important; margin-bottom: 0 !important; position: relative !important; z-index: auto !important; overflow: visible !important; } /* Search bar: tighter on article/category pages — kill template 100px padding */ .hs-kb-search-input-wrapper { padding: 0.5rem 0.75rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; margin-bottom: 0 !important; border-radius: 0 !important; } /* Hide "How can we help?" label on mobile article/category pages — saves space */ .hs-kb-search-input-wrapper:not(.zello-hero) .hs-search-field__label { display: none !important; } /* Article date + title: reduce vertical whitespace */ .knowledgebase-post h1 { margin-bottom: 0.5rem !important; margin-top: 0 !important; } .hs-kb-article-date, .hs-kb-article .article-date { margin-bottom: 0.125rem !important; margin-top: 0 !important; } /* Row/section padding: kill unnecessary vertical spacing */ .dnd-section, .row-fluid-wrapper { padding-left: 0 !important; padding-right: 0 !important; } .container-fluid.article-wrapper { padding: 0 !important; } /* Header: compact on mobile — override template 24px padding */ .header__bottom { padding: 0.5rem 0.75rem !important; } .header__wrapper--bottom { padding: 0 !important; } .header__top { padding: 0 0.5rem !important; } .header__wrapper--top { padding: 0 !important; } .header__logo img { height: 28px !important; } .header__logo-company-name { font-size: 0.95rem !important; } /* Desktop nav: hide on mobile */ .header__menu--desktop { display: none !important; } /* Contact button: smaller */ a.header__button { font-size: 0.8rem !important; padding: 0.4rem 0.75rem !important; } /* Page container: minimal side padding */ .hs-kb-main, .hs-kb-article-container, #page-container { padding: 0 0.25rem !important; } /* Category listing: tighter spacing */ .hs-kb-category-listing h1 { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; padding-bottom: 0.5rem !important; } .hs-kb-category-listing p { margin-bottom: 0.5rem !important; } /* Category article list: bigger tap targets on mobile */ .hs-kb-category-article-list__link { padding: 0.75rem 0 !important; font-size: 1rem !important; } .hs-kb-category-article-list--bordered li { padding: 0.25rem 0 !important; } /* Hide empty list items that create orphan divider lines */ .hs-kb-category-article-list--bordered li:empty { display: none !important; border: none !important; } /* Subcategory headings: tighter on mobile */ .hs-kb-category-listing h2 { font-size: 1.15rem !important; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; } /* Sidebar accordion at bottom: more breathing room, bigger tap targets */ .hs-kb-category-accordion_link { padding: 0.65rem 0.75rem !important; font-size: 0.925rem !important; } /* "See more" toggle: bigger tap target */ .hs-kb-category-article-list__toggle { padding: 0.75rem 0 !important; font-size: 0.95rem !important; } } /* ========================================================================== 26. PRINT STYLES ========================================================================== */ @media print { .header-container-wrapper, .footer-container-wrapper, .hs-kb-table-of-contents, .hs-kb-article-sidebar, .hs-kb-social-share, .back-to-top, .hs-kb-article-nav, .hs-kb-article-feedback { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .hs-kb-article { max-width: 100%; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } } /* ========================================================================== 27. HUBSPOT ELEVATE THEME VARIABLE OVERRIDES ========================================================================== */ /* * If using the HubSpot "Elevate" KB theme, override its CSS custom properties * to inject Zello brand values without touching HubL template files. */ :root { /* Map Zello colors onto Elevate color tokens */ --hsElevate--color--base--1: #FFFFFF; --hsElevate--color--base--2: #F7FAFC; --hsElevate--color--base--3: #171E28; --hsElevate--color--accent--1: #E95D2F; --hsElevate--color--accent--2: #F5BB3B; --hsElevate--color--accent--3: #0250C5; /* Typography */ --hsElevate--body__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--body__fontSize: 1.125rem; /* 18px */ --hsElevate--body__lineHeight: 1.55; --hsElevate--body__fontWeight: 400; --hsElevate--h1__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h1__fontSize: 2.25rem; --hsElevate--h1__fontWeight: 700; --hsElevate--h2__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h2__fontSize: 1.667rem; --hsElevate--h2__fontWeight: 700; --hsElevate--h3__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h3__fontSize: 1.333rem; --hsElevate--h3__fontWeight: 600; --hsElevate--h4__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h4__fontSize: 1.111rem; --hsElevate--h4__fontWeight: 600; --hsElevate--h5__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h5__fontSize: 1rem; --hsElevate--h5__fontWeight: 600; --hsElevate--h6__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--h6__fontSize: 0.889rem; --hsElevate--h6__fontWeight: 600; /* Links */ --hsElevate--link--primary__fontColor: #E95D2F; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__hover--fontColor: #D14E23; --hsElevate--link--primary__hover--textDecoration: underline; /* Section backgrounds */ --hsElevate--section--lightSection--1__backgroundColor: #FFFFFF; --hsElevate--section--lightSection--1__textColor: #455056; --hsElevate--section--lightSection--1__accentColor: #E95D2F; --hsElevate--section--lightSection--2__backgroundColor: #F7FAFC; --hsElevate--section--lightSection--2__textColor: #455056; --hsElevate--section--lightSection--2__accentColor: #F5BB3B; --hsElevate--section--darkSection--1__backgroundColor: #171E28; --hsElevate--section--darkSection--1__textColor: #FFFFFF; --hsElevate--section--darkSection--1__accentColor: #E95D2F; /* Buttons */ --hsElevate--button--primary__backgroundColor: #E95D2F; --hsElevate--button--primary__hover--backgroundColor: #D14E23; --hsElevate--button--primary__textColor: #FFFFFF; --hsElevate--button--primary__borderRadius: 6px; --hsElevate--button--primary__borderColor: transparent; --hsElevate--button--primary__font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hsElevate--button--primary__fontWeight: 500; --hsElevate--button--secondary__backgroundColor: transparent; --hsElevate--button--secondary__hover--backgroundColor: #F7FAFC; --hsElevate--button--secondary__textColor: #E95D2F; --hsElevate--button--secondary__borderRadius: 6px; --hsElevate--button--secondary__borderColor: #E2E8F0; /* Layout / Spacing */ --hsElevate--contentWrapper--wide__maxWidth: 1296px; --hsElevate--contentWrapper--medium__maxWidth: 1120px; --hsElevate--contentWrapper--narrow__maxWidth: 768px; /* Heading line height */ --hsElevate--heading__lineHeight: 1.2; } /* ========================================================================== 30. HUBSPOT KB - ACTUAL MARKUP FIXES (from live HTML analysis) ========================================================================== */ /* -- kb-body-wrapper: the outermost KB container ----------------------- */ .kb-body-wrapper { font-family: var(--zello-font-family); color: var(--zello-text); background-color: var(--zello-white); } /* -- Search bar: center and widen -------------------------------------- */ .hs-kb-search-input-wrapper { max-width: var(--zello-container-width); margin: 0 auto; padding: 1.5rem 1rem; background: var(--zello-gray-100); border-radius: 8px; } .hs-search-field { max-width: 600px; margin: 0 auto; } .hs-search-field__input { font-family: var(--zello-font-family) !important; font-size: 1rem !important; padding: 0.75rem 1rem !important; border: 1px solid var(--zello-gray-300) !important; border-radius: 6px !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .hs-search-field__input:focus { border-color: var(--zello-primary) !important; box-shadow: 0 0 0 3px rgba(233, 93, 47, 0.15) !important; outline: none !important; } .hs-search-field__label { font-family: var(--zello-font-family); font-size: 1.25rem; font-weight: 600; color: var(--zello-heading); display: block; margin-bottom: 0.5rem; text-align: center; } /* -- Breadcrumbs ------------------------------------------------------- */ .hs-kb-breadcrumb-container { padding: 0.75rem 0; } .hs-kb-breadcrumbs { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.889rem; color: var(--zello-text-light); } .hs-kb-breadcrumb_item a { color: var(--zello-text-light); } .hs-kb-breadcrumb_item a:hover { color: var(--zello-primary); } /* -- Sidebar ----------------------------------------------------------- */ .hs-kb-sidebar { font-family: var(--zello-font-family); } .hs-kb-category_accordion_nav_list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .hs-kb-category_accordion_nav_list_item { margin-bottom: 0 !important; background: none !important; } .hs-kb-category-accordion_link { display: block; padding: 0.4rem 0.75rem; font-size: 0.875rem; color: var(--zello-text); border-radius: 4px; border-left: 2px solid transparent; transition: all 0.15s ease; text-decoration: none; background: none !important; } .hs-kb-category-accordion_link:hover { background-color: var(--zello-gray-100) !important; text-decoration: none; color: var(--zello-primary); } .hs-kb-category-accordion_link--active, .hs-kb-category_accordion_nav_list_item.hs-kb-category-accordion_link--active { background: none !important; } .hs-kb-category-accordion_link--active > .hs-kb-category-accordion_link, .hs-kb-category_accordion_nav_list_item.hs-kb-category-accordion_link--active > .hs-kb-category-accordion_link { background: none !important; color: var(--zello-primary); font-weight: 600; border-left-color: var(--zello-primary); } /* Subcategory links inside accordion */ .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list { padding-left: 0.75rem !important; margin-top: 0.125rem !important; } .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list .hs-kb-category-accordion_link { font-size: 0.825rem; padding: 0.3rem 0.75rem; color: var(--zello-text-light); } .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list .hs-kb-category-accordion_link--active > .hs-kb-category-accordion_link { color: var(--zello-primary); font-weight: 500; } /* -- Article content --------------------------------------------------- */ .hs-kb-content { font-family: var(--zello-font-family); } .knowledgebase-post { font-family: var(--zello-font-family); font-size: var(--zello-base-font-size); line-height: 1.55; color: var(--zello-text); } .knowledgebase-post h1 { font-size: 1.875rem; font-weight: 700; color: var(--zello-heading); margin-top: 0; margin-bottom: 1.5rem; } .knowledgebase-post h2 { font-size: 1.5rem; font-weight: 700; color: var(--zello-heading); margin-top: 1.5rem; margin-bottom: 1rem; } .knowledgebase-post h3 { font-size: 1.25rem; font-weight: 700; color: var(--zello-heading); margin-top: 1.5rem; margin-bottom: 0.5rem; } /* -- Images (imported from Zendesk) ------------------------------------ */ .knowledgebase-post img, img.private-image, img.image-plugin-component { max-width: 800px; max-height: 800px; width: auto; height: auto; display: block; margin-left: auto; margin-right: auto; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; } /* -- Hide Zendesk GTM iframe that got imported as content -------------- */ .knowledgebase-post iframe[src*="googletagmanager"] { display: none !important; width: 0 !important; height: 0 !important; } .knowledgebase-post .embed-component:has(iframe[src*="googletagmanager"]) { display: none !important; } /* Fallback: hide any 640x360 iframe that looks like the GTM noscript tag */ .knowledgebase-post iframe[width="640"][height="360"] { display: none !important; } /* -- Hide "Tables can't be imported" placeholder messages -------------- */ /* Only hide via JS now — the CSS :has() selectors were too broad and hiding legitimate first-paragraph content in articles. */ /* JS also hides these as a fallback (see kb-head-html.html) */ .zello-hidden { display: none !important; } /* -- Hide Zendesk import metadata artifacts ----------------------------- */ /* "Updated [date]" line imported from Zendesk (usually a

) */ /* "This article is written for:" line */ /* These are hidden by JS too, but CSS catches the flash-of-unstyled-content */ /* -- TOC sidebar: sticky position --------------------------------------- */ .hs-kb-sidebar { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } /* -- Zendesk share links still in content: hide them ------------------- */ .knowledgebase-post a.share-facebook, .knowledgebase-post a.share-twitter, .knowledgebase-post a.share-linkedin { display: none !important; } /* Hide the UL containing old Zendesk share links at end of article */ .knowledgebase-post ul:last-child:has(a[class^="share-"]) { display: none !important; } /* -- Lists inside articles --------------------------------------------- */ .knowledgebase-post ul, .knowledgebase-post ol { padding-left: 1.5rem; margin-bottom: 1rem; } .knowledgebase-post li { margin-bottom: 0.5rem; line-height: 1.55; } /* -- Article feedback section ------------------------------------------ */ .hs-kb-feedback { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--zello-gray-200); } /* -- Footer social icons (flat, centered — matches Zendesk) ------------ */ /* (Main social follow styles are in section 32) */ /* -- Content wrapper spacing ------------------------------------------- */ .hs-kb-content-wrapper--responsive-spacing { max-width: var(--zello-container-width); margin: 0 auto; padding: 0 1.5rem; } /* -- Sidebar to right side (Zendesk-style) ----------------------------- */ .hs-kb-content-wrapper--sidebar.-sidebar-left { flex-direction: row-reverse !important; } /* Flip border/padding from right-edge to left-edge since sidebar moved right */ .hs-kb-sidebar.-sidebar-left { border-inline-end: 0 !important; border-inline-start: 1px solid var(--zello-gray-300) !important; padding-inline-end: 0 !important; padding-inline-start: 30px !important; } /* -- Article wrapper: white background card ---------------------------- */ .article-wrapper { background: #fff; border-radius: 8px; padding: 2rem; } /* -- DND rows: remove excess spacing ----------------------------------- */ .kb-article-row-0-padding .row-fluid-wrapper { margin-bottom: 0; } /* -- Empty h2 (imported but blank): hide ------------------------------- */ .knowledgebase-post h2:empty { display: none; } /* ========================================================================== 31. HEADER — ACTUAL HUBSPOT KB MARKUP OVERRIDES ========================================================================== */ /* * The KB uses @hubspot/cms-knowledge-base-theme header template. * Structure: .header > .header__container--left > .header__top + .header__bottom * Nav links and logo are injected via JS (see kb-head-html.html). */ .header { background-color: #FFFFFF; border-bottom: 1px solid var(--zello-gray-300); font-family: var(--zello-font-family); } /* Hide the language switcher top bar — Zendesk doesn't have this */ .header__top { display: none !important; } .header__wrapper { max-width: var(--zello-container-width); margin: 0 auto; } .header__wrapper--bottom { min-height: 60px; padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* Logo and nav should shrink-wrap, search gets the middle space */ .header__logo-col { flex: 0 0 auto; } /* Inline search — wide centered bar like Zendesk "How can we help?" */ .header__search-inline { flex: 1 1 auto !important; max-width: 480px !important; margin: 0 auto !important; } /* Higher specificity (doubled class) to beat the baked inline