/* Cart-zone shell chrome (refs #343). Head-loaded by views/cart/cart.pug * ALONGSIDE /style.css (which owns the tokens, .nav/.foot chrome and the * .nn-* nav widgets), so both chrome variants are styled at first paint — * the SPA's app/styles/cart.css arrives later with the CartView chunk and * only styles checkout *content*. * * Chrome switching contract: `cart-slim` on shows the slim enclosed * checkout bar and hides the marketing nav/footer; absence shows the * reverse. The initial class is server-set pre-paint (routes/cart.js * SLIM_PATHS); app/composables/use-cart-chrome.ts toggles it on in-flow * route changes. */ /* ── chrome switching ─────────────────────────────────────────────────── */ :root.cart-slim .cart-chrome-full { display: none; } :root:not(.cart-slim) .cart-chrome-slim { display: none; } /* Pre-mount guard: until Vue mounts, #app holds an unresolved ; * keep the footer from sitting mid-viewport. */ :root.cart-redesign #app { min-height: 55dvh; } /* ── slim enclosed checkout bar ───────────────────────────────────────── */ .cslim { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 0.5px solid var(--line); } .cslim-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .cslim-secure { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); } .cslim-secure svg { color: var(--accent); flex: none; } .cslim-actions { display: flex; align-items: center; gap: 14px; } .cslim-help { font-size: 13.5px; color: var(--fg-dim); white-space: nowrap; transition: color 0.2s ease; } .cslim-help:hover { color: var(--fg); } /* ── slim mini-footer ─────────────────────────────────────────────────── */ .cslim-foot { margin-top: auto; border-top: 0.5px solid var(--line); padding: 20px 0; } .cslim-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); } .cslim-legal { display: inline-flex; align-items: center; gap: 8px; } .cslim-legal a { color: var(--fg-faint); transition: color 0.2s ease; } .cslim-legal a:hover { color: var(--fg); } /* ── mobile ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .cslim-help { display: none; } .cslim-row { gap: 10px; } } @media (max-width: 400px) { .cslim-secure span { display: none; } }