/*
* Theme Name: HBAV Child
* Theme URI: https://hbav.com
* Description: Child theme for the HBAV website redesign. Parent: Kadence Pro.
* Author: Kelley + Co
* Author URI: https://kelleyus.com
* Template: kadence
* Version: 1.1.0
* Text Domain: hbav-child
*/
/* ==========================================================================
CSS CUSTOM PROPERTIES
Defined on :root so every block, partial, and template can reference them.
========================================================================== */
:root {
/* --- Brand Colors --- */
--hbav-blue: #003764;
--hbav-green: #00bf63;
--buildpac-red: #d32b29;
--yellow: #f0bf2d;
--education-green: #025d31;
--alt-green: #7fb6a1;
/* Insurance hub accent (alias of --yellow for semantic clarity) */
--insurance-yellow: #f0bf2d;
--insurance-yellow-dark: #c49b1a;
--insurance-yellow-light: rgba(240, 191, 45, 0.12);
/* --- Neutral Scale --- */
--black: #000000;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-700: #374151;
--gray-900: #111827;
--white: #ffffff;
/* --- Typography --- */
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
/* --- Spacing Scale --- */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 60px;
--space-2xl: 80px;
--space-3xl: 120px;
/* --- Layout --- */
--content-max: 1400px;
--content-gutter: 40px;
/* --- Transitions --- */
--ease: 0.3s ease;
--ease-fast: 0.15s ease;
}
/* Editor iframe custom property passthrough */
.editor-styles-wrapper {
--hbav-blue: #003764;
--hbav-green: #00bf63;
--hbav-dark: #001f3f;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-600: #4b5563;
--gray-700: #374151;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Rubik', -apple-system, sans-serif;
--content-max: 1400px;
--content-gutter: 40px;
--ease: 0.2s ease;
}
.text-green { color: var(--hbav-green) !important; }
/* ==========================================================================
KADENCE FULL-WIDTH FIX
Ensures blocks with "align": ["full"] stretch edge to edge,
overriding Kadence's default container constraints.
========================================================================== */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-kadence-rowlayout.alignfull,
[data-align="full"] {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ACF blocks inside the block editor */
.editor-styles-wrapper [data-align="full"] {
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
/* ==========================================================================
GLOBAL BUTTON STYLES
========================================================================== */
/* Primary — green fill, hovers to yellow */
.btn-primary {
display: inline-block;
background: var(--hbav-green);
color: var(--white);
padding: 18px 40px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all var(--ease);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--yellow);
color: var(--hbav-blue);
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(240, 191, 45, 0.3);
outline: none;
}
/* Secondary — white ghost, for use on dark backgrounds */
.btn-secondary {
display: inline-block;
background: transparent;
color: var(--white);
padding: 18px 40px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border: 2px solid var(--white);
border-radius: 4px;
cursor: pointer;
transition: all var(--ease);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: var(--white);
color: var(--hbav-blue);
outline: none;
}
/* Ghost — blue outline, for use on white/light backgrounds */
.btn-ghost {
display: inline-block;
background: transparent;
color: var(--hbav-blue);
padding: 16px 36px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border: 2px solid var(--hbav-blue);
border-radius: 4px;
cursor: pointer;
transition: all var(--ease);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
background: var(--hbav-blue);
color: var(--white);
outline: none;
}
/* ==========================================================================
GLOBAL SECTION SPACING
========================================================================== */
.hbav-section { padding: var(--space-3xl) var(--content-gutter); }
.hbav-section-inner { max-width: var(--content-max); margin: 0 auto; }
/* Generic section header — centered, used in standalone contexts */
.hbav-section-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.hbav-section-header h2 {
font-family: var(--font-display);
font-size: 42px;
font-weight: 800;
color: var(--hbav-blue);
line-height: 1.15;
margin-bottom: 16px;
}
.hbav-section-header p {
font-size: 18px;
color: var(--gray-700);
max-width: 640px;
margin: 0 auto;
line-height: 1.7;
}
/* ==========================================================================
RESPONSIVE UTILITIES
========================================================================== */
@media (max-width: 1024px) {
:root { --content-gutter: 24px; }
}
@media (max-width: 768px) {
:root {
--content-gutter: 20px;
--space-3xl: 80px;
--space-2xl: 60px;
}
.hbav-section-header h2 { font-size: 32px; }
}
/* ==========================================================================
HBAV HEADER & NAVIGATION
========================================================================== */
/* Prevent Kadence from clipping nav overflow (megamenu needs it) */
#masthead,
.site-header,
.header-top-row,
.header-section,
.header-column,
.kadence-header-custom-html { overflow: visible !important; }
/* --- Utility Bar --- */
.hbav-utility-bar {
background: var(--hbav-blue);
color: #ffffff;
padding: 8px 0;
font-size: 13px;
font-weight: 500;
}
.hbav-utility-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hbav-utility-links { display: flex; align-items: center; gap: 0; }
.hbav-utility-links a {
color: #ffffff;
text-decoration: none;
margin-left: 24px;
letter-spacing: 0.5px;
transition: color 0.2s;
}
.hbav-utility-links a:hover { color: var(--hbav-green); }
/* --- Main Header --- */
.hbav-header {
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 55, 100, 0.08);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.hbav-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hbav-logo img {
height: 70px;
width: auto;
display: block;
}
/* --- Desktop Navigation --- */
.hbav-main-nav {
display: flex;
gap: 0;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.hbav-nav-item {
position: relative;
padding: 20px 12px;
}
.hbav-nav-link {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--hbav-blue);
text-decoration: none;
transition: color 0.3s;
white-space: nowrap;
position: relative;
padding-bottom: 4px;
}
.hbav-nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--hbav-green);
transition: width 0.3s ease;
}
.hbav-nav-link:hover,
.hbav-nav-item:hover > .hbav-nav-link,
.hbav-nav-item:focus-within > .hbav-nav-link {
color: var(--hbav-green);
}
.hbav-nav-link:hover::after,
.hbav-nav-item:hover > .hbav-nav-link::after,
.hbav-nav-item:focus-within > .hbav-nav-link::after {
width: 100%;
}
/* Nav CTA Button (Insurance) */
.hbav-nav-cta {
background: var(--hbav-green);
color: #ffffff;
padding: 14px 32px;
text-decoration: none;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
border-radius: 4px;
transition: all 0.3s;
display: inline-block;
margin-left: 10px;
}
.hbav-nav-cta:hover {
background: var(--hbav-blue);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 191, 99, 0.3);
color: #ffffff;
}
/* --- Megamenu --- */
.hbav-megamenu {
display: none;
position: absolute;
top: 100%;
left: -20px;
width: 600px;
background: #ffffff;
box-shadow: 0 15px 40px rgba(0, 55, 100, 0.15);
border-top: 3px solid var(--hbav-green);
z-index: 9999;
padding: 0;
border-radius: 0 0 4px 4px;
overflow: hidden;
justify-content: space-between;
}
.hbav-nav-item:hover .hbav-megamenu,
.hbav-nav-item:focus-within .hbav-megamenu {
display: flex;
}
.hbav-megamenu--right {
left: auto;
right: 0;
}
.hbav-megamenu-content { display: flex; width: 100%; }
.hbav-megamenu-col {
flex: 1;
padding: 20px 0;
background: #ffffff;
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.hbav-megamenu-col:not(:last-child) {
border-right: 1px solid #f4f4f4;
}
.hbav-megamenu-col h3 {
font-family: var(--font-display);
font-size: 16px;
color: var(--hbav-blue);
margin-bottom: 15px;
font-weight: 700;
padding: 0 30px;
}
.hbav-megamenu-col ul { list-style: none; padding: 0; margin: 0; }
.hbav-megamenu-col li { margin: 0; border-bottom: 1px solid #f9f9f9; }
.hbav-megamenu-col a {
color: #444;
text-decoration: none;
font-family: var(--font-body);
font-size: 14px;
transition: all 0.2s;
font-weight: 600;
display: block;
padding: 12px 30px;
}
.hbav-megamenu-col a:hover {
color: var(--hbav-green);
background: #f9f9f9;
padding-left: 35px;
}
/* Megamenu Featured Panel */
.hbav-megamenu-featured {
width: 240px;
background: var(--gray-50);
padding: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-left: 1px solid #eee;
flex-shrink: 0;
}
.hbav-megamenu-featured h4 {
font-family: var(--font-body);
font-size: 11px;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
font-weight: 700;
margin-top: 0;
}
.hbav-megamenu-featured h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--hbav-blue);
margin-bottom: 12px;
padding: 0;
}
.hbav-megamenu-featured p {
font-family: var(--font-body);
color: #666;
font-size: 13px;
line-height: 1.5;
margin-bottom: 15px;
}
.hbav-megamenu-featured .featured-link {
display: inline-block;
color: var(--hbav-blue);
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 11px;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.hbav-megamenu-featured .featured-link:hover {
color: var(--hbav-green);
}
/* --- Mobile Toggle (Hamburger) --- */
.hbav-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
position: relative;
z-index: 1002;
}
.hbav-hamburger {
width: 28px;
height: 20px;
position: relative;
transform: rotate(0deg);
transition: 0.5s ease-in-out;
}
.hbav-hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #003764;
border-radius: 3px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.hbav-mobile-toggle[aria-expanded="true"] .hbav-hamburger span { background: #003764; }
.hbav-hamburger span:nth-child(1) { top: 0px; }
.hbav-hamburger span:nth-child(2) { top: 8px; }
.hbav-hamburger span:nth-child(3) { top: 16px; }
.hbav-mobile-toggle[aria-expanded="true"] .hbav-hamburger span:nth-child(1) { top: 8px; transform: rotate(135deg); }
.hbav-mobile-toggle[aria-expanded="true"] .hbav-hamburger span:nth-child(2) { opacity: 0; left: -60px; }
.hbav-mobile-toggle[aria-expanded="true"] .hbav-hamburger span:nth-child(3) { top: 8px; transform: rotate(-135deg); }
/* --- Mobile Menu Drawer (Blue Overlay) --- */
.hbav-mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: var(--hbav-blue);
z-index: 1000;
overflow-y: auto;
transition: right 0.4s ease;
display: block;
}
.hbav-mobile-menu.is-open {
right: 0;
transform: none;
}
.hbav-mobile-menu-inner {
padding: 100px 30px 40px;
min-height: 100%;
display: flex;
flex-direction: column;
}
.hbav-mobile-nav { list-style: none; padding: 0; margin: 0; border: none; }
.hbav-mobile-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hbav-mobile-link {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 0;
color: #ffffff;
text-decoration: none;
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.hbav-mobile-link:hover { color: var(--hbav-green); }
.hbav-mobile-arrow { font-size: 12px; transition: transform 0.3s; color: #ffffff; }
.hbav-mobile-has-sub.is-open .hbav-mobile-arrow { transform: rotate(180deg); }
.hbav-mobile-sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding: 0 0 0 20px;
list-style: none;
margin: 0;
display: block;
}
.hbav-mobile-has-sub.is-open .hbav-mobile-sub { max-height: 500px; }
.hbav-mobile-sub li a {
display: block;
padding: 12px 0;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
text-transform: none;
letter-spacing: 0.5px;
transition: all 0.3s;
border: none;
}
.hbav-mobile-sub li a:hover { color: var(--hbav-green); padding-left: 10px; }
/* Mobile Utilities inside drawer */
.hbav-mobile-cta { margin-top: 30px; padding: 0; }
.hbav-mobile-cta .btn-primary { width: 100%; display: block; text-align: center; }
.hbav-mobile-utility {
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 30px;
padding-top: 30px;
}
.hbav-mobile-utility h4 {
color: var(--hbav-green);
font-family: var(--font-body);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
font-weight: 700;
}
.hbav-mobile-utility a {
display: block;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-family: var(--font-body);
padding: 12px 0;
font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.hbav-mobile-utility a:hover { color: var(--hbav-green); padding-left: 10px; }
/* --- Header Responsive Breakpoints --- */
@media (max-width: 1100px) {
.hbav-main-nav, .hbav-utility-links { display: none !important; }
.hbav-mobile-toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px !important;
height: 44px !important;
overflow: visible !important;
flex-shrink: 0;
}
}
@media (max-width: 1024px) {
.hbav-utility-bar { display: none !important; }
.hbav-header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1001; }
.hbav-header-inner { padding: 15px 20px; height: auto; }
.hbav-logo img { height: 50px; }
}
/* ==========================================================================
HERO SLIDER
50/50 angled split: photo left, blue content panel right.
========================================================================== */
.hbav-hero-slider {
position: relative;
height: 600px;
width: 100%;
overflow: hidden;
display: block;
background: #000;
}
.hbav-slider-container {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hbav-hero-slide {
min-width: 100%;
height: 100%;
display: flex;
position: relative;
}
/* Photo side */
.hbav-hero-image {
flex: 1;
height: 100%;
position: relative;
z-index: 1;
background-size: cover;
background-position: center;
}
.hbav-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hbav-hero-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 55, 100, 0.1), rgba(0, 55, 100, 0.1));
z-index: 2;
}
/* Content panel — angled left edge via clip-path */
.hbav-hero-content {
flex: 1;
background: var(--hbav-blue);
padding: 80px 80px 80px 100px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
margin-left: -5%;
}
.hbav-hero-content h1 {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
color: var(--white);
}
.hbav-hero-content h1 span { color: var(--hbav-green); }
.hbav-hero-content p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 40px;
color: var(--white);
opacity: 0.95;
}
.hbav-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
/* Slider dot navigation */
.hbav-slider-nav {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.hbav-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid var(--white);
cursor: pointer;
transition: all var(--ease);
padding: 0;
}
.hbav-slider-dot.active {
background: var(--hbav-green);
transform: scale(1.2);
}
/* Arrow controls */
.hbav-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
color: var(--white);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--ease);
font-size: 20px;
font-weight: bold;
z-index: 10;
border: none;
}
.hbav-slider-arrow:hover { background: var(--hbav-green); }
.hbav-slider-arrow--prev { left: 40px; }
.hbav-slider-arrow--next { right: 40px; }
/* Zero gap between slider and stats bar */
.wp-block-acf-hbav-hero-slider + .wp-block-acf-hbav-stats-bar { margin-top: 0 !important; }
/* Hero responsive */
@media (max-width: 1024px) {
/* Offset the fixed header (≈80px tall on mobile) via body padding, not slider margin.
margin-top on the slider itself created the white gap. */
body { padding-top: 80px; }
.hbav-hero-slider { height: auto; margin-top: 0; }
.hbav-hero-slide { flex-direction: column; height: auto; }
.hbav-hero-image { height: 60vw; min-height: 300px; flex-shrink: 0; }
.hbav-hero-content {
clip-path: none;
margin-left: 0;
padding: 28px 24px 60px;
flex: 1;
min-height: auto !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: center !important;
}
.hbav-hero-content h1 { font-size: 38px; line-height: 1.15; margin-bottom: 14px; }
.hbav-hero-content p { font-size: 15px; margin-bottom: 28px; }
.hbav-hero-buttons { flex-direction: column; gap: 12px; }
.hbav-hero-buttons .btn-primary,
.hbav-hero-buttons .btn-secondary { width: 100%; text-align: center; padding: 14px 30px; font-size: 13px; }
/* Hide arrows on mobile — navigation handled by dots and swipe */
.hbav-slider-arrow { display: none !important; }
/* Dots stay at bottom of the full slide (content + photo together) — correct */
.hbav-slider-nav { bottom: 16px; }
}
@media (max-width: 640px) {
.hbav-hero-content h1 { font-size: 32px; }
.hbav-hero-content p { font-size: 14px; }
}
/* ==========================================================================
STATS BAR
========================================================================== */
.hbav-stats-section {
background: var(--hbav-green);
padding: 60px var(--content-gutter);
}
.hbav-stats-grid {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
.hbav-stat-item h3 {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
margin-bottom: 8px;
letter-spacing: -1px;
color: var(--white);
}
.hbav-stat-item p {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--white);
}
@media (max-width: 1024px) {
.hbav-stats-section { padding: 40px var(--content-gutter); }
.hbav-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.hbav-stat-item h3 { font-size: 42px; }
}
@media (max-width: 640px) {
.hbav-stats-grid { grid-template-columns: 1fr; }
.hbav-stat-item h3 { font-size: 36px; }
}
/* ==========================================================================
WHY HBAV SECTION
========================================================================== */
.hbav-why-hbav-section { padding: 100px var(--content-gutter); background: var(--white); }
.hbav-why-hbav-content { max-width: var(--content-max); margin: 0 auto; }
/* Intro copy — centered, constrained width */
.hbav-why-hbav-intro { text-align: center; max-width: 900px; margin: 0 auto 60px; }
.hbav-why-hbav-intro h2 {
font-family: var(--font-display);
font-size: 48px;
color: var(--hbav-blue);
margin-bottom: 20px;
}
.hbav-why-hbav-intro .lead { font-size: 20px; line-height: 1.6; color: var(--gray-700); }
/* Card grid — 3 columns desktop, collapses to 1 on mobile */
.hbav-why-hbav-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.hbav-why-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all var(--ease);
}
.hbav-why-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0, 55, 100, 0.15);
}
/* ACF image field outputs as background-image on this div */
.hbav-why-photo {
height: 200px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.hbav-why-card h3 {
font-family: var(--font-display);
font-size: 24px;
color: var(--hbav-blue);
margin: 24px 30px 12px;
}
.hbav-why-card p {
color: var(--gray-700);
line-height: 1.6;
font-size: 15px;
padding: 0 30px 30px;
margin: 0;
}
/* CTA row below the grid */
.hbav-why-cta {
text-align: center;
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.hbav-why-hbav-section { padding: 60px var(--content-gutter); }
.hbav-why-hbav-intro h2 { font-size: 36px; }
.hbav-why-hbav-intro .lead { font-size: 17px; }
.hbav-why-hbav-grid { grid-template-columns: 1fr; gap: 20px; }
.hbav-why-photo { height: 180px; }
}
@media (max-width: 640px) {
.hbav-why-hbav-intro h2 { font-size: 28px; }
.hbav-why-hbav-intro .lead { font-size: 16px; }
}
/* ==========================================================================
NEWS SECTION
========================================================================== */
.hbav-news-section { padding: 100px var(--content-gutter); background: var(--gray-50); }
.hbav-news-content { max-width: var(--content-max); margin: 0 auto; }
/* Row header — title left, "View All" link right */
.hbav-news-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}
.hbav-news-header h2 {
font-family: var(--font-display);
font-size: 48px;
color: var(--hbav-blue);
font-weight: 700;
}
.hbav-view-all {
color: var(--hbav-green);
text-decoration: none;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
transition: color var(--ease);
}
.hbav-view-all:hover { color: var(--hbav-blue); }
/* 3-column grid: featured (2fr) + two smaller cards (1fr each) */
.hbav-news-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 30px;
}
.hbav-news-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all var(--ease);
text-decoration: none;
color: inherit;
display: block;
}
.hbav-news-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 55, 100, 0.15);
}
/* ACF image field outputs as background-image on this div */
.hbav-news-image {
height: 280px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
/* Featured (first) card gets taller image */
.hbav-news-card:first-child .hbav-news-image { height: 400px; }
.hbav-news-content-inner { padding: 32px; }
.hbav-news-category {
display: inline-block;
background: var(--hbav-green);
color: var(--white);
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
border-radius: 3px;
margin-bottom: 16px;
}
.hbav-news-card h3 {
font-family: var(--font-display);
font-size: 24px;
color: var(--hbav-blue);
margin-bottom: 12px;
font-weight: 700;
line-height: 1.3;
}
.hbav-news-card h3 a { color: inherit; text-decoration: none; }
.hbav-news-card h3 a:hover { color: var(--hbav-green); }
.hbav-news-card:first-child h3 { font-size: 32px; }
.hbav-news-excerpt {
color: var(--gray-700);
font-size: 15px;
line-height: 1.6;
margin-bottom: 16px;
}
.hbav-news-meta { color: var(--gray-700); font-size: 13px; font-weight: 600; opacity: 0.7; }
@media (max-width: 1024px) {
.hbav-news-section { padding: 60px var(--content-gutter); }
.hbav-news-header { flex-direction: column; align-items: flex-start; gap: 20px; }
.hbav-news-header h2 { font-size: 36px; }
.hbav-news-grid { grid-template-columns: 1fr; }
.hbav-news-grid .hbav-news-grid .hbav-news-card:first-child .hbav-news-image { height: 280px; }
.hbav-news-card h3 { font-size: 22px; }
.hbav-news-grid .hbav-news-card:first-child h3 { font-size: 26px; }
}
@media (max-width: 640px) {
.hbav-news-card h3,
.hbav-news-card:first-child h3 { font-size: 20px; }
}
/* ==========================================================================
NEWS FEED BLOCK — CONTEXT OVERRIDES
Append immediately after the existing news feed CSS block (after line 1007).
The base .hbav-news-section styles are unchanged — these rules layer
context-specific treatments on top using BEM modifier classes.
========================================================================== */
/* ── SHARED: NEW HEADER STRUCTURE ───────────────────────────────────────────
The updated PHP wraps heading + label + description in .hbav-news-header-left
so the View All link can still right-align. This keeps the existing
flex layout working without touching the base CSS. */
.hbav-news-header-left {
display: flex;
flex-direction: column;
}
/* Section label (eyebrow) — hidden by default, shown in sub-org contexts */
.hbav-news-section-label {
display: none; /* hidden in hbav context */
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 12px;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
width: fit-content;
}
/* Description paragraph below heading */
.hbav-news-description {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin-top: 12px;
margin-bottom: 0;
max-width: 640px;
}
/* ── EDUCATION FOUNDATION CONTEXT ─────────────────────────────────────────── */
.hbav-news-section--ef .hbav-news-section-label {
display: inline-block;
color: var(--education-green);
}
/* View All link — education green with yellow underline border */
.hbav-news-section--ef .hbav-view-all {
color: var(--education-green);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
font-size: 13px;
}
.hbav-news-section--ef .hbav-view-all:hover {
color: var(--hbav-blue);
border-bottom-color: var(--hbav-blue);
}
/* Category pill — education green instead of HBAV green */
.hbav-news-section--ef .hbav-news-category {
background: var(--education-green);
}
/* Card hover — education green shadow tint */
.hbav-news-section--ef .hbav-news-card:hover {
box-shadow: 0 12px 24px rgba(2,93,49,0.15);
}
/* ── BUILDPAC CONTEXT ─────────────────────────────────────────────────────── */
.hbav-news-section--buildpac .hbav-news-section-label {
display: inline-block;
color: var(--buildpac-red);
border-bottom-color: var(--buildpac-red);
}
/* View All — red with red underline */
.hbav-news-section--buildpac .hbav-view-all {
color: var(--buildpac-red);
border-bottom: 2px solid var(--buildpac-red);
padding-bottom: 2px;
font-size: 13px;
}
.hbav-news-section--buildpac .hbav-view-all:hover {
color: var(--hbav-blue);
border-bottom-color: var(--hbav-blue);
}
/* Category pill — BuildPAC red */
.hbav-news-section--buildpac .hbav-news-category {
background: var(--buildpac-red);
}
/* Card hover — red shadow tint */
.hbav-news-section--buildpac .hbav-news-card:hover {
box-shadow: 0 12px 24px rgba(211,43,41,0.14);
}
/* ── INSURANCE CONTEXT ────────────────────────────────────────────────────── */
.hbav-news-section--insurance .hbav-news-section-label {
display: inline-block;
color: var(--insurance-yellow-dark);
border-bottom-color: var(--insurance-yellow);
}
/* View All — yellow-dark with yellow underline */
.hbav-news-section--insurance .hbav-view-all {
color: var(--insurance-yellow-dark);
border-bottom: 2px solid var(--yellow);
padding-bottom: 2px;
font-size: 13px;
}
.hbav-news-section--insurance .hbav-view-all:hover {
color: var(--hbav-blue);
border-bottom-color: var(--hbav-blue);
}
/* Category pill — yellow with blue text (yellow bg needs dark text) */
.hbav-news-section--insurance .hbav-news-category {
background: var(--yellow);
color: var(--hbav-blue);
}
/* ── GENERIC CONTEXT ──────────────────────────────────────────────────────── */
/* No accent overrides — renders exactly like base HBAV styling */
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-news-description { font-size: 15px; }
}
@media (max-width: 768px) {
.hbav-news-section-label { margin-bottom: 8px; }
.hbav-news-description { font-size: 14px; }
}
/* ==========================================================================
QUICK LINKS (RESOURCES & TOOLS)
========================================================================== */
.hbav-quick-links-section { padding: 100px var(--content-gutter); background: var(--white); }
/* Row header — title only, no "View All" on this section */
.hbav-quick-header {
max-width: var(--content-max);
margin: 0 auto 60px;
}
.hbav-quick-header h2 {
font-family: var(--font-display);
font-size: 48px;
color: var(--hbav-blue);
font-weight: 700;
}
.hbav-quick-grid {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* ACF image field outputs as background-image on the card itself */
.hbav-quick-card {
position: relative;
height: 320px;
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
transition: all 0.4s;
text-decoration: none;
color: var(--white);
display: block;
}
/* Single blue gradient scrim — do not add a separate overlay element in the template */
.hbav-quick-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0, 55, 100, 0.9) 100%);
z-index: 2;
}
.hbav-quick-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0, 55, 100, 0.2);
}
.hbav-quick-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 32px;
z-index: 3;
}
.hbav-quick-card h3 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
color: var(--white);
}
.hbav-quick-card p { font-size: 15px; color: var(--white); }
@media (max-width: 1024px) {
.hbav-quick-links-section { padding: 60px var(--content-gutter); }
.hbav-quick-grid { grid-template-columns: 1fr; }
.hbav-quick-card { height: 280px; }
}
/* ==========================================================================
EVENTS PREVIEW
========================================================================== */
.hbav-events-preview-section {
padding: 100px var(--content-gutter);
background: var(--hbav-blue);
color: var(--white);
}
.hbav-events-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
align-items: center !important;
}
.hbav-events-intro h2 {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--white);
margin-bottom: 24px;
}
.hbav-events-intro p {
font-size: 18px;
color: var(--white);
margin-bottom: 32px;
}
.hbav-event-list { display: flex; flex-direction: column; gap: 20px; }
/* Each event item is a linkable block */
.hbav-event-item {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 24px;
border-left: 4px solid var(--hbav-green);
transition: all var(--ease);
text-decoration: none;
color: inherit;
display: block;
}
.hbav-event-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateX(8px);
}
.hbav-event-date {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2px;
display: block;
}
.hbav-event-item h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--white);
margin: 4px 0 6px;
}
.hbav-event-location { color: var(--white); opacity: 0.8; font-size: 14px; }
@media (max-width: 1024px) {
.hbav-events-preview-section { padding: 60px var(--content-gutter); }
.hbav-events-content { grid-template-columns: 1fr; gap: 40px; }
.hbav-events-intro h2 { font-size: 36px; }
.hbav-event-item { padding: 20px; }
}
@media (max-width: 640px) {
.hbav-events-intro h2 { font-size: 28px; }
}
/* ==========================================================================
KEYSTONE PARTNERS CAROUSEL
========================================================================== */
.hbav-keystone-section {
background: var(--white);
padding: 80px var(--content-gutter);
border-top: 1px solid var(--gray-200);
}
.hbav-keystone-content { max-width: var(--content-max); margin: 0 auto; }
.hbav-keystone-header { text-align: center; margin-bottom: 60px; }
.hbav-keystone-header h2 {
font-family: var(--font-display);
font-size: 48px;
color: var(--hbav-blue);
margin-bottom: 16px;
}
.hbav-keystone-header p {
font-size: 18px;
color: var(--gray-700);
max-width: 900px;
margin: 0 auto 40px;
line-height: 1.7;
}
/* Achievements callout box */
.hbav-keystone-achievements {
max-width: 800px;
margin: 0 auto 40px;
text-align: left;
background: var(--gray-50);
padding: 30px;
border-radius: 8px;
border-left: 4px solid var(--hbav-green);
}
.hbav-keystone-achievements h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--hbav-blue);
margin-bottom: 15px;
}
.hbav-keystone-achievements ul { list-style: none; padding: 0; margin: 0; }
.hbav-keystone-achievements li {
padding: 8px 0 8px 25px;
position: relative;
font-size: 15px;
color: var(--gray-700);
}
.hbav-keystone-achievements li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--hbav-green);
font-weight: 700;
}
/* Infinite-scroll carousel track */
.hbav-keystone-carousel { overflow: hidden; position: relative; }
.hbav-keystone-track {
display: flex;
gap: 60px;
animation: hbav-scroll 60s linear infinite;
}
.hbav-keystone-track:hover { animation-play-state: paused; }
/* Logo slots — ![]()
tags from ACF replace the placeholder text */
.hbav-keystone-logo {
flex-shrink: 0;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
filter: grayscale(100%);
opacity: 0.6;
transition: all var(--ease, 0.3s ease);
}
.hbav-keystone-logo:hover { filter: grayscale(0%); opacity: 1; }
.hbav-keystone-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes hbav-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 1024px) {
.hbav-keystone-section { padding: 60px var(--content-gutter); }
.hbav-keystone-header h2 { font-size: 36px; }
.hbav-keystone-logo { width: 150px; height: 80px; }
.hbav-keystone-track { animation-duration: 30s; }
}
@media (max-width: 640px) {
.hbav-keystone-header h2 { font-size: 28px; }
}
/* ==========================================================================
MEMBER TESTIMONIALS
========================================================================== */
.hbav-testimonials-section { padding: 100px var(--content-gutter); background: var(--gray-50); }
.hbav-testimonials-content { max-width: 1000px; margin: 0 auto; text-align: center; }
.hbav-testimonials-content h2 {
font-family: var(--font-display);
font-size: 48px;
color: var(--hbav-blue);
margin-bottom: 16px;
}
.hbav-section-subtitle { font-size: 18px; color: var(--gray-700); margin-bottom: 60px; }
/* Single-slide carousel */
.hbav-testimonials-carousel { position: relative; overflow: hidden; }
.hbav-testimonial-slide { min-width: 100%; opacity: 0; transition: opacity 0.5s ease; display: none; }
.hbav-testimonial-slide.active { opacity: 1; display: block; }
/* UPGRADED CARD */
.hbav-testimonial-card {
background: var(--white);
padding: 60px 60px 50px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 55, 100, 0.1);
position: relative;
text-align: left; /* Shift text to left for a cleaner reading experience */
z-index: 1;
}
/* THE GIANT HANGING QUOTE (Watermark) */
.hbav-quote-icon {
position: absolute;
top: 20px;
left: 30px;
font-size: 160px;
color: var(--hbav-green);
opacity: 0.15;
line-height: 1;
font-family: Georgia, serif;
z-index: -1;
user-select: none;
margin: 0;
}
/* SIZED UP EDITORIAL TEXT */
.hbav-testimonial-text {
font-size: 24px;
line-height: 1.6;
color: var(--gray-700);
margin-bottom: 40px;
font-style: italic;
position: relative;
z-index: 2;
}
/* UPGRADED HEADSHOT & AUTHOR LAYOUT */
.hbav-testimonial-author {
border-top: 2px solid var(--gray-200);
padding-top: 25px;
display: flex;
align-items: center;
gap: 20px;
}
.hbav-author-headshot {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--hbav-green);
background: var(--gray-100); /* Fallback variable */
}
.hbav-author-details {
display: flex;
flex-direction: column;
}
.hbav-author-details strong {
font-size: 18px;
color: var(--hbav-blue);
margin-bottom: 4px;
}
.hbav-author-details span {
font-size: 15px;
color: var(--gray-700);
}
/* Dot navigation */
.hbav-testimonial-dots { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.hbav-testimonial-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gray-300);
cursor: pointer;
transition: all var(--ease);
padding: 0;
border: none;
}
.hbav-testimonial-dot.active { background: var(--hbav-green); transform: scale(1.3); }
.hbav-testimonial-dot:hover { background: var(--hbav-blue); }
@media (max-width: 1024px) {
.hbav-testimonials-section { padding: 60px var(--content-gutter); }
.hbav-testimonials-content h2 { font-size: 36px; }
.hbav-testimonial-card { padding: 50px 30px 40px; }
.hbav-testimonial-text { font-size: 20px; }
}
@media (max-width: 640px) {
.hbav-testimonials-content h2 { font-size: 28px; }
.hbav-testimonial-card { padding: 40px 20px 30px; }
.hbav-testimonial-text { font-size: 18px; }
.hbav-quote-icon { font-size: 100px; top: 10px; left: 15px; }
.hbav-author-headshot { width: 50px; height: 50px; }
}
/* ==========================================================================
KADENCE FOOTER BUILDER OVERRIDES
========================================================================== */
/* Strip Kadence padding from inner wrappers, but leave #colophon alone */
#colophon .site-footer-row-container-inner,
#colophon .site-footer-row,
#colophon .kadence-custom-html,
#colophon .footer-widget-area,
#colophon .footer-widget-area-inner,
#colophon .footer-html {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- Footer Core --- */
footer.hbav-footer#colophon {
background: var(--hbav-blue) !important;
color: var(--white);
padding: 80px var(--content-gutter) 40px !important;
font-family: var(--font-body);
width: 100%;
border: none !important;
}
.hbav-footer-main {
max-width: var(--content-max);
margin: 0 auto 60px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 60px;
}
.hbav-footer-brand h3 {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
margin: 0 0 20px;
color: var(--white);
}
.hbav-footer-brand h3 span { color: var(--hbav-green); }
.hbav-footer-brand > p {
color: var(--white) !important;
line-height: 1.7;
margin: 0 0 12px;
font-size: 15px;
}
/* Contact block inside brand column */
.hbav-footer-contact { margin-bottom: 24px; }
.hbav-footer-contact a {
color: var(--white) !important;
text-decoration: none !important;
display: block;
margin-bottom: 8px;
font-size: 15px;
line-height: 1.8;
transition: color var(--ease);
}
.hbav-footer-contact a:hover { color: var(--hbav-green) !important; }
/* Social icon row */
.hbav-social-links { display: flex; gap: 12px; }
.hbav-social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white) !important;
font-size: 16px;
font-weight: 700;
text-decoration: none !important;
transition: all var(--ease) !important;
}
.hbav-social-link:hover { background: var(--hbav-green) !important; transform: translateY(-2px); }
/* --- Footer Column Navigation --- */
.hbav-footer-wrapper,
#colophon [class*="footer-column"],
#colophon .site-footer-row-content,
#colophon [class*="footer-column"] * {
text-align: left !important;
}
.hbav-footer-column h4 {
font-family: var(--font-display) !important;
font-size: 18px !important;
font-weight: 700 !important;
margin: 0 0 20px !important;
color: var(--hbav-green) !important;
text-align: left !important;
}
/* Bulletproof Kadence Menu Overrides */
ul.hbav-footer-nav {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
ul.hbav-footer-nav li {
margin-bottom: 12px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
text-align: left !important;
display: block !important;
}
ul.hbav-footer-nav li a,
.hbav-footer-column a {
color: var(--white) !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 400 !important;
display: inline-block !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
transition: all var(--ease) !important;
}
ul.hbav-footer-nav li a:hover,
.hbav-footer-column a:hover {
color: var(--hbav-green) !important;
padding-left: 5px !important;
}
/* --- Footer Bottom Bar --- */
.hbav-footer-bottom {
max-width: var(--content-max);
margin: 0 auto;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hbav-footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.hbav-footer-copyright { font-size: 13px; color: var(--white); margin: 0; }
.hbav-footer-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hbav-footer-links a {
color: var(--white) !important;
text-decoration: none !important;
font-size: 13px !important;
transition: color var(--ease) !important;
}
.hbav-footer-links a:hover { color: var(--hbav-green) !important; }
.hbav-footer-separator { color: rgba(255, 255, 255, 0.6); margin: 0 8px; }
.hbav-footer-designed { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.hbav-kelley-link { display: inline-flex; align-items: center; gap: 8px; }
.hbav-kelley-logo { height: 20px; width: auto; opacity: 0.8; transition: opacity var(--ease); }
.hbav-kelley-logo:hover { opacity: 1; }
/* --- Footer Responsive --- */
@media (max-width: 1024px) {
footer.hbav-footer#colophon { padding: 60px var(--content-gutter) 30px !important; }
.hbav-footer-main { grid-template-columns: 1fr; gap: 40px; }
.hbav-footer-bottom-inner { flex-direction: column; text-align: center; }
.hbav-footer-links { justify-content: center; }
}
@media (max-width: 640px) {
.hbav-footer-brand h3 { font-size: 24px; }
.hbav-footer-main { gap: 30px; }
}
/* Add breathing room back to Why HBAV cards */
.hbav-why-content {
text-align: left;
/* Order: Top, Right, Bottom, Left */
/* 20px on top keeps the gap from the photo, 25px on sides adds the padding back */
padding: 20px 25px 25px 25px;
}
.hbav-why-content h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
text-align: left;
display: block;
}
.hbav-why-content p {
margin: 0 !important;
padding: 0 !important;
text-align: left;
display: block;
line-height: 1.6;
}
/* === EVENTS PREVIEW (EXACT MOCKUP MATCH + PHP ALIGNMENT) === */
.hbav-events-preview-section {
padding: 100px 40px;
background: var(--hbav-blue);
color: #ffffff;
}
.hbav-events-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
align-items: start; /* FIX 1: Keeps the intro text pinned to the top */
}
/* 1. THE WRAPPER (Vertical Center, Pushed to the RIGHT) */
/* 1. THE WRAPPER (Vertical Center, Pushed to the LEFT) */
.hbav-events-intro {
display: flex;
flex-direction: column;
justify-content: center; /* Keeps it vertically centered in the grid */
align-items: flex-start; /* Pushes the button perfectly to the LEFT edge */
text-align: left; /* Aligns all the text to the LEFT */
}
/* 2. THE HEADER */
.hbav-events-intro h2 {
color: #ffffff !important;
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
/* Reduced from 24px to 16px to close the weird gap */
margin: 0 0 12px 0 !important;
line-height: 1.1;
text-align: left; /* Forces left alignment */
}
/* 3. THE PARAGRAPH */
.hbav-events-intro p {
font-size: 18px;
/* Reduced from 32px to 24px to balance the spacing above the button */
margin: 0 0 24px 0 !important;
color: #ffffff !important;
text-align: left; /* Forces left alignment */
}
.hbav-event-list {
display: flex;
flex-direction: column;
gap: 20px;
}
/* The translucent card */
.hbav-event-item {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 24px 30px;
border-left: 4px solid var(--hbav-green);
transition: all 0.3s;
text-decoration: none !important;
/* FIX 2: Flexbox keeps text on the left and the arrow on the right */
display: flex;
justify-content: space-between;
align-items: center;
}
.hbav-event-item:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateX(8px);
}
.hbav-event-details {
text-align: left;
}
.hbav-event-date {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 4px 0 !important;
display: block;
}
.hbav-event-item h3 {
font-family: var(--font-display);
font-size: 22px;
margin: 0 0 6px 0 !important;
font-weight: 700;
color: #ffffff !important;
}
.hbav-event-location {
color: #ffffff;
opacity: 0.8;
font-size: 14px;
display: block;
}
/* The Arrow */
.hbav-event-arrow {
color: var(--hbav-green);
font-size: 24px;
transition: transform 0.3s ease;
}
/* ==========================================================================
MOBILE HOTFIXES (Header, Hero, Events) - V2
========================================================================== */
/* 1. Hamburger bars + X: always #003764 (hardcoded hex, no CSS variable — Mobile Safari compat)
The toggle button sits on the white header in ALL states. The menu drawer slides in
behind the header (z-index 1000 vs header z-index 1001), so the button is never
on top of the blue overlay. Both closed bars and the open X must be blue. */
button.hbav-mobile-toggle .hbav-hamburger span,
button.hbav-mobile-toggle[aria-expanded="true"] .hbav-hamburger span,
button.hbav-mobile-toggle.active .hbav-hamburger span {
background: #003764 !important;
}
/* 2. Mobile Layout Overrides */
@media (max-width: 1024px) {
/* --- HERO SLIDER FIXES --- */
/* Aggressively target ALL Kadence default wrappers to kill the white gap */
#inner-wrap,
.site-inner,
.site-content,
.content-container,
.entry-content,
.hbav-hero-section {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Target the very first block on the page just in case WordPress adds a gap */
.entry-content > *:first-child {
margin-top: 0 !important;
}
/* Uniform Photo Heights */
.hbav-hero-image-wrapper,
.hbav-hero-image {
height: 300px !important;
width: 100% !important;
display: block;
}
/* Center text vertically, protect dots — REMOVED: was causing variable gap.
Alignment now handled in the main ≤1024px breakpoint above. */
/* Lock dots to the bottom of the blue box */
.hbav-slider-nav {
position: absolute !important;
bottom: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10;
width: 100%;
justify-content: center;
}
/* --- EVENTS PREVIEW FIX --- */
/* Stack into 1 Column */
.hbav-events-content {
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
}
/* FIX: Force Left Alignment to match desktop */
.hbav-events-intro {
align-items: flex-start !important;
text-align: left !important;
}
.hbav-events-intro h2,
.hbav-events-intro p {
text-align: left !important;
}
}
/* ============================================================
HBAV NEWS HUB — page-news.php + page-news-archive.php
Append to /wp-content/themes/hbav-child/style.css
============================================================ */
/* ── SHARED TOKENS ────────────────────────────────────────── */
:root {
--news-blue: #003764;
--news-green: #00bf63;
--news-yellow: #f0bf2d;
--news-edu-green: #025d31;
--news-gray-50: #f9fafb;
--news-gray-100: #f3f4f6;
--news-gray-200: #e5e7eb;
--news-gray-700: #374151;
--news-radius: 10px;
--news-max-width: 1400px;
--news-pad-h: 40px;
}
/* ── SECTION HEADING ──────────────────────────────────────── */
.hbav-section-heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 36px;
font-weight: 700;
color: var(--news-blue);
margin-bottom: 40px;
border-left: 4px solid var(--news-green);
padding-left: 16px;
line-height: 1.2;
}
/* ── CATEGORY PILLS ───────────────────────────────────────── */
.hbav-pill {
display: inline-block;
padding: 5px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
line-height: 1;
}
.pill--advocacy { background: var(--news-blue); color: #fff; }
.pill--capitol { background: var(--news-green); color: #fff; }
.pill--industry { background: #1d4ed8; color: #fff; }
.pill--member { background: #6b21a8; color: #fff; }
.pill--events { background: var(--news-yellow); color: var(--news-blue); }
.pill--education { background: var(--news-edu-green); color: #fff; }
.pill--default { background: #6b7280; color: #fff; }
/* ── NEWS DATE ────────────────────────────────────────────── */
.hbav-news-date {
display: block;
font-size: 12px;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.hbav-news-date--light {
color: rgba(255,255,255,0.7);
}
/* ── BUTTONS ──────────────────────────────────────────────── */
.hbav-btn-outline {
display: inline-block;
background: transparent;
color: var(--news-green);
padding: 13px 32px;
border: 2px solid var(--news-green);
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.hbav-btn-outline:hover {
background: var(--news-green);
color: #fff;
}
.hbav-btn-outline--light {
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.4);
}
.hbav-btn-outline--light:hover {
background: rgba(255,255,255,0.15);
color: #fff;
border-color: #fff;
}
/* ── ARCHIVE BADGE ────────────────────────────────────────── */
.hbav-archive-badge {
display: inline-block;
margin-top: auto;
padding: 3px 10px;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background: var(--news-gray-100);
color: #888;
border: 1px solid var(--news-gray-200);
}
/* ════════════════════════════════════════════════════════════
SECTION 1: NEWS PAGE HEADER BAR
════════════════════════════════════════════════════════════ */
.hbav-news-hub-header {
background: var(--news-blue);
color: #fff;
padding: 48px var(--news-pad-h);
}
.hbav-news-hub-header__inner {
max-width: var(--news-max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.hbav-news-hub-header__left { flex: 1; }
.hbav-news-hub-header__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 36px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
line-height: 1.1;
}
.hbav-news-hub-header__description {
color: rgba(255,255,255,0.8);
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 520px;
}
.hbav-news-hub-header__right {
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 6px;
}
/* Category filter tabs */
.hbav-cat-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.hbav-cat-tab {
display: inline-block;
background: transparent;
color: rgba(255,255,255,0.7);
padding: 7px 16px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 24px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: background 0.25s, color 0.25s, border-color 0.25s;
white-space: nowrap;
}
.hbav-cat-tab:hover,
.hbav-cat-tab.is-active {
background: var(--news-green);
color: #fff;
border-color: var(--news-green);
}
/* ════════════════════════════════════════════════════════════
SECTION 2: HERO FEATURE (50/50)
════════════════════════════════════════════════════════════ */
.hbav-news-hero {
background: #fff;
padding: 80px var(--news-pad-h);
}
.hbav-news-hero__inner {
max-width: var(--news-max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.hbav-news-hero__image {
height: 540px;
background-size: cover;
background-position: center;
border-radius: var(--news-radius);
}
.hbav-news-hero__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 40px;
font-weight: 700;
color: var(--news-blue);
line-height: 1.15;
margin-bottom: 20px;
}
.hbav-news-hero__excerpt {
font-size: 17px;
color: var(--news-gray-700);
line-height: 1.8;
margin-bottom: 24px;
}
.hbav-news-hero__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--news-green);
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: color 0.25s;
}
.hbav-news-hero__link:hover { color: var(--news-blue); }
/* ════════════════════════════════════════════════════════════
SECTION 3: LATEST HEADLINES (4-col grid)
════════════════════════════════════════════════════════════ */
.hbav-news-headlines {
background: var(--news-gray-50);
padding: 80px var(--news-pad-h);
}
.hbav-news-headlines__inner {
max-width: var(--news-max-width);
margin: 0 auto;
}
.hbav-headlines-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Headline card */
.hbav-headline-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--news-gray-200);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.25s, transform 0.25s;
}
.hbav-headline-card:hover {
box-shadow: 0 8px 28px rgba(0,55,100,0.13);
transform: translateY(-3px);
}
.hbav-headline-card:hover .hbav-headline-card__title {
color: var(--news-green);
}
.hbav-headline-card__img {
height: 160px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.hbav-headline-card__body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.hbav-headline-card__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 17px;
font-weight: 700;
color: var(--news-blue);
line-height: 1.4;
transition: color 0.2s;
margin: 0;
}
/* ════════════════════════════════════════════════════════════
SECTION 4: FULL-WIDTH FEATURE STORY
════════════════════════════════════════════════════════════ */
.hbav-news-feature-full {
color: #fff;
padding: 120px var(--news-pad-h);
display: flex;
align-items: center;
justify-content: center;
min-height: 480px;
text-align: center;
}
.hbav-news-feature-full__inner {
max-width: 820px;
width: 100%;
}
.hbav-news-feature-full__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 46px;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 20px;
}
.hbav-news-feature-full__subhead {
font-size: 18px;
color: rgba(255,255,255,0.88);
line-height: 1.65;
margin-bottom: 32px;
}
.hbav-news-feature-full__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--news-green);
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: color 0.25s;
}
.hbav-news-feature-full__link:hover { color: var(--news-yellow); }
/* ════════════════════════════════════════════════════════════
SECTIONS 5 & 7: MORE STORIES (3-col grid)
════════════════════════════════════════════════════════════ */
.hbav-more-stories { padding: 80px var(--news-pad-h); }
.hbav-more-stories--light { background: #fff; }
.hbav-more-stories--gray { background: var(--news-gray-50); }
.hbav-more-stories__inner {
max-width: var(--news-max-width);
margin: 0 auto;
}
.hbav-more-stories__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 48px;
}
.hbav-more-stories__footer { text-align: center; }
/* Standard news card */
.hbav-news-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--news-radius);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
transition: transform 0.3s, box-shadow 0.3s;
}
.hbav-news-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,55,100,0.14);
}
.hbav-news-card:hover .hbav-news-card__title {
color: var(--news-green);
}
.hbav-news-card__img {
height: 200px;
background-size: cover;
background-position: center;
}
.hbav-news-card__body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.hbav-news-card__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 700;
color: var(--news-blue);
line-height: 1.25;
margin-bottom: 10px;
transition: color 0.25s;
}
.hbav-news-card__excerpt {
font-size: 14px;
color: var(--news-gray-700);
line-height: 1.6;
margin-top: 8px;
flex: 1;
}
/* ════════════════════════════════════════════════════════════
SECTION 6: CAPITOL CONNECTION STRIP
════════════════════════════════════════════════════════════ */
.hbav-capitol-strip {
background: var(--news-blue);
padding: 70px var(--news-pad-h);
}
.hbav-capitol-strip__inner {
max-width: var(--news-max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.hbav-capitol-strip__heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 36px;
font-weight: 700;
color: #fff;
margin: 12px 0 16px;
line-height: 1.2;
}
.hbav-capitol-strip__description {
font-size: 16px;
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin-bottom: 28px;
}
.hbav-capitol-strip__btn {
display: inline-block;
background: var(--news-green);
color: #fff;
padding: 13px 28px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.hbav-capitol-strip__btn:hover {
background: var(--news-yellow);
color: var(--news-blue);
}
.hbav-capitol-strip__list {
display: flex;
flex-direction: column;
}
.hbav-capitol-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-decoration: none;
color: inherit;
transition: opacity 0.2s;
}
.hbav-capitol-item:last-child { border-bottom: none; }
.hbav-capitol-item:hover { opacity: 0.8; }
.hbav-capitol-item__date {
font-size: 11px;
font-weight: 700;
color: var(--news-green);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
flex-shrink: 0;
padding-top: 2px;
}
.hbav-capitol-item__title {
font-size: 14px;
color: rgba(255,255,255,0.9);
line-height: 1.5;
}
/* ════════════════════════════════════════════════════════════
ARCHIVE CTA STRIP — always visible on /news
════════════════════════════════════════════════════════════ */
.hbav-archive-cta {
background: var(--news-gray-100);
border-top: 1px solid var(--news-gray-200);
border-bottom: 1px solid var(--news-gray-200);
padding: 40px var(--news-pad-h);
}
.hbav-archive-cta__inner {
max-width: var(--news-max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.hbav-archive-cta__heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--news-blue);
margin: 0 0 6px;
}
.hbav-archive-cta__sub {
font-size: 14px;
color: var(--news-gray-700);
margin: 0;
line-height: 1.5;
}
@media (max-width: 768px) {
.hbav-archive-cta__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
/* ════════════════════════════════════════════════════════════
NEWSLETTER SIGNUP STRIP
════════════════════════════════════════════════════════════ */
.hbav-newsletter-strip {
background: var(--news-gray-100);
padding: 80px var(--news-pad-h);
text-align: center;
}
.hbav-newsletter-strip__inner {
max-width: 700px;
margin: 0 auto;
}
.hbav-newsletter-strip__heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 32px;
font-weight: 700;
color: var(--news-blue);
margin-bottom: 12px;
}
.hbav-newsletter-strip__subhead {
font-size: 16px;
color: var(--news-gray-700);
line-height: 1.6;
margin-bottom: 36px;
}
.hbav-newsletter-strip__placeholder {
color: #888;
font-size: 14px;
}
/* ════════════════════════════════════════════════════════════
ARCHIVE PAGE: NOTICE BAR
════════════════════════════════════════════════════════════ */
.hbav-archive-notice {
background: #fffbeb;
border-bottom: 1px solid #fde68a;
padding: 14px var(--news-pad-h);
}
.hbav-archive-notice__inner {
max-width: var(--news-max-width);
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #92400e;
}
.hbav-archive-notice__icon { font-size: 18px; flex-shrink: 0; }
/* Archive grid — 3-col with slightly muted cards */
.hbav-archive-grid__grid {
grid-template-columns: repeat(3, 1fr);
}
.hbav-news-card--archive { opacity: 0.92; }
.hbav-news-card--archive:hover { opacity: 1; }
/* ── PAGINATION ───────────────────────────────────────────── */
.hbav-pagination {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 48px;
}
.hbav-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--news-gray-200);
border-radius: 4px;
font-size: 14px;
font-weight: 600;
color: var(--news-blue);
text-decoration: none;
background: #fff;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hbav-pagination .page-numbers:hover,
.hbav-pagination .page-numbers.current {
background: var(--news-blue);
color: #fff;
border-color: var(--news-blue);
}
.hbav-pagination .page-numbers.dots {
border: none;
background: transparent;
color: #888;
}
/* ── NO POSTS ─────────────────────────────────────────────── */
.hbav-no-posts {
text-align: center;
color: #888;
font-size: 16px;
padding: 48px 0;
}
/* ════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
:root { --news-pad-h: 24px; }
.hbav-news-hub-header__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.hbav-cat-tabs { justify-content: flex-start; }
.hbav-news-hero__inner { grid-template-columns: 1fr; gap: 40px; }
.hbav-news-hero__image { height: 360px; }
.hbav-headlines-grid { grid-template-columns: repeat(2, 1fr); }
.hbav-more-stories__grid { grid-template-columns: repeat(2, 1fr); }
.hbav-capitol-strip__inner { grid-template-columns: 1fr; gap: 48px; }
.hbav-archive-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
:root { --news-pad-h: 20px; }
.hbav-news-hub_header__title { font-size: 26px; }
.hbav-news-hero { padding: 50px var(--news-pad-h); }
.hbav-news-hero__title { font-size: 30px; }
.hbav-news-hero__image { height: 280px; }
.hbav-news-headlines { padding: 50px var(--news-pad-h); }
.hbav-headlines-grid { grid-template-columns: 1fr; }
.hbav-section-heading { font-size: 26px; }
.hbav-news-feature-full { padding: 70px var(--news-pad-h); min-height: 360px; }
.hbav-news-feature-full__title { font-size: 30px; }
.hbav-more-stories { padding: 50px var(--news-pad-h); }
.hbav-more-stories__grid { grid-template-columns: 1fr; }
.hbav-capitol-strip { padding: 50px var(--news-pad-h); }
.hbav-newsletter-strip { padding: 60px var(--news-pad-h); }
.hbav-archive-grid__grid { grid-template-columns: 1fr; }
}
/* ============================================================
HBAV SINGLE POST TEMPLATE — single-post.php
Append below news-hub.css additions in style.css
============================================================ */
/* ════════════════════════════════════════════════════════════
SECTION 1: POST HEADER
════════════════════════════════════════════════════════════ */
.hbav-post-header {
background: var(--news-blue);
padding: 56px var(--news-pad-h) 48px;
}
.hbav-post-header__inner {
max-width: 960px;
margin: 0 auto;
}
/* Breadcrumb */
.hbav-post-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.hbav-post-breadcrumb a {
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: color 0.2s;
}
.hbav-post-breadcrumb a:hover { color: var(--news-green); }
.hbav-post-breadcrumb__sep { color: rgba(255,255,255,0.3); }
/* Meta row */
.hbav-post-header__meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.hbav-pill--linked {
text-decoration: none;
transition: opacity 0.2s;
}
.hbav-pill--linked:hover { opacity: 0.85; }
.hbav-post-header__date {
font-size: 13px;
color: rgba(255,255,255,0.65);
font-weight: 500;
}
.hbav-post-header__reading-time {
font-size: 12px;
color: rgba(255,255,255,0.45);
font-weight: 500;
}
.hbav-post-header__reading-time::before {
content: '·';
margin-right: 14px;
color: rgba(255,255,255,0.25);
}
.hbav-post-header__archive-flag {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.6);
padding: 3px 10px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.2);
}
/* Optical alignment: pulls the category pill down to match the text baseline */
.hbav-post-header__meta .hbav-pill {
margin-bottom: -1px !important;
margin-top: 1px !important;
}
/* Title */
.hbav-post-header__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 46px;
font-weight: 700;
color: #fff;
line-height: 1.15;
margin: 0 0 28px;
letter-spacing: -0.5px;
}
/* Green accent rule */
.hbav-post-header__rule {
width: 56px;
height: 4px;
background: var(--news-green);
border-radius: 2px;
}
/* ════════════════════════════════════════════════════════════
SECTION 2: POST BODY
════════════════════════════════════════════════════════════ */
.hbav-post-body {
background: #fff;
padding: 56px var(--news-pad-h) 64px;
}
.hbav-post-body__inner {
max-width: 960px;
margin: 0 auto;
}
/* Archive notice */
.hbav-archive-post-notice {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 36px;
font-size: 14px;
color: #92400e;
line-height: 1.5;
}
.hbav-archive-post-notice__icon { font-size: 18px; flex-shrink: 0; }
.hbav-archive-post-notice p { margin: 0; }
/* Inline featured image */
.hbav-post-body__image {
margin: 0 0 40px;
border-radius: 8px;
overflow: hidden;
}
.hbav-post-body__img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* ── CONTENT TYPOGRAPHY ───────────────────────────────────── */
.hbav-post-body__content {
font-family: 'Rubik', sans-serif;
font-size: 18px;
line-height: 1.85;
color: #2d3748;
}
.hbav-post-body__content p {
margin-bottom: 1.6em;
}
.hbav-post-body__content h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 30px;
font-weight: 700;
color: var(--news-blue);
margin: 1.8em 0 0.6em;
line-height: 1.2;
}
.hbav-post-body__content h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--news-blue);
margin: 1.6em 0 0.5em;
line-height: 1.3;
}
.hbav-post-body__content h4 {
font-size: 17px;
font-weight: 600;
color: var(--news-blue);
margin: 1.4em 0 0.4em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hbav-post-body__content a {
color: var(--news-green);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.hbav-post-body__content a:hover { color: var(--news-blue); }
.hbav-post-body__content ul,
.hbav-post-body__content ol {
padding-left: 1.5em;
margin-bottom: 1.6em;
}
.hbav-post-body__content li { margin-bottom: 0.5em; }
.hbav-post-body__content ul li::marker { color: var(--news-green); }
/* Blockquotes */
.hbav-post-body__content blockquote {
margin: 2em 0;
padding: 1.2em 1.6em;
border-left: 4px solid var(--news-green);
background: #f0f9f4;
border-radius: 0 6px 6px 0;
}
.hbav-post-body__content blockquote p {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-style: italic;
color: var(--news-blue);
line-height: 1.55;
margin: 0;
}
.hbav-post-body__content blockquote cite {
display: block;
margin-top: 12px;
font-size: 13px;
font-style: normal;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Inline images inside content */
.hbav-post-body__content img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 0.5em 0 1.5em;
}
/* HR dividers */
.hbav-post-body__content hr {
border: none;
border-top: 2px solid var(--news-gray-200);
margin: 2.5em 0;
}
/* ── POST FOOTER ──────────────────────────────────────────── */
.hbav-post-footer {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--news-gray-200);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.hbav-post-footer__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.hbav-post-footer__tags-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
margin-right: 4px;
}
.hbav-post-tag {
display: inline-block;
background: var(--news-gray-100);
color: var(--news-gray-700);
border: 1px solid var(--news-gray-200);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.hbav-post-tag:hover {
background: var(--news-blue);
color: #fff;
border-color: var(--news-blue);
}
.hbav-post-footer__back {
font-size: 13px;
font-weight: 600;
color: var(--news-green);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.2s;
white-space: nowrap;
}
.hbav-post-footer__back:hover { color: var(--news-blue); }
/* ════════════════════════════════════════════════════════════
SECTION 3: NEXT READS
════════════════════════════════════════════════════════════ */
.hbav-next-reads {
background: var(--news-gray-50);
padding: 72px var(--news-pad-h);
border-top: 1px solid var(--news-gray-200);
}
.hbav-next-reads__inner {
max-width: var(--news-max-width);
margin: 0 auto;
}
.hbav-next-reads__heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 32px;
font-weight: 700;
color: var(--news-blue);
margin-bottom: 36px;
border-left: 4px solid var(--news-green);
padding-left: 16px;
line-height: 1.2;
}
.hbav-next-reads__heading span {
color: var(--news-green);
}
.hbav-next-reads__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* Next reads card */
.hbav-next-reads__card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--news-radius);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
text-decoration: none;
color: inherit;
transition: transform 0.3s, box-shadow 0.3s;
}
.hbav-next-reads__card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,55,100,0.14);
}
.hbav-next-reads__card:hover .hbav-next-reads__card-title {
color: var(--news-green);
}
.hbav-next-reads__card-img {
height: 190px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.hbav-next-reads__card-body {
padding: 22px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.hbav-next-reads__card-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 19px;
font-weight: 700;
color: var(--news-blue);
line-height: 1.3;
margin: 0;
transition: color 0.25s;
}
.hbav-next-reads__card-excerpt {
font-size: 14px;
color: var(--news-gray-700);
line-height: 1.55;
margin-top: 6px;
flex: 1;
}
/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-post-header__title { font-size: 36px; }
.hbav-next-reads__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.hbav-post-header { padding: 40px var(--news-pad-h) 36px; }
.hbav-post-header__title { font-size: 28px; }
.hbav-post-body { padding: 40px var(--news-pad-h) 48px; }
.hbav-post-body__content { font-size: 16px; }
.hbav-post-body__content blockquote p { font-size: 18px; }
.hbav-post-footer { flex-direction: column; align-items: flex-start; }
.hbav-next-reads { padding: 50px var(--news-pad-h); }
.hbav-next-reads__grid { grid-template-columns: 1fr; }
.hbav-next-reads__heading { font-size: 26px; }
}
/* ═══════════════════════════════════════════════════════
HBAV FLAGSHIP EVENTS (single-tribe_events.php)
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
EVENT HERO
═══════════════════════════════════════════════════════ */
.event-hero {
min-height: 580px;
display: flex;
align-items: flex-end;
color: #fff;
position: relative;
/* Background is injected inline via PHP using the Featured Image */
}
.event-hero-inner {
max-width: 1400px;
margin: 0 auto;
padding: 60px 40px 80px;
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: flex-end;
}
.event-hero-breadcrumb {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.6);
margin-bottom: 20px;
display: flex;
gap: 8px;
align-items: center;
}
.event-hero-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.event-hero-breadcrumb a:hover { color: var(--hbav-green); }
.event-hero-breadcrumb .sep { opacity: 0.4; }
.event-hero-eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--hbav-green);
margin-bottom: 14px;
}
.event-hero-title {
font-family: var(--font-display);
font-size: 54px;
font-weight: 800;
color: #fff;
line-height: 1.12;
margin-bottom: 28px;
max-width: 760px;
}
.event-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 36px;
}
.event-hero-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: rgba(255,255,255,0.85);
font-weight: 500;
}
.event-hero-meta-item .icon { font-size: 18px; }
.event-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn-hero-primary {
background: var(--hbav-green);
color: #fff;
padding: 16px 40px;
border-radius: 4px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-hero-primary:hover { background: #fff; color: var(--hbav-blue); }
.btn-hero-secondary {
border: 2px solid rgba(255,255,255,0.45);
color: #fff;
padding: 14px 28px;
border-radius: 4px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.3s;
}
.btn-hero-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
/* Countdown box — right column of hero grid */
.event-hero-countdown {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
padding: 32px 36px;
text-align: center;
min-width: 260px;
}
.countdown-label-top {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green);
margin-bottom: 20px;
}
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.countdown-cell { text-align: center; }
.countdown-num {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: #fff;
line-height: 1;
display: block;
}
.countdown-unit {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.5);
font-weight: 700;
margin-top: 4px;
}
.countdown-divider {
width: 100%;
height: 1px;
background: rgba(255,255,255,0.15);
margin: 16px 0;
}
.countdown-add-cal {
color: rgba(255,255,255,0.7);
font-size: 12px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: color 0.2s;
}
.countdown-add-cal:hover { color: var(--hbav-green); }
/* ═══════════════════════════════════════════════════════
STICKY EVENT BAR
═══════════════════════════════════════════════════════ */
.sticky-event-bar {
position: sticky;
top: 110px;
z-index: 900;
background: #fff;
border-bottom: 1px solid var(--gray-200);
box-shadow: 0 4px 20px rgba(0,55,100,0.1);
transform: translateY(-8px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.sticky-event-bar.visible {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.sticky-bar-inner {
max-width: 1400px;
margin: 0 auto;
padding: 14px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.sticky-bar-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--hbav-blue);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-bar-meta {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.sticky-bar-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #555;
font-weight: 500;
white-space: nowrap;
}
.sticky-bar-register {
background: var(--hbav-green);
color: #fff;
padding: 11px 28px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
flex-shrink: 0;
}
.sticky-bar-register:hover { background: var(--hbav-blue); }
/* ═══════════════════════════════════════════════════════
EVENT OVERVIEW
═══════════════════════════════════════════════════════ */
.event-overview {
padding: 80px 40px;
background: #fff;
}
.event-overview-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 380px;
gap: 80px;
align-items: start;
}
.event-desc-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green);
margin-bottom: 20px;
}
.event-desc-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--hbav-blue);
line-height: 1.2;
margin-bottom: 24px;
}
.event-desc-body p {
font-size: 16px;
line-height: 1.8;
color: #444;
margin-bottom: 18px;
}
.event-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
}
.event-highlight-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: var(--gray-50);
border-radius: 8px;
border-left: 3px solid var(--hbav-green);
}
.highlight-icon { font-size: 20px; flex-shrink: 0; }
.highlight-text {
font-size: 14px;
font-weight: 600;
color: var(--hbav-blue);
line-height: 1.4;
}
/* Quick facts sidebar card */
.event-sidebar-card {
background: var(--hbav-blue);
color: #fff;
border-radius: 12px;
overflow: hidden;
position: sticky;
top: 180px;
}
.sidebar-card-header {
padding: 28px 32px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-card-eyebrow {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green);
margin-bottom: 8px;
}
.sidebar-card-price {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: #fff;
}
.sidebar-card-price span {
font-size: 14px;
font-weight: 400;
color: rgba(255,255,255,0.6);
}
.sidebar-card-body {
padding: 24px 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.sidebar-fact {
display: flex;
align-items: flex-start;
gap: 14px;
}
.sidebar-fact-icon {
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.sidebar-fact-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.5);
font-weight: 700;
margin-bottom: 3px;
}
.sidebar-fact-value {
font-size: 14px;
color: rgba(255,255,255,0.9);
font-weight: 500;
line-height: 1.4;
}
.sidebar-card-actions {
padding: 0 32px 32px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sidebar-btn-primary {
background: var(--hbav-green);
color: #fff;
padding: 14px 20px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
transition: all 0.2s;
display: block;
}
.sidebar-btn-primary:hover { background: #fff; color: var(--hbav-blue); }
/* ═══════════════════════════════════════════════════════
PHOTO STRIP
═══════════════════════════════════════════════════════ */
.photo-strip {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: 4px;
height: 280px;
overflow: hidden;
}
.photo-strip-item {
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
overflow: hidden;
}
.photo-strip-item:hover { transform: scale(1.04); }
/* ═══════════════════════════════════════════════════════
SCHEDULE / AGENDA
═══════════════════════════════════════════════════════ */
.event-schedule {
padding: 80px 40px;
background: var(--gray-50);
}
.event-schedule-inner {
max-width: 1400px;
margin: 0 auto;
}
.section-eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--hbav-green);
margin-bottom: 12px;
}
.section-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--hbav-blue);
margin-bottom: 40px;
border-left: 4px solid var(--hbav-green);
padding-left: 16px;
line-height: 1.2;
}
.schedule-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--gray-200);
margin-bottom: 48px;
}
.schedule-tab {
padding: 14px 28px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.2s;
user-select: none;
}
.schedule-tab:hover { color: var(--hbav-blue); }
.schedule-tab.active { color: var(--hbav-blue); border-bottom-color: var(--hbav-green); }
.schedule-panel { display: none; }
.schedule-panel.active { display: block; }
.schedule-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.schedule-timeline::before {
content: '';
position: absolute;
left: 112px;
top: 0;
bottom: 0;
width: 2px;
background: var(--gray-200);
}
.session-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0;
padding: 28px 0;
border-bottom: 1px solid var(--gray-200);
position: relative;
}
.session-row:last-child { border-bottom: none; }
.session-time {
font-size: 13px;
font-weight: 700;
color: var(--hbav-blue);
padding-right: 24px;
text-align: right;
line-height: 1.4;
padding-top: 4px;
}
.session-content {
padding-left: 32px;
position: relative;
}
/* Timeline dot */
.session-content::before {
content: '';
position: absolute;
left: -5px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--hbav-green);
border: 3px solid var(--gray-50);
box-shadow: 0 0 0 2px var(--hbav-green);
}
.session-type-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.type-general { background: #e0f2fe; color: #0369a1; }
.type-education { background: #dcfce7; color: var(--education-green); }
.type-social { background: #fef9c3; color: #854d0e; }
.type-meal { background: #fce7f3; color: #9d174d; }
.type-awards { background: #ede9fe; color: #5b21b6; }
.session-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--hbav-blue);
margin-bottom: 8px;
line-height: 1.3;
}
.session-desc {
font-size: 14px;
color: #555;
line-height: 1.7;
margin-bottom: 10px;
}
.session-attire {
font-size: 12px;
color: #888;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
/* ═══════════════════════════════════════════════════════
PHOTO INTERLUDE
═══════════════════════════════════════════════════════ */
.photo-interlude {
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.photo-interlude-item {
height: 340px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.photo-interlude-item::after {
content: attr(data-caption);
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 20px 16px;
background: linear-gradient(to top, rgba(0,30,60,0.75) 0%, transparent 100%);
color: rgba(255,255,255,0.85);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.3s;
}
.photo-interlude-item:hover::after { opacity: 1; }
.photo-interlude-item:hover { transform: scale(1.02); transition: transform 0.4s ease; }
/* ═══════════════════════════════════════════════════════
AWARDS SECTION
═══════════════════════════════════════════════════════ */
.event-awards {
padding: 80px 40px;
background: var(--hbav-blue);
color: #fff;
}
.event-awards-inner {
max-width: 1400px;
margin: 0 auto;
}
.awards-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
margin-bottom: 56px;
}
.awards-eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--hbav-green);
margin-bottom: 14px;
}
.awards-title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 18px;
}
.awards-desc {
font-size: 16px;
color: rgba(255,255,255,0.72);
max-width: 640px;
line-height: 1.75;
}
.awards-cta-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.awards-sponsor-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
font-weight: 700;
text-align: right;
}
.awards-sponsor-name {
font-size: 14px;
color: var(--yellow);
font-weight: 700;
text-align: right;
}
.awards-nominate-btn {
background: var(--yellow);
color: var(--hbav-blue);
padding: 15px 36px;
border-radius: 4px;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: all 0.3s;
white-space: nowrap;
}
.awards-nominate-btn:hover { background: #fff; color: var(--hbav-blue); }
.awards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.award-category-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 24px 20px;
transition: background 0.2s, border-color 0.2s;
}
.award-category-card:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
}
.award-cat-logo {
height: 80px;
width: auto;
object-fit: contain;
margin-bottom: 16px;
display: block;
margin-left: auto;
margin-right: auto;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.award-cat-name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.3;
margin-bottom: 6px;
}
.award-cat-desc {
font-size: 12px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
.awards-view-all {
display: block;
margin: 32px auto 0;
text-align: center;
width: fit-content;
padding: 14px 40px;
background: transparent;
border: 2px solid var(--hbav-green);
color: var(--hbav-green);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 4px;
text-decoration: none;
transition: background 0.25s, color 0.25s;
}
.awards-view-all:hover { background: var(--hbav-green); color: #fff; }
.awards-more-note {
margin-top: 28px;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
font-style: italic;
}
/* ═══════════════════════════════════════════════════════
PRICING / REGISTRATION
═══════════════════════════════════════════════════════ */
.event-pricing {
padding: 80px 40px;
background: #fff;
}
.event-pricing-inner {
max-width: 1400px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.pricing-card {
border: 2px solid var(--gray-200);
border-radius: 12px;
padding: 36px 32px;
display: flex;
flex-direction: column;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { border-color: var(--hbav-green); box-shadow: 0 8px 32px rgba(0,191,99,0.1); }
.pricing-card.featured {
border-color: var(--hbav-green);
background: var(--hbav-blue);
color: #fff;
position: relative;
overflow: visible;
}
.pricing-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--hbav-green);
color: #fff;
padding: 4px 18px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.pricing-tier-name {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green);
margin-bottom: 12px;
}
.pricing-featured .pricing-tier-name { color: var(--hbav-green); }
.pricing-amount {
font-family: var(--font-display);
font-size: 48px;
font-weight: 800;
color: var(--hbav-blue);
line-height: 1;
margin-bottom: 6px;
}
.pricing-card.featured .pricing-amount { color: #fff; }
.pricing-amount-note {
font-size: 13px;
color: #888;
margin-bottom: 24px;
}
.pricing-card.featured .pricing-amount-note { color: rgba(255,255,255,0.55); }
.pricing-divider {
height: 1px;
background: var(--gray-200);
margin-bottom: 24px;
}
.pricing-card.featured .pricing-divider { background: rgba(255,255,255,0.15); }
.pricing-includes {
list-style: none;
margin-bottom: 32px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.pricing-includes li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #444;
line-height: 1.4;
}
.pricing-card.featured .pricing-includes li { color: rgba(255,255,255,0.8); }
.pricing-includes li::before {
content: '✓';
color: var(--hbav-green);
font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
}
.pricing-register-btn {
display: block;
text-align: center;
padding: 14px 20px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.25s;
border: 2px solid var(--hbav-green);
color: var(--hbav-green);
background: transparent;
}
.pricing-register-btn:hover { background: var(--hbav-green); color: #fff; }
.pricing-card.featured .pricing-register-btn {
background: var(--hbav-green);
border-color: var(--hbav-green);
color: #fff;
}
.pricing-card.featured .pricing-register-btn:hover { background: #fff; color: var(--hbav-blue); border-color: #fff; }
.gz-pricing-note {
margin-top: 28px;
text-align: center;
font-size: 12px;
color: #888;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.gz-pricing-note strong { color: var(--hbav-blue); }
/* ═══════════════════════════════════════════════════════
ACCOMMODATIONS
═══════════════════════════════════════════════════════ */
.event-hotel {
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
.hotel-photo {
position: relative;
background-size: cover;
background-position: center;
/* Specific background image handles via PHP or inline styles */
}
.hotel-photo-badge {
position: absolute;
top: 28px;
left: 28px;
background: rgba(255,255,255,0.95);
color: var(--hbav-blue);
padding: 10px 20px;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.hotel-content {
background: var(--gray-50);
padding: 70px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hotel-content .section-eyebrow { margin-bottom: 14px; }
.hotel-name {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--hbav-blue);
margin-bottom: 16px;
line-height: 1.2;
}
.hotel-address {
font-size: 15px;
color: #666;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 6px;
}
.hotel-rate-banner {
background: var(--hbav-blue);
color: #fff;
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.hotel-rate-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.55);
font-weight: 700;
}
.hotel-rate-amount {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: #fff;
}
.hotel-rate-amount span {
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.55);
}
.hotel-booking-note {
font-size: 14px;
color: #555;
line-height: 1.75;
margin-bottom: 28px;
}
.hotel-booking-btn {
background: var(--hbav-green);
color: #fff;
padding: 14px 28px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.2s;
display: inline-block;
align-self: flex-start;
}
.hotel-booking-btn:hover { background: var(--hbav-blue); }
/* ═══════════════════════════════════════════════════════
SPONSORSHIP
═══════════════════════════════════════════════════════ */
.event-sponsors {
padding: 80px 40px;
background: #fff;
border-top: 1px solid var(--gray-200);
}
.event-sponsors-inner {
max-width: 1400px;
margin: 0 auto;
}
.sponsors-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
}
.sponsor-tier {
margin-bottom: 48px;
}
.sponsor-tier-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #999;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.sponsor-tier-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--gray-200);
}
.sponsor-tier-label.presenting { color: var(--yellow); }
.sponsor-tier-label.gold { color: #b8860b; }
.sponsor-cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.sponsor-card {
border: 2px solid var(--gray-200);
border-radius: 10px;
padding: 20px 32px;
display: flex;
align-items: center;
justify-content: center;
min-width: 180px;
min-height: 80px;
transition: border-color 0.2s, box-shadow 0.2s;
text-decoration: none;
}
.sponsor-card:hover { border-color: var(--hbav-green); box-shadow: 0 4px 16px rgba(0,191,99,0.1); }
.sponsor-card-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
color: var(--hbav-blue);
text-align: center;
}
.sponsor-card-sublabel {
font-size: 10px;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
text-align: center;
margin-top: 4px;
}
.sponsor-slot-open {
border: 2px dashed var(--gray-300);
border-radius: 10px;
padding: 20px 32px;
min-width: 180px;
min-height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s;
text-decoration: none;
}
.sponsor-slot-open:hover { border-color: var(--hbav-green); }
.sponsor-slot-open span:first-child {
font-size: 12px;
font-weight: 700;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
}
.sponsor-slot-open span:last-child {
font-size: 11px;
color: var(--hbav-green);
font-weight: 600;
margin-top: 4px;
}
.sponsorship-cta-banner {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 32px 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
margin-top: 8px;
}
.sponsorship-cta-text h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--hbav-blue);
margin-bottom: 6px;
}
.sponsorship-cta-text p {
font-size: 14px;
color: #666;
}
.sponsorship-cta-btn {
background: var(--hbav-blue);
color: #fff;
padding: 13px 28px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
}
.sponsorship-cta-btn:hover { background: var(--hbav-green); }
/* ═══════════════════════════════════════════════════════
RELATED EVENTS (bottom of page)
═══════════════════════════════════════════════════════ */
.related-events {
padding: 80px 40px;
background: var(--gray-50);
}
.related-events-inner { max-width: 1400px; margin: 0 auto; }
.related-events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.related-event-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,55,100,0.07);
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
}
.related-event-card:hover { box-shadow: 0 8px 28px rgba(0,55,100,0.14); transform: translateY(-3px); }
.related-event-img {
height: 160px;
background-size: cover;
background-position: center;
}
.related-event-body { padding: 20px 24px; flex: 1; }
.related-event-date { font-size: 11px; color: var(--hbav-green); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.related-event-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--hbav-blue); line-height: 1.35; margin-bottom: 8px; }
.related-event-card:hover .related-event-title { color: var(--hbav-green); }
.related-event-location { font-size: 13px; color: #777; }
/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
.event-hero-inner { grid-template-columns: 1fr; }
.event-hero-countdown { display: none; }
.event-overview-inner { grid-template-columns: 1fr; }
.event-sidebar-card { position: static; }
.awards-header { grid-template-columns: 1fr; }
.awards-cta-col { align-items: flex-start; }
.awards-grid { grid-template-columns: 1fr 1fr; }
.event-hotel { grid-template-columns: 1fr; }
.hotel-photo { min-height: 300px; }
.pricing-grid { grid-template-columns: 1fr 1fr; }
.photo-strip { grid-template-columns: 1fr 1fr 1fr; height: 200px; }
.photo-strip-item:nth-child(4),
.photo-strip-item:nth-child(5) { display: none; }
.related-events-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.event-hero { min-height: 400px; }
.event-hero-inner { padding: 40px 20px 60px; }
.event-hero-title { font-size: 36px; }
.sticky-bar-meta { display: none; }
.event-overview, .event-schedule, .event-pricing,
.event-sponsors, .related-events, .event-awards { padding: 50px 20px; }
.photo-interlude { grid-template-columns: 1fr; }
.photo-interlude-item { height: 220px; }
.awards-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.schedule-tabs { overflow-x: auto; }
.schedule-timeline::before { left: 0; }
.session-row { grid-template-columns: 1fr; }
.session-time { text-align: left; padding: 0 0 8px; }
.session-content { padding-left: 16px; }
.session-content::before { left: -8px; }
.related-events-grid { grid-template-columns: 1fr; }
.gz-admin-bar { padding: 10px 20px; }
.gz-admin-url { max-width: 160px; }
.gz-admin-note { display: none; }
}
/* ═══════════════════════════════════════════════════════
KADENCE GAP FIX FOR SINGLE EVENTS
═══════════════════════════════════════════════════════ */
body.single-tribe_events .content-area,
body.single-tribe_events .site-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ==========================================================================
NEWS HUB 3-COL GRID OVERRIDES (Force Uniformity)
========================================================================== */
.hbav-more-stories__grid .hbav-news-card:first-child .hbav-news-card__img,
.hbav-more-stories__grid .hbav-news-card:first-child .hbav-news-image {
height: 200px !important;
}
.hbav-more-stories__grid .hbav-news-card:first-child h3.hbav-news-card__title {
font-size: 20px !important;
line-height: 1.25 !important;
}
/* Fix mobile scaling for the uniform grid */
@media (max-width: 1024px) {
.hbav-more-stories__grid .hbav-news-card:first-child h3.hbav-news-card__title {
font-size: 22px !important;
}
}
@media (max-width: 640px) {
.hbav-more-stories__grid .hbav-news-card:first-child h3.hbav-news-card__title {
font-size: 20px !important;
}
}
/* ==========================================================================
TEC SINGLE EVENT - FULL CANVAS OVERRIDE
========================================================================== */
body.single-tribe_events #inner-wrap,
body.single-tribe_events .content-area,
body.single-tribe_events .site-container,
body.single-tribe_events #tribe-events-pg-template {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Fixes the extra whitespace Kadence puts at the bottom of the page */
body.single-tribe_events .site-inner {
padding-bottom: 0 !important;
}
/* ==========================================================================
ADMIN GROWTHZONE TOAST (Floating)
========================================================================== */
.gz-admin-bar {
position: fixed;
bottom: 30px;
right: 30px;
background: #ffffff;
border-left: 6px solid #00bf63; /* HBAV Green */
padding: 24px;
box-shadow: 0 15px 45px rgba(0,55,100,0.2);
border-radius: 8px;
z-index: 999999;
max-width: 360px;
font-family: 'Rubik', sans-serif;
}
.gz-admin-label {
display: inline-block;
background: #00bf63;
color: #fff;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 12px;
}
.gz-admin-note {
display: block;
font-size: 13px;
line-height: 1.5;
color: #333;
margin-bottom: 15px;
}
.gz-admin-url {
display: block;
font-size: 12px;
font-weight: 700;
color: #003764; /* HBAV Blue */
text-decoration: none;
background: #f3f4f6;
padding: 10px;
border-radius: 6px;
word-break: break-all;
}
.gz-admin-url:hover {
background: #e5e7eb;
}
/* ═══════════════════════════════════════════════════════
PART 3 DESIGN REFINEMENTS — Single Event Page
═══════════════════════════════════════════════════════ */
/* 1. Fix sticky bar gap at top */
.sticky-event-bar {
top: 0 !important;
}
/* 2. Sidebar card — outline buttons and contact info */
.event-sidebar-card .sidebar-btn-outline {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
padding: 12px;
margin-top: 8px;
text-decoration: none;
display: flex;
justify-content: center;
border-radius: 6px;
transition: background 0.2s, border-color 0.2s;
}
.event-sidebar-card .sidebar-btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6) !important;
}
.sidebar-contact {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
text-align: center;
padding-left: 32px;
padding-right: 32px;
padding-bottom: 24px;
}
.sidebar-contact a {
color: #ffffff !important;
text-decoration: underline;
}
.sidebar-contact a:hover {
color: var(--hbav-green) !important;
}
/* 3. Sponsors — column layout so logo + sublabel stack cleanly */
.sponsor-card {
display: flex !important;
flex-direction: column !important;
align-items: center;
text-align: center;
gap: 6px;
}
.sponsor-card img {
display: block;
}
.sponsor-card-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: var(--hbav-blue);
}
.sponsor-card-sublabel {
font-size: 11px;
font-weight: 700;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 2px;
}
/* ============================================================
HBAV EVENTS CALENDAR — tribe-events/list.php
Append to /wp-content/themes/hbav-child/style.css
============================================================ */
/* ── FULL WIDTH OVERRIDE ──────────────────────────────────── */
body.hbav-events-calendar-page #inner-wrap,
body.hbav-events-calendar-page .content-area,
body.hbav-events-calendar-page .site-container,
body.hbav-events-calendar-page .site-main,
body.hbav-events-calendar-page #primary,
body.hbav-events-calendar-page article,
body.hbav-events-calendar-page .entry-content {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.hbav-events-calendar-page .site-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── SHARED TOKENS ────────────────────────────────────────── */
.hbav-events-page {
--ec-blue: #003764;
--ec-green: #00bf63;
--ec-yellow: #f0bf2d;
--ec-gray-50: #f9fafb;
--ec-gray-100: #f3f4f6;
--ec-gray-200: #e5e7eb;
--ec-gray-700: #374151;
--ec-max: 1400px;
--ec-pad: 40px;
--ec-radius: 10px;
}
/* ── SHARED BUTTONS ───────────────────────────────────────── */
.ec-btn-primary {
background: var(--ec-green);
color: #fff;
padding: 14px 32px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
display: inline-block;
transition: background 0.3s, color 0.3s;
}
.ec-btn-primary:hover { background: #fff; color: var(--ec-blue); }
.ec-btn-secondary {
border: 2px solid rgba(255,255,255,0.5);
color: #fff;
padding: 12px 28px;
border-radius: 4px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-block;
transition: all 0.3s;
}
.ec-btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.ec-btn-register {
background: var(--ec-green);
color: #fff;
padding: 15px 36px;
border-radius: 4px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
display: inline-block;
transition: all 0.3s;
}
.ec-btn-register:hover { background: #fff; color: var(--ec-blue); }
.ec-btn-learn {
border: 2px solid rgba(255,255,255,0.35);
color: #fff;
padding: 13px 28px;
border-radius: 4px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-block;
transition: all 0.3s;
}
.ec-btn-learn:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.ec-btn-nahb {
background: var(--ec-green);
color: #fff;
padding: 16px 40px;
border-radius: 4px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
display: inline-block;
white-space: nowrap;
transition: all 0.3s;
}
.ec-btn-nahb:hover { background: #fff; color: var(--ec-blue); }
/* ── NO EVENTS MESSAGE ────────────────────────────────────── */
.ec-no-events {
grid-column: 1 / -1;
text-align: center;
color: #888;
font-size: 16px;
padding: 48px 0;
}
/* ════════════════════════════════════════════════════════════
SECTION 1: PAGE HERO
════════════════════════════════════════════════════════════ */
.ec-hero {
min-height: 380px;
display: flex;
align-items: center;
color: #fff;
position: relative;
}
.ec-hero__inner {
max-width: var(--ec-max);
margin: 0 auto;
padding: 80px var(--ec-pad);
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.ec-hero__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.6);
margin-bottom: 24px;
}
.ec-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.ec-hero__breadcrumb a:hover { color: var(--ec-green); }
.ec-hero__title {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: #fff;
line-height: 1.1;
margin-bottom: 20px;
}
.ec-hero__desc {
font-size: 18px;
color: rgba(255,255,255,0.78);
max-width: 640px;
line-height: 1.7;
margin-bottom: 32px;
}
.ec-hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
/* ════════════════════════════════════════════════════════════
SECTION 2: STICKY FILTER BAR
════════════════════════════════════════════════════════════ */
.ec-filter-bar {
background: var(--ec-gray-50);
border-bottom: 1px solid var(--ec-gray-200);
padding: 0 var(--ec-pad);
position: sticky;
top: 0;
z-index: 900;
transition: box-shadow 0.3s;
}
.ec-filter-bar.is-stuck {
box-shadow: 0 4px 20px rgba(0,55,100,0.1);
}
.ec-filter-bar__inner {
max-width: var(--ec-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ec-filter-tabs {
display: flex;
gap: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.ec-filter-tabs::-webkit-scrollbar { display: none; }
.ec-filter-tab {
padding: 22px 18px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
text-decoration: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
transition: all 0.2s;
}
.ec-filter-tab:hover { color: var(--ec-blue); border-bottom-color: var(--ec-gray-200); }
.ec-filter-tab.is-active { color: var(--ec-blue); border-bottom-color: var(--ec-green); }
.ec-filter-search {
display: flex;
gap: 0;
flex-shrink: 0;
}
.ec-filter-search input {
padding: 10px 16px;
border: 1px solid var(--ec-gray-200);
border-right: none;
border-radius: 4px 0 0 4px;
font-size: 13px;
font-family: var(--font-body);
width: 220px;
outline: none;
transition: border-color 0.2s;
}
.ec-filter-search input:focus { border-color: var(--ec-green); }
.ec-filter-search button {
background: var(--ec-blue);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 0 4px 4px 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
font-family: var(--font-body);
transition: background 0.2s;
}
.ec-filter-search button:hover { background: var(--ec-green); }
/* ════════════════════════════════════════════════════════════
SECTION 3: FEATURED EVENT SPOTLIGHT
════════════════════════════════════════════════════════════ */
.ec-featured {
background: var(--ec-blue);
padding: 64px var(--ec-pad);
}
.ec-featured__inner {
max-width: var(--ec-max);
margin: 0 auto;
}
.ec-featured__label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--ec-green);
margin-bottom: 24px;
}
.ec-featured__card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--ec-radius);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ec-featured__img {
min-height: 440px;
background-size: cover;
background-position: center;
position: relative;
}
.ec-featured__badge {
position: absolute;
top: 20px;
left: 20px;
background: var(--ec-green);
color: #fff;
padding: 6px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.ec-featured__body {
background: rgba(255,255,255,0.05);
padding: 52px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ec-featured__eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--ec-green);
margin-bottom: 14px;
}
.ec-featured__title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 24px;
}
.ec-featured__meta {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 28px;
}
.ec-meta-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: rgba(255,255,255,0.85);
}
.ec-meta-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ec-featured__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ════════════════════════════════════════════════════════════
SECTION 4: UPCOMING EVENTS GRID
════════════════════════════════════════════════════════════ */
.ec-grid-section {
padding: 80px var(--ec-pad);
background: var(--ec-gray-50);
}
.ec-grid-inner {
max-width: var(--ec-max);
margin: 0 auto;
}
.ec-grid-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.ec-grid-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--ec-blue);
border-left: 4px solid var(--ec-green);
padding-left: 16px;
line-height: 1.2;
}
.ec-view-toggle {
display: flex;
gap: 4px;
background: var(--ec-gray-200);
border-radius: 6px;
padding: 4px;
}
.ec-view-btn {
padding: 8px 16px;
border: none;
background: transparent;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: #666;
font-family: var(--font-body);
transition: all 0.2s;
}
.ec-view-btn.is-active { background: #fff; color: var(--ec-blue); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
/* Grid view */
.ec-events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
transition: gap 0.3s;
}
/* Event card */
.ec-event-card {
background: #fff;
border-radius: var(--ec-radius);
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,55,100,0.07);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: box-shadow 0.25s, transform 0.25s;
}
.ec-event-card:hover {
box-shadow: 0 10px 36px rgba(0,55,100,0.15);
transform: translateY(-4px);
}
.ec-event-card:hover .ec-event-card__title { color: var(--ec-green); }
.ec-event-card__img {
height: 200px;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
}
/* Category pill on card */
.ec-cat-pill {
position: absolute;
top: 14px;
right: 14px;
padding: 4px 12px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
.cat-conference { background: var(--ec-blue); }
.cat-education { background: #025d31; }
.cat-webinar { background: #6366f1; }
.cat-buildpac { background: #d32b29; }
.cat-networking { background: #0891b2; }
.cat-housing { background: var(--ec-yellow); color: var(--ec-blue) !important; }
/* Date badge */
.ec-date-badge {
position: absolute;
bottom: 14px;
left: 14px;
background: #fff;
border-radius: 8px;
padding: 8px 14px;
text-align: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
min-width: 54px;
}
.ec-date-badge__month {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ec-green);
display: block;
}
.ec-date-badge__day {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--ec-blue);
line-height: 1;
display: block;
}
.ec-event-card__body {
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.ec-event-card__title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
color: var(--ec-blue);
line-height: 1.35;
transition: color 0.2s;
}
.ec-event-card__detail {
font-size: 13px;
color: #666;
display: flex;
align-items: center;
gap: 6px;
}
.ec-event-card__detail .icon { font-size: 14px; }
.ec-event-card__footer {
padding: 14px 26px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--ec-gray-100);
margin-top: auto;
}
.ec-event-cost {
font-size: 13px;
font-weight: 700;
color: var(--ec-blue);
}
.ec-event-cost.is-free { color: var(--ec-green); }
.ec-register-btn {
background: var(--ec-green);
color: #fff;
padding: 7px 18px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.2s;
}
.ec-event-card:hover .ec-register-btn { background: var(--ec-blue); }
/* List view */
.ec-events-grid.is-list {
grid-template-columns: 1fr;
gap: 14px;
}
.ec-events-grid.is-list .ec-event-card {
flex-direction: row;
max-height: 160px;
}
.ec-events-grid.is-list .ec-event-card:hover {
transform: translateX(4px) translateY(0);
}
.ec-events-grid.is-list .ec-event-card__img {
width: 220px;
height: auto;
min-height: 160px;
flex-shrink: 0;
border-radius: var(--ec-radius) 0 0 var(--ec-radius);
}
.ec-events-grid.is-list .ec-date-badge { bottom: auto; top: 12px; }
.ec-events-grid.is-list .ec-event-card__body { padding: 18px 22px; justify-content: center; }
.ec-events-grid.is-list .ec-event-card__footer {
border-top: none;
border-left: 1px solid var(--ec-gray-100);
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 24px;
min-width: 140px;
gap: 10px;
}
/* Load more */
.ec-load-more {
text-align: center;
margin-top: 48px;
}
.ec-load-more__btn {
background: transparent;
color: var(--ec-blue);
border: 2px solid var(--ec-blue);
padding: 14px 44px;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
font-family: var(--font-body);
transition: all 0.3s;
}
.ec-load-more__btn:hover { background: var(--ec-blue); color: #fff; }
.ec-load-more__btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* ════════════════════════════════════════════════════════════
SECTION 5: WEBINARS STRIP
════════════════════════════════════════════════════════════ */
.ec-webinars {
padding: 80px var(--ec-pad);
background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%);
border-top: 1px solid var(--ec-gray-200);
}
.ec-webinars__inner {
max-width: var(--ec-max);
margin: 0 auto;
}
.ec-webinars__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 36px;
}
.ec-webinars__title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
color: var(--ec-blue);
}
.ec-webinars__subtitle {
font-size: 15px;
color: #666;
margin-top: 4px;
}
.ec-webinars__link {
color: var(--ec-green);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.ec-webinars__link:hover { color: var(--ec-blue); }
.ec-webinars__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ec-webinar-card {
background: #fff;
border: 1px solid var(--ec-gray-200);
border-radius: var(--ec-radius);
padding: 26px;
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
.ec-webinar-card:hover {
box-shadow: 0 8px 28px rgba(0,55,100,0.12);
transform: translateY(-2px);
}
.ec-webinar-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.ec-webinar-date-pill {
background: #ede9fe;
color: #5b21b6;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.ec-webinar-icon { font-size: 22px; }
.ec-webinar-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--ec-blue);
line-height: 1.35;
}
.ec-webinar-card:hover .ec-webinar-title { color: #5b21b6; }
.ec-webinar-meta {
font-size: 12px;
color: #666;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.ec-webinar-register {
margin-top: auto;
color: #5b21b6;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.2s;
}
.ec-webinar-card:hover .ec-webinar-register { color: var(--ec-blue); }
/* ════════════════════════════════════════════════════════════
SECTION 6: NAHB STRIP
════════════════════════════════════════════════════════════ */
.ec-nahb-strip {
background: linear-gradient(135deg, var(--ec-blue) 0%, #001f3f 100%);
padding: 80px var(--ec-pad);
color: #fff;
}
.ec-nahb-strip__inner {
max-width: var(--ec-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
}
.ec-nahb-strip__eyebrow {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--ec-green);
margin-bottom: 16px;
}
.ec-nahb-strip__title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
line-height: 1.2;
}
.ec-nahb-strip__body {
font-size: 16px;
color: rgba(255,255,255,0.75);
max-width: 600px;
line-height: 1.7;
}
.ec-nahb-strip__cta { flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════
SECTION 7: SUMMIT SPOTLIGHT
════════════════════════════════════════════════════════════ */
.ec-summit {
padding: 80px var(--ec-pad);
background: var(--ec-gray-50);
}
.ec-summit__inner {
max-width: var(--ec-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 60px rgba(0,55,100,0.14);
}
.ec-summit__img {
min-height: 480px;
background-size: cover;
background-position: center;
position: relative;
}
.ec-summit__img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 60%, var(--ec-gray-50) 100%);
}
.ec-summit__content {
background: var(--ec-gray-50);
padding: 60px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ec-summit__eyebrow {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--ec-green);
margin-bottom: 14px;
}
.ec-summit__title {
font-family: var(--font-display);
font-size: 34px;
font-weight: 800;
color: var(--ec-blue);
line-height: 1.2;
margin-bottom: 20px;
}
.ec-summit__details {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.ec-summit__detail-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--ec-gray-700);
font-weight: 500;
}
.ec-summit__countdown {
display: flex;
gap: 14px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.ec-countdown-unit {
text-align: center;
background: var(--ec-blue);
color: #fff;
border-radius: 8px;
padding: 12px 16px;
min-width: 64px;
}
.ec-countdown-num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
line-height: 1;
display: block;
}
.ec-countdown-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.6);
font-weight: 700;
margin-top: 4px;
display: block;
}
.ec-summit__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.ec-summit .ec-btn-register { }
.ec-summit .ec-btn-learn {
border-color: rgba(0,55,100,0.3);
color: var(--ec-blue);
}
.ec-summit .ec-btn-learn:hover {
border-color: var(--ec-blue);
background: rgba(0,55,100,0.06);
}
/* ════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
.ec-webinars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
:root { --ec-pad: 24px; }
.ec-featured__card { grid-template-columns: 1fr; }
.ec-featured__img { min-height: 320px; }
.ec-featured__body { padding: 36px 40px; }
.ec-events-grid { grid-template-columns: repeat(2, 1fr); }
.ec-nahb-strip__inner { grid-template-columns: 1fr; gap: 32px; }
.ec-summit__inner { grid-template-columns: 1fr; }
.ec-summit__img { min-height: 300px; }
.ec-summit__img-overlay { background: linear-gradient(to bottom, transparent 60%, var(--ec-gray-50) 100%); }
}
@media (max-width: 768px) {
:root { --ec-pad: 20px; }
.ec-hero__title { font-size: 36px; }
.ec-hero__desc { font-size: 16px; }
.ec-filter-bar__inner { flex-direction: column; align-items: flex-start; gap: 0; }
.ec-filter-search { width: 100%; padding: 12px 0; }
.ec-filter-search input { flex: 1; width: auto; }
.ec-events-grid { grid-template-columns: 1fr; }
.ec-webinars__header { flex-direction: column; align-items: flex-start; gap: 12px; }
.ec-webinars__grid { grid-template-columns: 1fr; }
.ec-summit__content { padding: 40px 28px; }
.ec-featured__title { font-size: 26px; }
.ec-nahb-strip__title { font-size: 28px; }
.ec-grid-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.ec-extras {
will-change: max-height, opacity;
}
/* ============================================================
CATEGORY ARCHIVE TEMPLATES
Append to /wp-content/themes/hbav-child/style.css
============================================================ */
/* ── NEWS CATEGORY: active tab fix ───────────────────────────
The .hbav-cat-tab.is-active style already exists from
news-hub.css. This just ensures the back link inherits
the header's light color treatment. */
.hbav-news-hub-header__description a {
color: rgba(255,255,255,0.7);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.hbav-news-hub-header__description a:hover {
color: var(--hbav-green);
}
/* ── EVENTS CATEGORY: header bar ─────────────────────────────
Blue header matching the events page hero aesthetic but
simpler — breadcrumb, title, back button. */
.ec-cat-header {
background: var(--hbav-blue);
padding: 48px var(--ec-pad, 40px);
color: #fff;
}
.ec-cat-header__inner {
max-width: var(--ec-max, 1400px);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
}
.ec-cat-header__left { flex: 1; }
.ec-cat-header__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255,255,255,0.55);
margin-bottom: 16px;
}
.ec-cat-header__breadcrumb a {
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color 0.2s;
}
.ec-cat-header__breadcrumb a:hover { color: var(--hbav-green); }
.ec-cat-header__title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: #fff;
margin: 0 0 10px;
line-height: 1.15;
}
.ec-cat-header__cat-name {
color: var(--hbav-green);
}
.ec-cat-header__description {
font-size: 15px;
color: rgba(255,255,255,0.7);
margin: 0;
}
.ec-cat-header__right { flex-shrink: 0; }
.ec-cat-header__back {
display: inline-block;
color: rgba(255,255,255,0.7);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.3);
padding: 10px 20px;
border-radius: 4px;
transition: all 0.2s;
white-space: nowrap;
}
.ec-cat-header__back:hover {
color: #fff;
border-color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.08);
}
/* ── NEWS CATEGORY: H1 green category name ───────────────────
The green span inside the H1 uses an inline style in the PHP
which references --hbav-green. This rule is a fallback. */
.hbav-news-hub-header__title span[style*="hbav-green"] {
color: var(--hbav-green);
}
/* Responsive */
@media (max-width: 768px) {
.ec-cat-header__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.ec-cat-header__title { font-size: 26px; }
}
/* ============================================================
SINGLE EVENT — Mobile & Layout Fixes
Append to /wp-content/themes/hbav-child/style.css
============================================================ */
/* ── REGISTRATION NOTE — 2-row stacked layout ────────────────
Replaces the old flex row that split emoji/bold/text
into three separate columns on mobile. */
.gz-pricing-note {
margin-top: 28px;
text-align: center;
font-size: 12px;
color: #888;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.gz-pricing-note__row1 {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
}
.gz-pricing-note__icon { font-size: 14px; flex-shrink: 0; }
.gz-pricing-note__row1 strong { color: var(--hbav-blue); }
.gz-pricing-note__row2 {
color: #aaa;
font-size: 11px;
max-width: 420px;
line-height: 1.6;
}
/* ── HOTEL RATE BANNER — prevent "per | night" wrapping ──────
Adds white-space: nowrap to the "per night" text and
makes the banner stack vertically on narrow screens. */
.hotel-rate-banner {
background: var(--hbav-blue);
color: #fff;
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.hotel-rate-banner__left { flex-shrink: 0; }
.hotel-rate-per-night {
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.55);
white-space: nowrap;
}
.hotel-rate-banner__right {
font-size: 12px;
color: rgba(255,255,255,0.55);
max-width: 180px;
line-height: 1.5;
text-align: right;
}
/* ── SPONSOR CARDS — consistent sizing, name-only fallback ───
When only a text name is shown (no logo), cap the card
width so long names don't blow out the layout. */
.sponsor-card {
min-width: 140px;
max-width: 220px;
flex: 0 1 auto;
}
.sponsor-card-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--hbav-blue);
text-align: center;
line-height: 1.3;
word-break: break-word;
hyphens: auto;
}
/* ── MOBILE OVERRIDES ────────────────────────────────────────
All single-event mobile improvements in one place. */
@media (max-width: 768px) {
/* Hotel rate banner — stack vertically */
.hotel-rate-banner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.hotel-rate-banner__right {
text-align: left;
max-width: 100%;
font-size: 11px;
}
/* Accommodations — single column */
.event-hotel {
grid-template-columns: 1fr;
min-height: auto;
}
.hotel-photo {
min-height: 260px;
}
.hotel-content {
padding: 40px 24px;
}
.hotel-name { font-size: 24px; }
/* Sponsor cards — smaller, wrap cleanly */
.sponsor-cards {
gap: 12px;
}
.sponsor-card {
min-width: 120px;
max-width: 160px;
padding: 16px 20px;
min-height: 64px;
}
.sponsor-card img {
max-height: 36px !important;
}
.sponsor-card-name { font-size: 12px; }
}
/* ==========================================================================
PAGE HERO BLOCK — acf/hbav-page-hero
Mirrors the same specificity pattern as .hbav-hero-content in the slider:
all text colour, font, and layout properties declared directly on element
selectors to beat Kadence's base heading/paragraph styles.
========================================================================== */
/* ── SECTION SHELL ───────────────────────────────────────────────────────── */
.page-hero {
position: relative;
overflow: hidden;
padding: 155px var(--content-gutter) 125px;
display: flex;
align-items: center;
min-height: 620px;
background: var(--hbav-blue); /* fallback if no bg image or gradient */
}
/* ── BACKGROUND LAYERS ───────────────────────────────────────────────────── */
/* Photo layer — low opacity, behind gradient */
.ph-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
opacity: 0.2;
}
/* Gradient overlay */
.ph-gradient {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
135deg,
var(--ph-grad-start, rgba(0,55,100,0.93)) 0%,
var(--ph-grad-end, rgba(0,37,64,0.97)) 65%
);
}
/* Decorative diagonal accent */
.ph-diagonal-accent {
position: absolute;
top: 0; right: 0;
width: 40%; height: 100%;
z-index: 2;
background: linear-gradient(to left, rgba(255,255,255,0.03), transparent);
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
/* ── INNER WRAPPER ───────────────────────────────────────────────────────── */
/* Default: panel mode — text left, stats right */
.ph-inner {
max-width: var(--content-max);
width: 100%;
margin: 0 auto;
position: relative;
z-index: 3; /* above all background layers */
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
}
/* ── BREADCRUMB ──────────────────────────────────────────────────────────── */
.page-hero .breadcrumb {
font-size: 12px;
font-weight: 600;
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 24px;
display: flex;
gap: 8px;
align-items: center;
color: rgba(255,255,255,0.5);
}
.page-hero .breadcrumb a {
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color var(--ease);
}
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb span { color: rgba(255,255,255,0.3); }
.page-hero .breadcrumb .current { color: rgba(255,255,255,0.5); }
/* ── H1 — explicit colour + font to beat Kadence heading styles ──────────── */
.page-hero h1 {
font-family: var(--font-display);
font-size: 60px;
font-weight: 800;
color: var(--white); /* explicit — Kadence sets headings to dark */
line-height: 1.05;
margin-bottom: 24px;
margin-top: 0;
}
.page-hero h1 span {
color: var(--ph-accent-color, var(--hbav-green));
display: block; /* accent words on their own line */
}
/* ── SUBHEADLINE — explicit colour to beat Kadence paragraph styles ──────── */
.ph-left > p,
.ph-text-col p {
font-family: var(--font-body);
font-size: 19px;
color: rgba(255,255,255,0.78); /* explicit — Kadence sets p to dark */
line-height: 1.7;
margin-bottom: 40px;
max-width: 560px;
}
/* ── LOGO ────────────────────────────────────────────────────────────────── */
.ph-logo {
height: auto;
max-height: 92px;
max-width: 260px;
width: auto;
display: block;
margin: 0 0 32px;
object-fit: contain;
}
/* ── LEFT COLUMN ─────────────────────────────────────────────────────────── */
.ph-left {
display: flex;
flex-direction: column;
}
/* ── CTA ROWS ────────────────────────────────────────────────────────────── */
.ph-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.ph-actions-centered {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ── RIGHT PANEL — frosted glass ─────────────────────────────────────────── */
.ph-right {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
padding: 44px 40px;
backdrop-filter: blur(6px);
}
.ph-panel-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--ph-accent-color, var(--hbav-green));
margin-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 14px;
}
.ph-panel-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.ph-stat-num {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: var(--white);
line-height: 1;
margin-bottom: 6px;
}
.ph-stat-num em {
color: var(--ph-accent-color, var(--hbav-green));
font-style: normal;
font-size: 22px;
vertical-align: super;
}
.ph-stat-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 1.5px;
line-height: 1.5;
}
.ph-panel-caption {
font-family: var(--font-body);
font-size: 15px;
color: rgba(255,255,255,0.62);
line-height: 1.7;
margin-bottom: 28px;
}
.ph-panel-btn {
width: 100%;
border: none;
border-radius: 4px;
padding: 17px 24px;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
cursor: pointer;
transition: all var(--ease);
background: var(--ph-btn-bg, var(--hbav-green));
color: var(--ph-btn-color, var(--white));
display: block;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
}
.ph-panel-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.ph-panel-btn-outline {
width: 100%;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 4px;
padding: 14px 24px;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
cursor: pointer;
transition: all var(--ease);
background: transparent;
color: var(--white);
display: block;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
}
.ph-panel-btn-outline:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
.ph-panel-note {
font-family: var(--font-body);
font-size: 11px;
color: rgba(255,255,255,0.38);
text-align: center;
margin: 0;
}
/* ── CENTERED MODE ───────────────────────────────────────────────────────── */
.ph-inner.ph-centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 900px;
}
.ph-inner.ph-centered .breadcrumb { justify-content: center; }
.ph-inner.ph-centered .ph-left { align-items: center; }
.ph-inner.ph-centered .ph-left > p {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.ph-inner.ph-centered .ph-actions { justify-content: center; }
/* ── LOGO-SPLIT MODE ─────────────────────────────────────────────────────── */
.ph-inner.ph-logo-split {
display: flex;
flex-direction: column;
gap: 0;
}
.ph-logo-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 44px;
}
.ph-logo-col {
display: flex;
justify-content: center;
align-items: center;
}
.ph-logo-col img {
width: 100%;
max-width: 380px;
height: auto;
max-height: none;
object-fit: contain;
}
.ph-text-col { display: flex; flex-direction: column; }
.ph-text-col h1 { margin-bottom: 20px; }
.ph-inner.ph-logo-split > .breadcrumb { margin-bottom: 44px; }
/* ── HERO BUTTON VARIANTS ────────────────────────────────────────────────── */
/* Larger versions used specifically in the hero — not the global btn-primary */
.btn-yellow-lg {
background: var(--yellow);
color: var(--hbav-blue);
padding: 20px 48px;
text-decoration: none;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
border-radius: 4px;
transition: all var(--ease);
display: inline-block;
border: none;
cursor: pointer;
}
.btn-yellow-lg:hover {
background: var(--white);
color: var(--hbav-blue);
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(240,191,45,0.35);
}
.btn-outline-white-lg {
background: transparent;
color: var(--white);
padding: 20px 48px;
text-decoration: none;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
border: 2px solid rgba(255,255,255,0.35);
border-radius: 4px;
transition: all var(--ease);
display: inline-block;
}
.btn-outline-white-lg:hover {
border-color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.08);
}
/* Zero gap between page hero and stats bar */
.wp-block-acf-hbav-page-hero + .wp-block-acf-hbav-stats-bar { margin-top: 0 !important; }
/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.ph-inner { grid-template-columns: 1fr; }
.ph-right { display: none; }
.ph-logo-row { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
.page-hero { padding: 100px 24px 80px; min-height: auto; }
.page-hero h1 { font-size: 40px; }
.ph-actions,
.ph-actions-centered { flex-direction: column; align-items: center; }
.btn-yellow-lg,
.btn-outline-white-lg { padding: 16px 32px; font-size: 13px; width: 100%; text-align: center; }
}
/* ==========================================================================
PAGE HERO — ADDENDUM
Append immediately after the existing page hero block (after line 5579).
These rules complete what the existing block was missing.
========================================================================== */
/* ph-text-col p: in logo-split the subheadline sits inside ph-text-col,
not ph-left, so it needs its own explicit rules to beat Kadence.
max-width: none overrides the 560px cap that applies in panel mode. */
.ph-text-col p {
font-family: var(--font-body);
font-size: 19px;
color: rgba(255,255,255,0.78);
line-height: 1.7;
margin-bottom: 0; /* CTAs sit outside ph-text-col in logo-split */
max-width: none; /* full width of the text column */
}
/* ph-stat-item: wrapper div the PHP repeater outputs around each stat pair.
Needed so the 2×2 grid children align correctly inside ph-panel-stats. */
.ph-stat-item {
display: flex;
flex-direction: column;
}
/* ==========================================================================
SHARED SECTION UTILITIES
Used across Education Foundation blocks and any future interior pages.
========================================================================== */
.hbav-section-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
display: inline-block;
margin-bottom: 16px;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
/* colour set inline via ACF — no hardcoded default here so it
works for blue pages, green pages, and anything future */
}
.hbav-section-title {
font-family: var(--font-display);
font-size: 46px;
font-weight: 700;
color: var(--hbav-blue);
line-height: 1.1;
margin-bottom: 20px;
margin-top: 0;
}
.hbav-section-lead {
font-size: 18px;
color: var(--gray-700);
line-height: 1.7;
max-width: 700px;
margin-top: 0;
}
@media (max-width: 768px) {
.hbav-section-title { font-size: 32px; }
.hbav-section-lead { font-size: 16px; }
}
/* ==========================================================================
PHOTO + TEXT SPLIT BLOCK — acf/hbav-photo-text-split
Explicit colours on every element to beat Kadence's heading/paragraph rules.
========================================================================== */
.hbav-pts-section {
padding: 110px var(--content-gutter);
/* background-color set inline via ACF field */
}
.hbav-pts-content {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 90px;
align-items: center;
}
/* ── PHOTO COLUMN ─────────────────────────────────────────────────────────── */
.hbav-pts-photo {
height: 520px;
border-radius: 10px;
overflow: hidden;
background-size: cover;
background-position: center;
box-shadow: 0 24px 64px rgba(0,0,0,0.14);
position: relative;
}
/* Gradient overlay — height and colour set inline via ACF */
.hbav-pts-overlay {
position: absolute;
inset: 0;
border-radius: 10px;
/* background gradient set inline */
}
/* Photo caption — explicit white so Kadence paragraph colour can't win */
.hbav-pts-caption {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 2;
color: #ffffff; /* explicit — Kadence sets p to dark */
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0;
line-height: 1.4;
}
/* ── TEXT COLUMN ──────────────────────────────────────────────────────────── */
.hbav-pts-text {
display: flex;
flex-direction: column;
}
.hbav-pts-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
display: inline-block;
margin-bottom: 16px;
border-bottom: none;
padding-bottom: 0;
/* colour: set inline */
}
/* h2 — explicit colour + font to beat Kadence heading styles */
.hbav-pts-text h2 {
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.15;
margin-bottom: 28px;
margin-top: 0;
}
/* Body paragraphs — explicit colour to beat Kadence paragraph styles */
.hbav-pts-text p {
font-family: var(--font-body);
font-size: 17px;
color: var(--gray-700); /* explicit */
line-height: 1.85;
margin-bottom: 22px;
margin-top: 0;
}
.hbav-pts-text p:last-of-type { margin-bottom: 0; }
/* ── CALLOUT BLOCK ────────────────────────────────────────────────────────── */
.hbav-pts-callout {
background: var(--gray-50);
border-left: 4px solid; /* colour set inline via ACF */
padding: 22px 28px;
border-radius: 0 6px 6px 0;
margin-top: 36px;
}
/* Callout paragraphs — explicit override; Kadence will try to inherit */
.hbav-pts-callout p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0;
}
/* Links inside callout — colour matches the page accent (editor sets via inline) */
.hbav-pts-callout a {
font-weight: 700;
text-decoration: none;
transition: text-decoration var(--ease);
}
.hbav-pts-callout a:hover { text-decoration: underline; }
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-pts-section { padding: 70px var(--content-gutter); }
.hbav-pts-content { grid-template-columns: 1fr; gap: 50px; }
.hbav-pts-photo { height: 400px; }
}
@media (max-width: 768px) {
.hbav-pts-section { padding: 60px var(--content-gutter); }
.hbav-pts-photo { height: 300px; border-radius: 8px; }
.hbav-pts-text h2 { font-size: 30px; }
.hbav-pts-text p { font-size: 16px; }
}
/* ==========================================================================
PAGE SUB-NAV BLOCK — acf/hbav-page-subnav
Fixed to top of viewport once visible. Fades in after hero scrolls out.
White background, accent-coloured active indicator on bottom border.
All accent colours driven by --subnav-accent set inline from ACF.
========================================================================== */
.hbav-subnav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900; /* below main header (1000), above page content */
width: 100%;
background: var(--white);
border-bottom: 3px solid var(--gray-200);
box-shadow: 0 2px 12px rgba(0,55,100,0.08);
/* Hidden until .is-visible is added by JS */
opacity: 0;
pointer-events: none;
transform: translateY(-100%); /* starts fully above viewport */
transition: opacity 0.35s ease, transform 0.35s ease;
}
.hbav-subnav.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0); /* slides down into view */
}
/* Inner wrapper — matches site max-width and gutter */
.hbav-subnav-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-gutter);
}
/* Link list */
.hbav-subnav-list {
display: flex;
gap: 0;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hbav-subnav-list::-webkit-scrollbar { display: none; }
.hbav-subnav-item {
flex-shrink: 0;
}
/* Individual links — explicit font/colour to beat Kadence anchor styles */
.hbav-subnav-link {
display: block;
padding: 18px 20px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gray-700);
text-decoration: none;
white-space: nowrap;
transition: color var(--ease);
border-bottom: 3px solid transparent;
margin-bottom: -3px; /* overlaps the nav's border-bottom */
}
.hbav-subnav-link:hover {
color: var(--subnav-accent, var(--hbav-blue));
}
.hbav-subnav-link.is-active {
color: var(--subnav-accent, var(--hbav-blue));
border-bottom-color: var(--subnav-accent, var(--hbav-blue));
font-weight: 700;
}
/* ── BODY OFFSET ──────────────────────────────────────────────────────────────
When the subnav is visible, the page needs top padding equal to the nav's
height so fixed-positioned nav doesn't overlap the section below the hero.
JS adds/removes this class on in sync with .is-visible on the nav.
~55px covers the nav at desktop; the CSS var lets JS override if needed. */
body.subnav-visible {
padding-top: var(--subnav-height, 55px);
transition: padding-top 0.35s ease;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.hbav-subnav-link {
padding: 14px 14px;
font-size: 11px;
letter-spacing: 0.5px;
}
body.subnav-visible {
--subnav-height: 47px;
}
}
/* ==========================================================================
PERSON MESSAGE BLOCK — acf/hbav-person-message
Message/quote left column, byline card right column.
Explicit colours everywhere to beat Kadence heading/paragraph rules.
========================================================================== */
.hbav-pm-section {
padding: 100px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-pm-inner {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 280px;
gap: 80px;
align-items: center;
}
/* ── MESSAGE COLUMN ───────────────────────────────────────────────────────── */
.hbav-pm-message-col {
display: flex;
flex-direction: column;
}
/* Eyebrow — colour set inline via ACF */
.hbav-pm-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
/* colour: set inline */
}
/* Quote — explicit colour + font; Kadence blockquote styles are aggressive */
.hbav-pm-quote {
font-family: var(--font-display);
font-size: 26px;
font-style: italic;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
line-height: 1.55;
margin: 0 0 36px 0;
padding: 0;
border: none; /* reset Kadence blockquote border */
}
/* Paragraph inside the wysiwyg quote field */
.hbav-pm-quote p {
font-family: var(--font-display);
font-size: 26px;
font-style: italic;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
line-height: 1.55;
margin: 0 0 16px;
}
.hbav-pm-quote p:last-child { margin-bottom: 0; }
/* Attribution row: coloured rule + name + title */
.hbav-pm-attribution {
display: flex;
align-items: center;
gap: 20px;
}
.hbav-pm-attribution-rule {
display: block;
width: 40px;
height: 3px;
border-radius: 2px;
flex-shrink: 0;
/* background set inline via ACF accent colour */
}
.hbav-pm-attribution-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.hbav-pm-attribution-text strong {
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
}
.hbav-pm-attribution-text span {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--gray-700); /* explicit */
text-transform: uppercase;
letter-spacing: 0.8px;
}
/* ── BYLINE CARD COLUMN ───────────────────────────────────────────────────── */
.hbav-pm-card-col {
display: flex;
justify-content: center;
}
/* ==========================================================================
BYLINE CARD — shared component
Used in: person-message block, standalone byline inserts.
180px wide portrait card, photo with name/title overlay.
Staff cards: .has-modal class, clickable, opens global modal.
========================================================================== */
.byline-card {
width: 220px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,55,100,0.12);
position: relative;
flex-shrink: 0;
background: var(--gray-200); /* fallback if no photo */
transition: box-shadow var(--ease), transform var(--ease);
}
.byline-card.has-modal {
cursor: pointer;
}
.byline-card.has-modal:hover {
box-shadow: 0 8px 28px rgba(0,55,100,0.20);
transform: translateY(-3px);
}
/* Photo — 3:4 aspect ratio */
.byline-card__photo {
width: 100%;
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center top;
display: block;
}
/* Initials fallback */
.byline-card__photo--initials {
width: 100%;
aspect-ratio: 3 / 4;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--hbav-blue) 0%, #001f3f 100%);
font-family: var(--font-display);
font-size: 48px;
font-weight: 800;
color: rgba(255,255,255,0.4); /* explicit */
}
/* Name + title overlay — gradient scrim at bottom */
.byline-card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,30,60,0.88));
padding: 40px 16px 16px;
}
.byline-card__name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: #ffffff; /* explicit */
line-height: 1.2;
margin-bottom: 3px;
}
.byline-card__title {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
color: var(--hbav-green); /* explicit */
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}
/* "View Profile ↗" hint — fades in on hover for staff cards */
.byline-card__modal-hint {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0,55,100,0.75);
color: #ffffff; /* explicit */
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 10px;
border-radius: 3px;
opacity: 0;
transition: opacity var(--ease);
pointer-events: none;
}
.byline-card.has-modal:hover .byline-card__modal-hint {
opacity: 1;
}
/* ==========================================================================
GLOBAL PERSON MODAL SHELL — template-parts/person-modal.php
Single instance at bottom of footer.php. JS injects
payload from the clicked card — zero HTTP requests per open.
========================================================================== */
.person-modal-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,20,40,0.72);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.person-modal-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.person-modal {
background: #ffffff;
border-radius: 12px;
max-width: 860px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
transform: translateY(24px);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 32px 80px rgba(0,0,0,0.25);
}
.person-modal-overlay.is-open .person-modal {
transform: translateY(0);
}
/* Close button */
.person-modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gray-100);
border: none;
cursor: pointer;
font-size: 18px;
font-family: var(--font-body);
color: var(--gray-700);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ease), color var(--ease);
z-index: 2;
}
.person-modal__close:hover { background: var(--hbav-blue); color: #ffffff; }
/* Photo + body grid */
.person-modal__inner {
display: grid;
grid-template-columns: 280px 1fr;
}
/* Photo panel */
.person-modal__photo {
min-height: 360px;
background-size: cover;
background-position: center top;
background-color: var(--gray-200);
border-radius: 12px 0 0 12px;
}
/* Initials fallback in modal */
.person-modal__photo-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: rgba(255,255,255,0.4); /* explicit */
background: linear-gradient(135deg, var(--hbav-blue) 0%, #001f3f 100%);
border-radius: 12px 0 0 12px;
min-height: 360px;
}
/* Body panel */
.person-modal__body {
padding: 48px 44px;
}
/* Eyebrow — e.g. "HBAV Staff" */
.person-modal__eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green); /* explicit */
margin-bottom: 10px;
}
/* Name */
.person-modal__name {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 4px;
}
/* Position/title under name */
.person-modal__position {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hbav-green); /* explicit */
margin-bottom: 20px;
}
/* Bio text */
.person-modal__bio {
font-family: var(--font-body);
font-size: 15px;
color: #555555; /* explicit */
line-height: 1.85;
border-top: 1px solid var(--gray-200);
padding-top: 20px;
margin-bottom: 24px;
}
/* Contact links */
.person-modal__contact {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 28px;
}
.person-modal__contact a {
font-family: var(--font-body);
font-size: 14px;
color: var(--gray-700); /* explicit */
display: flex;
align-items: center;
gap: 8px;
transition: color var(--ease);
text-decoration: none;
}
.person-modal__contact a:hover { color: var(--hbav-green); }
/* Green icon squares before email/phone links */
.person-modal__contact a::before {
content: '';
width: 14px;
height: 14px;
flex-shrink: 0;
background: var(--hbav-green);
border-radius: 2px;
}
.person-modal__contact a.email::before {
clip-path: polygon(0 20%, 50% 60%, 100% 20%, 100% 80%, 0 80%);
}
.person-modal__contact a.phone::before {
clip-path: polygon(20% 0, 80% 0, 70% 50%, 100% 80%, 80% 100%, 50% 85%, 20% 100%, 0 80%, 30% 50%);
}
/* Personality hooks */
.person-modal__hooks {
background: var(--gray-50);
border-radius: 8px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.person-modal__hooks-title {
font-family: var(--font-body);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-green); /* explicit */
margin-bottom: 4px;
}
.person-modal__hook {
display: flex;
gap: 10px;
font-size: 13px;
}
.person-modal__hook-label {
font-family: var(--font-body);
font-weight: 700;
color: var(--hbav-blue); /* explicit */
min-width: 130px;
flex-shrink: 0;
}
.person-modal__hook-value {
font-family: var(--font-body);
color: #666666; /* explicit */
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-pm-section { padding: 70px var(--content-gutter); }
.hbav-pm-inner { gap: 60px; }
}
@media (max-width: 768px) {
.hbav-pm-section { padding: 60px var(--content-gutter); }
.hbav-pm-inner {
grid-template-columns: 1fr;
gap: 40px;
}
/* On mobile: card first, message below */
.hbav-pm-card-col { order: 1; }
.hbav-pm-message-col{ order: 2; }
.byline-card { width: 180px; }
.hbav-pm-quote,
.hbav-pm-quote p { font-size: 20px; }
/* Modal: stack photo above body */
.person-modal__inner {
grid-template-columns: 1fr;
}
.person-modal__photo,
.person-modal__photo-placeholder {
min-height: 280px;
border-radius: 12px 12px 0 0;
}
.person-modal__body { padding: 28px 24px; }
.person-modal__name { font-size: 26px; }
}
/* ==========================================================================
PERSON MESSAGE BLOCK — VIDEO MODE ADDITIONS
Append after the existing person message responsive block (after line 6352).
The existing .hbav-pm-section, .hbav-pm-inner, byline-card, and modal
CSS is unchanged — these rules add only what the new modes need.
========================================================================== */
/* ── VIDEO-BYLINE MODE ────────────────────────────────────────────────────────
.hbav-pm-inner already has grid-template-columns: 1fr 280px and gap: 80px
which works perfectly — video fills the 1fr left column, card takes 280px.
Only the video column itself needs new rules.
─────────────────────────────────────────────────────────────────────────── */
.hbav-pm-video-col {
display: flex;
flex-direction: column;
justify-content: center;
}
/* ── VIDEO FEATURE MODE ───────────────────────────────────────────────────────
Centered single column — override the default 2-col grid.
─────────────────────────────────────────────────────────────────────────── */
.hbav-pm-section--video-feature .hbav-pm-inner {
grid-template-columns: 1fr;
max-width: 960px; /* narrower max for centered video */
}
.hbav-pm-feature-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Feature headline — explicit colour + font to beat Kadence */
.hbav-pm-feat-headline {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.2;
margin-bottom: 32px;
margin-top: 0;
max-width: 700px;
}
/* Feature description — explicit */
.hbav-pm-feat-desc {
font-family: var(--font-body);
font-size: 17px;
color: var(--gray-700); /* explicit */
line-height: 1.8;
max-width: 680px;
margin-top: 28px;
margin-bottom: 0;
}
/* Eyebrow centered variant */
.hbav-pm-eyebrow--centered {
text-align: center;
margin-bottom: 16px;
}
/* ── SHARED: 16:9 VIDEO EMBED WRAPPER ────────────────────────────────────────
Responsive iframe container. Works for YouTube, Vimeo, and any
16:9 embed. The iframe fills 100% of the wrapper width.
─────────────────────────────────────────────────────────────────────────── */
.hbav-pm-video-wrap {
width: 100%;
}
.hbav-pm-video-embed {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 16px 48px rgba(0,0,0,0.16);
background: var(--gray-900); /* letterbox fallback while loading */
}
.hbav-pm-video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
/* Video caption */
.hbav-pm-video-caption {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--gray-700); /* explicit */
opacity: 0.6;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
/* video-byline: stack video above card */
.hbav-pm-section--video-byline .hbav-pm-inner {
grid-template-columns: 1fr;
}
.hbav-pm-section--video-byline .hbav-pm-card-col {
display: flex;
justify-content: center;
}
}
@media (max-width: 768px) {
.hbav-pm-feat-headline { font-size: 26px; }
.hbav-pm-feat-desc { font-size: 15px; }
/* Tighten border radius on small screens */
.hbav-pm-video-embed,
.hbav-pm-video-embed iframe { border-radius: 6px; }
}
/* Mobile sub-nav hide — consolidated here with video additions */
@media (max-width: 768px) {
.hbav-subnav { display: none; }
}
/* ==========================================================================
GRANT RECIPIENTS BLOCK — acf/hbav-grant-recipients
AND
GRANT ARCHIVE PAGE — page-grant-archive.php
Shared card styles used by both. Explicit colours everywhere.
========================================================================== */
/* ── BLOCK: SECTION SHELL ─────────────────────────────────────────────────── */
.hbav-gr-section {
padding: 110px var(--content-gutter);
background: var(--gray-50);
}
.hbav-gr-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── BLOCK: SECTION HEADER ────────────────────────────────────────────────── */
.hbav-gr-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: end;
margin-bottom: 60px;
}
/* Year total — right column */
.hbav-gr-total {
text-align: right;
flex-shrink: 0;
}
.hbav-gr-total-num {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
line-height: 1;
/* colour set inline via ACF accent */
}
.hbav-gr-total-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--gray-700); /* explicit */
opacity: 0.6;
margin-top: 6px;
}
/* ── SHARED: CARDS GRID ───────────────────────────────────────────────────── */
.hbav-gr-grid,
.hbav-ga-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* ── SHARED: GRANT CARD ───────────────────────────────────────────────────── */
.hbav-gr-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
border-top: 4px solid var(--education-green);
transition: transform var(--ease), box-shadow var(--ease);
display: flex;
flex-direction: column;
}
.hbav-gr-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(2,93,49,0.15);
}
/* Card photo */
.hbav-gr-photo {
height: 200px;
background-size: cover;
background-position: center;
width: 100%;
flex-shrink: 0;
}
.hbav-gr-photo--placeholder {
background: linear-gradient(
160deg,
rgba(2,93,49,0.12) 0%,
rgba(2,93,49,0.04) 50%,
var(--gray-100) 100%
);
position: relative;
}
/* Subtle EF monogram so the card doesn't look empty */
.hbav-gr-photo--placeholder::after {
content: 'EF';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: rgba(2,93,49,0.15);
letter-spacing: 2px;
user-select: none;
}
/* Card body */
.hbav-gr-card-body {
padding: 28px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Org label — explicit colour; set inline via ACF accent on block */
.hbav-gr-org {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 4px;
/* colour: set inline for block; uses --education-green on archive page */
color: var(--education-green);
}
/* Location */
.hbav-gr-location {
font-family: var(--font-body);
font-size: 12px;
color: var(--gray-700); /* explicit */
opacity: 0.55;
margin-bottom: 20px;
font-weight: 500;
}
/* Headline h3 — explicit colour + font to beat Kadence */
.hbav-gr-card h3 {
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 14px;
margin-top: 0;
line-height: 1.3;
}
/* Body paragraph — explicit */
.hbav-gr-card p {
font-family: var(--font-body);
font-size: 14px;
color: var(--gray-700); /* explicit */
line-height: 1.75;
flex: 1;
margin: 0;
}
/* Tag badge */
.hbav-gr-tag {
display: inline-block;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 6px 12px;
border-radius: 3px;
margin-top: 22px;
align-self: flex-start;
/* colour + background set inline on block; hardcoded on archive */
color: var(--education-green);
background: rgba(2,93,49,0.08);
}
/* Grant amount — archive only */
.hbav-gr-amount {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--education-green); /* explicit */
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--gray-200);
}
/* ── BLOCK: VIEW ALL FOOTER ───────────────────────────────────────────────── */
.hbav-gr-footer {
text-align: center;
margin-top: 56px;
}
/* ==========================================================================
GRANT ARCHIVE PAGE — page-grant-archive.php
========================================================================== */
/* ── PAGE HEADER ──────────────────────────────────────────────────────────── */
.hbav-ga-header {
background: var(--hbav-blue);
padding: 72px var(--content-gutter);
color: var(--white);
}
.hbav-ga-header__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
}
/* Breadcrumb */
.hbav-ga-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255,255,255,0.55); /* explicit */
margin-bottom: 20px;
}
.hbav-ga-breadcrumb a {
color: rgba(255,255,255,0.55); /* explicit */
text-decoration: none;
transition: color var(--ease);
}
.hbav-ga-breadcrumb a:hover { color: var(--white); }
.hbav-ga-breadcrumb span { color: rgba(255,255,255,0.3); }
/* H1 — explicit to beat Kadence */
.hbav-ga-header h1 {
font-family: var(--font-display);
font-size: 52px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1.05;
margin-bottom: 20px;
margin-top: 0;
}
/* Intro paragraph — explicit */
.hbav-ga-header p {
font-family: var(--font-body);
font-size: 18px;
color: rgba(255,255,255,0.75); /* explicit */
line-height: 1.7;
max-width: 620px;
margin: 0;
}
/* Back link */
.hbav-ga-back {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.7); /* explicit */
text-decoration: none;
border: 1px solid rgba(255,255,255,0.3);
padding: 10px 20px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
transition: all var(--ease);
}
.hbav-ga-back:hover {
color: var(--white);
border-color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.08);
}
/* ── YEAR ACCORDION ───────────────────────────────────────────────────────── */
.hbav-ga-year {
border-bottom: 1px solid var(--gray-200);
}
.hbav-ga-year:first-of-type {
border-top: 1px solid var(--gray-200);
}
/* Toggle button */
.hbav-ga-year__toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px var(--content-gutter);
background: var(--white);
border: none;
cursor: pointer;
text-align: left;
transition: background var(--ease);
max-width: 100%;
}
.hbav-ga-year__toggle:hover { background: var(--gray-50); }
.hbav-ga-year.is-open .hbav-ga-year__toggle {
background: var(--gray-50);
}
.hbav-ga-year__meta {
display: flex;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
}
/* Year number */
.hbav-ga-year__num {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: var(--hbav-blue); /* explicit */
line-height: 1;
}
.hbav-ga-year.is-open .hbav-ga-year__num {
color: var(--education-green);
}
/* Count + total */
.hbav-ga-year__count {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--gray-700); /* explicit */
opacity: 0.7;
}
/* Arrow indicator */
.hbav-ga-year__arrow {
font-size: 24px;
color: var(--gray-400);
transition: transform var(--ease);
flex-shrink: 0;
}
.hbav-ga-year.is-open .hbav-ga-year__arrow {
transform: rotate(180deg);
color: var(--education-green);
}
/* Grid wrap — accordion panel */
.hbav-ga-year__grid-wrap {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
max-height: 5000px; /* large enough for any year's content */
opacity: 1;
}
.hbav-ga-year__grid-wrap.is-collapsed {
max-height: 0;
opacity: 0;
}
.hbav-ga-grid {
padding: 40px var(--content-gutter) 60px;
max-width: var(--content-max);
margin: 0 auto;
}
/* ── EMPTY STATE ──────────────────────────────────────────────────────────── */
.hbav-ga-empty {
padding: 100px var(--content-gutter);
text-align: center;
}
.hbav-ga-empty p {
font-size: 17px;
color: var(--gray-700);
}
/* ── DONATE CTA STRIP ─────────────────────────────────────────────────────── */
.hbav-ga-cta {
background: var(--education-green);
padding: 80px var(--content-gutter);
}
.hbav-ga-cta__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
/* H2 — explicit */
.hbav-ga-cta h2 {
font-family: var(--font-display);
font-size: 36px;
font-weight: 800;
color: var(--white); /* explicit */
margin-bottom: 12px;
margin-top: 0;
line-height: 1.15;
}
/* p — explicit */
.hbav-ga-cta p {
font-family: var(--font-body);
font-size: 17px;
color: rgba(255,255,255,0.78); /* explicit */
line-height: 1.7;
max-width: 560px;
margin: 0;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-gr-section { padding: 70px var(--content-gutter); }
.hbav-gr-header { grid-template-columns: 1fr; gap: 20px; }
.hbav-gr-total { text-align: left; }
.hbav-gr-grid,
.hbav-ga-grid { grid-template-columns: repeat(2, 1fr); }
.hbav-ga-header h1 { font-size: 38px; }
.hbav-ga-cta__inner { flex-direction: column; gap: 32px; align-items: flex-start; }
}
@media (max-width: 768px) {
.hbav-gr-section { padding: 60px var(--content-gutter); }
.hbav-gr-grid,
.hbav-ga-grid { grid-template-columns: 1fr; }
.hbav-gr-header { grid-template-columns: 1fr; }
.hbav-gr-total-num { font-size: 40px; }
.hbav-ga-header__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.hbav-ga-header h1 { font-size: 30px; }
.hbav-ga-year__num { font-size: 26px; }
.hbav-ga-year__toggle { padding: 24px var(--content-gutter); }
.hbav-ga-cta h2 { font-size: 28px; }
}
/* ==========================================================================
SCHOLARSHIP PROGRAMS BLOCK — acf/hbav-scholarships
2-col editorial card grid. Explicit colours throughout.
========================================================================== */
.hbav-sc-section {
padding: 110px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-sc-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.hbav-sc-header {
max-width: 700px;
margin-bottom: 60px;
}
/* h2 — explicit colour + font to beat Kadence */
.hbav-sc-header .hbav-section-title {
color: var(--hbav-blue); /* explicit */
}
/* Lead paragraph — explicit */
.hbav-sc-header .hbav-section-lead {
color: var(--gray-700); /* explicit */
max-width: none;
}
/* ── CARDS GRID ───────────────────────────────────────────────────────────── */
.hbav-sc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
/* ── SCHOLARSHIP CARD ─────────────────────────────────────────────────────── */
.hbav-sc-card {
padding: 52px 48px;
border-radius: 8px;
border: 1px solid var(--gray-200);
border-left: 6px solid; /* colour set inline via ACF accent */
position: relative;
overflow: hidden;
transition: box-shadow var(--ease);
background: var(--white);
}
.hbav-sc-card:hover {
box-shadow: 0 16px 48px rgba(2,93,49,0.10);
}
/* Decorative radial gradient — top-right corner accent, pure CSS */
.hbav-sc-card::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(2,93,49,0.06) 0%, transparent 70%);
pointer-events: none;
}
/* Institution label — explicit colour; set inline via ACF */
.hbav-sc-institution {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
/* colour: set inline */
}
/* Scholarship name h3 — explicit colour + font to beat Kadence */
.hbav-sc-card h3 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.25;
margin-bottom: 22px;
margin-top: 0;
}
/* Description — explicit */
.hbav-sc-card p {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.85;
margin: 0;
}
/* Badge — solid colour, set inline via ACF */
.hbav-sc-badge {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--white); /* explicit */
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 8px 18px;
border-radius: 3px;
margin-top: 28px;
/* background set inline via ACF accent */
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-sc-section { padding: 70px var(--content-gutter); }
}
@media (max-width: 768px) {
.hbav-sc-section { padding: 60px var(--content-gutter); }
.hbav-sc-grid { grid-template-columns: 1fr; }
.hbav-sc-card { padding: 36px 28px; }
.hbav-sc-card h3 { font-size: 22px; }
}
/* ==========================================================================
PHOTO GALLERY BLOCK — acf/hbav-photo-gallery
Responsive CSS grid mosaic. Span classes assigned from image dimensions.
wide = landscape (grid-column: span 2)
tall = portrait (grid-row: span 2)
normal= square-ish (1×1)
========================================================================== */
.hbav-pg-section {
padding: 110px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-pg-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.hbav-pg-header {
text-align: center;
max-width: 640px;
margin: 0 auto 56px;
}
/* h2 — explicit colour + font to beat Kadence */
.hbav-pg-headline {
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.15;
margin-bottom: 16px;
margin-top: 8px;
}
/* Subheading — explicit */
.hbav-pg-subhead {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0;
}
/* ── GALLERY GRID ─────────────────────────────────────────────────────────── */
.hbav-pg-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
gap: 14px;
}
/* ── GALLERY ITEMS ────────────────────────────────────────────────────────── */
.hbav-pg-item {
border-radius: 6px;
overflow: hidden;
background-size: cover;
background-position: center;
background-color: var(--gray-200); /* fallback while loading */
transition: transform 0.35s ease, box-shadow 0.35s ease;
cursor: pointer;
position: relative;
}
.hbav-pg-item:hover {
transform: scale(1.03);
box-shadow: 0 12px 32px rgba(0,0,0,0.22);
z-index: 1;
}
/* Wide — landscape images span 2 columns */
.hbav-pg-item--wide {
grid-column: span 2;
}
/* Tall — portrait images span 2 rows */
.hbav-pg-item--tall {
grid-row: span 2;
}
/* Caption — revealed on hover via data-caption attribute */
.hbav-pg-item[data-caption]::after {
content: attr(data-caption);
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 16px 14px;
background: linear-gradient(to top, rgba(0,30,60,0.75) 0%, transparent 100%);
color: rgba(255,255,255,0.88); /* explicit */
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.4;
opacity: 0;
transition: opacity 0.3s ease;
}
.hbav-pg-item[data-caption]:hover::after {
opacity: 1;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-pg-section { padding: 70px var(--content-gutter); }
/* Drop to 2-col grid — wide still spans 2 (full width), tall spans 2 rows */
.hbav-pg-grid { grid-template-columns: repeat(2, 1fr); }
.hbav-pg-headline { font-size: 30px; }
}
@media (max-width: 640px) {
.hbav-pg-section { padding: 60px var(--content-gutter); }
/* Single column — all span classes become irrelevant, images stack */
.hbav-pg-grid {
grid-template-columns: 1fr;
grid-auto-rows: 240px;
gap: 10px;
}
.hbav-pg-item--wide,
.hbav-pg-item--tall {
grid-column: span 1;
grid-row: span 1;
}
/* Captions always visible on mobile — no hover */
.hbav-pg-item[data-caption]::after { opacity: 1; }
.hbav-pg-headline { font-size: 26px; }
}
/* ==========================================================================
PUBLICATION SPOTLIGHT BLOCK — acf/hbav-publication-spotlight
Single mode: cover left (50/50), content right.
Double mode: two equal publication cards side by side.
Explicit colours everywhere to beat Kadence.
========================================================================== */
.hbav-pub-section {
padding: 100px var(--content-gutter);
/* background-color set inline via ACF */
}
/* ── SINGLE MODE LAYOUT ───────────────────────────────────────────────────── */
.hbav-pub-section--single .hbav-pub-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 340px 1fr;
gap: 80px;
align-items: center;
}
/* ── DOUBLE MODE LAYOUT ───────────────────────────────────────────────────── */
.hbav-pub-section--double .hbav-pub-inner {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.hbav-pub-double-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 36px;
align-items: start;
background: var(--white);
border-radius: 10px;
padding: 40px;
box-shadow: 0 4px 16px rgba(0,55,100,0.08);
}
/* ── COVER IMAGE ──────────────────────────────────────────────────────────── */
.hbav-pub-cover-wrap {
display: flex;
justify-content: center;
}
/* Actual cover image */
.hbav-pub-cover-img {
width: 100%;
max-width: 280px;
height: auto;
border-radius: 8px;
display: block;
box-shadow: -8px 8px 30px rgba(0,55,100,0.25), 0 4px 20px rgba(0,0,0,0.15);
}
/* Double mode cover — smaller */
.hbav-pub-double-card .hbav-pub-cover-img {
max-width: 200px;
box-shadow: -4px 4px 16px rgba(0,55,100,0.2), 0 2px 10px rgba(0,0,0,0.12);
}
/* ── COVER PLACEHOLDER ────────────────────────────────────────────────────── */
/* Renders when no cover image is uploaded */
.hbav-pub-cover-placeholder {
width: 280px;
height: 370px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: -8px 8px 30px rgba(0,55,100,0.25), 0 4px 20px rgba(0,0,0,0.15);
position: relative;
/* background gradient set inline via accent colour */
}
/* Inner border decoration */
.hbav-pub-cover-placeholder::before {
content: '';
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 4px;
pointer-events: none;
}
.hbav-pub-placeholder-name {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--white); /* explicit */
letter-spacing: -1px;
text-align: center;
padding: 0 16px;
line-height: 1.2;
position: relative;
z-index: 1;
}
.hbav-pub-placeholder-label {
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255,255,255,0.7); /* explicit */
font-weight: 700;
margin-top: 10px;
text-align: center;
position: relative;
z-index: 1;
}
/* Double mode placeholder — smaller */
.hbav-pub-double-card .hbav-pub-cover-placeholder {
width: 200px;
height: 260px;
}
.hbav-pub-double-card .hbav-pub-placeholder-name { font-size: 22px; }
/* ── CONTENT ──────────────────────────────────────────────────────────────── */
.hbav-pub-content {
display: flex;
flex-direction: column;
}
/* ── PUBLICATION EYEBROW — base (hidden by default, shown per context) ────── */
.hbav-pub-eyebrow {
display: none;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 12px;
border-bottom: 2px solid var(--yellow);
padding-bottom: 4px;
width: fit-content;
}
/* EF — education green, yellow underline */
.hbav-pub-section--ef .hbav-pub-eyebrow {
display: inline-block;
color: var(--education-green);
}
/* BuildPAC — red, red underline */
.hbav-pub-section--buildpac .hbav-pub-eyebrow {
display: inline-block;
color: var(--buildpac-red);
border-bottom-color: var(--buildpac-red);
}
/* Insurance — yellow-dark, yellow underline */
.hbav-pub-section--insurance .hbav-pub-eyebrow {
display: inline-block;
color: var(--insurance-yellow-dark);
}
/* HBAV default — blue, no underline */
.hbav-pub-section--hbav .hbav-pub-eyebrow {
display: inline-block;
color: var(--hbav-blue);
border-bottom: none;
padding-bottom: 0;
}
/* Publication name h2 — explicit to beat Kadence */
.hbav-pub-name {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 8px;
margin-top: 0;
}
/* Double mode name — smaller */
.hbav-pub-double-card .hbav-pub-name {
font-size: 26px;
margin-bottom: 6px;
}
/* Issue label — colour set inline */
.hbav-pub-issue-label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
/* colour: set inline */
}
/* Body paragraphs — explicit */
.hbav-pub-content p {
font-family: var(--font-body);
font-size: 17px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin-bottom: 20px;
margin-top: 0;
}
.hbav-pub-content p:last-of-type { margin-bottom: 0; }
/* Double mode body — smaller */
.hbav-pub-double-card .hbav-pub-content p {
font-size: 14px;
margin-bottom: 16px;
}
/* CTA row */
.hbav-pub-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 36px;
}
.hbav-pub-double-card .hbav-pub-actions {
margin-top: 24px;
gap: 12px;
}
/* Tighter button sizing in double mode */
.hbav-pub-double-card .btn-primary,
.hbav-pub-double-card .btn-ghost {
padding: 13px 24px;
font-size: 12px;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-pub-section { padding: 70px var(--content-gutter); }
/* Single: stack cover above content */
.hbav-pub-section--single .hbav-pub-inner {
grid-template-columns: 1fr;
gap: 48px;
max-width: 680px;
}
.hbav-pub-section--single .hbav-pub-cover-wrap {
justify-content: center;
}
.hbav-pub-name { font-size: 34px; }
/* Double: stack the two cards vertically */
.hbav-pub-section--double .hbav-pub-inner {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media (max-width: 768px) {
.hbav-pub-section { padding: 60px var(--content-gutter); }
/* Double card: stack cover above content within each card */
.hbav-pub-double-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 24px;
}
.hbav-pub-double-card .hbav-pub-cover-wrap {
justify-content: center;
}
.hbav-pub-double-card .hbav-pub-cover-placeholder {
width: 160px;
height: 210px;
}
.hbav-pub-name { font-size: 28px; }
.hbav-pub-cover-placeholder { width: 220px; height: 290px; }
.hbav-pub-placeholder-name { font-size: 24px; }
}
/* ==========================================================================
DONATE CTA BLOCK — acf/hbav-donate-cta
Full-bleed gradient section. Explicit colours everywhere.
========================================================================== */
.hbav-dc-section {
padding: 100px var(--content-gutter) 0;
position: relative;
overflow: hidden;
/* background gradient set inline via ACF */
}
/* Decorative orbs */
.hbav-dc-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hbav-dc-orb--tr {
top: -80px; right: -80px;
width: 500px; height: 500px;
background: rgba(255,255,255,0.04);
}
.hbav-dc-orb--bl {
bottom: -120px; left: -60px;
width: 400px; height: 400px;
background: rgba(255,255,255,0.03);
}
/* ── TOP ROW ──────────────────────────────────────────────────────────────── */
.hbav-dc-inner {
max-width: var(--content-max);
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
padding-bottom: 70px;
}
/* ── CONTENT COLUMN ───────────────────────────────────────────────────────── */
.hbav-dc-content-col {
display: flex;
flex-direction: column;
}
/* Section label eyebrow */
.hbav-dc-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
display: inline-block;
margin-bottom: 20px;
border-bottom: 2px solid;
padding-bottom: 4px;
width: fit-content;
/* colour and border-color set inline */
}
/* Headline — explicit white to beat Kadence */
.hbav-dc-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1.05;
margin-bottom: 24px;
margin-top: 0;
}
/* Body */
.hbav-dc-body {
font-family: var(--font-body);
font-size: 18px;
color: rgba(255,255,255,0.78); /* explicit */
line-height: 1.75;
margin-bottom: 0;
margin-top: 0;
}
/* ── FORM COLUMN ──────────────────────────────────────────────────────────── */
.hbav-dc-form-col {
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
padding-top: 8px; /* nudges form down from the very top of the cell */
align-self: center; /* vertically centers within the grid row */
}
/* ── HEIGHT TRANSITION — softens multi-step resize ─────────────────────────
The iframe GiveWP generates resizes as steps change. This targets the
iframe wrapper and applies a transition so the height change is less jarring.
Not perfectly smooth (iframes are inherently abrupt) but takes the edge off.
─────────────────────────────────────────────────────────────────────────── */
.hbav-dc-form-col iframe {
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
width: 100% !important;
border: none !important;
display: block;
}
/* Fallback CTA buttons (shown when no GiveWP shortcode) */
.hbav-dc-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hbav-dc-btn-primary {
display: inline-block;
padding: 18px 40px;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all var(--ease);
}
.hbav-dc-btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-2px);
}
.hbav-dc-btn-outline {
display: inline-block;
padding: 18px 40px;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
border-radius: 4px;
border: 2px solid rgba(255,255,255,0.4);
color: var(--white); /* explicit */
background: transparent;
cursor: pointer;
transition: all var(--ease);
}
.hbav-dc-btn-outline:hover {
border-color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.08);
}
/* ── GIVEWP LEGACY FORM DARK OVERRIDES ──────────────────────────────────────
Scoped tightly to .hbav-dc-form-col so nothing else on the site is affected.
Targets the legacy form template only — form must be set to Legacy in GiveWP.
Uses the attribute selector pattern recommended by GiveWP documentation.
─────────────────────────────────────────────────────────────────────────── */
/* Form wrapper */
.hbav-dc-form-col form[class*="give-form"],
.hbav-dc-form-col .give_wrap {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* All text labels — white */
.hbav-dc-form-col form[class*="give-form"] label,
.hbav-dc-form-col form[class*="give-form"] legend,
.hbav-dc-form-col form[class*="give-form"] .give-donation-amount label,
.hbav-dc-form-col form[class*="give-form"] .give-total-wrap,
.hbav-dc-form-col form[class*="give-form"] .give-payment-mode-label,
.hbav-dc-form-col form[class*="give-form"] .give-personal-info-section-header h3 {
color: rgba(255,255,255,0.88) !important;
font-family: var(--font-body) !important;
}
/* Amount input — semi-transparent white field */
.hbav-dc-form-col form[class*="give-form"] input#give-amount,
.hbav-dc-form-col form[class*="give-form"] input[type="text"],
.hbav-dc-form-col form[class*="give-form"] input[type="email"],
.hbav-dc-form-col form[class*="give-form"] input[type="tel"],
.hbav-dc-form-col form[class*="give-form"] select {
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: var(--white) !important;
border-radius: 4px !important;
font-family: var(--font-body) !important;
}
.hbav-dc-form-col form[class*="give-form"] input::placeholder {
color: rgba(255,255,255,0.45) !important;
}
.hbav-dc-form-col form[class*="give-form"] input:focus,
.hbav-dc-form-col form[class*="give-form"] select:focus {
border-color: rgba(255,255,255,0.6) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(255,255,255,0.15) !important;
}
/* Donation level buttons (if multi-level is enabled) */
.hbav-dc-form-col form[class*="give-form"] ul#give-donation-level-button-wrap li a {
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: var(--white) !important;
font-family: var(--font-body) !important;
transition: all var(--ease) !important;
}
.hbav-dc-form-col form[class*="give-form"] ul#give-donation-level-button-wrap li a:hover,
.hbav-dc-form-col form[class*="give-form"] ul#give-donation-level-button-wrap li a.give-default-level {
background: rgba(255,255,255,0.25) !important;
border-color: rgba(255,255,255,0.5) !important;
}
/* Currency symbol */
.hbav-dc-form-col form[class*="give-form"] .give-currency-symbol {
color: rgba(255,255,255,0.7) !important;
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.2) !important;
}
/* Submit button — use accent yellow */
.hbav-dc-form-col form[class*="give-form"] #give-purchase-button,
.hbav-dc-form-col form[class*="give-form"] input[type="submit"],
.hbav-dc-form-col form[class*="give-form"] button[type="submit"] {
background: var(--yellow) !important;
color: var(--hbav-blue) !important;
border: none !important;
font-family: var(--font-body) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
border-radius: 4px !important;
transition: all var(--ease) !important;
width: 100% !important;
}
.hbav-dc-form-col form[class*="give-form"] #give-purchase-button:hover,
.hbav-dc-form-col form[class*="give-form"] input[type="submit"]:hover {
filter: brightness(1.08) !important;
transform: translateY(-2px) !important;
}
/* Recurring donation toggle / section labels */
.hbav-dc-form-col form[class*="give-form"] .give-recurring-donors-choice label,
.hbav-dc-form-col form[class*="give-form"] .give-recurring-period label {
color: rgba(255,255,255,0.88) !important;
}
/* Dividers / section rules */
.hbav-dc-form-col form[class*="give-form"] hr,
.hbav-dc-form-col form[class*="give-form"] .give-section-break {
border-color: rgba(255,255,255,0.12) !important;
}
/* Error messages */
.hbav-dc-form-col form[class*="give-form"] .give-errors {
background: rgba(255,60,60,0.2) !important;
border-color: rgba(255,100,100,0.4) !important;
color: var(--white) !important;
}
/* ── TIER STRIP ───────────────────────────────────────────────────────────── */
.hbav-dc-strip {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255,255,255,0.12);
padding: 32px var(--content-gutter);
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
/* note: section padding-bottom is 0, strip provides its own bottom space */
padding-bottom: 48px;
}
/* Strip intro line — accent coloured, set inline */
.hbav-dc-strip-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
opacity: 0.85;
text-align: center;
/* colour set inline */
}
/* Tier list — horizontal row */
.hbav-dc-strip-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
}
.hbav-dc-strip-item {
display: flex;
align-items: center;
gap: 8px;
padding: 0 28px;
position: relative;
}
/* Vertical divider between items */
.hbav-dc-strip-item + .hbav-dc-strip-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background: rgba(255,255,255,0.15);
}
.hbav-dc-strip-icon {
font-size: 12px;
flex-shrink: 0;
/* colour set inline */
}
.hbav-dc-strip-name {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--white); /* explicit */
white-space: nowrap;
}
.hbav-dc-strip-amount {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
opacity: 0.9;
/* colour set inline */
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.hbav-dc-inner {
grid-template-columns: 1fr;
gap: 48px;
padding-bottom: 56px;
}
.hbav-dc-headline { font-size: 40px; }
}
@media (max-width: 768px) {
.hbav-dc-section { padding-top: 70px; }
.hbav-dc-headline { font-size: 32px; }
.hbav-dc-body { font-size: 16px; }
/* Strip wraps to two rows on mobile */
.hbav-dc-strip-list { gap: 8px 0; }
.hbav-dc-strip-item { padding: 4px 16px; }
.hbav-dc-strip-name { font-size: 12px; }
.hbav-dc-strip-amount { font-size: 11px; }
}
/* ==========================================================================
HONOR ROLL BLOCK v2 — acf/hbav-honor-roll
Live donor list from GiveWP, grouped by giving tier.
Replaces the previous static tier cards layout entirely.
========================================================================== */
.hbav-hr-section {
padding: 100px var(--content-gutter);
background: var(--white);
}
.hbav-hr-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── HEADER ───────────────────────────────────────────────────────────────── */
.hbav-hr-header {
max-width: 800px;
margin-bottom: 60px;
}
.hbav-hr-header h2 {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 16px;
margin-top: 8px;
}
.hbav-hr-header p {
font-family: var(--font-body);
font-size: 17px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin-bottom: 16px;
margin-top: 0;
}
/* Year indicator — e.g. "2025 Donors" */
.hbav-hr-year {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 4px;
/* colour set inline */
}
/* ── TIERS GRID ───────────────────────────────────────────────────────────── */
/* Flexible columns — number of columns depends on how many tiers have donors */
.hbav-hr-tiers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 32px;
align-items: start;
}
/* ── TIER COLUMN ──────────────────────────────────────────────────────────── */
.hbav-hr-tier {
background: var(--gray-50);
border-radius: 10px;
border: 1px solid var(--gray-200);
overflow: hidden;
}
/* ── TIER HEADER ──────────────────────────────────────────────────────────── */
.hbav-hr-tier__header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--gray-200);
}
/* Badge circle */
.hbav-hr-tier .hbav-hr-badge {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,0.15);
}
.hbav-hr-tier .hbav-hr-badge svg {
width: 18px;
height: 18px;
stroke: var(--white); /* explicit */
}
.hbav-hr-tier__name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
/* ── TIER-SPECIFIC HEADER COLOURS ────────────────────────────────────────── */
.hbav-hr-tier--legacy .hbav-hr-tier__header {
background: #0d1f0d;
border-bottom-color: var(--education-green);
}
.hbav-hr-tier--legacy .hbav-hr-badge { background: var(--education-green); }
.hbav-hr-tier--legacy .hbav-hr-tier__name { color: var(--white); }
.hbav-hr-tier--cornerstone .hbav-hr-tier__header {
background: var(--hbav-blue);
border-bottom-color: rgba(255,255,255,0.15);
}
.hbav-hr-tier--cornerstone .hbav-hr-badge { background: rgba(255,255,255,0.15); }
.hbav-hr-tier--cornerstone .hbav-hr-tier__name { color: var(--white); }
.hbav-hr-tier--gold .hbav-hr-tier__header { background: var(--gray-100); }
.hbav-hr-tier--gold .hbav-hr-badge { background: #d4a017; }
.hbav-hr-tier--gold .hbav-hr-tier__name { color: var(--hbav-blue); }
.hbav-hr-tier--silver .hbav-hr-tier__header { background: var(--gray-100); }
.hbav-hr-tier--silver .hbav-hr-badge { background: #9e9e9e; }
.hbav-hr-tier--silver .hbav-hr-tier__name { color: var(--hbav-blue); }
.hbav-hr-tier--friend .hbav-hr-tier__header { background: var(--gray-100); }
.hbav-hr-tier--friend .hbav-hr-badge { background: var(--hbav-green); }
.hbav-hr-tier--friend .hbav-hr-tier__name { color: var(--hbav-blue); }
/* ── DONOR LIST ───────────────────────────────────────────────────────────── */
.hbav-hr-tier__donors {
list-style: none;
margin: 0;
padding: 12px 0;
}
.hbav-hr-tier__donor {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 8px 24px;
border-bottom: 1px solid var(--gray-100);
transition: background var(--ease);
}
.hbav-hr-tier__donor:last-child { border-bottom: none; }
.hbav-hr-tier__donor:hover {
background: rgba(0,55,100,0.03);
}
/* Donor name — explicit */
.hbav-hr-donor-name {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
line-height: 1.4;
}
/* Donor amount — BuildPAC context only */
.hbav-hr-donor-amount {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--gray-700); /* explicit */
white-space: nowrap;
flex-shrink: 0;
}
/* ── DISCLAIMER ───────────────────────────────────────────────────────────── */
.hbav-hr-note {
margin-top: 32px;
text-align: center;
font-family: var(--font-body);
font-size: 13px;
color: #999999; /* explicit */
font-style: italic;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-hr-section { padding: 70px var(--content-gutter); }
.hbav-hr-tiers { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
}
@media (max-width: 768px) {
.hbav-hr-section { padding: 60px var(--content-gutter); }
.hbav-hr-header h2 { font-size: 34px; }
.hbav-hr-tiers { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
.hbav-hr-tiers { grid-template-columns: 1fr; }
}
/* ==========================================================================
FAQ BLOCK — acf/hbav-faq
========================================================================== */
.hbav-faq-section {
padding: 100px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-faq-content {
/* max-width set inline via ACF field */
margin: 0 auto;
}
/* Headline — explicit */
.hbav-faq-headline {
font-family: var(--font-display);
font-size: 44px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 0;
margin-top: 8px;
}
/* FAQ list */
.hbav-faq-list {
margin-top: 50px;
}
.hbav-faq-item {
border-bottom: 1px solid var(--gray-200);
}
.hbav-faq-item:first-child {
border-top: 1px solid var(--gray-200);
}
/* Question button — explicit resets so Kadence button styles don't bleed */
.hbav-faq-q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 24px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
transition: color var(--ease);
user-select: none;
}
.hbav-faq-item .hbav-faq-q:hover,
.hbav-faq-item .hbav-faq-q:focus,
.hbav-faq-item .hbav-faq-q:focus-visible {
background: none !important;
box-shadow: none !important;
outline: none !important;
color: var(--faq-accent, var(--education-green));
}
.hbav-faq-q.is-open {
color: var(--faq-accent, var(--education-green));
}
.hbav-faq-q-text {
flex: 1;
}
/* Toggle +/× indicator */
.hbav-faq-toggle {
font-size: 24px;
font-weight: 300;
line-height: 1;
flex-shrink: 0;
color: var(--faq-accent, var(--education-green));
transition: transform var(--ease);
font-family: var(--font-body);
}
/* Answer panel */
.hbav-faq-a {
overflow: hidden;
max-height: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hbav-faq-a.is-open {
max-height: 800px;
}
.hbav-faq-a-inner {
padding-bottom: 24px;
}
/* Answer paragraphs — explicit */
.hbav-faq-a-inner p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0 0 12px;
}
.hbav-faq-a-inner p:last-child { margin-bottom: 0; }
/* Answer links */
.hbav-faq-a-inner a {
color: var(--faq-accent, var(--education-green));
font-weight: 600;
text-decoration: none;
}
.hbav-faq-a-inner a:hover { text-decoration: underline; }
@media (max-width: 768px) {
.hbav-faq-section { padding: 60px var(--content-gutter); }
.hbav-faq-headline { font-size: 32px; }
.hbav-faq-q { font-size: 15px; padding: 20px 0; }
}
/* ==========================================================================
BYLINE CARD BLOCK — acf/hbav-byline-card
Inline article attribution block. The .byline-card component CSS is
already defined globally — these rules handle the wrapper, label,
and alignment variants only.
========================================================================== */
.hbav-bc-wrap {
display: flex;
flex-direction: column;
margin: 32px 0;
}
/* ── ALIGNMENT VARIANTS ───────────────────────────────────────────────────── */
.hbav-bc-wrap--left {
align-items: flex-start;
}
.hbav-bc-wrap--center {
align-items: center;
}
/* Right — floats the card to the right of surrounding text */
.hbav-bc-wrap--right {
float: right;
margin: 0 0 24px 36px;
clear: right;
}
/* ── LABEL ────────────────────────────────────────────────────────────────── */
.hbav-bc-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--gray-400); /* explicit */
margin-bottom: 10px;
}
/* ── CLEARFIX for float right variant ────────────────────────────────────── */
.hbav-bc-wrap--right::after {
content: '';
display: table;
clear: both;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Float collapses on mobile — always stacks */
.hbav-bc-wrap--right {
float: none;
margin: 24px 0;
align-items: flex-start;
}
}
/* ==========================================================================
KEYSTONE CTA BANNER BLOCK — acf/hbav-keystone-banner
Thin full-width redirect banner. Blue gradient, green borders.
Headline + body left, CTA button right.
========================================================================== */
.hbav-kb-section {
padding: 36px var(--content-gutter);
/* background gradient and border colours set inline via ACF */
}
.hbav-kb-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
/* ── TEXT BLOCK ───────────────────────────────────────────────────────────── */
.hbav-kb-text {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Headline — explicit white */
.hbav-kb-headline {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--white); /* explicit */
margin: 0;
line-height: 1.2;
}
/* Body — explicit semi-white */
.hbav-kb-body {
font-family: var(--font-body);
font-size: 15px;
color: rgba(255,255,255,0.88); /* explicit */
margin: 0;
line-height: 1.5;
max-width: 680px;
}
/* ── CTA BUTTON ───────────────────────────────────────────────────────────── */
.hbav-kb-btn {
display: inline-block;
background: var(--kb-btn-color, var(--hbav-green));
color: var(--white); /* explicit */
padding: 18px 40px;
text-decoration: none;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.hbav-kb-btn:hover {
background: var(--kb-btn-hover, var(--yellow));
color: var(--hbav-blue); /* explicit */
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(240,191,45,0.3);
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-kb-inner { gap: 28px; }
.hbav-kb-headline { font-size: 22px; }
}
@media (max-width: 768px) {
.hbav-kb-section { padding: 28px var(--content-gutter); }
.hbav-kb-inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.hbav-kb-btn { width: 100%; text-align: center; }
}
/* ==========================================================================
MEMBER BENEFITS GRID BLOCK — acf/hbav-member-benefits
Responsive card grid. 4/3/2-col desktop, 2-col tablet, 1-col mobile.
========================================================================== */
.hbav-mb-section {
padding: 100px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-mb-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.hbav-mb-header {
text-align: center;
max-width: 900px;
margin: 0 auto 60px;
}
.hbav-mb-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 20px;
margin-top: 8px;
}
.hbav-mb-lead {
font-family: var(--font-body);
font-size: 20px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin: 0;
}
/* ── GRID ─────────────────────────────────────────────────────────────────── */
.hbav-mb-grid {
display: grid;
gap: 30px;
}
/* Column variants */
.hbav-mb-section--cols-4 .hbav-mb-grid { grid-template-columns: repeat(4, 1fr); }
.hbav-mb-section--cols-3 .hbav-mb-grid { grid-template-columns: repeat(3, 1fr); }
.hbav-mb-section--cols-2 .hbav-mb-grid { grid-template-columns: repeat(2, 1fr); }
/* ── BENEFIT CARD ─────────────────────────────────────────────────────────── */
.hbav-mb-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform var(--ease), box-shadow var(--ease);
display: flex;
flex-direction: column;
text-decoration: none; /* reset if card is an tag */
color: inherit; /* reset if card is an tag */
}
.hbav-mb-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,55,100,0.15);
}
/* Photo — 200px tall, cover */
.hbav-mb-card__photo {
height: 200px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
/* Body */
.hbav-mb-card__body {
padding: 30px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Card h3 — explicit to beat Kadence */
.hbav-mb-card h3 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 12px;
margin-top: 0;
}
/* Card paragraph — explicit */
.hbav-mb-card p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin: 0;
flex: 1;
}
/* Optional text link at bottom of card */
.hbav-mb-card__link {
display: inline-block;
margin-top: 16px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--hbav-green); /* explicit */
text-transform: uppercase;
letter-spacing: 1px;
transition: color var(--ease);
}
a.hbav-mb-card:hover .hbav-mb-card__link {
color: var(--hbav-blue);
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
/* 4-col drops to 2-col */
.hbav-mb-section--cols-4 .hbav-mb-grid { grid-template-columns: repeat(2, 1fr); }
.hbav-mb-headline { font-size: 40px; }
}
@media (max-width: 1024px) {
.hbav-mb-section { padding: 70px var(--content-gutter); }
/* 3-col drops to 2-col */
.hbav-mb-section--cols-3 .hbav-mb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.hbav-mb-section { padding: 60px var(--content-gutter); }
.hbav-mb-headline { font-size: 32px; }
.hbav-mb-lead { font-size: 17px; }
/* All grids collapse to 1-col on mobile */
.hbav-mb-section--cols-4 .hbav-mb-grid,
.hbav-mb-section--cols-3 .hbav-mb-grid,
.hbav-mb-section--cols-2 .hbav-mb-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
MEMBERSHIP STEPS BLOCK — acf/hbav-membership-steps
Numbered process steps. Large circle numbers, connecting line on desktop.
========================================================================== */
.hbav-ms-section {
padding: 100px var(--content-gutter);
/* background-color set inline via ACF */
}
.hbav-ms-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.hbav-ms-header {
text-align: center;
max-width: 900px;
margin: 0 auto 70px;
}
.hbav-ms-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-bottom: 20px;
margin-top: 8px;
}
.hbav-ms-lead {
font-family: var(--font-body);
font-size: 20px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin: 0;
}
/* ── STEPS ROW ────────────────────────────────────────────────────────────── */
.hbav-ms-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
position: relative;
}
/* Connecting line between step circles — desktop only */
.hbav-ms-steps::before {
content: '';
position: absolute;
top: 40px; /* half of circle height (80px / 2) */
left: calc(50% / 3 + 40px); /* starts after first circle center */
right: calc(50% / 3 + 40px); /* ends before last circle center */
height: 2px;
background: var(--gray-200);
z-index: 0;
}
/* ── INDIVIDUAL STEP ──────────────────────────────────────────────────────── */
.hbav-ms-step {
text-align: center;
position: relative;
z-index: 1;
}
/* Number circle */
.hbav-ms-step__number {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--ms-accent, var(--hbav-green));
color: var(--white); /* explicit */
font-family: var(--font-body);
font-size: 32px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
position: relative;
z-index: 1;
/* White ring to "cut" the connecting line behind each circle */
box-shadow: 0 0 0 6px var(--white);
}
/* Step title — explicit to beat Kadence */
.hbav-ms-step__title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--ms-number, var(--hbav-blue)); /* explicit */
margin-bottom: 14px;
margin-top: 0;
line-height: 1.2;
}
/* Step description — explicit */
.hbav-ms-step__desc {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-ms-section { padding: 70px var(--content-gutter); }
.hbav-ms-headline { font-size: 40px; }
}
@media (max-width: 768px) {
.hbav-ms-section { padding: 60px var(--content-gutter); }
.hbav-ms-headline { font-size: 32px; }
.hbav-ms-lead { font-size: 17px; }
.hbav-ms-steps {
grid-template-columns: 1fr;
gap: 48px;
}
/* Hide connecting line on mobile */
.hbav-ms-steps::before { display: none; }
/* Remove white ring cutout on mobile since there's no line */
.hbav-ms-step__number { box-shadow: none; }
}
/* ==========================================================================
HBA FINDER BLOCK — acf/hbav-hba-finder
County/city dropdown finder + full HBA directory grid.
========================================================================== */
.hbav-hf-section {
background: var(--white);
padding: 100px var(--content-gutter);
}
.hbav-hf-wrap {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── FINDER ───────────────────────────────────────────────────────────────── */
.hbav-hf-finder {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 60px;
margin-bottom: 80px;
}
.hbav-hf-finder__header {
max-width: 720px;
margin-bottom: 40px;
}
.hbav-hf-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-top: 8px;
margin-bottom: 16px;
}
.hbav-hf-lead {
font-family: var(--font-body);
font-size: 18px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin: 0;
}
/* ── SELECT ───────────────────────────────────────────────────────────────── */
.hbav-hf-select-wrap {
margin-bottom: 32px;
}
.hbav-hf-select-label {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--hbav-blue); /* explicit */
margin-bottom: 10px;
}
.hbav-hf-select {
width: 100%;
max-width: 560px;
padding: 16px 20px;
font-family: var(--font-body);
font-size: 16px;
color: var(--hbav-blue); /* explicit */
background: var(--white);
border: 2px solid var(--gray-200);
border-radius: 6px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003764' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
transition: border-color var(--ease), box-shadow var(--ease);
}
.hbav-hf-select:focus {
outline: none;
border-color: var(--hf-accent, var(--hbav-blue));
box-shadow: 0 0 0 3px rgba(0, 55, 100, 0.12);
}
/* ── RESULT CARD ──────────────────────────────────────────────────────────── */
.hbav-hf-result {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hbav-hf-result.is-visible {
max-height: 600px;
}
.hbav-hf-result__card {
display: flex;
gap: 32px;
align-items: flex-start;
background: var(--white);
border: 2px solid var(--hf-accent, var(--hbav-blue));
border-radius: 10px;
padding: 32px;
margin-top: 8px;
}
.hbav-hf-result__logo {
width: 120px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hbav-hf-result__logo img {
max-width: 120px;
max-height: 80px;
width: auto;
height: auto;
object-fit: contain;
}
.hbav-hf-result__body { flex: 1; }
.hbav-hf-result__body h3 {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-top: 0;
margin-bottom: 8px;
}
.hbav-hf-result__body p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin-bottom: 8px;
margin-top: 0;
}
.hbav-hf-result__contact {
font-weight: 600 !important;
color: var(--gray-600) !important;
font-size: 14px !important;
}
.hbav-hf-result__meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 16px 0;
}
.hbav-hf-result__meta-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 14px;
color: var(--gray-700); /* explicit */
text-decoration: none;
transition: color var(--ease);
}
.hbav-hf-result__meta-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
stroke: var(--hf-accent, var(--hbav-blue));
}
.hbav-hf-result__meta-item:hover { color: var(--hf-accent, var(--hbav-blue)); }
.hbav-hf-result__join {
display: inline-block;
margin-top: 8px;
}
/* No-match state */
.hbav-hf-result__none {
padding: 24px;
background: var(--gray-50);
border-radius: 8px;
margin-top: 8px;
}
.hbav-hf-result__none p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
margin: 0 0 16px;
}
/* ── DIRECTORY SECTION ────────────────────────────────────────────────────── */
.hbav-hf-dir-headline {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 40px;
margin-top: 0;
}
.hbav-hf-dir-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* ── DIRECTORY CARD ───────────────────────────────────────────────────────── */
.hbav-hf-dir-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--ease), box-shadow var(--ease);
}
.hbav-hf-dir-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 55, 100, 0.10);
}
/* Logo area */
.hbav-hf-dir-card__logo {
height: 100px;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--gray-100);
background: var(--gray-50);
}
.hbav-hf-dir-card__logo img {
max-width: 160px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
}
/* Logo placeholder when no image */
.hbav-hf-dir-card__logo--placeholder {
background: var(--hbav-blue);
}
.hbav-hf-dir-card__logo--placeholder span {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--white); /* explicit */
text-align: center;
line-height: 1.3;
}
/* Card body */
.hbav-hf-dir-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.hbav-hf-dir-card h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-top: 0;
margin-bottom: 8px;
line-height: 1.3;
}
.hbav-hf-dir-card p {
font-family: var(--font-body);
font-size: 13px;
color: var(--gray-600); /* explicit */
line-height: 1.5;
margin: 0 0 16px;
flex: 1;
}
.hbav-hf-dir-card__meta {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.hbav-hf-dir-card__meta-item {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
color: var(--gray-700); /* explicit */
text-decoration: none;
transition: color var(--ease);
word-break: break-all;
}
.hbav-hf-dir-card__meta-item svg {
width: 13px;
height: 13px;
flex-shrink: 0;
stroke: var(--hf-accent, var(--hbav-blue));
}
.hbav-hf-dir-card__meta-item:hover { color: var(--hbav-blue); }
/* Join CTA */
.hbav-hf-dir-card__join {
display: inline-block;
margin-top: auto;
padding-top: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--hbav-green); /* explicit */
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: color var(--ease);
}
.hbav-hf-dir-card__join:hover { color: var(--hbav-blue); }
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.hbav-hf-dir-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.hbav-hf-section { padding: 70px var(--content-gutter); }
.hbav-hf-finder { padding: 40px; }
.hbav-hf-headline { font-size: 38px; }
}
@media (max-width: 768px) {
.hbav-hf-section { padding: 60px var(--content-gutter); }
.hbav-hf-finder { padding: 28px 24px; }
.hbav-hf-headline { font-size: 30px; }
.hbav-hf-lead { font-size: 16px; }
.hbav-hf-select { max-width: 100%; }
.hbav-hf-result__card { flex-direction: column; gap: 20px; }
.hbav-hf-result__logo { width: 100%; }
.hbav-hf-dir-grid { grid-template-columns: 1fr; }
.hbav-hf-dir-headline { font-size: 28px; }
}
/* ==========================================================================
MEMBER SAVINGS & BENEFITS BLOCK — acf/hbav-member-savings
2-column grid of value cards. Photo left, content right.
========================================================================== */
.hbav-ms2-section {
padding: 100px var(--content-gutter);
/* background-color set inline */
}
.hbav-ms2-content {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.hbav-ms2-header {
text-align: center;
max-width: 900px;
margin: 0 auto 60px;
}
.hbav-ms2-headline {
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.1;
margin-top: 8px;
margin-bottom: 16px;
}
.hbav-ms2-lead {
font-family: var(--font-body);
font-size: 20px;
color: var(--gray-700); /* explicit */
line-height: 1.6;
margin: 0;
}
/* ── GRID ─────────────────────────────────────────────────────────────────── */
.hbav-ms2-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
/* ── CARD ─────────────────────────────────────────────────────────────────── */
.hbav-ms2-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
transition: transform var(--ease), box-shadow var(--ease);
}
.hbav-ms2-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,55,100,0.12);
}
/* Photo */
.hbav-ms2-card__photo {
background-size: cover;
background-position: center;
height: 220px;
width: 100%;
flex-shrink: 0;
}
.hbav-ms2-card__content {
padding: 40px;
display: flex;
flex-direction: column;
}
/* Card h3 — explicit */
.hbav-ms2-card h3 {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-top: 0;
margin-bottom: 12px;
}
/* Card paragraph — explicit */
.hbav-ms2-card p {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0 0 16px;
flex: 1;
}
.hbav-ms2-card__highlight {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: #856404; /* explicit */
background: #fff3cd;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
text-align: center;
}
/* Partner logo */
.hbav-ms2-card__logo {
margin-bottom: 20px;
}
.hbav-ms2-card__logo img {
max-height: 48px;
max-width: 200px;
width: auto;
height: auto;
object-fit: contain;
}
/* CTA button — inherits global .btn-primary */
.hbav-ms2-card .btn-primary {
align-self: flex-start;
margin-top: auto;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.hbav-ms2-card { grid-template-columns: 200px 1fr; }
}
@media (max-width: 1024px) {
.hbav-ms2-section { padding: 70px var(--content-gutter); }
.hbav-ms2-headline { font-size: 40px; }
.hbav-ms2-grid { gap: 24px; }
}
@media (max-width: 900px) {
.hbav-ms2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hbav-ms2-section { padding: 60px var(--content-gutter); }
.hbav-ms2-headline { font-size: 32px; }
.hbav-ms2-lead { font-size: 17px; }
}
/* ==========================================================================
FINAL CTA BLOCK — acf/hbav-final-cta
Full-width gradient strip. Headline, subhead, two buttons.
========================================================================== */
.hbav-fc-section {
padding: 100px var(--content-gutter);
text-align: center;
/* background gradient set inline */
}
.hbav-fc-content {
max-width: 800px;
margin: 0 auto;
}
/* Headline — explicit white */
.hbav-fc-headline {
font-family: var(--font-display);
font-size: 52px;
font-weight: 700;
color: var(--white); /* explicit */
line-height: 1.1;
margin-top: 0;
margin-bottom: 20px;
}
/* Subhead — explicit semi-white */
.hbav-fc-subhead {
font-family: var(--font-body);
font-size: 20px;
color: rgba(255,255,255,0.85); /* explicit */
line-height: 1.6;
margin: 0 0 40px;
}
/* Buttons row */
.hbav-fc-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* White ghost button variant for dark backgrounds */
.btn-ghost--white {
background: transparent;
color: var(--white) !important; /* explicit */
border: 2px solid var(--white) !important;
}
.btn-ghost--white:hover {
background: var(--white) !important;
color: var(--hbav-blue) !important; /* explicit */
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-fc-section { padding: 80px var(--content-gutter); }
.hbav-fc-headline { font-size: 42px; }
}
@media (max-width: 768px) {
.hbav-fc-section { padding: 60px var(--content-gutter); }
.hbav-fc-headline { font-size: 34px; }
.hbav-fc-subhead { font-size: 17px; }
.hbav-fc-buttons { flex-direction: column; align-items: stretch; }
.hbav-fc-buttons a { text-align: center; }
}
/* ==========================================================================
FIND A BUILDER — page-find-a-builder.php + single-hbav_listing.php
Directory hub and individual listing profile pages.
========================================================================== */
/* ── SHARED TOKENS ────────────────────────────────────────────────────────── */
.hbav-fab-page,
.hbav-listing-page {
--fab-blue: var(--hbav-blue);
--fab-green: var(--hbav-green);
--fab-yellow: var(--yellow);
--fab-gray-50: var(--gray-50);
--fab-gray-100:var(--gray-100);
--fab-gray-200:var(--gray-200);
--fab-gray-700:var(--gray-700);
--fab-max: 1400px;
--fab-pad: var(--content-gutter);
--fab-radius: 10px;
}
/* ════════════════════════════════════════════════════════════
SECTION 1: HERO
════════════════════════════════════════════════════════════ */
.fab-hero {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
overflow: hidden;
padding: 100px var(--fab-pad) 80px;
}
.fab-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.18;
z-index: 0;
}
.fab-hero__gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--hbav-blue) 0%, #001f3f 100%);
z-index: 1;
}
.fab-hero__diagonal {
position: absolute;
top: 0; right: 0;
width: 40%; height: 100%;
background: linear-gradient(to left, rgba(255,255,255,0.03), transparent);
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
z-index: 2;
}
.fab-hero__inner {
position: relative;
z-index: 3;
max-width: var(--fab-max);
width: 100%;
margin: 0 auto;
}
.fab-hero__eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--hbav-green); /* explicit */
margin-bottom: 16px;
}
.fab-hero__title {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1.05;
margin-bottom: 16px;
margin-top: 0;
}
.fab-hero__title span { color: var(--hbav-green); }
.fab-hero__sub {
font-family: var(--font-body);
font-size: 18px;
color: rgba(255,255,255,0.72); /* explicit */
max-width: 580px;
line-height: 1.7;
margin-bottom: 40px;
margin-top: 0;
}
/* Search bar */
.fab-search {
width: 100%;
max-width: 680px;
display: flex;
background: var(--white);
border-radius: 8px;
box-shadow: 0 16px 48px rgba(0,0,0,0.22);
overflow: hidden;
margin-bottom: 40px;
}
.fab-search__input {
flex: 1;
padding: 20px 24px;
font-family: var(--font-body);
font-size: 16px;
border: none;
outline: none;
color: var(--gray-700); /* explicit */
}
.fab-search__input::placeholder { color: #aaa; }
.fab-search__btn {
background: var(--hbav-green);
color: var(--white); /* explicit */
border: none;
padding: 20px 32px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
transition: background var(--ease);
white-space: nowrap;
}
.fab-search__btn:hover { background: var(--hbav-blue); }
/* Hero stats */
.fab-hero__stats {
display: flex;
gap: 48px;
flex-wrap: wrap;
}
.fab-hero__stat-num {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1;
margin-bottom: 4px;
}
.fab-hero__stat-num em {
color: var(--hbav-green);
font-style: normal;
font-size: 20px;
vertical-align: super;
}
.fab-hero__stat-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.5); /* explicit */
margin-top: 4px;
}
/* ════════════════════════════════════════════════════════════
SECTION 2: STICKY FILTER BAR
════════════════════════════════════════════════════════════ */
.fab-filters {
background: var(--white);
border-bottom: 2px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 900;
box-shadow: 0 2px 8px rgba(0,55,100,0.04);
}
.fab-filters__inner {
max-width: var(--fab-max);
margin: 0 auto;
padding: 0 var(--fab-pad);
display: flex;
align-items: stretch;
overflow-x: auto;
scrollbar-width: none;
gap: 0;
}
.fab-filters__inner::-webkit-scrollbar { display: none; }
.fab-filters__group {
display: flex;
align-items: center;
gap: 6px;
padding: 14px 0;
margin-right: 20px;
flex-shrink: 0;
}
.fab-filters__label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #bbb;
white-space: nowrap;
margin-right: 4px;
}
.fab-pill {
padding: 7px 16px;
border-radius: 100px;
border: 1.5px solid var(--gray-200);
background: var(--white);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: #666;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.fab-pill:hover { border-color: var(--hbav-blue); color: var(--hbav-blue); }
.fab-pill.is-active { background: var(--hbav-blue); border-color: var(--hbav-blue); color: var(--white); }
.fab-filters__divider {
width: 1px;
background: var(--gray-200);
margin: 12px 20px 12px 0;
flex-shrink: 0;
}
.fab-filters__region-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 0;
flex-shrink: 0;
}
.fab-region-select {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
border: 1.5px solid var(--gray-200);
border-radius: 100px;
padding: 7px 32px 7px 14px;
background: var(--white);
cursor: pointer;
transition: all 0.15s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23003764'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.fab-region-select.has-value {
background-color: var(--hbav-blue);
color: var(--white); /* explicit */
border-color: var(--hbav-blue);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
}
.fab-filters__count {
margin-left: auto;
flex-shrink: 0;
font-family: var(--font-body);
font-size: 13px;
color: #aaa;
white-space: nowrap;
padding: 14px 0;
display: flex;
align-items: center;
gap: 4px;
}
.fab-filters__count strong {
color: var(--hbav-blue); /* explicit */
}
.fab-filters__clear {
display: none;
margin-left: 12px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
color: var(--hbav-green); /* explicit */
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color var(--ease);
}
.fab-filters__clear.is-visible { display: inline; }
.fab-filters__clear:hover { color: var(--hbav-blue); }
/* ════════════════════════════════════════════════════════════
SHARED: TIER BADGES
════════════════════════════════════════════════════════════ */
.ks-tier-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 100px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.ks-tier-badge--diamond { background: #0d1f0d; color: var(--hbav-green); border: 1px solid var(--hbav-green); }
.ks-tier-badge--platinum { background: var(--hbav-blue); color: var(--white); }
.ks-tier-badge--gold { background: #d4a017; color: var(--white); }
/* ════════════════════════════════════════════════════════════
SECTION 3: KEYSTONE FEATURED
════════════════════════════════════════════════════════════ */
.fab-featured {
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
padding: 56px var(--fab-pad);
}
.fab-featured__inner {
max-width: var(--fab-max);
margin: 0 auto;
}
.fab-featured__header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.fab-featured__eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--hbav-blue); /* explicit */
white-space: nowrap;
}
.fab-featured__line {
flex: 1;
height: 1px;
background: var(--gray-200);
}
.fab-featured__about {
font-family: var(--font-body);
font-size: 12px;
color: #aaa;
white-space: nowrap;
}
.fab-featured__about a {
color: var(--hbav-green); /* explicit */
text-decoration: none;
font-weight: 600;
transition: color var(--ease);
}
.fab-featured__about a:hover { color: var(--hbav-blue); }
.fab-featured__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── Keystone card ───────────────────────────────────────────────────────── */
.ks-card {
border-radius: var(--fab-radius);
overflow: hidden;
border: 2px solid var(--hbav-blue);
background: var(--white);
transition: box-shadow var(--ease), transform var(--ease);
display: flex;
flex-direction: column;
}
.ks-card:hover {
box-shadow: 0 12px 40px rgba(0,55,100,0.15);
transform: translateY(-3px);
}
.ks-card__accent {
height: 3px;
background: linear-gradient(90deg, var(--hbav-blue), var(--hbav-green));
}
.ks-card__body { padding: 24px 24px 16px; flex: 1; }
.ks-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
}
.ks-card__logo {
width: 96px;
height: 48px;
object-fit: contain;
object-position: left center;
flex-shrink: 0;
}
.ks-card__logo-placeholder {
width: 96px;
height: 48px;
background: var(--gray-100);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 10px;
color: #bbb;
font-weight: 600;
flex-shrink: 0;
}
.ks-card__name {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 3px;
line-height: 1.2;
}
.ks-card__type {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hbav-green); /* explicit */
margin-bottom: 8px;
}
.ks-card__tagline {
font-family: var(--font-body);
font-size: 13px;
color: #666; /* explicit */
line-height: 1.6;
margin-bottom: 14px;
margin-top: 0;
}
.ks-card__meta {
display: flex;
gap: 16px;
font-family: var(--font-body);
font-size: 11px;
color: #bbb; /* explicit */
}
.ks-card__footer {
border-top: 1px solid var(--gray-100);
padding: 14px 24px;
display: flex;
gap: 10px;
align-items: center;
}
.ks-card__footer-link {
padding: 10px 20px;
font-size: 12px;
}
.ks-card__footer-ext {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1.5px solid var(--gray-200);
border-radius: 4px;
color: var(--gray-700); /* explicit */
transition: border-color var(--ease), color var(--ease);
flex-shrink: 0;
}
.ks-card__footer-ext:hover { border-color: var(--hbav-blue); color: var(--hbav-blue); }
.ks-card__footer-ext svg { width: 14px; height: 14px; }
/* ════════════════════════════════════════════════════════════
SECTION 4: ALL LISTINGS GRID
════════════════════════════════════════════════════════════ */
.fab-grid-section {
padding: 56px var(--fab-pad);
background: var(--white);
}
.fab-grid-section__inner {
max-width: var(--fab-max);
margin: 0 auto;
}
.fab-grid-section__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
}
.fab-grid-section__title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin: 0;
}
.fab-grid-section__sort {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
color: #888;
}
.fab-grid-section__sort select {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
border: 1.5px solid var(--gray-200);
border-radius: 6px;
padding: 6px 12px;
background: var(--white);
cursor: pointer;
}
.fab-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* ── Standard listing card ───────────────────────────────────────────────── */
.listing-card {
border: 1px solid var(--gray-200);
border-radius: var(--fab-radius);
background: var(--white);
overflow: hidden;
transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
position: relative;
}
.listing-card:hover {
box-shadow: 0 6px 24px rgba(0,55,100,0.1);
transform: translateY(-2px);
border-color: var(--gray-300);
}
.listing-card--keystone {
border-color: var(--hbav-blue);
border-width: 2px;
}
.listing-card__head {
padding: 18px 18px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.listing-card__logo {
width: 80px;
height: 40px;
object-fit: contain;
object-position: left center;
}
.listing-card__logo-placeholder {
width: 80px;
height: 40px;
background: var(--gray-100);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
color: var(--gray-400); /* explicit */
}
.listing-card__type-badge {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.listing-card__type-badge--builder { background: rgba(0,55,100,0.08); color: var(--hbav-blue); }
.listing-card__type-badge--remodeler { background: rgba(0,191,99,0.1); color: #015c2e; }
.listing-card__type-badge--trade-partner { background: rgba(240,191,45,0.15); color: #7a5a00; }
.listing-card__body {
padding: 14px 18px 18px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.listing-card__name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
line-height: 1.3;
}
.listing-card:hover .listing-card__name { color: var(--hbav-green); }
.listing-card__tagline {
font-family: var(--font-body);
font-size: 12px;
color: #666; /* explicit */
line-height: 1.5;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-card__region {
font-family: var(--font-body);
font-size: 11px;
color: #aaa; /* explicit */
font-weight: 500;
margin-top: 4px;
}
/* Keystone star flag */
.listing-card__ks-flag {
position: absolute;
top: 10px;
right: 10px;
font-size: 12px;
}
/* Empty state */
.fab-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--gray-700); /* explicit */
font-family: var(--font-body);
}
.fab-empty-state p { font-size: 16px; margin-bottom: 20px; }
/* ════════════════════════════════════════════════════════════
SINGLE LISTING PAGE
════════════════════════════════════════════════════════════ */
/* ── HEADER ──────────────────────────────────────────────────────────────── */
.listing-header {
background: var(--hbav-blue);
padding: 56px var(--fab-pad) 48px;
}
.listing-header--keystone {
background: linear-gradient(135deg, #0d1f0d 0%, #003764 100%);
border-bottom: 3px solid var(--hbav-green);
}
.listing-header__inner {
max-width: var(--fab-max);
margin: 0 auto;
}
/* Breadcrumb */
.listing-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255,255,255,0.5); /* explicit */
margin-bottom: 28px;
}
.listing-breadcrumb a {
color: rgba(255,255,255,0.5); /* explicit */
text-decoration: none;
transition: color var(--ease);
}
.listing-breadcrumb a:hover { color: var(--white); }
.listing-breadcrumb .current { color: rgba(255,255,255,0.5); }
/* Header content row */
.listing-header__content {
display: grid;
grid-template-columns: 160px 1fr auto;
gap: 40px;
align-items: center;
}
/* Logo box */
.listing-header__logo-wrap {
background: var(--white);
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
}
.listing-header__logo {
max-width: 128px;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.listing-header__logo-placeholder {
width: 128px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--gray-400); /* explicit */
}
/* Meta column */
.listing-header__ks-bar { margin-bottom: 10px; }
.listing-header__meta h1 {
font-family: var(--font-display);
font-size: 40px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1.1;
margin: 0 0 8px;
}
.listing-header__type {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hbav-green); /* explicit */
margin: 0 0 6px;
}
.listing-header__region {
font-family: var(--font-body);
font-size: 14px;
color: rgba(255,255,255,0.6); /* explicit */
margin: 0;
}
/* CTA column */
.listing-header__cta {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.listing-header__cta .btn-ghost {
border-color: rgba(255,255,255,0.4);
color: var(--white); /* explicit */
text-align: center;
}
.listing-header__cta .btn-ghost:hover {
border-color: var(--white);
background: rgba(255,255,255,0.1);
}
/* ── BODY + SIDEBAR LAYOUT ───────────────────────────────────────────────── */
.listing-body-wrap {
background: var(--white);
padding: 64px var(--fab-pad);
}
.listing-body-inner {
max-width: var(--fab-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: 64px;
align-items: start;
}
/* ── MAIN CONTENT ────────────────────────────────────────────────────────── */
.listing-tagline-lead {
font-family: var(--font-display);
font-size: 22px;
font-style: italic;
color: var(--hbav-blue); /* explicit */
line-height: 1.5;
margin-bottom: 28px;
margin-top: 0;
padding-bottom: 28px;
border-bottom: 2px solid var(--gray-100);
}
.listing-description {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.85;
margin-bottom: 40px;
}
.listing-description p { margin-bottom: 1.4em; }
.listing-description p:last-child { margin-bottom: 0; }
/* Specialties */
.listing-specialties { margin-bottom: 40px; }
.listing-specialties h2,
.listing-gallery h2,
.listing-downloads h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 20px;
margin-top: 0;
padding-bottom: 12px;
border-bottom: 2px solid var(--gray-100);
}
.listing-specialties__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.listing-specialties__list li {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
background: rgba(0,55,100,0.06);
padding: 8px 16px;
border-radius: 100px;
border: 1px solid rgba(0,55,100,0.12);
}
/* Gallery */
.listing-gallery { margin-bottom: 40px; }
.listing-gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
grid-auto-rows: 180px;
}
.listing-gallery__item {
background-size: cover;
background-position: center;
border-radius: 6px;
display: block;
transition: transform var(--ease), box-shadow var(--ease);
overflow: hidden;
}
.listing-gallery__item:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* Downloads */
.listing-downloads { margin-bottom: 40px; }
.listing-downloads__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.listing-downloads__link {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 6px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
text-decoration: none;
transition: background var(--ease), border-color var(--ease);
}
.listing-downloads__link:hover {
background: rgba(0,55,100,0.04);
border-color: var(--hbav-blue);
}
.listing-downloads__link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: var(--hbav-green);
}
/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.listing-sidebar {
position: sticky;
top: 80px;
}
.listing-sidebar__card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--fab-radius);
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,55,100,0.07);
}
.listing-sidebar__cta {
display: block;
text-align: center;
border-radius: 0;
width: 100%;
padding: 18px 20px;
}
.listing-sidebar__details {
list-style: none;
margin: 0;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 14px;
border-bottom: 1px solid var(--gray-100);
}
.listing-sidebar__details li {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-body);
font-size: 14px;
color: var(--gray-700); /* explicit */
line-height: 1.4;
}
.listing-sidebar__details svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: var(--hbav-green);
margin-top: 1px;
}
.listing-sidebar__details a {
color: var(--hbav-blue); /* explicit */
text-decoration: none;
word-break: break-all;
transition: color var(--ease);
}
.listing-sidebar__details a:hover { color: var(--hbav-green); }
/* Social icons */
.listing-sidebar__social {
padding: 16px 24px;
display: flex;
gap: 10px;
border-bottom: 1px solid var(--gray-100);
}
.listing-sidebar__social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-700); /* explicit */
transition: background var(--ease), color var(--ease);
text-decoration: none;
}
.listing-sidebar__social a:hover { background: var(--hbav-blue); color: var(--white); }
.listing-sidebar__social svg { width: 16px; height: 16px; }
/* HBAV note */
.listing-sidebar__hbav-note {
padding: 16px 24px;
background: var(--gray-50);
}
.listing-sidebar__hbav-note p {
font-family: var(--font-body);
font-size: 12px;
color: var(--gray-700); /* explicit */
margin: 0 0 6px;
}
.listing-sidebar__hbav-note a {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--hbav-green); /* explicit */
text-decoration: none;
transition: color var(--ease);
}
.listing-sidebar__hbav-note a:hover { color: var(--hbav-blue); }
/* ── BACK CTA STRIP ──────────────────────────────────────────────────────── */
.listing-back-strip {
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
padding: 40px var(--fab-pad);
}
.listing-back-strip__inner {
max-width: var(--fab-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.listing-back-strip__inner p {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
margin: 0;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.fab-grid { grid-template-columns: repeat(3, 1fr); }
.fab-featured__grid { grid-template-columns: repeat(2, 1fr); }
.listing-header__content { grid-template-columns: 140px 1fr; }
.listing-header__cta { display: none; }
}
@media (max-width: 1024px) {
.fab-hero { padding: 80px var(--fab-pad) 60px; }
.fab-hero__title { font-size: 40px; }
.fab-hero__sub { font-size: 16px; }
.fab-grid { grid-template-columns: repeat(2, 1fr); }
.listing-body-inner { grid-template-columns: 1fr; gap: 40px; }
.listing-sidebar { position: static; }
.listing-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.fab-hero { padding: 60px var(--fab-pad) 48px; min-height: auto; }
.fab-hero__title { font-size: 32px; }
.fab-hero__stats { gap: 28px; }
.fab-grid { grid-template-columns: repeat(2, 1fr); }
.fab-featured__grid { grid-template-columns: 1fr; }
.listing-header__content { grid-template-columns: 1fr; gap: 20px; }
.listing-header__logo-wrap { width: 120px; }
.listing-header__meta h1 { font-size: 28px; }
.listing-back-strip__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
.listing-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
}
@media (max-width: 480px) {
.fab-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
INTERIOR PAGE TEMPLATE — page-interior.php
========================================================================== */
/* ── WIDTH OVERRIDE ───────────────────────────────────────────────────────
Kadence constrains .entry-content width. These rules neutralise that so
the full-bleed header and body sections render correctly.
──────────────────────────────────────────────────────────────────────── */
.hbav-interior-page .hbav-post-body,
.hbav-interior-page .hbav-post-header { width: 100%; max-width: none !important; }
.hbav-interior-page .entry,
.hbav-interior-page .entry-content,
.hbav-interior-page .wp-singular-inner {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── BREADCRUMB COLOR FIX ─────────────────────────────────────────────────
Current-page and non-link text should be white on the blue header.
──────────────────────────────────────────────────────────────────────── */
.hbav-post-header .hbav-post-breadcrumb,
.hbav-post-header .hbav-post-breadcrumb span {
color: rgba(255,255,255,0.5); /* explicit */
}
/* ── IN-SECTION CHILD PAGE NAVIGATION ────────────────────────────────────── */
.hbav-interior-subnav { margin-top: 56px; }
.hbav-interior-subnav__heading {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: #aaa;
margin-bottom: 16px;
margin-top: 0;
}
.hbav-interior-subnav__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
border: 1px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
}
.hbav-interior-subnav__list li { border-bottom: 1px solid var(--gray-100); }
.hbav-interior-subnav__list li:last-child { border-bottom: none; }
.hbav-interior-subnav__list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--hbav-blue); /* explicit */
text-decoration: none;
transition: background var(--ease), color var(--ease);
}
.hbav-interior-subnav__list a::after {
content: '›';
color: var(--hbav-green);
font-size: 20px;
line-height: 1;
}
.hbav-interior-subnav__list a:hover {
background: var(--gray-50);
color: var(--hbav-green);
}
/* ── RELATED PAGES ────────────────────────────────────────────────────────
Reuses .hbav-next-reads card CSS from single-post.php entirely.
No card rules needed here — only the inner max-width override
to keep it constrained to 860px like the body column.
(Set inline on .hbav-next-reads__inner via style attribute in PHP.)
──────────────────────────────────────────────────────────────────────── */
/* ==========================================================================
CONTACT PAGE — page-contact.php
========================================================================== */
/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hbav-contact-hero {
position: relative;
background: linear-gradient(135deg, var(--hbav-blue) 0%, #001f3f 100%);
padding: 72px var(--content-gutter) 60px;
overflow: hidden;
}
.hbav-contact-hero__bg {
position: absolute;
inset: 0;
background-image: url('https://superbskirtlunchroom.stellarwp.site/wp-content/uploads/2026/01/DC9A4870-scaled.jpg');
background-size: cover;
background-position: center;
opacity: 0.08;
}
.hbav-contact-hero__gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,55,100,0.95) 0%, rgba(0,31,63,0.97) 100%);
}
.hbav-contact-hero__inner {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
}
.hbav-contact-hero h1 {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: var(--white); /* explicit */
line-height: 1.05;
margin: 20px 0 16px;
}
.hbav-contact-hero h1 span { color: var(--hbav-green); }
.hbav-contact-hero p {
font-family: var(--font-body);
font-size: 18px;
color: rgba(255,255,255,0.72); /* explicit */
max-width: 540px;
line-height: 1.7;
margin: 0;
}
/* ── BODY — two-column layout ─────────────────────────────────────────────── */
.hbav-contact-body {
background: #fff;
padding: 80px var(--content-gutter);
}
.hbav-contact-body__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 420px;
gap: 80px;
align-items: start;
}
/* ── COLUMN HEADINGS ──────────────────────────────────────────────────────── */
.hbav-contact-col__heading {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin: 0 0 10px;
line-height: 1.15;
}
.hbav-contact-col__sub {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0 0 32px;
}
/* ── FORM WRAPPER ─────────────────────────────────────────────────────────── */
.hbav-contact-form-wrap {
/* Kadence form styles render inside here.
These rules clean up Kadence's default form styling to match
the site's design language without overriding Kadence's JS. */
}
.hbav-contact-form-wrap input[type="text"],
.hbav-contact-form-wrap input[type="email"],
.hbav-contact-form-wrap input[type="tel"],
.hbav-contact-form-wrap select,
.hbav-contact-form-wrap textarea {
width: 100%;
border: 1.5px solid var(--gray-200);
border-radius: 6px;
padding: 14px 16px;
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
background: #fff;
transition: border-color 0.2s;
appearance: none;
}
.hbav-contact-form-wrap input:focus,
.hbav-contact-form-wrap select:focus,
.hbav-contact-form-wrap textarea:focus {
outline: none;
border-color: var(--hbav-blue);
box-shadow: 0 0 0 3px rgba(0,55,100,0.08);
}
.hbav-contact-form-wrap textarea { min-height: 140px; resize: vertical; }
.hbav-contact-form-wrap label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
display: block;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Submit button — matches site btn-primary */
.hbav-contact-form-wrap input[type="submit"],
.hbav-contact-form-wrap button[type="submit"] {
background: var(--hbav-green);
color: var(--white); /* explicit */
border: none;
border-radius: 4px;
padding: 16px 40px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
width: 100%;
margin-top: 8px;
}
.hbav-contact-form-wrap input[type="submit"]:hover,
.hbav-contact-form-wrap button[type="submit"]:hover {
background: var(--hbav-blue);
transform: translateY(-1px);
}
/* ── INFO CARD ────────────────────────────────────────────────────────────── */
.hbav-contact-info-card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
position: sticky;
top: 80px;
}
.hbav-contact-info-card .hbav-contact-col__heading {
padding: 28px 28px 0;
}
.hbav-contact-info-list {
list-style: none;
padding: 20px 28px 28px;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.hbav-contact-info-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.hbav-contact-info-item__icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--hbav-blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hbav-contact-info-item__icon svg {
width: 16px;
height: 16px;
stroke: var(--white); /* explicit */
}
.hbav-contact-info-item__body {
display: flex;
flex-direction: column;
gap: 3px;
}
.hbav-contact-info-item__label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #aaa; /* explicit */
}
.hbav-contact-info-item__value {
font-family: var(--font-body);
font-size: 15px;
color: var(--gray-700); /* explicit */
line-height: 1.5;
font-style: normal; /* reset italic */
}
.hbav-contact-info-item__link {
color: var(--hbav-blue); /* explicit */
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.hbav-contact-info-item__link:hover { color: var(--hbav-green); }
/* ── MAP ──────────────────────────────────────────────────────────────────── */
.hbav-contact-map {
border-top: 1px solid var(--gray-200);
}
.hbav-contact-map iframe {
display: block;
width: 100%;
border: 0;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
.hbav-contact-body__inner {
grid-template-columns: 1fr 360px;
gap: 60px;
}
}
@media (max-width: 1024px) {
.hbav-contact-body__inner {
grid-template-columns: 1fr;
gap: 48px;
}
.hbav-contact-info-card { position: static; }
.hbav-contact-hero h1 { font-size: 40px; }
}
@media (max-width: 768px) {
.hbav-contact-hero { padding: 56px var(--content-gutter) 48px; }
.hbav-contact-hero h1 { font-size: 32px; }
.hbav-contact-body { padding: 56px var(--content-gutter); }
}
/* ── EDITOR-ONLY NOTICE ───────────────────────────────────────────────────────
A notice block placed at the top of the page editor content area reminds
editors to use HBAV Settings → Contact Page for everything except the form.
Hidden on the frontend, visible only in the WP block editor.
Add a Paragraph block or Group block with this class in the page editor.
──────────────────────────────────────────────────────────────────────────── */
.hbav-editor-notice { display: none !important; }
/* ==========================================================================
CONTACT ROW BLOCK — acf/hbav-contact-row
Row of 2-5 person contact cards. Used on Advocacy, About, Membership, BuildPAC.
========================================================================== */
.hbav-cr-section {
padding: 80px var(--content-gutter);
/* background-color set inline */
}
.hbav-cr-inner {
max-width: var(--content-max);
margin: 0 auto;
}
/* Section header */
.hbav-cr-header {
margin-bottom: 48px;
max-width: 700px;
}
.hbav-cr-header h2 {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-top: 8px;
margin-bottom: 12px;
line-height: 1.15;
}
.hbav-cr-header p {
font-family: var(--font-body);
font-size: 16px;
color: var(--gray-700); /* explicit */
line-height: 1.7;
margin: 0;
}
/* ── CONTACT ROW ──────────────────────────────────────────────────────────── */
.contact-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* ── CONTACT CARD ─────────────────────────────────────────────────────────── */
.contact-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform var(--ease), box-shadow var(--ease);
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.contact-card.has-modal {
cursor: pointer;
}
.contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,55,100,0.12);
}
/* Photo */
.contact-card__photo {
height: 180px;
background-size: cover;
background-position: center 15%;
background-color: var(--gray-200);
flex-shrink: 0;
}
/* Photo placeholder */
.contact-card__photo--placeholder {
height: 180px;
background: linear-gradient(135deg, var(--hbav-blue) 0%, #001f3f 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 40px;
font-weight: 800;
color: rgba(255,255,255,0.3); /* explicit */
flex-shrink: 0;
}
/* Body */
.contact-card__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.contact-card__name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--hbav-blue); /* explicit */
margin-bottom: 3px;
line-height: 1.2;
}
.contact-card__title {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--hbav-green); /* explicit */
margin-bottom: 12px;
line-height: 1.4;
}
.contact-card__links {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
}
.contact-card__links a {
font-family: var(--font-body);
font-size: 13px;
color: var(--gray-700); /* explicit */
display: flex;
align-items: center;
gap: 8px;
transition: color var(--ease);
text-decoration: none;
word-break: break-all;
}
.contact-card__links a:hover { color: var(--hbav-green); }
/* Green icon squares before email/phone */
.contact-card__links a::before {
content: '';
width: 12px;
height: 12px;
flex-shrink: 0;
background: var(--hbav-green);
border-radius: 2px;
display: inline-block;
}
.contact-card__links a.email::before {
clip-path: polygon(0 20%, 50% 60%, 100% 20%, 100% 80%, 0 80%);
}
.contact-card__links a.phone::before {
clip-path: polygon(20% 0, 80% 0, 70% 50%, 100% 80%, 80% 100%, 50% 85%, 20% 100%, 0 80%, 30% 50%);
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-cr-section { padding: 60px var(--content-gutter); }
.contact-card { width: 220px; }
}
@media (max-width: 768px) {
.hbav-cr-section { padding: 50px var(--content-gutter); }
.contact-row { gap: 16px; }
.contact-card { width: 200px; }
.contact-card__photo,
.contact-card__photo--placeholder { height: 160px; }
}
@media (max-width: 480px) {
/* On small mobile, cards stack 2-up */
.contact-row { display: grid; grid-template-columns: repeat(2, 1fr); }
.contact-card { width: 100%; }
}
/* ==========================================================================
HISTORY BLOCK — acf/hbav-history
Matches About_v2.html mockup exactly.
========================================================================== */
.hbav-history {
background: #fff;
}
/* ── INTRO ────────────────────────────────────────────────────────────────── */
.hbav-history__intro-section {
padding: 100px var(--content-gutter) 60px;
background: #fff;
}
.hbav-history__intro {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hbav-history__intro .hbav-pts-label {
margin-bottom: 12px !important;
}
.hbav-history__heading {
font-family: var(--font-display) !important;
font-size: 42px !important;
font-weight: 800 !important;
color: var(--hbav-blue) !important;
line-height: 1.15 !important;
margin: 0 !important;
}
.hbav-history__intro-body {
font-family: var(--font-body);
font-size: 17px;
color: #555; /* explicit */
line-height: 1.8;
margin: 0;
max-width: 100%;
}
/* ── DECADE MARKER ────────────────────────────────────────────────────────── */
/* sticky top:168px matches mockup (header ~114px + subnav ~54px) */
.hbav-history__decade {
padding: 20px var(--content-gutter);
background: var(--hbav-blue);
position: sticky;
top: 168px;
z-index: 10;
}
.hbav-history__decade-inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
}
.hbav-history__decade-year {
font-family: var(--font-display) !important;
font-size: 42px !important;
font-weight: 800 !important;
color: rgba(255,255,255,0.15) !important; /* large faint decorative numeral */
line-height: 1 !important;
flex-shrink: 0;
white-space: nowrap;
}
.hbav-history__decade-label {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
color: var(--hbav-green) !important;
flex-shrink: 0;
white-space: nowrap;
}
.hbav-history__decade-line {
flex: 1;
height: 1px;
background: rgba(255,255,255,0.08);
}
/* ── SHARED MILESTONE WRAPPER ─────────────────────────────────────────────── */
.hbav-history__milestone {
max-width: var(--content-max);
margin: 0 auto;
padding: 80px var(--content-gutter);
}
/* Full-bleed and pull-quote break out of max-width constraint */
.hbav-history__milestone--full-bleed,
.hbav-history__milestone--pull-quote,
.hbav-history__milestone--video {
max-width: 100%;
}
/* ── YEAR TAG ─────────────────────────────────────────────────────────────── */
.hbav-history__year-tag {
position: absolute;
top: 16px;
left: 16px;
background: var(--hbav-green);
color: #fff !important;
padding: 6px 14px;
border-radius: 4px;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
}
/* Inline variant for full-bleed and text-only where absolute positioning
doesn't make sense */
.hbav-history__year-tag--inline,
.hbav-history__milestone--text-only .hbav-history__year-tag {
position: relative;
top: auto;
left: auto;
display: inline-flex;
margin-bottom: 20px;
}
/* ── SHARED MILESTONE TEXT ────────────────────────────────────────────────── */
.hbav-history__milestone-heading {
font-family: var(--font-display) !important;
font-size: 32px !important;
font-weight: 800 !important;
color: var(--hbav-blue) !important;
line-height: 1.2 !important;
margin: 0 0 18px !important;
}
.hbav-history__milestone-body p {
font-family: var(--font-body);
font-size: 16px;
color: #555; /* explicit */
line-height: 1.85;
margin: 0 0 16px;
}
.hbav-history__milestone-body p:last-child { margin-bottom: 0; }
.hbav-history__caption {
font-family: var(--font-body);
font-size: 12px;
color: #aaa; /* explicit */
margin-top: 12px;
font-style: italic;
line-height: 1.5;
}
/* ── PHOTO LEFT ───────────────────────────────────────────────────────────── */
.hbav-history__milestone--photo-left {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}
/* ── PHOTO RIGHT ──────────────────────────────────────────────────────────── */
.hbav-history__milestone--photo-right {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
/* Photo right: use order to flip without changing markup */
.hbav-history__milestone--photo-right .hbav-history__photo-col { order: 2; }
.hbav-history__milestone--photo-right .hbav-history__content-col { order: 1; }
/* Photo column */
.hbav-history__img-wrap {
position: relative;
}
.hbav-history__img {
width: 100%;
height: 460px;
object-fit: cover;
border-radius: 4px;
display: block;
}
.hbav-history__img-placeholder {
width: 100%;
height: 460px;
background: linear-gradient(135deg, #cdd8e3 0%, #b0c4d8 100%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0,55,100,0.25);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
padding: 20px;
}
/* ── FULL BLEED ───────────────────────────────────────────────────────────── */
.hbav-history__milestone--full-bleed {
position: relative;
height: 540px;
overflow: hidden;
padding: 0;
background: var(--hbav-blue);
background-size: cover;
background-position: center;
}
.hbav-history__full-bleed-bg {
position: absolute;
inset: 0;
height: 100%;
border-radius: 0;
}
.hbav-history__full-bleed-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to right,
rgba(0,30,60,0.88) 0%,
rgba(0,30,60,0.5) 55%,
transparent 100%
);
}
.hbav-history__full-bleed-content {
position: absolute;
left: var(--content-gutter);
top: 50%;
transform: translateY(-50%);
z-index: 3;
max-width: 580px;
}
.hbav-history__full-bleed-content .hbav-history__milestone-heading {
color: #fff !important;
font-size: 40px !important;
}
.hbav-history__full-bleed-content .hbav-history__milestone-body p {
color: rgba(255,255,255,0.78) !important;
}
/* ── PULL QUOTE ───────────────────────────────────────────────────────────── */
.hbav-history__milestone--pull-quote {
background: var(--hbav-blue);
text-align: center;
padding: 80px var(--content-gutter);
}
.hbav-history__pull-inner {
max-width: 760px;
margin: 0 auto;
}
.hbav-history__pull-quote-text {
font-family: var(--font-display) !important;
font-size: 26px !important;
font-style: italic !important;
color: #fff !important;
line-height: 1.6 !important;
margin: 0 0 24px !important;
}
.hbav-history__pull-attribution {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: rgba(255,255,255,0.5) !important;
margin: 0 !important;
}
/* ── TEXT ONLY ────────────────────────────────────────────────────────────── */
.hbav-history__milestone--text-only {
max-width: 780px;
margin: 0 auto;
}
/* ── VIDEO ────────────────────────────────────────────────────────────────── */
.hbav-history__milestone--video {
background: var(--gray-50);
padding: 80px var(--content-gutter);
}
.hbav-history__video-inner {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hbav-history__video-heading {
font-family: var(--font-display) !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin: 0 0 28px !important;
}
.hbav-history__video-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.hbav-history__video-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
.hbav-history__video-caption {
font-family: var(--font-body) !important;
font-size: 14px !important;
color: #888 !important;
margin: 20px 0 0 !important;
font-style: italic !important;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-history__intro-section {
padding: 72px var(--content-gutter) 48px;
}
.hbav-history__intro {
grid-template-columns: 1fr;
gap: 32px;
}
.hbav-history__heading { font-size: 34px !important; }
.hbav-history__milestone--photo-left,
.hbav-history__milestone--photo-right {
grid-template-columns: 1fr;
gap: 40px;
padding: 60px var(--content-gutter);
}
.hbav-history__milestone--photo-right .hbav-history__photo-col { order: 0; }
.hbav-history__milestone--photo-right .hbav-history__content-col { order: 0; }
.hbav-history__img,
.hbav-history__img-placeholder { height: 300px; }
.hbav-history__decade { top: 80px; } /* smaller header on tablet */
.hbav-history__milestone--full-bleed { height: 420px; }
.hbav-history__full-bleed-content .hbav-history__milestone-heading {
font-size: 30px !important;
}
}
@media (max-width: 768px) {
.hbav-history__intro-section { padding: 56px var(--content-gutter) 40px; }
.hbav-history__decade { position: relative; top: auto; }
.hbav-history__milestone--pull-quote { padding: 60px var(--content-gutter); }
.hbav-history__pull-quote-text { font-size: 20px !important; }
.hbav-history__milestone--full-bleed { height: 360px; }
}
/* ==========================================================================
MISSION, VISION & VALUES BLOCK — acf/hbav-about-mvv
About page. Two-column header + values eyebrow + values grid.
========================================================================== */
.hbav-mvv {
padding: 100px var(--content-gutter);
background: #fff;
}
.hbav-mvv__inner {
max-width: var(--content-max);
margin: 0 auto;
}
/* ── TWO-COLUMN HEADER ────────────────────────────────────────────────────── */
/* Eyebrow + h2 live inside the LEFT column, vertically aligned with vision */
.hbav-mvv__header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 64px;
align-items: start;
}
.hbav-mvv__header > * {
margin: 0 !important;
width: auto !important;
flex: unset !important;
}
/* Left column — eyebrow sits directly on top of h2, no extra margin above */
.hbav-mvv__mission-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* hbav-pts-label inline style handles color; keep spacing tight to h2 */
.hbav-mvv__mission-col .hbav-pts-label {
margin-bottom: 10px !important;
}
.hbav-mvv__heading {
font-family: var(--font-display) !important;
font-size: 42px !important;
font-weight: 800 !important;
color: var(--hbav-blue) !important;
line-height: 1.1 !important;
margin: 0 0 28px !important;
}
/* Mission pull-quote — italic, green left border */
.hbav-mvv__mission {
font-family: var(--font-display) !important;
font-size: 22px !important;
font-style: italic !important;
color: var(--hbav-blue) !important;
line-height: 1.6 !important;
border-left: 4px solid var(--hbav-green);
padding-left: 28px;
margin: 0;
}
/* Right column */
.hbav-mvv__vision-col {
padding-top: 4px; /* optical alignment with eyebrow in left col */
}
.hbav-mvv__vision-label {
display: block !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
color: var(--hbav-green) !important;
margin-bottom: 14px !important;
}
.hbav-mvv__vision-body p {
font-family: var(--font-body);
font-size: 17px;
color: #555; /* explicit */
line-height: 1.85;
margin: 0 0 16px;
}
.hbav-mvv__vision-body p:last-child { margin-bottom: 0; }
/* ── VALUES LEAD ──────────────────────────────────────────────────────────── */
/* Green eyebrow label only — no h3, no paragraph */
.hbav-mvv__values-lead {
margin-bottom: 20px;
}
/* ── VALUES GRID ──────────────────────────────────────────────────────────── */
.hbav-mvv__values {
display: grid;
grid-template-columns: repeat( var(--mvv-cols, 5), 1fr );
gap: 2px;
background: var(--gray-200);
border: 2px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
}
.hbav-mvv__value {
background: #fff;
padding: 36px 28px;
position: relative;
transition: background 0.2s;
}
.hbav-mvv__value::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--hbav-green);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.hbav-mvv__value:hover { background: var(--gray-50); }
.hbav-mvv__value:hover::before { transform: scaleX(1); }
.hbav-mvv__value-num {
font-family: var(--font-display) !important;
font-size: 44px !important;
font-weight: 800 !important;
color: var(--gray-100) !important; /* large decorative numeral */
line-height: 1 !important;
margin-bottom: 14px;
}
.hbav-mvv__value-heading {
font-family: var(--font-display) !important;
font-size: 19px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin: 0 0 8px !important;
}
.hbav-mvv__value-body {
font-family: var(--font-body) !important;
font-size: 14px !important;
color: #777 !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-mvv { padding: 72px var(--content-gutter); }
.hbav-mvv__header { grid-template-columns: 1fr; gap: 40px; }
.hbav-mvv__values { grid-template-columns: repeat(3, 1fr); }
.hbav-mvv__heading { font-size: 34px !important; }
}
@media (max-width: 768px) {
.hbav-mvv { padding: 56px var(--content-gutter); }
.hbav-mvv__values { grid-template-columns: repeat(2, 1fr); }
.hbav-mvv__mission { font-size: 19px !important; }
}
@media (max-width: 480px) {
.hbav-mvv__values { grid-template-columns: 1fr; }
}
/* ==========================================================================
STAFF GRID — acf/hbav-staff-grid
5-col portrait cards with click-to-modal. 3/4 aspect ratio photos.
WP_Query on hbav_person filtered by role_type = 'staff',
ordered by person_sort_order ASC.
========================================================================== */
.wp-block-acf-hbav-staff-grid {
padding: 100px var(--content-gutter);
background: #fff;
overflow: hidden;
}
.hbav-staff__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-staff__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 56px;
}
.hbav-staff__inquiry-link {
font-size: 13px;
font-weight: 700;
color: var(--hbav-green);
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: color var(--ease);
}
.hbav-staff__inquiry-link:hover { color: var(--hbav-blue); }
.hbav-staff__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
.staff-card {
display: flex;
flex-direction: column;
cursor: default;
}
.staff-card.has-modal { cursor: pointer; }
.staff-card__photo {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 8px;
display: block;
margin-bottom: 20px;
background: linear-gradient(135deg, #e8eef4 0%, #cdd8e3 100%);
overflow: hidden;
}
.staff-card__photo-placeholder {
width: 100%;
aspect-ratio: 3 / 4;
background: linear-gradient(135deg, #e8eef4 0%, #cdd8e3 100%);
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
opacity: 0.3;
}
.staff-card__name {
font-family: var(--font-display) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin: 0 0 4px !important;
transition: color var(--ease);
}
.staff-card.has-modal:hover .staff-card__name {
color: var(--hbav-green) !important;
}
.staff-card.has-modal .staff-card__name::after {
content: ' \2197';
font-size: 11px;
color: var(--hbav-green);
opacity: 0;
transition: opacity var(--ease);
}
.staff-card.has-modal:hover .staff-card__name::after { opacity: 1; }
.staff-card__title {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 700 !important;
color: var(--hbav-green) !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin: 0 0 14px !important;
line-height: 1.4 !important;
}
.staff-card__contact {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
}
.staff-card__contact a {
font-size: 13px;
color: #888;
text-decoration: none;
transition: color var(--ease-fast);
}
.staff-card__contact a:hover { color: var(--hbav-blue); }
@media (max-width: 1200px) {
.hbav-staff__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
.wp-block-acf-hbav-staff-grid { padding: 72px var(--content-gutter); }
.hbav-staff__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.hbav-staff__grid { grid-template-columns: repeat(2, 1fr); }
.hbav-staff__header { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* ==========================================================================
BOARD PRESIDENT SPOTLIGHT — acf/hbav-president-spot
Full-width split: landscape photo left, blue bio panel right.
========================================================================== */
.wp-block-acf-hbav-president-spot {
background: var(--gray-50);
overflow: hidden;
}
.hbav-president__inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
min-height: 580px;
}
.hbav-president__photo {
background-size: cover;
background-position: center top;
position: relative;
min-height: 420px;
}
.hbav-president__badge {
position: absolute;
bottom: 28px;
left: 28px;
background: var(--hbav-green);
color: #fff;
padding: 8px 18px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
}
.hbav-president__content {
background: var(--hbav-blue);
padding: 72px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hbav-president__eyebrow {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
color: var(--hbav-green) !important;
margin: 0 0 14px !important;
}
.hbav-president__name {
font-family: var(--font-display) !important;
font-size: 42px !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.1 !important;
margin: 0 0 6px !important;
}
.hbav-president__company {
font-family: var(--font-body) !important;
font-size: 15px !important;
color: rgba(255,255,255,0.6) !important;
margin: 0 0 2px !important;
}
.hbav-president__hba {
font-family: var(--font-body) !important;
font-size: 13px !important;
color: rgba(255,255,255,0.38) !important;
font-style: italic !important;
margin: 0 0 32px !important;
}
.hbav-president__bio {
font-family: var(--font-body) !important;
font-size: 15px !important;
color: rgba(255,255,255,0.72) !important;
line-height: 1.85 !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-top: 28px !important;
margin: 0 !important;
}
@media (max-width: 1024px) {
.hbav-president__inner { grid-template-columns: 1fr; }
.hbav-president__photo { min-height: 400px; }
.hbav-president__content { padding: 52px var(--content-gutter); }
.hbav-president__name { font-size: 34px !important; }
}
@media (max-width: 768px) {
.hbav-president__content { padding: 40px var(--content-gutter); }
.hbav-president__name { font-size: 28px !important; }
}
/* ==========================================================================
EXECUTIVE COMMITTEE — acf/hbav-exec-committee
COMMITTEE CHAIRS — acf/hbav-committee-chairs
Shared .exec-card component. 4-col circle grid. No modal.
========================================================================== */
.wp-block-acf-hbav-exec-committee {
padding: 100px var(--content-gutter);
background: #fff;
overflow: hidden;
}
.wp-block-acf-hbav-committee-chairs {
padding: 100px var(--content-gutter);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
overflow: hidden;
}
.hbav-exec__inner,
.hbav-chairs__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-exec__grid,
.hbav-chairs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px;
margin-top: 56px;
}
.exec-card { text-align: center; }
.exec-card__photo {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 18px;
display: block;
border: 3px solid var(--gray-200);
transition: border-color var(--ease);
overflow: hidden;
}
.exec-card__photo-placeholder {
width: 160px;
height: 160px;
border-radius: 50%;
background: linear-gradient(135deg, #e8eef4 0%, #cdd8e3 100%);
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
opacity: 0.3;
border: 3px solid var(--gray-200);
transition: border-color var(--ease);
}
.exec-card:hover .exec-card__photo,
.exec-card:hover .exec-card__photo-placeholder {
border-color: var(--hbav-green);
}
.exec-card__name {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin: 0 0 4px !important;
}
.exec-card__title {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: var(--hbav-green) !important;
margin: 0 0 8px !important;
}
.exec-card__company {
font-family: var(--font-body) !important;
font-size: 13px !important;
color: #888 !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.exec-card__hba {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: #bbb !important;
font-style: italic !important;
margin: 3px 0 0 !important;
}
@media (max-width: 1200px) {
.hbav-exec__grid,
.hbav-chairs__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.wp-block-acf-hbav-exec-committee,
.wp-block-acf-hbav-committee-chairs { padding: 72px var(--content-gutter); }
}
@media (max-width: 768px) {
.hbav-exec__grid,
.hbav-chairs__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
LOCAL REPS — acf/hbav-local-reps
4-col compact bordered cards. 80px circle photo. No modal.
========================================================================== */
.wp-block-acf-hbav-local-reps {
padding: 100px var(--content-gutter);
background: #fff;
overflow: hidden;
}
.hbav-reps__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-reps__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 56px;
}
.rep-card {
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 28px 20px;
text-align: center;
background: #fff;
transition: box-shadow var(--ease), border-color var(--ease);
}
.rep-card:hover {
box-shadow: 0 6px 20px rgba(0,55,100,0.08);
border-color: var(--hbav-green);
}
.rep-card__photo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 14px;
display: block;
overflow: hidden;
}
.rep-card__photo-placeholder {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #e8eef4 0%, #cdd8e3 100%);
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
opacity: 0.35;
}
.rep-card__name {
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin: 0 0 4px !important;
}
.rep-card__company {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: #888 !important;
line-height: 1.4 !important;
margin: 0 0 6px !important;
}
.rep-card__hba {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--hbav-green) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin: 0 !important;
}
@media (max-width: 1200px) {
.hbav-reps__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.wp-block-acf-hbav-local-reps { padding: 72px var(--content-gutter); }
}
@media (max-width: 768px) {
.hbav-reps__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
PAST PRESIDENTS — acf/hbav-past-presidents
4-col list grid. Year + Name + Company per row.
========================================================================== */
.wp-block-acf-hbav-past-presidents {
padding: 100px var(--content-gutter);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
overflow: hidden;
}
.hbav-past__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-past__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: var(--gray-200);
border: 2px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
margin: 0;
padding: 0;
}
.past-president-item {
background: #fff;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 12px;
transition: background var(--ease-fast);
}
.past-president-item:hover { background: var(--gray-50); }
.past-president-item__year {
font-family: var(--font-display) !important;
font-size: 12px !important;
font-weight: 700 !important;
color: var(--hbav-green) !important;
white-space: nowrap;
min-width: 72px;
margin: 0 !important;
}
.past-president-item__name {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hbav-blue) !important;
margin: 0 !important;
}
.past-president-item__company {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: #aaa !important;
margin: 2px 0 0 !important;
}
@media (max-width: 1200px) {
.hbav-past__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.wp-block-acf-hbav-past-presidents { padding: 72px var(--content-gutter); }
}
@media (max-width: 768px) {
.hbav-past__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.hbav-past__list { grid-template-columns: 1fr; }
}
/* ==========================================================================
STRATEGIC PLAN CTA — acf/hbav-strategic-plan
Blue full-width section with two download buttons.
========================================================================== */
.wp-block-acf-hbav-strategic-plan {
padding: 100px var(--content-gutter);
background: var(--hbav-blue);
overflow: hidden;
}
.hbav-strategic__inner {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: center;
}
.hbav-strategic__eyebrow {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px !important;
color: var(--hbav-green) !important;
margin: 0 0 16px !important;
}
.hbav-strategic__title {
font-family: var(--font-display) !important;
font-size: 48px !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.1 !important;
margin: 0 0 20px !important;
}
.hbav-strategic__body {
font-family: var(--font-body) !important;
font-size: 17px !important;
color: rgba(255,255,255,0.7) !important;
line-height: 1.8 !important;
max-width: 600px;
margin: 0 !important;
}
.hbav-strategic__actions {
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
}
.hbav-strategic__btn-primary {
background: var(--hbav-green);
color: #fff;
padding: 18px 40px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
text-decoration: none;
display: block;
text-align: center;
transition: all var(--ease);
}
.hbav-strategic__btn-primary:hover { background: #fff; color: var(--hbav-blue); }
.hbav-strategic__btn-secondary {
border: 1px solid rgba(255,255,255,0.3);
color: rgba(255,255,255,0.7);
padding: 17px 40px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
text-decoration: none;
display: block;
text-align: center;
transition: all var(--ease);
}
.hbav-strategic__btn-secondary:hover { border-color: #fff; color: #fff; }
@media (max-width: 1024px) {
.wp-block-acf-hbav-strategic-plan { padding: 72px var(--content-gutter); }
.hbav-strategic__inner { grid-template-columns: 1fr; gap: 40px; }
.hbav-strategic__title { font-size: 36px !important; }
.hbav-strategic__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 768px) {
.hbav-strategic__title { font-size: 28px !important; }
.hbav-strategic__actions { flex-direction: column; }
}
/* ==========================================================================
ABOUT PAGE SHARED HEADING
Used by hbav-staff-grid.php for all people section headings.
Matches the MVV heading style — display font, HBAV blue.
========================================================================== */
.hbav-about__heading {
font-family: var(--font-display) !important;
font-size: 42px !important;
font-weight: 800 !important;
color: var(--hbav-blue) !important;
line-height: 1.15 !important;
margin: 8px 0 0 !important;
}
@media (max-width: 1024px) {
.hbav-about__heading { font-size: 34px !important; }
}
@media (max-width: 768px) {
.hbav-about__heading { font-size: 28px !important; }
}
/* Local reps intro paragraph */
.hbav-reps__intro {
font-family: var(--font-body);
font-size: 17px;
color: #555;
line-height: 1.8;
max-width: 680px;
margin: 12px 0 0;
}
/* Board president — kill any wrapper padding Kadence adds around the block */
.hbav-people-grid--board-president {
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.wp-block-acf-hbav-staff-grid.hbav-people-grid--board-president {
padding: 0 !important;
margin: 0 !important;
}
/* ==========================================================================
SUBNAV POSITION FIX
The subnav was sliding in at top:0, hiding behind the sticky header.
We use a CSS custom property --header-height (set by JS below) so the
subnav always clears the header regardless of viewport or admin bar state.
========================================================================== */
/* Default fallback — utility bar (37px) + header inner (110px) = 147px.
With WP admin bar (32px) = 179px. JS overrides this at runtime. */
:root {
--header-height: 147px;
}
.hbav-subnav {
top: var(--header-height) !important;
}
/* History decade bar — clears admin bar + subnav.
No sticky header on this site so top = admin bar (32px) + subnav (~54px) + breathing room (8px).
--subnav-height is set by the subnav JS on body style attribute. */
.hbav-history__decade {
top: calc( var(--subnav-height, 54px) + 0px ) !important;
}
@media screen {
.admin-bar .hbav-history__decade {
top: calc( 32px + var(--subnav-height, 54px) + 0px ) !important;
}
}
@media screen and (max-width: 782px) {
.admin-bar .hbav-history__decade {
top: calc( 46px + var(--subnav-height, 47px) + 8px ) !important;
}
}
/* ==========================================================================
ADMIN BAR OFFSET
WordPress adds margin-top: 32px to when the admin bar is showing.
position:fixed ignores that margin and anchors to the raw viewport top,
putting the subnav behind the admin bar. These rules compensate.
WordPress itself outputs these rules via the admin-bar stylesheet —
we mirror the same breakpoints so our fixed subnav tracks correctly.
========================================================================== */
/* Logged-in desktop — admin bar is 32px */
@media screen {
.admin-bar .hbav-subnav {
top: 32px !important;
}
}
/* Logged-in mobile — admin bar collapses to 46px */
@media screen and (max-width: 782px) {
.admin-bar .hbav-subnav {
top: 46px !important;
}
}
/* ==========================================================================
KILL BODY PADDING OSCILLATION
body.subnav-visible was adding padding-top equal to the subnav height.
This shifted #page-hero-trigger back into the viewport, causing checkTrigger
to call hideNav(), removing the padding, moving the trigger back out,
calling showNav() again — an infinite oscillation visible as a blip.
Since this site has no sticky header, the subnav floats over the content
when fixed — no padding compensation needed.
========================================================================== */
body.subnav-visible {
padding-top: 0 !important;
transition: none !important;
}
@media (max-width: 768px) {
body.subnav-visible {
padding-top: 0 !important;
}
}
/* ==========================================================================
ADVOCACY TOPIC PAGE — page-advocacy-topic.php
All sections: hero override, overview split, updates accordion,
resources grouped list, contact strip.
Add to style.css before the closing comment.
========================================================================== */
/* ── 1. HERO OVERRIDE ───────────────────────────────────────────────────── */
/* Condensed hero — less padding than the full page hero */
.hbav-topic-hero .ph-inner {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.hbav-topic-hero__eyebrow {
display: block;
color: var(--hbav-green) !important;
margin-bottom: 12px !important;
}
/* ── 2. OVERVIEW SPLIT ──────────────────────────────────────────────────── */
.hbav-topic-overview {
padding: 80px var(--content-gutter);
background: #fff;
}
.hbav-topic-overview__inner {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 400px;
gap: 64px;
align-items: start;
}
.hbav-topic-overview__col--left .hbav-pts-label {
display: block;
margin-bottom: 16px;
}
.hbav-topic-overview__body {
color: var(--gray-700);
font-size: 16px;
line-height: 1.8;
}
.hbav-topic-overview__body p { margin-bottom: 16px; }
.hbav-topic-overview__body p:last-child { margin-bottom: 0; }
.hbav-topic-overview__body ul {
padding-left: 20px;
margin-bottom: 16px;
}
.hbav-topic-overview__body li {
margin-bottom: 8px;
line-height: 1.7;
}
/* HBAV Role card — right column */
.hbav-topic-role-card {
background: var(--hbav-blue);
border-radius: 10px;
padding: 40px 36px;
position: sticky;
top: calc( var(--subnav-height, 54px) + 16px );
}
.hbav-topic-role-card__eyebrow {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2.5px;
color: var(--hbav-green) !important;
margin-bottom: 20px !important;
display: block;
}
.hbav-topic-role-card__body {
color: rgba(255,255,255,0.85) !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
.hbav-topic-role-card__body p { margin-bottom: 14px; }
.hbav-topic-role-card__body p:last-child { margin-bottom: 0; }
.hbav-topic-role-card__body ul {
padding-left: 18px;
margin-bottom: 14px;
}
.hbav-topic-role-card__body li {
margin-bottom: 8px;
color: rgba(255,255,255,0.8) !important;
}
/* ── 3. UPDATES ACCORDION ───────────────────────────────────────────────── */
.hbav-topic-updates {
padding: 80px var(--content-gutter);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
}
.hbav-topic-updates__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-topic-updates__header {
margin-bottom: 48px;
}
.hbav-topic-updates__header .hbav-pts-label {
display: block;
margin-bottom: 10px;
}
.hbav-topic-updates__heading {
font-family: var(--font-display) !important;
font-size: 32px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
}
.hbav-topic-updates__list {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Individual update card */
.hbav-topic-update-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
}
.hbav-topic-update-card__toggle {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s ease;
}
.hbav-topic-update-card__toggle:hover {
background: var(--gray-50);
}
.hbav-topic-update-card__toggle[aria-expanded="true"] {
background: var(--hbav-blue);
}
.hbav-topic-update-card__toggle[aria-expanded="true"] .hbav-topic-update-card__date {
color: var(--hbav-green) !important;
}
.hbav-topic-update-card__toggle[aria-expanded="true"] .hbav-topic-update-card__headline {
color: #fff !important;
}
.hbav-topic-update-card__toggle[aria-expanded="true"] .hbav-topic-update-card__icon {
color: #fff !important;
background: rgba(255,255,255,0.15) !important;
}
.hbav-topic-update-card__date {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px;
color: var(--hbav-green) !important;
white-space: nowrap;
flex-shrink: 0;
min-width: 100px;
}
.hbav-topic-update-card__headline {
flex: 1;
font-family: var(--font-display) !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--hbav-blue) !important;
line-height: 1.3;
}
.hbav-topic-update-card__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--hbav-blue);
line-height: 1;
font-family: var(--font-body) !important;
font-weight: 300;
transition: background 0.15s ease, color 0.15s ease;
}
.hbav-topic-update-card__body {
padding: 24px 24px 28px;
border-top: 1px solid var(--gray-200);
color: var(--gray-700) !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
.hbav-topic-update-card__body p { margin-bottom: 12px; }
.hbav-topic-update-card__body p:last-child { margin-bottom: 0; }
.hbav-topic-update-card__body ul { padding-left: 20px; margin-bottom: 12px; }
.hbav-topic-update-card__body li { margin-bottom: 6px; }
.hbav-topic-update-card__cta {
display: inline-block;
margin-top: 20px;
padding: 10px 22px;
background: var(--hbav-green);
color: #fff !important;
border-radius: 4px;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px;
text-decoration: none !important;
transition: background 0.2s ease;
}
.hbav-topic-update-card__cta:hover {
background: var(--hbav-blue) !important;
color: #fff !important;
}
/* ── 4. RESOURCE LINKS ──────────────────────────────────────────────────── */
.hbav-topic-resources {
padding: 80px var(--content-gutter);
background: #fff;
border-top: 1px solid var(--gray-200);
}
.hbav-topic-resources__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-topic-resources__header {
margin-bottom: 48px;
}
.hbav-topic-resources__header .hbav-pts-label {
display: block;
margin-bottom: 10px;
}
.hbav-topic-resources__heading {
font-family: var(--font-display) !important;
font-size: 32px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
}
.hbav-topic-resources__groups {
display: flex;
flex-direction: column;
gap: 40px;
}
.hbav-topic-resources__year {
font-family: var(--font-display) !important;
font-size: 20px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
padding-bottom: 12px;
border-bottom: 2px solid var(--hbav-green);
margin-bottom: 16px !important;
display: inline-block;
}
.hbav-topic-resources__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hbav-topic-resources__item {
border-bottom: 1px solid var(--gray-100);
}
.hbav-topic-resources__link {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
color: var(--gray-700) !important;
text-decoration: none !important;
font-size: 15px !important;
line-height: 1.4;
transition: color 0.15s ease;
}
.hbav-topic-resources__link:hover {
color: var(--hbav-blue) !important;
}
.hbav-topic-resources__link-icon {
flex-shrink: 0;
color: var(--hbav-green);
font-size: 16px;
transition: transform 0.15s ease;
}
.hbav-topic-resources__link:hover .hbav-topic-resources__link-icon {
transform: translateX(3px);
}
/* ── 5. CONTACT STRIP ───────────────────────────────────────────────────── */
.hbav-topic-contacts {
padding: 80px var(--content-gutter);
background: var(--hbav-blue);
}
.hbav-topic-contacts__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-topic-contacts__header {
margin-bottom: 48px;
}
.hbav-topic-contacts__header .hbav-pts-label {
display: block;
margin-bottom: 10px;
}
.hbav-topic-contacts__heading {
font-family: var(--font-display) !important;
font-size: 32px !important;
font-weight: 700 !important;
color: #fff !important;
}
.hbav-topic-contacts__row {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
/* Override contact-card for blue background context */
.hbav-topic-contacts .contact-card {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: none !important;
}
.hbav-topic-contacts .contact-card:hover {
background: rgba(255,255,255,0.14) !important;
box-shadow: none !important;
}
.hbav-topic-contacts .contact-card__name {
color: #fff !important;
}
.hbav-topic-contacts .contact-card__title {
color: var(--hbav-green) !important;
}
.hbav-topic-contacts .contact-card__links a {
color: rgba(255,255,255,0.7) !important;
}
.hbav-topic-contacts .contact-card__links a:hover {
color: #fff !important;
}
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hbav-topic-overview__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.hbav-topic-role-card {
position: static;
}
}
@media (max-width: 768px) {
.hbav-topic-overview,
.hbav-topic-updates,
.hbav-topic-resources,
.hbav-topic-contacts {
padding: 60px var(--content-gutter);
}
.hbav-topic-update-card__toggle {
flex-wrap: wrap;
gap: 8px;
}
.hbav-topic-update-card__date {
min-width: auto;
width: 100%;
}
.hbav-topic-contacts__row {
flex-direction: column;
}
.hbav-topic-contacts .contact-card {
width: 100% !important;
}
}
/* ==========================================================================
ADVOCACY TOPIC PAGE — page-advocacy-topic.php
Matches v4 mockup exactly.
Append to style.css.
========================================================================== */
/* ── TOPIC HERO ─────────────────────────────────────────────────────────── */
.topic-hero {
position: relative;
background: var(--hbav-blue);
padding: 90px var(--content-gutter) 80px;
overflow: hidden;
}
.topic-hero__bg {
position: absolute; inset: 0;
background: url('https://superbskirtlunchroom.stellarwp.site/wp-content/uploads/2026/04/DC9A4870-scaled.jpg') center/cover no-repeat;
opacity: 0.12;
}
.topic-hero__gradient {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0,55,100,0.97) 0%, rgba(0,80,122,0.93) 60%, rgba(0,55,100,0.85) 100%);
}
.topic-hero__diagonal {
position: absolute; top: 0; right: 0;
width: 45%; height: 100%;
background: linear-gradient(to left, rgba(0,191,99,0.06), transparent);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
.topic-hero__inner {
max-width: var(--content-max);
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: end;
}
.topic-hero__breadcrumb {
display: flex; gap: 8px; align-items: center;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 24px;
}
.topic-hero__breadcrumb a { color: rgba(255,255,255,0.45) !important; text-decoration: none !important; transition: color 0.2s; }
.topic-hero__breadcrumb a:hover { color: var(--hbav-green) !important; }
.topic-hero__breadcrumb span { color: rgba(255,255,255,0.2); }
.topic-hero__breadcrumb .current { color: rgba(255,255,255,0.45); }
.topic-hero__eyebrow {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 3px;
color: var(--hbav-green) !important;
display: block; margin-bottom: 14px !important;
font-family: var(--font-body) !important;
}
.topic-hero h1 {
font-family: var(--font-display) !important;
font-size: 58px !important; font-weight: 800 !important;
color: #fff !important; line-height: 1.02 !important;
margin-bottom: 24px !important;
}
.topic-hero__subhead {
font-size: 18px !important;
color: rgba(255,255,255,0.72) !important;
line-height: 1.75 !important;
max-width: 620px;
font-family: var(--font-body) !important;
}
/* Topic nav pills — right column */
.topic-hero__nav {
display: flex; flex-direction: column; gap: 10px;
flex-shrink: 0; min-width: 220px;
}
.topic-hero__nav-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
color: rgba(255,255,255,0.35);
display: block; margin-bottom: 6px;
font-family: var(--font-body) !important;
}
.topic-nav-pill {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
text-decoration: none !important;
font-size: 13px !important; font-weight: 600 !important;
color: rgba(255,255,255,0.65) !important;
transition: all 0.2s; gap: 12px;
font-family: var(--font-body) !important;
}
.topic-nav-pill:hover {
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.2) !important;
}
.topic-nav-pill.active {
background: rgba(0,191,99,0.15) !important;
border-color: rgba(0,191,99,0.4) !important;
color: #fff !important;
}
.topic-nav-pill.active .pill-arrow { color: var(--hbav-green) !important; }
.pill-arrow { font-size: 12px; flex-shrink: 0; }
/* ── PAGE SUBNAV ────────────────────────────────────────────────────────── */
.topic-page-subnav {
position: sticky; top: 0; z-index: 90;
background: #fff;
border-bottom: 3px solid var(--gray-200);
box-shadow: 0 2px 10px rgba(0,55,100,0.07);
}
.topic-page-subnav__inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-gutter);
display: flex; justify-content: space-between; align-items: center;
}
.topic-page-subnav__list {
display: flex; gap: 0; list-style: none;
overflow-x: auto; scrollbar-width: none;
}
.topic-page-subnav__list::-webkit-scrollbar { display: none; }
.topic-page-subnav__list li { flex-shrink: 0; }
.topic-page-subnav__link {
display: block; padding: 17px 20px;
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--gray-700) !important;
text-decoration: none !important; white-space: nowrap;
border-bottom: 3px solid transparent; margin-bottom: -3px;
transition: color 0.2s;
font-family: var(--font-body) !important;
}
.topic-page-subnav__link:hover { color: var(--hbav-blue) !important; }
.topic-page-subnav__link.is-active {
color: var(--hbav-blue) !important;
border-bottom-color: var(--hbav-blue) !important;
}
.topic-page-subnav__back {
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: rgba(0,55,100,0.45) !important;
text-decoration: none !important; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
padding: 17px 0; flex-shrink: 0;
transition: color 0.2s;
font-family: var(--font-body) !important;
}
.topic-page-subnav__back:hover { color: var(--hbav-green) !important; }
/* ── SHARED HEADING STYLES ──────────────────────────────────────────────── */
.topic-section-heading {
font-family: var(--font-display) !important;
font-size: 36px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
line-height: 1.1 !important;
margin-top: 8px !important; margin-bottom: 24px !important;
}
/* ── OVERVIEW + ROLE ────────────────────────────────────────────────────── */
.topic-overview-section {
padding: 96px var(--content-gutter) 80px;
background: #fff;
}
.topic-overview__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.topic-overview__body { font-size: 16px; color: var(--gray-700); line-height: 1.8; }
.topic-overview__body p { margin-bottom: 18px; }
.topic-overview__body p:last-child { margin-bottom: 0; }
.topic-overview__body ul { padding-left: 20px; margin-bottom: 18px; }
.topic-overview__body li { margin-bottom: 8px; line-height: 1.7; }
/* Role panel — gray with green top border */
.topic-role-panel {
background: var(--gray-50);
border-radius: 10px;
padding: 40px 44px;
border-top: 4px solid var(--hbav-green);
}
.topic-role-panel__body { font-size: 15px; color: var(--gray-700); line-height: 1.8; }
.topic-role-panel__body p { margin-bottom: 14px; }
.topic-role-panel__body p:last-child { margin-bottom: 0; }
.topic-role-panel__body ul { padding-left: 20px; margin-bottom: 14px; }
.topic-role-panel__body li { margin-bottom: 8px; }
/* ── PROCESS STEPS ──────────────────────────────────────────────────────── */
.topic-process-section {
padding: 0 var(--content-gutter) 96px;
background: #fff;
}
.topic-process__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-process__intro { max-width: 680px; margin-bottom: 52px; }
.topic-process__intro p { font-size: 16px; color: var(--gray-700); line-height: 1.8; margin-top: 12px; }
.topic-process__steps {
display: grid;
grid-template-columns: repeat( var(--step-count, 7), 1fr );
gap: 0;
position: relative;
}
.topic-process__steps::before {
content: '';
position: absolute;
top: 28px;
left: calc(100% / (var(--step-count, 7) * 2));
right: calc(100% / (var(--step-count, 7) * 2));
height: 2px;
background: linear-gradient(to right, var(--hbav-green), #00507a);
z-index: 0;
}
.topic-process__step {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 8px;
position: relative; z-index: 1;
}
.topic-process__step-num {
width: 56px; height: 56px; border-radius: 50%;
background: var(--hbav-blue); color: #fff;
font-family: var(--font-display) !important;
font-size: 20px !important; font-weight: 800 !important;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,55,100,0.25);
}
.topic-process__step:nth-child(even) .topic-process__step-num { background: #00507a; }
.topic-process__step-title {
font-family: var(--font-body) !important;
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--hbav-blue) !important;
line-height: 1.3; margin-bottom: 8px !important;
}
.topic-process__step-body {
font-size: 12px !important; color: var(--gray-700) !important; line-height: 1.6 !important;
}
.topic-process__note {
margin-top: 32px;
background: rgba(0,191,99,0.08);
border: 1px solid rgba(0,191,99,0.25);
border-radius: 8px;
padding: 18px 24px;
font-size: 14px; color: var(--gray-700); line-height: 1.6;
}
.topic-process__note strong { color: var(--hbav-blue) !important; }
/* ── UPDATES + RESOURCES ────────────────────────────────────────────────── */
.topic-content-section {
padding: 80px var(--content-gutter);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
}
.topic-content__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-content__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: start;
}
.topic-col-header { margin-bottom: 36px; }
.topic-col-heading {
font-family: var(--font-display) !important;
font-size: 30px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin-top: 8px !important;
}
/* Update cards */
.topic-update-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 28px 32px;
margin-bottom: 18px;
transition: box-shadow 0.2s;
}
.topic-update-card:last-child { margin-bottom: 0; }
.topic-update-card:hover { box-shadow: 0 4px 18px rgba(0,55,100,0.08); }
.topic-update-card__date {
font-size: 10px !important; font-weight: 800 !important;
text-transform: uppercase !important; letter-spacing: 2.5px;
color: var(--hbav-green) !important;
display: block; margin-bottom: 8px !important;
font-family: var(--font-body) !important;
}
.topic-update-card__title {
font-family: var(--font-display) !important;
font-size: 19px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
line-height: 1.25 !important; margin-bottom: 12px !important;
}
.topic-update-card__body { font-size: 14px !important; color: var(--gray-700) !important; line-height: 1.75 !important; margin-bottom: 16px; }
.topic-update-card__body p { margin-bottom: 10px; }
.topic-update-card__body p:last-child { margin-bottom: 0; }
.topic-update-card__links {
display: flex; flex-wrap: wrap; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--gray-100);
}
.topic-update-link {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--hbav-blue) !important;
text-decoration: none !important;
padding: 5px 12px;
border: 1px solid var(--gray-300);
border-radius: 4px;
transition: all 0.2s; white-space: nowrap;
}
.topic-update-link:hover {
background: var(--hbav-blue) !important;
color: #fff !important;
border-color: var(--hbav-blue) !important;
}
/* Resources sticky panel */
.topic-resources-sticky {
position: sticky;
top: 72px;
}
.topic-resources-panel {
background: var(--hbav-blue);
border-radius: 10px;
overflow: hidden;
}
.topic-resources-panel__header {
padding: 28px 32px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topic-resources-panel__heading {
font-family: var(--font-display) !important;
font-size: 24px !important; font-weight: 700 !important;
color: #fff !important; margin-top: 6px !important;
}
.topic-resources-year-group { padding: 0 32px; }
.topic-resources-year-group:last-child { padding-bottom: 28px; }
.topic-resources-year-label {
font-size: 10px !important; font-weight: 800 !important;
text-transform: uppercase !important; letter-spacing: 3px;
color: var(--hbav-green) !important;
display: block;
padding: 18px 0 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 4px !important;
font-family: var(--font-body) !important;
}
.topic-resource-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none !important;
gap: 14px;
transition: padding-left 0.15s;
}
.topic-resource-item:last-child { border-bottom: none; }
.topic-resource-item:hover { padding-left: 6px; }
.topic-resource-item__label {
font-size: 13px !important; color: rgba(255,255,255,0.8) !important;
line-height: 1.45; flex: 1; transition: color 0.15s;
}
.topic-resource-item:hover .topic-resource-item__label { color: var(--hbav-green) !important; }
.topic-resource-item__arrow {
font-size: 11px !important; font-weight: 700 !important;
color: rgba(255,255,255,0.3) !important;
flex-shrink: 0; transition: color 0.15s;
}
.topic-resource-item:hover .topic-resource-item__arrow { color: var(--hbav-green) !important; }
/* ── CONTACT SECTION ────────────────────────────────────────────────────── */
.topic-contact-section {
padding: 80px var(--content-gutter);
background: #fff;
border-top: 1px solid var(--gray-200);
}
.topic-contact__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-contact__header { max-width: 600px; margin-bottom: 52px; }
.topic-contact__header p { font-size: 16px; color: var(--gray-700); line-height: 1.7; margin-top: 14px; }
.topic-contact__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.topic-contact-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--gray-200);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column;
}
.topic-contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,55,100,0.1);
}
.topic-contact-card__photo {
height: 260px;
background-size: cover;
background-position: center 15%;
}
.topic-contact-card__photo--placeholder {
display: flex; align-items: center; justify-content: center;
background: var(--hbav-blue);
color: #fff;
font-family: var(--font-display) !important;
font-size: 48px !important; font-weight: 700 !important;
}
.topic-contact-card__body {
padding: 20px 24px 24px;
flex: 1; display: flex; flex-direction: column;
}
.topic-contact-card__name {
font-family: var(--font-display) !important;
font-size: 20px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important; margin-bottom: 4px !important;
}
.topic-contact-card__title {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1.5px;
color: var(--hbav-green) !important; margin-bottom: 16px !important;
font-family: var(--font-body) !important;
}
.topic-contact-card__links {
display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.topic-contact-card__links a {
font-size: 13px !important; color: var(--gray-700) !important;
display: flex; align-items: center; gap: 8px;
text-decoration: none !important; transition: color 0.2s;
}
.topic-contact-card__links a:hover { color: var(--hbav-green) !important; }
.topic-contact-card__links a::before {
content: '';
width: 12px; height: 12px; flex-shrink: 0;
background: var(--hbav-green); border-radius: 2px; display: inline-block;
}
.topic-contact-card__links a.email::before {
clip-path: polygon(0 20%, 50% 60%, 100% 20%, 100% 80%, 0 80%);
}
.topic-contact-card__links a.phone::before {
clip-path: polygon(20% 0,80% 0,70% 50%,100% 80%,80% 100%,50% 85%,20% 100%,0 80%,30% 50%);
}
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.topic-hero__inner { grid-template-columns: 1fr; }
.topic-hero__nav { display: none; }
.topic-overview__grid { grid-template-columns: 1fr; gap: 40px; }
.topic-content__grid { grid-template-columns: 1fr; }
.topic-resources-sticky { position: static; }
.topic-process__steps { grid-template-columns: repeat(4, 1fr) !important; }
.topic-process__steps::before { display: none; }
.topic-contact__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.topic-hero { padding: 60px var(--content-gutter); }
.topic-hero h1 { font-size: 38px !important; }
.topic-process__steps { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
.topic-contact__row { grid-template-columns: 1fr; }
}
/* ==========================================================================
ADVOCACY TOPIC PAGE — page-advocacy-topic.php
Matches v4 mockup exactly.
Append to style.css.
========================================================================== */
/* ── TOPIC HERO ─────────────────────────────────────────────────────────── */
.topic-hero {
position: relative;
background: var(--hbav-blue);
padding: 90px var(--content-gutter) 80px;
overflow: hidden;
}
.topic-hero__bg {
position: absolute; inset: 0;
background: url('https://superbskirtlunchroom.stellarwp.site/wp-content/uploads/2026/04/DC9A4870-scaled.jpg') center/cover no-repeat;
opacity: 0.12;
}
.topic-hero__gradient {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0,55,100,0.97) 0%, rgba(0,80,122,0.93) 60%, rgba(0,55,100,0.85) 100%);
}
.topic-hero__diagonal {
position: absolute; top: 0; right: 0;
width: 45%; height: 100%;
background: linear-gradient(to left, rgba(0,191,99,0.06), transparent);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
.topic-hero__inner {
max-width: var(--content-max);
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: end;
}
.topic-hero__breadcrumb {
display: flex; gap: 8px; align-items: center;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 24px;
}
.topic-hero__breadcrumb a { color: rgba(255,255,255,0.45) !important; text-decoration: none !important; transition: color 0.2s; }
.topic-hero__breadcrumb a:hover { color: var(--hbav-green) !important; }
.topic-hero__breadcrumb span { color: rgba(255,255,255,0.2); }
.topic-hero__breadcrumb .current { color: rgba(255,255,255,0.45); }
.topic-hero__eyebrow {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 3px;
color: var(--hbav-green) !important;
display: block; margin-bottom: 14px !important;
font-family: var(--font-body) !important;
}
.topic-hero h1 {
font-family: var(--font-display) !important;
font-size: 58px !important; font-weight: 800 !important;
color: #fff !important; line-height: 1.02 !important;
margin-bottom: 24px !important;
}
.topic-hero__subhead {
font-size: 18px !important;
color: rgba(255,255,255,0.72) !important;
line-height: 1.75 !important;
max-width: 620px;
font-family: var(--font-body) !important;
}
/* Topic nav pills — right column */
.topic-hero__nav {
display: flex; flex-direction: column; gap: 10px;
flex-shrink: 0; min-width: 220px;
}
.topic-hero__nav-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 2px;
color: rgba(255,255,255,0.35);
display: block; margin-bottom: 6px;
font-family: var(--font-body) !important;
}
.topic-nav-pill {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
text-decoration: none !important;
font-size: 13px !important; font-weight: 600 !important;
color: rgba(255,255,255,0.65) !important;
transition: all 0.2s; gap: 12px;
font-family: var(--font-body) !important;
}
.topic-nav-pill:hover {
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.2) !important;
}
.topic-nav-pill.active {
background: rgba(0,191,99,0.15) !important;
border-color: rgba(0,191,99,0.4) !important;
color: #fff !important;
}
.topic-nav-pill.active .pill-arrow { color: var(--hbav-green) !important; }
.pill-arrow { font-size: 12px; flex-shrink: 0; }
/* ── PAGE SUBNAV ────────────────────────────────────────────────────────── */
.topic-page-subnav {
position: sticky; top: 0; z-index: 90;
background: #fff;
border-bottom: 3px solid var(--gray-200);
box-shadow: 0 2px 10px rgba(0,55,100,0.07);
}
.topic-page-subnav__inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--content-gutter);
display: flex; justify-content: space-between; align-items: center;
}
.topic-page-subnav__list {
display: flex; gap: 0; list-style: none;
overflow-x: auto; scrollbar-width: none;
}
.topic-page-subnav__list::-webkit-scrollbar { display: none; }
.topic-page-subnav__list li { flex-shrink: 0; display: flex; align-items: center; }
.topic-page-subnav__link {
display: block; padding: 17px 20px;
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--gray-700) !important;
text-decoration: none !important; white-space: nowrap;
border-bottom: 3px solid transparent; margin-bottom: -3px;
transition: color 0.2s;
font-family: var(--font-body) !important;
}
.topic-page-subnav__link:hover { color: var(--hbav-blue) !important; }
.topic-page-subnav__link.is-active {
color: var(--hbav-blue) !important;
border-bottom-color: var(--hbav-blue) !important;
}
.topic-page-subnav__back {
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: rgba(0,55,100,0.45) !important;
text-decoration: none !important; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
padding: 17px 0; flex-shrink: 0;
transition: color 0.2s;
font-family: var(--font-body) !important;
}
.topic-page-subnav__back:hover { color: var(--hbav-green) !important; }
/* ── SHARED HEADING STYLES ──────────────────────────────────────────────── */
.topic-section-heading {
font-family: var(--font-display) !important;
font-size: 36px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
line-height: 1.1 !important;
margin-top: 8px !important; margin-bottom: 24px !important;
}
/* ── OVERVIEW + ROLE ────────────────────────────────────────────────────── */
.topic-overview-section {
padding: 96px var(--content-gutter) 80px;
background: #fff;
}
.topic-overview__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.topic-overview__body { font-size: 16px; color: var(--gray-700); line-height: 1.8; }
.topic-overview__body p { margin-bottom: 18px; }
.topic-overview__body p:last-child { margin-bottom: 0; }
.topic-overview__body ul { padding-left: 20px; margin-bottom: 18px; }
.topic-overview__body li { margin-bottom: 8px; line-height: 1.7; }
/* Role panel — gray with green top border */
.topic-role-panel {
background: var(--gray-50);
border-radius: 10px;
padding: 40px 44px;
border-top: 4px solid var(--hbav-green);
}
.topic-role-panel__body { font-size: 15px; color: var(--gray-700); line-height: 1.8; }
.topic-role-panel__body p { margin-bottom: 14px; }
.topic-role-panel__body p:last-child { margin-bottom: 0; }
.topic-role-panel__body ul { padding-left: 20px; margin-bottom: 14px; }
.topic-role-panel__body li { margin-bottom: 8px; }
/* ── PROCESS STEPS ──────────────────────────────────────────────────────── */
.topic-process-section {
padding: 0 var(--content-gutter) 96px;
background: #fff;
}
.topic-process__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-process__intro { max-width: 680px; margin-bottom: 52px; }
.topic-process__intro p { font-size: 16px; color: var(--gray-700); line-height: 1.8; margin-top: 12px; }
.topic-process__steps {
display: grid;
grid-template-columns: repeat( var(--step-count, 7), 1fr );
gap: 0;
position: relative;
}
.topic-process__steps::before {
content: '';
position: absolute;
top: 28px;
left: calc(100% / (var(--step-count, 7) * 2));
right: calc(100% / (var(--step-count, 7) * 2));
height: 2px;
background: linear-gradient(to right, var(--hbav-green), #00507a);
z-index: 0;
}
.topic-process__step {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 0 8px;
position: relative; z-index: 1;
}
.topic-process__step-num {
width: 56px; height: 56px; border-radius: 50%;
background: var(--hbav-blue); color: #fff;
font-family: var(--font-display) !important;
font-size: 20px !important; font-weight: 800 !important;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,55,100,0.25);
}
.topic-process__step:nth-child(even) .topic-process__step-num { background: #00507a; }
.topic-process__step-title {
font-family: var(--font-body) !important;
font-size: 12px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--hbav-blue) !important;
line-height: 1.3; margin-bottom: 8px !important;
}
.topic-process__step-body {
font-size: 12px !important; color: var(--gray-700) !important; line-height: 1.6 !important;
}
.topic-process__note {
margin-top: 32px;
background: rgba(0,191,99,0.08);
border: 1px solid rgba(0,191,99,0.25);
border-radius: 8px;
padding: 18px 24px;
font-size: 14px; color: var(--gray-700); line-height: 1.6;
}
.topic-process__note strong { color: var(--hbav-blue) !important; }
/* ── UPDATES + RESOURCES ────────────────────────────────────────────────── */
.topic-content-section {
padding: 80px var(--content-gutter);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
}
.topic-content__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-content__grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: start;
}
.topic-col-header { margin-bottom: 36px; }
.topic-col-heading {
font-family: var(--font-display) !important;
font-size: 30px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin-top: 8px !important;
}
/* Update cards */
.topic-update-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 28px 32px;
margin-bottom: 18px;
transition: box-shadow 0.2s;
}
.topic-update-card:last-child { margin-bottom: 0; }
.topic-update-card:hover { box-shadow: 0 4px 18px rgba(0,55,100,0.08); }
.topic-update-card__date {
font-size: 10px !important; font-weight: 800 !important;
text-transform: uppercase !important; letter-spacing: 2.5px;
color: var(--hbav-green) !important;
display: block; margin-bottom: 8px !important;
font-family: var(--font-body) !important;
}
.topic-update-card__title {
font-family: var(--font-display) !important;
font-size: 19px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important;
line-height: 1.25 !important; margin-bottom: 12px !important;
}
.topic-update-card__body { font-size: 14px !important; color: var(--gray-700) !important; line-height: 1.75 !important; margin-bottom: 16px; }
.topic-update-card__body p { margin-bottom: 10px; }
.topic-update-card__body p:last-child { margin-bottom: 0; }
.topic-update-card__links {
display: flex; flex-wrap: wrap; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--gray-100);
}
.topic-update-link {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1px;
color: var(--hbav-blue) !important;
text-decoration: none !important;
padding: 5px 12px;
border: 1px solid var(--gray-300);
border-radius: 4px;
transition: all 0.2s; white-space: nowrap;
}
.topic-update-link:hover {
background: var(--hbav-blue) !important;
color: #fff !important;
border-color: var(--hbav-blue) !important;
}
/* Resources sticky panel */
.topic-resources-sticky {
position: sticky;
top: 72px;
}
.topic-resources-panel {
background: var(--hbav-blue);
border-radius: 10px;
overflow: hidden;
}
.topic-resources-panel__header {
padding: 28px 32px 24px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topic-resources-panel__heading {
font-family: var(--font-display) !important;
font-size: 24px !important; font-weight: 700 !important;
color: #fff !important; margin-top: 6px !important;
}
.topic-resources-year-group { padding: 0 32px; }
.topic-resources-year-group:last-child { padding-bottom: 28px; }
.topic-resources-year-label {
font-size: 10px !important; font-weight: 800 !important;
text-transform: uppercase !important; letter-spacing: 3px;
color: var(--hbav-green) !important;
display: block;
padding: 18px 0 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 4px !important;
font-family: var(--font-body) !important;
}
.topic-resource-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none !important;
gap: 14px;
transition: padding-left 0.15s;
}
.topic-resource-item:last-child { border-bottom: none; }
.topic-resource-item:hover { padding-left: 6px; }
.topic-resource-item__label {
font-size: 13px !important; color: rgba(255,255,255,0.8) !important;
line-height: 1.45; flex: 1; transition: color 0.15s;
}
.topic-resource-item:hover .topic-resource-item__label { color: var(--hbav-green) !important; }
.topic-resource-item__arrow {
font-size: 11px !important; font-weight: 700 !important;
color: rgba(255,255,255,0.3) !important;
flex-shrink: 0; transition: color 0.15s;
}
.topic-resource-item:hover .topic-resource-item__arrow { color: var(--hbav-green) !important; }
/* ── CONTACT SECTION ────────────────────────────────────────────────────── */
.topic-contact-section {
padding: 80px var(--content-gutter);
background: #fff;
border-top: 1px solid var(--gray-200);
}
.topic-contact__inner { max-width: var(--content-max); margin: 0 auto; }
.topic-contact__header { max-width: 600px; margin-bottom: 52px; }
.topic-contact__header p { font-size: 16px; color: var(--gray-700); line-height: 1.7; margin-top: 14px; }
.topic-contact__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.topic-contact-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--gray-200);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column;
}
.topic-contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,55,100,0.1);
}
.topic-contact-card__photo {
height: 260px;
background-size: cover;
background-position: center 15%;
}
.topic-contact-card__photo--placeholder {
display: flex; align-items: center; justify-content: center;
background: var(--hbav-blue);
color: #fff;
font-family: var(--font-display) !important;
font-size: 48px !important; font-weight: 700 !important;
}
.topic-contact-card__body {
padding: 20px 24px 24px;
flex: 1; display: flex; flex-direction: column;
}
.topic-contact-card__name {
font-family: var(--font-display) !important;
font-size: 20px !important; font-weight: 700 !important;
color: var(--hbav-blue) !important; margin-bottom: 4px !important;
}
.topic-contact-card__title {
font-size: 11px !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: 1.5px;
color: var(--hbav-green) !important; margin-bottom: 16px !important;
font-family: var(--font-body) !important;
}
.topic-contact-card__links {
display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.topic-contact-card__links a {
font-size: 13px !important; color: var(--gray-700) !important;
display: flex; align-items: center; gap: 8px;
text-decoration: none !important; transition: color 0.2s;
}
.topic-contact-card__links a:hover { color: var(--hbav-green) !important; }
.topic-contact-card__links a::before {
content: '';
width: 12px; height: 12px; flex-shrink: 0;
background: var(--hbav-green); border-radius: 2px; display: inline-block;
}
.topic-contact-card__links a.email::before {
clip-path: polygon(0 20%, 50% 60%, 100% 20%, 100% 80%, 0 80%);
}
.topic-contact-card__links a.phone::before {
clip-path: polygon(20% 0,80% 0,70% 50%,100% 80%,80% 100%,50% 85%,20% 100%,0 80%,30% 50%);
}
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.topic-hero__inner { grid-template-columns: 1fr; }
.topic-hero__nav { display: none; }
.topic-overview__grid { grid-template-columns: 1fr; gap: 40px; }
.topic-content__grid { grid-template-columns: 1fr; }
.topic-resources-sticky { position: static; }
.topic-process__steps { grid-template-columns: repeat(4, 1fr) !important; }
.topic-process__steps::before { display: none; }
.topic-contact__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.topic-hero { padding: 60px var(--content-gutter); }
.topic-hero h1 { font-size: 38px !important; }
.topic-process__steps { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
.topic-contact__row { grid-template-columns: 1fr; }
}
/* ── BILL TRACKER BANNER ────────────────────────────────────────────────── */
.topic-tracker-banner {
background: var(--hbav-green);
padding: 18px var(--content-gutter);
}
.topic-tracker-banner__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.topic-tracker-banner__label {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2px;
color: #fff !important;
font-family: var(--font-body) !important;
}
.topic-tracker-banner__btn {
display: inline-block;
padding: 10px 28px;
background: #fff;
color: var(--hbav-blue) !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2px;
border-radius: 4px;
text-decoration: none !important;
white-space: nowrap;
transition: all 0.2s;
font-family: var(--font-body) !important;
}
.topic-tracker-banner__btn:hover {
background: var(--hbav-blue) !important;
color: #fff !important;
}
@media (max-width: 768px) {
.topic-tracker-banner__inner {
flex-direction: column;
text-align: center;
}
}
/* ==========================================================================
ADVOCACY TOPIC PAGE — CSS FIXES
Append to style.css after existing advocacy topic CSS.
========================================================================== */
/* ── SUBNAV VERTICAL ALIGNMENT FIX ─────────────────────────────────────── */
/* The ← Government Affairs link is naturally centered because it's a flex
item in the parent. The subnav list links weren't matching because the
elements weren't stretching to full nav height. Fix: make the list
itself stretch, and the links fill the full height with flex centering. */
.topic-page-subnav__inner {
min-height: 53px;
}
.topic-page-subnav__list {
align-self: stretch;
}
.topic-page-subnav__list li {
display: flex;
align-items: stretch;
}
.topic-page-subnav__link {
display: flex !important;
align-items: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── PROCESS NOTE — tracker layout ─────────────────────────────────────── */
/* Default: full width single column (no tracker button)
With tracker: two-column split — note left, button right */
.topic-process__note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.topic-process__note-text {
flex: 1;
}
/* Tracker button inside the note */
.topic-process__tracker-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--hbav-blue);
color: #fff !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2px;
border-radius: 4px;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s;
font-family: var(--font-body) !important;
}
.topic-process__tracker-btn:hover {
background: var(--hbav-green) !important;
color: #fff !important;
transform: translateY(-1px);
}
.topic-process__tracker-btn::after {
content: '→';
font-size: 14px;
}
@media (max-width: 768px) {
.topic-process__note {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.topic-process__tracker-btn {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
ADVOCACY TOPIC PAGE — CSS FIXES
Append to style.css after existing advocacy topic CSS.
========================================================================== */
/* ── SUBNAV VERTICAL ALIGNMENT FIX ─────────────────────────────────────── */
/* The inner wrapper needs align-items:center so all flex children —
both the list and the back link — center vertically together.
The list items and links stretch to the container height. */
.topic-page-subnav__inner {
align-items: center !important;
min-height: 53px;
}
.topic-page-subnav__list {
height: 53px;
align-items: stretch !important;
}
.topic-page-subnav__list li {
display: flex !important;
align-items: stretch !important;
}
.topic-page-subnav__link {
display: flex !important;
align-items: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1 !important;
}
/* ── PROCESS NOTE — tracker layout ─────────────────────────────────────── */
/* Default: full width single column (no tracker button)
With tracker: two-column split — note left, button right */
.topic-process__note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.topic-process__note-text {
flex: 1;
}
/* Tracker button inside the note */
.topic-process__tracker-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--hbav-blue);
color: #fff !important;
font-size: 12px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 2px;
border-radius: 4px;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s;
font-family: var(--font-body) !important;
}
.topic-process__tracker-btn:hover {
background: var(--hbav-green) !important;
color: #fff !important;
transform: translateY(-1px);
}
.topic-process__tracker-btn::after {
content: '→';
font-size: 14px;
}
@media (max-width: 768px) {
.topic-process__note {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.topic-process__tracker-btn {
width: 100%;
justify-content: center;
}
}
.topic-page-subnav {
margin-left: -2rem !important;
margin-right: -2rem !important;
width: calc( 100% + 4rem ) !important;
}
.topic-page-subnav__inner {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
/* Contact photo portrait crop fix — tall images need higher position */
.topic-contact-card__photo {
background-position: center 20% !important;
}
/* ── SUBNAV FINAL FIX — strip all previous overrides ─── */
.topic-page-subnav {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
.topic-page-subnav__inner {
padding-left: var(--content-gutter) !important;
padding-right: var(--content-gutter) !important;
min-height: 53px !important;
height: 53px !important;
align-items: center !important;
display: flex !important;
}
.topic-page-subnav__list {
height: 53px !important;
display: flex !important;
align-items: center !important;
}
.topic-page-subnav__list li {
display: flex !important;
align-items: center !important;
height: 53px !important;
}
.topic-page-subnav__link {
display: flex !important;
align-items: center !important;
height: 53px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Contact card landscape photo — slight zoom out to show full head */
.topic-contact-card__photo {
background-size: 110% !important;
background-position: center center !important;
}
/* Contact card landscape photo — slight zoom out to show full head */
.topic-contact-card__photo {
background-size: 90% !important;
background-position: center center !important;
}
/* Contact card landscape photo — slight zoom out to show full head */
.topic-contact-card__photo {
background-size: 80% !important;
background-position: center center !important;
}
/* Contact card landscape photo — slight zoom out to show full head */
.topic-contact-card__photo {
background-size: 75% !important;
background-position: center center !important;
}
/* Contact card — prevent background tiling */
.topic-contact-card__photo {
background-repeat: no-repeat !important;
background-color: var(--hbav-blue) !important;
}
/* Contact card — white background behind portrait */
.topic-contact-card__photo {
background-color: #fff !important;
}
/* Updates column spans full width when no resources panel */
.topic-content__grid:has(.topic-updates-col:only-child) {
grid-template-columns: 1fr !important;
}
/* ==========================================================================
ADVOCACY LANDING PAGE BLOCKS
hbav-action-items + hbav-issues-grid
Append to style.css
========================================================================== */
/* ── KEYFRAMES ──────────────────────────────────────────────────────────── */
@keyframes hbav-pulse-yellow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* ── ACTION ITEMS SECTION ───────────────────────────────────────────────── */
.hbav-action-items {
background: #fffbeb;
border-top: 3px solid var(--yellow);
border-bottom: 1px solid #fde68a;
padding: 32px var(--content-gutter);
}
.hbav-action-items__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Individual bar */
.hbav-action-bar {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 24px;
background: #fff;
border: 1px solid #fde68a;
border-left: 4px solid var(--yellow);
border-radius: 8px;
}
.hbav-action-bar__status {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.hbav-action-bar__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.hbav-action-bar__label {
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px;
white-space: nowrap;
font-family: var(--font-body) !important;
}
.hbav-action-bar__divider {
width: 1px; height: 32px;
background: #fde68a;
flex-shrink: 0;
}
.hbav-action-bar__text {
font-size: 14px !important;
color: #44403c !important;
line-height: 1.5;
flex: 1;
font-family: var(--font-body) !important;
}
.hbav-action-bar__deadline {
font-size: 11px !important;
font-weight: 700 !important;
color: #92400e !important;
background: #fef3c7;
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
font-family: var(--font-body) !important;
}
.hbav-action-bar__link {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s;
font-family: var(--font-body) !important;
}
.hbav-action-bar__link:hover { color: var(--hbav-green) !important; }
/* Sidebar variant — compact */
.hbav-action-items--sidebar {
padding: 0;
background: transparent;
border: none;
}
.hbav-action-items--sidebar .hbav-action-bar {
padding: 12px 16px;
gap: 12px;
}
.hbav-action-items--sidebar .hbav-action-bar__text {
font-size: 13px !important;
}
.hbav-action-items--sidebar .hbav-action-bar__divider {
display: none;
}
@media (max-width: 768px) {
.hbav-action-bar {
flex-wrap: wrap;
gap: 10px;
}
.hbav-action-bar__divider { display: none; }
.hbav-action-bar__text { flex: 1 1 100%; }
}
/* ── ISSUES GRID SECTION ────────────────────────────────────────────────── */
.hbav-issues-section {
padding: 100px var(--content-gutter);
background: #fff;
}
.hbav-issues__inner {
max-width: var(--content-max);
margin: 0 auto;
}
.hbav-issues__header {
max-width: 800px;
margin-bottom: 60px;
}
.hbav-issues__heading {
font-family: var(--font-display) !important;
font-size: 44px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
line-height: 1.1 !important;
margin-bottom: 16px !important;
margin-top: 8px !important;
}
.hbav-issues__intro {
font-size: 18px !important;
color: var(--gray-700) !important;
line-height: 1.7 !important;
margin: 0 !important;
}
.hbav-issues__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.hbav-issue-card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 32px 28px;
border-top: 4px solid var(--hbav-blue);
transition: box-shadow 0.2s, transform 0.2s;
text-decoration: none !important;
display: flex;
flex-direction: column;
color: inherit !important;
}
.hbav-issue-card:hover {
box-shadow: 0 8px 28px rgba(0,55,100,0.1);
transform: translateY(-3px);
}
.hbav-issue-card__title {
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
line-height: 1.2 !important;
}
.hbav-issue-card__desc {
font-size: 14px !important;
color: var(--gray-700) !important;
line-height: 1.7 !important;
margin: 0 !important;
flex: 1;
}
.hbav-issue-card__cta {
margin-top: 24px;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px;
color: var(--hbav-green) !important;
font-family: var(--font-body) !important;
display: block;
}
.hbav-issue-card:hover .hbav-issue-card__cta {
color: var(--hbav-blue) !important;
}
@media (max-width: 1100px) {
.hbav-issues__grid { grid-template-columns: repeat(2, 1fr); }
.hbav-issues__heading { font-size: 36px !important; }
}
@media (max-width: 768px) {
.hbav-issues-section { padding: 60px var(--content-gutter); }
.hbav-issues__grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
HALL OF FAME / BUILDER OF YEAR / ASSOCIATE OF YEAR
These role types use hbav-past__list as their grid wrapper (same as
past-president). No styles needed on the section itself — only target
the list wrapper directly. The section must remain display:block.
========================================================================== */
.hbav-people-grid--hall-of-fame .hbav-past__list,
.hbav-people-grid--builder-of-year .hbav-past__list,
.hbav-people-grid--associate-of-year .hbav-past__list {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 2px !important;
background: var(--gray-200) !important;
border: 2px solid var(--gray-200) !important;
border-radius: 8px !important;
overflow: hidden !important;
margin-top: 56px !important;
width: 100% !important;
}
@media (max-width: 1200px) {
.hbav-people-grid--hall-of-fame .hbav-past__list,
.hbav-people-grid--builder-of-year .hbav-past__list,
.hbav-people-grid--associate-of-year .hbav-past__list {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.hbav-people-grid--hall-of-fame .hbav-past__list,
.hbav-people-grid--builder-of-year .hbav-past__list,
.hbav-people-grid--associate-of-year .hbav-past__list {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.hbav-people-grid--hall-of-fame .hbav-past__list,
.hbav-people-grid--builder-of-year .hbav-past__list,
.hbav-people-grid--associate-of-year .hbav-past__list {
grid-template-columns: 1fr !important;
}
}
/* Strip all margin/padding from all staff grid list/grid wrappers
Parent sections and Kadence rows control all spacing */
.hbav-past__list,
.hbav-staff__grid,
.hbav-exec__grid,
.hbav-chairs__grid,
.hbav-reps__grid,
.hbav-people-grid--hall-of-fame .hbav-past__list,
.hbav-people-grid--builder-of-year .hbav-past__list,
.hbav-people-grid--associate-of-year .hbav-past__list {
margin: 0 !important;
padding: 0 !important;
}
/* Remove border between consecutive staff grid sections */
.wp-block-acf-hbav-staff-grid + .wp-block-acf-hbav-staff-grid {
border-top: none !important;
}
/* Staff grid sections — background flush edge to edge, no borders or gaps */
.wp-block-acf-hbav-staff-grid {
border-top: none !important;
border-bottom: none !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==========================================================================
TEAM GRID — 3-column contact cards with modal
Used on Advocacy page and anywhere staff grid is set to "team" role type
========================================================================== */
.hbav-people-grid--team .hbav-staff__grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.hbav-people-grid--team .hbav-contact-card {
background: #fff !important;
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid var(--gray-200) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
display: flex !important;
flex-direction: column !important;
cursor: pointer !important;
}
.hbav-people-grid--team .hbav-contact-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgba(0,55,100,0.1) !important;
}
.hbav-people-grid--team .hbav-contact-card__photo {
height: 260px !important;
background-size: 75% !important;
background-repeat: no-repeat !important;
background-position: center 20% !important;
background-color: #fff !important;
}
.hbav-people-grid--team .hbav-contact-card__photo--placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--hbav-blue) !important;
color: #fff !important;
font-family: var(--font-display) !important;
font-size: 48px !important;
font-weight: 700 !important;
}
.hbav-people-grid--team .hbav-contact-card__body {
padding: 20px 24px 24px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.hbav-people-grid--team .hbav-contact-card__name {
font-family: var(--font-display) !important;
font-size: 20px !important;
font-weight: 700 !important;
color: var(--hbav-blue) !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
.hbav-people-grid--team .hbav-contact-card__title {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: var(--hbav-green) !important;
margin-bottom: 16px !important;
}
.hbav-people-grid--team .hbav-contact-card__links {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin-top: auto !important;
}
.hbav-people-grid--team .hbav-contact-card__links a {
font-size: 13px !important;
color: var(--gray-700) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
transition: color 0.2s !important;
word-break: break-all !important;
}
.hbav-people-grid--team .hbav-contact-card__links a:hover { color: var(--hbav-green) !important; }
.hbav-people-grid--team .hbav-contact-card__links a::before {
content: '' !important;
width: 12px !important;
height: 12px !important;
flex-shrink: 0 !important;
background: var(--hbav-green) !important;
border-radius: 2px !important;
display: inline-block !important;
}
.hbav-people-grid--team .hbav-contact-card__links a.email::before {
clip-path: polygon(0 20%, 50% 60%, 100% 20%, 100% 80%, 0 80%) !important;
}
.hbav-people-grid--team .hbav-contact-card__links a.phone::before {
clip-path: polygon(20% 0,80% 0,70% 50%,100% 80%,80% 100%,50% 85%,20% 100%,0 80%,30% 50%) !important;
}
@media (max-width: 1100px) {
.hbav-people-grid--team .hbav-staff__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
.hbav-people-grid--team .hbav-staff__grid { grid-template-columns: 1fr !important; }
}