lang

2026-05-12 05:08:39 +02:00
parent ee054955b9
commit 4c454de1c2
28 changed files with 2045 additions and 120 deletions
@@ -1 +1 @@
-document.documentElement.dataset.js="ready";
+var l=document.documentElement;l.dataset.js="ready";var a=document.querySelector("[data-menu-toggle]"),d=document.querySelector("[data-menu-panel]"),r=[...document.querySelectorAll("[data-mega-trigger]")],c=[...document.querySelectorAll("[data-mega-menu]")];if(a&&d){let t=()=>{d.classList.add("hidden"),a.setAttribute("aria-expanded","false")},i=()=>{d.classList.remove("hidden"),a.setAttribute("aria-expanded","true")};a.addEventListener("click",()=>{if(a.getAttribute("aria-expanded")==="true"){t();return}i()}),window.addEventListener("resize",()=>{if(window.innerWidth>=1024){d.classList.remove("hidden"),a.setAttribute("aria-expanded","true");return}t()})}if(r.length>0&&c.length>0){let t=()=>{r.forEach((e)=>{e.setAttribute("aria-expanded","false"),e.closest(".desktop-nav__entry")?.classList.remove("desktop-nav__entry--open")}),c.forEach((e)=>{e.classList.add("hidden")})},i=(e)=>{let n=e.dataset.megaTarget;if(!n)return;t(),e.setAttribute("aria-expanded","true"),e.closest(".desktop-nav__entry")?.classList.add("desktop-nav__entry--open"),document.getElementById(n)?.classList.remove("hidden")};r.forEach((e)=>{e.addEventListener("click",(n)=>{if(window.innerWidth<1024)return;let s=e.getAttribute("aria-expanded")==="true";if(e instanceof HTMLAnchorElement&&s)return;if(n.preventDefault(),s){t();return}i(e)})}),document.addEventListener("click",(e)=>{if(window.innerWidth<1024)return;let n=e.target;if(!(n instanceof Node))return;let s=r.some((o)=>o.contains(n)),m=c.some((o)=>o.contains(n));if(!s&&!m)t()}),document.addEventListener("keydown",(e)=>{if(e.key==="Escape")t()}),window.addEventListener("resize",()=>{if(window.innerWidth<1024)t()})}var u=document.querySelector("button[type='submit']");if(u)u.addEventListener("mouseenter",()=>{l.style.setProperty("--cta-glow","0 0 0 4px rgba(252, 211, 77, 0.12)")}),u.addEventListener("mouseleave",()=>{l.style.setProperty("--cta-glow","0 0 0 0 rgba(0,0,0,0)")});
@@ -1,4 +1,4 @@
 {
  "app.css": "/dist/app.css",
  "app.js": "/dist/app.js"
-}
+}
@@ -8,15 +8,170 @@
  }

  body {
-    font-family: "IBM Plex Sans", sans-serif;
+    font-family:
+      "IBM Plex Sans",
+      "Avenir Next",
+      "Segoe UI",
+      sans-serif;
+    background:
+      radial-gradient(circle at top left, rgba(241, 196, 110, 0.24), transparent 28%),
+      radial-gradient(circle at top right, rgba(157, 217, 210, 0.16), transparent 34%),
+      linear-gradient(180deg, #fbfaf6 0%, #f5efe3 55%, #f7f3ea 100%);
+    @apply text-stone-900;
  }

-  h1, h2, h3 {
-    font-family: "Cormorant Garamond", serif;
+  h1,
+  h2,
+  h3 {
+    font-family:
+      "Cormorant Garamond",
+      "IBM Plex Sans",
+      serif;
  }
 }

@layer components {
+  .site-container {
+    @apply mx-auto w-full max-w-7xl px-4 sm:px-5 lg:px-8;
+  }
+
+  .site-header {
+    @apply sticky top-0 z-40 backdrop-blur;
+  }
+
+  .utility-bar {
+    background: linear-gradient(90deg, rgba(20, 33, 61, 0.98), rgba(37, 58, 89, 0.94));
+    @apply border-b border-white/10 text-stone-100;
+  }
+
+  .header-locale {
+    @apply flex w-full flex-wrap items-center justify-start gap-2 text-sm text-stone-100 sm:w-auto sm:justify-end;
+  }
+
+  .locale-picker {
+    @apply relative w-full sm:w-auto;
+  }
+
+  .locale-picker__summary {
+    @apply flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-full border border-white/0 px-3 py-1.5 text-stone-100 transition hover:border-white/20 hover:bg-white/10 hover:text-white sm:w-auto sm:justify-start;
+  }
+
+  .locale-picker[open] .locale-picker__summary {
+    @apply border-white/20 bg-white/10 text-white;
+  }
+
+  .locale-picker__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .locale-picker__value {
+    @apply font-medium;
+  }
+
+  .locale-picker__code,
+  .locale-picker__item-meta,
+  .locale-picker__chevron {
+    @apply text-[0.74rem] uppercase tracking-[0.16em] text-stone-300/80;
+  }
+
+  .locale-picker__panel {
+    @apply left-0 right-0 z-50 mt-3 min-w-[13rem] rounded-3xl border border-white/70 bg-white/95 p-3 text-stone-900 shadow-[0_22px_48px_rgba(20,33,61,0.18)] backdrop-blur sm:absolute sm:left-auto sm:right-0;
+  }
+
+  .locale-picker__title {
+    @apply mb-2 px-2 text-[0.68rem] font-semibold uppercase tracking-[0.2em] text-stone-400;
+  }
+
+  .locale-picker__item {
+    @apply flex w-full items-center justify-between rounded-2xl px-3 py-2 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-stone-900;
+  }
+
+  .locale-picker__item--active {
+    @apply bg-stone-100 font-medium text-stone-900;
+  }
+
+  .main-nav {
+    background: rgba(255, 251, 245, 0.82);
+    @apply border-b border-white/60 shadow-[0_10px_30px_rgba(20,33,61,0.08)];
+  }
+
+  .header-bar {
+    @apply flex flex-wrap items-center gap-4 py-4 sm:gap-5 sm:py-5 lg:flex-nowrap;
+  }
+
+  .brand-mark {
+    @apply inline-flex items-end gap-0.5 text-4xl font-black leading-none tracking-tight text-black transition-transform duration-300 hover:-translate-y-0.5 sm:text-5xl;
+  }
+
+  .brand-mark__accent {
+    @apply text-amber-500;
+  }
+
+  .menu-toggle {
+    @apply inline-flex h-11 items-center justify-center rounded-full border border-stone-300/70 bg-white/80 px-5 text-xs font-semibold uppercase tracking-[0.28em] text-stone-900 transition hover:border-amber-500 hover:text-amber-600;
+  }
+
+  .menu-panel {
+    @apply order-last w-full rounded-3xl border border-white/70 bg-white/95 p-4 shadow-[0_16px_34px_rgba(20,33,61,0.12)] backdrop-blur lg:order-none lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none;
+  }
+
+  .desktop-nav {
+    @apply flex items-center justify-center gap-8 xl:gap-12;
+  }
+
+  .desktop-nav__link {
+    @apply inline-flex items-center py-4 text-[1.04rem] font-medium text-stone-800 transition hover:text-amber-600;
+  }
+
+  .desktop-nav__toggle {
+    @apply inline-flex h-8 w-5 items-center justify-center text-sm text-stone-400 transition hover:text-amber-600;
+  }
+
+  .desktop-nav__entry--open .desktop-nav__link,
+  .desktop-nav__entry--open .desktop-nav__toggle {
+    @apply text-amber-600;
+  }
+
+  .mega-menu {
+    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 248, 240, 0.98));
+    @apply absolute inset-x-0 top-full z-50 border-t border-white/70 shadow-[0_28px_60px_rgba(20,33,61,0.16)] backdrop-blur;
+  }
+
+  .mega-menu__grid {
+    @apply site-container grid grid-cols-2 gap-x-12 gap-y-10 py-10 lg:grid-cols-4 xl:grid-cols-5;
+  }
+
+  .mega-menu__heading {
+    @apply mb-4 inline-flex text-sm font-semibold uppercase tracking-[0.12em] text-stone-900 transition hover:text-amber-600;
+  }
+
+  .mega-menu__link {
+    @apply inline-flex text-[1.02rem] leading-7 text-stone-700 transition hover:translate-x-1 hover:text-amber-600;
+  }
+
+  .mega-menu__all {
+    @apply col-span-full flex items-start justify-end border-t border-stone-200 pt-5;
+  }
+
+  .mega-menu__all-link {
+    @apply inline-flex text-sm font-semibold uppercase tracking-[0.18em] text-amber-600 transition hover:text-amber-700;
+  }
+
+  .header-actions {
+    @apply ml-0 flex items-center gap-4 text-2xl text-stone-900 lg:ml-auto;
+  }
+
+  .nav-icon {
+    @apply flex h-11 w-11 items-center justify-center rounded-full bg-white/70 text-[1.35rem] shadow-[0_10px_24px_rgba(20,33,61,0.08)] transition hover:-translate-y-0.5 hover:text-amber-600;
+  }
+
+  @media (max-width: 1023px) {
+    .desktop-nav,
+    .mega-menu {
+      display: none;
+    }
+  }
+
  button[type='submit'] {
    box-shadow: var(--cta-glow);
  }
