/* ===================================================================== lookbook-store — "Atelier" Warm editorial sneaker & apparel store. Display: Fraunces (optical serif). Body: Mulish. Palette: ivory / mocha / espresso. Paper grain, organic rounded cards. ===================================================================== */ /* Unbranded defaults for the two operator colour slots. The layout injects ONLY the slots the operator actually set (storefront/_preview/palette.html.twig, fed by StorefrontContext::site() -> PreviewParams::colorsFromQuery, which returns [] for an unbranded load), so --brand / --secondary are UNDEFINED on a plain storefront and every bare `var(--brand)` below silently drops its whole declaration — the checkout's selected delivery option lost its ring and dot, and the step pips lost their done state. CASCADE LAYER on purpose: unlayered declarations always beat layered ones regardless of source order, so the operator's inline :root still wins, while a plain :root copy here would cascade AFTER it and clobber ?brand=. Values match the var() fallbacks already used below and design/theme-previews/lookbook-store/styles.css. */ @layer storegrid-theme-defaults { :root { --brand: #4a3526; --secondary: #b08968; } } :root { /* --brand / --secondary are injected by _layout.html.twig (inline, BEFORE this linked sheet) from the operator's site.brand_color / site.secondary_color so the ?brand= preview override works. They are deliberately NOT redeclared here — a :root copy would cascade later and clobber the operator value. The dark-fill accent (--espresso, every CTA / dark band / active chip + the depth shadow) derives from var(--brand); the mocha glow halos from var(--secondary). #4a3526 / #b08968 survive only as var() fallbacks. Setting a brand colour recolours that accent layer while the ivory/cream/sand paper canvas, --ink text, hairlines and grain stay warm-neutral so the Atelier identity holds. */ /* Editable palette (3 slots): brand → --espresso : the dark-fill accent (CTA / dark band / active chip + depth shadow) derives from var(--brand) secondary → mocha glow halos derive from var(--secondary) surface → --ivory : the warm paper canvas. --cream / --sand / --pill-light grade from it so the whole paper stack shifts together. No runtime injection yet → the #f7f1e8 fallback holds the Atelier paper until edge-dev pushes --surface. */ --ivory: var(--surface, #f7f1e8); --ink: #2b211a; /* the paper stack grades from --ivory toward --ink so it stays in-family and shifts together when an operator changes the surface colour. The mix percentages are tuned to land on the original warm cream/sand/pill tones when --ivory is the default #f7f1e8. */ --cream: color-mix(in srgb, var(--ivory) 94%, var(--ink)); --sand: color-mix(in srgb, var(--ivory) 85%, var(--ink)); --ink-soft: #6f5f50; --line: #ddccb6; --espresso: color-mix(in srgb, var(--brand, #4a3526) 82%, #000); --pill-light: color-mix(in srgb, var(--ivory) 60%, #fff); --r-lg: 28px; --r-md: 20px; --r-pill: 100px; --shadow: 0 30px 60px -34px color-mix(in srgb, var(--brand, #4a3526) 55%, transparent); --max: 1280px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Mulish", system-ui, sans-serif; background: var(--ivory); color: var(--ink); line-height: 1.6; overflow-x: hidden; } /* paper grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(74, 53, 38, .05) 1px, transparent 1px), radial-gradient(rgba(74, 53, 38, .03) 1px, transparent 1px); background-size: 7px 7px, 13px 13px; background-position: 0 0, 3px 5px; opacity: .9; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .serif { font-family: "Fraunces", Georgia, serif; } .wrap { max-width: var(--max); margin: 0 auto; padding-inline: clamp(18px, 4vw, 56px); position: relative; z-index: 1; } /* ---------------- header ---------------- */ .topbar { background: var(--espresso); color: var(--cream); font-size: 12.5px; letter-spacing: .04em; text-align: center; padding: 9px 16px; position: relative; z-index: 5; } .topbar strong { color: #e6c79b; font-weight: 700; } header.site { position: sticky; top: 0; z-index: 40; background: rgba(247, 241, 232, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: 76px; } .brand-mark { font-family: "Fraunces", serif; font-weight: 600; font-size: 26px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 9px; } .brand-mark .glyph { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--ivory); display: grid; place-items: center; font-size: 15px; font-weight: 700; font-family: "Mulish", sans-serif; } .mainnav { display: flex; gap: 26px; justify-self: center; } .mainnav a { font-size: 14px; font-weight: 600; color: var(--ink-soft); position: relative; padding: 6px 0; transition: color .25s; } .mainnav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brand); transition: width .3s ease; } .mainnav a:hover { color: var(--ink); } .mainnav a:hover::after { width: 100%; } .icons { display: flex; gap: 8px; justify-self: end; align-items: center; } .icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--pill-light); display: grid; place-items: center; cursor: pointer; position: relative; transition: background .25s, border-color .25s, transform .2s; } .icon-btn:hover { background: #fff; border-color: var(--secondary); transform: translateY(-2px); } .icon-btn svg { width: 19px; height: 19px; stroke: var(--ink); } .cart-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 100px; background: var(--brand); color: var(--ivory); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; } .burger { display: none; } /* ---------------- pill button ---------------- */ .pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 700; font-size: 14.5px; letter-spacing: .01em; cursor: pointer; border: 1.5px solid transparent; transition: transform .25s, box-shadow .25s, background .25s, color .25s; } .pill--dark { background: var(--espresso); color: var(--ivory); } .pill--dark:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--brand) 60%, transparent); } .pill--light { background: var(--pill-light); color: var(--ink); border-color: var(--line); } .pill--light:hover { background: #fff; border-color: var(--brand); } .pill--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .pill--ghost:hover { background: var(--ink); color: var(--ivory); } .pill .arr { transition: transform .3s; } .pill:hover .arr { transform: translateX(4px); } /* ---------------- hero ---------------- */ .hero { padding-top: clamp(22px, 4vw, 40px); } .hero-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: clamp(440px, 64vh, 660px); box-shadow: var(--shadow); display: flex; align-items: flex-end; } /* ---- slider track + crossfading slides ---- */ .hero-track { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity 1.05s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.05s; } .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.05s cubic-bezier(.4,0,.2,1), visibility 0s; } .hero-frame img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.06); transition: transform 7s ease-out; } .hero-slide.is-active img.bg { transform: scale(1); } /* slow ken-burns settle on entry */ .hero-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(43,33,26,.74) 0%, rgba(43,33,26,.38) 42%, rgba(43,33,26,.05) 70%); } .hero-content { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px); max-width: 640px; color: var(--ivory); } /* non-first slides animate their copy in when they become active */ .hero-slide:not(.is-active) .hero-content > * { opacity: 0; transform: translateY(22px); } .hero-slide.is-active .hero-content > * { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .hero-slide.is-active .hero-content > *:nth-child(1) { transition-delay: .12s; } .hero-slide.is-active .hero-content > *:nth-child(2) { transition-delay: .2s; } .hero-slide.is-active .hero-content > *:nth-child(3) { transition-delay: .28s; } .hero-slide.is-active .hero-content > *:nth-child(4) { transition-delay: .36s; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #f0dcc2; margin-bottom: 20px; } .hero-kicker .ln { width: 34px; height: 1px; background: #f0dcc2; } .hero h1 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(40px, 6vw, 78px); line-height: .98; letter-spacing: -.02em; } .hero h1 em { font-style: italic; color: #f0cfa6; } .hero p.sub { margin-top: 20px; font-size: clamp(15px, 1.4vw, 18px); max-width: 44ch; color: #f3e8d8; } .hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-cta .pill--light { background: rgba(251,246,238,.92); } .slider-arrows { position: absolute; right: clamp(20px,4vw,44px); bottom: clamp(20px,4vw,40px); z-index: 3; display: flex; gap: 12px; } .s-arrow { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(247,241,232,.6); background: rgba(43,33,26,.28); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .2s; } .s-arrow:hover { background: var(--ivory); transform: scale(1.06); } .s-arrow:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; } .s-arrow svg { width: 20px; height: 20px; stroke: var(--ivory); } .s-arrow:hover svg { stroke: var(--espresso); } /* ---- slide indicators: slim editorial dashes ---- */ .hero-dots { position: absolute; left: clamp(20px, 5vw, 64px); bottom: clamp(20px, 4vw, 40px); z-index: 3; display: flex; gap: 9px; } .hero-dots .dot { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 100px; cursor: pointer; background: rgba(247,241,232,.34); transition: background .3s, width .3s; position: relative; overflow: hidden; } .hero-dots .dot:hover { background: rgba(247,241,232,.6); } .hero-dots .dot:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; } .hero-dots .dot[aria-current="true"] { width: 46px; background: rgba(247,241,232,.4); } /* progress fill sweeps across the active dash on auto-advance */ .hero-dots .dot[aria-current="true"]::after { content: ""; position: absolute; inset: 0; transform-origin: left; background: var(--ivory); transform: scaleX(var(--hero-progress, 0)); } .hero-frame[data-paused] .hero-dots .dot[aria-current="true"]::after { transition: none; } /* ---------------- promo trio ---------------- */ .section { padding-block: clamp(56px, 8vw, 110px); } .promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); } .promo { position: relative; border-radius: var(--r-md); overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; padding: 24px; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .promo:hover { transform: translateY(-6px); } .promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s ease; } .promo:hover img { transform: scale(1.06); } .promo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(43,33,26,.78) 0%, rgba(43,33,26,.05) 60%); } .promo-body { position: relative; z-index: 2; color: var(--ivory); } .promo-body h3 { font-family: "Fraunces", serif; font-weight: 500; font-size: 26px; line-height: 1.05; margin-bottom: 16px; } /* ---------------- section header ---------------- */ .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; } .sec-head .eye { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 12px; display: block; } .sec-head h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; } .sec-head p { color: var(--ink-soft); max-width: 40ch; font-size: 15px; } /* ---------------- product grid ---------------- */ .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); } .product { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } .product:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--secondary); } .product-media { position: relative; aspect-ratio: 4/3.4; background: linear-gradient(160deg, var(--cream), var(--sand)); display: grid; place-items: center; overflow: hidden; } .product-media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s ease, rotate .6s ease; } .product:hover .product-media img { transform: scale(1.07) rotate(-3deg); } .tag-pill { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(251,246,238,.92); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft); padding: 6px 12px; border-radius: var(--r-pill); } .product-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .product-name { font-family: "Fraunces", serif; font-size: 19px; font-weight: 500; line-height: 1.15; } .product-meta { font-size: 13px; color: var(--ink-soft); } .product-price { font-size: 20px; font-weight: 800; margin-top: 8px; color: var(--ink); } .product-price s { color: var(--ink-soft); font-weight: 500; font-size: 14px; margin-left: 8px; } .product-actions { display: flex; gap: 8px; margin-top: 14px; } .product-actions .pill { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13px; } .center-cta { text-align: center; margin-top: clamp(34px, 4vw, 52px); } /* ---------------- recommended collage ---------------- */ .collage { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; } .tile { position: relative; border-radius: var(--r-md); overflow: hidden; } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .tile:hover img { transform: scale(1.07); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,33,26,.5), transparent 55%); opacity: 0; transition: opacity .3s; } .tile:hover::after { opacity: 1; } .tile .overlay { position: absolute; left: 16px; bottom: 16px; z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; } .tile:hover .overlay { opacity: 1; transform: translateY(0); } .tile .overlay .pill { padding: 10px 18px; font-size: 13px; background: rgba(251,246,238,.95); color: var(--ink); } .tile-a { grid-column: span 2; grid-row: span 2; } .tile-b { grid-column: span 2; } .tile-e { grid-column: span 2; } .tile-cap { position: absolute; left: 18px; top: 16px; z-index: 2; color: var(--ivory); font-family: "Fraunces", serif; font-size: 22px; text-shadow: 0 2px 14px rgba(0,0,0,.4); } /* ---------------- newsletter band ---------------- */ .band { background: var(--espresso); color: var(--cream); border-radius: var(--r-lg); padding: clamp(38px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; } .band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% -10%, color-mix(in srgb, var(--secondary) 40%, transparent), transparent 70%); } .band h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(28px, 4vw, 46px); position: relative; z-index: 1; line-height: 1.05; } .band p { position: relative; z-index: 1; color: #d9c6ad; margin-top: 14px; } .band-form { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .band-form input { border: 1px solid rgba(247,241,232,.3); background: rgba(247,241,232,.08); color: var(--ivory); border-radius: var(--r-pill); padding: 14px 22px; font-size: 15px; min-width: 280px; font-family: inherit; } .band-form input::placeholder { color: #b8a88f; } .band-form .pill--light { background: var(--ivory); } /* ---------------- footer ---------------- */ footer.foot { background: var(--cream); border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 100px); } .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-block: clamp(46px, 6vw, 72px); } .foot h4 { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; } .foot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .foot ul a { font-size: 14px; color: var(--ink); opacity: .8; transition: opacity .2s, padding-left .2s; } .foot ul a:hover { opacity: 1; padding-left: 4px; } .foot .blurb { color: var(--ink-soft); font-size: 14px; max-width: 36ch; margin-top: 16px; } .foot-bottom { border-top: 1px solid var(--line); padding-block: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-soft); } /* ---------------- reveal animation ---------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .hero .reveal { transition-delay: .05s; } .hero h1.reveal { transition-delay: .12s; } .hero p.reveal { transition-delay: .2s; } .hero .hero-cta.reveal { transition-delay: .28s; } /* ---------------- responsive ---------------- */ @media (max-width: 1000px) { .promos { grid-template-columns: 1fr 1fr; } .products { grid-template-columns: 1fr 1fr; } .collage { grid-template-columns: repeat(2, 1fr); } .tile-a, .tile-b, .tile-e { grid-column: span 1; } .tile-a { grid-row: span 1; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .mainnav { display: none; } .nav-inner { grid-template-columns: auto 1fr; } .burger { display: grid; } .icons .icon-btn.opt { display: none; } .promos { grid-template-columns: 1fr; } .products { grid-template-columns: 1fr; } .collage { grid-template-columns: 1fr; grid-auto-rows: 220px; } .foot-grid { grid-template-columns: 1fr; gap: 30px; } .hero-slide::after { background: linear-gradient(0deg, rgba(43,33,26,.85), rgba(43,33,26,.2)); } .hero-dots .dot { width: 24px; } .hero-dots .dot[aria-current="true"] { width: 38px; } } /* ---- respect reduced motion: no ken-burns, instant crossfade, no progress sweep ---- */ @media (prefers-reduced-motion: reduce) { .hero-frame img.bg, .hero-slide.is-active img.bg { transform: none; transition: none; } .hero-slide { transition: opacity .01s, visibility 0s linear .01s; } .hero-slide.is-active { transition: opacity .01s, visibility 0s; } .hero-slide.is-active .hero-content > * { transition: none; } .hero-dots .dot::after { display: none; } } .mainnav a.here { color: var(--ink); } .mainnav a.here::after { width: 100%; } .foot-social { display: flex; gap: 10px; margin-top: 18px; } .foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--pill-light); display: grid; place-items: center; transition: background .25s, transform .2s, border-color .25s; color: var(--ink); } .foot-social a:hover { background: #fff; border-color: var(--secondary); transform: translateY(-2px); } .foot-social svg { width: 18px; height: 18px; stroke: var(--brand); } .foot-bottom a:hover { color: var(--ink); text-decoration: underline; } /* ===================================================================== INNER PAGES — Atelier editorial layouts (about / shop / product / cart / checkout / order / contact) ===================================================================== */ /* ---- page masthead (editorial title band) ---- */ .masthead { padding: clamp(34px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); } .masthead .wrap { display: flex; flex-direction: column; gap: 6px; } .crumb { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crumb a { transition: color .2s; } .crumb a:hover { color: var(--brand); } .crumb .sep { opacity: .5; } .crumb .cur { color: var(--ink); font-weight: 600; } .mast-eye { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); } .mast-title { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.0; letter-spacing: -.02em; margin-top: 4px; } .mast-title em { font-style: italic; color: var(--secondary); } .mast-sub { color: var(--ink-soft); max-width: 56ch; margin-top: 12px; font-size: 16px; } .page { padding-bottom: clamp(40px, 6vw, 90px); } .narrow { max-width: 760px; } .card-soft { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); } /* ---- generic field / form ---- */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .field label { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; } .field .hint { font-size: 12.5px; color: var(--ink-soft); font-weight: 400; } .input, .select, textarea.input { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--pill-light); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; transition: border-color .2s, box-shadow .2s, background .2s; } .input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 18%, transparent); } .input::placeholder { color: #b3a48f; } textarea.input { resize: vertical; min-height: 130px; line-height: 1.5; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5f50' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; cursor: pointer; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .pill.block { width: 100%; justify-content: center; } .pill.lg { padding: 16px 30px; font-size: 15.5px; } .btn-link { background: none; border: none; color: var(--brand); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; } .btn-link:hover { text-decoration: underline; } /* ---- about ---- */ .about-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; } .about-hero .copy h1 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.02em; } .about-hero .copy h1 em { font-style: italic; color: var(--secondary); } .about-hero .copy p { color: var(--ink-soft); margin-top: 18px; font-size: 16.5px; max-width: 48ch; } .about-img { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/4.4; box-shadow: var(--shadow); } .about-img img { width: 100%; height: 100%; object-fit: cover; } .about-img .tag-cap { position: absolute; left: 18px; bottom: 18px; background: rgba(251,246,238,.92); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; font-size: 13px; font-weight: 700; } .story { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; } .story .lead { font-family: "Fraunces", serif; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 400; color: var(--ink); } .story p + p { margin-top: 16px; } .story .body p { color: var(--ink-soft); font-size: 16px; } .story aside { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; } .story aside h4 { font-family: "Fraunces", serif; font-size: 20px; font-weight: 500; margin-bottom: 8px; } .story aside p { color: var(--ink-soft); font-size: 14.5px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); } .stat { background: var(--espresso); color: var(--cream); border-radius: var(--r-md); padding: 28px 24px; text-align: center; position: relative; overflow: hidden; } .stat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--secondary) 35%, transparent), transparent 70%); } .stat .num { font-family: "Fraunces", serif; font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; position: relative; z-index: 1; line-height: 1; } .stat .lab { font-size: 13px; color: #d9c6ad; margin-top: 8px; position: relative; z-index: 1; letter-spacing: .02em; } .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); } .value { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; transition: transform .35s, box-shadow .35s, border-color .35s; } .value:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--secondary); } .value .vico { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(160deg, var(--cream), var(--sand)); display: grid; place-items: center; margin-bottom: 16px; } .value .vico svg { width: 24px; height: 24px; stroke: var(--brand); fill: none; stroke-width: 1.7; } .value h3 { font-family: "Fraunces", serif; font-size: 20px; font-weight: 500; } .value p { color: var(--ink-soft); font-size: 14.5px; margin-top: 8px; } .cta-band { background: var(--espresso); color: var(--cream); border-radius: var(--r-lg); padding: clamp(40px, 6vw, 76px); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% -10%, color-mix(in srgb, var(--secondary) 42%, transparent), transparent 70%); } .cta-band h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(28px, 4vw, 48px); position: relative; z-index: 1; } .cta-band p { color: #d9c6ad; margin-top: 12px; position: relative; z-index: 1; } .cta-band .pill { margin-top: 26px; position: relative; z-index: 1; } /* ---- shop / filters ---- */ .filterbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 38px); padding-bottom: 20px; border-bottom: 1px solid var(--line); } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: var(--pill-light); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer; transition: all .22s; } .chip:hover { border-color: var(--secondary); color: var(--ink); } .chip.active { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); } .filter-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .result-count { font-size: 14px; color: var(--ink-soft); } .result-count b { color: var(--ink); font-weight: 800; } .sort-wrap { display: flex; align-items: center; gap: 8px; } .sort-wrap .select { padding-block: 10px; font-size: 13.5px; font-weight: 700; min-width: 168px; } .product.hide { display: none; } .product-link { display: contents; color: inherit; } .product-media a { position: absolute; inset: 0; z-index: 1; } .cat-line { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); } /* ---- product detail ---- */ .pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; } .gallery .main { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; background: linear-gradient(160deg, var(--cream), var(--sand)); cursor: zoom-in; box-shadow: var(--shadow); } .gallery .main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; } .gallery .zoom-hint { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(251,246,238,.92); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; pointer-events: none; } .gallery .zoom-hint svg { width: 15px; height: 15px; stroke: var(--ink); } .thumbs { display: flex; gap: 12px; margin-top: 14px; } .thumb { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); cursor: pointer; background: var(--cream); transition: border-color .2s, transform .2s; padding: 0; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb:hover { transform: translateY(-2px); } .thumb.active { border-color: var(--brand); } .pdp-info .pdp-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); } .pdp-info h1 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.01em; margin-top: 6px; } .pdp-tagline { color: var(--ink-soft); font-size: 16px; margin-top: 10px; } .pdp-rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); } .pdp-rating .stars { color: #c8862f; letter-spacing: 2px; font-size: 15px; } .pdp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; } .pdp-price .now { font-size: 30px; font-weight: 800; } .pdp-price s { color: var(--ink-soft); font-size: 18px; } .pdp-price .save { background: var(--sand); color: var(--espresso); font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); } .variant { margin-top: 24px; } .variant .vlabel { font-size: 13px; font-weight: 700; margin-bottom: 11px; display: flex; gap: 8px; } .variant .vlabel .vsel { color: var(--ink-soft); font-weight: 600; } .swatches { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; position: relative; transition: transform .2s; padding: 0; } .swatch:hover { transform: scale(1.08); } .swatch.active { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); } .swatch.oos { cursor: not-allowed; opacity: .5; } .swatch.oos::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--ink-soft); transform: rotate(-26deg); } .sizes { display: flex; gap: 9px; flex-wrap: wrap; } .size-chip { min-width: 48px; padding: 11px 8px; text-align: center; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--pill-light); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .2s; } .size-chip:hover { border-color: var(--secondary); } .size-chip.active { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); } .size-chip[disabled] { color: #c3b5a2; background: transparent; cursor: not-allowed; text-decoration: line-through; } .guide-link { font-size: 13px; color: var(--brand); font-weight: 700; margin-left: auto; } /* Combination sold-out note + disabled buy state for the dynamic picker. */ .combo-oos { margin: 18px 0 0; font-size: 13px; font-weight: 700; font-style: italic; color: var(--brand); } .pill:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .qty-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; } .stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--pill-light); overflow: hidden; } .stepper button { width: 44px; height: 46px; background: none; border: none; cursor: pointer; font-size: 20px; color: var(--ink); display: grid; place-items: center; transition: background .2s; } .stepper button:hover { background: var(--cream); } .stepper .val { min-width: 40px; text-align: center; font-weight: 800; font-size: 16px; } .stepper.sm button { width: 34px; height: 36px; font-size: 17px; } .stepper.sm .val { min-width: 30px; font-size: 14px; } .buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .buy-actions .pill { padding-block: 16px; } .pdp-meta { display: flex; gap: 22px; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); flex-wrap: wrap; } .pdp-meta span { display: inline-flex; align-items: center; gap: 7px; } .pdp-meta svg { width: 17px; height: 17px; stroke: var(--brand); fill: none; stroke-width: 1.7; } /* description / accordion */ .pdp-desc { margin-top: clamp(40px, 5vw, 70px); } .pdp-desc .lead-copy { max-width: 64ch; color: var(--ink-soft); font-size: 16.5px; } .pdp-desc .lead-copy p + p { margin-top: 14px; } .accordion { border-top: 1px solid var(--line); margin-top: 26px; } .acc-item { border-bottom: 1px solid var(--line); } .acc-head { width: 100%; background: none; border: none; cursor: pointer; font-family: "Fraunces", serif; font-size: 20px; font-weight: 500; color: var(--ink); text-align: left; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .acc-head .ico { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s, background .25s; } .acc-head .ico svg { width: 16px; height: 16px; stroke: var(--ink); } .acc-item.open .acc-head .ico { transform: rotate(45deg); background: var(--espresso); } .acc-item.open .acc-head .ico svg { stroke: var(--ivory); } .acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .acc-body-inner { padding: 0 0 22px; color: var(--ink-soft); font-size: 15px; } .detail-list { list-style: none; display: grid; gap: 10px; } .detail-list li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; } .detail-list dt, .detail-list .k { font-weight: 700; color: var(--ink); } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(35,25,18,.94); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; animation: lbfade .3s ease; } @keyframes lbfade { from { opacity: 0 } to { opacity: 1 } } .lb-stage { position: relative; max-width: min(90vw, 900px); width: 100%; } .lb-img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--r-md); } .lb-close { position: absolute; top: -54px; right: 0; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(247,241,232,.5); background: rgba(0,0,0,.2); cursor: pointer; display: grid; place-items: center; } .lb-close svg { width: 22px; height: 22px; stroke: var(--ivory); } .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(247,241,232,.5); background: rgba(0,0,0,.28); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; } .lb-arrow:hover { background: var(--ivory); } .lb-arrow:hover svg { stroke: var(--espresso); } .lb-arrow svg { width: 24px; height: 24px; stroke: var(--ivory); } .lb-prev { left: -76px; } .lb-next { right: -76px; } .lb-count { position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%); color: var(--cream); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; } .lb-dots { position: absolute; bottom: -44px; right: 0; display: flex; gap: 7px; } .lb-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(247,241,232,.35); cursor: pointer; padding: 0; } .lb-dots button.active { background: var(--ivory); } @media (max-width: 760px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-close { top: -50px; } } /* ---- cart ---- */ .cart-layout { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(24px, 3vw, 48px); align-items: start; } .cart-list { display: flex; flex-direction: column; } .cart-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; } .cart-row:first-child { padding-top: 0; } .cart-thumb { width: 104px; height: 104px; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--cream), var(--sand)); } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-name { font-family: "Fraunces", serif; font-size: 19px; font-weight: 500; } .cart-var { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; } .cart-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .remove-btn { background: none; border: none; color: var(--ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .remove-btn:hover { color: #9a3b2b; } .remove-btn svg { width: 15px; height: 15px; stroke: currentColor; } .cart-line-price { font-size: 18px; font-weight: 800; text-align: right; white-space: nowrap; } .summary { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px); position: sticky; top: 96px; } .summary h3 { font-family: "Fraunces", serif; font-size: 24px; font-weight: 500; margin-bottom: 18px; } .sum-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 9px 0; color: var(--ink-soft); } .sum-row b { color: var(--ink); } .sum-row.disc { color: #5a7a4a; } .sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line); } .sum-total .lab { font-family: "Fraunces", serif; font-size: 20px; font-weight: 500; } .sum-total .amt { font-size: 26px; font-weight: 800; } /* .promo-form, NOT .promo: the home page's promotion TILE already owns .promo (min-height 360px, align-items:flex-end, a ::after scrim). Sharing the name gave the cart's promo-code field a 360px brown gradient panel to sit at the bottom of. */ .promo-form { display: flex; gap: 8px; margin: 18px 0; } .promo-form .input { border-radius: var(--r-pill); } .promo-form button { white-space: nowrap; } .promo-msg { font-size: 13px; font-weight: 700; color: #5a7a4a; margin: -8px 0 16px; display: none; } .promo-msg.show { display: block; } .cart-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 0; display: none; } .cart-empty.show { display: block; } .cart-empty .eico { width: 84px; height: 84px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 22px; } .cart-empty .eico svg { width: 38px; height: 38px; stroke: var(--secondary); fill: none; stroke-width: 1.5; } .cart-empty h2 { font-family: "Fraunces", serif; font-size: 28px; font-weight: 500; } .cart-empty p { color: var(--ink-soft); margin: 10px 0 24px; } .cart-wrap.empty .cart-layout { display: none; } /* ---- checkout ---- */ .checkout-layout { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(24px, 3.4vw, 54px); align-items: start; } .steps-rail { display: flex; gap: 6px; margin-bottom: 30px; flex-wrap: wrap; } .step-pip { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink-soft); } .step-pip .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12.5px; background: var(--pill-light); transition: all .25s; } .step-pip.done .n { background: var(--secondary); border-color: var(--secondary); color: #fff; } .step-pip.active .n { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); } .step-pip.active { color: var(--ink); } .step-pip .bar { width: 22px; height: 1.5px; background: var(--line); } .co-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px, 3vw, 32px); margin-bottom: 16px; transition: border-color .25s, box-shadow .25s; } .co-step.locked { opacity: .55; pointer-events: none; } .co-step.current { border-color: var(--secondary); box-shadow: var(--shadow); } .co-step h2 { font-family: "Fraunces", serif; font-size: 23px; font-weight: 500; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .co-step .stepnum { width: 30px; height: 30px; border-radius: 50%; background: var(--espresso); color: var(--ivory); display: grid; place-items: center; font-size: 14px; font-weight: 800; font-family: "Mulish", sans-serif; flex-shrink: 0; } .co-step .sline { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; } /* Only the step in hand is open. A step behind the shopper folds to its title plus a one-line summary of what it holds; a step ahead folds to its title alone, dimmed by .locked — there is nothing to summarise yet. `.sline` is the step's instruction, which neither of those states needs. No-JS keeps every section open (nothing adds .collapsed/.locked), which is moot since d-0dsrmn but costs nothing. */ .co-step.collapsed .co-body, .co-step.locked .co-body { display: none; } .co-step.collapsed .sline, .co-step.locked .sline { display: none; } /* a step ahead is its heading and nothing else, so the heading's 6px rag would sit as uneven padding (33/39, measured) at the card's foot. */ .co-step.locked h2 { margin-bottom: 0; } /* step "Edit" — quiet text control parked at the right end of the step heading, revealed only once the step is behind you (.collapsed === app.js `i < n`), so it is never a dead control on the step you are already filling in. Same idiom as category-boutique's `.step.done .step-head .edit`. With JS off no step ever gets .collapsed, so no Edit renders — correct, as there is nothing to go back to. */ .co-edit { margin-left: auto; display: none; position: relative; background: none; border: 0; padding: 0; font-family: "Mulish", sans-serif; font-size: 13px; font-weight: 700; color: var(--secondary); cursor: pointer; transition: color .2s; } .co-step.collapsed .co-edit { display: inline; } /* the label is only ~24x16px — too small to hit on a phone. Grow the touch target to 44 high with an overlay instead of padding, so the label stays optically flush with the right edge of the heading. Stated as a height, not a negative inset: an inset only reaches 44 if the glyph box happens to be 16. Nothing underneath it is interactive, so the overlay swallows nothing. */ .co-edit::after { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); } .co-edit:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .co-edit:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; border-radius: 3px; } /* the collapsed step's one line. Hidden while the step is open or still ahead: it would then either duplicate the fields below it or promise a choice the shopper has not made. */ .co-summary-line { display: none; font-size: 14px; color: var(--ink-soft); margin-top: 4px; } /* indented to the heading's text, not the card edge: the numbered pip (30px) plus the h2's flex gap (12px). A folded step is then a two-line block on one left axis instead of an L. */ .co-step.collapsed .co-summary-line { display: block; margin-left: 42px; } .delivery-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; margin-bottom: 10px; transition: border-color .2s, background .2s; } .delivery-opt:hover { border-color: var(--secondary); } .delivery-opt.active { border-color: var(--brand); background: var(--pill-light); } .delivery-opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: grid; place-items: center; } .delivery-opt.active .radio { border-color: var(--brand); } .delivery-opt.active .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); } .delivery-opt .d-main { flex: 1; } .delivery-opt .d-name { font-weight: 700; font-size: 14.5px; } .delivery-opt .d-eta { font-size: 13px; color: var(--ink-soft); } .delivery-opt .d-price { font-weight: 800; } .stripe-box { border: 1.5px dashed var(--line); border-radius: 14px; padding: 26px; text-align: center; color: var(--ink-soft); background: var(--pill-light); } .stripe-box .badge { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); } /* Payment mount node — this checkout collects no card field, so the provider's iframe is what fills the box (PCI SAQ A-EP, d-0dssu6). */ .pay-mount { margin-top: 16px; display: grid; gap: 5px; place-items: center; text-align: center; padding: 22px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--ivory); } .pay-mount .pm-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 19px; color: var(--ink); } .pay-mount .pm-sub { font-size: 13px; color: var(--ink-soft); } .confirm { text-align: center; padding: clamp(30px, 5vw, 60px) 0; display: none; } .confirm.show { display: block; } .confirm .check { width: 92px; height: 92px; border-radius: 50%; background: var(--espresso); display: grid; place-items: center; margin: 0 auto 24px; position: relative; } .confirm .check::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--secondary); opacity: .5; } .confirm .check svg { width: 44px; height: 44px; stroke: var(--ivory); stroke-width: 2.4; fill: none; } .confirm h1 { font-family: "Fraunces", serif; font-size: clamp(30px, 4vw, 46px); font-weight: 500; } .confirm .ordno { display: inline-block; margin-top: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 20px; font-weight: 800; letter-spacing: .03em; } .confirm p { color: var(--ink-soft); margin-top: 16px; } .confirm .conf-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; } .checkout-wrap.confirmed .checkout-layout { display: none; } /* ---- contact ---- */ .contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 3.4vw, 54px); align-items: start; } .contact-cards { display: grid; gap: 14px; } .cinfo { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; } .cinfo .cico { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, var(--cream), var(--sand)); display: grid; place-items: center; flex-shrink: 0; } .cinfo .cico svg { width: 21px; height: 21px; stroke: var(--brand); fill: none; stroke-width: 1.7; } .cinfo h4 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .cinfo p { font-size: 15.5px; font-weight: 600; } .map-block { margin-top: 14px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/8; position: relative; background: linear-gradient(160deg, var(--cream), var(--sand)); display: grid; place-items: center; color: var(--ink-soft); } .map-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .map-block .pin { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; } .map-block .pin svg { width: 30px; height: 30px; stroke: var(--brand); fill: var(--pill-light); } .faq { margin-top: clamp(34px, 4vw, 56px); } .faq .accordion { border-top: 1px solid var(--line); } /* ---- status badge ---- */ .badge { font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 5px 13px; border-radius: var(--r-pill); white-space: nowrap; } /* ---- order lines (confirmation) ---- */ .od-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .od-item:last-child { border-bottom: none; } .od-thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--cream), var(--sand)); flex-shrink: 0; } .od-thumb img { width: 100%; height: 100%; object-fit: cover; } .od-item .nm { font-weight: 700; font-size: 14.5px; } .od-item .vr { font-size: 12.5px; color: var(--ink-soft); } .od-item .pr { margin-left: auto; font-weight: 700; } /* ---- inner page responsive ---- */ @media (max-width: 1000px) { .about-hero, .story, .pdp, .cart-layout, .checkout-layout, .contact-layout { grid-template-columns: 1fr; } .stats, .values { grid-template-columns: 1fr 1fr; } .summary { position: static; } } @media (max-width: 720px) { .stats, .values, .grid-2, .grid-3 { grid-template-columns: 1fr; } .buy-actions { grid-template-columns: 1fr; } .cart-row { grid-template-columns: 80px 1fr; } .cart-thumb { width: 80px; height: 80px; } .cart-line-price { grid-column: 2; text-align: left; } .filterbar { flex-direction: column; align-items: flex-start; } } /* ===================================================================== Long-form content page (privacy / terms / returns) — editorial feature ===================================================================== */ .legal-head { max-width: 760px; } .legal-head h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(38px, 7vw, 76px); line-height: .98; letter-spacing: -.025em; } .legal-head h1 em { font-style: italic; color: var(--secondary); } .legal-updated { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--pill-light); } .legal-updated .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); } .legal-intro-lede { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(18px, 2.4vw, 23px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; margin-top: 22px; } .legal-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); margin-top: clamp(40px, 6vw, 72px); align-items: start; } .legal-toc { position: sticky; top: 96px; } .legal-toc .toc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--secondary); margin-bottom: 16px; display: block; } .legal-toc ol { list-style: none; counter-reset: toc; border-left: 1px solid var(--line); } .legal-toc li { counter-increment: toc; } .legal-toc a { display: block; padding: 7px 0 7px 18px; margin-left: -1px; font-size: 13.5px; color: var(--ink-soft); border-left: 1px solid transparent; transition: color .2s, border-color .2s; } .legal-toc a::before { content: counter(toc, decimal-leading-zero) " "; color: var(--sand); font-variant-numeric: tabular-nums; font-size: 11px; } .legal-toc a:hover { color: var(--brand); } .legal-toc a.active { color: var(--espresso); font-weight: 700; border-left-color: var(--brand); } .legal-toc a.active::before { color: var(--secondary); } .legal-body { max-width: 68ch; } .legal-body section { scroll-margin-top: 92px; padding-block: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); } .legal-body section:first-child { border-top: 0; padding-top: 0; } .legal-body h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(24px, 3.4vw, 33px); line-height: 1.08; letter-spacing: -.015em; display: flex; align-items: baseline; gap: 14px; } .legal-body h2 .h2-num { font-size: 13px; font-weight: 700; color: var(--secondary); font-family: "Mulish", sans-serif; letter-spacing: .04em; } .legal-body h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 19px; margin-top: 26px; } .legal-body p { margin-top: 16px; font-size: 16.5px; line-height: 1.72; color: #4a3d31; max-width: 66ch; } .legal-body section > p:first-of-type::first-letter { } .legal-body ul, .legal-body ol.legal-list { margin: 18px 0 4px; padding-left: 4px; list-style: none; max-width: 66ch; } .legal-body ul li, .legal-body ol.legal-list li { position: relative; padding-left: 28px; margin-top: 11px; font-size: 16px; line-height: 1.65; color: #4a3d31; } .legal-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border: 1.5px solid var(--secondary); border-radius: 50%; } .legal-body ol.legal-list { counter-reset: ll; } .legal-body ol.legal-list li { counter-increment: ll; } .legal-body ol.legal-list li::before { content: counter(ll); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; font-family: "Fraunces", serif; font-size: 12px; color: var(--brand); display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; } .legal-def { margin: 22px 0 6px; border-left: 3px solid var(--secondary); padding: 4px 0 4px 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 7%, transparent), transparent 70%); } .legal-def dt { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 16px; margin-top: 14px; color: var(--espresso); } .legal-def dt:first-child { margin-top: 0; } .legal-def dd { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 4px; } .legal-contact-card { margin-top: 20px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--pill-light); box-shadow: var(--shadow); } .legal-contact-card .rows { display: grid; gap: 6px; margin-top: 8px; } .legal-contact-card .rows div { font-size: 15px; color: #4a3d31; } .legal-contact-card .rows strong { color: var(--espresso); } .legal-contact-card a { color: var(--brand); border-bottom: 1px solid var(--sand); } .to-top { position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px); z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--ivory); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s; box-shadow: var(--shadow); } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--espresso); } .to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .toc-inline-toggle { display: none; } @media (max-width: 920px) { .legal-layout { grid-template-columns: 1fr; gap: 0; } .legal-toc { position: static; margin-bottom: 30px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--pill-light); overflow: hidden; } .toc-inline-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; background: none; border: 0; cursor: pointer; font-family: "Mulish", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--espresso); } .toc-inline-toggle svg { width: 16px; height: 16px; transition: transform .25s; } .legal-toc[open] .toc-inline-toggle svg, .legal-toc.open .toc-inline-toggle svg { transform: rotate(180deg); } .legal-toc .toc-label { display: none; } .legal-toc ol { border-left: 0; padding: 4px 20px 18px; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .legal-toc.open ol { max-height: 640px; } .legal-toc a { padding-left: 20px; border-left: 0; } .legal-toc a.active { border-left: 0; } } /* ===================================================================== RUNTIME ADAPTATIONS — chrome the edge runtime emits that the static design never had a slot for (preview ribbon, flash toast), plus a few helpers the data-driven templates need (server-form steppers, sold-out state, pagination, empty states). All in the Atelier voice. ===================================================================== */ /* preview ribbon (rendered when ?preview=1) */ .preview-ribbon { position: fixed; top: 14px; left: -34px; z-index: 80; transform: rotate(-45deg); transform-origin: center; background: var(--brand); color: var(--ivory); font-family: "Mulish", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 5px 44px; box-shadow: var(--shadow); pointer-events: none; } /* flash toast (one-shot; dismissed by app.js — timer + close control) */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 0); z-index: 90; max-width: min(92vw, 460px); display: flex; align-items: center; gap: 14px; background: var(--espresso); color: var(--cream); border: 1px solid rgba(247,241,232,.18); border-radius: var(--r-pill); padding: 14px 26px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); text-align: center; transition: opacity .28s ease, transform .28s ease; } .toast--error { background: #7a2e22; border-color: rgba(247,241,232,.2); color: #f7e6df; } .toast[hidden] { display: none; } /* beats display:flex */ .toast.is-out { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; } .toast-msg { flex: 1; } .toast-x { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; color: inherit; opacity: .6; font-size: 13px; line-height: 1; padding: 4px; margin: -4px -12px -4px 0; border-radius: 50%; transition: opacity .18s ease; } .toast-x:hover, .toast-x:focus-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* product cards: server-driven Add-to-cart form + sold-out treatment */ .product-actions form { flex: 1; display: flex; } .product-actions form .pill { width: 100%; } .product .soldout-pill { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line); font-weight: 700; cursor: not-allowed; } .tag-pill.oos { background: rgba(154,59,43,.12); color: #9a3b2b; border-color: rgba(154,59,43,.25); } /* qty stepper that posts a real form (cart) — keep the pill look but allow a submit row underneath the +/− control */ .stepper form { display: contents; } .cart-update-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } /* shop: lightweight server filter form (chips are , sort is a GET select) */ .filterbar form.sort-form { display: flex; align-items: center; gap: 8px; margin: 0; } .chip.aslink { text-decoration: none; display: inline-flex; align-items: center; } /* pagination */ .pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: clamp(34px, 4vw, 52px); } .pager .page-state { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; } /* empty results */ .empty-state { text-align: center; padding: clamp(40px, 6vw, 80px) 0; } .empty-state h2 { font-family: "Fraunces", serif; font-size: 28px; font-weight: 500; } .empty-state p { color: var(--ink-soft); margin: 10px 0 24px; } /* checkout: server round-trip variant — the markup ships every section .open so a scripted page can only ever narrow that, never widen it. `:not(.collapsed)` is the whole of the step gating: without it this rule, later in the sheet and at equal specificity, silently beat `.co-step.collapsed .co-body` and no step ever folded (t-0dstsl). Keep the card look. */ .co-step.open { opacity: 1; pointer-events: auto; } .co-step.open:not(.collapsed) .co-body { display: block; } /* order confirmation page (server-rendered /order/{id}) reuses .confirm but always shown */ .confirm.static { display: block; padding-top: 0; }