/* BootHack Tailwind Bridge * Structural overrides, component shorthand classes, and typography * baseline for the Tailwind CSS Play CDN adapter. * * Play CDN generates utility class CSS at runtime by scanning the DOM. * This file handles: * - CSS custom property bridge (--bh-* → --bs-* aliases for button colours) * - WP body_class collision guards (Tailwind tags with utility-like classes) * - Tailwind preflight heading scale restoration (body hN rules beat Preflight's single-element reset) * - Tailwind preflight content compensations (.bh-singular-content prose override) * - SVG mask icon system (bh-ui-icon*, bh-social-icon*) * - bh-btn* button components * - bh-tw-card / bh-tw-card-body card components (no overflow:hidden) * - bh-badge badge components * - bh-tw-input form controls * - bh-tw-alert alert component * - bh-container layout container * - Offcanvas system (Bootstrap-named; interaction-kit.js) * - Navbar chrome for .bh-tw-nav * - Search form bridge * - Breadcrumbs * - Post grid, pagination, post navigation, featured post * - Hero, standard header, comment module * - Footer dark surface (identical to Bulma / Foundation) * - Social links, responsive rules */ /* ============================================================================= CSS CUSTOM PROPERTY BRIDGE Forward canonical --bh-* vars to the --bs-* aliases this bridge reads for body text and button colours. css-vars.php gates --bs-* to Bootstrap only, so we re-establish them here from the always-emitted --bh-* canonical set. ============================================================================= */ :root { --bs-body-color: var(--bh-body-color, #1a1a1a); --bs-body-bg: var(--bh-body-bg, #fff); --bs-primary: var(--bh-primary, #2563eb); /* * content.css underline RGB resolves through --bs-primary-rgb, which * css-vars.php gates to Bootstrap only (UIkit 4.0.63 / Foundation 4.0.71 parity). */ --bs-primary-rgb: var(--bh-primary-rgb, 37, 99, 235); /* * content.css hover fallback reads --bs-primary-dark; wire to button-hover mod. */ --bs-primary-dark: var(--bh-button-bg-hover, var(--bh-button-bg-color, #1d4ed8)); --bs-btn-bg: var(--bh-button-bg-color, var(--bh-primary, #2563eb)); --bs-btn-color: var(--bh-button-text-color, #ffffff); --bs-btn-border-color: var(--bh-button-border-color, var(--bh-button-bg-color, var(--bh-primary, #2563eb))); --bs-btn-hover-bg: var(--bh-button-bg-hover, var(--bh-button-bg-color, #1d4ed8)); --bs-btn-hover-color: var(--bh-button-text-hover, #ffffff); --bs-btn-hover-border-color: var(--bh-button-border-hover, var(--bh-button-bg-hover, #1d4ed8)); /* * breadcrumbs.css (loaded for all frameworks) uses this variable for the * bottom border of .bh-breadcrumbs. Bootstrap defines it via Reboot; * Tailwind Preflight does not. Without this, var() fails → border-bottom * is treated as initial (border-style: none) and the bar border vanishes. * The inline style from the render template (border-color:#e5e5e5) only * sets colour, not style, so it cannot rescue the invisible border alone. */ --bs-border-color: rgba(0, 0, 0, .175); } body { color: var(--bs-body-color, #1a1a1a); /* * Tailwind Preflight does not normalise body font-size or line-height; * browser defaults vary. 1rem / 1.5 matches Bootstrap 5, Bulma, and * Pico's body baselines so layout metrics are consistent across frameworks. */ font-size: 1rem; line-height: 1.5; } /* * Dark-mode deference — release Customizer body text/background in dark * scheme so Tailwind Preflight / system dark surfaces are not forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body { color: #e5e5e5; } :root:not([data-theme=light]) body.custom-background { background-color: #171717; } } [data-theme=dark] body { color: #e5e5e5; } [data-theme=dark] body.custom-background { background-color: #171717; } /* ============================================================================= WP BODY_CLASS COLLISION GUARDS Tailwind's global tag rules can collide with WordPress body classes that share utility-like names. ============================================================================= */ body.tag { display: block !important; } body.archive.tag { align-items: normal !important; justify-content: normal !important; height: auto !important; min-height: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; } body.category { display: block !important; } body.archive.category { align-items: normal !important; justify-content: normal !important; height: auto !important; min-height: 0 !important; } /* ============================================================================= PREFLIGHT HEADING SCALE RESTORATION Tailwind Preflight (injected by the Play CDN at runtime) resets: h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } Bootstrap / Bulma / Pico / Foundation all preserve UA heading hierarchy through their own base layer. The Play CDN injects its