/* ========================================================================== dg-blog.css — DG Grow single-post template -------------------------------------------------------------------------- Version: 1.0 Released: 2026-08-02 Compatibility: GeneratePress 3.x child theme · GenerateBlocks 1.x–2.x WordPress 6.0+ · PHP 7.4+ Part of: single.php · functions.php · dg-blog.js · dg-audit.php (all five ship together — see MANIFEST) -------------------------------------------------------------------------- Scope: .bp-single + body.single-post (GeneratePress guards) Fonts: enqueued in functions.php — NOT @import (render-blocking / LCP) -------------------------------------------------------------------------- CONTRACT — every selector below is emitted by single.php or dg-blog.js, EXCEPT the editor-authored set listed here, which you type into a Gutenberg "Additional CSS class" field or an HTML block inside post content: .bp-note .bp-tip .bp-warn (+ __label) .bp-table .bp-table--compare .bp-yes .bp-no .bp-faq .bp-video[data-yt-id] Do not purge those as unused. Everything else must have a markup source. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --bp-primary: #5B3DF5; --bp-primary-dark: #4429D6; --bp-accent: #7B61FF; /* decorative only — 4.2:1, fails AA as text */ --bp-accent-ink: #5540D0; /* text-safe accent — 6.93:1 on white */ --bp-lilac: #EFEAFF; --bp-lilac-soft: #F7F5FF; --bp-lilac-line: #DED5FF; --bp-ink: #14121F; /* 18.49:1 */ --bp-body: #3D3A52; /* 10.91:1 */ --bp-muted: #6E6A85; /* 5.17:1 */ --bp-faint: #767290; /* 4.59:1 — was #9B97AE (2.83:1, AA fail) */ --bp-line: #E7E4F2; --bp-bg: #FFFFFF; --bp-bg-soft: #FAFAFC; --bp-warn-line: #B26A00; --bp-warn-bg: #FFF8EC; --bp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bp-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --bp-measure: 720px; --bp-rail-w: 280px; --bp-gap: 56px; --bp-radius: 12px; --bp-radius-lg: 18px; /* Single source of truth for sticky-header clearance. Change once. */ --bp-offset: 96px; --bp-shadow-sm: 0 1px 2px rgba(20, 18, 31, .05), 0 2px 8px rgba(20, 18, 31, .04); --bp-shadow-md: 0 4px 12px rgba(20, 18, 31, .06), 0 12px 32px rgba(20, 18, 31, .07); --bp-ease: cubic-bezier(.22, .61, .36, 1); } /* No GP sticky nav? Reclaim the offset. JS sets this on . */ html.bp-no-sticky-nav { --bp-offset: 24px; } /* -------------------------------------------------------------------------- 2. GeneratePress / GenerateBlocks guards single.php renders its own markup and never calls GP's content template, so .inside-article / .entry-header are never emitted — no rules needed for them. What IS still needed: GP sizes #primary from the body layout class, and #content carries GP's own horizontal padding. -------------------------------------------------------------------------- */ body.single-post #primary.content-area { width: 100%; max-width: 100%; float: none; padding: 0; margin: 0; } body.single-post #content.site-content { padding-left: 0; padding-right: 0; } /* GenerateBlocks containers inside post content must keep their own layout. Reset our prose rules that would otherwise fight them. */ .bp-prose .gb-container, .bp-prose .gb-grid-wrapper, .bp-prose .gb-element { border-radius: 0; } .bp-prose .gb-container img, .bp-prose .gb-element img { border-radius: inherit; } .bp-prose > .gb-container.alignwide, .bp-prose > .gb-container.alignfull { margin-left: 0; width: 100%; max-width: 100%; } /* -------------------------------------------------------------------------- 3. Shell + grid -------------------------------------------------------------------------- */ .bp-single { font-family: var(--bp-font); color: var(--bp-body); background: var(--bp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bp-single *, .bp-single *::before, .bp-single *::after { box-sizing: border-box; } .bp-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .bp-grid { display: grid; grid-template-columns: minmax(0, var(--bp-measure)) var(--bp-rail-w); gap: var(--bp-gap); align-items: start; justify-content: center; padding-bottom: 72px; } .bp-main { min-width: 0; } /* JS adds this when a post has fewer than two headings — no empty rail gap. */ .bp-grid--full { grid-template-columns: minmax(0, var(--bp-measure)); } /* -------------------------------------------------------------------------- 4. Reading progress (sits below GP sticky nav, not over it) -------------------------------------------------------------------------- */ .bp-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1000; /* GP sticky nav is 1000+; JS raises top offset */ pointer-events: none; contain: layout paint; } .bp-progress__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--bp-primary), var(--bp-accent)); will-change: transform; } /* -------------------------------------------------------------------------- 5. Hero: breadcrumb, badge, title, lede, byline -------------------------------------------------------------------------- */ .bp-hero { padding: 40px 0 0; } .bp-crumbs { font-size: .8125rem; color: var(--bp-faint); margin-bottom: 22px; } .bp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .bp-crumbs li { display: flex; align-items: center; gap: 8px; } .bp-crumbs li + li::before { content: '/'; color: var(--bp-line); } .bp-crumbs a { color: var(--bp-muted); text-decoration: none; transition: color .18s var(--bp-ease); } .bp-crumbs a:hover { color: var(--bp-primary); } .bp-crumbs [aria-current] { color: var(--bp-faint); } .bp-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--bp-lilac); color: var(--bp-primary-dark); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .18s var(--bp-ease), color .18s var(--bp-ease); } .bp-badge:hover { background: var(--bp-primary); color: #fff; } .bp-title { margin: 18px 0 0; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.18; letter-spacing: -.026em; font-weight: 800; color: var(--bp-ink); /* Prevents LCP text reflow when Inter swaps in */ text-wrap: balance; } .bp-lede { margin: 18px 0 0; font-size: 1.1875rem; line-height: 1.66; color: var(--bp-muted); max-width: 62ch; text-wrap: pretty; } .bp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--bp-line); font-size: .875rem; color: var(--bp-muted); } .bp-meta__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bp-lilac); } .bp-meta__author { font-weight: 600; color: var(--bp-ink); text-decoration: none; } .bp-meta__author:hover { color: var(--bp-primary); } .bp-meta__date, .bp-meta__read { display: inline-flex; align-items: center; gap: 6px; } .bp-meta__sep { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: var(--bp-faint); } /* -------------------------------------------------------------------------- 6. Featured image (CLS: ratio reserved before decode) -------------------------------------------------------------------------- */ .bp-featured { margin: 32px 0 8px; border-radius: var(--bp-radius-lg); overflow: hidden; background: var(--bp-bg-soft); box-shadow: var(--bp-shadow-md); } .bp-featured__frame { display: block; aspect-ratio: 16 / 9; background: var(--bp-lilac-soft); } .bp-featured__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .bp-featured figcaption { padding: 12px 18px; font-size: .8125rem; color: var(--bp-faint); } /* -------------------------------------------------------------------------- 7. Share + bookmark -------------------------------------------------------------------------- */ .bp-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; } .bp-share__label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-faint); } .bp-share__btn, .bp-bookmark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--bp-line); border-radius: 999px; background: #fff; color: var(--bp-muted); font-family: inherit; font-size: .8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .18s var(--bp-ease), background .18s var(--bp-ease), border-color .18s var(--bp-ease), transform .18s var(--bp-ease); } .bp-share__btn svg, .bp-bookmark svg { width: 16px; height: 16px; fill: currentColor; } .bp-share__btn:hover, .bp-bookmark:hover { border-color: var(--bp-lilac-line); background: var(--bp-lilac-soft); color: var(--bp-primary); transform: translateY(-1px); } .bp-bookmark[aria-pressed="true"] { border-color: var(--bp-primary); background: var(--bp-primary); color: #fff; } /* -------------------------------------------------------------------------- 8. Quick Summary -------------------------------------------------------------------------- */ .bp-summary { margin: 0 0 40px; padding: 26px 28px; border: 1px solid var(--bp-lilac-line); border-radius: var(--bp-radius); background: var(--bp-lilac-soft); } .bp-summary__title { margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-accent-ink); } .bp-summary__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .bp-summary__list li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.65; color: var(--bp-body); } .bp-summary__list li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 2px; background: var(--bp-accent); transform: rotate(45deg); } /* -------------------------------------------------------------------------- 9. Table of contents rail -------------------------------------------------------------------------- */ .bp-rail { position: sticky; top: var(--bp-offset); align-self: start; max-height: calc(100vh - var(--bp-offset) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bp-lilac-line) transparent; } .bp-rail::-webkit-scrollbar { width: 4px; } .bp-rail::-webkit-scrollbar-thumb { background: var(--bp-lilac-line); border-radius: 4px; } /* JS removes [hidden] once the list is built — no CLS from an empty box. */ .bp-toc[hidden] { display: none; } .bp-toc { padding: 22px 20px; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-lilac-soft); } .bp-toc__title { margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-primary-dark); } .bp-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bp-lilac-line); } .bp-toc__item { margin: 0; } .bp-toc__link { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .875rem; line-height: 1.45; color: var(--bp-muted); text-decoration: none; transition: color .18s var(--bp-ease), border-color .18s var(--bp-ease); } .bp-toc__link:hover { color: var(--bp-primary); } .bp-toc__item--h3 .bp-toc__link { padding-left: 26px; font-size: .8125rem; color: var(--bp-faint); } /* [aria-current] mirrors .is-active so SR users get the same signal */ .bp-toc__link.is-active, .bp-toc__item--h3 .bp-toc__link.is-active { color: var(--bp-primary); font-weight: 600; border-left-color: var(--bp-primary); } /* -------------------------------------------------------------------------- 10. Prose -------------------------------------------------------------------------- */ .bp-prose { font-size: 1.125rem; line-height: 1.82; color: var(--bp-body); letter-spacing: -.003em; } .bp-prose p { margin: 0 0 1.5em; } .bp-prose h2, .bp-prose h3, .bp-prose h4 { color: var(--bp-ink); letter-spacing: -.02em; scroll-margin-top: calc(var(--bp-offset) + 12px); text-wrap: balance; } .bp-prose h2 { margin: 2.4em 0 .7em; padding-top: .55em; border-top: 1px solid var(--bp-line); font-size: 1.75rem; line-height: 1.28; font-weight: 700; } .bp-prose h2:first-child { margin-top: .4em; border-top: 0; padding-top: 0; } .bp-prose h3 { margin: 1.9em 0 .6em; font-size: 1.3125rem; line-height: 1.36; font-weight: 700; } .bp-prose h4 { margin: 1.6em 0 .5em; font-size: 1.0625rem; line-height: 1.45; font-weight: 700; letter-spacing: 0; } .bp-prose a { color: var(--bp-primary); text-decoration: none; background-image: linear-gradient(var(--bp-lilac-line), var(--bp-lilac-line)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .2s var(--bp-ease), color .18s var(--bp-ease); } .bp-prose a:hover { color: var(--bp-primary-dark); background-image: linear-gradient(var(--bp-primary), var(--bp-primary)); background-size: 100% 2px; } .bp-prose strong { color: var(--bp-ink); font-weight: 600; } .bp-prose ul, .bp-prose ol { margin: 0 0 1.5em; padding-left: 1.35em; } .bp-prose li { margin-bottom: .6em; padding-left: .25em; } .bp-prose li::marker { color: var(--bp-accent-ink); font-weight: 600; } .bp-prose ul ul, .bp-prose ol ol, .bp-prose ul ol, .bp-prose ol ul { margin: .6em 0 0; } .bp-prose blockquote { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--bp-primary); font-size: 1.1875rem; line-height: 1.68; color: var(--bp-ink); font-weight: 500; } .bp-prose blockquote p:last-child { margin-bottom: 0; } .bp-prose blockquote cite { display: block; margin-top: .8em; font-size: .875rem; font-style: normal; font-weight: 400; color: var(--bp-faint); } .bp-prose img, .bp-prose video { max-width: 100%; height: auto; border-radius: var(--bp-radius); } .bp-prose figure { margin: 2em 0; } .bp-prose figcaption, .bp-prose .wp-caption-text { margin-top: 10px; font-size: .8125rem; line-height: 1.55; color: var(--bp-faint); text-align: center; } .bp-prose hr { margin: 2.6em 0; border: 0; height: 1px; background: var(--bp-line); } /* Gutenberg alignment (merged — wide and full behave identically at this measure) */ .bp-prose .alignwide, .bp-prose .alignfull { width: calc(100% + 80px); max-width: calc(100% + 80px); margin-left: -40px; } .bp-prose .alignleft { float: left; margin: .4em 1.6em 1.2em 0; max-width: 45%; } .bp-prose .alignright{ float: right; margin: .4em 0 1.2em 1.6em; max-width: 45%; } .bp-prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; } /* -------------------------------------------------------------------------- 11. Tables + comparison tables Radius lives on the wrapper — border-collapse can't clip corners. -------------------------------------------------------------------------- */ .bp-table, .bp-prose .wp-block-table { margin: 2em 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; } .bp-table table, .bp-prose .wp-block-table table, .bp-prose > table { width: 100%; min-width: 480px; margin: 0; border-collapse: collapse; font-size: .9375rem; line-height: 1.6; } .bp-prose > table { display: block; overflow-x: auto; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); } .bp-prose thead th { background: var(--bp-lilac-soft); color: var(--bp-ink); font-weight: 600; text-align: left; white-space: nowrap; } .bp-prose th, .bp-prose td { padding: 13px 16px; border-bottom: 1px solid var(--bp-line); } .bp-prose tbody tr:last-child td { border-bottom: 0; } .bp-prose tbody tr:hover { background: var(--bp-bg-soft); } /* Comparison variant: first column is a row header */ .bp-table--compare tbody th { background: var(--bp-bg-soft); font-weight: 600; color: var(--bp-ink); text-align: left; } .bp-table--compare .bp-yes { color: #1F7A44; font-weight: 600; } .bp-table--compare .bp-no { color: #B0402E; font-weight: 600; } /* -------------------------------------------------------------------------- 12. Code -------------------------------------------------------------------------- */ .bp-prose code { font-family: var(--bp-mono); font-size: .875em; padding: .16em .42em; border-radius: 5px; background: var(--bp-lilac); color: var(--bp-primary-dark); word-break: break-word; } .bp-prose pre { position: relative; margin: 2em 0; padding: 22px 24px; border-radius: var(--bp-radius); background: #17152A; color: #E8E5FA; font-family: var(--bp-mono); font-size: .875rem; line-height: 1.72; overflow-x: auto; tab-size: 2; } .bp-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; } .bp-copy { position: absolute; top: 10px; right: 10px; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: rgba(255, 255, 255, .07); color: #C9C2F5; /* 10.63:1 on #17152A */ font-family: var(--bp-font); font-size: .75rem; font-weight: 500; cursor: pointer; opacity: 0; transition: opacity .18s var(--bp-ease), background .18s var(--bp-ease); } .bp-prose pre:hover .bp-copy, .bp-prose pre:focus-within .bp-copy { opacity: 1; } .bp-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; } .bp-copy[data-state="copied"] { background: var(--bp-primary); border-color: var(--bp-primary); color: #fff; opacity: 1; } /* -------------------------------------------------------------------------- 13. Callouts -------------------------------------------------------------------------- */ .bp-note, .bp-tip, .bp-warn { margin: 2em 0; padding: 20px 24px; border-radius: var(--bp-radius); border-left: 3px solid var(--bp-primary); background: var(--bp-lilac-soft); font-size: 1rem; line-height: 1.7; } .bp-warn { border-left-color: var(--bp-warn-line); background: var(--bp-warn-bg); } .bp-note > :last-child, .bp-tip > :last-child, .bp-warn > :last-child { margin-bottom: 0; } .bp-note__label, .bp-tip__label, .bp-warn__label { display: block; margin-bottom: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-accent-ink); } .bp-warn .bp-warn__label { color: var(--bp-warn-line); } /* -------------------------------------------------------------------------- 14. FAQ accordion grid-template-rows 0fr→1fr: animates to auto height with no JS measurement, so no forced reflow on click (INP-safe). -------------------------------------------------------------------------- */ .bp-faq { margin: 2.4em 0; border-top: 1px solid var(--bp-line); } .bp-faq__item { border-bottom: 1px solid var(--bp-line); } /* The authored heading is kept for document outline; the button lives in it. */ .bp-faq__heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; border-top: 0; padding-top: 0; } .bp-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 0; border: 0; background: none; font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--bp-ink); text-align: left; cursor: pointer; transition: color .18s var(--bp-ease); } .bp-faq__q:hover { color: var(--bp-primary); } .bp-faq__q::after { content: ''; flex: 0 0 auto; width: 11px; height: 11px; margin-top: 7px; border-right: 2px solid var(--bp-accent-ink); border-bottom: 2px solid var(--bp-accent-ink); transform: rotate(45deg); transition: transform .24s var(--bp-ease); } .bp-faq__item.is-open .bp-faq__q::after { transform: rotate(-135deg); } .bp-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--bp-ease); } .bp-faq__item.is-open .bp-faq__a { grid-template-rows: 1fr; } .bp-faq__a > div { overflow: hidden; } .bp-faq__a > div > * { font-size: 1rem; line-height: 1.75; color: var(--bp-muted); } .bp-faq__a > div > :first-child { padding-top: 0; } .bp-faq__a > div > :last-child { margin-bottom: 22px; } /* No-JS fallback: everything open and readable */ .bp-faq:not([data-enhanced]) .bp-faq__a { grid-template-rows: 1fr; } /* -------------------------------------------------------------------------- 15. Lazy video -------------------------------------------------------------------------- */ .bp-video { position: relative; margin: 2em 0; aspect-ratio: 16 / 9; border-radius: var(--bp-radius); overflow: hidden; background: #17152A; } .bp-video img, .bp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; border-radius: 0; } .bp-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--bp-primary); box-shadow: 0 6px 20px rgba(91, 61, 245, .16); cursor: pointer; transition: transform .2s var(--bp-ease), background .2s var(--bp-ease); } .bp-video__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .bp-video:hover .bp-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--bp-primary-dark); } /* -------------------------------------------------------------------------- 16. CTA -------------------------------------------------------------------------- */ .bp-cta { margin: 48px 0 0; padding: 34px 36px; border-radius: var(--bp-radius-lg); background: linear-gradient(135deg, var(--bp-primary) 0%, var(--bp-accent) 100%); color: #fff; } .bp-cta__title { margin: 0 0 10px; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: #fff; } .bp-cta__text { margin: 0 0 22px; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .92); max-width: 52ch; } .bp-cta__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 28px; border-radius: 999px; background: #fff; color: var(--bp-primary-dark); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: transform .18s var(--bp-ease), box-shadow .18s var(--bp-ease); } .bp-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 18, 31, .2); } .bp-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* -------------------------------------------------------------------------- 17. Author box -------------------------------------------------------------------------- */ .bp-author { display: flex; gap: 22px; margin: 56px 0 0; padding: 30px; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); background: var(--bp-lilac-soft); } .bp-author__avatar { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--bp-shadow-sm); } .bp-author__body { min-width: 0; } .bp-author__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-accent-ink); } .bp-author__name { display: inline-block; margin: 6px 0 8px; font-size: 1.1875rem; font-weight: 700; color: var(--bp-ink); text-decoration: none; } .bp-author__name:hover { color: var(--bp-primary); } .bp-author__bio { margin: 0; font-size: .9375rem; line-height: 1.72; color: var(--bp-muted); } .bp-author__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; } .bp-author__links a { font-size: .8125rem; font-weight: 500; color: var(--bp-primary); text-decoration: none; } .bp-author__links a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 18. Related posts -------------------------------------------------------------------------- */ .bp-related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--bp-line); } .bp-related__title { margin: 0 0 26px; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--bp-ink); } .bp-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .bp-related__card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); overflow: hidden; background: #fff; text-decoration: none; transition: transform .22s var(--bp-ease), box-shadow .22s var(--bp-ease), border-color .22s var(--bp-ease); } .bp-related__card:hover { transform: translateY(-3px); border-color: var(--bp-lilac-line); box-shadow: var(--bp-shadow-md); } .bp-related__thumb { display: block; aspect-ratio: 16 / 10; background: var(--bp-lilac-soft); overflow: hidden; } .bp-related__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--bp-ease); } .bp-related__card:hover .bp-related__thumb img { transform: scale(1.04); } .bp-related__body { display: block; padding: 16px 18px 20px; } .bp-related__cat { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-accent-ink); } .bp-related__heading { display: block; margin: 8px 0 0; font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--bp-ink); transition: color .22s var(--bp-ease); } .bp-related__card:hover .bp-related__heading { color: var(--bp-primary); } .bp-related__meta { display: block; margin-top: 10px; font-size: .75rem; color: var(--bp-faint); } /* wp_link_pages() output */ .bp-pagelinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2.4em 0 0; padding-top: 22px; border-top: 1px solid var(--bp-line); font-size: .875rem; color: var(--bp-muted); } .bp-pagelinks a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--bp-line); border-radius: 8px; color: var(--bp-primary); text-decoration: none; background: none; } .bp-pagelinks a:hover { border-color: var(--bp-lilac-line); background: var(--bp-lilac-soft); } /* -------------------------------------------------------------------------- 19. Comments -------------------------------------------------------------------------- */ .bp-single .comments-area { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--bp-line); } .bp-single .comments-title, .bp-single #reply-title { font-family: var(--bp-font); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--bp-ink); margin-bottom: 22px; } .bp-single .comment-list { list-style: none; margin: 0; padding: 0; } .bp-single .comment-body { padding: 22px 0; border-bottom: 1px solid var(--bp-line); font-size: .9375rem; line-height: 1.72; } .bp-single .comment-author .avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; } .bp-single .comment-meta { font-size: .8125rem; color: var(--bp-faint); } .bp-single .comment-form input[type="text"], .bp-single .comment-form input[type="email"], .bp-single .comment-form input[type="url"], .bp-single .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--bp-line); border-radius: 9px; background: #fff; font-family: inherit; font-size: .9375rem; color: var(--bp-ink); transition: border-color .18s var(--bp-ease), box-shadow .18s var(--bp-ease); } .bp-single .comment-form input:focus, .bp-single .comment-form textarea:focus { outline: none; border-color: var(--bp-accent-ink); box-shadow: 0 0 0 3px var(--bp-lilac); } .bp-single .comment-form input[type="submit"] { width: auto; height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--bp-primary); color: #fff; font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background .18s var(--bp-ease), transform .18s var(--bp-ease); } .bp-single .comment-form input[type="submit"]:hover { background: var(--bp-primary-dark); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 20. Back to top -------------------------------------------------------------------------- */ .bp-totop { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border: 1px solid var(--bp-line); border-radius: 50%; background: #fff; color: var(--bp-primary); box-shadow: var(--bp-shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .24s var(--bp-ease), visibility .24s var(--bp-ease), transform .24s var(--bp-ease), background .18s var(--bp-ease), color .18s var(--bp-ease), border-color .18s var(--bp-ease); z-index: 900; } .bp-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .bp-totop:hover { background: var(--bp-primary); color: #fff; border-color: var(--bp-primary); } .bp-totop::after { content: ''; position: absolute; top: 54%; left: 50%; width: 9px; height: 9px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); } /* -------------------------------------------------------------------------- 21. Scroll reveal (opt-in via JS so no-JS users never see blank content) -------------------------------------------------------------------------- */ [data-bp-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--bp-ease), transform .5s var(--bp-ease); } [data-bp-reveal].is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 22. Utilities -------------------------------------------------------------------------- */ .bp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .bp-skip { position: absolute; left: -9999px; } .bp-skip:focus { left: 16px; top: 16px; z-index: 10000; padding: 10px 18px; background: var(--bp-primary); color: #fff; border-radius: 8px; } /* -------------------------------------------------------------------------- 23. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1080px) { :root { --bp-gap: 40px; --bp-rail-w: 240px; } } @media (max-width: 960px) { .bp-grid { grid-template-columns: minmax(0, 1fr); max-width: var(--bp-measure); margin: 0 auto; } /* JS moves .bp-toc out of the rail to sit after the hero, so the rail collapses rather than pushing a TOC above the

