/* ============================================================ BuiltRight Blog Layout — plugin stylesheet All rules scoped under .brm-scope so they never touch your theme. Theme styles also can't leak in (the wrapper resets box-sizing etc). Edit the look on each post via the ACF "Design" fields, or change the defaults on the .brm-scope wrapper in single-builtright.php. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Archivo+Expanded:wght@600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* keep the layout from inheriting odd theme widths */ .brm-scope { width: 100%; } .brm-scope img { height: auto; } /* ============================================================ BuiltRight Marketing — Blog template stylesheet Three switchable directions via [data-direction] on : industrial (default) · editorial · premium Accent + heading font are independently tweakable via CSS vars set inline on (--accent, --font-head). ============================================================ */ /* ---------- Fonts ---------- */ /* ---------- Reset ---------- */ .brm-scope *, .brm-scope *::before, .brm-scope *::after { box-sizing: border-box; } .brm-scope { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } .brm-scope { margin: 0; } .brm-scope img { max-width: 100%; display: block; } .brm-scope a { color: inherit; } .brm-scope h1, .brm-scope h2, .brm-scope h3, .brm-scope h4, .brm-scope p, .brm-scope ul, .brm-scope ol, .brm-scope figure, .brm-scope blockquote { margin: 0; } .brm-scope button { font: inherit; cursor: pointer; } /* ============================================================ DESIGN TOKENS — defaults (Industrial) ============================================================ */ .brm-scope { --accent: #F2581E; /* tweakable */ --accent-ink: #ffffff; --font-head: 'Archivo'; /* tweakable */ --font-body: 'Public Sans', system-ui, sans-serif; --bg: #0c0d10; --surface: #131519; --surface-2: #1b1e24; --ink: #f4f5f7; --ink-2: #c6cad2; --muted: #8c93a0; --rule: rgba(255,255,255,0.10); --rule-strong: rgba(255,255,255,0.20); --page-bg: #0c0d10; --content-bg: #0c0d10; --content-ink: #e9ebef; --content-ink-strong: #ffffff; --content-muted: #9aa0ab; --content-rule: rgba(255,255,255,0.12); --card: #15181d; --card-rule: rgba(255,255,255,0.10); --head-transform: uppercase; --head-tracking: -0.01em; --head-weight: 800; --head-leading: 0.98; --radius: 4px; --radius-lg: 6px; --measure: 70ch; --body-size: 19px; --body-leading: 1.72; --shadow: 0 1px 0 rgba(255,255,255,0.04); --maxw: 1240px; } /* ---------- Editorial ---------- */ .brm-scope[data-direction="editorial"] { --accent-ink: #ffffff; --font-body: 'Source Serif 4', Georgia, serif; --bg: #faf8f4; --surface: #ffffff; --surface-2: #f3efe7; --ink: #1c1a17; --ink-2: #3a352e; --muted: #7c756a; --rule: rgba(28,26,23,0.12); --rule-strong: rgba(28,26,23,0.24); --page-bg: #f3efe7; --content-bg: #ffffff; --content-ink: #2a2620; --content-ink-strong: #14110c; --content-muted: #847b6e; --content-rule: rgba(28,26,23,0.12); --card: #ffffff; --card-rule: rgba(28,26,23,0.12); --head-transform: none; --head-tracking: -0.02em; --head-weight: 700; --head-leading: 1.04; --radius: 6px; --radius-lg: 10px; --body-size: 20px; --body-leading: 1.78; --shadow: 0 1px 2px rgba(20,17,12,0.06); } /* ---------- Premium minimal ---------- */ .brm-scope[data-direction="premium"] { --accent-ink: #ffffff; --font-body: 'Public Sans', system-ui, sans-serif; --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f6f5; --ink: #111112; --ink-2: #3d3d40; --muted: #9a9a9e; --rule: rgba(17,17,18,0.10); --rule-strong: rgba(17,17,18,0.18); --page-bg: #ffffff; --content-bg: #ffffff; --content-ink: #2b2b2e; --content-ink-strong: #0a0a0b; --content-muted: #9a9a9e; --content-rule: rgba(17,17,18,0.09); --card: #ffffff; --card-rule: rgba(17,17,18,0.10); --head-transform: none; --head-tracking: -0.03em; --head-weight: 600; --head-leading: 1.02; --radius: 2px; --radius-lg: 3px; --body-size: 20px; --body-leading: 1.8; --measure: 66ch; --shadow: none; } /* ============================================================ BASE ============================================================ */ .brm-scope { font-family: var(--font-body); background: var(--page-bg); color: var(--content-ink); font-size: var(--body-size); line-height: var(--body-leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .brm-scope .head, .brm-scope h1, .brm-scope h2, .brm-scope h3, .brm-scope h4, .brm-scope .eyebrow, .brm-scope .btn, .brm-scope .logo, .brm-scope .nav a, .brm-scope .meta-bar, .brm-scope .crumbs { font-family: var(--font-head), 'Archivo', system-ui, sans-serif; } .brm-scope .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .brm-scope .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 0.72rem; color: var(--accent); display: inline-flex; align-items: center; gap: 0.6em; } .brm-scope .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; } /* ============================================================ PROGRESS BAR ============================================================ */ .brm-scope #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 200; transition: width 0.1s linear; } /* ============================================================ HEADER / NAV ============================================================ */ .brm-scope .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); color: var(--ink); } .brm-scope .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; max-width: var(--maxw); } .brm-scope .logo { display: flex; align-items: baseline; gap: 0.3em; font-weight: 500; letter-spacing: 0; text-decoration: none; font-size: 1.32rem; line-height: 1; color: var(--ink); text-transform: uppercase; } .brm-scope .logo b { color: var(--ink); font-weight: 500; } .brm-scope .logo span { font-weight: 500; color: var(--ink); margin-left: 0; letter-spacing: 0; } .brm-scope .nav { display: flex; align-items: center; gap: 30px; } .brm-scope .nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: uppercase; transition: color 0.15s; } .brm-scope .nav a:hover { color: var(--ink); } .brm-scope .btn { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.86rem; text-decoration: none; background: var(--accent); color: var(--accent-ink); padding: 12px 20px; border: none; border-radius: var(--radius); transition: transform 0.12s, filter 0.15s; white-space: nowrap; } .brm-scope .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .brm-scope .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule-strong); } .brm-scope .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .brm-scope .btn--lg { padding: 16px 28px; font-size: 0.95rem; } .brm-scope .nav-toggle { display: none; } @media (max-width: 900px) { .brm-scope .nav .nav-link { display: none; } } /* ============================================================ BREADCRUMBS ============================================================ */ .brm-scope .crumbs { background: var(--page-bg); border-bottom: 1px solid var(--content-rule); } .brm-scope .crumbs .wrap { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--content-muted); } .brm-scope .crumbs a { text-decoration: none; color: var(--content-muted); transition: color 0.15s; } .brm-scope .crumbs a:hover { color: var(--accent); } .brm-scope .crumbs .sep { opacity: 0.5; } .brm-scope .crumbs [aria-current] { color: var(--content-ink-strong); } /* ============================================================ HERO — three treatments via [data-hero] ============================================================ */ .brm-scope .hero { background: var(--bg); color: var(--ink); } .brm-scope .hero .wrap { max-width: var(--maxw); } .brm-scope .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 20px 0 0; } .brm-scope .tag { font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.72rem; color: var(--accent); border: 1.5px solid var(--accent); padding: 5px 11px; border-radius: 999px; } .brm-scope .hero h1 { font-weight: var(--head-weight); text-transform: var(--head-transform); letter-spacing: var(--head-tracking); line-height: var(--head-leading); font-size: clamp(2.4rem, 5.2vw, 4.1rem); max-width: 18ch; color: var(--ink); } .brm-scope .hero .dek { font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin-top: 22px; text-transform: none; letter-spacing: 0; } .brm-scope .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; font-family: var(--font-body); } .brm-scope .hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .brm-scope .hero-cta .watch-note { font-family: var(--font-body); font-size: 0.86rem; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; } .brm-scope .hero-cta .watch-note svg { width: 15px; height: 15px; color: #FF0000; } .brm-scope .btn--watch svg { width: 18px; height: 18px; } .brm-scope .byline .avatar { width: 46px; height: 46px; border-radius: 999px; flex: none; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000)); display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-head), sans-serif; letter-spacing: 0; } .brm-scope .byline .who { font-size: 0.95rem; line-height: 1.35; } .brm-scope .byline .who b { color: var(--ink); font-weight: 700; } .brm-scope .byline .who span { color: var(--muted); } .brm-scope .byline .dot { color: var(--muted); } /* hero figure / placeholder */ .brm-scope .figph { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--rule); display: grid; place-items: center; aspect-ratio: 16/9; width: 100%; } .brm-scope .figph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.5; } .brm-scope .figph .ph-label { position: relative; z-index: 1; font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 10px; } .brm-scope .figph .ph-label svg { width: 20px; height: 20px; } /* Treatment A: overlay (image full-bleed, title on top) */ .brm-scope[data-hero="overlay"] .hero { position: relative; } .brm-scope[data-hero="overlay"] .hero-figure { position: absolute; inset: 0; z-index: 0; } .brm-scope[data-hero="overlay"] .hero-figure .figph { height: 100%; aspect-ratio: auto; border: none; border-radius: 0; } .brm-scope[data-hero="overlay"] .hero-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 100%); } .brm-scope[data-hero="overlay"] .hero .wrap { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 64px; min-height: 60vh; display: flex; flex-direction: column; justify-content: flex-end; } .brm-scope[data-hero="overlay"] .hero .ph-label { color: var(--ink-2); } /* Treatment B: block (title on solid, image below) — default */ .brm-scope[data-hero="block"] .hero .wrap { padding-top: 64px; padding-bottom: 0; } .brm-scope[data-hero="block"] .hero-figure { margin-top: 48px; } .brm-scope[data-hero="block"] .hero-figure .figph { aspect-ratio: 21/9; } .brm-scope[data-hero="block"] .hero-figure figcaption { color: var(--muted); font-size: 0.82rem; padding: 12px 2px 0; font-family: var(--font-body); } /* Treatment C: text only */ .brm-scope[data-hero="text"] .hero .wrap { padding-top: 72px; padding-bottom: 56px; max-width: 1000px; } .brm-scope[data-hero="text"] .hero-figure { display: none; } .brm-scope[data-hero="text"] .hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 16ch; } /* ============================================================ ARTICLE LAYOUT — left TOC sidebar + content ============================================================ */ .brm-scope .article-area { background: var(--page-bg); padding: 64px 0 80px; } .brm-scope .layout { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 56px; align-items: start; } /* TOC sidebar */ .brm-scope .toc { position: sticky; top: 98px; align-self: start; font-family: var(--font-body); } .brm-scope .toc h2 { font-family: var(--font-head), sans-serif; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--content-muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--content-rule); } .brm-scope .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .brm-scope .toc li { counter-increment: toc; } .brm-scope .toc a { display: flex; gap: 10px; text-decoration: none; color: var(--content-muted); font-size: 0.9rem; line-height: 1.4; padding: 7px 0; border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px; transition: color 0.15s, border-color 0.15s; } .brm-scope .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 0.72rem; color: var(--content-muted); opacity: 0.6; } .brm-scope .toc a:hover { color: var(--content-ink-strong); } .brm-scope .toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .brm-scope .toc a.active::before { color: var(--accent); opacity: 1; } .brm-scope .toc .toc-share { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--content-rule); display: flex; gap: 10px; } .brm-scope .toc .toc-share a { width: 36px; height: 36px; padding: 0; margin: 0; border: 1px solid var(--content-rule); border-radius: var(--radius); display: grid; place-items: center; color: var(--content-muted); } .brm-scope .toc .toc-share a:hover { border-color: var(--accent); color: var(--accent); } .brm-scope .toc .toc-share svg { width: 17px; height: 17px; } /* ============================================================ PROSE ============================================================ */ .brm-scope .prose { max-width: var(--measure); } .brm-scope .prose > * + * { margin-top: 1.45em; } .brm-scope .prose p { color: var(--content-ink); } .brm-scope .prose .lead { font-size: 1.22em; line-height: 1.55; color: var(--content-ink-strong); } .brm-scope .prose h2 { font-family: var(--font-head), sans-serif; text-transform: var(--head-transform); letter-spacing: var(--head-tracking); font-weight: var(--head-weight); line-height: 1.12; font-size: clamp(1.6rem, 2.6vw, 2.05rem); color: var(--content-ink-strong); margin-top: 2.2em; padding-top: 0.2em; scroll-margin-top: 96px; } .brm-scope .prose h2 .num { color: var(--accent); font-size: 0.7em; margin-right: 0.5em; font-variant-numeric: tabular-nums; } .brm-scope .prose h3 { font-family: var(--font-head), sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-size: clamp(1.2rem, 1.9vw, 1.45rem); color: var(--content-ink-strong); margin-top: 1.8em; text-transform: none; } .brm-scope .prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; font-weight: 600; } .brm-scope .prose ul, .brm-scope .prose ol { padding-left: 0; list-style: none; } .brm-scope .prose ul > li, .brm-scope .prose ol > li { position: relative; padding-left: 1.9em; margin-top: 0.7em; color: var(--content-ink); } .brm-scope .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; background: var(--accent); border-radius: 2px; } .brm-scope .prose ol { counter-reset: li; } .brm-scope .prose ol > li { counter-increment: li; } .brm-scope .prose ol > li::before { content: counter(li); position: absolute; left: 0; top: 0.05em; font-family: var(--font-head), sans-serif; font-weight: 800; font-size: 0.85em; color: var(--accent); width: 1.4em; } .brm-scope .prose strong { color: var(--content-ink-strong); font-weight: 700; } .brm-scope .prose blockquote { border-left: 3px solid var(--accent); padding: 6px 0 6px 26px; margin-left: 0; font-size: 1.22em; line-height: 1.5; font-style: italic; color: var(--content-ink-strong); } .brm-scope .prose blockquote cite { display: block; margin-top: 12px; font-size: 0.68em; font-style: normal; font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--content-muted); font-weight: 700; } .brm-scope .prose figure { margin: 2em 0; } .brm-scope .prose figure .figph { aspect-ratio: 16/9; } .brm-scope .prose figcaption { font-size: 0.82rem; color: var(--content-muted); padding-top: 10px; font-family: var(--font-body); } /* Key-takeaways / callout box */ .brm-scope .callout { background: var(--card); border: 1px solid var(--card-rule); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 24px 26px; } .brm-scope .callout .callout-label { font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.74rem; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .brm-scope .callout .callout-label svg { width: 16px; height: 16px; } .brm-scope .callout ul { margin: 0; } .brm-scope .callout p { margin: 0; } /* Stat strip */ .brm-scope .statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--card-rule); border: 1px solid var(--card-rule); border-radius: var(--radius-lg); overflow: hidden; } .brm-scope .statgrid .stat { background: var(--card); padding: 22px 20px; } .brm-scope .statgrid .stat .n { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--content-ink-strong); line-height: 1; letter-spacing: -0.02em; } .brm-scope .statgrid .stat .n .accent { color: var(--accent); } .brm-scope .statgrid .stat .l { font-family: var(--font-body); font-size: 0.84rem; color: var(--content-muted); margin-top: 8px; line-height: 1.35; } @media (max-width: 560px) { .brm-scope .statgrid { grid-template-columns: 1fr; } } /* ============================================================ INLINE CTA (mid-article) ============================================================ */ .brm-scope .cta-inline { background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); padding: 32px 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; overflow: hidden; border: 1px solid var(--rule); } .brm-scope .cta-inline::before { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%); } .brm-scope .cta-inline .ci-text { position: relative; z-index: 1; max-width: 60ch; } .brm-scope .cta-inline h3 { font-family: var(--font-head), sans-serif; color: var(--ink); text-transform: var(--head-transform); letter-spacing: var(--head-tracking); font-weight: var(--head-weight); font-size: 1.5rem; line-height: 1.08; } .brm-scope .cta-inline p { color: var(--ink-2); margin-top: 8px; font-size: 0.98rem; font-family: var(--font-body); } .brm-scope .cta-inline .btn { position: relative; z-index: 1; flex: none; } /* ============================================================ FAQ ============================================================ */ .brm-scope .faq { margin-top: 2.4em; } .brm-scope .faq h2 { margin-top: 0; } .brm-scope .faq-list { margin-top: 24px; border-top: 1px solid var(--content-rule); } .brm-scope .faq-item { border-bottom: 1px solid var(--content-rule); } .brm-scope .faq-item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; gap: 18px; font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--content-ink-strong); line-height: 1.3; } .brm-scope .faq-item summary::-webkit-details-marker { display: none; } .brm-scope .faq-item .ic { flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--content-rule); display: grid; place-items: center; margin-left: auto; transition: transform 0.25s, border-color 0.2s, background 0.2s; position: relative; } .brm-scope .faq-item .ic::before, .brm-scope .faq-item .ic::after { content: ""; position: absolute; background: var(--content-ink-strong); transition: background 0.2s; } .brm-scope .faq-item .ic::before { width: 11px; height: 2px; } .brm-scope .faq-item .ic::after { width: 2px; height: 11px; } .brm-scope .faq-item[open] .ic { transform: rotate(45deg); border-color: var(--accent); background: var(--accent); } .brm-scope .faq-item[open] .ic::before, .brm-scope .faq-item[open] .ic::after { background: #fff; } .brm-scope .faq-item .ans { padding: 0 44px 24px 0; color: var(--content-ink); font-family: var(--font-body); } .brm-scope .faq-item .ans > * + * { margin-top: 1em; } /* ============================================================ AUTHOR BIO ============================================================ */ .brm-scope .author-bio { margin-top: 2.6em; padding: 30px; border: 1px solid var(--card-rule); border-radius: var(--radius-lg); background: var(--card); display: flex; gap: 22px; align-items: flex-start; } .brm-scope .author-bio .avatar { width: 72px; height: 72px; border-radius: var(--radius-lg); flex: none; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.4rem; font-family: var(--font-head), sans-serif; } .brm-scope .author-bio .ab-name { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--content-ink-strong); } .brm-scope .author-bio .ab-role { font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--accent); font-weight: 700; margin-top: 3px; } .brm-scope .author-bio p { margin-top: 12px; font-size: 0.96rem; color: var(--content-ink); } .brm-scope .author-bio .ab-links { margin-top: 14px; display: flex; gap: 18px; } .brm-scope .author-bio .ab-links a { font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--content-muted); text-decoration: none; } .brm-scope .author-bio .ab-links a:hover { color: var(--accent); } /* ============================================================ END CTA BANNER ============================================================ */ .brm-scope .cta-banner { background: var(--bg); color: var(--ink); border-top: 1px solid var(--rule); } .brm-scope .cta-banner .wrap { padding: 76px 28px; max-width: var(--maxw); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; } .brm-scope .cta-banner h2 { font-family: var(--font-head), sans-serif; color: var(--ink); text-transform: var(--head-transform); letter-spacing: var(--head-tracking); font-weight: var(--head-weight); line-height: 1.02; font-size: clamp(2rem, 4vw, 3.1rem); } .brm-scope .cta-banner h2 .accent { color: var(--accent); } .brm-scope .cta-banner p { color: var(--ink-2); margin-top: 18px; font-size: 1.08rem; max-width: 46ch; font-family: var(--font-body); } .brm-scope .cta-banner .cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .brm-scope .cta-banner .cta-actions .btn { justify-content: center; } .brm-scope .cta-banner .reassure { font-family: var(--font-body); font-size: 0.86rem; color: var(--muted); display: flex; align-items: center; gap: 8px; justify-content: center; } .brm-scope .cta-banner .reassure svg { width: 15px; height: 15px; color: var(--accent); } @media (max-width: 820px) { .brm-scope .cta-banner .wrap { grid-template-columns: 1fr; } } /* ============================================================ RELATED POSTS ============================================================ */ .brm-scope .related { background: var(--page-bg); padding: 72px 0 40px; border-top: 1px solid var(--content-rule); } .brm-scope .related .wrap { max-width: var(--maxw); } .brm-scope .related .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; } .brm-scope .related h2 { font-family: var(--font-head), sans-serif; text-transform: var(--head-transform); letter-spacing: var(--head-tracking); font-weight: var(--head-weight); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--content-ink-strong); line-height: 1; } .brm-scope .cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 860px) { .brm-scope .cardgrid { grid-template-columns: 1fr; } } .brm-scope .pcard { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 1px solid var(--card-rule); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.18s, border-color 0.18s; } .brm-scope .pcard:hover { transform: translateY(-4px); border-color: var(--accent); } .brm-scope .pcard .pthumb { aspect-ratio: 16/10; } .brm-scope .pcard .pthumb .figph { height: 100%; border: none; border-radius: 0; aspect-ratio: auto; } .brm-scope .pcard .pbody { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .brm-scope .pcard .pcat { font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--accent); } .brm-scope .pcard h3 { font-family: var(--font-head), sans-serif; font-weight: 700; line-height: 1.18; font-size: 1.18rem; color: var(--content-ink-strong); letter-spacing: -0.01em; } .brm-scope .pcard p { font-family: var(--font-body); font-size: 0.92rem; color: var(--content-muted); line-height: 1.5; } .brm-scope .pcard .pmeta { margin-top: auto; padding-top: 8px; font-family: var(--font-body); font-size: 0.78rem; color: var(--content-muted); display: flex; gap: 12px; } /* ============================================================ YOUTUBE VIDEO BAND ============================================================ */ .brm-scope .video-band { background: var(--bg); color: var(--ink); border-top: 1px solid var(--rule); padding: 76px 0; } .brm-scope .video-band .wrap { max-width: var(--maxw); } .brm-scope .video-band .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; } .brm-scope .video-band h2 { font-family: var(--font-head), sans-serif; text-transform: var(--head-transform); letter-spacing: var(--head-tracking); font-weight: var(--head-weight); font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--ink); line-height: 1; margin-top: 10px; } .brm-scope .video-band .yt-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--font-head), sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; color: var(--ink); border: 1.5px solid var(--rule-strong); padding: 11px 18px; border-radius: var(--radius); transition: border-color 0.15s, color 0.15s; } .brm-scope .video-band .yt-btn:hover { border-color: #FF0000; color: #FF0000; } .brm-scope .video-band .yt-btn svg { width: 22px; height: 22px; color: #FF0000; } .brm-scope .vid-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; } .brm-scope .video-band--single .vid-grid { grid-template-columns: 1fr; max-width: 920px; } @media (max-width: 880px) { .brm-scope .vid-grid { grid-template-columns: 1fr; } } /* video player facade */ .brm-scope .vplayer { position: relative; display: block; text-decoration: none; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2)), var(--surface-2)); } .brm-scope .vplayer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.5; } .brm-scope .vplayer .play { position: absolute; inset: 0; margin: auto; width: 76px; height: 54px; background: #FF0000; border-radius: 14px; display: grid; place-items: center; transition: transform 0.16s, background 0.16s; z-index: 2; } .brm-scope .vplayer:hover .play { transform: scale(1.07); background: #ff1a1a; } .brm-scope .vplayer .play svg { width: 28px; height: 28px; color: #fff; margin-left: 2px; } .brm-scope .vplayer .dur { position: absolute; bottom: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,0.82); color: #fff; font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 0.74rem; padding: 3px 7px; border-radius: 4px; } .brm-scope .vplayer .vlabel { position: absolute; left: 14px; top: 12px; z-index: 2; font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 0.68rem; color: var(--ink-2); } .brm-scope .vid-feature .v-cap { margin-top: 16px; } .brm-scope .vid-feature .v-cap h3 { font-family: var(--font-head), sans-serif; font-weight: 700; line-height: 1.16; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.01em; } .brm-scope .vid-feature .v-cap p { font-family: var(--font-body); color: var(--ink-2); font-size: 0.96rem; margin-top: 8px; max-width: 52ch; line-height: 1.5; } .brm-scope .vid-feature .v-cap .v-meta { font-family: var(--font-body); color: var(--muted); font-size: 0.82rem; margin-top: 10px; } /* playlist side */ .brm-scope .vid-side { display: flex; flex-direction: column; gap: 16px; } .brm-scope .vrow { display: flex; gap: 14px; text-decoration: none; align-items: flex-start; } .brm-scope .vrow .vthumb { position: relative; flex: none; width: 158px; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)); } .brm-scope .vrow .vthumb .play { position: absolute; inset: 0; margin: auto; width: 44px; height: 31px; background: #FF0000; border-radius: 8px; display: grid; place-items: center; transition: transform 0.16s; } .brm-scope .vrow .vthumb .play svg { width: 16px; height: 16px; color: #fff; margin-left: 1px; } .brm-scope .vrow .vthumb .dur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.82); color: #fff; font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 0.62rem; padding: 2px 5px; border-radius: 3px; } .brm-scope .vrow:hover .vthumb .play { transform: scale(1.08); } .brm-scope .vrow .vinfo { padding-top: 2px; } .brm-scope .vrow .vinfo h4 { font-family: var(--font-head), sans-serif; font-weight: 700; font-size: 0.98rem; line-height: 1.25; color: var(--ink); letter-spacing: -0.005em; } .brm-scope .vrow .vinfo .vsub { font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); margin-top: 5px; } .brm-scope .vrow:hover .vinfo h4 { color: var(--accent); } /* ============================================================ FOOTER (matches site) ============================================================ */ .brm-scope .site-footer { background: #0a0b0d; color: #c6cad2; border-top: 1px solid rgba(255,255,255,0.08); } .brm-scope .site-footer .wrap { max-width: var(--maxw); padding-top: 64px; padding-bottom: 36px; } .brm-scope .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .brm-scope .foot-brand .logo { color: #fff; font-size: 1.5rem; margin-bottom: 16px; } .brm-scope .foot-brand .logo b, .brm-scope .foot-brand .logo span { color: #fff; } .brm-scope .foot-brand p { font-family: var(--font-body); font-size: 0.92rem; color: #8c93a0; max-width: 38ch; line-height: 1.55; } .brm-scope .foot-brand .btn { margin-top: 22px; } .brm-scope .foot-col h4 { font-family: var(--font-head), sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; color: #fff; margin-bottom: 16px; font-weight: 700; } .brm-scope .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .brm-scope .foot-col a { font-family: var(--font-body); text-decoration: none; color: #9aa0ab; font-size: 0.92rem; transition: color 0.15s; } .brm-scope .foot-col a:hover { color: var(--accent); } .brm-scope .foot-col address { font-style: normal; font-family: var(--font-body); color: #9aa0ab; font-size: 0.92rem; line-height: 1.7; } .brm-scope .foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--font-body); font-size: 0.82rem; color: #6f7682; } .brm-scope .foot-bottom .legal { display: flex; gap: 20px; flex-wrap: wrap; } .brm-scope .foot-bottom a { text-decoration: none; color: #6f7682; } .brm-scope .foot-bottom a:hover { color: var(--accent); } @media (max-width: 820px) { .brm-scope .foot-top { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .brm-scope .layout { grid-template-columns: 1fr; gap: 0; } .brm-scope .toc { position: relative; top: 0; margin-bottom: 36px; border: 1px solid var(--content-rule); border-radius: var(--radius-lg); padding: 20px 22px; background: var(--card); } .brm-scope .toc-share { display: none !important; } } @media (max-width: 600px) { .brm-scope .wrap, .brm-scope .layout { padding-left: 20px; padding-right: 20px; } .brm-scope .nav { gap: 14px; } .brm-scope .cta-inline { flex-direction: column; align-items: flex-start; } } /* ============================================================ TWEAKS PANEL ============================================================ */ .brm-scope #tweaks-panel { position: fixed; right: 18px; bottom: 18px; z-index: 999; width: 290px; background: #14161b; color: #e9ebef; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); font-family: 'Public Sans', system-ui, sans-serif; display: none; overflow: hidden; } .brm-scope #tweaks-panel.show { display: block; } .brm-scope #tweaks-panel .tp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); } .brm-scope #tweaks-panel .tp-head b { font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; } .brm-scope #tweaks-panel .tp-close { background: none; border: none; color: #8c93a0; font-size: 1.2rem; line-height: 1; padding: 2px 4px; } .brm-scope #tweaks-panel .tp-close:hover { color: #fff; } .brm-scope #tweaks-panel .tp-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; max-height: 72vh; overflow-y: auto; } .brm-scope #tweaks-panel .tp-group label.lbl { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: #8c93a0; margin-bottom: 8px; font-family: 'Archivo', sans-serif; } .brm-scope #tweaks-panel .seg { display: flex; gap: 6px; flex-wrap: wrap; } .brm-scope #tweaks-panel .seg button { flex: 1; min-width: fit-content; padding: 8px 10px; font-size: 0.78rem; font-weight: 600; background: #1e2128; color: #c6cad2; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; transition: all 0.12s; } .brm-scope #tweaks-panel .seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); } .brm-scope #tweaks-panel .swatches { display: flex; gap: 8px; } .brm-scope #tweaks-panel .swatches button { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; padding: 0; } .brm-scope #tweaks-panel .swatches button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.2); } @media print { .brm-scope .site-header, .brm-scope #progress, .brm-scope .toc-share, .brm-scope #tweaks-panel, .brm-scope .nav-link, .brm-scope .cta-inline, .brm-scope .cta-banner { display: none !important; } .brm-scope { background: #fff; color: #000; } }