/* ========================================================================== NOVO V2 — the mockup layer. Loads AFTER shared.css and only adds; nothing here restyles an existing component, so the live site cannot be affected by accident. Espresso palette and the three faces stay — v2 changes the SHAPES and the MOTION, which is where the flatness actually lived. Design position vs HomeJab: they are a dark-UI marketplace — slick, anonymous, national. We are a premium local studio heading national. So v2 keeps the warm paper ground (nobody in this market owns it) and takes their moves: full-bleed media, evidence-bento, one gold phrase per headline, metric chips, and a single door into pricing. ========================================================================== */ /* ---- motion system -------------------------------------------------------- One reveal pattern for the whole site. JS adds .v2-seen when a [data-v2r] element enters the viewport; children with [data-v2r-child] stagger. The resting state is ALWAYS the keyframe's final frame — transitions on class-changed properties have failed too many times in this codebase. */ @keyframes v2Rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} @keyframes v2Fade{from{opacity:0;}to{opacity:1;}} @keyframes v2Grow{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* PROGRESSIVE, as of the bare-pages incident: content is visible by DEFAULT. v2.js adds .v2-anim to only when it has actually started and the observer exists — so a cached stylesheet, a blocked script, a JS error or any browser quirk costs the animation, never the page. The old way hid everything at parse time and trusted JS to un-hide it; Justin's phone saw pages that were "nothing but pictures" because that trust was misplaced. */ .v2-anim [data-v2r]{opacity:0;} .v2-anim [data-v2r].v2-seen{opacity:1;animation:v2Rise .7s cubic-bezier(.16,.6,.24,1) both;} .v2-anim [data-v2r].v2-seen [data-v2r-child]{animation:v2Rise .6s cubic-bezier(.16,.6,.24,1) both; animation-delay:calc(var(--v2i,0)*90ms);} @media (prefers-reduced-motion:reduce){ .v2-anim [data-v2r],.v2-anim [data-v2r].v2-seen,.v2-anim [data-v2r].v2-seen [data-v2r-child]{opacity:1;animation:none;} } /* ---- the gold phrase ------------------------------------------------------ HomeJab's one reliably premium move: a single accent phrase inside a big serif headline. Ours is gold, and gets an underline that draws itself. */ /* nowrap keeps a SHORT highlight from stranding a word on its own line, but a multi-word phrase like "sell for more." cannot fit a 375px screen and ran straight off the edge. text-decoration underlines each line correctly on its own, so wrapping costs nothing below the breakpoint. */ /* Colour only, no underline. An underline is the web's universal signal for "this is a link", and a reader kept trying to click the highlighted words in headings (2026-09-01). The gold still lifts the phrase, and nothing here carries meaning that colour alone must convey — the sentence reads the same without it — so dropping the line costs nobody anything. */ .v2-hl{color:var(--gold-deep);white-space:nowrap;text-decoration:none;} /* The hero sits on a dark photograph, so its highlight needs the BRIGHT gold — gold-deep on a dusk exterior is invisible, which is exactly how the "IL." in "…Hinsdale, IL." disappeared on every town page. */ .on-dark .v2-hl,.sec-dark .v2-hl,.v2-dark .v2-hl, .v2-hero .v2-hl,.v2-cta .v2-hl{color:var(--gold);} /* ---- hero ----------------------------------------------------------------- Full-viewport media hero with a video slot: the