. */ .bp-rail { position: static; max-height: none; margin: 0; } .bp-rail:empty { display: none; } .bp-toc--inline { margin: 0 0 36px; } .bp-toc--inline .bp-toc__list { max-height: 320px; overflow-y: auto; } .bp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .bp-shell { padding: 0 18px; } .bp-hero { padding-top: 26px; } .bp-prose { font-size: 1.0625rem; line-height: 1.76; } .bp-prose h2 { font-size: 1.5rem; } .bp-prose h3 { font-size: 1.1875rem; } .bp-prose .alignwide, .bp-prose .alignfull { width: calc(100% + 36px); max-width: calc(100% + 36px); margin-left: -18px; border-radius: 0; } .bp-prose .alignleft, .bp-prose .alignright { float: none; max-width: 100%; margin: 1.5em 0; } .bp-summary { padding: 22px 20px; } .bp-cta { padding: 26px 24px; } .bp-author { flex-direction: column; gap: 16px; padding: 24px; } .bp-related__grid { grid-template-columns: minmax(0, 1fr); } .bp-copy { opacity: 1; } /* no hover on touch */ .bp-totop { right: 16px; bottom: 16px; } } /* -------------------------------------------------------------------------- 24. Focus + motion -------------------------------------------------------------------------- */ .bp-single a:focus-visible, .bp-single button:focus-visible, .bp-totop:focus-visible, .bp-copy:focus-visible { outline: 2px solid var(--bp-primary); outline-offset: 3px; border-radius: 3px; } .bp-copy:focus-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bp-single *, .bp-single *::before, .bp-single *::after, .bp-totop, .bp-progress__bar { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-bp-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 25. Print -------------------------------------------------------------------------- */ @media print { .bp-rail, .bp-share, .bp-progress, .bp-totop, .bp-related, .bp-cta, .bp-video__play, .comments-area { display: none !important; } .bp-grid { display: block; } .bp-prose { font-size: 11pt; line-height: 1.6; color: #000; } .bp-prose a { color: #000; background: none; } .bp-faq__a { grid-template-rows: 1fr !important; } } /* -------------------------------------------------------------------------- 14. Header additions - verified tick, updated date, floating share rail -------------------------------------------------------------------------- */ .bp-single .bp-meta__verified { display: inline-flex; align-items: center; margin-left: 5px; color: var(--bp-primary); vertical-align: middle; } .bp-single .bp-meta__verified svg { width: 16px; height: 16px; display: block; } .bp-single .bp-meta__date { display: inline-flex; align-items: center; gap: 5px; } .bp-single .bp-meta__ico { width: 14px; height: 14px; flex: 0 0 auto; opacity: .75; } /* Floating share rail - pinned to the viewport edge on wide screens only. */ .bp-sharerail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30; display: none; flex-direction: column; gap: 10px; } .bp-sharerail__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--bp-primary); box-shadow: 0 4px 14px rgba(20, 18, 31, .16); transition: transform .18s var(--bp-ease), box-shadow .18s var(--bp-ease), filter .18s var(--bp-ease); } .bp-sharerail__btn svg { width: 18px; height: 18px; display: block; } .bp-sharerail__btn--fb { background: #1877F2; } .bp-sharerail__btn--x { background: #14121F; } .bp-sharerail__btn--in { background: #0A66C2; } .bp-sharerail__btn--link { background: var(--bp-primary); } .bp-sharerail__btn:hover, .bp-sharerail__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 18, 31, .24); filter: saturate(1.15); } .bp-sharerail__btn:focus-visible { outline: 2px solid var(--bp-primary); outline-offset: 3px; } /* Copy-link confirmation - a tooltip, so the icon is never replaced. */ .bp-sharerail__btn--link { position: relative; } .bp-sharerail__btn--link::after { content: attr(data-copied-label); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px); padding: 6px 10px; border-radius: 8px; background: var(--bp-ink); color: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s var(--bp-ease), transform .18s var(--bp-ease); } .bp-sharerail__btn--link.is-copied::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* Only show the rail when there is genuinely room beside the article. */ @media (min-width: 1280px) { .bp-sharerail { display: flex; } } @media (prefers-reduced-motion: reduce) { .bp-sharerail__btn, .bp-sharerail__btn--link::after { transition: none; } } /* -------------------------------------------------------------------------- 15. Inline table of contents The sticky rail is gone. The TOC now sits in the article, directly above the first heading. These rules come last on purpose so they win over the rail-era .bp-toc styles in section 9 without touching them. -------------------------------------------------------------------------- */ .bp-toc--inline { margin: 0 0 40px; padding: 24px 26px 20px; border: 1px solid var(--bp-lilac-line); border-radius: var(--bp-radius-lg); background: var(--bp-lilac-soft); scroll-margin-top: var(--bp-offset); } .bp-toc--inline .bp-toc__title { margin: 0 0 12px; } /* The rail used a vertical guide line. In a wide, two-column box that reads as a stray border, so items get their own dot marker instead. */ .bp-toc--inline .bp-toc__list { border-left: 0; } .bp-toc--inline .bp-toc__link { position: relative; margin-left: 0; padding: 6px 0 6px 20px; border-left: 0; color: var(--bp-body); } .bp-toc--inline .bp-toc__link::before { content: ""; position: absolute; left: 3px; top: 1em; width: 6px; height: 6px; border-radius: 50%; background: var(--bp-lilac-line); transition: background .18s var(--bp-ease), transform .18s var(--bp-ease); } .bp-toc--inline .bp-toc__link:hover, .bp-toc--inline .bp-toc__link:focus-visible { color: var(--bp-primary); } .bp-toc--inline .bp-toc__link:hover::before, .bp-toc--inline .bp-toc__link:focus-visible::before { background: var(--bp-primary); transform: scale(1.25); } .bp-toc--inline .bp-toc__item--h3 .bp-toc__link { padding-left: 38px; color: var(--bp-muted); } .bp-toc--inline .bp-toc__item--h3 .bp-toc__link::before { left: 22px; width: 4px; height: 4px; } /* Two columns once the box is wide enough to justify it. */ @media (min-width: 720px) { .bp-toc--inline .bp-toc__list { columns: 2; column-gap: 36px; } .bp-toc--inline .bp-toc__item { break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { .bp-toc--inline .bp-toc__link::before { transition: none; } } /* -------------------------------------------------------------------------- 16. Reviewed by Sits under the byline. Renders only when an editor has chosen a reviewer, so there is no empty-state styling to worry about. -------------------------------------------------------------------------- */ .bp-reviewed { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px 8px 10px; border: 1px solid var(--bp-lilac-line); border-radius: 999px; background: var(--bp-lilac-soft); font-size: .875rem; line-height: 1.4; color: var(--bp-muted); width: fit-content; max-width: 100%; } .bp-reviewed__ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--bp-primary); } .bp-reviewed__avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; border: 2px solid #fff; } .bp-reviewed__text { min-width: 0; } .bp-reviewed__name { color: var(--bp-ink); font-weight: 650; text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s var(--bp-ease), border-color .18s var(--bp-ease); } .bp-reviewed__name:hover, .bp-reviewed__name:focus-visible { color: var(--bp-primary); border-bottom-color: currentColor; } .bp-reviewed__on::before { content: "\00b7"; margin: 0 6px; color: var(--bp-lilac-line); } @media (max-width: 640px) { .bp-reviewed { border-radius: var(--bp-radius); align-items: flex-start; } .bp-reviewed__on { display: block; } .bp-reviewed__on::before { content: none; } } /* -------------------------------------------------------------------------- 17. Reviewed by - inline in the byline Overrides the standalone-pill treatment in section 16. The review line now sits inside .bp-meta as one more item in that flex row. -------------------------------------------------------------------------- */ .bp-single .bp-reviewed { display: inline-flex; align-items: center; gap: 7px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; color: inherit; } /* Same 42px as .bp-meta__avatar - the author and the approver carry equal weight in the byline, so they should not be different sizes. */ .bp-single .bp-reviewed__avatar { width: 42px; height: 42px; border: 2px solid var(--bp-lilac); object-fit: cover; } .bp-single .bp-reviewed__ico { width: 15px; height: 15px; } .bp-single .bp-reviewed__name { font-weight: 600; border-bottom: 0; } .bp-single .bp-reviewed__on { margin-left: 6px; color: var(--bp-faint); } .bp-single .bp-reviewed__on::before { content: none; } /* The review date is the least load-bearing item in the row - drop it first on narrow screens rather than forcing the byline to wrap awkwardly. */ @media (max-width: 720px) { .bp-single .bp-reviewed__on { display: none; } } /* -------------------------------------------------------------------------- 18. Byline on a single line Two 42px avatars plus three text items overflowed the measure and wrapped. Avatars drop to 32px (still identical to each other) and the row is locked to one line from 720px up. Below that it is still allowed to wrap, because forcing nowrap on a 360px phone produces horizontal scroll, which is worse than a two-line byline. -------------------------------------------------------------------------- */ .bp-single .bp-meta__avatar, .bp-single .bp-reviewed__avatar { width: 32px; height: 32px; flex: 0 0 auto; } @media (min-width: 720px) { .bp-single .bp-meta { flex-wrap: nowrap; gap: 10px; } .bp-single .bp-meta > *, .bp-single .bp-reviewed, .bp-single .bp-reviewed__text { white-space: nowrap; } /* If a name is long enough to still not fit, the reviewer half gives way first - the author byline is the more important of the two. */ .bp-single .bp-reviewed { min-width: 0; overflow: hidden; } .bp-single .bp-reviewed__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bp-single .bp-meta__author, .bp-single .bp-meta__date { flex: 0 0 auto; } }