/* KELA site CSS owned in the theme repo (moved out of Customizer → Additional CSS on 2026-09-08). Loaded after assets/style.css and style.css. */ /* KELA Marketing CMS — press release subtitle size and hero spacing (2026-09-05) */ .single-press_release .hero-press { padding-bottom: 20px !important; } .single-press_release .wp-block-group:has(> .relise-content-wrap) { padding-top: 12px !important; } .single-press_release .relise-content-wrap > .wp-block-group > h2.wp-block-heading, .single-press_release .relise-content-wrap .special-title > h3.wp-block-heading, .single-press_release .relise-content-wrap p > strong:only-child { font-size: clamp(18px, 1.5vw, 20px) !important; line-height: 1.4 !important; letter-spacing: -0.2px !important; font-weight: 500 !important; margin-top: 0 !important; } .fpg-post-item .documents-wrap-descr p { margin: 0 !important; } /* KELA Marketing CMS — newsroom card cosmetics (structure lives in the card template) (2026-09-05) */ .fpg-post-item .documents-wrap-descr { gap: 10px !important; align-items: center !important; } .fpg-post-item .documents-wrap-descr figure.wp-block-image { margin: 0 !important; flex: none; } .fpg-post-item .documents-wrap-descr figure.wp-block-image img { width: 28px !important; height: 28px !important; object-fit: contain; border-radius: 6px; display: block; background: #fff; } .fpg-post-item .documents-wrap-descr p, .fpg-post-item .documents-wrap-descr .wp-block-post-date { margin: 0 !important; } .fpg-post-item .documents-wrap-descr .wp-block-post-date::before { content: "·"; margin-right: 8px; } .fpg-post-item .kela-featured { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid #EF0A38; background: transparent; color: #EF0A38 !important; font-size: 11px !important; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; } .fpg-post-item .kela-featured:empty { display: none; } .fpg-post-item .special-title { margin: 0 !important; } .fpg-post-item .special-title h4 { margin: 0 !important; } .fpg-post-item .wp-block-buttons { margin-top: 2px !important; } .fpg-post-item .card-read-more-newsroom .wp-block-button__link { font-size: 12px !important; line-height: 1.4 !important; font-weight: 600; padding: 0 24px 0 0 !important; background-position: right center !important; } /* KELA Marketing Reactor — on-demand webinar hero: wider title, 16:9 video box (485px, same as the form column) with 8px corners, tighter gap to the content (2026-09-07) */ @media (min-width: 1025px) { .single-webinar .resource-ebook-hero .resource-ebook-text-block { max-width: 640px !important; } .single-webinar .resource-ebook-hero .video-placeholder { flex: 0 0 485px !important; width: 485px !important; max-width: 485px !important; } } .single-webinar .resource-ebook-hero { padding-bottom: 40px !important; } .single-webinar .resource-ebook-hero .video-placeholder figure.wp-block-image { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; } .single-webinar .resource-ebook-hero .video-placeholder figure.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 8px; display: block; } .single-webinar .resource-ebook-content { padding-top: 40px !important; } .single-webinar .resource-ebook-content > .resource-ebook-container { margin-top: 0 !important; } /* KELA Marketing Reactor — breadcrumbs above the webinar hero (single-webinar template); the strip overlaps the hero's top padding so the background runs to the top (2026-09-07) */ @media (min-width: 1025px) { /* the header is fixed (≈155px) and the hero clears it with margin-top 112px: start the strip there and pull the hero back up by the strip's height */ .single-webinar .webinar-breadcrumbs, .single-research .webinar-breadcrumbs { position: relative; z-index: 2; margin-top: 112px; padding-top: 64px !important; margin-bottom: -194px; } } @media (max-width: 1024px) { .single-webinar .webinar-breadcrumbs, .single-research .webinar-breadcrumbs { display: none; } } .single-webinar .webinar-breadcrumbs .breadcrumbs p, .single-research .webinar-breadcrumbs .breadcrumbs p { margin: 0; } .single-webinar .webinar-breadcrumbs .breadcrumbs figure, .single-research .webinar-breadcrumbs .breadcrumbs figure { margin: 0; } /* KELA Marketing Reactor — play button on the webinar video cover: red semi-transparent circle with the theme's white triangle; hides the old play_circle.png (not on staging) (2026-09-07) */ .single-webinar .video-placeholder.video_image .play-icon-container { width: 72px; height: 72px; border-radius: 50%; background-color: rgba(239, 10, 56, 0.8); background-position: calc(50% + 3px) center; background-size: 26px 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transition: background-color 0.2s; } .single-webinar .video-placeholder.video_image:hover .play-icon-container { background-color: rgba(239, 10, 56, 1); } .single-webinar .video-placeholder.video_image .play-icon-container img { display: none; } .single-webinar .video-placeholder .play-icon-container .message { transform: translateX(-50%) translateY(76px); } /* KELA Marketing Reactor — HubSpot form fills its box: the wrapper centres its children, so the injected container otherwise shrinks to its intrinsic width (2026-09-08) */ .resource-form-wrapper .hbspt-form, .resource-form-wrapper .hs-form { width: 100%; } /* KELA Marketing Reactor — research (report) pages: shorter hero, cover mock-up capped, tighter gap to the content (2026-09-09) */ .single-research .resource-ebook-hero { padding-bottom: 40px !important; } .single-research .resource-ebook-hero .resource-ebook-container { align-items: center; } .single-research .resource-ebook-hero .resource-ebook-text-block { max-width: 640px !important; } .single-research .resource-ebook-hero .wp-block-image.standard { flex: 0 0 485px !important; width: 485px !important; max-width: 485px !important; margin: 0; text-align: center; } .single-research .resource-ebook-hero .wp-block-image.standard img { max-height: 380px; height: auto !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: inline-block; } /* keep the cover's proportion (the theme's width:100% would stretch it) */ @media (max-width: 1079px) { .single-research .resource-ebook-hero .wp-block-image.standard { flex-basis: auto !important; width: 100% !important; max-width: 485px !important; margin: 0 auto; } } .single-research .resource-ebook-content { padding-top: 40px !important; } .single-research .resource-ebook-content > .resource-ebook-container { margin-top: 0 !important; } /* KELA Marketing Reactor — document pages (eBooks, guides, datasheets) use the research layout: breadcrumbs strip, shorter hero, cover capped, tighter gap (2026-09-09) */ @media (min-width: 1025px) { .single-document .webinar-breadcrumbs { position: relative; z-index: 2; margin-top: 112px; padding-top: 64px !important; margin-bottom: -194px; } } @media (max-width: 1024px) { .single-document .webinar-breadcrumbs { display: none; } } .single-document .webinar-breadcrumbs .breadcrumbs p, .single-document .webinar-breadcrumbs .breadcrumbs figure { margin: 0; } .single-document .resource-ebook-hero { padding-bottom: 40px !important; } .single-document .resource-ebook-hero .resource-ebook-container { align-items: center; } .single-document .resource-ebook-hero .wp-block-image.standard img { max-height: 380px; width: auto; border-radius: 8px; } .single-document .resource-ebook-content { padding-top: 40px !important; } .single-document .resource-ebook-content > .resource-ebook-container { margin-top: 0 !important; } /* KELA Marketing Reactor — speakers without a photo get a neutral person icon instead of an empty gap (2026-09-09) */ .webinar-speakers-avatar.speaker-placeholder img { background: #f2f2f4; border-radius: 50%; padding: 18%; box-sizing: border-box; } /* KELA Marketing Reactor — resource lobbies (Documents 32638, Research 32308, Webinars 32662): tighter gap between the hero and the cards. The page blocks carry hero padding-bottom 80px + section margin-top 108px + inner margin 44px (≈230px); this brings it to ≈80px (2026-09-09) */ body.page-id-32638 .hero-tprm, body.page-id-32308 .hero-tprm, body.page-id-32662 .hero-tprm { padding-bottom: 48px !important; } body.page-id-32638 .hero-tprm ~ .wp-block-group, body.page-id-32308 .hero-tprm ~ .wp-block-group, body.page-id-32662 .hero-tprm ~ .wp-block-group { margin-top: 32px !important; } body.page-id-32638 .hero-tprm ~ .wp-block-group > .wp-block-group:first-child, body.page-id-32308 .hero-tprm ~ .wp-block-group > .wp-block-group:first-child, body.page-id-32662 .hero-tprm ~ .wp-block-group > .wp-block-group:first-child { margin-top: 0 !important; } /* KELA Marketing Reactor — document hero: the document's own cover sits centred in the right column, the same width as the download box below it (as the webinar video does), with rounded corners and a soft shadow (2026-09-09) */ .single-document .resource-ebook-hero .resource-ebook-text-block { max-width: 640px !important; } .single-document .resource-ebook-hero .wp-block-image.standard { flex: 0 0 485px !important; width: 485px !important; max-width: 485px !important; margin: 0; text-align: center; } .single-document .resource-ebook-hero .wp-block-image.standard img { max-height: 340px; height: auto !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: inline-block; } /* keep the cover's own proportion; the theme's width:100% would stretch it */ .single-document .resource-ebook-hero .wp-block-image.flat-cover img { border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } /* generated covers only; 3D mock-ups stay as they are */ @media (max-width: 1079px) { .single-document .resource-ebook-hero .wp-block-image.standard { flex-basis: auto !important; width: 100% !important; max-width: 485px !important; margin: 0 auto; } } /* KELA Marketing Reactor — success story pages share the document layout (2026-09-09) */ @media (min-width: 1025px) { .single-success_stories .webinar-breadcrumbs { position: relative; z-index: 2; margin-top: 112px; padding-top: 64px !important; margin-bottom: -194px; } } @media (max-width: 1024px) { .single-success_stories .webinar-breadcrumbs { display: none; } } .single-success_stories .webinar-breadcrumbs .breadcrumbs p, .single-success_stories .webinar-breadcrumbs .breadcrumbs figure { margin: 0; } .single-success_stories .resource-ebook-hero { padding-bottom: 40px !important; } .single-success_stories .resource-ebook-hero .resource-ebook-container { align-items: center; } .single-success_stories .resource-ebook-hero .resource-ebook-text-block { max-width: 640px !important; } .single-success_stories .resource-ebook-hero .wp-block-image.standard { flex: 0 0 485px !important; width: 485px !important; max-width: 485px !important; margin: 0; text-align: center; } .single-success_stories .resource-ebook-hero .wp-block-image.standard img { max-height: 340px; height: auto !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: inline-block; } .single-success_stories .resource-ebook-hero .wp-block-image.flat-cover img { border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } @media (max-width: 1079px) { .single-success_stories .resource-ebook-hero .wp-block-image.standard { flex-basis: auto !important; width: 100% !important; max-width: 485px !important; margin: 0 auto; } } .single-success_stories .resource-ebook-content { padding-top: 40px !important; } .single-success_stories .resource-ebook-content > .resource-ebook-container { margin-top: 0 !important; } /* Success Stories lobby (page 36895): tighter gap between the hero and the cards, like the other lobbies */ body.page-id-36895 .hero-tprm { padding-bottom: 48px !important; } body.page-id-36895 .hero-tprm ~ .wp-block-group { margin-top: 32px !important; } body.page-id-36895 .hero-tprm ~ .wp-block-group > .wp-block-group:first-child { margin-top: 0 !important; } /* --- About Us: "KELA In The Press" query loop (2026-09-10) --------------------------------------------------------- The agency's `.about-press .fpg-grid article > div { height: 100% }` was written for a single wrapper div, but the query loop renders the date and the excerpt as direct children of the article, so each of them was stretched to the full card height and the three cards overlapped (title over excerpt, dates floating above the next image). */ .about-press .fpg-grid article { display: flex; flex-direction: column; gap: 12px; } .about-press .fpg-grid article > div { height: auto !important; } .about-press .fpg-grid .wp-block-post-featured-image { margin: 0 0 4px; } .about-press .fpg-grid .wp-block-post-title { margin: 0; } .about-press .fpg-grid .wp-block-post-date { margin: 0; font-size: 14px; color: #616068; } .about-press .fpg-grid .wp-block-post-excerpt { margin: 0 !important; } .about-press .fpg-grid .wp-block-post-excerpt__excerpt { font-size: 15px; line-height: 1.5; } /* --- Mobile menu: tighter sub-menu rows (2026-09-10) ----------------------------------------------------------------- Each sub-menu item was 60px tall (10px item padding on top of the 8px link padding); 40px keeps the tap target. */ @media only screen and (max-width: 1124px) { .main-menu .wp-block-navigation__submenu-container .wp-block-navigation-item { padding-block: 0 !important; } .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { gap: 2px; margin-top: 4px; } } /* --- Promo bar (kela/promo-banner, 2026-09-11) ------------------------------------------------------------------ The bar holds one or more messages, one on screen at a time; with two or more it cycles on a timer. 24px keeps the bar at exactly the 40px it has always been, and each message carries its own full-width link with the close above it. Three ways to change over, chosen in the Reactor: slide pushes the track up so the next arrives from below, fade cross-fades in place, none swaps outright. */ /* The bar is a flex child of the header, so min-width:auto let it grow to its own nowrap content and run off a phone screen. Pinning it to the parent's width is what lets the title shrink and ellipsise instead. */ .main-header-redline { width: 100%; min-width: 0; box-sizing: border-box; } .main-header-redline-inner { position: relative; height: 24px; width: 100%; min-width: 0; } /* the scrolling area is its own box so the close can sit beside it rather than on top of the text */ .redline-viewport { position: relative; height: 24px; overflow: hidden; width: 100%; } .main-header-redline-inner .redline-msg { position: relative; flex: none; height: 24px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; --msg-gap: 4px; gap: var(--msg-gap); padding: 0 22px; box-sizing: border-box; } /* The title takes whatever room is left and ellipsises, so every screen shows as much of it as it can hold. min-width:0 is what lets a flex child shrink below its own content width at all. */ .main-header-redline-inner .redline-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-header-redline-inner .redline-lead { flex: none; } .main-header-redline-inner .selection-right { flex: none; } .anim-ticker .redline-title { flex: none; max-width: none; overflow: visible; text-overflow: clip; } .anim-ticker .redline-msg { padding: 0; } /* the separator's own margins are the whole gap, both sides equal */ .anim-ticker .redline-track { gap: 0; } .anim-ticker .redline-lead > p { display: inline; } .anim-ticker .redline-viewport { width: calc(100% - 22px); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); } .anim-ticker.ticker-still .redline-viewport { width: 100%; -webkit-mask-image: none; mask-image: none; } .anim-ticker.ticker-still .redline-msg::after { content: none; } /* On a narrow phone the title matters more than the lead-in, so the lead-in drops back to just its icon. */ /* These only apply when the bar is NOT a ticker, which on a phone means the moment before the script decides, or a reader who asked for reduced motion. A ticker has room to scroll, so it keeps the lead-in and, crucially, keeps the padding and gap at zero: stacked on the separator's own margins they made the space after the dot three times the space before it. */ @media only screen and (max-width: 560px) { .main-header-redline-inner:not(.anim-ticker) .redline-lead > p { display: none; } .main-header-redline-inner:not(.anim-ticker) .redline-msg { padding: 0 20px; gap: 6px; } .main-header-redline-inner:not(.anim-ticker) .selection-right { margin-left: 12px !important; } } .main-header-redline-inner .redline-msg p { margin: 0; } /* descendant: the lead-in sits inside .redline-lead */ .redline-lead { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--wp--preset--spacing--12-4); } .redline-icon { width: 15px; height: 15px; flex: none; color: #fff; } .main-header-redline-cover { position: absolute; inset: 0; z-index: 1; } .main-header-redline-cross { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; } .redline-track { display: flex; flex-direction: column; } .anim-slide .redline-track { transition: transform .45s cubic-bezier(.4, 0, .2, 1); will-change: transform; } /* fade and none stack the messages instead of queueing them */ .anim-fade .redline-track, .anim-none .redline-track { display: block; } .anim-fade .redline-msg, .anim-none .redline-msg { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .anim-fade .redline-msg.is-on, .anim-none .redline-msg.is-on { opacity: 1; pointer-events: auto; } .anim-fade .redline-msg { transition: opacity .4s ease; } /* ticker: every message on one line, repeated until it is wider than the bar, scrolling by exactly one set */ .anim-ticker .redline-track { display: flex; flex-direction: row; width: max-content; } .anim-ticker .redline-track.is-running { animation: kela-redline-ticker var(--ticker-dur, 24s) linear infinite; } /* the row's own flex gap sits to the left of the separator too, so it comes off that side to keep both equal */ .anim-ticker .redline-msg::after { content: "•"; margin-left: calc(24px - var(--msg-gap)); margin-right: 24px; color: #fff; opacity: 1; font-size: 14px; line-height: 1; } .anim-ticker .main-header-redline-cover { position: absolute; inset: 0; } .main-header-redline-inner.anim-ticker:hover .redline-track { animation-play-state: paused; } @keyframes kela-redline-ticker { from { transform: translateX(0); } to { transform: translateX(calc(var(--ticker-x) * -1)); } } @media (prefers-reduced-motion: reduce) { .anim-slide .redline-track, .anim-fade .redline-msg { transition: none; } .anim-ticker .redline-track.is-running { animation: none; } } /* --- Header: tighter (2026-09-12) ------------------------------------------------------------------------------- The utility strip sat in 22px of space above and 35px below. The space below is not padding: the nav row's height comes from the 42px "Book a Demo" button and the 18px menu text is centred against it, so trimming the button's own 8px of vertical padding is the only thing that closes it. Together: 22/35 becomes 10/16, the same rhythm at about 55% less, and the header goes 155px -> 112px. The strip is #utility-nav. It used to share id="main-menu" with the main navigation, which meant every selector hit both and padded the navigation by the same amount it took off above it. !important because these are inline styles on the blocks, and desktop-only because below 1125px the utility group becomes the fixed slide-out drawer and the same buttons are the drawer's tap targets. */ @media only screen and (min-width: 1125px) { #utility-nav { padding-top: 6px !important; line-height: 24px !important; } /* weglot hardcodes height:37px on its switcher, which would hold the row open once the links have shrunk */ #utility-nav .country-selector.weglot-dropdown, #utility-nav .country-selector.weglot-dropdown a, #utility-nav .country-selector.weglot-dropdown .wgcurrent, #utility-nav .country-selector.weglot-dropdown .wglanguage-name { height: 24px !important; line-height: 24px !important; } #utility-nav + .wp-block-group { padding-top: 5px !important; padding-bottom: 5px !important; } #utility-nav + .wp-block-group .wp-block-button__link { padding-top: 3px !important; padding-bottom: 3px !important; } } /* --- Header clearance (2026-09-12) --------------------------------------------------------------------------------- The header is position:fixed, so every page's first section has to clear it. That was done with a hardcoded top margin per page, approximated five different ways — 130, 140, 148, 156 and 164px — all of them guesses at a header height that has since changed. One rule replaces the lot: the first section starts exactly where the header ends, measured (includes/header-height.php), so it is right on every breakpoint and stays right if the header changes. The home hero is the exception: it clears the header with padding rather than margin, so it is excluded here and handled below, or the two would stack. */ .entry-content > :first-child:not(.attackers-wrap) { margin-top: var(--kela-header-h, 112px) !important; } /* The mega-menu panels hang off the header's bottom edge. style.css pins them with `.m-auto { top: 140px }`, a value from an older, taller header, which left a band of page showing above each panel — and would break again the moment a visitor dismissed the promo bar. --kela-header-h is measured (includes/header-height.php); the fallback matches the current desktop header in case the script has not run yet. The wrapper is NOT inside .main-header, so it is matched by the panel it contains. */ .m-auto:has(> .megamenu-item) { top: var(--kela-header-h, 112px) !important; } /* The hub pages (/platform/, /solutions/, /partners/) now carry the theme's standard hero, so they clear the header the same way every other page does. .kela-hub-hero only centres the wordmark-width column. */ .kela-hub-hero .w-820 { max-width: 820px; margin-inline: auto; } /* --- Home hero (2026-09-12) --------------------------------------------------------------------------------------- Two faults, both visible as soon as the header got shorter. The wrap cleared the header with a hardcoded 140px, so the hero background started 28px below the nav and a band of page showed through. It now follows the header's measured height, so the artwork meets the header exactly. And .alt-hero declares `background-size: 100% 666px` on a box that renders 576px tall, which cut 90px off the bottom of the composite. The box is now at least as tall as the artwork it asks for, and no-repeat so it can never tile if a longer headline pushes it past 666. Desktop only: on a phone a 666px hero would fill the screen. */ .attackers-wrap { padding-top: var(--kela-header-h, 112px) !important; } @media only screen and (min-width: 1125px) { .alt-hero { min-height: 666px; background-repeat: no-repeat; background-size: cover; } } /* A breadcrumb in a flow (constrained) container gets no block gap from the theme, which left the Partner Program heading hard against it. The margin here is a minimum rather than an addition: adjacent vertical margins collapse, so a container that already spaces its children keeps its own spacing and only a container with none gains this. Flex containers are deliberately not matched — they space children with gap, where a margin would add instead of collapsing and would push every heading down. */ .wp-block-group-is-layout-constrained > .breadcrumbs { margin-bottom: 28px; } /* --- Breadcrumbs (2026-09-12) -------------------------------------------------------------------------------------- The separator is an image block, and WordPress gives those a 12px bottom margin. Inside an align-items:center row that margin counts as part of the box, so every arrow sat 6px above the text it separates. */ .breadcrumbs > p, .breadcrumbs > figure { margin: 0; } .breadcrumbs > figure img { display: block; } /* --- Hero top padding (2026-09-12) ---------------------------------------------------------------------------------- Every page hero sets its own top padding, and the values were authored when the header was taller and the hero had to pay for it: the resource lobbies and the newsroom family use the 246px token (246 = an old header plus the gap), careers 114, AITRiSM 123, the podcast 120, while the platform, solutions, partners and contact pages use 105. Header clearance is now a measured margin on the first section (above), so those larger paddings double-count the header — which is why the breadcrumb and the H1 sat up to 141px lower on some pages than on others. One value for all of them, and it is the theme's own standard token, not a new number: 105px on a wide screen, easing to 20px by 800px wide. So the breadcrumb starts on the same line on every page, and the H1 sits a little above the middle of the screen with more of the page showing below it. Scoped to pages, and to a first section that is a hero: the home page (.attackers-wrap), About Us and Start for FREE lead with their own compositions and are left alone, as are the single post templates, where the breadcrumb strip deliberately overlaps the hero so the artwork runs up to the header. */ body.page .entry-content > :first-child[class*="hero"] { padding-top: var(--wp--preset--spacing--105-20) !important; } /* Some heroes pair a text column with taller artwork and centre the row: the podcast sets a 613px text column between two artwork panels, Technology Partners puts a 544px column beside an illustration. Centring pushes the text column down by half the height difference — 39px on the podcast, 72px on Technology Partners — so the breadcrumb missed the line and the heading started far too low. The column carrying the breadcrumb starts at the top of the hero instead; its siblings stay centred, so the artwork does not move. Rather than a number per page, the rule finds the row by the breadcrumb inside it, and so holds for any hero built this way later. */ body.page .entry-content > :first-child[class*="hero"] .is-layout-flex:has(> * > .breadcrumbs) { align-items: flex-start; } body.page .entry-content > :first-child[class*="hero"] .is-layout-flex:has(> * > .breadcrumbs) > *:not(:has(.breadcrumbs)) { align-self: center; } /* Partner Program leads with the home page's hero pattern, and its breadcrumb block sat above the artwork rather than inside it, so it rendered on white, hard against the nav and flush to the left edge of the window. Fixed in the page itself — the block now sits inside .hero-partner, which carries the standard hero top padding — so there is no CSS here to keep in step. Noted so the next person does not re-add a rule for it. */ /* The podcast and Partner Program heroes are centred compositions whose breadcrumb is a direct child of the hero rather than of a centred column — so it stretched the full width of the hero and sat against the window edge while the heading above it was centred. Centre it with the rest of the hero. The lobby heroes need nothing here: their breadcrumb sits inside a column that already centres its children. */ .hero-podcast > .breadcrumbs, .hero-partner > .breadcrumbs { justify-content: center; } /* .centered-on-740 centres the hero's children on a phone, which is what the breadcrumb, heading and paragraph want — but the search strip is a block child of a flex column, so centring stops it stretching and it collapsed to the width of its placeholder. It keeps the full column width; its own contents still centre. */ @media only screen and (max-width: 740px) { .centered-on-740 > .all-filters { align-self: stretch !important; } /* the theme's own rule is !important, so this has to match it */ } /* --- The blog app's header clearance (2026-09-13) -------------------------------------------------------------------- The Entail blog prints its own `#ent-root { margin-top: 155px }` in an inline