/** * Additional stylesheet - plain CSS, not part of the Sass build. * * This exists as a stopgap because the Sass toolchain wasn't available to * compile sass/style.scss when these rules were added. The same rules also * live in sass/elements/_post-toc.scss, sass/elements/_post-hero.scss and * sass/global/_global.scss (imported by sass/style.scss), so the next time * the theme's normal Sass build runs, style.css will contain this CSS too - * at that point this file and its enqueue in functions.php can be removed * to avoid keeping two copies of the same rules. */ /** * Fix: the sticky table of contents (below) wasn't sticking anywhere on the * site. Root cause: style.css sets `body { overflow-x: hidden; }` (to stop * full-width sections triggering a horizontal scrollbar). Per the CSS spec, * giving one axis a non-"visible" overflow forces the other axis to compute * to "auto" too - so body silently became a scroll container, and * position:sticky measures itself against the *nearest* scroll-container * ancestor, which is now body instead of the actual page viewport. Moving * the horizontal-scroll fix onto the root element instead avoids * this - the root element is special-cased to hand its overflow to the * viewport rather than becoming its own scroll container - and is the * standard fix for "position: sticky isn't sticking" caused by * `overflow-x: hidden` on body. This is a site-wide fix, not specific to * the blog/news pages. Verified live on https://www.ainscough.co.uk/blog/large-crane-hire-guide/ * (Sept 2026): without it the TOC scrolled off-screen 1:1 with the page; * with it, it locks in place as intended. */ html { overflow-x: hidden; } body { overflow-x: visible; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .post-meta__category { display: inline-block; margin-right: 12px; margin-bottom: 5px; padding: 4px 12px; background-color: #F2C541; color: #000; font-family: "Montserrat-Bold", sans-serif; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .post-meta__category:hover { color: #000; text-decoration: none; opacity: 0.85; } .post-meta__date, .post-meta__readtime { position: relative; margin-right: 12px; margin-bottom: 5px; font-family: "Montserrat-Regular", sans-serif; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #808080; } .post-meta__readtime:before { content: "•"; display: inline-block; margin-right: 12px; color: #F2C541; } .post-layout { display: flex; flex-direction: column; } @media (min-width: 992px) { .post-layout.post-layout--with-toc { flex-direction: row; align-items: flex-start; } } .post-content { width: 100%; min-width: 0; } @media (min-width: 992px) { .post-layout--with-toc .post-content { width: calc(72% - 30px); margin-right: 30px; } } .post-toc { display: block; position: relative; width: 100%; margin: 0 0 80px 0; padding: 20px; background-color: #f7f7f7; border-left: 3px solid #F2C541; order: -1; } @media (min-width: 992px) { .post-toc { width: 28%; margin: 0; order: 2; position: sticky; top: 150px; /* verified live against .site-header's real height (Sept 2026) */ } } .post-toc__title { margin-bottom: 20px; font-family: "Montserrat-Bold", sans-serif; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: #000; } .post-toc ol { margin: 0; padding: 0; } .post-toc .post-toc__item { list-style: none; margin-bottom: 10px; } .post-toc .post-toc__item a { display: block; font-family: "Helvetica", Arial, sans-serif; font-size: 14px; line-height: 20px; color: #808080; } .post-toc .post-toc__item a:hover { color: #000; text-decoration: none; } .post-toc .post-toc__item--h3 { padding-left: 20px; } .post-toc .post-toc__item--h3 a { font-size: 13px; } /* So a heading doesn't land underneath the fixed header when its anchor is jumped to - either from clicking a TOC link (js/custom.js's a.toc-scroll handler does the same offset for the smooth-scrolled version of this) or from loading/sharing a URL with a #heading-slug directly, which the JS handler never sees. */ .post-content h2, .post-content h3, .post-content h4 { scroll-margin-top: 170px; /* 150px header + 20px breathing room */ } @media (max-width: 767px) { .post-content h2, .post-content h3, .post-content h4 { scroll-margin-top: 130px; /* 110px header on this breakpoint + 20px */ } } /** * Blog / News single post hero - full-width featured image with the title * in a yellow angled block, matching the look of the page-title-banner used * on service/sector/etc. pages (partials/content-masthead.php), plus the * post meta and intro copy in white underneath the title. * * Built as its own component rather than reusing .page-title-banner / * .background-angle / .angled-block-slim directly - those are shared by * ~29 other page templates, so styling this separately means nothing here * can affect them. */ .post-hero { display: block; position: relative; width: 100%; min-height: 420px; background-color: #02253A; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 768px) { .post-hero { min-height: 480px; } } .post-hero:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%); } .post-hero__content { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 5; width: 100%; max-width: 1152px; margin: 0 auto; padding: 40px 15px; } @media (min-width: 768px) { .post-hero__content { padding: 60px 0; } } .post-hero__back { margin-bottom: 20px; } .post-hero__back a { color: #fff; font-family: "Montserrat-Regular", sans-serif; text-transform: uppercase; font-size: 14px; } .post-hero__back a:hover { color: #F2C541; text-decoration: none; } .post-hero__meta { margin-bottom: 20px; } .post-hero__meta .post-meta__date, .post-hero__meta .post-meta__readtime { color: #fff; } .post-hero__title { display: inline-flex; align-items: center; position: relative; background-color: #F2C541; max-width: 90%; padding: 20px; margin-bottom: 20px; } @media (min-width: 768px) { .post-hero__title { max-width: 70%; padding: 30px 50px 30px 40px; } } .post-hero__title h1 { position: relative; z-index: 5; margin: 0; text-align: left; color: #000; } .post-hero__title span { display: block; position: absolute; right: -5%; top: 0; background-color: #F2C541; width: 15%; height: 100%; transform: skew(-10deg, 0); } .post-hero__intro { max-width: 90%; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } @media (min-width: 768px) { .post-hero__intro { max-width: 60%; } } .post-hero__intro p { color: inherit; margin-bottom: 10px; } /* Blog archive only (home.php) - vertically centers the title block and intro copy within the hero's height (horizontal alignment is left as normal, same as the single post/news hero). Scoped to this modifier rather than the base component so single post/news pages are unaffected. */ .post-hero--centered { display: flex; align-items: center; } /* Blog archive only (home.php) - topic filter bar, sat as its own strip between the post-hero and the article list rather than inside the hero itself, so it reads as a distinct piece of page chrome you scan past quickly rather than more hero copy. */ .blog-filters { display: block; width: 100%; padding: 25px 15px; } @media (min-width: 768px) { .blog-filters { padding: 30px 0; } } .blog-filters__inner { width: 100%; max-width: 1152px; margin: 0 auto; } .blog-filters__list { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; } .blog-filters__list li { margin: 0; } .blog-filters__list a { display: inline-block; padding: 9px 20px; border: 1px solid #ccc; border-radius: 30px; background-color: #fff; font-family: "Montserrat-Regular", sans-serif; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #000; text-decoration: none; /* the theme's base `li a` rule underlines links by default */ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .blog-filters__list a:hover { border-color: #F2C541; color: #000; background-color: #F2C541; text-decoration: none; } .blog-filters__list a.is-active { border-color: #F2C541; background-color: #F2C541; color: #000; } /* Blog/news posts only (see partials/content-breadcrumb.php) - a black bar with white Home/Blog links, flowing straight into the dark post-hero image below it. The current-page item (.breadcrumb_last) stays yellow, same as everywhere else. */ .breadcrumbs--dark { background-color: #000; } .breadcrumbs--dark li, .breadcrumbs--dark li a { color: #fff; font-weight: bold; } .breadcrumbs--dark li a { text-decoration: none; } .breadcrumbs--dark li a:hover { text-decoration: none; } .breadcrumbs--dark .breadcrumb_last { color: #F2C541; }