lang

web/src/app.css

@@ -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);
   }