/* ========================================================================== NovaBP Post Content Component Styles Matching Figma 314:8543 (Single Blog Post — Article Body + Sidebar) ========================================================================== */ html { overflow-x: visible !important; } body { overflow-x: clip !important; } .nova-post-content { /* Height of whatever is pinned to the top of the viewport. Measured at runtime by novabp-post-content.js (sticky header, WP admin bar) unless the widget is set to a custom height, in which case Elementor writes it. */ --nova-header-h: 0px; --nova-sticky-gap: 0px; /* The site header's actual height — the floor the sidebar parks at even when nothing is measurable (the header only turns `position: fixed` partway down the page, so `--nova-header-h` reads 0 at the top of the article). `max()` lets the measured value still win when something taller is pinned, e.g. the WP admin bar stacked on the header. */ --nova-header-min: 88px; /* Height of the WP admin bar, which is `position: fixed` above the header for logged-in users and pushes it (and therefore the floor) down by its own height. 0 for logged-out visitors; the `.admin-bar` rules below fill it in. */ --nova-admin-bar-h: 0px; --nova-sticky-floor: calc(var(--nova-admin-bar-h) + var(--nova-header-min)); --nova-sticky-top: max(var(--nova-sticky-floor), calc(var(--nova-header-h) + var(--nova-sticky-gap))); width: 100%; /* Inline axis and the bottom edge ride the shared gutter tokens (style.css). The top stays 0: the hero above already closes the gap, and doubling it here would push the article a full section away from its own title. */ padding: 0 var(--nova-gutter-x) var(--nova-gutter-y); box-sizing: border-box; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* WordPress puts `admin-bar` on whenever the bar renders, and sizes it from its own two breakpoints: 32px normally, 46px under 783px, and under 601px it drops to `position: absolute` and scrolls away with the page — so it stops covering anything and the offset goes back to 0. Mirroring those exact widths here keeps the parked sidebar aligned with the bar in every state. */ .admin-bar .nova-post-content { --nova-admin-bar-h: 32px; } @media (max-width: 782px) { .admin-bar .nova-post-content { --nova-admin-bar-h: 46px; } } @media (max-width: 600px) { .admin-bar .nova-post-content { --nova-admin-bar-h: 0px; } } /* Shared 1280px content column — the wrapper above stays full-bleed for its padding, the sidebar + article pair is capped and centred inside it. */ .nova-post-content__layout { display: flex; align-items: flex-start; /* Fixed 80px between the sidebar and the article. 320 + 80 + 760 = 1160, so the pair sits flush with the left edge of the 1280px column and the 120px of slack falls on the right — no `space-between`, which would have spent that slack on the gap instead. */ gap: 80px; width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; } .nova-post-content__layout--reverse { flex-direction: row-reverse; } .nova-post-content__sidebar { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; gap: 24px; align-self: flex-start; } /* Ensure Elementor widget wrappers and parent containers do not trap or break sticky positioning */ .elementor-widget-nova_post_content, .elementor-widget-nova_post_content .elementor-widget-container, .elementor-widget-nova_post_content .nova-post-content, .elementor-widget-nova_post_content .nova-post-content__layout { overflow: visible !important; } :is(.elementor-section, .e-con, .e-con-inner, .elementor-column, .elementor-widget-wrap):has(.nova-post-content__sidebar--sticky) { overflow: visible !important; } .nova-post-content__sidebar--sticky { position: -webkit-sticky !important; position: sticky !important; top: var(--nova-sticky-top) !important; align-self: flex-start !important; /* Deliberately low. A positioned element with a z-index paints above every positioned element that has none, so the old `10` let the parked sidebar cover the site header in the frames before Elementor adds `.elementor-sticky--active` (and with it z-index 99) — the header only earns that class once it is actually pinned. `1` is all this needs to clear the article body, and it can never outrank the header. */ z-index: 1; } /* Backstop for the same collision: `.elementor-sticky--active` exists only at runtime, so CSS optimisers that strip "unused" selectors (WP Rocket's Remove Unused CSS, LiteSpeed) drop Elementor's own `z-index: 99` for it. Without that the pinned header has no z-index at all and the sidebar wins again. Scoped to the header location so it restates Elementor's value and nothing more. */ .elementor-location-header .elementor-sticky--active, .elementor-location-header.elementor-sticky--active { z-index: 99; } .nova-post-content__sidebar--sticky::-webkit-scrollbar { width: 6px; } .nova-post-content__sidebar--sticky::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #DEE3EE; } .nova-post-content__sidebar--sticky::-webkit-scrollbar-thumb:hover { background-color: #B9C2D6; } /* Anchor jumps (TOC clicks, inbound #hash links) must clear the header too. */ .nova-post-content .nova-article h2, .nova-post-content .nova-article h3 { scroll-margin-top: var(--nova-sticky-top); } /* 760px is the design measure for the article column. It's a cap, not a fixed width: `flex: 1 1 auto` lets it shrink below 760 as the viewport narrows, and the ≤1024px stack drops the cap entirely. */ .nova-post-content__main { flex: 1 1 auto; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 40px; } /* --- Sidebar: Table of Contents --- */ .nova-toc { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid #DEE3EE; border-radius: 16px; background-color: #F5F6F8; } .nova-toc__label { color: #021137; font-size: 14px; font-weight: 600; line-height: 1.3; } .nova-toc__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } .nova-post-content .nova-toc__link { display: block; padding: 12px; border-radius: 8px; color: #35415F; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .nova-post-content .nova-toc__link:hover, .nova-post-content .nova-toc__link:focus-visible { background-color: rgba(2, 17, 55, .06); color: #021137; } .nova-post-content .nova-toc__item--sub .nova-toc__link { padding-left: 24px; } .nova-post-content .nova-toc__item.is-active .nova-toc__link { background-color: #021137; color: #FFFFFF; } /* --- Sidebar: CTA Box --- */ .nova-side-cta { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 260px; padding: 24px; border: 1px solid #DEE3EE; border-radius: 16px; background-image: linear-gradient(189deg, #020E2F 7%, #062C95 100%); } .nova-side-cta__head { display: flex; flex-direction: column; gap: 8px; } .nova-side-cta__eyebrow { color: #09A500; font-size: 14px; font-weight: 600; line-height: 1.3; } .nova-side-cta__title { margin: 0; color: #FFFFFF; font-size: 18px; font-weight: 600; line-height: 1.5; } .nova-side-cta__desc { margin: 0; color: #FFFFFF; opacity: .8; font-size: 12px; font-weight: 400; line-height: 1.3; } .nova-post-content .nova-side-cta__btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 12px; border-radius: 8px; background-color: #09A500; color: #FFFFFF; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: filter .2s ease; } .nova-post-content .nova-side-cta__btn:hover, .nova-post-content .nova-side-cta__btn:focus-visible { color: #FFFFFF; filter: brightness(1.1); } /* --- Sidebar: Latest Blogs --- */ .nova-side-latest { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; } .nova-side-latest__label { color: #021137; font-size: 14px; font-weight: 600; line-height: 1.3; } .nova-post-content .nova-side-latest__item { display: flex; align-items: center; gap: 12px; text-decoration: none; } /* Doubled-up class: Elementor ships `.elementor img { border: none; border-radius: 0; height: auto }`, which outranks a lone class. */ .nova-post-content .nova-side-latest__thumb { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background-color: #F5F6F8; } .nova-side-latest__title { margin: 0; color: #020F32; font-size: 18px; font-weight: 600; line-height: 1.5; transition: color .2s ease; } .nova-post-content .nova-side-latest__item:hover .nova-side-latest__title { color: #062C95; } .nova-post-content .nova-side-latest__more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 8px; background-color: #F5F6F8; color: #0A1016; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color .2s ease; } .nova-post-content .nova-side-latest__more:hover, .nova-post-content .nova-side-latest__more:focus-visible { background-color: #DEE3EE; color: #0A1016; } /* --- Article body --- */ .nova-post-content .nova-article { color: #35415F; font-size: 18px; font-weight: 500; line-height: 1.5; } .nova-post-content .nova-article > *:first-child { margin-top: 0; } .nova-post-content .nova-article > *:last-child { margin-bottom: 0; } /* `.nova-post-content` prefix throughout: the Elementor kit styles headings and paragraphs as `.elementor-kit-N h2` / `p`, which ties or beats a single class and would otherwise impose the site heading font, size and capitalisation. */ .nova-post-content .nova-article h2 { margin: 40px 0 16px; color: #021137; font-family: inherit; font-size: 24px; font-weight: 700; font-style: normal; line-height: 1.5; letter-spacing: normal; text-transform: none; } .nova-post-content .nova-article h3 { margin: 32px 0 12px; color: #021137; font-family: inherit; font-size: 20px; font-weight: 600; font-style: normal; line-height: 1.3; letter-spacing: normal; text-transform: none; } .nova-post-content .nova-article p { margin: 0 0 16px; color: #35415F; font-size: 18px; font-weight: 500; line-height: 1.5; } .nova-post-content .nova-article a { color: #062C95; text-decoration: underline; } .nova-post-content .nova-article ul, .nova-post-content .nova-article ol { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 0 0 0 12px; list-style: none; } .nova-post-content .nova-article li { position: relative; padding-left: 16px; color: #35415F; font-size: 18px; font-weight: 500; line-height: 1.5; } .nova-post-content .nova-article ul > li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background-color: #09A500; } .nova-post-content .nova-article ol { counter-reset: nova-ol; } .nova-post-content .nova-article ol > li { counter-increment: nova-ol; padding-left: 24px; } .nova-post-content .nova-article ol > li::before { content: counter(nova-ol) "."; position: absolute; left: 0; top: 0; color: #09A500; font-weight: 600; } .nova-post-content .nova-article blockquote { display: flex; flex-direction: column; gap: 12px; margin: 32px 0; padding: 24px 32px; border: 0; border-left: 4px solid #09A500; border-radius: 8px; background-color: #F0F9F3; color: #021137; font-size: 20px; font-weight: 600; line-height: 1.3; } .nova-post-content .nova-article blockquote p { margin: 0; color: #021137; font-size: 20px; font-weight: 600; line-height: 1.3; } .nova-post-content .nova-article blockquote cite, .nova-post-content .nova-article blockquote footer { color: #35415F; font-size: 14px; font-weight: 600; font-style: normal; line-height: 1.3; } .nova-post-content .nova-article img, .nova-post-content .nova-article figure img { display: block; width: 100%; height: auto; border: 1px solid #DEE3EE; border-radius: 16px; object-fit: cover; } .nova-post-content .nova-article figure { margin: 32px 0; } /* --- Explore More Topics --- */ .nova-topics { display: flex; flex-direction: column; gap: 16px; } .nova-topics__label { margin: 0; color: #021137; font-size: 20px; font-weight: 600; line-height: 1.3; } .nova-topics__list { display: flex; flex-wrap: wrap; gap: 12px; } .nova-post-content .nova-topics__chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; background-color: #F5F6F8; color: #0A1016; font-size: 16px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .nova-post-content .nova-topics__chip:hover, .nova-post-content .nova-topics__chip:focus-visible { background-color: #E6F4E6; color: #09A500; } /* --- Prev / Next navigation --- */ .nova-postnav { display: flex; gap: 24px; padding-top: 20px; } .nova-post-content .nova-postnav__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #DEE3EE; border-radius: 12px; background-color: #FAFBFD; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; } .nova-post-content .nova-postnav__card:hover, .nova-post-content .nova-postnav__card:focus-visible { border-color: #09A500; background-color: #FFFFFF; } .nova-post-content .nova-postnav__card--next { text-align: right; } .nova-postnav__eyebrow { display: flex; align-items: center; gap: 8px; color: #09A500; font-size: 14px; font-weight: 600; line-height: 1.3; } .nova-post-content .nova-postnav__card--next .nova-postnav__eyebrow { justify-content: flex-end; } .nova-postnav__eyebrow svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; } .nova-postnav__title { margin: 0; color: #021137; font-size: 18px; font-weight: 600; line-height: 1.5; } /* --- Responsive --- */ @media (max-width: 1200px) { .nova-post-content__layout { gap: 40px; } } @media (max-width: 1024px) { /* The header shrinks on tablet/mobile, so the parking offset follows it. */ .nova-post-content { --nova-header-min: 68px; } .nova-post-content__layout { flex-direction: column; } /* Stacked layout: the table of contents belongs above the article (it is the section index — burying it under the body makes it useless), but the CTA and the latest-posts list still belong after it. `display: contents` dissolves the sidebar box so its three blocks become items of the stacked layout and can be ordered around the article individually. */ .nova-post-content__sidebar { display: contents; } .nova-post-content__sidebar > * { flex: 1 1 auto; width: 100%; max-width: none; position: static; box-sizing: border-box; } .nova-post-content__layout .nova-toc { order: 1; } .nova-post-content__main { order: 2; width: 100%; max-width: none; } .nova-post-content__layout .nova-side-cta { order: 3; } .nova-post-content__layout .nova-side-latest { order: 4; } /* Stacked layout: nothing to pin, so drop the sticky viewport clamp. */ .nova-post-content__sidebar--sticky { max-height: none; overflow: visible; } } @media (max-width: 767px) { .nova-post-content .nova-article h2 { margin-top: 32px; font-size: 22px; } .nova-post-content .nova-article p, .nova-post-content .nova-article li { font-size: 16px; } .nova-post-content .nova-article blockquote { padding: 20px; font-size: 18px; } .nova-postnav { flex-direction: column; } .nova-post-content .nova-postnav__card--next { text-align: left; } .nova-post-content .nova-postnav__card--next .nova-postnav__eyebrow { justify-content: flex-start; } }