/* ============================================================ Knowledge base article hero Same card design as the section hero in knowledge-hub-section.css (.khs-hero*), but full-bleed: the colour runs edge to edge and the text is inset with the same horizontal padding as #content-section (6% left / 5% right, from blog/single-blog-v2.css), so the hero copy lines up with the article copy below it instead of sitting in its own centred box. Duplicated rather than reused because knowledge-hub-section.css themes the itself (.khs-body sets the page background and margins), which would repaint the whole article page. If you change the section hero, change this too. Which theme applies is decided at runtime: articles are served as one static page for every entry point, so the source travels in ?from= and head.html turns it into a class on before first paint. Essentials is the default, so its links carry no parameter — only Performance & Recharge links do. ============================================================ */ /* Selector carries the id as well: helpdesk-single-page.css still styles #hero-section-helpdesk with 100px of vertical padding for the old hero, which the CMS preview continues to use. An id beats a class, so the class alone would lose. */ #hero-section-helpdesk.hd-kbhero { --khs-hero-bg: var(--Core-Violet); padding: 0; background-color: transparent; } :root.kb-from-recharge #hero-section-helpdesk.hd-kbhero { --khs-hero-bg: #2D7A5E; } /* Matches #content-section in blog/single-blog-v2.css */ .hd-kbhero__inner { padding-left: 6%; padding-right: 5%; } /* ---------- Full-bleed colour band ---------- */ .hd-kbhero__band { width: 100%; max-width: none; background: var(--khs-hero-bg); } .hd-kbhero__band .hd-kbhero__inner { padding-top: 30px; padding-bottom: 52px; } /* Back link sits on the colour now, so it is white rather than themed. */ .hd-kbhero__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; transition: opacity 0.2s; } .hd-kbhero__back:hover { opacity: 0.75; color: #fff; } .hd-kbhero__back svg { flex-shrink: 0; } /* text-align is declared explicitly: style.css centres headings globally and the section templates never load it, which is why the same markup looks left-aligned there. */ .hd-kbhero__title { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: #fff; text-align: left; margin: 0 0 12px; line-height: 1.2; } .hd-kbhero__desc { font-size: 15px; color: rgba(255, 255, 255, 0.88); line-height: 1.6; text-align: left; margin: 0; max-width: 680px; } .hd-kbhero__search { margin-top: 26px; max-width: 620px; } /* ---------- Quick access chips ---------- Same four entries as the hub's kh-quick-access. */ .hd-kbhero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .hd-kbhero__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; transition: background 0.2s; } .hd-kbhero__chip:hover { background: rgba(255, 255, 255, 0.2); } /* 26px matches .kh-quick-access__item-icon on the hub */ .hd-kbhero__chip img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } /* Performance & Recharge shows its own two entries in exactly the same chips — no variant of its own. The translucent-white surface takes the hero colour from --khs-hero-bg, so the green theme needs no rule here. */ /* ---------- Source switching ---------- Both variants ship in the markup and CSS picks one, because the head script runs before exists and so cannot swap text nodes. */ .hd-kbhero .kb-src-recharge { display: none; } :root.kb-from-recharge .hd-kbhero p.kb-src-recharge { display: block; } :root.kb-from-recharge .hd-kbhero a.kb-src-recharge { display: inline-flex; } :root.kb-from-recharge .hd-kbhero div.kb-src-recharge { display: flex; } :root.kb-from-recharge .hd-kbhero .kb-src-essentials { display: none; } @media (max-width: 1000px) { .hd-kbhero__inner { padding-left: 20px; padding-right: 20px; } .hd-kbhero__band .hd-kbhero__inner { padding-top: 22px; padding-bottom: 32px; } .hd-kbhero__back { margin-bottom: 18px; } } /* Two columns on phones, same breakpoint and grid as .kh-quick-access__items on the hub. Flex-wrap would leave ragged widths; grid keeps the four equal, which is what makes the wrapped two-line labels line up. */ @media (max-width: 600px) { .hd-kbhero__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .hd-kbhero__chip { padding: 12px 14px; line-height: 1.3; /* labels wrap to two lines at this width */ } .hd-kbhero__chip span { text-align: left; } /* Repeated at the switch's specificity: the source-switching rule above sets display on the container explicitly, so the plain class selector would lose and Recharge's chips would stay flex while Essentials' become a grid. */ :root.kb-from-recharge .hd-kbhero div.kb-src-recharge { display: grid; } }