/* IFA child theme bundle. Generated by inc/css-bundle.php; edit the sources, not this file. */
/* ---- css/ifa-badges.css ---- */
/**
* Content badges — the shared Type / Topic chip.
*
* Lifted out of css/ifa-search.css so the knowledge hub, Member Comms and
* Publications use ONE definition rather than three that drift. It was
* already the site's badge; Publications shipped a second, rounder, filled
* variant called .ifa-pubs-pill for no reason other than that this file did
* not exist yet.
*
* Enqueued site-wide because it is ~20 lines and three templates need it.
* Cheaper than deciding per page which of them is rendering.
*/
.ifa-search-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
/* Content type & topic badges — outlined IFA blue */
.ifa-search-card__badge {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 4px;
background: transparent;
color: var(--ifa-dark-blue);
border: 1.5px solid var(--ifa-dark-blue);
line-height: 1.6;
}
/* ---- css/accessibility.css ---- */
/* ---------------------------------------------------------------
Accessibility — visually-hidden text
---------------------------------------------------------------
The divi-accessibility-master plugin injects elements carrying
.da11y-screen-reader-text from JS: the "Skip to content" link it
prepends to , and the "Search for..." labels it adds before
Divi search inputs. Both are meant to be invisible until focused.
The plugin ships those rules only via wp_add_inline_style() on
whichever handle happens to be first in wp_styles()->queue — a
handle it does not own — and has no built public/css/ to enqueue
instead. On ifa.ngo that inline block never reaches the page, so
the injected markup arrives unstyled and renders as plain visible
text on every page. See docs/TEMPORARY-MEASURES.md.
--------------------------------------------------------------- */
.da11y-screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
/* Tab to it and it becomes a real, visible control. Dark teal on white
is 7.1:1 — the site's action colour, per the contrast rule in CLAUDE.md. */
.da11y-screen-reader-text:focus {
position: absolute !important;
top: 7px;
left: 7px;
z-index: 1000000; /* above the WP admin bar */
width: auto;
height: auto;
clip: auto;
clip-path: none;
overflow: visible;
margin: 0;
padding: 14px 23px;
background: var(--ifa-dark-teal, #255F71);
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: normal;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ifa-dark-blue, #203248);
}
.da11y-screen-reader-text:focus:hover {
background: var(--ifa-dark-blue, #203248);
color: #fff;
}
/* ---- css/buttons.css ---- */
/* =============================================================
BUTTONS — IFA STYLES
All button variants: utility classes, Divi module classes,
global Divi overrides, and the donate menu item.
Extracted from style.css
============================================================= */
/* === UTILITY BUTTON CLASSES === */
/* View Button - IFA Primary */
.view-btn {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.view-btn:active,
.view-btn:hover {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* Contact Button - IFA Purple */
.form-group .btn-contact {
background: var(--ifa-purple) !important;
border: 1px solid var(--ifa-purple) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.form-group .btn-contact:hover,
.form-group .btn-contact:active {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
opacity: 1 !important;
}
/* Blog "Read More" Link - IFA Primary */
.more-link {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.more-link:hover,
.more-link:active {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* Dark Button - Light mint bg, dark blue text */
.drk-btn,
body .drk-btn,
#page-container .drk-btn {
background: var(--ifa-light-mint) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: var(--ifa-dark-blue) !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.drk-btn:hover,
.drk-btn:active,
body .drk-btn:hover,
body .drk-btn:active,
#page-container .drk-btn:hover,
#page-container .drk-btn:active {
background: var(--ifa-dark-blue) !important;
border-color: var(--ifa-dark-blue) !important;
color: #fff !important;
}
/* === SITE-WIDE IFA DIVI BUTTON CLASSES === */
/* Primary (Dark Blue) */
.et_pb_button.ifa-primary,
.et_pb_button.ifa-navy {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_button.ifa-primary:hover,
.et_pb_button.ifa-navy:hover {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* Secondary (Dark Teal) */
.et_pb_button.ifa-secondary,
.et_pb_button.ifa-teal {
background: var(--ifa-dark-teal) !important;
border: 1px solid var(--ifa-dark-teal) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_button.ifa-secondary:hover,
.et_pb_button.ifa-teal:hover {
background: var(--ifa-dark-blue) !important;
border-color: var(--ifa-dark-blue) !important;
color: #fff !important;
}
/* Ghost / Outline */
.et_pb_button.ifa-ghost {
background: transparent !important;
color: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_button.ifa-ghost:hover {
background: var(--ifa-dark-blue) !important;
color: #fff !important;
border-color: var(--ifa-dark-blue) !important;
}
/* Green Accent */
.et_pb_button.ifa-green {
background: var(--ifa-green) !important;
border: 1px solid var(--ifa-green) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_button.ifa-green:hover {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* Light Button (Purple) */
body .et_pb_button.light-btn,
body a.et_pb_button.light-btn,
#page-container .et_pb_button.light-btn,
#page-container a.et_pb_button.light-btn,
body .et_pb_button_module_wrapper .et_pb_button.light-btn,
body .et_pb_button_module_wrapper a.et_pb_button.light-btn,
#page-container .et_pb_button_module_wrapper .et_pb_button.light-btn,
#page-container .et_pb_button_module_wrapper a.et_pb_button.light-btn {
background: var(--ifa-purple) !important;
border: 1px solid var(--ifa-purple) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
/* Hide Divi button icons for all IFA button variants */
.et_pb_button.ifa-primary:after,
.et_pb_button.ifa-secondary:after,
.et_pb_button.ifa-ghost:after,
.et_pb_button.ifa-green:after,
.et_pb_button.light-btn:after,
.et_pb_button.light-btn-two:after,
.et_pb_button.ifa-light-mint:after,
.et_pb_button.ifa-navy:after,
.et_pb_button.ifa-teal:after {
display: none !important;
}
/* === GLOBAL DIVI BUTTON OVERRIDES ===
Applies IFA dark blue styling to ALL et_pb_button elements site-wide. */
body .et_pb_button:not(.light-btn),
body a.et_pb_button:not(.light-btn),
#page-container .et_pb_button:not(.light-btn),
#page-container a.et_pb_button:not(.light-btn),
body .et_pb_button_module_wrapper .et_pb_button:not(.light-btn),
body .et_pb_button_module_wrapper a.et_pb_button:not(.light-btn),
#page-container .et_pb_button_module_wrapper .et_pb_button:not(.light-btn),
#page-container .et_pb_button_module_wrapper a.et_pb_button:not(.light-btn) {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_button:after,
a.et_pb_button:after {
display: none !important;
}
/* High-specificity hover */
body .et_pb_button:not(.light-btn):hover,
body a.et_pb_button:not(.light-btn):hover,
#page-container .et_pb_button:not(.light-btn):hover,
#page-container a.et_pb_button:not(.light-btn):hover,
body .et_pb_button_module_wrapper .et_pb_button:not(.light-btn):hover,
body .et_pb_button_module_wrapper a.et_pb_button:not(.light-btn):hover,
#page-container .et_pb_button_module_wrapper .et_pb_button:not(.light-btn):hover,
#page-container .et_pb_button_module_wrapper a.et_pb_button:not(.light-btn):hover {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
transition: background .25s ease, border-color .25s ease, color .25s ease !important;
}
/* Light Button Two (White → Purple on hover)
NOTE: placed after the global Divi override so it wins the cascade. */
body .et_pb_button.light-btn-two,
body a.et_pb_button.light-btn-two,
#page-container .et_pb_button.light-btn-two,
#page-container a.et_pb_button.light-btn-two,
body .et_pb_button_module_wrapper .et_pb_button.light-btn-two,
body .et_pb_button_module_wrapper a.et_pb_button.light-btn-two,
#page-container .et_pb_button_module_wrapper .et_pb_button.light-btn-two,
#page-container .et_pb_button_module_wrapper a.et_pb_button.light-btn-two {
background: #fff !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: var(--ifa-dark-blue) !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
body .et_pb_button.light-btn-two:hover,
body a.et_pb_button.light-btn-two:hover,
#page-container .et_pb_button.light-btn-two:hover,
#page-container a.et_pb_button.light-btn-two:hover,
body .et_pb_button_module_wrapper .et_pb_button.light-btn-two:hover,
body .et_pb_button_module_wrapper a.et_pb_button.light-btn-two:hover,
#page-container .et_pb_button_module_wrapper .et_pb_button.light-btn-two:hover,
#page-container .et_pb_button_module_wrapper a.et_pb_button.light-btn-two:hover {
background: var(--ifa-purple) !important;
border-color: var(--ifa-purple) !important;
color: #fff !important;
}
/* Light mint (same as .drk-btn) — wins over global .et_pb_button override */
body .et_pb_button.ifa-light-mint,
body a.et_pb_button.ifa-light-mint,
#page-container .et_pb_button.ifa-light-mint,
#page-container a.et_pb_button.ifa-light-mint,
body .et_pb_button_module_wrapper .et_pb_button.ifa-light-mint,
body .et_pb_button_module_wrapper a.et_pb_button.ifa-light-mint,
#page-container .et_pb_button_module_wrapper .et_pb_button.ifa-light-mint,
#page-container .et_pb_button_module_wrapper a.et_pb_button.ifa-light-mint {
background: var(--ifa-light-mint) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: var(--ifa-dark-blue) !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
body .et_pb_button.ifa-light-mint:hover,
body a.et_pb_button.ifa-light-mint:hover,
#page-container .et_pb_button.ifa-light-mint:hover,
#page-container a.et_pb_button.ifa-light-mint:hover,
body .et_pb_button_module_wrapper .et_pb_button.ifa-light-mint:hover,
body .et_pb_button_module_wrapper a.et_pb_button.ifa-light-mint:hover,
#page-container .et_pb_button_module_wrapper .et_pb_button.ifa-light-mint:hover,
#page-container .et_pb_button_module_wrapper a.et_pb_button.ifa-light-mint:hover {
background: var(--ifa-dark-blue) !important;
border-color: var(--ifa-dark-blue) !important;
color: #fff !important;
}
/* === DONATE MENU ITEM ===
WP menu editor puts .et_pb_button.light-btn-two on the , so the
global light-btn-two rules leak button bg/border/padding onto the list
item. Fix: reset the , move button appearance onto the . */
/* 1. Reset button styles leaking onto the */
#page-container .et_pb_menu .menu-item.et_pb_button.light-btn-two,
#page-container .et_pb_fullwidth_menu .menu-item.et_pb_button.light-btn-two,
#page-container .et_mobile_menu > li.et_pb_button.light-btn-two {
background: none !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* 2. Style the inner as the IFA light-btn-two button */
.et_pb_menu .menu-item.et_pb_button.light-btn-two > a,
.et_pb_fullwidth_menu .menu-item.et_pb_button.light-btn-two > a,
.et_pb_menu .menu-item.donate-menu-trigger > a,
.et_pb_fullwidth_menu .menu-item.donate-menu-trigger > a,
.et_mobile_menu > li.donate-menu-trigger > a {
background: #fff !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: var(--ifa-dark-blue) !important;
background-image: none !important;
border-radius: 8px !important;
padding: 10px 18px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
}
.et_pb_menu .menu-item.et_pb_button.light-btn-two > a:hover,
.et_pb_fullwidth_menu .menu-item.et_pb_button.light-btn-two > a:hover,
.et_pb_menu .menu-item.donate-menu-trigger > a:hover,
.et_pb_fullwidth_menu .menu-item.donate-menu-trigger > a:hover,
.et_mobile_menu > li.donate-menu-trigger > a:hover {
background: var(--ifa-purple) !important;
border-color: var(--ifa-purple) !important;
color: #fff !important;
}
/* 3. Desktop: hide donate item (shortcode [ifa_donate_button] handles it) */
@media only screen and (min-width: 981px) {
#page-container .et_pb_menu .et-menu > li.donate-menu-trigger {
display: none !important;
}
}
/* 4. Mobile/tablet: center the button + clean up mobile nav spacing */
@media only screen and (max-width: 980px) {
.et_mobile_menu > li.donate-menu-trigger {
text-align: center !important;
padding: 10px 20px !important;
border-bottom: none !important;
}
.et_mobile_menu > li.donate-menu-trigger > a {
width: auto !important;
}
}
/* ---- css/gravity-forms.css ---- */
/* =============================================================
GRAVITY FORMS — IFA STYLES
Extracted from style.css
============================================================= */
/* Hide credit card icon container */
body .gform_wrapper .gform_card_icon_container {
display: none !important;
}
/* Keep membership adjustment products valid for Gravity Forms total validation,
while hiding them from applicants when conditional logic activates them. */
body .gform_wrapper .ifa-membership-adjustment-field {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
padding: 0 !important;
margin: -1px !important;
}
/* === GRAVITY FORMS SUBMIT BUTTON - IFA PRIMARY === */
body .gform_wrapper .gform_button,
body .gform_wrapper input[type="submit"],
body .gform_wrapper .gform_submit_button,
#page-container .gform_wrapper .gform_button,
#page-container .gform_wrapper input[type="submit"],
#page-container .gform_wrapper .gform_submit_button {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
cursor: pointer !important;
}
body .gform_wrapper .gform_button:hover,
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper .gform_submit_button:hover,
#page-container .gform_wrapper .gform_button:hover,
#page-container .gform_wrapper input[type="submit"]:hover,
#page-container .gform_wrapper .gform_submit_button:hover {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* === GRAVITY FORMS NAVIGATION BUTTONS === */
.gform_next_button,
.gform_previous_button,
.gform_page_footer input[type="button"],
.gform_page_footer input[type="submit"],
.gform_page_footer .button {
background: var(--ifa-dark-blue) !important;
border: 1px solid var(--ifa-dark-blue) !important;
color: #fff !important;
background-image: none !important;
border-radius: 8px !important;
padding: 12px 20px !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: inline-block !important;
transition: background .25s, border-color .25s, color .25s !important;
cursor: pointer !important;
}
.gform_next_button:hover,
.gform_previous_button:hover,
.gform_page_footer input[type="button"]:hover,
.gform_page_footer input[type="submit"]:hover,
.gform_page_footer .button:hover,
.gform_next_button:active,
.gform_previous_button:active,
.gform_page_footer input[type="button"]:active,
.gform_page_footer input[type="submit"]:active,
.gform_page_footer .button:active {
background: var(--ifa-dark-teal) !important;
border-color: var(--ifa-dark-teal) !important;
color: #fff !important;
}
/* === GRAVITY FORMS PROGRESS BAR - IFA GREEN === */
.gf_progressbar_wrapper {
margin-bottom: 20px;
}
.gf_progressbar_wrapper .gf_progressbar_title {
color: var(--ifa-dark-blue, #203248);
font-weight: 600;
margin-bottom: 10px;
}
.gf_progressbar.gf_progressbar_blue,
.gf_progressbar {
background-color: var(--ifa-light-mint, #EDF7F4) !important;
border: 1px solid var(--ifa-green, #49B461) !important;
border-radius: 8px !important;
height: 20px !important;
overflow: hidden !important;
position: relative !important;
}
.gf_progressbar_percentage.percentbar_blue,
.gf_progressbar_percentage {
background-color: var(--ifa-green, #49B461) !important;
background-image: none !important;
height: 100% !important;
transition: width 0.3s ease !important;
border-radius: 7px 0 0 7px !important;
}
.gf_progressbar_percentage span {
color: #fff !important;
font-weight: 600 !important;
font-size: 12px !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
line-height: 1 !important;
}
/* === GRAVITY FORMS CONFIRMATION MESSAGE - IFA BLUE === */
.gform_confirmation_wrapper.gform-theme,
.gform_confirmation_message {
background: transparent !important;
color: var(--ifa-dark-blue) !important;
}
.gform_confirmation_message p,
.gform_confirmation_message a {
color: var(--ifa-dark-blue) !important;
}
/* ---- css/divi-tabs.css ---- */
/* =============================================================
DIVI TABS — IFA STYLES
Covers both the site-wide horizontal tabs and the vertical
tabs layout (class: vertical-tabs / vtabs-dark).
Extracted from style.css
============================================================= */
/* === SITE-WIDE DIVI TABS === */
/* Container + frame */
body #page-container .et_pb_module.et_pb_tabs .et_pb_all_tabs {
border: 1px solid #49b460 !important;
border-radius: 20px;
padding: 50px;
margin-top: 45px;
}
/* Remove default border */
body #page-container .et_pb_tabs { border: none !important; }
/* Remove inner padding */
body #page-container .et_pb_tabs .et_pb_all_tabs .et_pb_tab { padding: 0 !important; }
/* Kill Divi's pseudo underline */
body #page-container .et_pb_tabs .et_pb_tabs_controls::after { border: none !important; }
/* Base controls */
body #page-container .et_pb_tabs .et_pb_tabs_controls { background: transparent !important; }
body #page-container .et_pb_tabs .et_pb_tabs_controls > li {
border: 0 !important;
margin-right: 10px;
height: auto !important;
}
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a {
display: inline-block;
border: 1px solid transparent;
border-radius: 10px;
padding: 18px 16px;
text-decoration: none;
transition: all 0.25s ease-in-out;
}
/* Active tab */
body #page-container .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active > a,
body #page-container .et_pb_tabs .et_pb_tabs_controls a[aria-selected="true"] {
border-color: #49b460 !important;
}
/* Content spacing */
body #page-container .et_pb_tabs .et_pb_tab_content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body #page-container .et_pb_tabs .et_pb_tab_content > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Hover state */
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a:hover {
background: #fff !important;
border-color: #49b460 !important;
color: #000 !important;
}
/* Keyboard accessibility */
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a:focus-visible {
outline: 2px solid #49b460;
outline-offset: 2px;
background: #fff !important;
color: #000 !important;
}
/* Remove Divi pseudo arrow icons */
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a::before,
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a::after {
display: none !important;
}
/* Responsive */
@media (max-width: 1400px) {
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a { padding: 14px 13px; }
body #page-container .et_pb_tabs .et_pb_all_tabs { padding: 50px; margin-top: 40px; }
}
@media screen and (min-width: 981px) and (max-width: 1348px) {
body #page-container .et_pb_tabs .et_pb_tabs_controls > li > a,
body #page-container .et_pb_tabs .et_pb_all_tabs .et_pb_tab { font-size: 16px !important; }
body #page-container .et_pb_tabs .et_pb_tabs_controls > li { margin-right: 8px; }
body #page-container .et_pb_tabs .et_pb_tab_content p:not(:last-child) { padding-bottom: 1em; }
}
@media screen and (max-width: 1348px) {
body #page-container .et_pb_tabs .et_pb_all_tabs { padding: 30px; margin-top: 30px; }
}
/* ===========================
TABS: Left-side vertical (Divi)
Requires module class: vertical-tabs
=========================== */
/* Remove sneaky vertical divider & pseudo lines */
.et_pb_module.vertical-tabs .et_pb_tab,
.et_pb_module.vertical-tabs .et_pb_tab_content {
border-left: 0 !important;
border: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
}
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs .et_pb_all_tabs {
padding: 0 !important;
border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-top: 0 !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
}
.et_pb_module.vertical-tabs .et_pb_all_tabs::before,
.et_pb_module.vertical-tabs .et_pb_all_tabs::after,
.et_pb_module.vertical-tabs .et_pb_tab::before,
.et_pb_module.vertical-tabs .et_pb_tab::after,
.et_pb_module.vertical-tabs .et_pb_tab_content::before,
.et_pb_module.vertical-tabs .et_pb_tab_content::after {
content: none !important;
}
.et_pb_module.vertical-tabs .et_pb_tab_content {
padding: 0 !important;
}
/* Tab button base styles */
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a {
border: 1px solid var(--ifa-green, #49B461);
border-radius: 12px;
padding: 15px 19px;
width: 100%;
box-sizing: border-box;
background: #fff !important;
font-size: 20px !important;
font-weight: 600 !important;
color: var(--ifa-dark-green, #25773A) !important;
transition: all 0.25s ease-in-out;
box-shadow: -2px 2px 4px rgba(0,0,0,.15), 2px 2px 4px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15);
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-green, #25773A) !important;
border-color: var(--ifa-dark-green, #25773A) !important;
color: #fff !important;
font-weight: 600 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-teal, #255F71) !important;
border-color: var(--ifa-dark-teal, #255F71) !important;
color: #fff !important;
font-weight: 600 !important;
}
/* Nuke Divi's default hover */
.et_pb_module.vertical-tabs .et_pb_tabs_controls li:hover a,
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-teal, #255F71) !important;
border-color: var(--ifa-dark-teal, #255F71) !important;
color: #fff !important;
font-weight: 600 !important;
}
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_tabs_controls li:hover a,
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-teal, #255F71) !important;
border-color: var(--ifa-dark-teal, #255F71) !important;
color: #fff !important;
}
/* Desktop: left-side vertical layout */
@media (min-width: 981px) {
.et_pb_module.vertical-tabs.et_pb_tabs {
display: flex !important;
gap: 40px !important;
border: 0 !important;
align-items: flex-start !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
padding: 0 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls {
order: 1;
width: 50%;
margin: 0;
padding: 0;
list-style: none;
border: 0 !important;
display: block !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li {
float: none !important;
width: 100%;
margin: 0 0 20px 0;
border: 0 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li:last-child {
margin-bottom: 0;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a {
display: block !important;
padding: 15px 19px !important;
text-align: left !important;
width: 100% !important;
box-sizing: border-box !important;
background: #fff !important;
font-size: 20px !important;
font-weight: 600 !important;
color: var(--ifa-dark-green, #25773A) !important;
border: 1px solid var(--ifa-green, #49B461) !important;
border-radius: 12px !important;
transition: all 0.25s ease-in-out !important;
box-shadow: -2px 2px 4px rgba(0,0,0,.15), 2px 2px 4px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15) !important;
min-height: auto !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-green, #25773A) !important;
border-color: var(--ifa-dark-green, #25773A) !important;
color: #fff !important;
font-weight: 600 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-teal, #255F71) !important;
border-color: var(--ifa-dark-teal, #255F71) !important;
color: #fff !important;
font-weight: 600 !important;
}
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs .et_pb_all_tabs {
order: 2;
width: 50%;
display: block !important;
border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
min-width: 0;
}
.et_pb_module.vertical-tabs .et_pb_tab_content {
border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
.et_pb_module.vertical-tabs .et_pb_tab {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* 1080px–1200px optimisation */
@media (min-width: 1080px) and (max-width: 1200px) {
.et_pb_module.vertical-tabs.et_pb_tabs { gap: 35px !important; }
.et_pb_module.vertical-tabs .et_pb_tabs_controls {
width: 48% !important;
flex-shrink: 0 !important;
}
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs .et_pb_all_tabs {
width: 52% !important;
flex-shrink: 0 !important;
}
}
/* Mobile/tablet: stacked layout */
@media (max-width: 980px) {
.et_pb_module.vertical-tabs.et_pb_tabs {
display: block !important;
border: 0;
background: var(--ifa-light-mint, #EDF7F4) !important;
padding: 15px !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls {
width: 100% !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
border: 0 !important;
display: block !important;
list-style: none;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li {
float: none !important;
display: block !important;
width: 100% !important;
margin: 0 0 12px 0 !important;
border: 0 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li:last-child {
margin-bottom: 0 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a {
display: block !important;
width: 100% !important;
padding: 16px 20px !important;
text-align: center !important;
font-size: 18px !important;
font-weight: 600 !important;
border: 1px solid var(--ifa-green, #49B461) !important;
border-radius: 12px !important;
box-sizing: border-box !important;
background: #fff !important;
color: var(--ifa-dark-green, #25773A) !important;
transition: all 0.25s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
min-height: 48px !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-green, #25773A) !important;
border-color: var(--ifa-dark-green, #25773A) !important;
color: #fff !important;
font-weight: 600 !important;
}
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a:hover,
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a:active {
background: var(--ifa-dark-teal, #255F71) !important;
border-color: var(--ifa-dark-teal, #255F71) !important;
color: #fff !important;
font-weight: 600 !important;
}
body #page-container .et_pb_module.vertical-tabs.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs .et_pb_all_tabs {
width: 100% !important;
order: initial !important;
border: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 0 !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
display: block !important;
}
.et_pb_module.vertical-tabs .et_pb_tab_content {
padding: 0 !important;
border: 0 !important;
background: var(--ifa-light-mint, #EDF7F4) !important;
}
.et_pb_module.vertical-tabs .et_pb_tab {
margin-top: 0 !important;
padding-top: 0 !important;
border: 0 !important;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.et_pb_module.vertical-tabs.et_pb_tabs { padding: 12px !important; }
.et_pb_module.vertical-tabs .et_pb_tabs_controls { margin-bottom: 15px !important; }
.et_pb_module.vertical-tabs .et_pb_tabs_controls li { margin-bottom: 10px !important; }
.et_pb_module.vertical-tabs .et_pb_tabs_controls li a {
padding: 14px 16px !important;
font-size: 16px !important;
}
}
/* ===========================
DARK VARIANT: vertical-tabs.vtabs-dark
Usage: Add both "vertical-tabs" and "vtabs-dark" to module
=========================== */
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content {
background: transparent !important;
}
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_all_tabs {
background: transparent !important;
}
/* Left border accent on content */
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content {
border-left: 4px solid var(--ifa-dark-blue, #203248) !important;
padding-left: 20px !important;
color: var(--ifa-dark-blue, #203248) !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content p,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content div,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content span,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content li {
color: var(--ifa-dark-blue, #203248) !important;
}
/* Active tab border override */
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active > a,
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_tabs_controls a[aria-selected="true"] {
border-color: var(--ifa-dark-blue, #203248) !important;
}
/* Tab button states */
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a {
border: 2px solid var(--ifa-dark-blue, #203248) !important;
background: #fff !important;
color: var(--ifa-dark-blue, #203248) !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a:hover,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li:hover a {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
/* High specificity hover override */
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li:hover a,
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
/* Desktop overrides */
@media (min-width: 981px) {
.et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs { background: transparent !important; }
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a {
border: 2px solid var(--ifa-dark-blue, #203248) !important;
background: #fff !important;
color: var(--ifa-dark-blue, #203248) !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_all_tabs { background: transparent !important; }
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content {
border-left: 4px solid var(--ifa-dark-blue, #203248) !important;
padding-left: 20px !important;
}
}
/* Mobile overrides */
@media (max-width: 980px) {
.et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs { background: transparent !important; }
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a {
border: 2px solid var(--ifa-dark-blue, #203248) !important;
background: #fff !important;
color: var(--ifa-dark-blue, #203248) !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li.et_pb_tab_active a {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a:hover,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tabs_controls li a:active {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
}
body #page-container .et_pb_module.vertical-tabs.vtabs-dark.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_all_tabs { background: transparent !important; }
.et_pb_module.vertical-tabs.vtabs-dark .et_pb_tab_content {
background: transparent !important;
border-left: 4px solid var(--ifa-dark-blue, #203248) !important;
padding-left: 20px !important;
}
}
/* ===========================
TOP TAB VARIANT: vtabs-top.vtabs-dark
Usage: Add both "vtabs-top" and "vtabs-dark" to module
=========================== */
.et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs {
display: block !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_all_tabs {
width: 100% !important;
display: block !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-top: 32px !important;
padding: 0 !important;
background: transparent !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_all_tabs::before,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_all_tabs::after,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab::before,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab::after,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content::before,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content::after {
content: none !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 15px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
background: transparent !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls::after {
border: 0 !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li {
float: none !important;
width: auto !important;
margin: 0 !important;
border: 0 !important;
height: auto !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li a {
display: block !important;
width: auto !important;
min-height: auto !important;
box-sizing: border-box !important;
border: 2px solid var(--ifa-dark-blue, #203248) !important;
border-radius: 12px !important;
padding: 15px 19px !important;
background: #fff !important;
color: var(--ifa-dark-blue, #203248) !important;
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
text-decoration: none !important;
transition: all 0.25s ease-in-out !important;
box-shadow: -2px 2px 4px rgba(0,0,0,.15), 2px 2px 4px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15) !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li.et_pb_tab_active a,
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active > a,
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_tabs_controls a[aria-selected="true"] {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
font-weight: 600 !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li a:hover,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li:hover a,
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li:hover a,
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_tabs_controls li a:hover {
background: var(--ifa-dark-blue, #203248) !important;
border-color: var(--ifa-dark-blue, #203248) !important;
color: #fff !important;
font-weight: 600 !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content {
border-left: 0 !important;
padding: 0 !important;
color: var(--ifa-dark-blue, #203248) !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content p,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content div,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content span,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tab_content li {
color: var(--ifa-dark-blue, #203248) !important;
}
@media (max-width: 980px) {
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls {
gap: 12px !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li {
flex: 1 1 100% !important;
}
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li a {
width: 100% !important;
padding: 16px 20px !important;
font-size: 18px !important;
}
body #page-container .et_pb_module.vtabs-top.vtabs-dark.et_pb_tabs .et_pb_all_tabs,
.et_pb_module.vtabs-top.vtabs-dark .et_pb_all_tabs {
margin-top: 20px !important;
}
}
@media (max-width: 480px) {
.et_pb_module.vtabs-top.vtabs-dark .et_pb_tabs_controls li a {
padding: 14px 16px !important;
font-size: 16px !important;
}
}
/* ---- css/divi-accordion.css ---- */
/* =============================================================
DIVI ACCORDION / TOGGLE — IFA STYLES
Applies to both standalone Divi Toggles and Accordion modules.
Extracted from style.css
============================================================= */
/* Base container */
body .et_pb_toggle,
body .et_pb_accordion .et_pb_toggle,
body #page-container .et_pb_toggle,
body #page-container .et_pb_accordion .et_pb_toggle {
border: 2px solid var(--ifa-green, #49B461) !important;
background: transparent !important;
border-radius: 8px !important;
margin-bottom: 16px !important;
overflow: hidden !important;
}
/* Title + content backgrounds */
body .et_pb_toggle_title,
body .et_pb_toggle_content,
body .et_pb_accordion .et_pb_toggle_title,
body .et_pb_accordion .et_pb_toggle_content,
body #page-container .et_pb_toggle_title,
body #page-container .et_pb_toggle_content,
body #page-container .et_pb_accordion .et_pb_toggle_title,
body #page-container .et_pb_accordion .et_pb_toggle_content {
background: transparent !important;
}
/* Title */
body .et_pb_toggle_title,
body .et_pb_accordion .et_pb_toggle_title,
body #page-container .et_pb_toggle_title,
body #page-container .et_pb_accordion .et_pb_toggle_title {
position: relative !important;
margin: 0 !important;
padding: 11px 46px 11px 20px !important;
border-bottom: none !important;
cursor: pointer !important;
font-weight: bold !important;
transition: none !important;
}
/* Content */
body .et_pb_toggle_content,
body .et_pb_accordion .et_pb_toggle_content,
body #page-container .et_pb_toggle_content,
body #page-container .et_pb_accordion .et_pb_toggle_content {
padding: 11px 20px !important;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
animation: none !important;
overflow: hidden !important;
}
/* Open state */
body .et_pb_toggle.et_pb_toggle_open,
body .et_pb_accordion .et_pb_toggle.et_pb_toggle_open,
body #page-container .et_pb_toggle.et_pb_toggle_open,
body #page-container .et_pb_accordion .et_pb_toggle.et_pb_toggle_open {
background: transparent !important;
border-color: var(--ifa-green, #49B461) !important;
transition: none !important;
}
/* +/- icon */
body .et_pb_toggle .et_pb_toggle_title:before,
body .et_pb_accordion .et_pb_toggle .et_pb_toggle_title:before,
body #page-container .et_pb_toggle .et_pb_toggle_title:before,
body #page-container .et_pb_accordion .et_pb_toggle .et_pb_toggle_title:before {
color: var(--ifa-dark-blue, #203248) !important;
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 18px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
body .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before,
body .et_pb_accordion .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before,
body #page-container .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before,
body #page-container .et_pb_accordion .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
color: var(--ifa-dark-blue, #203248) !important;
}
/* Kill Divi's animation on toggle and child elements */
body .et_pb_toggle,
body .et_pb_accordion .et_pb_toggle,
body #page-container .et_pb_toggle,
body #page-container .et_pb_accordion .et_pb_toggle {
transition: none !important;
}
body .et_pb_toggle_content *,
body .et_pb_accordion .et_pb_toggle_content *,
body #page-container .et_pb_toggle_content *,
body #page-container .et_pb_accordion .et_pb_toggle_content * {
animation: none !important;
transition: none !important;
}
body .et_pb_toggle_content p,
body .et_pb_toggle_content div,
body .et_pb_toggle_content ul,
body .et_pb_toggle_content ol,
body .et_pb_accordion .et_pb_toggle_content p,
body .et_pb_accordion .et_pb_toggle_content div,
body .et_pb_accordion .et_pb_toggle_content ul,
body .et_pb_accordion .et_pb_toggle_content ol,
body #page-container .et_pb_toggle_content p,
body #page-container .et_pb_toggle_content div,
body #page-container .et_pb_toggle_content ul,
body #page-container .et_pb_toggle_content ol,
body #page-container .et_pb_accordion .et_pb_toggle_content p,
body #page-container .et_pb_accordion .et_pb_toggle_content div,
body #page-container .et_pb_accordion .et_pb_toggle_content ul,
body #page-container .et_pb_accordion .et_pb_toggle_content ol {
animation: none !important;
transition: none !important;
}
/* Tables inside toggle content */
body .et_pb_toggle_content table,
body .et_pb_accordion .et_pb_toggle_content table,
body #page-container .et_pb_toggle_content table,
body #page-container .et_pb_accordion .et_pb_toggle_content table {
width: 100% !important;
border-collapse: collapse !important;
}
body .et_pb_toggle_content td,
body .et_pb_toggle_content th,
body .et_pb_accordion .et_pb_toggle_content td,
body .et_pb_accordion .et_pb_toggle_content th,
body #page-container .et_pb_toggle_content td,
body #page-container .et_pb_toggle_content th,
body #page-container .et_pb_accordion .et_pb_toggle_content td,
body #page-container .et_pb_accordion .et_pb_toggle_content th {
padding: 8px !important;
}
/* ---- css/footer.css ---- */
/* =============================================================
FOOTER — IFA STYLES
Footer icon row and column separator layout.
Extracted from style.css
============================================================= */
/* === FOOTER SOCIAL ICONS (class: ifa-footer-icons) === */
/* Size + baseline */
.ifa-footer-icons .ifa-footer-col .et_pb_icon .et-pb-icon,
.ifa-footer-icons .ifa-footer-col .et_pb_icon a .et-pb-icon {
font-size: 26px !important;
line-height: 1 !important;
display: inline-block;
}
/* Idle colour + transition */
.ifa-footer-icons .ifa-footer-col .et_pb_icon,
.ifa-footer-icons .ifa-footer-col .et_pb_icon a,
.ifa-footer-icons .ifa-footer-col .et_pb_icon .et-pb-icon {
color: #ffffff;
transition: color 0.25s ease;
text-decoration: none;
}
/* Hover */
.ifa-footer-icons .ifa-footer-col .et_pb_icon:hover,
.ifa-footer-icons .ifa-footer-col .et_pb_icon:hover .et-pb-icon,
.ifa-footer-icons .ifa-footer-col .et_pb_icon:hover a {
color: var(--ifa-green, #49B461);
}
/* Inline layout */
.ifa-footer-icons .ifa-footer-col .et_pb_icon {
display: inline-block;
vertical-align: middle;
margin: 8px 12px 0 0;
cursor: pointer;
}
/* Tidy up */
.ifa-footer-icons .ifa-footer-col .et_pb_module { margin-bottom: 0; }
.ifa-footer-icons .et_pb_social_media_follow { display: none; }
/* === FOOTER QUICKLINKS MENU (class: quicklinks-menu) === */
.quicklinks-menu .et-menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.quicklinks-menu .et-menu > li {
margin: 0 !important;
}
.quicklinks-menu .et-menu > li > a {
display: block;
width: 100%;
}
@media (max-width: 980px) {
.quicklinks-menu .et_pb_menu__wrap,
.quicklinks-menu .et_pb_menu__menu,
.quicklinks-menu .et-menu-nav {
display: block !important;
width: 100%;
}
.quicklinks-menu .et_mobile_nav_menu {
display: none !important;
}
.quicklinks-menu .et-menu {
display: flex !important;
}
}
/* === FOOTER COLUMN SEPARATORS (class: ifa-footer-seps) === */
/* Equal-height columns */
.ifa-footer-seps .et_pb_row {
display: flex;
align-items: stretch;
}
/* Space for separator line */
.ifa-footer-seps .et_pb_column {
position: relative;
padding-right: 28px;
margin-right: 28px;
}
/* Vertical rule between columns */
.ifa-footer-seps .et_pb_column:not(:last-child)::after {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
right: 0;
width: 1px;
background: #fff;
}
/* Remove separators on small screens */
@media (max-width: 980px) {
.ifa-footer-seps .et_pb_row { display: block; }
.ifa-footer-seps .et_pb_column {
padding-right: 0;
margin-right: 0;
}
.ifa-footer-seps .et_pb_column::after { display: none; }
}
/* ============================================================
Footer curve — background-agnostic
============================================================
Divi builds this curve by painting a solid WHITE svg over the top 60px of
the navy footer (.et_pb_top_inside_divider, top_divider_color #FFFFFF in
the footer Theme Builder layout). The illusion is "the white section above
flows into the footer" — which works only when the section above really is
white. Over the mint band that ends a Global Café, or any Members Area
page, the white curve paints straight over the mint.
It cannot be configured out: the divider colour is a single fixed value
and the sections above it are not a single fixed colour.
So invert it. Instead of painting the PAGE's colour down over the footer,
mask the FOOTER so its own navy carries the shape and whatever sits behind
shows through — white, mint, navy, an image, anything. The curve is now a
property of the footer rather than a claim about the page above it.
The mask reuses Divi's own path so the shape is identical, wrapped in a
full-box rect with fill-rule="evenodd" to take its complement: opaque
where the navy should paint, transparent through the arch. Two mask
layers — the curve across the top 60px, a solid fill for everything below.
============================================================ */
.et_pb_section.footer_nav {
--ifa-footer-curve: 60px;
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0h1280v140H0z M640 140C286.54 140 0 0 0 0h1280S993.46 140 640 140z'/%3E%3C/svg%3E"),
linear-gradient(#000, #000);
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0h1280v140H0z M640 140C286.54 140 0 0 0 0h1280S993.46 140 640 140z'/%3E%3C/svg%3E"),
linear-gradient(#000, #000);
/* The 1px overlap stops a hairline of background showing through the
seam between the two layers on fractional device pixel ratios. */
-webkit-mask-size: 100% var(--ifa-footer-curve), 100% calc(100% - var(--ifa-footer-curve) + 1px);
mask-size: 100% var(--ifa-footer-curve), 100% calc(100% - var(--ifa-footer-curve) + 1px);
-webkit-mask-position: top center, bottom center;
mask-position: top center, bottom center;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
}
/* The mask carves the arch out of the footer, which means whatever sits
BEHIND the footer shows through it — so the footer has to overlap the
section above by the full height of the arch.
Divi's own top margin is -40px. That was correct while the curve was
painted inside the footer's own box and covered nothing but itself.
Against a 60px mask it leaves the bottom 20px of the arch hanging past
the section above, and what shows through there is #page-container:
a straight-edged 20px white band under the curve, on every page.
So the overlap is derived from the curve rather than set beside it. They
are the same measurement, and two copies of one measurement drift.
!important, reluctantly, because Divi does not emit one selector for this
— it emits two, and which one you get depends on the page:
.et_pb_section_0_tb_footer.et_pb_section (0,2,0)
.et-db #et-boc .et-l .et_pb_section_0_tb_footer.et_pb_section (1,4,0)
Both were observed live on this site: the first on a café single, the
second on the café archive. An earlier version of this rule used a `body`
prefix to win on specificity at (0,2,1); it beat the first selector and
lost silently to the second, which is the worst of both — fixed on the
pages you happen to check, broken on the ones you don't. Nothing short of
!important beats (1,4,0) without hard-coding Divi's builder prefix, and
that prefix is Divi's to change.
Consequence worth knowing: the footer section's top margin in the Theme
Builder no longer has any effect. That is deliberate — the overlap is
load-bearing for the curve now, not a spacing preference. */
.et_pb_section.footer_nav {
margin-top: calc(-1 * var(--ifa-footer-curve)) !important;
}
/* Divi's painted white curve is now redundant, and would sit on top of the
masked edge. Hidden rather than removed from the layout so the Theme
Builder setting can stay as it is — nothing in the admin needs changing,
and reverting this file restores the old behaviour exactly. */
.et_pb_section.footer_nav > .et_pb_top_inside_divider {
display: none;
}
/* Feature query rather than a blanket rule: a browser without mask support
keeps Divi's original white curve, which is the current behaviour rather
than a broken one. */
@supports not ((-webkit-mask-image: url("#x")) or (mask-image: url("#x"))) {
.et_pb_section.footer_nav > .et_pb_top_inside_divider {
display: block;
}
}
/* ---- css/ifa-topic-blog.css ---- */
/* IFA related posts grid — semantic classes (no Divi blog module markup) */
:root {
--ifa-related-navy: #203248;
}
/* --- Section spacing (shortcode output) --- */
.ifa-related {
display: flow-root;
margin-top: clamp(1.75rem, 4vw, 3rem);
margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
/* --- Grid --- */
.ifa-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: stretch;
}
@media (max-width: 980px) {
.ifa-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.ifa-related__grid {
grid-template-columns: 1fr;
gap: 22px;
}
}
/* --- Card --- */
.ifa-related__card {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
overflow: hidden;
padding: 18px !important;
background: #fff;
box-shadow: 3px 4px 14px rgba(0, 0, 0, 0.06);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s ease;
}
/* Bottom-fill hover layer */
.ifa-related__card::before {
content: "";
position: absolute;
inset: 0;
background: var(--ifa-related-navy);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
pointer-events: none;
}
.ifa-related__card > * {
position: relative;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.ifa-related__card:hover {
transform: translateY(-6px);
box-shadow: 10px 12px 26px rgba(0, 0, 0, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
.ifa-related__card:hover::before {
transform: scaleY(1);
}
}
@media (prefers-reduced-motion: reduce) {
.ifa-related__card,
.ifa-related__card::before,
.ifa-related__card .ifa-related__title,
.ifa-related__card .ifa-related__title a,
.ifa-related__card .ifa-related__body,
.ifa-related__card .ifa-related__excerpt,
.ifa-related__card .ifa-related__excerpt p,
.ifa-related__card .ifa-related__excerpt-copy p,
.ifa-related__card .ifa-related__more {
transition: none !important;
}
.ifa-related__card:hover {
transform: none;
}
.ifa-related__card:hover::before {
transform: scaleY(0);
}
}
/* --- Media (1:1) --- */
.ifa-related__media {
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
margin: 0 0 14px 0 !important;
border-radius: 12px;
position: relative !important;
flex-shrink: 0;
background: #f5f5f5;
}
/* Featured / in-content thumbnails — fill tile */
.ifa-related__media img:not(.ifa-related__thumb--fallback) {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: transparent !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* IFA logo fallback only — smaller centred mark inside grey tile */
.ifa-related__media img.ifa-related__thumb--fallback {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 60% !important;
height: 60% !important;
max-width: 60% !important;
max-height: 60% !important;
transform: translate(-50%, -50%) !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.ifa-related__media:focus-visible {
outline: 3px solid var(--ifa-related-navy);
outline-offset: 3px;
}
/* --- Title --- */
.ifa-related__title {
margin: 0 0 10px 0;
line-height: 1.25;
font-size: 22px;
font-weight: 700;
}
.ifa-related__title a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease, opacity 0.4s ease;
}
.ifa-related__title a:focus-visible {
outline: 3px solid var(--ifa-related-navy);
outline-offset: 2px;
}
/* --- Body / excerpt / CTA --- */
.ifa-related__body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.ifa-related__excerpt {
flex: 1;
margin-bottom: 10px;
transition: color 0.4s ease, opacity 0.4s ease;
}
.ifa-related__card .ifa-related__excerpt:not(.ifa-related__excerpt-copy) p {
margin: 0 0 0.5em;
font-size: 1rem;
line-height: 1.5;
transition: color 0.4s ease, opacity 0.4s ease;
}
.ifa-related__excerpt p:last-child {
margin-bottom: 0;
}
/* Shortcode card copy — specificity beats parent templates (e.g. .priority-area-template p @ 22px) */
.ifa-related__card .ifa-related__excerpt.ifa-related__excerpt-copy {
font-size: 16px;
line-height: 1.45;
}
.ifa-related__card .ifa-related__excerpt.ifa-related__excerpt-copy p {
margin: 0 0 0.5em;
font-size: 16px;
line-height: 1.45;
transition: color 0.4s ease, opacity 0.4s ease;
}
/* Divi buttons changes to inherit 1px border so we dont w */
/* We need to reset this to a white border so the blue doesn't bleed into the card */
.ifa-related__more.et_pb_button {
margin-top: auto;
align-self: flex-start;
min-height: 44px;
box-sizing: border-box;
border: 1px solid #fff;
}
.ifa-related__more.et_pb_button:focus-visible {
outline: 3px solid var(--ifa-related-navy);
outline-offset: 3px;
}
/* Card hover: ghost style on navy (beat global teal while over filled card) */
@media (hover: hover) and (pointer: fine) {
.ifa-related__card:hover .ifa-related__title,
.ifa-related__card:hover .ifa-related__title a,
.ifa-related__card:hover .ifa-related__body,
.ifa-related__card:hover .ifa-related__excerpt,
.ifa-related__card:hover .ifa-related__excerpt p,
.ifa-related__card:hover .ifa-related__excerpt-copy p {
color: #fff !important;
}
.ifa-related__card:hover .ifa-related__more.et_pb_button {
background: transparent !important;
border-color: #fff !important;
color: #fff !important;
box-shadow: 0 0 0 1px #fff;
}
.ifa-related__card:hover .ifa-related__more.et_pb_button:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: #fff !important;
color: #fff !important;
}
}
/* Optional section heading */
.ifa-related__heading {
margin: 0 0 1rem;
line-height: 1.2;
}
/* Visually hidden text (e.g. “Read more” context for SR) */
.ifa-related .screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/* ---- css/3col-resources.css ---- */
/* =========================================================
Homepage News Cards (single Divi Blog module)
Row class: articleRow1
========================================================= */
/* --- Layout: force 3-up grid --- */
.articleRow1 .et_pb_ajax_pagination_container{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: stretch;
}
/* Undo Divi float/clear layout so grid actually works */
.articleRow1 .et_pb_ajax_pagination_container > article.et_pb_post{
float: none !important;
clear: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important; /* Grid gap handles spacing */
}
/* Responsive */
@media (max-width: 980px){
.articleRow1 .et_pb_ajax_pagination_container{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px){
.articleRow1 .et_pb_ajax_pagination_container{
grid-template-columns: 1fr;
}
}
/* --- Card structure: equal heights + pinned button --- */
.articleRow1 article.et_pb_post{
display: flex;
flex-direction: column;
height: 100%;
}
/* Card feel */
.articleRow1 article.et_pb_post{
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
overflow: hidden; /* keeps corners clean */
padding: 10px !important;
background: #fff;
}
/* Force padding override for all card instances */
.articleRow1 .et_pb_ajax_pagination_container article.et_pb_post,
.articleRow1 article.et_pb_post.et_pb_blog_item_0_0,
.articleRow1 article.et_pb_post.et_pb_blog_item_0_1,
.articleRow1 article.et_pb_post.et_pb_blog_item_0_2{
padding: 10px !important;
}
/* --- Featured image: perfect 1:1 square --- */
.articleRow1 .et_pb_post .entry-featured-image-url{
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
margin: 0 0 14px 0 !important;
border-radius: 12px;
position: relative !important;
}
/* Image fills square and centers when cropped */
.articleRow1 .et_pb_post .entry-featured-image-url img{
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* --- Title spacing consistency --- */
.articleRow1 .et_pb_post .entry-title{
margin: 0 0 10px 0;
line-height: 1.2;
}
/* --- Content symmetry + button baseline --- */
.articleRow1 .et_pb_post .post-content{
flex: 1; /* fills remaining card height */
display: flex;
flex-direction: column;
}
.articleRow1 .et_pb_post .post-content-inner{
flex: 1; /* excerpt area grows evenly */
margin-bottom: 10px; /* spacing between excerpt and button */
}
/* Pin the button to bottom so all align */
.articleRow1 .et_pb_post a.more-link{
margin-top: auto; /* KEY: pushes it to bottom */
align-self: flex-start;
display: inline-block;
padding: 10px 16px;
border: 2px solid currentColor;
text-decoration: none;
transition: color .4s ease, border-color .4s ease, background .4s ease;
}
/* =========================================================
Card hover: bottom-fill + lift + invert + subtle shadow
========================================================= */
/* tweakable brand color */
:root{
--ifa-navy: #203248; /* change if you have the exact IFA navy */
}
/* make sure card can host the fill layer */
.articleRow1 article.et_pb_post{
position: relative;
transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1),
border-color .4s ease;
}
/* the “fill from bottom” layer */
.articleRow1 article.et_pb_post::before{
content: "";
position: absolute;
inset: 0;
background: var(--ifa-navy);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
pointer-events: none;
}
/* keep all card content above the fill */
.articleRow1 article.et_pb_post > *{
position: relative;
z-index: 1;
}
/* hover motion + subtle bottom/right shadow */
.articleRow1 article.et_pb_post:hover{
transform: translateY(-6px);
box-shadow: 10px 12px 26px rgba(0,0,0,.12);
border-color: rgba(255,255,255,.25);
}
/* animate the fill in */
.articleRow1 article.et_pb_post:hover::before{
transform: scaleY(1);
}
/* invert typography + links */
.articleRow1 article.et_pb_post,
.articleRow1 article.et_pb_post .entry-title,
.articleRow1 article.et_pb_post .entry-title a,
.articleRow1 article.et_pb_post .post-content,
.articleRow1 article.et_pb_post .post-content-inner,
.articleRow1 article.et_pb_post .post-content-inner p,
.articleRow1 article.et_pb_post .post-content-inner a{
transition: color .4s ease, opacity .4s ease;
}
.articleRow1 article.et_pb_post:hover .entry-title,
.articleRow1 article.et_pb_post:hover .entry-title a,
.articleRow1 article.et_pb_post:hover .post-content,
.articleRow1 article.et_pb_post:hover .post-content-inner,
.articleRow1 article.et_pb_post:hover .post-content-inner p,
.articleRow1 article.et_pb_post:hover .post-content-inner a{
color: #fff !important;
}
/* button invert to match */
.articleRow1 article.et_pb_post:hover a.more-link{
color: #fff !important;
border-color: #fff !important;
background: transparent;
}
/* optional: button gets a slight “pop” on hover */
.articleRow1 article.et_pb_post:hover a.more-link:hover{
background: rgba(255,255,255,.12);
}
/* ---- css/ifa-cards.css ---- */
/**
* Content card — the knowledge hub's result card.
*
* Lifted out of css/ifa-search.css, the same way css/ifa-badges.css was, so
* that [ifa_latest_posts] renders the hub's own card rather than a second
* look-alike.
*
* Link hovers are --ifa-dark-teal (#255F71, ~7:1 on white). They were
* --ifa-teal (#29A5A1), which is 3.0:1 and fails AA for these titles: 19px at
* weight 600 is not "large text", which needs 700 from 18.66px. The underline
* stays so the hover never relies on colour alone.
*
* Enqueued site-wide because the shortcode can sit on any page, and the
* enqueue has to happen before wp_head -- earlier than a shortcode knows it
* is rendering. The narrow-screen padding override stays in ifa-search.css,
* which loads after this file and so still wins on the search page.
*/
.ifa-search-card {
background: #fff;
border: 1px solid #e8e8e8;
border-left: 3px solid var(--ifa-teal);
border-radius: 10px;
padding: 24px;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ifa-search-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
border-left-color: var(--ifa-green);
}
/* Badge wrapper */
.ifa-search-card > .ifa-search-card__badge {
align-self: flex-start;
margin-bottom: 16px;
}
.ifa-search-card__title {
font-size: 19px;
font-weight: 600;
line-height: 1.35;
margin: 0 0 10px;
color: var(--ifa-dark-blue);
}
.ifa-search-card__title a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.ifa-search-card__title a:hover {
color: var(--ifa-dark-teal) !important;
text-decoration: underline !important;
}
.ifa-search-card__excerpt {
font-size: 14px;
line-height: 1.55;
color: #555;
margin: 0 0 12px;
flex: 1;
}
.ifa-search-card__meta {
font-size: 13px;
color: #555;
margin-bottom: 14px;
}
.ifa-search-card__footer {
margin-top: auto;
text-align: right;
}
/* Read More link */
.ifa-search-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--ifa-dark-blue);
text-decoration: none;
transition: color 0.2s ease, gap 0.2s ease;
}
.ifa-search-card__link:hover {
color: var(--ifa-dark-teal) !important;
text-decoration: underline !important;
gap: 10px;
}
/* ---- css/ifa-latest.css ---- */
/**
* [ifa_latest_posts] — an intro column beside the newest posts, one row.
*
* The cards are the knowledge hub's own (css/ifa-cards.css); only the layout
* around them lives here. The row never stacks: below 768px it scrolls
* sideways instead, with the next card peeking in so it reads as scrollable.
*/
.ifa-latest {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
gap: 28px;
align-items: stretch;
}
.ifa-latest__intro {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Divi pads every heading and paragraph; the gap above does the spacing. */
.ifa-latest__eyebrow,
.ifa-latest__title,
.ifa-latest__text {
margin: 0;
padding: 0;
}
.ifa-latest__eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ifa-dark-teal);
}
.ifa-latest__title {
font-size: 31px;
line-height: 1.2;
color: var(--ifa-dark-blue);
}
/* Grows so the button sits on the cards' bottom edge when the intro is the
shorter side of the row. */
.ifa-latest__text {
flex-grow: 1;
font-size: 15px;
line-height: 1.6;
color: var(--ifa-dark-blue);
}
.ifa-latest__button {
align-self: flex-start;
}
/* Divi gives content lists bullets and an indent at higher specificity. */
.ifa-latest ul.ifa-latest__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 28px;
}
.ifa-latest__item {
display: flex;
min-width: 0;
padding: 0;
}
.ifa-latest__card-title {
flex-grow: 1;
padding: 0;
}
/* Four lines at most, so one long headline cannot set the height of the
whole row. The full title is still the link text, so nothing is lost to a
screen reader. */
.ifa-latest__card-title a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.ifa-latest__card .ifa-search-card__meta {
margin-bottom: 0;
}
@media (max-width: 980px) {
.ifa-latest {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.ifa-latest ul.ifa-latest__list {
grid-auto-columns: 80%;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Room for the card's hover lift, which the scroller would clip. */
padding: 4px 0 12px !important;
}
.ifa-latest__item {
scroll-snap-align: start;
}
}