/* ========================================================================== * AdaptClose experiment framework — variant visibility gating (backup layer) * (paired with experiments/framework.php + assets/experiments.js) * * Every experiment renders ALL of its variants into the page, but exactly one *
is visible at a time. * * The PRIMARY gate is inline, not this file: framework.php renders every * non-default variant with an inline `display:none`, and experiments.js sets * inline `display` on the chosen/losing variants. That keeps "show exactly one * variant" working even when this stylesheet is absent (skipped for logged-in * admins, cache miss, class mismatch). The rules below are a defense-in-depth * fallback that mirrors the inline state via the [data-ac-shown] marker: * • the server-marked default is visible before any JS runs; * • the variants never appear on screen at the same time; * • swapping variants is a display toggle in a shared container → no CLS. * This file loads in so gating is applied before first paint. * ========================================================================== */ .ac-exp__variant { display: none; } .ac-exp__variant[data-ac-shown] { display: block; } /* -------------------------------------------------------------------------- * Per-variant style overrides (experiment: website-above-the-fold / test) * * HeroTest1's headline is longer than control's, so it uses a smaller H1. * It carries its own class (.ac-exp-hero-h1) with its own responsive steps * here — deliberately NOT reusing the theme's shared [style*="font-size:76px"] * hook in responsive.css, so control's hero sizing is never affected. * Breakpoints mirror responsive.css (tablet 768–1023px, mobile ≤767px). * ------------------------------------------------------------------------ */ @media (max-width: 1023px) and (min-width: 768px) { .ac-exp-hero-h1 { font-size: 36px !important; } } @media (max-width: 767px) { .ac-exp-hero-h1 { font-size: 28px !important; line-height: 1.08 !important; } }