/* store.css — the storefront. * * Built on the two surfaces it sits between: the LIBRARY's section/rail/card * architecture (public/library/library.css) and the CHECKOUT's opal surface and * squircle language (ywe-surfaces.css). Where a recipe exists in either, it is * copied, not approximated. * * Typography is Poppins throughout. The token file still names Cormorant as * --ywe-font-display, but no shipped surface uses it: the checkout loads Poppins * only, the events page loads Poppins only, and the library links Cormorant in * its without ever referencing it in CSS. Headings here use the library's * exact recipe — Poppins 700, clamp(), -.02em. */ :root { --bg: #fdf9f4; --bg-subtle: #f5efe5; --ink: #1a1712; --ink-soft: #5a544a; --muted: #6b6258; --faint: #9a9080; --border: #e8e2d6; --border-light: #efe9df; --card-bg: #ffffff; --plum: #72549a; --plum-bg: rgba(114, 84, 154, .12); --font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --gutter: 1.25rem; --shadow: 0 2px 8px rgba(26,23,18,.05); --shadow-lift: 0 14px 34px rgba(26,23,18,.12); --dur-quick: 200ms; --dur-standard: 320ms; --ease-settle: cubic-bezier(0.32, 0.72, 0, 1); --ease-enter: cubic-bezier(0.364, 0, 0.164, 1); --squircle-sm: 16px; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Leaves room for the fixed global header bar (desktop); mobile has bottom chrome. */ .wrap { max-width: 1240px; margin: 0 auto; padding: 116px var(--gutter) 7rem; } /* ── Masthead ─────────────────────────────────────────────────────────────── */ .masthead { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; } .masthead h1 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(2rem, 4.4vw, 2.9rem); } .masthead-mark { display: grid; place-items: center; color: var(--ink); } .masthead-mark svg { width: clamp(1.9rem, 4.2vw, 2.7rem); height: clamp(1.9rem, 4.2vw, 2.7rem); display: block; } /* ── Controls: chips, dropdowns, view switch ─────────────────────────────── */ .controls { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap; margin: 0 calc(-1 * var(--gutter)) 1.6rem; /* Vertical padding is shadow clearance, not spacing: overflow-x:auto also clips vertically, so a 12px-offset 30px-blur shadow needs room on both sides or it is sliced flat. */ padding: 1rem var(--gutter) 1.15rem; overflow-x: auto; overflow-y: hidden; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.06); backdrop-filter: blur(14px) saturate(1.06); } .controls::-webkit-scrollbar { display: none; height: 0; } .controls > * { flex: 0 0 auto; } .controls-sep { width: 1px; height: 22px; background: var(--border); margin: 0 .2rem; } /* Chips — copied from public/events/index.html:229 */ /* The library's control surface, not the events page's rainbow glass: on the library these read as white with a faint pearl, and the store sits beside it. Geometry matches .filter-toggle (library.css:87). */ .chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; min-height: 34px; padding: .28rem .68rem; border-radius: var(--ywe-shape-control, 999px); corner-shape: var(--ywe-corner-control, superellipse(1.25)); border: 1px solid var(--border); background: var(--ywe-surface-opal-control, rgba(255,255,255,.72)); font-family: inherit; font-size: .7rem; font-weight: 650; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; box-shadow: var(--ywe-shadow-opal-card, var(--shadow)); transition: border-color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), box-shadow var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), background var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .chip:hover { transform: translateY(-2px); border-color: rgba(119,115,110,.46); } .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); } .chip-ico { display: inline-flex; align-items: center; flex-shrink: 0; } .chip-ico svg { width: 12px; height: 12px; display: block; } /* Dropdowns — the library's .filter-select, verbatim recipe */ .select { appearance: none; -webkit-appearance: none; font: inherit; font-size: .74rem; font-weight: 500; color: var(--ink); background-color: var(--card-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6258' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; border: 1px solid var(--border); border-radius: var(--ywe-shape-control, 999px); corner-shape: var(--ywe-corner-control, superellipse(1.25)); box-shadow: var(--ywe-shadow-opal-card, var(--shadow)); min-height: 34px; padding: .28rem 1.9rem .28rem .8rem; cursor: pointer; font-size: .74rem; transition: border-color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), box-shadow var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .select:hover { transform: translateY(-2px); border-color: rgba(119,115,110,.46); } .select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--plum-bg); } /* View switch — rail or grid */ .viewswitch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--ywe-surface-opal-control, rgba(255,255,255,.72)); border: 1px solid var(--border); border-radius: var(--ywe-shape-control, 999px); corner-shape: var(--ywe-corner-control, superellipse(1.25)); box-shadow: var(--ywe-shadow-opal-card, var(--shadow)); } .viewbtn { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 999px; corner-shape: superellipse(1.25); background: transparent; color: var(--faint); cursor: pointer; transition: background var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .viewbtn svg { width: 14px; height: 14px; } .viewbtn.on { background: var(--ink); color: #fff; } /* ── Section ──────────────────────────────────────────────────────────────── */ .section { margin: 0 0 3.75rem; scroll-margin-top: 150px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .35rem; flex-wrap: wrap; } .section-title { display: flex; align-items: center; gap: .7rem; } .section-head h2 { margin: 0; font-family: var(--font); font-weight: 700; color: var(--ink); font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; } .section-mark { display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); } .section-mark svg { width: 22px; height: 22px; display: block; } .see-all { min-height: 24px; font-size: .8rem; font-weight: 700; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; } .see-all svg { width: 13px; height: 13px; transition: transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-settle); } .see-all:hover svg { transform: translateX(3px); } .section-sub { color: var(--muted); margin: 0 0 1.1rem; max-width: 60ch; font-size: .84rem; } /* ── Rail ─────────────────────────────────────────────────────────────────── */ .rail-wrap { position: relative; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .rail { display: flex; gap: 1.1rem; align-items: stretch; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; /* Same reason as .controls: the rail scrolls on X and therefore clips on Y. 1.25rem above and 2.75rem below clears the card's lift shadow at rest and on hover (translateY(-2px) raises it further). */ padding: 1.25rem var(--gutter) 2.75rem; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; } .rail::-webkit-scrollbar { display: none; height: 0; } .item { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; width: 300px; } .item.wide { width: 380px; } /* Grid view: the same cards, unsnapped. */ .grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); padding: 1.25rem 0 1.75rem; } .grid .item, .grid .item.wide { width: auto; } /* Rail arrows: desktop only, quiet until the rail is hovered. */ .railnav { position: absolute; top: 42%; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 999px; corner-shape: superellipse(1.25); background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; box-shadow: 0 6px 18px rgba(26,23,18,.12); opacity: 0; transition: opacity var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-settle); } .railnav svg { width: 15px; height: 15px; } .railnav.prev { left: calc(var(--gutter) - 10px); } .railnav.next { right: calc(var(--gutter) - 10px); } .rail-wrap:hover .railnav { opacity: 1; } .railnav:hover { transform: scale(1.06); } .railnav[disabled] { opacity: 0 !important; pointer-events: none; } @media (hover: none) { .railnav { display: none; } } /* ── Card ─────────────────────────────────────────────────────────────────── */ .card { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ywe-surface-opal, var(--card-bg)); border: 1px solid var(--ywe-edge-opal, var(--border)); border-radius: var(--ywe-shape-card, 27px); corner-shape: var(--ywe-corner-frame, squircle); box-shadow: var(--ywe-shadow-opal-card, var(--shadow)); transition: transform var(--dur-quick) var(--ease-settle); } .item:hover .card { transform: translateY(-2px); } /* Already bought. Not hidden — hiding it makes people think the shop is broken, and an Om member should be able to see that the workshop is already theirs. Dimmed hard enough that it reads as settled rather than on offer. */ /* .48 on a card whose own fill is already translucent erased it. The muting lives on the media instead, so the title stays readable and the card reads as settled rather than missing. */ .card.is-owned { opacity: .78; } .card.is-owned:hover { opacity: 1; } .card.is-owned .card-media { filter: grayscale(.45) contrast(.95); opacity: .7; } .card.is-owned:hover .card-media { filter: grayscale(.15); opacity: .9; } .card.is-owned .card-media, .card.is-owned .card-name { transition: filter var(--dur-quick, 200ms) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), opacity var(--dur-quick, 200ms) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .item:hover .card.is-owned { transform: translateY(-2px); } .card-owned-note { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; } .card-owned-note svg { width: 14px; height: 14px; flex: 0 0 auto; } .card-owned-note .go { margin-left: auto; opacity: .6; } .card-owned-note .go svg { width: 12px; height: 12px; } .card-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--card-surface, var(--bg-subtle)), #e6dccb); } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-media img.fit-contain { object-fit: contain; padding: 14px; } .card.portrait .card-media { aspect-ratio: 3 / 4; } .card-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; color: rgba(26,23,18,.10); } .card-kind { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; min-height: 22px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 11px; corner-shape: squircle; background: rgba(255,255,255,.9); color: var(--ink); font: 600 9.5px/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(26,23,18,.08); } .card-body { display: flex; flex-direction: column; flex: 1; padding: .85rem .95rem 1rem; } /* The disclosure sits beside the thing it discloses — the title — instead of crowding the Add button, where it read as a second action. */ .card-head { display: flex; align-items: flex-start; gap: .5rem; } .card-headings { flex: 1; min-width: 0; } .card-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.22; letter-spacing: -.015em; } .card-meta { margin: .2rem 0 0; color: var(--muted); font-size: .74rem; } .card-perk { align-self: flex-start; margin-top: .5rem; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--card-accent, var(--ink)) 22%, transparent); border-radius: 11px; corner-shape: squircle; background: color-mix(in srgb, var(--card-accent, var(--ink)) 6%, rgba(255,255,255,.9)); font: 600 9.5px/1.2 var(--font); color: var(--ink); } /* Expand in place, on the checkout's accordion motion (.co-ticket-dropdown). */ .card-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle); } .card.is-open .card-fold { grid-template-rows: 1fr; } .card-fold > div { overflow: hidden; } .card-desc { margin: .6rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; } .card-benefits { margin: .55rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .card-benefits li { position: relative; padding-left: 15px; color: var(--muted); font-size: .75rem; line-height: 1.45; } .card-benefits li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--card-accent, var(--ink)) 55%, transparent); } .card-more { display: inline-block; margin-top: .55rem; font-size: .74rem; font-weight: 600; color: var(--ink); } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .9rem; } /* A paid price is a quiet companion to the action, not a second button — public/events/index.html:382. */ .card-price { flex: 1; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; } .card-price.is-free { font-size: .88rem; font-weight: 600; color: var(--muted); } .card-add { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 32px; padding: 0 .7rem 0 .85rem; border: 1px solid var(--ink); border-radius: 999px; corner-shape: superellipse(1.25); background: var(--ink); color: #fff; text-decoration: none; font-family: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; transition: transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-settle), background var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .card-add:hover { transform: translateY(-2px); } .card-add.is-in { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); padding: 0 .85rem 0 .7rem; } .add-ico { width: 13px; height: 13px; flex: 0 0 auto; } .card-owned { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; color: var(--muted); text-decoration: none; } .card-owned svg { width: 13px; height: 13px; } .card-expand { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; margin: -2px -4px 0 0; border: 0; background: transparent; color: var(--faint); cursor: pointer; transition: transform var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle), color var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } .card-expand svg { width: 14px; height: 14px; } .card.is-open .card-expand { transform: rotate(90deg); color: var(--ink); } /* Signpost to the live room — not a product: no price, an arrow. */ /* Not a product, so it does not take a product's height: it sits to its own content at the top of the rail rather than stretching to the tallest card and leaving a well of empty space under the link. */ .item.is-pointer { align-self: start; width: 230px; } .card.is-pointer { flex: 0 0 auto; background: transparent; border-style: dashed; border-color: var(--border); box-shadow: none; } .item:hover .card.is-pointer { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 30%, transparent); } .card.is-pointer .card-body { padding: .95rem 1rem 1rem; } .card.is-pointer .card-name { font-size: .88rem; } .card.is-pointer .card-desc { margin-top: .3rem; font-size: .72rem; } .grid .item.is-pointer { width: auto; } /* ── Reveal ───────────────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(12px); } [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)), transform var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-enter); } /* ── Cart ─────────────────────────────────────────────────────────────────── */ .cart-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 17px; border: 1px solid var(--ink); border-radius: 999px; corner-shape: superellipse(1.25); background: var(--ink); color: #fff; font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(26,23,18,.22); transition: transform var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-settle); } .cart-fab:hover { transform: translateY(-2px); } .cart-fab svg { width: 17px; height: 17px; } .cart-fab-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: .68rem; font-weight: 700; } .cart-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(26,23,18,.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: scrimIn var(--dur-quick, var(--dur-quick, 200ms)) var(--ease-enter, cubic-bezier(0.364,0,0.164,1)); } @keyframes scrimIn { from { opacity: 0; } } @keyframes scrimOut { to { opacity: 0; } } .cart-scrim.is-closing { animation: scrimOut var(--dur-quick) var(--ease-enter) forwards; } /* Above the global header (z 9999) on purpose: an open cart is a modal, and a nav bar floating over it — or a strip of unblurred page above it — reads as a layering bug. The scrim covers the header for the same reason. */ .cart-scrim { z-index: 10000; } .cart-drawer { position: fixed; z-index: 10001; top: 12px; right: 12px; bottom: 12px; width: min(410px, calc(100vw - 24px)); display: flex; flex-direction: column; border: 1px solid var(--ywe-edge-opal, var(--border)); border-radius: var(--ywe-shape-card, 27px); corner-shape: var(--ywe-corner-frame, squircle); background: #fff; box-shadow: var(--ywe-shadow-opal-frame, 0 24px 72px rgba(26,23,18,.24)); animation: drawerIn var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle); } @keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } } /* Leaves the way it came. A panel that animates in and then vanishes on close feels like it broke rather than closed. */ @keyframes drawerOut { to { transform: translateX(24px); opacity: 0; } } .cart-drawer.is-closing { animation: drawerOut var(--dur-quick) var(--ease-enter) forwards; } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem .7rem; } .cart-title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; } .cart-close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 999px; corner-shape: superellipse(1.25); background: #fff; color: var(--muted); cursor: pointer; } .cart-close svg { width: 15px; height: 15px; } .cart-items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem .5rem; display: grid; gap: .6rem; align-content: start; } .cart-empty { padding: 2.5rem 0; color: var(--muted); font-size: .8rem; text-align: center; } /* Four different kinds of commitment; a hairline says so without a heading. */ .cart-group + .cart-group { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border-light); } .cart-group { display: grid; gap: .6rem; } .cart-recurring { margin-top: .35rem; font-size: .72rem; line-height: 1.5; color: var(--ink); font-weight: 600; } .cart-line { display: flex; gap: .7rem; align-items: center; padding: .6rem; border: 1px solid var(--border-light); border-radius: 16px; corner-shape: squircle; } .cart-line-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; corner-shape: squircle; overflow: hidden; background: var(--bg-subtle); } .cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Tier symbols are artwork on a transparent ground, not photography. */ .cart-line-thumb img[src*="-sym."] { object-fit: contain; padding: 5px; } .cart-line-main { flex: 1; min-width: 0; } /* Waiting on the catalogue: shape without a claim about what is in the row. */ .cart-line.is-pending .cart-line-main::before, .cart-line.is-pending .cart-line-thumb { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--bg-subtle), #efe9df, var(--bg-subtle)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; } .cart-line.is-pending .cart-line-thumb { border-radius: 12px; } .cart-line.is-pending .cart-line-main::before { content: ''; height: 11px; width: 62%; } .cart-line.is-pending .cart-line-price, .cart-line.is-pending .cart-line-kind { visibility: hidden; } @keyframes shimmer { to { background-position: -200% 0; } } /* Gone from sale — a replay whose window closed. Named, not shimmering, and removable. The quote already ignores it, so the total is right regardless. */ .cart-line.is-gone { opacity: .7; border-style: dashed; } .cart-line.is-gone .cart-line-name { color: var(--muted); font-weight: 500; } .cart-line.is-gone .cart-line-thumb { background: var(--bg-subtle); } .cart-line-name { font-size: .8rem; font-weight: 600; line-height: 1.3; } .cart-line-kind { color: var(--muted); font-size: .68rem; } .cart-line-price { font-size: .82rem; font-weight: 700; } .cart-line-drop { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: 999px; } .cart-line-drop:hover { background: var(--bg-subtle); color: var(--ink); } .cart-line-drop svg { width: 13px; height: 13px; } .cart-foot { padding: .9rem 1.25rem 1.15rem; border-top: 1px solid var(--border-light); } .cart-total-row { display: flex; align-items: baseline; justify-content: space-between; } .cart-total-label { font-size: .78rem; color: var(--muted); } .cart-total { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; } .cart-note { margin: .35rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; } .cart-note:empty { display: none; } /* Perk progress. The bead is the mala's, on purpose. docs/SPEC_STORE.md §7.3. */ .cart-perk { display: flex; align-items: center; gap: 8px; margin-top: .5rem; font-size: .72rem; color: var(--muted); } .cart-perk.is-on { color: var(--ink); font-weight: 600; } .bead-row { display: inline-flex; gap: 4px; flex: 0 0 auto; } .bead { width: 8px; height: 8px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); background: transparent; transition: background var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle), transform var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle), border-color var(--dur-standard, var(--dur-standard, 320ms)) var(--ease-settle); } .bead.is-filled { background: color-mix(in srgb, var(--ink) 62%, transparent); border-color: transparent; } .bead.is-earned { background: var(--ink); animation: beadSettle var(--dur-emphasis, var(--dur-emphasis, 460ms)) var(--ease-settle); } @keyframes beadSettle { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .cart-member { margin-top: .5rem; font-size: .72rem; line-height: 1.5; color: var(--muted); } .cart-go { position: relative; width: 100%; margin-top: .75rem; min-height: 46px; border: 1px solid var(--ink); border-radius: 999px; corner-shape: superellipse(1.25); background: var(--ink); color: #fff; font-family: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; } .cart-go[disabled] { opacity: .55; cursor: default; } .cart-go-spin { display: none; } .cart-go.is-busy .cart-go-label { visibility: hidden; } .cart-go.is-busy .cart-go-spin { display: block; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .boot { padding: 4rem 0; color: var(--muted); font-size: .82rem; } /* ── Phone ────────────────────────────────────────────────────────────────── */ @media (max-width: 700px) { /* Mobile chrome is a BOTTOM bar, so the room belongs at the foot. */ .wrap { padding: 1.4rem var(--gutter) 11rem; } .controls { top: 0; } .item, .item.wide { width: 260px; } .grid { grid-template-columns: minmax(0, 1fr); } .cart-fab { right: 14px; bottom: 104px; } .cart-drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 86dvh; } @keyframes drawerIn { from { transform: translateY(28px); opacity: 0; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .rail { scroll-behavior: auto; } }