/** * ============================================================ * DUD® — Corrective Layout & Animation CSS * Version : 1.0 — Production * * PURPOSE: * This file provides: * 1. Base / initial states that dud-ui-stabilizer.js * depends on (elements start hidden, JS reveals them). * 2. Stable layout rules for the DUD logo and Vigil Glyph. * 3. Mobile-safe overflow and touch normalization. * 4. Modal stacking context isolation. * 5. prefers-reduced-motion fallback — all decorative * transitions disabled when the user prefers it. * * RULES: * - NO colour, font, or spacing values are changed here. * We only fix structure and animation states. * - Transitions use transform + opacity exclusively. * Never animate top / left / width / height / margin. * - z-index budget: * nav : 100 * modal : 1000 * preloader : 9999 * ============================================================ */ /* ───────────────────────────────────────────────────────────── § 1 GLOBAL OVERFLOW GUARD Prevents horizontal scroll caused by any off-screen element. Applied to both html and body so that position:fixed children (modals, overlays) do not escape the viewport width. ───────────────────────────────────────────────────────────── */ html, body { overflow-x: hidden; /* Do NOT set overflow-y here — it would break position:fixed */ } /* ───────────────────────────────────────────────────────────── § 2 TOUCH INTERACTION NORMALISATION Removes the 300ms tap delay on all interactive elements. Does not disable scroll-based touch behaviour. ───────────────────────────────────────────────────────────── */ a, button, [role="button"], [onclick], [data-product-id], .collection-item, .size-btn, .close-btn, #bag-it-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ───────────────────────────────────────────────────────────── § 3 STITCHING STATEMENT — ANIMATION BASE STATES dud-ui-stabilizer.js injects `data-dud-role="stitch-card"` on the parent card containers and adds the class `.dud-stitch-child` to each visible child of those cards. Base state: children are invisible and offset 36px down. The stabilizer transitions them to opacity:1 / translateY(0) once the card enters the viewport via IntersectionObserver. We use will-change here so the GPU layer is allocated before the first paint; the stabilizer removes it after reveal to free VRAM. ───────────────────────────────────────────────────────────── */ .dud-stitch-child { opacity: 0; transform: translateY(36px); will-change: transform, opacity; /* Transition is applied inline by the stabilizer with exact timing per-child — we define none here to avoid fighting with the stabilizer's values. */ } /* Safety: if JS never runs, show everything at full opacity so the page is still readable. We use the no-js class that WordPress adds to before JS loads. */ .no-js .dud-stitch-child { opacity: 1; transform: none; will-change: auto; } /* Cards that have been revealed get this class from the stabilizer. Keep opacity:1 as a hard floor so a second IntersectionObserver trigger can't re-hide them. */ [data-dud-role="stitch-card"].dud-revealed .dud-stitch-child { opacity: 1; transform: translateY(0); will-change: auto; } /* ───────────────────────────────────────────────────────────── § 4 COLLECTION CARDS — ANIMATION BASE STATES dud-ui-stabilizer.js injects `data-dud-role="collection-card"` on product cards. Same pattern as stitch cards: start hidden, stagger-reveal on scroll entry. ───────────────────────────────────────────────────────────── */ [data-dud-role="collection-card"] { opacity: 0; transform: translateY(24px); will-change: transform, opacity; /* Transition injected inline by stabilizer */ } .no-js [data-dud-role="collection-card"] { opacity: 1; transform: none; will-change: auto; } [data-dud-role="collection-card"].dud-revealed { opacity: 1; transform: translateY(0); will-change: auto; } /* ───────────────────────────────────────────────────────────── § 5 PRELOADER BASE STATE dud-ui-stabilizer.js injects `data-dud-role="preloader"`. Preloader sits above everything; stabilizer fades it out after 1800ms and removes it from the flow. ───────────────────────────────────────────────────────────── */ [data-dud-role="preloader"] { position: fixed; inset: 0; z-index: 9999; /* Background, colour, and font come from the site's own preloader styles — we do NOT override them here. */ transition: opacity 0.6s ease, visibility 0.6s ease; will-change: opacity; } [data-dud-role="preloader"].dud-preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ───────────────────────────────────────────────────────────── § 6 VIGIL GLYPH — CENTERING & STABILITY dud-ui-stabilizer.js injects `data-dud-role="vigil-glyph"`. These rules ensure the glyph is centred on all viewports without altering any visual styling. The parent section (whatever contains the glyph) should already be display:flex in the site's own CSS; we reinforce the flex alignment only — no colour / font changes. ───────────────────────────────────────────────────────────── */ [data-dud-role="vigil-glyph"] { display: block; margin-left: auto; margin-right: auto; /* Prevents layout bleed on narrow viewports */ max-width: 100%; /* Stable intrinsic size so the page doesn't reflow during the blink animation */ flex-shrink: 0; } /* When the glyph is inside a flex/grid parent (common in DUD homepage sections), make sure the parent centres it. */ [data-dud-role="vigil-glyph-section"] { display: flex; flex-direction: column; align-items: center; justify-content: center; /* No width / padding overrides — keep site's own spacing */ } /* Blink animation — eye scale applied by stabilizer via inline style. We define the easing curve as a CSS variable so the stabilizer can reference it without hard-coding. */ :root { --dud-blink-easing: cubic-bezier(0.25, 0, 0.25, 1); --dud-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */ --dud-stitch-duration: 700ms; --dud-stitch-stagger: 120ms; --dud-collect-duration: 600ms; --dud-collect-stagger: 80ms; } /* ───────────────────────────────────────────────────────────── § 7 DUD LOGO STABILITY dud-ui-stabilizer.js injects `data-dud-role="dud-logo"`. These rules prevent layout shift as webfonts / images load, and lock the logo to consistent size across breakpoints. ───────────────────────────────────────────────────────────── */ [data-dud-role="dud-logo"] { /* Prevent any inline-block gap artifacts */ display: block; /* Don't let the logo be squashed in a flex row */ flex-shrink: 0; /* Stable size reference in case img src is slow */ width: auto; height: auto; max-width: 100%; } /* SVG logos can flicker during their first paint on Safari; this forces a composite layer early. */ [data-dud-role="dud-logo"] svg, [data-dud-role="dud-logo"] img { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ───────────────────────────────────────────────────────────── § 8 MODAL STACKING CONTEXT ISOLATION Ensures the modal overlay is always above all page content regardless of what transform or z-index the page sections use. `body.modal-open` is set by dud-modal-controller.js. dud-ui-stabilizer.js also reads this class to pause decorative animations while the modal is visible. ───────────────────────────────────────────────────────────── */ /* When modal is open, prevent body scroll on iOS Safari. iOS Safari ignores `overflow: hidden` on the body; the only reliable scroll-lock technique is `position: fixed` combined with a JS-managed `top: -scrollYpx` offset (applied by dud-modal-controller.js). `overflow-y: scroll` is kept so the scrollbar width doesn't collapse and cause a layout shift on desktop. */ body.modal-open { position: fixed; width: 100%; overflow-y: scroll; /* `top` is set dynamically by dud-modal-controller.js: body.style.top = '-' + scrollY + 'px' (on open) body.style.top = '' (on close, then scrollTo) */ } /* The modal overlay — targets the actual IDs/roles used in DUD's HTML. Rules fire regardless of the theme's existing styles. NOTE: `#productModal` is the ID used by dud-modal-controller.js. `#dud-modal-overlay` and `[data-dud-role="modal-overlay"]` are alternative selectors for future-proofing. */ #productModal, #dud-modal-overlay, [data-dud-role="modal-overlay"] { position: fixed; inset: 0; z-index: 1000; /* New stacking context — inner z-indices are self-contained */ isolation: isolate; /* GPU layer — prevents stacking context conflicts from page transforms */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* Prevent inner elements from escaping the modal stacking boundary */ #productModal *, #dud-modal-overlay *, [data-dud-role="modal-overlay"] * { /* Do NOT set z-index globally — only specific children define theirs */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ───────────────────────────────────────────────────────────── § 9 NAV BAG COUNT — LIVE UPDATE STABILITY Prevents layout shift when the bag count number updates from 0 → 1 (character width change causes reflow in some fonts). ───────────────────────────────────────────────────────────── */ .bag-count, .cart-count, [data-cart-count], [data-dud-role="bag-count"] { display: inline-block; min-width: 1ch; /* Reserves space for at least one digit */ text-align: center; font-variant-numeric: tabular-nums; /* Monospaced digits → no shift */ /* Smooth count transition */ transition: opacity 0.2s ease; } /* Brief opacity flash when count changes — applied by stabilizer */ [data-dud-role="bag-count"].dud-count-updating { opacity: 0.4; } /* ───────────────────────────────────────────────────────────── § 10 RESPONSIVE NORMALISATION Addresses common viewport bleed issues on mobile without touching the design's spacing or typography. ───────────────────────────────────────────────────────────── */ /* Ensure images are never wider than their container */ img, video, svg { max-width: 100%; height: auto; } /* Fix for iOS Safari where 100vw includes scrollbar width and causes a horizontal bleed of ~15px. */ @supports (-webkit-touch-callout: none) { html, body { /* Replaces 100vw calculations that bleed on iOS */ overflow-x: clip; } } /* Full-width sections should not generate horizontal scroll */ section, .section, [class*="section-"], [class*="-section"] { max-width: 100vw; overflow-x: hidden; } /* ── Mobile (≤ 768px) ──────────────────────────────────────── */ @media (max-width: 768px) { /* Stitch card children start with a smaller offset on mobile to prevent cards from feeling "too far down" before reveal */ .dud-stitch-child { transform: translateY(20px); } /* Collection cards — smaller offset on mobile */ [data-dud-role="collection-card"] { transform: translateY(16px); } /* Vigil Glyph: full-width on small screens */ [data-dud-role="vigil-glyph"] { width: 100%; max-width: 320px; } /* Modal overlay: full viewport on mobile (no side gaps). Note: `top` is managed by JS for iOS scroll-lock — we only override `top` here inside the reduced-motion block (§ 11) or when the overlay is NOT in scroll-lock mode. Use `!important` for left/right/bottom only. */ #productModal, #dud-modal-overlay, [data-dud-role="modal-overlay"] { left: 0 !important; right: 0 !important; bottom: 0 !important; } } /* ── Tablet (769px – 1024px) ──────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { [data-dud-role="vigil-glyph"] { max-width: 480px; } } /* ───────────────────────────────────────────────────────────── § 11 PREFERS-REDUCED-MOTION Disables ALL decorative transitions and animations when the user's OS setting requests reduced motion. This covers: - Stitching reveal animations - Collection card stagger - Preloader fade - Vigil Glyph blink - Any transition injected by dud-ui-stabilizer.js Accessibility requirement — do not remove. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* ── Kill all transitions and animations site-wide ────── */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* ── Reveal elements immediately (no hidden → visible fade) */ .dud-stitch-child, [data-dud-role="collection-card"] { opacity: 1 !important; transform: none !important; will-change: auto !important; } /* ── Preloader: skip fade, remove instantly */ [data-dud-role="preloader"] { transition: none !important; } [data-dud-role="preloader"].dud-preloader-hidden { display: none !important; } /* ── Vigil Glyph: no blink */ [data-dud-role="vigil-glyph"] { transition: none !important; } } /* ───────────────────────────────────────────────────────────── § 12 UTILITY — HARDWARE ACCELERATION HELPER Applied to elements that need their own compositor layer but aren't already getting one from a transform/opacity animation. Use sparingly — each layer consumes VRAM. ───────────────────────────────────────────────────────────── */ .dud-gpu-layer { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ───────────────────────────────────────────────────────────── § 13 STATEMENT HERO SECTION dud-ui-stabilizer.js injects `data-dud-role="statement-hero"` on the "heavy fabric, heavier mindset" section. Ensures the text block is always centred and never overflows. ───────────────────────────────────────────────────────────── */ [data-dud-role="statement-hero"] { text-align: center; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }