/* 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; } } /* ---- style.css ---- */ /* Theme Name: Divi Child Theme Version: 1.1 Description: A child theme to house custom coding which modifies the Divi parent theme by Elegant Themes. Includes default line numbers where the code was taken from in the parent theme. Author: WowDigital.com Template: Divi */ /* * The three Bootstrap 4 reboot rules the site came to depend on. * Bootstrap was loaded site-wide for years and has been removed; with it * disabled on the live pages, these were the only differences found: * - hr margins: Network Partners separates ~100 entries with
    , and * loses ~1,700px of spacing without them. * - bare     anchors: without this they pick up the link colour, so * the A–Z headings there turn teal (#29A5A1), which fails contrast. * - form controls inheriting line-height: nav search and the library * filters are sized around it. */ hr { margin-top: 1rem; margin-bottom: 1rem; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } button, input, select, textarea { line-height: inherit; } :root { --ifa-green: #49B461; --ifa-dark-blue: #203248; --ifa-light-mint: #EDF7F4; --ifa-dark-teal: #255F71; --ifa-teal: #29A5A1; --ifa-purple: #A05793; } /* body .gform_wrapper form .gform_body .gform_fields .gfield select, body .gform_wrapper form .gform_body .gform_fields .gfield textarea, body .gform_wrapper form .gform_body .gform_fields .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { border: 2px solid var(--ifa-dark-blue) !important; }*/ /* coloured boxes layout code */ .row-1-style * { color: #fff !important; } .row-1-style .grid figure img { opacity: 1; height:180px; } .row-1-style .grid figure figcaption { padding: 10px; text-align: right; bottom: 0; height: auto; top: auto; z-index: 999 } .row-1-style figure { /* transition: all .3s ease-in-out 0;*/ margin-bottom: 0!important; transition: all 0.3s ease, padding 0s linear; } .row-1-style .grid .overlay { background: rgba(0,174,112,1); position: absolute; height: 100%; top: 0; width: 100%; z-index: 0; /* transition: all 0.3s ease-in-out 0;*/ -webkit-transition: all 0.3s ease-in-out 0; transition: all 0.3s ease, padding 0s linear; } .row-1-style .grid figure:hover .overlay { background: rgba(0,174,112,0.75) } /* ***** custom box colours ***** */ .row-1-style .grid .overlay.one { background: rgba(0,174,112,1)!important } .row-1-style .grid figure:hover .overlay.one { background: rgba(0,174,112,0.75)!important } .row-1-style .grid .overlay.two { background: rgba(31,50,72,1)!important } .row-1-style .grid figure:hover .overlay.two { background: rgba(31,50,72,0.75)!important } .row-1-style .grid .overlay.three { background: rgba(37,94,112,1)!important } .row-1-style .grid figure:hover .overlay.three { background: rgba(37,94,112,0.75)!important } .row-1-style .grid .overlay.four { background: rgba(40,165,161,1)!important } .row-1-style .grid figure:hover .overlay.four { background: rgba(40,165,161,0.75)!important } .row-1-style .grid .overlay.five { background: rgba(159,87,146,1)!important } .row-1-style .grid figure:hover .overlay.five { background: rgba(159,87,146,0.75)!important } .row-1-style .grid, .row-2-style .grid, .row-3-style .grid { padding: 0 } .row-1-style, .row-2-style, .row-3-style { padding: 0 0 40px!important } /*hover box css*/ .grid { position: relative; margin: 0 auto; padding: 1em 0 4em; max-width: 1000px; list-style: none; text-align: center } /* Common style */ .grid figure { position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 100%; max-width: 100%; max-height: 360px; width: 99%; background: #000000; text-align: center; cursor: pointer } .grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: .8; width: 100% } .grid figure figcaption { padding: 2em; color: #fff; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0 } .grid figure h2 { word-spacing: .1em; font-weight: 500; font-size: 1.3em; text-transform:uppercase; } .grid figure .smtext { font-size: 0.85em; text-transform:uppercase; line-height:1.1em; font-weight: 500; } .grid figure h2, .grid figure p { margin: 0 } .grid figure p { letter-spacing: 1px; font-size: 68.5% } /***** MEDIA QUERIES ******/ @media screen and (max-width: 50em) { .grid figure { display: inline-block; float: none; margin: 10px auto; width: 100% } .grid figure img { min-height: 100% } } .membership-renewal{ overflow: hidden; } .membership-renewal .second-line-space{ margin-bottom: 50px; } .membership-renewal .contact-top-space{ margin-top: 30px; } /* Keynote-style text box (accent only) */ .ifa-keynote-box { padding: 20px 25px; background-color: #ffffff; position: relative; } .ifa-keynote-box::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; background-color: var(--ifa-green, #49B461); border-radius: 2px; } .ifa-keynote-box p:first-child { font-weight: 600; color: #203248; margin-bottom: 5px; } .ifa-keynote-box p { margin: 0; color: #6a6a6a; font-size: 15px; line-height: 1.5; } /* ========================================================= HERO SECTION TITLE OVERLAP LAYOUT Module classes: g-hero-section (section), g-overlap-title (text module) ========================================================= */ .g-hero-section { position: relative !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; max-height: 50vh !important; } .g-hero-section .et_pb_section_inner { display: flex !important; flex-direction: column !important; flex: 1; justify-content: flex-end !important; } .g-hero-section > .et_pb_row { margin-top: auto !important; margin-bottom: 0 !important; overflow: visible !important; flex-shrink: 0 !important; width: 100% !important; position: relative; } .g-hero-section .et_pb_section_inner > .et_pb_row { margin-top: auto !important; margin-bottom: 0 !important; overflow: visible !important; flex-shrink: 0 !important; width: 100% !important; } .g-hero-section .et_pb_column { overflow: visible !important; position: relative; } .et_pb_text.g-overlap-title { width: fit-content !important; max-width: 100%; display: inline-flex !important; background: #fff; padding: 24px 32px; margin: 0 !important; transform: translateY(50%); position: relative; z-index: 10; } .g-overlap-title .et_pb_text_inner, .g-overlap-title h1, .g-overlap-title p { margin: 0 !important; padding: 0 !important; } /* Main nav dropdowns above hero/slider and first-section content */ #main-header { z-index: 99999 !important; } /* ========================================================= DIVI TEXT MODULE — Global typography defaults ========================================================= */ .et_pb_text_inner a { color: var(--ifa-teal); text-decoration: underline; font-weight: bold; } .et_pb_text_inner a:hover { text-decoration: none; font-weight: bold; } /* ---- css/header.css ---- */ /* ============================================================= HEADER — IFA STYLES Header row alignment and mobile logo layout. ============================================================= */ .ifa-header-row { display: flex; align-items: center; } .ifa-header-row .et_pb_column:nth-child(2), .ifa-header-row .et_pb_column:nth-child(3) { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 767px) { .ifa-header-row .et_pb_column:nth-child(2), .ifa-header-row .et_pb_column:nth-child(3) { display: none !important; } .ifa-header-row { display: block !important; } .ifa-header-row .et_pb_column:first-child { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px !important; float: none !important; text-align: center !important; } .ifa-header-row .et_pb_column:first-child .et_pb_image, .ifa-header-row .et_pb_column:first-child .et_pb_image_wrap { display: block !important; width: 100% !important; margin: 0 !important; text-align: center !important; } .ifa-header-row .et_pb_column:first-child img { display: block !important; margin: 0 auto !important; width: 100% !important; max-width: 320px !important; height: auto !important; } } /* ============================================================= DIVI IMAGES — reserve space before a lazy image loads (CLS) ------------------------------------------------------------- Nothing to do with the header. It is here only because this file is enqueued on every page; it can move to a stylesheet of its own once that has an enqueue line. An with width/height attributes gets two things from them: an aspect-ratio, and a presentational width. Before it loads an image has no natural width, so that attribute width is the only thing giving it a box. Divi discards it at 980px and below: every Image module gets a generated @media (max-width: 980px) { .et_pb_image_N .et_pb_image_wrap img { width: auto } } and blurb icons get `.et_pb_main_blurb_image img[src*=".svg"] { width: auto }` at every width. With width:auto and nothing loaded yet, Chrome lays the image out at 0x0, so each lazy image pushes everything below it down as it arrives. Above 980px Divi emits no width for Image modules, which is why desktop never shifted. `revert-layer` rolls width back past those author rules to the attribute width, which is what desktop already uses. Divi's global `img { max-width: 100%; height: auto }` still caps it at the column and derives the height from the aspect-ratio. Once loaded, that matches width:auto whenever the natural width is either at least the column width or equal to the attribute. The `sizes` values WordPress and Divi write guarantee one or the other (WordPress: min(100vw, attribute width); Divi: a breakpoint at or above the viewport), and without srcset the natural width is the file's, which is what WordPress writes as the width attribute. An image with no width attribute has nothing to revert to and behaves exactly as before. The one exception is a module with a fixed Divi Height: its width then follows the attribute rather than the ratio (one post when this was written: 3px wider, 599 to 602, at a 768px viewport). Scoped to page and Theme Builder body content. The TB footer logo is left out on purpose: it pairs Divi's width:auto with max-height:100px so that it shrinks by height, and a fixed attribute width would stretch it instead. The header logo is an SVG that loads eagerly, and has its own rules above. Image-module SVGs keep Divi's width:auto, because their attribute sizes are often nominal (3000x3000 on a 150px icon) and reverting could enlarge one. Blurb SVGs are reverted because every SVG blurb on the site, seven when this was written, sets an icon width, which Divi puts on .et_pb_main_blurb_image; the attribute width is only ever clamped down to that. A new SVG blurb with no icon width would render its icon at column width, so give it one. Left- and right-positioned blurbs are excluded because Divi sizes their icons with `width: inherit`, which this would override. ============================================================= */ @media (max-width: 980px) { .et-l--post .et_pb_image .et_pb_image_wrap img:not([src*=".svg"]), .et-l--body .et_pb_image .et_pb_image_wrap img:not([src*=".svg"]) { width: revert-layer; } } .et-l--post .et_pb_blurb:not([class*="_position_left"]):not([class*="_position_right"]) .et_pb_main_blurb_image img[src*=".svg"], .et-l--body .et_pb_blurb:not([class*="_position_left"]):not([class*="_position_right"]) .et_pb_main_blurb_image img[src*=".svg"] { width: revert-layer; } /* ============================================================= ABOVE-THE-FOLD PLACEHOLDERS FOR DIVI'S DEFERRED CSS (CLS) ------------------------------------------------------------- Divi's Critical CSS setting (Theme Options > Performance) is on. On some pages, the homepage included, it treats none of the Theme Builder header's module styles and none of the first section's as critical. They all go into the *-deferred-*.min.css file, which loads as , so the first paint lays the page out without them. When the file lands, the header shrinks (homepage, desktop: 406px to 262px) and all the content below moves up. PageSpeed reported that as CLS 0.26 on `.et_builder_inner_content`. The rules below copy only the layout-affecting declarations of those deferred rules. Each selector has exactly the specificity of Divi's own rule, and this file loads before the deferred one, so Divi's rule wins wherever both set a property. These rules only fill the gap until the deferred file arrives. The homepage rules are scoped with :where() for the same reason: it adds no specificity. They go stale if the header or the homepage's first section is edited in the builder. A value Divi still sets is overridden as soon as the deferred file loads, so a stale copy means a small shift again, not a wrong layout. A declaration Divi no longer sets would persist, so remove a line here when its builder setting is removed. Turning Critical CSS off should make this block unnecessary; confirm on staging before deleting it. ============================================================= */ .et_pb_section_0_tb_header.et_pb_section, .et_pb_section_1_tb_header.et_pb_section { padding-top: 0; padding-bottom: 0; } .et_pb_row_1_tb_header.et_pb_row { padding-top: 15px !important; padding-bottom: 15px !important; } .et_pb_image_0_tb_header { width: 40%; text-align: left; margin-left: 0; } .et_pb_image_0_tb_header .et_pb_image_wrap { display: block; } .et_pb_menu_0_tb_header.et_pb_menu ul li a { font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif; font-size: 20px; } @media only screen and (max-width: 980px) { .et_pb_image_0_tb_header .et_pb_image_wrap img { width: auto; } .et_pb_code_0_tb_header { display: none !important; } } /* Divi's JS, not its CSS, adds `et_pb_row_1-2_1-4_1-4` to the header row, and only that class turns on the wrapping and the 50% quarter columns at tablet width. Until it runs, the logo column is a quarter of the row, so the logo renders at a third of its final size (80px instead of 241px wide at 768px) and the header grows 100px when the script adds the class. This gives the same result without waiting for it. Below 768px the mobile rules at the top of this file stack the row as a block instead. */ @media only screen and (min-width: 768px) and (max-width: 980px) { .ifa-header-row { flex-wrap: wrap; } .ifa-header-row.et_pb_gutters1 > .et_pb_column.et_pb_column_1_4 { width: 50%; margin-right: 0; } } /* Homepage (page 36975): the hero slider's section and row. */ :where(.page-id-36975) .et_pb_section_0.et_pb_section { padding: 0 100px; margin-left: 0; margin-right: 0; } :where(.page-id-36975) .et_pb_row_0.et_pb_row { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================= SMART SLIDER FULL-WIDTH WRAPPER — final width before JS (CLS) ------------------------------------------------------------- Smart Slider's CSS gives `width: 100vw` until its script measures and sets an inline width. With a classic (non-overlay) scrollbar, 100vw is wider than by the scrollbar's width. A slider whose height follows its content, as the homepage hero's does at tablet widths, then wraps its text differently before and after the script: 610px tall before and 640px after at 1024px, and everything below it jumps 30px. A container on lets the wrapper use 100cqw, which is 's own width: what the script sets anyway. The script's inline width still wins once it runs. Until then the slider stays invisible (opacity 0, translated off-screen), as before; that is Smart Slider's own CSS, and a transform moves nothing else. `container-type: inline-size` adds inline-size and style containment only; it creates no containing block for fixed elements. It applies only on pages that have a slider. `body` is in the second selector for specificity only: smartslider.min.css loads after this file, so a bare `ss3-force-full-width` would lose to its 100vw. ============================================================= */ body:has(ss3-force-full-width) { container-type: inline-size; } body ss3-force-full-width { width: 100cqw; } /* Smart Slider heading layers set to a real heading tag (the homepage hero headline is an

    , so the page has one) pick up Divi's h1-h6 padding-bottom of 10px, which a
    layer never had. The slider's own font class sets everything else, so only the padding needs cancelling to keep the layer exactly as designed. */ .n2-ss-item-content.n2-ss-text:is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; } /* ---- css/ifa-nav.css ---- */ /* ============================================================ IFA Nav Styles Global navigation overrides and components. Uses CSS custom properties from style.css :root. ============================================================ */ /* ---------- Nav search widget ---------- */ /* ---------- Divi header menu ---------- */ /* Lift the whole Theme Builder header into its own stacking context above the page body. By default header.et-l--header is position:static/z:auto, so its inner content (.et_builder_inner_content) only reaches root-level z-index:2 — which the search page's hero content (z:2) and search form (z:10) sit on top of, causing the hero

    to bleed over open dropdowns. The dropdown's own z-index:9999 is meaningless because it's trapped inside that z:2 box. Giving the header a high z-index here lets its submenus paint above all page content. */ #page-container header.et-l--header { position: relative; z-index: 100; } #page-container .nav-menu-ifa .et-menu > li > a { color: #fff !important; font-weight: 400 !important; opacity: 1 !important; } #page-container .nav-menu-ifa .et-menu > li > a:hover, #page-container .nav-menu-ifa .et-menu > li.menu-item-has-children:hover > a { background: #fff !important; color: var(--ifa-dark-blue, #203248) !important; border-radius: 8px !important; opacity: 1 !important; } #page-container .nav-menu-ifa .et-menu > li > a:hover::after, #page-container .nav-menu-ifa .et-menu > li.menu-item-has-children:hover > a::after { color: var(--ifa-dark-blue, #203248) !important; } /* Keyboard focus has to repeat the :hover treatment, because the two are styled in different places and only one of them was finished. The Theme Builder's own CSS (module 36975, not in this repo) already sets .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a:focus { background: var(--ifa-white) !important } but never touches `color`. The white-on-navy rule at the top of this file then still applies, so a focused top-level item was white text on a white pill — readable by nobody, and the state you land in the moment you Tab into the menu. et-show-dropdown is Divi's own open-dropdown class. It is included so the parent keeps the white pill while focus is down inside its submenu, which is what hovering already does. */ #page-container .nav-menu-ifa .et-menu > li > a:focus, #page-container .nav-menu-ifa .et-menu > li.menu-item-has-children > a:focus, #page-container .nav-menu-ifa .et-menu > li.et-show-dropdown > a { background: #fff !important; color: var(--ifa-dark-blue, #203248) !important; -webkit-text-fill-color: var(--ifa-dark-blue, #203248); border-radius: 8px !important; opacity: 1 !important; } #page-container .nav-menu-ifa .et-menu > li > a:focus::after, #page-container .nav-menu-ifa .et-menu > li.menu-item-has-children > a:focus::after, #page-container .nav-menu-ifa .et-menu > li.et-show-dropdown > a::after { color: var(--ifa-dark-blue, #203248) !important; } #page-container .nav-menu-ifa .et-menu > li.current-menu-item > a, #page-container .nav-menu-ifa .et-menu > li.current_page_item > a, #page-container .nav-menu-ifa .et-menu > li.current-menu-parent > a, #page-container .nav-menu-ifa .et-menu > li.current-menu-ancestor > a { background: #fff !important; color: var(--ifa-dark-blue, #203248) !important; border-radius: 8px !important; opacity: 1 !important; } #page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li:hover > a, #page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-item > a, #page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current_page_item > a, #page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-parent > a, #page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-ancestor > a { color: var(--ifa-dark-blue, #203248) !important; -webkit-text-fill-color: var(--ifa-dark-blue, #203248); } #page-container .nav-menu-ifa .et-menu > li.current-menu-item > a::after, #page-container .nav-menu-ifa .et-menu > li.current_page_item > a::after, #page-container .nav-menu-ifa .et-menu > li.current-menu-parent > a::after, #page-container .nav-menu-ifa .et-menu > li.current-menu-ancestor > a::after { color: var(--ifa-dark-blue, #203248) !important; } #page-container .nav-menu-ifa .et-menu .sub-menu { background: #fff !important; } #page-container .nav-menu-ifa .et-menu .sub-menu a { background: #fff !important; color: var(--ifa-dark-blue, #203248) !important; font-weight: 400 !important; opacity: 1 !important; } #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a, #page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a { background: var(--ifa-dark-blue, #203248) !important; color: #fff !important; font-weight: 400 !important; opacity: 1 !important; } #page-container .nav-menu-ifa .et-menu .sub-menu a:hover, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a:hover, #page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a:hover, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a:hover, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a:hover { background: var(--ifa-dark-blue, #203248) !important; color: #fff !important; font-weight: 400 !important; opacity: 1 !important; } /* Same omission one level down: submenu links had a :hover state and no :focus state at all, so tabbing through an open dropdown moved through it with nothing changing on screen. */ #page-container .nav-menu-ifa .et-menu .sub-menu a:focus, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a:focus, #page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a:focus, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a:focus, #page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a:focus { background: var(--ifa-dark-blue, #203248) !important; color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 400 !important; opacity: 1 !important; } /* A focus ring on top of the colour change, for the same reason the search widget below has one: colour alone is a weak signal, and these are the only controls in the header. Both rules have to out-specify the Theme Builder's .nav-menu-ifa a.da11y-submenu { outline: 0 !important } .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a { outline: none !important } which is why they carry the #page-container prefix — the ID wins on specificity regardless of which stylesheet the browser sees last. Each ring is coloured for the surface it is actually drawn on, which is not the same surface in both cases: - Top level sits as a white pill on the navy bar. A positive outline-offset puts the ring outside the pill, on the navy — teal on navy is 4.3:1. Teal on the white pill would be 3.0:1, a hair over the line and not where a focus indicator belongs. - Submenu items fill with navy on focus and butt up against each other, so an outside ring would both collide with the neighbour and land navy-on-navy. A negative offset draws it inside the item instead, in white — 13:1. */ #page-container .nav-menu-ifa .et-menu > li > a:focus-visible { outline: 2px solid var(--ifa-teal, #29A5A1) !important; outline-offset: 2px !important; } #page-container .nav-menu-ifa .et-menu .sub-menu a:focus-visible { outline: 2px solid #fff !important; outline-offset: -4px !important; } .ifa-nav-search { display: inline-flex; align-items: center; gap: 0; position: relative; } .ifa-nav-search__toggle { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; background: transparent; border: none; border-radius: 6px; color: var(--ifa-dark-blue); font-size: 20px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; flex-shrink: 0; z-index: 2; } .ifa-nav-search__toggle:hover { color: var(--ifa-teal); background: rgba(41, 165, 161, 0.08); } .ifa-nav-search__toggle:focus-visible { outline: 2px solid var(--ifa-teal); outline-offset: 2px; } /* Swap icon when open */ .ifa-nav-search.is-open .ifa-nav-search__toggle .fa-magnifying-glass::before { content: '\f00d'; /* fa-xmark */ } /* Expanding form panel */ .ifa-nav-search__form { display: flex; align-items: center; overflow: hidden; width: 0; opacity: 0; pointer-events: none; transition: width 0.3s ease, opacity 0.25s ease; } .ifa-nav-search.is-open .ifa-nav-search__form { width: 200px; opacity: 1; pointer-events: auto; } .ifa-nav-search__input { flex: 1; min-width: 0; height: 43px; padding: 0 14px; font-size: 16px; border: 1.5px solid var(--ifa-dark-blue); border-right: none; border-radius: 6px 0 0 6px; outline: none; background: #fff; color: var(--ifa-dark-blue); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ifa-nav-search__input::placeholder { color: #aaa; } .ifa-nav-search__input:focus { border-color: var(--ifa-teal); box-shadow: 0 0 0 3px rgba(41, 165, 161, 0.15); } .ifa-nav-search__submit { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; flex-shrink: 0; background: var(--ifa-dark-blue); color: #fff; border: 1.5px solid var(--ifa-dark-blue); border-radius: 0 6px 6px 0; font-size: 18px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .ifa-nav-search__submit:hover { background: var(--ifa-teal); border-color: var(--ifa-teal); } .ifa-nav-search__submit:focus-visible { outline: 2px solid var(--ifa-teal); outline-offset: 2px; } /* Mobile — full width when open */ @media (max-width: 768px) { .ifa-nav-search.is-open .ifa-nav-search__form { width: 180px; } }