/* Default state - all calculators desaturated */ .calculator { transition: opacity 0.4s ease; opacity: 0.2; filter: url(#desaturate); } /* Active states - only the matching calculator gets full saturation */ body[data-range="poor"] .calculator-poor { opacity: 1; filter: none; } body[data-range="below"] .calculator-below { opacity: 1; filter: none; } body[data-range="good"] .calculator-good { opacity: 1; filter: none; } body[data-range="great"] .calculator-great { opacity: 1; filter: none; } body[data-range="optimal"] .calculator-optimal { opacity: 1; filter: none; } /* Hide Webflow success/error panes (safety) */ .w-form-done, .w-form-fail { display: none !important; } /* After-submit elements are hidden until we set state to "after" */ [data-hydration-after] { display: none !important; } [data-hydration-state="after"] [data-hydration-after] { display: revert !important; } /* Error elements: hidden by default; show when script sets data-show */ [data-hydration-error-for] { display: none !important; } [data-hydration-error-for][data-show] { display: flex !important; } /* Tudor CSS */ /* Hide all range-specific elements by default */ .visible-poor, .visible-good, .visible-great, .visible-optimal { display: none; } /* Show elements based on body's data-range attribute */ body[data-range="poor"] .visible-poor { display: block; } body[data-range="good"] .visible-good { display: block; } body[data-range="great"] .visible-great { display: block; } body[data-range="optimal"] .visible-optimal { display: block; } body[data-range="poor"] .is-poor { background-color: rgba(255, 104, 222, 0.2); } body[data-range="good"] .is-good { background-color: rgba(215, 219, 12, 0.2); } body[data-range="great"] .is-great { background-color: rgba(18, 193, 130, 0.2); } body[data-range="optimal"] .is-optimal { background-color: rgba(18, 193, 130, 0.4); } /* Design mode: show all visible range classes with opacity 0.5 */ .wf-design-mode .visible-poor, .wf-design-mode .visible-good, .wf-design-mode .visible-great, .wf-design-mode .visible-optimal { display: block; opacity: 0.5; } /* Hide after-submit elements by default */ .visible-after-submit { display: none; } /* Show in Webflow design mode (always visible for editing) */ .wf-design-mode .visible-after-submit { display: block; opacity: 0.5; } /* Show after calculation */ html[data-calculator-state="after"] .visible-after-submit { display: block; } body { opacity: 1; } [data-calculator-error] { display: none; } [data-calculator-error][data-show] { display: flex; } [data-calculator-reset] { display: none !important; } html[data-calculator-state="after"] [data-calculator-reset] { display: flex !important; } input[aria-invalid="true"] { border-color: #b90090; } .blog-cms-hero_image { display: none; } .blog-cms-hero_layout div.margin-top.margin-xlarge { margin-top: 0rem !important; }