/* Theme Name: Kadence Echo EMF .org Theme URI: https://echo-factory.com/ Template: kadence Author: Echo-Factory Author URI: https://echo-factory.com/ Description: Echo Motion Fitness Foundation (echomotionfitness.org) child theme for Kadence. By Echo-Factory. Version: 2.1.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================== Tokens. Colors come from the Kadence global palette: 1 blue, 2 mint, 3 black, 4 dark blue (navy), 5 black, 6 line, 7 gray panel, 8 light mint, 9 white. Pages are Kadence rows (.emf-sec) of columns, max 1300px wide. ========================================================================== */ :root { --emf-gap: clamp(14px, 1.6vw, 24px); --emf-r: 18px; --emf-r-sm: 12px; --emf-gutter: clamp(16px, 4vw, 70px); --emf-section: clamp(56px, 7vw, 104px); --emf-pad: clamp(24px, 3.4vw, 50px); --emf-focus: var(--global-palette4); --global-palette-btn-out: var(--global-palette4); --global-palette-btn-out-hover: var(--global-palette1); } @media (max-width: 767px) { :root { --emf-gap: 12px; --emf-gutter: 20px; --emf-section: 32px; --emf-pad: 16px; } } /* Space Mono Bold is uploaded as one file; declare it at 700 too so bold headings aren't faux-bolded. */ @font-face { font-family: "Space Mono Bold"; font-style: normal; font-weight: 700; font-display: swap; src: url("/wp-content/uploads/2025/09/SpaceMono-Bold.woff") format("woff"); } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-synthesis: none; } /* ========================================================================== Type: Space Mono headings, Work Sans body 16/26; Flood brush accent words. ========================================================================== */ .emf-brush { font-family: "Flood Std Regular", "Flood Std", "Brush Script MT", cursive; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.15em; line-height: .8; } .emf-lede { font-size: 20px; line-height: 32px; font-weight: 400; max-width: 62ch; } .emf-caption { font-size: 16px; line-height: 26px; color: var(--global-palette5); margin-top: .5rem; } .emf-tbd { display: inline-block; border: 1.5px dashed currentColor; border-radius: 6px; padding: 0 6px; font-size: .8em; opacity: .85; } @media (max-width: 767px) { .emf-lede { font-size: 18px; line-height: 28px; } } /* Links: inline links dark blue + underlined (mint on dark). */ .entry-content :is(p, li, dd, td) a:not([class]) { color: var(--global-palette4); text-decoration: underline; text-underline-offset: 3px; } .emf-on-dark :is(p, li) a:not([class]) { color: var(--global-palette2); } /* Focus: 3px ring, 2px offset; dark blue, mint on dark. */ :is(.wp-block-button__link, .kb-button, .kb-nav-link-content, .emf-acc summary, a):focus-visible { outline: 3px solid var(--emf-focus) !important; outline-offset: 2px !important; } .emf-on-dark :focus-visible { --emf-focus: var(--global-palette2); } /* ========================================================================== Buttons: 44px pills with Space Mono labels. Primary mint on white, dark blue on gray or light mint; outline for secondary. ========================================================================== */ .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 14px 28px; border-radius: 30px !important; font-family: var(--global-heading-font-family); font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .wp-block-button.is-style-outline > .wp-block-button__link { border-width: 2px; padding: 12px 22px; } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { border-color: currentColor; } .wp-block-kadence-column .wp-block-button > .wp-block-button__link:not(.has-text-color) { text-decoration: none; } .emf-final-call .wp-block-button__link { font-size: 13px !important; } /* On dark blue (Kadence column/row link colors also reach button labels, so buttons set their own). */ .emf-on-dark .wp-block-button__link { --global-palette-btn-out: var(--global-palette9); --global-palette-btn-out-hover: var(--global-palette2); } .emf-on-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color) { color: var(--global-palette4) !important; } .emf-on-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color):hover { color: var(--global-palette2) !important; } .emf-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--global-palette2) !important; border-color: var(--global-palette2) !important; } .emf-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover { background: var(--global-palette2) !important; color: var(--global-palette4) !important; } @media (max-width: 767px) { .entry-content .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; } .entry-content .wp-block-buttons > .wp-block-button { width: 100%; margin: 0; } .entry-content .wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; } } /* ========================================================================== Sections (.emf-sec rows): contained, or full-width gray bands (.emf-band, row bgColor palette7). .emf-first sits under the header, .emf-tight follows the row above closely, .emf-last ends the page. ========================================================================== */ .entry-content > .kb-row-layout-wrap.emf-sec, .kb-row-layout-wrap.emf-sec { width: min(1300px, calc(100% - 2 * var(--emf-gutter))); margin: var(--emf-section) auto 0 !important; } .kb-row-layout-wrap.emf-sec.emf-tight { margin-top: var(--emf-gap) !important; } .kb-row-layout-wrap.emf-sec.emf-first { margin-top: 24px !important; } .kb-row-layout-wrap.emf-sec.emf-last { margin-bottom: var(--emf-section) !important; } .kb-row-layout-wrap.emf-sec > .kt-row-column-wrap { padding: 0 !important; column-gap: var(--emf-gap) !important; row-gap: var(--emf-gap) !important; max-width: none !important; } .emf-sec > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col { padding: 0; } @media (min-width: 768px) { .kb-row-layout-wrap.emf-sec.emf-first { margin-top: 40px !important; } } .emf-sec h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; } h1 { text-wrap: balance; } .emf-sec h2 { font-size: 40px; line-height: 48px; letter-spacing: 0; text-wrap: balance; max-width: 24ch; } .emf-sec h3 { font-size: 24px; line-height: 32px; letter-spacing: 0; } @media (max-width: 767px) { .emf-sec h2 { font-size: 26px; line-height: 34px; } .emf-sec h3 { font-size: 20px; line-height: 28px; } } /* Section heading row: title left, intro right. */ .emf-head > .kt-row-column-wrap { align-items: end; } .emf-head h2 { margin: 0; } .emf-head p { color: var(--global-palette3); margin: 0; max-width: 52ch; } .kb-row-layout-wrap.emf-sec:not(.emf-head) > .kt-row-column-wrap { align-items: stretch !important; } .emf-sec > .kt-row-column-wrap > .wp-block-kadence-column { align-self: stretch; } /* Gray bands. */ .kb-row-layout-wrap.emf-sec.emf-band { width: 100%; max-width: none; margin: var(--emf-section) 0 0 !important; padding: var(--emf-section) var(--emf-gutter) !important; } .kb-row-layout-wrap.emf-sec.emf-band > .kt-row-column-wrap { max-width: 1300px !important; margin: 0 auto; } .kb-row-layout-wrap.emf-sec.emf-band--head { padding-bottom: 24px !important; } .kb-row-layout-wrap.emf-sec.emf-band--cont { margin-top: 0 !important; padding-top: 0 !important; } .kb-row-layout-wrap.emf-sec.emf-band + .kb-row-layout-wrap.emf-sec:not(.emf-band) { margin-top: var(--emf-section) !important; } .kb-row-layout-wrap.emf-sec.emf-band.emf-last { margin-bottom: 0 !important; } /* Row boxes: the whole section is one rounded box (the dark-blue CTA at the end of pages). */ .kb-row-layout-wrap.emf-rowbox { border-radius: var(--emf-r); overflow: hidden; } .kb-row-layout-wrap.emf-rowbox > .kt-row-column-wrap { padding: clamp(28px, 5vw, 80px) !important; align-items: center; } .kb-row-layout-wrap.emf-cta { border-radius: 18px; } .emf-cta h2 { max-width: none; } @media (max-width: 767px) { .kb-row-layout-wrap.emf-cta > .kt-row-column-wrap { padding: 32px 24px !important; } } /* Body large for section intros. */ .emf-head p, .emf-cta p, .wp-block-kadence-column.emf-box--white:not(.emf-sm) h2 + p, .emf-split-panel .emf-open h2 + p { font-size: 20px; line-height: 32px; } @media (max-width: 767px) { .emf-head p, .emf-cta p, .wp-block-kadence-column.emf-box--white:not(.emf-sm) h2 + p, .emf-split-panel .emf-open h2 + p { font-size: 18px; line-height: 28px; } } /* Photo | text rows (home hero): 59/41 split, tall photo. */ @media (min-width: 768px) { .kb-row-layout-wrap.emf-split-panel > .kt-row-column-wrap { grid-template-columns: minmax(0, 59fr) minmax(0, 41fr) !important; } .kb-row-layout-wrap.emf-split-panel .wp-block-kadence-column.emf-box--img > .kt-inside-inner-col, .kb-row-layout-wrap.emf-split-panel .wp-block-kadence-column.emf-box--img img { min-height: clamp(380px, 38vw, 560px); } } /* Hidden rows (.emf-hidden): kept in the editor, not shown. The repeated class wins over layout rules that set display. */ .emf-hidden.emf-hidden.emf-hidden { display: none !important; } /* ========================================================================== Columns (.emf-box): rounded boxes; tone (white, light mint, gray) is set per column in the editor. .emf-open = no box, text on the section background. .emf-top aligns content to the top, .emf-sm is a smaller card. ========================================================================== */ .wp-block-kadence-column.emf-box > .kt-inside-inner-col { border-radius: var(--emf-r); padding: var(--emf-pad) !important; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .wp-block-kadence-column.emf-box > .kt-inside-inner-col > * { margin-top: 0 !important; margin-bottom: 0 !important; } .wp-block-kadence-column.emf-box.emf-top > .kt-inside-inner-col { justify-content: flex-start; } .wp-block-kadence-column.emf-box.emf-sm > .kt-inside-inner-col { border-radius: var(--emf-r-sm); padding: 24px !important; gap: 10px; } .wp-block-kadence-column.emf-box--white > .kt-inside-inner-col { border-radius: var(--emf-r); } .wp-block-kadence-column.emf-box.emf-on-dark h3 { color: var(--global-palette2); } .emf-on-dark .emf-brush { color: var(--global-palette2) !important; } :is(.wp-block-kadence-column.emf-box, .wp-block-kadence-column.emf-box--card) h3 { font-size: 20px !important; line-height: 28px !important; } @media (max-width: 767px) { .wp-block-kadence-column.emf-box > .kt-inside-inner-col { gap: 12px; } .wp-block-kadence-column.emf-box.emf-sm > .kt-inside-inner-col { padding: 16px !important; } :is(.wp-block-kadence-column.emf-box, .wp-block-kadence-column.emf-box--card) h3 { font-size: 18px !important; line-height: 26px !important; } } .wp-block-kadence-column.emf-open > .kt-inside-inner-col { padding: 0 !important; display: flex; flex-direction: column; justify-content: center; gap: 16px; height: 100%; } .wp-block-kadence-column.emf-open.emf-top > .kt-inside-inner-col { justify-content: flex-start; } .wp-block-kadence-column.emf-open > .kt-inside-inner-col > * { margin-top: 0 !important; margin-bottom: 0 !important; } .wp-block-kadence-column.emf-open h2 { margin-bottom: 4px !important; } @media (min-width: 768px) { .kb-row-layout-wrap.emf-sec:has(> .kt-row-column-wrap > .emf-open) > .kt-row-column-wrap { column-gap: clamp(24px, 6vw, 92px) !important; } } .wp-block-kadence-column.emf-box--white h2 { max-width: 14ch; } /* Buttons by column tone: dark blue on light mint / card / gray band; mint on white cards. */ :is(.wp-block-kadence-column.emf-box--mintsoft, .wp-block-kadence-column.emf-box--card) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background: var(--global-palette4) !important; color: var(--global-palette9) !important; } :is(.wp-block-kadence-column.emf-box--mintsoft, .wp-block-kadence-column.emf-box--card) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover { background: var(--global-palette1) !important; } :is(.emf-band, .wp-block-kadence-column.emf-box--white) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background: var(--global-palette4) !important; color: var(--global-palette9) !important; } .emf-band .wp-block-kadence-column.emf-box--white .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background: var(--global-palette2) !important; color: var(--global-palette4) !important; } .wp-block-kadence-column.emf-card-white .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) { background: var(--global-palette2) !important; color: var(--global-palette4) !important; } .wp-block-kadence-column.emf-card-white .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover { background: var(--global-palette4) !important; color: var(--global-palette9) !important; } .wp-block-kadence-column.emf-card-white .wp-block-buttons { margin-top: auto !important; padding-top: 16px; } .wp-block-kadence-column.emf-card-white > .kt-inside-inner-col { justify-content: flex-start; } /* Image columns: the photo fills the box. */ .wp-block-kadence-column.emf-box--img > .kt-inside-inner-col { padding: 0 !important; overflow: hidden; min-height: 300px; } .wp-block-kadence-column.emf-box--img figure, .wp-block-kadence-column.emf-box--img .wp-block-image { margin: 0 !important; height: 100%; } .wp-block-kadence-column.emf-box--img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; min-height: 300px; } @media (max-width: 1024px) { .wp-block-kadence-column.emf-box--img > .kt-inside-inner-col, .wp-block-kadence-column.emf-box--img img { min-height: 240px; } } /* Cards with a photo on top (.emf-box--card); .emf-card-inset keeps a margin around the photo. */ .wp-block-kadence-column.emf-box--card > .kt-inside-inner-col { padding: 0 !important; overflow: hidden; justify-content: flex-start; gap: 0; } .wp-block-kadence-column.emf-box--card figure { margin: 0 !important; } .wp-block-kadence-column.emf-box--card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0 !important; } .wp-block-kadence-column.emf-box--card > .kt-inside-inner-col > :not(figure) { padding: 0 22px; margin-top: 12px !important; } .wp-block-kadence-column.emf-box--card > .kt-inside-inner-col > :last-child { padding-bottom: 22px; } .wp-block-kadence-column.emf-card-inset > .kt-inside-inner-col { padding: 16px !important; gap: 0; } .wp-block-kadence-column.emf-card-inset figure img { border-radius: 12px !important; aspect-ratio: 4 / 3; } .wp-block-kadence-column.emf-card-inset > .kt-inside-inner-col > :not(figure) { padding: 0 !important; margin-top: 16px !important; } /* Placeholder photo slot until real photos arrive. */ .emf-photo-tbd { display: grid; place-items: center; width: 100%; background: var(--global-palette8) repeating-linear-gradient(135deg, transparent 0 14px, rgba(12, 35, 63, .04) 14px 28px); border-radius: var(--emf-r-sm); } .wp-block-kadence-column.emf-box--card > .kt-inside-inner-col > .emf-photo-tbd { padding: 0 !important; margin-top: 0 !important; border-radius: 0; } .emf-card-inset .emf-photo-tbd { border-radius: 12px; } .emf-fullphoto .emf-photo-tbd { border-radius: 0; min-height: 260px; } .emf-band .emf-photo-tbd, .emf-band.emf-fullphoto .emf-box--img > .kt-inside-inner-col { background: var(--global-palette9) !important; } /* Board photos: square, inset like the other cards. */ .emf-board-photo { margin: 0 !important; } .emf-board-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; border-radius: 12px; display: block; } /* Icon tiles (46px, radius 12, 26px line icon). Light mint tile; on light-mint cards a dark-blue tile with a mint icon. */ .emf-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--global-palette8) center / 26px no-repeat; margin: 0 !important; font-size: 0; } .emf-on-dark .emf-ic { background-color: var(--global-palette8); } .emf-ic--person { --emf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%230C233F' stroke-width='2'%3E%3Ccircle cx='13' cy='7' r='3.5'/%3E%3Cpath d='M5 22c0-4.4 3.6-8 8-8s8 3.6 8 8' stroke-linecap='round'/%3E%3C/svg%3E"); } .emf-ic--target { --emf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%230C233F' stroke-width='2'%3E%3Ccircle cx='13' cy='13' r='9'/%3E%3Ccircle cx='13' cy='13' r='4.5'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%230C233F'/%3E%3C/svg%3E"); } .emf-ic--heart { --emf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%230C233F' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 21s-8-4.6-8-10.2A4.3 4.3 0 0 1 13 8a4.3 4.3 0 0 1 8 2.8C21 16.4 13 21 13 21z'/%3E%3C/svg%3E"); } .emf-ic:is(.emf-ic--person, .emf-ic--target, .emf-ic--heart) { background-image: var(--emf-ic); } .wp-block-kadence-column.emf-box--mintsoft .emf-ic { position: relative; background-color: var(--global-palette4) !important; background-image: none !important; } .wp-block-kadence-column.emf-box--mintsoft .emf-ic::after { content: ""; position: absolute; inset: 10px; background: var(--global-palette2); -webkit-mask: var(--emf-ic) center / 26px no-repeat; mask: var(--emf-ic) center / 26px no-repeat; } /* ========================================================================== Donation cards (home #donate): the Zeffy plugin's button styled as a site pill button. ========================================================================== */ .emf-donate-cards .kt-inside-inner-col { justify-content: flex-start; } .emf-donate-cards .zeffy-button-wrapper { text-align: left; margin: auto 0 0 !important; padding-top: 18px; } .emf-donate-cards .zeffy-donate-btn { background: var(--global-palette4) !important; color: var(--global-palette9) !important; border-radius: 999px !important; min-height: 48px; padding: 12px 24px !important; font-family: var(--global-heading-font-family) !important; text-transform: uppercase; font-size: 13px !important; letter-spacing: .08em; line-height: 1.2 !important; font-weight: 700; } .emf-donate-cards .emf-on-dark .zeffy-donate-btn { background: var(--global-palette2) !important; color: var(--global-palette4) !important; } .emf-donate-cards .zeffy-donate-btn:hover { filter: brightness(1.12); } @media (max-width: 767px) { .emf-donate-cards a.wp-block-button__link, .emf-donate-cards .wp-block-button { width: 100%; justify-content: center; text-align: center; } } /* ========================================================================== FAQs: the accordion in the home page FAQ section ([emf_faqs]). ========================================================================== */ .emf-acc details { border: 0; border-bottom: 1px solid var(--global-palette6); border-radius: 0; margin: 0; background: transparent; } .emf-acc summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 20px 0; list-style: none; font-family: var(--global-body-font-family); font-weight: 600; font-size: 16px; line-height: 26px; color: var(--global-palette4); } .emf-acc summary::-webkit-details-marker { display: none; } .emf-acc summary::after { content: "+"; flex: none; font-family: var(--global-heading-font-family); font-size: 20px; line-height: 28px; } .emf-acc details[open] summary::after { content: "–"; } .emf-acc details[open] > summary { padding-bottom: 12px; } .emf-acc summary:focus-visible { border-radius: 4px; } .emf-acc-body { padding: 0 0 20px; } .emf-acc-body > :last-child { margin-bottom: 0; } .emf-on-dark .emf-acc summary { color: var(--global-palette9); } /* ========================================================================== Legal pages (Privacy, Terms, Accessibility): readable column, contents box. ========================================================================== */ .emf-legal-page .kt-inside-inner-col { max-width: 760px; } .emf-legal-page .emf-open > .kt-inside-inner-col { max-width: 760px; gap: 12px; } .emf-legal-page h2 { font-size: 24px; line-height: 32px; margin-top: 24px !important; } .emf-legal-page ul { padding-left: 1.2em; } .emf-toc { columns: 2; font-size: 16px; } .emf-box--mintsoft .emf-toc { columns: 1; } /* ========================================================================== Header and footer (Figma "Nav — .org" 2275:7569, "Footer — .org" 2275:7600). Both are blocks edited in wp-admin: - Header: Kadence header "Header (.org)": desktop row, tablet/phone row, full-width off-canvas menu. - Footer: Footer Builder. Top row = CTA widget; middle = brand + cards widgets; bottom = Footer HTML (©) + legal menu widget. The emfo-* classes are set on the groups/buttons in those blocks. Navy (palette4) with mint (palette2) accents. ========================================================================== */ :is(header.wp-block-kadence-header, .wp-block-kadence-off-canvas, .site-footer) { --emf-focus: #fff; } :is(.emfo-logo, .emfo-cta, .emfo-cta-copy, .emfo-brand, .emfo-cards, .emfo-card, .emfo-legal-nav) > .wp-block-group__inner-container { display: contents; } /* Logo group: wordmark image + FOUNDATION pill centered under it. Sizes per place follow the Figma frames. */ .emfo-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; margin: 0; } .emfo-logo .emfo-wordmark { margin: 0; max-width: 100%; line-height: 0; } .emfo-logo .emfo-wordmark a { display: block; } .emfo-logo .emfo-wordmark img { display: block; height: auto; max-width: 100%; } .emfo-pill { margin: 0; background: var(--global-palette2); color: var(--global-palette4); border-radius: 20px; padding: 6px 21.5px; font-family: var(--global-heading-font-family); font-weight: 700; font-size: 12.5px; line-height: normal; letter-spacing: 3.6px; text-transform: uppercase; } .wp-block-kadence-header-desktop .emfo-logo { gap: 10px; } .wp-block-kadence-header-desktop .emfo-pill { font-size: 13.8px; letter-spacing: 4px; padding: 6.6px 23.7px; border-radius: 22px; } /* Header bar: 4px mint rule; Board / FAQ links and the Donate button on the right. */ header.wp-block-kadence-header { position: relative; z-index: 1000; border-bottom: 4px solid var(--global-palette2); } header.wp-block-kadence-header .wp-block-kadence-header-desktop .kadence-header-row-inner { padding: 24px clamp(20px, 4.9vw, 70px); } header.wp-block-kadence-header .wp-block-kadence-header-tablet .kadence-header-row-inner { padding: 16px 20px; min-height: 0; } header.wp-block-kadence-header .wp-block-kadence-header-column-tablet-left { min-width: 0; } :is(header.wp-block-kadence-header, .wp-block-kadence-off-canvas) .wp-block-kadence-navigation .kb-nav-link-content { font-family: var(--global-heading-font-family) !important; font-size: 13px !important; font-weight: 700; line-height: 20px !important; letter-spacing: .06em !important; text-transform: uppercase; color: #fff !important; } :is(header.wp-block-kadence-header, .wp-block-kadence-off-canvas) .wp-block-kadence-navigation .kb-nav-link-content:hover { color: var(--global-palette2) !important; } header.wp-block-kadence-header .wp-block-kadence-navigation .menu-container > ul.kb-navigation { gap: 32px; } header.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-link-content { padding: 12px 0 !important; } .wp-block-kadence-header-desktop .emfo-donate { margin-left: 44px; } :is(header.wp-block-kadence-header, .wp-block-kadence-off-canvas) .emfo-donate .kb-button { min-height: 44px; padding: 14px 28px !important; border-radius: 30px !important; border: 0 !important; box-shadow: none !important; white-space: nowrap; justify-content: center; font-family: var(--global-heading-font-family) !important; font-size: 13px !important; font-weight: 700; line-height: 16px !important; letter-spacing: .06em !important; text-transform: uppercase; } header.wp-block-kadence-header button.wp-block-kadence-off-canvas-trigger { width: 44px; height: 44px; padding: 10px; margin-right: -10px; } header.wp-block-kadence-header button.wp-block-kadence-off-canvas-trigger svg { width: 24px; height: 24px; } /* Phone menu (off-canvas): logo + close on the bar, then links with dividers and a full-width Donate button. */ .wp-block-kadence-off-canvas .kb-off-canvas-inner { padding: 16px 20px 32px; } .wp-block-kadence-off-canvas .kb-off-canvas-inner > .emfo-logo { align-self: flex-start; margin-bottom: 24px; } .wp-block-kadence-off-canvas .kb-off-canvas-close { top: 27px; right: 10px; width: 44px; height: 44px; padding: 10px; background: none; } .wp-block-kadence-off-canvas .kb-off-canvas-close svg { width: 24px; height: 24px; } .wp-block-kadence-off-canvas .wp-block-kadence-navigation .menu-container > ul.kb-navigation > li { border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0; } .wp-block-kadence-off-canvas .wp-block-kadence-navigation .kb-nav-link-content { padding: 20px 0 !important; } .wp-block-kadence-off-canvas .emfo-donate { display: flex; width: 100%; margin-top: 32px; } .wp-block-kadence-off-canvas .emfo-donate .kb-button { width: 100%; margin: 0; } /* Footer: navy; the three rows are separated by thin rules. */ .site-footer, .site-footer .site-footer-row-container-inner { background: var(--global-palette4); color: #fff; } .site-footer .site-container { max-width: none; padding-left: clamp(20px, 4.9vw, 70px); padding-right: clamp(20px, 4.9vw, 70px); } .site-footer .site-top-footer-inner-wrap { padding: 80px 0 48px; } .site-footer .site-middle-footer-inner-wrap { padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, .18); gap: 48px; align-items: start; } .site-footer .site-bottom-footer-inner-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 48px 0 40px; border-top: 1px solid rgba(255, 255, 255, .18); } .site-footer .widget { margin: 0; } .site-footer .footer-widget1, .site-footer .footer-widget2, .site-footer .footer-widget3 { width: 100%; text-align: left; } .site-footer p { margin: 0; } .site-footer .wp-block-buttons { margin: 0; } .site-footer .wp-block-button__link { white-space: nowrap; text-decoration: none; } .site-footer .emfo-btn-mint .wp-block-button__link { background: var(--global-palette2); color: var(--global-palette4); border: 0; } .site-footer .emfo-btn-mint .wp-block-button__link:hover { background: #fff; color: var(--global-palette4); } .site-footer .emfo-btn-outline, .site-footer .emfo-btn-outline .wp-block-button__link { width: 100%; } .site-footer .emfo-btn-outline .wp-block-button__link { background: transparent; color: #fff; border: 2px solid #fff; padding: 12px 22px; } .site-footer .emfo-btn-outline .wp-block-button__link:hover { background: #fff; color: var(--global-palette4); } /* Top row: "Help more athletes move." + Donate. */ .emfo-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .emfo-cta > .wp-block-buttons { flex-shrink: 0; } .emfo-cta-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .site-footer h2.emfo-cta-title { margin: 0; color: #fff; font-family: var(--global-heading-font-family); font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -.005em; text-transform: uppercase; } .emfo-brush { color: var(--global-palette2); font-family: "Flood Std Regular", "Flood Std", "Brush Script MT", cursive; font-weight: 400; font-size: 48px; line-height: 48px; letter-spacing: 0; text-transform: none; } .site-footer .emfo-cta-text { max-width: 620px; color: #fff; font-size: 20px; line-height: 32px; } /* Middle row: logo + Instagram | two cards. */ .emfo-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .site-footer .emfo-logo { gap: 11.2px; } .site-footer .emfo-pill { font-size: 15.5px; letter-spacing: 4.5px; padding: 7.4px 26.7px; border-radius: 25px; } .site-footer .emfo-social { color: #fff; font-size: 16px; line-height: 26px; } .site-footer .emfo-social a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .site-footer .emfo-social a:hover { color: var(--global-palette2); } .emfo-cards { display: flex; gap: 24px; } .emfo-card { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 28px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; } .emfo-card--gym { gap: 15px; } .emfo-card--gym .wp-block-buttons { margin-top: auto; } .site-footer .emfo-card p { color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 26px; } .site-footer .emfo-card p.emfo-eyebrow { color: var(--global-palette2); font-family: var(--global-heading-font-family); font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; } /* Bottom row: © line (Footer HTML; its Customizer typography is overridden here) | legal menu. */ .site-footer .footer-html { opacity: .75; } .site-footer .footer-html, .site-footer .footer-html p { color: #fff; font-family: var(--global-body-font-family) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 26px !important; letter-spacing: 0 !important; text-transform: none !important; } .site-footer .site-footer-bottom-section-2 { flex-shrink: 0; } .site-footer .emfo-legal-nav .menu-container > ul.kb-navigation { gap: 24px; justify-content: flex-end; flex-wrap: wrap; } .site-footer .emfo-legal-nav .kb-nav-link-content { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0 !important; font-family: var(--global-heading-font-family) !important; font-size: 13px !important; font-weight: 700; line-height: 20px !important; letter-spacing: .06em !important; text-transform: uppercase; color: #fff !important; } .site-footer .emfo-legal-nav .kb-nav-link-content:hover { color: var(--global-palette2) !important; } @media (min-width: 768px) { .site-footer .emfo-legal-nav .menu-container > ul.kb-navigation { flex-wrap: nowrap; } } @media (min-width: 1100px) { .site-footer .site-middle-footer-inner-wrap { display: grid; grid-template-columns: 1fr minmax(0, 820px); } .emfo-brush { margin-left: -.25em; } /* Figma: 14px after ATHLETES; a space is 24px. */ } @media (max-width: 1099px) { .site-footer .site-middle-footer-inner-wrap { display: flex; flex-direction: column; } } @media (max-width: 767px) { .site-footer .site-top-footer-inner-wrap { padding: 56px 0 28px; } .site-footer .site-middle-footer-inner-wrap { padding: 28px 0; gap: 28px; } .site-footer .site-bottom-footer-inner-wrap { flex-direction: column; gap: 28px; padding: 28px 0 32px; text-align: center; } .emfo-cta { flex-direction: column; align-items: stretch; gap: 28px; text-align: center; } .site-footer h2.emfo-cta-title { font-size: 26px; line-height: 34px; } .emfo-brush { display: block; font-size: 30px; line-height: 34px; } .site-footer .emfo-cta-text, .site-footer .emfo-social { display: none; } .site-footer .emfo-btn-mint, .site-footer .emfo-btn-mint .wp-block-button__link { width: 100%; } .emfo-brand { align-items: center; } .site-footer .emfo-logo { gap: 10.2px; } .site-footer .emfo-logo .emfo-wordmark img { width: 338px !important; } .site-footer .emfo-pill { font-size: 14.2px; letter-spacing: 4.1px; padding: 6.8px 24.4px; border-radius: 23px; } .emfo-cards { flex-direction: column; gap: 28px; } .emfo-card, .emfo-card--gym { flex: none; min-height: 0; padding: 20px; gap: 12px; } .site-footer .emfo-legal-nav .menu-container > ul.kb-navigation { justify-content: center; } }