/* ===================================================================== VILLAGE TEA — Té, café & delicatessen · Eixample, Barcelona Design system. Signature: the chamfered grid (xamfrà + tin shelving). Type: Fraunces (display) · Hanken Grotesk (text) · Spline Sans Mono (labels) Loaded via in . ===================================================================== */ /* ----------------------------- Tokens ------------------------------ */ :root{ /* Palette — led by deep tea-pine, not the cream cliché */ --pine:#16352A; /* dominant brand green */ --pine-2:#1E4634; /* lifted green */ --pine-deep:#0E2118; /* near-black green (hero/footer) */ --brass:#B98D3E; /* the gold tins */ --brass-2:#D8B468; /* highlight gold */ --brass-deep:#8A6526; --oat:#ECE3D1; /* warm paper bg */ --oat-2:#F4EEE0; /* lighter paper (cards) */ --sand:#E0D4BB; /* muted panel */ --graphite:#211F1B; /* black metal / ink */ --graphite-soft:#4B463C; /* secondary text */ --mist:#C7CcС0; /* not used as color, placeholder */ --line:rgba(33,31,27,.16); --line-soft:rgba(33,31,27,.09); --cream-line:rgba(236,227,209,.18); /* Roles */ --bg:var(--oat); --ink:var(--graphite); --ink-soft:var(--graphite-soft); /* Type */ --display:"Fraunces",Georgia,"Times New Roman",serif; --text:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,sans-serif; --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Fluid type scale */ --fs-hero:clamp(3.1rem,1.4rem + 6.4vw,7.4rem); --fs-h1:clamp(2.4rem,1.4rem + 3.6vw,4.4rem); --fs-h2:clamp(1.9rem,1.2rem + 2.6vw,3.2rem); --fs-h3:clamp(1.35rem,1.05rem + 1.1vw,1.9rem); --fs-lead:clamp(1.06rem,.99rem + .42vw,1.32rem); --fs-body:clamp(1rem,.97rem + .12vw,1.08rem); --fs-label:.74rem; /* Space + structure */ --wrap:1280px; --gut:clamp(1.15rem,.6rem + 2.2vw,2.6rem); --sect:clamp(4.5rem,3rem + 7vw,9rem); --cut:15px; /* chamfer size (the signature) */ --r:6px; --shadow:0 22px 60px -28px rgba(14,33,24,.5); --shadow-sm:0 10px 30px -18px rgba(14,33,24,.45); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* ----------------------------- Reset ------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--text); font-size:var(--fs-body); line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none;padding:0} ::selection{background:var(--brass);color:var(--pine-deep)} :focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:2px} /* subtle paper grain for warmth (very light) */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* --------------------------- Typography ---------------------------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:430;line-height:1.04;letter-spacing:-.012em;font-optical-sizing:auto} .display{font-family:var(--display)} .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft)} em,.it{font-style:italic} .kicker{ font-family:var(--mono);font-size:var(--fs-label);font-weight:500; letter-spacing:.28em;text-transform:uppercase;color:var(--brass-deep); display:inline-flex;align-items:center;gap:.7em; } .kicker::before{content:"";width:1.9rem;height:1px;background:var(--brass);opacity:.7} .kicker.center::after{content:"";width:1.9rem;height:1px;background:var(--brass);opacity:.7} .mono{font-family:var(--mono);letter-spacing:.02em} /* ---------------------------- Layout ------------------------------- */ .wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto} .section{padding-block:var(--sect)} .section--tight{padding-block:clamp(3rem,2rem + 4vw,5.5rem)} /* ---------------------------- Buttons ------------------------------ */ .btn{ --pad:.95em 1.6em; display:inline-flex;align-items:center;gap:.6em; font-family:var(--mono);font-size:.82rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase; padding:var(--pad);line-height:1;position:relative;isolation:isolate; transition:transform .5s var(--ease-out),color .35s,background .35s; clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px)); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--solid{background:var(--pine);color:var(--oat-2)} .btn--solid:hover{background:var(--pine-deep);color:#fff} .btn--brass{background:var(--brass);color:var(--pine-deep)} .btn--brass:hover{background:var(--brass-2)} .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--pine);color:var(--pine)} .btn--ghost-light{background:transparent;color:var(--oat-2);box-shadow:inset 0 0 0 1.5px var(--cream-line)} .btn--ghost-light:hover{background:rgba(236,227,209,.1);color:#fff} .btn--wa{background:#1f7a52;color:#fff} .btn--wa:hover{background:#1a6646} .btn .ic{width:1.05em;height:1.05em;flex:none} .linkmore{ font-family:var(--mono);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase; color:var(--pine);display:inline-flex;align-items:center;gap:.55em;position:relative;padding-bottom:3px; } .linkmore::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--brass); transform:scaleX(.34);transform-origin:left;transition:transform .45s var(--ease-out)} .linkmore:hover::after{transform:scaleX(1)} .linkmore .ar{transition:transform .4s var(--ease-out)} .linkmore:hover .ar{transform:translateX(4px)} /* --------------------- Chamfer / frame utilities ------------------- */ .cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))} .framed{position:relative;background:var(--brass);padding:7px; clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut))); filter:drop-shadow(0 26px 50px rgba(14,33,24,.32));} .framed>img,.framed>.ph{width:100%;height:100%;object-fit:cover;display:block; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))} /* image placeholder shimmer while real photos load/swapped */ .ph{background: linear-gradient(135deg,var(--pine) 0%,var(--pine-2) 55%,var(--brass-deep) 140%); position:relative;overflow:hidden} .ph::after{content:"";position:absolute;inset:0;background: radial-gradient(120% 80% at 80% 10%,rgba(216,180,104,.25),transparent 60%)} /* --------------------------- Top bar ------------------------------- */ .topbar{background:var(--pine-deep);color:var(--oat);font-family:var(--mono); font-size:.7rem;letter-spacing:.16em;text-transform:uppercase} .topbar .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:center; min-height:38px;text-align:center;flex-wrap:wrap;padding-block:.5rem} .topbar b{color:var(--brass-2);font-weight:500} .topbar .star{color:var(--brass-2)} .topbar .dot{opacity:.4} @media (max-width:680px){.topbar .hide-s{display:none}} /* ---------------------------- Header ------------------------------- */ .site-header{position:sticky;top:0;z-index:200;transition:background .5s var(--ease),box-shadow .5s,padding .5s} .site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding-block:clamp(.85rem,.6rem + .6vw,1.2rem)} .brand{display:flex;align-items:center;gap:.7rem;line-height:1} .brand .mark{width:34px;height:34px;flex:none;color:var(--brass)} .brand .wordmark{font-family:var(--display);font-size:1.52rem;font-weight:500;letter-spacing:.01em;color:var(--ink)} .brand .wordmark small{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.42em; text-transform:uppercase;color:var(--ink-soft);margin-top:3px;font-weight:500} .nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.3rem)} .nav .btn{font-size:.9rem;padding:1.05em 1.7em} .nav a.navlink{font-family:var(--mono);font-size:.95rem;letter-spacing:.07em;text-transform:uppercase; color:var(--ink);position:relative;padding:.4rem 0;transition:color .3s} .nav a.navlink::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--brass); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)} .nav a.navlink:hover{color:var(--pine)} .nav a.navlink:hover::after{transform:scaleX(1)} .langsw{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.92rem;letter-spacing:.06em} .langsw a,.langsw span{color:inherit;opacity:.5;transition:opacity .3s} .langsw a:hover{opacity:1} .langsw [aria-current="true"]{opacity:1;color:var(--brass)} .site-header[data-mode="over"]:not(.scrolled) .langsw [aria-current="true"]{color:var(--brass-2)} /* header over the dark hero = light text; .scrolled = solid paper */ .site-header[data-mode="over"] .wordmark, .site-header[data-mode="over"] .navlink{color:var(--oat-2)} .site-header[data-mode="over"] .wordmark small{color:rgba(236,227,209,.7)} .site-header.scrolled{background:rgba(236,227,209,.92);backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--line-soft),0 12px 30px -24px rgba(14,33,24,.5)} .site-header.scrolled[data-mode="over"] .wordmark, .site-header.scrolled[data-mode="over"] .navlink{color:var(--ink)} .site-header.scrolled[data-mode="over"] .wordmark small{color:var(--ink-soft)} .site-header.scrolled .brand .mark{color:var(--brass)} .navtoggle{display:none;width:46px;height:46px;align-items:center;justify-content:center} .navtoggle span{position:relative;width:24px;height:2px;background:currentColor;color:var(--ink);transition:.3s} .navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:.3s} .navtoggle span::before{top:-7px}.navtoggle span::after{top:7px} .site-header[data-mode="over"]:not(.scrolled) .navtoggle span{color:var(--oat-2)} /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:300;background:var(--pine-deep);color:var(--oat-2); display:flex;flex-direction:column;justify-content:center;padding:var(--gut); transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden} .drawer.open{transform:translateY(0);visibility:visible} .drawer a{font-family:var(--display);font-size:clamp(2rem,9vw,3rem);padding:.35rem 0;color:var(--oat-2); border-bottom:1px solid var(--cream-line);display:flex;justify-content:space-between;align-items:center} .drawer a .n{font-family:var(--mono);font-size:.8rem;color:var(--brass-2);letter-spacing:.1em} .drawer .close{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--mono);font-size:.8rem; letter-spacing:.15em;text-transform:uppercase;color:var(--brass-2)} .drawer .foot{margin-top:2rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:rgba(236,227,209,.65)} /* ----------------------------- Hero -------------------------------- */ .hero{position:relative;margin-top:calc(-1 * var(--header-h,80px));min-height:clamp(620px,94vh,1000px); display:flex;align-items:flex-end;color:var(--oat-2);overflow:hidden;background:var(--pine-deep)} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img,.hero__bg .ph{width:100%;height:100%;object-fit:cover} .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;background: linear-gradient(180deg,rgba(14,33,24,.5) 0%,rgba(14,33,24,.16) 30%,rgba(14,33,24,.5) 72%,rgba(14,33,24,.95) 100%), linear-gradient(95deg,rgba(14,33,24,.85) 0%,rgba(14,33,24,.52) 36%,rgba(14,33,24,.08) 66%,transparent 100%)} .hero__inner{position:relative;z-index:1;width:100%;padding-bottom:clamp(2.4rem,5vw,4.5rem);padding-top:8rem} .hero .kicker{color:var(--brass-2)} .hero .kicker::before{background:var(--brass-2)} .hero h1{font-size:var(--fs-hero);font-weight:400;color:#fff;margin:.5em 0 .42em;max-width:16ch;letter-spacing:-.02em;text-shadow:0 2px 34px rgba(14,33,24,.6),0 1px 5px rgba(14,33,24,.45)} .hero h1 em{color:var(--brass-2);font-weight:400} .hero__lead{max-width:48ch;color:rgba(236,227,209,.94);font-size:var(--fs-lead);text-shadow:0 1px 18px rgba(14,33,24,.55)} .hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem} .hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin-top:2.6rem; padding-top:1.6rem;border-top:1px solid var(--cream-line);font-family:var(--mono);font-size:.76rem; letter-spacing:.04em;color:rgba(236,227,209,.8)} .hero__meta b{color:var(--brass-2);font-weight:500} .hero__meta .star{letter-spacing:.05em} .scrollcue{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2; font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(236,227,209,.7); display:flex;flex-direction:column;align-items:center;gap:.6rem} .scrollcue .l{width:1px;height:40px;background:linear-gradient(var(--brass-2),transparent);animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}} /* cinematic hero — slow crossfade "tour" of the real shop (Ken Burns) */ .hero__bg .hero__slide{position:absolute;inset:0;background-size:cover;background-position:center 46%; opacity:0;will-change:opacity,transform;animation:heroFade 22.5s infinite,heroKB 22.5s infinite} .hero__bg .hero__slide:nth-child(2){animation-delay:7.5s,7.5s} .hero__bg .hero__slide:nth-child(3){animation-delay:15s,15s} @keyframes heroFade{0%{opacity:0}6%{opacity:1}29%{opacity:1}37%{opacity:0}100%{opacity:0}} @keyframes heroKB{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.17) translateY(-5%)}} /* --------------------------- Marquee ------------------------------- */ .marquee{background:var(--pine);color:var(--oat);overflow:hidden;border-block:1px solid rgba(216,180,104,.16)} .marquee__track{display:flex;gap:0;width:max-content;animation:marq 46s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee span{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem); padding:1.1rem 1.7rem;display:inline-flex;align-items:center;gap:1.7rem;white-space:nowrap;color:rgba(236,227,209,.92)} .marquee span::after{content:"✦";font-style:normal;color:var(--brass-2);font-size:.7em} @keyframes marq{to{transform:translateX(-50%)}} /* ------------------------- Section heading ------------------------- */ .shead{display:grid;gap:1rem;max-width:62ch} .shead.center{justify-items:center;text-align:center;margin-inline:auto} .shead__num{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;color:var(--brass-deep)} .shead h2{font-size:var(--fs-h2);font-weight:430} .shead h2 em{color:var(--pine);font-weight:430} .shead p{color:var(--ink-soft);font-size:var(--fs-lead);max-width:54ch} .shead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none;flex-wrap:wrap} /* ------------------------- Collections grid ------------------------ */ .collections{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.5rem);margin-top:3rem} .col-card{position:relative;aspect-ratio:16/10;overflow:hidden;color:var(--oat-2); display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;isolation:isolate; clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut))); background:var(--pine)} .col-card__img{position:absolute;inset:0;z-index:-2} .col-card__img img,.col-card__img .ph{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)} .col-card::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(14,33,24,.12) 0%,rgba(14,33,24,.22) 30%,rgba(14,33,24,.58) 62%,rgba(14,33,24,.95) 100%)} .col-card:hover .col-card__img img,.col-card:hover .col-card__img .ph{transform:scale(1.06)} .col-card__n{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--brass-2);text-transform:uppercase;text-shadow:0 1px 10px rgba(14,33,24,.7)} .col-card h3{font-size:clamp(1.45rem,2.4vw,2.1rem);font-weight:440;color:#fff;margin-top:.35rem;text-shadow:0 1px 18px rgba(14,33,24,.6)} .col-card p{font-size:.95rem;color:rgba(236,227,209,.94);margin-top:.3rem;max-width:32ch;text-shadow:0 1px 12px rgba(14,33,24,.7)} .col-card .go{margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--oat-2);display:inline-flex;gap:.5em;align-items:center;opacity:.9} .col-card .go .ar{transition:transform .4s var(--ease-out)} .col-card:hover .go .ar{transform:translateX(5px)} .col-card .corner{position:absolute;top:0;right:0;width:var(--cut);height:var(--cut);background:var(--brass); z-index:1;opacity:0;transition:opacity .4s} .col-card:hover .corner{opacity:1} /* --------------------------- Catalog ------------------------------- */ .catalog{background:var(--oat-2)} .filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.4rem 0 2.8rem} .chip{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase; padding:.6rem 1.05rem;color:var(--ink-soft);background:transparent; box-shadow:inset 0 0 0 1.3px var(--line);transition:.3s; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))} .chip:hover{box-shadow:inset 0 0 0 1.3px var(--pine);color:var(--pine)} .chip[aria-pressed="true"]{background:var(--pine);color:var(--oat-2);box-shadow:none} .chip b{color:inherit;opacity:.55;font-weight:500;margin-left:.4em} .grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1rem,1.6vw,1.6rem)} .product{display:flex;flex-direction:column;background:var(--oat);overflow:hidden;position:relative; transition:transform .55s var(--ease-out); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); box-shadow:0 1px 0 rgba(255,255,255,.5) inset} .product:hover{transform:translateY(-5px)} .product__media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden} .product__media img,.product__media .ph{width:100%;height:100%;object-fit:contain;padding:11%; transition:transform .7s var(--ease-out);mix-blend-mode:multiply} .product:hover .product__media img{transform:scale(1.05)} .product__tag{position:absolute;top:.7rem;left:.7rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--pine);background:rgba(236,227,209,.92);padding:.32rem .55rem; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))} .product__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .product__name{font-family:var(--display);font-size:1.12rem;font-weight:500;line-height:1.18;color:var(--ink)} .product__note{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-soft); text-transform:uppercase} .product__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding-top:.7rem;border-top:1px solid var(--line-soft)} .product__price{font-family:var(--mono);font-size:.78rem;color:var(--pine);letter-spacing:.02em} .product__wa{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center; background:var(--pine);color:var(--oat-2);transition:.3s; clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))} .product__wa:hover{background:var(--brass);color:var(--pine-deep)} .product__wa svg{width:18px;height:18px} .catalog__more{text-align:center;margin-top:3rem} .is-hidden{display:none!important} /* ----------------------- Feature band (matcha) --------------------- */ .feature{background:var(--pine-deep);color:var(--oat-2);overflow:hidden} .feature .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center} .feature__txt .kicker{color:var(--brass-2)}.feature__txt .kicker::before{background:var(--brass-2)} .feature__txt h2{font-size:var(--fs-h2);color:#fff;margin:.6em 0 .5em;font-weight:420} .feature__txt h2 em{color:var(--brass-2)} .feature__txt p{color:rgba(236,227,209,.85);max-width:46ch} .feature__list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 2rem} .feature__list li{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--brass-2);padding:.45rem .8rem;box-shadow:inset 0 0 0 1px rgba(216,180,104,.3); clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))} .feature__img{position:relative} .feature__img .framed{filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))} .feature__img .framed>img{object-fit:contain;background:var(--oat-2);padding:9%} .feature__img .framed,.feature__img img,.feature__img .ph{aspect-ratio:4/5} /* ----------------------------- Story ------------------------------- */ .story .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center} .story__media{position:relative} .story__media .framed{aspect-ratio:4/5} .story__media .framed img,.story__media .framed .ph{aspect-ratio:4/5} .story__media .seal{position:absolute;right:-22px;bottom:-22px;width:118px;height:118px;background:var(--brass); color:var(--pine-deep);border-radius:50%;display:grid;place-items:center;text-align:center; font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5; box-shadow:var(--shadow);transform:rotate(-7deg)} .story__media .seal b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:0} .story__txt h2{font-size:var(--fs-h2);margin:.5em 0;font-weight:430} .story__txt h2 em{color:var(--pine)} .story__txt p+p{margin-top:1rem} .story__sign{margin-top:1.8rem;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--pine)} .story__sign small{display:block;font-family:var(--mono);font-style:normal;font-size:.68rem; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem} /* ---------------------------- Values ------------------------------- */ .values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.4rem);margin-top:3rem} .value{display:flex;flex-direction:column;gap:.8rem} .value .ic{width:42px;height:42px;color:var(--brass);stroke-width:1.4} .value h3{font-family:var(--display);font-size:1.28rem;font-weight:500} .value p{font-size:.96rem;color:var(--ink-soft)} .value .no{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--line);color:rgba(33,31,27,.35)} /* ---------------------------- Reviews ------------------------------ */ .reviews{background:var(--pine);color:var(--oat-2);text-align:center} .reviews .wrap{display:grid;justify-items:center;gap:1.4rem} .reviews .stars{color:var(--brass-2);font-size:1.7rem;letter-spacing:.18em} .reviews .big{font-family:var(--display);font-size:clamp(1.7rem,1rem + 3vw,3rem);font-weight:400; max-width:20ch;line-height:1.18;color:#fff} .reviews .gbadge{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.8rem; letter-spacing:.06em;background:rgba(236,227,209,.08);padding:.7rem 1.2rem; box-shadow:inset 0 0 0 1px var(--cream-line); clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))} .reviews .gbadge b{color:var(--brass-2)} /* ----------------------------- Visit ------------------------------- */ .visit .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.8rem,4vw,4rem);align-items:stretch} .visit__info{display:flex;flex-direction:column;gap:1.5rem} .vrow{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding-bottom:1.2rem; border-bottom:1px solid var(--line-soft)} .vrow .ic{width:24px;height:24px;color:var(--brass);margin-top:3px} .vrow .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .vrow .v{font-size:1.05rem;color:var(--ink);margin-top:.25rem} .vrow .v a:hover{color:var(--pine)} .vrow .hours{font-family:var(--mono);font-size:.82rem;line-height:1.9;color:var(--ink)} .vrow .hours .closed{color:#a6502f} .visit__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem} .visit__map{position:relative;min-height:340px;background:var(--sand);overflow:hidden; clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))} .visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.02)} /* ---------------------------- Footer ------------------------------- */ .site-footer{background:var(--pine-deep);color:var(--oat);padding-top:clamp(3.5rem,6vw,6rem)} .site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem} .site-footer .brand .wordmark{color:var(--oat-2)} .site-footer .brand .wordmark small{color:rgba(236,227,209,.6)} .site-footer .blurb{margin-top:1.1rem;max-width:34ch;color:rgba(236,227,209,.75);font-size:.96rem} .fcol h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--brass-2);font-weight:500;margin-bottom:1.1rem} .fcol a,.fcol p{display:block;color:rgba(236,227,209,.82);padding:.3rem 0;font-size:.95rem;transition:color .3s} .fcol a:hover{color:#fff} .newsletter{display:flex;margin-top:1rem; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))} .newsletter input{flex:1;min-width:0;background:rgba(236,227,209,.08);border:none;color:var(--oat-2); padding:.8rem 1rem;font-family:var(--mono);font-size:.78rem} .newsletter input::placeholder{color:rgba(236,227,209,.45)} .newsletter button{background:var(--brass);color:var(--pine-deep);padding:0 1.1rem;font-family:var(--mono); font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} .site-footer .bottom{margin-top:clamp(2.5rem,5vw,4rem);padding:1.6rem 0;border-top:1px solid var(--cream-line); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:rgba(236,227,209,.6)} .site-footer .bottom a:hover{color:var(--brass-2)} .socials{display:flex;gap:.7rem;margin-top:1.2rem} .socials a{width:40px;height:40px;display:grid;place-items:center;color:var(--oat-2); box-shadow:inset 0 0 0 1px var(--cream-line);transition:.3s; clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))} .socials a:hover{background:var(--brass);color:var(--pine-deep)} .socials svg{width:19px;height:19px} /* --------------------------- Lightbox ------------------------------ */ .lightbox{position:fixed;inset:0;z-index:500;background:rgba(14,33,24,.94);display:none; align-items:center;justify-content:center;padding:var(--gut)} .lightbox.open{display:flex} .lightbox img{max-width:90vw;max-height:86vh;object-fit:contain; clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))} .lightbox .x{position:absolute;top:1.4rem;right:1.6rem;color:var(--oat-2);font-family:var(--mono); font-size:.8rem;letter-spacing:.15em;text-transform:uppercase} /* ---------------------- Reveal animations -------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s} /* ---------------------------- Responsive --------------------------- */ @media (max-width:1080px){ .values{grid-template-columns:repeat(2,1fr)} .site-footer .top{grid-template-columns:1fr 1fr;gap:2rem} } @media (max-width:860px){ .nav .navlink,.nav .btn,.nav .langsw{display:none} .navtoggle{display:flex} .feature .wrap,.story .wrap,.visit .wrap{grid-template-columns:1fr} .story__media{order:-1} .feature__img{order:-1} .story__media .seal{right:8px;bottom:8px;width:94px;height:94px} } @media (max-width:680px){ .collections{grid-template-columns:1fr;gap:.7rem} .col-card{aspect-ratio:16/11} .grid-products{grid-template-columns:repeat(2,1fr);gap:.7rem} .product__name{font-size:1rem} .shead--row{flex-direction:column;align-items:flex-start} .site-footer .top{grid-template-columns:1fr} } @media (max-width:420px){ .grid-products{grid-template-columns:1fr} } /* ---------------------- Reduced motion ----------------------------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} .marquee__track{animation:none;transform:none} .hero__bg .hero__slide{animation:none!important;opacity:0} .hero__bg .hero__slide:nth-child(1){opacity:1} }