ab888d99b0
Home page now opens with a BrandHero that plays the figure entrance animation in flow (replacing the full-screen SplashIntro overlay), followed by a 3-product Cook/Clean/Care teaser feeding the shop. Splash paths extracted to a shared module so BrandHero can render the same illustration without duplicating ~500KB of SVG path strings. ProductCard gains `cream` and `brand` tones (cream/green media wash with white card body); homepage teaser uses `brand`, shop catalogue switches to the green wash too. Bundle cards point at the new /bundles/background/* artwork. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
8.0 KiB
JavaScript
1 line
8.0 KiB
JavaScript
import{A as e,B as t,C as n,G as r,T as i,c as a,ft as o,i as s,j as c,l,m as u,o as d,p as f,r as p,s as m,u as h,ut as g,x as _}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as ee}from"./runtime-dom.esm-bundler-CXLmyuFK.js";import{a as v,o as y,t as b}from"./vue-router-Cyqru1db.js";import{t as x}from"./Logo-K2VN1F6l.js";import{t as S}from"./Icon-BCo6-bGH.js";import{t as C}from"./IconButton-Cw1KbfUO.js";import{t as w}from"./i18n-VERRV-oN.js";import{t as T}from"./LanguageSwitcher-69tpXxhb.js";import{t as E}from"./Search-CMgWklDk.js";import{r as D}from"./products-BqW5PUnm.js";import"./api-DlB23x7f.js";var te={class:`flex items-center gap-10 min-w-0`},ne={class:`hidden md:flex items-center gap-7`},re={class:`hidden md:flex items-center gap-4`},ie={key:0,class:`flex items-center gap-6 mr-2`},ae=[`aria-label`],O={class:`md:hidden flex items-center`},k={key:0,class:`md:hidden fixed bottom-5 left-5 z-40`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},A={key:1,class:`md:hidden fixed bottom-5 right-5 z-40 flex items-center gap-3`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},j={key:0,class:`fixed inset-0 z-50 bg-brand text-cream flex flex-col font-sans`},M={class:`flex items-center px-6 pt-6 pb-4`,style:{"padding-top":`calc(env(safe-area-inset-top) + 1.5rem)`}},N={class:`flex-1 flex flex-col justify-center px-8 gap-3 overflow-y-auto`},P={class:`px-6 flex justify-center`,style:{"padding-bottom":`calc(env(safe-area-inset-bottom) + 6.5rem)`}},F={class:`fixed bottom-5 left-5 right-5 z-[60] flex items-center gap-3`,style:{"padding-bottom":`env(safe-area-inset-bottom)`}},I={class:`inline-flex items-center gap-3`},L={key:0,class:`min-w-[22px] h-[22px] px-2 rounded-full bg-brand text-accent text-[12px] font-bold flex items-center justify-center`},R={class:`shrink-0`},z={__name:`Navbar`,props:{variant:{type:String,default:`paper`,validator:e=>[`brand`,`cream`,`paper`].includes(e)},layout:{type:String,default:`standard`,validator:e=>[`standard`,`floating`].includes(e)},items:{type:Array,default:()=>[{key:`nav.shop`,href:`#`},{key:`nav.applications`,href:`#`},{key:`nav.about`,href:`#`},{key:`nav.contact`,href:`#`}]},secondaryItems:{type:Array,default:()=>[]},cartCount:{type:Number,default:0},floatOnMobile:{type:Boolean,default:!0},products:{type:Array,default:()=>D}},emits:[`cart`,`nav`,`select`],setup(D){let z=D,{t:B}=w(),V=t(!1),H=t(!1),U={brand:{bar:`bg-brand text-cream border-cream-line`,link:`text-cream hover:text-accent`,logo:`text-cream`,searchTrigger:`border border-cream-line bg-cream-wash text-cream/80 hover:text-accent`},cream:{bar:`bg-cream text-brand border-line`,link:`text-brand hover:text-brand-hover`,logo:`text-brand`,searchTrigger:`border border-line-strong bg-paper text-muted hover:text-brand`},paper:{bar:`bg-paper text-ink border-line`,link:`text-ink hover:text-brand`,logo:`text-brand`,searchTrigger:`border border-line bg-paper text-muted hover:text-brand`}},W=d(()=>U[z.variant]),G=d(()=>z.layout===`floating`?`sticky top-4 md:top-6 z-30 mx-4 md:mx-6 rounded-lg border shadow-md`:`sticky top-0 z-30 border-b`),K=d(()=>z.layout===`floating`?`px-6 md:pl-4 md:pr-8 py-3 md:py-3.5`:`px-6 md:px-8 lg:px-10 py-5`),q=d(()=>z.layout===`floating`?`w-9 md:w-16 h-auto`:`w-12 md:w-24 h-auto`);function J(e){return e.key?B(e.key):e.label}let Y=d(()=>[...z.items,...z.secondaryItems]),X=v(),oe=y();function Z(){oe.push(`/login`)}function Q(e){if(!e||e===`#`)return!1;let t=X.path,n=`${X.path}${X.hash||``}`;return e.startsWith(`#`)?X.hash===e:e===t?!0:e===n}function $(e,t){if(!e||!e.href)return;let[n,r]=e.href.split(`#`);if((n||`/`)===X.path){if(r){let e=document.getElementById(r);if(e){t?.preventDefault?.(),e.scrollIntoView({behavior:`smooth`,block:`start`});try{history.replaceState(history.state,``,`#${r}`)}catch{}}return}t?.preventDefault?.(),window.scrollTo({top:0,behavior:`smooth`})}}function se(e){X.path===`/`&&(e?.preventDefault?.(),window.scrollTo({top:0,behavior:`smooth`}))}return e(V,e=>{typeof document>`u`||(document.documentElement.style.overflow=e?`hidden`:``)}),_(()=>{typeof document<`u`&&(document.documentElement.style.overflow=``)}),(e,t)=>(n(),h(`header`,{class:g([`font-sans`,G.value,W.value.bar])},[m(`div`,{class:g([K.value,`flex items-center justify-between gap-6`])},[m(`div`,te,[u(r(b),{to:`/`,class:g([`block shrink-0 py-1`,W.value.logo]),"aria-label":`Kaiser Natron home`,onClick:se},{default:c(()=>[u(x,{class:g(q.value)},null,8,[`class`])]),_:1},8,[`class`]),m(`nav`,ne,[(n(!0),h(p,null,i(D.items,t=>(n(),a(r(b),{key:t.key||t.label,to:t.href||`/`,class:g([Q(t.href)?`text-accent`:W.value.link,`text-[14px] font-medium tracking-label transition-colors duration-base`]),onClick:n=>{$(t,n),e.$emit(`nav`,t)}},{default:c(()=>[f(o(J(t)),1)]),_:2},1032,[`to`,`class`,`onClick`]))),128))])]),m(`div`,re,[D.secondaryItems.length?(n(),h(`nav`,ie,[(n(!0),h(p,null,i(D.secondaryItems,t=>(n(),a(r(b),{key:t.key||t.label,to:t.href||`/`,class:g([Q(t.href)?`text-accent`:W.value.link,`text-[14px] font-medium tracking-label transition-colors duration-base`]),onClick:n=>{$(t,n),e.$emit(`nav`,t)}},{default:c(()=>[f(o(J(t)),1)]),_:2},1032,[`to`,`class`,`onClick`]))),128))])):l(``,!0),m(`button`,{type:`button`,class:g([`inline-flex items-center gap-2 pl-3 pr-4 h-10 rounded-pill text-[13px] font-medium tracking-label transition-colors duration-base`,W.value.searchTrigger]),"aria-label":r(B)(`search.open`),onClick:t[0]||=e=>H.value=!0},[u(S,{name:`search`,size:16}),m(`span`,null,o(r(B)(`search.placeholder`)),1)],10,ae),u(T,{tone:D.variant},null,8,[`tone`]),u(C,{icon:`user`,variant:`float`,shadow:`none`,size:`md`,"aria-label":r(B)(`auth.login.cta`),onClick:Z},null,8,[`aria-label`]),u(C,{icon:`cart`,variant:`accent`,size:`md`,count:D.cartCount,"aria-label":r(B)(`cart.open`),onClick:t[1]||=t=>e.$emit(`cart`)},null,8,[`count`,`aria-label`])]),m(`div`,O,[u(C,{icon:`user`,variant:`float`,shadow:`none`,size:`md`,"aria-label":r(B)(`auth.login.cta`),onClick:Z},null,8,[`aria-label`])])],2),D.floatOnMobile?(n(),h(`div`,k,[u(C,{icon:`search`,variant:`float`,size:`lg`,"icon-stroke-width":2,"aria-label":r(B)(`search.open`),onClick:t[2]||=e=>H.value=!0},null,8,[`aria-label`])])):l(``,!0),D.floatOnMobile?(n(),h(`div`,A,[u(C,{icon:`cart`,variant:`accent`,size:`lg`,shadow:`md`,count:D.cartCount,"aria-label":r(B)(`cart.open`),onClick:t[3]||=t=>e.$emit(`cart`)},null,8,[`count`,`aria-label`]),u(C,{icon:`menu`,variant:`float`,size:`lg`,"icon-size":24,"icon-stroke-width":2,"aria-label":r(B)(`menu.open`),onClick:t[4]||=e=>V.value=!0},null,8,[`aria-label`])])):l(``,!0),(n(),a(s,{to:`body`},[u(ee,{"enter-active-class":`transition duration-slow ease-out`,"enter-from-class":`opacity-0 translate-y-2`,"enter-to-class":`opacity-100 translate-y-0`,"leave-active-class":`transition duration-base ease-out`,"leave-from-class":`opacity-100 translate-y-0`,"leave-to-class":`opacity-0 translate-y-2`},{default:c(()=>[V.value?(n(),h(`div`,j,[m(`div`,M,[u(x,{class:`w-12 h-auto text-cream`})]),m(`nav`,N,[(n(!0),h(p,null,i(Y.value,t=>(n(),a(r(b),{key:t.key||t.label,to:t.href||`/`,class:g([`font-serif font-normal text-[clamp(2.25rem,9vw,3.5rem)] tracking-tight leading-[1.05] transition-colors duration-base`,Q(t.href)?`text-accent`:`text-cream hover:text-accent`]),onClick:n=>{$(t,n),V.value=!1,e.$emit(`nav`,t)}},{default:c(()=>[f(o(J(t)),1)]),_:2},1032,[`to`,`class`,`onClick`]))),128))]),m(`div`,P,[u(T,{tone:`brand`})]),m(`div`,F,[m(`button`,{type:`button`,class:`flex-1 min-w-0 inline-flex items-center justify-between px-6 py-4 rounded-pill bg-accent text-brand font-semibold tracking-label hover:bg-accent-soft transition-colors shadow-md`,onClick:t[5]||=t=>{V.value=!1,e.$emit(`cart`)}},[m(`span`,I,[u(S,{name:`cart`,size:20}),f(` `+o(r(B)(`cart.label`)),1)]),D.cartCount>0?(n(),h(`span`,L,o(D.cartCount),1)):l(``,!0)]),m(`div`,R,[u(C,{icon:`close`,variant:`float`,size:`lg`,"icon-size":24,"icon-stroke-width":2,"aria-label":r(B)(`menu.close`),onClick:t[6]||=e=>V.value=!1},null,8,[`aria-label`])])])])):l(``,!0)]),_:1})])),u(E,{modelValue:H.value,"onUpdate:modelValue":t[7]||=e=>H.value=e,products:D.products,tone:D.variant,onSelect:t[8]||=t=>e.$emit(`search`,t)},null,8,[`modelValue`,`products`,`tone`])],2))}};export{z as t}; |