/* ========================================================================== Alliance Stats Blocks — styles Every animated value (bar widths/heights, big numbers) is rendered by PHP at its REAL final size. That means charts are correct and visible even if JS never loads. JS only adds an "asb-js" class to ; only then do the rules below zero elements out until they scroll into view, and only then do the count-up / stagger animations run. Removing JS = no animation, but never a broken/invisible chart. ========================================================================== */ .asb-wrap { --asb-green: #5fbf74; --asb-green-dark: #3fa15a; --asb-dark: #16233a; --asb-gray-text: #6b7280; --asb-bg: #ffffff; --asb-track: #e9ebee; --asb-track-dark: #d7dadf; --asb-radius: 14px; --asb-ease: cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; gap: 24px; font-family: inherit; } .asb-block { background: var(--asb-bg); border-radius: var(--asb-radius); padding: 28px 32px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .asb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asb-green-dark); margin-bottom: 8px; } .asb-heading { font-size: 22px; font-weight: 700; color: var(--asb-dark); margin: 0 0 12px; line-height: 1.3; } .asb-desc { color: var(--asb-gray-text); font-size: 15px; line-height: 1.6; margin: 0 0 14px; max-width: 46ch; } .asb-highlight { font-weight: 700; color: var(--asb-dark); border-left: 3px solid var(--asb-green); padding-left: 12px; margin: 0 0 18px; font-size: 15px; } .asb-footnote { font-size: 13px; color: var(--asb-gray-text); margin: 14px 0 0; } /* -------------------------------------------------------------------- Big stat number (used in bar_list header, e.g. "84%") -------------------------------------------------------------------- */ .asb-big-stat { font-size: 52px; font-weight: 800; color: var(--asb-green); line-height: 1; margin-bottom: 6px; } .asb-big-stat__pct { font-size: 0.55em; font-weight: 700; } .asb-big-stat__desc { color: var(--asb-gray-text); font-size: 14px; max-width: 40ch; margin: 0 0 20px; } /* -------------------------------------------------------------------- Layout 1: bar_list -------------------------------------------------------------------- */ .asb-bars { display: flex; flex-direction: column; gap: 14px; } .asb-bar-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; } .asb-bar-row__label { font-size: 14px; font-weight: 600; color: var(--asb-dark); text-align: right; } .asb-bar-row__track { position: relative; background: var(--asb-track); border-radius: 999px; height: 30px; overflow: hidden; display: flex; align-items: center; } .asb-bar-row__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--asb-green), var(--asb-green-dark)); border-radius: 999px; transition: width 1s var(--asb-ease); transition-delay: var(--asb-delay, 0ms); } .asb-bar-row__value { position: relative; z-index: 1; margin-left: auto; padding-right: 12px; font-size: 13px; font-weight: 700; color: var(--asb-dark); } /* -------------------------------------------------------------------- Layout 2: grouped_bars (year-over-year, vertical) -------------------------------------------------------------------- */ .asb-grouped-bars__groups { display: flex; flex-wrap: wrap; gap: 36px; } .asb-group__label { font-size: 16px; font-weight: 700; color: var(--asb-dark); margin-bottom: 14px; } .asb-group__bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; } .asb-year-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 34px; height: 100%; } .asb-year-bar__value { font-size: 11px; font-weight: 700; color: var(--asb-gray-text); margin-bottom: 4px; white-space: nowrap; } .asb-year-bar__track { position: relative; width: 100%; flex: 1; background: transparent; display: flex; align-items: flex-end; } .asb-year-bar__fill { width: 100%; border-radius: 6px 6px 0 0; background: var(--asb-track-dark); transition: height 0.9s var(--asb-ease); transition-delay: var(--asb-delay, 0ms); } .asb-year-bar.is-current .asb-year-bar__fill { background: linear-gradient(180deg, var(--asb-green), var(--asb-green-dark)); } .asb-year-bar.is-current .asb-year-bar__value { color: var(--asb-green-dark); } .asb-year-bar__year { font-size: 11px; color: var(--asb-gray-text); margin-top: 6px; } /* -------------------------------------------------------------------- Layout 3: comparison_bars -------------------------------------------------------------------- */ .asb-comparison-bars--split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; } .asb-comparison-bars--full .asb-comparison-bars__text { margin-bottom: 22px; } .asb-legend { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; font-size: 13px; color: var(--asb-dark); font-weight: 600; } .asb-legend__item { display: inline-flex; align-items: center; gap: 6px; } .asb-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .asb-swatch--a { background: var(--asb-green); } .asb-swatch--b { background: var(--asb-dark); } .asb-legend__unit { margin-left: auto; color: var(--asb-gray-text); font-weight: 400; } .asb-comp-group { margin-bottom: 16px; } .asb-comp-group__label { font-size: 13px; font-weight: 700; color: var(--asb-dark); margin-bottom: 6px; } .asb-comp-group__bars { display: flex; flex-direction: column; gap: 4px; } .asb-comp-bar { position: relative; display: block; height: 26px; border-radius: 4px; background: var(--asb-track); overflow: hidden; } .asb-comp-bar__fill { position: absolute; inset: 0; border-radius: 4px; transition: width 1s var(--asb-ease); transition-delay: var(--asb-delay, 0ms); } .asb-comp-bar--a .asb-comp-bar__fill { background: var(--asb-green); } .asb-comp-bar--b .asb-comp-bar__fill { background: var(--asb-dark); } .asb-comp-bar__value { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--asb-dark); } /* -------------------------------------------------------------------- Layout 4: tabbed_stats -------------------------------------------------------------------- */ .asb-tabs__nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .asb-tabs__btn { border: none; background: var(--asb-track); color: var(--asb-dark); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .asb-tabs__btn.is-active { background: var(--asb-dark); color: #fff; } .asb-tabs__panel { display: none; } .asb-tabs__panel.is-active { display: block; animation: asb-fade-in 0.35s ease; } @keyframes asb-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .asb-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } /* All cards share one style — no special-cased "featured" first card. */ .asb-stat-card { background: var(--asb-track); border-radius: 12px; padding: 20px; } .asb-stat-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--asb-gray-text); margin-bottom: 10px; } .asb-stat-card__value { font-size: 32px; font-weight: 800; color: var(--asb-dark); margin-bottom: 6px; } .asb-stat-card__desc { font-size: 13px; color: var(--asb-gray-text); line-height: 1.4; } /* -------------------------------------------------------------------- Multi-slide Grouped Year Bars: side-by-side row (e.g. a Horizontal slide next to a Vertical slide), not stacked. -------------------------------------------------------------------- */ .asb-row-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; } .asb-row-grid > .asb-block { flex: 1 1 300px; min-width: 280px; } /* -------------------------------------------------------------------- Carousel (prev/next arrows + dot pagination) -------------------------------------------------------------------- */ .asb-carousel__viewport { position: relative; } .asb-carousel__slide { display: none; } .asb-carousel__slide.is-active { display: block; animation: asb-fade-in 0.4s ease; } .asb-carousel__slide .asb-block { box-shadow: none; } .asb-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; } .asb-carousel__arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--asb-dark); color: #fff; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.15s ease; } .asb-carousel__arrow:hover { transform: scale(1.06); } .asb-carousel__dots { display: flex; align-items: center; gap: 8px; } .asb-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--asb-track-dark); cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.2s ease; } .asb-carousel__dot.is-active { background: var(--asb-green); transform: scale(1.3); } /* -------------------------------------------------------------------- JS-driven scroll-in animation (progressive enhancement only) With no JS, everything above renders at its final, correct, visible state. Only once gets .asb-js does a not-yet-visible block get zeroed out, ready for the IntersectionObserver reveal in asb-animations.js to animate it back to its real (inline-style) value. All of these rules are additionally scoped to ".asb-wrap:not(.asb-no-animate)" — the Elementor widget's "Animations" switcher (and the shortcode's animate="no" attribute) add "asb-no-animate" to a specific instance's wrapper, which opts that instance out of the zero-out/reveal dance entirely so its bars/numbers/cards just show at their final state. -------------------------------------------------------------------- */ html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-bar-row__fill, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-comp-bar__fill { width: 0 !important; } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-year-bar__fill { height: 0 !important; } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-bar-row__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-comp-bar__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-year-bar__value { opacity: 0; } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block .asb-bar-row__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block .asb-comp-bar__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block .asb-year-bar__value { transition: opacity 0.4s ease; transition-delay: calc(var(--asb-delay, 0ms) + 500ms); } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block.is-visible .asb-bar-row__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block.is-visible .asb-comp-bar__value, html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block.is-visible .asb-year-bar__value { opacity: 1; } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block:not(.is-visible) .asb-stat-card { opacity: 0; transform: translateY(10px); } html.asb-js .asb-wrap:not(.asb-no-animate) .asb-block .asb-stat-card { transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: var(--asb-delay, 0ms); } /* -------------------------------------------------------------------- Responsive -------------------------------------------------------------------- */ @media (max-width: 720px) { .asb-block { padding: 22px 18px; } .asb-comparison-bars--split { grid-template-columns: 1fr; } .asb-bar-row { grid-template-columns: 96px 1fr; } .asb-grouped-bars__groups { gap: 24px; } }