:root { --scrollbar-thumb: #c28030; --scrollbar-thumb-hover: #995e1c; --scrollbar-track: #f2ead9; --ink: #21120e; --ink-soft: #3c211a; --coral: #ef5a3c; --coral-deep: #d9432f; --cream: #f7edcf; --cream-soft: #fff9e9; --butter: #ffd978; --aqua: #7acbd0; --lime: #cbed68; --oxblood: #5c1b1b; --line: rgba(33, 18, 14, .18); --muted: rgba(33, 18, 14, .68); --announcement-h: 0px; --header-h: 82px; --shell: min(1460px, calc(100vw - 80px)); --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", Arial, sans-serif; --vb-dark: var(--ink); --vb-text-muted: var(--muted); --vb-amber: var(--coral); --vb-border: var(--line); --vb-cream-tint: var(--cream); } *, *::before, *::after { box-sizing: border-box; } /* Posuvniky. Tema (--coral, --cream) je deklarovane az na , takze by z :root vytahlo puvodni lososovou paletu. Barvy posuvniku proto drzi vlastni tokeny s hodnotami aktualniho motivu Creme brulee. */ html { scroll-behavior: smooth; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { border: 2px solid var(--scrollbar-track); border-radius: 999px; background: var(--scrollbar-thumb); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } body.body-lock { overflow: hidden; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } section[id] { scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 10px); } button { color: inherit; } ::selection { background: var(--ink); color: var(--cream); } :focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; } .skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 12px 16px; transform: translateY(-160%); border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; transition: transform .2s; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { transform: translateY(0); } .site-header { position: fixed; z-index: 100; inset: var(--announcement-h) 0 auto; height: var(--header-h); display: grid; grid-template-columns: 190px 1fr auto; align-items: center; padding: 0 4.5vw; border-bottom: 1px solid rgba(33,18,14,.14); color: var(--ink); transform: translateZ(0); transition: color .35s, background .35s, border-color .35s, top .3s; } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(239,90,60,.88); backdrop-filter: blur(16px); opacity: 0; transition: opacity .35s; } .site-header.scrolled::before { opacity: 1; } /* Nad tmavym filmem svetla hlavicka. Pruh za ni MUSI jit pres promennou --header-scrolled-bg: theme-variants.css prebiji kazde .site-header::before pozadi pres !important, takze primo zapsana barva se neprosadi a svetly text by zustal na kremovem pruhu. */ .site-header.on-film { --header-scrolled-bg: rgba(25,13,10,.78); color: var(--cream); border-color: rgba(255,255,255,.2); } /* !important tu musi byt: theme-variants.css prebiji kazde .site-header::before pozadi take pres !important. Bez toho zustane pruh kremovy, svetly text a bile logo na nem zmizi a hlavicka je nad filmem neviditelna. Vyssi specificita (.on-film) rozhoduje mezi dvema !important. */ .site-header.on-film::before { background: rgba(25,13,10,.78) !important; opacity: 1; } .site-header.on-film .brand img { filter: brightness(0) invert(1); } .site-header.on-film .cart-button { border-color: rgba(255,255,255,.5); } .brand { width: 76px; } .brand img { width: 100%; max-height: 56px; object-fit: contain; transition: filter .3s; } .desktop-nav { justify-self: center; display: flex; align-items: center; gap: clamp(26px, 3vw, 56px); } .desktop-nav a, .header-shop { position: relative; font-size: 12px; font-weight: 700; } .desktop-nav a::after, .header-shop::after { content: ""; position: absolute; inset: auto 0 -7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; } .desktop-nav a:hover::after, .header-shop:hover::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; gap: 18px; } .cart-button { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer; transition: border-color .3s, background .25s; } .cart-button:hover { background: rgba(255,255,255,.2); } .cart-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .cart-button span { font-size: 11px; font-weight: 700; } .cart-count { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 11px; } .menu-button { display: none; width: 44px; height: 44px; padding: 12px 8px; border: 0; background: transparent; cursor: pointer; } .menu-button i { display: block; width: 24px; height: 1px; margin: 6px auto; background: currentColor; } .button, .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, color .2s; } .button:hover, .btn:hover { transform: translateY(-2px); } .button-ink, .btn-dark, .btn-amber { background: var(--ink); color: var(--cream); } .button-cream { background: var(--cream); color: var(--ink); } .eyebrow, .chapter-index { margin: 0 0 16px; color: var(--coral-deep); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .section-shell { width: var(--shell); margin: 0 auto; } /* Pinned story */ .story { position: relative; height: 560svh; background: var(--coral); } .story-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: clip; isolation: isolate; background: var(--coral); color: var(--ink); } .hero-world, .film-world, .macro-world, .river-world, .product-world, .story-noise { position: absolute; inset: 0; } .hero-world { z-index: 1; overflow: hidden; background: radial-gradient(circle at 74% 46%, rgba(255,217,120,.24), transparent 28%), linear-gradient(125deg, #f36345 0%, var(--coral) 62%, #e84d35 100%); will-change: opacity; } .hero-world::before { display: none; } .hero-ghost-word { position: absolute; z-index: 0; right: -2vw; bottom: -3.5vw; color: rgba(247,237,207,.13); font-family: var(--serif); font-size: clamp(170px, 28vw, 520px); line-height: .64; letter-spacing: -.075em; white-space: nowrap; user-select: none; } .hero-copy { position: absolute; z-index: 5; left: 5vw; top: calc(var(--header-h) + clamp(42px, 7vh, 82px)); width: min(51vw, 780px); color: var(--ink); } .hero-copy h1, .chapter h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; } .hero-copy h1 { font-size: clamp(72px, 6.8vw, 122px); line-height: 1.24; } .hero-copy h1 em, .chapter h2 em, .section-heading h2 em, .origin-copy h2 em, .final-copy h2 em { color: var(--cream); font-style: normal; font-weight: 400; } .hero-copy .eyebrow { color: rgba(33,18,14,.72); } .hero-lead { max-width: 535px; margin: 24px 0 0; font-size: clamp(14px, 1.08vw, 18px); line-height: 1.52; } .hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 25px; } .play-link { display: flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 700; } .play-link i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; transition: transform .25s, background .25s; } .play-link:hover i { transform: translateY(3px); background: rgba(247,237,207,.24); } .hero-proof { display: flex; gap: 28px; margin-top: 23px; padding-top: 0; border-top: 0; color: rgba(33,18,14,.66); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } .hero-proof b { color: var(--ink); } .hero-proof a { color: inherit; text-decoration: none; } .hero-pedestal { position: absolute; z-index: 1; left: var(--hero-art-cx, 73%); top: var(--hero-art-cy, calc((100% - var(--header-h) - 66px) * 0.5 + var(--header-h))); width: var(--hero-art-size, min(35vw, 53vh, 500px)); height: var(--hero-art-size, min(35vw, 53vh, 500px)); aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgba(33,18,14,.12); border-radius: 50%; background: var(--cream); box-shadow: inset -45px -30px 90px rgba(164,86,52,.16), 0 45px 80px rgba(66,18,12,.14); transform: rotate(-8deg); will-change: transform, opacity; } .hero-pedestal::before, .hero-pedestal::after { display: none; } .hero-pod-wrap { position: absolute; z-index: 3; left: calc(var(--hero-art-cx, 73%) + var(--hero-art-size, min(35vw, 53vh, 500px)) * 0.015); top: calc(var(--hero-art-cy, calc((100% - var(--header-h) - 66px) * 0.5 + var(--header-h))) - var(--hero-art-size, min(35vw, 53vh, 500px)) * 0.01); height: calc(var(--hero-art-size, min(35vw, 53vh, 500px)) * 1.34); aspect-ratio: 1122 / 1402; translate: -50% -50%; transform: rotate(18deg); filter: drop-shadow(0 32px 24px rgba(38,13,8,.28)); transform-origin: 50% 50%; will-change: transform, opacity; } .hero-pod { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; will-change: opacity, clip-path; } .hero-specimen { position: absolute; left: -8%; bottom: 8%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(247,237,207,.35); border-radius: 999px; background: rgba(33,18,14,.76); color: var(--cream); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-16deg); white-space: nowrap; } .hero-specimen b { color: var(--butter); } .hero-orbit { position: absolute; z-index: 4; right: 3.5vw; top: 22%; bottom: 18%; display: flex; flex-direction: column; justify-content: space-between; align-items: end; color: rgba(33,18,14,.6); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; } .hero-categories { position: absolute; z-index: 7; left: 5vw; right: 5vw; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(33,18,14,.34); } .hero-categories > a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 66px; padding: 0 20px; border-right: 1px solid rgba(33,18,14,.28); color: var(--ink); text-align: left; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s; } .hero-categories > a:first-child { padding-left: 0; } .hero-categories > a:last-child { border-right: 0; } .hero-categories > a:hover { background: rgba(247,237,207,.22); } .hero-categories > a span { color: rgba(33,18,14,.5); font-size: 9px; } .hero-categories > a b { font-size: 10px; font-weight: 600; } .film-world { z-index: 2; opacity: 0; overflow: hidden; background: #110a08; will-change: transform, opacity; } .story-film, .film-poster, .film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; } .mobile-story-still { display: none; } .mobile-story-controls { display: none; } .story-film { z-index: 1; display: block; object-fit: cover; object-position: center; background: #110a08; pointer-events: none; transform: translateZ(0); will-change: transform; } .film-poster { z-index: 2; margin: 0; opacity: 1; visibility: visible; transition: opacity .14s linear, visibility 0s linear .14s; pointer-events: none; } .film-poster.is-hidden { opacity: 0; visibility: hidden; } .film-poster img { max-width: none; object-fit: cover; object-position: center; } .film-vignette { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(12,6,4,.68) 0%, rgba(12,6,4,.18) 42%, rgba(12,6,4,.04) 72%), linear-gradient(180deg, rgba(10,5,4,.22), transparent 52%, rgba(10,5,4,.42)); pointer-events: none; } .film-label { position: absolute; z-index: 6; right: 4vw; top: calc(var(--header-h) + 28px); display: flex; align-items: center; gap: 11px; color: rgba(247,237,207,.72); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; } .film-label span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; } .film-label b { color: var(--cream); font-weight: 700; } .film-label-dark { color: rgba(255,249,235,.86); text-shadow: 0 1px 9px rgba(25,14,9,.7); } .film-label-dark b { color: #fff9eb; } .macro-world { z-index: 3; opacity: 0; overflow: hidden; background: var(--coral); will-change: opacity; } .macro-image { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .macro-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,9,6,.72) 0%, rgba(24,9,6,.14) 48%, transparent 70%), linear-gradient(180deg, transparent 56%, rgba(22,8,5,.28)); } .river-world { z-index: 4; opacity: 0; overflow: hidden; background: #100806; will-change: opacity; } .river-shade { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(15,7,5,.64), rgba(15,7,5,.08) 57%), linear-gradient(180deg, rgba(12,6,4,.1), transparent 48%, rgba(12,6,4,.46)); pointer-events: none; } .product-world { --product-art-cx: var(--hero-art-cx, 73%); --product-art-size: min(32vw, 44vh, 390px); --product-art-bottom: clamp(120px, 20vh, 200px); z-index: 5; opacity: 0; overflow: hidden; background: linear-gradient(130deg, #f36345, var(--coral) 64%, #e54d35); will-change: clip-path; } .product-ghost-word { position: absolute; z-index: 0; right: -2vw; bottom: -3vw; color: rgba(247,237,207,.15); font-family: var(--serif); font-size: clamp(200px, 32vw, 580px); line-height: .62; letter-spacing: -.07em; } .product-disc { display: none; } .product-pedestal { position: absolute; z-index: 2; left: var(--product-art-cx); bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.15); width: calc(var(--product-art-size) * 1.34); height: calc(var(--product-art-size) * 0.32); translate: -50% 0; border: 1px solid rgba(33,18,14,.12); border-radius: 50%; background: var(--butter); box-shadow: inset 0 -12px 28px rgba(160,84,37,.16), 0 20px 38px rgba(76,22,12,.14); } .product-shadow { position: absolute; z-index: 3; left: var(--product-art-cx); bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.11); width: calc(var(--product-art-size) * 0.88); height: calc(var(--product-art-size) * 0.14); translate: -50% 0; border-radius: 50%; background: rgba(25,9,5,.34); filter: blur(10px); transform: scaleX(.88); opacity: 0; will-change: transform, opacity; } .story-product { position: absolute; z-index: 4; left: var(--product-art-cx); bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.075); width: var(--product-art-size); translate: -50% 0; filter: drop-shadow(0 22px 20px rgba(44,13,8,.25)); will-change: transform, opacity; } .product-specimen { position: absolute; z-index: 5; right: 4vw; top: 50%; display: grid; gap: 5px; color: rgba(33,18,14,.62); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; } .product-specimen b { color: var(--ink); } .story-noise { z-index: 20; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } .chapter { position: absolute; z-index: 12; width: min(440px, 39vw); padding: 4px 0 6px 24px; border-left: 1px solid rgba(247,237,207,.5); color: var(--cream); opacity: 0; pointer-events: none; text-shadow: 0 2px 22px rgba(9,4,3,.38); will-change: transform, opacity; } .chapter.is-active { pointer-events: auto; } .chapter h2 { font-size: clamp(50px, 4.5vw, 78px); line-height: 1.24; } .chapter h2 em { color: var(--butter); } .chapter > p:last-child { margin: 18px 0 0; color: rgba(247,237,207,.78); font-size: 14px; line-height: 1.52; } .chapter-product > p:not(.chapter-index) { margin: 18px 0 0; color: rgba(247,237,207,.82); font-size: 14px; line-height: 1.52; } .chapter-cut { left: 5vw; bottom: 12vh; } .chapter-open { left: 5vw; top: calc(var(--header-h) + 11vh); } .chapter-caviar { left: 5vw; top: calc(var(--header-h) + 10vh); } .chapter-product { left: 5vw; top: calc(var(--header-h) + 12vh); padding: 4px 0 6px 24px; border: 0; border-left: 1px solid rgba(247,237,207,.58); border-radius: 0; background: transparent; color: var(--cream); box-shadow: none; text-shadow: 0 2px 22px rgba(9,4,3,.34); backdrop-filter: none; } .chapter-product h2 em, .chapter-product .chapter-index { color: var(--butter); } .chapter-facts { display: flex; gap: 28px; margin-top: 23px; padding-top: 17px; border-top: 1px solid rgba(247,237,207,.28); } .chapter-facts span { display: grid; gap: 2px; color: rgba(247,237,207,.7); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } .chapter-facts b { color: var(--cream); font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: 0; } .story-buy { display: flex; align-items: center; gap: 20px; margin-top: 22px; } .story-buy > span { display: grid; } .story-buy small { color: var(--muted); font-size: 9px; text-transform: uppercase; } .story-buy b { font-family: var(--serif); font-size: 34px; font-weight: 400; } .chapter-product .story-buy small { color: rgba(247,237,207,.7); } .chapter-product .story-buy .button { background: var(--cream); color: var(--ink); } .story-scroll-cue { position: absolute; z-index: 30; left: 5vw; bottom: 84px; display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .story-scroll-cue i { width: 62px; height: 1px; overflow: hidden; background: rgba(247,237,207,.32); } .story-scroll-cue i::after { content: ""; display: block; width: 50%; height: 100%; background: currentColor; animation: scrollCue 1.8s ease-in-out infinite; } .story-progress { position: absolute; z-index: 30; right: 5vw; bottom: 23px; display: flex; align-items: center; gap: 9px; color: var(--cream); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 0; } .story-progress div { width: 100px; height: 2px; overflow: hidden; background: rgba(247,237,207,.28); } .story-progress i { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; } @keyframes scrollCue { 0% { transform: translateX(-100%); } 50%,100% { transform: translateX(200%); } } .hero-ghost-word, .hero-specimen, .hero-orbit, .story-scroll-cue, .story-progress, .product-ghost-word, .product-disc, .product-shadow, .product-specimen { display: none !important; } /* Shop */ .shop-intro { position: relative; background: var(--cream); padding-bottom: 120px; } .section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; align-items: end; } .shop-heading { padding: 112px 0 62px; } .section-heading h2, .origin-copy h2, .final-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(64px, 6.8vw, 112px); font-weight: 400; line-height: 1.24; letter-spacing: -.05em; } .section-heading h2 em { color: inherit; } .origin-copy h2 em { color: var(--butter); } .section-intro p, .guide-heading > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; } .section-intro span { display: block; margin-top: 22px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .filter-row { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; } .filter-row::-webkit-scrollbar { display: none; } .filter-pill { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; } .filter-pill.active, .filter-pill:hover { background: var(--ink); color: var(--cream); } .products-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .product-card { grid-column: span 4; min-width: 0; overflow: hidden; border: 1px solid rgba(33,18,14,.16); border-radius: 28px; background: var(--butter); transition: transform .3s, box-shadow .3s; } .product-card:nth-child(1) { grid-column: span 7; } .product-card:nth-child(2) { grid-column: span 5; } .products-grid[data-count="1"] .product-card { grid-column: span 12; } .products-grid[data-count="2"] .product-card { grid-column: span 6; } .products-grid[data-count="3"] .product-card { grid-column: span 4; } .products-grid[data-count="4"] .product-card { grid-column: span 6; } .products-grid[data-count="7"] .product-card:nth-child(6), .products-grid[data-count="7"] .product-card:nth-child(7) { grid-column: span 6; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(51,24,15,.12); } .product-card[data-category="pasty"] { background: var(--coral); } .product-card[data-category="mleta"] { background: #dba56f; } .product-card[data-category="cukr"] { background: #ead8a4; } .product-card[data-category="balicky"] { background: #c98369; } .product-visual { position: relative; min-height: 390px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.48), transparent 52%); cursor: pointer; } .product-card-image-link { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: inherit; text-decoration: none; } .product-card-image-link:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: -8px; } .product-card:nth-child(1) .product-visual { min-height: 520px; } .product-card:nth-child(2) .product-visual { min-height: 520px; } .product-visual::after { content: attr(data-form); position: absolute; left: 18px; bottom: -8px; color: rgba(33,18,14,.12); font-family: var(--serif); font-size: clamp(76px, 9vw, 150px); line-height: .7; white-space: nowrap; pointer-events: none; } .product-card-image { position: relative; z-index: 2; width: 70%; height: 310px; object-fit: contain; filter: drop-shadow(0 26px 20px rgba(45,19,12,.22)); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .product-card:nth-child(-n+2) .product-card-image { height: 410px; } .product-card:hover .product-card-image { transform: translateY(-7px) rotate(-2deg) scale(1.035); } .product-badges { position: absolute; z-index: 4; inset: 18px 18px auto; display: flex; justify-content: space-between; align-items: start; gap: 8px; } .badge-sticker { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; border: 1px solid rgba(33,18,14,.22); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .quickview-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--cream); font-size: 16px; cursor: pointer; } .product-info { padding: 22px 24px 24px; border-top: 1px solid rgba(33,18,14,.15); background: rgba(255,249,233,.88); } .product-card-kicker { margin: 0 0 9px; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .product-card-title { margin: 0; font-family: var(--serif); font-size: clamp(31px, 3vw, 47px); font-weight: 400; line-height: 1.24; letter-spacing: -.035em; cursor: pointer; } .product-card-desc { display: -webkit-box; max-width: 610px; margin: 14px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-card-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 20px; } .product-variant-field { display: grid; gap: 6px; } .product-variant-field label, .variant-field-label { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .product-variant-field select { width: 100%; min-height: 46px; padding: 0 34px 0 12px; border: 1px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 600; } .variant-summary-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; } .variant-summary-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .variant-summary-button span:last-child { flex: 0 0 auto; font-size: 16px; } .variant-summary-button:hover, .variant-summary-button:focus-visible { background: var(--cream); } .product-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 13px; } .product-price b { font-family: var(--serif); font-size: 31px; font-weight: 400; } .product-price span { color: var(--muted); font-size: 9px; } .product-card-buy .button { min-height: 46px; padding: 0 17px; gap: 18px; } .format-guide { padding: 120px 0 130px; background: var(--cream-soft); } .guide-heading { margin-bottom: 62px; } .guide-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .guide-card { position: relative; grid-column: span 4; min-height: 690px; overflow: hidden; padding: 26px; border-radius: 28px; background: var(--butter); } .guide-card-paste { background: #dba56f; } .guide-card-ground { background: var(--coral); } .guide-number { position: absolute; top: 26px; right: 26px; font-size: 10px; font-weight: 700; } .guide-card > p { margin: 0 0 10px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .guide-card h3 { position: relative; z-index: 2; margin: 0; font-family: var(--serif); font-size: clamp(48px, 4.2vw, 70px); font-weight: 400; line-height: 1.08; } .guide-card img { position: absolute; left: 8%; right: 8%; top: 23%; width: 84%; height: 52%; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(37,16,10,.22)); transition: transform .45s; } .guide-card-paste img { top: 32%; height: 48%; } .guide-card:hover img { transform: scale(1.04) rotate(-2deg); } .guide-footer { position: absolute; inset: auto 26px 26px; display: grid; gap: 14px; } .guide-footer span { color: rgba(33,18,14,.66); font-size: 11px; } .guide-footer a, .text-link { width: fit-content; padding: 0 0 7px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; } .guide-shop-link { display: flex; justify-content: center; margin-top: 42px; } .origin { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 880px; background: var(--ink); color: var(--cream); } .origin-image { position: relative; min-height: 720px; overflow: hidden; } .origin-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(33,18,14,.28)); } .origin-image img { width: 100%; height: 100%; object-fit: cover; } .origin-stamp { position: absolute; z-index: 2; left: 38px; bottom: 38px; width: 132px; height: 132px; display: grid; place-content: center; border: 1px solid var(--cream); border-radius: 50%; background: rgba(33,18,14,.28); color: var(--cream); font-family: var(--serif); font-size: 30px; line-height: .8; text-align: center; backdrop-filter: blur(8px); transform: rotate(-9deg); } .origin-stamp small { font-family: var(--sans); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; } .origin-copy { display: flex; flex-direction: column; justify-content: center; padding: 10vw 6vw; } .origin-copy .eyebrow { color: var(--lime); } .origin-copy h2 { font-size: clamp(65px, 6.2vw, 104px); } .origin-copy h2 em { color: var(--butter); } .origin-copy > p:not(.eyebrow) { max-width: 620px; margin: 34px 0 0; color: rgba(247,237,207,.7); font-size: 16px; line-height: 1.65; } .origin-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 48px 0; border-block: 1px solid rgba(255,255,255,.18); } .origin-metrics div { min-height: 105px; display: grid; align-content: center; gap: 4px; padding-inline: 20px; border-right: 1px solid rgba(255,255,255,.18); } .origin-metrics div:last-child { border-right: 0; } .origin-metrics b { font-family: var(--serif); font-size: 38px; font-weight: 400; } .origin-metrics span { color: rgba(247,237,207,.58); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; } .origin .text-link { color: var(--cream); } .proof { padding: 120px 0 135px; background: var(--butter); } .proof-heading { margin-bottom: 58px; } .proof-intro { max-width: 500px; } .proof-intro > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; } .proof-intro > a { width: fit-content; display: flex; align-items: baseline; gap: 12px; margin-top: 28px; color: var(--ink); text-decoration: none; } .proof-intro > a b { font-family: var(--serif); font-size: 64px; font-weight: 400; line-height: .8; } .proof-intro > a span { max-width: 160px; font-size: 9px; font-weight: 700; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; } .proof-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; border-block: 1px solid rgba(33,18,14,.24); } .proof-review { min-height: 112px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 18px 18px 18px 0; color: var(--ink); text-decoration: none; transition: color .2s; } .proof-review + .proof-review { padding-left: 20px; border-left: 1px solid rgba(33,18,14,.24); } .proof-review:hover { color: var(--coral-deep); } .proof-review b { color: var(--ink); font-family: var(--serif); font-size: clamp(38px, 3.7vw, 58px); font-weight: 400; letter-spacing: -.05em; line-height: .85; white-space: nowrap; } .proof-review span { display: grid; gap: 5px; font-size: 9px; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; } .proof-review span strong { color: var(--coral-deep); font-size: 9px; } .proof-review span small { color: rgba(33,18,14,.62); font-size: 8px; font-weight: 700; letter-spacing: .08em; } .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); } .proof-card { min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; border-right: 1px solid var(--ink); } .proof-card:last-child { border-right: 0; } .proof-index { margin: 0; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .13em; } .proof-value { display: block; margin-top: 34px; font-family: var(--serif); font-size: clamp(58px, 5vw, 84px); font-weight: 400; line-height: .8; } .proof-card h3 { max-width: 380px; margin: 20px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; line-height: 1.24; } .proof-card-copy > p { max-width: 380px; margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .proof-source { margin-top: 28px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .final-cta { position: relative; min-height: 780px; display: grid; grid-template-columns: .88fr 1.12fr; overflow: hidden; background: var(--oxblood); color: var(--cream); } .final-copy { z-index: 5; align-self: center; padding: 110px 5vw; } .final-copy .eyebrow { color: var(--lime); } .final-copy h2 { font-size: clamp(82px, 8vw, 145px); } .final-copy h2 em { color: var(--coral); } .final-copy > p:not(.eyebrow) { max-width: 460px; margin: 30px 0 0; color: rgba(247,237,207,.68); font-size: 16px; line-height: 1.6; } .final-copy .button { margin-top: 30px; } .final-products { position: relative; min-height: 780px; overflow: hidden; border-left: 1px solid rgba(247,237,207,.18); } .final-products::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(92,27,27,.58), transparent 24%); pointer-events: none; } .final-still-life { width: 100%; height: 100%; object-fit: cover; object-position: 63% center; } .site-footer { padding: 84px 5vw 24px; background: #160b08; color: var(--cream); } .footer-main { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 5vw; } .footer-main > div { display: flex; flex-direction: column; align-items: start; gap: 11px; } .footer-brand img { width: 150px; max-height: 72px; object-fit: contain; } .footer-brand p { max-width: 250px; color: rgba(247,237,207,.6); font-size: 12px; line-height: 1.5; } .footer-main > div > p:first-child { margin: 0 0 8px; color: rgba(247,237,207,.42); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .footer-main a, .footer-main span { font-size: 12px; } .footer-main a:hover { color: var(--coral); } .footer-bottom { display: flex; justify-content: space-between; margin-top: 72px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(247,237,207,.42); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } /* Cart, menu, quick view */ .overlay { position: fixed; z-index: 200; inset: 0; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; } .overlay.open { visibility: visible; opacity: 1; } .overlay-close { position: absolute; z-index: 4; top: 20px; right: 20px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; } .menu-overlay { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 8vw; background: var(--coral); color: var(--ink); } .menu-overlay > a { font-family: var(--serif); font-size: clamp(46px, 12vw, 72px); line-height: 1.12; } .menu-overlay .button { margin-top: 20px; } .cart-overlay { background: rgba(16,7,5,.64); backdrop-filter: blur(8px); } .cart-panel { position: absolute; inset: 0 0 0 auto; width: min(520px, 100%); overflow-y: auto; padding: 72px 34px 30px; background: var(--cream-soft); box-shadow: -30px 0 80px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); } .cart-overlay.open .cart-panel { transform: translateX(0); } .cart-panel h2 { margin: 0 0 28px; font-family: var(--serif); font-size: 68px; font-weight: 400; line-height: .85; } #shipping-text { min-height: 36px; color: var(--muted); font-size: 12px; line-height: 1.4; } .shipping-bar { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(33,18,14,.13); } .shipping-bar span { display: block; width: 0; height: 100%; background: var(--coral); transition: width .3s; } #cart-items-list { margin-top: 24px; } .cart-item-row { display: grid; grid-template-columns: 82px 1fr 34px; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); } .cart-item-img { width: 82px; height: 82px; object-fit: contain; border-radius: 14px; background: var(--butter); } .cart-item-details h4 { margin: 0 0 5px; font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1; } .cart-item-variant { color: var(--muted); font-size: 9px; } .cart-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .qty-btn { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; } .qty-btn:disabled { opacity: .45; cursor: default; } .cart-item-row { grid-template-columns: 82px minmax(0, 1fr) 44px; } .qty-value { font-size: 11px; font-weight: 700; } .cart-total { display: flex; justify-content: space-between; align-items: end; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink); } .cart-total span { font-size: 10px; text-transform: uppercase; } .cart-total strong { font-family: var(--serif); font-size: 36px; font-weight: 400; } .checkout-link { width: 100%; margin-top: 22px; } .modal-overlay { display: grid; place-items: center; padding: 24px; background: rgba(16,7,5,.7); backdrop-filter: blur(8px); } .modal-dialog { position: relative; width: min(1040px, 96vw); max-height: 92svh; overflow-y: auto; padding: 42px; border-radius: 28px; background: var(--cream-soft); transform: translateY(20px) scale(.98); transition: transform .3s; } .modal-overlay.open .modal-dialog { transform: none; } .modal-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; } .modal-gallery-img { width: 100%; height: 480px; object-fit: contain; border-radius: 22px; background: var(--butter); } .modal-dialog h2 { font-family: var(--serif); font-size: 48px !important; font-weight: 400; line-height: 1.12; } .modal-origin { margin: 0 0 16px; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .modal-source-link { display: inline-block; margin: -8px 0 22px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 10px; font-weight: 700; text-decoration: none; } .variant-selector-box { padding: 18px; border-radius: 18px; background: var(--cream); } .variant-selector-label { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .variant-chips { display: flex; flex-wrap: wrap; gap: 7px; } .variant-chip { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 12px; cursor: pointer; } .variant-chip.selected { background: var(--ink); color: var(--cream); } .variant-picker { display: grid; gap: 16px; } .variant-picker-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; } .variant-picker-group legend { margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .variant-choice-options { display: flex; flex-wrap: wrap; gap: 8px; } .variant-choice-button { min-width: 76px; min-height: 42px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-soft); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: border-color .18s, background-color .18s, color .18s, transform .18s; } .variant-choice-button:hover { border-color: var(--ink); background: var(--cream); transform: translateY(-1px); } .variant-choice-button:focus-visible { border-color: var(--ink); background: var(--cream); } .variant-choice-button.is-selected { border-color: var(--ink); background: var(--ink); color: var(--cream); } .variant-choice-button:disabled { cursor: not-allowed; opacity: .4; transform: none; } .variant-picker-single { margin: 0; color: var(--muted); font-size: 13px; } .price-main { font-family: var(--serif); font-size: 30px; } .modal-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; } .modal-tab-btn { flex: 0 0 auto; min-height: 36px; padding: 0 11px; border: 0; border-bottom: 1px solid transparent; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; } .modal-tab-btn.active { border-color: var(--ink); } #toast-container { position: fixed; z-index: 300; right: 20px; bottom: 20px; display: grid; gap: 8px; } .toast { max-width: 380px; padding: 14px 17px; border-radius: 14px; background: var(--ink); color: var(--cream); box-shadow: 0 15px 40px rgba(0,0,0,.25); font-size: 11px; transform: translateY(12px); opacity: 0; transition: .25s; } .toast.show { transform: none; opacity: 1; } @media (max-width: 1100px) { :root { --shell: min(100% - 40px, 980px); } .site-header { grid-template-columns: 145px 1fr auto; padding-inline: 24px; } .desktop-nav { gap: 24px; } .header-shop { display: none; } .hero-copy { left: 4vw; width: 54vw; } .hero-copy h1 { font-size: clamp(66px, 7.8vw, 94px); } .hero-pedestal { --hero-art-cx: 74%; --hero-art-size: min(38vw, 48vh, 450px); } .hero-pod-wrap { } .product-world { --product-art-cx: 74%; --product-art-size: min(35vw, 45vh, 390px); } .product-card, .product-card:nth-child(1), .product-card:nth-child(2) { grid-column: span 6; } .product-card:nth-child(-n+2) .product-visual, .product-visual { min-height: 390px; } .product-card:nth-child(-n+2) .product-card-image, .product-card-image { height: 300px; } .origin { grid-template-columns: 1fr; } .origin-image { min-height: 680px; } .origin-copy { padding: 90px 6vw 110px; } .final-cta { grid-template-columns: 1fr 1fr; } } @media (min-width: 761px) and (max-width: 900px) { .hero-copy { width: 52vw; } .hero-copy h1 { font-size: clamp(62px, 9vw, 78px); } .hero-pedestal { --hero-art-cx: 75%; --hero-art-size: min(42vw, 44vh, 400px); } .hero-pod-wrap { } .chapter { width: 46vw; } } @media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) { .hero-pedestal { --hero-art-cx: 74%; --hero-art-size: min(44vw, 40vh, 380px); } .hero-pod-wrap { } } @media (min-width: 1600px) { :root { --hero-art-cx: calc(50% + 360px); --hero-art-size: min(32vw, 55vh, 520px); } .hero-copy, .chapter-product, .chapter-cut, .chapter-open, .chapter-caviar { left: calc(50% - 700px); max-width: 660px; } .hero-categories { left: calc(50% - 700px); right: calc(50% - 700px); } } @media (max-width: 760px) { :root { --announcement-h: 0px; --header-h: 63px; --shell: calc(100% - 28px); } .site-header { grid-template-columns: 1fr auto; padding-inline: 14px; } .site-header::before { opacity: .12; } .brand { width: 104px; } .desktop-nav, .header-shop, .cart-button span { display: none; } .header-actions { gap: 2px; } .cart-button { min-height: 42px; padding: 0 6px 0 11px; } .cart-button svg { display: block; } .cart-count { min-width: 28px; height: 28px; } .menu-button { display: block; } .button { min-height: 47px; padding-inline: 17px; gap: 20px; } .story { height: 100svh; min-height: 560px; } .story-stage { position: relative; top: auto; height: 100svh; min-height: 560px; } .hero-world::before { display: none; } .hero-ghost-word { right: -8vw; bottom: 4vh; font-size: 42vw; } .hero-copy { left: 18px; right: 18px; top: calc(var(--header-h) + 14px); width: auto; } .hero-copy .eyebrow { margin-bottom: 8px; font-size: 9px; letter-spacing: .12em; } .hero-copy h1 { max-width: 320px; font-size: clamp(36px, 10.2vw, 46px); line-height: 1.24; } .hero-lead { max-width: 310px; margin-top: 10px; font-size: 12px; line-height: 1.4; color: rgba(33,18,14,.84); } .hero-actions { gap: 10px; margin-top: 14px; } .hero-actions .button { min-height: 44px; padding-inline: 16px; font-size: 11px; } .play-link { font-size: 0; } .play-link i { width: 44px; height: 44px; font-size: 12px; } .hero-proof { gap: 14px; margin-top: 11px; padding-top: 8px; font-size: 8px; line-height: 1.3; } .hero-proof span, .hero-proof a { max-width: 156px; } .hero-pedestal { left: 50%; right: auto; top: calc(var(--header-h) + (100svh - var(--header-h)) * 0.65); width: min(64vw, 32vh, 230px); height: min(64vw, 32vh, 230px); aspect-ratio: 1; translate: -50% -50%; transform: rotate(-6deg); box-shadow: inset -30px -20px 60px rgba(164,86,52,.15), 0 30px 60px rgba(66,18,12,.14); } .hero-pod-wrap { left: 50%; top: calc(var(--header-h) + (100svh - var(--header-h)) * 0.64); height: calc(min(64vw, 32vh, 230px) * 1.34); aspect-ratio: 1122 / 1402; translate: -50% -50%; transform: rotate(20deg); filter: drop-shadow(0 24px 18px rgba(38,13,8,.26)); } .hero-specimen, .hero-orbit, .hero-categories { display: none; } .story-film, .film-poster, .film-poster img, .macro-image { display: none; } .mobile-story-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: translateZ(0); will-change: opacity, transform; } .mobile-story-cut-still, .mobile-story-seeds-still { filter: saturate(.92) contrast(.98) brightness(.93); } .mobile-story-caviar-still { filter: saturate(.9) contrast(.98) brightness(.94); } .film-vignette { background: linear-gradient(180deg, rgba(10,5,4,.12), transparent 38%, rgba(10,5,4,.56)); } .film-label { right: 14px; top: calc(var(--header-h) + 13px); } .film-label b { display: none; } .macro-image { object-position: 58% center; } .macro-shade { background: linear-gradient(180deg, rgba(18,7,5,.1), transparent 40%, rgba(18,7,5,.56)); } .river-shade { background: linear-gradient(180deg, rgba(12,6,4,.1), transparent 38%, rgba(10,5,3,.56)); } .product-ghost-word { right: -18vw; bottom: 4vh; font-size: 52vw; } .product-world { --product-art-cx: 50%; --product-art-size: min(64vw, 30vh, 230px); --product-art-bottom: clamp(112px, 15vh, 132px); } .product-pedestal { top: auto; bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.12); width: calc(var(--product-art-size) * 1.16); height: calc(var(--product-art-size) * 0.25); translate: -50% 0; } .product-shadow { top: auto; bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.11); translate: -50% 0; } .story-product { top: auto; bottom: calc(var(--product-art-bottom) - var(--product-art-size) * 0.075); translate: -50% 0; } .product-specimen { display: none; } .chapter { left: 16px; right: 16px; top: auto; bottom: 82px; width: auto; padding: 2px 0 7px 15px; border: 0; border-left: 1px solid rgba(247,237,207,.54); border-radius: 0; background: transparent; color: var(--cream); box-shadow: none; text-shadow: 0 2px 18px rgba(9,4,3,.44); backdrop-filter: none; } .chapter h2 { max-width: 330px; font-size: clamp(34px, 10.3vw, 43px); line-height: 1.24; } .chapter h2 em { color: var(--butter); } .chapter-index { margin-bottom: 7px; color: var(--butter); font-size: 9px; } .chapter > p:last-child { max-width: 330px; margin-top: 9px; color: rgba(247,237,207,.82); font-size: 12px; line-height: 1.45; } .chapter-caviar h2 em, .chapter-caviar .chapter-index { color: var(--butter); } .chapter-caviar .chapter-facts { border-color: rgba(247,237,207,.28); } .chapter-caviar .chapter-facts span { color: rgba(247,237,207,.72); } .chapter-caviar .chapter-facts b { color: var(--cream); } .chapter-product { top: calc(var(--header-h) + 24px); bottom: auto; padding: 2px 0 7px 15px; border: 0; border-left: 1px solid rgba(247,237,207,.54); border-radius: 0; background: transparent; color: var(--cream); box-shadow: none; text-shadow: 0 2px 18px rgba(9,4,3,.36); backdrop-filter: none; } .chapter-product h2 { font-size: clamp(35px, 10.7vw, 44px); } .chapter-product h2 em, .chapter-product .chapter-index { color: var(--butter); } .chapter-product > p:not(.chapter-index) { margin-top: 9px; color: rgba(247,237,207,.82); font-size: 12px; line-height: 1.42; } .chapter-facts { gap: 18px; margin-top: 13px; padding-top: 11px; } .chapter-facts b { font-size: 23px; } .story-buy { gap: 10px; margin-top: 13px; } .story-buy b { font-size: 26px; } .story-buy .button { flex: 1; min-height: 43px; } .story-scroll-cue { display: none; } .story-scroll-cue i { width: 43px; } .story-progress { display: none; } .mobile-story-controls { position: absolute; z-index: 32; left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 8px 7px 12px; border: 1px solid rgba(247,237,207,.2); border-radius: 999px; background: rgba(24,12,9,.64); color: var(--cream); box-shadow: 0 8px 28px rgba(17,7,5,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mobile-story-progress { display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; } .mobile-story-counter { flex: 0 0 auto; color: rgba(247,237,207,.82); font-size: 8px; font-weight: 700; letter-spacing: .08em; } .mobile-story-segments { display: flex; flex: 1; gap: 4px; } .mobile-story-segment { display: block; flex: 1; height: 2px; border-radius: 999px; background: rgba(247,237,207,.25); transition: background-color .35s ease, transform .35s ease; transform-origin: left center; } .mobile-story-segment.is-complete { background: rgba(247,237,207,.72); } .mobile-story-segment.is-active { background: var(--butter); transform: scaleY(1.8); } .mobile-story-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-width: 104px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .04em; cursor: pointer; } .mobile-story-toggle:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; } .mobile-story-toggle-icon { width: 10px; font-size: 10px; line-height: 1; text-align: center; } .mobile-story-toggle[disabled] { opacity: .64; cursor: default; } .shop-intro { padding-bottom: 82px; } .section-heading { grid-template-columns: 1fr; gap: 28px; } .shop-heading { padding: 78px 0 40px; } .section-heading h2, .origin-copy h2 { font-size: clamp(53px, 15vw, 67px); line-height: 1.24; } .section-intro p, .guide-heading > p { font-size: 13px; } .filter-row { margin: 0 -14px 16px; padding: 0 14px; } .filter-pill { min-height: 40px; padding-inline: 15px; } .products-grid { grid-template-columns: 1fr; gap: 10px; } .products-grid[data-count] .product-card, .products-grid[data-count="7"] .product-card:nth-child(6), .products-grid[data-count="7"] .product-card:nth-child(7), .product-card, .product-card:nth-child(1), .product-card:nth-child(2) { grid-column: 1 / -1; border-radius: 22px; } .product-visual, .product-card:nth-child(-n+2) .product-visual { min-height: 330px; } .product-card-image, .product-card:nth-child(-n+2) .product-card-image { width: 76%; height: 265px; } .product-info { padding: 18px; } .product-card-title { font-size: 34px; } .product-card-desc { font-size: 11px; } .product-card-buy { grid-template-columns: 1fr; } .product-card-buy .button { width: 100%; } .format-guide { padding: 80px 0 88px; } .guide-heading { margin-bottom: 38px; } .guide-grid { display: flex; gap: 10px; margin-inline: -14px; padding: 0 14px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; overscroll-behavior-inline: contain; -ms-overflow-style: none; } .guide-grid::-webkit-scrollbar, .bundle-grid::-webkit-scrollbar { display: none; } .guide-card { flex: 0 0 calc(100vw - 54px); min-height: 410px; display: grid; grid-template-rows: auto auto minmax(155px, 1fr) auto; align-items: start; padding: 18px; border-radius: 22px; scroll-snap-align: start; } .guide-card h3 { max-width: 245px; font-size: 39px; line-height: 1.08; } .guide-card img { position: static; width: 92%; height: 165px; margin: 4px auto 8px; align-self: center; justify-self: center; } .guide-footer { position: static; align-self: end; gap: 10px; } .origin-image { min-height: 500px; } .origin-image img { object-position: 68% center; } .origin-stamp { left: 18px; bottom: 18px; width: 96px; height: 96px; font-size: 23px; } .origin-copy { padding: 76px 14px 88px; } .origin-copy > p:not(.eyebrow) { margin-top: 25px; font-size: 13px; } .origin-metrics { grid-template-columns: 1fr; margin: 35px 0; } .origin-metrics div, .origin-metrics div:last-child { min-height: 76px; padding-left: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); } .origin-metrics div:last-child { border-bottom: 0; } .proof { padding: 78px 0 86px; } .proof-heading { margin-bottom: 38px; } .proof-intro > p { font-size: 13px; } .proof-intro > a { margin-top: 22px; } .proof-intro > a b { font-size: 55px; } .proof-reviews { grid-template-columns: 1fr; margin-top: 22px; } .proof-review, .proof-review + .proof-review { min-height: 82px; padding: 15px 0; gap: 12px; border-left: 0; } .proof-review + .proof-review { border-top: 1px solid rgba(33,18,14,.24); } .proof-review b { font-size: 42px; } .proof-review span { font-size: 8px; letter-spacing: .06em; } .proof-grid { grid-template-columns: 1fr; } .proof-card { min-height: 320px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--ink); } .proof-card:last-child { border-bottom: 0; } .proof-value { font-size: 62px; } .proof-card h3 { font-size: 30px; } .final-cta { min-height: 0; grid-template-columns: 1fr; } .final-copy { align-self: start; padding: 76px 14px 70px; } .final-copy h2 { font-size: clamp(64px, 18vw, 82px); } .final-copy > p:not(.eyebrow) { margin-top: 20px; font-size: 13px; } .final-products { min-height: 410px; border-left: 0; border-top: 1px solid rgba(247,237,207,.18); } .final-products::after { background: linear-gradient(180deg, rgba(92,27,27,.34), transparent 28%); } .final-still-life { object-position: 70% center; } .site-footer { padding: 64px 14px 22px; } .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 20px; } .footer-brand { grid-column: 1 / -1; } .footer-main > div:last-child { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; gap: 10px; margin-top: 54px; } .modal-overlay { padding: 0; } .modal-dialog { width: 100%; height: 100svh; max-height: none; padding: 64px 16px 28px; border-radius: 0; } .modal-grid { grid-template-columns: 1fr; gap: 24px; } .modal-gallery-img { height: 300px; } .modal-dialog h2 { font-size: 39px !important; } .cart-panel { padding: 64px 16px 24px; } .cart-panel h2 { font-size: 58px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .story { height: auto; } .story-stage { position: relative; height: max(100svh, 720px); } .film-world, .macro-world, .river-world, .product-world, .chapter, .story-progress { display: none !important; } .hero-world { opacity: 1 !important; transform: none !important; } } /* Standalone pages */ .page-site { background: var(--cream-soft); } .page-site .site-header::before { opacity: 1; } .page-site .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); } .page-main { padding-top: var(--header-h); } .page-kicker { margin: 0 0 22px; color: var(--coral-deep); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .page-title { max-width: 850px; margin: 0; font-family: var(--serif); font-size: clamp(76px, 8.2vw, 146px); font-weight: 400; line-height: 1.24; letter-spacing: -.055em; } .page-title span { display: block; color: var(--cream); } .page-lead { max-width: 590px; margin: 30px 0 0; color: rgba(33,18,14,.72); font-size: 16px; line-height: 1.65; } .page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .page-section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; align-items: end; margin-bottom: 58px; } .page-section-heading h2 { max-width: 900px; margin: 0; font-family: var(--serif); font-size: clamp(64px, 6.7vw, 112px); font-weight: 400; line-height: 1.24; letter-spacing: -.045em; } .page-section-heading > p, .page-section-heading > div > p:not(.page-kicker) { max-width: 570px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; } /* Shop page */ .shop-page-hero { min-height: 700px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; background: var(--coral); } .shop-page-hero .page-hero-copy { align-self: center; padding: 90px 5vw 88px; } .shop-page-hero .page-title { font-size: clamp(76px, 7.4vw, 132px); } .shop-page-hero .page-title span { color: var(--cream); } .shop-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 620px; margin-top: 48px; border-top: 1px solid rgba(33,18,14,.32); } .shop-hero-meta span { display: grid; gap: 5px; min-height: 76px; align-content: center; padding-right: 18px; border-right: 1px solid rgba(33,18,14,.24); color: rgba(33,18,14,.62); font-size: 9px; line-height: 1.35; text-transform: uppercase; } .shop-hero-meta span:last-child { padding-left: 18px; border-right: 0; } .shop-hero-meta span:nth-child(2) { padding-left: 18px; } .shop-hero-meta b { color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1; text-transform: none; } .shop-hero-art { position: relative; overflow: hidden; border-left: 1px solid rgba(33,18,14,.22); background: var(--butter); } .shop-hero-art img { position: absolute; right: -2%; bottom: -15%; height: 118%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 42px 34px rgba(41,16,9,.22)); transform: rotate(-5deg); } .shop-hero-note { position: absolute; z-index: 2; top: 28px; right: 32px; margin: 0; color: rgba(33,18,14,.58); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .shop-catalog { padding: 112px 0 128px; background: var(--cream-soft); } .shop-catalog .page-section-heading { margin-bottom: 36px; } .shop-page .filter-row { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); } .shop-page .product-card, .shop-page .product-card:nth-child(1), .shop-page .product-card:nth-child(2), .shop-page .products-grid[data-count="7"] .product-card:nth-child(6), .shop-page .products-grid[data-count="7"] .product-card:nth-child(7) { grid-column: span 4; background: #fff; border-color: rgba(33,18,14,.22); border-radius: 18px; } .shop-page .product-visual, .shop-page .product-card:nth-child(1) .product-visual, .shop-page .product-card:nth-child(2) .product-visual { min-height: 370px; background: #fff; } .shop-page .product-visual::after { display: none; } .shop-page .product-card-image, .shop-page .product-card:nth-child(-n+2) .product-card-image { width: 88%; height: 330px; padding: 12px; object-fit: contain; filter: none; } .shop-page .product-card:hover .product-card-image { transform: translateY(-4px) scale(1.018); } .shop-page .product-info { background: var(--cream); } .shop-page .product-card-title { font-size: clamp(31px, 2.6vw, 43px); } .shop-assurance { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .shop-assurance div { min-height: 132px; display: grid; align-content: center; gap: 8px; padding: 24px 30px; border-right: 1px solid var(--ink); } .shop-assurance div:last-child { border-right: 0; } .shop-assurance b { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1; } .shop-assurance span { color: var(--muted); font-size: 10px; line-height: 1.45; text-transform: uppercase; letter-spacing: .08em; } /* Blog page */ .blog-page-hero { min-height: 720px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; background: var(--ink); color: var(--cream); } .blog-page-hero .page-hero-copy { align-self: center; padding: 100px 5vw; } .blog-page-hero .page-kicker { color: var(--lime); } .blog-page-hero .page-title span { color: var(--coral); } .blog-page-hero .page-lead { color: rgba(247,237,207,.68); } .blog-hero-media { position: relative; min-height: 600px; overflow: hidden; border-left: 1px solid rgba(247,237,207,.18); } .blog-hero-media img { width: 100%; height: 100%; object-fit: cover; } .blog-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33,18,14,.45), transparent 25%); } .blog-index { padding: 112px 0 126px; background: var(--cream-soft); } .article-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .article-card { display: grid; grid-template-rows: 340px 1fr; min-width: 0; border-right: 1px solid var(--ink); } .article-card:last-child { border-right: 0; } .article-card-media { overflow: hidden; background: var(--butter); } .article-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); } .article-card:hover .article-card-media img { transform: scale(1.025); } .article-card-copy { display: flex; flex-direction: column; min-height: 330px; padding: 30px; } .article-card-index { margin: 0 0 30px; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .article-card h2 { max-width: 610px; margin: 0; font-family: var(--serif); font-size: clamp(44px, 4vw, 67px); font-weight: 400; line-height: 1.24; letter-spacing: -.035em; } .article-card-copy > p:not(.article-card-index) { max-width: 610px; margin: 22px 0 30px; color: var(--muted); font-size: 13px; line-height: 1.6; } .article-card .text-link { margin-top: auto; } .recipes-section { padding: 112px 0 126px; background: var(--coral); } .recipes-section .page-section-heading > p { color: rgba(33,18,14,.68); } .recipe-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .recipe-card { min-height: 380px; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--ink); } .recipe-card:last-child { border-right: 0; } .recipe-card > span { color: rgba(33,18,14,.58); font-size: 9px; font-weight: 700; letter-spacing: .13em; } .recipe-card h3 { margin: 42px 0 18px; font-family: var(--serif); font-size: clamp(32px, 2.8vw, 45px); font-weight: 400; line-height: 1.24; } .recipe-card p { margin: 0 0 30px; color: rgba(33,18,14,.68); font-size: 11px; line-height: 1.55; } .recipe-card .text-link { margin-top: auto; } .blog-shop-cta { min-height: 360px; display: grid; grid-template-columns: 1.4fr auto; gap: 50px; align-items: center; padding: 72px 5vw; background: var(--butter); } .blog-shop-cta h2 { max-width: 900px; margin: 0; font-family: var(--serif); font-size: clamp(56px, 6vw, 100px); font-weight: 400; line-height: 1.24; letter-spacing: -.04em; } /* Wholesale page */ .wholesale-page-hero { min-height: 720px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; background: var(--oxblood); color: var(--cream); } .wholesale-page-hero .page-hero-copy { align-self: center; padding: 100px 5vw; } .wholesale-page-hero .page-kicker { color: var(--lime); } .wholesale-page-hero .page-title span { color: var(--butter); } .wholesale-page-hero .page-lead { color: rgba(247,237,207,.7); } .wholesale-hero-media { position: relative; min-height: 600px; overflow: hidden; border-left: 1px solid rgba(247,237,207,.18); } .wholesale-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; } .wholesale-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(92,27,27,.55), transparent 30%); } .b2b-types { padding: 112px 0 126px; background: var(--cream-soft); } .b2b-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .b2b-card { min-height: 410px; display: flex; flex-direction: column; padding: 30px; border-right: 1px solid var(--ink); } .b2b-card:last-child { border-right: 0; } .b2b-card-index { margin: 0; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .b2b-card h3 { margin: 54px 0 22px; font-family: var(--serif); font-size: clamp(44px, 4vw, 66px); font-weight: 400; line-height: 1.24; } .b2b-card > p:not(.b2b-card-index) { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .b2b-card .text-link { margin-top: auto; } .b2b-contact { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; background: var(--butter); } .b2b-contact-copy { display: flex; flex-direction: column; justify-content: center; padding: 100px 6vw; } .b2b-contact-copy h2 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(65px, 6.6vw, 110px); font-weight: 400; line-height: 1.24; letter-spacing: -.045em; } .b2b-contact-copy > p:not(.page-kicker) { max-width: 560px; margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; } .b2b-contact-panel { display: flex; flex-direction: column; justify-content: center; padding: 90px 6vw; background: var(--ink); color: var(--cream); } .b2b-contact-panel > p { margin: 0 0 28px; color: rgba(247,237,207,.55); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .b2b-contact-panel > a:not(.button) { width: fit-content; margin-bottom: 15px; font-family: var(--serif); font-size: clamp(31px, 3vw, 48px); line-height: 1; } .b2b-contact-panel small { margin-top: 10px; color: rgba(247,237,207,.55); font-size: 10px; line-height: 1.5; } .b2b-contact-panel .button { margin-top: 38px; } @media (max-width: 1100px) { .page-section-heading { grid-template-columns: 1fr; gap: 28px; } .shop-page-hero, .blog-page-hero, .wholesale-page-hero { grid-template-columns: 1fr 1fr; } .shop-page .product-card, .shop-page .product-card:nth-child(1), .shop-page .product-card:nth-child(2), .shop-page .products-grid[data-count="7"] .product-card:nth-child(6), .shop-page .products-grid[data-count="7"] .product-card:nth-child(7) { grid-column: span 6; } .recipe-grid { grid-template-columns: repeat(2, 1fr); } .recipe-card { border-bottom: 1px solid var(--ink); } .recipe-card:nth-child(2n) { border-right: 0; } .recipe-card:last-child { grid-column: 1 / -1; min-height: 300px; border-bottom: 0; } } @media (max-width: 760px) { .page-main { padding-top: var(--header-h); } .page-kicker { margin-bottom: 16px; font-size: 8px; } .page-title { font-size: clamp(58px, 18vw, 78px); line-height: 1.24; } .page-lead { margin-top: 22px; font-size: 13px; line-height: 1.58; } .page-section-heading { margin-bottom: 36px; } .page-section-heading h2 { font-size: clamp(54px, 15.5vw, 70px); line-height: 1.24; } .page-section-heading > p, .page-section-heading > div > p:not(.page-kicker) { font-size: 13px; } .shop-page-hero, .blog-page-hero, .wholesale-page-hero { min-height: 0; grid-template-columns: 1fr; } .shop-page-hero .page-hero-copy, .blog-page-hero .page-hero-copy, .wholesale-page-hero .page-hero-copy { padding: 72px 14px 62px; } .shop-page-hero .page-title { font-size: clamp(57px, 17vw, 73px); } .shop-hero-meta { margin-top: 34px; } .shop-hero-meta span { min-height: 68px; padding-right: 8px; font-size: 7px; } .shop-hero-meta span:nth-child(2), .shop-hero-meta span:last-child { padding-left: 10px; } .shop-hero-meta b { font-size: 21px; } .shop-hero-art { min-height: 390px; border-left: 0; border-top: 1px solid rgba(33,18,14,.22); } .shop-hero-art img { right: 50%; bottom: -18%; height: 122%; transform: translateX(50%) rotate(-5deg); } .shop-hero-note { top: 18px; right: 16px; font-size: 7px; } .shop-catalog { padding: 78px 0 88px; } .shop-page .filter-row { margin-inline: -14px; padding-inline: 14px; } .shop-page .product-card, .shop-page .product-card:nth-child(1), .shop-page .product-card:nth-child(2), .shop-page .products-grid[data-count] .product-card, .shop-page .products-grid[data-count="7"] .product-card:nth-child(6), .shop-page .products-grid[data-count="7"] .product-card:nth-child(7) { grid-column: 1 / -1; } .shop-page .product-visual, .shop-page .product-card:nth-child(1) .product-visual, .shop-page .product-card:nth-child(2) .product-visual { min-height: 330px; } .shop-page .product-card-image, .shop-page .product-card:nth-child(-n+2) .product-card-image { height: 290px; } .shop-assurance { grid-template-columns: 1fr; margin-top: 52px; } .shop-assurance div { min-height: 100px; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--ink); } .shop-assurance div:last-child { border-bottom: 0; } .blog-hero-media, .wholesale-hero-media { min-height: 410px; border-left: 0; border-top: 1px solid rgba(247,237,207,.18); } .blog-hero-media::after, .wholesale-hero-media::after { background: linear-gradient(180deg, rgba(33,18,14,.35), transparent 30%); } .blog-index, .recipes-section, .b2b-types { padding: 78px 0 88px; } .article-grid { grid-template-columns: 1fr; } .article-card { grid-template-rows: 270px 1fr; border-right: 0; border-bottom: 1px solid var(--ink); } .article-card:last-child { border-bottom: 0; } .article-card-copy { min-height: 310px; padding: 24px 0; } .article-card h2 { font-size: 45px; } .recipe-grid { grid-template-columns: 1fr; } .recipe-card, .recipe-card:nth-child(2n), .recipe-card:last-child { grid-column: auto; min-height: 300px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--ink); } .recipe-card:last-child { border-bottom: 0; } .recipe-card h3 { font-size: 40px; } .blog-shop-cta { min-height: 0; grid-template-columns: 1fr; gap: 30px; padding: 72px 14px; } .blog-shop-cta h2 { font-size: 58px; } .b2b-grid { grid-template-columns: 1fr; } .b2b-card { min-height: 340px; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--ink); } .b2b-card:last-child { border-bottom: 0; } .b2b-card h3 { margin-top: 40px; font-size: 49px; } .b2b-contact { grid-template-columns: 1fr; min-height: 0; } .b2b-contact-copy, .b2b-contact-panel { padding: 76px 14px; } .b2b-contact-copy h2 { font-size: 62px; } .b2b-contact-panel > a:not(.button) { font-size: 32px; } } /* Homepage additions */ .featured-products { padding: 120px 0 132px; background: var(--cream); } .featured-heading { margin-bottom: 58px; } .featured-heading h2 em, .bundle-intro h2 em, .flavor-copy h2 em, .certification-heading h2 em, .inspiration-heading h2 em { color: var(--coral); font-style: normal; } .featured-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .featured-grid .product-card, .featured-grid .product-card:nth-child(1), .featured-grid .product-card:nth-child(2), .featured-grid .product-card:nth-child(3), .featured-grid .product-card:nth-child(4) { grid-column: span 3; } .featured-grid .product-visual, .featured-grid .product-card:nth-child(1) .product-visual, .featured-grid .product-card:nth-child(2) .product-visual { min-height: 330px; } .featured-grid .product-card-image, .featured-grid .product-card:nth-child(-n+2) .product-card-image { height: 250px; } .featured-grid .product-info { padding: 18px 18px 20px; } .featured-grid .product-card-title { font-size: clamp(26px, 2.35vw, 38px); } .featured-grid .product-card-desc { font-size: 11px; } .featured-grid .product-card-buy { grid-template-columns: 1fr; } .featured-grid .product-card-buy .button { width: 100%; } .section-action { display: flex; justify-content: center; margin-top: 42px; } .bundle-showcase { padding: 120px 0; background: var(--coral); color: var(--ink); } .bundle-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 5vw; align-items: center; } .bundle-intro h2 { margin: 0; font-family: var(--serif); font-size: clamp(58px, 6vw, 96px); font-weight: 400; line-height: 1.08; letter-spacing: -.05em; } .bundle-showcase .bundle-intro h2 em { color: var(--ink); } .bundle-showcase .bundle-intro .eyebrow { color: rgba(33,18,14,.78); } .bundle-intro > p:not(.eyebrow) { max-width: 390px; margin: 28px 0 26px; color: rgba(33,18,14,.72); font-size: 15px; line-height: 1.6; } .bundle-intro .text-link { display: inline-block; } .bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .bundle-card { position: relative; min-height: 580px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 18px; border: 1px solid rgba(33,18,14,.14); border-radius: 24px; background: var(--cream-soft); color: var(--ink); } .bundle-card-premium { background: var(--cream-soft); color: var(--ink); } .bundle-card > img { flex: 0 0 290px; width: calc(100% + 36px); max-width: none; height: 290px; margin: -18px -18px 18px; align-self: center; object-fit: contain; background: #fff; filter: none; } .bundle-card > div { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; } .bundle-card p { margin: 0 0 10px; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .bundle-card h3 { min-height: 2.1em; margin: 0; font-family: var(--serif); font-size: clamp(31px, 3.2vw, 50px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: normal; } .bundle-card b { display: block; margin-top: 22px; font-family: var(--serif); font-size: 28px; font-weight: 400; } .bundle-card del { margin-left: 7px; color: rgba(33,18,14,.5); font-family: var(--sans); font-size: 11px; } .bundle-card-premium del { color: rgba(33,18,14,.5); } .bundle-card .text-link { margin-top: auto; padding-top: 22px; font: inherit; font-size: 10px; font-weight: 700; } @media (max-width: 1200px) { .bundle-layout { grid-template-columns: 1fr; gap: 42px; } .bundle-intro { max-width: 560px; } .bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bundle-card h3 { font-size: clamp(31px, 3.6vw, 48px); } } .flavor-profile { position: relative; overflow: hidden; padding: 132px 5vw; background: var(--cream); color: var(--ink); } .flavor-profile::before { display: none; } .flavor-inner { position: relative; z-index: 1; max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(500px, 1.1fr); gap: clamp(48px, 7vw, 110px); align-items: center; } .flavor-copy { min-width: 0; } .flavor-copy h2 { max-width: 560px; margin: 0; font-family: var(--serif); font-size: clamp(52px, 5.3vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -.05em; } .flavor-copy > p:not(.eyebrow) { max-width: 410px; margin: 28px 0; color: var(--muted); font-size: 15px; line-height: 1.6; } .flavor-copy .text-link { color: var(--ink); } .flavor-slider { position: relative; min-height: 330px; display: grid; grid-template-columns: 1fr; align-items: center; padding: 38px 48px 52px; border: 1px solid rgba(33,18,14,.16); border-radius: 24px; background: rgba(255,255,255,.56); box-shadow: 0 18px 50px rgba(33,18,14,.08); } .flavor-panel { min-width: 0; } .flavor-panel h3 { margin: 0 0 17px; padding-bottom: 18px; border-bottom: 1px solid rgba(33,18,14,.2); text-align: left; font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -.035em; } .flavor-rows { display: grid; gap: 0; max-width: none; margin: 0; } .flavor-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 24px; align-items: center; min-height: 42px; border-bottom: 1px solid rgba(33,18,14,.14); } .flavor-row > b { font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; } .flavor-rating { display: flex; gap: 7px; align-items: center; } .flavor-rating i { width: 26px; height: 26px; display: grid; place-items: center; color: transparent; font-size: 0; font-style: normal; opacity: .28; } .flavor-rating i.is-filled { opacity: 1; } .flavor-rating img { width: 100%; height: 100%; object-fit: contain; } .flavor-rating i.is-filled img { filter: brightness(0) saturate(100%); } .flavor-arrow { display: none; } .flavor-dots { position: absolute; right: 34px; bottom: 20px; display: flex; gap: 8px; } .flavor-dot { width: 24px; height: 2px; padding: 0; border: 0; background: rgba(33,18,14,.24); cursor: pointer; } .flavor-dot.is-active { background: var(--ink); } .certifications { padding: 120px 0 132px; background: var(--cream-soft); } .certification-heading { margin-bottom: 55px; } .certification-heading h2 { font-size: clamp(56px, 6vw, 94px); } .certification-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; align-items: center; } .certification-rail figure { height: 112px; display: grid; place-items: center; margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; } .certification-rail img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .home-inspiration { padding: 120px 0 132px; background: var(--cream); } .inspiration-heading { margin-bottom: 58px; } .inspiration-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; } .inspiration-card { position: relative; min-height: 430px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; padding: 26px; border-radius: 24px; background: var(--ink); color: var(--cream); text-decoration: none; } .inspiration-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(33,18,14,.86)); } .inspiration-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .inspiration-card:nth-child(2) img { object-position: 65% center; } .inspiration-card:nth-child(3) img { object-position: center; filter: brightness(.82); } .inspiration-card:hover img { transform: scale(1.04); } .inspiration-card > span, .inspiration-card > h3, .inspiration-card > b { position: relative; z-index: 1; } .inspiration-card > span { color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .inspiration-card h3 { max-width: 360px; margin: 10px 0 20px; font-family: var(--serif); font-size: clamp(31px, 3vw, 47px); font-weight: 400; line-height: 1.08; } .inspiration-card b { font-size: 10px; } .home-newsletter { padding: 100px 5vw; background: var(--coral); color: var(--ink); } .newsletter-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr .8fr; gap: 9vw; align-items: end; } .home-newsletter .eyebrow, .home-newsletter h2 em { color: var(--cream); font-style: normal; } .home-newsletter h2 { margin: 0; font-family: var(--serif); font-size: clamp(58px, 6vw, 96px); font-weight: 400; line-height: 1.06; letter-spacing: -.05em; } .newsletter-copy > p { max-width: 480px; margin: 0 0 22px; color: rgba(33,18,14,.74); font-size: 15px; line-height: 1.6; } .newsletter-form { display: flex; max-width: 480px; gap: 8px; } .newsletter-form input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; } .newsletter-form input::placeholder { color: rgba(33,18,14,.58); } .newsletter-form .button { flex: 0 0 auto; } .newsletter-copy small { display: block; max-width: 460px; margin-top: 12px; color: rgba(33,18,14,.58); font-size: 9px; line-height: 1.5; } @media (max-width: 760px) { .featured-products, .certifications, .home-inspiration { padding: 78px 0 88px; } .featured-heading, .certification-heading, .inspiration-heading { margin-bottom: 38px; } .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .featured-grid .product-card, .featured-grid .product-card:nth-child(1), .featured-grid .product-card:nth-child(2), .featured-grid .product-card:nth-child(3), .featured-grid .product-card:nth-child(4) { grid-column: span 1; } .featured-grid .product-visual, .featured-grid .product-card:nth-child(1) .product-visual, .featured-grid .product-card:nth-child(2) .product-visual { min-height: 0; } .bundle-showcase { padding: 78px 0 88px; } .bundle-layout { grid-template-columns: 1fr; gap: 36px; } .bundle-grid { display: flex; gap: 10px; margin-inline: -14px; padding: 0 14px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; overscroll-behavior-inline: contain; -ms-overflow-style: none; } .bundle-card { flex: 0 0 calc(100vw - 54px); min-height: 430px; padding: 16px; border-radius: 18px; scroll-snap-align: start; } .bundle-card > img { flex-basis: 240px; width: calc(100% + 32px); max-width: none; height: 240px; margin: -16px -16px 16px; } .bundle-card h3 { font-size: 31px; } .bundle-card b { margin-top: 14px; font-size: 20px; } .bundle-card del { display: block; margin: 2px 0 0; } .flavor-profile { padding: 76px 14px 88px; } .flavor-inner { grid-template-columns: 1fr; gap: 44px; } .flavor-copy h2 { max-width: 360px; font-size: 58px; } .flavor-copy > p:not(.eyebrow) { margin: 20px 0; font-size: 13px; } .flavor-slider { min-height: 290px; grid-template-columns: 1fr; padding: 28px 22px 44px; border-radius: 18px; } .flavor-panel h3 { margin-bottom: 14px; padding-bottom: 14px; font-size: 28px; } .flavor-rows { gap: 11px; } .flavor-row { min-height: 36px; gap: 10px; } .flavor-row > b { font-size: 15px; } .flavor-rating { gap: 4px; } .flavor-rating i { width: 23px; height: 23px; } .flavor-dots { right: 18px; bottom: 18px; } .certification-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .certification-rail::-webkit-scrollbar { display: none; } .certification-rail figure { flex: 0 0 112px; height: 96px; } .inspiration-grid { display: flex; gap: 10px; margin-inline: -14px; padding: 0 14px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .inspiration-grid::-webkit-scrollbar { display: none; } .inspiration-card, .inspiration-card-large { flex: 0 0 calc(100vw - 54px); min-height: 360px; scroll-snap-align: start; } .home-newsletter { padding: 76px 14px; } .newsletter-inner { grid-template-columns: 1fr; gap: 34px; } .home-newsletter h2 { font-size: 58px; } .newsletter-form { display: grid; } .newsletter-form .button { width: 100%; } } /* Featured products: quiet, editorial product grid */ .featured-grid .product-card, .featured-grid .product-card:nth-child(1), .featured-grid .product-card:nth-child(2), .featured-grid .product-card:nth-child(3), .featured-grid .product-card:nth-child(4) { display: flex; flex-direction: column; grid-column: span 3; border: 1px solid rgba(33,18,14,.14); border-radius: 22px; background: #fff; box-shadow: 0 14px 30px rgba(51,24,15,.055); } .featured-grid .product-card:hover { box-shadow: 0 22px 42px rgba(51,24,15,.11); } .featured-grid .product-visual, .featured-grid .product-card:nth-child(1) .product-visual, .featured-grid .product-card:nth-child(2) .product-visual { flex: 0 0 330px; min-height: 330px; background: #fff; border-bottom: 1px solid rgba(33,18,14,.11); } .featured-grid .product-visual::after { display: none; } .featured-grid .product-card-image, .featured-grid .product-card:nth-child(-n+2) .product-card-image { width: 86%; height: 238px; filter: drop-shadow(0 18px 16px rgba(45,19,12,.15)); } .featured-grid .product-info { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 21px; border-top: 0; background: #fff; } .featured-grid .product-card-title { min-height: 2.26em; font-size: clamp(25px, 2.05vw, 34px); line-height: 1.13; } .featured-grid .product-card-desc { min-height: 3.1em; margin-top: 12px; } .featured-grid .product-price { margin-top: 15px; } .featured-grid .product-card-buy { margin-top: auto; padding-top: 17px; } @media (max-width: 760px) { .featured-grid .product-card, .featured-grid .product-card:nth-child(1), .featured-grid .product-card:nth-child(2), .featured-grid .product-card:nth-child(3), .featured-grid .product-card:nth-child(4) { grid-column: span 1; } .featured-grid .product-visual, .featured-grid .product-card:nth-child(1) .product-visual, .featured-grid .product-card:nth-child(2) .product-visual { flex-basis: 170px; min-height: 170px; } .featured-grid .product-card-image, .featured-grid .product-card:nth-child(-n+2) .product-card-image { height: 155px; } } /* Homepage featured cards: catalogue treatment, no hover choreography */ .featured-grid .featured-card { grid-column: span 3; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(33,18,14,.14); border-radius: 22px; background: #fff; } .featured-grid .featured-card:hover { transform: none; box-shadow: 0 14px 30px rgba(51,24,15,.055); } .featured-card-media { display: block; flex: 0 0 360px; overflow: hidden; border-bottom: 1px solid rgba(33,18,14,.11); background: #fff; } .featured-card-image { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; } .featured-card-copy { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 22px; background: #fff; } .featured-card-kicker { margin: 0 0 12px; color: var(--coral-deep); font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; } .featured-card h3 { min-height: 2.26em; margin: 0; font-family: var(--serif); font-size: clamp(27px, 2.2vw, 36px); font-weight: 400; letter-spacing: -.035em; line-height: 1.13; } .featured-card h3 a { color: inherit; text-decoration: none; } .featured-card h3 a:hover { color: var(--coral-deep); } .featured-card-price { margin: 18px 0 0; font-family: var(--serif); font-size: 30px; line-height: 1; } .featured-card-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding-top: 26px; color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; } .featured-card-link span { font-size: 15px; } .featured-card-link:hover { color: var(--coral-deep); } /* React Bits Staggered Menu — direct vanilla port, mobile only */ @media (max-width: 760px) { body:has(#mobile-menu-overlay.open .staggered-menu-panel) .site-header { z-index: 260; color: var(--ink); } body:has(#mobile-menu-overlay.open .staggered-menu-panel) .site-header::before { opacity: 0; } body:has(#mobile-menu-overlay.open .staggered-menu-panel) .site-header .brand img { filter: none; } .menu-overlay:has(.staggered-menu-panel) { display: block; padding: 0; overflow: hidden; background: transparent; color: var(--ink); transition: none; } .menu-button.sm-toggle { position: relative; display: inline-flex; width: auto; min-width: 96px; height: 44px; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 10px; border: 0; background: transparent; color: inherit; font: 600 12px/1 var(--sans); letter-spacing: .01em; text-transform: none; overflow: visible; cursor: pointer; } .sm-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; } .sm-toggle-textWrap { position: relative; display: inline-block; width: 48px; min-width: 48px; height: 1em; overflow: hidden; white-space: nowrap; text-align: right; } .sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; } .sm-toggle-line { display: block; height: 1em; line-height: 1; } .sm-icon { position: relative; width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; } .sm-icon-line { position: absolute; left: 50%; top: 50%; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); will-change: transform; } .sm-icon-line-v { transform: translate(-50%, -50%) rotate(90deg); } .staggered-menu-panel { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--cream-soft); display: flex; flex-direction: column; padding: 6em 2em 2em; overflow-y: auto; z-index: 10; pointer-events: auto; opacity: 0; will-change: transform; backface-visibility: hidden; } .sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; pointer-events: none; z-index: 5; opacity: 0; } .sm-prelayer { position: absolute; top: 0; right: 0; width: 100%; height: 100%; transform: translateX(0); opacity: 0; will-change: transform; backface-visibility: hidden; } .sm-prelayer:nth-child(1) { background: var(--oxblood); } .sm-prelayer:nth-child(2) { background: var(--coral); } .sm-panel-inner { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; } .sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; } .sm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .sm-panel-item { position: relative; display: block; width: 100%; padding-right: 1.4em; color: var(--ink); font-family: var(--sans); font-size: clamp(2rem, 9.6vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; } .sm-panel-itemLabel { display: inline-block; max-width: calc(100% - 42px); white-space: nowrap; will-change: transform; transform-origin: 50% 100%; } .sm-panel-item:hover, .sm-panel-item:focus-visible { color: var(--coral-deep); } .sm-panel-list[data-numbering] { counter-reset: smItem; } .sm-panel-list[data-numbering] .sm-panel-item::after { counter-increment: smItem; content: counter(smItem, decimal-leading-zero); position: absolute; top: .1em; right: 0; color: var(--coral-deep); font-size: 18px; font-weight: 400; letter-spacing: 0; pointer-events: none; user-select: none; opacity: var(--sm-num-opacity, 0); } .sm-socials { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: .75rem; } .sm-socials-title { margin: 0; color: var(--coral-deep); font-size: 1rem; font-weight: 500; } .sm-socials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; } .sm-socials-link { position: relative; display: inline-block; padding: 2px 0; color: var(--ink); font-size: 1.2rem; font-weight: 500; text-decoration: none; opacity: 1; transition: color .3s ease, opacity .3s ease; } .sm-socials-list:hover .sm-socials-link { opacity: .35; } .sm-socials-list:hover .sm-socials-link:hover { opacity: 1; } .sm-socials-link:hover { color: var(--coral-deep); } .sm-socials-link:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; } @media (max-width: 360px) { .staggered-menu-panel { padding-inline: 1.5em; } } } @media (max-width: 760px) { .featured-grid .featured-card { grid-column: span 1; } .featured-card-media { flex-basis: 170px; } .featured-card-copy { padding: 14px 13px 15px; } .featured-card-kicker { margin-bottom: 8px; font-size: 8px; } .featured-card h3 { min-height: 2.45em; font-size: 21px; } .featured-card-price { margin-top: 12px; font-size: 24px; } .featured-card-link { gap: 6px; padding-top: 17px; font-size: 10px; } } /* Deliberately unfinished routes */ .placeholder-route .placeholder-main > *:not(.placeholder-page) { display: none; } .placeholder-page { min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; padding: calc(var(--header-h) + 70px) 5vw 100px; background: #e9e5dc; color: var(--ink); } .placeholder-inner { position: relative; width: min(940px, 100%); min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 68px); border: 1px dashed rgba(33,18,14,.4); background: rgba(255,255,255,.22); } .placeholder-inner::before, .placeholder-inner::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--coral); border-style: solid; } .placeholder-inner::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .placeholder-inner::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; } .placeholder-topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(33,18,14,.22); color: rgba(33,18,14,.58); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; } .placeholder-kicker { margin: auto 0 18px; color: var(--coral-deep); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .placeholder-page h1 { max-width: 760px; margin: 0; font-family: var(--serif); font-size: clamp(58px, 8vw, 118px); font-weight: 400; letter-spacing: -.06em; line-height: .95; overflow-wrap: anywhere; } .placeholder-page h1 em { color: var(--coral); font-style: normal; } .placeholder-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 74px; padding-top: 22px; border-top: 1px solid rgba(33,18,14,.22); } .placeholder-bottom p { max-width: 420px; margin: 0; color: rgba(33,18,14,.65); font-size: 14px; line-height: 1.55; } .placeholder-status { color: rgba(33,18,14,.58); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: .08em; white-space: nowrap; } .placeholder-measure { position: absolute; right: clamp(28px, 5vw, 68px); bottom: 28px; display: flex; gap: 7px; opacity: .65; } .placeholder-measure span { display: block; width: 34px; height: 4px; background: var(--ink); } .placeholder-measure span:nth-child(2) { width: 12px; background: var(--coral); } .placeholder-measure span:nth-child(3) { width: 22px; background: rgba(33,18,14,.3); } @media (max-width: 760px) { .placeholder-page { min-height: calc(100svh - var(--header-h)); padding: calc(var(--header-h) + 30px) 14px 64px; } .placeholder-inner { min-height: 510px; padding: 24px 20px 32px; } .placeholder-topline { font-size: 8px; } .placeholder-page h1 { font-size: clamp(52px, 15vw, 72px); } .placeholder-bottom { display: block; margin-top: 52px; } .placeholder-status { display: block; margin-top: 20px; font-size: 9px; } .placeholder-measure { right: 20px; bottom: 20px; } } /* HOMEPAGE DENSITY PASS 2026-08-25 — remove this whole block to roll back. */ @media (min-width: 761px) { .home-page .format-guide { padding-block: 82px 92px; } .home-page .guide-heading { margin-bottom: 42px; } .home-page .guide-card { min-height: 620px; } .home-page .featured-products { padding-block: 88px 96px; } .home-page .featured-heading { margin-bottom: 44px; } .home-page .featured-card-media { flex-basis: 310px; } .home-page .featured-card-copy { padding: 18px 18px 20px; } .home-page .featured-card-link { padding-top: 20px; } .home-page .section-action { margin-top: 34px; } .home-page .proof { padding-block: 78px 88px; } .home-page .proof-heading { grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr); gap: clamp(44px, 5vw, 76px); align-items: start; margin-bottom: 38px; } .home-page .proof-heading h2 { max-width: 590px; font-size: clamp(58px, 5.25vw, 80px); line-height: 1.03; } .home-page .proof-intro { max-width: 430px; } .home-page .proof-intro > p { font-size: 14px; line-height: 1.5; } .home-page .proof-reviews { margin-top: 20px; } .home-page .proof-review { min-height: 88px; gap: 12px; padding-block: 14px; } .home-page .proof-review + .proof-review { padding-left: 16px; } .home-page .proof-review b { font-size: clamp(36px, 3.2vw, 48px); } .home-page .proof-card { min-height: 325px; padding: 24px; } } @media (max-width: 760px) { .home-page .featured-products { padding-block: 64px 72px; } .home-page .featured-heading { margin-bottom: 30px; } .home-page .featured-card-media { flex-basis: 148px; } .home-page .featured-card-copy { padding: 12px 12px 14px; } .home-page .featured-card-link { padding-top: 14px; } .home-page .section-action { margin-top: 30px; } .home-page .origin-image { min-height: 380px; } .home-page .origin-copy { padding: 64px 14px 72px; } .home-page .origin-copy > p:not(.eyebrow) { margin-top: 20px; } .home-page .origin-metrics { margin-block: 28px; } .home-page .origin-metrics div, .home-page .origin-metrics div:last-child { min-height: 68px; } .home-page .proof { padding-block: 54px 62px; } .home-page .proof-heading { gap: 18px; margin-bottom: 24px; } .home-page .proof-heading h2 { max-width: 300px; font-size: clamp(47px, 13vw, 52px); line-height: 1.03; } .home-page .proof-intro { max-width: 320px; } .home-page .proof-intro > p { max-width: 305px; line-height: 1.48; } .home-page .proof-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; } .home-page .proof-review, .home-page .proof-review + .proof-review { min-height: 76px; grid-template-columns: 1fr; align-content: center; gap: 6px; padding: 11px 10px 11px 0; border-top: 0; } .home-page .proof-review + .proof-review { padding-left: 13px; border-left: 1px solid rgba(33,18,14,.24); } .home-page .proof-review b { font-size: 34px; } .home-page .proof-review span { gap: 2px; } .home-page .proof-grid { display: flex; gap: 10px; margin-inline: -14px; padding: 0 14px 8px; overflow-x: auto; border-top: 0; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .home-page .proof-grid::-webkit-scrollbar { display: none; } .home-page .proof-card, .home-page .proof-card:last-child { flex: 0 0 calc(100vw - 54px); min-height: 286px; padding: 20px; border: 1px solid rgba(33,18,14,.34); border-radius: 18px; background: rgba(255,249,233,.28); scroll-snap-align: start; } .home-page .proof-value { margin-top: 25px; font-size: 56px; } .home-page .proof-card h3 { margin-top: 15px; font-size: 28px; } .home-page .proof-card-copy > p { margin-top: 13px; } .home-page .proof-source { margin-top: 20px; } } /* END HOMEPAGE DENSITY PASS 2026-08-25 */ /* LEGACY BOTANICAL BACKGROUNDS 2026-08-26 — remove this block to roll back. */ .home-page .format-guide, .home-page .certifications { position: relative; isolation: isolate; overflow: hidden; } .home-page .format-guide::before, .home-page .certifications::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: url("../assets/bg/legacy-vanilla-floral.jpg"); background-repeat: no-repeat; mix-blend-mode: multiply; } .home-page .format-guide::before { background-position: center top; background-size: 100% auto; background-repeat: repeat-y; opacity: .52; } .home-page .certifications::before { background-position: center; background-size: cover; opacity: .34; } .home-page .format-guide > .section-shell { position: relative; z-index: 1; } .home-page .certifications > .section-shell { position: relative; z-index: auto; } .home-page .certifications .certification-rail img { mix-blend-mode: multiply; } @media (max-width: 760px) { .home-page .format-guide::before { background-position: 46% top; background-size: auto 620px; background-repeat: repeat-y; opacity: .46; } .home-page .certifications::before { background-position: 54% center; opacity: .3; } } /* END LEGACY BOTANICAL BACKGROUNDS 2026-08-26 */ /* Cross-sell v kosiku. Kosik je na kazde strance, proto styly patri sem a ne do vrstvy nactene jen v katalogu. */ .cart-crosssell { margin: 26px 0 4px; padding-top: 20px; border-top: 1px solid var(--line); } .cart-crosssell h3 { margin: 0 0 14px; font-family: var(--serif); font-size: 21px; font-weight: 400; } .cart-crosssell ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .cart-crosssell li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 38px; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .58); transition: border-color .2s, background-color .2s; } .cart-crosssell li:hover { border-color: rgba(33, 18, 14, .34); background: #fff; } .cart-crosssell-media { display: block; } .cart-crosssell-media img { width: 54px; height: 54px; object-fit: contain; } .cart-crosssell-copy { min-width: 0; } .cart-crosssell-copy a { display: block; overflow: hidden; color: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .cart-crosssell-copy a:hover { color: var(--coral-deep); } .cart-crosssell-copy span { color: var(--muted); font-size: 11px; } .cart-crosssell-add { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; } .cart-crosssell-add:hover { background: var(--ink); color: var(--cream-soft); transform: scale(1.06); } .cart-crosssell-add:disabled { opacity: .4; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .cart-crosssell li, .cart-crosssell-add { transition: none; } .cart-crosssell-add:hover { transform: none; } } /* Rychly nahled produktu. Modal je soucasti kazde stranky s katalogem, proto styly patri do globalni vrstvy. */ .modal-gallery-img { background: #fff; border: 1px solid var(--line); padding: 18px; cursor: default; } .modal-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .modal-thumbs button { width: 62px; height: 62px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, transform .2s; } .modal-thumbs button:hover { border-color: var(--ink); transform: translateY(-2px); } .modal-thumbs button[aria-pressed="true"] { border-color: var(--coral-deep); } .modal-thumbs img { width: 100%; height: 100%; object-fit: contain; } .modal-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .modal-dialog h2#modal-title { margin: 0 0 6px; font-size: 40px !important; } .modal-tabs { gap: 6px; margin-top: 4px; border-bottom: 1px solid var(--line); } .modal-tab-btn { min-height: 40px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 11px; letter-spacing: .04em; transition: color .2s, border-color .2s; } .modal-tab-btn:hover { color: var(--ink); } .modal-tab-btn.active { border-color: var(--coral-deep); color: var(--ink); } .modal-tab-pane { padding-top: 14px; } @media (max-width: 860px) { .modal-dialog h2#modal-title { font-size: 30px !important; } .modal-thumbs button { width: 54px; height: 54px; } } @media (prefers-reduced-motion: reduce) { .modal-thumbs button, .modal-tab-btn { transition: none; } .modal-thumbs button:hover { transform: none; } } /* Sekundarni akce v kosiku: zavrit panel a pokracovat v nakupu. */ .cart-keep-shopping { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cart-keep-shopping:hover { color: var(--ink); } /* Uzaverova cast kosiku je flex potomek panelu, takze zustava videt bez dalsich triku; doporuceni se vkladaji do rolovaciho seznamu. */ .cart-panel .cart-checkout-area { flex: 0 0 auto; } /* Cena za kus na radku kosiku. */ .cart-item-unit { color: rgba(35,21,13,.55); } /* Nabidka vicekusoveho baleni: uspora je spocitana z cen, ktere v zivem rezimu prichazeji z Woo, takze odpovida tomu, co zakaznik zaplati. */ .cart-pack-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 11px; border: 1px solid var(--coral-deep); border-radius: 999px; background: transparent; color: var(--coral-deep); font-family: var(--sans); font-size: 11px; cursor: pointer; transition: background-color .2s, color .2s; } .cart-pack-hint b { font-weight: 700; } .cart-pack-hint:hover { background: var(--coral-deep); color: var(--cream-soft); } /* Nedavno prohlizene. */ .cart-recent { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); } .cart-recent h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 19px; font-weight: 400; } .cart-recent ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .cart-recent a { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; } .cart-recent img { width: 42px; height: 42px; object-fit: contain; } .cart-recent span { display: block; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .cart-recent small { display: block; color: var(--muted); font-size: 10px; } .cart-recent a:hover span { color: var(--coral-deep); } @media (prefers-reduced-motion: reduce) { .cart-pack-hint { transition: none; } }