:root { --ink:#1e2722; --cream:#f5f1e9; --paper:#fbfaf6; --sage:#a8b79f; --moss:#56634f; --clay:#d97855; --line:rgba(30,39,34,.15); --mono:'DM Mono',monospace; --sans:'Manrope',sans-serif; --serif:'Playfair Display',serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; text-decoration:none; } button,input { font:inherit; } .store-announcement { background:var(--ink); color:#f7f2e9; text-align:center; font:500 10px/1 var(--mono); letter-spacing:.12em; padding:13px 20px; text-transform:uppercase; } .store-announcement span { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--clay); margin:0 15px 2px; }
.store-header { height:83px; padding:0 clamp(20px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(251,250,246,.92); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); } .store-mark { font-size:25px; font-weight:700; letter-spacing:-.09em; } .store-mark sup { color:var(--clay); font:500 7px var(--mono); letter-spacing:0; margin-left:4px; vertical-align:top; } .store-nav { display:flex; gap:28px; margin-left:70px; } .store-nav a { font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(30,39,34,.64); position:relative; } .store-nav a.is-active,.store-nav a:hover { color:var(--ink); } .store-nav a.is-active:after { content:""; position:absolute; bottom:-9px; left:0; width:17px; height:2px; background:var(--clay); } .store-actions { display:flex; align-items:center; gap:18px; } .store-icon,.store-bag,.store-menu { border:0; background:transparent; color:var(--ink); cursor:pointer; } .store-icon svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.6; } .store-bag { font:500 11px var(--mono); letter-spacing:.04em; text-transform:uppercase; } .store-bag span { display:inline-grid; place-items:center; height:18px; min-width:18px; background:var(--ink); color:white; border-radius:20px; margin-left:4px; font-size:9px; } .store-menu { display:none; width:26px; padding:0; } .store-menu i { display:block; height:1px; background:var(--ink); margin:5px 0; }
.store-hero { min-height:calc(100vh - 116px); display:grid; grid-template-columns:1.04fr .96fr; background:var(--cream); overflow:hidden; } .hero-copy { padding:clamp(70px,12vw,176px) clamp(24px,9vw,160px) 80px; align-self:center; position:relative; z-index:1; } .eyebrow { color:var(--moss); font:500 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; margin:0 0 20px; } .hero-copy h1,.section-heading h2,.products-heading h2,.story-copy h2 { margin:0; font:500 clamp(48px,6.6vw,104px)/.92 var(--serif); letter-spacing:-.055em; } h1 em,h2 em { color:var(--clay); font-weight:500; } .hero-description { max-width:360px; margin:32px 0; color:rgba(30,39,34,.7); font-size:15px; line-height:1.8; } .store-button { display:inline-flex; align-items:center; gap:25px; background:var(--ink); color:white; padding:17px 20px 17px 22px; text-transform:uppercase; font:500 10px var(--mono); letter-spacing:.09em; transition:transform .25s,background .25s; } .store-button span { font-size:18px; line-height:10px; } .store-button:hover { transform:translateY(-3px); background:var(--moss); }
.hero-art { position:relative; min-height:580px; background:linear-gradient(135deg,#b9c9b1,#dbe0ca); overflow:hidden; } .hero-art:after { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(45deg,transparent 48%,#61765e 49%,transparent 51%); background-size:16px 16px; mix-blend-mode:multiply; } .hero-orb { position:absolute; border-radius:50%; } .hero-orb-one { width:56vw; height:56vw; max-width:780px; max-height:780px; top:-23%; left:-17%; background:#ee8b66; } .hero-orb-two { width:39vw; height:39vw; max-width:540px; max-height:540px; right:-19%; bottom:-24%; border:1px solid rgba(30,39,34,.35); } .hero-vessel { position:absolute; z-index:1; width:clamp(190px,23vw,330px); height:clamp(260px,32vw,450px); bottom:-5px; left:48%; transform:translateX(-50%); background:#ece3d0; border-radius:47% 47% 17% 17% / 20% 20% 7% 7%; box-shadow:inset -42px 8px 50px rgba(96,98,64,.2),20px 25px 55px rgba(34,51,33,.22); } .hero-vessel:before { content:""; position:absolute; width:115%; height:35px; left:-7.5%; top:2px; border-radius:50%; background:#b8aa94; box-shadow:inset 0 8px 10px rgba(42,45,31,.16); } .hero-art p { position:absolute; z-index:2; right:9%; top:15%; font:italic 500 clamp(24px,3vw,44px)/.95 var(--serif); color:var(--ink); }
.store-values { padding:24px clamp(20px,5vw,76px); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; border-bottom:1px solid var(--line); } .store-values p { margin:0; font-size:12px; } .store-values span,.collection-number { color:var(--clay); font:500 10px var(--mono); margin-right:16px; }
.collections-section,.products-section { padding:clamp(70px,10vw,140px) clamp(20px,5vw,76px); } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:47px; } .section-heading h2,.products-heading h2 { font-size:clamp(40px,5vw,72px); } .collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .collection-card { min-height:370px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .35s; } .collection-card:hover { transform:translateY(-7px); } .collection-card-1 { background:#d9e3d2; } .collection-card-2 { background:#ead6c4; } .collection-card-3 { background:#d3d5be; } .collection-number { color:rgba(30,39,34,.5); margin:0; } .collection-card div { max-width:260px; } .collection-card h3 { font:500 34px/1 var(--serif); letter-spacing:-.04em; margin:0 0 14px; } .collection-card p { color:rgba(30,39,34,.65); font-size:13px; line-height:1.65; margin:0 0 28px; } .collection-link,.text-link { font:500 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; } .collection-link b { margin-left:9px; font-size:16px; font-weight:400; }
.products-section { background:var(--ink); color:#f8f5ed; } .products-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; } .products-heading .eyebrow { color:#c3d0bb; } .products-heading a { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:8px; } .products-heading a span { margin-left:10px; } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .product-image { height:clamp(270px,28vw,410px); position:relative; overflow:hidden; display:grid; place-items:center; } .product-image img { width:100%; height:100%; object-fit:cover; } .product-image-1 { background:#cfdcc8; } .product-image-2 { background:#e6c8b7; } .product-image-3 { background:#bdc9ae; } .product-image-4 { background:#e5dcb9; } .product-shape { width:40%; height:56%; background:rgba(250,247,238,.67); border-radius:48% 48% 13% 13% / 24% 24% 12% 12%; box-shadow:inset -18px 2px 30px rgba(57,71,54,.15); transform:rotate(-7deg); } .product-initial { position:absolute; color:rgba(30,39,34,.58); font:500 47px var(--serif); } .quick-add { position:absolute; left:12px; bottom:12px; right:12px; display:flex; justify-content:space-between; border:0; background:rgba(251,250,246,.95); color:var(--ink); padding:13px; opacity:0; transform:translateY(8px); transition:.25s; cursor:pointer; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; } .quick-add span { font-size:16px; line-height:10px; } .product-card:hover .quick-add { opacity:1; transform:none; } .product-meta { padding-top:14px; } .product-meta p { color:rgba(248,245,237,.48); margin:0 0 8px; font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; } .product-meta div { display:flex; justify-content:space-between; align-items:start; gap:15px; } .product-meta h3 { font:500 21px/1.1 var(--serif); margin:0; letter-spacing:-.025em; } .product-meta span { white-space:nowrap; font-size:12px; }
.story-section { display:grid; grid-template-columns:1fr 1fr; background:#e8dfcc; } .story-art { min-height:520px; background:var(--clay); position:relative; overflow:hidden; color:#faebd8; } .story-art:before { content:""; position:absolute; width:140%; height:72%; left:-22%; bottom:-28%; background:#d1ddc8; border-radius:50% 50% 0 0; transform:rotate(-10deg); } .story-doodle { position:absolute; z-index:1; top:50px; left:11%; font:italic 500 clamp(180px,27vw,360px)/.7 var(--serif); color:rgba(248,238,214,.82); } .story-art > span:last-child { position:absolute; z-index:2; right:10%; bottom:14%; text-align:right; font:italic 500 clamp(27px,3.5vw,48px)/.9 var(--serif); color:var(--ink); } .story-copy { padding:clamp(65px,11vw,140px); align-self:center; } .story-copy h2 { font-size:clamp(45px,5vw,75px); } .story-copy > p:not(.eyebrow) { margin:27px 0 31px; max-width:420px; color:rgba(30,39,34,.7); font-size:14px; line-height:1.85; } .text-link { border-bottom:1px solid var(--ink); padding-bottom:7px; } .text-link span { margin-left:12px; font-size:16px; }
.store-footer { display:grid; grid-template-columns:1.2fr .8fr 1.2fr; gap:40px; padding:72px clamp(20px,5vw,76px) 48px; background:var(--ink); color:#f8f5ed; position:relative; } .store-footer .store-mark { display:inline-block; margin-bottom:18px; } .store-footer p { margin:0; color:rgba(248,245,237,.55); max-width:290px; font-size:13px; line-height:1.65; } .store-footer a:not(.store-mark) { display:block; width:max-content; margin-bottom:10px; color:rgba(248,245,237,.7); font-size:13px; } .footer-label { color:#c2d1b9 !important; font:500 10px var(--mono) !important; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px !important; } .footer-form { display:flex; margin-top:19px; border-bottom:1px solid rgba(248,245,237,.45); max-width:340px; } .footer-form input { min-width:0; flex:1; background:transparent; color:white; border:0; outline:0; padding:12px 0; font-size:13px; } .footer-form input::placeholder { color:rgba(248,245,237,.4); } .footer-form button { border:0; background:transparent; color:#c2d1b9; cursor:pointer; text-transform:uppercase; font:500 10px var(--mono); letter-spacing:.1em; } .store-copyright { position:absolute; bottom:25px; left:clamp(20px,5vw,76px); font:10px var(--mono) !important; }
@media (max-width:800px) { .store-announcement { font-size:8px; white-space:nowrap; overflow:hidden; } .store-announcement span { margin:0 8px 2px; } .store-header { height:68px; } .store-mark { font-size:22px; } .store-nav,.store-icon { display:none; } .store-menu { display:block; } .store-actions { gap:14px; } .store-hero,.story-section { grid-template-columns:1fr; } .hero-copy { padding:78px 24px 60px; } .hero-copy h1 { font-size:66px; } .hero-art { min-height:420px; } .hero-orb-one { width:85vw; height:85vw; } .hero-orb-two { width:66vw; height:66vw; } .store-values { grid-template-columns:1fr; gap:13px; padding:20px 24px; } .collections-section,.products-section { padding:70px 20px; } .section-heading,.products-heading { display:block; } .section-heading h2,.products-heading h2 { font-size:51px; } .products-heading a { display:inline-block; margin-top:25px; } .collection-grid { grid-template-columns:1fr; } .collection-card { min-height:280px; } .product-grid { grid-template-columns:repeat(2,1fr); gap:25px 12px; } .product-image { height:250px; } .quick-add { display:none; } .product-meta h3 { font-size:18px; } .product-meta span { font-size:11px; } .story-art { min-height:370px; } .story-copy { padding:70px 24px; } .store-footer { grid-template-columns:1fr; padding:55px 24px 75px; gap:35px; } .store-copyright { left:24px; } }