/* ========================================================================== Cascara – Landingpage Colours: the logo's terracotta and cream (measured from the artwork), a cream paper for reading and a deep brown for ink. Nothing else. ========================================================================== */ :root { --grain: url(data:image/jpeg;base64,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); --terra: #B4592A; --terra-deep: #9C4B23; --terra-ink: #8E401C; /* terracotta dark enough for small text on the cream paper (5:1) */ --cream: #D9BF9C; /* the logo */ --milk: #FFFDF9; /* text on terracotta: near white, 4.7:1 (AA) at any size */ --cream-light: #EBD7BA; /* the logo's cream, lifted to 3:1 on terracotta for large type */ --paper: #E6D3B7; /* cream paper: the logo's cream, only a little lighter */ --night: #2B1810; /* espresso, for the bar menu */ --ink: #3A2116; --ink-2: rgba(58, 33, 22, .76); --ink-3: rgba(58, 33, 22, .72); /* small labels stay readable on the cream (4.5:1) */ --line: rgba(58, 33, 22, .16); --line-light: rgba(255, 247, 238, .22); --serif: "Newsreader", "Iowan Old Style", Georgia, serif; --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; --brand: "DynaPuff", "Jost", system-ui, sans-serif; /* the name and the playful accents */ --gutter: clamp(22px, 4.4vw, 72px); --max: 1360px; --nav-h: 76px; --radius: 6px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --section: clamp(112px, 14vw, 210px); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } /* A link to a section lands a little into its top padding, so the strip Safari shows above the page (behind the clock, while its toolbar is out) is that section too, not the end of the one before. */ main > section, footer { scroll-margin-top: -56px; } #top { scroll-margin-top: 0; } /* the logo links back to the very top */ @media (prefers-reduced-motion: no-preference) { html.is-loaded { scroll-behavior: smooth; } } /* main.js keeps the page colour in step with the section at the top of the screen, which Safari paints behind the clock while its toolbar is out; at either end of the page it is terracotta */ html { background: var(--terra); } body { margin: 0; color: var(--ink); font: 300 1.125rem/1.65 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } main { display: block; background: var(--paper); } .is-legal { background: var(--paper); } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } img { height: auto; } button, input { font: inherit; color: inherit; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } .button--solid:focus-visible, .product__size:focus-visible, .qty button:focus-visible { outline-color: var(--ink); outline-offset: 3px; } main :is(a, button, input, summary, textarea) { scroll-margin-top: 120px; scroll-margin-bottom: 90px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .nowrap { white-space: nowrap; } .skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--milk); border-radius: 4px; transform: translateY(-160%); transition: transform .3s var(--ease), opacity .2s; /* invisible until focused: a trackpad's rubber-band at the top would otherwise pull the dark pill into view */ opacity: 0; pointer-events: none; } .skip:focus { transform: none; opacity: 1; pointer-events: auto; } /* ---------- type ---------- */ .display { font-family: var(--brand); font-weight: 600; font-size: clamp(2.2rem, 4.1vw, 4rem); line-height: 1.04; letter-spacing: -.006em; } /* DynaPuff has no italic: the stressed word takes the terracotta instead */ .display em { font-style: normal; color: var(--terra); } .eyebrow { font: 400 .75rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--terra-ink); } .button { display: inline-flex; align-items: center; gap: 12px; font: 400 .9375rem/1 var(--sans); letter-spacing: .04em; padding: 16px 24px 15px; border-radius: 999px; border: 1px solid currentColor; transition: background-color .4s var(--ease), color .4s var(--ease); } /* ---------- reveal ---------- */ /* Safari can run transitions while a page is still loading (links flash blue, buttons fade): none until it has */ html:not(.is-loaded) *, html:not(.is-loaded) *::before, html:not(.is-loaded) *::after { transition: none !important; } [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- navigation ---------- */ .nav { position: absolute; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--milk); transition: color .35s var(--ease); /* No bar: a veil in the colour of whatever lies beneath (main.js blends it while sections pass). Safari reads the background colour for its status bar, so the colour is real and the mask makes it fade out towards the lower edge. */ background-color: var(--nav-main, #B4592A); background-image: linear-gradient(var(--nav-c, #B4592A) var(--nav-split, 100%), var(--nav-c2, #B4592A) var(--nav-split, 100%)); padding-bottom: 28px; -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 44px), transparent 100%); pointer-events: none; /* the fading veil below the links lets taps through */ } /* With a mouse the bar is pinned. On touch screens it sits at the top of the page and scrolls away with it, so the page runs to the very top of the screen, under the clock (main.js says why it never comes back pinned). */ .nav.is-fading { background-image: linear-gradient(var(--nav-c), var(--nav-c2)); } .nav.is-pinned { position: fixed; padding-bottom: 12px; -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 22px), transparent 100%); } .nav[data-ink="dark"] { color: var(--ink); } .nav[data-ink="dark"] .mark__ink { stroke: var(--terra); } .nav__inner { pointer-events: auto; height: var(--nav-h); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav__links { display: flex; gap: clamp(20px, 2.6vw, 40px); font-size: .9375rem; letter-spacing: .03em; } .nav__links a { opacity: .86; transition: opacity .3s; } .nav__links a:hover { opacity: 1; } .nav__join { display: inline-flex; align-items: center; gap: 8px; } .nav__join::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); } .nav__join[aria-current] { opacity: 1 !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .nav__mark { justify-self: center; display: block; padding: 6px; } .mark { width: 34px; height: auto; overflow: visible; } .mark__ink { fill: none; stroke: var(--cream); stroke-width: 84; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.8s var(--ease-io) .2s, stroke .35s var(--ease); } .is-loaded .mark__ink { stroke-dashoffset: 0; } .nav__end { justify-self: end; display: flex; align-items: center; gap: 8px; } .nav__cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 22px; border-radius: 999px; background: var(--terra); color: var(--milk); font: 400 .9375rem/1 var(--sans); letter-spacing: .03em; box-shadow: inset 0 1px 0 rgba(255, 247, 238, .22), 0 8px 18px -12px rgba(142, 64, 28, .8); transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .nav__cta:hover { background: var(--terra-deep); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 247, 238, .22), 0 12px 22px -12px rgba(142, 64, 28, .9); } .nav__menu { display: none; } /* ---------- the menu on phones: a sheet that floats in from the top, dressed like our label ---------- */ /* it keeps 8px clear of the screen's edges, like everything that floats here (iOS would freeze its toolbar). As on the label: the espresso head, the rust dripping from it over the chapters, the cream foot beneath its own drip, and there a bottle of the Original leaning in from the corner. */ html.has-menu, html.has-menu body { overflow: hidden; } .menu { --m-esp: #2D2019; --m-rust: #A1552F; --m-cream: #D3C09B; --m-ink: #F6E9D4; inset: 8px 8px auto; margin: 0; padding: 0; border: 0; width: auto; max-width: none; max-height: calc(100dvh - 16px); border-radius: 26px; background: var(--m-rust); color: var(--m-ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 60px -24px rgba(43, 24, 16, .6); } .menu::backdrop { background: rgba(43, 24, 16, .42); } .menu[open] { animation: menu-in .42s var(--ease); } @keyframes menu-in { from { transform: translate3d(0, -18px, 0); opacity: 0; } } .menu__inner { position: relative; outline: none; } /* it takes the focus on opening, so no button wears a ring */ .menu__head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 6px 14px 0 20px; background: var(--m-esp); } .menu__home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 1.5rem/1 var(--brand); color: var(--m-cream); } .menu__logo { width: 30px; height: auto; fill: var(--m-cream); } .menu__close { position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(211, 192, 155, .34); border-radius: 50%; background: none; cursor: pointer; } .menu__close i::before, .menu__close i::after { content: ""; position: absolute; left: 13px; top: 21px; width: 17px; height: 1.6px; border-radius: 2px; background: var(--m-cream); transform: rotate(45deg); } .menu__close i::after { transform: rotate(-45deg); } .menu__drip { display: block; width: 100%; height: 34px; margin-top: -1px; fill: var(--m-esp); } .menu__list { padding: 2px 22px 6px; } .menu__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 2px 10px; border-bottom: 1px solid rgba(255, 253, 249, .16); } .menu__list li:last-child a { border-bottom: 0; } .menu__list span { font: 600 1.75rem/1 var(--brand); color: var(--m-ink); } .menu__list small { font-size: .8125rem; line-height: 1.3; color: var(--milk); opacity: .9; text-align: right; } .menu__join small { padding: 6px 10px 5px; border-radius: 999px; background: rgba(43, 32, 25, .28); opacity: 1; } .menu__drip--low { height: 40px; margin-top: 0; fill: var(--m-rust); background: var(--m-cream); } .menu__foot { position: relative; min-height: 150px; padding: 0 22px 20px 156px; background: var(--m-cream); color: var(--ink); overflow: hidden; border-radius: 0 0 26px 26px; } .menu__reach { display: grid; justify-items: end; align-content: end; gap: 2px; min-height: 130px; } .menu__reach .socials { margin-right: -10px; } .menu__mail { font-size: .9375rem; text-decoration: underline; text-decoration-color: rgba(58, 33, 22, .3); text-underline-offset: 5px; } /* our four bottles, standing on the foot like on a shelf: the two tall ones, the two flasks in front (true sizes) */ .menu__shelf { position: absolute; left: 20px; bottom: 20px; width: 112px; height: 132px; pointer-events: none; } .menu__b { position: absolute; bottom: 0; width: auto; transform-origin: 50% 100%; } .menu__b--1 { left: 6px; height: 128px; } .menu__b--2 { left: 52px; height: 128px; } .menu__b--3 { left: 18px; bottom: -7px; height: 79px; } .menu__b--4 { left: 62px; bottom: -7px; height: 79px; } /* their shadow on the shelf, painted (no filter: Safari would draw a pale box round a filtered picture) */ .menu__floor { position: absolute; left: -10px; right: -16px; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 33, 22, .3), rgba(58, 33, 22, 0)); } .menu[open] .menu__b { animation: stand-up .8s var(--ease) both; } .menu[open] .menu__b--1 { animation-delay: .1s; } .menu[open] .menu__b--2 { animation-delay: .2s; } .menu[open] .menu__b--3 { animation-delay: .32s; } .menu[open] .menu__b--4 { animation-delay: .42s; } @keyframes stand-up { 0% { transform: translate3d(0, 34px, 0) rotate(-6deg); opacity: 0; } 70% { transform: translate3d(0, -3px, 0) rotate(1deg); opacity: 1; } 100% { transform: none; } } /* on short phones the sheet tightens, so its foot (and the e-mail address) stays in view */ @media (max-height: 700px) { .menu__head { height: 60px; } .menu__drip { height: 32px; } .menu__list a { min-height: 46px; padding: 10px 2px 8px; } .menu__list span { font-size: 1.6rem; } .menu__drip--low { height: 36px; } .menu__foot { min-height: 124px; padding-bottom: 14px; padding-left: 128px; } .menu__reach { min-height: 110px; } .menu__shelf { transform: scale(.8); transform-origin: 0 100%; bottom: 14px; } } /* ---------- hero: the cherry in 3D ---------- */ /* One long pinned stage: the canvas (hero3d.js) tells the story of the fruit while the words come and go beside it. The scene is painted in the paper colour, so the stage and the page are one surface. */ .hero { position: relative; height: 430svh; background: rgb(var(--top)); } .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; background: var(--paper); } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease) .1s; } .hero.is-ready .hero__canvas { opacity: 1; } .hero.is-flat .hero__canvas, .hero__foot { display: none; } @media (pointer: coarse) { .hero:not(.is-flat) .hero__foot { display: block; } } .hero__copy, .hero__beat, .hero__end { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); top: 50%; width: min(40vw, 560px); transform: translate3d(0, calc(-50% + (1 - var(--in, 1)) * 18px), 0); } .hero__beat, .hero__end { opacity: 0; visibility: hidden; } .hero__eyebrow { color: var(--terra-ink); } .hero__brand { margin-top: 18px; font: 600 clamp(4.5rem, 9.4vw, 9rem)/.92 var(--brand); letter-spacing: -.012em; color: var(--terra); } .hero__claim { margin-top: 20px; font: 300 italic clamp(1.5rem, 2.25vw, 2.125rem)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); } .hero__lede { margin-top: 22px; max-width: 26em; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.6; color: var(--ink-2); } .hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .button--solid { background: var(--terra); border-color: var(--terra); color: var(--milk); } .button--solid:hover { background: var(--terra-deep); border-color: var(--terra-deep); } .hero__more { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; letter-spacing: .03em; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; transition: color .3s, text-decoration-color .3s; } .hero__more:hover { color: var(--terra-ink); text-decoration-color: currentColor; } /* arrival: the words rise in once the type is there */ .hero__copy > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); } .hero__copy > :nth-child(2) { transition-delay: .12s; } .hero__copy > :nth-child(3) { transition-delay: .24s; } .hero__copy > :nth-child(4) { transition-delay: .36s; } .hero__copy > :nth-child(5) { transition-delay: .48s; } .is-loaded .hero__copy > * { opacity: 1; transform: none; } /* the story's words */ .hero__beat { width: min(38vw, 560px); font: 500 clamp(2.25rem, 3.5vw, 3.6rem)/1.08 var(--brand); letter-spacing: -.006em; color: var(--ink); text-wrap: balance; } .hero__beat em { font-style: normal; color: var(--terra); } /* while the fruit lies open across the screen, its sentence stands above it, in the middle (on phones beneath it) */ .hero__beat--apart { left: 50%; top: calc(var(--nav-h) + 26px); width: min(80vw, 1040px); text-align: center; transform: translate3d(-50%, calc((1 - var(--in, 1)) * 18px), 0); } .hero__end-brand { font: 600 clamp(3.25rem, 5.6vw, 5.5rem)/.92 var(--brand); letter-spacing: -.012em; color: var(--terra); } .hero__end-text { margin-top: 24px; max-width: 25em; color: var(--ink-2); line-height: 1.6; text-wrap: balance; } /* the names of the layers on the opened fruit: a dot on the layer, a hairline, the name */ .hero__parts { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .hero__part { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; opacity: 0; will-change: transform, opacity; } .hero__part::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 3px rgba(239, 226, 203, .75); } .hero__part::after { content: ""; position: absolute; left: 0; width: 1px; height: 46px; background: var(--ink-3); } .hero__part b { position: absolute; left: 0; transform: translateX(-50%); font: 500 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* callouts like a technical drawing: alternately above and below the layer they name */ .hero__part--up::after { bottom: 9px; } .hero__part--up b { bottom: 64px; } .hero__part--down::after { top: 9px; } .hero__part--down b { top: 64px; } /* under the cherry, where the eye already is (page.js places it): the story goes on below */ /* the cue to scroll: a button in the outline of one of our bottles, lying down; inside, a little syrup sways and a drop keeps falling, the way the page goes */ .hero__scroll { position: absolute; z-index: 4; left: 0; top: 0; width: 200px; height: 50px; margin: 0; pointer-events: none; transform: translate3d(var(--x, 50vw), var(--y, 80svh), 0) translateX(-50%); opacity: 0; visibility: hidden; will-change: transform, opacity; } .hero__scroll.is-off, .hero__scroll.is-off * { animation-play-state: paused; } /* the cue at the end runs only while it shows and the opening is on screen (drawn animations would repaint the page) */ .hero__scroll--end:not(.is-on), .hero__scroll--end:not(.is-on) *, .hero.is-away .hero__scroll, .hero.is-away .hero__scroll * { animation-play-state: paused; } .cue { position: absolute; inset: 0; animation: cue-bob 3.4s var(--ease-io) infinite alternate; } .cue__bottle { display: block; width: 100%; height: 100%; overflow: visible; } .cue__glass { fill: var(--cream-light); } .cue__edge { fill: none; stroke: rgba(58, 33, 22, .34); stroke-width: 1.3; } .cue__syrup { fill: var(--terra); fill-opacity: .16; animation: cue-wave 3.2s linear infinite; } .cue__track { stroke: rgba(58, 33, 22, .2); stroke-width: 1.5; stroke-linecap: round; } .cue__drop { fill: var(--terra); transform-box: fill-box; transform-origin: 50% 50%; animation: cue-drop 2.2s var(--ease-io) infinite; } .cue__label { position: absolute; left: 17%; width: 68%; top: 0; height: 100%; display: grid; place-items: center; text-align: center; font: 500 .6875rem/1.1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .hero__scroll:lang(fr) .cue__label { letter-spacing: .12em; font-size: .625rem; } @keyframes cue-bob { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } } @keyframes cue-wave { to { transform: translateX(40px); } } @keyframes cue-drop { 0% { transform: translateY(-1px) scale(.4); opacity: 0; } 25% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(14px) scale(.85); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cue, .cue__syrup, .cue__drop { animation: none; } } /* the cherry's name, as on a botanical plate: a dot on the fruit, a hairline, the common and the Latin name */ .hero__name { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0); opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; } .hero__name::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--milk); box-shadow: 0 0 0 1.5px var(--ink); } .hero__name::after { content: ""; position: absolute; top: 0; right: 8px; width: 56px; height: 1px; background: var(--ink-3); } .hero__name b, .hero__name i { position: absolute; right: 74px; white-space: nowrap; } .hero__name b { top: -14px; font: 400 .6875rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); } .hero__name i { top: 3px; font: 300 italic 1rem/1.2 var(--serif); color: var(--ink-2); } .hero__name.is-up::after { top: auto; bottom: 8px; right: auto; left: 0; width: 1px; height: 22px; } .hero__name.is-up b, .hero__name.is-up i { right: auto; left: 0; transform: translateX(-50%); text-align: center; } .hero__name.is-up b { top: -60px; } .hero__name.is-up i { top: -46px; font-size: .9375rem; } @media (max-width: 900px) { .hero { height: 540svh; } /* on phones the story takes a longer scroll, so a quick swipe never rushes it */ .hero__copy, .hero__beat, .hero__end { left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 18px); width: auto; text-align: center; transform: translate3d(0, calc((1 - var(--in, 1)) * 14px), 0); } /* the opening words stand at the top, in the evening sky; the cherry and its land fill the screen below them */ .hero__copy { top: calc(var(--nav-h) + 6px); bottom: auto; } .hero__brand { margin-top: 12px; font-size: clamp(3.6rem, 18vw, 6rem); } .hero__lede { margin: 16px auto 0; font-size: 1rem; text-wrap: balance; } .hero__actions { justify-content: center; margin-top: 22px; } .hero__beat { font-size: clamp(2.2rem, 10.2vw, 3.2rem); } .hero__beat--apart { left: var(--gutter); top: auto; bottom: 30px; width: auto; font-size: clamp(1.9rem, 8.4vw, 2.8rem); transform: translate3d(0, calc((1 - var(--in, 1)) * 14px), 0); } .hero__end-brand { font-size: clamp(3rem, 14vw, 4.6rem); } .hero__end-text { margin: 14px auto 0; text-wrap: balance; } /* on phones the fruit opens on a diagonal: every name sits to the left of its layer, on a soft backing */ .hero__part::after, .hero__part--up::after, .hero__part--down::after { top: 0; bottom: auto; left: auto; right: 9px; width: 26px; height: 1px; } .hero__part b, .hero__part--up b, .hero__part--down b { top: 0; bottom: auto; left: auto; right: 40px; transform: translateY(-50%); font-size: .6875rem; letter-spacing: .16em; padding: 5px 8px 4px; border-radius: 999px; background: rgba(230, 211, 183, .9); } .hero__claim { margin-top: 10px; font-size: clamp(1.25rem, 5.6vw, 1.6rem); } .hero__name { display: none; } } /* short phones (an iPhone SE with Safari's bars out): the opening words a little tighter, so the cherry and its branch below them keep a fair size */ @media (max-width: 900px) and (max-height: 640px) { .hero__brand { font-size: clamp(2.9rem, 14.5vw, 4rem); margin-top: 8px; } .hero__claim { margin-top: 6px; font-size: 1.2rem; } .hero__lede { margin-top: 10px; font-size: .9375rem; line-height: 1.5; } .hero__actions { margin-top: 14px; } .hero__copy { top: calc(var(--nav-h) - 4px); } } /* no travelling: the fruit sits still on one screen, beside the words that open the page */ @media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero__stage { position: relative; height: 100svh; } .hero__beat, .hero__end, .hero__parts, .hero__scroll, .hero__name { display: none; } } /* the real cherry: page.js lays it exactly over the model and lets it go as the fruit opens; it casts the same soft shadow onto the paper as its branch (baked into that picture) */ .hero__cherry { position: absolute; z-index: 1; left: 0; top: 0; width: 300px; height: auto; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; visibility: hidden; filter: drop-shadow(5px 9px 11px rgba(58, 33, 22, .24)); } /* its branch, in the branch picture's own pixels; page.js scales and places it so its cherry is this one */ .hero__plant { position: absolute; z-index: 1; left: 0; top: 0; max-width: none; height: auto; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; visibility: hidden; } .hero.is-flat .hero__plant { display: none; } /* the paper diorama round the cherry (hero3d/diorama.js): its layers rise one after the other as the loading screen lifts, lean with the pointer and fly apart on the first scroll (page.js); over it the grain of the paper */ .hero__dio { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .dio__ground { position: absolute; inset: 0; will-change: opacity; background: var(--grain) 0 0 / 180px 180px, var(--paper); background-blend-mode: soft-light, normal; } .dio__layer { position: absolute; inset: 0; transform-origin: 62% 58%; will-change: transform; } .dio__rise { position: absolute; inset: 0; transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 90ms), opacity 1s var(--ease) calc(var(--i) * 90ms); } .hero__dio:not(.is-up) .dio__rise { opacity: 0; transform: translate3d(0, 14vh, 0); } .hero__dio:not(.is-up) .dio__layer--sky .dio__rise { transform: translate3d(0, -9vh, 0); } /* the sun sinks into place */ .dio__layer svg, .dio__paint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .dio__paint { will-change: opacity; } /* a layer of its own, so its fade is never a repaint */ /* the branch breathes in the evening air (the whole painted layer, turned a hair about where it enters) */ .dio__layer--branch .dio__paint, .dio__layer--branch > .dio__rise > svg { transform-origin: 100% 45%; animation: dio-bough 7s ease-in-out infinite alternate; } @keyframes dio-bough { from { transform: rotate(-.5deg); } to { transform: rotate(.6deg); } } .dio__fx { position: absolute; inset: 0; } .dio__fx > div { position: absolute; } .dio__fx svg { position: static; display: block; width: auto; height: auto; overflow: visible; } /* what lives in it: clouds and mist drift, birds cross the sky beating their wings, fireflies hover and glow */ .dio__cloud, .dio__mist { animation: dio-drift var(--dur, 30s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes dio-drift { to { transform: translate3d(var(--drift, 20px), 0, 0); } } .dio__bird { opacity: 0; animation: dio-fly var(--dur, 26s) linear var(--delay, 0s) infinite; } @keyframes dio-fly { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 6%, 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--fly), var(--rise), 0); } } .dio__bird svg { transform-origin: 50% 70%; animation: dio-flap var(--flap, .6s) ease-in-out infinite alternate; } @keyframes dio-flap { to { transform: scaleY(.25); } } .dio__halo { animation: dio-breathe 7s ease-in-out infinite alternate; } .dio__farmer { left: 0; top: 0; will-change: transform; } .dio__farmer svg { transform: scaleX(var(--face, 1)); } .dio__farmer-body { animation: dio-bob .55s ease-in-out infinite alternate; } .dio__farmer--man .dio__farmer-body { animation-duration: .62s; } .dio__farmer--man :is(.dio__leg, .dio__arm) { animation-duration: 1.24s; animation-delay: -.5s; } .dio__farmer--man :is(.dio__leg--b, .dio__arm--f) { animation-delay: -1.74s; } .dio__leg, .dio__arm { transform-box: fill-box; transform-origin: 50% 0; animation: dio-step 1.1s ease-in-out infinite alternate; } .dio__leg--b, .dio__arm--f { animation-delay: -1.1s; } @keyframes dio-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } } @keyframes dio-bob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } } @keyframes dio-breathe { from { transform: scale(.97); } to { transform: scale(1.03); } } .dio__sway { transform-origin: 50% 100%; animation: dio-sway var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes dio-sway { from { transform: rotate(calc(var(--deg, 2deg) * -1)); } to { transform: rotate(var(--deg, 2deg)); } } .hero__dio.is-gone { visibility: hidden; } .hero__dio.is-gone * { animation-play-state: paused; } .hero.is-flat .hero__dio { display: none; } @media (prefers-reduced-motion: reduce) { .dio__rise { transition: none; } .dio__cloud, .dio__mist, .dio__bird svg, .dio__halo, .dio__sway, .dio__farmer-body, .dio__leg, .dio__arm, .dio__paint { animation: none; } .dio__bird { display: none; } } /* the cherry and its branch are one picture: they come in together, softly, once the branch has loaded (page.js) */ .hero__photos { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero.is-3d:not(.has-plant) .hero__photos { opacity: 0; } .hero.is-3d:not(.is-settled) .hero__photos { transition: opacity .8s var(--ease); } /* without WebGL the opening is a still: the words beside the real cherry */ .hero.is-flat .hero__cherry { visibility: visible; left: auto; right: calc(var(--gutter) + 6vw); top: 50%; width: min(26vw, 340px); transform: translateY(-50%); filter: drop-shadow(0 30px 28px rgba(58, 33, 22, .22)); } @media (max-width: 900px) { .hero.is-flat .hero__cherry { right: auto; left: 50%; top: auto; bottom: 6svh; width: min(52vw, 240px); transform: translateX(-50%); } } .hero.is-flat { height: auto; } .hero.is-flat .hero__stage { position: relative; height: 100svh; } .hero.is-flat .hero__beat, .hero.is-flat .hero__end, .hero.is-flat .hero__parts, .hero.is-flat .hero__scroll, .hero.is-flat .hero__name { display: none; } /* ---------- intro ---------- */ .intro { max-width: calc(1080px + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--section) * .55) var(--gutter) calc(var(--section) * .8); text-align: center; } .intro .display { margin-top: 0; } .intro__cols { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); text-align: left; color: var(--ink-2); } /* ---------- split ---------- */ .split { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .split__media { grid-column: 1 / span 6; overflow: hidden; aspect-ratio: 4 / 5; } /* no hard frame: the photograph fades into the paper over a soft, slightly uneven edge, which opens out a little as it comes into view (a mask, eased once, nothing that runs on) */ .split__media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%' y='-20%' width='140%' height='140%'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23fff' d='M9 8C24 4 38 7 52 5S80 3 92 9C96 24 93 38 95 52S98 78 91 91C76 96 62 93 48 95S20 98 8 92C4 77 7 63 5 49S3 21 9 8Z'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%' y='-20%' width='140%' height='140%'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23fff' d='M9 8C24 4 38 7 52 5S80 3 92 9C96 24 93 38 95 52S98 78 91 91C76 96 62 93 48 95S20 98 8 92C4 77 7 63 5 49S3 21 9 8Z'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat; } .split__media[data-reveal] img { -webkit-mask-size: 84% 86%; mask-size: 84% 86%; transform: scale(1.04); transition: -webkit-mask-size 1.8s cubic-bezier(.22, .61, .36, 1), mask-size 1.8s cubic-bezier(.22, .61, .36, 1), transform 2.4s cubic-bezier(.22, .61, .36, 1); } .split__media.is-in img { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transform: none; } .split__copy { grid-column: 8 / span 5; } .split__copy .display { margin-top: 26px; margin-bottom: 30px; } .split__copy > p { color: var(--ink-2); } .facts { margin-top: 40px; border-top: 1px solid var(--line); } .facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .facts dt { font: 400 .75rem/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .facts dd { font-size: 1.0625rem; line-height: 1.5; } /* Cascara, poured (pour.js): a glass pot of our syrup, drawn flat like the rest of the page, tips as it comes up the page; the syrup inside stays level, rises to the spout, runs over it and falls in one straight stream past the four words – each comes in as the stream passes – into a bottle of Cozy Spice, which slowly fills. All of it follows the scroll, both ways. */ .pour { --syrup: #51301D; --pour-ease: cubic-bezier(.22, .61, .36, 1); position: relative; margin-top: 26px; } .pour.is-live { padding-top: 210px; } .pour__flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } .pour__facts { margin: 0; display: grid; gap: 36px; } .pour.is-live .pour__facts { padding-left: 66px; } .pour__fact dt { font: 600 clamp(2.25rem, 3.4vw, 2.9rem)/1.12 var(--brand); letter-spacing: -.01em; color: var(--syrup); } .pour__fact dd { margin: 8px 0 0; font: 400 clamp(1.125rem, 1.4vw, 1.3125rem)/1.42 var(--serif); letter-spacing: -.005em; color: var(--ink); } .pour__fact dd em { font-style: italic; } /* the words wait, faint; each comes in as the stream passes it */ .pour.is-live .pour__fact dt { opacity: .16; transition: opacity .7s var(--pour-ease); } .pour.is-live .pour__fact dd { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .7s var(--pour-ease) .08s, transform .7s var(--pour-ease) .08s; } .pour.is-live .pour__fact.is-in dt, .pour.is-live .pour__fact.is-in dd { opacity: 1; transform: none; } /* the room of the bottle that catches the stream (pour.js draws it, the stream down its middle) */ .pour__catch { display: none; } .pour.is-live .pour__catch { display: block; width: 80px; height: 138px; margin-top: 34px; } /* ---------- plan ---------- */ .plan { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .plan__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 48px); } .plan__head .display { margin-top: 26px; } .plan__media { margin-top: 44px; border-radius: var(--radius); overflow: hidden; background: var(--ink); } .plan__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .plan__media figcaption { padding: 12px 16px 14px; font: 400 .6875rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 247, 238, .7); } .plan__body { grid-column: 7 / span 6; } .plan__lead { font: 300 clamp(1.375rem, 1.9vw, 1.75rem)/1.4 var(--serif); } .steps { margin-top: 48px; border-top: 1px solid var(--line); counter-reset: step; } .steps li { display: grid; grid-template-columns: 3.2em 1fr; gap: 12px; padding: 26px 0 28px; border-bottom: 1px solid var(--line); } .steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 600 1.125rem/1.45 var(--brand); color: var(--terra); } .steps h3 { font: 300 1.5rem/1.2 var(--serif); letter-spacing: -.01em; } .steps p { margin-top: 6px; color: var(--ink-2); font-size: 1.0625rem; } .steps .step__who { margin-top: 10px; font: 400 .6875rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } /* ---------- ideas for the glass: a bar menu ---------- */ /* the night of the bar menu begins and ends as on our label: the paper drips into it at its head, it drips into the paper at its foot – a short, soft edge (main.js follows it with the bar and Safari's strip: --fade is read there) */ .drinks { --fade: 30px; position: relative; z-index: 1; color: var(--milk); padding: var(--section) var(--gutter); background: var(--night); } .drinks__drip { position: absolute; left: 0; width: 100%; pointer-events: none; } .drinks__drip--top { top: -1px; height: clamp(22px, 2.6vw, 34px); fill: var(--paper); } .drinks__drip--low { top: calc(100% - 1px); height: clamp(26px, 3vw, 40px); fill: var(--night); } .drinks__head { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; } .drinks__head .eyebrow { grid-column: 1 / -1; color: var(--cream); } .drinks__head .display { grid-column: 1 / span 6; margin-top: 26px; } .drinks__head .display em { color: var(--cream); } .drinks__intro { grid-column: 8 / span 5; color: rgba(255, 247, 238, .78); } .drinks__tabs { display: none; } .drinks__menu { max-width: var(--max); margin: clamp(64px, 7vw, 104px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-light); } .drinks__group { padding: 40px clamp(18px, 2vw, 32px) 8px; border-left: 1px solid var(--line-light); } .drinks__group:first-child { border-left: 0; padding-left: 0; } .drinks__group:last-child { padding-right: 0; } .drinks__icon { width: 56px; height: 56px; fill: none; stroke: var(--cream); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .drinks__icon path { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.6s var(--ease-io); transition-delay: calc(var(--d, 0) * 120ms + 200ms); } .drinks__group.is-in .drinks__icon path { stroke-dashoffset: 0; } .drinks__title { margin-top: 26px; font: 600 clamp(1.75rem, 2.3vw, 2.25rem)/1 var(--brand); letter-spacing: 0; color: var(--cream); } .drinks__list { margin-top: 26px; } .drinks__list li { padding: 20px 0 22px; border-top: 1px solid var(--line-light); } .drinks__list h4 { margin: 0; font: 300 1.375rem/1.2 var(--serif); letter-spacing: -.005em; } .drinks__mix { margin-top: 8px; font: 400 .6875rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); } .drinks__list li p:last-child { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: rgba(255, 247, 238, .74); } /* ---------- stands: where to find us, a skyline and a map each ---------- */ .stands { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); } .stands__inner { padding-top: calc(var(--section) * .5); } .stands__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; } .stands__head .eyebrow { grid-column: 1 / -1; } .stands__head .display { grid-column: 1 / span 6; margin-top: 26px; } .stands__intro { grid-column: 8 / span 5; color: var(--ink-2); max-width: 30em; } .stands__list { --gap: clamp(32px, 3.8vw, 56px); list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); } .stand { position: relative; display: flex; flex-direction: column; padding-top: 36px; } /* the hairline between stands sits in the middle of the gap, so every column (and map) is equally wide */ .stand + .stand::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--line); } /* the town's skyline draws itself in, like the glasses above */ .stand__icon { width: 56px; height: 56px; fill: none; stroke: var(--terra); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .stand__icon path { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.8s var(--ease-io); transition-delay: calc(var(--d, 0) * 140ms + 200ms); } .stand.is-in .stand__icon path { stroke-dashoffset: 0; } .stand__date { margin-top: 26px; font: 300 clamp(2rem, 2.7vw, 2.625rem)/1 var(--serif); letter-spacing: -.02em; } .stand__day { font: 600 .92em/1 var(--brand); letter-spacing: 0; color: var(--terra); } .stand__when { margin-top: 12px; font: 400 .6875rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .stand__title { margin-top: 24px; font: 400 1.3125rem/1.2 var(--serif); letter-spacing: -.01em; } .stand__place { margin: 6px 0 26px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); } /* the maps sit on one line across the row, whatever the text above them */ .stand__map { display: block; margin-top: auto; border-radius: var(--radius); } .stand__map img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .stand__map:hover img { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -18px rgba(58, 33, 22, .5); } .stand__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: .875rem; } .stand__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: color .3s, text-decoration-color .3s; } .stand__links a:hover { color: var(--terra-ink); text-decoration-color: currentColor; } /* «Als Nächstes» on the next stand, «Vorbei» once its day has passed (main.js) */ .stand__badge { position: absolute; top: 36px; right: 0; padding: 6px 11px 5px; border-radius: 999px; background: var(--terra); color: var(--milk); font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .stand.is-past .stand__badge { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); } .stand.is-past > :not(.stand__badge) { opacity: .5; } .stand.is-past .stand__map img { filter: grayscale(.7); } .stands__credit { margin-top: 32px; font-size: .75rem; color: var(--ink-3); } .stands__credit a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } @media (max-width: 1100px) { .stands__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } .stand:nth-child(odd)::before { content: none; } .stand:nth-child(n+3) { border-top: 1px solid var(--line); } .stand:nth-child(n+3)::before { top: -1px; } } /* phones: the stands lie side by side and slide, the next one peeking in */ @media (max-width: 900px) { .stands__head { display: block; } .stands__intro { margin-top: 24px; } .stands__list { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 48px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); border-top: 0; scrollbar-width: none; } .stands__list::-webkit-scrollbar { display: none; } .stand, .stand:nth-child(n+3) { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; padding-top: 28px; border-top: 1px solid var(--line); } .stand::before, .stand + .stand::before { content: none; } .stand__badge { top: 28px; } } /* ---------- shop: right after the opening, on the paper; each kind on its own warm stage ---------- */ .shop { position: relative; isolation: isolate; padding: calc(var(--section) * .7) 0 calc(var(--section) * .45); } .shop__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .shop__top { position: relative; z-index: 1; } /* nothing of the plantation reaches past the screen's sides (a drifting cloud made the phone page scroll sideways) */ .shop { overflow-x: clip; } .shop__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; } .shop__head .eyebrow { grid-column: 1 / -1; } .shop__head .display { grid-column: 1 / span 6; margin-top: 26px; } .shop__intro { grid-column: 8 / span 5; color: var(--ink-2); } /* The shop stands in the plantation. The picture (_build/shopscene) goes from edge to edge; its sky runs on upwards behind the title, the sun's glow with it, and fades into the paper; its soil runs on beneath it, behind the cards, and fades into the paper again before the next section. Over it the clouds drift, the farmer walks her row and a second worker his, now and then a few birds fly in (all paused while it is off screen), and on the table stand both kinds, each in the size chosen in its card, between what goes into them (painted into the picture). */ .shop__stage { --soil: #3C2318; position: relative; max-width: 2200px; margin: clamp(18px, 3vw, 44px) auto 0; aspect-ratio: 1360 / 650; background: linear-gradient(to bottom, transparent 60%, var(--soil) 60%); } .shop__stage::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 86%; height: min(560px, 70vh); background: radial-gradient(ellipse 34% 62% at 75.5% 100%, rgba(250, 226, 178, .7), rgba(250, 226, 178, 0) 72%), linear-gradient(to bottom, rgba(232, 207, 174, 0), #E9CFAE 92%); } .shop__field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 93%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 93%, transparent); } .shop__over { position: absolute; inset: 0; pointer-events: none; } .shop__over--narrow { display: none; } .shop__cloud { position: absolute; display: block; animation: shop-drift var(--dur, 48s) ease-in-out infinite alternate; will-change: transform; } .shop__cloud svg { display: block; width: 100%; height: auto; overflow: visible; } @keyframes shop-drift { to { transform: translate3d(var(--drift, 14%), 0, 0); } } .shop__farmer { position: absolute; display: block; animation: shop-walk 38s linear infinite; will-change: transform; } .shop__farmer svg { display: block; width: 100%; height: auto; overflow: visible; } @keyframes shop-walk { 0% { transform: translate3d(0, 0, 0) scaleX(1); } 49.99% { transform: translate3d(var(--walk), 0, 0) scaleX(1); } 50% { transform: translate3d(var(--walk), 0, 0) scaleX(-1); } 100% { transform: translate3d(0, 0, 0) scaleX(-1); } } /* the man on the left: his own loop (--dur) and a longer stride with the sack, so the two never step together */ .shop__farmer--man { animation-duration: var(--dur, 30s); animation-delay: var(--delay, 0s); } .shop__farmer--man .dio__farmer-body { animation-duration: .62s; } .shop__farmer--man :is(.dio__leg, .dio__arm) { animation-duration: 1.24s; animation-delay: -.5s; } .shop__farmer--man :is(.dio__leg--b, .dio__arm--f) { animation-delay: -1.74s; } /* Now and then a small flock: one from beside the title glides down into the picture's sky towards the farm, the other rises from beside the cards towards the sun; both grow smaller as they fly off into the picture, then rest unseen for most of the loop. Each flock is two boxes, one carrying it down or up and away (ease-out), the other sideways, setting off a moment later (ease-in-out), so together they draw a soft curve: first down (or up), then off to the left into the picture. Only transforms and opacity move. */ .shop__flock { position: absolute; top: var(--t0); --y: var(--y0); display: block; animation: shop-fly-x var(--dur, 30s) linear var(--delay, 0s) infinite; } /* where the title stands above the words rather than beside them, the words run the full width: the first flock sets off just beneath them, in the sky (crossing them, the birds looked like scribbles on the text) */ @media (min-width: 701px) and (max-width: 900px) { .shop__flock { top: var(--ts, var(--t0)); --y: var(--ys, var(--y0)); } } .shop__flock > span { position: absolute; inset: 0; opacity: 0; animation: shop-fly-y var(--dur, 30s) linear var(--delay, 0s) infinite, shop-fly-fade var(--dur, 30s) linear var(--delay, 0s) infinite; } .shop__bird { position: absolute; display: block; } .shop__bird svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 70%; animation: shop-flap var(--fd, 3.6s) ease-in-out var(--fdl, 0s) infinite; } .shop__bird path { fill: none; stroke: #3A2116; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } /* the evening light along their wings: lost in the sky, it shows them over the dark soil beside the cards */ .shop__bird .shop__glint { stroke: #F6DCAE; stroke-width: 6.2; opacity: .5; } @keyframes shop-fly-x { 0%, 9% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 38%, 100% { transform: translate3d(var(--x), 0, 0); } } @keyframes shop-fly-y { 0% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(.22, .62, .42, 1); } 38%, 100% { transform: translate3d(0, var(--y), 0) scale(var(--s)); } } @keyframes shop-fly-fade { 0%, 38%, 100% { opacity: 0; } 4%, 31% { opacity: 1; } } /* a few beats, then a glide */ @keyframes shop-flap { 0%, 44%, 100% { transform: scaleY(.72); } 8%, 22%, 36% { transform: scaleY(.34); } 15%, 29% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .shop__flock { display: none; } } .shop__stage.is-away *, .shop__stage:not(.is-near) * { animation-play-state: paused; } .stand-bottle { position: absolute; left: calc(50% - var(--apart, 7.5%)); bottom: var(--foot, 28%); height: 44.8%; aspect-ratio: 146 / 605; opacity: 0; transform: translate3d(-50%, 12px, 0); transition: opacity .5s var(--ease), transform .8s var(--ease); } .stand-bottle--200 { height: 34.7%; aspect-ratio: 212 / 469; } .stand-bottle--r { left: calc(50% + var(--apart, 7.5%)); } .stand-bottle img { position: relative; display: block; width: 100%; height: 100%; } .stand-bottle::before { content: ""; position: absolute; left: -55%; right: -55%; bottom: -4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 9, 4, .55), rgba(20, 9, 4, 0)); } .stand-bottle.is-shown { opacity: 1; transform: translate3d(-50%, 0, 0); } @media (max-width: 700px) { .shop__stage { --apart: 14%; aspect-ratio: 390 / 394; } .shop__field { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent); } .shop__over--wide { display: none; } .shop__over--narrow { display: block; } } /* the soil beneath the picture: the cards stand on it, then it fades into the paper */ .shop__ground { position: relative; margin-top: -1px; padding: 0 var(--gutter) clamp(150px, 16vw, 230px); background: var(--grain) 0 0 / 180px 180px, linear-gradient(to bottom, #3C2318 0, #3C2318 calc(100% - clamp(190px, 20vw, 290px)), #6B3D24 calc(100% - clamp(140px, 15vw, 215px)), #A8734C calc(100% - clamp(90px, 9.5vw, 140px)), #D3AF89 calc(100% - clamp(40px, 4vw, 60px)), var(--paper) 100%); background-blend-mode: soft-light, normal; } /* the two kinds side by side beneath the picture, as they stand on the table: the Original left, Cozy Spice right */ .shop__grid { position: relative; z-index: 1; max-width: var(--max); margin: clamp(-90px, -6vw, -28px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 16px; } /* both cards share one set of rows (subgrid): name and price, what it is, the sizes, the button stand at the same height in both, however their words wrap */ .product { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding: 26px 28px 28px; border-radius: 26px; background: #F2E4CE; box-shadow: 0 34px 60px -34px rgba(10, 4, 1, .8), inset 0 1px 0 rgba(255, 252, 245, .7); } .product__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; } .product__name { font: 600 clamp(1.75rem, 2.6vw, 2.6rem)/1 var(--brand); color: var(--terra); } .product__price { font: 600 clamp(1.15rem, 1.6vw, 1.5rem)/1 var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; } .product > * { min-width: 0; } .product__tag { font: 500 .6875rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--terra-ink); } .product__text { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 32em; } .product__sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; align-self: end; } .product__size { display: grid; gap: 5px; justify-items: start; min-height: 60px; padding: 11px 16px 10px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: none; color: var(--ink); cursor: pointer; transition: border-color .25s, box-shadow .25s, background-color .25s; } .product__size:hover { border-color: rgba(58, 33, 22, .38); } .product__size[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: rgba(255, 250, 242, .5); } .product__ml { font: 500 1rem/1.1 var(--sans); letter-spacing: .02em; } .product__each { font-size: .8125rem; line-height: 1.1; color: var(--ink-3); font-variant-numeric: tabular-nums; } .product__buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .product__add { flex: 1 1 9.5rem; justify-content: center; white-space: nowrap; min-height: 52px; } .product__add.is-added { background: var(--ink); border-color: var(--ink); } .product__soon, .product__soon:hover { flex: 1 1 100%; cursor: default; background: rgba(255, 250, 242, .5); border-color: var(--line); color: var(--ink-2); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; } .qty button { width: 44px; height: 50px; border: 0; background: none; font-size: 1.2rem; color: inherit; cursor: pointer; border-radius: 999px; } .qty button:hover { background: rgba(58, 33, 22, .06); } .qty input, .qty output { width: 2.2em; text-align: center; border: 0; background: none; font: 400 16px var(--sans); color: inherit; -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty--small button { width: 44px; height: 44px; } /* what comes with every order: a calm band of three, between hairlines */ .shop__perks { margin-top: 0; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); } .shop__perks li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; } .shop__perks svg { width: 48px; height: 48px; fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .shop__perks path, .shop__perks rect, .shop__perks circle { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.6s var(--ease-io); transition-delay: calc(var(--d, 0) * 120ms + 200ms); } .shop__perks li.is-in :is(path, rect, circle) { stroke-dashoffset: 0; } .shop__perks h3 { font: 600 1.25rem/1.1 var(--brand); } .shop__perks p { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); } .shop__facts { margin-top: 8px; border-bottom: 1px solid var(--line); } .shop__facts summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; cursor: pointer; list-style: none; font-size: .9375rem; letter-spacing: .03em; } .shop__facts summary::-webkit-details-marker { display: none; } .shop__facts summary::after { content: "+"; font: 300 1.5rem/1 var(--sans); color: var(--terra); transition: transform .3s var(--ease); } .shop__facts[open] summary::after { transform: rotate(45deg); } .shop__facts .facts { margin: 0 0 18px; } .shop__facts .muted { font-style: italic; } .shop__note { margin-top: 18px; font-size: .875rem; color: var(--ink-3); } .shop__note a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { .shop__perks { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .shop { padding-top: calc(var(--section) * .45); } .shop__head { display: block; } .shop__head .display { margin-top: 20px; } .shop__intro { margin-top: 22px; } } @media (max-width: 560px) { /* on phones the two stay side by side, small: the name, what it is, the two sizes stacked, the button */ .shop__grid { gap: 10px; margin-top: -26px; } /* name and price each their own row, so both line up across the two cards */ .product { row-gap: 8px; padding: 18px 14px 16px; border-radius: 22px; } .product__top { display: contents; } .product__name { font-size: clamp(1.2rem, 5.6vw, 1.6rem); white-space: nowrap; } .product__price { font-size: 1rem; } .product__tag { font-size: .625rem; letter-spacing: .16em; } .product__text { display: none; } .product__sizes { grid-template-columns: minmax(0, 1fr); gap: 6px; } .product__size { min-height: 48px; padding: 8px 12px 7px; border-radius: 14px; } .product__add { padding-left: 8px; padding-right: 8px; min-height: 46px; font-size: .875rem; white-space: normal; text-wrap: balance; line-height: 1.15; } .product__size { min-width: 0; } .cart { width: 100vw; margin: 0; } .cart[open] { animation-name: cart-up; } @keyframes cart-up { from { transform: translate3d(0, 36px, 0); opacity: 0; } } } /* ---------- team: six portraits, as in our summary ---------- */ .team { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); } .team__inner { padding-top: calc(var(--section) * .7); border-top: 1px solid var(--line); } .team__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .team__facts { margin-top: 64px; } .team__copy { grid-column: 1 / span 6; } .team__copy .display { margin-top: 26px; margin-bottom: 30px; } .team__copy p:not(.eyebrow) { color: var(--ink-2); max-width: 34em; } .team__copy p + p { margin-top: 18px; } .team__facts { grid-column: 8 / span 5; border-top: 1px solid var(--line); } .team__facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .team__facts dt { font: 400 .75rem/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .team__facts dd { font-size: 1.0625rem; line-height: 1.5; } /* the coffee vine from our printed matter, as a divider */ .ranke { display: block; width: min(520px, 76%); aspect-ratio: 850 / 74; margin: clamp(64px, 7vw, 100px) auto 0; background: var(--terra); opacity: .85; -webkit-mask: url("assets/ranke.webp") center / contain no-repeat; mask: url("assets/ranke.webp") center / contain no-repeat; } /* the six of us on a turning ring: twelve cards round it (the six twice), each turned its share of the circle and set out from the middle; the ring turns slowly on its own, so the faces come round from the left, pass in front and go on to the right (on the GPU, only while it is on screen; a mouse on it stops it). Cards that face away are not drawn; the edges fade into the paper. No lines – each card a sheet of light paper with its own soft shadow. */ .team__loop { --card: clamp(236px, 19vw, 280px); --gap: 30px; --r: calc((var(--card) + var(--gap)) * 1.866); position: relative; margin: clamp(48px, 5vw, 76px) calc(var(--gutter) * -1) 0; overflow: hidden; padding: 26px 0 54px; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .team__ring { perspective: 2200px; perspective-origin: 50% 40%; } .team__people { position: relative; list-style: none; margin: 0 auto; padding: 0; width: var(--card); height: 400px; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--r))); } /* main.js turns it: on its own, slowly; by hand with a swipe, a drag or a sideways scroll, after which it runs on */ .team__loop { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } .team__loop.is-held { cursor: grabbing; } .member { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px 28px; border-radius: 28px; background: #F1E4CF; box-shadow: 0 26px 46px -30px rgba(58, 33, 22, .55), inset 0 1px 0 rgba(255, 252, 245, .8); transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--r)); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .member__disc { position: relative; display: block; width: 124px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #F8ECDA, #E9CFAE 72%); box-shadow: inset 0 0 0 1px rgba(180, 89, 42, .16); } .member__pic { position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; max-width: none; transform: translateX(-50%); } .member__name { margin-top: 22px; font: 600 1.375rem/1.15 var(--brand); color: var(--terra); } .member__role { margin-top: 8px; font: 500 .6875rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--terra-ink); } .member__what { margin-top: 12px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); } @media (max-width: 900px) { .team__loop { --card: 232px; --gap: 22px; margin-top: 40px; } .team__people { height: 392px; } .member__disc { width: 112px; } } /* without motion: the six side by side, to swipe through */ @media (prefers-reduced-motion: reduce) { .team__loop { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; padding: 20px var(--gutter) 40px; } .team__ring { perspective: none; } .team__people { display: flex; gap: 16px; width: max-content; height: auto; transform: none !important; } .member { position: relative; inset: auto; flex: 0 0 var(--card); transform: none; } .member[aria-hidden="true"] { display: none; } } .team__social { margin-top: clamp(72px, 8vw, 112px); display: flex; justify-content: center; } @media (max-width: 900px) { .team__head { display: block; } .team__facts { margin-top: 44px; } } @media (max-width: 560px) { } /* the basket button: floating, but never touching the screen edge (iOS would freeze its toolbar in its colour) */ .basket-btn { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px 8px 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--milk); font: 400 .9375rem/1 var(--sans); letter-spacing: .03em; cursor: pointer; box-shadow: 0 16px 34px -14px rgba(43, 24, 16, .65); } .basket-btn__count { min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--terra); font: 600 .9375rem/1 var(--brand); } .basket-btn.is-bump { animation: bump .5s var(--ease); } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } } /* on phones, past the opening: «Menü», floating like the basket (clear of the edges); a little bottle of the Original leans out of it, and tips a little further when it is pressed */ /* on phones, past the opening: «Menü» on a light pill, floating like the basket (clear of the screen's edges), a small bottle of the Original leaning out of it, which tips a little further when it is pressed. No CSS shadow on the bottle: Safari paints a pale box round a filtered picture. */ .menu-btn { position: fixed; z-index: 60; left: max(18px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 50px; border: 1px solid rgba(58, 33, 22, .12); border-radius: 999px; background: #FFFAF2; color: var(--ink); font: 400 .9375rem/1 var(--sans); letter-spacing: .03em; cursor: pointer; box-shadow: 0 14px 30px -16px rgba(43, 24, 16, .5), inset 0 1px 0 #fff; animation: pill-in .35s var(--ease); -webkit-tap-highlight-color: transparent; } .menu-btn__bottle { position: absolute; left: 15px; bottom: 6px; width: auto; height: 62px; transform: rotate(14deg); transform-origin: 40% 96%; pointer-events: none; transition: transform .45s var(--ease); } .menu-btn:hover .menu-btn__bottle, .menu-btn:active .menu-btn__bottle { transform: rotate(26deg); } .menu-btn i { position: relative; width: 16px; height: 8px; } .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; } .menu-btn i::before { top: 0; width: 16px; } .menu-btn i::after { bottom: 0; width: 10px; background: var(--terra); } @keyframes pill-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } } /* while something is being typed, the pill steps aside (it would cover the field or the button beneath it) */ html.is-typing .menu-btn { opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; transition: opacity .2s, transform .2s; } html.is-pouring .menu-btn { opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; } .menu-btn { transition: opacity .25s, transform .25s; } /* the basket: a sheet from the right (from below on phones) */ html.has-cart, html.has-cart body { overflow: hidden; } .cart { margin: 0 0 0 auto; padding: 0; border: 0; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: none; background: var(--paper); color: var(--ink); box-shadow: -30px 0 60px -40px rgba(43, 24, 16, .6); } .cart::backdrop { background: rgba(43, 24, 16, .42); } .cart[open] { animation: cart-in .45s var(--ease); } @keyframes cart-in { from { transform: translate3d(42px, 0, 0); opacity: 0; } } .cart__inner { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 26px clamp(20px, 3vw, 30px) calc(30px + env(safe-area-inset-bottom)); } .cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cart__title { font: 600 1.75rem/1 var(--brand); color: var(--terra); } .cart__close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: none; font: 300 1.6rem/1 var(--sans); color: var(--ink); cursor: pointer; } .cart__items { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); } .cart__empty { margin-top: 28px; color: var(--ink-2); } .line { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); } .line__pic { grid-area: 1 / 1 / 3 / 2; width: 64px; height: 80px; object-fit: cover; object-position: 50% 62%; border-radius: 14px; background: #EBD3B4; } .line__name { grid-area: 1 / 2; } .line .qty { grid-area: 2 / 2; justify-self: start; } .line__price { grid-area: 1 / 3; } .line__remove { grid-area: 2 / 3; } .line__name strong { display: block; font: 600 1.15rem/1.15 var(--brand); } .line__name .muted { font-size: .8125rem; } .line__price { text-align: right; font: 600 1.05rem/1 var(--brand); } .line__remove { justify-self: end; min-height: 44px; border: 0; background: none; padding: 6px 0; font-size: .8125rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .order { display: grid; gap: 22px; margin-top: 18px; } .order__total { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 2px; } .order__total span { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .order__total strong { font: 600 1.6rem/1 var(--brand); } .order__group { margin: 0; padding: 0; border: 0; min-width: 0; } .order__group legend { padding: 0; margin-bottom: 10px; font: 400 .75rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--terra-ink); } .order__picks { display: grid; gap: 8px; } .pick { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: .9375rem; line-height: 1.4; cursor: pointer; transition: border-color .2s, background-color .2s; } .pick:has(input:checked) { border-color: var(--terra); background: rgba(180, 89, 42, .07); } .pick strong { font-weight: 500; } .pick .muted { font-size: .8125rem; } .pick input, .pay input, .order__consent input { -webkit-appearance: none; appearance: none; margin: 1px 0 0; width: 20px; height: 20px; cursor: pointer; border: 1.5px solid var(--ink-3); background: transparent no-repeat center / 12px 12px; } .pick input, .pay input { border-radius: 50%; } .pick input:checked, .pay input:checked { border-color: var(--terra); box-shadow: inset 0 0 0 4px var(--paper); background: var(--terra); } .order__consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: .8125rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; } .order__consent input { border-radius: 6px; } .order__consent input:checked { border-color: var(--terra); background-color: var(--terra); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.4' fill='none' stroke='%23fff7ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .order__consent a { text-decoration: underline; text-underline-offset: 3px; } .field { display: grid; gap: 6px; margin-bottom: 12px; font-size: .8125rem; color: var(--ink-2); } .field input, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 250, 242, .55); font: 400 16px/1.4 var(--sans); color: var(--ink); outline: none; transition: border-color .2s, background-color .2s; } .field textarea { resize: vertical; min-height: 64px; } .field input:focus, .field textarea:focus { border-color: var(--terra); background: rgba(255, 250, 242, .9); } .order__submit { justify-content: center; width: 100%; min-height: 54px; font-size: 1rem; } .order__submit:disabled { opacity: .6; cursor: default; } .order__pay { margin-top: -10px; text-align: center; font-size: .8125rem; color: var(--ink-3); } .order__status { min-height: 1.4em; font-size: .875rem; color: var(--terra-ink); } .order__error { margin: 2px 0 8px; font-size: .8125rem; line-height: 1.4; color: var(--terra-ink); } .field .order__error { margin: 0; } .field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--terra-ink); box-shadow: inset 0 0 0 1px var(--terra-ink); } .pick:has(input[aria-invalid]), .order__consent:has(input[aria-invalid]) input { border-color: var(--terra-ink); } .cart__done { padding-top: 18vh; text-align: center; display: grid; justify-items: center; gap: 16px; outline: none; } .cart__done .eyebrow { color: var(--terra-ink); } .cart__done-title { font: 600 clamp(1.8rem, 6vw, 2.4rem)/1.08 var(--brand); } .cart__done-text { max-width: 26em; color: var(--ink-2); } /* our profiles: plain links in the same fine line as the drink icons; no embeds, nothing loads from the platforms */ .socials { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; opacity: .9; transition: background-color .3s, opacity .3s; } .socials a:hover, .socials a:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); } .socials svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .socials .socials__dot { fill: currentColor; stroke: none; } .feed { list-style: none; margin: 30px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 210px)); justify-content: center; gap: 14px; } .feed__post, .feed__more { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; color: inherit; } /* a fine edge, like the tile beside it: a post in the logo's own orange would otherwise melt into the section */ .feed__post { box-shadow: 0 0 0 1px var(--line); } .feed__post img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .feed__post:hover img { transform: scale(1.04); } .feed__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; border: 1px solid var(--line); text-align: center; font-size: .875rem; line-height: 1.4; transition: background-color .3s; } .feed__more:hover { background: rgba(58, 33, 22, .04); } .feed__more svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; } .feed__more .socials__dot { fill: currentColor; stroke: none; } .feed__more strong { font-weight: 400; } .footer__social { margin: 18px 0 0 -11px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 1rem; } .footer__social > span { font-weight: 400; } /* the page ends in terracotta, reached by a soft fall from the paper */ .footer { --fade: 200px; color: var(--milk); padding: var(--fade) var(--gutter) 32px; background: linear-gradient(var(--paper), var(--terra) var(--fade)); } .footer--slim { --fade: 0px; padding-top: 8px; background: var(--terra); } .footer__top { max-width: var(--max); margin: 0 auto; padding-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .footer__brand { grid-column: 1 / span 1; width: 54px; } .footer__brand svg { width: 54px; height: auto; fill: var(--cream); } .footer__about { grid-column: 2 / span 5; padding-left: 12px; } .footer__claim { font: 600 clamp(1.6rem, 2.3vw, 2.2rem)/1.08 var(--brand); } .footer__claim em { font-style: normal; color: var(--cream-light); } .footer__nav { grid-column: span 3; } .footer__nav .eyebrow { color: var(--milk); } .footer__nav ul { margin-top: 18px; display: grid; gap: 8px; font-size: 1rem; } .footer__nav a { font-weight: 400; transition: opacity .3s; } .footer__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .footer__base { max-width: var(--max); margin: clamp(64px, 8vw, 110px) auto 0; padding-top: 22px; border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8125rem; font-weight: 400; } /* ---------- legal pages ---------- */ /* the legal pages are paper from edge to edge, header included */ html:has(.is-legal) { background: var(--paper); } .legal-head { background: var(--paper); color: var(--ink); } .legal-head .nav__inner { grid-template-columns: 1fr auto 1fr; } .legal { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter) var(--section); } .legal h1 { font: 600 clamp(2.3rem, 4.4vw, 3.5rem)/1.06 var(--brand); margin-top: 22px; } .legal .legal__lead { margin-top: 24px; color: var(--ink-2); font-size: 1.1875rem; } .legal h2 { margin-top: 56px; font: 300 1.75rem/1.2 var(--serif); letter-spacing: -.01em; } .legal h3 { margin-top: 28px; font: 400 .8125rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .legal p, .legal li { margin-top: 14px; color: var(--ink-2); } .legal ul { padding-left: 1.1em; list-style: disc; } .legal a { text-decoration: underline; text-underline-offset: 3px; } .legal address { font-style: normal; margin-top: 14px; color: var(--ink-2); line-height: 1.7; } .legal .todo { background: rgba(180, 89, 42, .14); color: var(--terra-ink); padding: 0 .3em; border-radius: 3px; font-weight: 400; } .legal .credit { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; } .legal .credit:first-of-type { border-top: 0; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { :root { --nav-h: 64px; } .footer { --fade: 120px; } .nav__links { display: none; } .nav__inner { grid-template-columns: auto 1fr auto; } .nav__mark { grid-column: 1; justify-self: start; padding-left: 0; } .nav__end { grid-column: 3; gap: 6px; } .nav__cta { min-height: 44px; padding: 0 20px; } .nav__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; font: 400 .9375rem/1 var(--sans); letter-spacing: .03em; } .nav__menu i { position: relative; width: 22px; height: 10px; } .nav__menu i::before, .nav__menu i::after { content: ""; position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: width .35s var(--ease); } .nav__menu i::before { top: 0; width: 22px; } .nav__menu i::after { bottom: 0; width: 14px; background: var(--terra); } .nav[data-ink="light"] .nav__menu i::after { background: var(--cream-light); } .nav__menu:hover i::after { width: 22px; } /* placed against the small viewport, so it sits clear of Safari's toolbar in both states */ .intro { text-align: left; } .intro__cols { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } .split, .plan, .drinks__head { display: block; } .drinks__intro { margin-top: 24px; } /* on phones the menu becomes a row of cards to swipe through, with tabs to jump */ .drinks__tabs { display: flex; gap: 8px; margin: 40px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; } .drinks__tabs::-webkit-scrollbar { display: none; } .drinks__tab { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; background: none; border: 1px solid var(--line-light); color: var(--milk); font: 400 .9375rem/1 var(--sans); letter-spacing: .03em; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .drinks__tab[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--night); } .drinks__menu { display: flex; gap: 14px; border-top: 0; margin: 20px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; } .drinks__menu::-webkit-scrollbar { display: none; } .drinks__group, .drinks__group:first-child, .drinks__group:nth-child(2), .drinks__group:nth-child(3), .drinks__group:last-child { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; padding: 28px 22px 6px; border: 1px solid var(--line-light); border-radius: var(--radius); background: rgba(255, 247, 238, .025); } .drinks__title { margin-top: 18px; } .steps li { grid-template-columns: 2.4em 1fr; } .split__media { aspect-ratio: 4 / 3; } .split__copy { margin-top: 48px; } .plan__head { position: static; } .plan__body { margin-top: 36px; } .footer__top { grid-template-columns: 1fr 1fr; row-gap: 40px; } .footer__about { grid-column: 1 / -1; padding-left: 0; } .footer__nav { grid-column: span 1; } } @media (max-width: 560px) { .facts div, .team__facts div { grid-template-columns: 1fr; gap: 2px; } .footer__base { flex-direction: column; padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } /* ---------- reduced motion: no pinning, no travelling ---------- */ @media (prefers-reduced-motion: reduce) { .nav { transition: none; } *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; } [data-reveal] { opacity: 1; transform: none; } .mark__ink { stroke-dashoffset: 0 !important; } } /* legal pages: the terracotta band carries the logo, the page itself is paper */ .legal-head .nav__inner { color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .legal-head .nav__mark { padding: 6px 0; } .legal h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; } .legal-back { font-size: .9375rem; letter-spacing: .03em; opacity: .9; } .legal-back:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .mark--static { fill: var(--cream); } .legal-head .mark--static { fill: var(--terra); } .footer--slim { padding-top: 8px; } .footer--slim .footer__base { margin-top: 0; border-top: 0; } .footer--slim a:hover { text-decoration: underline; text-underline-offset: 3px; } .legal .legal__stand { margin-top: 56px; font-size: .875rem; color: var(--ink-3); } .muted { color: var(--ink-3); } /* on touch screens the basket floats clear of the screen's edges too */ @media (pointer: coarse) { .cart { margin: 8px 8px 8px auto; height: calc(100dvh - 16px); width: min(460px, calc(100vw - 16px)); border-radius: 24px; } .cart__inner { padding-bottom: 30px; } } @media (pointer: coarse) and (max-width: 560px) { .cart { margin: 8px; width: calc(100vw - 16px); } } /* ---------- touch: every target at least 44pt ---------- */ @media (pointer: coarse) { .legal-back { display: inline-flex; align-items: center; min-height: 44px; } .nav__mark { padding: 5px; min-width: 44px; min-height: 44px; display: grid; place-items: center; } .footer__nav ul { gap: 0; } .footer__nav a { display: inline-flex; align-items: center; min-height: 44px; } .footer--slim .footer__base a { display: inline-flex; align-items: center; min-height: 44px; } } /* The same at the top on touch screens (with a mouse the bar does it): the top edge of the stage dissolves into the flat colour Safari shows above it, which the hero keeps equal to what that edge shows (--top). */ .hero { --top: 230, 211, 183; } @media (pointer: coarse) { /* at its foot the stage stops short of the screen's edge (see below): the land fades into the paper there instead of ending on a cut line */ /* (an element of its own, so fading it with the land touches nothing else: page.js sets its opacity) */ .hero__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; pointer-events: none; background: linear-gradient(rgba(122, 78, 52, 0), rgba(150, 101, 70, .5) 30%, rgba(206, 168, 132, .86) 60%, rgb(230, 211, 183) 88%); will-change: opacity; } .hero__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 3; pointer-events: none; background: linear-gradient(rgb(var(--top)) 0%, rgba(var(--top), .84) 16%, rgba(var(--top), .58) 36%, rgba(var(--top), .3) 58%, rgba(var(--top), .1) 80%, rgba(var(--top), 0) 100%); } } /* iOS Safari paints its status bar and bottom toolbar as solid bands, frozen in the colour of any pinned element (or anything inside it) that has touched the top or bottom of the screen, for the rest of the page. So on touch screens the pinned stage keeps clear of both: 8px at the top (the least that holds), 24px at the bottom. Above and below it the hero itself shows – behind the clock that is all Safari can show while something is pinned – painted in the colour the stage meets there. */ @media (pointer: coarse) { .hero { padding-top: 8px; background: rgb(var(--top)); } .hero__stage { top: 8px; height: calc(100svh - 32px); min-height: 0; } } /* The pin ends a little before the hero does, and the stage leaves as ordinary content, from the same place: a sticky element crossing the top of the screen, even for a frame in a fast swipe, would freeze Safari's status bar in its colour. Below it the hero shows the floor colour, paper by then. */ .hero { --release: 120px; } .hero.is-released .hero__stage { position: absolute; left: 0; right: 0; top: auto; bottom: var(--release); } /* ---------- checkout: three steps in the basket sheet ---------- */ .cart__head { justify-content: flex-start; } .cart__title { flex: 1; outline: none; } .cart__back { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: none; font: 300 1.25rem/1 var(--sans); color: var(--ink); cursor: pointer; } .cart__steps { display: flex; gap: 6px; margin-top: 18px; } .cart__steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 2px solid var(--line); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); transition: border-color .3s, color .3s; } .cart__steps li span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font: 600 .6875rem/1 var(--brand); letter-spacing: 0; transition: background-color .3s, color .3s; } .cart__steps li[aria-current], .cart__steps li.is-done { border-top-color: var(--terra); color: var(--ink); } .cart__steps li[aria-current] span { background: var(--terra); border-color: var(--terra); color: var(--milk); } .cart__steps li.is-done span { background: var(--ink); border-color: var(--ink); color: var(--milk); } .cart__step { display: grid; gap: 18px; margin-top: 6px; animation: step-in .4s var(--ease); } @keyframes step-in { from { opacity: 0; transform: translate3d(14px, 0, 0); } } .cart__step .cart__items { margin-top: 12px; } .sums { display: grid; gap: 8px; font-size: .9375rem; font-variant-numeric: tabular-nums; } .sums p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-2); } .sums .muted { font-size: .8125rem; } .sums__total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); } .sums__total span { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .sums__total strong { font: 600 1.6rem/1 var(--brand); color: var(--ink); } .fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: start; } .fields--plz { grid-template-columns: 6.5em minmax(0, 1fr); } .order__country { margin: -4px 0 12px; font-size: .8125rem; color: var(--ink-3); } .pays { display: grid; gap: 8px; } .pay { display: grid; grid-template-columns: 20px 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: .9375rem; line-height: 1.35; cursor: pointer; transition: border-color .2s, background-color .2s; } .pay:has(input:checked) { border-color: var(--terra); background: rgba(180, 89, 42, .07); } .pay input { margin: 0; } .pay strong { display: block; font-weight: 500; } .pay .muted { font-size: .8125rem; } .pay__mark { display: grid; place-items: center; height: 34px; border-radius: 9px; font: 700 .6875rem/1 var(--sans); letter-spacing: .08em; } .pay__mark--twint { background: #1D1D1B; color: #fff; } .pay__mark--karte { position: relative; background: linear-gradient(135deg, #3A2116, #8E401C); color: transparent; overflow: hidden; } .pay__mark--karte::before { content: ""; position: absolute; left: 9px; top: 9px; width: 13px; height: 10px; border-radius: 2.5px; background: linear-gradient(135deg, #E9C98F, #B98A45); } .pay__mark--karte::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 247, 238, .55); } .review { display: grid; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 250, 242, .55); box-shadow: inset 0 0 0 1px var(--line); } .review__label { display: flex; justify-content: space-between; align-items: center; min-height: 28px; font: 400 .6875rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--terra-ink); } .review__edit { min-height: 32px; padding: 0; border: 0; background: none; font: 400 .8125rem/1 var(--sans); letter-spacing: .02em; text-transform: none; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); cursor: pointer; } .review__items li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .9375rem; font-variant-numeric: tabular-nums; } .review__address { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; } .cart__tick { width: 68px; height: 68px; fill: none; stroke: var(--terra); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cart__tick :is(circle, path) { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; animation: draw 1s var(--ease-io) .15s forwards; } .cart__tick path { animation-delay: .55s; } @keyframes draw { to { stroke-dashoffset: 0; } } .cart__done-note { max-width: 26em; padding: 10px 14px; border-radius: 12px; background: rgba(180, 89, 42, .1); font-size: .8125rem; line-height: 1.5; color: var(--terra-ink); } @media (prefers-reduced-motion: reduce) { .cart__tick :is(circle, path) { stroke-dashoffset: 0; } } /* ---------- the participation certificate, as in our pitch ---------- */ /* everything is measured in the certificate's own width (cqw), so it reads the same at every size */ .cert { --c-terra: #B4592A; position: relative; container-type: inline-size; width: 100%; aspect-ratio: 6.6 / 4.3; background: #FFFDF9 linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(233, 214, 186, .28)); color: var(--ink); border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 46px 70px -42px rgba(58, 33, 22, .6), 0 10px 24px -16px rgba(58, 33, 22, .35); } .cert::before, .cert::after { content: ""; position: absolute; pointer-events: none; } .cert::before { inset: 2.45cqw; border: max(1.5px, .36cqw) solid var(--c-terra); } .cert::after { inset: 3.8cqw; border: 1px solid var(--c-terra); opacity: .8; } .cert p { position: absolute; margin: 0; white-space: nowrap; } .cert__rosette { position: absolute; left: 54.1cqw; top: 8.6cqw; width: 41.8cqw; height: 41.8cqw; opacity: .78; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .cert__rosette { animation: rosette 90s linear infinite; } } @keyframes rosette { to { transform: rotate(360deg); } } .cert__seal { position: absolute; left: 66.5cqw; top: 21cqw; width: 17cqw; height: 17cqw; display: grid; place-items: center; border-radius: 50%; background: #FFFDF9; box-shadow: 0 0 0 1px var(--c-terra); } .cert__seal svg { width: 58%; height: auto; fill: var(--c-terra); } .cert__eyebrow { left: 8.3cqw; top: 9.4cqw; font: 400 1.95cqw/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--terra-ink); } .cert__name { left: 8.1cqw; top: 13cqw; font: 700 6.6cqw/1.1 var(--brand); } .cert__chf { left: 8.6cqw; top: 26.3cqw; font: 400 2.25cqw/1 var(--sans); letter-spacing: .22em; color: var(--terra-ink); } .cert__chf::before { content: "AB "; } .cert__value { left: 7.4cqw; top: 28.2cqw; font: 700 17.6cqw/1 var(--brand); color: var(--c-terra); letter-spacing: -.01em; } .cert__no { left: 8.3cqw; top: 51.4cqw; font: 600 3cqw/1 var(--brand); } .cert__place { right: 8.3cqw; top: 52cqw; font: 400 2.1cqw/1 var(--sans); color: var(--terra-ink); } .cert__micro { left: 6.4cqw; right: 6.4cqw; top: 58.3cqw; overflow: hidden; text-align: center; font: 500 .82cqw/1 var(--sans); letter-spacing: .14em; color: var(--c-terra); opacity: .9; } /* filled in as the form is (ps.js): the name it is made out to, how many, and the way it ends */ .cert[data-cert] { aspect-ratio: 6.6 / 4.9; } .cert[data-cert] .cert__chf::before { content: none; } .cert[data-cert] .cert__no, .cert[data-cert] .cert__place { top: 61cqw; } .cert[data-cert] .cert__micro { top: 67.6cqw; } .cert__holder { left: 8.3cqw; top: 50cqw; display: grid; gap: 1.2cqw; } .cert__line { font: 400 1.7cqw/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--terra-ink); } .cert__holder [data-cert-name] { max-width: 50cqw; overflow: hidden; text-overflow: ellipsis; font: 600 4cqw/1.15 var(--brand); color: var(--ink-3); transition: color .3s; } .cert.is-named [data-cert-name] { color: var(--ink); } .cert__count { right: 8.3cqw; top: 52.4cqw; font: 600 2.6cqw/1 var(--brand); color: var(--ink); } .cert__stamp { right: 15cqw; top: 41.5cqw; padding: 1.4cqw 2.4cqw 1.1cqw; border: .45cqw solid currentColor; border-radius: 1.2cqw; transform: rotate(-11deg); font: 700 3.1cqw/1 var(--brand); letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra); background: rgba(255, 253, 249, .82); mix-blend-mode: multiply; animation: stamp .45s var(--ease); } .cert__stamp[data-way="behalten"] { color: #3A2116; } @keyframes stamp { from { opacity: 0; transform: rotate(-11deg) scale(1.35); } } /* ---------- on the home page: the way in ---------- */ .join { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); } .join__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 84px); align-items: center; padding: clamp(30px, 4.4vw, 64px); border-radius: 34px; background: rgba(255, 250, 242, .42); box-shadow: inset 0 0 0 1px rgba(180, 89, 42, .16); transition: background-color .4s var(--ease); } .join__card:hover { background: rgba(255, 250, 242, .66); } .join__cert { padding: 6px 4% 10px; } .join__cert .cert { transform: rotate(-3.5deg); transition: transform .7s var(--ease); } .join__card:hover .join__cert .cert { transform: rotate(-1.5deg) translateY(-4px); } .join__copy .display { margin-top: 20px; font-size: clamp(2rem, 3.5vw, 3.3rem); } .join__copy p:not(.eyebrow) { margin-top: 18px; max-width: 30em; color: var(--ink-2); } .join__cta { margin-top: 28px; } @media (max-width: 900px) { .join__card { grid-template-columns: minmax(0, 1fr); border-radius: 28px; } .join__cert { max-width: 440px; } } /* ---------- the page for the participation certificates ---------- */ .ps { background: var(--paper); } .ps > section { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--section); } .ps svg[viewBox="0 0 64 64"] { fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .ps :is(.ps-tile, .ps-way) svg :is(path, circle) { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset 1.6s var(--ease-io); transition-delay: calc(var(--d, 0) * 120ms + 200ms); } .ps :is(.ps-tile, .ps-way).is-in svg :is(path, circle) { stroke-dashoffset: 0; } .ps .ps-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; min-height: min(100svh, 980px); padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 90px)); padding-bottom: clamp(72px, 9vw, 140px); } .ps-hero__copy { grid-column: 1 / span 6; } .ps-hero__title { margin-top: 24px; font-size: clamp(2.6rem, 5.4vw, 5.2rem); } .ps-hero__lede { margin-top: 26px; max-width: 30em; font-size: 1.1875rem; color: var(--ink-2); } .ps-stock { margin-top: 14px; font-size: .8125rem; letter-spacing: .02em; color: var(--ink-3); } .ps-stock a { text-decoration: underline; text-underline-offset: 3px; } .ps-why { margin-top: 34px; display: grid; gap: 16px; } .ps-why li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; } .ps-why svg { width: 40px; height: 40px; } .ps-why h3 { font: 600 1.125rem/1.2 var(--brand); } .ps-why p { margin-top: 3px; font-size: .9375rem; color: var(--ink-2); } .ps-hero__cert { grid-column: 8 / span 5; perspective: 1200px; } .ps-hero__cert .cert { transform: rotate(-4deg); } .ps-money .display, .ps-steps .display { margin-top: 24px; } .ps-tiles { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ps-tile { padding: 28px 26px 30px; border-radius: 26px; background: rgba(255, 250, 242, .5); box-shadow: inset 0 0 0 1px rgba(180, 89, 42, .12); } .ps-tile svg { width: 52px; height: 52px; } .ps-tile h3 { margin-top: 22px; font: 600 1.35rem/1.15 var(--brand); } .ps-tile p { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); } .ps .ps-choice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .ps-choice__head { grid-column: 1 / span 5; } .ps-choice__head .display { margin-top: 24px; } .ps-choice__head p:not(.eyebrow) { margin-top: 22px; max-width: 28em; color: var(--ink-2); } .ps-ways { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ps-way { padding: 30px 28px 32px; border-radius: 28px; background: var(--terra); color: var(--milk); } .ps-way + .ps-way { background: #3A2116; } .ps .ps-way svg { width: 56px; height: 56px; stroke: var(--cream-light); } .ps-way h3 { margin-top: 26px; font: 600 1.6rem/1.1 var(--brand); } .ps-way p { margin-top: 10px; font-size: .9375rem; line-height: 1.55; color: rgba(255, 253, 249, .9); } .ps-steps__list { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 40px); border-top: 1px solid var(--line); padding-top: 30px; } .ps-steps__no { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--terra); color: var(--milk); font: 600 1.25rem/1 var(--brand); } .ps-steps__list h3 { margin-top: 18px; font: 600 1.3rem/1.15 var(--brand); } .ps-steps__list p { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); } .ps-steps__cash { margin-top: 34px; font-size: .9375rem; color: var(--ink-2); } .ps-steps__cash a { text-decoration: underline; text-underline-offset: 3px; } .ps-form__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .ps-form__main { grid-column: 1 / span 6; } .ps-form__main .display { margin-top: 24px; } .ps-order { margin-top: 34px; max-width: 560px; } .ps-soon { margin-top: 22px; max-width: 32em; color: var(--ink-2); } .ps-order .order__pay a { text-decoration: underline; text-underline-offset: 3px; } .ps-form__aside { grid-column: 8 / span 5; position: sticky; top: calc(var(--nav-h) + 40px); padding-top: 70px; } .ps-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .ps-count__sum { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; } .ps-count__sum span { font-size: .9375rem; color: var(--ink-3); } .ps-count__sum strong { font: 600 1.6rem/1 var(--brand); } .pick--way { grid-template-columns: 20px 40px minmax(0, 1fr); align-items: center; } .pick--way svg { width: 40px; height: 40px; } .pick--way strong { display: inline; } .pick--way .muted { display: block; } .pick--fav { border-color: rgba(180, 89, 42, .45); background: rgba(180, 89, 42, .06); } .pick__tag, .ps-way__tag { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--terra); color: var(--paper); font: 500 .6875rem/1.2 var(--sans); letter-spacing: .03em; vertical-align: 2px; } .ps-way { position: relative; } .ps-way__tag { position: absolute; top: 30px; right: 26px; margin: 0; background: var(--cream-light); color: var(--terra-ink); } .ps-done { display: grid; justify-items: start; gap: 16px; margin-top: 34px; padding: 34px; border-radius: 28px; background: rgba(255, 250, 242, .55); outline: none; } /* paying with TWINT: the amount and the buyer's code (each to copy), our QR code beside the five steps, then what happens next. The QR code stays on white, as TWINT prints it, so every camera reads it */ .twint-note { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: .9375rem; line-height: 1.35; } .twint-note strong { display: block; font-weight: 500; } .twint-note .muted { font-size: .8125rem; } .twint-soon { margin-top: 10px; padding-left: 2px; font-size: .8125rem; color: var(--ink-3); } .twint-pay__mail { display: grid; gap: 12px; justify-items: start; width: 100%; padding: 18px 20px; border-radius: 16px; background: rgba(180, 89, 42, .12); font-size: .9375rem; line-height: 1.5; } .twint-pay__mail[hidden] { display: none; } .twint-pay__mail strong { font-weight: 600; } .twint-pay__mail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .twint-pay__mail .muted { font-size: .8125rem; } .twint-pay__mail .muted a, .twint-pay__hint a { text-decoration: underline; text-underline-offset: 3px; } .twint-pay { max-width: 640px; } .twint-pay .cart__done-text { max-width: 30em; } .twint-pay__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 6px 0 0; } .twint-fact { padding: 14px 16px; border-radius: 16px; background: var(--paper); } .twint-fact dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .twint-fact dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 6px 0 0; } .twint-fact strong { font: 600 1.5rem/1.1 var(--brand); font-variant-numeric: tabular-nums; } .twint-fact--code strong { color: var(--terra-ink); letter-spacing: .04em; } .twint-fact__copy { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; font: 500 .8125rem/1 var(--sans); color: var(--ink); cursor: pointer; } .twint-fact__copy:hover { border-color: var(--terra); color: var(--terra-ink); } .twint-pay__grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: center; width: 100%; margin-top: 4px; } .twint-pay__qr { width: 100%; height: auto; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(58, 33, 22, .06), 0 18px 40px -26px rgba(58, 33, 22, .45); } .twint-pay__steps { margin: 0; padding: 0; list-style: none; counter-reset: pay; display: grid; gap: 12px; font-size: .9375rem; line-height: 1.4; } .twint-pay__steps li { counter-increment: pay; position: relative; min-height: 24px; padding: 2px 0 0 38px; } .twint-pay__steps li::before { content: counter(pay); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--terra); color: var(--paper); font: 600 .75rem/1 var(--sans); } .twint-pay__steps strong { white-space: nowrap; } .twint-pay__steps strong { font-weight: 600; } .twint-pay__hint { max-width: 36em; font-size: .875rem; line-height: 1.5; color: var(--ink-2); } .twint-pay__hint strong { font-weight: 600; color: var(--ink); } .twint-pay__next { width: 100%; padding-top: 16px; border-top: 1px solid var(--line); } .twint-pay__label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .twint-pay__next ul { margin: 10px 0 0; padding-left: 1.1em; list-style: disc; display: grid; gap: 6px; font-size: .9375rem; color: var(--ink-2); } .twint-pay__again { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; } .twint-pay__body, .twint-pay__thanks { display: grid; justify-items: start; gap: 16px; } .twint-pay__body[hidden], .twint-pay__thanks[hidden] { display: none; } .twint-pay__paid { width: 100%; margin-top: 4px; } .ps-terms { margin-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ps-terms summary { display: flex; align-items: center; justify-content: space-between; min-height: 64px; cursor: pointer; list-style: none; font-size: 1rem; letter-spacing: .03em; } .ps-terms summary::-webkit-details-marker { display: none; } .ps-terms summary::after { content: "+"; font: 300 1.5rem/1 var(--sans); color: var(--terra); transition: transform .3s var(--ease); } .ps-terms[open] summary::after { transform: rotate(45deg); } .ps-terms ul { margin: 0 0 26px; padding-left: 1.1em; list-style: disc; display: grid; gap: 10px; max-width: 46em; color: var(--ink-2); font-size: .9375rem; } .ps-terms a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { .ps-tiles, .ps-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-choice__head { grid-column: 1 / -1; } .ps-ways { grid-column: 1 / -1; margin-top: 40px; } } @media (max-width: 900px) { .ps .ps-hero { display: block; min-height: 0; padding-top: calc(var(--nav-h) + 28px); } .ps-hero__cert { max-width: 480px; margin: 48px auto 0; padding: 0 4px; } .ps .ps-choice { display: block; } .ps-form__grid { display: block; } .ps-form__aside { display: none; } .ps-order { max-width: none; } } @media (max-width: 560px) { .ps-tiles, .ps-steps__list, .ps-ways { grid-template-columns: minmax(0, 1fr); } .ps-hero__lede { font-size: 1.0625rem; } .ps-tile { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: center; padding: 22px; } .ps-tile svg { grid-row: span 2; } .ps-tile h3 { margin-top: 0; } .ps-done { padding: 26px 22px; } .twint-pay__facts { grid-template-columns: minmax(0, 1fr); } .twint-pay__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .twint-pay__qr { max-width: 240px; } .twint-pay__steps { justify-self: stretch; } } /* ---------- the language: DE · FR · EN ---------- */ /* a small group of three: the language you read in is filled, the other two are a tap away. On phones it sits next to the logo, on wide screens beside the shop; in the menu it stands above the ways to reach us. */ .lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(58, 33, 22, .07); } .lang a { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; font: 500 .75rem/1 var(--sans); letter-spacing: .1em; color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease); } .lang a:hover { color: var(--ink); background: rgba(255, 250, 242, .6); } .lang a[aria-current] { background: var(--terra); color: var(--milk); } .nav[data-ink="light"] .lang { background: rgba(255, 250, 242, .12); } .nav[data-ink="light"] .lang a { color: rgba(255, 253, 249, .82); } .nav[data-ink="light"] .lang a:hover { color: var(--milk); background: rgba(255, 250, 242, .14); } .nav[data-ink="light"] .lang a[aria-current] { background: var(--milk); color: var(--terra-ink); } .lang--bar { display: none; } .nav__end .lang--end { margin-right: 6px; } .menu .lang--menu { margin: 0 0 6px; background: rgba(58, 33, 22, .08); } .legal-head .lang--end { display: inline-flex; margin-left: auto; margin-right: 16px; } @media (max-width: 900px) { .nav__end .lang--end { display: none; } .lang--bar { display: inline-flex; grid-column: 2; justify-self: start; margin-left: 10px; } } @media (pointer: coarse) { .lang a { height: 36px; min-width: 36px; } /* with its frame, 42px to tap */ } /* narrow phones: the three letters, the shop and the menu still fit beside the logo */ @media (max-width: 430px) { .lang--bar { margin-left: 8px; } .lang--bar a { min-width: 31px; padding: 0 4px; letter-spacing: .06em; } .nav__cta { padding: 0 15px; } } @media (max-width: 360px) { .lang--bar { margin-left: 6px; } .nav__menu { padding-left: 8px; } .nav__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }