/* Riverina AI — "framework feel" enhancement layer (additive, dependency-free). Everything here is opt-in: gated by prefers-reduced-motion and pointer type in enhance.js via the .fx-on flag on . With JS off or motion reduced, none of this applies and the base site is unchanged. */ /* ---- 1. Scroll progress bar ------------------------------------------------ */ .fx-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 999; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent, #b4562a), #d98a4a); will-change: transform; pointer-events: none; } /* ---- 2. Condensing header: REMOVED ------------------------------------------ site.css keeps .site-header position: relative (and site.css is frozen), so the header scrolls out of view within ~100px. A "condensed" state can never be observed: the padding transition had no rule that ever changed padding, and the .fx-stuck plate only ever painted a stale translucent band over in-flow content. Making it work would require position: sticky/fixed, which changes layout behaviour on all nine pages and interacts with the hero wash and scroll anchoring — out of scope for a purely presentational layer. The dead declarations are removed; enhance.js may still toggle .fx-stuck, which is now a harmless no-op, and header behaviour matches the baseline exactly. */ /* ---- 3. Richer scroll reveals (upgrade the existing .rv / .step / .offer) --- */ /* Base site fades .rv in; we add a longer travel + easing + blur clear, and stagger grouped children so rows cascade instead of popping together. */ .fx-on .rv, .fx-on .step, .fx-on .offer, .fx-on .ledger-line { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1); will-change: opacity, transform, filter; } .fx-on .rv.is-in, .fx-on .step.is-in, .fx-on .offer.is-in, .fx-on .ledger-line.is-in { opacity: 1; transform: none; filter: blur(0); } /* Stagger: enhance.js stamps --fx-i (0,1,2…) on siblings within a group. */ .fx-on [style*="--fx-i"], .fx-on .step, .fx-on .offer, .fx-on .ledger-line { transition-delay: calc(var(--fx-i, 0) * 90ms); } /* Per-word reveal: give the base .wr words a little rise + blur too. */ .fx-on .wr .w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(4px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease; transition-delay: calc(var(--fx-i, 0) * 45ms); } .fx-on .wr.is-in .w { opacity: 1; transform: none; filter: blur(0); } /* ---- 4. Parallax targets --------------------------------------------------- */ .fx-on .hero-field, .fx-on .lineart-divider img { will-change: transform; } /* The divider img is scaled 1.04 by the parallax. Compensate its layout width so the scaled rect lands exactly on the wrapper edges (100%/1.04 * 1.04 = 100%), and clip any sub-pixel excess on its direct wrapper. overflow-x: clip (not hidden) so no scroll container is created — sticky headers and scroll anchoring are untouched — and the y axis stays visible for the vertical parallax travel. */ .fx-on .lineart-divider { overflow-x: clip; } .fx-on .lineart-divider img { width: calc(100% / 1.04); margin-inline: auto; } /* ---- 5. Custom cursor (fine pointer only) ---------------------------------- */ .fx-cursor { display: none; } /* Painted in normal blend mode. mix-blend-mode: multiply made the cursor invisible on the #152022 footer (dot multiplied to ~(15,11,6), ~1.1:1) while the native cursor is hidden. --fx-cursor-ink is rust lifted 18% toward white (#A83E0E -> #B86139), the mid-tone that clears 3:1 against BOTH grounds: 3.71:1 on #EDEFE6 and 3.81:1 on the #152022 footer. Plain rust (#A83E0E) is 2.66:1 on the footer, so it cannot be used unblended. */ .fx-cursor { --fx-cursor-ink: #B86139; } .fx-cursor-on .fx-cursor { display: block; position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; /* Nothing paints until the first real pointer movement flips .fx-cursor-live on the root. */ visibility: hidden; } .fx-cursor-live .fx-cursor { visibility: visible; } /* Take dot and ring out of flow so they can never render at a flow position: their location comes solely from the JS-set transform. */ .fx-cursor .fx-cursor-dot, .fx-cursor .fx-cursor-ring { position: absolute; top: 0; left: 0; } .fx-cursor-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-cursor-ink, #B86139); transform: translate(-50%, -50%); } .fx-cursor-ring { width: 34px; height: 34px; border-radius: 50%; /* Solid cursor ink: the old translucent 45% ink border landed at ~1.2:1 over the footer. 2px (was 1.5px) so the ring reads at speed on both grounds without antialiasing washing it out. */ border: 2px solid var(--fx-cursor-ink, #B86139); transform: translate(-50%, -50%); transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .25s ease; } .fx-cursor-on.fx-cursor-hot .fx-cursor-ring { width: 52px; height: 52px; border-color: var(--fx-cursor-ink, #B86139); } /* Hide the native cursor only once our ring is actually painting. */ .fx-cursor-live, .fx-cursor-live a, .fx-cursor-live button { cursor: none; } /* ---- 6. Magnetic / lift on primary buttons -------------------------------- */ .fx-on .btn { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .2s ease; will-change: transform; } .fx-on .btn:hover { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink, #1c1c1a) 55%, transparent); } /* ---- 7. Live footer clock -------------------------------------------------- */ .fx-clock { font-variant-numeric: tabular-nums; opacity: .85; } .fx-clock[hidden] { display: none; } /* ---- 8. Thumb CTA de-duplication ------------------------------------------ At <= 860px site.css pins .thumb-cta to the viewport bottom, while every page also carries an identical "Book a conversation" button in .site-footer, so the same call to action lands twice about 90px apart. enhance.js flags the bar as redundant with .fx-cta-off on the root and this retires it. visibility (not opacity or pointer-events alone) is the hiding mechanism: an opacity-0 bar keeps its tab stop, so keyboard focus lands on an invisible off-screen link, and pointer-events only suppresses the mouse. A visibility: hidden subtree is not focusable, not hit-testable and not in the accessibility tree, so the duplicate stop disappears with it. body padding-bottom exists solely to clear this bar, so it is zeroed in the same state. Left in place it would expose a 112px strip of pale ground below the dark footer. It is untouched whenever the bar IS shown. .fx-cta gates the transition so a JS-off page keeps the base rendering exactly. Under prefers-reduced-motion site.css already forces transition: none !important, so both transitions resolve instantly with no extra guard here, and the hidden state is reached identically. */ @media (max-width: 860px) { .fx-cta .thumb-cta { transition: opacity .28s ease, visibility 0s linear 0s; } .fx-cta-off .thumb-cta { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; } .fx-cta-off body { padding-bottom: 0; } } /* ---- Respect motion preference at the CSS layer too (belt and braces) ------ */ @media (prefers-reduced-motion: reduce) { .fx-on .rv, .fx-on .step, .fx-on .offer, .fx-on .ledger-line, .fx-on .wr .w { opacity: 1; transform: none; filter: none; transition: none; } .fx-progress, .fx-cursor { display: none !important; } }