/** * Angle North Atlantic Divi Child Theme — Design System * File: assets/css/main.css * Version: 2.0.0 * * Table of Contents * 01. Design Tokens (CSS Custom Properties) * 02. Base Resets & Typography * 03. Navigation & Header * 04. Buttons * 05. Hero Section * 06. Service Cards * 07. Book Feature * 08. Bio / About Section * 09. Speaking Section * 10. Media & Podcast Grid * 11. Publications Section * 12. Blog Cards & Single Post * 13. Testimonials & Pull Quotes * 14. CTA Band * 15. Clinical Website Banner * 16. Contact Form * 17. Footer * 18. Utility Classes * 19. Divi Builder Overrides * 20. Accessibility * 21. Animations */ /* ========================================================================== 01. DESIGN TOKENS ========================================================================== */ :root { /* --- Brand Colors --- */ --ana-sky: #1DBDE6; /* Primary — from book cover / brand */ --ana-sky-dark: #0B7699; /* Sky text/hover — AA on white (4.9:1) */ --ana-sky-light: #D8F4FD; /* Sky tint — light backgrounds */ --ana-navy: #0F2D52; /* Deep navy — professional anchor */ --ana-navy-mid: #1A3D6E; /* Mid navy for gradients, hovers */ --ana-navy-light: #E8EEF7; /* Navy tint — alternating sections */ --ana-magenta: #C4215A; /* Accent — muted magenta */ --ana-magenta-light: #FAE8EF; /* Magenta tint */ --ana-orange: #E07035; /* Warm accent — secondary CTA */ --ana-gold: #C9953C; /* Subtle gold for highlights */ /* --- Neutrals --- */ --ana-ink: #12192B; /* Primary text — near-black with warmth */ --ana-ink-mid: #2E3A4E; /* Body text */ --ana-text-muted: #637083; /* Captions, meta, helper text */ --ana-warm-white: #FAF8F5; /* Page background */ --ana-cream: #F2EDE8; /* Alternating section backgrounds */ --ana-sand: #E0D8D0; /* Borders, dividers */ --ana-white: #FFFFFF; /* --- Semantic Aliases --- */ --ana-primary: var(--ana-sky); --ana-primary-dark: var(--ana-sky-dark); --ana-secondary: var(--ana-navy); --ana-accent: var(--ana-magenta); --ana-surface: var(--ana-warm-white); --ana-surface-alt: var(--ana-cream); --ana-border: var(--ana-sand); /* --- Typography --- */ --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-body: 'Libre Franklin', system-ui, -apple-system, sans-serif; /* --- Fluid Type Scale (clamp: min, ideal, max) --- */ --fs-xs: clamp( 0.75rem, 0.7rem + 0.25vw, 0.875rem ); --fs-sm: clamp( 0.875rem, 0.825rem + 0.25vw, 1rem ); --fs-base: clamp( 1rem, 0.95rem + 0.25vw, 1.125rem ); --fs-md: clamp( 1.125rem, 1rem + 0.5vw, 1.375rem ); --fs-lg: clamp( 1.25rem, 1.1rem + 0.75vw, 1.75rem ); --fs-xl: clamp( 1.5rem, 1.25rem + 1.25vw, 2.25rem ); --fs-2xl: clamp( 2rem, 1.5rem + 2vw, 3rem ); --fs-3xl: clamp( 2.5rem, 1.75rem + 3vw, 4rem ); --fs-4xl: clamp( 3rem, 2rem + 4vw, 5rem ); /* --- Spacing Scale --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* --- Layout --- */ --ana-max-width: 1200px; --ana-content-width: 780px; --ana-section-pad-v: clamp( 3rem, 6vw, 6rem ); --ana-section-pad-h: clamp( 1.25rem, 5vw, 2.5rem ); /* --- Borders & Radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* --- Shadows --- */ --shadow-sm: 0 1px 3px rgba(15, 45, 82, 0.08), 0 1px 2px rgba(15, 45, 82, 0.05); --shadow-md: 0 4px 16px rgba(15, 45, 82, 0.10), 0 2px 6px rgba(15, 45, 82, 0.06); --shadow-lg: 0 12px 40px rgba(15, 45, 82, 0.14), 0 4px 12px rgba(15, 45, 82, 0.08); --shadow-sky: 0 6px 24px rgba(29, 189, 230, 0.25); /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ========================================================================== 02. BASE RESETS & TYPOGRAPHY ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.ana-child-theme { background-color: var(--ana-warm-white); color: var(--ana-ink-mid); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ .ana-child-theme h1, .ana-child-theme h2, .ana-child-theme h3, .ana-child-theme h4, .ana-child-theme h5, .ana-child-theme h6, .ana-child-theme .et_pb_module_header { font-family: var(--font-heading); font-weight: 400; line-height: 1.2; color: var(--ana-ink); margin-bottom: 0.5em; } .ana-child-theme h1 { font-size: var(--fs-3xl); } .ana-child-theme h2 { font-size: var(--fs-2xl); } .ana-child-theme h3 { font-size: var(--fs-xl); } .ana-child-theme h4 { font-size: var(--fs-lg); } .ana-child-theme h5 { font-size: var(--fs-md); } .ana-child-theme h6 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 600; } .ana-child-theme p { margin-bottom: 1.25em; max-width: 72ch; } .ana-child-theme a { color: var(--ana-sky-dark); text-decoration: none; transition: color var(--transition-fast); } .ana-child-theme a:hover, .ana-child-theme a:focus { color: var(--ana-navy); } .ana-child-theme strong, .ana-child-theme b { font-weight: 600; color: var(--ana-ink); } .ana-child-theme ul, .ana-child-theme ol { padding-left: 1.5rem; margin-bottom: 1.25em; } .ana-child-theme li { margin-bottom: 0.4em; } /* Section eyebrow label */ .ana-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ana-sky-dark); margin-bottom: var(--space-3); } .ana-eyebrow--light { color: var(--ana-sky-light); } .ana-eyebrow--gold { color: var(--ana-gold); } .ana-section-intro { font-size: var(--fs-md); color: var(--ana-ink-mid); max-width: 60ch; line-height: 1.65; } /* ========================================================================== 03. NAVIGATION & HEADER ========================================================================== */ #main-header, #main-header.et-fixed-header { background-color: var(--ana-white) !important; box-shadow: none; border-bottom: 1px solid var(--ana-border); transition: box-shadow var(--transition-base), background-color var(--transition-base); } body.ana-header-scrolled #main-header { box-shadow: 0 2px 20px rgba(15, 45, 82, 0.10) !important; } #top-menu a, #top-menu a:visited { color: var(--ana-ink) !important; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.02em; transition: color var(--transition-fast); } #top-menu a:hover, #top-menu li.current-menu-item > a { color: var(--ana-sky-dark) !important; } #top-menu li.current-menu-item > a::after { content: ''; display: block; width: 100%; height: 2px; background: var(--ana-sky); margin-top: 2px; border-radius: var(--radius-pill); } .logo_container .et_pb_image_wrap img, #logo { max-height: 48px; width: auto; } .mobile_menu_bar::before { color: var(--ana-navy); font-size: 1.5rem; } /* ========================================================================== 04. BUTTONS ========================================================================== */ .ana-btn, .et_pb_button, .ana-child-theme input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; line-height: 1; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast); padding: 0.75rem 1.625rem; white-space: nowrap; } .ana-btn:hover, .ana-btn:focus-visible { transform: translateY(-1px); } .ana-btn:active { transform: translateY(0); } /* Primary — sky blue */ .ana-btn--primary, .et_pb_button.ana-btn--primary { background-color: var(--ana-sky); color: var(--ana-navy) !important; border-color: var(--ana-sky); } .ana-btn--primary:hover, .ana-btn--primary:focus-visible { background-color: var(--ana-sky-dark); border-color: var(--ana-sky-dark); box-shadow: var(--shadow-sky); color: var(--ana-white) !important; } /* Secondary — navy */ .ana-btn--secondary, .et_pb_button.ana-btn--secondary { background-color: var(--ana-navy); color: var(--ana-white) !important; border-color: var(--ana-navy); } .ana-btn--secondary:hover, .ana-btn--secondary:focus-visible { background-color: var(--ana-navy-mid); border-color: var(--ana-navy-mid); box-shadow: var(--shadow-md); color: var(--ana-white) !important; } /* Outline */ .ana-btn--outline, .et_pb_button.ana-btn--outline { background-color: transparent; color: var(--ana-sky-dark) !important; border-color: var(--ana-sky); } .ana-btn--outline:hover, .ana-btn--outline:focus-visible { background-color: var(--ana-sky); color: var(--ana-navy) !important; } /* Ghost — dark sections */ .ana-btn--ghost, .et_pb_button.ana-btn--ghost { background-color: rgba(255, 255, 255, 0.12); color: var(--ana-white) !important; border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); } .ana-btn--ghost:hover, .ana-btn--ghost:focus-visible { background-color: rgba(255, 255, 255, 0.25); border-color: var(--ana-white); color: var(--ana-white) !important; } /* Orange accent */ .ana-btn--orange { background-color: var(--ana-orange); color: var(--ana-white) !important; border-color: var(--ana-orange); } .ana-btn--orange:hover, .ana-btn--orange:focus-visible { background-color: #c55e28; border-color: #c55e28; color: var(--ana-white) !important; } /* Size variants */ .ana-btn--lg { font-size: var(--fs-base); padding: 1rem 2rem; border-radius: var(--radius-lg); } .ana-btn--sm { font-size: var(--fs-xs); padding: 0.5rem 1rem; } /* Divi defaults */ .et_pb_button:not([class*="ana-btn"]) { font-family: var(--font-body) !important; font-weight: 600 !important; border-radius: var(--radius-md) !important; border-width: 2px !important; font-size: var(--fs-sm) !important; letter-spacing: 0.04em !important; } /* ========================================================================== 05. HERO SECTION ========================================================================== */ .ana-hero { position: relative; padding: var(--space-24) var(--ana-section-pad-h); background-color: var(--ana-navy); color: var(--ana-white); overflow: hidden; } .ana-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(15, 45, 82, 0.95) 0%, rgba(26, 61, 110, 0.80) 50%, rgba(29, 189, 230, 0.15) 100% ); pointer-events: none; } /* Bottom arc cut */ /* v1.8.5 removed the curved bottom edge. It painted a warm-white ellipse over the section below, which is the navy-light trust strip — so the curve never matched what it flowed into and read as a stray band. */ .ana-hero__inner { position: relative; z-index: 1; max-width: var(--ana-max-width); margin: 0 auto; } .ana-hero__eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ana-sky); margin-bottom: var(--space-4); } .ana-hero__title { font-family: var(--font-heading); font-size: var(--fs-4xl); font-weight: 400; color: var(--ana-white); line-height: 1.1; margin-bottom: var(--space-6); max-width: 16ch; } .ana-hero__title em { color: var(--ana-sky); font-style: italic; } .ana-hero__sub { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.82); max-width: 50ch; line-height: 1.65; margin-bottom: var(--space-10); } .ana-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* Split hero — photo on right */ .ana-hero--split .ana-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } .ana-hero--split .ana-hero__photo { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 4; max-height: 560px; } .ana-hero--split .ana-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Gradient frame */ .ana-hero--split .ana-hero__photo::after { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--radius-xl) + 4px); background: linear-gradient(135deg, var(--ana-sky) 0%, var(--ana-magenta) 100%); z-index: -1; } /* Trust strip */ .ana-trust-strip { background-color: var(--ana-navy-light); border-top: 1px solid var(--ana-border); border-bottom: 1px solid var(--ana-border); padding: var(--space-5) var(--ana-section-pad-h); } .ana-trust-strip__inner { max-width: var(--ana-max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); } .ana-trust-strip__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 500; color: var(--ana-ink-mid); } /* ========================================================================== 06. SERVICE CARDS ========================================================================== */ .ana-services { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background-color: var(--ana-warm-white); } .ana-services__inner { max-width: var(--ana-max-width); margin: 0 auto; } .ana-services__header { text-align: center; margin-bottom: var(--space-12); max-width: 60ch; margin-left: auto; margin-right: auto; } .ana-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .ana-service-card { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); padding: var(--space-8); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); position: relative; overflow: hidden; } .ana-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--ana-sky) 0%, var(--ana-navy-mid) 100%); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); } .ana-service-card:hover { border-color: var(--ana-sky); box-shadow: var(--shadow-md); transform: translateY(-3px); } .ana-service-card:hover::before { transform: scaleX(1); } .ana-service-card__icon { width: 52px; height: 52px; background: var(--ana-sky-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); font-size: 1.5rem; color: var(--ana-sky-dark); } .ana-service-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--ana-ink); margin-bottom: var(--space-3); } .ana-service-card__body { font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.7; margin-bottom: var(--space-5); } .ana-service-card__link { font-size: var(--fs-sm); font-weight: 600; color: var(--ana-sky-dark); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--transition-fast), color var(--transition-fast); } .ana-service-card__link:hover { color: var(--ana-navy); gap: var(--space-3); } .ana-service-card__link::after { content: '→'; } /* ========================================================================== 07. BOOK FEATURE ========================================================================== */ .ana-book-feature { background: var(--ana-navy); color: var(--ana-white); padding: var(--ana-section-pad-v) var(--ana-section-pad-h); position: relative; overflow: hidden; } .ana-book-feature::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%, rgba(29, 189, 230, 0.15) 0%, transparent 55%), radial-gradient(circle at 10% 80%, rgba(196, 33, 90, 0.12) 0%, transparent 50%); pointer-events: none; } .ana-book-feature__inner { position: relative; z-index: 1; max-width: var(--ana-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-16); align-items: center; } .ana-book-feature__cover-wrap { display: flex; justify-content: center; } .ana-book-feature__cover { width: 100%; max-width: 320px; border-radius: var(--radius-lg); box-shadow: -8px 12px 40px rgba(0, 0, 0, 0.4), 8px -4px 20px rgba(29, 189, 230, 0.2); display: block; transform: rotate(-2deg); transition: transform var(--transition-slow); } .ana-book-feature__cover-wrap:hover .ana-book-feature__cover { transform: rotate(0deg) scale(1.02); } .ana-book-feature__eyebrow { color: var(--ana-sky); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-4); display: block; } .ana-book-feature__title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--ana-white); line-height: 1.15; margin-bottom: var(--space-5); } .ana-book-feature__subtitle { font-size: var(--fs-lg); font-style: italic; color: rgba(255, 255, 255, 0.7); margin-bottom: var(--space-6); font-family: var(--font-heading); } .ana-book-feature__description { font-size: var(--fs-base); color: rgba(255, 255, 255, 0.8); line-height: 1.75; margin-bottom: var(--space-8); max-width: 55ch; } .ana-book-feature__quote { background: rgba(29, 189, 230, 0.10); border-left: 3px solid var(--ana-sky); padding: var(--space-5) var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-8); font-size: var(--fs-md); font-style: italic; font-family: var(--font-heading); color: rgba(255, 255, 255, 0.9); } .ana-book-feature__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* ========================================================================== 08. BIO / ABOUT SECTION ========================================================================== */ .ana-bio-section { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background-color: var(--ana-cream); } .ana-bio-section__inner { max-width: var(--ana-max-width); margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: var(--space-16); align-items: start; } .ana-bio-section__photo-col { position: sticky; top: 100px; } .ana-bio-section__photo { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: block; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; } .ana-bio-section__credential { margin-top: var(--space-6); background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); padding: var(--space-5); } .ana-bio-section__credential h4 { font-family: var(--font-heading); font-size: var(--fs-base); color: var(--ana-ink); margin-bottom: var(--space-3); } .ana-bio-section__credential ul { list-style: none; padding: 0; margin: 0; } .ana-bio-section__credential li { font-size: var(--fs-sm); color: var(--ana-ink-mid); padding: var(--space-2) 0; border-bottom: 1px solid var(--ana-border); display: flex; align-items: center; gap: var(--space-3); } .ana-bio-section__credential li:last-child { border-bottom: none; } .ana-bio-section__credential li::before { content: '●'; color: var(--ana-sky); font-size: 0.4em; flex-shrink: 0; } .ana-bio-section__name { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--ana-ink); margin-bottom: var(--space-2); } .ana-bio-section__title-line { font-size: var(--fs-md); color: var(--ana-sky-dark); font-weight: 500; margin-bottom: var(--space-8); } .ana-bio-section__body p { font-size: var(--fs-base); color: var(--ana-ink-mid); line-height: 1.8; margin-bottom: 1.25em; max-width: 68ch; } /* CORE model acrostic */ .ana-consultation-model { background: var(--ana-white); border: 1px solid var(--ana-border); border-left: 4px solid var(--ana-sky); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--space-8); margin-top: var(--space-10); } .ana-consultation-model__title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--ana-ink); margin-bottom: var(--space-4); } .ana-letter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .ana-letter-item { text-align: center; } .ana-letter-item__char { display: block; font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--ana-sky); line-height: 1; margin-bottom: var(--space-2); } .ana-letter-item__word { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ana-ink-mid); } /* Clinical website link pill */ .ana-clinical-link-inline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 500; color: var(--ana-sky-dark); border: 1px solid var(--ana-sky); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); margin-top: var(--space-6); transition: background-color var(--transition-fast), color var(--transition-fast); } .ana-clinical-link-inline:hover { background-color: var(--ana-sky); color: var(--ana-navy) !important; } .ana-clinical-link-inline::before { content: '↗'; } /* ========================================================================== 09. SPEAKING SECTION ========================================================================== */ .ana-speaking-section { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background-color: var(--ana-warm-white); } .ana-speaking-section__inner { max-width: var(--ana-max-width); margin: 0 auto; } .ana-speaking-section__header { text-align: center; margin-bottom: var(--space-12); } .ana-speaking-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-12); } .ana-speaking-topic { display: flex; align-items: flex-start; gap: var(--space-4); background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .ana-speaking-topic:hover { border-color: var(--ana-sky); box-shadow: var(--shadow-sm); } .ana-speaking-topic__number { flex-shrink: 0; width: 36px; height: 36px; background: var(--ana-sky-light); color: var(--ana-sky-dark); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); } .ana-speaking-topic__text { font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.6; } .ana-speaking-topic__text strong { display: block; font-size: var(--fs-base); color: var(--ana-ink); margin-bottom: var(--space-1); } /* Speaking CTA panel */ .ana-speaking-cta { background: linear-gradient(135deg, var(--ana-navy) 0%, var(--ana-navy-mid) 100%); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-16); text-align: center; color: var(--ana-white); position: relative; overflow: hidden; } .ana-speaking-cta::before { content: ''; position: absolute; top: -40%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(29, 189, 230, 0.2) 0%, transparent 70%); pointer-events: none; } .ana-speaking-cta h3 { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--ana-white); margin-bottom: var(--space-4); } .ana-speaking-cta p { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-md); margin-bottom: var(--space-8); max-width: 55ch; margin-left: auto; margin-right: auto; } .ana-speaking-cta__ctas { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* ========================================================================== 10. MEDIA & PODCAST GRID ========================================================================== */ .ana-media-section { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background-color: var(--ana-cream); } .ana-media-section__inner { max-width: var(--ana-max-width); margin: 0 auto; } .ana-media-section__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-8); gap: var(--space-6); flex-wrap: wrap; } .ana-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .ana-media-card { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition-base), transform var(--transition-base); } .ana-media-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .ana-media-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--ana-navy-light); position: relative; } .ana-media-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .ana-media-card:hover .ana-media-card__thumb img { transform: scale(1.04); } .ana-media-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--ana-navy); color: var(--ana-white); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); } .ana-media-card__badge--podcast { background: var(--ana-sky-dark); } .ana-media-card__badge--publication { background: var(--ana-navy); } .ana-media-card__badge--news { background: var(--ana-orange); } .ana-media-card__badge--speaking { background: var(--ana-magenta); } .ana-media-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; } .ana-media-card__platform { font-size: var(--fs-xs); font-weight: 600; color: var(--ana-sky-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); } .ana-media-card__title { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--ana-ink); line-height: 1.3; margin-bottom: var(--space-3); flex: 1; } .ana-media-card__date { font-size: var(--fs-xs); color: var(--ana-text-muted); margin-bottom: var(--space-4); } .ana-media-card__link { font-size: var(--fs-sm); font-weight: 600; color: var(--ana-sky-dark); display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--transition-fast), color var(--transition-fast); } .ana-media-card__link:hover { color: var(--ana-navy); gap: var(--space-3); } .ana-media-card__link::after { content: '↗'; } /* ========================================================================== 11. PUBLICATIONS SECTION ========================================================================== */ .ana-publications { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background-color: var(--ana-warm-white); } .ana-publications__inner { max-width: var(--ana-max-width); margin: 0 auto; } .ana-publications__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .ana-publication-item { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: center; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .ana-publication-item:hover { border-color: var(--ana-sky); box-shadow: var(--shadow-sm); } .ana-publication-item__year { font-size: var(--fs-xl); font-family: var(--font-heading); color: var(--ana-sky); font-weight: 400; line-height: 1; min-width: 56px; text-align: center; } .ana-publication-item__title { font-size: var(--fs-base); font-weight: 600; color: var(--ana-ink); margin-bottom: var(--space-1); } .ana-publication-item__journal { font-size: var(--fs-sm); color: var(--ana-text-muted); font-style: italic; } .ana-publication-item__link { font-size: var(--fs-sm); font-weight: 600; color: var(--ana-sky-dark); white-space: nowrap; } .ana-publication-item__link:hover { color: var(--ana-navy); } /* ========================================================================== 12. BLOG CARDS & SINGLE POST ========================================================================== */ .ana-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-12) var(--ana-section-pad-h); max-width: var(--ana-max-width); margin: 0 auto; } .ana-blog-card { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition-base), transform var(--transition-base); } .ana-blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .ana-blog-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ana-cream); } .ana-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .ana-blog-card:hover .ana-blog-card__thumb img { transform: scale(1.04); } .ana-blog-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .ana-blog-card__category { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ana-sky-dark); margin-bottom: var(--space-3); } .ana-blog-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--ana-ink); line-height: 1.25; margin-bottom: var(--space-3); flex: 1; } .ana-blog-card__title a { color: inherit; text-decoration: none; } .ana-blog-card__title a:hover { color: var(--ana-sky-dark); } .ana-blog-card__excerpt { font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.65; margin-bottom: var(--space-5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ana-blog-card__meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-xs); color: var(--ana-text-muted); border-top: 1px solid var(--ana-border); padding-top: var(--space-4); } /* Single post */ body.ana-single-post .entry-title { font-family: var(--font-heading); font-size: var(--fs-3xl); color: var(--ana-ink); line-height: 1.15; } body.ana-single-post .entry-content { font-size: var(--fs-base); line-height: 1.8; color: var(--ana-ink-mid); max-width: var(--ana-content-width); margin: 0 auto; } body.ana-single-post .entry-content h2, body.ana-single-post .entry-content h3 { margin-top: 2em; margin-bottom: 0.65em; } body.ana-single-post .entry-content blockquote { border-left: 4px solid var(--ana-sky); padding: var(--space-5) var(--space-6); background: var(--ana-sky-light); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--ana-ink); margin: 2em 0; } /* ========================================================================== 13. TESTIMONIALS & PULL QUOTES ========================================================================== */ .ana-testimonials { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); background: var(--ana-navy); color: var(--ana-white); position: relative; overflow: hidden; } .ana-testimonials::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(29, 189, 230, 0.08) 0%, transparent 60%); } .ana-testimonials__inner { position: relative; z-index: 1; max-width: var(--ana-max-width); margin: 0 auto; } .ana-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-10); } .ana-testimonial { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: var(--space-8); backdrop-filter: blur(8px); transition: background-color var(--transition-base), border-color var(--transition-base); } .ana-testimonial:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(29, 189, 230, 0.3); } .ana-testimonial__quote-mark { font-size: 3rem; line-height: 1; color: var(--ana-sky); opacity: 0.5; font-family: Georgia, serif; margin-bottom: var(--space-4); display: block; } .ana-testimonial__text { font-size: var(--fs-base); line-height: 1.75; color: rgba(255, 255, 255, 0.88); font-style: italic; font-family: var(--font-heading); margin-bottom: var(--space-6); } .ana-testimonial__byline { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ana-sky); } .ana-testimonial__role { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.55); font-style: normal; display: block; margin-top: var(--space-1); } /* Pull quote — in-content */ .ana-pull-quote { border-left: 4px solid var(--ana-sky); background: var(--ana-sky-light); padding: var(--space-6) var(--space-8); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: var(--space-12) 0; } .ana-pull-quote__text { font-family: var(--font-heading); font-size: var(--fs-lg); font-style: italic; color: var(--ana-ink); line-height: 1.5; } .ana-pull-quote__attribution { font-size: var(--fs-sm); font-weight: 600; color: var(--ana-sky-dark); margin-top: var(--space-3); } /* ========================================================================== 14. CTA BAND ========================================================================== */ .ana-cta-band { background: linear-gradient(135deg, var(--ana-sky) 0%, var(--ana-sky-dark) 100%); color: var(--ana-navy); padding: var(--ana-section-pad-v) var(--ana-section-pad-h); text-align: center; position: relative; overflow: hidden; } .ana-cta-band__inner { position: relative; z-index: 1; max-width: var(--ana-max-width); margin: 0 auto; } .ana-cta-band__title { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--ana-navy); margin-bottom: var(--space-4); } .ana-cta-band__body { font-size: var(--fs-md); color: rgba(15, 45, 82, 0.8); margin-bottom: var(--space-8); max-width: 55ch; margin-left: auto; margin-right: auto; } .ana-cta-band__ctas { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } .ana-cta-band--dark { background: linear-gradient(135deg, var(--ana-navy) 0%, var(--ana-navy-mid) 100%); color: var(--ana-white); } .ana-cta-band--dark .ana-cta-band__title { color: var(--ana-white); } .ana-cta-band--dark .ana-cta-band__body { color: rgba(255, 255, 255, 0.75); } /* ========================================================================== 15. CLINICAL WEBSITE BANNER ========================================================================== */ .ana-clinical-banner { background: var(--ana-navy-light); border: 1px solid var(--ana-sky); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-8); display: flex; align-items: center; gap: var(--space-6); margin: var(--space-8) 0; } .ana-clinical-banner__icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--ana-sky-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .ana-clinical-banner__text { flex: 1; } .ana-clinical-banner__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ana-sky-dark); margin-bottom: var(--space-1); } .ana-clinical-banner__desc { font-size: var(--fs-sm); color: var(--ana-ink-mid); } .ana-clinical-banner__link { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ana-sky-dark); border: 1px solid var(--ana-sky); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast); } .ana-clinical-banner__link:hover { background-color: var(--ana-sky); color: var(--ana-navy) !important; } /* ========================================================================== 16. CONTACT FORM ========================================================================== */ .ana-contact-page-wrap { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); max-width: var(--ana-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-16); align-items: start; } .ana-contact-info__heading { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--ana-ink); margin-bottom: var(--space-4); } .ana-contact-info__sub { font-size: var(--fs-base); color: var(--ana-ink-mid); margin-bottom: var(--space-8); max-width: 42ch; } .ana-contact-info__list { list-style: none; padding: 0; margin: 0 0 var(--space-8); } .ana-contact-info__item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--ana-border); font-size: var(--fs-sm); color: var(--ana-ink-mid); } .ana-contact-info__item:first-child { border-top: 1px solid var(--ana-border); } .ana-contact-info__item-icon { width: 36px; height: 36px; background: var(--ana-sky-light); color: var(--ana-sky-dark); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .ana-inquiry-form-wrap { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-xl); padding: var(--space-10); box-shadow: var(--shadow-md); } .ana-form-title { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--ana-ink); margin-bottom: var(--space-8); } .ana-contact-form { display: flex; flex-direction: column; gap: var(--space-5); } .ana-form-row { display: flex; flex-direction: column; gap: var(--space-5); } .ana-form-row--half { flex-direction: row; } .ana-form-row--half .ana-form-field { flex: 1; } .ana-form-field { display: flex; flex-direction: column; } .ana-form-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ana-ink); margin-bottom: var(--space-2); } .ana-form-field label span[aria-hidden] { color: var(--ana-magenta); margin-left: 2px; } .ana-form-field input, .ana-form-field select, .ana-form-field textarea { width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--ana-ink); background: var(--ana-warm-white); border: 1.5px solid var(--ana-border); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -webkit-appearance: none; appearance: none; outline: none; } .ana-form-field input:focus, .ana-form-field select:focus, .ana-form-field textarea:focus { border-color: var(--ana-sky); box-shadow: 0 0 0 3px rgba(29, 189, 230, 0.18); background: var(--ana-white); } .ana-form-field input[aria-invalid="true"], .ana-form-field select[aria-invalid="true"], .ana-form-field textarea[aria-invalid="true"] { border-color: var(--ana-magenta); box-shadow: 0 0 0 3px rgba(196, 33, 90, 0.12); } .ana-form-field select { 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='%23637083' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.5rem; } .ana-form-field textarea { resize: vertical; min-height: 120px; } .ana-form-submit { margin-top: var(--space-2); } .ana-form-notice { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--space-6); } .ana-form-notice--success { background: rgba(29, 189, 230, 0.10); border: 1px solid var(--ana-sky); color: var(--ana-navy); } .ana-form-notice--error { background: rgba(196, 33, 90, 0.08); border: 1px solid var(--ana-magenta); color: #8B0030; } /* ========================================================================== 17. FOOTER ========================================================================== */ #main-footer, .ana-child-theme #main-footer { background-color: var(--ana-navy) !important; color: rgba(255, 255, 255, 0.75) !important; font-family: var(--font-body); } #main-footer .et_pb_widget_area_footer { padding-top: 3rem; padding-bottom: 3rem; } #main-footer h4, #main-footer .widget-title { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--ana-white) !important; margin-bottom: var(--space-5); } #main-footer a { color: rgba(255, 255, 255, 0.7) !important; transition: color var(--transition-fast); text-decoration: none; } #main-footer a:hover { color: var(--ana-sky) !important; } #main-footer p { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); } #footer-bottom { background-color: rgba(0, 0, 0, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } #footer-bottom p { color: rgba(255, 255, 255, 0.45); font-size: var(--fs-xs); } .ana-footer-logo { max-height: 40px; width: auto; opacity: 0.85; filter: brightness(0) invert(1); } /* ========================================================================== 18. UTILITY CLASSES ========================================================================== */ /* Backgrounds */ .ana-bg-white { background-color: var(--ana-white) !important; } .ana-bg-warm { background-color: var(--ana-warm-white) !important; } .ana-bg-cream { background-color: var(--ana-cream) !important; } .ana-bg-navy { background-color: var(--ana-navy) !important; color: var(--ana-white) !important; } .ana-bg-navy-mid { background-color: var(--ana-navy-mid) !important; color: var(--ana-white) !important; } .ana-bg-sky { background-color: var(--ana-sky) !important; color: var(--ana-navy) !important; } .ana-bg-dark { background-color: var(--ana-ink) !important; color: var(--ana-white) !important; } /* Text colors */ .ana-text-sky { color: var(--ana-sky) !important; } .ana-text-navy { color: var(--ana-navy) !important; } .ana-text-white { color: var(--ana-white) !important; } .ana-text-muted { color: var(--ana-text-muted) !important; } /* Section padding */ .ana-section { padding: var(--ana-section-pad-v) var(--ana-section-pad-h); } .ana-section--sm { padding: var(--space-8) var(--ana-section-pad-h); } /* Container */ .ana-container { max-width: var(--ana-max-width); margin-left: auto; margin-right: auto; } /* Alignment */ .ana-text-center { text-align: center; } .ana-text-left { text-align: left; } /* Divider */ .ana-divider { border: none; border-top: 1px solid var(--ana-border); margin: var(--space-8) 0; } /* Image helpers */ .ana-img-rounded { border-radius: var(--radius-lg); } .ana-img-circle { border-radius: 50%; } /* ========================================================================== 19. DIVI BUILDER OVERRIDES ========================================================================== */ .et_pb_section { padding: 0; } .et_pb_section.ana-section { padding: var(--ana-section-pad-v) 0 !important; } .et_pb_row { max-width: var(--ana-max-width); } .et_pb_text_inner { font-family: var(--font-body); color: var(--ana-ink-mid); font-size: var(--fs-base); line-height: 1.75; } .et_pb_text_inner h1, .et_pb_text_inner h2, .et_pb_text_inner h3, .et_pb_text_inner h4 { font-family: var(--font-heading); font-weight: 400; color: var(--ana-ink); } .et_pb_blurb_content { font-family: var(--font-body); } .et_pb_blurb_title { font-family: var(--font-heading) !important; font-weight: 400 !important; } .et_pb_image_wrap img { border-radius: var(--radius-md); } .et_pb_divider { border-color: var(--ana-border) !important; } .et_pb_social_media_follow a { transition: transform var(--transition-fast) !important; } .et_pb_social_media_follow a:hover { transform: translateY(-2px); } /* Heading module on dark sections */ .ana-bg-navy .et_pb_heading_title, .ana-bg-dark .et_pb_heading_title { color: var(--ana-white) !important; } /* Default Divi button — sky theme */ .ana-child-theme .et_pb_button { background-color: var(--ana-sky) !important; color: var(--ana-navy) !important; border-color: var(--ana-sky) !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; } .ana-child-theme .et_pb_button:hover { background-color: var(--ana-sky-dark) !important; border-color: var(--ana-sky-dark) !important; color: var(--ana-white) !important; } /* On dark backgrounds */ .ana-bg-navy .et_pb_button, .ana-bg-dark .et_pb_button { background-color: var(--ana-sky) !important; color: var(--ana-navy) !important; border-color: var(--ana-sky) !important; } .ana-bg-navy .et_pb_button:hover { background-color: var(--ana-white) !important; color: var(--ana-navy) !important; border-color: var(--ana-white) !important; } /* Tabs */ .et_pb_tab { font-family: var(--font-body); } .et_pb_tab_active { color: var(--ana-sky-dark) !important; } .et_pb_tabs_controls li.et_pb_tab_active { border-bottom-color: var(--ana-sky) !important; } /* ========================================================================== 20. ACCESSIBILITY ========================================================================== */ :focus-visible { outline: 3px solid var(--ana-sky); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background: var(--ana-sky); clip: auto !important; clip-path: none; color: var(--ana-navy); display: block; font-size: var(--fs-sm); font-weight: 600; height: auto; left: var(--space-4); line-height: normal; padding: var(--space-3) var(--space-5); text-decoration: none; top: var(--space-4); width: auto; z-index: 100000; border-radius: var(--radius-md); } @media (forced-colors: active) { .ana-btn, .et_pb_button { forced-color-adjust: none; } } /* ========================================================================== 21. ANIMATIONS ========================================================================== */ .ana-reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--ana-sky) 0%, var(--ana-magenta) 100%); z-index: 9999; pointer-events: none; transition: width 0.1s linear; } @keyframes ana-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ana-animate-float { animation: ana-float 5s ease-in-out infinite; } @keyframes ana-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .ana-animate-fade-up { animation: ana-fade-up 0.6s ease forwards; } @keyframes ana-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .ana-skeleton { background: linear-gradient( 90deg, var(--ana-cream) 25%, var(--ana-sand) 50%, var(--ana-cream) 75% ); background-size: 200% 100%; animation: ana-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } /* ========================================================================== 22. ANA-SPECIFIC COMPONENTS (Angle North Atlantic) ========================================================================== */ /* --- Full-width Divi section wrapper (used by ANA Setup layouts) --- */ .ana-full-section { padding: 0 !important; } .ana-full-section .et_pb_row, .ana-full-row { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .ana-full-section .et_pb_code, .ana-full-section .et_pb_module { margin-bottom: 0 !important; } /* --- Interior page header (compact navy hero) --- */ .ana-page-header { position: relative; background-color: var(--ana-navy); color: var(--ana-white); padding: var(--space-16) var(--ana-section-pad-h) var(--space-12); overflow: hidden; } .ana-page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(15, 45, 82, 0.95) 0%, rgba(26, 61, 110, 0.80) 55%, rgba(29, 189, 230, 0.18) 100% ); pointer-events: none; } .ana-page-header__inner { position: relative; z-index: 1; max-width: var(--ana-max-width); margin: 0 auto; } .ana-page-header__title { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: 400; color: var(--ana-white); line-height: 1.1; margin: 0; } /* --- Prose block --- */ .ana-prose p { font-size: var(--fs-base); color: var(--ana-ink-mid); line-height: 1.75; margin-bottom: var(--space-5); max-width: 72ch; } .ana-prose em { color: var(--ana-navy); } /* --- Data tables (officers, dues, fees) --- */ .ana-table { width: 100%; border-collapse: collapse; background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: var(--space-6) 0; } .ana-table th, .ana-table td { padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--ana-border); color: var(--ana-ink-mid); } .ana-table thead th { background: var(--ana-navy); color: var(--ana-white); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-xs); border-bottom: none; } .ana-table tbody tr:last-child th, .ana-table tbody tr:last-child td { border-bottom: none; } .ana-table--striped tbody tr:nth-child(even) { background: var(--ana-navy-light); } .ana-table--officers th[scope="row"] { width: 34%; font-weight: 600; color: var(--ana-navy); background: var(--ana-navy-light); } .ana-table td:last-child { white-space: nowrap; } .ana-table--officers td:last-child { white-space: normal; } /* --- Note callout --- */ .ana-note { background: var(--ana-sky-light); border-left: 4px solid var(--ana-sky-dark); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); color: var(--ana-ink-mid); max-width: 72ch; } /* --- Document / archive link list --- */ .ana-doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-8); text-align: left; } .ana-doc-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm); font-weight: 500; color: var(--ana-navy); text-decoration: none; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .ana-doc-list__item:hover { border-color: var(--ana-sky); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--ana-sky-dark); } .ana-doc-list__item span { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ana-sky-dark); background: var(--ana-sky-light); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; } /* --- Meeting card --- */ .ana-meeting-card { background: var(--ana-white); border: 1px solid var(--ana-border); border-top: 5px solid var(--ana-sky); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-10); } .ana-meeting-card__dates { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--ana-sky-dark); margin: var(--space-2) 0 var(--space-5); } .ana-meeting-card__details p { font-size: var(--fs-base); color: var(--ana-ink-mid); line-height: 1.7; margin-bottom: var(--space-5); } .ana-meeting-card .ana-hero__ctas { margin-top: var(--space-4); } /* --- Meeting badge (home feature) --- */ .ana-meeting-badge { width: 240px; height: 240px; border-radius: 50%; background: linear-gradient(135deg, var(--ana-sky) 0%, var(--ana-navy-mid) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-lg); border: 6px solid rgba(255, 255, 255, 0.15); } .ana-meeting-badge__year { font-family: var(--font-heading); font-size: 3.5rem; line-height: 1; color: var(--ana-white); } .ana-meeting-badge__label { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-top: var(--space-2); } /* --- Stats band (About) --- */ .ana-stats-band { color: var(--ana-white); } .ana-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); text-align: center; } .ana-stat__number { display: block; font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--ana-sky); line-height: 1.1; } .ana-stat__label { display: block; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); margin-top: var(--space-2); } /* --- Contact page grid --- */ .ana-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-16); align-items: start; } .ana-contact-details address { font-style: normal; font-size: var(--fs-base); color: var(--ana-ink-mid); line-height: 1.7; margin-bottom: var(--space-6); } .ana-contact-details h3 { font-family: var(--font-heading); color: var(--ana-navy); margin-bottom: var(--space-2); } .ana-contact-details a { color: var(--ana-sky-dark); } .ana-contact-details a:hover { color: var(--ana-navy); } /* Contact form column inherits inquiry-form styling */ .ana-contact-form-col { min-width: 0; } /* --- Misc utilities --- */ .ana-mt-8 { margin-top: var(--space-8); } .ana-text-muted-light { color: rgba(255, 255, 255, 0.7); } /* ========================================================================== 23. ANA v1.1 — GALLERIES, FOOTER BAND, MEETING CARD VARIANTS ========================================================================== */ /* --- Screen-reader-only utility --- */ .ana-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); /* legacy */ clip-path: inset(50%); /* modern; clip is deprecated */ white-space: nowrap; } /* --- Native WP gallery styling (core Gallery block + classic [gallery]) --- */ .wp-block-gallery, .gallery { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) !important; margin: var(--space-6) 0; } .wp-block-gallery .wp-block-image, .wp-block-gallery figure, .gallery .gallery-item { margin: 0 !important; width: 100% !important; max-width: 100% !important; } .wp-block-gallery img, .gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--ana-border); cursor: zoom-in; transition: transform var(--transition-base), box-shadow var(--transition-base); display: block; } .wp-block-gallery img:hover, .gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow-md); } /* --- Lightbox overlay (JS-driven, no plugin) --- */ .ana-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 45, 82, 0.92); display: flex; align-items: center; justify-content: center; padding: var(--space-8); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .ana-lightbox.is-open { opacity: 1; pointer-events: auto; } .ana-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .ana-lightbox__close, .ana-lightbox__prev, .ana-lightbox__next { position: absolute; background: rgba(255, 255, 255, 0.12); border: none; color: #fff; font-size: 1.6rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .ana-lightbox__close:hover, .ana-lightbox__prev:hover, .ana-lightbox__next:hover { background: rgba(29, 189, 230, 0.4); } .ana-lightbox__close { top: 20px; right: 20px; } .ana-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); } .ana-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); } .ana-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-size: var(--fs-sm); } /* --- Footer band (components + resources) --- */ .ana-footer-band { background: var(--ana-navy-mid); border-top: 3px solid var(--ana-sky); padding: var(--space-12) var(--ana-section-pad-h); color: var(--ana-white); } .ana-footer-band__inner { max-width: var(--ana-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--space-10); } .ana-footer-band__heading { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ana-sky); margin-bottom: var(--space-4); } .ana-footer-band__col ul { list-style: none; margin: 0; padding: 0; } .ana-footer-band__col li { margin-bottom: var(--space-2); } .ana-footer-band__col a { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); text-decoration: none; transition: color var(--transition-fast); } .ana-footer-band__col a:hover { color: var(--ana-sky); } .ana-footer-band__col--brand p { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); line-height: 1.7; } /* --- Meeting card split layout (badge + content) --- */ .ana-meeting-card--split { display: grid; grid-template-columns: auto 1fr; gap: var(--space-10); align-items: center; } .ana-meeting-badge--sm { width: 170px; height: 170px; } .ana-meeting-badge--sm .ana-meeting-badge__year { font-size: 2.4rem; } /* --- Dark outline button (for cream/warm sections) --- */ .ana-btn--outline-dark, a.ana-btn--outline-dark { background: transparent; color: var(--ana-navy); border: 2px solid var(--ana-navy); } .ana-btn--outline-dark:hover, a.ana-btn--outline-dark:hover { background: var(--ana-navy); color: var(--ana-white); } /* --- Dues table pay column --- */ .ana-table--dues td:last-child { text-align: right; white-space: nowrap; } .ana-table--dues .ana-pay-btn { margin: 0; } /* ========================================================================== 24. ANA v1.2 — NATIVE DIVI MODULE ADAPTATION + HEADER/FOOTER POLISH ========================================================================== */ /* --- Rows inside ANA sections align to the design max-width --- */ .ana-hero .et_pb_row, .ana-page-header .et_pb_row, .ana-trust-strip .et_pb_row, .ana-section-pad .et_pb_row, .ana-cta-band .et_pb_row, .ana-book-feature .et_pb_row, .ana-services .et_pb_row { max-width: var(--ana-max-width); width: 100%; margin: 0 auto; padding: 0; } /* --- Section paddings win over Divi's generated padding --- */ .et_pb_section.ana-hero { padding: var(--space-24) var(--ana-section-pad-h) !important; } .et_pb_section.ana-page-header { padding: var(--space-16) var(--ana-section-pad-h) var(--space-12) !important; } .et_pb_section.ana-trust-strip { padding: var(--space-5) var(--ana-section-pad-h) !important; } .et_pb_section.ana-section-pad { padding: var(--ana-section-pad-v) var(--ana-section-pad-h) !important; } .et_pb_section.ana-cta-band { padding: var(--ana-section-pad-v) var(--ana-section-pad-h) !important; } .et_pb_section.ana-book-feature{ padding: var(--ana-section-pad-v) var(--ana-section-pad-h) !important; } .et_pb_section.ana-services { padding: var(--ana-section-pad-v) var(--ana-section-pad-h) !important; } /* --- Text modules inside ANA sections: no trailing gap --- */ .ana-hero .et_pb_text, .ana-page-header .et_pb_text, .ana-trust-strip .et_pb_text, .ana-cta-band .et_pb_text, .ana-book-feature .et_pb_text, .ana-stats-band .et_pb_text { margin-bottom: 0 !important; } .ana-section-pad .et_pb_text { margin-bottom: var(--space-4); } .ana-center { text-align: center; } /* --- Dark sections: text module content inherits light colors --- */ .ana-hero .et_pb_text, .ana-page-header .et_pb_text, .ana-book-feature .et_pb_text, .ana-stats-band .et_pb_text { color: rgba(255, 255, 255, 0.82); } .ana-book-feature .et_pb_text p { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-md); line-height: 1.65; } .ana-book-feature h2 { color: var(--ana-white); } /* --- Native Divi buttons — brand styling for all variants --- */ body #page-container .et_pb_button { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; border-radius: var(--radius-md); padding: 0.85rem 1.6rem !important; transition: all var(--transition-base); line-height: 1.2; } body #page-container .et_pb_button:after, body #page-container .et_pb_button:before { display: none; } body #page-container a.et_pb_button.ana-btn--primary, body #page-container .ana-btn--primary.et_pb_button { background: var(--ana-sky); color: var(--ana-navy); border: 2px solid var(--ana-sky); } body #page-container a.et_pb_button.ana-btn--primary:hover { background: var(--ana-sky-dark); border-color: var(--ana-sky-dark); color: var(--ana-white); } body #page-container a.et_pb_button.ana-btn--outline { background: transparent; color: var(--ana-white); border: 2px solid rgba(255, 255, 255, 0.55); } body #page-container a.et_pb_button.ana-btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--ana-white); color: var(--ana-white); } body #page-container a.et_pb_button.ana-btn--secondary { background: var(--ana-navy); color: var(--ana-white); border: 2px solid var(--ana-navy); } body #page-container a.et_pb_button.ana-btn--secondary:hover { background: var(--ana-navy-mid); border-color: var(--ana-navy-mid); color: var(--ana-white); } body #page-container a.et_pb_button.ana-btn--outline-dark { background: transparent; color: var(--ana-navy); border: 2px solid var(--ana-navy); } body #page-container a.et_pb_button.ana-btn--outline-dark:hover { background: var(--ana-navy); color: var(--ana-white); } /* Buttons sit inline with breathing room */ .et_pb_button_module_wrapper { display: inline-block !important; margin: var(--space-2) var(--space-3) 0 0; } /* --- Trust strip text module --- */ .ana-trust-strip .ana-trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); } /* --- Service cards as native blurbs --- */ .et_pb_blurb.ana-service-card { padding: var(--space-8); height: 100%; } .ana-service-card .et_pb_module_header, .ana-service-card .et_pb_module_header a { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--ana-ink); margin-bottom: var(--space-3); } .ana-service-card .et_pb_blurb_description p { font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.7; margin-bottom: var(--space-5); } .ana-services__grid-row .et_pb_column { margin-bottom: var(--space-4); } /* --- Native CTA module on the sky band --- */ .ana-cta-band .et_pb_promo { background: transparent !important; padding: 0; text-align: center; } .ana-cta-band .et_pb_module_header { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 400; color: var(--ana-navy); margin-bottom: var(--space-4); } .ana-cta-band .et_pb_promo_description p { font-size: var(--fs-md); color: rgba(15, 45, 82, 0.8); max-width: 55ch; margin: 0 auto var(--space-6); } body #page-container .ana-cta-band a.et_pb_button { background: var(--ana-navy); color: var(--ana-white); border: 2px solid var(--ana-navy); } body #page-container .ana-cta-band a.et_pb_button:hover { background: var(--ana-navy-mid); border-color: var(--ana-navy-mid); } /* --- Home feature + biennial rows: badge column centered --- */ .ana-badge-wrap .ana-meeting-badge { margin: 0 auto; } .ana-home-feature .et_pb_row, .ana-biennial-row { display: flex; align-items: center; flex-wrap: wrap; } .ana-biennial-row .et_pb_column { display: flex; flex-direction: column; justify-content: center; } /* --- Stats band text modules --- */ .ana-stats-band .ana-stat { text-align: center; } /* --- Native Blog module cards --- */ .ana-blog-native .et_pb_post { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); overflow: hidden; padding: 0 0 var(--space-5); margin-bottom: var(--space-6); transition: box-shadow var(--transition-base), transform var(--transition-base); } .ana-blog-native .et_pb_post:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .ana-blog-native .et_pb_post .entry-featured-image-url { margin-bottom: var(--space-4); display: block; } .ana-blog-native .et_pb_post img { width: 100%; height: auto; display: block; } .ana-blog-native .et_pb_post .entry-title, .ana-blog-native .et_pb_post .entry-title a { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--ana-ink); padding: 0 var(--space-5); } .ana-blog-native .et_pb_post .entry-title a:hover { color: var(--ana-sky-dark); } .ana-blog-native .et_pb_post .post-meta, .ana-blog-native .et_pb_post .post-content { padding: 0 var(--space-5); font-size: var(--fs-sm); color: var(--ana-text-muted); } .ana-blog-native .et_pb_post .post-content p { color: var(--ana-ink-mid); line-height: 1.7; } .ana-blog-native .et_pb_post a.more-link { color: var(--ana-sky-dark); font-weight: 600; padding: 0 var(--space-5); } /* --- Header polish --- */ #main-header { box-shadow: none; border-bottom: 1px solid var(--ana-border); } #logo { max-height: 64%; } #top-menu li a { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ana-ink-mid); transition: color var(--transition-fast); } #top-menu li a:hover { color: var(--ana-sky-dark); opacity: 1; } #top-menu li.current-menu-item > a, #top-menu li.current_page_item > a { color: var(--ana-sky-dark); } /* --- Footer: hide empty default areas, brand the bottom bar --- */ #footer-widgets { display: none; } #main-footer { background: var(--ana-navy); } #main-footer .et-social-icons { display: none; } #footer-bottom { background: rgba(0, 0, 0, 0.25); padding: 18px 0; } #footer-info { font-family: var(--font-body); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); float: none; text-align: center; width: 100%; } #footer-info a { color: rgba(255, 255, 255, 0.85); font-weight: 500; } #footer-info a:hover { color: var(--ana-sky); } /* --- Contact details column typography --- */ .ana-contact-details h2 { font-family: var(--font-heading); color: var(--ana-ink); margin-bottom: var(--space-1); } .ana-contact-details h3 { font-family: var(--font-heading); color: var(--ana-navy); margin: var(--space-5) 0 var(--space-2); } /* CTA module marker class (styling lives under .ana-cta-band) */ .ana-cta-native { margin-bottom: 0 !important; } /* ========================================================================== 25. ANA v1.3 — MENU FIX, A11Y, GRAVITY FORMS, FILTER, FOOTER STRUCTURE ========================================================================== */ /* --- Header / main menu: no wrap, tightened, Contact as CTA --- */ #main-header .container { width: 94% !important; max-width: 1440px; } #et-top-navigation { display: flex; align-items: center; float: right; } #et-top-navigation nav { display: flex; align-items: center; } #top-menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; } #top-menu li { padding-right: 0; margin: 0; } #top-menu li a { font-size: 14px; letter-spacing: 0.01em; padding: 10px 11px !important; display: inline-block; } #top-menu > li:last-child > a { background: var(--ana-sky); color: var(--ana-navy) !important; border-radius: var(--radius-md); padding: 10px 18px !important; margin-left: 8px; font-weight: 600; } #top-menu > li:last-child > a:hover { background: var(--ana-sky-dark); color: var(--ana-white) !important; } #top-menu > li:last-child.current-menu-item > a { color: var(--ana-navy) !important; } /* Kill the header search icon + overlay trigger entirely */ #et_top_search, #et_search_icon, .et_search_form_container, #main-header .et-search-form { display: none !important; } /* Menu active state: underline + color (not color alone — a11y) */ #top-menu li.current-menu-item > a, #top-menu li.current_page_item > a { color: var(--ana-sky-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* --- Interior page header H1: always white on navy --- */ .ana-page-header h1, .ana-page-header .et_pb_text h1, .ana-page-header .ana-page-header__title { color: var(--ana-white) !important; } .ana-hero h1, .ana-hero .et_pb_text h1 { color: var(--ana-white) !important; } .ana-hero h1 em { color: var(--ana-sky) !important; } /* --- Footer band: structured address --- */ .ana-footer-band__tagline { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--space-4); } .ana-footer-band__address { font-style: normal; color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); line-height: 1.9; } .ana-footer-band__address span { display: block; } /* --- About / prose: full content width --- */ .ana-prose p { max-width: none; } /* --- Prose + detail links: underlined for non-color affordance --- */ .ana-prose a, .ana-contact-details a { color: var(--ana-sky-dark); text-decoration: underline; text-underline-offset: 3px; } .ana-prose a:hover, .ana-contact-details a:hover { color: var(--ana-navy); } /* --- Meeting archive decade filter --- */ .ana-archive-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-2); } .ana-filter-btn { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ana-border); background: var(--ana-white); color: var(--ana-ink-mid); cursor: pointer; transition: all var(--transition-fast); } .ana-filter-btn:hover { border-color: var(--ana-sky-dark); color: var(--ana-sky-dark); } .ana-filter-btn.is-active { background: var(--ana-navy); border-color: var(--ana-navy); color: var(--ana-white); } .ana-doc-list__item.is-hidden { display: none; } /* --- Focus visibility (WCAG 2.4.7) --- */ a:focus-visible, button:focus-visible, .ana-btn:focus-visible, .ana-filter-btn:focus-visible, body #page-container .et_pb_button:focus-visible, .ana-doc-list__item:focus-visible, #top-menu li a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ana-sky-dark) !important; outline-offset: 2px; border-radius: 3px; } /* --- Gravity Forms: match the ANA form design --- */ .ana-gf-wrap { background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8); } .ana-gf-wrap .gform_wrapper { margin: 0; } .ana-gf-wrap .gform_wrapper .gfield_label { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ana-ink); margin-bottom: 4px; } .ana-gf-wrap .gform_wrapper .gfield_required { color: var(--ana-magenta); } .ana-gf-wrap .gform_wrapper input[type="text"], .ana-gf-wrap .gform_wrapper input[type="email"], .ana-gf-wrap .gform_wrapper input[type="tel"], .ana-gf-wrap .gform_wrapper select, .ana-gf-wrap .gform_wrapper textarea { width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--ana-ink); background: var(--ana-warm-white); border: 1px solid var(--ana-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ana-gf-wrap .gform_wrapper input:focus, .ana-gf-wrap .gform_wrapper select:focus, .ana-gf-wrap .gform_wrapper textarea:focus { border-color: var(--ana-sky-dark); box-shadow: 0 0 0 3px rgba(11, 118, 153, 0.18); outline: none; } .ana-gf-wrap .gform_footer { margin-top: var(--space-4); padding: 0; } .ana-gf-wrap .gform_wrapper .gform_button { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; background: var(--ana-sky); color: var(--ana-navy); border: 2px solid var(--ana-sky); border-radius: var(--radius-md); padding: 0.85rem 1.8rem; cursor: pointer; transition: all var(--transition-base); } .ana-gf-wrap .gform_wrapper .gform_button:hover { background: var(--ana-sky-dark); border-color: var(--ana-sky-dark); color: var(--ana-white); } .ana-gf-wrap .gform_wrapper .gform_validation_errors, .ana-gf-wrap .gform_wrapper .gfield_validation_message { border-radius: var(--radius-sm); font-size: var(--fs-sm); } .ana-gf-wrap .gform_confirmation_message { background: var(--ana-sky-light); border-left: 4px solid var(--ana-sky-dark); padding: var(--space-4) var(--space-5); color: var(--ana-ink); border-radius: var(--radius-sm); } /* ========================================================================== 26. ANA v1.3.1 — BIENNIAL FEATURE TIGHTENING + FLAT BADGE ========================================================================== */ /* Tighter vertical rhythm: eyebrow → title → date → description → buttons */ .ana-biennial-row .et_pb_column { display: block; } .ana-biennial-row .ana-eyebrow { margin-bottom: var(--space-2); } .ana-biennial-row .et_pb_text h2 { margin-bottom: var(--space-2) !important; padding-bottom: 0 !important; } .ana-biennial-row .ana-meeting-card__dates { margin: 0 0 var(--space-3) !important; padding-bottom: 0 !important; } .ana-biennial-row .et_pb_text p { margin-bottom: var(--space-3) !important; padding-bottom: 0 !important; } .ana-biennial-row .et_pb_text { margin-bottom: var(--space-2) !important; } /* Buttons share one line */ .ana-biennial-row .et_pb_button_module_wrapper { display: inline-block !important; margin: var(--space-2) var(--space-3) 0 0; vertical-align: middle; } /* Flat badge — concentric rings echoing the logo, no gloss/gradient */ .ana-meeting-badge { background: var(--ana-navy); border: 3px solid var(--ana-sky); box-shadow: inset 0 0 0 8px var(--ana-navy), inset 0 0 0 10px rgba(29, 189, 230, 0.45); width: 200px; height: 200px; } .ana-meeting-badge__year { font-size: 3rem; } .ana-meeting-badge--sm { width: 150px; height: 150px; } .ana-meeting-badge--sm .ana-meeting-badge__year { font-size: 2.1rem; } .ana-meeting-badge--sm .ana-meeting-badge__label { font-size: 0.65rem; letter-spacing: 0.12em; } /* Badge column: centered against the text column */ .ana-badge-wrap { display: flex; align-items: center; justify-content: center; height: 100%; } /* ========================================================================== 27. ANA v1.3.2 — BIENNIAL DATE PANEL (fills the badge column) ========================================================================== */ .ana-biennial-row { align-items: stretch; } .ana-biennial-row .ana-badge-wrap, .ana-badge-wrap .et_pb_text_inner { height: 100%; display: flex; width: 100%; } .ana-date-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--ana-navy); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-6); min-height: 340px; position: relative; overflow: hidden; } .ana-date-panel::before { content: ''; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(29, 189, 230, 0.25); pointer-events: none; } .ana-date-panel__rings { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--ana-sky); margin-bottom: var(--space-6); } .ana-date-panel__rings::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--ana-sky); } .ana-date-panel__year { font-family: var(--font-heading); font-size: 3.4rem; line-height: 1; color: var(--ana-white); } .ana-date-panel__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ana-sky); margin-top: var(--space-3); } .ana-date-panel__loc { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); margin-top: var(--space-2); } /* ========================================================================== 28. ANA v1.3.3 — BUTTON ROW ALIGNMENT ========================================================================== */ /* Side-by-side buttons: top-aligned boxes, identical margins, no baseline drift */ .et_pb_button_module_wrapper { display: inline-flex !important; vertical-align: top !important; margin: var(--space-3) var(--space-3) 0 0 !important; } .et_pb_button_module_wrapper .et_pb_button { margin: 0 !important; display: inline-flex; align-items: center; } /* ========================================================================== 29. ANA v1.4.1 — SINGLE POST LAYOUT (imported content matches the design) ========================================================================== */ .single-post .ana-page-header--post { margin-bottom: 0; } .single-post #main-content .container { width: 100%; max-width: var(--ana-max-width); padding: var(--space-12) var(--ana-section-pad-h) var(--space-16); } .single-post #left-area { width: 100% !important; float: none; padding: 0 !important; } .single-post #sidebar { display: none; } .single-post article.et_pb_post { background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; } .single-post .entry-title, .single-post .post-meta { display: none; } .single-post .entry-content p { font-size: var(--fs-base); color: var(--ana-ink-mid); line-height: 1.75; } .single-post .entry-content a { color: var(--ana-sky-dark); text-decoration: underline; text-underline-offset: 3px; } .single-post .entry-content a:hover { color: var(--ana-navy); } /* ========================================================================== 30. ANA v1.5.1 — EQUAL-HEIGHT SERVICE CARDS ========================================================================== */ .ana-services__grid-row { display: flex; align-items: stretch; flex-wrap: wrap; } .ana-services__grid-row .et_pb_column { display: flex; margin-bottom: 0; } .et_pb_blurb.ana-service-card { width: 100%; height: auto; display: flex; flex-direction: column; } .ana-service-card .et_pb_blurb_content, .ana-service-card .et_pb_blurb_container { display: flex; flex-direction: column; flex: 1; height: 100%; } .ana-service-card .et_pb_blurb_description { display: flex; flex-direction: column; flex: 1; } .ana-service-card .et_pb_blurb_description .ana-service-card__link { margin-top: auto; } .ana-service-card .et_pb_blurb_description p { margin-bottom: var(--space-5); } /* ========================================================================== 31. ANA v1.5.2 — BOLD/EMPHASIS TEXT ON DARK SECTIONS (a11y contrast fix) ========================================================================== */ /* Divi applies its global (dark) text color to strong/b/em — force white inside every navy/dark section so emphasized text stays readable. */ .ana-hero .et_pb_text strong, .ana-hero .et_pb_text b, .ana-hero .et_pb_text em, .ana-book-feature .et_pb_text strong, .ana-book-feature .et_pb_text b, .ana-book-feature .et_pb_text em, .ana-page-header .et_pb_text strong, .ana-page-header .et_pb_text b, .ana-stats-band .et_pb_text strong, .ana-stats-band .et_pb_text b, .ana-date-panel strong, .ana-cta-band--dark strong, .ana-footer-band strong { color: var(--ana-white) !important; } /* Brighten general body text on dark sections to AA-comfortable levels */ .ana-book-feature .et_pb_text, .ana-book-feature .et_pb_text p { color: rgba(255, 255, 255, 0.88); } .ana-book-feature .ana-text-muted-light { color: rgba(255, 255, 255, 0.78); } /* ========================================================================== 32. ANA v1.5.3 — HOME FEATURE MATCHES BIENNIAL RHYTHM + DATE STYLE ========================================================================== */ /* Serif sky date line on dark sections */ .ana-dates--dark, .ana-book-feature .ana-meeting-card__dates { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--ana-sky) !important; margin: 0 0 var(--space-3) !important; padding: 0 !important; line-height: 1.2; } /* Same tight vertical rhythm as the Biennial feature */ .ana-home-feature .et_pb_text h2 { margin-bottom: var(--space-2) !important; padding-bottom: 0 !important; } .ana-home-feature .ana-eyebrow { margin-bottom: var(--space-2); } .ana-home-feature .et_pb_text p { margin-bottom: var(--space-3) !important; padding-bottom: 0 !important; } .ana-home-feature .et_pb_text { margin-bottom: var(--space-2) !important; } .ana-home-feature .et_pb_button_module_wrapper { margin-top: var(--space-2) !important; } /* ========================================================================== 33. ANA v1.6 — NEWS GRID (filters, search, uniform cards, pagination) ========================================================================== */ .ana-news__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); } .ana-news__toolbar .ana-archive-filter { margin: 0; } .ana-news__search { display: flex; gap: var(--space-2); } .ana-news__search input[type="search"] { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ana-ink); background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-md); padding: 0.55rem 1rem; min-width: 220px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ana-news__search input[type="search"]:focus { border-color: var(--ana-sky-dark); box-shadow: 0 0 0 3px rgba(11, 118, 153, 0.18); outline: none; } /* Uniform card grid */ .ana-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } .ana-news-card { display: flex; flex-direction: column; background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); } .ana-news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .ana-news-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ana-navy-light); overflow: hidden; } .ana-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ana-news-card__placeholder { position: absolute; inset: 0; background: var(--ana-navy); display: flex; align-items: center; justify-content: center; } .ana-news-card__placeholder span { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--ana-sky); box-shadow: inset 0 0 0 10px var(--ana-navy), inset 0 0 0 12px rgba(29, 189, 230, 0.5); } .ana-news-card__count { position: absolute; bottom: 10px; right: 10px; background: rgba(15, 45, 82, 0.85); color: var(--ana-white); font-size: var(--fs-xs); font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; } .ana-news-card__body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; flex: 1; } .ana-news-card__title { margin: 0 0 var(--space-2); } .ana-news-card__title a { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--ana-ink); text-decoration: none; line-height: 1.25; transition: color var(--transition-fast); } .ana-news-card__title a:hover { color: var(--ana-sky-dark); } .ana-news-card__meta { font-size: var(--fs-xs); color: var(--ana-text-muted); margin: 0 0 var(--space-3); } .ana-news-card__cat { color: var(--ana-sky-dark); font-weight: 600; } .ana-news-card__excerpt { font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.65; margin: 0; } .ana-news__empty { font-size: var(--fs-base); color: var(--ana-ink-mid); grid-column: 1 / -1; } /* Numbered pagination */ .ana-news__pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); } .ana-page-num { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ana-ink-mid); background: var(--ana-white); border: 1.5px solid var(--ana-border); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); } .ana-page-num:hover { border-color: var(--ana-sky-dark); color: var(--ana-sky-dark); } .ana-page-num.is-current { background: var(--ana-navy); border-color: var(--ana-navy); color: var(--ana-white); } .ana-news.is-loading .ana-news__grid { opacity: 0.45; pointer-events: none; transition: opacity var(--transition-fast); } /* ========================================================================== 34. ANA v1.6.1 — FILTER PILL STATES (anchor pills lose to Divi link color) ========================================================================== */ /* Base — beat Divi's global anchor color for pills */ body #page-container .ana-filter-btn, body #page-container a.ana-filter-btn { color: var(--ana-ink-mid) !important; background: var(--ana-white); text-decoration: none !important; } /* Hover (inactive) */ body #page-container .ana-filter-btn:hover, body #page-container a.ana-filter-btn:hover { border-color: var(--ana-sky-dark); color: var(--ana-sky-dark) !important; background: var(--ana-white); } /* Active — white text on navy, in every state */ body #page-container .ana-filter-btn.is-active, body #page-container a.ana-filter-btn.is-active { background: var(--ana-navy) !important; border-color: var(--ana-navy) !important; color: var(--ana-white) !important; } body #page-container .ana-filter-btn.is-active:hover, body #page-container a.ana-filter-btn.is-active:hover { background: var(--ana-navy-mid) !important; border-color: var(--ana-navy-mid) !important; color: var(--ana-white) !important; } /* Keyboard focus — visible ring on both active and inactive pills */ body #page-container .ana-filter-btn:focus-visible, body #page-container a.ana-filter-btn:focus-visible { outline: 3px solid var(--ana-sky-dark) !important; outline-offset: 2px; } body #page-container .ana-filter-btn.is-active:focus-visible { outline-color: var(--ana-sky) !important; } /* ========================================================================== 35. ANA v1.6.2 — LEGACY BLOCK GALLERIES + FULL-WIDTH SINGLE POSTS ========================================================================== */ /* Old-format block galleries (WP 5.x: ul.blocks-gallery-grid > li) — flatten the list into the same responsive grid as modern galleries. */ .wp-block-gallery > .blocks-gallery-grid, .wp-block-gallery > ul { display: contents !important; } .blocks-gallery-grid, .wp-block-gallery ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .blocks-gallery-item, .blocks-gallery-grid li { margin: 0 !important; width: auto !important; display: block !important; } .blocks-gallery-item figure { margin: 0 !important; width: 100% !important; height: 100%; display: block !important; } .blocks-gallery-item img, .wp-block-gallery li img { width: 100% !important; height: 180px !important; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--ana-border); cursor: zoom-in; display: block; } /* Single posts: kill Divi's reserved sidebar column and its divider line */ .single-post #left-area { width: 100% !important; float: none !important; padding-right: 0 !important; } .single-post #sidebar { display: none !important; } .single-post #main-content .container::before { display: none !important; } .single-post .entry-content { max-width: none; } /* ========================================================================== 36. ANA v1.8 — WIDE GALLERY GRID ON SINGLE POSTS ========================================================================== */ /* Galleries break out of the text column to a wide, centered grid */ .single-post .entry-content .gallery, .single-post .entry-content .wp-block-gallery { width: min(1360px, 94vw); position: relative; left: 50%; transform: translateX(-50%); grid-template-columns: repeat(4, 1fr); } .single-post .gallery img, .single-post .wp-block-gallery img, .single-post .blocks-gallery-item img { height: 210px !important; } /* No stray gaps above galleries from emptied paragraphs */ .single-post .entry-content > p:empty { display: none; } /* ========================================================================== 37. ANA v1.8.1 — MEETING CARD: ACTIONS COLUMN ON THE RIGHT ========================================================================== */ .ana-meeting-card__cols { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); } .ana-meeting-card__cols .ana-meeting-card__details { flex: 1; } .ana-meeting-card__cols .ana-meeting-card__details p:last-child { margin-bottom: 0; } .ana-meeting-card__actions { display: flex; flex-direction: column; gap: var(--space-3); min-width: 240px; flex-shrink: 0; } .ana-meeting-card__actions .ana-btn { margin: 0; text-align: center; justify-content: center; display: inline-flex; align-items: center; } /* ========================================================================== 38. ANA v1.8.2 — CONTACT SUB-HEADING SCALE ========================================================================== */ /* Coordinator name reads as a sub-heading, not a section title */ .ana-contact-details h3 { font-size: var(--fs-md); margin: var(--space-6) 0 var(--space-1); } /* ========================================================================== 39. ANA v1.8.5 — HERO TITLE: KEEP "NORTH ATLANTIC" INTACT ========================================================================== */ /* The 16ch measure forced "Angle North / Atlantic". The component's name is a proper noun and must never split across lines. Removing the cap lets the full name sit on one line at desktop; the nowrap on guarantees that even at narrow widths the break can only ever fall after "Angle". */ .ana-hero__title { max-width: none; text-wrap: balance; } .ana-hero__title em { white-space: nowrap; } /* Page-header H1s (Officers, Membership, …) get the same protection. */ .ana-page-header__title { text-wrap: balance; } /* ========================================================================== 40. ANA v1.8.5 — NOTE CALLOUT: NO PREMATURE WRAPPING ========================================================================== */ /* .ana-note sits directly beneath full-width data tables. The old 72ch cap made it break mid-phrase while the table beside it ran the full width, which read as an accidental line break. The note now matches its table, and text-wrap: pretty keeps short trailing lines (orphans) from forming. */ .ana-note { max-width: none; text-wrap: pretty; hyphens: none; } /* When a note follows a table it is that table's companion — tie them together visually rather than letting it float as a separate block. */ .ana-table + .ana-note { margin-top: calc(var(--space-6) * -1 + var(--space-4)); } /* ========================================================================== 41. ANA v1.8.5 — OFFICER CARDS (HEADSHOT-READY) ========================================================================== */ /* Renders correctly with no photos today. Dropping an into .ana-officer-card__photo later needs no markup or CSS changes — the monogram fallback simply stops showing. */ .ana-officer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; } .ana-officer-card { display: flex; align-items: center; gap: var(--space-5); background: var(--ana-white); border: 1px solid var(--ana-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); transition: box-shadow var(--transition-base), transform var(--transition-base); } .ana-officer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* --- Photo slot: fixed aspect so text alignment never shifts when the client adds headshots one at a time. --- */ .ana-officer-card__photo { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--ana-navy-light); border: 2px solid var(--ana-sky-light); display: grid; place-items: center; } .ana-officer-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Monogram placeholder — hidden automatically once an is present. */ .ana-officer-card__monogram { font-family: var(--font-heading); font-size: var(--fs-md); line-height: 1; color: var(--ana-navy); letter-spacing: 0.04em; user-select: none; } .ana-officer-card__photo:has(img) .ana-officer-card__monogram { display: none; } .ana-officer-card__body { min-width: 0; } .ana-officer-card__role { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ana-sky-dark); margin-bottom: var(--space-1); } /* Rendered as an

so the officer list is navigable by heading and the page keeps a real document outline. Divi styles h2 globally, so the selector is scoped tightly enough to win without !important. */ .ana-officer-card .ana-officer-card__name, h2.ana-officer-card__name { display: block; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 400; color: var(--ana-navy); line-height: 1.25; margin: 0 0 var(--space-1); padding: 0; text-wrap: balance; } .ana-officer-card__location { display: block; font-size: var(--fs-sm); color: var(--ana-text-muted); line-height: 1.4; } /* ========================================================================== 42. ANA v1.8.5 — SERVICE CARD GRID: 2 x 2 ========================================================================== */ /* The Explore band now carries four cards. Two rows of two keeps each card's copy at a comfortable measure — four across would squeeze it. */ .ana-services__grid-row + .ana-services__grid-row { margin-top: var(--space-6); } /* ========================================================================== 43. ANA v1.8.5 — PAY COLUMN ON FEE TABLES ========================================================================== */ /* Matches the dues table on Membership so both payment surfaces behave identically. The action column hugs its button. */ .ana-table--pay td:last-child, .ana-table--dues td:last-child { width: 1%; white-space: nowrap; text-align: right; } .ana-table--pay thead th:last-child, .ana-table--dues thead th:last-child { width: 1%; } /* ========================================================================== 44. ANA v1.8.5 — PENDING (NOT YET PAYABLE) TABLE ROWS ========================================================================== */ /* 2027 dues ship as placeholders until the board sets the figures. A row with no amount must not offer a Pay button that goes nowhere — it reads as plainly unavailable instead, in text rather than colour alone. */ /* --ana-text-muted (#637083) drops to 4.31:1 on the striped row tint, under AA for small text. --ana-ink-mid clears 9.8:1 on both row colours. */ .ana-amount-pending, .ana-pay-pending { color: var(--ana-ink-mid); font-style: italic; } .ana-pay-pending { display: inline-block; font-size: var(--fs-xs); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; padding: var(--space-2) var(--space-3); border: 1px dashed var(--ana-border); border-radius: var(--radius-pill); white-space: nowrap; } /* ========================================================================== 45. ANA v1.8.6 — SPECIFICITY REPAIRS ========================================================================== */ /* --- Note callout --------------------------------------------------------- v1.8.5 set `.ana-note { max-width: none }` but `.ana-child-theme p` (0,2,0) outranks `.ana-note` (0,1,0), so the 72ch cap survived and the notes kept breaking mid-phrase. Matching the body-class specificity fixes it. */ .ana-child-theme .ana-note { max-width: none; text-wrap: pretty; hyphens: none; } /* --- Centred text modules ------------------------------------------------- Divi emits `.et_pb_module.et_pb_text_align_left` (0,2,0) on every text module, which beat `.ana-center` (0,1,0). That is why the Bylaws block on About rendered left-aligned text under a centred button. */ .ana-child-theme .et_pb_module.ana-center, .ana-child-theme .et_pb_module.ana-center h2, .ana-child-theme .et_pb_module.ana-center p { text-align: center; } .ana-child-theme .et_pb_module.ana-center p { margin-left: auto; margin-right: auto; } /* --- Hero title: restore the brand teal ----------------------------------- The v1.5.2 contrast fix (section 31) forces every inside dark sections to white with !important. It was written for small emphasised runs in body copy, but it also caught the hero wordmark, so "North Atlantic" lost its teal. Teal on navy measures 6.24:1 against the base colour and 4.89:1 at the lightest point of the hero gradient — both clear AA for *normal* text, never mind a 64px display heading, so nothing is given up by restoring it. The !important here is not decoration: it is the only way to outrank an existing !important. Section 31 is left intact so small emphasised text on dark sections keeps its fix; this exempts the wordmark alone. */ .ana-child-theme .ana-hero .et_pb_text .ana-hero__title em, .ana-child-theme .ana-hero__title em { color: var(--ana-sky) !important; } /* ========================================================================== 46. ANA v1.8.6 — SKIP LINK ========================================================================== */ /* WCAG 2.4.1 Bypass Blocks. Hidden until focused, then pinned top-left. */ .ana-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: var(--space-3) var(--space-5); background: var(--ana-navy); color: var(--ana-white); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; } .ana-skip-link:focus { left: 0; outline: 3px solid var(--ana-sky); outline-offset: 2px; color: var(--ana-white); } /* Divi's mobile toggle is a bare ; give it a real hit area now that it is focusable, and a visible focus ring. */ .mobile_menu_bar_toggle:focus-visible { outline: 3px solid var(--ana-sky-dark); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================================================================== 47. ANA v1.8.7 — BACK TO NEWS ========================================================================== */ /* Sits directly above the photo grid. Two things to match. The entry-content column is capped at 780px and centred, while galleries break out to min(1360px, 94vw) via the left:50%/translateX(-50%) trick in section 36 — so the link has to take the SAME breakout, or it floats in the middle of the page while the photos start 300px to its left. And `.single-post .entry-content a` (0,2,1) underlines every link in the content, so the selector here has to outrank it rather than rely on `.ana-back-link` alone. */ .single-post .entry-content .ana-back-nav { width: min(1360px, 94vw); position: relative; left: 50%; transform: translateX(-50%); margin: calc(var(--space-6) * -1) 0 var(--space-5); padding: 0; text-align: left; } .ana-back-nav { margin-bottom: var(--space-5); text-align: left; } .single-post .entry-content .ana-back-nav a.ana-back-link, .ana-back-link { display: inline-block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--ana-sky-dark); text-decoration: none; transition: color var(--transition-fast); } .single-post .entry-content .ana-back-nav a.ana-back-link:hover, .single-post .entry-content .ana-back-nav a.ana-back-link:focus-visible, .ana-back-link:hover, .ana-back-link:focus-visible { color: var(--ana-navy); text-decoration: underline; text-underline-offset: 3px; } .ana-back-link__arrow { display: inline-block; margin-right: var(--space-2); transition: transform var(--transition-fast); } .ana-back-link:hover .ana-back-link__arrow { transform: translateX(-3px); } /* Foot of the post — a gallery can run to 400 photos, so the way out should not be a scroll back to the top. */ /* Width matches the gallery breakout — min(1360px, 94vw) from section 36 — rather than the 1200px content max-width, so the button's left edge lines up with the first column of photos and with the back link at the top. Horizontal padding is zero for the same reason: any inset here would push it in relative to the grid. */ .ana-post-footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); width: min(1360px, 94vw); margin: 0 auto; padding: var(--space-10) 0 var(--space-16); border-top: 1px solid var(--ana-border); } .ana-post-footer-nav .ana-btn { margin: 0; } .ana-post-footer-nav__all { font-size: var(--fs-sm); color: var(--ana-sky-dark); text-decoration: none; } .ana-post-footer-nav__all:hover, .ana-post-footer-nav__all:focus-visible { color: var(--ana-navy); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 600px) { .ana-post-footer-nav { flex-direction: column; align-items: stretch; text-align: center; } } /* ========================================================================== 48. ANA v1.9.2 — COMPONENT HISTORY (About page) ========================================================================== */ .ana-component-history h3 { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--ana-navy); margin: var(--space-10) 0 var(--space-4); } /* Pull quotes — Dr. Subtelny's first-person account. */ .ana-child-theme .ana-quote { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); background: var(--ana-navy-light); border-left: 4px solid var(--ana-sky); border-radius: var(--radius-sm); } .ana-child-theme .ana-quote p { font-size: var(--fs-base); font-style: italic; color: var(--ana-ink-mid); line-height: 1.7; max-width: none; margin-bottom: var(--space-4); } .ana-child-theme .ana-quote p:last-of-type { margin-bottom: 0; } .ana-child-theme .ana-quote cite { display: block; margin-top: var(--space-4); font-size: var(--fs-sm); font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ana-sky-dark); } /* The Component's answer to Hahn's question — the one line that should land. */ .ana-child-theme .ana-quote--feature { background: var(--ana-navy); border-left-color: var(--ana-sky); padding: var(--space-8) var(--space-10); } .ana-child-theme .ana-quote--feature p { font-family: var(--font-heading); font-size: var(--fs-md); font-style: normal; color: var(--ana-white); line-height: 1.5; } /* Founding nine. */ .ana-founder-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; } .ana-founder { padding: var(--space-4) var(--space-5); background: var(--ana-white); border: 1px solid var(--ana-border); border-left: 3px solid var(--ana-sky); border-radius: var(--radius-sm); } .ana-founder__name { display: block; font-family: var(--font-heading); font-size: var(--fs-base); color: var(--ana-navy); line-height: 1.3; } .ana-founder__meta { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--ana-ink-mid); line-height: 1.4; } /* ========================================================================== 49. ANA v1.9.8 — ACCESSIBILITY AUDIT FIXES Findings from a full-site axe-core 4.10.2 pass on 2026-09-29. ========================================================================== */ /* --- 49.1 Small-text contrast on tinted surfaces (WCAG 1.4.3, serious) ----- --ana-sky-dark (#0B7699) clears AA on white at 5.17:1, which is what it was chosen against. On the four tinted section backgrounds the site actually uses it lands at 4.42–4.49:1 — under the 4.5:1 bar, and axe flagged 37 instances across the site (every "PDF" badge, every eyebrow on a tinted band, both attribution lines on the Component page). Rather than lighten the tints or drop the accent, small text gets its own darker token. Measured against every surface in the palette: #0A6784 on #FFFFFF 6.39:1 on #F2EDE8 5.49:1 on #D8F4FD 5.56:1 on #F7FBFD 6.14:1 on #E8EEF7 5.48:1 --ana-sky-dark is unchanged and still carries buttons, links and large headings, so the brand reads exactly as before. */ :root { --ana-sky-ink: #0A6784; /* Small-text accent — AA on every ANA surface */ } .ana-child-theme .ana-eyebrow, .ana-child-theme .ana-doc-list__item span, .ana-child-theme .ana-quote cite, .ana-child-theme .ana-officer-card__role { color: var(--ana-sky-ink); } /* --- 49.2 Table reflow at 320px (WCAG 1.4.10 Reflow) ----------------------- Adding the Pay column pushed both tables to ~400px, so at 320px CSS width — 400% zoom on a 1280px screen, or a small phone — the whole PAGE scrolled sideways. 1.4.10 exempts data tables from reflow, but only if the table itself scrolls rather than the document. role="region" + tabindex="0" + aria-label is the pattern that keeps the scroll container reachable by keyboard and announced by a screen reader. */ .ana-child-theme .ana-table-scroll { /* position:relative is load-bearing, not cosmetic. .ana-sr-only is position:absolute with no offsets, so without a positioned ancestor its containing block is the page: inside a table wider than the viewport it resolves to a static position past the right edge and widens the DOCUMENT, defeating the scroll container it is sitting in. Making the scroller the containing block keeps that overflow where it belongs. */ position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .ana-child-theme .ana-table-scroll > .ana-table { min-width: 32rem; /* below this the three columns become unreadable */ margin-bottom: 0; } .ana-child-theme .ana-table-scroll:focus-visible { outline: 3px solid var(--ana-sky-dark); outline-offset: 3px; } /* A clipped table edge looks like a rendering bug unless something says it scrolls, so below the width where the table is guaranteed to overflow (min-width 32rem inside a ~94vw column) the wrapper gets a pinned edge fade and a one-line instruction. The ::after is positioned against the wrapper, not the scrolling content, so it stays at the visible edge. The hint is decorative and aria-hidden by construction — the scroll region itself is focusable and labelled, so nothing here is load-bearing. */ @media (max-width: 36rem) { .ana-child-theme .ana-table-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; pointer-events: none; background: linear-gradient(to left, rgba(15, 45, 82, 0.18), rgba(15, 45, 82, 0)); } .ana-child-theme .ana-table-scroll + .ana-table-hint { display: block; } } .ana-child-theme .ana-table-hint { display: none; margin: var(--space-2) 0 0; font-size: var(--fs-xs); font-style: italic; color: var(--ana-text-muted); } /* The row-header cell must not inherit 's centred, uppercase column-head styling — it is a label, and should read like the it replaced. */ .ana-child-theme .ana-table tbody th[scope="row"] { font-family: var(--font-body); font-size: inherit; font-weight: 400; text-align: left; text-transform: none; letter-spacing: normal; color: inherit; background: transparent; } /* --- 49.3 Officer cards now use block elements ---------------------------- The card markup moved from nested s to
/

so that wpautop stops injecting a stray
and an (invalid)

-inside- on all eight cards. These rules neutralise Divi's global paragraph spacing and the theme's own 72ch prose measure, which would otherwise apply now that the role and location are real paragraphs. */ .ana-child-theme .ana-officer-card__role, .ana-child-theme .ana-officer-card__location { max-width: none; padding-bottom: 0; } .ana-child-theme .ana-officer-card__role { margin: 0 0 var(--space-1); } .ana-child-theme .ana-officer-card__location { margin: 0; } /* --- 49.4 Reading-progress bar is decorative ------------------------------ It duplicates information the scrollbar already conveys and sat outside every landmark, which axe reported as a "region" violation on each page. main.js now marks it aria-hidden; this keeps it out of print too. */ @media print { .ana-reading-progress { display: none !important; } } /* --- 49.5 The

landmark --------------------------------------------- #ana-main went from a zero-height to a real
. Divi has no opinion about the element, but state it explicitly so no reset can collapse it, and keep the skip-link target from drawing a focus ring around the entire page when it receives programmatic focus. */ .ana-child-theme main#ana-main { display: block; } .ana-child-theme main#ana-main:focus { outline: none; } /* v1.9.9 — the footer band is a
landmark now, not a
. Divi has no section styling that would reach it, but state display explicitly so the element change cannot alter layout. */ .ana-child-theme section.ana-footer-band { display: block; } /* ========================================================================== 50. ANA v1.10.0 — MEMBER ACCESS Sign-in form and the member document list. ========================================================================== */ .ana-child-theme .ana-login { max-width: 26rem; margin: 0 auto; padding: var(--space-8); background: var(--ana-white); border: 1px solid var(--ana-rule, #E3DDD6); border-radius: 4px; } .ana-child-theme .ana-login__intro { margin: 0 0 var(--space-6); color: var(--ana-ink-mid); max-width: none; } .ana-child-theme .ana-login__error { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 4px solid #A32F1E; background: #FBE7E3; color: #7A2214; font-size: var(--fs-sm); max-width: none; } .ana-child-theme .ana-login .login-username, .ana-child-theme .ana-login .login-password { margin-bottom: var(--space-4); } .ana-child-theme .ana-login label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ana-navy); } .ana-child-theme .ana-login input[type="text"], .ana-child-theme .ana-login input[type="password"] { width: 100%; padding: 0.7rem 0.85rem; font-size: 1rem; /* 16px stops iOS zooming the page on focus */ border: 1px solid var(--ana-rule, #D9D2CA); border-radius: 3px; background: var(--ana-white); color: var(--ana-ink); } .ana-child-theme .ana-login input:focus-visible { outline: 3px solid var(--ana-sky-dark); outline-offset: 1px; border-color: var(--ana-sky-dark); } .ana-child-theme .ana-login .login-remember { margin-bottom: var(--space-5); } .ana-child-theme .ana-login .login-remember label { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; } .ana-child-theme .ana-login .login-submit input[type="submit"] { width: 100%; padding: 0.8rem 1rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ana-white); background: var(--ana-sky-dark); border: 0; border-radius: 3px; cursor: pointer; } .ana-child-theme .ana-login .login-submit input[type="submit"]:hover { background: var(--ana-navy); } .ana-child-theme .ana-login__help { margin: var(--space-5) 0 0; font-size: var(--fs-sm); text-align: center; max-width: none; } .ana-child-theme .ana-member-greeting { margin: 0 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--ana-rule, #E3DDD6); font-size: var(--fs-sm); color: var(--ana-ink-mid); max-width: none; } .ana-child-theme .ana-doc-list--member { list-style: none; margin: 0; padding: 0; } .ana-child-theme .ana-doc-list--member li { margin: 0 0 var(--space-3); } .ana-child-theme .ana-doc-list--member .ana-doc-list__item { width: 100%; } /* ========================================================================== 51. ANA v1.10.1 — LIVE PAYMENT ROWS ========================================================================== */ /* Secondary button for LIGHT surfaces. .ana-btn--ghost is white text on a translucent white fill — correct on the navy hero, invisible on a white table row, where it measured 1.00:1 against its own background. This is the variant to use anywhere the surface is pale. text + 2px border #0A6784 on a white row 6.39:1 on the striped row 5.48:1 Comfortably past 4.5:1 for the text (WCAG 1.4.3) and 3:1 for the border (1.4.11), while staying visually subordinate to the solid Pay button beside it — paying is the primary action, asking is not. */ .ana-child-theme .ana-btn--outline, .ana-child-theme a.ana-btn--outline { background-color: transparent; color: var(--ana-sky-ink) !important; border: 2px solid var(--ana-sky-ink); font-weight: 600; } .ana-child-theme .ana-btn--outline:hover, .ana-child-theme a.ana-btn--outline:hover { background-color: var(--ana-sky-ink); color: var(--ana-white) !important; border-color: var(--ana-sky-ink); } .ana-child-theme .ana-btn--outline:focus-visible, .ana-child-theme a.ana-btn--outline:focus-visible { outline: 3px solid var(--ana-navy); outline-offset: 2px; } .ana-child-theme .ana-pay-ask { white-space: nowrap; } /* The Pay button's fill is brand cyan, which is only 1.9:1 against a white row and 2.2:1 against the striped one. The dark label inside identifies it as a control, so this is arguably fine under WCAG 1.4.11 — but a 1px edge in the darker accent settles the question at no visual cost, and crisps the button against both row colours. */ .ana-child-theme .ana-pay-btn { border: 1px solid var(--ana-sky-ink); } /* Both controls sit in the same column, so they need the same box or the column edge visibly jitters between rows. */ .ana-child-theme .ana-pay-btn, .ana-child-theme .ana-pay-ask { display: inline-block; min-width: 7.5rem; text-align: center; vertical-align: middle; } /* Pay buttons leave the site, so they get the standard external-link mark — visible, not colour-dependent, and hidden from screen readers because the link text already says the tab is new. */ .ana-child-theme .ana-pay-btn::after { content: "\2197"; /* north-east arrow */ margin-left: 0.35em; font-size: 0.9em; line-height: 1; speak: never; } /* Keep the two controls on one line at every width — the Pay column is the narrowest in the table and a wrapped button looks broken. */ .ana-child-theme .ana-table--dues td:last-child, .ana-child-theme .ana-table--pay td:last-child { white-space: nowrap; }