/* ============================================================ KEY: WordPress bridge layer ------------------------------------------------------------ This file is NOT part of the handoff package. It exists only to reconcile the design system with Avia/Enfold markup. styles.css and main.js stay verbatim. Anything WordPress specific belongs here so the vendor files never need editing. ============================================================ */ /* ---- 1. FAILSAFE: never let .reveal hide content permanently ---- styles.css sets `.reveal { opacity: 0 }` and relies on main.js to add `.is-visible`. If main.js fails to load or throws, every tagged element would stay invisible forever, which on this site would mean effectively blank pages. main.js does not set a "JS is alive" flag, and we are not allowed to modify it, so the child theme adds `.key-js` to from an inline head script and we scope the hidden state to that class. No JS, no hiding. A second failsafe in functions.php force-reveals anything still unrevealed a few seconds after load, which covers the case where the head script runs but main.js does not. ------------------------------------------------------------------ */ html:not(.key-js) .reveal, html:not(.key-js) .reveal-hero, html:not(.key-js) .t-item { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---- 2. STAGGER for Avia-generated markup ----------------------- The reference HTML sets the stagger index by hand, e.g. `style="--i:2"`. Avia's shortcodes do not expose an inline style field, so we approximate the same cadence positionally. HANDOFF.md section 7 asks for roughly a 90ms stagger. styles.css defines --stagger, so we only need to supply the index. Scoped to Enfold's column and section wrappers so it cannot leak into legacy pages that happen to use these class names. ------------------------------------------------------------------ */ .av_one_full > .reveal:nth-of-type(1), .av_one_half > .reveal:nth-of-type(1), .av_one_third > .reveal:nth-of-type(1), .flex_column > .reveal:nth-of-type(1) { --i: 0; } .av_one_full > .reveal:nth-of-type(2), .av_one_half > .reveal:nth-of-type(2), .av_one_third > .reveal:nth-of-type(2), .flex_column > .reveal:nth-of-type(2) { --i: 1; } .av_one_full > .reveal:nth-of-type(3), .av_one_half > .reveal:nth-of-type(3), .av_one_third > .reveal:nth-of-type(3), .flex_column > .reveal:nth-of-type(3) { --i: 2; } .av_one_full > .reveal:nth-of-type(4), .av_one_half > .reveal:nth-of-type(4), .av_one_third > .reveal:nth-of-type(4), .flex_column > .reveal:nth-of-type(4) { --i: 3; } .av_one_full > .reveal:nth-of-type(n+5), .av_one_half > .reveal:nth-of-type(n+5), .av_one_third > .reveal:nth-of-type(n+5), .flex_column > .reveal:nth-of-type(n+5) { --i: 4; } /* Sibling columns in a row stagger left to right. */ .flex_column.av_one_half:nth-of-type(2) .reveal { --i: 1; } .flex_column.av_one_third:nth-of-type(2) .reveal { --i: 1; } .flex_column.av_one_third:nth-of-type(3) .reveal { --i: 2; } /* ---- 3. Respect reduced motion ----------------------------------- styles.css already neutralises .reveal under prefers-reduced-motion. Repeated here so this file is safe even if load order ever changes. ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-hero, .t-item { opacity: 1 !important; transform: none !important; transition: none !important; } }