/* Blog — post detail (blog_post) + index (blog_listing). Like the search-results page (search.css), the blog's functional core is a set of HubSpot/HubL constructs with no React equivalent — content.post_body, blog_recent_posts(), topic lists, @hubspot/blog_audio / blog_comments / social_sharing, and listing pagination — that must live inside HubL templates mid-layout. So the blog is authored as HubL templates (blog-post.hubl.html, blog-listing.hubl.html) and its styling lives here as a plain global sheet, required via require_css in each template (the same pipeline as globals.css/reset.css) rather than as a CSS module. The visual language mirrors the search / 404 / password pages: outlined-display headline in a dashed blueprint cage, mono eyebrow + status strip, terracotta accents, ink-bordered controls, dashed rules. Classes are blog-/bl- prefixed because this is a global namespace; HubSpot-generated markup (.hs-*) is styled defensively. Background stays on (globals.css) — never set here. */ :root { /* Comfortable reading measure for long-form post body. */ --blog-measure: 44rem; /* Dashed blueprint rule tone, shared with the listing hero + cards. */ --blog-line-soft: rgba(26, 26, 26, 0.32); } /* ============================================================ POST DETAIL — blog-post.hubl.html ============================================================ */ .blog-post { position: relative; padding: var(--space-l-xl) var(--gap-section-x) 0; color: var(--ink); } .blog-post__inner { max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; /* Tighter than --gap-block: keeps the title/meta close to the article and featured image instead of a large void under the header. */ gap: var(--space-m); } /* Three-column reading layout — left "on this page" TOC, center article, right recommended resources. Mirrors the old resource-hub post structure (aside.left-aside / article / aside.right-aside); styling stays Kento. */ .blog-post__cols { display: grid; /* Side tracks are `auto` (not a fixed min) so they collapse to zero when the TOC has no headings (the script hides it) or there are no recommended posts. The article is pinned to the centre track with grid-column below — without that, a lone item auto-places into the narrow first track and the whole post renders as a ~14rem sliver. */ grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-l); align-items: start; } .blog-post__toc { grid-column: 1; width: 14rem; } .blog-post__main { grid-column: 2; display: flex; flex-direction: column; gap: var(--gap-block); min-width: 0; } .blog-post__rail { grid-column: 3; width: 16rem; } /* Cap the reading measure so a post with no side rails (no headings and/or no recommended posts) keeps a comfortable, centred column instead of stretching the body to the full content width. No effect when the rails are present — the centre track is already narrower than this. */ .blog-post__body { width: 100%; max-width: var(--blog-measure); margin-inline: auto; } /* Left + right rails track the scroll, clearing the fixed header. */ .blog-post__toc-sticky, .blog-post__rail-sticky { position: sticky; top: calc(var(--header-height) + var(--frame-pad) + var(--space-s)); display: flex; flex-direction: column; gap: var(--space-s); } /* ── Left rail: on-this-page TOC (populated by the inline script) ── */ .blog-post__toc-title, .blog-rail__title { font-family: var(--font-mono); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .blog-post__toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px dashed var(--blog-line-soft); } .blog-post__toc-link { display: block; padding: 6px 0 6px 12px; margin-left: -1px; border-left: 2px solid transparent; font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.4; color: var(--ink-muted); text-decoration: none; transition: color 120ms ease, border-color 120ms ease; } .blog-post__toc-link:hover { color: var(--ink); } .blog-post__toc-link.active { color: var(--primary-strong); border-left-color: var(--primary); } /* ── Right rail: recommended resources ── */ .blog-rail__list { display: flex; flex-direction: column; gap: var(--space-2xs); } .blog-rail-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-xs); border: 1px dashed var(--ink); text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease; } .blog-rail-card:hover { border-style: solid; border-color: var(--primary); transform: translateY(-2px); } .blog-rail-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--type-meta); line-height: 1.2; color: var(--ink); } .blog-rail-card:hover .blog-rail-card__title { color: var(--primary-strong); } .blog-rail-card__meta { font-family: var(--font-mono); font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } @media (max-width: 1024px) { .blog-post__cols { /* Single column — TOC is a desktop affordance, resources follow the body. */ grid-template-columns: minmax(0, 1fr); } .blog-post__toc { display: none; } /* Drop the explicit column placement so the single track auto-fills; a stray grid-column: 3 would otherwise spawn empty implicit columns. */ .blog-post__main, .blog-post__rail { grid-column: auto; } .blog-post__rail { width: auto; } .blog-post__rail-sticky { position: static; } } /* ── Post header ─────────────────────────────────────────────── */ .blog-post__head { display: flex; flex-direction: column; gap: var(--gap-stack); } .blog-eyebrow { font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .blog-post__title { font-family: var(--font-display); font-weight: 500; font-size: var(--type-headline); line-height: 1.02; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; } /* ── Tags / topics ───────────────────────────────────────────── */ .blog-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .blog-tag { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-mono); font-size: var(--type-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1px solid var(--ink); border-radius: 0; transition: background 120ms ease, color 120ms ease; } a.blog-tag:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } /* ── Author + date byline ────────────────────────────────────── */ .blog-meta { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .blog-meta__avatars { display: flex; align-items: center; } /* Overlap successive avatars into a small stack. */ .blog-meta__avatars > * + * { margin-left: -12px; } .blog-meta__avatar, .blog-meta__monogram { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--bg-paper); outline: 1px solid var(--ink); object-fit: cover; background: var(--bg-paper-darker); } /* Fallback chip when an author has no avatar — mono initial on a tint fill. */ .blog-meta__monogram { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 600; text-transform: uppercase; color: var(--primary-strong); background: var(--primary-tint); } .blog-meta__text { display: flex; flex-direction: column; gap: 2px; } .blog-meta__authors { font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; color: var(--ink); } .blog-meta__date { font-family: var(--font-mono); font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } /* ── Featured image — bordered blueprint frame ───────────────── */ .blog-post__figure { position: relative; width: 100%; border: 1px solid var(--ink); padding: clamp(6px, 0.8vw, 10px); background: transparent; } .blog-post__figure img { display: block; width: 100%; height: auto; } /* ── Post body — long-form typography ────────────────────────── */ .blog-post__body { font-family: var(--font-mono); font-size: var(--type-body); line-height: 1.75; color: var(--ink); } .blog-post__body > * + * { margin-top: var(--space-s); } .blog-post__body h2, .blog-post__body h3, .blog-post__body h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; color: var(--ink); margin-top: var(--space-l); /* Clear the fixed header when a TOC jump-link lands on the heading. */ scroll-margin-top: calc( var(--header-height) + var(--frame-pad) + var(--space-s) ); } .blog-post__body h2 { font-size: var(--type-title); } .blog-post__body h3 { font-size: var(--step-2); } .blog-post__body h4 { font-size: var(--step-1); } .blog-post__body a { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .blog-post__body a:hover { color: var(--primary); } .blog-post__body ul, .blog-post__body ol { padding-left: 1.4em; } .blog-post__body li + li { margin-top: var(--space-2xs); } .blog-post__body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--ink); } .blog-post__body blockquote { margin: var(--space-m) 0; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s); border-left: 2px dashed var(--primary); font-family: var(--font-display); font-size: var(--type-quote); line-height: 1.4; color: var(--ink); } .blog-post__body code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.35em; background: var(--primary-tint); border-radius: 2px; } .blog-post__body pre { overflow-x: auto; padding: var(--space-s); border: 1px solid var(--ink); background: rgba(26, 26, 26, 0.04); } .blog-post__body pre code { padding: 0; background: none; } .blog-post__body hr { border: 0; border-top: 1px dashed var(--blog-line-soft); margin: var(--space-l) 0; } .blog-post__body table { width: 100%; border-collapse: collapse; font-size: var(--type-meta); } .blog-post__body th, .blog-post__body td { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--blog-line-soft); text-align: left; } /* ============================================================ CARD GRID — shared by related posts (detail) + listing index ============================================================ */ .blog-related { padding: var(--space-2xl-3xl) var(--gap-section-x) var(--space-l-xl); } .blog-related__inner { max-width: var(--content-max); margin-inline: auto; } .blog-related__heading { font-family: var(--font-display); font-weight: 500; font-size: var(--type-title); color: var(--ink); margin-bottom: var(--space-l); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-m); } /* Shared filled-terracotta button — reproduces the Process module's .cta (components/modules/Process/Process.module.css). Used by Read more, View more, and the CTA band. */ .blog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; color: var(--on-primary); background: var(--primary); border: 2px solid var(--primary); border-radius: 0; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .blog-btn:hover { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--on-primary); } .blog-card { position: relative; display: flex; flex-direction: column; border: 1px dashed var(--ink); background: transparent; transition: border-color 160ms ease, transform 160ms ease; } .blog-card:hover { border-color: var(--primary); border-style: solid; transform: translateY(-2px); } .blog-card__figure { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-bottom: 1px dashed var(--ink); background: var(--bg-paper-darker); } .blog-card:hover .blog-card__figure { border-bottom-color: var(--primary); } .blog-card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .blog-card:hover .blog-card__figure img { transform: scale(1.03); } .blog-card__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--pad-card); flex: 1; } .blog-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.15; color: var(--ink); } .blog-card__title a { color: inherit; text-decoration: none; } .blog-card:hover .blog-card__title a, .blog-card__title a:hover { color: var(--primary-strong); } .blog-card__excerpt { font-family: var(--font-mono); font-size: var(--type-meta); line-height: 1.6; color: var(--ink-muted); /* Clamp to keep card heights even. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Read-more button sits at the card foot regardless of excerpt length. */ .blog-card__more { align-self: flex-start; margin-top: auto; padding: 10px 18px; font-size: var(--type-micro); } /* ============================================================ LISTING — blog-listing.hubl.html (centered hero, filter, grid, CTA) ============================================================ */ /* ── Hero — centered marketing headline + intro ── */ .bl-hero { padding: var(--space-2xl) var(--gap-section-x) var(--space-l); text-align: center; } .bl-hero__inner { max-width: 52rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); } .bl-eyebrow { font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .bl-hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--type-headline); line-height: 1.02; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; } .bl-hero__intro { font-family: var(--font-mono); font-size: var(--type-body); line-height: 1.6; color: var(--ink-muted); max-width: 56ch; margin: 0; } /* ── Filter by topic — centered wrap of mono links ── */ .bl-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-s); max-width: var(--content-max); margin-inline: auto; padding: 0 var(--gap-section-x) var(--space-m); } .bl-filter__label { font-family: var(--font-mono); font-size: var(--type-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } .bl-filter__link { font-family: var(--font-mono); font-size: var(--type-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .bl-filter__link:hover { color: var(--primary-strong); } .bl-filter__link--active { color: var(--primary-strong); border-bottom-color: var(--primary); } /* ── Posts ── */ .bl-listing { padding: 0 var(--gap-section-x) var(--space-2xl-3xl); } .bl-listing__inner { max-width: var(--content-max); margin-inline: auto; } .bl-section-title { font-family: var(--font-display); font-weight: 500; font-size: var(--type-title); text-align: center; color: var(--ink); margin-bottom: var(--space-l); } /* Empty state — mono, matches search "no results". */ .bl-empty { font-family: var(--font-mono); font-size: var(--type-meta); line-height: 1.6; color: var(--ink-muted); text-align: center; } /* View-more pager — single centered button. */ .bl-viewmore { display: flex; justify-content: center; margin-top: var(--space-xl); } /* ── CTA band — bordered, transparent (background stays on ) ── */ .blog-cta { padding: 0 var(--gap-section-x) var(--space-2xl-3xl); } .blog-cta__band { max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center; padding: var(--space-xl-2xl) var(--space-l); border: 1px solid var(--ink); } .blog-cta__title { font-family: var(--font-display); font-weight: 500; font-size: var(--type-title); color: var(--ink); } .blog-cta__intro { font-family: var(--font-mono); font-size: var(--type-body); line-height: 1.6; color: var(--ink-muted); max-width: 52ch; margin: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { .blog-cta__band { padding: var(--space-xl) var(--space-m); } } /* ============================================================ ENTRANCE — simple rise for the hero + filter. Reduced-motion gated. ============================================================ */ @keyframes blogRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .bl-hero__inner { animation: blogRise 0.6s ease-out 0.1s both; } .bl-filter { animation: blogRise 0.6s ease-out 0.25s both; } @media (prefers-reduced-motion: reduce) { .bl-hero__inner, .bl-filter, .blog-card, .blog-card__figure img { animation: none !important; transition: none !important; } }