/* ============================================================================ Microcript reseller storefront — "Studio" theme. Loaded ONLY on tenant storefronts. Brand colours arrive per-tenant via an inline :root (--sky = primary, --blue = secondary) in the layout, so this sheet is brand-agnostic. Deliberately distinct from microcript.in (dark gold glass) and from any builder template: light, airy, soft-rounded. ============================================================================ */ :root { --sf-head: 64px; --sf-wrap: 1180px; /* Brand tints derived from the reseller's primary colour. */ --sf-tint: color-mix(in srgb, var(--sky) 10%, #fff); --sf-tint2: color-mix(in srgb, var(--sky) 18%, #fff); --sf-ring: color-mix(in srgb, var(--sky) 26%, transparent); /* Brand accent that is LEGIBLE AS TEXT. --sky is chosen to look good as a fill; as small text on a pale surface most brands fail WCAG AA (the live fleet measured 2.15:1 to 2.77:1). The layout computes an AA-passing variant per tenant and per mode (App\Storefront\Contrast) and emits --sf-acc-light / --sf-acc-dark; both fall back to the raw brand colour so a stale cached view degrades to exactly today's behaviour rather than losing its colour. Fills, gradients and buttons still use --sky. */ --sf-acc: var(--sf-acc-light, var(--sky)); --sf-ink: #14161c; --sf-mut: #6b7280; --sf-line: #ececf1; --sf-card: #ffffff; --sf-bg: #f7f8fb; --sf-glass: rgba(255,255,255,.82); --sf-rad: 16px; --sf-shadow: 0 1px 2px rgba(16,18,24,.05); --sf-shadow-lg: 0 24px 60px -28px rgba(16,18,24,.3); } /* overflow-x: CLIP, not hidden. app.css's reset puts overflow-x:hidden on both html and body. On body that makes it a real scroll container, and position:sticky inside a scroll container sticks to THAT container - so the product page's sticky buy card scrolled away after one screen (the same trap .app-mobilebar and .app-topbar already work around with position:fixed). `clip` clips the same overflow WITHOUT creating a scroll container, so sticky works. Scoped to the storefront rather than changed in the global reset, and browsers without `clip` simply keep today's behaviour. */ body.store { overflow-x: clip; background: radial-gradient(900px 460px at 88% -8%, var(--sf-tint), transparent 60%), radial-gradient(720px 420px at -10% 4%, var(--sf-tint), transparent 55%), var(--sf-bg); background-attachment: fixed; color: var(--sf-ink); padding-top: var(--sf-head); padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .sf-wrap { max-width: var(--sf-wrap); margin: 0 auto; padding: 0 20px; } /* ---- Auto wordmark logo ---- */ .sb-logo { display: inline-flex; align-items: center; gap: 9px; } .sb-word { font-weight: 800; letter-spacing: -.035em; line-height: 1; display: inline-flex; align-items: baseline; color: var(--sf-ink); } .sb-word.on-dark { color: #fff; } .sb-dot { width: .34em; height: .34em; border-radius: 50%; background: var(--grad); margin-left: .12em; align-self: flex-end; margin-bottom: .12em; } .sb-word.on-dark .sb-dot { background: #fff; } /* LOGOS ARE NOT SQUARE. This was `width:34px; height:34px; object-fit:cover`, which cropped a wide wordmark to a 34x34 tile and then, because the upload cropper ALSO forced a square, letterboxed it first -- so urbanscalex.com's wordmark reached the header as roughly 34x8 usable pixels and was unreadable at any size. Fixed 2026-09-12. Height-constrained, width free, `contain` so nothing is ever cut off: a square mark renders 34x34 exactly as before, and a 4:1 wordmark renders 136x34. The max-width is a layout guard, not a crop -- an absurdly long image shrinks to fit the header rather than pushing the nav off the row. border-radius is gone: it rounded the corners of transparent wordmarks for no reason, and it clipped the extremities of a wide one. */ .sb-img { height: 34px; width: auto; max-width: 168px; object-fit: contain; flex-shrink: 0; } @media (max-width: 420px) { .sb-img { max-width: 124px; } } /* DARK-SURFACE LOGO (2026-09-12). Making the logo transparent removed the white box around it and revealed the real problem: a transparent mark drawn in dark ink is invisible on the footer, which is #0f1117. Contrast is not transparency. When the reseller supplies a second, light variant, brand.blade.php emits BOTH and these rules choose -- server-side choosing is impossible because night mode flips at the visitor's click with no page load. With no dark variant neither class is emitted and nothing here applies. */ .sb-img-dark { display: none; } /* The footer is dark in every theme, day or night. */ .sf-foot .sb-img-light { display: none; } .sf-foot .sb-img-dark { display: block; } /* Night mode darkens the header and the drawer too. */ html[data-theme="dark"] .sb-img-light { display: none; } html[data-theme="dark"] .sb-img-dark { display: block; } /* ---- Promo / announcement bar ---- */ .sf-promo { background: var(--sf-ink); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 14px; } .sf-promo i { vertical-align: -1px; margin-right: 4px; } /* ---- Glass sticky header ---- */ .sf-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--sf-head); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; gap: 10px; background: var(--sf-glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--sf-line); } .sf-head .hl { display: flex; align-items: center; gap: 12px; min-width: 0; } .sf-head .hr { display: flex; align-items: center; gap: 8px; } .sf-head .sf-nav { display: none; } .sf-brand { display: flex; align-items: center; } .gbtn { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 21px; color: var(--sf-ink); cursor: pointer; position: relative; background: #fff; border: 1px solid var(--sf-line); transition: background .15s, transform .07s, box-shadow .15s; } .gbtn:hover { background: var(--sf-tint); } .gbtn:active { transform: scale(.93); } .cart-pip { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); } .cart-pip.show { transform: scale(1); } .cart-pip.bump { animation: pipBump .4s; } @keyframes pipBump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.55); } } /* ---- Mobile bottom bar ---- */ .sf-bot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sf-glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-top: 1px solid var(--sf-line); padding-bottom: env(safe-area-inset-bottom); } .sf-bot a, .sf-bot button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; color: var(--sf-mut); font-size: 10.5px; font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit; position: relative; } .sf-bot i { font-size: 22px; } /* Cart count rides on the bag icon itself (not the corner of the whole tab). */ .sf-bot-ic { position: relative; display: inline-flex; } .sf-bot-ic .cart-pip { top: -6px; right: -10px; } .sf-bot a.on { color: var(--sf-acc); } .sf-bot a.on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--grad); } /* ---- Drawers ---- */ .sf-bd { position: fixed; inset: 0; background: rgba(12,14,20,.45); backdrop-filter: blur(2px); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s; } .sf-bd.show { opacity: 1; pointer-events: auto; } .sf-drawer { position: fixed; top: 0; bottom: 0; z-index: 80; width: min(86vw, 360px); background: #fff; display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: var(--sf-shadow-lg); } .sf-drawer.left { left: 0; transform: translateX(-100%); border-radius: 0 20px 20px 0; } .sf-drawer.right { right: 0; transform: translateX(100%); border-radius: 20px 0 0 20px; } .sf-drawer.open { transform: translateX(0); } .sf-dhead { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px; border-bottom: 1px solid var(--sf-line); } .sf-dhead h3 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .sf-dbody { flex: 1; overflow-y: auto; padding: 12px 14px; } .sf-dfoot { padding: 16px; border-top: 1px solid var(--sf-line); } .sf-mlink { display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: 12px; color: var(--sf-ink); font-size: 15.5px; font-weight: 600; } .sf-mlink i { font-size: 20px; color: var(--sf-mut); } .sf-mlink:hover { background: var(--sf-tint); color: var(--sf-acc); } .sf-mlink:hover i { color: var(--sf-acc); } /* ---- Cart line items ---- */ .sf-citem { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sf-line); align-items: center; } .sf-cthumb { width: 46px; height: 46px; border-radius: 11px; background: var(--sf-tint); display: grid; place-items: center; color: var(--sky); font-size: 20px; flex-shrink: 0; overflow: hidden; } .sf-cthumb img { width: 100%; height: 100%; object-fit: cover; } .sf-cempty { text-align: center; padding: 52px 0; color: var(--sf-mut); } .sf-cempty i { font-size: 44px; color: var(--sf-line); } .sf-rm { background: none; border: 0; color: #e0566b; font-size: 12px; cursor: pointer; font-weight: 700; padding: 2px 0; } .sf-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--sf-line); border-radius: 999px; overflow: hidden; background: #fff; } .sf-qty button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--sf-ink); line-height: 1; } .sf-qty button:hover { background: var(--sf-tint); color: var(--sky); } .sf-qty b { min-width: 24px; text-align: center; font-size: 13px; font-weight: 800; } /* ---- Section scaffolding for blocks ---- */ .sf-sec { padding: 40px 0; } /* Adjacent sections shouldn't both pad — collapse the doubled gap between them. */ .sf-sec + .sf-sec { padding-top: 0; } .sf-sec.tight { padding: 22px 0; } .sf-shead { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .sf-shead h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; } .sf-shead p { color: var(--sf-mut); font-size: 14px; margin-top: 3px; } .sf-shead .sf-see { color: var(--sf-acc); font-weight: 700; font-size: 14px; white-space: nowrap; } @media (min-width: 720px) { .sf-shead h2 { font-size: 28px; } } /* ---- Carousel block ---- */ .sf-car { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--sf-shadow-lg); } .sf-car-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); } .sf-slide { flex: 0 0 100%; min-height: 300px; display: grid; place-items: center; position: relative; padding: 48px 28px; text-align: center; color: #fff; background: var(--grad); } .sf-slide.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.18), rgba(8,10,16,.66)); } .sf-slide img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-slide .in { position: relative; z-index: 1; max-width: 620px; } .sf-slide h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-shadow: 0 2px 18px rgba(0,0,0,.2); } .sf-slide p { font-size: 16px; opacity: .95; margin-top: 12px; } .sf-slide .btn { margin-top: 20px; } @media (min-width: 720px) { .sf-slide { min-height: 380px; } .sf-slide h2 { font-size: 44px; } } .sf-car-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--sf-ink); border: 0; display: grid; place-items: center; cursor: pointer; font-size: 22px; box-shadow: var(--sf-shadow); z-index: 2; } .sf-car-nav.prev { left: 14px; } .sf-car-nav.next { right: 14px; } .sf-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; } .sf-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: width .25s; } .sf-dots button.on { background: #fff; width: 22px; } /* CAROUSEL ARROWS must not sit on the slide's own words. `.sf-car-nav` is pinned to the vertical middle, and on a narrow screen the centred copy fills the slide, so the prev arrow lands on the first words of the subtext -- measured at 375px on all four serving storefronts, including both live stores. It produces NO horizontal overflow, which is why the layout gate passed the page: an overlapping arrow pushes nothing past the edge. Below the breakpoint the arrows move to the bottom corners, level with the dots, and the slide takes the padding that keeps its copy clear of them. ⚠️ The 899px boundary is MEASURED, not derived: the box arithmetic says the 620px copy column clears the arrows above ~732px, but a long subtext still overlapped at 768px on urbanscalex.com. Measure the inked LINE BOXES (a Range over the text) when re-checking this -- a centred

has a 620px element rect whatever its words are, and element rects report overlaps that are not there. `apps/_tools/gate/try_carousel.js` does it correctly. */ @media (max-width: 899px) { .sf-car-nav { top: auto; bottom: 10px; transform: none; width: 38px; height: 38px; font-size: 20px; } .sf-car-nav.prev { left: 10px; } .sf-car-nav.next { right: 10px; } .sf-slide { padding-bottom: 72px; } .sf-dots { bottom: 25px; } } /* ---- Search block ---- */ .sf-search { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sf-line); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--sf-shadow); } .sf-search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px var(--sf-ring); } .sf-search i { color: var(--sf-mut); font-size: 20px; } .sf-search input { border: 0; box-shadow: none !important; background: none; flex: 1; padding: 10px 0; font-size: 15px; } .sf-search .btn { border-radius: 999px; } /* ---- Categories grid + strip ---- */ .sf-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 600px) { .sf-cats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .sf-cats.cols-4 { grid-template-columns: repeat(4, 1fr); } .sf-cats.cols-6 { grid-template-columns: repeat(6, 1fr); } } .sf-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border-radius: var(--sf-rad); background: #fff; border: 1px solid var(--sf-line); text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s; } .sf-cat:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-lg); border-color: var(--sf-ring); } .sf-cat .ic { width: 52px; height: 52px; border-radius: 15px; background: var(--sf-tint); color: var(--sky); display: grid; place-items: center; font-size: 26px; } .sf-cat span { font-size: 13.5px; font-weight: 700; color: var(--sf-ink); } .sf-cat small { font-size: 11.5px; color: var(--sf-mut); } .sf-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; scroll-snap-type: x mandatory; } .sf-strip::-webkit-scrollbar { display: none; } .sf-chip { scroll-snap-align: start; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--sf-line); font-weight: 700; font-size: 14px; color: var(--sf-ink); } .sf-chip i { color: var(--sky); } .sf-chip:hover { background: var(--sf-tint); border-color: var(--sf-ring); } /* ---- Showcase (alternating feature rows) ---- */ .sf-show { display: grid; gap: 26px; } .sf-show-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--sf-line); border-radius: 22px; overflow: hidden; box-shadow: var(--sf-shadow); } .sf-show-row .media { aspect-ratio: 16/11; background: var(--sf-tint); display: grid; place-items: center; color: var(--sky); font-size: 48px; } .sf-show-row .media img { width: 100%; height: 100%; object-fit: cover; } .sf-show-row .body { padding: 8px 24px 26px; } .sf-show-row .body h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .sf-show-row .body p { color: var(--sf-mut); font-size: 14.5px; line-height: 1.6; margin: 8px 0 16px; } @media (min-width: 820px) { .sf-show-row { grid-template-columns: 1fr 1fr; gap: 0; } .sf-show-row .body { padding: 34px 36px; } .sf-show-row.flip .media { order: 2; } } /* ---- Products strip (horizontal) ---- */ .sf-prow { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 14px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; scroll-snap-type: x mandatory; } .sf-prow::-webkit-scrollbar { display: none; } .sf-prow > * { scroll-snap-align: start; flex: 0 0 78%; max-width: 300px; } @media (min-width: 720px) { .sf-prow > * { flex-basis: 320px; } } /* ---- Product card (storefront flavour) ---- */ .sf-pcard { background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-rad); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sf-shadow); transition: transform .16s, box-shadow .16s, border-color .16s; } .sf-pcard:hover { transform: translateY(-4px); box-shadow: var(--sf-shadow-lg); border-color: var(--sf-ring); } .sf-pthumb { aspect-ratio: 16/10; background: var(--sf-tint); display: grid; place-items: center; color: var(--sky); font-size: 40px; position: relative; } .sf-pthumb img { width: 100%; height: 100%; object-fit: cover; } .sf-pcat { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.94); color: var(--sf-ink); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .sf-pbody { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; } .sf-pbody h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } /* Taglines are shared product copy and run from 30 to 226 characters, so the card clamps to two lines and reserves their height: every card in a row is the same size whatever the copy does. It used to carry .truncate (one hard-cut line). */ .sf-pbody .tag { font-size: 13px; color: var(--sf-mut); margin-top: 4px; flex: 1; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(1.5em * 2); } .sf-pcard.list .sf-pbody .tag { min-height: 0; } .sf-pfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; } .sf-price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; } /* "+ 18% GST" beside a storefront price. Storefront prices are GST-EXCLUSIVE (App\Services\StoreQuote), so the tax is disclosed wherever a price is shown -- a card that shows a bare figure next to a checkout that adds 18% is where a buyer decides they were misled. Normal weight and muted so it reads as a note on the price, not as part of the number. */ .sf-price-gst { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--sf-mut, #6b7280); margin-top: 1px; white-space: nowrap; } .sf-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 560px) { .sf-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 920px) { .sf-grid.cols-3 { grid-template-columns: repeat(3,1fr); } .sf-grid.cols-4 { grid-template-columns: repeat(4,1fr); } } .sf-pcard.list { flex-direction: row; align-items: center; padding: 12px; gap: 14px; } .sf-pcard.list .sf-pthumb { width: 96px; height: 72px; aspect-ratio: auto; border-radius: 11px; flex-shrink: 0; font-size: 26px; } .sf-pcard.list .sf-pbody { padding: 0; } /* "Added" flash on add-to-cart buttons */ .add-cart.added { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; } /* ---- Banner / centered slide ---- */ .sf-banner { background: var(--grad); border-radius: 24px; padding: 44px 28px; text-align: center; color: #fff; box-shadow: var(--sf-shadow-lg); position: relative; overflow: hidden; } .sf-banner::after { content: ''; position: absolute; width: 340px; height: 340px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); } .sf-banner h2 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; position: relative; } .sf-banner p { font-size: 16px; opacity: .92; margin: 10px auto 22px; max-width: 540px; position: relative; } .sf-banner .btn { position: relative; } .sf-centered { border-radius: 24px; overflow: hidden; position: relative; min-height: 320px; display: grid; place-items: center; text-align: center; color: #fff; padding: 52px 28px; background: var(--grad); box-shadow: var(--sf-shadow-lg); } .sf-centered img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-centered::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.2), rgba(8,10,16,.6)); } .sf-centered .in { position: relative; z-index: 1; max-width: 600px; } .sf-centered h2 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.25); } .sf-centered p { font-size: 16px; opacity: .95; margin-top: 12px; } @media (min-width: 720px) { .sf-centered h2 { font-size: 42px; } } .sf-empty { background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-rad); padding: 48px; text-align: center; color: var(--sf-mut); } .sf-empty i { font-size: 44px; color: var(--sf-line); } /* ---- Star ratings ---- */ .stars { display: inline-flex; gap: 1px; color: #f5a623; font-size: 14px; } .stars .ri-star-line { color: #d6d6d6; } /* ---- WhatsApp floating button ---- */ .wa-fab { position: fixed; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 55; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 10px 26px -8px rgba(37,211,102,.7); transition: transform .15s; } .wa-fab:hover { transform: scale(1.06); color: #fff; } @media (min-width: 1000px) { .wa-fab { bottom: 24px; } } /* ---- Cookie consent banner ---- */ .cc-banner { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 90; background: #14161c; color: #e7e9ee; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sf-shadow-lg); transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s; max-width: 560px; } .cc-banner.show { transform: translateY(0); opacity: 1; } .cc-text { font-size: 13px; line-height: 1.5; color: #c7cbd4; } .cc-text i { color: var(--sky); } .cc-actions { display: flex; gap: 8px; justify-content: flex-end; } .cc-banner .btn-secondary { background: transparent; color: #c7cbd4; border-color: #3a3f4b; } .cc-banner .btn-secondary:hover { background: rgba(255,255,255,.06); color: #fff; } /* Desktop: anchor bottom-LEFT and keep it compact so it never covers the checkout column / Pay button on the right. */ @media (min-width: 1000px) { .cc-banner { left: 24px; right: auto; bottom: 24px; max-width: 400px; } } /* ---- Footer ---- */ .sf-foot { background: #0f1117; color: #aab1c0; margin-top: 24px; } /* Mobile: link columns sit 2-up (not one tall stack) with the brand spanning the top. */ .sf-foot .sf-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-top: 34px; padding-bottom: 24px; } .sf-foot .sf-wrap > div:first-child { grid-column: 1 / -1; } @media (min-width: 760px) { .sf-foot .sf-wrap { grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; } .sf-foot .sf-wrap > div:first-child { grid-column: auto; } } /* Tighter link rows so the mobile footer stays short. */ @media (max-width: 759px) { .sf-foot a { font-size: 13px; padding: 4px 0; } .sf-foot h5 { margin-bottom: 9px; } } .sf-foot .sb-word { color: #fff; } .sf-foot h5 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; } .sf-foot a { color: #aab1c0; font-size: 14px; display: flex; align-items: center; gap: 9px; padding: 6px 0; } .sf-foot a:hover { color: #fff; } /* Social icon buttons in the footer keep their white glyph (the generic .sf-foot a colour above otherwise greys them out). */ .sf-foot .gbtn { color: #fff; width: 40px; height: 40px; padding: 0; justify-content: center; } .sf-foot .gbtn:hover { color: #fff; opacity: .85; } .sf-foot p { font-size: 13.5px; line-height: 1.7; color: #8a93a4; max-width: 340px; margin-top: 12px; } .sf-foot-bottom { border-top: 1px solid #20242e; padding: 16px 0; text-align: center; font-size: 12.5px; color: #6b7280; } /* ---- Service add-ons: cart sub-lines ---- */ .sf-addon-lines { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .sf-addon-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sf-ink); background: var(--sf-tint); border-radius: 8px; padding: 5px 9px; } .sf-addon-line > i { color: var(--sky); flex: none; } .sf-addon-cnm { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; } .sf-addon-cpr { flex: none; font-weight: 700; white-space: nowrap; } .sf-addon-line .sf-addon-x { flex: none; } .sf-addon-x { border: 0; background: none; cursor: pointer; color: #9aa1ad; font-size: 17px; line-height: 1; padding: 0 2px; } .sf-addon-x:hover { color: #dc2626; } /* ---- Service add-ons: add-to-cart popup ---- */ .sf-modal-bd { position: fixed; inset: 0; z-index: 1200; background: rgba(8,11,18,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; padding: 0; } .sf-modal-bd.show { opacity: 1; } .sf-modal { width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; max-height: 86vh; display: flex; flex-direction: column; transform: translateY(16px); transition: transform .22s cubic-bezier(.34,1.3,.64,1); box-shadow: 0 -10px 40px rgba(0,0,0,.25); } .sf-modal-bd.show .sf-modal { transform: translateY(0); } .sf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 12px; border-bottom: 1px solid var(--sf-line); } .sf-modal-head strong { font-size: 17px; } .sf-modal-body { padding: 12px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .sf-modal-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sf-line); display: flex; gap: 10px; } .sf-addon-opt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--sf-line); border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s; } .sf-addon-opt:hover { border-color: var(--sky); background: var(--sf-tint); } .sf-addon-opt:has(input:checked) { border-color: var(--sky); background: var(--sf-tint); box-shadow: 0 0 0 3px var(--sf-ring); } .sf-addon-opt input { width: 19px; height: 19px; flex: none; accent-color: var(--sky); } .sf-addon-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--sf-tint2); color: var(--sky); display: grid; place-items: center; font-size: 19px; flex: none; } .sf-addon-nm { display: block; font-weight: 700; font-size: 14px; } .sf-addon-ds { display: block; color: #8a93a4; font-size: 12px; margin-top: 1px; } .sf-addon-pr { font-weight: 800; font-size: 14px; color: var(--sf-ink); white-space: nowrap; } @media (min-width: 560px) { .sf-modal-bd { align-items: center; } .sf-modal { border-radius: 20px; } } /* ---- Desktop header: real navbar ---- */ @media (min-width: 1000px) { /* Align the fixed header's content with the centered .sf-wrap column. */ .sf-head { padding: 0 max(28px, calc((100vw - var(--sf-wrap)) / 2 + 20px)); height: 70px; } :root { --sf-head: 70px; } .sf-head .hl { gap: 26px; } .sf-burger { display: none; } /* Center the nav across the whole header (logo stays left, actions right). */ .sf-head .sf-nav { display: flex; gap: 24px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); } .sf-nav a { color: var(--sf-ink); font-weight: 600; font-size: 14.5px; opacity: .78; } .sf-nav a:hover, .sf-nav a.on { opacity: 1; color: var(--sf-acc); } .sf-bot { display: none; } body.store { padding-bottom: 0; } .sf-sec { padding: 56px 0; } } /* Cart count badge: always crisp above the icon, never reserves layout space. */ .cart-pip { z-index: 3; pointer-events: none; } /* Cart row re-flows cleanly on small screens (price + stepper drop below). */ @media (max-width: 560px) { .sf-citem { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; column-gap: 10px; } .sf-citem > .sf-cthumb { flex: none; } .sf-citem > .grow { flex: 1 1 calc(100% - 70px); } .sf-citem > .sf-qty { order: 3; } .sf-citem > .sf-cprice { order: 4; margin-left: auto; min-width: 0 !important; text-align: right; } } /* ============================================================================ Business-site sections — features, stats, steps, testimonials, logos, FAQ, gallery, video, rich text, map, contact — plus designed promo-slide looks. ============================================================================ */ .sf-wrap-slim { max-width: 860px; } .sf-shead.center-h { justify-content: center; text-align: center; } /* ---- Promo slide designed looks (st-*) + badge ---- */ .sf-slide { background-image: radial-gradient(560px 300px at 85% -20%, rgba(255,255,255,.16), transparent 65%), var(--sf-sgrad, var(--grad)); } .sf-slide.st-midnight { --sf-sgrad: linear-gradient(135deg, #0f172a, #1f2c48); } .sf-slide.st-sunset { --sf-sgrad: linear-gradient(135deg, #f97316, #db2777); } .sf-slide.st-ocean { --sf-sgrad: linear-gradient(135deg, #0ea5e9, #1d4ed8); } .sf-slide.st-royal { --sf-sgrad: linear-gradient(135deg, #7c3aed, #4338ca); } .sf-slide.st-forest { --sf-sgrad: linear-gradient(135deg, #059669, #0f766e); } .sf-slide.st-festive { --sf-sgrad: linear-gradient(135deg, #d97706, #dc2626); } .sf-slide.st-sale { --sf-sgrad: linear-gradient(135deg, #ef4444, #991b1b); } .sf-slide.st-gold { --sf-sgrad: linear-gradient(135deg, #f59e0b, #92400e); } .sf-slide.st-berry { --sf-sgrad: linear-gradient(135deg, #d946ef, #7e22ce); } .sf-slide.st-festive::before, .sf-slide.st-sale::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px), radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 46px 46px, 28px 28px; background-position: 0 0, 14px 20px; } .sf-sbadge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 6px 14px; margin-bottom: 14px; backdrop-filter: blur(4px); } /* ---- Features ("Why choose us") ---- */ .sf-feats { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 620px) { .sf-feats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .sf-feats { grid-template-columns: repeat(3, 1fr); } } .sf-feat { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: var(--sf-rad); padding: 24px 22px; box-shadow: var(--sf-shadow); transition: transform .15s, box-shadow .15s; } .sf-feat:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-lg); } .sf-feat .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sf-tint); color: var(--sky); display: grid; place-items: center; font-size: 24px; margin-bottom: 14px; } .sf-feat h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; } .sf-feat p { color: var(--sf-mut); font-size: 13.5px; line-height: 1.6; margin-top: 7px; } /* ---- Stats / numbers strip ---- */ .sf-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 20px; padding: 26px 18px; box-shadow: var(--sf-shadow); } @media (min-width: 720px) { .sf-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 32px 26px; } } .sf-stat { text-align: center; } .sf-stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 720px) { .sf-stat b { font-size: 38px; } } .sf-stat span { display: block; color: var(--sf-mut); font-size: 13px; font-weight: 600; margin-top: 4px; } /* ---- Steps ("How it works") ---- */ .sf-stp-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: sfstep; padding: 0; margin: 0; } @media (min-width: 720px) { .sf-stp-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .sf-stp { position: relative; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: var(--sf-rad); padding: 24px 22px; box-shadow: var(--sf-shadow); } .sf-stp .num { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; font-size: 16px; display: grid; place-items: center; margin-bottom: 13px; box-shadow: 0 6px 16px -6px var(--sf-ring); } .sf-stp h3 { font-size: 15.5px; font-weight: 800; } .sf-stp p { color: var(--sf-mut); font-size: 13.5px; line-height: 1.6; margin-top: 6px; } /* ---- Testimonials ---- */ .sf-testis { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 720px) { .sf-testis { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } } .sf-testi { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: var(--sf-rad); padding: 22px; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; margin: 0; } .sf-testi .stars { margin-bottom: 10px; font-size: 15px; } .sf-testi blockquote { font-size: 14.5px; line-height: 1.65; color: var(--sf-ink); flex: 1; margin: 0; } .sf-testi figcaption { display: flex; align-items: center; gap: 11px; margin-top: 16px; } .sf-testi .ava { width: 40px; height: 40px; border-radius: 50%; background: var(--sf-tint2); color: var(--sky); font-weight: 800; font-size: 16px; display: grid; place-items: center; flex-shrink: 0; } .sf-testi figcaption b { display: block; font-size: 13.5px; } .sf-testi figcaption small { display: block; color: var(--sf-mut); font-size: 12px; margin-top: 1px; } /* ---- Client logos strip ---- */ .sf-logos-title { text-align: center; color: var(--sf-mut); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; } .sf-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; } .sf-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; color: var(--sf-mut); font-weight: 800; font-size: 15px; letter-spacing: -.01em; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; } .sf-logo:hover { filter: none; opacity: 1; } .sf-logo img { max-height: 36px; max-width: 130px; object-fit: contain; } /* ---- FAQ accordion ---- */ .sf-faq { display: grid; gap: 10px; } .sf-qa { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: var(--sf-shadow); overflow: hidden; } .sf-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 14.5px; font-weight: 700; } .sf-qa summary::-webkit-details-marker { display: none; } .sf-qa summary i { color: var(--sf-mut); font-size: 20px; transition: transform .2s; flex-shrink: 0; } .sf-qa[open] { border-color: var(--sf-ring); } .sf-qa[open] summary { color: var(--sf-acc); } .sf-qa[open] summary i { transform: rotate(180deg); color: var(--sf-acc); } .sf-qa .ans { padding: 0 18px 16px; color: var(--sf-mut); font-size: 13.5px; line-height: 1.7; } /* ---- Image gallery ---- */ .sf-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 720px) { .sf-gal { grid-template-columns: repeat(3, 1fr); gap: 14px; } } .sf-gitem { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--sf-line); background: var(--sf-tint); aspect-ratio: 4/3; margin: 0; } .sf-gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .sf-gitem:hover img { transform: scale(1.04); } .sf-gitem figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-size: 12.5px; font-weight: 600; background: linear-gradient(transparent, rgba(8,10,16,.72)); } /* ---- Video embed ---- */ .sf-video { border-radius: 20px; overflow: hidden; box-shadow: var(--sf-shadow-lg); border: 1px solid var(--sf-line); aspect-ratio: 16/9; background: #0f1117; } .sf-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---- Rich text ---- */ .sf-rich h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; } .sf-rich .body { color: var(--sf-mut); font-size: 15px; line-height: 1.8; } .sf-rich.center { text-align: center; } /* ---- Location map ---- */ .sf-map { border-radius: 20px; overflow: hidden; border: 1px solid var(--sf-line); background: var(--sf-card); box-shadow: var(--sf-shadow); } .sf-map iframe { width: 100%; border: 0; display: block; } .sf-map-addr { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 14px 18px; font-size: 13.5px; font-weight: 600; } .sf-map-addr i { color: var(--sky); font-size: 18px; } .sf-map-addr a { margin-left: auto; color: var(--sf-acc); font-weight: 700; white-space: nowrap; } /* ---- Contact & enquiry ---- */ .sf-contact { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 880px) { .sf-contact { grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: start; } } .sf-contact.single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .sf-cinfo { display: grid; gap: 10px; align-content: start; } .sf-cline { display: flex; align-items: center; gap: 13px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sf-shadow); color: var(--sf-ink); transition: transform .15s, border-color .15s; } a.sf-cline:hover { transform: translateY(-2px); border-color: var(--sf-ring); } .sf-cline .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--sf-tint); color: var(--sky); display: grid; place-items: center; font-size: 21px; flex-shrink: 0; } .sf-cline b { display: block; font-size: 14px; } .sf-cline small { display: block; color: var(--sf-mut); font-size: 12.5px; margin-top: 1px; overflow-wrap: anywhere; } .sf-cform { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 20px; padding: 22px; box-shadow: var(--sf-shadow); } .sf-cform label { display: block; font-size: 12.5px; font-weight: 700; color: var(--sf-ink); margin-bottom: 12px; } .sf-cform label span { color: var(--sf-mut); font-weight: 600; } .sf-cform input, .sf-cform textarea { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--sf-line); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: 14px; background: var(--sf-bg); } .sf-cform input:focus, .sf-cform textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sf-ring); background: var(--sf-card); } .sf-cform .frow { display: grid; grid-template-columns: 1fr; gap: 0 12px; } @media (min-width: 560px) { .sf-cform .frow { grid-template-columns: 1fr 1fr; } } .sf-cform .cf-turnstile { margin-bottom: 12px; } .sf-cnote { color: var(--sf-mut); font-size: 11.5px; text-align: center; margin-top: 10px; } .sf-cnote i { color: #16a34a; vertical-align: -1px; } .sf-cok { display: flex; gap: 12px; align-items: flex-start; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 18px; font-size: 14px; line-height: 1.6; } .sf-cok i { color: #16a34a; font-size: 24px; flex-shrink: 0; } .sf-cerr { display: flex; gap: 8px; align-items: center; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: 11px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; } /* ---- Footer social icons ---- */ .sf-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .sf-social a { width: 38px; height: 38px; border-radius: 11px; background: #1a1d26; border: 1px solid #262a35; color: #cdd3de; display: grid; place-items: center; font-size: 19px; padding: 0; transition: color .15s, border-color .15s; } .sf-social a:hover { color: #fff; border-color: #3a4152; } /* ============================================================================ DAY / NIGHT — dark theme. Toggled via html[data-theme="dark"] (set early in the layout to avoid FOUC; persisted in localStorage). Brand colours (--sky / --blue / --grad) are per-tenant and left untouched, so the reseller's brand still leads in both themes — only the neutral surfaces flip. ============================================================================ */ html[data-theme="dark"] { /* Same idea, other direction: on a dark surface a dark brand (3 of the 9 live stores use #0f172a) is invisible, so the accent is lightened. */ --sf-acc: var(--sf-acc-dark, var(--sky)); --sf-tint: color-mix(in srgb, var(--sky) 22%, #161922); --sf-tint2: color-mix(in srgb, var(--sky) 32%, #161922); --sf-ring: color-mix(in srgb, var(--sky) 42%, transparent); --sf-ink: #e8eaf0; --sf-mut: #99a2b2; --sf-line: #272c38; --sf-card: #161922; --sf-bg: #0c0e13; --sf-glass: rgba(16,18,26,.82); --sf-shadow: 0 1px 2px rgba(0,0,0,.5); --sf-shadow-lg: 0 24px 60px -28px rgba(0,0,0,.78); /* The storefront ALSO loads app.css, whose own tokens drive most text, borders and surfaces (var(--ink) / --muted / --line / --bg). Flip them too, or that text stays near-black on the dark background (invisible). */ --ink: #e9ebf1; --ink-2: #c7ccd6; --muted: #98a1b1; --muted-2: #79808f; --line: #283041; --line-2: #353d4d; --bg: #0c0e13; --bg-2: #1a1f2b; /* Soft badge tints (--*-soft) stay LIGHT on purpose: badges render as light pills on the dark page, which keeps their coloured text readable. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 4px 14px -4px rgba(0,0,0,.6); --shadow-lg: 0 14px 34px -16px rgba(0,0,0,.7); } html[data-theme="dark"] body.store { background: radial-gradient(900px 460px at 88% -8%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 60%), radial-gradient(720px 420px at -10% 4%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 55%), var(--sf-bg); } /* Neutral surfaces that hardcode #fff in the light sheet flip to the dark card. */ html[data-theme="dark"] .gbtn, html[data-theme="dark"] .sf-drawer, html[data-theme="dark"] .sf-qty, html[data-theme="dark"] .sf-search, html[data-theme="dark"] .sf-cat, html[data-theme="dark"] .sf-chip, html[data-theme="dark"] .sf-show-row, html[data-theme="dark"] .sf-pcard, html[data-theme="dark"] .sf-empty, html[data-theme="dark"] .sf-modal, /* shared app.css components that hardcode a white background */ html[data-theme="dark"] .card, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .qstep, html[data-theme="dark"] .chip, html[data-theme="dark"] .input-affix, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, /* per-view