/* * LCA Child theme styles: base typography, header, footer and default page layout. * Brand tokens match the LCA Core plugin and the approved mockup. */ :root { /* Brand Identity & Communication Framework V2: Blue establishes. Green grows. Gold highlights. */ --lca-blue: #003a8c; --lca-blue-dark: #002b6b; --lca-blue-deep: #00275f; --lca-green: #009245; --lca-green-tint: #e7f4ec; --lca-gold: #f2b705; --lca-gold-hover: #d9a404; --lca-ink: #333333; --lca-text: #333333; --lca-muted: #595959; --lca-bg: #f5f5f5; --lca-white: #ffffff; --lca-line: #e3e3e3; --lca-font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --lca-container: 1248px; --lca-gutter: clamp(20px, 5vw, 96px); --lca-header-h: 88px; } @media (max-width: 1300px) { :root { --lca-header-h: 68px; } } /* ---------------------------------------------------------------- Base */ html { scroll-padding-top: calc(var(--lca-header-h) + 16px); } body { margin: 0; background: var(--lca-bg); color: var(--lca-ink); font-family: var(--lca-font); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--lca-font); color: var(--lca-ink); font-weight: 700; line-height: 1.2; } a { color: var(--lca-blue); } a:hover, a:active { color: var(--lca-blue-dark); } img { max-width: 100%; height: auto; } :focus-visible { outline: 3px solid var(--lca-gold); outline-offset: 3px; } ::selection { background: var(--lca-gold); color: var(--lca-ink); } .skip-link.screen-reader-text:focus { z-index: 100000; top: 8px; left: 8px; padding: 14px 22px; background: var(--lca-white); color: var(--lca-blue); font-weight: 700; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .2); } /* Elementor: use the brand font everywhere unless a widget sets its own. */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-button { font-family: var(--lca-font); } /* Header buttons (scoped, so they never override the plugin's button variants). */ .lca-header .lca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font-family: var(--lca-font); font-size: 17.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; } .lca-header .lca-btn--primary { background: var(--lca-blue); color: var(--lca-white); } .lca-header .lca-btn--primary:hover, .lca-header .lca-btn--primary:focus { background: var(--lca-blue-dark); color: var(--lca-white); } /* Hello's reset paints every focused/hovered button pink (#c36): undo that for LCA controls. */ .lca-subtoggle:hover, .lca-subtoggle:focus { background: transparent; color: inherit; } .lca-iconbtn:hover, .lca-iconbtn:focus { background: var(--lca-white); color: var(--lca-blue); } .lca-iconbtn--primary:hover, .lca-iconbtn--primary:focus { background: var(--lca-blue-dark); color: var(--lca-white); } .lca-footer button:hover, .lca-footer button:focus { background-color: var(--lca-gold); color: var(--lca-ink); } /* ---------------------------------------------------------------- Header */ .lca-header { position: sticky; top: 0; z-index: 900; background: var(--lca-white); border-bottom: 1px solid #e3e3e3; } .admin-bar .lca-header { top: 32px; } @media (max-width: 782px) { .admin-bar .lca-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .lca-header { top: 0; } } .lca-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: calc(var(--lca-container) + 2 * var(--lca-gutter)); height: var(--lca-header-h); margin: 0 auto; padding: 0 var(--lca-gutter); box-sizing: border-box; } .lca-header__logo, .lca-header .custom-logo-link { display: flex; align-items: center; flex-shrink: 0; } .lca-header__logo img, .lca-header .custom-logo { width: auto; height: 58px; display: block; } @media (max-width: 1300px) { .lca-header__logo img, .lca-header .custom-logo { height: 44px; } } .lca-header__panel { display: flex; align-items: center; gap: 24px; } .lca-header__actions { display: flex; align-items: center; gap: 12px; } .lca-header .lca-header__cta--panel { display: none; } .lca-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #dadada; background: var(--lca-white); color: var(--lca-ink); cursor: pointer; } .lca-iconbtn:hover { border-color: var(--lca-blue); color: var(--lca-blue); } .lca-iconbtn--primary { background: var(--lca-blue); border-color: var(--lca-blue); color: var(--lca-white); } .lca-iconbtn--primary:hover { background: var(--lca-blue-dark); color: var(--lca-white); } .lca-menu-toggle { display: none; } .lca-menu-toggle__close { display: none; } /* Desktop menu */ .lca-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .lca-menu > li { position: relative; display: flex; align-items: center; } .lca-menu > li > a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; font-size: 17px; font-weight: 600; color: var(--lca-ink); text-decoration: none; border-radius: 8px; } .lca-menu > li > a:hover { color: var(--lca-blue); } .lca-menu > .current-menu-item > a, .lca-menu > .current-menu-ancestor > a, .lca-menu > .current_page_parent > a { color: var(--lca-blue); box-shadow: inset 0 -2px 0 var(--lca-gold); border-radius: 0; } .lca-subtoggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -8px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--lca-ink); cursor: pointer; } .lca-subtoggle svg { transition: transform .15s; } .lca-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); } .lca-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 300px; margin: 0; padding: 10px; list-style: none; background: var(--lca-white); border: 1px solid var(--lca-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 20, 60, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; } .lca-menu li:hover > .sub-menu, .lca-menu li:focus-within > .sub-menu, .lca-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .lca-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--lca-ink); text-decoration: none; } .lca-menu .sub-menu a:hover, .lca-menu .sub-menu .current-menu-item > a { background: var(--lca-green-tint); color: var(--lca-blue); } /* Search drawer */ .lca-search { border-top: 1px solid #e3e3e3; background: var(--lca-white); } .lca-search__form { display: flex; gap: 12px; max-width: calc(var(--lca-container) + 2 * var(--lca-gutter)); margin: 0 auto; padding: 16px var(--lca-gutter); box-sizing: border-box; } .lca-search__form input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid var(--lca-border); border-radius: 999px; font-family: var(--lca-font); font-size: 17.5px; color: var(--lca-ink); background: var(--lca-bg); } /* Mobile / tablet: full-screen menu */ @media (max-width: 1300px) { .lca-menu-toggle { display: inline-flex; } .lca-header__actions .lca-header__cta { display: none; } .lca-header__panel { position: fixed; inset: var(--lca-header-h) 0 0 0; z-index: 899; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--lca-gutter) 32px; background: var(--lca-blue); overflow-y: auto; } .admin-bar .lca-header__panel { top: calc(var(--lca-header-h) + 46px); } .lca-nav-open .lca-header__panel { display: flex; } .lca-nav-open { overflow: hidden; } .lca-nav-open .lca-menu-toggle__open { display: none; } .lca-nav-open .lca-menu-toggle__close { display: block; } .lca-header .lca-header__cta--panel { display: inline-flex; margin-top: 24px; min-height: 54px; background: var(--lca-gold); color: var(--lca-ink); } .lca-header .lca-header__cta--panel:hover, .lca-header .lca-header__cta--panel:focus { background: var(--lca-gold-hover); color: var(--lca-ink); } .lca-menu { flex-direction: column; align-items: stretch; gap: 0; } .lca-menu > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .14); } .lca-menu > li > a { flex: 1 1 auto; min-height: 60px; padding: 0; font-size: 23px; font-weight: 500; color: var(--lca-white); } .lca-menu > li > a:hover { color: var(--lca-white); text-decoration: underline; } .lca-menu > .current-menu-item > a, .lca-menu > .current-menu-ancestor > a, .lca-menu > .current_page_parent > a { color: var(--lca-white); box-shadow: none; font-weight: 700; } .lca-subtoggle, .lca-subtoggle:hover, .lca-subtoggle:focus { width: 48px; height: 48px; margin: 0; color: var(--lca-gold); } .lca-menu .sub-menu { position: static; display: none; flex-basis: 100%; min-width: 0; padding: 0 0 14px; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; } .lca-menu li:hover > .sub-menu, .lca-menu li:focus-within > .sub-menu { display: none; } .lca-menu li.is-open > .sub-menu { display: block; } .lca-menu .sub-menu a { padding: 10px 0 10px 16px; color: #e6eef8; font-size: 17.5px; } .lca-menu .sub-menu a:hover, .lca-menu .sub-menu .current-menu-item > a { background: transparent; color: var(--lca-white); text-decoration: underline; } .lca-header__panel a:focus-visible, .lca-header__panel button:focus-visible { outline-color: var(--lca-gold); } } @media (max-width: 480px) { .lca-search-toggle { border: 0; } } /* ---------------------------------------------------------------- Footer */ .lca-footer { background: var(--lca-blue-deep); color: #c8d6ec; font-size: 17.5px; } .lca-footer__inner { max-width: calc(var(--lca-container) + 2 * var(--lca-gutter)); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--lca-gutter) 32px; box-sizing: border-box; } .lca-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 40px; } @media (max-width: 1300px) { .lca-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .lca-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .lca-footer a { color: #c8d6ec; text-decoration: none; } .lca-footer a:hover { color: var(--lca-white); text-decoration: underline; } .lca-footer :focus-visible { outline-color: var(--lca-gold); } .lca-footer__about p { margin: 18px 0 20px; line-height: 1.6; max-width: 380px; } .lca-footer__brand { display: inline-flex; align-items: center; gap: 14px; } .lca-footer__brand:hover { text-decoration: none !important; } .lca-footer__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: var(--lca-white); } .lca-footer__icon img { width: 50px; height: auto; } .lca-footer__wordmark { display: flex; flex-direction: column; font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--lca-white); } .lca-footer__wordmark span { display: inline; color: var(--lca-gold); } .lca-footer__wordmark small { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #c8d6ec; } .lca-footer__heading { margin: 0 0 16px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lca-white); } .lca-footer__subheading { margin: 24px 0 10px; font-size: 16.5px; font-weight: 700; color: var(--lca-white); } .lca-footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; line-height: 1.45; } .lca-footer__social { margin-top: 4px; } .lca-footer__social a { border-color: #2d5294; color: var(--lca-white); } .lca-footer__social a:hover { background: var(--lca-white); color: var(--lca-blue); } .lca-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #1d4180; font-size: 16px; } .lca-footer__bottom p { margin: 0; } .lca-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; } .lca-footer .lca-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .lca-footer .lca-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #2d5294; } /* ---------------------------------------------------------------- Default pages (not built with Elementor) */ body:not(.elementor-page) .site-main { max-width: calc(840px + 2 * var(--lca-gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--lca-gutter); box-sizing: border-box; } body:not(.elementor-page).page .site-main:has(.lca-team, .lca-partners) { max-width: calc(var(--lca-container) + 2 * var(--lca-gutter)); } body:not(.elementor-page) .page-header .entry-title { margin: 0 0 32px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.02em; } body:not(.elementor-page) .page-content { color: var(--lca-text); } body:not(.elementor-page) .page-content h2 { margin: 1.6em 0 .5em; font-size: 28px; } /* Elementor pages on the default template: let sections run full width. */ body.elementor-page .site-main { max-width: none; padding: 0; margin: 0; } /* Search results (Hello's archive template) */ .search .site-main article { padding: 20px 0; border-bottom: 1px solid var(--lca-line); } .search .site-main .entry-title a { color: var(--lca-ink); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .lca-menu .sub-menu, .lca-subtoggle svg, .lca-btn { transition: none; } } /* ---------------------------------------------------------------- Brand colour roles (Brand Identity V2) */ h1, h2, h3, h4, h5, h6 { color: var(--lca-blue); } .lca-hero__title, .lca-cta h2, .lca-footer h2 { color: var(--lca-white); } .lca-menu > .current-menu-item > a, .lca-menu > .current-menu-ancestor > a, .lca-menu > .current_page_parent > a { box-shadow: inset 0 -3px 0 var(--lca-gold); } @media (max-width: 1300px) { .lca-header .lca-header__cta--panel, .lca-header .lca-header__cta--panel:hover, .lca-header .lca-header__cta--panel:focus { color: var(--lca-blue); } .lca-header .lca-header__cta--panel:hover, .lca-header .lca-header__cta--panel:focus { background: var(--lca-gold-hover); } .lca-menu > .current-menu-item > a, .lca-menu > .current-menu-ancestor > a, .lca-menu > .current_page_parent > a { box-shadow: none; } } .lca-footer button:hover, .lca-footer button:focus { color: var(--lca-blue); } .lca-footer__wordmark span { color: var(--lca-gold); } /* ---------------------------------------------------------------- Keep Elementor's site-wide button style out of the header (Elementor Site Settings > Buttons applies to every