https://8xx.beauty/assets/site.js

1(() => {
2  const button = document.querySelector('.menu-button');
3  const nav = document.querySelector('.main-nav');
4  const closeNav = () => {
5    button?.setAttribute('aria-expanded', 'false');
6    nav?.classList.remove('is-open');
7  };
8  if (button && nav) {
9    button.addEventListener('click', () => {
10      const open = button.getAttribute('aria-expanded') === 'true';
11      button.setAttribute('aria-expanded', String(!open));
12      nav.classList.toggle('is-open', !open);
13    });
14    nav.addEventListener('click', (event) => {
15      if (event.target.closest('a')) closeNav();
16    });
17  }
18  document.addEventListener('keydown', (event) => {
19    if (event.key === 'Escape' && !event.defaultPrevented) closeNav();
20  });
21
22  const dock = document.querySelector('[data-floating-account]');
23  if (dock) {
24    const key = dock.dataset.storageKey;
25    let closed = false;
26    try { closed = sessionStorage.getItem(key) === 'closed'; } catch {}
27    if (closed) {
28      dock.hidden = true;
29      document.body.classList.remove('has-floating-account');
30    }
31    dock.querySelector('[data-floating-account-close]')?.addEventListener('click', () => {
32      dock.hidden = true;
33      document.body.classList.remove('has-floating-account');
34      try { sessionStorage.setItem(key, 'closed'); } catch {}
35    });
36  }
37
38  const header = document.querySelector('.site-header');
39  let headerFrame = 0;
40  const updateHeader = () => {
41    header?.classList.toggle('is-scrolled', scrollY > 12);
42    headerFrame = 0;
43  };
44  addEventListener('scroll', () => {
45    if (!headerFrame) headerFrame = requestAnimationFrame(updateHeader);
46  }, { passive: true });
47  updateHeader();
48
49  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
50  const selectors = [
51    '.section-heading', '.split-copy', '.split-media', '.topic-grid > article',
52    '.method-entry-card', '.steps > li', '.scenario-grid > article', '.checklist > li',
53    '.business-subsection', '.business-rail-card', '.faq-list > details',
54    '.related-grid > article', '.testimonial-card'
55  ];
56  const revealItems = [...document.querySelectorAll(selectors.join(','))];
57  const reveal = (element) => {
58    element.classList.remove('reveal-pending');
59    element.classList.add('is-visible');
60  };
61  if (!reducedMotion.matches && 'IntersectionObserver' in window && revealItems.length) {
62    document.documentElement.classList.add('motion-enhanced');
63    const observer = new IntersectionObserver((entries) => {
64      for (const entry of entries) {
65        if (entry.isIntersecting) {
66          reveal(entry.target);
67          observer.unobserve(entry.target);
68        }
69      }
70    }, { threshold: 0.08, rootMargin: '0px 0px -8% 0px' });
71    revealItems.forEach((element) => {
72      element.classList.add('reveal-item');
73      const siblings = [...element.parentElement.children].filter((item) => revealItems.includes(item));
74      const order = Math.max(0, siblings.indexOf(element));
75      element.style.setProperty('--reveal-delay', String(Math.min(order, 5) * 80) + 'ms');
76      const rect = element.getBoundingClientRect();
77      if (rect.top < innerHeight * 0.96 && rect.bottom > 0) reveal(element);
78      else {
79        element.classList.add('reveal-pending');
80        observer.observe(element);
81      }
82    });
83    document.addEventListener('focusin', (event) => {
84      const item = event.target.closest('.reveal-item');
85      if (item) reveal(item);
86    });
87    addEventListener('hashchange', () => {
88      const target = location.hash ? document.querySelector(location.hash) : null;
89      const item = target ? target.closest('.reveal-item') ?? target.querySelector('.reveal-item') : null;
90      if (item) reveal(item);
91    });
92    addEventListener('pageshow', () => {
93      revealItems.forEach((element) => {
94        const rect = element.getBoundingClientRect();
95        if (rect.top < innerHeight && rect.bottom > 0) reveal(element);
96      });
97    });
98    setTimeout(() => revealItems.forEach(reveal), 2200);
99  } else {
100    revealItems.forEach(reveal);
101  }
102  addEventListener('beforeprint', () => revealItems.forEach(reveal));
103})();