/* Looping decorative motion. Applied through the anim-* global classes; entrance effects are V4 interactions. */ @keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(-1.5deg)}} @keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-8deg)}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} @keyframes wiggle-badge{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(2deg)}} @keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}50%{transform:scale(1)}} @keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}} @keyframes ring{0%,100%{transform:translateY(-50%) rotate(0)}15%{transform:translateY(-50%) rotate(-3deg)}30%{transform:translateY(-50%) rotate(2.5deg)}45%{transform:translateY(-50%) rotate(-1.5deg)}60%{transform:translateY(-50%) rotate(1deg)}75%{transform:translateY(-50%) rotate(0)}} @keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(6px,-10px)}66%{transform:translate(-4px,-4px)}} .elementor .anim-float{animation:float 5s ease-in-out infinite} .elementor .anim-wave{display:inline-block;transform-origin:70% 90%;animation:wave 3s ease-in-out infinite} .elementor .anim-bob{display:inline-block;animation:bob 2.4s ease-in-out infinite} .elementor .anim-wiggle{display:inline-block;transform-origin:left center;animation:wiggle 3s ease-in-out infinite} .elementor .anim-wiggle-badge{animation:wiggle-badge 2s ease-in-out infinite} .elementor .anim-beat{display:inline-block;animation:beat 1.6s ease-in-out infinite} .elementor .anim-twinkle{animation:twinkle 4s ease-in-out infinite} .elementor .anim-drift{animation:drift 9s ease-in-out infinite} .elementor .anim-drift-rev{animation:drift 11s ease-in-out infinite reverse} .elementor .anim-drift-slow{animation:drift 13s ease-in-out infinite} .elementor .anim-ring{animation:ring 6s ease-in-out infinite} /* Heading line balance: the design relies on text-wrap:balance, which the Elementor 4.2.4 converter cannot express. Applied to the heading classes only; no other layout rule belongs here. */ .elementor .h1,.elementor .h2,.elementor .h2-light,.elementor .h2-sm,.elementor .h2-cta{text-wrap:balance} /* The only descendant rules in the project: inline emphasis inside V4 text (see pitfalls.md). html-v3 strips every attribute, so an inline / cannot carry a class of its own; it is styled through a class on its parent instead. em-navy is the for-families checklist, whose design rule is `.checks strong{color:#1A3375}`; em-ink is the safety page's card paragraphs, whose design rule is an inline ``. */ .elementor .hl-wavy em{font-style:normal;text-decoration:underline wavy var(--sky);text-decoration-thickness:.06em;text-underline-offset:.14em} .elementor .em-accent em{font-style:normal;color:var(--sky)} .elementor .em-navy strong{color:var(--navy)} .elementor .em-ink strong{color:var(--ink)} /* An inline inside light-on-navy copy (the daycare providers help row). The kit's own link colour is navy, unreadable there, and html-v3 strips every attribute so the cannot carry a class of its own. */ .elementor .link-light a{color:var(--white);font-weight:600} /* Elementor's own base rule is `.e-con{width:var(--width)}` with `--width:100%` by default * (elementor-frontend.min.css), which stretches every atomic container to the full width of its * parent. For a row-direction e-flexbox parent this forces flex-basis:auto to resolve to 100%, so * each child wraps onto its own line instead of sitting side by side (header nav, footer bottom * bar, any multi-item row). For a column-direction flex parent or a grid parent it is harmless * (an auto width lets the existing align-items:stretch / grid stretch behaviour produce the same * fill). Set the `--width` CUSTOM PROPERTY, not the `width` property itself: setting `width` * directly (an earlier version of this rule) competes on the `width` property against every * global class's own explicit width (e.g. `.bubble{width:44px}`, `.bubble-40{width:40px}`) purely * by specificity, and `.elementor .e-flexbox-base.e-con{width:...}` at (0,3,0) beats a plain * `.elementor .bubble{...}` at (0,2,0) regardless of which one is meant to win — it silently * shrank every sized bubble/icon to its unsized default. Overriding `--width` instead leaves the * `width` property itself alone: Elementor's own `.e-con{width:var(--width)}` (0,1,0) still loses * to any class that sets `width` directly, exactly as it always did, and only picks up our * `auto` when nothing more specific overrides `width`. Scope it to e-flexbox containers only * (div-block/grid children in the project already carry an explicit width on their own class). * See pitfalls.md. */ .elementor .e-flexbox-base.e-con{--width:auto} /* FAQ items (Plan 2): the toggle script adds/removes .is-open on the item container. */ .elementor .faq-answer{display:none} .elementor .faq-item.is-open .faq-answer{display:block} /* The question row is a real