/* ══════════════════════════════════════════════════════════════════ LA VALETTE BOUTIQUE — DRAWER (shared component) ────────────────────────────────────────────────────────────────── THE single drawer used by the homepage and every SEO page. Extracted verbatim from index.html, which remains the source of truth. There is deliberately no second implementation: a parallel "matching" drawer cannot stay identical, it only diverges more slowly. Contract (see assets/drawer.js): #ham opens #drawerClose / #drawerBackdrop close .drawer.open open state body.drawer-locked iOS scroll lock Do not put transform, filter, backdrop-filter or will-change on any ancestor of .drawer — each makes position:fixed resolve against that ancestor instead of the viewport. .drawer belongs to . ══════════════════════════════════════════════════════════════════ */ /* Hamburger (mobile) */ .ham { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 10px; } .ham-lines { display: flex; flex-direction: column; gap: 5px; width: 22px; } .ham-lines span { display: block; height: 1.5px; width: 100%; background: var(--white); transition: background var(--t-slow), transform var(--t-base), opacity var(--t-base); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .nav.scrolled .ham-lines span { background: var(--ink); box-shadow: none; } @media (max-width: 899px) { .ham { display: inline-flex; } } /* ══════════════════════════════════════════════════════════ DRAWER (mobile menu) ══════════════════════════════════════════════════════════ */ .drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(20, 22, 20, 0); pointer-events: none; transition: background var(--t-slow) var(--ez); } .drawer-backdrop.open { background: rgba(20, 22, 20, 0.42); pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: var(--z-drawer); background: var(--bg); transform: translateX(100%); transition: transform var(--t-slow) var(--ez); display: flex; flex-direction: column; padding: 24px var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -20px 0 60px rgba(0,0,0,0.12); } .drawer.open { transform: translateX(0); } .drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s5); } .drawer-logo { font-size: var(--fs-caption); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink); line-height: 1.2; } .drawer-logo span { display: block; font-size: 9px; letter-spacing: 0.32em; opacity: 0.6; margin-top: 3px; } .drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--ink); } .drawer-close svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.6; fill: none; transition: stroke var(--t-base); } .drawer-close:hover svg { stroke: var(--sage-dk); } .drawer-nav { list-style: none; display: flex; flex-direction: column; gap: 0; margin-bottom: var(--s5); } .drawer-nav a { display: block; padding: 18px 0; font-size: var(--fs-h3); font-weight: var(--w-light); color: var(--ink); border-bottom: 1px solid var(--border-lt); transition: color var(--t-base) var(--ez-alt); } .drawer-nav a:hover { color: var(--sage-dk); } .drawer-lang { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); padding-top: var(--s3); } .drawer-lang button { font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink-55); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; cursor: pointer; transition: all var(--t-base) var(--ez-alt); min-height: 40px; } .drawer-lang button.on { color: var(--sage-dk); border-color: var(--sage); background: var(--sage-05); } .drawer-lang button:hover { color: var(--ink); border-color: var(--ink-40); } .drawer-cta { padding: 16px; font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; background: var(--sage); color: var(--white); border: 1px solid var(--sage); border-radius: var(--r-sm); text-align: center; text-decoration: none; display: block; transition: background var(--t-base); } .drawer-cta:hover { background: var(--sage-dk); border-color: var(--sage-dk); } .drawer-foot { margin-top: auto; padding-top: var(--s4); color: var(--ink-55); font-size: var(--fs-caption); line-height: var(--lh-body); } .drawer-foot a { color: var(--ink); } .drawer-foot a:hover { color: var(--sage-dk); }