/* Theme Name: ABA 4 Change Theme Theme URI: https://aba4change.org Author: ABA4Change Author URI: https://aba4change.org Description: Native WordPress Full Site Editing block theme for ABA4Change. Unifies the former aba4change-institutional theme (a4c-*), the ibt-landing.css certificate-page kit (.ibt-kit-4), and the live (non-draft) components from the site's Global Styles Additional CSS into one component library, one naming convention, one CSS file. Standardized on the original a4c-* coral/navy palette — components ported from the other two systems have been retoned onto theme.json's color tokens instead of their own local hardcoded hex values. Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 8.0 Version: 0.13.3 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: aba4change Tags: full-site-editing, block-patterns, rtl-language-support, education, custom-colors */ /* =========================================================== BUILD STATUS CSS layer complete: every rule from aba4change-institutional's style.css is accounted for (carried over unchanged where it was a plugin-markup bug-fix, merged into a shared component where a real duplicate existed), plus every confirmed-live component from .ibt-kit-4 (ibt-landing.css) and the live (non-draft) part of the site's Global Styles Additional CSS — all retoned onto the a4c-* coral/navy palette and theme.json tokens. NOT YET DONE, so DO NOT ACTIVATE THIS THEME YET: - No page's saved block content has been updated to the new component names (a4c-course-card, a4c-pricing-box, a4c-faq, etc. — the live pages still say .course-card, .pk, .faq-acc). - The copied patterns/templates/parts haven't been checked against the new names either. - No page-by-page visual check has been done yet. Activating now would leave every page that used a renamed component completely unstyled. =========================================================== */ /* ----------------------------------------------------------- Language direction switching — Arabic default (Tajawal), English secondary (Arial body / Georgia serif headings). Ported unchanged from aba4change-institutional/style.css. ----------------------------------------------------------- */ html[dir="ltr"] body, html[dir="ltr"] p, html[dir="ltr"] li, html[dir="ltr"] .wp-block-button__link { font-family: var(--wp--preset--font-family--body-sans); } html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] .wp-block-post-title, html[dir="ltr"] .a4c-serif { font-family: var(--wp--preset--font-family--heading-serif); letter-spacing: -0.04em; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .wp-block-post-title, html[dir="rtl"] .a4c-serif { font-family: var(--wp--preset--font-family--tajawal); letter-spacing: 0; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-weight: 500; } :focus-visible { outline: 3px solid var(--wp--preset--color--coral); outline-offset: 3px; } .skip-link { position: absolute; left: 0; top: -100px; z-index: 100000; background: var(--wp--preset--color--ink); color: #fff; padding: 14px 22px; border-radius: 0 0 10px 0; transition: top .2s ease; } .skip-link:focus { top: 0; } img { max-width: 100%; height: auto; } html { overflow-x: clip; } .wp-block-post-content > * { margin-top: 0 !important; margin-bottom: 0 !important; } .wp-site-blocks > * { margin-top: 0 !important; margin-bottom: 0 !important; } .alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ----------------------------------------------------------- Typography helpers ----------------------------------------------------------- */ .a4c-eyebrow { color: var(--wp--preset--color--ink-soft); font-size: 0.9rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; } .a4c-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--coral); box-shadow: 0 0 0 5px rgba(239, 124, 87, .16); } .a4c-section-dark .a4c-eyebrow, .a4c-section-navy .a4c-eyebrow { color: #c0d7e8; } .a4c-lead { font-size: 1.15rem; line-height: 1.65; color: var(--wp--preset--color--ink-soft); } .a4c-narrow { max-width: 640px; } .a4c-stat strong, .a4c-stat .a4c-stat-number { font-family: var(--wp--preset--font-family--heading-serif); font-size: 1.75rem; display: block; } html[dir="rtl"] .a4c-stat strong, html[dir="rtl"] .a4c-stat .a4c-stat-number { font-family: var(--wp--preset--font-family--tajawal); } /* ----------------------------------------------------------- Buttons ----------------------------------------------------------- */ .wp-block-button__link { min-height: 44px; transition: transform .2s ease; } .wp-block-button__link:hover { transform: translateY(-2px); } /* Same class works two ways: as a wp:button className (WP puts it on the outer .wp-block-button div; styling flows to the inner .wp-block-button__link) or directly on a plain tag (the certificate-page CTAs). Tag-qualifying the plain-anchor rules with "a." keeps the two cases from ever colliding, so there's no :not() guessing and no border to double up. */ .wp-block-button.a4c-btn-coral .wp-block-button__link, a.a4c-btn-coral { background-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); } .wp-block-button.a4c-btn-dark .wp-block-button__link, a.a4c-btn-dark { background-color: var(--wp--preset--color--ink); color: #fff; } .wp-block-button.a4c-btn-outline .wp-block-button__link, a.a4c-btn-outline { background-color: transparent; color: var(--wp--preset--color--ink); } html[dir="ltr"] .a4c-btn-outline .wp-block-button__link:hover, html[dir="rtl"] .a4c-btn-outline .wp-block-button__link:hover, a.a4c-btn-outline:hover { background-color: var(--wp--preset--color--sea-pale); } .wp-block-button.a4c-btn-outline-white .wp-block-button__link, a.a4c-btn-outline-white { background-color: transparent; color: #fff; } .wp-block-button.a4c-btn-outline-white .wp-block-button__link:hover, a.a4c-btn-outline-white:hover { background-color: rgba(255, 255, 255, .14); } .wp-block-button.a4c-btn-small .wp-block-button__link, a.a4c-btn-small { min-height: 40px; padding: 8px 18px; font-size: 0.85rem; } a.a4c-btn-coral, a.a4c-btn-dark, a.a4c-btn-outline, a.a4c-btn-outline-white { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; min-height: 48px; text-decoration: none; font-weight: 700; } /* ----------------------------------------------------------- Section background helpers ----------------------------------------------------------- */ .a4c-section-soft { background-color: var(--wp--preset--color--paper); } .a4c-section-tint { background-color: var(--wp--preset--color--sea-pale); } .a4c-section-dark { background-color: var(--wp--preset--color--ink); color: #fff; } .a4c-section-dark h2, .a4c-section-dark h3 { color: #fff; } .a4c-section-dark p { color: #afcadc; } .a4c-section-navy { background-color: var(--wp--preset--color--navy-contact); color: #fff; } .a4c-section-navy h2, .a4c-section-navy h3 { color: #fff; } .a4c-section-navy p { color: #cfe0ec; } .a4c-section-footer { background-color: var(--wp--preset--color--navy-footer); color: #fff; } .a4c-section-pad { padding: clamp(64px, 8vw, 110px) 0; } .a4c-section-dark .a4c-btn-outline .wp-block-button__link, .a4c-section-navy .a4c-btn-outline .wp-block-button__link, .a4c-section-dark a.a4c-btn-outline, .a4c-section-navy a.a4c-btn-outline { color: #fff; } .a4c-section-dark .a4c-btn-outline .wp-block-button__link:hover, .a4c-section-navy .a4c-btn-outline .wp-block-button__link:hover, .a4c-section-dark a.a4c-btn-outline:hover, .a4c-section-navy a.a4c-btn-outline:hover { background-color: rgba(255, 255, 255, .14); } /* ----------------------------------------------------------- Arch-shaped imagery ----------------------------------------------------------- */ .a4c-arch img, .a4c-arch .wp-block-image img, .a4c-arch.wp-block-image img, .a4c-arch.wp-block-cover { border-radius: 220px 220px 26px 26px; object-fit: cover; box-shadow: 0 26px 70px rgba(23, 59, 90, .18); border: 8px solid rgba(255, 255, 255, .66); } .a4c-arch-sm img { border-radius: 140px 140px 22px 22px; } @media (max-width: 782px) { .a4c-arch img, .a4c-arch .wp-block-image img { border-radius: 130px 130px 22px 22px; } } /* ----------------------------------------------------------- Institutional cards / grids with hairline dividers ----------------------------------------------------------- */ .a4c-card { border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 30px; } .a4c-card-sea { background-color: var(--wp--preset--color--sea-pale); } .a4c-card-paper { background-color: var(--wp--preset--color--paper); } .a4c-card-coral { background-color: var(--wp--preset--color--coral-soft); } .a4c-card-cream { background-color: var(--wp--preset--color--cream); } /* ----------------------------------------------------------- service-card-grid (homepage) — never renamed, had no CSS at all, so the 3 cards fell back to plain block stacking. ----------------------------------------------------------- */ .service-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .service-card-grid { grid-template-columns: 1fr; } } .a4c-divider-grid.wp-block-columns { border-top: 1px solid var(--wp--preset--color--line); border-inline-start: 1px solid var(--wp--preset--color--line); } .a4c-divider-grid.wp-block-columns > .wp-block-column { border-inline-end: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 28px !important; } .a4c-divider-grid.a4c-section-dark.wp-block-columns, .a4c-divider-grid.a4c-section-dark.wp-block-columns > .wp-block-column { border-color: rgba(255, 255, 255, .18); } @media (max-width: 782px) { .a4c-divider-grid.wp-block-columns { flex-wrap: wrap; } } /* ----------------------------------------------------------- a4c-course-card — unifies the academy course listing card (formerly .course-card-grid/.course-card) and the supervision pricing card (formerly .supervision-option-grid/article). Base = bordered card, topline label, h3, description, a meta/price row, footer link. Two content patterns share it: dt/dd meta grid (course listings) or a plain price line (pricing use — see .a4c-course-card__price-line). ----------------------------------------------------------- */ .a4c-course-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } @media (max-width: 900px) { .a4c-course-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-course-card-grid { grid-template-columns: 1fr; } } .catalogue-course-grid { margin-top: 26px; } .catalogue-course-grid .a4c-course-card { background: #fff; } /* academy's own listing — 3 columns max (supervision's pricing grid keeps the base 4-up auto-fit behavior above, untouched) */ .a4c-course-card-grid.academy-course-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } @media (max-width: 900px) { .a4c-course-card-grid.academy-course-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-course-card-grid.academy-course-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------- featured-courses-section (academy) — never renamed, had no CSS, so the section had no top/bottom padding at all. ----------------------------------------------------------- */ .featured-courses-section { padding: clamp(64px, 8vw, 108px) 0; background: #fff; } @media (max-width: 782px) { .featured-courses-section { padding-block: 76px; } } .featured-courses-section.a4c-reveal, .featured-courses-section .a4c-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .a4c-course-card, .a4c-course-card-grid > article { display: flex; flex-direction: column; min-height: 450px; padding: 28px; border: 1px solid var(--wp--preset--color--line); border-radius: 26px; background: var(--wp--preset--color--paper); transition: transform 180ms ease, box-shadow 180ms ease; } .a4c-course-card:hover, .a4c-course-card-grid > article:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(23, 59, 90, .1); } .a4c-course-card.is-recommended, .a4c-course-card-grid > article.is-recommended { position: relative; border: 2px solid var(--wp--preset--color--coral); background: var(--wp--preset--color--white); box-shadow: 0 18px 45px rgba(239, 124, 87, .14); } .a4c-course-card-grid > article > span:not(.a4c-course-card__badge), .a4c-course-card-grid > article > p:first-child > span:not(.a4c-course-card__badge) { color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; } .a4c-course-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--wp--preset--color--ink-soft); font-size: 0.7rem; font-weight: 800; } .a4c-course-card__badge { padding: 7px 10px; border-radius: 999px; background: var(--wp--preset--color--sea-pale); color: var(--wp--preset--color--ink); } .a4c-course-card__badge--open { background: var(--wp--preset--color--coral); color: #fff; } .a4c-course-card__badge--featured { position: absolute; top: 20px; inset-inline-end: 20px; padding: 7px 9px; border-radius: 999px; background: var(--wp--preset--color--coral); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; } .a4c-course-card h3, .a4c-course-card-grid > article h3 { margin: 40px 0 14px; font-size: 1.5rem; line-height: 1.15; } .a4c-course-card h3 a:hover, .a4c-course-card-grid > article h3 a:hover { color: var(--wp--preset--color--coral); } .a4c-course-card-grid > article ul { margin: 16px 0; padding-inline-start: 20px; font-size: .9rem; color: var(--wp--preset--color--ink-soft); line-height: 1.6; } .a4c-course-card-grid > article > p:last-child a { margin-top: auto; color: var(--wp--preset--color--ink); font-weight: 800; text-decoration: none; } .a4c-course-card__summary { margin: 0 0 26px; color: var(--wp--preset--color--ink-soft); font-size: 0.9rem; line-height: 1.65; } .a4c-course-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: auto 0 24px; list-style: none; padding: 0; } .a4c-course-card__meta > div { padding-top: 14px; border-top: 1px solid var(--wp--preset--color--line); } .a4c-course-card__meta dt { margin-bottom: 6px; color: var(--wp--preset--color--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .a4c-course-card__meta dd { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.45; } .a4c-course-card__meta-price { grid-column: 1 / -1; padding: 14px 16px; border-radius: 12px; background: #d9e3d5; } .a4c-course-card__meta-price dd { color: var(--wp--preset--color--ink); font-size: 1rem; } .a4c-course-card__meta-price dd h6.wp-block-heading { font-size: 1.35rem; font-weight: 800; color: var(--wp--preset--color--ink); } .a4c-course-card__meta-price dd h6.wp-block-heading ins { font-size: 1em; font-weight: 800; text-decoration: none; color: var(--wp--preset--color--coral); } .a4c-course-card__meta-price dd h6.wp-block-heading del { margin-inline-end: 8px; font-size: .65em; font-weight: 400; text-decoration: line-through; opacity: .6; } .a4c-course-card__price-line { margin: 23px 0 0; padding: 17px 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); } .a4c-course-card__price-line strong, .a4c-course-card__price-line small { display: block; } .a4c-course-card__price-line strong { color: var(--wp--preset--color--ink); font-size: 1.4rem; } .a4c-course-card__price-line small { margin-top: 4px; color: var(--wp--preset--color--ink-soft); font-size: .68rem; } .a4c-course-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--wp--preset--color--line); font-size: .75rem; } .a4c-course-card__footer > span { color: var(--wp--preset--color--ink-soft); } .a4c-course-card__footer a { font-weight: 800; text-decoration: none; } /* ----------------------------------------------------------- a4c-pricing-box — ported from .ibt-kit-4 .price/.pk (the qasp-s-180h-certificate pricing box with the payment-plan toggle). Real, verified behavior — keeps the pay-toggle.js contract (.pay-toggle/.pay-opt/.plan-note) so the existing script keeps working unchanged; only class NAMES on the containers changed, not the data-* attributes it reads. Retoned from gold to coral for the featured state. ----------------------------------------------------------- */ .a4c-pricing-box-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .a4c-pricing-box-grid { grid-template-columns: 1fr; } } /* a single box shouldn't stretch full-width — cap it and center it */ .a4c-pricing-box-grid:has(> .a4c-pricing-box:only-child) { grid-template-columns: minmax(0, 480px); justify-content: center; } .a4c-pricing-box { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 32px 26px; display: flex; flex-direction: column; gap: 18px; } .a4c-pricing-box.is-featured { border: 2px solid #F2B544; box-shadow: 0 20px 50px rgba(37, 83, 120, .12); position: relative; } .a4c-pricing-box__badge { position: absolute; top: -16px; inset-inline-start: 40px; background: #F2B544; color: rgb(42, 32, 19); font-size: .95rem; font-weight: 700; padding: 8px 18px; border-radius: 999px; } .a4c-pricing-box__amount { font-size: 2.8rem; font-weight: 800; color: var(--wp--preset--color--ink); line-height: 1; } .a4c-pricing-box__was { font-size: 1.15rem; color: var(--wp--preset--color--ink-soft); text-decoration: line-through; margin-inline-start: 12px; font-weight: 400; } .a4c-pricing-box .pay-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .a4c-pricing-box .pay-toggle-switch { display: inline-flex; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 4px; gap: 4px; } .a4c-pricing-box .pay-opt { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 7px 16px; font-size: .82rem; font-weight: 600; font-family: inherit; color: var(--wp--preset--color--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease; } .a4c-pricing-box .pay-opt.is-active { background: var(--wp--preset--color--ink); color: #fff; } .a4c-pricing-box.is-featured .pay-opt.is-active { background: #F2B544; color: rgb(42, 32, 19); } .a4c-pricing-box .plan-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--ink); } .a4c-pricing-box .plan-note[hidden] { display: none; } .a4c-pricing-box ul { display: grid; gap: 12px; list-style: none; padding: 0; } .a4c-pricing-box li { font-size: 1rem; color: var(--wp--preset--color--ink-soft); font-weight: 300; padding-inline-start: 26px; position: relative; line-height: 1.6; } .a4c-pricing-box li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 14px; height: 8px; border-inline-start: 2px solid #D97D0D; border-bottom: 2px solid #D97D0D; transform: rotate(-45deg); } .a4c-pricing-box .wp-block-button { margin-top: auto; } .a4c-pricing-box-note { background: #F7EEDB; border-radius: 26px; padding: 22px 26px; margin-top: 26px; font-size: .9rem !important; font-weight: 400 !important; line-height: 1.8; color: var(--wp--preset--color--ink-soft) !important; } /* ----------------------------------------------------------- Header — ported unchanged from aba4change-institutional (Polylang language-switcher CSS dropped: plugin isn't active). ----------------------------------------------------------- */ header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } .a4c-header { background: rgba(255, 253, 248, .97); border-bottom: 1px solid rgba(39, 83, 120, .09); } .a4c-header .wp-block-navigation a { font-weight: 700; font-size: 0.95rem; } @media (max-width: 1320px) { .a4c-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .a4c-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } } .a4c-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: var(--wp--preset--color--cream) !important; z-index: 999999 !important; overflow-y: auto; } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 90px 24px 40px !important; } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 24px; inset-inline-end: 24px; inset-inline-start: auto; width: 44px; height: 44px; } .a4c-header .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--line); } .a4c-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content { display: block; padding: 16px 4px; font-size: 1.1rem; min-height: 44px; } .a4c-header .a4c-nav-contact-item { display: none; } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .a4c-nav-contact-item { display: flex; } @media (max-width: 1320px) { .a4c-header .a4c-header-cta { display: none; } } .a4c-header .wp-block-navigation a:hover { color: var(--wp--preset--color--coral); } .a4c-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--coral); box-shadow: inset 0 -2px 0 var(--wp--preset--color--coral); } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item { border-inline-start: 3px solid var(--wp--preset--color--coral); } .a4c-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { box-shadow: none; } .a4c-logo img { width: 152px; height: auto; } .a4c-footer .a4c-logo img { filter: brightness(0) invert(1); width: 150px; } .a4c-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--wp--preset--color--ink); flex-shrink: 0; } .a4c-cart-icon-wrap:hover { color: var(--wp--preset--color--coral); } .a4c-cart-icon-wrap--empty { display: none; } .a4c-cart-count { position: absolute; top: 0; inset-inline-end: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--white); font-size: 0.65rem; font-weight: 800; line-height: 17px; text-align: center; } .a4c-account-link-wrap { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--wp--preset--color--ink); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; } .a4c-account-link-wrap:hover { color: var(--wp--preset--color--coral); } .a4c-header > .wp-block-group > .wp-block-group:not(.a4c-logo) > p { display: flex; align-items: center; margin: 0; } @media (max-width: 1320px) { .a4c-header > .wp-block-group { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; } .a4c-header > .wp-block-group > .wp-block-group.a4c-logo { order: 1; flex-basis: auto; flex-shrink: 1; flex-grow: 0; min-width: 0; } .a4c-logo img { width: 110px; max-width: 100%; } .a4c-header > .wp-block-group > .wp-block-group:not(.a4c-logo) { order: 2; margin-inline-start: auto; flex-shrink: 0; } .a4c-account-icon { display: none; } .a4c-account-link-wrap { font-size: 0.8rem; } .a4c-header > .wp-block-group > nav.wp-block-navigation { order: 3; flex-shrink: 0; } } @media (max-width: 600px) { .a4c-header > .wp-block-group > .wp-block-group { flex-wrap: wrap; row-gap: 10px; } .a4c-header .wp-block-button__link { min-height: 44px; } } /* ----------------------------------------------------------- Footer columns ----------------------------------------------------------- */ .a4c-footer h3, .a4c-footer .wp-block-heading { color: #81a4bd; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--wp--preset--font-family--body-sans); } .a4c-footer a { color: #d7e3ec; font-size: .95rem; } .a4c-footer a:hover { color: #fff; } .a4c-footer p { color: #a6bfd2; } @media (max-width: 1320px) { .a4c-footer { padding-inline: clamp(24px, 5vw, 78px); box-sizing: border-box; } } /* ----------------------------------------------------------- Layout/breakout fixes (alignfull, alignwide centering, block-gap removal, course-archive/checkout gutters) — kept verbatim, these are structural, not a "look." ----------------------------------------------------------- */ @media (max-width: 1320px) { .alignfull > .is-layout-constrained { padding-inline: clamp(24px, 5vw, 78px); box-sizing: border-box; } .wp-block-learnpress-list-courses, .wp-block-learnpress-course-filter { padding-inline: clamp(24px, 5vw, 78px); box-sizing: border-box; } } .is-layout-constrained > .alignwide { margin-left: auto; margin-right: auto; } .woocommerce-cart .entry-content > .woocommerce, .woocommerce-checkout .entry-content > .woocommerce { margin-left: auto; margin-right: auto; float: none; } main.wp-block-group { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); } main.wp-block-group:has(> .entry-content > .alignfull:first-child), main.wp-block-group:has(> .alignfull:first-child) { padding-top: 0; } main.wp-block-group:has(> .entry-content > .alignfull:last-child), main.wp-block-group:has(> .alignfull:last-child) { padding-bottom: 0; } @media (max-width: 1320px) { main.wp-block-group { padding-inline: clamp(20px, 5vw, 78px); box-sizing: border-box; } } .wp-block-post-title, .wp-block-query-title { text-align: center; } /* ----------------------------------------------------------- WooCommerce checkout — ported unchanged from aba4change-institutional. These are defensive fixes against WooCommerce core / Amazon Payment Services (PayFort) / Valu gateway markup, not a "look" — no equivalent existed in the other two systems, nothing to deduplicate here. ----------------------------------------------------------- */ .woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { max-width: 48%; margin-left: auto; margin-right: auto; } .woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner { display: flex; align-items: center; gap: 10px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 16px; margin: 0 0 20px; } .woocommerce-checkout .woocommerce-form-coupon-toggle svg { fill: var(--wp--preset--color--ink-soft); flex: none; } .woocommerce-checkout .woocommerce-form-coupon-toggle .wc-block-components-notice-banner__content { color: var(--wp--preset--color--ink); font-weight: 700; } .woocommerce-checkout .showcoupon { color: var(--wp--preset--color--coral); text-decoration: underline; } .woocommerce-checkout .checkout_coupon.woocommerce-form-coupon:not([style*="display:none"]):not([style*="display: none"]) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 16px; margin-top: 0; margin-bottom: 20px; } .woocommerce-checkout .checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; } .woocommerce-checkout .checkout_coupon .form-row-first { flex: 1 1 220px; } .woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; } .woocommerce-checkout .checkout_coupon input#coupon_code { width: 100%; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 10px; padding: 12px; font-size: 1rem; box-sizing: border-box; } .woocommerce-checkout .checkout_coupon button[name="apply_coupon"] { white-space: nowrap; } @media (max-width: 768px) { .woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { max-width: 100%; } } @media (max-width: 600px) { .woocommerce-checkout .checkout_coupon.woocommerce-form-coupon:not([style*="display:none"]):not([style*="display: none"]) { flex-direction: column; align-items: stretch; } .woocommerce-checkout .checkout_coupon .form-row-first { flex: none; } .woocommerce-checkout .checkout_coupon button[name="apply_coupon"] { width: 100%; } } .woocommerce-checkout-payment { background: var(--wp--preset--color--white) !important; } .wc_payment_methods.payment_methods { border: none; background: transparent; display: flex; flex-direction: column; gap: 12px; } .wc_payment_methods.payment_methods li.wc_payment_method { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 14px 16px; background: var(--wp--preset--color--white); transition: border-color .15s ease, box-shadow .15s ease; } .wc_payment_methods.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) { border-color: var(--wp--preset--color--coral); box-shadow: 0 0 0 3px var(--wp--preset--color--coral-soft); } .wc_payment_methods.payment_methods label { color: var(--wp--preset--color--ink); font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; } .wc_payment_methods .payment-icons, .wc_payment_methods .card-icon { height: 20px; width: auto; vertical-align: middle; } .payment_box { padding: 14px !important; margin: 12px 0 0 !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 10px !important; background: var(--wp--preset--color--paper) !important; } .aps_hosted_form { margin-top: 0; } .aps_hosted_form .form-row { margin: 0 0 14px; } .aps_hosted_form label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--wp--preset--color--ink); margin-bottom: 6px; } .aps_hosted_form input.input-text { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px !important; padding: 10px 12px !important; background: var(--wp--preset--color--white) !important; font-size: 1rem !important; width: 100%; box-sizing: border-box; } .card-row { display: block; padding: 3px; box-sizing: border-box; } .card-row .card-icon { display: none; } .card-row input.input-text { width: 100%; height: auto !important; } .aps_hosted_form input.input-text:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; } #aps_expiry_month_field { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } #aps_expiry_month_field label { flex-basis: 100%; } #aps_expiry_month_field input.aps_expiry_month, #aps_expiry_month_field input.aps_expiry_year { display: inline-block !important; width: 64px !important; flex: none; } #aps_card_security_code_field input.aps_card_security_code { width: 100px !important; } #aps_card_security_code_field { display: flex; align-items: center; gap: 10px; } #aps_card_security_code_field label:not(.aps_error) { display: inline-block; margin-bottom: 0; white-space: nowrap; } .valu_form input.input-text { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px !important; padding: 10px 12px; background: var(--wp--preset--color--white) !important; font-size: 1rem !important; box-sizing: border-box; width: 100%; } .valu_form .aps-row { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 0 14px; } .valu_form .aps-col-sm-1, .valu_form .aps-col-sm-3, .valu_form .aps-col-sm-4, .valu_form .aps-col-sm-8 { width: auto !important; padding: 0 !important; } .valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-1 { flex: none; } .valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-8 { flex: 1 1 auto; min-width: 0; } .valu_form .aps-row:has(.aps_valu_mob_number) .aps-col-sm-3 { flex: none; } .valu_form .country_code { color: var(--wp--preset--color--ink-soft); font-weight: 700; white-space: nowrap; } .valu_form .aps-pull-left { color: var(--wp--preset--color--ink); font-size: 0.9rem; } .valu_form button.aps-btn, .valu_form button.valu_customer_verify { white-space: nowrap; flex: none; } #customer_details .col-2 { display: none; } #customer_details .col-1 { float: none; margin: 0 auto; } .woocommerce-page input.input-text, .woocommerce-page textarea { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px !important; background: var(--wp--preset--color--white) !important; font-size: 1rem !important; box-sizing: border-box; } .woocommerce-page input.input-text:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; } .woocommerce-checkout .select2-container .select2-selection--single { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px !important; background: var(--wp--preset--color--white) !important; } .woocommerce-checkout .select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--wp--preset--color--coral) !important; } .woocommerce-checkout .select2-selection__rendered { font-size: 1rem !important; } .woocommerce-checkout .select2-search__field { font-size: 1rem !important; } .woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid select, .woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid textarea, .woocommerce-checkout .woocommerce-billing-fields .form-row.woocommerce-invalid .select2-container .select2-selection { border-color: #e2401c !important; } .woocommerce-page input.input-text, .woocommerce-page input[type="number"], .woocommerce-page input[type="tel"], .woocommerce-page input[type="email"], .woocommerce-page select, .woocommerce-page textarea { font-size: 16px !important; } .a4c-checkout-trust { clear: both; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wp--preset--color--line); text-align: center; } .a4c-checkout-trust p { margin: 0 0 6px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); } .a4c-checkout-trust p:last-child { margin-bottom: 0; } .a4c-checkout-trust a { color: var(--wp--preset--color--coral); text-decoration: underline; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button { font-size: 1rem; padding: 14px 28px; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, #place_order, .wc-forward, .valu_form .aps-btn { background: var(--wp--preset--color--contrast, #32373c); color: var(--wp--preset--color--white) !important; border: none; border-radius: 999px; padding: 13px 24px; font-weight: 800; font-size: 0.9375rem; line-height: 1; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, #place_order:hover, .wc-forward:hover, .valu_form .aps-btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white) !important; } #place_order { display: block; width: 100%; padding: 18px 24px; font-size: 1.125rem; } /* ----------------------------------------------------------- My Account — ported unchanged from aba4change-institutional. Pairs with woocommerce/myaccount/navigation.php + dashboard.php overrides already copied into this theme. ----------------------------------------------------------- */ body.logged-in.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation-link { margin: 0; padding: 0; border: none; } .woocommerce-account .woocommerce-MyAccount-navigation-link a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--ink-soft); transition: background-color .15s ease, color .15s ease; } .a4c-nav-icon { display: inline-flex; flex: 0 0 auto; color: currentColor; } .a4c-nav-label { flex: 1 1 auto; min-width: 0; } .a4c-nav-chevron { display: none; flex: 0 0 auto; color: var(--wp--preset--color--sea); } .a4c-nav-chevron svg { transform: scaleX(1); } html[dir="ltr"] .a4c-nav-chevron svg { transform: scaleX(-1); } .woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { background: var(--wp--preset--color--coral-soft); color: var(--wp--preset--color--ink); font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-navigation-link:not(.is-active) a:hover { background: var(--wp--preset--color--sea-pale); color: var(--wp--preset--color--ink); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wp--preset--color--line); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wp--preset--color--ink-soft); font-weight: 400; } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: transparent; color: var(--wp--preset--color--coral); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout .a4c-nav-chevron { display: none; } .a4c-account-userblock { display: none; } .a4c-account-userblock__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--white); font-weight: 700; flex: 0 0 auto; } .a4c-account-userblock__meta { display: flex; flex-direction: column; min-width: 0; } .a4c-account-userblock__name { font-weight: 600; color: var(--wp--preset--color--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a4c-account-userblock__status { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); } .a4c-account-back { display: none; } .a4c-account-back__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--wp--preset--color--ink-soft); font-weight: 500; } .a4c-account-back__link svg { transform: scaleX(1); } html[dir="ltr"] .a4c-account-back__link svg { transform: scaleX(-1); } .a4c-account-greeting { font-size: 1.05rem; font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 14px; } .a4c-continue-card { display: flex; gap: 16px; align-items: center; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 16px; } .a4c-continue-card--empty { flex-direction: column; align-items: flex-start; gap: 12px; } .a4c-continue-card__thumb { flex: 0 0 96px; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; } .a4c-continue-card__body { flex: 1 1 auto; min-width: 0; } .a4c-continue-card__title { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--ink); } .a4c-continue-card__progress { margin: 0 0 10px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); } .a4c-continue-card__cta { display: inline-block; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--white) !important; padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; } .a4c-continue-card__cta:hover { background: var(--wp--preset--color--ink-soft); } .a4c-settings-list { display: flex; flex-direction: column; gap: 10px; } .a4c-settings-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; text-decoration: none; color: var(--wp--preset--color--ink); } .a4c-settings-row:hover { background: var(--wp--preset--color--sea-pale); } .a4c-settings-row__label { flex: 1 1 auto; } .a4c-settings-row .a4c-nav-chevron { display: inline-flex; } .a4c-scheduled-orders-callout { margin: 0 0 16px; padding: 10px 14px; background: var(--wp--preset--color--sea-pale); border-radius: 8px; font-size: 0.9rem; } .a4c-scheduled-orders-callout a { color: var(--wp--preset--color--ink); font-weight: 600; } .woocommerce-account .lp-archive-courses, .woocommerce-account .lp-archive-courses ul.profile-courses-list, .woocommerce-account .lp-archive-courses li.course { width: 100%; } .woocommerce-account .lp-archive-courses ul.profile-courses-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; } .woocommerce-account .lp-archive-courses .course-item { display: flex; flex-direction: row; width: 100%; gap: 18px; align-items: flex-start; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--white); padding: 16px; } .woocommerce-account .lp-archive-courses .course-thumbnail { flex: 0 0 200px; width: 200px; } .woocommerce-account .lp-archive-courses .course-thumbnail .course-img { border-radius: 8px; overflow: hidden; } .woocommerce-account .lp-archive-courses .course-thumbnail img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .woocommerce-account .lp-archive-courses .course-content { flex: 1 1 auto; width: 100%; min-width: 0; } .woocommerce-account .lp-archive-courses .wap-course-title { display: block; width: 100%; margin: 0 0 8px; font-size: 1.3rem; line-height: 1.35; font-weight: 700; color: var(--wp--preset--color--ink); } .woocommerce-account .lp-archive-courses .wap-course-title a { display: block; } .woocommerce-account .lp-archive-courses .course-instructor-category { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); margin-bottom: 8px; } .woocommerce-account .lp-archive-courses .course-wrap-meta { margin-bottom: 12px; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); } .woocommerce-account .lp-archive-courses .meta-item-duration, .woocommerce-account .lp-archive-courses .meta-item-level, .woocommerce-account .lp-archive-courses .meta-item-quiz, .woocommerce-account .lp-archive-courses .meta-item-student, .woocommerce-account .lp-archive-courses .course-short-description, .woocommerce-account .lp-archive-courses .course-price, .woocommerce-account .lp-archive-courses .lp-wrap-btn-view-course-students { display: none; } .woocommerce-account .lp-archive-courses .course-readmore a { display: inline-block; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--white); padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; } .woocommerce-account .lp-archive-courses .course-readmore a:hover { background: var(--wp--preset--color--ink-soft); } @media (min-width: 769px) { body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 230px; border-inline-end: none; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; } .a4c-account-userblock { display: flex; align-items: center; gap: 10px; padding-inline: 10px; padding-block-end: 14px; margin-block-end: 6px; border-block-end: 1px solid var(--wp--preset--color--line); } .woocommerce-account .woocommerce-MyAccount-navigation-link a { padding: 9px 10px; border-radius: 8px; font-size: 0.92rem; } .a4c-account-back { display: none !important; } .woocommerce-account .lp-archive-courses .course-item { flex-direction: row; } } @media (max-width: 768px) { body.logged-in.woocommerce-account .woocommerce { flex-direction: column; gap: 16px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, body.logged-in.woocommerce-account .woocommerce-MyAccount-content { flex-basis: auto; width: 100%; } body.a4c-account-home.logged-in.woocommerce-account .woocommerce-MyAccount-content { order: 1; } body.a4c-account-home.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { order: 2; } body.a4c-account-inner.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { display: none; } body.a4c-account-inner .a4c-account-back { display: block; margin-block-end: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation-link a { min-height: 48px; padding: 12px 14px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 10px; } .a4c-nav-chevron { display: inline-flex; } .a4c-continue-card { flex-direction: column; align-items: stretch; text-align: center; } .a4c-continue-card__thumb { width: 100%; height: 160px; flex-basis: auto; } .a4c-continue-card__cta { display: block; text-align: center; } .woocommerce-account .lp-archive-courses .course-item { flex-direction: column; } .woocommerce-account .lp-archive-courses .course-thumbnail { width: 100%; flex-basis: auto; } } /* ----------------------------------------------------------- Contact/lead form container + workforce roster — ported unchanged. Pairs with the a4c_workforce_apply/a4c_workforce_roster shortcodes in functions.php. ----------------------------------------------------------- */ .a4c-form-card { background: var(--wp--preset--color--cream); border: 1px solid var(--wp--preset--color--line); border-radius: 28px; padding: 34px; box-shadow: 0 25px 70px rgba(39, 83, 120, .1); } .a4c-form-card .ff-el-form-control { border-radius: 12px !important; min-height: 44px; } .a4c-form-card .ff-btn-submit { background-color: var(--wp--preset--color--ink) !important; border-radius: 999px !important; min-height: 48px; font-weight: 800; } .a4c-form-card label { display: block; font-weight: 700; font-size: .8rem; margin-bottom: 14px; } .a4c-form-card input[type="text"], .a4c-form-card input[type="email"], .a4c-form-card input[type="tel"], .a4c-form-card input[type="number"], .a4c-form-card select, .a4c-form-card textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line); border-radius: 12px !important; min-height: 44px; padding: 10px 14px; font-family: inherit; font-size: .95rem; background: #fff; margin-top: 6px; font-weight: 400; } .a4c-form-card textarea { min-height: 110px; resize: vertical; } .a4c-form-card input[type="file"] { display: block; margin-top: 6px; font-size: .8rem; } .a4c-form-card .a4c-wf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; font-weight: 400; } .a4c-form-card .a4c-wf-consent input { margin-top: 3px; flex-shrink: 0; } .a4c-wf-submit { background-color: var(--wp--preset--color--ink) !important; color: #fff !important; border: 0; border-radius: 999px !important; min-height: 48px; padding: 0 28px; font-weight: 800; cursor: pointer; font-size: .9rem; } .a4c-wf-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .a4c-wf-tab { border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 9px 20px; font-size: .8rem; font-weight: 700; cursor: pointer; background: #fff; color: var(--wp--preset--color--ink); } .a4c-wf-tab.is-active { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); } .a4c-wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .a4c-wf-card { border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 28px 22px; text-align: center; background: #fff; } .a4c-wf-card h3 { margin: 0 0 4px; font-size: 1.1rem; } .a4c-wf-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; border: 4px solid var(--wp--preset--color--paper); box-shadow: 0 12px 30px rgba(23, 59, 90, .16); } @media (max-width: 900px) { .a4c-wf-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-wf-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------- Fluent Forms + Contact Form 7 field borders — ported unchanged (defensive fixes against third-party plugin CSS, not a "look"). ----------------------------------------------------------- */ .ff-el-form-control { border: 1px solid var(--wp--preset--color--line) !important; border-radius: 8px !important; background: var(--wp--preset--color--white) !important; font-size: 1rem !important; box-sizing: border-box; } .ff-el-form-control:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; } .wpcf7-form-control { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 12px !important; min-height: 44px; padding: 10px 14px; font-family: inherit; font-size: .95rem; background: var(--wp--preset--color--white) !important; margin-top: 6px; font-weight: 400; } .wpcf7-form-control:focus { outline: none; border-color: var(--wp--preset--color--coral) !important; } textarea.wpcf7-form-control { min-height: 110px; resize: vertical; } /* ----------------------------------------------------------- LearnPress single-course + lesson viewer fixes — ported unchanged. Pairs with learnpress/block/html/single-course- template-default.html already copied into this theme. ----------------------------------------------------------- */ @media (min-width: 992px) { body.single-lp_course .lp-block-course-sidebar { margin-top: 0 !important; margin-block-start: 0 !important; } } @media (max-width: 781px) { body.single-lp_course .a4c-course-content-col { padding-left: 20px; padding-right: 20px; } } .content-item-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } .lp-button.completed, .lp-button.completed:disabled, .lp-button.completed[disabled] { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #3db748 !important; color: #fff !important; border: 1px solid transparent !important; border-radius: 999px !important; padding: 8px 16px !important; opacity: 1 !important; } .lp-button.completed i { font-size: 0.8em; } #popup-footer .course-item-nav .next::before { content: "\f0d9" !important; } #popup-footer .course-item-nav .prev::before, #popup-footer .prev::before { content: "\f0da" !important; } /* ----------------------------------------------------------- Booking widget (WooCommerce Bookings, [aba_booking_widget] on /consultation/) + the standalone price-card also used there — ported unchanged. ----------------------------------------------------------- */ .aba-booking-widget { margin-top: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; } .aba-booking-widget .wc-bookings-date-picker, .aba-booking-widget .form-field, .aba-booking-widget .timezone-details, .aba-booking-widget .wc-bookings-booking-cost { width: 100%; max-width: 360px; } .aba-booking-widget .picker .ui-datepicker-inline { width: 100%; margin: 0 auto; border: 1px solid var(--wp--preset--color--sea-pale, #e3e6e0); border-radius: 12px; padding: 12px; } .aba-booking-widget .ui-datepicker .ui-datepicker-header { background: transparent; color: var(--wp--preset--color--ink); } .aba-booking-widget .ui-datepicker td .ui-state-active, .aba-booking-widget .ui-datepicker td a.ui-state-active { background: var(--wp--preset--color--coral); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--coral); } .aba-booking-widget .block-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 360px; list-style: none; margin: 16px 0 0; padding: 0; } .aba-booking-widget .block-picker li { margin: 0; } .aba-booking-widget .block-picker li:only-child { color: var(--wp--preset--color--ink); opacity: .7; } .aba-booking-widget .block-picker label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--sea-pale, #e3e6e0); border-radius: 999px; cursor: pointer; } .aba-booking-widget .block-picker input { position: absolute; opacity: 0; pointer-events: none; } .aba-booking-widget .block-picker input:checked + label, .aba-booking-widget .block-picker label.block-selected { background: var(--wp--preset--color--coral); border-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--white); } .aba-booking-widget .wc-bookings-booking-cost { margin-top: 12px; font-weight: 700; } .aba-booking-widget .wc-bookings-booking-form-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; padding: 0 28px; background-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); border: none; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .2s ease; } .aba-booking-widget .wc-bookings-booking-form-button:hover:not(.disabled) { transform: translateY(-2px); } .aba-booking-widget .wc-bookings-booking-form-button.disabled { opacity: .5; cursor: not-allowed; } .a4c-price-card { gap: 32px; margin: 20px 0 4px; padding: 22px 28px; background: var(--wp--preset--color--paper, #fff); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; } .a4c-price-card-label { margin: 0; font-size: .8rem; font-weight: 700; color: var(--wp--preset--color--ink-soft); text-transform: uppercase; letter-spacing: .06em; } .a4c-price-card-value { display: block; margin-top: 6px; font-size: 1.4rem; font-weight: 800; color: var(--wp--preset--color--ink); } .a4c-price-card-amount, .a4c-price-card-amount .woocommerce-Price-amount { color: var(--wp--preset--color--coral); } /* =========================================================== Components ported from .ibt-kit-4 (ibt-landing.css) — retoned from gold/amber onto the a4c-* coral/navy palette and theme.json tokens. .ibt-kit-4 .final and the Global Styles .cta-band (already merged above) served the same "closing CTA" role, so both now share a4c-cta-band instead of staying two components. =========================================================== */ /* ----------------------------------------------------------- a4c-announcement — top bar ----------------------------------------------------------- */ .a4c-announcement { background: var(--wp--preset--color--ink); color: #fff; text-align: center; padding: 13px 24px; font-size: 1rem; font-weight: 500; } .a4c-announcement b { color: var(--wp--preset--color--coral); } /* ibt-kit-4 pages originally used a lighter blue bar with a gold highlight for this exact component (.ann) — keep that distinct look rather than the generic ink/coral bar used elsewhere. */ .ibt-kit-4 .a4c-announcement { background: #255378; } .ibt-kit-4 .a4c-announcement b { color: #F2B544; } /* ----------------------------------------------------------- a4c-whatsapp-btn — fixed pill ----------------------------------------------------------- */ .a4c-whatsapp-btn { position: fixed; bottom: 26px; inset-inline-start: 26px; z-index: 60; background: rgb(37, 211, 102); color: #fff; border-radius: 999px; padding: 14px 22px; font-size: 1rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); text-decoration: none; } /* ----------------------------------------------------------- a4c-sticky-buybar — fixed mobile purchase bar. Disabled per explicit request: it was covering most of the mobile screen. Kept as display:none (not deleted) since the markup still exists in page content; never re-enable the mobile display:flex. ----------------------------------------------------------- */ .a4c-sticky-buybar { display: none !important; } /* ----------------------------------------------------------- a4c-hero — richer hero variant (media card + "what you get" checklist), for use alongside/instead of the hero-split.php pattern's simpler two-column layout. ----------------------------------------------------------- */ .a4c-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .a4c-hero-grid { grid-template-columns: 1fr; } } .a4c-hero-media { position: relative; } .a4c-hero-media img { width: 100%; border-radius: 26px 26px 0 0; object-fit: cover; } .a4c-hero-media .a4c-hero-tag { position: absolute; top: 28px; inset-inline-start: -18px; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); padding: 14px 20px; border-radius: 10px; font-size: 1rem; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } .a4c-hero-includes { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 26px; padding: 24px 28px; margin-top: 22px; } /* the label is a plain

in the actual markup, not a — style whichever tag shows up as the first child. !important: .ibt-kit-4 p (same specificity, loads after this file) would otherwise force its own lighter body-text color/weight onto the label. */ .a4c-hero-includes > b, .a4c-hero-includes > p:first-child { display: block; margin-bottom: 14px; font-size: 1.05rem !important; font-weight: 800 !important; color: #255378 !important; } .a4c-hero-includes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none !important; margin: 0; padding: 0 !important; } .a4c-hero-includes li { font-size: .9rem; color: var(--wp--preset--color--ink-soft); padding-inline-start: 22px; position: relative; } .a4c-hero-includes li::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 12px; height: 7px; border-inline-start: 2px solid #D97D0D; border-bottom: 2px solid #D97D0D; transform: rotate(-45deg); } @media (max-width: 600px) { .a4c-hero-includes ul { grid-template-columns: 1fr; } } /* ----------------------------------------------------------- a4c-outcomes-grid — numbered 4-across benefit grid. Redone as a light card grid on the a4c-card foundation (the ibt-kit-4 source reused a dark .ibt-kit-3 component via ad-hoc inline color overrides on every live page — this gives it a real light variant instead of carrying that workaround forward). ----------------------------------------------------------- */ .a4c-outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wp--preset--color--line); } @media (max-width: 900px) { .a4c-outcomes-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-outcomes-grid { grid-template-columns: 1fr; } } .a4c-outcomes-grid > div { background: #fff; padding: 30px 26px; min-height: 200px; display: flex; flex-direction: column; gap: 12px; } .a4c-outcomes-grid .a4c-outcomes-grid__n { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--coral); } .a4c-outcomes-grid h4 { font-size: 1.25rem; line-height: 1.4; margin: 0; } .a4c-outcomes-grid p { font-size: .95rem; line-height: 1.7; color: var(--wp--preset--color--ink-soft); font-weight: 300; margin: 0; } /* ----------------------------------------------------------- a4c-curriculum — module accordion (native

) ----------------------------------------------------------- */ .a4c-curriculum { border-top: 1px solid var(--wp--preset--color--line); } .a4c-curriculum details { border-bottom: 1px solid var(--wp--preset--color--line); } .a4c-curriculum summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr auto auto; gap: 20px; align-items: center; padding: 22px 0; } .a4c-curriculum summary::-webkit-details-marker { display: none; } .a4c-curriculum summary .num { font-size: 1.9rem; font-weight: 700; color: rgba(23, 59, 90, .22); } .a4c-curriculum summary .t { font-size: 1.15rem; font-weight: 800; color: var(--wp--preset--color--ink); transition: color .2s; } .a4c-curriculum summary:hover .t { color: var(--wp--preset--color--coral); } .a4c-curriculum summary .cnt { font-size: .85rem; color: var(--wp--preset--color--ink-soft); } .a4c-curriculum summary::after { content: "+"; color: var(--wp--preset--color--coral); font-size: 1.35rem; font-weight: 400; } .a4c-curriculum details[open] summary::after { content: "\2013"; } /* !important: .ibt-kit-4 ul (same specificity, loads after this file) resets padding/list-style to 0, which un-indents this sub-list from the right so it no longer reads as nested. */ .a4c-curriculum ul { list-style: none !important; margin: 0; padding: 0 56px 22px 0 !important; display: grid; gap: 10px; } .a4c-curriculum li { font-size: .9rem; color: var(--wp--preset--color--ink-soft); font-weight: 300; padding-inline-start: 18px; position: relative; } .a4c-curriculum li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; background: var(--wp--preset--color--coral); } @media (max-width: 900px) { .a4c-curriculum summary { grid-template-columns: 40px 1fr auto; } .a4c-curriculum summary .cnt { display: none; } } /* ----------------------------------------------------------- a4c-faq — question accordion (native
), + a4c-faq-more nested "show all" toggle ----------------------------------------------------------- */ .a4c-faq details { border-bottom: 1px solid var(--wp--preset--color--line); } .a4c-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-size: 1.15rem; font-weight: 600; color: var(--wp--preset--color--ink); list-style: none; } .a4c-faq summary::-webkit-details-marker { display: none; } .a4c-faq summary::after { content: "+"; color: var(--wp--preset--color--coral); flex: 0 0 auto; font-size: 1.4rem; font-weight: 400; } .a4c-faq details[open] summary::after { content: "\2013"; } .a4c-faq details p { font-size: 1rem; max-width: 820px; margin: 0 0 22px; } .a4c-faq-more { border-bottom: none !important; text-align: center; margin-top: 12px; } .a4c-faq-more > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 12px 24px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--wp--preset--color--ink); margin: 8px 0 0; transition: border-color .2s, color .2s; } .a4c-faq-more > summary:hover { border-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--coral); } .a4c-faq-more > summary::after { content: "\2193"; font-size: .8rem; } .a4c-faq-more[open] > summary::after { content: "\2191"; } .a4c-faq-more[open] > summary { margin-bottom: 8px; } /* ----------------------------------------------------------- a4c-testimonial — reuses a4c-card ----------------------------------------------------------- */ .a4c-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .a4c-testimonial-grid { grid-template-columns: 1fr; } } .a4c-testimonial { display: flex; flex-direction: column; gap: 16px; } .a4c-testimonial__who { display: flex; gap: 12px; align-items: center; margin-top: auto; } .a4c-testimonial__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .a4c-testimonial__who b { font-size: 1rem; color: var(--wp--preset--color--ink); display: block; } .a4c-testimonial__who span { font-size: .85rem; color: var(--wp--preset--color--ink-soft); } /* ----------------------------------------------------------- a4c-quote ----------------------------------------------------------- */ .a4c-quote { background: var(--wp--preset--color--paper); border-radius: 26px; padding: 36px 40px; margin-top: 40px; } .a4c-quote p { font-size: 1.5rem; line-height: 1.65; color: var(--wp--preset--color--ink); font-weight: 600; } .a4c-quote__attribution { display: block; margin-top: 18px; font-size: 1rem; color: var(--wp--preset--color--ink-soft); } /* ----------------------------------------------------------- a4c-guarantee — shield badge + text ----------------------------------------------------------- */ .a4c-guarantee { display: flex; gap: 28px; align-items: center; background: #fff; border: 2px solid var(--wp--preset--color--coral); border-radius: 26px; padding: 32px 36px; } @media (max-width: 600px) { .a4c-guarantee { flex-direction: column; text-align: center; } } .a4c-guarantee__shield { flex: 0 0 auto; width: 96px; height: 108px; background: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; line-height: 1.4; text-align: center; clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%); } .a4c-guarantee__shield b { font-size: 1.6rem; } /* ----------------------------------------------------------- a4c-cta-band — closing call-to-action row. Defaults to the dark brand-blue background (formerly .final, the ibt-kit-4 closing band); add .a4c-section-coral for the coral variant (formerly .cta-band/.cta-inner). Merges the two components that served this exact role in the old systems. ----------------------------------------------------------- */ .a4c-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: clamp(64px, 8vw, 110px) 0; background-color: var(--wp--preset--color--ink-soft); color: #fff; } /* !important: on the ibt-kit-4 pages, .ibt-kit-4 h2/p (same specificity, loads after this file) sets a dark-on-light color meant for a white background — it ties and wins, leaving this band's heading/paragraph nearly invisible on its dark bg. */ .a4c-cta-band h2, .a4c-cta-band h3 { color: #fff !important; } .a4c-cta-band p { color: rgba(255, 255, 255, .84) !important; } .a4c-cta-band .a4c-eyebrow { color: #fff !important; } .a4c-cta-band__text { flex: 1 1 420px; } .a4c-cta-band .wp-block-buttons { flex: 0 0 auto; } .a4c-cta-band.a4c-section-coral { background-color: var(--wp--preset--color--coral); } .a4c-cta-band.a4c-section-coral .a4c-eyebrow::before { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .25); } /* =========================================================== Components ported from the live (non-draft) part of the site's Global Styles Additional CSS. =========================================================== */ /* ----------------------------------------------------------- a4c-section-header — eyebrow + heading + intro paragraph, two-column on desktop (heading left, intro right). ----------------------------------------------------------- */ .a4c-section-header { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 48px; margin-bottom: 40px; } @media (max-width: 782px) { .a4c-section-header { grid-template-columns: 1fr; } } .a4c-section-header h2 { max-width: 650px; margin-bottom: 0; } .a4c-section-header > p { max-width: 480px; margin-bottom: 4px; color: var(--wp--preset--color--ink-soft); } /* ----------------------------------------------------------- a4c-process-steps — numbered step row, for a4c-section-dark ----------------------------------------------------------- */ .a4c-process-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .2); } @media (max-width: 900px) { .a4c-process-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-process-steps { grid-template-columns: 1fr; } } .a4c-process-steps li { position: relative; min-height: 200px; padding: 28px 20px 18px; border-inline-end: 1px solid rgba(255, 255, 255, .2); } .a4c-process-steps li:last-child { border-inline-end: 0; } .a4c-process-steps li::before { content: ''; position: absolute; top: -5px; inset-inline-start: 20px; width: 9px; height: 9px; border: 2px solid var(--wp--preset--color--ink); border-radius: 50%; background: var(--wp--preset--color--coral); } .a4c-process-steps li > span { color: #f3e6ba; font-size: .68rem; font-weight: 850; } .a4c-process-steps h4 { margin: 50px 0 10px; font-size: 1.1rem; } .a4c-process-steps p { margin: 0; color: rgba(255, 255, 255, .65); font-size: .8rem; line-height: 1.6; } /* ----------------------------------------------------------- journey-section (schools) — never renamed, had no CSS at all; also the only place a4c-process-steps sits on a LIGHT background instead of a4c-section-dark, so its light-on-dark text/border colors need a matching light-context override here. ----------------------------------------------------------- */ .journey-section { padding: clamp(64px, 8vw, 110px) 0; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); } .centred-heading { max-width: 850px; margin: 0 auto 40px; text-align: center; } .centred-heading .a4c-eyebrow { justify-content: center; } .journey-section .a4c-process-steps { border-top-color: var(--wp--preset--color--line); } .journey-section .a4c-process-steps li { border-inline-end-color: var(--wp--preset--color--line); } .journey-section .a4c-process-steps li::before { border-color: var(--wp--preset--color--paper); } .journey-section .a4c-process-steps li > span { color: var(--wp--preset--color--coral); } .journey-section .a4c-process-steps p { color: var(--wp--preset--color--ink-soft); } /* ----------------------------------------------------------- a4c-event-card (+ body) — media/press card ----------------------------------------------------------- */ .a4c-event-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .a4c-event-card-grid { grid-template-columns: 1fr; } } .a4c-event-card { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--wp--preset--color--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(23, 59, 90, .06); } .a4c-event-card figure { height: 215px; margin: 0; overflow: hidden; background: var(--wp--preset--color--sea-pale); } .a4c-event-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .a4c-event-card:hover figure img { transform: scale(1.035); } .a4c-event-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; } .a4c-event-card-date { margin: 18px 0 8px; color: var(--wp--preset--color--ink-soft); font-size: .75rem; font-weight: 700; } .a4c-event-card-body h5 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.27; } .a4c-event-card-body > p:not(.a4c-event-card-date) { margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .82rem; line-height: 1.68; } .a4c-event-card-body > a { margin-top: 16px; color: var(--wp--preset--color--ink); font-size: .78rem; font-weight: 850; text-decoration: none; } .a4c-event-card-body > a:hover { color: var(--wp--preset--color--coral); } /* ----------------------------------------------------------- a4c-evidence-note — credentials block (about-us) ----------------------------------------------------------- */ .a4c-evidence-note { padding: 70px 0; background: var(--wp--preset--color--sea-pale); } .a4c-evidence-note-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .a4c-evidence-note-inner { grid-template-columns: 1fr; } } .a4c-evidence-note p { margin: 0; color: var(--wp--preset--color--ink-soft); line-height: 1.75; } /* ----------------------------------------------------------- a4c-audience-grid — unifies about-us's "core activities" grid and consultation's "who this is for" grid (same anatomy: a bordered card, a small coral label, an h3, a paragraph). ----------------------------------------------------------- */ .a4c-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .a4c-audience-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .a4c-audience-grid { grid-template-columns: 1fr; } } .a4c-audience-grid article { min-height: 260px; padding: 28px; border: 1px solid var(--wp--preset--color--line); border-radius: 22px; background: var(--wp--preset--color--paper); } .a4c-audience-grid article:nth-child(2n) { background: #fff; } .a4c-audience-grid article > span { color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; } .a4c-audience-grid h3 { max-width: 490px; margin: 45px 0 12px; font-size: 1.3rem; line-height: 1.28; } .a4c-audience-grid p { max-width: 590px; margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .8rem; line-height: 1.75; } /* ----------------------------------------------------------- a4c-outcome-list — numbered outcome list, used both on consultation (light) and supervision (works on a4c-section-dark too, since it only sets its own item background). ----------------------------------------------------------- */ .a4c-outcome-list-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .a4c-outcome-list-wrap { grid-template-columns: 1fr; } } .a4c-outcome-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(23, 59, 90, .13); } .a4c-outcome-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; background: var(--wp--preset--color--sea-pale); } .a4c-outcome-list span { color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; } .a4c-outcome-list p { margin: 0; line-height: 1.65; } /* ----------------------------------------------------------- a4c-story-feature — alternating image/copy row (our-stories) ----------------------------------------------------------- */ .a4c-story-feature-grid { display: grid; gap: 36px; } .a4c-story-feature, .a4c-story-feature-grid > article { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(28px, 6vw, 80px); align-items: center; padding-bottom: 36px; border-bottom: 1px solid var(--wp--preset--color--line); } .a4c-story-feature:last-child, .a4c-story-feature-grid > article:last-child { padding-bottom: 0; border-bottom: 0; } .a4c-story-feature figure, .a4c-story-feature-grid > article figure { height: 320px; margin: 0; overflow: hidden; border-radius: 26px 110px 26px 26px; background: var(--wp--preset--color--sea-pale); } .a4c-story-feature:nth-child(even) figure, .a4c-story-feature-grid > article:nth-child(even) figure { order: 2; border-radius: 110px 26px 26px 26px; } .a4c-story-feature img, .a4c-story-feature-grid > article img { display: block; width: 100%; height: 100%; object-fit: cover; } .a4c-story-feature__number { margin: 0 0 18px; color: var(--wp--preset--color--coral); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .a4c-story-feature h3, .a4c-story-feature-grid > article h3 { max-width: 600px; margin: 0 0 12px; } .a4c-story-feature h3 + p, .a4c-story-feature-grid > article h3 + p { max-width: 600px; margin: 0; color: var(--wp--preset--color--ink-soft); } .a4c-story-reflection { max-width: 600px; margin-top: 22px; padding: 18px 20px; border-inline-start: 3px solid var(--wp--preset--color--coral); background: var(--wp--preset--color--paper); } .a4c-story-reflection strong { display: block; margin-bottom: 6px; font-size: .75rem; } .a4c-story-reflection p { margin: 0; color: var(--wp--preset--color--ink-soft); font-size: .8rem; line-height: 1.7; } /* =========================================================== FIX PASS (post-activation visual audit) — gaps found by cross-referencing every live page's real classes against this file. Two categories: (1) the numbered spacing utilities, used sitewide, entirely missing from the first port; (2) foundational .ibt-kit-4 classes (hero/shell/section/ card/button/auth) that were never added to the rename map, so the 5 certificate pages lost their basic layout. =========================================================== */ /* ----------------------------------------------------------- a4c-s1 – a4c-s49 — ported unchanged, verbatim values. Several of these are per-card background/border/padding presets (each card in a wp:columns row got its own auto-generated a4c-sNN from the editor's border panel, rather than sharing one class). As the sole child of a flex-stretched wp-block-column, a block child doesn't inherit that stretched height on its own — so a card with less text renders shorter than its row's tallest card instead of matching it. Fill the stretched parent instead. ----------------------------------------------------------- */ .wp-block-column > [class*="a4c-s"] { height: 100%; box-sizing: border-box; } .a4c-s1 { padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0 } .a4c-s2 { padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60) } .a4c-s3 { padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60) } .a4c-s4 { margin-top:0;margin-bottom:var(--wp--preset--spacing--60) } .a4c-s5 { padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20) } .a4c-s6 { background-color:#eceff3;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50) } .a4c-s7 { margin-top:0px;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60) } .a4c-s8 { margin-top:0px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50) } .a4c-s9 { margin-top:var(--wp--preset--spacing--40) } .a4c-s10 { min-height:800px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40) } .a4c-s11 { padding-right:var(--wp--preset--spacing--60);padding-left:0 } .a4c-s12 { min-height:0px;padding-top:0;padding-bottom:0 } .a4c-s13 { padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20) } .a4c-s14 { min-height:400px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40) } .a4c-s15 { background:linear-gradient(118deg, var(--wp--preset--color--paper) 0 57%, #e7f0f7 57% 100%);padding:clamp(56px,7vw,90px) 0 } .a4c-s16 { margin-top:-60px } .a4c-s17 { background:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 46px rgba(23,59,90,.14);max-width:220px;margin-bottom:16px } .a4c-s18 { padding:24px 0 } .a4c-s19 { background-color:#e4eff7;border-radius:30px;padding:clamp(30px,5vw,54px) } .a4c-s20 { background-color:#f4e3da;border-radius:30px;padding:clamp(30px,5vw,54px) } .a4c-s21 { background-color:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px } .a4c-s22 { background-color:var(--wp--preset--color--sea-pale);border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px } .a4c-s23 { background-color:#f5ded4;border:1px solid var(--wp--preset--color--line);border-radius:24px;padding:28px;min-height:260px } .a4c-s24 { background-color:var(--wp--preset--color--ink);color:#fff;border-radius:28px;padding:40px } .a4c-s25 { padding:0 0 clamp(64px, 8vw, 110px) 0 } .a4c-s26 { background-color:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:20px;padding:24px } .a4c-s27 { padding:26px 0;border-radius:0 } .a4c-s28 { background-color:#e4eff7;border-radius:26px;padding:28px } .a4c-s29 { background-color:#f5f1e8;border-radius:26px;padding:28px } .a4c-s30 { background-color:#f4ded5;border-radius:26px;padding:28px } .a4c-s31 { border-top:1px solid var(--wp--preset--color--line);margin-top:24px } .a4c-s32 { border-bottom:1px solid var(--wp--preset--color--line);padding:14px 0 } .a4c-s33 { background:var(--wp--preset--color--cream);border:1px solid var(--wp--preset--color--line);border-radius:26px;padding:22px } .a4c-s34 { margin-top:30px } .a4c-s35 { padding:clamp(64px, 8vw, 110px) 0 0 0 } .a4c-s36 { background-color:#f3e6ba;border-radius:26px;padding:28px } .a4c-s37 { border-radius:28px;padding:36px;margin-top:12px } .a4c-s38 { background:var(--wp--preset--color--sea-pale);border-radius:30px;padding:clamp(24px,4vw,40px) } .a4c-s39 { background:var(--wp--preset--color--sea-pale);border-radius:30px;padding:clamp(24px,4vw,40px);margin-top:24px } .a4c-s40 { border-radius:26px;padding:28px } .a4c-s41 { margin-top:24px } .a4c-s42 { border-top:1px solid var(--wp--preset--color--line);margin-top:40px } .a4c-s43 { border-bottom:1px solid var(--wp--preset--color--line);padding:16px 0 } .a4c-s44 { padding-top:14px;padding-bottom:14px;padding-left:clamp(24px, 5vw, 78px);padding-right:clamp(24px, 5vw, 78px) } .a4c-s45 { border-top-color:rgba(255,255,255,0.12);border-top-width:1px;padding-top:22px;padding-bottom:22px } .a4c-s46 { padding-top:14px;padding-bottom:14px;padding-left:24px;padding-right:24px } .a4c-s47 { border-top-width:1px;border-top-color:var(--wp--preset--color--line);padding-top:20px;margin-top:36px } .a4c-s48 { margin-top:20px } .a4c-s49 { padding-bottom:60px } /* ----------------------------------------------------------- a4c-badge — base pill (used for post category tags on the 5 story posts; color-by-category is set inline in the post content itself, this just provides the pill shape). ----------------------------------------------------------- */ .a4c-badge { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; } /* Fix: a4c-course-card__price-line-label (the supervision "duration" label) never got a rule — same treatment as the price-line's own . */ .a4c-course-card__price-line-label { display: block; margin: 0 0 4px; color: var(--wp--preset--color--ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .a4c-step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--wp--preset--color--coral-soft); color: var(--wp--preset--color--ink); font-size: .8rem; font-weight: 800; } /* ----------------------------------------------------------- a4c-shell — content-width wrapper for the certificate-page kit (was .shell / .w on the raw markup — both the same role). ----------------------------------------------------------- */ .a4c-shell { max-width: 1280px; margin: 0 auto; padding: 0 48px; } @media (max-width: 782px) { .a4c-shell { padding: 0 24px; } } /* ----------------------------------------------------------- a4c-hero (base) — gradient hero background + top padding, pairs with a4c-hero-grid/-media/-includes above. ----------------------------------------------------------- */ .a4c-hero { background: linear-gradient(160deg, #fff 0%, #F7FAFC 48%, var(--wp--preset--color--paper) 100%); padding: 80px 0 0; overflow: hidden; } .a4c-hero h1 { margin: 20px 0 22px; } /* ----------------------------------------------------------- Our CSS-grid card components sit on top of WordPress's "flow"/ "constrained" block-gap support (the block's saved layout type is still flow or constrained, we've just overridden display to grid via class). That support still adds margin-block-start to every child but the first, meant for vertical stacking — our grids already space children with `gap`, so that extra margin makes every card but the first render shorter/lower than its grid cell. Cancel it for both layout types. IMPORTANT: every class below sets `display: grid` on a WP group/columns block somewhere in this file. Whenever a NEW such class is added, it MUST be added to this list too, or it will silently reproduce the exact same "first item looks bigger" bug. ----------------------------------------------------------- */ .a4c-course-card-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-cards:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-testimonial-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-event-card-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-audience-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-story-feature-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-wf-grid:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-trainer-bio:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-trainer-bio__points:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-evidence-note-inner:is(.is-layout-flow, .is-layout-constrained) > *, .a4c-outcome-list-wrap:is(.is-layout-flow, .is-layout-constrained) > *, .service-card-grid:is(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; } /* ----------------------------------------------------------- story-image / support-grid / support-image / media-proof-section — homepage-only components that were never renamed to a4c-* and so never picked up any CSS (missing width/aspect-ratio constraint is why these images render at their full natural size). ----------------------------------------------------------- */ .story-image { margin: 0; overflow: hidden; border-radius: 30px 140px 30px 30px; box-shadow: 0 20px 48px rgba(23, 59, 90, .1); } html[dir="rtl"] .story-image { border-radius: 140px 30px 30px 30px; } .story-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 782px) { .story-image, html[dir="rtl"] .story-image { border-radius: 26px 90px 26px 26px; } } .support-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(48px, 7vw, 100px); } @media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } } .support-image { order: 2; margin: 0; overflow: hidden; border-radius: 160px 30px 30px 30px; box-shadow: 0 24px 70px rgba(23, 62, 84, .16); } html[dir="rtl"] .support-image { border-radius: 30px 160px 30px 30px; } .support-image img { display: block; width: 100%; min-height: 560px; aspect-ratio: 4 / 4.2; object-fit: cover; } @media (max-width: 900px) { .support-image, html[dir="rtl"] .support-image { order: 0; border-radius: 90px 26px 26px 26px; } .support-image img { min-height: 480px; aspect-ratio: 4 / 3.5; } } .media-proof-section { padding: clamp(64px, 8vw, 94px) 0; background: #173e54; color: #fff; } .media-proof-section h2 { color: #fff; } .media-proof-section > .a4c-shell > div > p { color: rgba(255, 255, 255, .66); } /* ----------------------------------------------------------- Credential-proof row (homepage): logos + Mayada's photo. ----------------------------------------------------------- */ /* core's figure.wp-block-gallery.has-nested-images rule outranks a plain 2-class selector (it has a tag + 2 classes), so align-items never took — !important forces it regardless of load order. */ .a4c-credential-logos.wp-block-gallery { align-items: center !important; } @media (max-width: 782px) { .a4c-credential-columns.wp-block-columns { flex-wrap: wrap; } .a4c-credential-columns > .wp-block-column:last-child { order: -1; } .a4c-credential-logos.wp-block-gallery { flex-direction: column; gap: 20px !important; } .a4c-credential-logos.wp-block-gallery img { width: auto !important; max-width: 220px; max-height: 110px; } } /* ----------------------------------------------------------- a4c-cards — audience-card grid (2/3/4-col modifiers), reuses a4c-card for the individual card look. ----------------------------------------------------------- */ .a4c-cards { display: grid; gap: 20px; } .a4c-cards--c2 { grid-template-columns: repeat(2, 1fr); } .a4c-cards--c3 { grid-template-columns: repeat(3, 1fr); } .a4c-cards--c4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .a4c-cards--c3, .a4c-cards--c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .a4c-cards--c2, .a4c-cards--c3, .a4c-cards--c4 { grid-template-columns: 1fr; } } .a4c-card__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--wp--preset--color--sea-pale); color: var(--wp--preset--color--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; } .a4c-chips { display: flex; gap: 12px; flex-wrap: wrap; } .a4c-chips span { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 14px 20px; font-size: 1rem; } /* ----------------------------------------------------------- a4c-trainer-bio — trainer photo + credentials block ----------------------------------------------------------- */ .a4c-trainer-bio { display: grid; grid-template-columns: 40% 60%; gap: 40px; align-items: center; } @media (max-width: 782px) { .a4c-trainer-bio { grid-template-columns: 1fr; } } .a4c-trainer-bio__photo img { border-radius: 26px; width: 100%; object-fit: cover; } .a4c-trainer-bio__badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0; padding: 0; } .a4c-trainer-bio__badges li { border: 2px solid var(--wp--preset--color--sea); border-radius: 8px; padding: 8px 16px; font-size: .85rem; font-weight: 700; } .a4c-trainer-bio__points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } @media (max-width: 600px) { .a4c-trainer-bio__points { grid-template-columns: 1fr; } } .a4c-trainer-bio__point { border-top: 2px solid var(--wp--preset--color--coral); padding-top: 12px; } .a4c-trainer-bio__point b { display: block; margin-bottom: 4px; } /* ----------------------------------------------------------- a4c-page-hero — consultation/supervision hero section (soft background + padding); pairs with a4c-hero-grid above for the 2-column layout. ----------------------------------------------------------- */ .a4c-page-hero { background: var(--wp--preset--color--paper); padding: 70px 0 90px; } .a4c-page-hero aside { padding: 38px; border-radius: 28px 112px 28px 28px; background: var(--wp--preset--color--navy-contact); color: #fff; } html[dir="rtl"] .a4c-page-hero aside { border-radius: 112px 28px 28px 28px; } .a4c-page-hero aside h3 { margin: 0 0 8px; } .a4c-page-hero aside p { margin: 0; color: #cfe0ec; } .a4c-page-hero aside strong { display: block; margin: 12px 0 28px; font-family: var(--wp--preset--font-family--heading-serif); font-size: 3.4rem; font-weight: 500; line-height: .9; } html[dir="rtl"] .a4c-page-hero aside strong { font-family: var(--wp--preset--font-family--tajawal); } .a4c-page-hero aside dl { display: grid; gap: 1px; margin: 0; background: rgba(255, 255, 255, .15); } .a4c-page-hero aside dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; background: var(--wp--preset--color--navy-contact); } .a4c-page-hero aside dt { color: rgba(255, 255, 255, .6); font-size: .68rem; } .a4c-page-hero aside dd { margin: 0; font-size: .75rem; font-weight: 700; } /* ----------------------------------------------------------- a4c-notice-banner — small icon + text callout (formerly .supervision-notice, single use on the supervision page). ----------------------------------------------------------- */ .a4c-notice-banner { padding: 54px 0; background: var(--wp--preset--color--sea-pale); } .a4c-notice-banner .a4c-shell { display: grid; grid-template-columns: 58px 1fr; gap: 22px; max-width: 1000px; } .a4c-notice-banner .a4c-shell > p:first-child { display: grid; width: 42px; height: 42px; margin: 0; place-items: center; border-radius: 50%; background: var(--wp--preset--color--coral); color: #fff; font-weight: 900; } .a4c-notice-banner h2 { margin: 0 0 9px; font-size: 1.2rem; } .a4c-notice-banner p { margin: 0; color: var(--wp--preset--color--ink-soft); line-height: 1.7; }