:root { --font-stevie: "stevie-sans", sans-serif; --font-inter: "inter", sans-serif; --counter-number-font-size: clamp(1.5rem, 0.9705rem + 2.4204vw, 3.875rem); --counter-number-line-height: 1.1; --counter-number-font-weight: 600; --counter-text-font-size: clamp(0.75rem, 0.7221rem + 0.1274vw, 0.875rem); --counter-text-line-height: 1.1; --counter-text-font-weight: 400; --counter-number-font-size-compact: calc(var(--counter-number-font-size) * 0.9); --context-title-font-size: clamp(1.125rem, 1.0414rem + 0.3822vw, 1.5rem); --context-title-line-height: 1.1; --context-title-font-weight: 500; --context-subtitle-font-size: clamp(0.875rem, 0.811rem + 0.292vw, 1.125rem); --context-subtitle-line-height: 1.1; --context-subtitle-font-weight: 400; --gap-custom: 20px; --sep-color: rgba(0, 0, 0, .15); } /* Typography */ .stats-container .stat-item .stat-title { font-size: var(--counter-text-font-size); line-height: var(--counter-text-line-height); font-weight: var(--counter-text-font-weight); } .stats-container .stat-item .hm-counter { font-family: var(--font-stevie); font-size: var(--counter-number-font-size); line-height: var(--counter-number-line-height); font-weight: var(--counter-number-font-weight); } .add-context-item .context-title { font-family: var(--font-stevie); font-size: var(--context-title-font-size); line-height: var(--context-title-line-height); font-weight: var(--context-title-font-weight); } .add-context-item .context-subtitle { font-family: var(--font-inter); font-size: var(--context-subtitle-font-size); line-height: var(--context-subtitle-line-height); font-weight: var(--context-subtitle-font-weight); } /* Compact variant (long numbers) */ .stats-container .stat-item.stat-item--compact .hm-counter{ font-size: var(--counter-number-font-size-compact); line-height: var(--counter-number-line-height); } .stats-container .stat-item.stat-item--compact .stat-row{ gap: 0.25rem; } /* Layout */ .stats-container { display: flex; flex-direction: row; justify-content: center; align-items: stretch; } .stat-item { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; border-left: 1px solid var(--sep-color); } .stat-item:first-child { border-left: 0; padding-left: 0; } /* Hide the entire block (and collapse its height) until ready */ .stats-container { opacity: 0; max-height: 0; overflow: hidden; } /* Hide dividers while pending */ .stats-container .stat-item { border-color: transparent; } /* Reveal when ready (JS adds .hmh-counters-ready to ) */ .hmh-counters-ready .stats-container { opacity: 1; max-height: none; overflow: visible; transition: opacity .2s ease; } /* Restore dividers once visible */ .hmh-counters-ready .stats-container .stat-item { border-color: var(--sep-color); } /* NEW: base stat row (no floats) */ .stat-row { display: flex; flex-direction: column; /* stack number over title on desktop */ align-items: center; gap: .25rem; } /* No floats anywhere */ .hm-counter { display: block; } .stat-title { display: block; } /* ADDT CONTEXT SECTION */ .add-context-item { display: flow-root; } .context-container { display: flex; flex-direction: column; } .add-context-item.has-image + .add-context-item.has-image { margin-top: calc(var(--gap-custom) * 2); } .add-context-item .context-subtitle { margin-block-end: 0; padding: 0 0 20px 0; } .add-context-item .context-image { width: 100%; max-width: 1100px; height: auto; object-fit: cover; object-position: center; display: block; /* Float removed; align the image to the right via auto left margin */ margin-left: auto; } /* Responsive */ @media (max-width: 768px) { .stats-container { flex-direction: column; gap: var(--gap-custom); } .stat-item { border-left: 0; flex-direction: row; justify-content: space-between; align-items: center; } .stat-row { /* switch to horizontal layout with divider */ flex-direction: row; align-items: baseline; width: 100%; } .stat-row .stat-title { order: 1; text-align: right; white-space: nowrap; } .stat-row::before { content: ""; order: 2; flex: 1 1 auto; border-bottom: 1px solid var(--sep-color); margin: 0 .75rem; transform: translateY(-0.15em); } .stat-row .hm-counter { order: 3; white-space: nowrap; } } @media (max-width: 480px){ .stats-container .stat-item .stat-title.stat-title--small{ font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.8rem); } }