/* ============================================================================ app.css — STATE + POSITIONING glue for the jQuery interaction layer. This file ONLY adds the bits theme.css does not already provide: the open/ closed states the JS toggles, the off-canvas mobile-nav sheet, the scroll- progress bar chrome, and a couple of carousel/active helpers. It deliberately does NOT re-declare any animation theme.css already owns: - .lang-pop — theme.css animates it in (langPopIn) but has NO hidden default (React used to conditionally mount it), so we gate visibility off [data-lang-pop].is-open. - .chat-panel / .atlas-pop — same story: theme.css animates the panel IN on mount; here we provide the CLOSED state so it's hidden until [data-chat-panel].is-open. - .faq-* (chevron / grid-rows / answer) — fully owned by theme.css via [data-open='true']; we only add a harmless overflow fallback for any non-grid panel. Loads LAST (after utilities.css) so these state rules win. ============================================================================ */ /* ───────────────────────────── Scroll progress ───────────────────────────── */ /* Slim gold reading-progress bar pinned to the very top of the viewport. The inner [data-scroll-progress] bar is scaled on the X axis by app.js. */ .atlas-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; } .atlas-scroll-progress-bar { height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 0.08s linear; background: linear-gradient(90deg, #726651 0%, #B58A4B 35%, #E8D8A8 55%, #B58A4B 75%, #726651 100%); } /* ─────────────────────────────── Mobile nav ──────────────────────────────── */ /* BOTTOM SHEET: slides up from the bottom edge with a rounded top + grab handle; a dim overlay sits beneath it. app.js toggles .is-open on both + 'mobile-nav-open' on (scroll-lock), and runs the Products accordion + swipe-to-dismiss. */ [data-nav-sheet] { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); z-index: 210; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top-left-radius: 22px; border-top-right-radius: 22px; box-shadow: 0 -10px 44px -14px rgba(14, 14, 15, 0.3); pointer-events: none; } [data-nav-sheet].is-open { transform: translateY(0); pointer-events: auto; } /* Grab handle — the drag affordance at the top of the sheet. */ [data-nav-handle] { display: flex; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; } [data-nav-handle]::before { content: ''; width: 40px; height: 4px; border-radius: 999px; background: rgba(14, 14, 15, 0.18); } /* Products accordion — collapsed by default so the sheet opens compact. */ [data-nav-accordion-panel] { max-height: 0; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } [data-nav-accordion].is-open>[data-nav-accordion-panel] { max-height: 460px; } [data-nav-accordion-toggle] [data-chevron] { transition: transform 0.25s ease; } [data-nav-accordion].is-open [data-nav-accordion-toggle] [data-chevron] { transform: rotate(180deg); } [data-nav-overlay] { position: fixed; inset: 0; background: rgba(14, 14, 15, 0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 209; } [data-nav-overlay].is-open { opacity: 1; visibility: visible; pointer-events: auto; } body.mobile-nav-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { [data-nav-sheet], [data-nav-overlay] { transition: none; } } /* ───────────────────────────── Language popover ──────────────────────────── */ /* theme.css's .lang-pop is positioned + runs the langPopIn entrance animation, but it has no hidden state of its own (React mounted it only when open). In the static build the popover is always in the DOM, so we hide it until the JS adds .is-open. Using display:none lets theme.css's mount animation replay each time it's shown (matching the React remount). */ [data-lang-pop]:not(.is-open) { display: none; } /* ─────────────────────────────── FAQ panels ──────────────────────────────── */ /* theme.css owns the FAQ open animation via [data-open='true'] + the grid-template-rows 0fr→1fr trick (.faq-panel / .faq-panel-inner already clip overflow). This is only a defensive fallback so any panel that is NOT the themed grid panel (e.g. one the JS height-animates directly) still clips. */ [data-faq-panel] { overflow: hidden; } /* ──────────────────────────── Atlas chat widget ──────────────────────────── */ /* theme.css's .chat-panel / .atlas-pop animate the panel IN on mount but never define a closed state. Provide the hidden state so the panel stays gone until app.js adds .is-open; display:none lets the entrance animation replay on open (mirrors the React conditional mount). */ [data-chat-panel] { display: none; } [data-chat-panel].is-open { display: flex; } /* When the panel is open, hide the floating launcher (React swapped one for the other). Guarded so it's a no-op if the markup keeps both visible by design. */ [data-chat-launcher].is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Optional sequenced reveal of chat bubbles: app.js may add .is-revealing to the panel and stamp .atlas-msg children with .is-shown one-by-one. Until a bubble is shown it sits hidden; once shown, theme.css's .atlas-msg keyframe plays. If app.js never engages this (static stack), nothing here applies. */ [data-chat-panel].is-revealing .atlas-msg:not(.is-shown) { opacity: 0; } @media (prefers-reduced-motion: reduce) { [data-chat-panel].is-revealing .atlas-msg:not(.is-shown) { opacity: 1; } } /* ─────────────────────── Header slide-up brand CTAs ──────────────────────── */ /* The React Header hides the green Activate / blue Found pills over the hero and slides them up once you scroll past it. app.js toggles .is-visible on the [data-header-ctas] group; this owns the hidden→shown transition (it wins over the group's static opacity-0 utility classes since app.css loads last). The group keeps its `hidden xl:flex` responsive display from the markup. */ [data-header-ctas] { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } [data-header-ctas].is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { [data-header-ctas] { transition: none; } } /* ──────────────────────────── Video lightbox ─────────────────────────────── */ /* A reusable click-to-play film overlay (app.js §2c, [data-video-open]). The poster sits inline; the player opens centred over a dark scrim. Loading the film behind a click means an older / low-res video never dominates the page, and the 16:9 frame letterboxes any 4:3 source cleanly on black. */ .vid-lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); } .vid-lightbox.is-open { display: flex; } .vid-lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 11, 12, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: vidFade 0.25s ease; } .vid-lightbox-dialog { position: relative; width: min(1040px, 100%); } .vid-lightbox-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8); animation: vidRise 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .vid-lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Portrait variant (YouTube Shorts) — a phone-shaped 9:16 frame, sized off the viewport height so it never overflows. Toggled by .is-portrait (app.js). */ .vid-lightbox.is-portrait .vid-lightbox-dialog { width: auto; } .vid-lightbox.is-portrait .vid-lightbox-frame { aspect-ratio: 9 / 16; height: min(84vh, 780px); width: auto; } .vid-lightbox-close { position: absolute; top: -14px; right: -6px; transform: translateY(-100%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.14); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 0.18s ease; } .vid-lightbox-close:hover { background: rgba(255, 255, 255, 0.26); } .vid-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 560px) { .vid-lightbox-close { top: -6px; right: 0; } } @keyframes vidFade { from { opacity: 0; } to { opacity: 1; } } @keyframes vidRise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .vid-lightbox-backdrop, .vid-lightbox-frame { animation: none; } } /* Poster — the contained film thumbnail (a