/* base theme. Mobile first, logical properties throughout, and a plain floor that never needs the enhancement script beside it to work. The host stamps lang, dir and data-mode on ; everything below reads those rather than guessing. */ /* The listing facts the parity review added: a rating, a low-stock line the platform wrote, the merchant's own badge, and direct add from a tile. */ .card-rate { font-size: 12px; color: var(--muted); } .card-stock { font-size: 12px; color: var(--cut-ink); } .tag-own { background: var(--accent-soft); color: var(--accent); } .card-add .btn { inline-size: 100%; } .foot-tag { margin: 0; color: var(--muted); } /* Share intents and the categories a product sits in: both are lists the platform built, rendered and never composed. */ .shares, .in-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .shares { margin-block-start: 10px; } .in-cats { margin-block-start: 8px; font-size: 13px; } .share { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .packs { display: grid; gap: 18px; } .pack { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); } .pack-title { margin: 0; font-size: 18px; } .pack-price { display: flex; align-items: center; gap: 8px; margin: 0; } .line-pack { margin: 0; font-size: 12px; color: var(--accent); } .cat-strip.cat-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; } /* Every value the merchant can change is a token, and the theme reads it through one name (docs/theme-editor.md section 11). The literals live in the manifest, reach the page as the --tk- properties at the end of this file, and the editor's token panel repaints the store by overriding those; a second copy of a hex code here would be a value the panel could not reach. TestEveryTokenHasACustomProperty pins the manifest against those names. */ :root { color-scheme: light; --bg: var(--tk-color-bg); --bg-soft: var(--bg-soft-own); --bg-soft-own: var(--tk-color-bg-soft); --surface: var(--tk-color-surface); --text: var(--text-own); /* The theme's own ink, on the theme's own grounds. A section a merchant repaints derives its ink from what they chose and falls back to these, and a control that keeps its own ground keeps `--ink-on-surface` whatever the section around it is painted. */ --text-own: var(--tk-color-text); --muted-own: var(--tk-color-muted); --line-own: var(--tk-color-line); --line-strong-own: var(--tk-color-line-strong); --surface-2-own: var(--tk-color-surface-2); --ink-on-surface: var(--text-own); --muted: var(--muted-own); --line: var(--line-own); --accent: var(--tk-color-accent); --accent-soft: var(--tk-color-accent-soft); /* Words on an accent fill read at AA whatever accent a store picks: the fill and its ink are chosen together from the accent. A dark or mid accent keeps white ink on a fill no lighter than it can carry; a light one keeps its own fill under a dark ink of its own hue. Every scope that redefines --accent restates these two, so they always follow it. */ --accent-fill: oklch(from var(--accent) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-accent: oklch(from var(--accent) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --cut: var(--tk-color-cut); /* The cut's words sit on light grounds (the page, its own soft wash), so they take a shade dark enough to read at AA there; dark mode's cut is already a light red and is its own ink. */ --cut-ink: oklch(from var(--cut) min(l, .52) c h); --accent-ink: var(--tk-color-accent-ink); --surface-2: var(--surface-2-own); --line-strong: var(--line-strong-own); --cut-soft: var(--tk-color-cut-soft); --success: var(--tk-color-success); --success-soft: var(--tk-color-success-soft); --star: var(--tk-color-star); --whatsapp: var(--tk-color-whatsapp); /* Every other colour a surface fills under words takes the accent's ladder. Dark mode's values sit on with :root, so these follow them. */ --cut-fill: oklch(from var(--cut) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-cut: oklch(from var(--cut) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --success-fill: oklch(from var(--success) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-success: oklch(from var(--success) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --accent-ink-fill: oklch(from var(--accent-ink) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-accent-ink: oklch(from var(--accent-ink) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --whatsapp-fill: oklch(from var(--whatsapp) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-whatsapp: oklch(from var(--whatsapp) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* One ease and one beat for every hover, and the brightest ink a band carries, which a pointer moves a word towards. */ --ease: cubic-bezier(.4, 0, .2, 1); --tap: .15s; --ink-strong: var(--text); --radius: var(--tk-radius-card); --radius-sm: var(--tk-radius-control); --pill: var(--tk-radius-pill); --shadow: var(--tk-shadow-card); --pop: var(--tk-shadow-pop); --lift: var(--tk-shadow-sticky); /* The page column and the rhythm between sections are the layout tokens (docs/theme-editor.md section 11), so a look sets them and the token panel edits them, and no section's setting decides another section's spacing. */ --wrap: var(--tk-layout-width); --band: var(--tk-layout-rhythm); --gutter: var(--tk-layout-gutter); --head: 62px; } [data-mode="dark"] { color-scheme: dark; --bg: #0b100e; --bg-soft: var(--bg-soft-own); --bg-soft-own: #101614; --surface: #151d1a; --text-own: #e9efeb; --muted-own: #95a29b; --line-own: #253029; --line-strong-own: #37453d; --surface-2-own: #1b2420; --cut-soft: #35211d; --star: #e5b44a; --whatsapp: #35b96b; /* The accent ladder is DERIVED from the token, not restated as a literal: token values are mode-invariant (docs/theme-package.md section 8), so a preset that sets its own accent would otherwise never reach a dark render. Mixing toward white keeps the hue and buys the contrast the dark ground needs; the grounds below stay literals, which is what the theme's own dark styling is for. */ --accent: color-mix(in srgb, var(--tk-color-accent) 50%, #ffffff); --accent-soft: color-mix(in srgb, var(--tk-color-accent) 22%, #0e1012); --accent-fill: oklch(from var(--accent) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-accent: oklch(from var(--accent) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --cut: #ff8a76; --cut-ink: var(--cut); --success: color-mix(in srgb, var(--tk-color-success) 45%, #ffffff); --success-soft: color-mix(in srgb, var(--tk-color-success) 24%, #0e1012); --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .9); --pop: 0 24px 60px -24px rgba(0, 0, 0, .9); /* The six backdrop tints are ground family, not accent family: the theme's dark stylesheet writes its own grounds as literals, and a mix of the light tint toward this ground comes out warmer than a dark tile should read (docs/notes/open-questions.md, eighteenth round). The cost, the same one every other ground already carries, is that a look overriding a tint token restyles light only. */ --tint-a: #12302a; --tint-b: #211f33; --tint-c: #2f1f26; --tint-d: #2d2718; --tint-e: #16262d; --tint-f: #1e2419; --accent-ink: color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff); /* An ink accent mixed the same way stays grey on the dark ground. */ @supports (color: oklch(from red l c h)) { --accent-ink: oklch(from color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff) max(l, .72) c h); } } @media (prefers-color-scheme: dark) { [data-mode="auto"] { color-scheme: dark; --bg: #0b100e; --bg-soft: var(--bg-soft-own); --bg-soft-own: #101614; --surface: #151d1a; --text-own: #e9efeb; --muted-own: #95a29b; --line-own: #253029; --line-strong-own: #37453d; --surface-2-own: #1b2420; --cut-soft: #35211d; --star: #e5b44a; --whatsapp: #35b96b; /* The accent ladder is DERIVED from the token, not restated as a literal: token values are mode-invariant (docs/theme-package.md section 8), so a preset that sets its own accent would otherwise never reach a dark render. Mixing toward white keeps the hue and buys the contrast the dark ground needs; the grounds below stay literals, which is what the theme's own dark styling is for. */ --accent: color-mix(in srgb, var(--tk-color-accent) 50%, #ffffff); --accent-soft: color-mix(in srgb, var(--tk-color-accent) 22%, #0e1012); --accent-fill: oklch(from var(--accent) calc(min(l, .54) + clamp(0, (l - .72) * 1000, 1) * (l - min(l, .54))) c h); --on-accent: oklch(from var(--accent) calc(.99 - clamp(0, (l - .72) * 1000, 1) * .74) calc(c * clamp(0, (l - .72) * 1000, 1) * .4) h); --cut: #ff8a76; --cut-ink: var(--cut); --success: color-mix(in srgb, var(--tk-color-success) 45%, #ffffff); --success-soft: color-mix(in srgb, var(--tk-color-success) 24%, #0e1012); --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .9); --pop: 0 24px 60px -24px rgba(0, 0, 0, .9); /* The six backdrop tints are ground family, not accent family: the theme's dark stylesheet writes its own grounds as literals, and a mix of the light tint toward this ground comes out warmer than a dark tile should read (docs/notes/open-questions.md, eighteenth round). The cost, the same one every other ground already carries, is that a look overriding a tint token restyles light only. */ --tint-a: #12302a; --tint-b: #211f33; --tint-c: #2f1f26; --tint-d: #2d2718; --tint-e: #16262d; --tint-f: #1e2419; --accent-ink: color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff); /* An ink accent mixed the same way stays grey on the dark ground. */ @supports (color: oklch(from red l c h)) { --accent-ink: oklch(from color-mix(in srgb, var(--tk-color-accent) 62%, #ffffff) max(l, .72) c h); } } } *, *::before, *::after { box-sizing: border-box; } body { /* A short page still puts its footer on the floor of the viewport rather than halfway up it, which the browser lane measures on every page of every look (`make browser`). */ min-block-size: 100vh; min-block-size: 100dvh; display: flex; flex-direction: column; margin: 0; background: var(--bg); color: var(--text); font-family: var(--tk-font-body); font-size: 16px; /* The body font's own line height, which the CSS pipeline declares from the curated catalog (docs/theme-editor.md sections 11 and 19). A stack the catalog does not name leaves the property absent and this value stands. */ line-height: var(--tk-font-leading, 1.55); -webkit-text-size-adjust: 100%; } [dir="rtl"] body { line-height: var(--tk-font-leading-rtl, 1.8); } /* height:auto is load bearing: the width and height attributes on an img are presentational hints, so an aspect-ratio rule that sets only the inline size is silently overridden by the intrinsic height. */ img, video { display: block; max-inline-size: 100%; block-size: auto; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; } /* A product title is merchant text, and one long unbroken word in it must not be able to widen the whole page. */ h1, h2, h3, h4, h5, h6, p, li, dd, dt, a, figcaption, td, th { overflow-wrap: anywhere; } /* Merchant words keep their own reading order and sit with the page (editor spec section 19): a Latin name on an Arabic page aligns right. */ [dir="auto"] { text-align: -webkit-match-parent; text-align: match-parent; } /* Arabic is a joined script and tracking pulls its letters apart, so an Arabic page tracks nothing, over every look and token (editor spec section 19); a Latin name there loses its tracking too. */ :root:lang(ar), :root:lang(ar) *, :root:lang(ar) *::before, :root:lang(ar) *::after, :root:lang(ar) *::placeholder { letter-spacing: 0 !important; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, .buy h2.buy-title { font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; } h2 { font-size: clamp(1.1rem, .98rem + .6vw, 1.4rem); line-height: 1.25; } :where(a, button, input, select, textarea, summary, label[for]):focus-visible { outline: 2px solid var(--accent); outline-offset: calc(-1 * var(--tap-inset, 0px)); border-radius: var(--radius-sm); } .wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .main { flex: 1 0 auto; padding-block: 20px 56px; } /* Between-section spacing belongs to the container the engine emits, never to a section's own root. A margin there escapes the wrapper, and the wrapper is what the editor draws its selection box on and what `appearance.background` paints (theme-engine.md section 3), so a section would own space its box does not cover. One gap here is also one rhythm: every section sits the same distance from its neighbour, and a new section is right by default. */ .main > .wrap { display: flex; flex-direction: column; gap: var(--tk-spacing-lg); } /* A section that drew nothing takes no band, and neither does a heading kept for readers alone; the editor keeps both, to point at. */ .main > .wrap > [data-type]:not([data-theme-section]):not(:has(*)) { display: none; } .main > .wrap > [data-type]:not([data-theme-section]):has(> .page-head[data-display="hidden"]:only-child) { display: contents; } .main > .wrap > [data-type]:not([data-theme-section]):has(> .poster .poster-ph):not(:has(.poster-words)) { display: none; } .muted { color: var(--muted); font-size: .92rem; } .lede { color: var(--muted); font-size: 1.02rem; max-inline-size: 62ch; } .h-sec { margin-block-end: 14px; } /* Visually hidden, and hidden from the LAYOUT too. The max sizes are not belt and braces: a later rule that sets a width on inputs wins over the inline-size here, and a 320px control clipped to nothing still counts toward the page's scroll width, which is how the reflow rule was being broken on every product page by a radio nobody could see. */ .vh { position: absolute; inline-size: 1px; block-size: 1px; max-inline-size: 1px; max-block-size: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0; } /* The skip link is a tap target the moment it is focused, and a keyboard on a phone is still a phone: it takes the same 44px floor every other control has. */ .skip { position: absolute; inset-block-start: -60px; inset-inline-start: 12px; z-index: 60; display: inline-flex; align-items: center; min-block-size: 44px; background-color: var(--accent-fill); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* :focus-visible only: a scripted focus or a restored page must not paint it over the store. main takes the focus the link hands it, without a ring around the whole page. */ .skip:focus-visible { inset-block-start: 0; } .main:focus { outline: none; } .ico { inline-size: 22px; block-size: 22px; flex: none; } .ico-down { inline-size: 16px; block-size: 16px; opacity: .6; } .chev { display: inline-block; transform: scaleX(-1); } .chev-next { transform: none; } [dir="rtl"] .chev { transform: none; } [dir="rtl"] .chev-next { transform: scaleX(-1); } /* placeholder for an image the merchant has not uploaded. Never a broken img. */ .ph { display: block; inline-size: 100%; block-size: 100%; min-block-size: 64px; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 4%, transparent) 9px 18px), var(--bg-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-weight: 600; cursor: pointer; text-align: center; } .btn:hover { text-decoration: none; filter: brightness(.97); } .btn-buy { background: var(--accent-fill); color: var(--on-accent); } .btn-quiet { background: transparent; border-color: var(--line); } .btn-block { display: flex; inline-size: 100%; } .btn-wa { background: transparent; border-color: var(--line); } .field { display: grid; gap: 5px; } /* The platform's sentence in place of an empty linked select: the control's words, in the field's quiet ink, under the label it keeps. */ .field-empty { margin: 0; line-height: 1.5; color: var(--muted); } /* An author display wins over the browser's own [hidden] rule, so a field the platform shows only `when` its condition holds is hidden here too. */ .field[hidden] { display: none; } /* A noscript input is an element only in a browser without script, and there the typed field is the control, so the disabled select steps aside. */ .field:has(> noscript input) > select { display: none; } .field > label { font-size: .86rem; color: var(--muted); } .field input, .field select, .field textarea { inline-size: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .field textarea { resize: vertical; } .field-bad { --line: var(--cut); --line-strong: var(--cut); } .field-bad :is(input, select, textarea) { background-color: var(--cut-soft); } .bad { color: var(--cut-ink); font-size: .84rem; } .rt { max-inline-size: 68ch; } .rt > * + * { margin-block-start: .9em; } .rt p, .rt li { color: var(--muted); } .rt strong { color: var(--text); } /* A merchant's minor headings never read smaller than the words under them. */ .rt :is(h4, h5, h6) { font-size: 1em; line-height: inherit; } .rt ul { list-style: disc; padding-inline-start: 1.2em; } /* A spec sheet scrolls inside its own block, and a cell keeps its words whole; a title row is a heading and a row's label is lighter than it. */ .rt table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; } .rt :is(th, td) { padding-block: 10px; padding-inline-end: 24px; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: normal; } .rt th { color: var(--text); font-weight: 600; } .rt tr > th:first-child:has(+ td) { color: var(--muted); font-weight: 400; } .rt td { color: var(--text); } .rt tr:last-child > * { border-block-end: 0; } .empty { display: grid; gap: 16px; justify-items: center; padding-block: 48px; text-align: center; color: var(--muted); } /* announcement */ .announce { background-color: var(--accent-fill); color: var(--on-accent); font-size: .88rem; text-align: center; padding-block: 8px; } .announce .wrap { display: block; } /* header */ .head { background: var(--bg); border-block-end: 1px solid var(--line); } /* The header's own ground, so its tone is a surface the whole bar sits on rather than a tint the width of the words. Same shape as the announcement and utility bars above it. */ .head-bar { background: var(--bg); } .head:has(.head-bar[data-tone="inverse"]) { border-block-end-color: transparent; } .head-row { display: grid; align-items: center; gap: 10px; grid-template-columns: 1fr auto; grid-template-areas: "brand end" "search search"; min-block-size: var(--head); padding-block: 9px; } .brand { grid-area: brand; display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 0; } .brand-name { font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; } .brand-logo { block-size: 34px; inline-size: auto; object-fit: contain; } .search { grid-area: search; display: flex; gap: 6px; align-items: center; inline-size: 100%; max-inline-size: 560px; margin-inline: auto; } /* Suggestions sit under the box, inside the search form, so tabbing into them is still being in the form. */ .search { position: relative; } .suggest { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 45; margin: 0; padding: 6px; list-style: none; max-block-size: 70vh; overflow-y: auto; background: var(--surface); color: var(--ink-on-surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--pop); } .suggest-a { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 6px 8px; border-radius: var(--radius-sm); color: inherit; } .suggest-a:hover, .suggest-a:focus-visible { background: var(--bg-soft); text-decoration: none; } .suggest-img { flex: none; inline-size: 40px; block-size: 40px; object-fit: cover; border-radius: var(--radius-sm); } .suggest-label { flex: 1; min-inline-size: 0; } .suggest-price { font-weight: 600; white-space: nowrap; } /* The field follows the page's direction, so its corners mirror with the row; what a buyer types still reads in its own direction. dir="auto" on the field turned an empty box left to right on an Arabic page. */ .search input { flex: 1; min-inline-size: 0; padding: 9px 14px; unicode-bidi: plaintext; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; } .search-go { display: inline-flex; padding: 8px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; } .head-end { grid-area: end; display: flex; align-items: center; gap: 10px; } .head-end .cart-link { color: var(--muted); } .cart-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; min-inline-size: 44px; min-block-size: 44px; } .cart-link:hover { text-decoration: none; } .cart-count { min-inline-size: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-size: .74rem; font-weight: 700; line-height: 20px; text-align: center; } .cart-total { display: none; font-size: .9rem; font-weight: 600; } .locales { display: flex; gap: 6px; } /* inline-flex, not inline: an inline box's vertical padding paints without sizing the line it sits on, so the current locale's pill hung below the row and below the wrapper the editor draws its box on. */ /* Every one of these is something a thumb presses, so every one of them takes the 44px floor. The height is a minimum and not a size: the rows they sit in are already taller, so nothing moves and the target is real. */ .locale { display: inline-flex; align-items: center; min-block-size: 44px; font-size: .84rem; color: var(--muted); padding: 4px 8px; border-radius: var(--radius-sm); } .locale.is-here { color: var(--text); background: var(--bg-soft); font-weight: 600; } /* --------------------------------------------------------------------------- Navigation: one section type, four patterns, one tree in the markup. The floor is native. A dropdown root is a
, a small-width opener is a checkbox inside its own