/**
* BootHack Content Module — Core Stylesheet
* Consolidates Base, Content, Utilities, Cards, Callouts, and Comments.
*/
/* =============================================================================
0. DESIGN TOKENS (CSS Variables)
Framework-agnostic root variables with Bootstrap fallbacks
============================================================================= */
:root {
--boothack-primary: var(--bs-primary, #0d6efd);
--boothack-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
--boothack-secondary: var(--bs-secondary, #6c757d);
--boothack-success: var(--bs-success, #198754);
--boothack-info: var(--bs-info, #0dcaf0);
--boothack-warning: var(--bs-warning, #ffc107);
--boothack-danger: var(--bs-danger, #dc3545);
--boothack-light: var(--bs-light, #f8f9fa);
--boothack-dark: var(--bs-dark, #212529);
--boothack-surface: var(--bs-body-bg, #ffffff);
--boothack-border-subtle: rgba(0, 0, 0, 0.08);
--boothack-shadow-strong: rgba(0, 0, 0, 0.75);
--boothack-shadow-soft: rgba(0, 0, 0, 0.55);
--boothack-highlight: rgba(255, 235, 59, 0.45);
}
/* =============================================================================
1. VARIABLES & SYSTEM MATH
============================================================================= */
.navbar {
--boothack-navbar-height: 56px;
}
.navbar.py-3 {
--boothack-navbar-height: 72px;
}
.navbar.py-5 {
--boothack-navbar-height: 104px;
}
/* =============================================================================
2. BASE & RESETS (Scoped for Safety)
============================================================================= */
*, *::before, *::after {
box-sizing: border-box;
}
.entry-content img,
.wp-block-image img {
max-width: 100%;
height: auto;
}
.bh-site-content {
border: none;
}
/*
* Navbar logos use class site-logo but must not inherit arbitrary caps meant for in-content widgets.
* Scope any legacy logo cap to main content only.
*/
.bh-site-content .site-logo {
max-height: 26px;
height: auto;
}
/* Scoped to prevent breaking plugin widgets outside the main content */
.bh-site-content .widget_search {
border: 0;
}
/* =============================================================================
3. WORDPRESS CORE & GUTENBERG ALIGNMENT
============================================================================= */
.alignleft {
float: left;
margin: 0 1.5em 1.5em 0;
}
.alignright {
float: right;
margin: 0 0 1.5em 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.5em;
text-align: center;
}
.alignwide,
.alignfull {
clear: both;
}
.bypostauthor {
display: block;
}
/* Classic editor / loop markers (Theme Check suggested selectors). */
.sticky {
position: relative;
}
.wp-caption {
max-width: 100%;
}
.wp-caption-text {
font-size: 0.875rem;
margin-top: 0.35rem;
line-height: 1.45;
}
.gallery-caption {
font-size: 0.875rem;
line-height: 1.45;
}
/* Safely scoped Gutenberg content fix */
.bh-site-content .wp-block-group.is-content-flex {
justify-content: center;
}
/* =============================================================================
4. READING TYPOGRAPHY, LINKS & DROP CAPS (BootHack 4.0)
============================================================================= */
/* Accessible, Modern Inline Links (entry-content only — standard header sits outside) */
.bh-singular-content .entry-content .bh-prose-link {
color: var(--bh-content-link-color, var(--boothack-primary));
text-decoration: underline;
/* Skip descenders for a cleaner look */
text-decoration-skip-ink: auto;
/* Soften the default line using the mapped RGB token */
text-decoration-color: rgba(var(--bh-content-link-rgb, var(--boothack-primary-rgb)), 0.3);
text-decoration-thickness: 2px;
/* Push it away from the text */
text-underline-offset: 4px;
transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease;
}
.bh-site-content .bh-singular-content .entry-content .bh-prose-link:hover,
.bh-site-content .bh-singular-content .entry-content .bh-prose-link:focus,
.bh-site-content .entry-content .bh-prose-link:hover,
.bh-site-content .entry-content .bh-prose-link:focus {
color: var(--bh-content-link-hover-color) !important;
text-decoration-color: var(--bh-content-link-hover-color) !important;
}
/* Focus state for keyboard navigation */
.bh-singular-content .entry-content .bh-prose-link:focus-visible {
outline: 2px dashed var(--bh-content-link-color, var(--boothack-primary));
outline-offset: 4px;
border-radius: 2px;
}
/* Strictly scoped Drop Cap: Targets the first paragraph only if it is the VERY FIRST element inside the content wrapper.
Fails safely if a subheading, image, or blockquote comes first. Ignores nested paragraphs. */
.has-drop-cap .entry-content > :is(p, .wp-block-paragraph):first-child::first-letter {
float: left;
font-size: 3.5rem;
line-height: 0.85;
font-weight: 700;
margin: 0.1em 0.15em 0 0; /* Restored margin */
color: var(--bh-drop-cap-color, inherit); /* Inherits standard text color by default */
text-transform: uppercase;
}
/* =============================================================================
5. COMPONENT: CARDS & GRID SPACING
============================================================================= */
/* Uniform 2:1 Aspect Ratio for Card Thumbnails */
.card .card-img-top,
.card .wp-post-image {
aspect-ratio: 2 / 1;
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
/* Prevent the horizontal featured image from being restricted to 2:1 */
.bh-featured-card .wp-post-image {
aspect-ratio: auto;
}
.bh-featured-img-min-height {
min-height: 300px;
}
/*
* Shared "pill" metrics for the two card-meta badges: the featured-post
* badge and the series badge (boothack-post-series 4.10+). The two
* badges live side by side on featured-post cards (a featured post
* that also represents a series gets both pills in the same meta
* row), so they need to render at identical size to read as a paired
* set rather than a mismatched stack.
*
* Keeping this in one place — rather than copying the metrics into
* each framework bridge — means a future visual tweak (radius,
* padding, weight) only has to change here. Framework adapters that
* wrap the featured badge in a native primitive (Materialize `.chip`,
* Bulma `.tag`, etc.) override the primitive's intrinsic sizing in
* their own bridge.css to defer to these metrics.
*
* Colour rules stay separate per badge:
* - `.bh-featured-badge` background comes from the theme mod (set
* inline on the element via `style="background-color: …"` in
* featured-post.php) so the customizer-driven choice keeps
* winning here.
* - `.bh-series-badge` background is driven by CSS variables
* (`--bh-series-badge-bg` etc.) so the violet pill identity is
* fixed but still themable.
*/
.bh-featured-badge,
.bh-series-badge {
display: inline-block;
padding: 0.35em 0.7em;
font-size: 0.75em;
font-weight: 600;
line-height: 1.2;
border-radius: 0.375rem;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
}
.bh-featured-badge {
background-color: var(--bh-featured-badge-bg);
}
/* NOTE: Fallback to hide duplicate title output; ideally fix in the data layer */
.card-title .series-title {
display: none;
}
.card .card-title a {
color: inherit;
text-decoration: none;
transition: opacity .2s ease;
}
.card .card-title a:hover,
.card .card-title a:focus {
opacity: .85;
}
/* Aligned with UI Adapter class, fully decoupled from Bootstrap's .d-flex */
.bh-post-grid.is-flex {
row-gap: 1.5rem;
padding-bottom: 1.5rem;
}
@supports (padding-bottom: var(--bs-gutter-x)) {
.bh-post-grid.is-flex {
padding-bottom: var(--bs-gutter-x);
}
}
/* =============================================================================
6. COMPONENT: CALLOUTS (Tokenized Colors)
============================================================================= */
.callout {
padding: 1.5rem;
margin: 1.5rem 0;
border: 1px solid var(--boothack-border-subtle);
border-left-width: 5px;
border-radius: .25rem;
}
.callout h4 {
margin: 0 0 .5rem;
font-weight: 600;
}
.callout p:last-child {
margin-bottom: 0;
}
/* Callout Variants mapped to BootHack tokens */
.callout-primary { border-left-color: var(--boothack-primary); }
.callout-secondary { border-left-color: var(--boothack-secondary); }
.callout-success { border-left-color: var(--boothack-success); }
.callout-info { border-left-color: var(--boothack-info); }
.callout-warning { border-left-color: var(--boothack-warning); }
.callout-danger { border-left-color: var(--boothack-danger); }
.callout-light { border-left-color: var(--boothack-light); }
.callout-dark { border-left-color: var(--boothack-dark); }
/* Callout Title Matching */
.callout-primary h4 { color: var(--boothack-primary); }
.callout-secondary h4 { color: var(--boothack-secondary); }
.callout-success h4 { color: var(--boothack-success); }
.callout-info h4 { color: var(--boothack-info); }
.callout-warning h4 { color: var(--boothack-warning); }
.callout-danger h4 { color: var(--boothack-danger); }
.callout-light h4 { color: var(--boothack-secondary); }
.callout-dark h4 { color: var(--boothack-dark); }
/* =============================================================================
7. COMPONENT: COMMENTS
============================================================================= */
.boothack-comments .comment-list {
padding-left: 0;
margin-bottom: 2rem;
}
.boothack-comment {
border: none;
background: var(--boothack-surface);
}
.boothack-comments .children {
list-style: none;
margin-top: 1.5rem;
margin-left: 2.75rem;
padding-left: 1.75rem;
position: relative;
}
/* Vertical thread line */
.boothack-comments .children::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: var(--boothack-border-subtle);
}
.boothack-comments .children > li {
position: relative;
margin-bottom: 1.25rem;
}
/* Horizontal thread connector */
.boothack-comments .children > li::before {
content: "";
position: absolute;
top: 1.5rem;
left: -1.75rem;
width: 1.75rem;
height: 2px;
background: var(--boothack-border-subtle);
}
.comment-meta { font-size: .9rem; }
.comment-author { font-weight: 600; }
.comment-content { line-height: 1.65; margin-top: .5rem; }
.comment-actions { border-top: 1px solid var(--boothack-border-subtle); padding-top: .75rem; margin-top: 1rem; }
.comment-form { margin-top: 2rem; }
.comment-form label { font-weight: 500; }
.comment-form .required { color: var(--boothack-danger); }
.comment-form textarea { resize: vertical; }
.comment-navigation { margin-bottom: 2rem; }
@media (max-width: 576px) {
.boothack-comments .children {
margin-left: 1.5rem;
padding-left: 1rem;
}
.boothack-comments .children > li::before {
left: -1rem;
width: 1rem;
}
}
/* =============================================================================
8. UTILITIES & HELPERS (Namespaced)
============================================================================= */
/* Screen reader only — framework-agnostic (Tailwind/UIkit `bh-sr-only` token alias). */
.bh-sr-only,
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.screen-reader-text:focus {
background: var(--boothack-surface);
color: var(--boothack-dark);
clip: auto !important;
clip-path: none;
width: auto;
height: auto;
padding: 15px 23px 14px;
z-index: 100000;
}
/* Enhances readability over background images */
.bh-text-shadow {
text-shadow:
0 1px 2px var(--boothack-shadow-strong),
0 3px 12px var(--boothack-shadow-soft);
}
/*
* Part-work series structured title block (boothack-post-series 4.9.0+).
*
*
*
*
* Both the hero header (inc/modules/hero/render/hero.php) and the
* standard header (inc/modules/content/render/header-standard.php)
* emit this exact structure for part-work series members, so the
* shared base styling lives here in content.css — content.css is
* always enqueued, hero.css only when a hero is active.
*
* Goals shared by both contexts:
* 1. Balance vertical rhythm: a looser gap between the series h1 and the
* part chip, and a tighter gap between the chip and the member title.
* 2. Stack the part-label chip above the member title (never inline on
* the same row — short titles were sitting beside the chip).
* 3. Let long member titles wrap naturally on their own line.
*
* Hero-only behaviours (`justify-content: center` to match the hero's
* centred content block, and `text-shadow: none` on the chip to
* survive the hero's `.bh-text-shadow` cascade) are layered on top of
* these rules in inc/modules/hero/assets/css/hero.css.
*/
.bh-header__series-title {
margin-bottom: 0.5em;
}
/* Pico/Bootstrap title utilities on the series h1 must not crowd the part chip. */
.bh-header__series-title.bh-standard-page-title,
.bh-header__series-title.title {
margin-bottom: 0.5em;
}
.bh-header__series-link,
.bh-header__series-link:visited {
color: inherit;
text-decoration: none;
}
.bh-header__series-link:hover,
.bh-header__series-link:focus {
color: inherit;
text-decoration: underline;
}
.bh-header__part-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
margin-top: 0;
margin-bottom: 1rem;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
line-height: 1.25;
}
.bh-header__part-title-text {
min-width: 0;
max-width: 100%;
}
/* Part label chip — smaller than default badge/tag metrics (they scale with the h2). */
.bh-header__part-title .bh-series-chip {
font-size: max(0.6875rem, 0.5em);
line-height: 1.1;
}
/*
* Series-membership badge (boothack-post-series 4.10.0+).
*
* A standalone "Series" pill rendered as:
* - A meta-row sibling of the featured-post badge on index cards
* (`.bh-series-badge--card`).
* - A kicker above singular post titles in both the hero and the
* standard header (`.bh-series-badge--header`), analogous to where
* the hero's category chip lives but visually distinct.
*
* Visual goals:
* 1. Solid, distinctive colour so the cue reads at a glance and is
* legible against any card background or hero photo (the hero's
* `.bh-text-shadow` cascade is opted out separately in hero.css).
* 2. Pill shape consistent with Bootstrap badges / Bulma tags /
* Materialize chips so the badge feels native across all four
* framework adapters without per-bridge CSS.
* 3. Acts as a link to the series controller — `:hover` dims the
* background slightly, mirroring the featured-post badge pattern.
*
* Defaults to a violet hue distinct from the featured-post default
* (`#0d6efd` blue) so a featured post that also happens to be a series
* member shows two clearly differentiated badges. Override the colour
* by setting `--bh-series-badge-bg` on `:root` or on a parent block.
*/
:root {
--bh-series-badge-bg: #6f42c1;
--bh-series-badge-bg-hover: #5a359c;
--bh-series-badge-color: #ffffff;
}
/*
* Series badge — colour-only rule. The pill metrics (display, padding,
* font-size, font-weight, line-height, border-radius, vertical-align,
* white-space, text-decoration) live in the shared rule above, paired
* with `.bh-featured-badge` so the two badges always render at
* matching size.
*/
.bh-series-badge {
margin-right: 0.5rem;
color: var(--bh-series-badge-color, #ffffff);
background-color: var(--bh-series-badge-bg, #6f42c1);
}
.bh-series-badge:hover,
.bh-series-badge:focus,
.bh-series-badge:active,
.bh-series-badge:visited {
color: var(--bh-series-badge-color, #ffffff);
text-decoration: none;
}
.bh-series-badge:hover,
.bh-series-badge:focus {
background-color: var(--bh-series-badge-bg-hover, #5a359c);
}
/*
* Header-context modifier: add a touch of bottom margin so the badge
* doesn't crowd the title beneath it, and a subtle white outline so the
* pill keeps definition when laid over a busy hero photo.
*/
.bh-series-badge--header {
margin-right: 0;
margin-bottom: 0.75rem;
border: 1px solid color-mix(in srgb, var(--bh-series-badge-color, #ffffff) 22%, transparent);
}
/* Search Term Highlighting */
.boothack-search-highlight {
background: var(--boothack-highlight);
padding: 0 .2em;
border-radius: 2px;
}
/* Sizing & Spacing Helpers */
.bh-vh-50 { height: 50vh; }
.bh-page-section { padding: 8rem 0; }
.bh-py-6 { padding: 4rem 0 !important; }
.bh-py-7 { padding: 5rem 0 !important; }
.bh-py-8 { padding: 6rem 0 !important; }
.bh-py-9 { padding: 7rem 0 !important; }
.bh-py-10 { padding: 8rem 0 !important; }
/* ---------------------------------------------------------
* Load More Button UI
* --------------------------------------------------------- */
/* Symmetrical Breathing Room */
.bh-load-more-wrapper {
margin-top: 3rem;
margin-bottom: 4rem;
position: relative;
text-align: center;
}
/* Subtle Shape and Soft Resting State */
.bh-site-content #bh-load-more-btn {
border-radius: 50rem;
padding: 0.75rem 2.5rem;
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* The Hover Lift */
.bh-site-content #bh-load-more-btn:hover:not(.disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
/* The Active/Click State */
.bh-site-content #bh-load-more-btn:active:not(.disabled) {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* The Loading State (Triggered by JS) */
.bh-site-content #bh-load-more-btn[aria-busy="true"] {
opacity: 0.85;
cursor: wait;
transform: translateY(0);
box-shadow: none;
}
/* =============================================================================
* Post Navigation — shared grid layout and chevron icons.
* Card chrome (background, border, radius, colours) is framework-specific
* and lives in each adapter's bridge CSS.
* ============================================================================= */
.bh-post-nav-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.bh-post-nav-col {
flex: 1 1 100%;
min-width: 0;
}
@media (min-width: 768px) {
.bh-post-nav-col {
flex: 0 1 calc(50% - 0.5rem);
max-width: calc(50% - 0.5rem);
}
.bh-post-nav-col.bh-post-nav-col--next:only-child {
margin-left: auto;
}
}
.bh-post-nav-card-body {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1 auto;
}
.bh-post-nav-card-body--next {
justify-content: flex-end;
}
.bh-post-nav-meta {
font-size: 0.875rem;
line-height: 1.25;
}
.bh-post-nav-title {
font-weight: 600;
line-height: 1.3;
}
.bh-post-nav--text-end .bh-post-nav-card-body > div:first-child {
text-align: right;
}
/* CSS chevrons: wp_kses_post strips SVG; span + CSS borders match Bootstrap icon weight. */
.bh-post-nav-chevron {
flex-shrink: 0;
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
vertical-align: middle;
}
.bh-post-nav-chevron--left {
transform: rotate(135deg);
}
.bh-post-nav-chevron--right {
transform: rotate(-45deg);
}
/* =============================================================================
* Pagination — shared structure (list layout, item reset, focus ring, dots).
* Framework-specific button chrome (dimensions, border, colour, radius) stays
* in each adapter bridge.
* ============================================================================= */
.bh-pagination-nav {
display: block;
}
/*
* Horizontal rule above the pagination row.
*/
.bh-pagination-divider {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.09);
margin: 1.25rem 0 1rem;
padding: 0;
height: 0;
}
.bh-pagination-wrapper .bh-pagination-list,
.boothack-post-pagination .bh-pagination-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.bh-pagination-wrapper .bh-pagination-item,
.boothack-post-pagination .bh-pagination-item {
margin: 0;
}
.bh-pagination-wrapper a.bh-pagination-btn:focus-visible,
.boothack-post-pagination a.bh-pagination-btn:focus-visible {
outline: 2px solid color-mix(in srgb, currentColor 55%, transparent);
outline-offset: 2px;
}
.bh-pagination-wrapper .bh-pagination-btn.dots,
.boothack-post-pagination .bh-pagination-btn.dots {
border-color: transparent;
background: transparent;
color: inherit;
opacity: 0.55;
min-width: auto;
padding-inline: 0.35rem;
pointer-events: none;
font-weight: 700;
}
/* =============================================================================
CONTENT LAYOUT UTILITIES — Framework-agnostic
Classes for page/post HTML content that must render correctly on all
active CSS frameworks without relying on framework-specific grid tokens.
============================================================================= */
/*
* Two-column media object: thumbnail (~58 %) beside a text body (~42 %).
* Mirrors the Bootstrap .row / .col-md-7 / .col-md-5 pattern without
* coupling content HTML to the active CSS framework's grid system.
* Stacks to a single column below 768 px.
*/
.bh-content-media {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
}
.bh-content-media-image {
flex: 1 1 55%;
min-width: 0;
}
.bh-content-media-body {
flex: 1 1 35%;
min-width: 220px;
}
.bh-content-media-image img,
.bh-content-media-image a img {
display: block;
max-width: 100%;
height: auto;
}
@media (max-width: 767.98px) {
.bh-content-media {
flex-direction: column;
}
}
/*
* Shadow utilities — supplement the navbar-scoped .shadow that each bridge
* defines; these apply to arbitrary elements in content areas.
*/
.bh-shadow { box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.15); }
.bh-shadow-sm { box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.12); }
/*
* Two-column content layout — main (~2fr) beside an aside (~1fr): the
* framework-agnostic equivalent of Bootstrap's .row / .col-lg-8 / .col-lg-4
* for hand-authored page/post HTML. Stacks to one column below 992 px.
*/
.bh-content-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
}
.bh-content-col-main,
.bh-content-col-aside {
flex: 1 1 100%;
min-width: 0;
}
@media (min-width: 992px) {
.bh-content-col-main {
flex: 2 1 0;
}
.bh-content-col-aside {
flex: 1 1 0;
}
}
/*
* Content card surface — framework-agnostic equivalent of Bootstrap's
* .card / .card-body. Surface colours defer to BootHack tokens with literal
* fallbacks; a bottom margin is baked in so stacked cards space themselves.
*/
.bh-content-card {
margin-bottom: 1.5rem;
overflow: hidden;
background: var(--bh-card-bg, #fff);
color: var(--bh-card-color, inherit);
border: 1px solid var(--bh-card-border-color, rgba(0, 0, 0, 0.1));
border-radius: 0.75rem;
}
.bh-content-card-body {
padding: 1rem 1.25rem;
}
/*
* Spacing + radius utilities for content HTML. Mirror the values the
* per-framework bridges expose, but defined here in the always-loaded content
* stylesheet so they resolve uniformly on every adapter — including Bootstrap 5
* and Bulma, whose bridges omit some of these.
*/
.bh-rounded { border-radius: 0.5rem; }
.bh-mb-3 { margin-bottom: 1rem; }
.bh-mb-4 { margin-bottom: 1.5rem; }
.bh-mb-5 { margin-bottom: 3rem; }
.bh-mt-3 { margin-top: 1rem; }
.bh-mt-4 { margin-top: 1.5rem; }
.bh-mt-5 { margin-top: 3rem; }
.bh-pb-4 { padding-bottom: 1.5rem; }
.bh-content-spacing-y { margin-block: 3rem; }
/*
* Singular content width constraints. Defined here (always-loaded) so
* Bootstrap 5 and Bulma, which have no per-bridge definition, resolve them
* correctly. Per-framework bridges may override max-width for their own grid
* context (e.g. Tailwind rem-based scale, UIkit responsive breakpoints).
*/
.bh-content-width-wide,
.bh-content-width-narrow {
width: 100%;
margin-inline: auto;
}
@media (min-width: 992px) {
.bh-content-width-wide { width: calc(10 / 12 * 100%); max-width: calc(10 / 12 * 100%); }
.bh-content-width-narrow { width: calc(8 / 12 * 100%); max-width: calc(8 / 12 * 100%); }
}
/*
* Attribution line inside a . Provides the em-dash prefix and
* indented muted styling equivalent to Bootstrap's .blockquote-footer.
*/
.bh-citation {
margin-inline: 2.5rem;
font-size: 0.875em;
color: var(--bh-text-muted, rgba(0, 0, 0, 0.55));
}
.bh-citation::before {
content: "\2014\00A0";
}
/*
* Primary button — canonical class for content-area CTAs.
* PHP templates resolve boothack_ui_class( 'btn_primary', '' ) to the
* framework-native button class. This rule provides a framework-agnostic
* fallback for HTML that cannot call PHP template functions (page editor
* content, shortcodes, etc.). Each framework bridge overrides with
* higher specificity where native styles differ.
*/
a.bh-btn-primary,
button.bh-btn-primary,
.bh-btn-primary {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
background-color: var(--bh-button-bg-color, var(--boothack-primary, #0d6efd));
color: var(--bh-button-text-color, #ffffff);
border: 1px solid var(--bh-button-border-color, var(--bh-button-bg-color, var(--boothack-primary, #0d6efd)));
border-radius: 0.375rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
a.bh-btn-primary:hover,
a.bh-btn-primary:focus,
button.bh-btn-primary:hover,
button.bh-btn-primary:focus,
.bh-btn-primary:hover,
.bh-btn-primary:focus {
background-color: var(--bh-button-bg-hover, var(--bh-button-bg-color, #0b5ed7));
border-color: var(--bh-button-border-hover, transparent);
color: var(--bh-button-text-hover, #ffffff);
text-decoration: none;
}
/* ==========================================================================
Series progress indicator (4.4.010)
"Part X of Y" marker, position meter, and previous/next part links after
singular content. The meter fill reuses the reading-progress colour token
so the two progress affordances share an identity, falling back to the
series badge background.
========================================================================== */
.bh-series-progress {
margin: 2rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--bh-border-color, #dee2e6);
border-radius: var(--bh-border-radius, 0.375rem);
}
.bh-series-progress__marker {
margin: 0 0 0.5rem;
font-size: 0.9375rem;
}
.bh-series-progress__count {
font-weight: 600;
}
.bh-series-progress__meter {
height: 0.375rem;
border-radius: 999px;
background-color: color-mix(in srgb, var(--bh-reading-progress-color, var(--bh-series-badge-bg, #6f42c1)) 20%, transparent);
overflow: hidden;
}
.bh-series-progress__meter-fill {
display: block;
height: 100%;
border-radius: inherit;
background-color: var(--bh-reading-progress-color, var(--bh-series-badge-bg, #6f42c1));
}
.bh-series-progress__links {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 0.75rem;
font-size: 0.9375rem;
}
.bh-series-progress__next {
margin-inline-start: auto;
text-align: end;
}
.bh-series-progress__direction {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.7;
}
/* ==========================================================================
Series archive parts list (4.4.010)
Ordered, position-marked list rendered above the grid on series term
archives.
========================================================================== */
.bh-series-parts {
margin: 0 0 2rem;
padding: 1rem 1.25rem;
border: 1px solid var(--bh-border-color, #dee2e6);
border-radius: var(--bh-border-radius, 0.375rem);
}
.bh-series-parts__title {
margin: 0 0 0.75rem;
font-size: 1.125rem;
}
.bh-series-parts__list {
margin: 0;
padding: 0;
list-style: none;
}
.bh-series-parts__item {
padding: 0.375rem 0;
}
.bh-series-parts__marker {
display: inline-block;
min-width: 4.5em;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bh-series-badge-bg, #6f42c1);
}
/* Related posts — framework-neutral spacing (the grid layout itself comes from
the content_row token, matching the main index grid). */
.bh-related-posts {
margin-top: 2.5rem;
}
.bh-related-posts__title {
margin: 0 0 1.25rem;
}