/* ========================================================================== TNG Reveal + Dark-Band Link Fix - Reusable scroll-triggered reveal: add .tng-reveal to a section wrapper, .tng-reveal-item to children (optional data-tng-reveal-delay="ms"). - Dark-band link contrast: forces light underlined links on the dark #405363 / #314250 bands (.tng-split-left, .tng-dark, [data-tng-dark]). - Brand palette only. No teal, no accents. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Dark-band link contrast fix -------------------------------------------------------------------------- */ .tng-split-left a:not(.tng-btn-outline):not(.tng-btn-solid), .tng-dark a, [data-tng-dark] a { color: #ffffff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s ease; } .tng-split-left a:not(.tng-btn-outline):not(.tng-btn-solid):hover, .tng-split-left a:not(.tng-btn-outline):not(.tng-btn-solid):focus, .tng-dark a:hover, .tng-dark a:focus, [data-tng-dark] a:hover, [data-tng-dark] a:focus { color: #cdd6dd; text-decoration: underline; } /* Astra sometimes overrides :visited — keep it light. */ .tng-split-left a:not(.tng-btn-outline):not(.tng-btn-solid):visited, .tng-dark a:visited, [data-tng-dark] a:visited { color: #ffffff; } /* -------------------------------------------------------------------------- 2. Reveal — base state (hidden until observed) -------------------------------------------------------------------------- */ .tng-reveal .tng-reveal-item { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .tng-reveal.is-revealed .tng-reveal-item { opacity: 1; transform: translateY(0); } /* Per-item stagger via data-tng-reveal-delay (in ms) */ .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="100"] { transition-delay: 100ms; } .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="200"] { transition-delay: 200ms; } .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="300"] { transition-delay: 300ms; } .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="400"] { transition-delay: 400ms; } .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="500"] { transition-delay: 500ms; } .tng-reveal.is-revealed .tng-reveal-item[data-tng-reveal-delay="600"] { transition-delay: 600ms; } /* -------------------------------------------------------------------------- 3. Suppress the legacy load-based animation on .tng-split when it is also a reveal target (otherwise the two compete). -------------------------------------------------------------------------- */ .tng-split.tng-reveal { opacity: 1 !important; animation: none !important; } /* -------------------------------------------------------------------------- 4. Reduced motion — show everything, no movement -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tng-reveal .tng-reveal-item, .tng-reveal.is-revealed .tng-reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } } /* -------------------------------------------------------------------------- 5. JS-disabled fallback — show content (no-js flag is set on by JS; if JS is off, fall back to instant visible). -------------------------------------------------------------------------- */ .tng-no-js .tng-reveal .tng-reveal-item { opacity: 1; transform: none; }