/** * EA Business Center Landing — page styles. * * SCOPING (rewritten in 1.3.0) * ---------------------------- * Every rule in this file is rooted at `.eabcl-root`, the plugin's own wrapper * div. Nothing here can match an element outside that div. * * Until 1.2.0 the styling scope was `.eabcl-page`, and in framed mode that class * was added to the theme's . `.eabcl-page *`, `.eabcl-page a`, * `.eabcl-page button` and `.eabcl-page h1` therefore matched the whole * document: the announcement bar, the site header, the primary navigation, the * Login and Join buttons, the admin bar and the site footer. The visible symptom * was the announcement bar's "Join Now" button losing its label, because * `.eabcl-page a { color: #FA3C00 }` repainted white button text orange on an * orange background. * * `.eabcl-page` is still used, but it now sits on the plugin root alongside * `.eabcl-root`, so `.eabcl-root.eabcl-page` and `.eabcl-root` mean the same * element. Body only ever receives state classes: `eabcl-framed`, * `eabcl-frame-header`, `eabcl-frame-header-footer`, `eabcl-variant-*`, * `eabcl-standalone`. * * Layout the original component decided in JavaScript (isDesktop / isMobile / * isTablet) is handled here with media queries, so the page renders at the * correct breakpoint on first paint with no layout shift. Breakpoints match the * original: desktop >= 1100px, tablet 768-1099px, header descriptor >= 1200px. */ /* ---------- Runtime measurements ---------- * landing.js keeps these in sync with the real header stack. The fallbacks are * what the page uses before the first measurement and if JavaScript never runs. */ .eabcl-root { --eabcl-sticky-top: 0px; --eabcl-scroll-offset: 92px; --eabcl-header-height: 80px; --eabcl-viewport: 100vw; --eabcl-bleed-left: 0px; --eabcl-flow-clearance: 0px; } /* ---------- Site header flow clearance (1.3.1) ---------- * Two separate measurements, because they answer two different questions: * * --eabcl-flow-clearance Where does the sub-header BEGIN in the document? * Non-zero only when the site header overlays the * start of the content area instead of sitting above * it in normal flow. * * --eabcl-sticky-top Where does the sub-header STOP while scrolling? * The bottom edge of whatever chrome is still pinned. * * 1.3.0 had only the second. An overlay header takes no flow space and is not * pinned at the top of the page, so it scored 0 on both counts and the * sub-header was laid out underneath it. */ .eabcl-root .eabcl-site-header-clearance { display: block; width: 100%; height: var(--eabcl-flow-clearance); min-height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } /* The sticky transition is suppressed until the first measurement lands, so a * measured correction on a slow page reads as layout rather than movement. The * class is added by JavaScript; if JavaScript never runs, nothing is hidden and * the page stays fully usable with a zero-height spacer. */ .eabcl-root:not(.eabcl-layout-measured) .eabcl-business-center-header { transition: none; } /* ---------- Standalone document ---------- * In standalone mode the plugin owns . This is a class selector, not a * bare `body {}` rule, and the class is only ever printed by the plugin's own * standalone template. */ .eabcl-standalone { margin: 0; padding: 0; background: #fff; } /* ---------- Base ---------- */ .eabcl-root, .eabcl-root * { box-sizing: border-box; } .eabcl-root { margin: 0; padding: 0; background: #fff; color: #14202B; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; text-align: left; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .eabcl-root button, .eabcl-root input, .eabcl-root select, .eabcl-root textarea { font-family: "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root a { color: #FA3C00; text-decoration: none; } .eabcl-root a:hover { color: #c92f00; } .eabcl-root :focus-visible { outline: 3px solid #FA3C00; outline-offset: 2px; border-radius: 4px; } .eabcl-root img { max-width: 100%; } /* ---------- Theme compatibility layer ---------- * Framed mode leaves the theme's stylesheet loaded, and the theme styles bare * element selectors. A theme rule such as `h1 { color: #04203E }` is a *direct* * declaration, so it beats an inherited `color: #fff` coming down from the hero * section — which is exactly why the hero headline rendered navy instead of * white. The same applies to anchors, buttons, lists and images. * * This layer is deliberately narrow: it normalises only the properties the * theme is actually setting, restores inheritance where inheritance is what the * design relies on, and never uses a destructive `all: unset`, which would also * wipe the inline styles the design is built from. * * Specificity note: `.eabcl-root.eabcl-page` is (0,2,0) and beats the (0,0,1) * bare element selectors and most (0,1,1) theme rules regardless of load order. */ /* Headings inherit again, so the section they sit in decides their colour. * Individual headings that need a specific colour set it inline, and an inline * style still wins over everything here. */ .eabcl-root.eabcl-page h1, .eabcl-root.eabcl-page h2, .eabcl-root.eabcl-page h3, .eabcl-root.eabcl-page h4, .eabcl-root.eabcl-page h5, .eabcl-root.eabcl-page h6 { color: inherit; margin: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: normal; font-family: "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root.eabcl-page p, .eabcl-root.eabcl-page figure, .eabcl-root.eabcl-page ul, .eabcl-root.eabcl-page ol { margin: 0; padding: 0; } .eabcl-root.eabcl-page ul, .eabcl-root.eabcl-page ol { list-style: none; } /* Anchors: themes add underlines, pill backgrounds, borders and focus shadows * to menu and content links. The landing page draws its own affordances. */ .eabcl-root.eabcl-page a { background: none; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; text-transform: none; letter-spacing: normal; font-family: inherit; } .eabcl-root.eabcl-page button { font-family: "Roboto", Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: normal; line-height: 1; box-shadow: none; -webkit-appearance: none; appearance: none; } .eabcl-root.eabcl-page address { font-style: normal; margin: 0; } .eabcl-root.eabcl-page svg { max-width: none; vertical-align: middle; } .eabcl-root.eabcl-page iframe { max-width: 100%; } /* Section and container width: a theme content wrapper can impose a max-width * or horizontal padding on descendants. The landing page manages its own. */ .eabcl-root.eabcl-page section, .eabcl-root.eabcl-page header, .eabcl-root.eabcl-page footer { width: auto; max-width: none; float: none; clear: none; } /* The hero headline is white on navy. Stated explicitly, and with the ID in the * selector, so no theme heading rule can take it back. */ .eabcl-root #hero-headline { color: #fff; } /* ---------- Full-bleed inside a theme content wrapper ---------- * landing.js measures the root's left offset and the viewport width and adds * `is-bleed` only when the theme actually constrains the wrapper. Using the * measured values rather than 100vw means the scrollbar width is already * accounted for, so this never introduces a horizontal scrollbar. */ .eabcl-framed .eabcl-root { width: 100%; max-width: none; margin: 0; padding: 0; } .eabcl-framed .eabcl-root.is-bleed { width: var(--eabcl-viewport); max-width: var(--eabcl-viewport); margin-left: calc(-1 * var(--eabcl-bleed-left)); margin-right: 0; } /* ---------- Skip link ---------- */ .eabcl-root .eabcl-skip { position: absolute; left: -9999px; top: 0; z-index: 20; background: #04203E; color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600; } .eabcl-root .eabcl-skip:focus { left: 12px; color: #fff; } /* ---------- Business Center sub-header ---------- * Sticky behaviour lives here rather than in an inline style so the offset can * be driven by a custom property. * * `top: var(--eabcl-sticky-top)` is the measured bottom edge of whatever is * pinned above us — the admin bar and any fixed or sticky site header. At the * top of the page that is normally 0 and the sub-header simply sits in flow, * below the complete site header. * * `isolation: isolate` gives the sub-header its own stacking context so its * children cannot escape it, and `z-index: 1` is the lowest value that keeps it * above the page content while staying underneath any site header, which will * always carry a higher z-index of its own. */ .eabcl-root .eabcl-business-center-header { position: sticky; top: var(--eabcl-sticky-top); transition: top .12s ease; z-index: 1; isolation: isolate; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #E1E5E8; box-shadow: 0 1px 12px -8px rgba(4, 32, 62, .25); width: auto; max-width: none; } .eabcl-root .eabcl-business-center-header__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* ---------- Sub-header navigation ---------- * The theme's menu CSS was drawing a rectangular border, a background and a * focus box-shadow on each of these links. Every one of those properties is * reset here, on a selector specific enough (0,3,0) to win, leaving only the * intended 2px bottom indicator. */ .eabcl-root .eabcl-nav-desktop { flex: 1; align-items: center; justify-content: center; gap: 26px; } .eabcl-root.eabcl-page .eabcl-nav-link { display: inline-block; font: 600 14px/1 "Roboto", Arial, Helvetica, sans-serif; color: #14202B; white-space: nowrap; padding: 12px 0; margin: 0; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none; text-decoration: none; text-transform: none; transition: color .16s, border-color .16s; } .eabcl-root.eabcl-page .eabcl-nav-link:hover, .eabcl-root.eabcl-page .eabcl-nav-link:focus { color: #FA3C00; background: none !important; border-bottom-color: transparent !important; } .eabcl-root.eabcl-page .eabcl-nav-link:hover { border-bottom-color: rgba(250, 60, 0, .4) !important; } .eabcl-root.eabcl-page .eabcl-nav-link.is-current { color: #FA3C00; border-bottom-color: #FA3C00 !important; } /* Keyboard focus still gets a visible ring — the reset above only removes the * theme's permanent outline, not the accessibility affordance. */ .eabcl-root.eabcl-page .eabcl-nav-link:focus-visible { outline: 3px solid #FA3C00; outline-offset: 2px; } .eabcl-root .eabcl-header-cta { align-items: center; gap: 20px; flex: none; } .eabcl-root .eabcl-header-mobile { align-items: center; gap: 12px; flex: none; } .eabcl-root.eabcl-page .eabcl-btn-accent, .eabcl-root.eabcl-page .eabcl-tablet-cta { background: #FA3C00; color: #fff; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .16s; } .eabcl-root.eabcl-page .eabcl-btn-accent { padding: 0 24px; height: 47px; font: 700 14px/1 "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root.eabcl-page .eabcl-tablet-cta { padding: 0 18px; height: 44px; font: 700 13px/1 "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root.eabcl-page .eabcl-btn-accent:hover, .eabcl-root.eabcl-page .eabcl-tablet-cta:hover { background: #c92f00; } /* ---------- Anchor scroll offset ---------- * Driven by the same measurement as scrollToSection(), so a section heading * lands clear of the admin bar, the site header and the sub-header whether the * visitor clicked a nav link or followed a #hash straight into the page. */ .eabcl-root section[id] { scroll-margin-top: var(--eabcl-scroll-offset); } /* ---------- Image sizing ---------- * These were inline styles until 1.1.0. On the live site something outside the * plugin was overriding the inline aspect-ratio and letting images stretch to * their container height, which turned every landscape crop into a portrait * one. Declaring them here with !important and a two-class selector means no * theme, plugin or lazy-loader rule can win: `img { height: 100% !important }` * has specificity (0,0,1) and loses to (0,3,0). * * height:auto is what lets aspect-ratio drive the box. The width/height HTML * attributes on each image match its ratio, so the layout is still correct if * this stylesheet is slow to arrive. */ .eabcl-root.eabcl-page .eabcl-img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: cover !important; } .eabcl-root.eabcl-page .eabcl-img--hero, .eabcl-root.eabcl-page .eabcl-img--photo43 { aspect-ratio: 4 / 3 !important; } .eabcl-root.eabcl-page .eabcl-img--card { aspect-ratio: 16 / 10 !important; } .eabcl-root.eabcl-page .eabcl-img--square { aspect-ratio: 1 / 1 !important; } .eabcl-root.eabcl-page .eabcl-img--logo { width: auto !important; height: 38px !important; aspect-ratio: auto !important; object-fit: contain !important; } .eabcl-root.eabcl-page .eabcl-carousel figure { aspect-ratio: 16 / 9 !important; } /* ---------- Motion ---------- */ @keyframes eabclFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .eabcl-root .eabcl-fade { animation: eabclFade .5s ease; } @media (prefers-reduced-motion: reduce) { .eabcl-root, .eabcl-root *, .eabcl-root .eabcl-drawer, .eabcl-root .eabcl-lightbox { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } /* ---------- Responsive visibility ---------- */ .eabcl-root .eabcl-nav-desktop, .eabcl-root .eabcl-header-cta { display: none; } .eabcl-root .eabcl-header-mobile { display: flex; } .eabcl-root .eabcl-sticky-bar { display: grid; } .eabcl-root .eabcl-tablet-cta, .eabcl-root .eabcl-descriptor { display: none; } @media (min-width: 768px) and (max-width: 1099px) { .eabcl-root .eabcl-tablet-cta { display: block; } } @media (min-width: 1100px) { .eabcl-root .eabcl-nav-desktop, .eabcl-root .eabcl-header-cta { display: flex; } .eabcl-root .eabcl-header-mobile, .eabcl-root .eabcl-sticky-bar, .eabcl-root .eabcl-sticky-spacer { display: none; } } @media (min-width: 1200px) { .eabcl-root .eabcl-descriptor { display: block; } } /* ---------- Mobile drawer ---------- */ .eabcl-root .eabcl-drawer { animation: eabclFade .2s ease; } .eabcl-root .eabcl-drawer[hidden] { display: none; } /* ---------- Mobile sticky conversion bar ---------- * `is-hidden` is applied by landing.js when the enquiry form is on screen or * the visitor has reached the end of the page, so the bar can never sit on top * of the form it points at, or over the site footer in header_footer mode. */ .eabcl-root .eabcl-sticky-spacer { height: 72px; } .eabcl-root .eabcl-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: #fff; border-top: 1px solid #E1E5E8; box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, .18); grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); transition: transform .2s ease, opacity .2s ease; } .eabcl-root .eabcl-sticky-bar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } /* ---------- Filter chips ---------- */ .eabcl-root.eabcl-page .eabcl-chip { border: 1.5px solid #E1E5E8; border-radius: 999px; padding: 9px 16px; font: 600 .85rem/1 "Roboto", Arial, Helvetica, sans-serif; cursor: pointer; background: #fff; color: #14202B; box-shadow: none; transition: background .16s, color .16s, border-color .16s; } .eabcl-root.eabcl-page .eabcl-chip:hover { border-color: #04203E; } .eabcl-root.eabcl-page .eabcl-chip.is-active { background: #04203E; color: #fff; border-color: #04203E; } /* ---------- Gallery ---------- */ .eabcl-root .eabcl-slide { position: absolute; inset: 0; display: none; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .eabcl-root .eabcl-slide.is-active { display: block; } .eabcl-root .eabcl-slide[hidden] { display: none; } .eabcl-root .eabcl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .eabcl-root .eabcl-dot { height: 9px; width: 9px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: #C6CFD8; box-shadow: none; transition: width .18s, background .18s; } .eabcl-root .eabcl-dot.is-active { width: 26px; background: #FA3C00; } /* ---------- Lightbox ---------- */ .eabcl-root .eabcl-lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(4, 20, 40, .92); display: flex; align-items: center; justify-content: center; padding: 20px; animation: eabclFade .2s ease; } .eabcl-root .eabcl-lightbox[hidden] { display: none; } /* ---------- FAQ ---------- */ .eabcl-root .eabcl-faq[hidden] { display: none; } .eabcl-root .eabcl-faq__a[hidden] { display: none; } .eabcl-root .eabcl-faq__q[aria-expanded="true"] .eabcl-faq__icon { transform: rotate(45deg); } /* ---------- HubSpot form states ---------- * Three mutually exclusive states, all driven by the `hidden` attribute. * * The presentation below used to live in inline style attributes on the two * placeholder divs. Because an inline `display: flex` outranks the user agent's * `[hidden] { display: none }` rule, setting `.hidden = true` in JavaScript had * no visible effect at all, and both the loading message and the error message * stayed on screen underneath a form that had rendered perfectly well. * * The `[hidden]` rule below is the explicit backstop: it beats the state rules * that follow it regardless of source order. */ .eabcl-root #eabcl-hs-loading[hidden], .eabcl-root #eabcl-hs-error[hidden] { display: none !important; } .eabcl-root .eabcl-form-state { text-align: center; color: #66717D; font: 500 1rem/1.5 "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root .eabcl-form-state--loading { display: flex; align-items: center; justify-content: center; min-height: 280px; } .eabcl-root .eabcl-form-state--error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 200px; padding: 20px; } .eabcl-root .eabcl-form-state__text { font: 500 1rem/1.6 "Roboto", Arial, Helvetica, sans-serif; color: #14202B; margin: 0; max-width: 44ch; } .eabcl-root.eabcl-page .eabcl-form-state__retry { background: #04203E; color: #fff; border: none; border-radius: 6px; padding: 13px 24px; font: 700 .95rem/1 "Roboto", Arial, Helvetica, sans-serif; min-height: 46px; cursor: pointer; } /* The target only reserves vertical space while a form is on its way. Once the * form is in, its own height takes over — reserving 320px permanently left a * gap under short forms. */ .eabcl-root .eabcl-form-target { min-height: 0; } .eabcl-root .business-center-pricing-form.is-loading .eabcl-form-target { min-height: 320px; } .eabcl-root .business-center-pricing-form.is-ready .eabcl-form-target { min-height: 0; } /* ---------- HubSpot form appearance ---------- * Scoped to this plugin's own wrapper, so HubSpot forms elsewhere on the site * are never restyled. */ .eabcl-root .business-center-pricing-form .hs-form-field { margin-bottom: 18px; } .eabcl-root .business-center-pricing-form label { display: block; font: 600 .9rem/1.4 "Roboto", Arial, Helvetica, sans-serif; color: #14202B; margin-bottom: 6px; } .eabcl-root .business-center-pricing-form .hs-form-field > label { margin-bottom: 8px; } .eabcl-root .business-center-pricing-form input[type="text"], .eabcl-root .business-center-pricing-form input[type="email"], .eabcl-root .business-center-pricing-form input[type="tel"], .eabcl-root .business-center-pricing-form input[type="number"], .eabcl-root .business-center-pricing-form textarea, .eabcl-root .business-center-pricing-form select { width: 100%; padding: 12px 14px; font: 400 16px/1.4 "Roboto", Arial, Helvetica, sans-serif; color: #14202B; border: 1.5px solid #E1E5E8; border-radius: 6px; background: #fff; } .eabcl-root .business-center-pricing-form textarea { min-height: 110px; resize: vertical; } .eabcl-root .business-center-pricing-form input:focus, .eabcl-root .business-center-pricing-form textarea:focus, .eabcl-root .business-center-pricing-form select:focus { outline: none; border-color: #04203E; box-shadow: 0 0 0 3px rgba(4, 32, 62, .16); } .eabcl-root .business-center-pricing-form .hs-button { background: #FA3C00; color: #fff; border: none; border-radius: 6px; padding: 15px 26px; font: 700 1rem/1 "Roboto", Arial, Helvetica, sans-serif; min-height: 48px; width: 100%; cursor: pointer; transition: background .15s; } .eabcl-root .business-center-pricing-form .hs-button:hover { background: #c92f00; } .eabcl-root .business-center-pricing-form .hs-error-msg, .eabcl-root .business-center-pricing-form .hs-error-msgs label { color: #b00020; font: 500 .85rem/1.4 "Roboto", Arial, Helvetica, sans-serif; } .eabcl-root .business-center-pricing-form .inputs-list { list-style: none; margin: 0; padding: 0; } .eabcl-root .business-center-pricing-form .hs-form-booleancheckbox label { font-weight: 400; font-size: .9rem; color: #445; }