/*
* Digi4Circular — the CSS that Elementor V4 global classes cannot express.
*
* Every rule is prefixed `.elementor ` where it competes with an Elementor
* class. Elementor auto-prefixes its own generated rules (widget base styles
* AND global classes) with a `.elementor ` ancestor, giving them specificity
* (0,2,0); a bare class rule at (0,1,0) silently loses regardless of source
* order.
*
* Kept deliberately small. Anything the prop schema can express lives in a
* global class instead, because props always survive an editor re-save and
* hand-written CSS does not.
*/
/* -------------------------------------------------------------------------
* Document-level typography.
*
* `body` and `html` are not Elementor elements, so no global class can reach
* them — this has to be a stylesheet rule. It is not cosmetic: the live site's
* 14px/1.4 body metric is what sizes every block of running copy, and without
* it the consortium card grew 130px taller than the original purely from
* line-height drift.
*
* html at 62.5% makes 1rem = 10px, which is what every rem/em value copied
* from the original theme is measured against.
* ---------------------------------------------------------------------- */
html { font-size: 62.5%; }
body {
font: 300 14px/1.4 'Inter', Helvetica, Arial, sans-serif;
color: #444;
background-color: #f2f2f2;
}
/* The original theme's own img rule, and it is load-bearing rather than
* cosmetic. An inline sits on the text baseline, so the space reserved
* beneath it depends on vertical-align: the theme's `bottom` leaves 1.2px,
* Elementor's `middle` leaves 4.6px. That 3.4px inflated every news row and
* cascaded into a 5px error on the card height and 4px on the whole page. */
img {
max-width: 100%;
vertical-align: bottom;
}
/* -------------------------------------------------------------------------
* The rotating header rims.
*
* The atomic prop schema has no @keyframes surface, and a global class's
* custom_css lands INSIDE that class's own rule block — so it can say
* `& svg g#InnerRim{animation:d4cSpin …}` but cannot open a top-level
* @keyframes. This is the one thing that genuinely has to live in a stylesheet.
* ---------------------------------------------------------------------- */
@keyframes d4cSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Honour a reduced-motion preference by stopping the rims where they are,
rather than speeding them up — a near-zero duration turns a slow rotation
into a single-frame jump, which is worse than the animation. */
@media (prefers-reduced-motion: reduce) {
.elementor .d4c-hero-svg-art svg g#InnerRim,
.elementor .d4c-hero-svg-art svg g#MidRim,
.elementor .d4c-hero-svg-art svg g#OutterRim {
animation: none !important;
}
}
/* -------------------------------------------------------------------------
* About page: the "Read more" / "Collapse" toggle.
*
* Styled here rather than as a global class on purpose. The button is created
* at runtime by d4c.js, and Elementor's global-class bundler only counts a
* class as "used" when it appears in `settings.classes` on a real atomic
* element — so a global class here would be dropped from the compiled CSS
* silently, while still showing up in the DOM.
* ---------------------------------------------------------------------- */
.elementor .d4c-readmore {
display: block;
width: max-content;
/* centred, not right-aligned: the live button is created with
* `marginCenter dispBlock` and matches the plain `button.greenButton` rule
* (uniform 25px radius), not the `.blockStyle a.greenButton` rule with the
* asymmetric corners — that one only applies to anchors. */
margin: 0 auto;
background: var(--Bright-Green, #0db14b);
color: #fff;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
/* `normal`, not the inherited 1.4 — a