/** * Blog page overrides. * * Loaded via hook_page_attachments() on blog detail pages and the configured * blog landing URL. Selectors are scoped to body.body-blog / .similar-blogs * so this CSS is inert on non-blog pages even if the file is cached globally. */ body.body-blog { /* White through the hero (which paints its own #F4F5FD via .blog-hero-layer-bg) and the article content. The page itself carries no gradient — the pre-footer band (.blog-post__outro) and the footer provide the brand tint, so it never sits behind the hero or tints the content. */ background: #FFFFFF; } /* Pre-footer band: the section after the article content and before the footer (similar posts + newsletter) carries the brand gradient, fading from #F2F3FC at the top down to white, so the content transitions into the footer's own gradient below it. */ .blog-post__outro { background: linear-gradient(180deg, #F2F3FC 0%, #FFFFFF 50%); } /* Similar-posts cards on blog detail: transparent background lets the page gradient (or whatever the surrounding section uses) show through. */ .similar-blogs .card { background-color: transparent; } /* Match the post body to the hero's readable column on large screens. The hero sits in `col-span-10 col-start-2` of the 1200px container ≈ 960px of usable width. The content container has 20px side padding, so cap it at 1000px (960 + 2×20) to land the same 960px content box. The hero container is outside .blog-post__content, so it is unaffected. */ @media (min-width: 1200px) { .blog-post__content .container-v3 { max-width: 1000px; } } /* THEME WORKAROUND — drop once the FE build scopes its rule. The theme ships `body.body-blog [href]:not(.btn):not(.btn-atl) { color: var(--helmes-blue-02) }`, intended for links in blog content. Scoped to , it also recolours every link in the site header and footer on blog pages (the FE preview CSS has the same rule, so the fix belongs in the FE repo, e.g. scope it to .blog-post__content). Until then, restore the header and footer: - unclassed anchors go back to `inherit`, which is what they get on non-blog pages (base `a { color: inherit }`); - nav items that set their own colour get it back explicitly; - footer hover/focus and the mobile-menu active state are repeated, because the higher-specificity reset above them would otherwise win over the theme's own lower-specificity state rules. Specificity is kept above the theme rule's (0,4,1). */ body.body-blog .header-atl [href]:not(.btn):not(.btn-atl), body.body-blog .footer-atl [href]:not(.btn):not(.btn-atl) { color: inherit; } body.body-blog .header-atl .nav-atl__primary[href]:not(.btn), body.body-blog .header-atl .nav-atl__secondary[href]:not(.btn) { color: var(--helmes-black-01); } body.body-blog .footer-atl .footer-atl__list a[href]:hover, body.body-blog .footer-atl .footer-atl__list a[href]:focus { color: var(--helmes-blue-01); } body.body-blog .header-atl [data-mobile-menu] .nav-atl__block li.nav-atl__link a[href]:active { color: var(--link-text-link-on-color); }