/* Yeni bir mağazanın ilk günü nasıl görünür. Bu dosya da temanın parçası: veritabanında durur, sürümlenir ve /_theme//asset/assets/style.css adresinden servis edilir. */ :root { /* ⚠ **The store's roles, with this sheet's old names kept** (ADAY-B #6): every rule below still reads `--accent`, `--ink`, `--paper` and `--muted`, and each of them is now the store's own colour. The hex after the comma is what an unframed page with no tokens falls back to. ⚠ **And no dark variant any more**: a `prefers-color-scheme` block wrote its own three colours over the store's palette, so a merchant's choice was invisible to every visitor in dark mode. The packaged designs have none either. */ --accent: var(--color-accent, #3b82f6); --ink: var(--color-text, #16181d); --paper: var(--color-bg, #ffffff); --muted: var(--color-muted, #6b7280); /* A hairline in the store's own text colour, not a black nobody chose. */ --line: color-mix(in srgb, var(--ink) 12%, transparent); } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.65 ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); } .preview-bar { margin: 0; padding: 10px 20px; text-align: center; font-size: 13px; /* The packaged designs' colours for the same strip: it is the store's own accent, not a yellow nobody chose. */ background: var(--accent); color: var(--color-accent-contrast, #ffffff); } .site-header { padding: 56px 24px 8px; text-align: center; } .brand { font-size: 30px; font-weight: 650; letter-spacing: -.02em; color: inherit; text-decoration: none; } .tagline { margin: 6px 0 0; color: var(--muted); } .site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; } /* The top bar's box and Catalog's search page share one look: the field, then the button, on one line until the line runs out. */ .site-search, .search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .search-form { margin: 0 0 24px; max-width: 640px; } .search-form__label { flex: 1 0 100%; color: var(--muted); } .site-search input, .search-form input { flex: 1 1 12em; min-height: 44px; padding: 8px 12px; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; } /* Only the two search boxes: `.button` elsewhere is drawn by pages this slice does not touch. */ .site-search .button, .search-form .button { padding: 8px 16px; font: inherit; font-weight: 600; color: var(--color-accent-contrast, #ffffff); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; } /* Read by a screen reader, drawn for nobody: the top bar's field says what it is in its placeholder. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-main { width: min(880px, 92vw); margin: 0 auto; padding: 40px 0 64px; } .hero h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -.03em; } .hero p { margin: 0 0 8px; color: var(--muted); } .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 40px; } /* Scoped to the two grids this theme actually draws cards in (B78, ADR-0237). `.card` is a name the platform's own `feature_grid` and `testimonials` sections chose independently, and a bare `.card h2` here is (0,1,1) against the platform's `.h4` at (0,1,0) -- so these three rules were painting sections this theme never meant to style, in this file's own hand-written `--accent` and `--muted` rather than in the store's palette. Nothing under `resources/sections/` emits `.cards` or `.grid--3`, so naming them is what hands those sections back to the merchant's tokens. The two ancestors are what this theme's own templates put above a card: `.cards` on `home.twig` and `collection.twig`, `.grid--3` on `search.twig`. The price is that a merchant who writes a card of their own outside both grids gets no frame -- which is the cost B78 weighed and accepted. */ .cards .card, .grid--3 .card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; } .cards .card h2, .grid--3 .card h2 { margin: 0 0 6px; font-size: 15px; color: var(--accent); } .cards .card p, .grid--3 .card p { margin: 0; font-size: 14px; color: var(--muted); } .site-footer { padding: 24px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--muted); } .site-footer p { margin: 2px 0; } /* `` is inline by default, which leaves a text baseline gap under every image and makes the element ignore the block layout its `` is sitting in. Every picture on this storefront is wrapped in one now (F7D K4), so the wrapper has to behave like the image it wraps. */ /* And the image itself, for the same reason it is in Atlas: a picture wider than the screen makes the whole page scroll sideways, and a phone is where that happens. */ img { max-width: 100%; height: auto; } /* A picture linked from another site (I-943): the box keeps its size and shows this tint if that site fails to answer. */ img[data-external] { background: rgba(127, 127, 127, .12); } img[data-unsized] { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; } img[data-broken] { color: transparent; } picture { display: block; } picture > img { max-width: 100%; height: auto; display: block; } /* The keyboard's first stop, and invisible until it is reached. Off screen rather than `display: none`: a hidden element is not focusable at all, which would make this a link nobody can reach (F7D K8). */ .skip-link { position: absolute; left: 8px; top: 8px; z-index: 100; padding: .6em 1.2em; border-radius: var(--radius, 4px); background: var(--color-accent, #2563eb); color: var(--color-accent-contrast, #fff); text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* Roughly a fingertip, on the things a finger actually aims at. Not on every link: a word inside a paragraph is not a target, and padding it to 44 pixels would tear the paragraph apart (WCAG 2.2, K8). */ .button, .top__nav a, .brand, .site-header a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Not a preference about taste. Everything this stylesheet animates is switched off for a reader who asked. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Where the keyboard is. `:focus-visible` rather than `:focus` so a mouse click leaves no ring behind -- rings on every click are rings people learn to ignore. Drawn with an offset so it is never the same colour as what it surrounds (WCAG 1.4.11 asks 3:1). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-accent, #2563eb); outline-offset: 2px; border-radius: 2px; } /* What a reduced price looks like (F7E J4). Three parts, and none of them is a colour typed by hand: the badge takes the store's accent and the contrast colour that was measured against it (F7D K7), so a merchant who changes their palette gets a readable badge without anybody editing this file. The old price is struck through *and* says "was ..." in words. The line is for the eye; the words are for everything else, because a screen reader does not reliably announce `` and two numbers side by side with nothing between them is a page that lies to a listener. */ .price__was { color: var(--color-muted); font-size: var(--text-small); margin-right: .4em; } .price__unit { display: block; color: var(--color-muted); font-size: var(--text-small); font-weight: 400; } .price__now { font-weight: 650; } .badge { display: inline-block; margin-left: .4em; padding: .1em .5em; border-radius: var(--radius); font-size: var(--text-small); font-weight: 650; /* Not a word wrapped away from its number. */ white-space: nowrap; } .badge--sale { background: var(--color-accent); color: var(--color-accent-contrast); } /* -- the filter panel (vitrin D3/E1) --------------------------------------- */ /* ⚠ **Structure only.** What the panel looks like is this theme's job and the §8.2 round's subject; what is here is the part without which the markup would be dishonest -- a listing that is one column on a phone and two on a desk, and a `
` that is a button on the small screen and a heading on the wide one. Mobile first, like every rule above it (T12). ⚠ **No colour and no font value**: both come from the store's design tokens, so a merchant's palette restyles the panel and a test can keep looking for the words that must not be here. ⚠ **And no font FAMILY either, not even a token:** Loft pins how many times `var(--theme-font, …)` appears in its sheet (`ThemeFontTest`), so a seventh would have meant editing a pinned number for a declaration the panel does not need -- the summary inherits the page's voice, which is the voice E1 drew it in. */ .listing { display: grid; gap: var(--space-normal); align-items: start; } .filters { border: 1px solid var(--theme-line); border-radius: var(--radius); padding: var(--space-tight); background: var(--color-surface); } /* ⚠ **44 pixels, because on a phone this is the one thing a thumb aims at.** `display: flex` is what puts the count beside the word -- and it is also what takes the browser's triangle away, which is why one is drawn below. */ .filters > summary { display: flex; align-items: center; gap: var(--space-tight); min-height: 44px; cursor: pointer; font-size: var(--text-base); list-style: none; } .filters > summary::-webkit-details-marker { display: none; } /* ⚠ **A marker drawn from borders, not written as a character** -- the lesson `sections/page.twig` already paid for: a glyph in `content:` is a word nobody can translate and a font nobody is promised (ADR-0234). Without it an open row and a plain heading look identical and nothing says this can be opened. */ .filters > summary::after { content: ""; margin-inline-start: auto; width: .5em; height: .5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); } .filters[open] > summary::after { transform: rotate(-135deg); } .filters__badge { min-width: 1.5em; padding: 0 .35em; border-radius: 999px; text-align: center; background: var(--color-accent); color: var(--color-accent-contrast); font-size: var(--text-small); } .filters__body { padding-block-start: var(--space-tight); } .filters__clear { font-size: var(--text-small); } .filters__group + .filters__group { margin-block-start: var(--space-tight); padding-block-start: var(--space-tight); border-block-start: 1px solid var(--theme-line); } .filters__group-title { margin: 0 0 var(--space-tight); font-size: var(--text-small); text-transform: uppercase; } .filters__options { margin: 0; padding: 0; list-style: none; } /* 44 pixels again: these are the rows a thumb aims at. */ .filters__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-tight); min-height: 44px; text-decoration: none; color: inherit; } .filters__option--on { font-weight: 600; } /* ⚠ **A mark, not only a weight.** A selected row whose only difference is how bold it is, is a selection nobody reading at a distance can see -- and the `aria-current` beside it is what a listener gets. */ .filters__option--on .filters__option-label::before { content: ""; display: inline-block; width: .45em; height: .25em; margin-inline-end: .5em; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); } .filters__count { color: var(--color-muted); font-size: var(--text-small); } /* ⚠ **On a wide screen the panel is a box beside the list and the `` is its heading.** Two overrides rather than one, because browsers hide a closed `
`' body in two different ways: the old rule sets `display: none` on the children (an author rule beats the UA sheet whatever its specificity), and the current spec hides `::details-content` with `content-visibility`. ⚠ **Opening it with the `open` attribute instead was eliminated:** then the phone would start open, and E1 asks for a panel that starts closed there. */ @media (min-width: 60em) { .listing { grid-template-columns: 16rem 1fr; gap: var(--space-loose); } .filters > summary { cursor: default; } .filters > summary::after { display: none; } .filters > .filters__body { display: block; } .filters::details-content { content-visibility: visible; block-size: auto; overflow: visible; } } /* ⚠ **The one control in the panel that is a form**, and the only one a shopper has to confirm: two numbers have no moment at which they are finished. Laid out as a two column grid so the labels sit above their fields on a phone and the button spans both. */ .filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight); align-items: end; } .filters__price-label { font-size: var(--text-small); } /* `min-width: 0` because a grid item's default `auto` lets a number field push the column wider than the panel and take a horizontal scrollbar with it. */ .filters__price-field { min-width: 0; width: 100%; min-height: 44px; padding: 0 .5em; border: 1px solid var(--theme-line); border-radius: var(--radius); background: var(--color-bg); color: inherit; font: inherit; } .filters__price-basis { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-small); } .filters__price-apply { grid-column: 1 / -1; min-height: 44px; border: 0; border-radius: var(--radius); background: var(--color-accent); color: var(--color-accent-contrast); font: inherit; cursor: pointer; } /* ⚠ **The labels keep their own row and the fields theirs**, rather than each label sitting beside its field: *Van* and *Tot* are two words of different lengths, and a shared row would put the two boxes at two different widths. */ .filters__price-label:nth-of-type(2) { grid-column: 2; } /* The order, and the filters a shopper has on (vitrin D3-3 / E1) ------------------------------------------------------------------------ ⚠ **No colour and no font value here either**: both come from the store's design tokens, so a merchant's palette restyles both controls -- and Loft pins how many times `var(--theme-font, …)` appears in its sheet, so a declaration neither control needs would have meant editing a pinned number. ⚠ **The sort is a sibling of the panel, not a child of it**: a control inside the `
` is a control a phone hides behind the word *"Filters"*. On a phone it therefore sits directly under the panel's own button, and on a wide screen it moves to the top of the results column -- which is the heading row E1 drew it on. */ .filters__sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); } .filters__sort-label { font-size: var(--text-small); } /* `min-width: 0` and a flexible basis, because a `