/* ========================================================================== Rice n Slice — Motion system (premium, subtle, performant) Hidden states ONLY apply when is present. ========================================================================== */ :root { --motion-fast: 180ms; --motion-normal: 350ms; --motion-slow: 700ms; --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-in: cubic-bezier(0.4, 0, 0.2, 1); --motion-distance: 24px; /* Back-compat aliases */ --transition-fast: var(--motion-fast); --transition-normal: var(--motion-normal); --transition-slow: var(--motion-slow); --ease-out-premium: var(--motion-ease); } /* -------------------------------------------------------------------------- SCROLL REVEAL — gated behind .js so no-JS stays visible -------------------------------------------------------------------------- */ .js .reveal, .js .reveal-up, .js .reveal-left, .js .reveal-right, .js .reveal-scale { opacity: 0; transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); will-change: opacity, transform; } .js .reveal, .js .reveal-up { transform: translateY(var(--motion-distance)); } .js .reveal-left { transform: translateX(calc(var(--motion-distance) * -1)); } .js .reveal-right { transform: translateX(var(--motion-distance)); } .js .reveal-scale { transform: scale(0.96); } .js .reveal.is-visible, .js .reveal-up.is-visible, .js .reveal-left.is-visible, .js .reveal-right.is-visible, .js .reveal-scale.is-visible { opacity: 1; transform: none; will-change: auto; } /* Stagger via --index set by JS */ .js [data-stagger] > * { transition-delay: calc(var(--index, 0) * 80ms); } .js [data-stagger] > *:nth-child(n + 9) { transition-delay: 560ms; } /* -------------------------------------------------------------------------- PAGE ENTRANCE -------------------------------------------------------------------------- */ .js .site-header { animation: headerEnter var(--motion-slow) var(--motion-ease) both; } .js .site-header .header__brand-logo { animation: logoPop var(--motion-slow) var(--motion-ease) both; } .js .site-header .nav__list > li { opacity: 0; animation: fadeUpSoft var(--motion-normal) var(--motion-ease) both; } .js .site-header .nav__list > li:nth-child(1) { animation-delay: 120ms; } .js .site-header .nav__list > li:nth-child(2) { animation-delay: 180ms; } .js .site-header .nav__list > li:nth-child(3) { animation-delay: 240ms; } .js .site-header .nav__list > li:nth-child(4) { animation-delay: 300ms; } .js .site-header .nav__list > li:nth-child(5) { animation-delay: 360ms; } .js .site-header .header__actions { animation: fadeUpSoft var(--motion-slow) var(--motion-ease) 420ms both; } .js main { animation: pageFadeIn var(--motion-slow) var(--motion-ease) 60ms both; } .js .page-hero__title, .js .page-hero .page-hero__title { animation: fadeUpSoft var(--motion-slow) var(--motion-ease) 120ms both; } @keyframes headerEnter { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes logoPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } } @keyframes fadeUpSoft { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- LOADER -------------------------------------------------------------------------- */ .loader { transition: opacity var(--motion-slow) var(--motion-ease), visibility var(--motion-slow) var(--motion-ease); } .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .loader__logo { animation: loaderPulse 1.4s var(--motion-ease-in) infinite; } .loader__bar { animation: loaderShimmer 1.2s linear infinite; } @keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.88; } } @keyframes loaderShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* -------------------------------------------------------------------------- HEADER SCROLL + NAV -------------------------------------------------------------------------- */ .site-header { transition: background var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), height var(--motion-normal) var(--motion-ease), backdrop-filter var(--motion-normal) var(--motion-ease); } .site-header.is-scrolled { background: rgba(26, 17, 12, 0.96); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28); } .site-header.is-scrolled .header__brand-logo { transform: scale(0.92); transition: transform var(--motion-normal) var(--motion-ease); } .nav__link { position: relative; } .nav__link::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.2rem; height: 2px; border-radius: 2px; background: var(--logo-red, #e31c23); transform: scaleX(0); transform-origin: center; transition: transform var(--motion-normal) var(--motion-ease); pointer-events: none; } .nav__link:hover::after, .nav__link.is-active::after, .nav-dropdown.is-open .nav-dropdown__trigger::after { transform: scaleX(1); } /* Dropdown fade + slide (override [hidden] display for transition) */ .nav-dropdown__panel { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease), visibility var(--motion-normal) var(--motion-ease); } .nav-dropdown__panel[hidden] { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; } .nav-dropdown.is-open .nav-dropdown__panel, .nav-dropdown.is-open .nav-dropdown__panel[hidden] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-dropdown.is-open .nav-dropdown__panel a { opacity: 0; animation: fadeUpSoft var(--motion-normal) var(--motion-ease) both; } .nav-dropdown.is-open .nav-dropdown__panel a:nth-child(1), .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(1) a { animation-delay: 40ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(2) a { animation-delay: 70ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(3) a { animation-delay: 100ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(4) a { animation-delay: 130ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(5) a { animation-delay: 160ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(6) a { animation-delay: 190ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(7) a { animation-delay: 220ms; } .nav-dropdown.is-open .nav-dropdown__panel li:nth-child(n + 8) a { animation-delay: 250ms; } .nav-toggle span { transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); } .nav-overlay { position: fixed; inset: 0; top: var(--header-h); z-index: 90; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-ease), visibility var(--motion-normal) var(--motion-ease); } .nav-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } @media (max-width: 960px) { .nav { position: fixed; top: var(--header-h); left: auto; right: 0; z-index: 120; width: min(100%, 320px); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); transform: translateX(105%); opacity: 1; visibility: visible; overflow-y: auto; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35); transition: transform var(--motion-normal) var(--motion-ease); padding: 1rem; background: var(--color-wood-deep); border-bottom: none; } .nav.is-open { transform: translateX(0); } .nav__list { flex-direction: column; gap: 0.25rem; align-items: stretch; } .nav__link { display: flex; padding: 0.85rem 1rem; width: 100%; } .nav.is-open .nav__list > li { opacity: 0; animation: fadeUpSoft var(--motion-normal) var(--motion-ease) both; } .nav.is-open .nav__list > li:nth-child(1) { animation-delay: 60ms; } .nav.is-open .nav__list > li:nth-child(2) { animation-delay: 110ms; } .nav.is-open .nav__list > li:nth-child(3) { animation-delay: 160ms; } .nav.is-open .nav__list > li:nth-child(4) { animation-delay: 210ms; } .nav.is-open .nav__list > li:nth-child(5) { animation-delay: 260ms; } .nav-dropdown__panel, .nav-dropdown__panel[hidden], .nav-dropdown.is-open .nav-dropdown__panel { position: static; transform: none; box-shadow: none; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height var(--motion-slow) var(--motion-ease); padding-top: 0; padding-bottom: 0; } .nav-dropdown.is-open .nav-dropdown__panel { max-height: 70vh; padding-top: 0.35rem; padding-bottom: 0.35rem; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); margin-top: 0.35rem; } .nav-dropdown__panel a { color: rgba(255, 255, 255, 0.9); } .nav-dropdown__panel a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .nav__link::after { display: none; } } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ .hero-slideshow__slide.is-active .hero__img { will-change: transform; } @keyframes heroZoomCinematic { from { transform: scale(1.04); } to { transform: scale(1); } } .js .hero .reveal, .js .hero .reveal-up { /* delays applied via --index / nth */ } .js .hero .reveal.is-visible:nth-child(1), .js .hero .reveal-up.is-visible:nth-child(1) { transition-delay: 0ms; } .js .hero .reveal.is-visible:nth-child(2), .js .hero .reveal-up.is-visible:nth-child(2) { transition-delay: 80ms; } .js .hero .reveal.is-visible:nth-child(3), .js .hero .reveal-up.is-visible:nth-child(3) { transition-delay: 160ms; } .js .hero .reveal.is-visible:nth-child(4), .js .hero .reveal-up.is-visible:nth-child(4) { transition-delay: 240ms; } .js .hero .reveal.is-visible:nth-child(5), .js .hero .reveal-up.is-visible:nth-child(5) { transition-delay: 320ms; } .js .hero .reveal.is-visible:nth-child(6), .js .hero .reveal-up.is-visible:nth-child(6) { transition-delay: 400ms; } .hero__actions .btn { transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); } .hero.is-parallax .hero__media { will-change: transform; } /* -------------------------------------------------------------------------- CARDS -------------------------------------------------------------------------- */ .menu-card, .deal-card, .category-card { transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease); border: 1px solid transparent; } .menu-card:hover, .deal-card:hover, .category-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(36, 24, 17, 0.14); border-color: rgba(227, 28, 35, 0.28); } .menu-card:active, .category-card:active { transform: translateY(-2px) scale(0.99); } .menu-card__media, .deal-card__media, .category-card__img { overflow: hidden; } .menu-card__media img, .deal-card__media img, .category-card__img img, .menu-card__image { transition: transform var(--motion-slow) var(--motion-ease); } .menu-card:hover .menu-card__media img, .menu-card:hover .menu-card__image, .deal-card:hover .deal-card__media img, .category-card:hover .category-card__img img { transform: scale(1.04); } .category-card .btn { transition: transform var(--motion-fast) var(--motion-ease); } .category-card:hover .btn { transform: translateY(-2px); } .menu-card__price { transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); } .menu-card__price.is-updating { transform: translateY(-4px); opacity: 0.85; color: var(--logo-red, #e31c23); } .variant-btn { transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .variant-btn.is-active { transform: scale(1.03); } .variant-btn:active { transform: scale(0.97); } .add-to-cart-btn.is-success, .btn.is-success { background: var(--color-success, #1f7a4d) !important; border-color: var(--color-success, #1f7a4d) !important; } .deal-card__save { transform-origin: center; animation: badgeScaleIn var(--motion-slow) var(--motion-ease) both; } .deal-card__save.is-featured { animation: badgeScaleIn var(--motion-slow) var(--motion-ease) both, badgeSoftPulse 6s var(--motion-ease-in) 1.2s 2; } @keyframes badgeScaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes badgeSoftPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 28, 35, 0); } 50% { box-shadow: 0 0 0 6px rgba(227, 28, 35, 0.16); } } /* -------------------------------------------------------------------------- FILTER TRANSITIONS -------------------------------------------------------------------------- */ .menu-grid.is-filtering { opacity: 0.35; transform: translateY(8px); pointer-events: none; transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .menu-grid.is-filter-enter { animation: filterEnter var(--motion-normal) var(--motion-ease) both; } @keyframes filterEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .filter-btn { transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .filter-btn:active { transform: scale(0.97); } .section__title.is-filter-flash, .page-hero__title.is-filter-flash { animation: titleFlash var(--motion-normal) var(--motion-ease); } @keyframes titleFlash { 0% { opacity: 0.55; transform: translateY(6px); } 100% { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .btn { position: relative; overflow: hidden; transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease), color var(--motion-normal) var(--motion-ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn:focus-visible { outline: 2px solid var(--logo-yellow, #ffcc00); outline-offset: 3px; } .btn__ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.32); transform: scale(0); animation: rippleOut 520ms var(--motion-ease) forwards; pointer-events: none; } @keyframes rippleOut { to { transform: scale(2.4); opacity: 0; } } .quantity-control__btn { transition: transform var(--motion-fast) var(--motion-ease); } .quantity-control__btn:active { transform: scale(0.9); } /* -------------------------------------------------------------------------- CART -------------------------------------------------------------------------- */ .cart-overlay:not([hidden]) { animation: fadeIn var(--motion-normal) var(--motion-ease) both; } .cart-drawer { transition: transform var(--motion-normal) var(--motion-ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .cart-toggle.is-bump { animation: cartBump 420ms var(--motion-ease); } .cart-toggle__count.is-bump { animation: badgeBump 420ms var(--motion-ease); } @keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes badgeBump { 0% { transform: scale(0.8); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } .cart-item { animation: cartItemIn var(--motion-normal) var(--motion-ease) both; } .cart-item.is-removing { animation: cartItemOut var(--motion-normal) var(--motion-ease) both; pointer-events: none; } @keyframes cartItemIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @keyframes cartItemOut { to { opacity: 0; transform: translateX(20px) scale(0.96); } } #cart-total.is-flash, #summary-total.is-flash, #cart-subtotal.is-flash { animation: totalFlash 480ms var(--motion-ease); } @keyframes totalFlash { 0% { color: inherit; } 40% { color: var(--logo-red, #e31c23); } 100% { color: inherit; } } .cart-empty { animation: fadeUpSoft var(--motion-slow) var(--motion-ease) both; } /* -------------------------------------------------------------------------- TOAST STACK -------------------------------------------------------------------------- */ .toast-stack { position: fixed; z-index: 10050; display: flex; flex-direction: column; gap: 0.65rem; pointer-events: none; top: 1.1rem; right: 1.1rem; width: min(360px, calc(100vw - 1.5rem)); } .toast-item { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: 12px; background: #1c1410; color: #fff; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); border-left: 3px solid var(--color-whatsapp, #25d366); transform: translateX(18px); opacity: 0; animation: toastIn var(--motion-normal) var(--motion-ease) forwards; } .toast-item.is-leaving { animation: toastOut var(--motion-normal) var(--motion-ease) forwards; } .toast-item--success { border-left-color: var(--color-whatsapp, #25d366); } .toast-item--error { border-left-color: var(--logo-red, #e31c23); } .toast-item--info { border-left-color: var(--logo-yellow, #ffcc00); } .toast-item__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; } .toast-item__msg { flex: 1; font-size: 0.92rem; line-height: 1.4; } .toast-item__close { flex-shrink: 0; background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; } .toast-item__close:hover { color: #fff; } @keyframes toastIn { to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { to { opacity: 0; transform: translateX(18px); } } @media (max-width: 640px) { .toast-stack { top: auto; bottom: 5.5rem; right: 0.75rem; left: 0.75rem; width: auto; } .toast-item { transform: translateY(16px); } @keyframes toastIn { to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { to { opacity: 0; transform: translateY(16px); } } } body:has(.toast-stack) #toast { display: none !important; } /* -------------------------------------------------------------------------- MODALS / FORMS -------------------------------------------------------------------------- */ .modal:not([hidden]) { animation: fadeIn var(--motion-normal) var(--motion-ease) both; } .modal:not([hidden]) .modal__dialog, .modal:not([hidden]) .modal__panel { animation: modalScaleIn var(--motion-normal) var(--motion-ease) both; } @keyframes modalScaleIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } } .order-form input:focus, .order-form select:focus, .order-form textarea:focus, .contact-form input:focus, .contact-form textarea:focus { transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .is-invalid { animation: fieldShake 360ms var(--motion-ease); } @keyframes fieldShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .field-error, .form-error { animation: fadeUpSoft var(--motion-normal) var(--motion-ease) both; } .success-icon.is-animate { animation: successPop 560ms var(--motion-ease) both; } @keyframes successPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } .btn.is-loading { pointer-events: none; opacity: 0.85; } /* -------------------------------------------------------------------------- ABOUT / STORY / CONTACT -------------------------------------------------------------------------- */ .about__content .section__title::after { content: ""; display: block; width: 0; height: 2px; margin-top: 0.65rem; background: var(--logo-red, #e31c23); transition: width var(--motion-slow) var(--motion-ease); } .about__content.is-visible .section__title::after, .about__content.reveal-right.is-visible .section__title::after { width: 4.5rem; } .js .about__pillars li { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); } .js .about__content.is-visible .about__pillars li { opacity: 1; transform: none; } .js .about__content.is-visible .about__pillars li:nth-child(1) { transition-delay: 80ms; } .js .about__content.is-visible .about__pillars li:nth-child(2) { transition-delay: 150ms; } .js .about__content.is-visible .about__pillars li:nth-child(3) { transition-delay: 220ms; } .js .about__content.is-visible .about__pillars li:nth-child(4) { transition-delay: 290ms; } .social__link { position: relative; transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); } .social__link:hover { transform: translateY(-3px) scale(1.05); } .social__link[data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); background: #1c1410; color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.5rem; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease); } .social__link:hover[data-tooltip]::before { opacity: 1; transform: translate(-50%, 0); } .map-placeholder, .contact__map { transition: transform var(--motion-normal) var(--motion-ease); } /* -------------------------------------------------------------------------- IMAGES -------------------------------------------------------------------------- */ img.img-fade:not(.is-loaded) { opacity: 0; filter: blur(6px); } img.img-fade, img.is-loaded { transition: opacity var(--motion-slow) var(--motion-ease), filter var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); } img.img-fade.is-loaded, img.is-loaded { opacity: 1; filter: none; } /* -------------------------------------------------------------------------- WHATSAPP FAB -------------------------------------------------------------------------- */ .wa-fab { position: fixed; animation: waFabIn var(--motion-slow) var(--motion-ease) 700ms both, waSoftPulse 6s var(--motion-ease-in) 3s infinite; transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); } .wa-fab:hover { animation-play-state: paused; transform: scale(1.06); } .wa-fab__tooltip { position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translate(8px, -50%); background: #1c1410; color: #fff; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.7rem; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease); } .wa-fab__tooltip::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #1c1410; } .wa-fab:hover .wa-fab__tooltip, .wa-fab:focus-visible .wa-fab__tooltip { opacity: 1; transform: translate(0, -50%); } @keyframes waFabIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes waSoftPulse { 0%, 100% { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45); } 50% { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 0 0 10px rgba(37, 211, 102, 0.1); } } @media (max-width: 640px) { .wa-fab { right: 0.85rem; bottom: 0.85rem; } } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ .js .footer__grid > * { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); } .js .footer__grid.is-visible > *:nth-child(1) { transition-delay: 0ms; } .js .footer__grid.is-visible > *:nth-child(2) { transition-delay: 80ms; } .js .footer__grid.is-visible > *:nth-child(3) { transition-delay: 160ms; } .js .footer__grid.is-visible > *:nth-child(4) { transition-delay: 240ms; } .js .footer__grid.is-visible > * { opacity: 1; transform: none; } .footer__nav a, .footer__bottom a { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size var(--motion-normal) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .footer__nav a:hover, .footer__bottom a:hover { background-size: 100% 1px; } /* -------------------------------------------------------------------------- REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .hero__media, .hero__img { transform: none !important; } .js .reveal, .js .reveal-up, .js .reveal-left, .js .reveal-right, .js .reveal-scale, .js .footer__grid > *, .js .about__pillars li, .js .site-header, .js .site-header .nav__list > li, .js .site-header .header__brand-logo, .js .site-header .header__actions, .js main, .js .page-hero__title { opacity: 1 !important; transform: none !important; animation: none !important; } img.img-fade:not(.is-loaded), img.img-fade { opacity: 1 !important; filter: none !important; } }