/* * pbsf-footer.css * * Layout and visual styling for PBSF_Footer. Scoped under .pbsf-footer — * no global element reset, no `pbh-*` or theme/Elementor selectors. * * One deliberate `!important`, on `display` only: Home Builder ships * `body.pbh-home-active > footer { display: none !important; }` * (specificity 0,1,2 — written to hide the *theme's own* native footer * when it was a direct child of ``). The v2 Home integration * contract renders PBSF's Footer as an independent sibling — a genuine * direct child of `` — so it falls into that same selector. A * plain `.pbsf-footer { display: flex !important; }` (specificity 0,1,0) * still lost to it: among `!important` rules, specificity is still the * tiebreaker, not just source order. The doubled class selector below * (`.pbsf-footer.pbsf-footer`, specificity 0,2,0) is a standard * specificity-boost technique — it does not reference `pbh-home-active` * or any other Home Builder selector, only PBSF's own class, repeated. * Confirmed live via getComputedStyle before/after (`display: none` → * `flex`, everything else about the element already correct). Does not * touch or override any other Home Builder rule. */ .pbsf-footer.pbsf-footer { display: flex !important; flex-direction: column; align-items: center; gap: var(--pbsf-space-3); padding: var(--pbsf-space-6) var(--pbsf-space-4); max-width: var(--pbsf-content-width); margin: 0 auto; background: var(--pbsf-footer-bg, var(--pbsf-color-bg)); border-top: 1px solid var(--pbsf-color-border); color: var(--pbsf-color-text-muted); font-family: var(--pbsf-font-family); font-size: var(--pbsf-font-size-sm); text-align: center; /* * Extra breathing room from whatever precedes this footer (Home * Builder's own Newsletter section, when PBSF integration is active) * — owned entirely on this side of the boundary, no Home Builder file * touched. `--pbsf-footer-space-before` is overridable like the other * PBSF custom properties; framework default is 0 (unchanged prior * behavior) so this only takes effect where a site's own config sets * it, same pattern as `--pbsf-header-bg`/`--pbsf-footer-bg`. */ margin-top: var(--pbsf-footer-space-before, 0); /* TEST H2 — minimum stable paint contract, temporary, see PBellaras_Website.md λζ′. Remove this block to roll back. */ position: relative; z-index: 100; opacity: 1; visibility: visible; pointer-events: auto; /* END TEST H2 */ } /* * Reusable brand mark (PBSF_Brand — text/logo/logo+text, see * class-pbsf-brand.php). `--pbsf-footer-logo-width` defaults to a * conservative, framework-generic size, independent of the header's own * `--pbsf-header-logo-width` — a site's own configuration can size * Header and Footer logos differently. `max-height`/`width: auto` * preserves aspect ratio — no cropping, no stretching. */ .pbsf-footer .pbsf-brand { display: inline-flex; align-items: center; gap: var(--pbsf-space-2); text-decoration: none; } .pbsf-footer .pbsf-brand__logo { display: block; width: var(--pbsf-footer-logo-width, 56px); max-width: 100%; height: auto; /* * Raised alongside the ~15–20% footer wordmark size increase (see * this site's `--pbsf-footer-logo-width` values) — a generous safety * cap against a misconfigured/oversized source image, not a normal * constraint on the intended size at any of the three breakpoints. */ max-height: 64px; } .pbsf-footer .pbsf-brand__text { font-size: var(--pbsf-font-size-lg); font-weight: 700; color: var(--pbsf-color-text); } /* * Slightly stronger than the footer's own default text (font-size-sm, * text-muted) without competing with the brand mark above it: one step * up in size (font-size-base), the framework's existing brighter text * token (not a new color), and a mid-weight — still clearly secondary * to the logo, not heading-sized. */ .pbsf-footer__tagline { color: var(--pbsf-color-text); font-size: var(--pbsf-font-size-base); font-weight: 500; margin: 0; } /* * Optional brand-description line (see `pbsf_footer_brand_description` * filter, class-pbsf-footer.php) — visually secondary to the tagline * above it: existing muted text token (not a new color), one step down * in size (font-size-sm, the footer's own ambient size — no new token * needed), and subtle letter-spacing only. No icon, no glow, no * animation/transition. Only renders at all when the filter returns a * non-empty string, so a project that never sets it sees no layout * change. */ .pbsf-footer__brand-description { color: var(--pbsf-color-text-muted); font-size: var(--pbsf-font-size-sm); letter-spacing: 0.03em; margin: 0; } .pbsf-footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pbsf-space-3); list-style: none; margin: 0; padding: 0; } /* * Social link presentation — supports all three `pbsf_footer_social_mode` * values (text / icons / icons_text) with the same rules: `icons`/ * `icons_text` render an inline SVG from PBSF_Social_Icons (currentColor, * sized by `--pbsf-footer-social-icon-size`), `text`/`icons_text` render * a visible `.pbsf-footer__social-label`. Padding gives a comfortable * tap target beyond the visual icon size without enlarging the icon * itself. * * Rest/hover colors come from `--pbsf-footer-social-color` / * `--pbsf-footer-social-hover-color`, set per-link inline by * PBSF_Footer::render() according to the active `pbsf_footer_social_style` * ('minimal'/'brand_hover'/'brand'/'custom') — this stylesheet only * consumes the two variables and never branches on style mode itself, * so the CSS stays identical regardless of which mode a project uses. * `drop-shadow(currentColor)` on hover/focus automatically matches * whichever color is active (neutral or brand) without hardcoding one. * * Hover/focus: color shift + a very subtle glow + a small (≤1.05×) * scale, using the framework's existing transition-duration token * (already 0ms under `prefers-reduced-motion: reduce`, see * pbsf-tokens.css) — no separate reduced-motion rule needed here. */ .pbsf-footer__social a { display: inline-flex; align-items: center; gap: var(--pbsf-space-2); padding: var(--pbsf-space-2); color: var(--pbsf-footer-social-color, var(--pbsf-color-text-muted)); text-decoration: none; border-radius: var(--pbsf-radius); transition: color var(--pbsf-transition-duration) var(--pbsf-transition-easing), filter var(--pbsf-transition-duration) var(--pbsf-transition-easing), transform var(--pbsf-transition-duration) var(--pbsf-transition-easing); } .pbsf-footer__social svg { width: var(--pbsf-footer-social-icon-size, 22px); height: var(--pbsf-footer-social-icon-size, 22px); flex-shrink: 0; } .pbsf-footer__social a:hover, .pbsf-footer__social a:focus-visible { color: var(--pbsf-footer-social-hover-color, var(--pbsf-color-cyan)); filter: drop-shadow(0 0 3px currentColor); transform: scale(1.05); } .pbsf-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pbsf-space-3); list-style: none; margin: 0; padding: 0; } .pbsf-footer__links a { color: var(--pbsf-color-text); text-decoration: underline; text-underline-offset: 3px; } .pbsf-footer__links a:hover { color: var(--pbsf-color-cyan); } .pbsf-footer__meta { color: var(--pbsf-color-text-muted); margin: 0; } .pbsf-footer a:focus-visible { outline: 2px solid var(--pbsf-color-focus); outline-offset: 2px; } /* * Optional 'centered-minimal' layout modifier (see PBSF_Footer::render(), * `pbsf_footer_layout` filter). The base `.pbsf-footer` rule is already a * single centered column — this modifier only narrows the two running-text * lines (tagline, copyright) to a comfortable reading width instead of * stretching to the footer's full `--pbsf-content-width`, for a tighter, * more deliberate feel. No columns, no panel, no spacing/color change. */ .pbsf-footer--centered-minimal .pbsf-footer__tagline, .pbsf-footer--centered-minimal .pbsf-footer__brand-description, .pbsf-footer--centered-minimal .pbsf-footer__meta { max-width: 480px; margin-inline: auto; }