/** * EBTLA design system — drives the ACF section partials, header and footer. * Loaded after the Underscores base stylesheet. */ :root { --ink: #0E1214; --ink-2: #171C1F; --cyan: #1FA8DB; --cyan-ink: #06232D; --red: #E8472E; --bg: #F4F6F7; --band: #E9ECEE; --muted: #5C646A; --maxw: 1240px; --cyan-dark: #0F6D92; /* eyebrow accent on light backgrounds (WCAG AA) */ --red-dark: #B52D1A; /* eyebrow accent on light backgrounds (WCAG AA) */ --red-btn: #C6341F; /* red behind WHITE text — 5.4:1 (WCAG AA); --red is only 3.9:1 */ } /* ---------- Base ---------- */ body { font-family: 'Onest', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } .site-main { background: var(--bg); overflow-x: hidden; } .ebtla-header a, .ebtla-footer a, .site-main a { text-decoration: none; } ::selection { background: var(--cyan); color: #fff; } .ebtla-container { max-width: var(--maxw); margin: 0 auto; } /* ---------- Buttons ---------- */ .ebtla-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; line-height: 1; padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer; } .ebtla-btn svg { width: 16px; height: 16px; flex: none; } .ebtla-btn--cyan { background: var(--cyan); color: var(--cyan-ink); } .ebtla-btn--red { background: var(--red-btn); color: #fff; } .ebtla-btn--white { background: #fff; color: var(--ink); } .ebtla-btn--dark { background: var(--ink); color: #fff; } .ebtla-btn--sm { padding: 12px 20px; font-size: 14px; } .ebtla-btn--sm svg { width: 15px; height: 15px; } .ebtla-btn--lg { padding: 16px 32px; font-size: 16px; } .ebtla-btn--lg svg { width: 18px; height: 18px; } /* ---------- Shared type ---------- */ .ebtla-eyebrow { display: inline-block; color: var(--cyan); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; } .ebtla-eyebrow--red { color: var(--red-dark); } /* Eyebrows sit on light backgrounds in these sections — darken for AA contrast (leave the red modifier alone). */ .ebtla-section--band .ebtla-eyebrow:not(.ebtla-eyebrow--red), .ebtla-section--card .ebtla-eyebrow:not(.ebtla-eyebrow--red) { color: var(--cyan-dark); } .ebtla-eyebrow--rule { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; letter-spacing: .24em; } .ebtla-eyebrow--rule::before { content: ""; width: 34px; height: 2px; background: var(--red); flex: none; } .ebtla-h2 { margin: 0; font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; } .ebtla-lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; } .ebtla-lead--light { color: rgba(255,255,255,.7); font-size: 18px; } .ebtla-outline { color: transparent; -webkit-text-stroke: 2px #fff; } /* Visible keyboard focus (WCAG 2.4.7) */ .ebtla-btn:focus-visible, .ebtla-nav a:focus-visible, .ebtla-iconbtn:focus-visible, .ebtla-round:focus-visible, .ebtla-burger:focus-visible, .ebtla-drawer a:focus-visible, .ebtla-drawer__close:focus-visible, .ebtla-tabs__nav button:focus-visible, .ebtla-tabs__panel:focus-visible, .ebtla-hero-sched__cta:focus-visible, .ebtla-herocard__media:focus-visible, .ebtla-why__cta:focus-visible, .ebtla-footer__links a:focus-visible, .ebtla-footer__contact-list a:focus-visible, .ebtla-footer__social a:focus-visible, .ebtla-promobar__msg a:focus-visible { outline: 3px solid #1FA8DB; outline-offset: 3px; } /* * Baseline keyboard focus for Underscores' base elements (content links, form * fields, buttons, select — which shipped with a faint dotted or no indicator). * Element-level selectors so this overrides the base stylesheet by source order. * The outline follows each element's own border-radius automatically, so no * radius is set here (that would reshape the pill buttons). Keyboard only: * mouse/touch focus shows nothing. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1FA8DB; outline-offset: 2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; } /* Round icon buttons */ .ebtla-round { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; } .ebtla-round--red { background: var(--red); color: #fff; margin-top: 22px; align-self: flex-start; } .ebtla-round--cyan { background: var(--cyan); color: var(--cyan-ink); } /* ---------- Header ---------- */ .ebtla-header { position: sticky; top: 0; z-index: 60; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); } .ebtla-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ebtla-brand { display: flex; align-items: center; gap: 13px; } .ebtla-brand__logo { width: 80px; height: 80px; object-fit: contain; display: block; } .ebtla-brand__text { display: flex; flex-direction: column; line-height: 1.15; max-width: 270px; } .ebtla-brand__title { font-weight: 900; font-size: 18px; letter-spacing: .14em; color: #fff; } .ebtla-brand__line1 { font-weight: 600; font-size: 9.5px; letter-spacing: .08em; color: var(--cyan); margin-top: 4px; } .ebtla-brand__line2 { font-weight: 500; font-size: 8.5px; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-top: 3px; } .ebtla-nav { display: flex; align-items: center; gap: 30px; } .ebtla-nav a { color: rgba(255,255,255,.72); font-weight: 500; font-size: 15px; white-space: nowrap; } .ebtla-nav a:first-child, .ebtla-nav a[aria-current] { color: #fff; font-weight: 600; } .ebtla-header__actions { display: flex; align-items: center; gap: 12px; } .ebtla-iconbtn { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; } .ebtla-iconbtn__badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--red-btn); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Mobile drawer (JS toggle) */ .ebtla-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; cursor: pointer; color: #fff; background: none; border: none; padding: 0; } .ebtla-drawer { position: fixed; inset: 0; z-index: 200; background: var(--ink); transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility .28s ease; display: flex; flex-direction: column; padding: 22px 24px 40px; } .ebtla-drawer.is-open { transform: none; visibility: visible; } .ebtla-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .ebtla-drawer__close { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background: none; border: none; padding: 0; } .ebtla-drawer > a { color: #fff; font-weight: 700; font-size: 26px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .ebtla-drawer__cta { margin-top: 26px; background: var(--cyan); color: var(--cyan-ink) !important; font-weight: 700; font-size: 17px; padding: 16px; border-radius: 999px; text-align: center; border-bottom: none !important; } /* ---------- Hero ---------- */ .ebtla-hero { position: relative; background: var(--ink); overflow: hidden; padding: 96px 24px 64px; } .ebtla-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .ebtla-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,18,20,.62) 0%, rgba(14,18,20,.78) 60%, rgba(14,18,20,.92) 100%); } .ebtla-hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; } .ebtla-hero__title { margin: 0 0 46px; font-weight: 800; line-height: .98; color: #fff; letter-spacing: -.01em; } .ebtla-hero__title .l1, .ebtla-hero__title .l3 { display: block; font-size: 56px; } .ebtla-hero__title .l2 { display: block; font-size: 118px; font-weight: 900; font-style: italic; } /* Copy R2 A3: center the full-hero headline stack (full variant only; simple heroes stay left). */ .ebtla-hero:not(.ebtla-hero--simple) .ebtla-hero__title { text-align: center; } .ebtla-hero__cluster { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: stretch; } .ebtla-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(4px); } .ebtla-glass__h { margin: 0 0 10px; color: #fff; font-size: 26px; font-weight: 800; line-height: 1.1; } .ebtla-glass p { margin: 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.5; } .ebtla-herocard { display: flex; flex-direction: column; gap: 16px; } .ebtla-herocard__media { position: relative; display: block; border-radius: 20px; overflow: hidden; flex: 1; min-height: 190px; background-size: cover; background-position: center; } .ebtla-herocard__overlay { position: absolute; inset: 0; background: rgba(14,18,20,.28); display: flex; align-items: center; justify-content: center; } .ebtla-play { width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,.35); } .ebtla-hero-feature { display: flex; align-items: center; gap: 13px; } .ebtla-hero-feature__ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(31,168,219,.16); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex: none; } .ebtla-hero-feature__t { color: #fff; font-weight: 700; font-size: 16px; } .ebtla-hero-feature__s { color: rgba(255,255,255,.6); font-size: 14px; } .ebtla-hero-sched { background: var(--cyan); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; } .ebtla-hero-sched__h { color: var(--cyan-ink); font-weight: 800; font-size: 22px; margin-bottom: 18px; } .ebtla-hero-sched__list { display: flex; flex-direction: column; gap: 13px; } .ebtla-hero-sched__list > div { display: flex; align-items: center; gap: 11px; color: var(--cyan-ink); font-weight: 600; font-size: 16px; } .ebtla-hero-sched__list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-ink); flex: none; } .ebtla-hero-sched__cta { margin-top: 24px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; padding: 15px; border-radius: 12px; text-align: center; } /* ---------- Promo bar ---------- */ .ebtla-promobar { background: var(--ink); padding: 26px 24px; } .ebtla-promobar__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ebtla-promobar__msg, .ebtla-promobar__msg p { margin: 0; color: #fff; font-size: 21px; font-weight: 600; line-height: 1.4; } .ebtla-promobar__msg a { color: var(--cyan); font-weight: 800; } /* ---------- Generic sections ---------- */ .ebtla-section { padding: 84px 24px; } .ebtla-section--band { background: var(--band); } .ebtla-section--page { background: var(--bg); } .ebtla-card-section { position: relative; padding: 84px 48px; margin: 32px 16px 0; border-radius: 30px; overflow: hidden; } .ebtla-section--ink { background: var(--ink); } .ebtla-section--card { background: #fff; } .ebtla-section--quote { padding: 96px 48px; } .ebtla-section--tiers { background: var(--ink); } .ebtla-section--tiers__scrim { position: absolute; inset: 0; background: rgba(14,18,20,.86); } .ebtla-tiers-wrap { position: relative; } /* ---------- Why band ---------- */ .ebtla-why { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: stretch; } .ebtla-why__intro { display: flex; flex-direction: column; justify-content: center; } .ebtla-why__intro .ebtla-eyebrow { margin-bottom: 16px; } .ebtla-why__intro .ebtla-h2 { margin-bottom: 18px; } /* Copy R2 B2: attributed testimonial quote inside the Why band (Grant Schneider). */ .ebtla-why__quote { margin: 22px 0 0; padding: 16px 20px; border-left: 3px solid var(--cyan); background: rgba(31,168,219,.06); border-radius: 0 12px 12px 0; } .ebtla-why__quote blockquote { margin: 0; font-size: 16px; line-height: 1.55; font-style: italic; color: var(--ink); } .ebtla-why__quote figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--cyan-dark); } .ebtla-why__photo { border-radius: 22px; overflow: hidden; min-height: 440px; background-size: cover; background-position: center; } .ebtla-why__cta { border-radius: 22px; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; min-height: 440px; } .ebtla-why__cta svg { margin-bottom: auto; } .ebtla-why__cta span { font-size: 30px; font-weight: 800; line-height: 1.1; } /* ---------- Pillars tabs ---------- */ .ebtla-tabs__navwrap { display: flex; justify-content: center; margin-bottom: 44px; } .ebtla-tabs__nav { display: inline-flex; background: #fff; border-radius: 999px; padding: 8px; gap: 4px; box-shadow: 0 2px 20px rgba(14,18,20,.06); } .ebtla-tabs__nav button { border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; background: transparent; color: var(--muted); transition: background .2s, color .2s; } .ebtla-tabs__nav button.is-active { background: var(--ink); color: #fff; } .ebtla-tabs__panel { display: none; } .ebtla-tabs__panel.is-active { display: block; } .ebtla-tabs__h { font-size: 44px; line-height: 1.02; margin: 0 0 26px; } .ebtla-imggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 26px; } .ebtla-imggrid > div { width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; background-size: cover; background-position: center; } .ebtla-tabs__body { font-size: 18px; max-width: 760px; } /* ---------- Journey ---------- */ .ebtla-journey__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px; align-items: center; margin-bottom: 26px; } .ebtla-journey__h { color: #fff; font-size: 40px; line-height: 1.08; } .ebtla-journey__media { border-radius: 22px; overflow: hidden; position: relative; min-height: 300px; background-size: cover; background-position: center; } .ebtla-journey__media--tall { min-height: 320px; } .ebtla-journey__bot { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; } .ebtla-journey__text { margin: 0 0 26px; color: #fff; font-size: 19px; line-height: 1.6; } .ebtla-journey__arrow { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ebtla-journey__from { color: #fff; font-size: 30px; font-weight: 800; } .ebtla-journey__to { color: var(--cyan); font-size: 30px; font-weight: 800; } /* ---------- More than baseball ---------- */ .ebtla-mtb { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .ebtla-mtb__photo { border-radius: 22px; overflow: hidden; position: relative; min-height: 360px; margin-bottom: 22px; background-size: cover; background-position: center; } .ebtla-mtb__daycard { background: #fff; border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; gap: 22px; box-shadow: 0 2px 20px rgba(14,18,20,.06); } .ebtla-mtb__daycard b { font-size: 22px; font-weight: 800; flex: none; } .ebtla-mtb__hi { color: var(--red); } .ebtla-avatars { display: flex; gap: 8px; margin-left: auto; } .ebtla-avatars span { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; display: block; flex: none; } .ebtla-mtb__h { font-size: 44px; margin: 14px 0 18px; } .ebtla-mtb__text { font-size: 18px; margin-bottom: 36px; } .ebtla-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .ebtla-count { font-size: 56px; font-weight: 900; color: var(--ink); line-height: 1; } .ebtla-count--red { color: var(--red); } .ebtla-stats__label { color: var(--muted); font-size: 16px; margin-top: 8px; } /* ---------- Tiers ---------- */ .ebtla-tiers__head { max-width: 640px; margin-bottom: 48px; } .ebtla-tiers__head .ebtla-h2 { color: #fff; font-size: 46px; margin-bottom: 14px; white-space: nowrap; } .ebtla-tiers__subhead { color: var(--cyan); font-size: 20px; font-weight: 700; letter-spacing: .01em; margin: 0 0 14px; } .ebtla-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ebtla-tier { position: relative; background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; } .ebtla-tier--pop { border: 2px solid var(--cyan); } .ebtla-tier__badge { position: absolute; top: 16px; right: 16px; z-index: 2; background: var(--red-btn); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } /* Tier cards without a photo (Programs, Membership): the badge/label would otherwise overlap the eyebrow (ages). Render it in normal flow as a top chip so the ages stay visible (WP-E). */ .ebtla-tier:not(:has(.ebtla-tier__img)) .ebtla-tier__badge { position: static; align-self: flex-start; margin: 24px 28px 0; } .ebtla-tier:not(:has(.ebtla-tier__img)) .ebtla-tier__body { padding-top: 14px; } .ebtla-tier__img { position: relative; height: 190px; background-size: cover; background-position: center; } .ebtla-tier__body { padding: 28px; display: flex; flex-direction: column; flex: 1; } .ebtla-tier__eyebrow { color: var(--cyan); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .ebtla-tier__name { margin: 10px 0 8px; color: #fff; font-size: 25px; font-weight: 800; } .ebtla-tier__desc { margin: 0 0 20px; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.55; } .ebtla-tier__list { margin: -6px 0 22px; padding: 0; list-style: none; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.45; } .ebtla-tier__list li { position: relative; padding-left: 22px; margin-top: 8px; } .ebtla-tier__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); } .ebtla-tier__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ebtla-tier__price { color: #fff; font-size: 24px; font-weight: 800; } .ebtla-tier__price small { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.55); } .ebtla-tier4 { margin-top: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 24px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ebtla-tier4__eyebrow { color: var(--red); } .ebtla-tier4__name { color: #fff; font-size: 22px; font-weight: 800; margin-top: 6px; } .ebtla-tier4__desc { color: rgba(255,255,255,.6); font-size: 15px; margin-top: 4px; } /* ---------- Quote ---------- */ .ebtla-quote { max-width: 900px; margin: 0 auto; text-align: center; } .ebtla-quote__eyebrow { color: var(--muted); font-weight: 700; font-size: 15px; letter-spacing: .06em; } .ebtla-quote__eyebrow--lg { display: inline-block; color: var(--ink); font-weight: 900; font-size: 24px; letter-spacing: .12em; } .ebtla-quote h2 { margin: 20px 0 24px; font-size: 48px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; } .ebtla-quote__cite { margin: 0 0 34px; color: var(--muted); font-size: 17px; } /* Copy R2 B1: optional italic tribute line under the citation (Harry Boal memorial). */ .ebtla-quote__tribute { max-width: 620px; margin: -20px auto 34px; color: var(--muted); font-size: 16px; font-style: italic; line-height: 1.5; } /* ---------- Footer ---------- */ .ebtla-footer { background: var(--bg); margin-top: 32px; padding: 0 16px 24px; } .ebtla-footer__card { position: relative; border-radius: 30px; overflow: hidden; padding: 64px 48px; } .ebtla-footer__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .ebtla-footer__scrim { position: absolute; inset: 0; background: rgba(14,18,20,.82); } .ebtla-footer__inner { position: relative; max-width: var(--maxw); margin: 0 auto; } .ebtla-footer__heading { margin: 0 0 44px; font-size: clamp(26px, calc(3.8vw - 3px), 52px); font-weight: 900; line-height: 1.02; color: #fff; letter-spacing: -.01em; white-space: nowrap; } .ebtla-footer__heading-outline { color: transparent; -webkit-text-stroke: 2px var(--red); font-style: italic; } .ebtla-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; } .ebtla-footer__logo { width: 96px; height: 96px; object-fit: contain; display: block; margin-bottom: 8px; } .ebtla-footer__links { display: flex; gap: 14px; flex-wrap: wrap; } .ebtla-footer__links a { display: inline-block; line-height: 1; color: #fff; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); } .ebtla-footer__contact-h { color: #fff; font-weight: 700; font-size: 19px; margin-bottom: 18px; } .ebtla-footer__contact-list { display: flex; flex-direction: column; gap: 12px; } .ebtla-footer__contact-list a, .ebtla-footer__contact-list span { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.85); font-size: 15px; } .ebtla-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); flex-wrap: wrap; } .ebtla-footer__copy { color: rgba(255,255,255,.6); font-size: 14px; } .ebtla-footer__social { display: flex; gap: 16px; } .ebtla-footer__social a { color: #fff; display: inline-flex; } /* ========== Group B — reusable sections ========== */ /* Generic dark-section text + dark-button arrow */ .ebtla-section--ink .ebtla-h2 { color: #fff; } .ebtla-section--ink .ebtla-lead { color: rgba(255,255,255,.68); } .ebtla-btn--dark svg { stroke: var(--cyan); } /* Account bar */ .ebtla-acctbar { background: var(--ink-2); padding: 12px 24px; border-bottom: 1px solid rgba(255,255,255,.08); } .ebtla-acctbar__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ebtla-acctbar__status { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; } .ebtla-acctbar__status svg { flex: none; } .ebtla-acctbar__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ebtla-acctbar__links a { color: rgba(255,255,255,.62); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); } .ebtla-acctbar__links a.is-active { color: var(--cyan); border-color: rgba(31,168,219,.4); } /* Intro / statement band */ .ebtla-intro { max-width: 960px; margin: 0 auto; text-align: center; } .ebtla-intro__h { font-size: 44px; line-height: 1.15; margin: 18px 0 22px; } .ebtla-intro__hi { color: var(--cyan-dark); } .ebtla-intro__text { font-size: 18px; line-height: 1.7; } /* Split feature / CTA row */ .ebtla-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .ebtla-split--rev .ebtla-split__text { order: 2; } .ebtla-split__h { font-size: 42px; line-height: 1.08; margin: 14px 0 20px; } .ebtla-split__body { margin-bottom: 26px; } .ebtla-split__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; } .ebtla-split__body p:last-child { margin-bottom: 0; } .ebtla-video__head { max-width: 760px; margin: 0 auto 32px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; } .ebtla-video__frame { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--ink); } .ebtla-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ebtla-section--ink .ebtla-video__head .ebtla-h2 { color: #fff; } .ebtla-split__body h3 { margin: 32px 0 4px; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.25; } .ebtla-split__body h4 { margin: 22px 0 6px; color: var(--cyan-dark); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .ebtla-split__body ul { margin: 0 0 18px; padding-left: 20px; } .ebtla-split__body li { margin-top: 8px; font-size: 16px; line-height: 1.6; } .ebtla-section--ink .ebtla-split__body h3 { color: #fff; } .ebtla-section--ink .ebtla-split__body h4 { color: var(--cyan); } .ebtla-section--card .ebtla-split__body { color: var(--muted); } .ebtla-section--ink .ebtla-split__body { color: rgba(255,255,255,.68); } .ebtla-split__media { border-radius: 22px; overflow: hidden; min-height: 400px; background-size: cover; background-position: center; } /* Portraits/headshots: show the whole image instead of a zoomed cover-crop. */ .ebtla-split__media--contain { background-size: contain; background-repeat: no-repeat; } /* Card grid */ .ebtla-cardgrid__head { max-width: 640px; margin-bottom: 40px; } .ebtla-cardgrid__h { font-size: 42px; margin: 14px 0 0; } .ebtla-cardgrid__intro { margin-top: 14px; } .ebtla-cardgrid__grid { display: grid; gap: 22px; } .ebtla-cardgrid__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .ebtla-cardgrid__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .ebtla-cardgrid__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .ebtla-gcard { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid transparent; } .ebtla-section--ink .ebtla-gcard { background: var(--ink-2); border-color: rgba(255,255,255,.08); } .ebtla-section--card .ebtla-gcard { background: var(--bg); border-color: rgba(14,18,20,.06); } .ebtla-gcard__img { height: 200px; background-size: cover; background-position: center; } .ebtla-gcard__body { padding: 30px 28px; } .ebtla-gcard__t { margin: 0 0 12px; font-size: 23px; font-weight: 800; } .ebtla-gcard__p { margin: 0; font-size: 15px; line-height: 1.6; } /* WP-5.1: optional card link (Arm Care downloads, My Programs hub). */ .ebtla-gcard__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-weight: 700; font-size: 15px; color: var(--cyan-dark); } .ebtla-gcard__link svg { width: 18px; height: 18px; } .ebtla-section--ink .ebtla-gcard__link { color: var(--cyan); } .ebtla-section--ink .ebtla-gcard__t { color: #fff; } .ebtla-section--ink .ebtla-gcard__p { color: rgba(255,255,255,.66); } .ebtla-section--card .ebtla-gcard__t { color: var(--ink); } .ebtla-section--card .ebtla-gcard__p { color: var(--muted); } /* Chips / pill grid */ .ebtla-chips__head { max-width: 680px; margin-bottom: 40px; } .ebtla-chips__h { font-size: 42px; margin: 14px 0 14px; } .ebtla-chips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ebtla-chip { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 18px 20px; border: 1px solid transparent; } .ebtla-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex: none; } .ebtla-chip__label { font-size: 16px; font-weight: 600; } .ebtla-section--ink .ebtla-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .ebtla-section--ink .ebtla-chip__label { color: #fff; } .ebtla-section--card .ebtla-chip { background: var(--bg); border-color: rgba(14,18,20,.08); } .ebtla-section--card .ebtla-chip__label { color: var(--ink); } /* Simple CTA */ .ebtla-cta { max-width: 900px; margin: 0 auto; text-align: center; } .ebtla-cta__eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .ebtla-section--ink .ebtla-cta__eyebrow { color: var(--cyan); } .ebtla-cta__h { font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 20px 0 24px; } .ebtla-section--ink .ebtla-cta__h { color: #fff; } .ebtla-cta__text { max-width: 620px; margin: 0 auto 34px; font-size: 17px; color: var(--muted); } .ebtla-section--ink .ebtla-cta__text { color: rgba(255,255,255,.7); } /* FAQ (native
accordion) */ .ebtla-faq { max-width: 820px; margin: 0 auto; } .ebtla-faq__head { text-align: center; margin-bottom: 32px; } .ebtla-faq__head .ebtla-eyebrow { display: block; margin-bottom: 12px; } .ebtla-faq__h { font-size: 38px; } .ebtla-faq__list { display: flex; flex-direction: column; gap: 14px; } .ebtla-faq__item { background: var(--bg); border: 1px solid rgba(14,18,20,.07); border-radius: 20px; } .ebtla-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-size: 18px; font-weight: 800; color: var(--ink); } .ebtla-faq__q::-webkit-details-marker { display: none; } .ebtla-faq__icon { position: relative; width: 18px; height: 18px; flex: none; } .ebtla-faq__icon::before, .ebtla-faq__icon::after { content: ""; position: absolute; background: var(--cyan-dark); border-radius: 2px; } .ebtla-faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; } .ebtla-faq__icon::after { top: 0; left: 8px; width: 2px; height: 18px; transition: transform .2s ease; } .ebtla-faq__item[open] .ebtla-faq__icon::after { transform: scaleY(0); } .ebtla-faq__a { padding: 0 26px 24px; } .ebtla-faq__a p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; } /* Hero — simple variant (interior pages, no card cluster) */ .ebtla-hero--simple .ebtla-hero__title { margin-bottom: 26px; } .ebtla-hero--simple .ebtla-hero__title .l1, .ebtla-hero--simple .ebtla-hero__title .l3 { font-size: 52px; } .ebtla-hero--simple .ebtla-hero__title .l2 { font-size: 100px; } .ebtla-hero__intro { max-width: 700px; margin: 0; color: rgba(255,255,255,.78); font-size: 19px; line-height: 1.6; } .ebtla-hero__tagline { margin: 22px 0 0; font-size: 20px; font-weight: 800; color: var(--cyan); letter-spacing: -.01em; } /* WP-4.3 (HOLD-1): optional application CTA button on the simple hero. */ .ebtla-hero__cta { margin: 30px 0 0; } /* WP-4.3 (HOLD-3): optional application CTA beneath the pillars tab row. */ .ebtla-tabs__cta { margin: -24px 0 40px; text-align: center; } /* Card grid — square image + subtitle (team grids) */ .ebtla-gcard__img--square { height: auto; aspect-ratio: 1 / 1; } .ebtla-gcard__sub { font-size: 14px; font-weight: 600; margin: -4px 0 8px; color: var(--cyan); } .ebtla-section--card .ebtla-gcard__sub { color: var(--cyan-dark); } /* ========== Group C — stats band + affiliate grid ========== */ /* Stats band */ .ebtla-statsband__head { max-width: 640px; margin-bottom: 44px; } .ebtla-statsband__h { font-size: 42px; margin: 14px 0 0; } /* Copy R2 A9: long section headings that were wrapping with an orphan word. The two short ones are forced onto one line at desktop with a small clamp; the two long Mission headings stay two lines but break evenly (balance). Below the mobile breakpoint every heading wraps normally at its 28px size. */ .ebtla-statsband__h, /* A9-5 Mission "One Mission. One Team..." (stats_band is Mission-only) */ .page-id-18 .ebtla-card-section:not(:has(.ebtla-gcard__img--square)) .ebtla-cardgrid__h { /* A9-4 Mission "Three Commitments..." */ text-wrap: balance; } @media (min-width: 761px) { /* A9-3 Programs "The Elite Athlete Development Ecosystem" (chips_grid is Programs-only). */ .ebtla-chips__h { font-size: 34px; white-space: nowrap; } /* A9-6 Mission "Meet Your Athlete Development Team" (the square-image card grid). */ .page-id-18 .ebtla-card-section:has(.ebtla-gcard__img--square) .ebtla-cardgrid__h { font-size: 35px; white-space: nowrap; } } .ebtla-statsband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .ebtla-statsband__grid .ebtla-count { font-size: 60px; } .ebtla-section--ink .ebtla-count:not(.ebtla-count--red) { color: #fff; } .ebtla-statsband__label { margin-top: 10px; font-size: 16px; } .ebtla-section--card .ebtla-statsband__label { color: var(--muted); } .ebtla-section--ink .ebtla-statsband__label { color: rgba(255,255,255,.66); } .ebtla-statsband__pills { margin-top: 52px; } .ebtla-statsband__pillhead { margin: 0 0 22px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .ebtla-section--card .ebtla-statsband__pillhead { color: var(--muted); } .ebtla-section--ink .ebtla-statsband__pillhead { color: rgba(255,255,255,.6); } .ebtla-pillcloud { display: flex; flex-wrap: wrap; gap: 12px; } .ebtla-pill { font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 999px; background: var(--bg); border: 1px solid rgba(14,18,20,.08); color: var(--ink); } .ebtla-pill--dark { background: var(--ink); color: #fff; border-color: transparent; } .ebtla-pill--red { background: var(--red-btn); color: #fff; border-color: transparent; } /* Affiliate grid */ .ebtla-affgrid__head { max-width: 640px; margin-bottom: 44px; } .ebtla-affgrid__h { font-size: 42px; margin: 14px 0 0; } .ebtla-affgrid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ebtla-affgrid__footnote { max-width: var(--maxw); margin: 28px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .ebtla-affcard { background: #fff; border: 1px solid rgba(14,18,20,.08); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; } .ebtla-affcard__media { position: relative; height: 180px; background-size: cover; background-position: center; } .ebtla-affcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,18,20,.1), rgba(14,18,20,.55)); } .ebtla-affcard__cat { position: absolute; left: 20px; bottom: 16px; z-index: 1; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .ebtla-affcard__media--logo { background-color: #F4F6F7; background-size: contain; background-repeat: no-repeat; background-origin: content-box; padding: 34px 40px 40px; box-sizing: border-box; } .ebtla-affcard__media--logo::after { display: none; } .ebtla-affcard__media--logo .ebtla-affcard__cat { color: var(--muted); bottom: 12px; } .ebtla-affcard__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .ebtla-affcard__t { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); } .ebtla-affcard__p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1; } .ebtla-affcard__tags { display: flex; flex-wrap: wrap; gap: 8px; } .ebtla-tag { background: var(--bg); border: 1px solid rgba(14,18,20,.08); color: var(--ink); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; } .ebtla-affcard__link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 15px; margin-top: 4px; } /* ---------- Responsive ---------- */ @media (max-width: 1120px) { .ebtla-nav { gap: 18px; } .ebtla-nav a { font-size: 14px; } .ebtla-header__cta { padding: 11px 18px; font-size: 14px; } .ebtla-brand__text { max-width: 200px; } .ebtla-hero__title .l2 { font-size: 92px; } } @media (max-width: 960px) { .ebtla-nav, .ebtla-header__actions { display: none; } .ebtla-burger { display: flex; } } @media (max-width: 1000px) { .ebtla-hero__cluster { grid-template-columns: 1fr; } .ebtla-why { grid-template-columns: 1fr; } .ebtla-tiers { grid-template-columns: 1fr; } .ebtla-journey__top, .ebtla-journey__bot, .ebtla-mtb { grid-template-columns: 1fr; } .ebtla-why__photo, .ebtla-why__cta { min-height: 300px; } .ebtla-footer__cols { grid-template-columns: 1fr; } .ebtla-split { grid-template-columns: 1fr; } .ebtla-split--rev .ebtla-split__text { order: 0; } .ebtla-split__media { min-height: 300px; } .ebtla-cardgrid__grid[data-cols="3"], .ebtla-cardgrid__grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } .ebtla-chips__grid { grid-template-columns: repeat(2, 1fr); } .ebtla-affgrid__grid { grid-template-columns: repeat(2, 1fr); } .ebtla-statsband__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .ebtla-hero { padding: 80px 20px 44px; } .ebtla-hero__title { margin-bottom: 28px; } .ebtla-hero__title .l1, .ebtla-hero__title .l3 { font-size: 30px; } .ebtla-hero__title .l2 { font-size: 44px; } .ebtla-section { padding: 56px 20px; } .ebtla-promobar { padding: 22px 20px; } .ebtla-promobar__inner { flex-direction: column; align-items: flex-start; } .ebtla-promobar__msg, .ebtla-promobar__msg p { font-size: 17px; } .ebtla-card-section { padding: 40px 22px; margin: 24px 12px 0; } .ebtla-h2 { font-size: 28px; } .ebtla-tabs__h, .ebtla-mtb__h, .ebtla-tiers__head .ebtla-h2 { font-size: 30px; } .ebtla-tiers__head .ebtla-h2 { white-space: normal; } .ebtla-journey__h { font-size: 28px; } .ebtla-imggrid { grid-template-columns: repeat(2, 1fr); } .ebtla-tabs__nav { flex-wrap: wrap; justify-content: center; } .ebtla-quote h2, .ebtla-cta__h { font-size: 30px; } .ebtla-intro__h, .ebtla-split__h, .ebtla-chips__h, .ebtla-faq__h { font-size: 28px; } .ebtla-cardgrid__grid[data-cols="2"], .ebtla-cardgrid__grid[data-cols="3"], .ebtla-cardgrid__grid[data-cols="4"] { grid-template-columns: 1fr; } .ebtla-chips__grid { grid-template-columns: 1fr; } .ebtla-affgrid__grid { grid-template-columns: 1fr; } .ebtla-statsband__grid { grid-template-columns: 1fr 1fr; } .ebtla-hero--simple .ebtla-hero__title .l1, .ebtla-hero--simple .ebtla-hero__title .l3 { font-size: 30px; } .ebtla-hero--simple .ebtla-hero__title .l2 { font-size: 44px; } .ebtla-footer__heading { font-size: 34px; margin-bottom: 26px; white-space: normal; } .ebtla-footer__card { padding: 40px 22px; } .ebtla-mtb__daycard { flex-wrap: wrap; } } /* ========================================================================== Chrome ports for the ACF theme — wp_nav_menu