/* Blog page hero uses the shared .page-hero (components.css) — same as the pricing and FAQ pages. Quick-nav, section headers, and the card grid below are specific to this page. */ /* Quick-nav: sticky category bar directly under the hero, pinned below the site header (76px, matching the header's current real rendered height) — same treatment as the FAQ page's quick-nav (components.css / faq.css). 7 equal columns (All Posts + the 6 categories) spanning the same 1264px container as the site header's logo/CTA, so it reads as full width edge to edge like the header row above it. Horizontally scrollable on narrow viewports where equal columns would crush the labels. */ .blog-quicknav { position: sticky; top: 76px; z-index: 9; background: #f5f5f6; box-shadow: 0px 4px 7px -3px rgb(223 223 223); } .blog-quicknav__scroll { display: grid; grid-template-columns: repeat(7, 1fr); max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; } .blog-quicknav__link { text-align: center; padding: 18px 8px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--color-ink); border-bottom: 2px solid transparent; white-space: nowrap; } .blog-quicknav__link:hover { color: var(--color-purple); } .blog-quicknav__link.is-active { color: var(--color-purple); border-bottom-color: var(--color-purple); } @media (max-width: 768px) { .blog-quicknav__scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .blog-quicknav__scroll::-webkit-scrollbar { display: none; } .blog-quicknav__link { flex-shrink: 0; } } /* Sections. scroll-margin-top covers direct #hash navigation (e.g. the footer's Guides links, or any external link straight to /resources/#seo) as a fallback/belt-and-braces — the actual fix for that landing correctly is the inline script at the top of header.php's (forces an instant jump instead of racing html{scroll-behavior:smooth} against images still loading) plus blog.js's own-offset correction once the page has actually finished loading. 176px = a measured ~145px (header+quicknav) plus a real gap, generous enough to hold up even though the header's rendered height varies a little page to page. */ .blog-section { padding-top: 56px; padding-bottom: 16px; scroll-margin-top: 176px; } /* The last section's 16px bottom padding is meant for the gap between stacked sections, not the gap before the footer — give it real breathing room instead of the footer sitting right on the cards. */ .blog-section:last-of-type { padding-bottom: 80px; } .blog-section__title { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--color-ink); margin-bottom: 24px; } /* Card grid — modeled on buffer.com/resources: rounded card, placeholder media block on top (real photography can replace the gradient once available), category pill + date, clamped title/excerpt. */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* All Posts swiper: one row of 3 (2 tablet, 1 mobile), swipeable via native horizontal scroll-snap, with dot pagination + desktop arrow buttons driven by blog.js. Overrides .blog-grid's own grid layout with flex so cards sit in a single scrollable row instead of wrapping onto more rows. */ .blog-swiper { position: relative; } .blog-swiper__track { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 4px; } .blog-swiper__track::-webkit-scrollbar { display: none; } .blog-swiper__track > .blog-card { scroll-snap-align: start; flex: 0 0 calc((100% - 48px) / 3); min-width: 0; } .blog-swiper__dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; } .blog-swiper__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background-color 0.15s ease, width 0.15s ease; } .blog-swiper__dot:hover { background: #b9c3f5; } .blog-swiper__dot.is-active { width: 24px; border-radius: 4px; background: var(--color-purple); } /* Desktop-only prev/next arrows: absolutely positioned against the track (not the outer .blog-swiper, which also contains the dots row below), so top:50% centers them against the card row's own height regardless of how tall the dots row underneath is. Half-overlapping the track's own edge (left/right: -22px) into the section's 24px side gutter, a common carousel-arrow placement — hidden entirely ≤900px, where it's swipe-only (same pattern as the pricing page's mobile card swiper). */ .blog-swiper__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; background: #ffffff; color: var(--color-ink); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.18); z-index: 2; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .blog-swiper__arrow svg { width: 18px; height: 18px; } .blog-swiper__arrow:hover { background: var(--color-purple); color: #ffffff; border-color: var(--color-purple); } .blog-swiper__arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; } .blog-swiper__arrow--prev { left: -22px; } .blog-swiper__arrow--next { right: -22px; } @media (min-width: 901px) { .blog-swiper__arrow { display: flex; } } .blog-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } .blog-card:hover { box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .blog-card__media { aspect-ratio: 16 / 10; } .blog-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; } .blog-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .blog-card__pill { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px; white-space: nowrap; } .blog-card__date { font-size: 13px; color: var(--color-body); white-space: nowrap; } .blog-card__title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-ink); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card__excerpt { font-size: 14px; line-height: 1.5; color: var(--color-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Header gets shorter below 900px (header.css hides the nav links/actions row and drops its own padding) — 76px was only ever correct for the taller desktop header, so below that breakpoint the quicknav needs to stick at the real, shorter mobile header height (measured 69px) or it leaves a visible gap between the two. */ @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-swiper__track > .blog-card { flex: 0 0 calc((100% - 24px) / 2); } .blog-quicknav { top: 69px; } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .blog-swiper__track > .blog-card { flex: 0 0 100%; } .blog-section { padding-top: 40px; } .blog-section:last-of-type { padding-bottom: 48px; } .blog-section__title { font-size: 22px; } }