/* Zeste: base of every theme. The base (tokens, reset, typography, page layout, forms, buttons, messages, icons) is under :where(), without specificity: the theme of the store, loaded after, overrides anything. The components (header, footer…) keep their specificity: a theme overrides them with selectors as precise. Units: html at 62.5 %, 1rem = 10 px (media queries keep the browser size: 47.99rem = 768 px). */ /* ——— Tokens: citrus colors by default (orange zest accent, lemon cream surfaces, lime for success) ——— Each color as light-dark(light, dark): the page follows the color scheme of the system (color-scheme: light dark), or the one chosen in the footer (html[data-theme], set by the layout and zeste.js). A theme sets its own values. */ :where(:root) { color-scheme: light dark; --bg: light-dark(#fffbf2, #15110c); --surface: light-dark(#fff, #1d1812); --surface2: light-dark(#fef6dc, #272017); --line: light-dark(#f1e3c4, #3a2f22); --ink: light-dark(#2b2118, #fbf3e6); --muted: light-dark(#6b5d4d, #b8a88f); --accent: light-dark(#f97316, #fb923c); --accent-ink: light-dark(#c2410c, #fdba74); --on-accent: #2a1200; --danger: light-dark(#b91c1c, #ff7b6b); --on-danger: light-dark(#fff, #2a0606); --ok: light-dark(#4d7c0f, #a3e635); /* Form fields: their background and border, distinct from the page and from the cards they sit on */ --field: var(--surface); --field-line: color-mix(in srgb, var(--ink) 22%, var(--line)); /* Focus of a field: an accent border and a halo around it */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Width of the content (.page-main) and of the header and footer rows (.wrap) */ --main: 128rem; --wrap: 128rem; /* Side margin of the content (.page-main): edge-to-edge elements on mobile (gallery) take it back */ --gutter: 2rem; /* Radius of the cards, the fields, the buttons */ --r: 1.44rem; --r-field: .96rem; --r-btn: 99px; } :where(html[data-theme="light"]) { color-scheme: light; } :where(html[data-theme="dark"]) { color-scheme: dark; } /* ——— Reset and typography ——— */ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } :where(body *, body *::before, body *::after) { box-sizing: border-box; } :where(body) { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); overflow-x: hidden; } :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(body) :where(img, svg) { max-width: 100%; } :where(h1, h2, h3, h4, h5, h6) { color: var(--ink); } :where(body) :where(h1, h2, h3) { margin: 0; } :where(p) { margin: 0 0 1rem; } :where(a) { color: var(--accent-ink); } :where(a:visited) { color: var(--accent-ink); } :where(a:hover) { color: var(--ink); } :where(table) { border-collapse: collapse; } :where(th, td) { border-color: var(--line); } :where(hr) { border-color: var(--line); } :where(code, pre) { background: var(--surface2); color: var(--ink); border-radius: .48rem; } :where(pre) { padding: 1.6rem; overflow-x: auto; border: 1px solid var(--line); } :where(::selection) { background: var(--accent); color: var(--on-accent); } /* ——— Page: header, content (.page-main), footer; .wrap: a row of the header or footer ——— */ :where(.page-wrapper) { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } :where(.page-main) { flex-grow: 1; width: 100%; max-width: var(--main); margin: 0 auto; padding: 0 var(--gutter); } :where(.wrap) { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 1.6rem; } /* Flash message of the layout (Session::flash()), rendered only when there is one: hence the unconditional margin */ :where(.messages) { margin-top: 1.6rem; } :where(.messages .message) { margin: 0 0 .8rem; padding: 1.2rem 1.6rem; font-size: 1.44rem; } /* ——— Utilities: icon in its container (icon helper), text for screen readers only ——— */ :where(.i) { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; } :where(.i svg) { width: 100%; height: 100%; } :where(.sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ——— Buttons: .action.primary (main action), the others outlined ——— */ :where(button) { cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface2); color: var(--ink); box-shadow: none; } :where(button:hover, button:focus) { border-color: var(--accent); background: var(--surface2); color: var(--ink); } :where(.action.primary, a.action.primary:visited) { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 4.4rem; padding: 1.12rem 2.4rem; border: 1px solid var(--accent); border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); font-size: 1.6rem; font-weight: 600; box-shadow: none; cursor: pointer; } :where(.action.primary:hover, .action.primary:focus, .action.primary:active) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 85%, var(--ink)); color: var(--on-accent); } :where(.action.primary[disabled]) { opacity: .5; cursor: not-allowed; } /* Operation in progress (aria-busy, Zeste.busy() or form[data-busy]): a spinner in place of the icon */ :is(button, .action)[aria-busy="true"] { opacity: .85; cursor: progress; } :is(button, .action)[aria-busy="true"] > :is(svg, .i) { display: none; } :is(button, .action)[aria-busy="true"]::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: zeste-spin .7s linear infinite; } /* ——— Forms: .field > .label + .control (contact…) ——— */ :where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; } :where(.field) { margin: 0 0 1.92rem; } :where(.field > .label) { display: block; margin: 0 0 .64rem; color: var(--ink); font-size: 1.44rem; font-weight: 600; } :where(.field .note) { color: var(--muted); } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], select, textarea) { width: 100%; height: 4.48rem; padding: 0 1.44rem; border: 1px solid var(--field-line); border-radius: var(--r-field); background: var(--field); color: var(--ink); font-size: 1.6rem; } :where(textarea) { height: auto; min-height: 19.2rem; padding: 1.12rem 1.44rem; line-height: 1.5; resize: vertical; } :where(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], select, textarea):focus { /* The transparent outline stays visible in forced colors (Windows high contrast), where shadows vanish */ outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-ring); } /* Field left invalid (:user-invalid: once the customer has typed in it or sent the form, never on load), in every form: specific enough to beat the fields of the components (.dialog, .auth…); the accent comes back while typing. A required field is not marked: the optional ones are (« optional ») */ :is(input, select, textarea):user-invalid:not(:focus) { border-color: var(--danger); } input[type="checkbox"]:user-invalid:not(:focus) { outline: 2px solid var(--danger); outline-offset: 2px; } /* Its message, below it (zeste.js) */ :where(.v-err) { margin: .48rem 0 0; color: var(--danger); font-size: 1.32rem; line-height: 1.4; } :where(.v-err[hidden]) { display: none; } :where(input, textarea)::placeholder { color: var(--muted); } :where(input[disabled], select[disabled], textarea[disabled]) { background: var(--surface2); } /* ——— Messages: .message.notice / .error (role="alert" for the errors) ——— */ :where(.message) { display: block; padding: 1.2rem 1.6rem; font-size: 1.44rem; line-height: 1.45; } :where(.message.notice, .message.error) { border: 1px solid var(--line); border-radius: 1.12rem; background: var(--surface2); color: var(--ink); } :where(.message.error) { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); } :where(.message.notice) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } :where(.message a, .message a:visited) { color: var(--accent-ink); } /* ——— Components ——— */ /* Eyebrow: a small label in capitals above a title, followed by a stroke */ .eyebrow { display: flex; align-items: center; gap: 1.12rem; margin: 0 0 .8rem; color: var(--accent-ink); font-size: 1.2rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .eyebrow::after { content: ""; flex: 0 0 4.8rem; height: 2px; background: var(--accent); } /* Logo: one image per theme */ .logo-light { display: none !important; } html[data-theme="light"] .logo-dark { display: none !important; } html[data-theme="light"] .logo-light { display: block !important; } /* Without script (no data-theme): the logo of the system scheme */ @media (prefers-color-scheme: light) { html:not([data-theme]) .logo-dark { display: none !important; } html:not([data-theme]) .logo-light { display: block !important; } } /* ——— Header: one row, sticks at the top with a blur ——— Large at the top of the page (--hdr-big, logo at --logo-big), compact as soon as the page scrolls (--hdr-small): the header keeps its height and sticks at top: -(big - small), so it slides with the page without shifting anything; only its content moves down and the logo shrinks (transform, class is-compact set by zeste.js). */ :where(:root) { /* Header height at the top of the page and once scrolled, logo height and scale once scrolled */ --hdr-big: 8rem; --hdr-small: 5.6rem; --logo-big: 4rem; --logo-k: .75; /* Logo: baseline of its text (fraction of its height, 1: its bottom), width / height */ --logo-base: 1; --logo-ratio: 3.67; } .page-header { margin: 0; border: 0; background: none; position: sticky; top: calc(var(--hdr-small) - var(--hdr-big)); z-index: 20; } .site { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site .wrap { display: flex; align-items: center; gap: 1.2rem 2rem; min-height: var(--hdr-big); } .site .wrap > *, .site .brand > * { transition: transform .28s cubic-bezier(.2, .8, .3, 1); } .page-header.is-compact .site .wrap > * { transform: translateY(calc((var(--hdr-big) - var(--hdr-small)) / 2)); } /* Logo and links: the links' baseline on the bottom of the logo text. The logo has no baseline (image): that of the .logo block is its bottom, hence the offset of the links (top). When shrunk, the logo keeps this bottom (transform-origin), and the block moves up by as much as its center moved down */ .site .brand { display: flex; align-items: baseline; gap: 2.8rem; } .site .logo { display: inline-flex; float: none; margin: 0; max-width: none; position: static; transform-origin: 0 calc(var(--logo-base) * 100%); } .site .logo img { display: block; height: var(--logo-big); width: auto; } /* Logo without image: the name of the store */ .logo, .logo:visited, .logo:hover { color: var(--ink); text-decoration: none; } .logo-text { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .foot .logo-text { font-size: 1.6rem; } .page-header.is-compact .site .brand { transform: translateY(calc((var(--hdr-big) - var(--hdr-small)) / 2 - (var(--logo-base) - .5) * (1 - var(--logo-k)) * var(--logo-big))); } .page-header.is-compact .site .nav { transform: translateX(calc(var(--logo-big) * var(--logo-ratio) * -1 * (1 - var(--logo-k)))); } .page-header.is-compact .site .logo { transform: scale(var(--logo-k)); } @media (prefers-reduced-motion: reduce) { .site .wrap > *, .site .brand > * { transition: none; } } /* Links of the menu: like the footer links (accent stroke on hover), slightly larger */ .site .nav { position: relative; top: calc((var(--logo-base) - 1) * var(--logo-big)); display: flex; gap: 2.4rem; } .site .nav a, .site .nav a:visited { padding-block: .24rem; color: var(--muted); font-size: 16px; font-weight: 500; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .3s ease; } .site .nav a:hover, .site .nav a:focus-visible { color: var(--ink); text-decoration: none; background-size: 100% 2px; } /* Something waits on that page (Zeste\Shop\Badges) */ .site .nav .dot { display: inline-block; width: .8rem; height: .8rem; margin-left: .64rem; border-radius: 99px; background: var(--accent); vertical-align: middle; } /* Account menu (views/partials/header.phtml): signed-in customer (.is-in) and fine pointer only; on touch, the icon leads to the account. Opens on hover or keyboard, closing slightly delayed for the mouse path (::before fills the gap) */ .acc-dd { position: relative; display: flex; } .acc-dd-panel { display: none; } @media (hover: hover) and (pointer: fine) { .acc-dd.is-in .acc-dd-panel { position: absolute; top: calc(100% + 1.2rem); right: -.8rem; z-index: 50; display: flex; flex-direction: column; gap: .4rem; width: 26rem; padding: 1.2rem; box-sizing: border-box; border: 1px solid var(--line); border-radius: 1.6rem; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility 0s .15s; transition-delay: .2s; } .acc-dd.is-in .acc-dd-panel::before { content: ""; position: absolute; inset: -1.3rem 0 100%; } .acc-dd.is-in:hover .acc-dd-panel, .acc-dd.is-in:focus-within .acc-dd-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } } .acc-dd-panel ul { margin: 0; padding: .4rem 0; list-style: none; border-bottom: 1px solid var(--line); } .acc-dd-panel li { margin: 0; } .acc-dd-panel form { margin: 0; padding-top: .4rem; } .acc-dd-panel :is(a, a:visited, .acc-dd-out) { display: flex; align-items: center; gap: 1rem; width: 100%; box-sizing: border-box; padding: .8rem 1rem; border: 0; border-radius: 1rem; background: none; color: var(--muted); font: 500 1.44rem/1.3 var(--font); text-align: left; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; } .acc-dd-panel :is(a, .acc-dd-out):is(:hover, :focus-visible) { background: var(--surface2); color: var(--ink); text-decoration: none; } .acc-dd-panel svg { width: 1.84rem; height: 1.84rem; flex: none; } .acc-dd-panel :is(.acc-dd-me, .acc-dd-me:visited) { display: block; margin-bottom: .4rem; color: var(--ink); } .acc-dd-me .acc-dd-name { display: block; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .acc-dd-me small { display: block; overflow: hidden; color: var(--muted); font-size: 1.24rem; text-overflow: ellipsis; white-space: nowrap; } .acc-dd-panel .acc-dd-out:is(:hover, :focus-visible) { color: var(--danger); } .site .tools { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; } .site .tools > * { margin: 0; } .ibtn, a.ibtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .56rem; min-width: 4rem; height: 4rem; padding: 0 .8rem; border: 0; border-radius: 99px; background: none; box-shadow: none; color: var(--ink); text-decoration: none; font: 400 1.36rem/1 var(--font); cursor: pointer; } .ibtn:hover, .ibtn:focus, a.ibtn:hover { background: var(--surface2); color: var(--ink); border: 0; text-decoration: none; } .ibtn:visited { color: var(--ink); } .ibtn .i { width: 2.16rem; height: 2.16rem; } /* Theme and language: more discreet than the account and the cart */ .ibtn-soft { opacity: .75; } .ibtn-soft:hover, .ibtn-soft:focus-visible { opacity: 1; } /* Mini cart (views/partials/mini-cart.phtml, zeste.js): a panel below the cart icon, with a mouse only; summary, close and action at the top (as on dev/store), the lines below */ .mini-cart { position: relative; display: flex; } .mini-cart-panel { position: absolute; top: calc(100% + 1.2rem); right: -.8rem; z-index: 50; width: 48rem; max-width: calc(100vw - 3.2rem); padding: 1.6rem; border: 1px solid var(--line); border-radius: 1.6rem; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / .5); animation: combo-in .14s ease-out; } html[data-theme="light"] .mini-cart-panel { box-shadow: 0 12px 32px rgb(20 30 40 / .14); } .mini-cart-head { display: flex; align-items: center; gap: .8rem; margin: -.4rem -.4rem 0 0; } .mini-cart-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .64rem; margin: 0; color: var(--muted); font-size: 1.44rem; } .mini-cart-sum strong { color: var(--ink); font-size: 1.68rem; font-weight: 800; font-variant-numeric: tabular-nums; } .mini-cart-close { flex: none; display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-left: auto; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted); } .mini-cart-close:hover, .mini-cart-close:focus-visible { border: 0; background: var(--surface2); color: var(--ink); } .mini-cart-close .i { width: 2rem; height: 2rem; } .mini-cart-go, .mini-cart-go:hover { width: 100%; margin-top: 1.2rem; text-decoration: none; } .mini-cart .ck-items { max-height: 50vh; margin: 1.2rem 0 0; padding: 1.2rem 0 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); border-bottom: 0; } /* ——— Lines of the cart (views/checkout/partials/item.phtml): summary of the cart page, mini cart; those of the confirmation (.ok-*). Price and remove button centered on the height of the line ——— */ .ck-items, .ok-items { display: grid; gap: 1.2rem; margin: 0 0 1.6rem; padding: 0 0 1.6rem; border-bottom: 1px solid var(--line); list-style: none; } .ck-items li, .ok-items li { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin: 0; padding-left: 1.2rem; border-left: 3px solid var(--c, var(--accent)); } .ck-item-txt, .ok-item { flex: 1 1 auto; min-width: 0; } .ck-item-txt strong, .ok-item strong { display: block; font-size: 1.44rem; line-height: 1.35; } .ck-item-txt small, .ok-item small { display: block; margin-top: .32rem; color: var(--muted); font-size: 1.24rem; } .ck-item-txt strong { font-weight: 500; } .ck-option, .ok-option { display: inline-block; max-width: 100%; margin-top: .48rem; padding: .16rem .8rem; overflow: hidden; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font: 500 1.24rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } .ck-price, .ok-price { flex: none; font-size: 1.44rem; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; } .ck-items li, .ok-items li { position: relative; } .ck-remove { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 0 0 -.4rem; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted); cursor: pointer; flex: none; } .ck-remove svg { width: 1.6rem; height: 1.6rem; } .ck-remove:hover, .ck-remove:focus-visible { background: var(--surface2); color: var(--danger); } .ck-item-txt a, .ok-item a, .ck-item-txt a:visited, .ok-item a:visited { color: inherit; text-decoration: none; } .ck-item-txt a:hover, .ok-item a:hover { text-decoration: underline; } .badge { position: absolute; top: .24rem; right: .16rem; min-width: 1.76rem; height: 1.76rem; padding: 0 .4rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 1.088rem; font-weight: 700; line-height: 1.76rem; text-align: center; box-sizing: border-box; } .badge:empty { display: none; } .badge.bump { animation: bump .4s; } @keyframes bump { 50% { transform: scale(1.4); } } /* Links of the menu as buttons (mobile only), the dot of Badges on the icon like the count of the cart */ .site .tools .menu-ibtn { display: none; } .menu-ibtn .dot { position: absolute; top: .64rem; right: .64rem; width: .8rem; height: .8rem; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); } @media (max-width: 47.99rem) { :where(:root) { --hdr-big: 6.4rem; --logo-big: 3.2rem; --logo-k: .85; } .site .wrap { gap: .8rem; } .site .tools { gap: .4rem; } .site .nav { display: none; } /* Links of the menu with an icon (menuIcons) instead of the menu */ .site .tools .menu-ibtn { display: inline-flex; } /* Language: in the footer on mobile */ .site .tools .lang { display: none; } } /* Narrow phones (under 360 px): tighter buttons, the initials of the account left out */ @media (max-width: 22.49rem) { .site .tools .ibtn { min-width: 3.6rem; padding: 0 .4rem; } .site .tools .initials { display: none; } } /* ——— Discreet footer ——— */ .page-footer { margin-top: 0; padding: 0; background: none; } .foot { --fa: var(--accent); position: relative; margin-top: 5.6rem; padding-block: 2.4rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 1.472rem; } .foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--fa) 30%, var(--line) 60%, transparent); opacity: .8; } .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.44rem 3.2rem; } .foot .logo { display: inline-flex; float: none; margin: 0; max-width: none; position: static; } .foot .logo img { height: 2.16rem; width: auto; opacity: .85; transition: opacity .2s; } .foot .logo:hover img { opacity: 1; } /* Window at least 850 px tall, except mobile (the footer would take 180 px there): the footer stays visible at the bottom while scrolling (sticky), blurred like the header; at the end of the page, it goes back to its place below the content */ @media (min-height: 850px) and (min-width: 48rem) { .page-footer { position: sticky; bottom: 0; z-index: 19; margin-top: 5.6rem; } .foot { margin-top: 0; padding-block: .64rem calc(.64rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Compact while it covers the page: one line about 45 px tall */ .foot .wrap { flex-wrap: nowrap; gap: 2.4rem; } .foot .logo img { height: 1.8rem; } .foot nav { gap: .4rem 1.92rem; } .foot nav a, .foot nav a:visited { font-size: 14px; } .foot .foot-tools .ibtn { height: 3.2rem; } } .foot nav { display: flex; flex-wrap: wrap; gap: .64rem 2.24rem; } /* Link: an accent stroke drawn from left to right on hover */ .foot nav a, .foot nav a:visited { padding-block: .24rem; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; background: linear-gradient(var(--fa), var(--fa)) 0 100% / 0 2px no-repeat; transition: color .2s, background-size .3s ease; } .foot nav a:hover, .foot nav a:focus-visible { color: var(--ink); text-decoration: none; background-size: 100% 2px; } /* Footer buttons: theme, languages (mobile only) */ .foot .foot-tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; } /* Theme: round button preceded by the current theme in small caps on two lines; on click, the icon rotates and gives way to the other, the label cross-fades */ .foot .foot-tools .theme-switch { gap: .8rem; padding: 0 1rem 0 1.3rem; } .theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ts-label { display: grid; text-align: right; font: 650 .95rem/1.15 var(--font); letter-spacing: .09em; text-transform: uppercase; } .ts-label > span { grid-area: 1 / 1; transition: opacity .3s, transform .4s cubic-bezier(.3, 1.3, .5, 1); } .ts-icon { position: relative; display: inline-flex; width: 2.16rem; height: 2.16rem; } .ts-icon .i { position: absolute; inset: 0; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.3, .5, 1); } html:not([data-theme="light"]) .theme-switch .ts-light, html[data-theme="light"] .theme-switch .ts-dark { opacity: 0; } html:not([data-theme="light"]) .ts-label .ts-light, html[data-theme="light"] .ts-label .ts-dark { transform: translateY(.5rem); } html:not([data-theme="light"]) .ts-icon .ts-light, html[data-theme="light"] .ts-icon .ts-dark { transform: rotate(-90deg) scale(.4); } @media (prefers-reduced-motion: reduce) { .ts-label > span, .ts-icon .i { transition: none; } } .foot .foot-tools .ibtn { color: var(--muted); } .foot .foot-tools .ibtn:hover, .foot .foot-tools .ibtn:focus-visible { color: var(--ink); } @media (min-width: 48rem) { .foot .foot-tools .lang { display: none; } } /* Dots of a carousel on mobile (carousel.js): one per element of the row before [data-dots] */ .dots { display: none; } @media (max-width: 47.99rem) { .dots:not([hidden]) { display: flex; justify-content: center; gap: .64rem; margin-top: 1.2rem; } .dots button { width: .8rem; height: .8rem; padding: 0; border: 0; border-radius: 99px; background: var(--line); box-shadow: none; cursor: pointer; transition: width .25s, background .25s; } .dots button:hover, .dots button:focus { background: var(--muted); box-shadow: none; } .dots button[aria-current="true"] { width: 2.4rem; background: var(--accent); } } /* ——— Dialogs (.dialog): sign-in, add with options; .what (name and price), .hint, .err, .acts (the buttons) ——— */ .dialog { width: min(44.8rem, calc(100% - 3.2rem)); padding: 0; border: 1px solid var(--line); border-radius: 1.6rem; background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / .5); } .dialog::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); } .dialog[open] { animation: pop .25s cubic-bezier(.2, .9, .3, 1.2); } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } } .dialog form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 2rem; } .dialog h2 { margin: 0; font-size: 1.84rem; font-weight: 700; } .dialog .what { display: flex; justify-content: space-between; gap: 1.6rem; margin: 0; color: var(--muted); font-size: 1.44rem; } .dialog label { font-size: 1.36rem; font-weight: 600; } .dialog input { width: 100%; height: 4.48rem; margin-top: .48rem; padding: 0 1.44rem; border: 1px solid var(--field-line); border-radius: .96rem; background: var(--field); color: var(--ink); font: 400 1.6rem var(--font); box-sizing: border-box; box-shadow: none; } .dialog input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-ring); } .dialog p { margin: 0; } .dialog .hint { color: var(--muted); font-size: 1.28rem; display: flex; gap: .64rem; } .dialog .hint .i { width: 1.6rem; height: 1.6rem; color: var(--accent-ink); flex: none; margin-top: .16rem; } .dialog .err { color: var(--danger); font-size: 1.312rem; } .dialog .acts { display: flex; justify-content: flex-end; gap: .8rem; margin-top: .4rem; } .dialog .acts button { height: 4.16rem; padding: 0 1.76rem; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--ink); cursor: pointer; font: 600 1.44rem var(--font); box-shadow: none; } .dialog .acts button:hover { border-color: var(--ink); } .dialog .acts .go, .dialog .acts .go:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .dialog .acts .go[disabled] { opacity: .6; cursor: progress; } /* Operation in progress (aria-busy): the spinner before the waiting label */ .dialog .acts .go[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; opacity: .85; } @media (max-width: 47.99rem) { /* Bottom sheet: the buttons fall under the thumb */ .dialog { margin: auto 0 0; width: 100%; min-width: 0; max-width: none; border-radius: 1.6rem 1.6rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .dialog[open] { animation: up .25s ease-out; } .dialog .acts button { flex: 1; height: 4.8rem; } } @keyframes up { from { transform: translateY(100%); } } /* ——— Password field with an eye (.pw > input + button[data-pw], zeste.js) ——— */ .pw { position: relative; display: block; } .pw input { padding-right: 5.2rem; } .pw-eye { position: absolute; top: 50%; right: .4rem; display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0; padding: 0; border: 0; border-radius: .8rem; background: none; color: var(--muted); transform: translateY(-50%); } .dialog .pw-eye { margin-top: .24rem; } .pw-eye:hover, .pw-eye:focus-visible { border: 0; background: var(--surface2); color: var(--ink); } .pw-eye .i { width: 2rem; height: 2rem; } .pw-eye .i + .i, .pw-eye[aria-pressed="true"] .i:first-child { display: none; } .pw-eye[aria-pressed="true"] .i + .i { display: inline-flex; } /* ——— Sign-in through another platform (views/account/partials/sign-in.phtml): sign-in, sign-up, dialog ——— */ .sign-in { display: grid; gap: .8rem; } .sign-in-btn, .sign-in-btn:visited { display: flex; align-items: center; justify-content: center; gap: 1.2rem; height: 4.8rem; padding: 0 2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color .2s; } .sign-in-btn:hover, .sign-in-btn:focus-visible { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--ink); text-decoration: none; } .sign-in-btn img { width: 2rem; height: 2rem; flex: none; } .sign-in-sep { display: flex; align-items: center; gap: 1.6rem; margin: 2rem 0; color: var(--muted); font-size: 1.28rem; } .sign-in-sep::before, .sign-in-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .login-dialog .sign-in-sep { margin: 0; } /* ——— Sign-in dialog of the header (views/partials/login-dialog.phtml, zeste.js): a .dialog with a head ——— */ .login-dialog { width: min(43.2rem, calc(100% - 3.2rem)); } .login-dialog form { position: relative; gap: 1.6rem; padding: 2.8rem; } .login-dialog form::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 1.6rem 1.6rem 0 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .login-dialog-x { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 99px; background: none; color: var(--muted); } .login-dialog-x:hover, .login-dialog-x:focus-visible { border: 0; background: var(--surface2); color: var(--ink); } .login-dialog-x .i { width: 2rem; height: 2rem; } .login-dialog-head { display: flex; align-items: center; gap: 1.44rem; margin: 0 4rem .4rem 0; } .login-dialog-ico { display: grid; place-items: center; flex: none; width: 4.8rem; height: 4.8rem; border-radius: 1.28rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); } .login-dialog-ico .i { width: 2.4rem; height: 2.4rem; } .login-dialog-head h2 { font-size: 2.24rem; font-weight: 800; letter-spacing: -.015em; } .login-dialog-head p { margin: .16rem 0 0; color: var(--muted); font-size: 1.36rem; } .login-dialog-forgot { margin-top: -.8rem; font-size: 1.32rem; text-align: right; } .login-dialog-go { gap: .96rem; width: 100%; } .login-dialog-go .i { width: 2rem; height: 2rem; } .login-dialog-alt { color: var(--muted); font-size: 1.36rem; text-align: center; } .login-dialog-alt a { font-weight: 600; } @media (max-width: 47.99rem) { .login-dialog { width: 100%; } .login-dialog form { padding: 2.4rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); } } /* ——— Search of a company (views/partials/company-search.phtml, company.js): two lines per company, the name then the address and the SIRET ——— */ .company-search > label { display: block; margin: 0 0 .64rem; color: var(--ink); font-size: 1.36rem; font-weight: 600; } .company-search > label small { color: var(--muted); font-size: 1.2rem; font-weight: 400; } .company-search .fld-hint { margin: .64rem 0 0; color: var(--muted); font-size: 1.28rem; } .company-search .fld-hint:empty { display: none; } /* The magnifier inside the field (company.js moves it there; without JS, the field has no room for it) */ .company-search-ico { display: none; } .combo > .company-search-ico { position: absolute; top: 50%; left: 1.4rem; z-index: 1; display: block; width: 2rem; height: 2rem; color: var(--muted); transform: translateY(-50%); pointer-events: none; } .combo:has(> .company-search-ico) > input { padding-left: 4.4rem; } .combo-list.company-list [role="option"] { grid-template-columns: minmax(0, 1fr); } .company-list .combo-name strong, .company-list .combo-name small { display: block; } .company-list .combo-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-list .combo-name small { color: var(--muted); font-size: 1.28rem; } /* ——— Field with a list of suggestions (combo.js, Zeste.combo()) ——— */ .combo { position: relative; } .combo > input { padding-right: 4.4rem; text-overflow: ellipsis; } .combo-chevron { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 4.4rem; color: var(--muted); cursor: pointer; } .combo-chevron svg { width: 1.92rem; height: 1.92rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .combo.is-open .combo-chevron { color: var(--accent-ink); } .combo.is-open .combo-chevron svg { transform: rotate(180deg); } .combo-list { position: absolute; z-index: 30; top: calc(100% + .64rem); left: 0; right: 0; max-height: 30.4rem; box-sizing: border-box; margin: 0; padding: .48rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid var(--line); border-radius: 1.12rem; background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / .35); animation: combo-in .14s ease-out; scrollbar-width: thin; } .combo.is-up .combo-list { top: auto; bottom: calc(100% + .64rem); } @keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } } .combo-list [role="option"] { display: grid; grid-template-columns: 1.92rem minmax(0, 1fr) auto; align-items: center; gap: .96rem; min-height: 4rem; margin: 0; padding: .48rem 1.12rem; border-radius: .72rem; font-size: 1.52rem; line-height: 1.3; cursor: pointer; } .combo-list [role="option"].is-active { background: var(--surface2); } .combo-list [aria-selected="true"] { font-weight: 600; } .combo-list [aria-selected="true"] .combo-check { color: var(--accent-ink); } .combo-check svg { display: block; width: 1.76rem; height: 1.76rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .combo-list .combo-action { color: var(--accent-ink); font-weight: 600; } .combo-action .combo-check svg { stroke-width: 2.5; } .combo-list mark { padding: 0; background: none; color: var(--accent-ink); font-weight: 700; } .combo-side { color: var(--muted); font-size: 1.2rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .combo-none { padding: 1.2rem 1.12rem; color: var(--muted); font-size: 1.44rem; } html[data-theme="light"] .combo-list { box-shadow: 0 12px 32px rgb(20 30 40 / .14); } /* ——— Accordion:
question answer
——— */ .accordion { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .2s; } .accordion:hover, .accordion[open] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.6rem 1.92rem; cursor: pointer; list-style: none; font-size: 1.6rem; font-weight: 600; line-height: 1.4; } .accordion > summary::-webkit-details-marker { display: none; } .accordion > summary .i { width: 2rem; height: 2rem; color: var(--muted); transition: transform .25s; } .accordion[open] > summary { color: var(--accent-ink); } .accordion[open] > summary .i { transform: rotate(180deg); color: var(--accent-ink); } .accordion > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); } .accordion > :not(summary) { padding: 0 1.92rem 1.6rem; } /* ——— Toast (views/partials/toast.phtml, Zeste.toast()): a message at the bottom, with a link ——— */ .toast { position: fixed; left: 50%; bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: .96rem; max-width: calc(100% - 3.2rem); padding: 1.12rem 1.6rem; border: 1px solid var(--line); border-radius: 1.28rem; background: var(--surface2); color: var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / .4); font-size: 1.408rem; transform: translate(-50%, 150%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility .3s; } .toast.on { transform: translate(-50%, 0); visibility: visible; } .toast .i { color: var(--accent-ink); } .toast.is-error .i { color: var(--danger); } .toast a, .toast a:visited { color: var(--accent-ink); font-weight: 600; white-space: nowrap; } /* ——— Copy button (button.copy[data-copy], zeste.js): copies its text, then shows data-copied for a moment ——— */ .copy { flex: none; height: 2.8rem; padding: 0 1.12rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 1.2rem var(--font); cursor: pointer; box-shadow: none; } .copy:hover { border-color: var(--accent); } /* ——— Folded part ([data-folded], zeste.js): hidden until its button [data-unfold] opens it; without JS, shown in full and the button's block ([data-unfold-hide]) hidden ——— */ .js [data-folded], html:not(.js) [data-unfold-hide] { display: none; } /* ——— Bank transfer details (views/checkout/partials/transfer.phtml): label and value per row, copy buttons ——— */ .transfer { margin: 2.4rem 0; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface2); text-align: left; } .transfer h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; font-size: 1.68rem; } .transfer dl { margin: 0 0 1.2rem; } .transfer dl > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .4rem 1.6rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--line); } .transfer dt { color: var(--muted); font-size: 1.36rem; } .transfer dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0; font: 600 1.52rem/1.4 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; } .transfer p { margin: 0; font-size: 1.44rem; } @media (max-width: 47.99rem) { .transfer { padding: 1.28rem 1.44rem; } .transfer dl > div { grid-template-columns: minmax(0, 1fr); } } /* ——— Appear on scroll (.reveal, zeste.js): --d, rank of the element, staggers the delay ——— */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); transition-delay: calc(var(--d, 0) * 60ms); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ——— Fade at the edges of a scrolling area ([data-scroll-fade], zeste.js): on the side where content remains (.more-start, .more-end), horizontal, or vertical (.is-y); --fade: width of the fade ——— */ [data-scroll-fade] { --fade: 6.4rem; --fade-to: to right; --fs: #000; --fe: #000; } [data-scroll-fade].is-y { --fade-to: to bottom; } [data-scroll-fade].more-start { --fs: transparent; } [data-scroll-fade].more-end { --fe: transparent; } [data-scroll-fade]:is(.more-start, .more-end) { -webkit-mask-image: linear-gradient(var(--fade-to), var(--fs), #000 var(--fade), #000 calc(100% - var(--fade)), var(--fe)); mask-image: linear-gradient(var(--fade-to), var(--fs), #000 var(--fade), #000 calc(100% - var(--fade)), var(--fe)); } /* ——— Chips: a row of toggle buttons (aria-pressed), scrolling when wider than the screen ——— */ .chips { display: flex; gap: .64rem; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips button { flex: none; padding: .64rem 1.36rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font: 400 1.408rem/1.4 var(--font); cursor: pointer; transition: all .2s; box-shadow: none; } .chips button:hover, .chips button:focus { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: none; } .chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; } /* ——— Reassurance (views/partials/reassure.phtml): cards (icon, title, text; a link or .reassure-card) in a grid; on mobile, a carousel of one card per screen, edge to edge (--gutter), dots below (