/* ===================================================================== DCNWA Motion System. Direction B. Community Hub. ===================================================================== Source of truth: /architecture/design-tokens.md, section 8. Philosophy: editorial restraint. ONE wow moment per page (the home hero pergola reveal); everything else is whisper-quiet. Rules: 1. Only `transform` and `opacity` animate (60fps budget; no layout-triggering properties). 2. Site-wide motion stays under 320ms; the hero reveal can go to 700ms. 3. Custom cubic-bezier easings only; never `ease` or `linear` unless deliberately exotic. 4. `prefers-reduced-motion: reduce` strictly honored at the bottom of this file. 5. No cursor-following CTAs. No scroll-jacking. No bouncy springs. No em dashes anywhere in this file. ===================================================================== */ :root { /* Motion tokens. Duplicated from /architecture/design-tokens.md s8 so this file is SSR-safe and works standalone in critical-CSS contexts where the main token file is split out. */ --motion-duration-instant: 1ms; --motion-duration-fast: 120ms; --motion-duration-base: 220ms; --motion-duration-slow: 320ms; --motion-duration-deliberate: 700ms; --motion-duration-stagger-step: 80ms; --motion-ease-standard: cubic-bezier(0.32, 0.72, 0, 1); --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1); --motion-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15); --motion-ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ===================================================================== 1. Base transitions for every interactive surface. ===================================================================== Every interactive element transitions at the base duration with the brand's standard ease. Only safe, transform / color / opacity / shadow properties listed. Layout properties intentionally absent. ===================================================================== */ :where( a, button, input, select, textarea, summary, .dcnwa-cta-pill, .dcnwa-reserve-pill, .dcnwa-card, .dcnwa-feature-card, .dcnwa-named-space, .dcnwa-food-card, .dcnwa-event-card, .dcnwa-tag, .dcnwa-chip ) { transition: color var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard); } /* Tighten transitions on color-only state changes (nav links, eyebrows). */ :where(.dcnwa-nav-link, .dcnwa-utility-link, .dcnwa-eyebrow, .dcnwa-footer-link) { transition: color var(--motion-duration-fast) var(--motion-ease-standard), background-size var(--motion-duration-base) var(--motion-ease-standard); } /* ===================================================================== 2. Hero load reveal. Eyebrow, headline, sub-deck, photo, widget. ===================================================================== This is the ONE wow moment on the homepage. Triggered by the `is-loaded` class on , set by dcnwa-motion.js once fonts are ready. Stagger total ~700ms; per-item ~80ms step. Used together with the `is-revealed` class on the photo for the Intersection Observer path. Coordination with theme agent: these element class names must be honored. See motion-spec.md for the full list. ===================================================================== */ .dcnwa-hero__eyebrow, .dcnwa-hero__heading, .dcnwa-hero__deck, .dcnwa-hero__photo, .dcnwa-hero__widget, .dcnwa-hero__foot { opacity: 0; transform: translateY(12px); will-change: opacity, transform; } html.is-loaded .dcnwa-hero__eyebrow { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 0ms both; } html.is-loaded .dcnwa-hero__heading { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 80ms both; } html.is-loaded .dcnwa-hero__deck { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 200ms both; } html.is-loaded .dcnwa-hero__photo { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 280ms both; } html.is-loaded .dcnwa-hero__widget { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 380ms both; } html.is-loaded .dcnwa-hero__foot { animation: dcnwa-hero-stagger var(--motion-duration-deliberate) var(--motion-ease-emphasized) 460ms both; } @keyframes dcnwa-hero-stagger { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } /* ===================================================================== 3. Intersection-revealed modules. Site-wide gentle reveal. ===================================================================== Any element marked `data-reveal` is hidden until JS adds the `is-revealed` class. Single property animation (translate + fade). Duration is slow but well below the hero's deliberate. ===================================================================== */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized), transform var(--motion-duration-deliberate) var(--motion-ease-emphasized); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Staggered children inside a revealed grid. Children opt in by carrying `data-reveal-child` and a `--reveal-index` CSS var (0-based). */ [data-reveal-child] { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-duration-slow) var(--motion-ease-emphasized), transform var(--motion-duration-slow) var(--motion-ease-emphasized); transition-delay: calc(var(--reveal-index, 0) * var(--motion-duration-stagger-step)); will-change: opacity, transform; } .is-revealed [data-reveal-child], [data-reveal-child].is-revealed { opacity: 1; transform: translateY(0); } /* ===================================================================== 4. Pergola module: image reveal + CSS-only parallax. ===================================================================== The image fades and rises into view, then translates on scroll. JS sets `--scroll-progress` (0 to 1) on `[data-parallax]`. We map that to a translateY between +24px and -24px (max 48px total range) for editorial restraint. Caps prevent vestibular discomfort. ===================================================================== */ .dcnwa-pergola__photo, [data-parallax] .dcnwa-pergola__photo-img, [data-parallax] img { /* Default state: rests at center. */ --scroll-progress: 0.5; } [data-parallax] { position: relative; overflow: hidden; } [data-parallax] .dcnwa-pergola__photo-img, [data-parallax] > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc((var(--scroll-progress) - 0.5) * -48px), 0); /* No transition: this is driven by scroll, applied per rAF tick. */ will-change: transform; } /* The reveal portion (orthogonal to parallax). Wraps the image when it first enters the viewport. */ .dcnwa-pergola__photo { opacity: 0; transform: translateY(40px); transition: opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized), transform var(--motion-duration-deliberate) var(--motion-ease-emphasized); } .dcnwa-pergola__photo.is-revealed { opacity: 1; transform: translateY(0); } /* ===================================================================== 5. Reserve a Court pill. Hover lift, no scale. ===================================================================== Scale would read as too animated for editorial Direction B. We get the lift via a 1px translate and a step-up in shadow elevation. ===================================================================== */ .dcnwa-reserve-pill, .dcnwa-cta-pill { transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard); } .dcnwa-reserve-pill:hover, .dcnwa-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(62, 26, 8, 0.16), 0 12px 28px rgba(62, 26, 8, 0.10); } .dcnwa-reserve-pill:active, .dcnwa-cta-pill:active { transform: translateY(0); transition-duration: var(--motion-duration-instant); } /* ===================================================================== 6. Card hover lifts. Feature cards, named-space cards, food cards. ===================================================================== ===================================================================== */ .dcnwa-card, .dcnwa-feature-card, .dcnwa-named-space, .dcnwa-food-card, .dcnwa-event-card { transition: transform var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard); } .dcnwa-card:hover, .dcnwa-feature-card:hover, .dcnwa-named-space:hover, .dcnwa-food-card:hover, .dcnwa-event-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(62, 26, 8, 0.08), 0 16px 40px rgba(62, 26, 8, 0.14), 0 32px 80px rgba(62, 26, 8, 0.10); } /* Named-space card image: slow, very subtle zoom on card hover. The only place we use a scale, and it is a tiny one. */ .dcnwa-named-space__photo { overflow: hidden; } .dcnwa-named-space__photo img { transition: transform 1200ms var(--motion-ease-emphasized); will-change: transform; } .dcnwa-named-space:hover .dcnwa-named-space__photo img { transform: scale(1.025); } /* ===================================================================== 7. Editorial link underline. Warm-tinted, draws in left-to-right. ===================================================================== We use a background-image gradient so the underline can animate without animating layout. background-size is GPU-friendly here. ===================================================================== */ .dcnwa-link, .dcnwa-prose a, .dcnwa-footer-link { background-image: linear-gradient( to right, var(--color-fg-accent, #7E3211), var(--color-fg-accent, #7E3211) ); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard); text-decoration: none; padding-bottom: 1px; } .dcnwa-link:hover, .dcnwa-link:focus-visible, .dcnwa-prose a:hover, .dcnwa-prose a:focus-visible, .dcnwa-footer-link:hover, .dcnwa-footer-link:focus-visible { background-size: 100% 1px; } /* Nav link variant: the underline draws from the existing `.dcnwa-nav-link::after` element used in the prototype. */ .dcnwa-nav-link { position: relative; padding-block: 0.35rem; } .dcnwa-nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--color-fg-accent, #7E3211); transition: right var(--motion-duration-base) var(--motion-ease-standard); } .dcnwa-nav-link:hover::after, .dcnwa-nav-link:focus-visible::after, .dcnwa-nav-link[aria-current="page"]::after { right: 0; } /* ===================================================================== 8. Sticky header. Quiet shadow + border on scroll, no transform. ===================================================================== Sets the `is-scrolled` class via JS at scrollY > 80. ===================================================================== */ .dcnwa-site-header, [data-sticky-header] { position: sticky; top: 0; z-index: 50; transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard); } .dcnwa-site-header.is-scrolled, [data-sticky-header].is-scrolled { box-shadow: 0 1px 2px rgba(62, 26, 8, 0.05), 0 2px 6px rgba(62, 26, 8, 0.04); border-bottom-color: var(--color-border-default, #E3D5BB); } /* Optional scroll-progress strip (2px, warm tint). The body sets --dcnwa-scroll-progress between 0 and 1 via JS. */ .dcnwa-scroll-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient( to right, var(--color-accent-default, #F26A0A) 0%, var(--color-accent-default, #F26A0A) calc(var(--dcnwa-scroll-progress, 0) * 100%), transparent calc(var(--dcnwa-scroll-progress, 0) * 100%) ); pointer-events: none; z-index: 60; transition: opacity var(--motion-duration-base) var(--motion-ease-standard); } /* ===================================================================== 9. Nav dropdown menu open. ===================================================================== `data-dropdown` is the trigger; `[data-dropdown-panel]` is the panel. Open state toggled via aria-expanded on the trigger. ===================================================================== */ [data-dropdown-panel] { opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; transition: opacity 180ms var(--motion-ease-standard), transform 180ms var(--motion-ease-standard), visibility 0ms linear 180ms; } [data-dropdown][aria-expanded="true"] + [data-dropdown-panel], [data-dropdown-panel].is-open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity 180ms var(--motion-ease-standard), transform 180ms var(--motion-ease-standard), visibility 0ms linear 0ms; } /* ===================================================================== 10. Mobile drawer (hamburger menu). ===================================================================== Drawer slides in from the left. Backdrop fades. ===================================================================== */ .dcnwa-mobile-drawer, [data-mobile-drawer] { position: fixed; inset: 0 auto 0 0; width: min(92vw, 420px); z-index: 70; transform: translateX(-100%); transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized); will-change: transform; } .dcnwa-mobile-drawer.is-open, [data-mobile-drawer].is-open { transform: translateX(0); } .dcnwa-mobile-drawer__backdrop, [data-mobile-drawer-backdrop] { position: fixed; inset: 0; z-index: 65; background: rgba(26, 20, 16, 0.55); opacity: 0; pointer-events: none; transition: opacity var(--motion-duration-slow) var(--motion-ease-standard); } html.is-drawer-open .dcnwa-mobile-drawer__backdrop, html.is-drawer-open [data-mobile-drawer-backdrop] { opacity: 1; pointer-events: auto; } /* Lock body scroll while drawer is open. */ html.is-drawer-open, html.is-drawer-open body { overflow: hidden; } /* Staggered drawer link reveal. */ .dcnwa-mobile-drawer__link, [data-mobile-drawer] [data-drawer-link] { opacity: 0; transform: translateX(-8px); transition: opacity var(--motion-duration-base) var(--motion-ease-emphasized), transform var(--motion-duration-base) var(--motion-ease-emphasized); } .is-open .dcnwa-mobile-drawer__link, .is-open [data-drawer-link] { opacity: 1; transform: translateX(0); transition-delay: calc(var(--drawer-link-index, 0) * var(--motion-duration-stagger-step)); } /* ===================================================================== 11. Promo bar dismiss. Fade out + slide up. ===================================================================== ===================================================================== */ [data-promo-bar] { overflow: hidden; transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard); will-change: opacity, transform; } [data-promo-bar].is-dismissed { opacity: 0; transform: translateY(-100%); pointer-events: none; } /* ===================================================================== 12. Image lightbox. Scrim fade + image scale-in. ===================================================================== The lightbox is appended to by JS. Initial state lives here. ===================================================================== */ .dcnwa-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity var(--motion-duration-slow) var(--motion-ease-standard); will-change: opacity; } .dcnwa-lightbox.is-open { opacity: 1; } .dcnwa-lightbox-scrim { position: absolute; inset: 0; background: rgba(26, 20, 16, 0.82); cursor: zoom-out; } .dcnwa-lightbox-img { position: relative; max-width: min(96vw, 1400px); max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); transform: scale(0.96); transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized); } .dcnwa-lightbox.is-open .dcnwa-lightbox-img { transform: scale(1); } .dcnwa-lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 9999px; background: rgba(250, 245, 236, 0.92); color: #1A1410; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); } .dcnwa-lightbox-close:hover { background: #FFFFFF; transform: translateY(-1px); } .dcnwa-lightbox-close:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(242, 106, 10, 0.6); } html.is-lightbox-open, html.is-lightbox-open body { overflow: hidden; } /* ===================================================================== 13. Booking widget focus states. Glow ring via box-shadow. ===================================================================== Animating box-shadow (not border-width) keeps the field's layout identical and avoids any CLS. ===================================================================== */ .dcnwa-book-field, .dcnwa-book__field, .dcnwa-form-field { position: relative; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard); } .dcnwa-book-field input, .dcnwa-book-field select, .dcnwa-book__field input, .dcnwa-book__field select, .dcnwa-form-field input, .dcnwa-form-field select, .dcnwa-form-field textarea { transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard), background-color var(--motion-duration-base) var(--motion-ease-standard); } .dcnwa-book-field input:focus-visible, .dcnwa-book-field select:focus-visible, .dcnwa-book__field input:focus-visible, .dcnwa-book__field select:focus-visible, .dcnwa-form-field input:focus-visible, .dcnwa-form-field select:focus-visible, .dcnwa-form-field textarea:focus-visible { outline: 0; border-color: var(--color-accent-default, #F26A0A); box-shadow: 0 0 0 3px rgba(242, 106, 10, 0.25); } /* ===================================================================== 14. Focus-visible default for the rest of the system. ===================================================================== Single, fast, accessible ring. No transform on focus. ===================================================================== */ :where(a, button, [role="button"], summary):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(242, 106, 10, 0.35); border-radius: 2px; transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard); } /* ===================================================================== 15. Marquee day-arc strip (single tolerated infinite animation). ===================================================================== Per design-tokens s8.6: permitted ONCE site-wide. Linear easing is deliberate here. Pauses on hover and on prefers-reduced-motion. ===================================================================== */ [data-marquee] { overflow: hidden; position: relative; mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 94%, transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 94%, transparent 100% ); } [data-marquee] > * { display: inline-flex; white-space: nowrap; animation: dcnwa-marquee 28s linear infinite; will-change: transform; } [data-marquee]:hover > *, [data-marquee]:focus-within > * { animation-play-state: paused; } @keyframes dcnwa-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ===================================================================== 16. Accordion (FAQ). grid-template-rows technique only. No max-height. ===================================================================== ===================================================================== */ [data-accordion-item] [data-accordion-panel] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard), opacity var(--motion-duration-slow) var(--motion-ease-standard); opacity: 0; } [data-accordion-item] [data-accordion-panel] > * { overflow: hidden; } [data-accordion-item][aria-expanded="true"] [data-accordion-panel], [data-accordion-item].is-open [data-accordion-panel] { grid-template-rows: 1fr; opacity: 1; } [data-accordion-trigger] svg, [data-accordion-trigger] .dcnwa-accordion__icon { transition: transform var(--motion-duration-base) var(--motion-ease-standard); } [data-accordion-item][aria-expanded="true"] [data-accordion-trigger] svg, [data-accordion-item].is-open [data-accordion-trigger] svg { transform: rotate(45deg); } /* ===================================================================== 17. The hero photo "wow" reveal (legacy class). For the prototype's .hero__photo selector, keep parity so the same hero motion works whether the theme uses `.dcnwa-hero__photo` or the prototype class. ===================================================================== */ .dcnwa-hero__photo, .hero__photo { opacity: 0; transform: translateY(12px) scale(0.992); transition: opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized), transform var(--motion-duration-deliberate) var(--motion-ease-emphasized); will-change: opacity, transform; } .dcnwa-hero__photo.is-revealed, .hero__photo.is-revealed, html.is-loaded .dcnwa-hero__photo, html.is-loaded .hero__photo { opacity: 1; transform: translateY(0) scale(1); } /* ===================================================================== 18. Print: remove every transition / animation. ===================================================================== ===================================================================== */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ===================================================================== 19. Reduced motion. The global guard. ===================================================================== Vestibular-safe: every transform-based animation is neutralized; opacity transitions remain because they do not trigger discomfort. Reveals and hero animations resolve to their end-state immediately so the page is never stuck in a hidden state. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Restore quiet color / opacity transitions for state visibility. */ :where( a, button, .dcnwa-card, .dcnwa-feature-card, .dcnwa-named-space, .dcnwa-cta-pill, .dcnwa-reserve-pill ) { transition-property: color, background-color, border-color, opacity, box-shadow; transition-duration: var(--motion-duration-fast); } /* Force every reveal / hero animation to its end state. */ [data-reveal], [data-reveal-child], .dcnwa-hero__eyebrow, .dcnwa-hero__heading, .dcnwa-hero__deck, .dcnwa-hero__photo, .hero__photo, .dcnwa-hero__widget, .dcnwa-hero__foot, .dcnwa-pergola__photo, .dcnwa-mobile-drawer__link, [data-mobile-drawer] [data-drawer-link] { opacity: 1 !important; transform: none !important; animation: none !important; } /* Disable parallax. */ [data-parallax] .dcnwa-pergola__photo-img, [data-parallax] > img { transform: none !important; } /* Pause the marquee. */ [data-marquee] > * { animation: none !important; transform: none !important; } /* Pause the named-space slow-zoom on hover. */ .dcnwa-named-space:hover .dcnwa-named-space__photo img { transform: none !important; } /* Prevent the CTA lift. */ .dcnwa-reserve-pill:hover, .dcnwa-cta-pill:hover, .dcnwa-card:hover, .dcnwa-feature-card:hover, .dcnwa-named-space:hover, .dcnwa-food-card:hover, .dcnwa-event-card:hover { transform: none !important; } } /* End of dcnwa-motion.css. */