/* Fonts: Young Serif (titles) and Hanken Grotesk (text), SIL OFL, self-hosted, latin subset. Young Serif has a single weight: font-synthesis stays off so the browser never fakes bold or italic. */ @font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/young-serif-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/hanken-grotesk-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ========================================================================== Zohra — La Vitrine des Caractères Flat colours, square corners, no gradients, no shadows. Each cookie brings its own colour through --c (background) and --ink (text). ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --farine: #F6F1E9; --sucre: #FFFDF9; --kraft: #E7DCCB; --kraft-box: #D2B08A; --kraft-deep: #BF9A72; --filet: #DCCFBF; --muted: #75594A; --cacao-doux: #5E4637; --cacao: #2B1810; --praline: #C62F55; --rose: #E9839B; --creme: #E5D8C8; --f-display: 'Young Serif', Georgia, 'Times New Roman', serif; --f-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --gutter: clamp(16px, 4vw, 56px); --section: clamp(56px, 7vw, 104px); --ease-pop: cubic-bezier(.2, 1.5, .4, 1); --ease-out: cubic-bezier(.2, .8, .2, 1); --c: var(--kraft); --ink: var(--cacao); } /* 2. Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.zh { margin: 0; background: var(--farine); color: var(--cacao); font-family: var(--f-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; } body.zh.zh-lock { overflow: hidden; } :where(.zh) img { max-width: 100%; height: auto; display: block; } :where(.zh) a { color: inherit; } :where(.zh) :where(h1, h2, h3, h4, p, ul, ol, dl, figure) { margin: 0; } :where(.zh) :where(button, input, select, textarea) { font: inherit; color: inherit; } .zh :focus-visible { outline: 3px solid var(--praline); outline-offset: 2px; } .zh ::selection { background: var(--cacao); color: var(--farine); } .zh-main { display: block; min-height: 50vh; } .zh-main:focus { outline: none; } .zh-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .zh-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--cacao); color: var(--farine); font-weight: 600; text-decoration: none; } .zh-skip:focus { top: 12px; } .zh [hidden] { display: none !important; } .zh-hp, .tsg-hp { position: absolute !important; left: -9999px !important; } /* 3. Type ----------------------------------------------------------------- */ .zh-display { font-family: var(--f-display); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-size: clamp(48px, 6.2vw, 100px); text-wrap: balance; } .zh-display em { font-style: normal; color: var(--praline); } .zh-display--giant { font-size: clamp(56px, 9vw, 160px); line-height: .92; letter-spacing: -0.03em; } .zh-display--xl { font-size: clamp(44px, 5.6vw, 92px); } .zh-display--page { font-size: clamp(48px, 6.4vw, 108px); line-height: .96; } .zh-display--lg { font-size: clamp(38px, 4.4vw, 68px); } .zh-display--md { font-size: clamp(28px, 3vw, 46px); line-height: 1; } .zh-label { font-family: var(--f-sans); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; } .zh-accent { color: var(--praline); } .zh-label--pink { color: var(--rose); } .zh-muted { color: var(--muted); } .zh-quote { font-family: var(--f-display); font-style: italic; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.01em; } .zh-quote--upright { font-style: normal; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; } .zh-signature { font-family: var(--f-display); font-style: italic; font-size: 34px; line-height: 1; } .zh-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s ease, text-underline-offset .2s ease; } .zh-link:hover { color: var(--praline); text-underline-offset: 8px; } .zh-link--small { font-size: 14px; } .zh-opt { font-weight: 400; color: var(--muted); } /* 4. Buttons -------------------------------------------------------------- */ .zh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 0; font-family: var(--f-sans); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s var(--ease-pop), border-color .2s ease; } .zh-btn:active { transform: scale(.96); } .zh-btn .zh-i { transition: transform .25s var(--ease-pop); } .zh-btn:hover .zh-i-arrow { transform: translateX(4px); } .zh-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; } .zh-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; } .zh-btn--block { display: flex; width: 100%; } .zh-btn--dark { background: var(--cacao); color: var(--farine); } .zh-btn--dark:hover { background: var(--praline); color: var(--sucre); } .zh-btn--ghost { background: transparent; color: var(--cacao); border-color: var(--cacao); } .zh-btn--ghost:hover { background: var(--cacao); color: var(--sucre); } .zh-btn--cream { background: var(--farine); color: var(--cacao); } .zh-btn--cream:hover { background: var(--rose); color: var(--cacao); } .zh-btn--ink { background: var(--ink); color: var(--c); } .zh-btn--ink:hover { background: var(--cacao); color: var(--sucre); } .zh-btn--pink { background: var(--rose); color: var(--cacao); } .zh-btn--pink:hover:not(:disabled) { background: var(--farine); } .zh-btn--ghost-light { background: transparent; color: var(--farine); border-color: var(--farine); } .zh-btn--ghost-light:hover { background: var(--farine); color: var(--cacao); } .zh-btn:disabled { background: var(--cacao-doux); color: #CDB9A5; cursor: not-allowed; } .zh-btnrow { display: flex; flex-wrap: wrap; gap: 12px; } .zh-textbtn { background: none; border: 0; padding: 10px 4px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; font-size: 14px; } .zh-iconbtn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease-pop); } .zh-iconbtn:hover { transform: scale(1.12) rotate(-6deg); } /* Add-to-cart square button in cards. */ .zh-add-form { margin: 0; display: inline-flex; } .zh .added_to_cart { display: none !important; } .zh-add { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--c); border: 0; cursor: pointer; font-weight: 600; font-size: 14px; transition: transform .25s var(--ease-pop), background .2s ease, color .2s ease; } .zh-add:hover { transform: rotate(90deg) scale(1.08); } .zh-add:has(span):hover { transform: translateY(-2px); } .zh-add .zh-i { transition: transform .3s var(--ease-pop); } .zh-add:has(span):hover .zh-i { transform: rotate(90deg); } .zh-add.is-busy .zh-i { animation: zh-spin .6s linear infinite; } .zh-add.is-done { background: var(--cacao); color: var(--farine); } .zh-add--big { min-height: 56px; padding: 0 26px; font-size: 16px; } .zh-add--text { background: var(--cacao); color: var(--farine); } .zh-soldout { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .75; } .zh-soldout--big { font-size: 15px; padding: 16px 0; } /* 5. Announce + header ---------------------------------------------------- */ .zh-announce { background: var(--cacao); color: var(--farine); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 40px; padding: 9px var(--gutter); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .zh-header { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px var(--gutter); background: var(--farine); border-bottom: 1px solid var(--cacao); transition: padding .3s var(--ease-out); } .admin-bar .zh-header { top: 32px; } .zh-header.is-scrolled { padding-top: 6px; padding-bottom: 6px; } .zh-header-burger { display: none; } .zh-nav-list { display: flex; flex-wrap: nowrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; } .zh-nav-list a { position: relative; display: inline-block; padding: 8px 0; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; } .zh-nav-list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--praline); transition: right .3s var(--ease-out); } .zh-nav-list a:hover::after, .zh-nav-list .current-menu-item > a::after { right: 0; } .zh-wordmark { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; text-align: center; } .zh-wordmark-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } .zh-wordmark-name em { font-weight: 400; } .zh-wordmark-sub { font-size: 9.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } a.zh-wordmark:hover .zh-wordmark-name { animation: zh-wobble .6s var(--ease-pop); } .zh-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; } .zh-cartbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin-left: 8px; background: var(--cacao); color: var(--farine); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s ease; } .zh-cartbtn:hover { background: var(--praline); } .zh-cart-count { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--rose); color: var(--cacao); font-size: 12px; font-weight: 700; } .zh-cart-count[data-count="0"] { background: transparent; color: inherit; } .zh-cartbtn.is-bump { animation: zh-gulp .55s var(--ease-pop); } .zh-cartbtn.is-bump .zh-cart-count { animation: zh-pop .5s var(--ease-pop) .1s; } /* Search + overlay + drawers. */ .zh-search { position: sticky; top: 69px; z-index: 55; background: var(--sucre); border-bottom: 1px solid var(--cacao); padding: 12px var(--gutter); animation: zh-down .3s var(--ease-out); } .zh-search-form { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto; } .zh-search-form input { flex: 1; min-height: 52px; border: 0; border-bottom: 2px solid var(--cacao); background: transparent; font-family: var(--f-display); font-size: 24px; padding: 0 4px; } .zh-search-form input:focus { outline: none; border-color: var(--praline); } .zh-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(43, 24, 16, .45); animation: zh-fade .25s ease; } .zh-drawer, .zh-mobile-nav { position: fixed; top: 0; bottom: 0; z-index: 100; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--farine); color: var(--cacao); transition: transform .45s var(--ease-out), visibility 0s linear .45s; visibility: hidden; } .zh-drawer { right: 0; transform: translateX(105%); } .zh-mobile-nav { left: 0; transform: translateX(-105%); width: min(360px, 88vw); } .zh-drawer.is-open, .zh-mobile-nav.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease-out); } .zh-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--cacao); } .zh-drawer-title { font-family: var(--f-display); font-size: 28px; font-weight: 600; } .zh-drawer-items { flex: 1; display: flex; flex-direction: column; min-height: 0; } .zh-drawer-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .zh-drawer-item { display: grid; grid-template-columns: 76px 1fr 44px; gap: 14px; align-items: center; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--filet); animation: zh-rise .4s var(--ease-out) both; } .zh-drawer-thumb { position: relative; width: 76px; height: 76px; background: var(--c); overflow: hidden; } .zh-drawer-thumb img { width: 100%; height: 100%; object-fit: cover; } .zh-drawer-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); } .zh-drawer-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zh-drawer-name { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.1; text-decoration: none; } .zh-drawer-sub { font-size: 13px; color: var(--muted); line-height: 1.4; } .zh-drawer-qty { font-size: 14px; font-weight: 600; } .zh-drawer-remove { width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; transition: transform .2s var(--ease-pop), color .2s ease; } .zh-drawer-remove:hover { color: var(--praline); transform: rotate(90deg); } .zh-drawer-foot { padding: 18px 22px 22px; border-top: 1.5px solid var(--cacao); display: flex; flex-direction: column; gap: 10px; background: var(--sucre); } .zh-drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; } .zh-drawer-total strong { font-family: var(--f-display); font-size: 30px; } .zh-drawer-note { font-size: 13px; color: var(--muted); } .zh-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; } .zh-drawer-mascot { width: 220px; animation: zh-bob 3.2s ease-in-out infinite; } .zh-drawer-empty-title { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; } .zh-mobile-list { list-style: none; margin: 0; padding: 12px 0; } .zh-mobile-list a { display: block; padding: 14px 22px; font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1.05; text-decoration: none; border-bottom: 1px solid var(--filet); } .zh-mobile-nav.is-open .zh-mobile-list li { animation: zh-slide .45s var(--ease-out) both; } .zh-mobile-nav.is-open .zh-mobile-list li:nth-child(2) { animation-delay: .05s; } .zh-mobile-nav.is-open .zh-mobile-list li:nth-child(3) { animation-delay: .1s; } .zh-mobile-nav.is-open .zh-mobile-list li:nth-child(4) { animation-delay: .15s; } .zh-mobile-nav.is-open .zh-mobile-list li:nth-child(5) { animation-delay: .2s; } .zh-mobile-extra { margin-top: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 6px; } .zh-mobile-extra a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; } /* 6. Sections + grids ------------------------------------------------------ */ .zh-section { padding: var(--section) var(--gutter); display: flex; flex-direction: column; gap: 40px; } .zh-section--tight { padding-top: 40px; } .zh-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; } .zh-section-head .zh-label { margin-bottom: 14px; } .zh-grid { display: grid; gap: 24px; } .zh-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .zh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .zh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .zh-grid--flush { gap: 0; } /* 7. Vitrine tile (the signature) ------------------------------------------ */ .zh-tile { position: relative; display: flex; flex-direction: column; background: var(--c); color: var(--ink); transition: transform .35s var(--ease-pop); } .zh-tile:hover { transform: translateY(-6px); z-index: 2; } .zh-tile-media { position: relative; display: block; overflow: hidden; height: 222px; background: var(--c); } .zh-tile--card .zh-tile-media { height: auto; aspect-ratio: 4 / 3; } .zh-tile-photo { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease-out), filter .3s ease; } .zh-tile:hover .zh-tile-photo { transform: scale(1.06) rotate(-1deg); filter: saturate(1.12); } .zh-tile-char { position: absolute; right: 6%; bottom: 0; width: 46%; max-width: 190px; transform: translateY(105%) rotate(8deg); transform-origin: 50% 100%; transition: transform .55s var(--ease-pop); pointer-events: none; } .zh-tile:hover .zh-tile-char, .zh-tile:focus-within .zh-tile-char { transform: translateY(42%) rotate(-4deg); } .zh-tile-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px 20px 18px; background: var(--c); } .zh-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .zh-tile-top .zh-label { font-size: 11px; opacity: .88; } .zh-tile-name { font-family: var(--f-display); font-weight: 600; font-size: 25px; line-height: 1.02; letter-spacing: -0.01em; } .zh-tile--card .zh-tile-name { font-size: 30px; } .zh-tile-name a { text-decoration: none; } .zh-tile-name a::before { content: ""; position: absolute; inset: 0; z-index: 0; } .zh-tile-pitch { font-size: 15px; line-height: 1.5; flex: 1; } .zh-tile-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); } .zh-tile--tile .zh-tile-foot { border-top: 0; padding-top: 0; } .zh-tile-price { font-weight: 700; font-size: 16px; } .zh-tile--card .zh-tile-price { font-family: var(--f-display); font-size: 26px; font-weight: 600; } .zh-tile-price del { opacity: .6; font-size: .8em; } .zh-tile-price ins { text-decoration: none; } .zh-badge { display: inline-block; padding: 5px 8px; background: var(--ink); color: var(--c); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .zh-badge--solid { background: var(--praline); color: var(--sucre); align-self: flex-start; } /* 8. Home ------------------------------------------------------------------ */ .zh-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .zh-hero-head { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 64px); background: var(--farine); border-right: 1px solid var(--cacao); } .zh-hero-copy { display: flex; flex-direction: column; gap: 26px; } .zh-hero-copy .zh-display { font-size: clamp(50px, 6.2vw, 104px); } .zh-hero-text { max-width: 540px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); } .zh-hero-actions { display: flex; flex-direction: column; gap: 22px; } .zh-hero-facts { list-style: none; padding: 20px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; border-top: 1px solid var(--filet); font-size: 14px; } .zh-rotator { display: inline-grid; vertical-align: bottom; color: var(--praline); } .zh-rotator-word { grid-area: 1 / 1; font-style: italic; font-weight: 400; white-space: nowrap; opacity: 0; transform: translateY(.45em) rotate(4deg); transition: opacity .45s ease, transform .6s var(--ease-pop); } .zh-rotator-word.is-on { opacity: 1; transform: none; } .zh-rotator-word.is-out { opacity: 0; transform: translateY(-.45em) rotate(-4deg); } .zh-promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 48px; padding: 40px var(--gutter); background: var(--sucre); border-top: 1px solid var(--cacao); border-bottom: 1px solid var(--cacao); } .zh-promise { display: flex; flex-direction: column; gap: 8px; } .zh-promise-title { font-family: var(--f-display); font-style: italic; font-size: 34px; line-height: 1; } .zh-promise-text { font-size: 15px; line-height: 1.5; color: var(--cacao-doux); } .zh-spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--c); color: var(--ink); } .zh-spot-media { position: relative; overflow: hidden; min-height: 560px; } .zh-spot-media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } .zh-spot-char { position: absolute; left: 50%; bottom: -8%; width: 52%; max-width: 300px; transform: translateX(-50%); animation: zh-bob 3.6s ease-in-out infinite; } .zh-spot-body { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(32px, 5vw, 80px); } .zh-spot-line { font-family: var(--f-display); font-style: italic; font-size: 28px; line-height: 1.2; } .zh-spot-text { max-width: 580px; font-size: 18px; line-height: 1.6; } .zh-spot-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .zh-spot-price { font-family: var(--f-display); font-size: 42px; font-weight: 600; } .zh-spot .zh-profile { max-width: 600px; } .zh-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 40px; margin: 0; padding: 20px 0; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .zh-profile-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .zh-profile dt { font-weight: 600; font-size: 15px; } .zh-profile dd { margin: 0; display: flex; gap: 4px; } .zh-seg { width: 22px; height: 11px; border: 1.5px solid currentColor; } .zh-seg.is-on { background: currentColor; } .is-revealed .zh-seg.is-on, .zh-pdp .zh-seg.is-on { animation: zh-fill .4s var(--ease-pop) both; animation-delay: calc(var(--i) * .07s + .2s); } .zh-atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--cacao); color: var(--farine); } .zh-atelier-copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(32px, 5vw, 80px); } .zh-atelier-copy .zh-btn { align-self: flex-start; } .zh-atelier-text { max-width: 470px; font-size: 18px; line-height: 1.6; color: var(--creme); } .zh-atelier-prices { display: flex; max-width: 470px; border: 1px solid var(--cacao-doux); } .zh-atelier-prices > div { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .zh-atelier-prices > div + div { border-left: 1px solid var(--cacao-doux); } .zh-atelier-prices .zh-label { color: #CDB9A5; } .zh-atelier-prices strong { font-family: var(--f-display); font-size: 36px; font-weight: 600; line-height: 1; } .zh-atelier-demo { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 64px); } .zh-atelier-demo .zh-kraft { width: 100%; max-width: 620px; } /* Kraft box (home demo + builder). */ .zh-kraft { position: relative; background: var(--kraft-box); color: var(--cacao); padding: 18px; overflow: hidden; } .zh-kraft-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 14px; gap: 12px; } .zh-kraft-count { font-family: var(--f-display); font-size: 26px; font-weight: 600; white-space: nowrap; } .zh-kraft-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .zh-kraft-slot { position: relative; aspect-ratio: 1; background: var(--kraft-deep); border: 1.5px solid var(--cacao); overflow: hidden; } .zh-kraft-slot img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } .zh-kraft-plus { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .zh-kraft-plus .zh-label { font-size: 10px; } .zh-kraft-slot:has(img) .zh-kraft-plus { display: none; } .zh-atelier .zh-kraft-slot img[data-zh-demo-item] { opacity: 0; } .zh-atelier .zh-kraft-slot img.is-in { animation: zh-drop .6s var(--ease-pop) both; } .zh-boxcard { display: flex; flex-direction: column; background: var(--sucre); border: 1px solid var(--filet); transition: transform .35s var(--ease-pop); } .zh-boxcard:hover { transform: translateY(-6px) rotate(-.4deg); } .zh-boxcard-media { display: block; overflow: hidden; aspect-ratio: 1; } .zh-boxcard-media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease-out); } .zh-boxcard:hover .zh-boxcard-media img { transform: scale(1.05); } .zh-boxcard-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; } .zh-boxcard-name { font-family: var(--f-display); font-weight: 600; font-size: 27px; line-height: 1.02; } .zh-boxcard-name a { text-decoration: none; } .zh-boxcard-line { flex: 1; font-size: 15px; line-height: 1.5; color: var(--cacao-doux); } .zh-boxcard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--filet); } .zh-boxcard-price { font-family: var(--f-display); font-size: 24px; font-weight: 600; } .zh-from { font-family: var(--f-sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-right: 2px; } .zh-story, .zh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--sucre); border-top: 1px solid var(--cacao); border-bottom: 1px solid var(--cacao); } .zh-story-media, .zh-split-media { min-height: 520px; position: relative; overflow: hidden; border-right: 1px solid var(--cacao); } .zh-story-media > img, .zh-split-media > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } .zh-story-placeholder { position: absolute; inset: 0; background: var(--kraft); display: flex; align-items: flex-end; justify-content: center; } .zh-story-mascot { width: min(70%, 420px); margin-bottom: -4%; } .zh-story-body, .zh-split-body { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(32px, 5vw, 88px); } .zh-story-text { max-width: 580px; font-size: 18px; line-height: 1.7; color: var(--cacao-doux); } .zh-story-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .zh-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px; } .zh-step { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1.5px solid var(--cacao); } .zh-step-num { font-family: var(--f-display); font-weight: 300; font-size: 92px; line-height: .8; color: var(--praline); } .zh-step:hover .zh-step-num { animation: zh-wobble .6s var(--ease-pop); } .zh-step-title { font-family: var(--f-display); font-size: 28px; font-weight: 600; line-height: 1.1; } .zh-step-text { font-size: 16px; line-height: 1.6; color: var(--cacao-doux); } .zh-custom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding: clamp(40px, 5vw, 72px) var(--gutter); background: var(--praline); color: var(--sucre); } .zh-custom > div { max-width: 760px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; } /* 9. Page heads, chips, banners -------------------------------------------- */ .zh-pagehead { padding: clamp(36px, 5vw, 80px) var(--gutter) 32px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--cacao); } .zh-pagehead--compact { padding-bottom: 24px; } .zh-pagehead--compact .zh-display--page { font-size: clamp(40px, 5vw, 76px); } .zh-pagehead--hero { padding-top: clamp(48px, 7vw, 120px); padding-bottom: clamp(40px, 5vw, 80px); } .zh-pagehead--article { border-bottom: 0; max-width: 1100px; } .zh-pagehead-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; } .zh-pagehead-intro { max-width: 720px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); margin-top: 14px; } .zh-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); } .zh-crumbs a { text-decoration: none; } .zh-crumbs a:hover { text-decoration: underline; } .zh-chips { display: flex; flex-wrap: wrap; gap: 8px; } .zh-chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; background: var(--kraft); color: var(--cacao); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s ease, transform .2s var(--ease-pop); } .zh-chip:hover { transform: translateY(-2px); background: var(--filet); } .zh-chip.is-on { background: var(--cacao); color: var(--farine); } .zh-sort select, .woocommerce-ordering select { min-height: 48px; min-width: 240px; padding: 0 14px; background: var(--sucre); border: 1.5px solid var(--cacao); border-radius: 0; font-weight: 600; font-size: 15px; } .woocommerce-ordering { margin: 0; } .zh-banner { margin: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px clamp(20px, 3vw, 48px); background: var(--cacao); color: var(--farine); } .zh-banner p + p { margin-top: 8px; color: var(--creme); } .zh-empty { padding: var(--section) var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .zh-empty-mascot { width: min(320px, 70vw); animation: zh-bob 3.4s ease-in-out infinite; } .zh-empty--404 .zh-empty-mascot { animation: zh-shake-soft 4s ease-in-out infinite; } .zh-notice { padding: 14px 16px; background: var(--kraft); font-weight: 600; } .woocommerce-pagination ul, .nav-links { display: flex; gap: 6px; list-style: none; padding: 0; margin: 20px 0 0; justify-content: center; } .woocommerce-pagination a, .woocommerce-pagination span, .nav-links a, .nav-links span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px; background: var(--kraft); text-decoration: none; font-weight: 600; } .woocommerce-pagination .current, .nav-links .current { background: var(--cacao); color: var(--farine); } /* 10. Product page ---------------------------------------------------------- */ .zh-pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-pdp-visual { position: sticky; top: 69px; align-self: start; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.5fr); background: var(--c); color: var(--ink); } .admin-bar .zh-pdp-visual { top: 101px; } .zh-pdp--plain .zh-pdp-visual { grid-template-columns: minmax(0, 1fr); } .zh-pdp-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kraft); } .zh-pdp-photo > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: opacity .35s ease; } .zh-pdp-photo > img.is-swapping { opacity: 0; } .zh-pdp-thumbs { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; } .zh-pdp-thumb { width: 64px; height: 64px; padding: 0; border: 2px solid var(--sucre); background: var(--sucre); cursor: pointer; } .zh-pdp-thumb.is-on { border-color: var(--cacao); } .zh-pdp-thumb img { width: 100%; height: 100% !important; object-fit: cover; } .zh-pdp-id { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 28px; border-left: 1.5px solid var(--ink); overflow: hidden; } .zh-pdp-num { font-family: var(--f-display); font-weight: 300; font-size: clamp(90px, 11vw, 160px); line-height: .8; } .zh-pdp-char { width: 100%; max-width: 280px; align-self: center; cursor: pointer; animation: zh-bob 3.4s ease-in-out infinite; } .zh-pdp-char.is-wiggle { animation: zh-wiggle .7s var(--ease-pop); } .zh-pdp-info { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 4vw, 60px); } .zh-pdp-title { font-size: clamp(48px, 5vw, 86px); } .zh-kicker { display: block; margin-bottom: 14px; font-family: var(--f-sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--praline); } .zh-pdp-tagline { font-family: var(--f-display); font-style: italic; font-size: 26px; line-height: 1.2; color: var(--cacao-doux); } .zh-pdp-pitch { font-size: 17px; line-height: 1.65; } .zh-pdp-profile { display: flex; flex-direction: column; gap: 10px; } .zh-pdp-profile .zh-profile { grid-template-columns: 1fr; color: var(--cacao); } .zh-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; } .zh-buy-price { font-family: var(--f-display); font-size: 44px; font-weight: 600; margin-right: 8px; } .zh-buy-btn { flex: 1 1 200px; background: var(--cacao); color: var(--farine); } .zh-buy-btn:hover { background: var(--praline); color: var(--sucre); } .zh-qty { display: inline-flex; align-items: center; height: 56px; border: 1.5px solid var(--cacao); } .zh-qty button { width: 48px; height: 100%; display: grid; place-items: center; background: none; border: 0; cursor: pointer; transition: background .2s ease; } .zh-qty button:hover { background: var(--kraft); } .zh-qty input { width: 44px; height: 100%; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 17px; -moz-appearance: textfield; } .zh-qty input::-webkit-outer-spin-button, .zh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .zh-qty input.is-pop { animation: zh-pop .35s var(--ease-pop); } .zh-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--sucre); border: 1px solid var(--filet); text-decoration: none; font-size: 15px; transition: border-color .2s ease; } .zh-upsell:hover { border-color: var(--cacao); } .zh-upsell:hover .zh-i { animation: zh-nudge .6s var(--ease-pop); } .zh-accordion { border-top: 1.5px solid var(--cacao); } .zh-accordion details { border-bottom: 1px solid var(--filet); } .zh-accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-weight: 700; font-size: 16px; } .zh-accordion summary::-webkit-details-marker { display: none; } .zh-accordion summary::after { content: "+"; font-family: var(--f-display); font-size: 28px; font-weight: 400; line-height: 1; transition: transform .3s var(--ease-pop); } .zh-accordion details[open] summary::after { transform: rotate(45deg); } .zh-accordion details p { padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--cacao-doux); } .zh-accordion details[open] > :not(summary) { animation: zh-rise .35s var(--ease-out); } .zh-pdp-story { background: var(--sucre); border-bottom: 1px solid var(--cacao); } /* Editorial prose (descriptions, CGV, FAQ, journal). */ .zh-prose-wrap { align-items: flex-start; } .zh-prose-wrap > .zh-prose { width: 100%; } .zh-prose { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--cacao); } .zh-prose > * + * { margin-top: 1.1em; } .zh-prose h2 { font-family: var(--f-display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; font-weight: 600; margin-top: 1.6em; } .zh-prose h3 { font-family: var(--f-display); font-size: 24px; line-height: 1.15; font-weight: 600; margin-top: 1.4em; } .zh-prose h4, .zh-prose h5, .zh-prose h6 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .zh-prose a { color: var(--praline); text-underline-offset: 3px; } .zh-prose ul, .zh-prose ol { padding-left: 1.2em; } .zh-prose li + li { margin-top: .4em; } .zh-prose hr { border: 0; border-top: 1px solid var(--filet); margin: 2em 0; } .zh-prose img { margin: 1.4em auto; max-height: 520px; width: auto; } .zh-prose blockquote { margin: 1.4em 0; padding: 0 0 0 0; font-family: var(--f-display); font-style: italic; font-size: 26px; line-height: 1.3; } .zh-prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .zh-prose th, .zh-prose td { padding: 10px 12px; border-bottom: 1px solid var(--filet); text-align: left; } /* 11. Box workshop --------------------------------------------------------- */ .zh-studio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); align-items: start; border-bottom: 1px solid var(--cacao); } .zh-studio-pick { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); border-right: 1px solid var(--cacao); } .zh-studio-sub { font-family: var(--f-display); font-style: italic; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; color: var(--praline); } .zh-studio-text { font-size: 18px; line-height: 1.55; color: var(--cacao-doux); max-width: 620px; } .zh-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-top: 10px; } .zh-pick { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; text-align: left; cursor: pointer; background: var(--c); color: var(--ink); transition: transform .3s var(--ease-pop), opacity .3s ease; } .zh-pick:hover:not(:disabled) { transform: translateY(-5px) rotate(-.6deg); } .zh-pick:active:not(:disabled) { transform: scale(.95); } .zh-pick:disabled { cursor: not-allowed; opacity: .5; } .zh-pick.is-picked { outline: 3px solid var(--cacao); outline-offset: -3px; } .zh-pick-media { position: relative; display: block; height: 150px; overflow: hidden; } .zh-pick-photo { width: 100%; height: 100% !important; object-fit: cover; } .zh-pick-char { position: absolute; right: 4%; bottom: 0; width: 52%; transform: translateY(100%) rotate(10deg); transition: transform .5s var(--ease-pop); pointer-events: none; } .zh-pick:hover .zh-pick-char, .zh-pick.is-bounce .zh-pick-char { transform: translateY(40%) rotate(-5deg); } .zh-pick-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; } .zh-pick-name { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.05; min-height: 42px; } .zh-pick-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .zh-pick-foot .zh-label { font-size: 10.5px; } .zh-pick-badge { min-width: 30px; height: 30px; padding: 0 6px; display: grid; place-items: center; background: var(--ink); color: var(--c); font-weight: 700; font-size: 14px; } .zh-pick.is-bounce .zh-pick-badge { animation: zh-pop .45s var(--ease-pop); } .zh-studio-box { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.6vw, 36px); background: var(--cacao); color: var(--farine); } .admin-bar .zh-studio-box { top: 104px; } @media (max-height: 959px) { .zh-studio-box { position: static; } } .zh-studio-box > * { flex-shrink: 0; } .zh-formats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--farine); } .zh-format { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; color: var(--farine); border: 0; cursor: pointer; font-weight: 600; font-size: 15px; transition: background .2s ease, color .2s ease; } .zh-format span { font-weight: 400; font-size: 13px; } .zh-format + .zh-format { border-left: 1.5px solid var(--farine); } .zh-format[aria-checked="true"] { background: var(--farine); color: var(--cacao); } .zh-kraft--live .zh-kraft-slot { transition: background .2s ease; } .zh-kraft--live .zh-kraft-slot.is-full { background: var(--c); border-color: var(--cacao); cursor: pointer; } .zh-kraft--live .zh-kraft-slot.is-new > img:first-child { animation: zh-drop .55s var(--ease-pop) both; } .zh-kraft-slot .zh-kraft-char { position: absolute; inset: auto -8% -18% auto; width: 62%; height: auto !important; object-fit: contain; } .zh-kraft-slot.is-new .zh-kraft-char { animation: zh-peek .6s var(--ease-pop) .15s both; } .zh-kraft-n { font-family: var(--f-display); font-weight: 300; font-size: 30px; line-height: 1; } .zh-kraft-x { position: absolute; top: 0; right: 0; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; background: var(--cacao); color: var(--farine); opacity: 0; transition: opacity .2s ease; } .zh-kraft-slot.is-full:hover .zh-kraft-x, .zh-kraft-slot.is-full:focus-visible .zh-kraft-x { opacity: 1; } .zh-kraft-slot.is-leaving img { animation: zh-poof .35s ease forwards; } .zh-kraft-slot button.zh-kraft-btn { position: absolute; inset: 0; z-index: 3; background: transparent; border: 0; cursor: pointer; } .zh-kraft-lid { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--kraft-box); border: 3px solid var(--cacao); transform: translateY(-104%); transition: transform .6s var(--ease-pop); text-align: center; padding: 16px; } .zh-kraft-lid-label { font-family: var(--f-display); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; } .zh-kraft-mascot { width: 52%; max-width: 220px; } .zh-kraft.is-closed .zh-kraft-lid { transform: none; } .zh-kraft.is-closed .zh-kraft-mascot { animation: zh-jump .9s var(--ease-pop) .45s 2; } .zh-kraft.is-closed .zh-kraft-lid:hover { transform: translateY(-62%); } .zh-studio-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .zh-studio-lines li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--cacao-doux); font-size: 13px; line-height: 1.2; animation: zh-pop .35s var(--ease-pop) both; } .zh-studio-lines .zh-swatch { width: 10px; height: 20px; background: var(--c); flex: none; } .zh-studio-lines .zh-line-qty { font-weight: 700; } .zh-studio-lines .zh-empty-line { background: transparent; color: #CDB9A5; padding-left: 0; animation: none; } .zh-studio-gift summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: 14px; } .zh-studio-gift summary::-webkit-details-marker { display: none; } .zh-studio-gift summary::after { content: "+"; margin-left: auto; font-family: var(--f-display); font-size: 24px; transition: transform .3s var(--ease-pop); } .zh-studio-gift[open] summary::after { transform: rotate(45deg); } .zh-studio-gift .zh-opt { color: #CDB9A5; font-weight: 400; } .zh .zh-studio-box .zh-studio-gift textarea { width: 100%; min-height: 64px; padding: 12px 14px; background: transparent; border: 1px solid var(--cacao-doux); color: var(--farine); resize: vertical; } .zh .zh-studio-box .zh-studio-gift textarea:focus { outline: none; border-color: var(--rose); } .zh-counter { display: block; text-align: right; font-size: 12px; color: #CDB9A5; margin-top: 4px; } .zh-studio-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .zh-studio-hint { font-size: 15px; color: #CDB9A5; } .zh-studio-price { font-family: var(--f-display); font-size: 42px; font-weight: 600; line-height: 1; } .zh-studio-price.is-pop { animation: zh-pop .4s var(--ease-pop); } .zh-progress { height: 8px; background: var(--cacao-doux); } .zh-progress span { display: block; height: 100%; width: 0; background: var(--rose); transition: width .4s var(--ease-pop); } .zh-studio-error { padding: 12px 14px; background: var(--praline); color: var(--sucre); font-weight: 600; font-size: 14px; animation: zh-shake .45s ease; } .zh-studio-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .zh-studio-tools .zh-textbtn { color: #CDB9A5; } .zh-studio-mbar { display: none; } @media (max-width: 1000px) { .zh-studio-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--cacao); color: var(--farine); transition: transform .35s var(--ease-out); } .zh-studio-mbar.is-hidden { transform: translateY(110%); } .zh-studio-mbar.is-full .zh-btn { animation: zh-gulp .6s var(--ease-pop); } .zh-studio-mbar-info { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .zh-studio-mbar .zh-progress { height: 6px; } .zh-studio-mbar .zh-progress span { transition: width .4s var(--ease-pop); } } .zh-password .show-password-input { display: none !important; } /* 12. Story page ------------------------------------------------------------ */ .zh-ingredients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--cacao); border-left: 1px solid var(--filet); } .zh-ingredient { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 32px; background: var(--sucre); border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); transition: background .25s ease; } .zh-ingredient:hover { background: var(--kraft); } .zh-ingredient-name { font-family: var(--f-display); font-weight: 600; font-size: 30px; line-height: 1; } .zh-ingredient-text { font-size: 15px; line-height: 1.55; color: var(--cacao-doux); } .zh-never { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 24px 28px; background: var(--cacao); color: var(--farine); } .zh-never-word { font-family: var(--f-display); font-size: 26px; text-decoration: line-through; text-decoration-thickness: 2px; } .zh-never-word:hover { animation: zh-shake .4s ease; } .zh-wall { border-top: 1px solid var(--cacao); } .zh-wall-head { padding: var(--section) var(--gutter) 40px; } .zh-wall-text { max-width: 460px; font-size: 18px; line-height: 1.6; color: var(--cacao-doux); } .zh-band { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 18px var(--gutter); background: var(--c); color: var(--ink); text-decoration: none; transition: padding-left .35s var(--ease-out); } .zh-band:hover { padding-left: calc(var(--gutter) + 40px); } .zh-band-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.02em; } .zh-band-char { position: absolute; right: 22%; top: 50%; width: 120px; transform: translate(0, 120%) rotate(12deg); transition: transform .5s var(--ease-pop); pointer-events: none; } .zh-band:hover .zh-band-char { transform: translate(0, -42%) rotate(-6deg); } .zh-closing { padding: var(--section) var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } /* 13. Contact + forms -------------------------------------------------------- */ .zh-form { display: flex; flex-direction: column; gap: 18px; } .zh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; } .zh-field { display: flex; flex-direction: column; gap: 8px; margin: 0; } .zh-field label { font-weight: 600; font-size: 15px; } .zh .zh-field input, .zh .zh-field select, .zh .zh-field textarea, .zh .woocommerce form .form-row input.input-text, .zh .woocommerce form .form-row textarea, .zh .woocommerce form .form-row select { width: 100%; min-height: 54px; padding: 12px 16px; background: var(--sucre); border: 1.5px solid var(--cacao); border-radius: 0; font-size: 16px; color: var(--cacao); transition: border-color .2s ease, background .2s ease, transform .2s var(--ease-pop); } .zh .zh-field textarea { min-height: 140px; resize: vertical; } .zh .zh-field input:focus, .zh .zh-field select:focus, .zh .zh-field textarea:focus { outline: none; border-color: var(--praline); background: #FFFFFF; } .zh-field.is-invalid input, .zh-field.is-invalid textarea { border-color: var(--praline); animation: zh-shake .4s ease; } .zh-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; } .zh-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cacao); flex: none; } .zh-form-status { font-weight: 600; min-height: 1px; } .zh-form-status.is-error { color: var(--praline); } .zh-form .zh-btn { align-self: flex-start; } .zh-form .zh-btn--block { align-self: stretch; } .zh-form .zh-btn.is-busy { pointer-events: none; opacity: .8; } /* WooCommerce notices. */ .zh .woocommerce-message, .zh .woocommerce-info, .zh .woocommerce-error, .zh .wc-block-components-notice-banner { list-style: none; margin: 0 0 16px; padding: 14px 18px; border: 0; border-radius: 0; background: var(--kraft); color: var(--cacao); font-weight: 600; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .zh .woocommerce-message { background: #E3EDD3; } .zh .woocommerce-error { background: #F7DADF; color: #7A1424; animation: zh-shake .45s ease; } .zh .woocommerce-error li + li { margin-top: 4px; } .zh .woocommerce-message .button, .zh .woocommerce-info .button { order: 2; background: var(--cacao); color: var(--farine); padding: 10px 16px; text-decoration: none; border-radius: 0; } .zh .woocommerce-message::before, .zh .woocommerce-info::before, .zh .woocommerce-error::before { display: none; } /* 14. Sign-in ---------------------------------------------------------------- */ .zh-authpage, .zh-authpage-inner { display: block; } .zh-auth { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: calc(100vh - 110px); } .zh-auth-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 64px) clamp(24px, 4vw, 64px) 0; background: var(--c); color: var(--ink); transition: background 1.2s ease, color 1.2s ease; } .zh-auth-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; font-weight: 600; text-decoration: none; } .zh-auth-back:hover .zh-i { animation: zh-nudge-left .6s var(--ease-pop); } .zh-auth-copy { display: flex; flex-direction: column; gap: 20px; max-width: 640px; } .zh-auth-sub { font-size: 18px; line-height: 1.55; max-width: 460px; } .zh-auth-parade { display: flex; align-items: flex-end; gap: 0; margin: 0 -2% -2px; } .zh-auth-parade img { width: 20%; margin-right: -2%; animation: zh-peek 3s var(--ease-pop) both, zh-bob 3.4s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + 1s); transform-origin: 50% 100%; } .zh-auth-parade img:hover { animation: zh-jump .8s var(--ease-pop); } .zh-auth-panel { display: flex; align-items: center; justify-content: center; padding: 180px clamp(16px, 4vw, 64px) 56px; background: var(--farine); } .zh-auth-card { position: relative; width: 100%; max-width: 460px; padding: 34px clamp(22px, 3vw, 40px) 30px; background: var(--sucre); border: 1.5px solid var(--cacao); display: flex; flex-direction: column; gap: 18px; } .zh-auth-mascot { position: absolute; left: 50%; bottom: calc(100% - 46px); width: 230px; height: 230px; transform: translateX(-50%); pointer-events: none; } .zh-auth-mascot img { position: absolute; inset: 0; width: 100%; height: 100% !important; transition: opacity .25s ease, transform .45s var(--ease-pop); } .zh-auth-look { transform: translateY(0); } .zh-auth-hide, .zh-auth-oops { opacity: 0; transform: translateY(14px); } .zh-auth.is-secret .zh-auth-look { opacity: 0; transform: translateY(10px); } .zh-auth.is-secret .zh-auth-hide { opacity: 1; transform: translateY(0); animation: zh-squish .45s var(--ease-pop); } .zh-auth.is-typing .zh-auth-look { transform: translateY(-6px) rotate(-3deg); } .zh-auth.has-error .zh-auth-look, .zh-auth.has-error .zh-auth-hide { opacity: 0; } .zh-auth.has-error .zh-auth-oops, .zh-auth-mascot.is-oops .zh-auth-oops { opacity: 1; transform: none; } .zh-auth.has-error .zh-auth-card { animation: zh-shake .5s ease; } .zh-auth-mascot.is-oops img { animation: zh-bob 3.2s ease-in-out infinite; } .zh-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--cacao); } .zh-auth-tabs button { min-height: 48px; background: transparent; border: 0; cursor: pointer; font-weight: 600; font-size: 15px; transition: background .2s ease, color .2s ease; } .zh-auth-tabs button[aria-selected="true"] { background: var(--cacao); color: var(--farine); } .zh-auth-title { font-family: var(--f-display); font-weight: 600; font-size: 38px; line-height: 1; } .zh-auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .zh-auth-note { font-size: 14px; line-height: 1.55; color: var(--cacao-doux); } .zh-auth-notices:empty { display: none; } .zh-auth [role="tabpanel"]:not([hidden]) { display: flex; flex-direction: column; gap: 18px; animation: zh-rise .35s var(--ease-out); } .zh-password { position: relative; display: block; } .zh-password input { padding-right: 56px !important; } .zh-password-toggle { position: absolute; right: 4px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); display: grid; place-items: center; background: none; border: 0; cursor: pointer; } .zh-password-toggle[aria-pressed="true"] { color: var(--praline); } /* 15. Account, cart & checkout blocks --------------------------------------- */ .zh-wcpage { padding: 32px var(--gutter) var(--section); } .zh-wcpage-inner { max-width: 1280px; margin: 0 auto; } .zh .woocommerce-account .woocommerce, .zh-wcpage-inner > .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } .zh .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--cacao); } .zh .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--filet); font-weight: 600; text-decoration: none; transition: background .2s ease, padding-left .25s var(--ease-out); } .zh .woocommerce-MyAccount-navigation a:hover { background: var(--kraft); padding-left: 22px; } .zh .woocommerce-MyAccount-navigation .is-active a { background: var(--cacao); color: var(--farine); } .zh .woocommerce-MyAccount-content { min-width: 0; display: flex; flex-direction: column; gap: 24px; } .zh-hello { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: var(--rose); } .zh-hello-mascot { width: 140px; flex: none; animation: zh-wave 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .zh-lastorder { padding: 20px 24px; background: var(--sucre); border: 1px solid var(--filet); display: flex; flex-direction: column; gap: 6px; } .zh-lastorder-title { font-family: var(--f-display); font-size: 26px; font-weight: 600; } .zh-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .zh-shortcuts a { display: flex; flex-direction: column; gap: 14px; padding: 20px; min-height: 120px; background: var(--kraft); text-decoration: none; font-weight: 700; transition: transform .25s var(--ease-pop), background .2s ease; } .zh-shortcuts a:hover { transform: translateY(-4px) rotate(-1deg); background: var(--filet); } .zh-shortcuts a.is-pink { background: var(--praline); color: var(--sucre); } .zh .woocommerce-MyAccount-content table, .zh .woocommerce-table { width: 100%; border-collapse: collapse; font-size: 15px; } .zh .woocommerce-MyAccount-content th, .zh .woocommerce-MyAccount-content td, .zh .woocommerce-table th, .zh .woocommerce-table td { padding: 12px 10px; border-bottom: 1px solid var(--filet); text-align: left; } .zh .woocommerce .button, .zh .woocommerce button.button, .zh .woocommerce a.button, .zh .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--cacao); color: var(--farine); border: 0; border-radius: 0; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; } .zh .woocommerce .button:hover { background: var(--praline); color: var(--sucre); } .zh .woocommerce form .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; } .zh .woocommerce form .form-row label { font-weight: 600; font-size: 15px; } .zh .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .zh .woocommerce-Address { padding: 20px; background: var(--sucre); border: 1px solid var(--filet); } .zh .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .zh .woocommerce-Address-title h2 { font-family: var(--f-display); font-size: 24px; } .zh-thanks { display: flex; align-items: center; gap: 28px; padding: 28px; margin-bottom: 28px; background: var(--rose); } .zh-thanks-mascot { width: 200px; flex: none; animation: zh-jump 1s var(--ease-pop) 3; } .zh-thanks > div { display: flex; flex-direction: column; gap: 10px; } .zh .woocommerce-order-overview { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--filet); } .zh .woocommerce-order-overview li { padding: 16px 18px; border-right: 1px solid var(--filet); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .zh .woocommerce-order-overview strong { display: block; margin-top: 6px; font-size: 18px; text-transform: none; letter-spacing: 0; } /* Cart & checkout blocks: same flat language. */ .zh .wc-block-components-button:not(.is-link), .zh .wc-block-cart__submit-button, .zh .wc-block-components-checkout-place-order-button { border-radius: 0 !important; background: var(--cacao) !important; color: var(--farine) !important; min-height: 56px; font-weight: 600; box-shadow: none !important; } .zh .wc-block-components-button:not(.is-link):hover { background: var(--praline) !important; } .zh .wc-block-components-text-input input, .zh .wc-block-components-combobox .components-combobox-control input, .zh .wc-block-components-textarea, .zh .wc-blocks-components-select__select, .zh .wc-block-components-select-input input { border-radius: 0 !important; border: 1.5px solid var(--cacao) !important; background: var(--sucre) !important; } .zh .wc-block-components-quantity-selector { border-radius: 0 !important; border: 1.5px solid var(--cacao) !important; } .zh .wc-block-components-quantity-selector::after { display: none; } .zh .wc-block-components-totals-wrapper, .zh .wc-block-cart-items, .zh .wc-block-components-panel { border-color: var(--filet) !important; } .zh .wc-block-components-product-name { font-family: var(--f-display); font-size: 20px !important; font-weight: 600; text-decoration: none; } .zh .wc-block-components-product-metadata { font-size: 14px; color: var(--muted); } .zh .wc-block-cart-item__image img, .zh .wc-block-components-order-summary-item__image img { border-radius: 0 !important; } .zh .wc-block-components-title, .zh .wc-block-components-checkout-step__title { font-family: var(--f-display) !important; font-weight: 600 !important; font-size: 26px !important; } .zh .wc-block-components-sidebar-layout .wc-block-components-sidebar { background: var(--sucre); padding: 24px !important; } .zh .wc-block-components-radio-control__option, .zh .wc-block-components-radio-control-accordion-option { border-radius: 0 !important; } .zh .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .zh .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-family: var(--f-display); font-size: 26px; } .zh .wp-block-woocommerce-empty-cart-block { text-align: center; } .zh .wp-block-woocommerce-empty-cart-block::before { content: ""; display: block; width: 240px; height: 240px; margin: 0 auto 10px; background: var(--zh-empty-img) center / contain no-repeat; animation: zh-bob 3.2s ease-in-out infinite; } .zh .wc-block-cart__empty-cart__title { font-family: var(--f-display); font-size: 40px; } .zh .wc-block-cart__empty-cart__title::before { display: none !important; } .zh .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; } .zh .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { font-family: var(--f-display); font-size: 30px; margin: 40px 0 20px; } .zh .wc-block-grid__product-title { font-family: var(--f-display); font-size: 19px; font-weight: 600; } .zh .wc-block-grid__product .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 0; background: var(--cacao); color: var(--farine); text-decoration: none; font-weight: 600; font-size: 14px; } .zh .wc-block-grid__product-link { text-decoration: none; } /* 16. Journal ------------------------------------------------------------- */ .zh-post { display: flex; flex-direction: column; background: var(--sucre); border: 1px solid var(--filet); transition: transform .3s var(--ease-pop); } .zh-post:hover { transform: translateY(-5px); } .zh-post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kraft); } .zh-post-media img { width: 100%; height: 100% !important; object-fit: cover; } .zh-post-ph { display: block; width: 100%; height: 100%; } .zh-post-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; } .zh-post-title { font-family: var(--f-display); font-size: 26px; line-height: 1.1; font-weight: 600; } .zh-post-title a { text-decoration: none; } .zh-post-excerpt { font-size: 15px; color: var(--cacao-doux); flex: 1; } .zh-article-cover { margin: 0 var(--gutter); max-height: 640px; overflow: hidden; } .zh-article-cover img { width: 100%; object-fit: cover; } /* 17. Footer --------------------------------------------------------------- */ .zh-footer { position: relative; background: var(--cacao); color: var(--farine); margin-top: 120px; } .zh-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; padding: clamp(48px, 6vw, 88px) var(--gutter) 40px; } .zh-footer-brand { flex: 1 1 380px; max-width: 520px; display: flex; flex-direction: column; gap: 18px; } .zh-footer .zh-wordmark { align-items: flex-start; text-align: left; } .zh-footer .zh-wordmark-name { font-size: clamp(38px, 4.2vw, 60px); white-space: normal; line-height: .95; } .zh-footer-about { color: var(--creme); max-width: 440px; } .zh-newsletter { display: flex; flex-direction: column; gap: 10px; } .zh-newsletter .zh-label { color: #CDB9A5; } .zh-newsletter form { display: flex; flex-wrap: wrap; gap: 8px; } .zh-newsletter input[type=email], .zh-newsletter input[type=text] { flex: 1 1 220px; min-height: 52px; padding: 0 16px; background: transparent; border: 1px solid #8A6E5C; border-radius: 0; color: var(--farine); } .zh-newsletter button, .zh-newsletter input[type=submit] { min-height: 52px; padding: 0 24px; background: var(--farine); color: var(--cacao); border: 0; border-radius: 0; font-weight: 600; cursor: pointer; } .zh-newsletter button:hover { background: var(--rose); } .zh-footer-cols { flex: 1 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; } .zh-footer-col .zh-label { color: #CDB9A5; margin-bottom: 12px; } .zh-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .zh-footer-list a { display: inline-block; padding: 6px 0; text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease, transform .2s var(--ease-out); } .zh-footer-list a:hover { color: var(--rose); transform: translateX(4px); } .zh-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px var(--gutter) 28px; border-top: 1px solid var(--cacao-doux); font-size: 14px; color: #CDB9A5; } /* 18. Toasts, crumbs, confetti, flying cookie ------------------------------ */ .zh-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 150; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; } .zh-toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; width: min(400px, calc(100vw - 32px)); padding: 10px 14px 10px 10px; background: var(--cacao); color: var(--farine); animation: zh-toast-in .5s var(--ease-pop) both; } .zh-toast.is-out { animation: zh-toast-out .35s ease forwards; } .zh-toast-img { position: relative; width: 60px; height: 60px; flex: none; background: var(--c, var(--kraft)); overflow: hidden; } .zh-toast-img img { width: 100%; height: 100%; object-fit: cover; } .zh-toast-img img.is-char { object-fit: contain; animation: zh-wiggle .8s var(--ease-pop) .2s; } .zh-toast-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; } .zh-toast-text strong { font-family: var(--f-display); font-size: 18px; } .zh-toast-text span { color: #CDB9A5; } .zh-toast a { color: var(--farine); font-weight: 600; font-size: 14px; } .zh-toast--error { background: var(--praline); } .zh-fly { position: fixed; z-index: 160; pointer-events: none; width: 84px; height: 84px; object-fit: cover; border: 3px solid var(--cacao); } .zh-crumb { position: fixed; z-index: 170; pointer-events: none; width: 10px; height: 10px; } /* 19. Reveal on scroll ---------------------------------------------------- */ .zh-js [data-zh-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); } .zh-js [data-zh-reveal].is-revealed { opacity: 1; transform: none; } .zh-js .zh-hero [data-zh-reveal] { transition-duration: .5s; } /* 19b. FAQ ------------------------------------------------------------------ */ .zh-faqhero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-faqhero-copy { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 80px) var(--gutter) 40px; } .zh-faqhero-intro { max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); } .zh-faqsearch { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin-top: 10px; } .zh-faqsearch-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--sucre); border: 1.5px solid var(--cacao); transition: border-color .2s ease; } .zh-faqsearch-row:focus-within { border-color: var(--praline); } .zh .zh-faqsearch-row input { flex: 1; min-width: 0; width: 100%; min-height: 60px; border: 0; background: transparent; font-family: var(--f-display); font-size: 22px; outline: none; } .zh-faqsearch-count { font-size: 14px; color: var(--muted); font-weight: 600; } .zh-faqhero-side { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding: 32px 24px 0; background: var(--rose); } .zh-faqhero-mascot { width: min(320px, 80%); margin-bottom: -8px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-faqbubble { display: flex; flex-direction: column; gap: 8px; max-width: 380px; padding: 18px 20px; background: var(--sucre); color: var(--cacao); border: 1.5px solid var(--cacao); margin-bottom: 18px; } .zh-faqbubble-text { font-family: var(--f-display); font-size: 22px; line-height: 1.2; font-style: italic; transition: opacity .3s ease; } .zh-faqbubble-text.is-swap { opacity: 0; } .zh-faqnav { position: sticky; top: 69px; z-index: 40; display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gutter); background: var(--farine); border-bottom: 1px solid var(--cacao); scrollbar-width: none; } .admin-bar .zh-faqnav { top: 101px; } .zh-faqnav::-webkit-scrollbar { display: none; } .zh-faqnav-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--c); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .2s var(--ease-pop); } .zh-faqnav-chip span { min-width: 22px; height: 22px; display: grid; place-items: center; background: var(--ink); color: var(--c); font-size: 12px; } .zh-faqnav-chip:hover, .zh-faqnav-chip.is-on { transform: translateY(-3px); } .zh-faqnav-chip.is-on { outline: 2px solid var(--cacao); outline-offset: 2px; } .zh-faqnav-chip.is-empty { opacity: .35; } .zh-faqs { padding: 48px var(--gutter) var(--section); display: flex; flex-direction: column; gap: 40px; } .zh-faqgroup { scroll-margin-top: 140px; display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); align-items: start; gap: 0; } .zh-faqgroup[hidden] { display: none; } .zh-faqgroup-head { position: sticky; top: 140px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 24px 24px 0; background: var(--c); color: var(--ink); } .zh-faqgroup-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; } .zh-faqgroup-char { width: 170px; margin: auto 0 -26px auto; transition: transform .4s var(--ease-pop); } .zh-faqgroup-char.is-jump { animation: zh-jump .7s var(--ease-pop); } .zh-faqgroup-list { border-top: 1.5px solid var(--cacao); } .zh-faqitem { border-bottom: 1px solid var(--filet); background: var(--sucre); scroll-margin-top: 150px; } .zh-faqitem summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding: 16px 22px; transition: background .2s ease; } .zh-faqitem summary::-webkit-details-marker { display: none; } .zh-faqitem summary:hover { background: var(--farine); } .zh-faqitem-q { flex: 1; font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.2; } .zh-faqitem-icon { position: relative; flex: none; width: 34px; height: 34px; background: var(--c, var(--cacao)); transition: transform .4s var(--ease-pop); } .zh-faqitem-icon::before, .zh-faqitem-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--ink, var(--farine)); transform: translate(-50%, -50%); } .zh-faqitem-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s ease; } .zh-faqitem[open] .zh-faqitem-icon { transform: rotate(180deg); } .zh-faqitem[open] .zh-faqitem-icon::after { transform: translate(-50%, -50%) rotate(0); } .zh-faqitem[open] summary { background: var(--farine); } .zh-faqitem-a { padding: 4px 22px 22px; font-size: 16px; line-height: 1.7; color: var(--cacao-doux); animation: zh-rise .35s var(--ease-out); } .zh-faqitem-a p + p, .zh-faqitem-a p + ul, .zh-faqitem-a ul + p { margin-top: .7em; } .zh-faqitem-a a { color: var(--praline); font-weight: 600; } .zh-faqitem-a .zh-legal-list { margin: .6em 0; } .zh-faqitem-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); } .zh-faqitem-link.is-done { color: var(--cacao); } .zh-faqitem mark { background: var(--rose); color: var(--cacao); padding: 0 2px; } .zh-faqitem.is-hit summary { background: var(--farine); } .zh-faqempty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 0; } .zh-faqempty-mascot { width: 240px; animation: zh-shake-soft 3s ease-in-out infinite; } .zh-faqcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px, 5vw, 72px) var(--gutter); background: var(--cacao); color: var(--farine); } .zh-faqcta > div:first-child { display: flex; flex-direction: column; gap: 8px; max-width: 640px; } .zh-minifaq { border-top: 1px solid var(--cacao); } .zh-minifaq > div:last-child, .zh-minifaq > details:first-of-type { border-top: 1.5px solid var(--cacao); } /* 19c. Legal and practical pages -------------------------------------------- */ .zh-lead { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--cacao); } .zb-admin-warning { padding: 12px 16px; background: #F7DADF; color: #7A1424; font-size: 14px; } .zh-small { font-size: 13px; color: var(--muted); margin-top: 6px !important; } .zh-allergen { font-weight: 800; color: var(--cacao); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--praline); } .zh-glossary-shortcut { display: inline-block; padding: 8px 0; min-height: 44px; } .zh-table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--filet); } .zh-prose .zh-table-wrap table { margin: 0; min-width: 640px; } .zh-prose thead th { background: var(--cacao); color: var(--farine); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .zh-allergens th[scope="row"] a { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--cacao); text-decoration: none; } .zh-allergens .zh-swatch { width: 12px; height: 34px; flex: none; background: var(--c); } .zh-allergens td { font-size: 14px; line-height: 1.55; vertical-align: top; } /* 19d. Sitemap -------------------------------------------------------------- */ .zh-sitemap-head h1 em { color: var(--praline); } .zh-mapcookies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; } .zh-mapcookies a { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 170px; padding: 16px; background: var(--c); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-pop); } .zh-mapcookies img { position: absolute; right: -10px; top: -14px; width: 120px; transform: rotate(8deg); transition: transform .45s var(--ease-pop); } .zh-mapcookies a:hover { transform: translateY(-4px); } .zh-mapcookies a:hover img { transform: rotate(-6deg) scale(1.08); } .zh-mapcookies-name { position: relative; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.05; max-width: 75%; } .zh-maplist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--cacao); } .zh-maplist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 4px; border-bottom: 1px solid var(--filet); text-decoration: none; font-weight: 600; transition: padding-left .25s var(--ease-out), color .2s ease; } .zh-maplist a:hover { padding-left: 12px; color: var(--praline); } .zh-maplist--boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: 32px; } .zh-maplist--boxes a { justify-content: flex-start; } .zh-maplist--boxes img { width: 56px; height: 56px !important; object-fit: cover; } .zh-maplist-price { margin-left: auto; font-family: var(--f-display); } .zh-maplist--wide a { font-family: var(--f-display); font-size: 19px; } .zh-mapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; } .zh-mapcol { display: flex; flex-direction: column; gap: 10px; } .zh-mapcol-title { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; margin-bottom: 8px !important; } .zh-mapfaq { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; } .zh-mapfaq-group { display: flex; flex-direction: column; background: var(--sucre); border: 1px solid var(--filet); } .zh-mapfaq-title { display: block; padding: 14px 16px; background: var(--c); color: var(--ink); font-family: var(--f-display); font-size: 20px; font-weight: 600; text-decoration: none; } .zh-mapfaq-group ul { list-style: none; margin: 0; padding: 8px 16px 14px; } .zh-mapfaq-group li a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.4; text-decoration: none; border-bottom: 1px dotted transparent; } .zh-mapfaq-group li a:hover { color: var(--praline); } /* 19e. Landing, category copy, blog CTA, footer legal ---------------------- */ .zh-landhero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--c); color: var(--ink); border-bottom: 1px solid var(--cacao); } .zh-landhero-copy { display: flex; flex-direction: column; gap: 20px; padding: clamp(36px, 5vw, 80px) var(--gutter); background: var(--farine); color: var(--cacao); } .zh-landhero-copy .zh-lead { max-width: 620px; } .zh-landhero-media { position: relative; overflow: hidden; min-height: 420px; } .zh-landhero-media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } .zh-landhero-char { position: absolute; right: 8%; bottom: -6%; width: 46%; max-width: 240px; animation: zh-bob 3.6s ease-in-out infinite; } .zh-postcta { margin: 0 var(--gutter) var(--section); display: flex; align-items: center; gap: 28px; padding: 28px; background: var(--rose); } .zh-postcta > div { display: flex; flex-direction: column; gap: 10px; } .zh-postcta-mascot { width: 160px; flex: none; animation: zh-wave 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .zh-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; } .zh-footer-legal a { text-decoration: none; } .zh-footer-legal a:hover { color: var(--rose); } .zh-footer-end .zh-textbtn { color: inherit; padding: 0; min-height: 0; font-size: 14px; } .zh-footer-end .zh-textbtn:hover { color: var(--rose); } /* 19f. Footer parade: every character stays visible, they shrink on narrow screens -- */ .zh-parade { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; justify-content: center; align-items: flex-end; padding: 0 var(--gutter); pointer-events: none; overflow: hidden; height: clamp(60px, 9vw, 120px); } .zh-parade-item { flex: 0 1 104px; min-width: 0; margin: 0 clamp(-6px, -.5vw, -2px); pointer-events: auto; transform: translateY(46%); transition: transform .45s var(--ease-pop); } .zh-parade-item img { width: 100%; animation: zh-bob 3.2s ease-in-out infinite; animation-delay: var(--d); } .zh-parade-item:hover, .zh-parade-item:focus-visible { transform: translateY(8%); } /* 19g. Contact ---------------------------------------------------------------- */ .zh-chero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-chero-copy { display: flex; flex-direction: column; gap: 20px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(36px, 4vw, 64px); } .zh-chero-intro { max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); } .zh-chero-delay { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px; background: var(--kraft); font-weight: 600; font-size: 14px; line-height: 1.4; } .zh-chero-delay .zh-i { flex: none; } .zh-chero-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 440px; padding: 40px 24px 0; background: var(--rose); } .zh-chero-bubble, .zh-lhero-bubble { position: relative; z-index: 1; max-width: 360px; margin-bottom: 16px; padding: 16px 20px; background: var(--sucre); color: var(--cacao); border: 1.5px solid var(--cacao); font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; animation: zh-rise .6s var(--ease-out) .3s both; } .zh-chero-mascot { width: min(clamp(240px, 22vw, 460px), 80%); margin-bottom: -12px; animation: zh-wave 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .zh-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-bottom: 1px solid var(--cacao); } .zh-channel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 270px; padding: 26px 24px 24px; background: var(--c); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease-pop); } a.zh-channel:hover, a.zh-channel:focus-visible { transform: translateY(-6px); z-index: 2; } .zh-channel > :not(img) { position: relative; z-index: 1; } .zh-channel .zh-label { opacity: .88; } .zh-channel-title { max-width: 92%; font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.02; letter-spacing: -0.01em; overflow-wrap: anywhere; } .zh-channel-title--small { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.12; } .zh-channel-text { max-width: 30ch; font-size: 15px; line-height: 1.5; } .zh-channel-address { font-weight: 600; } .zh-channel-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 0 16px; background: var(--ink); color: var(--c); font-weight: 600; font-size: 14px; } a.zh-channel:hover .zh-channel-go .zh-i { animation: zh-nudge .6s var(--ease-pop) infinite; } .zh-channel-char { position: absolute; right: -2%; bottom: 0; width: 44%; max-width: 170px; transform: translateY(56%) rotate(10deg); transition: transform .55s var(--ease-pop); pointer-events: none; } a.zh-channel:hover .zh-channel-char, a.zh-channel:focus-visible .zh-channel-char, .zh-channel--info:hover .zh-channel-char { transform: translateY(16%) rotate(-6deg); } .zh-cbox { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); scroll-margin-top: 70px; border-bottom: 1px solid var(--cacao); } .zh-cbox-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: clamp(36px, 5vw, 72px) var(--gutter) 0; background: var(--kraft); } .zh-cbox-intro { max-width: 380px; font-size: 18px; line-height: 1.55; color: var(--cacao-doux); } .zh-csteps { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; max-width: 400px; } .zh-csteps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .zh-csteps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; background: var(--sucre); font-size: 15px; line-height: 1.45; } .zh-csteps-num { width: 34px; height: 34px; display: grid; place-items: center; background: var(--rose); font-family: var(--f-display); font-weight: 600; font-size: 18px; } .zh-cbox-mascot { position: relative; width: min(300px, 80%); aspect-ratio: 1; margin: auto auto -14px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-cbox-mascot img { position: absolute; inset: 0; width: 100%; height: 100% !important; transition: opacity .25s ease, transform .45s var(--ease-pop); } .zh-cm-oops, .zh-cm-party { opacity: 0; transform: translateY(14px); } .zh-cbox-mascot.is-typing .zh-cm-look { transform: rotate(-5deg) translateY(-8px); } .zh-cbox-mascot.is-oops .zh-cm-look, .zh-cbox-mascot.is-party .zh-cm-look, .zh-cbox-mascot.is-party .zh-cm-oops { opacity: 0; } .zh-cbox-mascot.is-oops .zh-cm-oops { opacity: 1; transform: none; animation: zh-shake .5s ease; } .zh-cbox-mascot.is-party .zh-cm-party { opacity: 1; transform: none; animation: zh-jump 1s var(--ease-pop) 2; } .zh-cbox-card { padding: clamp(28px, 4vw, 64px) var(--gutter) clamp(36px, 5vw, 72px); background: var(--farine); } .zh-cform { gap: 30px; max-width: 760px; } .zh-cform-step { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; } .zh-cform-step legend { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; } .zh-cform-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--cacao); color: var(--farine); font-family: var(--f-sans); font-size: 15px; font-weight: 700; } .zh-subjects { display: flex; flex-wrap: wrap; gap: 8px; } .zh-subject { position: relative; cursor: pointer; } .zh-subject input { position: absolute; width: 1px; height: 1px; opacity: 0; } .zh-subject span { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; background: var(--sucre); border: 1.5px solid var(--cacao); font-weight: 600; font-size: 15px; line-height: 1.3; transition: background .2s ease, color .2s ease, transform .25s var(--ease-pop); } .zh-subject:hover span { transform: translateY(-2px); } .zh-subject input:checked + span { background: var(--c); color: var(--ink); border-color: var(--c); animation: zh-squish .4s var(--ease-pop); } .zh-subject input:focus-visible + span { outline: 3px solid var(--praline); outline-offset: 2px; } .zh-field--wide { grid-column: 1 / -1; } .zh-cform .zh-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-cform-count { align-self: flex-end; font-size: 13px; font-weight: 600; color: var(--muted); } .zh-cform-count.is-near { color: var(--praline); } .zh-cform .zh-check { margin-top: 4px; } .zh-cform .zh-check a { color: var(--praline); font-weight: 600; } .zh-cform-send { min-width: min(260px, 100%); } .zh-contact-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 620px; outline: none; } .zh-contact-sent:not([hidden]) { animation: zh-rise .5s var(--ease-out); } .zh-cfaq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(24px, 4vw, 64px); padding: var(--section) var(--gutter); } .zh-cfaq-head { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .zh-cfaq-list { border-top: 1.5px solid var(--cacao); } /* 19h. Information pages (legal and practical) ------------------------------- */ .zh-lhero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-lhero-copy { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(32px, 4vw, 56px); } .zh-lhero-copy .zh-display--page { font-size: clamp(38px, 6vw, 104px); } .zh-lhero-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .zh-lhero-meta li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: var(--kraft); font-size: 13px; font-weight: 600; } .zh-lhero-meta .zh-textbtn { min-height: 36px; padding: 0; font-size: 13px; } .zh-lhero-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 400px; padding: 36px 24px 0; background: var(--c); } .zh-lhero-char { width: min(clamp(220px, 19vw, 440px), 72%); margin-bottom: -12%; animation: zh-peek .9s var(--ease-pop) both, zh-bob 3.6s ease-in-out .9s infinite; } .zh-lbrief { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(28px, 3.5vw, 48px); background: var(--c); color: var(--ink); border-bottom: 1px solid var(--cacao); } .zh-lbrief-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; } .zh-lbrief-list li { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; background: var(--sucre); color: var(--cacao); } .zh-lbrief-num { font-family: var(--f-display); font-weight: 600; font-size: 46px; line-height: .8; } .zh-lbrief-list p { font-size: 16px; line-height: 1.5; } .zh-legal { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); align-items: start; gap: clamp(28px, 4vw, 72px); padding: 48px var(--gutter) var(--section); } .zh-legal-toc { position: sticky; top: 100px; z-index: 30; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; } .zh-legal-progress { display: block; height: 4px; background: var(--filet); } .zh-legal-progress span { display: block; width: 0; height: 100%; background: var(--cacao); } .zh-legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .zh-legal-toc a { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 6px; padding: 9px 10px; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .2s ease, color .2s ease, transform .25s var(--ease-pop); } .zh-legal-toc-num { color: var(--muted); font-variant-numeric: tabular-nums; } .zh-legal-toc a:hover { background: var(--kraft); } .zh-legal-toc a.is-on { background: var(--c); color: var(--ink); transform: translateX(4px); } .zh-legal-toc a.is-on .zh-legal-toc-num { color: inherit; } .zh-legal-body { min-width: 0; max-width: 780px; } .zh-legal-body .zh-lsec { display: flex; align-items: flex-start; gap: 16px; margin-top: 2em; padding-top: 22px; border-top: 1.5px solid var(--cacao); scroll-margin-top: 110px; } .zh-lsec-num { flex: none; min-width: 52px; height: 52px; display: grid; place-items: center; background: var(--c); color: var(--ink); font-size: 22px; line-height: 1; transition: transform .35s var(--ease-pop); } .zh-lsec.is-on .zh-lsec-num { animation: zh-squish .45s var(--ease-pop); } .zh-lsec-title { min-width: 0; padding-top: 6px; } .zh-legal-card { margin: 1.2em 0; padding: 0; background: var(--sucre); border: 1.5px solid var(--cacao); } .zh-legal-card > div { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--filet); } .zh-legal-card > div:nth-child(even) { background: var(--farine); } .zh-legal-card > div:last-child { border-bottom: 0; } .zh-legal-card dt { font-weight: 700; font-size: 12px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--cacao-doux); } .zh-legal-card dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; } .zh-legal-list { list-style: none; margin: .8em 0; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; } .zh-legal-list li { position: relative; margin: 0 !important; padding: 12px 14px 12px 34px; background: var(--sucre); } .zh-legal-list li::before { content: ""; position: absolute; left: 14px; top: 1.25em; width: 8px; height: 8px; background: var(--c, var(--praline)); outline: 1px solid var(--cacao); } .zh-legal-list span { color: var(--muted); font-size: 14px; } .zh-lhelp { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin: 0 var(--gutter) var(--section); padding: 28px clamp(20px, 3vw, 40px); background: var(--kraft); } .zh-lhelp-mascot { flex: none; width: 128px; margin: -46px 0 -28px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-lhelp-copy { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; } .zh-legal-more { display: flex; flex-direction: column; gap: 16px; padding: 40px var(--gutter) var(--section); border-top: 1px solid var(--cacao); } .zh-legal-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; } .zh-legal-more a { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 18px; background: var(--c); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-pop); } .zh-legal-more-name { position: relative; z-index: 1; max-width: 68%; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.05; } .zh-legal-more-go { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--c); } .zh-legal-more img { position: absolute; right: -14px; bottom: -34px; width: 124px; transform: rotate(8deg); transition: transform .45s var(--ease-pop); } .zh-legal-more a:hover { transform: translateY(-4px); } .zh-legal-more a:hover img { transform: rotate(-6deg) translateY(-14px) scale(1.06); } .zh-legal-more a:hover .zh-legal-more-go .zh-i { animation: zh-nudge .6s var(--ease-pop) infinite; } .zh-small { font-size: 13px; color: var(--muted); margin-top: 6px !important; } .zb-admin-warning { padding: 12px 16px; background: #F7DADF; color: #7A1424; font-size: 14px; } /* 19i. WhatsApp bubble ---------------------------------------------------------- */ .zh-wa { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; } .zh-wa > * { pointer-events: auto; } .zh-wa-btn { position: relative; width: 112px; height: 112px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 60% 100%; animation: zh-wa-idle 7s ease-in-out 2s infinite; } .zh-wa-art { position: absolute; inset: 0; width: 100%; height: 100% !important; transition: opacity .2s ease, transform .35s var(--ease-pop); } .zh-wa-art--hello { opacity: 0; } .zh-wa-btn:hover .zh-wa-art, .zh-wa-btn:focus-visible .zh-wa-art { transform: translateY(-4px) rotate(-3deg); } .zh-wa-btn:hover .zh-wa-art--hello, .zh-wa-btn:focus-visible .zh-wa-art--hello { opacity: 1; } .zh-wa-btn:hover .zh-wa-art:not(.zh-wa-art--hello), .zh-wa-btn:focus-visible .zh-wa-art:not(.zh-wa-art--hello) { opacity: 0; } .zh-wa-btn:active { transform: scale(.94); } .zh-wa-btn:focus-visible { outline: 3px solid var(--praline); outline-offset: 2px; } .zh-wa-badge { position: absolute; right: 6px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--sucre); border: 1.5px solid var(--cacao); border-radius: 50%; color: #1FAF54; transition: transform .35s var(--ease-pop), background .2s ease; } .zh-wa-badge .zh-i { grid-area: 1 / 1; transition: opacity .2s ease, transform .3s var(--ease-pop); } .zh-wa-badge .zh-i-close { opacity: 0; transform: rotate(-90deg); color: var(--farine); } .zh-wa.is-open .zh-wa-badge { background: var(--cacao); transform: scale(1.12); } .zh-wa.is-open .zh-wa-badge .zh-i-whatsapp { opacity: 0; } .zh-wa.is-open .zh-wa-badge .zh-i-close { opacity: 1; transform: none; } .zh-wa.is-open .zh-wa-btn { animation: none; } .zh-wa.is-ping .zh-wa-btn { animation: zh-wiggle .8s var(--ease-pop); } .zh-wa-panel { width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; background: var(--sucre); color: var(--cacao); border: 1.5px solid var(--cacao); transform-origin: 100% 100%; } .zh-wa-panel:not([hidden]) { animation: zh-wa-in .4s var(--ease-pop); } .zh-wa-head { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; background: var(--cacao); color: var(--farine); } .zh-wa-avatar { flex: none; width: 48px; height: 48px; overflow: hidden; background: var(--rose); } .zh-wa-avatar img { width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.12) translateY(4%); } .zh-wa-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .zh-wa-who strong { font-family: var(--f-display); font-size: 20px; font-weight: 600; } .zh-wa-who span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #CDB9A5; } .zh-wa-who span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #25D366; } .zh-wa-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; transition: transform .25s var(--ease-pop); } .zh-wa-close:hover { transform: rotate(90deg); } .zh-wa-body { display: flex; flex-direction: column; gap: 12px; max-height: min(52vh, 420px); overflow: auto; padding: 16px; background: var(--kraft); } .zh-wa-msg { align-self: flex-start; max-width: 92%; padding: 12px 14px; background: var(--sucre); font-size: 15px; line-height: 1.5; animation: zh-rise .35s var(--ease-out); } .zh-wa-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px; background: var(--sucre); } .zh-wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: zh-wa-dot 1s ease-in-out infinite; } .zh-wa-typing i:nth-child(2) { animation-delay: .15s; } .zh-wa-typing i:nth-child(3) { animation-delay: .3s; } .zh-wa.is-typing .zh-wa-msg, .zh-wa.is-typing .zh-wa-quick, .zh-wa:not(.is-typing) .zh-wa-typing { display: none; } .zh-wa-quick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .zh-wa-quick li { animation: zh-rise .35s var(--ease-out) both; animation-delay: var(--d); } .zh-wa-quick a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; background: var(--sucre); border: 1.5px solid var(--cacao); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: right; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s var(--ease-pop); } .zh-wa-quick a:hover { background: var(--cacao); color: var(--farine); transform: translateX(-3px); } .zh-wa-go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; background: #25D366; color: var(--cacao); font-weight: 700; text-decoration: none; transition: background .2s ease; } .zh-wa-go:hover { background: #1FB858; } .zh-wa-teaser { display: flex; align-items: stretch; max-width: 270px; margin: 0; background: var(--sucre); border: 1.5px solid var(--cacao); } .zh-wa-teaser:not([hidden]) { animation: zh-wa-in .45s var(--ease-pop); } .zh-wa-teaser-open { flex: 1; padding: 10px 12px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--f-display); font-style: italic; font-size: 17px; line-height: 1.25; } .zh-wa-teaser-x { flex: none; width: 38px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-left: 1px solid var(--filet); cursor: pointer; } .zh:has(.zh-wa) .zh-toasts { bottom: 136px; } .zh-lock .zh-wa, body:has(#consentpilot-banner:not([hidden])) .zh-wa, body:has(#consentpilot-modal:not([hidden])) .zh-wa { display: none; } @keyframes zh-wa-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } } @keyframes zh-wa-idle { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(-8px) rotate(-4deg); } 92% { transform: translateY(-2px) rotate(3deg); } 96% { transform: translateY(-4px) rotate(-1deg); } } @keyframes zh-wa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (min-width: 1600px) { .zh-legal { grid-template-columns: minmax(240px, 340px) minmax(0, 820px); justify-content: center; } .zh-cfaq { grid-template-columns: minmax(0, 520px) minmax(0, 900px); justify-content: center; } .zh-cform { max-width: 860px; } } @media (max-width: 1000px) { .zh-chero, .zh-cbox, .zh-cfaq, .zh-lhero, .zh-legal { grid-template-columns: minmax(0, 1fr); } .zh-chero-stage { min-height: 320px; } .zh-chero-mascot { width: min(260px, 70%); } .zh-cbox-side { padding-bottom: 0; } .zh-cbox-mascot { width: 180px; position: absolute; right: var(--gutter); bottom: -14px; margin: 0; } .zh-cbox-side { min-height: 240px; padding-right: calc(var(--gutter) + 180px); } .zh-cfaq-head { position: static; } .zh-lhero-stage { min-height: 300px; } .zh-lhero-char { width: min(230px, 60%); } .zh-legal { padding-top: 0; gap: 24px; } .zh-legal-toc { top: 69px; max-height: none; overflow: visible; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter) 0; background: var(--farine); border-bottom: 1px solid var(--cacao); } .admin-bar .zh-legal-toc { top: 101px; } .zh-legal-toc > .zh-label { display: none; } .zh-legal-toc ol { order: -1; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; } .zh-legal-toc ol::-webkit-scrollbar { display: none; } .zh-legal-toc li { flex: none; } .zh-legal-toc a { display: inline-flex; gap: 6px; min-height: 40px; align-items: center; padding: 0 12px; background: var(--kraft); white-space: nowrap; } .zh-legal-toc a.is-on { transform: none; } .zh-legal-progress { margin: 0 calc(var(--gutter) * -1); } body:has(.zh-studio-mbar:not(.is-hidden)) .zh-wa { bottom: 76px; } } @media (max-width: 640px) { .zh-chero-stage { min-height: 280px; } .zh-channel { min-height: 220px; } .zh-cbox-side { min-height: 0; padding-right: var(--gutter); padding-bottom: 150px; } .zh-cbox-mascot { width: 150px; } .zh-cform-send { width: 100%; } .zh-cform .zh-form-grid { grid-template-columns: minmax(0, 1fr); } .zh-lhero-stage { min-height: 260px; } .zh-legal-toc { top: 61px; } .zh-lsec-num { min-width: 42px; height: 42px; font-size: 18px; } .zh-lbrief-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 14px 16px; } .zh-lbrief-num { font-size: 32px; } .zh-lbrief-list p { font-size: 15px; } .zh-legal-body .zh-lsec { gap: 12px; } .zh-legal-card > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .zh-lhelp-mascot { width: 100px; margin: -40px 0 -10px; } .zh-legal-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-legal-more a { min-height: 130px; padding: 14px; } .zh-legal-more-name { max-width: 100%; font-size: 18px; } .zh-legal-more img { width: 92px; bottom: -28px; } .zh-wa { right: 12px; bottom: 12px; } .zh-wa-btn { width: 92px; height: 92px; } .zh-wa-badge { width: 30px; height: 30px; right: 4px; bottom: 6px; } .zh-wa-panel { width: calc(100vw - 24px); } .zh:has(.zh-wa) .zh-toasts { bottom: 112px; } } @media (max-width: 380px) { .zh-legal-more ul { grid-template-columns: minmax(0, 1fr); } } @media print { .zh-wa, .zh-lhero-stage, .zh-lhelp, .zh-legal-more, .zh-legal-toc { display: none !important; } .zh-lhero, .zh-legal { display: block; } } /* 19j. Journal, article, search, landing chapters, category copy, product story ---- */ .zh-chip-count { min-width: 22px; height: 22px; margin-left: 8px; display: inline-grid; place-items: center; padding: 0 5px; background: var(--cacao); color: var(--farine); font-size: 11px; } .zh-chip.is-on .zh-chip-count { background: var(--rose); color: var(--cacao); } .zh-jhero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-jhero-copy { display: flex; flex-direction: column; gap: 20px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(32px, 4vw, 56px); } .zh-jhero-intro { max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); } .zh-jhero-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 400px; padding: 36px 24px 0; background: #F3C431; } .zh-jhero-mascot { width: min(clamp(220px, 20vw, 420px), 76%); margin-bottom: -10px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-jfeat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin: clamp(24px, 3vw, 48px) var(--gutter) 0; background: var(--c); color: var(--ink); } .zh-jfeat-media { position: relative; overflow: hidden; min-height: 460px; background: var(--kraft); } .zh-jfeat-media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s var(--ease-out); } .zh-jfeat:hover .zh-jfeat-media img { transform: scale(1.04); } .zh-jfeat-flag { position: absolute; left: 0; top: 24px; padding: 10px 16px; background: var(--cacao); color: var(--farine); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .zh-jfeat-body { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.5vw, 56px); } .zh-jfeat-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 3vw, 50px); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; } .zh-jfeat-title a { text-decoration: none; } .zh-jfeat-excerpt { font-size: 17px; line-height: 1.6; } .zh-jfeat-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; } .zh-jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; } .zh-jcard { position: relative; display: flex; flex-direction: column; background: var(--c); color: var(--ink); transition: transform .35s var(--ease-pop); } .zh-jcard:hover { transform: translateY(-6px); } .zh-jcard-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kraft); } .zh-jcard-media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease-out); } .zh-jcard-media img.zh-jcard-ph { object-fit: contain; padding: 12%; } .zh-jcard:hover .zh-jcard-media img { transform: scale(1.05); } .zh-jcard-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; } .zh-jcard-title { font-family: var(--f-display); font-weight: 600; font-size: 25px; line-height: 1.05; } .zh-jcard-title a { text-decoration: none; } .zh-jcard-title a::before { content: ""; position: absolute; inset: 0; } .zh-jcard-excerpt { font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zh-jcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); font-size: 13px; font-weight: 600; } .zh-jcard-go { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--c); } .zh-jcard:hover .zh-jcard-go .zh-i { animation: zh-nudge .6s var(--ease-pop) infinite; } .zh-ahero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); border-bottom: 1px solid var(--cacao); } .zh-ahero-copy { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(32px, 4vw, 56px); } .zh-ahero-title { font-size: clamp(36px, 4.4vw, 72px); line-height: .98; } .zh-ahero-lead { max-width: 620px; font-family: var(--f-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: var(--cacao-doux); } .zh-ahero-media { position: relative; overflow: hidden; min-height: 480px; background: var(--c); } .zh-ahero-media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } .zh-ahero-char { position: absolute; right: 6%; bottom: -6%; width: 30%; max-width: 230px; animation: zh-peek .9s var(--ease-pop) both, zh-bob 3.6s ease-in-out .9s infinite; } .zh-article-body > h2 { margin-top: 2em; padding-top: 22px; border-top: 1.5px solid var(--cacao); scroll-margin-top: 110px; } .zh-article-body > h2:first-child { margin-top: 0; } .zh-prose .zh-astep { display: flex; align-items: center; gap: 14px; text-align: left; } .zh-article-body hr { display: none; } .zh-astep-num { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--c); color: var(--ink); font-size: 22px; line-height: 1; } .zh-tip { padding: 16px 20px; background: var(--kraft); border-left: 6px solid var(--c); } .zh-tip--warn { background: #F7DADF; border-left-color: var(--praline); } .zh-table-wrap--recipe { border: 1.5px solid var(--cacao); background: var(--sucre); } .zh-prose .zh-table-wrap--recipe table { min-width: 520px; } .zh-table-wrap--recipe tbody tr:nth-child(even) { background: var(--farine); } .zh-table-wrap--recipe td:first-child { font-weight: 600; } .zh-legal-toc .zh-asidecta { position: relative; grid-template-columns: none; font-size: inherit; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 150px; margin-top: 18px; padding: 18px; background: var(--c); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-pop); } .zh-legal-toc .zh-asidecta:hover { background: var(--c); transform: translateY(-4px); } .zh-asidecta-title { position: relative; z-index: 1; padding-right: 70px; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.05; } .zh-asidecta-go { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; } .zh-asidecta-mascot { position: absolute; right: -12px; bottom: -18px; width: 92px; transform: rotate(-6deg); transition: transform .4s var(--ease-pop); } .zh-asidecta:hover .zh-asidecta-mascot { transform: rotate(4deg) translateY(-8px); } .zh-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2.4em !important; padding-top: 20px; border-top: 1.5px solid var(--cacao); } .zh-share .zh-label { margin-right: 6px; } .zh-share-btn { min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px; background: var(--kraft); border: 0; color: var(--cacao); font: 600 14px var(--f-sans); text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s var(--ease-pop); } .zh-prose .zh-share-btn { color: var(--cacao); text-decoration: none; } .zh-share-btn:hover, .zh-share-btn.is-done { background: var(--cacao); color: var(--farine) !important; transform: translateY(-2px); } .zh-author { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin: 0 var(--gutter) var(--section); padding: 26px clamp(20px, 3vw, 40px); background: var(--sucre); border: 1.5px solid var(--cacao); } .zh-author-mascot { flex: none; width: 120px; animation: zh-wave 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .zh-author-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; max-width: 720px; } .zh-shero { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 72px) var(--gutter) 32px; border-bottom: 1px solid var(--cacao); } .zh-shero-form { display: flex; align-items: center; gap: 12px; max-width: 980px; padding: 6px 6px 6px 18px; background: var(--sucre); border: 1.5px solid var(--cacao); transition: border-color .2s ease; } .zh-shero-form:focus-within { border-color: var(--praline); } .zh .zh-shero-form input { flex: 1; min-width: 0; min-height: 64px; border: 0; background: transparent; font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 36px); outline: none; } .zh-shero-count { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; } .zh-sgroup-title { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; } .zh-sgroup-title span { min-width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 8px; background: var(--rose); font-family: var(--f-sans); font-size: 15px; font-weight: 700; } .zh-slist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--cacao); } .zh-slist a { display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; grid-template-areas: "label title go" "label text go"; align-items: center; gap: 4px 20px; padding: 18px 8px; border-bottom: 1px solid var(--filet); text-decoration: none; transition: background .2s ease, padding-left .25s var(--ease-out); } .zh-slist a:hover { background: var(--sucre); padding-left: 16px; } .zh-slist .zh-label { grid-area: label; } .zh-slist-title { grid-area: title; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; } .zh-slist-text { grid-area: text; font-size: 15px; color: var(--cacao-doux); } .zh-slist .zh-i { grid-area: go; } .zh-chapters { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 48px) var(--gutter) 0; } .zh-chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); background: var(--sucre); } .zh-chapter-head { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 26px 26px 0; background: var(--c); color: var(--ink); } .zh-chapter-num { font-family: var(--f-display); font-weight: 600; font-size: clamp(48px, 5vw, 76px); line-height: .8; } .zh-chapter-title { position: relative; z-index: 1; max-width: 85%; font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.02; text-wrap: balance; } .zh-chapter-char { position: absolute; right: -6px; bottom: -34%; width: 46%; max-width: 190px; transform: rotate(8deg); transition: transform .5s var(--ease-pop); } .zh-chapter:hover .zh-chapter-char { transform: rotate(-4deg) translateY(-14%); } .zh-chapter-body { max-width: none; font-size: 17px; padding: clamp(24px, 3vw, 44px) clamp(22px, 3.5vw, 56px); } .zh-howto { display: flex; flex-direction: column; gap: 28px; padding: var(--section) var(--gutter) clamp(24px, 3vw, 48px); } .zh-howto-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; } .zh-howto-list li { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--kraft); } .zh-howto-num { width: 52px; height: 52px; display: grid; place-items: center; background: var(--cacao); color: var(--farine); font-family: var(--f-display); font-weight: 600; font-size: 26px; transition: transform .35s var(--ease-pop); } .zh-howto-list li:hover .zh-howto-num { transform: rotate(-8deg) scale(1.08); } .zh-howto-title { font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1.05; } .zh-catcopy, .zh-pdp-story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(24px, 4vw, 72px); padding: var(--section) var(--gutter); background: var(--sucre); border-top: 1px solid var(--cacao); } .zh-catcopy-head, .zh-pdp-story-head { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; } .zh-catcopy-mascot, .zh-pdp-story-char { width: min(220px, 70%); margin-top: 10px; animation: zh-bob 3.6s ease-in-out infinite; } .zh-catcopy-body, .zh-pdp-story-body { max-width: 780px; } .zh-pdp-story-body > p:first-child { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.4; } .zh-cartempty { border-top: 1px solid var(--cacao); } .zh .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new, .zh .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { display: none; } @media (max-width: 1000px) { .zh-jhero, .zh-jfeat, .zh-ahero, .zh-chapter, .zh-catcopy, .zh-pdp-story { grid-template-columns: minmax(0, 1fr); } .zh-jhero-stage { min-height: 300px; } .zh-jfeat-media { min-height: 300px; } .zh-ahero-media { min-height: 320px; order: -1; } .zh-legal-toc .zh-asidecta { display: none; } .zh-chapter-head { min-height: 0; padding-bottom: 26px; flex-direction: row; align-items: flex-end; gap: 16px; } .zh-chapter-title { max-width: 70%; } .zh-chapter-char { width: 120px; bottom: -40px; } .zh-howto-list { grid-template-columns: minmax(0, 1fr); } .zh-catcopy-head, .zh-pdp-story-head { position: static; } .zh-catcopy-mascot, .zh-pdp-story-char { display: none; } } @media (max-width: 640px) { .zh-jhero-stage { min-height: 260px; } .zh-jfeat { margin: 16px 0 0; } .zh-ahero-media { min-height: 240px; } .zh-ahero-char { width: 110px; } .zh-shero-form { flex-wrap: wrap; padding: 6px 6px 6px 12px; } .zh-shero-form .zh-btn { width: 100%; } .zh .zh-shero-form input { min-height: 54px; } .zh-slist a { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "label go" "title go" "text go"; } .zh-chapters { padding-left: 0; padding-right: 0; } .zh-chapter-head { flex-direction: column; align-items: flex-start; } .zh-chapter-title { max-width: 75%; } .zh-author-mascot { width: 90px; } } /* 19k. Reviews, glossary, lexicon, ingredient cards --------------------------------- */ .zh-pdp-rating { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 40px; padding: 0 14px 0 10px; background: var(--sucre); border: 1.5px solid var(--cacao); font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .25s var(--ease-pop); } .zh-pdp-rating:hover { transform: translateY(-2px); } .zh-stars { position: relative; display: inline-block; flex: none; line-height: 0; } .zh-stars-base, .zh-stars-fill { display: flex; gap: 2px; white-space: nowrap; } .zh-stars-base { color: var(--filet); } .zh-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #E2A23A; } .zh-star { flex: none; } .zh-reviews { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; border-top: 1px solid var(--cacao); scroll-margin-top: 70px; } .zh-reviews-score { position: sticky; top: 69px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 520px; padding: clamp(28px, 4vw, 56px) clamp(22px, 3vw, 44px) 190px; background: var(--c); color: var(--ink); } .zh-reviews-score .zh-stars-base { color: color-mix(in oklab, var(--ink) 25%, transparent); } .zh-reviews-score .zh-stars-fill { color: var(--ink); } .zh-reviews-avg { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); line-height: .8; } .zh-reviews-avg-num { font-size: clamp(84px, 8vw, 128px); letter-spacing: -0.03em; } .zh-reviews-avg-max { font-size: 32px; opacity: .7; } .zh-reviews-count { font-weight: 700; font-size: 15px; } .zh-reviews-dist { list-style: none; margin: 4px 0 8px; padding: 0; width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; } .zh-reviews-dist li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 22px; align-items: center; gap: 10px; } .zh-reviews-bar { height: 10px; background: color-mix(in oklab, var(--ink) 18%, transparent); } .zh-reviews-bar span { display: block; height: 100%; background: var(--ink); } .zh-reviews-empty { max-width: 320px; font-size: 17px; line-height: 1.5; } .zh-reviews-char { position: absolute; right: -4%; bottom: -12%; width: 52%; max-width: 230px; transform: rotate(-8deg); animation: zh-bob 3.6s ease-in-out infinite; } .zh-reviews-main { display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 4vw, 56px) var(--gutter) var(--section); } .zh-reviews-thanks { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #E3EDD3; } .zh-reviews-thanks-mascot { width: 76px; flex: none; animation: zh-jump 1s var(--ease-pop) 2; } .zh-reviews-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .zh-review { padding: 22px 24px; background: var(--sucre); border: 1.5px solid var(--cacao); } .zh-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; } .zh-review-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--c); color: var(--ink); font-family: var(--f-display); font-size: 22px; } .zh-review-who { flex: 1 1 160px; display: flex; flex-direction: column; line-height: 1.3; } .zh-review-who strong { font-size: 16px; } .zh-review-who > span { font-size: 13px; color: var(--muted); } .zh-review-verified { color: #3D6B1E; font-weight: 700; } .zh-review-text { margin-top: 14px; font-family: var(--f-display); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.35; } .zh-review-text p + p { margin-top: .6em; } .zh-review-reply { display: flex; gap: 14px; margin-top: 16px; padding: 14px 16px; background: var(--kraft); font-size: 15px; line-height: 1.55; } .zh-review-reply-mascot { width: 54px; height: 54px; flex: none; } .zh-review-form { padding: clamp(22px, 3vw, 36px); background: var(--kraft); scroll-margin-top: 90px; } .zh-review-form-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .zh-review-mood { position: relative; width: 120px; height: 120px; flex: none; margin-bottom: -8px; } .zh-mood { position: absolute; inset: 0; width: 100%; height: 100% !important; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .2s ease, transform .4s var(--ease-pop); } .zh-mood.is-on { opacity: 1; transform: none; } .zh-review-fields { gap: 16px; } .zh-review-fields .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .zh-review-fields .comment-form-cookies-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cacao); } .zh-rate { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .zh-rate-legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; } .zh-rate-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .zh-rate-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; } .zh-rate-stars label { display: grid; place-items: center; width: 50px; height: 50px; background: var(--sucre); border: 1.5px solid var(--cacao); color: var(--filet); cursor: pointer; transition: color .15s ease, background .15s ease, transform .25s var(--ease-pop); } .zh-rate-stars label:hover, .zh-rate-stars label:hover ~ label, .zh-rate-stars input:checked ~ label { color: #E2A23A; } .zh-rate-stars label:hover { transform: translateY(-3px) rotate(-6deg); } .zh-rate-stars input:checked + label { background: var(--cacao); animation: zh-pop .35s var(--ease-pop); } .zh-rate-stars input:focus-visible + label { outline: 3px solid var(--praline); outline-offset: 2px; } .zh-rate-text { font-family: var(--f-display); font-size: 20px; min-height: 1.3em; } .zh-review-fields .form-submit { margin: 0; } .zh-review-fields .form-submit .zh-btn { min-width: min(260px, 100%); } .zh-ghero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-ghero-copy { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(28px, 3vw, 44px); } .zh-ghero-intro { max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--cacao-doux); } .zh-ghero-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; min-height: 440px; padding: 40px 24px 0; background: var(--kraft); } .zh-gtoday { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; width: min(380px, 100%); padding: 20px 22px; background: var(--c, var(--sucre)); color: var(--ink, var(--cacao)); border: 1.5px solid var(--cacao); text-decoration: none; transition: transform .35s var(--ease-pop); } .zh-gtoday:hover { transform: translateY(-4px); } .zh-gtoday-word { font-family: var(--f-display); font-size: clamp(32px, 3vw, 44px); line-height: 1; } .zh-gtoday-def { font-size: 15px; line-height: 1.5; } .zh-gtoday-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .zh-ghero-mascot { width: min(clamp(200px, 17vw, 330px), 70%); margin-top: -14px; margin-bottom: -10px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-gnav { position: sticky; top: 69px; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: 12px var(--gutter); background: var(--farine); border-bottom: 1px solid var(--cacao); } .admin-bar .zh-gnav { top: 101px; } .zh-gnav-letters, .zh-gnav-fams { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .zh-gnav-letters::-webkit-scrollbar, .zh-gnav-fams::-webkit-scrollbar { display: none; } .zh-gnav-letters > * { flex: 1 0 34px; height: 38px; display: grid; place-items: center; font-family: var(--f-display); font-size: 19px; text-decoration: none; } .zh-gnav-letters a { background: var(--sucre); transition: background .2s ease, color .2s ease, transform .2s var(--ease-pop); } .zh-gnav-letters a:hover, .zh-gnav-letters a.is-on { background: var(--cacao); color: var(--farine); transform: translateY(-2px); } .zh-gnav-letters span { color: var(--filet); } .zh-gnav-letters a.is-off { opacity: .3; pointer-events: none; } .zh-gfam { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; background: var(--c, var(--kraft)); color: var(--ink, var(--cacao)); font: 600 13px var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-pop), outline-color .2s ease; outline: 2px solid transparent; outline-offset: 2px; } .zh-gfam:hover { transform: translateY(-2px); } .zh-gfam.is-on { outline-color: var(--cacao); } .zh-gbook { display: flex; flex-direction: column; gap: 8px; padding: 32px var(--gutter) var(--section); } .zh-gletter { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 24px; padding: 24px 0; border-top: 1.5px solid var(--cacao); scroll-margin-top: 170px; } .zh-gletter[hidden] { display: none; } .zh-gletter-big { position: sticky; top: 190px; font-family: var(--f-display); font-size: clamp(72px, 7vw, 120px); line-height: .8; } .zh-gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; } .zh-gcards li[hidden] { display: none; } .zh-gcard { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; background: var(--sucre); color: var(--cacao); text-decoration: none; transition: background .25s ease, color .25s ease, transform .3s var(--ease-pop); } .zh-gcard:hover, .zh-gcard:focus-visible { background: var(--c, var(--kraft)); color: var(--ink, var(--cacao)); transform: translateY(-4px); } .zh-gcard-fam { align-self: flex-start; padding: 4px 8px; background: var(--c, var(--kraft)); color: var(--ink, var(--cacao)); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .zh-gcard:hover .zh-gcard-fam { background: var(--ink); color: var(--c); } .zh-gcard-word { font-family: var(--f-display); font-size: 24px; line-height: 1.05; } .zh-gcard-def { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zh-gcard-go { margin-top: auto; align-self: flex-end; } .zh-gcard mark { background: var(--rose); color: var(--cacao); } .zh-gword-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-bottom: 1px solid var(--cacao); } .zh-gword-copy { display: flex; flex-direction: column; gap: 18px; padding: clamp(36px, 5vw, 80px) var(--gutter) clamp(32px, 4vw, 56px); } .zh-gword-def { max-width: 640px; display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; background: var(--sucre); border: 1.5px solid var(--cacao); } .zh-gword-def p { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; } .zh-gword-stage { position: relative; overflow: hidden; min-height: 400px; background: var(--c, var(--kraft)); color: var(--ink, var(--cacao)); } .zh-gword-letter { position: absolute; left: 8%; top: 4%; font-family: var(--f-display); font-size: clamp(260px, 30vw, 480px); line-height: 1; opacity: .9; } .zh-gword-mascot { position: absolute; right: 6%; bottom: -8px; width: min(clamp(200px, 18vw, 320px), 62%); animation: zh-bob 3.4s ease-in-out infinite; } .zh-gword-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: clamp(28px, 4vw, 72px); padding: 48px var(--gutter) var(--section); } .zh-gword-text > h2 { margin-top: 1.6em; padding-top: 18px; border-top: 1.5px solid var(--cacao); } .zh-gword-text > h2:first-child { margin-top: 0; } .zh-gword-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; } .zh-gword-block { display: flex; flex-direction: column; gap: 10px; } .zh-gword-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .zh-gword-products a { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 84px; padding: 14px 110px 14px 16px; background: var(--c); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-pop); } .zh-gword-products a:hover { transform: translateX(4px); } .zh-gword-product-name { font-family: var(--f-display); font-size: 20px; line-height: 1.1; } .zh-gword-products img { position: absolute; right: 4px; bottom: -26px; width: 100px; transform: rotate(8deg); transition: transform .4s var(--ease-pop); } .zh-gword-products a:hover img { transform: rotate(-4deg) translateY(-12px); } .zh-gword-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .zh-gword-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin: 0 var(--gutter) var(--section); } .zh-gword-nav-prev, .zh-gword-nav-next { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--sucre); border: 1.5px solid var(--cacao); text-decoration: none; transition: background .2s ease, color .2s ease; } .zh-gword-nav-next { text-align: right; } .zh-gword-nav-prev:hover, .zh-gword-nav-next:hover { background: var(--cacao); color: var(--farine); } .zh-gword-nav-word { font-family: var(--f-display); font-size: 24px; line-height: 1.05; } .zh-gword-nav-all { display: grid; place-items: center; padding: 0 22px; background: var(--kraft); font-weight: 700; font-size: 14px; text-decoration: none; } .zh-lexicon { display: flex; flex-direction: column; gap: 18px; padding: var(--section) 0 clamp(24px, 3vw, 48px) var(--gutter); border-top: 1px solid var(--cacao); } .zh-lexicon-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding-right: var(--gutter); } .zh-lexicon-tools { display: flex; align-items: center; gap: 8px; } .zh-lexicon-count { margin-right: 8px; font-weight: 700; font-size: 14px; color: var(--muted); } .zh-lexicon-arrow { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--cacao); color: var(--farine); border: 0; cursor: pointer; transition: background .2s ease, transform .2s var(--ease-pop); } .zh-lexicon-arrow:hover { background: var(--praline); transform: translateY(-2px); } .zh-lexicon-tools .zh-link { margin-left: 8px; } .zh-lexicon-row { list-style: none; margin: 0; padding: 4px var(--gutter) 10px 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .zh-lexicon-row li { scroll-snap-align: start; } .zh-prose a.zb-ingredient-link, .zh-accordion a.zb-ingredient-link { color: inherit; text-decoration: underline; text-decoration-color: var(--praline); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .zh-defpop { position: absolute; z-index: 140; width: min(300px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--sucre); color: var(--cacao); border: 1.5px solid var(--cacao); animation: zh-rise .25s var(--ease-out); pointer-events: none; } .zh-defpop-word { font-family: var(--f-display); font-size: 22px; line-height: 1.05; } .zh-defpop-text { font-size: 14px; line-height: 1.5; } .zh-defpop-go { font-size: 12px; font-weight: 700; color: var(--praline); } @media (max-width: 1000px) { .zh-pdp-visual, .admin-bar .zh-pdp-visual { position: static; top: auto; } .zh-reviews, .zh-ghero, .zh-gword-hero, .zh-gword-body { grid-template-columns: minmax(0, 1fr); } .zh-reviews-score { position: relative; top: 0; min-height: 0; padding-bottom: 32px; padding-right: 46%; } .zh-reviews-char { width: 40%; bottom: -16%; } .zh-ghero-stage { min-height: 340px; } .zh-gword-stage { min-height: 260px; } .zh-gword-aside { position: static; } .zh-gletter { grid-template-columns: minmax(0, 1fr); gap: 10px; } .zh-gletter-big { position: static; font-size: 64px; } .zh-gnav { top: 69px; } } @media (max-width: 640px) { .zh-gnav { top: 61px; } .zh-reviews-score { padding-right: 38%; } .zh-review { padding: 18px 16px; } .zh-review-mood { width: 92px; height: 92px; } .zh-rate-stars label { width: 46px; height: 46px; } .zh-gword-nav { grid-template-columns: 1fr 1fr; } .zh-gword-nav-all { grid-column: 1 / -1; grid-row: 2; min-height: 48px; } .zh-gword-letter { font-size: 220px; } .zh-lexicon-tools .zh-lexicon-arrow { display: none; } } /* 20. Keyframes ------------------------------------------------------------- */ @keyframes zh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes zh-gulp { 0% { transform: scale(1); } 30% { transform: scale(1.12, .86); } 55% { transform: scale(.92, 1.1); } 100% { transform: scale(1); } } @keyframes zh-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } } @keyframes zh-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg) scale(1.05); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } } @keyframes zh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes zh-jump { 0%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(4px) scale(1.06, .92); } 50% { transform: translateY(-22px) scale(.96, 1.05); } 80% { transform: translateY(2px) scale(1.03, .97); } } @keyframes zh-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(0); } } @keyframes zh-squish { 0% { transform: scale(1); } 40% { transform: scale(1.08, .9); } 100% { transform: scale(1); } } @keyframes zh-drop { 0% { transform: translateY(-60%) scale(.6) rotate(-12deg); opacity: 0; } 60% { transform: translateY(6%) scale(1.06, .92) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes zh-poof { to { transform: scale(.4) rotate(20deg); opacity: 0; } } @keyframes zh-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } @keyframes zh-shake-soft { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-6deg); } 92% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } } @keyframes zh-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes zh-slide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } @keyframes zh-down { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes zh-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes zh-peek { from { transform: translateY(105%); } to { transform: translateY(0); } } @keyframes zh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes zh-spin { to { transform: rotate(360deg); } } @keyframes zh-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @keyframes zh-nudge-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } } @keyframes zh-toast-in { from { transform: translateY(30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes zh-toast-out { to { transform: translateX(40px); opacity: 0; } } /* 21. Responsive ------------------------------------------------------------ */ @media (max-width: 1280px) { .zh-header { grid-template-columns: auto 1fr auto; } .zh-header-burger { display: inline-grid; } .zh-nav { display: none; } .zh-header .zh-wordmark { align-items: flex-start; text-align: left; } .zh-cartbtn-label { display: none; } .zh-studio { grid-template-columns: minmax(0, 1fr) 380px; } } @media (max-width: 1000px) { .zh-faqhero, .zh-faqgroup, .zh-landhero { grid-template-columns: minmax(0, 1fr); } .zh-faqgroup-head { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 16px; } .zh-faqgroup-char { width: 84px; margin: -10px 0 -16px auto; } .zh-faqhero-side { min-height: 280px; } .zh-postcta { flex-direction: column; align-items: flex-start; } .zh-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-hero-head { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--cacao); } .zh-spot, .zh-atelier, .zh-story, .zh-split, .zh-pdp, .zh-studio, .zh-auth { grid-template-columns: minmax(0, 1fr); } .zh-spot-media { min-height: 420px; } .zh-story-media, .zh-split-media { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--cacao); } .zh-studio-pick { border-right: 0; } .zh-studio-box { position: static; max-height: none; } .zh-auth { min-height: 0; } .zh-auth-stage { min-height: 300px; } .zh-auth-copy .zh-display--xl { font-size: clamp(36px, 8vw, 60px); } .zh .woocommerce-account .woocommerce, .zh-wcpage-inner > .woocommerce { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { .zh-ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.zh { font-size: 16px; } .zh-ingredients { grid-template-columns: minmax(0, 1fr); } .zh-grid--boxes { grid-template-columns: minmax(0, 1fr); } .zh-announce { gap: 0; } .zh-announce-item:not(.is-on) { display: none; } .zh-announce-item.is-on { animation: zh-rise .4s var(--ease-out); } .zh-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-tile-media { height: 140px; } .zh-tile--tile .zh-tile-body { padding: 12px 12px 14px; } .zh-tile--tile .zh-tile-name { font-size: 18px; } .zh-tile--tile .zh-label { font-size: 9.5px; letter-spacing: .1em; } .zh-tile--tile .zh-add { min-width: 36px; height: 36px; } .zh-tile-char { width: 56%; } .zh-pdp-visual { grid-template-columns: minmax(0, 1fr); } .zh-pdp-id { border-left: 0; border-top: 1.5px solid var(--ink); flex-direction: row; align-items: center; flex-wrap: wrap; } .zh-pdp-char { max-width: 140px; } .zh-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-pick-media { height: 110px; } .zh-pick-name { font-size: 17px; } .zh-studio-box { padding-bottom: 32px; } .zh-footer { margin-top: 90px; } .zh-thanks, .zh-hello { flex-direction: column; align-items: flex-start; } .zh-auth-mascot { width: 190px; height: 190px; } .zh-auth-panel { padding-top: 150px; } .zh-band-char { display: none; } .zh-search { top: 61px; } .zh-faqnav { top: 61px; } .zh-header { gap: 6px; padding-left: 8px; padding-right: 12px; } .zh-header-actions .zh-iconbtn[href] { display: none; } .zh-header .zh-wordmark-name { font-size: 20px; } .zh-header .zh-wordmark-sub { font-size: 8px; letter-spacing: .22em; } .zh-cartbtn { padding: 0 10px; margin-left: 2px; gap: 6px; } } @media (max-width: 640px) { .zh-prose table { display: block; max-width: 100%; overflow-x: auto; } } @media (max-width: 400px) { .zh-display { overflow-wrap: break-word; hyphens: auto; } .zh-display--xl, .zh-display--page { font-size: clamp(32px, 10.5vw, 44px); } .zh-atelier-prices > div { padding: 14px 12px; } .zh-atelier-prices strong { font-size: 28px; } .zh-header { gap: 4px; padding-left: 4px; padding-right: 8px; } .zh-header .zh-wordmark { min-width: 0; } .zh-header .zh-wordmark-name { font-size: clamp(15px, 4.6vw, 19px); } .zh-header .zh-wordmark-sub { font-size: 7px; letter-spacing: .16em; white-space: nowrap; } .zh-header-actions { gap: 0; } .zh-cartbtn { width: 44px; padding: 0; margin-left: 2px; justify-content: center; } .zh-cart-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; } .zh-cart-count[data-count="0"] { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .zh-js [data-zh-reveal] { opacity: 1; transform: none; } .zh-tile-char, .zh-pick-char, .zh-band-char { display: none; } } @media print { .zh-header, .zh-announce, .zh-footer, .zh-drawer, .zh-mobile-nav, .zh-toasts { display: none !important; } } /* 22. Mobile design system ----------------------------------------------------- Rules applied (Apple HIG 44 pt, Material 48 dp, WCAG 2.5.5 44 px; Baymard mobile commerce): every control at least 44 px and 8 px apart; primary actions in the thumb zone (bottom tab bar, sticky buy bar); the price and "Ajouter" inside the first screen; two products per row so the list keeps an overview; no floating element over content; text never under 11 px; inputs at 16 px so iOS never zooms; safe-area insets respected. */ .zh-tabbar, .zh-buybar { display: none; } @media (max-width: 1000px) { /* Sticky buy bar (product pages). */ .zh-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 115; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--sucre); border-top: 1.5px solid var(--cacao); transform: translateY(110%); transition: transform .3s var(--ease-out); } .zh-buybar.is-on { transform: none; } .zh-buybar-img { width: 48px; height: 48px !important; flex: none; object-fit: cover; } .zh-buybar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .zh-buybar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 14px; } .zh-buybar-price { font-family: var(--f-display); font-size: 19px; } .zh-buybar-wa { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; background: #25D366; color: var(--cacao); border: 0; cursor: pointer; } .zh-buybar-btn { min-height: 48px; padding: 0 18px; } body.has-buybar .zh-wa-btn, body.has-buybar .zh-wa-teaser { display: none; } body.has-buybar .zh-wa { bottom: calc(80px + env(safe-area-inset-bottom)); } body.has-buybar .zh-footer-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } body.has-buybar .zh-toasts { bottom: calc(84px + env(safe-area-inset-bottom)); } body:has(.zh-studio-mbar) .zh-wa-btn, body:has(.zh-studio-mbar) .zh-wa-teaser { display: none; } } @media (max-width: 767px) { :root { --section: 48px; } /* Tab bar: Vitrine, Ma box, Zohra, Panier, Compte, within thumb reach. */ .zh-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--sucre); border-top: 1.5px solid var(--cacao); transition: transform .3s var(--ease-out); } .zh-tabbar.is-hidden { transform: translateY(calc(100% + 44px)); } .zh-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 2px; background: none; border: 0; color: var(--cacao-doux); font: 600 11px/1.1 var(--f-sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .zh-tab:active { background: var(--kraft); } .zh-tab.is-on { color: var(--cacao); } .zh-tab.is-on::before { content: ""; position: absolute; top: -1.5px; left: 24%; right: 24%; height: 3px; background: var(--praline); } .zh-tab-icon { position: relative; display: block; line-height: 0; } .zh-tab .zh-cart-count { position: absolute; top: -7px; right: -13px; min-width: 19px; height: 19px; padding: 0 4px; font-size: 11px; } .zh-tab .zh-cart-count[data-count="0"] { display: none; } .zh-tab--zohra img { width: 66px; height: 66px !important; margin: -32px 0 -6px; animation: zh-wa-idle 7s ease-in-out 3s infinite; } .zh-tab--zohra span { color: var(--cacao); } body.has-tabbar .zh-footer-bottom { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } body.has-tabbar .zh-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); } body.has-tabbar .zh-wa-btn, body.has-tabbar .zh-wa-teaser { display: none; } body.has-tabbar .zh-wa { right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); } body:has(#consentpilot-banner:not([hidden])) .zh-tabbar { display: none; } /* Type: compact scale, nothing under 11 px. */ .zh-display--page { font-size: clamp(36px, 10.5vw, 44px); } .zh-display--xl { font-size: clamp(34px, 10vw, 42px); } .zh-display--lg { font-size: clamp(28px, 8vw, 34px); } .zh-display--md { font-size: clamp(23px, 6.6vw, 27px); } .zh-label { font-size: 11px; letter-spacing: .1em; } .zh-tile--tile .zh-label { font-size: 11px; letter-spacing: .06em; } .zh-pagehead { padding-top: 24px; padding-bottom: 22px; gap: 12px; } .zh-pagehead-intro { font-size: 16px; } .zh-section { gap: 24px; } /* Brand line under the logo: the header stays compact, the footer keeps it readable. */ .zh-header .zh-wordmark-sub { display: none; } .zh-footer .zh-wordmark-sub { font-size: 11px; letter-spacing: .2em; } .zh-footer-end .zh-textbtn, .zh-legal-meta .zh-textbtn { min-height: 44px; display: inline-flex; align-items: center; } .zh-gfam { min-height: 44px; } .zh-faqitem-link, .zh-share-btn, .zh-lhero-meta .zh-textbtn, .zh-lhero-meta li { min-height: 44px; } .zh-studio summary, .zh-studio-box summary { min-height: 44px; } .zh-badge, .zh-kraft-plus .zh-label, .zh-pick-foot .zh-label { font-size: 11px; } /* Controls at 44 px or more. */ .zh-tile--tile .zh-add, .zh-add { min-width: 44px; height: 44px; } .zh-crumbs { font-size: 13px; } .zh-crumbs a { display: inline-block; padding: 4px 0; } /* Home: a shorter hero so the vitrine starts in the first screen. */ .zh-hero-head { gap: 22px; padding: 26px 16px 24px; } .zh-hero-copy { gap: 16px; } .zh-hero-copy .zh-display { font-size: clamp(38px, 11vw, 46px); } .zh-hero-text { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zh-hero-actions { gap: 14px; } .zh-hero-actions .zh-btnrow .zh-btn { flex: 1 1 auto; } .zh-hero-facts { gap: 6px 16px; font-size: 13px; padding-top: 14px; } .zh-spot-media { min-height: 0; aspect-ratio: 4 / 3; } .zh-spot-body { gap: 18px; padding: 26px 16px 30px; } .zh-spot-text { font-size: 16px; } .zh-spot-price { font-size: 32px; } /* Promises: a 2 × 2 grid instead of four full screens. */ .zh-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; } .zh-promise { gap: 4px; padding: 16px; border-bottom: 1px solid var(--filet); } .zh-promise:nth-child(odd) { border-right: 1px solid var(--filet); } .zh-promise-title { font-size: 20px; } .zh-promise-text { font-size: 13px; line-height: 1.45; } /* Product lists: two per row, compact cards. */ .zh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .zh-tile--card .zh-tile-media { height: auto; aspect-ratio: 1 / 1; } .zh-tile--card .zh-tile-body { gap: 8px; padding: 12px 12px 12px; } .zh-tile--card .zh-tile-name { font-size: 17px; line-height: 1.08; } .zh-tile--card .zh-tile-pitch { display: none; } .zh-tile--card .zh-tile-price { font-size: 18px; } .zh-tile--card .zh-tile-foot { padding-top: 8px; } .zh-tile--card .zh-add span { display: none; } .zh-tile--card .zh-tile-top .zh-label { font-size: 11px; } .zh-grid--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-boxcard-body { gap: 6px; padding: 12px; } .zh-boxcard { min-width: 0; } .zh-boxcard-name, .zh-tile--card .zh-tile-name { font-size: 17px; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; } .zh-boxcard-line { display: none; } .zh-boxcard-price { font-size: 18px; } .zh-boxcard-foot { padding-top: 8px; gap: 8px; } .zh-boxcard-foot .zh-btn, .zh-boxcard-foot .zh-add { width: 100%; min-height: 44px; } /* Product page: photo with its identity overlaid, then title, price and button at once. */ .zh-pdp-visual, .admin-bar .zh-pdp-visual { position: relative; top: auto; display: block; } .zh-pdp-id { position: absolute; inset: 0; display: block; padding: 0; border: 0; pointer-events: none; background: none; overflow: visible; } .zh-pdp-id > .zh-label:first-child { display: none; } .zh-pdp-num { position: absolute; left: 12px; top: 12px; padding: 6px 10px 4px; background: var(--c); color: var(--ink); font-size: 40px; line-height: 1; } .zh-pdp-id > .zh-label:last-child { position: absolute; left: 12px; top: 64px; padding: 5px 8px; background: var(--ink); color: var(--c); } .zh-pdp-char { position: absolute; right: 6px; bottom: -10px; width: 112px; max-width: none; pointer-events: auto; } .zh-pdp-thumbs { left: 12px; bottom: 12px; } .zh-pdp-thumb { width: 52px; height: 52px; } .zh-pdp-info { gap: 14px; padding: 16px 16px 28px; } .zh-pdp-info .zh-crumbs > [aria-current], .zh-pdp-info .zh-crumbs > span[aria-hidden]:nth-last-child(2) { display: none; } .zh-pdp-info > .zh-crumbs { order: 0; } .zh-pdp-info > .zh-badge { order: 1; } .zh-pdp-title { order: 2; font-size: clamp(34px, 9.6vw, 40px); } .zh-buy, .zh-soldout { order: 4; } .zh-pdp-rating { order: 5; } .zh-pdp-tagline { order: 6; font-size: 20px; } .zh-pdp-pitch { order: 7; font-size: 16px; } .zh-pdp-profile { order: 8; } .zh-upsell { order: 9; } .zh-accordion { order: 10; } .zh-buy { display: grid; grid-template-columns: 1fr auto; gap: 12px; } .zh-buy-price { font-size: 34px; margin: 0; } .zh-buy-btn { grid-column: 1 / -1; min-height: 52px; } .zh-accordion summary { min-height: 54px; } /* Reviews: score and bars side by side, the form behind one button. */ .zh-reviews-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px; min-height: 0; padding: 26px 16px; } .zh-reviews-score > .zh-label, .zh-reviews-score > h2, .zh-reviews-score > .zh-reviews-empty, .zh-reviews-score > .zh-btn { grid-column: 1 / -1; } .zh-reviews-score > h2 { font-size: 26px; } .zh-reviews-avg-num { font-size: 64px; } .zh-reviews-dist { grid-column: 2; grid-row: 3 / span 3; margin: 0; } .zh-reviews-score > .zh-stars, .zh-reviews-count { grid-column: 1; } .zh-reviews-char, .zh-reviews-score > .zh-btn { display: none; } .zh-reviews-main { gap: 16px; padding: 20px 16px var(--section); } .zh-review-text { font-size: 19px; } .zh-review-form { padding: 0; background: none; } .zh-review-form[open] { padding: 0 16px 18px; background: var(--kraft); } .zh-review-form-toggle { min-height: 52px; } .zh-review-form-head { margin-top: 14px; } .zh-review-mood { width: 84px; height: 84px; } /* Footer: menus fold into rows, legal links stay one tap away. */ .zh-footer-inner { gap: 28px; padding: 40px 16px 20px; } .zh-footer-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } .zh-footer-col { border-top: 1px solid var(--cacao-doux); } .zh-footer-col:last-child { border-bottom: 1px solid var(--cacao-doux); } .zh-footer-col [data-zh-fold] { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; cursor: pointer; } .zh-footer-col [data-zh-fold]::after { content: "+"; font-family: var(--f-display); font-size: 24px; line-height: 1; transition: transform .3s var(--ease-pop); } .zh-footer-col.is-open [data-zh-fold]::after { transform: rotate(45deg); } .zh-footer-col [data-zh-fold][aria-expanded="false"] + .zh-footer-list { display: none; } .zh-footer-col .zh-footer-list { padding-bottom: 10px; } .zh-footer-list a { min-height: 44px; display: flex; align-items: center; padding: 0; } .zh-footer-bottom { flex-direction: column; gap: 10px; padding: 20px 16px 24px; } .zh-footer-legal { gap: 0 16px; } .zh-footer-legal a, .zh-footer-bottom > a { display: inline-flex; align-items: center; min-height: 40px; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .zh-tabbar, .zh-buybar { transition: none; } } @media (min-width: 768px) { .zh-review-form[open] > .zh-review-form-toggle { display: none; } } .zh-review-form-toggle { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; background: var(--cacao); color: var(--farine); font-weight: 600; cursor: pointer; } .zh-review-form-toggle::-webkit-details-marker { display: none; } .zh-review-form[open] > .zh-review-form-toggle { background: var(--kraft); color: var(--cacao); } @media print { .zh-tabbar, .zh-buybar { display: none !important; } } /* Home mosaic with fewer than 8 cookies (a new shop, or a short selection): no holes. */ .zh-hero[data-n="5"] > .zh-tile:last-child { grid-column: span 4; } .zh-hero[data-n="6"] > .zh-tile:last-child { grid-column: span 3; } .zh-hero[data-n="7"] > .zh-tile:last-child { grid-column: span 2; } .zh-hero[data-n="1"] > .zh-hero-head, .zh-hero[data-n="2"] > .zh-hero-head, .zh-hero[data-n="3"] > .zh-hero-head { grid-column: 1 / -1; grid-row: auto; border-right: 0; } .zh-hero[data-n="1"] > .zh-tile { grid-column: 1 / -1; } .zh-hero[data-n="2"] > .zh-tile { grid-column: span 2; } .zh-hero[data-n="3"] > .zh-tile:last-child { grid-column: span 2; } @media (max-width: 1000px) { .zh-hero > .zh-tile { grid-column: auto !important; } .zh-hero[data-n="1"] > .zh-tile, .zh-hero[data-n="3"] > .zh-tile:last-child, .zh-hero[data-n="5"] > .zh-tile:last-child, .zh-hero[data-n="7"] > .zh-tile:last-child { grid-column: 1 / -1 !important; } } /* 23. Pickup at the workshop: the customer's slot page ------------------------ */ .zh-pickup-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; background: var(--c); color: var(--ink); border-bottom: 1.5px solid var(--cacao); padding: clamp(36px, 5vw, 72px) var(--gutter) 0; } .zh-pickup-copy { display: flex; flex-direction: column; gap: 16px; padding-bottom: clamp(32px, 4vw, 56px); max-width: 760px; } .zh-pickup-copy .zh-display--page { font-size: clamp(40px, 5.4vw, 84px); } .zh-pickup-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 620px; } .zh-pickup-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .zh-pickup-actions .zh-btn--ghost { border-color: var(--ink); color: var(--ink); } .zh-pickup-mascot { width: clamp(150px, 18vw, 260px); margin-bottom: -6px; animation: zh-bob 3.4s ease-in-out infinite; } .zh-pickup-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); padding: clamp(32px, 4vw, 64px) var(--gutter) var(--section); } .zh-pickup-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .zh-pickup-error { padding: 14px 18px; background: #FBE3E4; border: 1.5px solid var(--cacao); font-weight: 600; } .zh-pickup-change { border: 1.5px solid var(--cacao); background: var(--sucre); } .zh-pickup-change-toggle { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--f-display); font-size: 24px; line-height: 1.2; } .zh-pickup-change-toggle::-webkit-details-marker { display: none; } .zh-pickup-change-toggle::after { content: '+'; float: right; font-family: var(--f-sans); font-weight: 600; } .zh-pickup-change[open] .zh-pickup-change-toggle::after { content: '–'; } .zh-pickup-form { display: flex; flex-direction: column; gap: 22px; padding: 4px 22px 24px; } .zh-pickup-message { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; background: #FFF7E4; border-left: 4px solid var(--cacao); font-size: 17px; } .zh-pickup-day { border: 0; margin: 0; padding: 0; min-width: 0; } .zh-pickup-dayname { padding: 0; margin-bottom: 10px; font-family: var(--f-display); font-size: 21px; } .zh-pickup-times { display: flex; flex-wrap: wrap; gap: 10px; } .zh-pickup-slot { position: relative; cursor: pointer; } .zh-pickup-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .zh-pickup-slot span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--cacao); background: var(--farine); font-weight: 700; font-size: 16px; white-space: nowrap; transition: background .15s ease, color .15s ease, transform .2s var(--ease-pop); } .zh-pickup-slot:hover span { background: var(--kraft); } .zh-pickup-slot input:checked + span { background: var(--cacao); color: var(--sucre); transform: translateY(-2px); } .zh-pickup-slot input:focus-visible + span { outline: 3px solid var(--praline); outline-offset: 2px; } .zh-pickup-submit { align-self: flex-start; } .zh-pickup-order ul { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1.5px solid var(--cacao); } .zh-pickup-order li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); } .zh-pickup-order .zh-pickup-total { border-bottom: 0; font-family: var(--f-display); font-size: 22px; } .zh-pickup-aside { display: flex; flex-direction: column; gap: 16px; } .zh-pickup-card { padding: 20px 22px; border: 1.5px solid var(--cacao); background: var(--sucre); display: flex; flex-direction: column; gap: 8px; } .zh-pickup-card--help { background: var(--kraft); } .zh-pickup-address { font-family: var(--f-display); font-size: 20px; line-height: 1.35; } .zh-pickup-card .zh-textbtn { align-self: flex-start; padding-left: 0; } .zh-pickup-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 24px; padding: 16px 20px; border: 1.5px solid var(--cacao); background: #FFF7E4; font-weight: 600; } .zh-pickup-notice p { margin: 0; } @media (max-width: 900px) { .zh-pickup-body { grid-template-columns: 1fr; } .zh-pickup-hero { grid-template-columns: 1fr; gap: 0; } .zh-pickup-mascot { justify-self: end; width: 120px; margin-top: -24px; } .zh-pickup-copy { padding-bottom: 0; } } @media (max-width: 600px) { .zh-pickup-change-toggle { font-size: 20px; padding: 16px; } .zh-pickup-form { padding: 0 16px 20px; } .zh-pickup-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .zh-pickup-slot span { width: 100%; justify-content: center; padding: 0 8px; } .zh-pickup-submit { align-self: stretch; } .zh-pickup-actions .zh-btn { flex: 1 1 100%; } }