@@ -1,6 +1,102 @@
 const root = document.documentElement;
 root.dataset.js = "ready";

+const menuToggle = document.querySelector("[data-menu-toggle]");
+const menuPanel = document.querySelector("[data-menu-panel]");
+const megaTriggers = [...document.querySelectorAll("[data-mega-trigger]")];
+const megaMenus = [...document.querySelectorAll("[data-mega-menu]")];
+
+if (menuToggle && menuPanel) {
+  const closeMenu = () => {
+    menuPanel.classList.add("hidden");
+    menuToggle.setAttribute("aria-expanded", "false");
+  };
+
+  const openMenu = () => {
+    menuPanel.classList.remove("hidden");
+    menuToggle.setAttribute("aria-expanded", "true");
+  };
+
+  menuToggle.addEventListener("click", () => {
+    const expanded = menuToggle.getAttribute("aria-expanded") === "true";
+    if (expanded) {
+      closeMenu();
+      return;
+    }
+    openMenu();
+  });
+
+  window.addEventListener("resize", () => {
+    if (window.innerWidth >= 1024) {
+      menuPanel.classList.remove("hidden");
+      menuToggle.setAttribute("aria-expanded", "true");
+      return;
+    }
+    closeMenu();
+  });
+}
+
+if (megaTriggers.length > 0 && megaMenus.length > 0) {
+  const closeMegaMenus = () => {
+    megaTriggers.forEach((trigger) => {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.closest(".desktop-nav__entry")?.classList.remove("desktop-nav__entry--open");
+    });
+    megaMenus.forEach((menu) => {
+      menu.classList.add("hidden");
+    });
+  };
+
+  const openMegaMenu = (trigger) => {
+    const target = trigger.dataset.megaTarget;
+    if (!target) return;
+    closeMegaMenus();
+    trigger.setAttribute("aria-expanded", "true");
+    trigger.closest(".desktop-nav__entry")?.classList.add("desktop-nav__entry--open");
+    document.getElementById(target)?.classList.remove("hidden");
+  };
+
+  megaTriggers.forEach((trigger) => {
+    trigger.addEventListener("click", (event) => {
+      if (window.innerWidth < 1024) return;
+      const expanded = trigger.getAttribute("aria-expanded") === "true";
+      const isLinkTrigger = trigger instanceof HTMLAnchorElement;
+      if (isLinkTrigger && expanded) {
+        return;
+      }
+      event.preventDefault();
+      if (expanded) {
+        closeMegaMenus();
+        return;
+      }
+      openMegaMenu(trigger);
+    });
+  });
+
+  document.addEventListener("click", (event) => {
+    if (window.innerWidth < 1024) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    const insideTrigger = megaTriggers.some((trigger) => trigger.contains(target));
+    const insideMenu = megaMenus.some((menu) => menu.contains(target));
+    if (!insideTrigger && !insideMenu) {
+      closeMegaMenus();
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      closeMegaMenus();
+    }
+  });
+
+  window.addEventListener("resize", () => {
+    if (window.innerWidth < 1024) {
+      closeMegaMenus();
+    }
+  });
+}
+
 const cartButton = document.querySelector("button[type='submit']");
 if (cartButton) {
  cartButton.addEventListener("mouseenter", () => {