/* ========================================================================= THE DESIGN SYSTEM — TOKENS Spec §19.1: "the Zara standard" is NOT an acceptance criterion. The aesthetic direction is a reference; an acceptance criterion has to be measurable. TWO DENSITIES, ONE LANGUAGE :root default -> storefront (generous space, large imagery, calm) `.density-tight` -> admin (same language, tight rows, workable) Same typography, same colour, same component logic; only the scale changes. ========================================================================= */ :root { /* --- RENK: monokrom -------------------------------------------------- */ --ink: #000000; /* text, buttons, rule emphasis */ --ink-soft: #333333; --muted: #666666; /* secondary text, micro label */ /* CAREFUL — 2.38:1 on white, which fails BOTH the WCAG AA (4.5:1) and the 3:1 threshold. Use it ONLY on disabled controls and pure decoration (disabled elements are outside WCAG 1.4.3). Functional text (LOT, SKU, quantity, price unit, result count, navigation link) uses --muted — 5.74:1 on white, 4.69:1 on the reading glass. Guard: AccessibilityTest::test_functional_text_does_not_use_faint. */ --faint: #a8a8a8; /* disabled, placeholder — NEVER on functional text */ --hairline: #e6e6e6; /* divider rules */ --bg: #ffffff; --surface: #f4f4f4; /* section background, behind imagery */ /* --- FUNCTIONAL COLOUR ----------------------------------------------- The brand red is NOT decoration, only a SIGNAL: error, critical stock, expiry, VAT risk. The brand survives without breaking the editorial language. */ --signal: #e10600; --signal-soft: #fdf0ef; --caution: #8a6d00; --caution-soft: #fdf8e8; --ok: #1f6b3a; --ok-soft: #eef6f0; /* --- THE BRAND COLOUR IS BLACK AND WHITE ------------------------------ There used to be a "material accent" here: --indigo (denim's own colour) and --gold-thread (the stitching). Both were REMOVED — --indigo was defined but measured at 0 references on screen, and --gold-thread lived in two pseudo-elements and was dropped by the user's decision. The brand is now made of one material: ink and paper. The distinguishing work is left to TYPOGRAPHY rather than colour (see --font-data: sans narrates, mono measures). NOTE: this is an INTERFACE decision. "indigo" as a product colour stays in the taxonomy and must stay there — a monochrome interface does not mean monochrome content. */ /* --- GLASS (LIQUID GLASS) — global and systematised ------------------- This used to be scoped to the homepage blade only; it moved here so every page can use the same glass. OPACITY .30 → .60. That started as an aesthetic request but also closed a MEASURED gap. This glass carries white text over a DARK image, and the effective background changes with the photo behind it. Worst case, when the glass lands on a BRIGHT square (assuming a white backdrop): .30 → effective #b6b7ba → white text 2.01:1 (far below AA) .60 → effective #6c6e74 → white text 5.07:1 (passes AA) So the hero CTA, the arrows, "show the film" and the collage labels were unreadable over a light denim square. This is the same lesson as --glass-bg-reading (.65) in the opposite direction: there the ground is LIGHT and the text DARK, here the ground is DARK and the text WHITE, and in both cases MORE opacity is safer. The dark side's own threshold had never been computed. Guard: AccessibilityTest::test_dark_glass_can_carry_white_text. */ --glass-bg: rgba(10, 14, 24, .60); --glass-border: rgba(255, 255, 255, .48); --glass-highlight: rgba(255, 255, 255, .65); /* inset highlight */ --glass-blur: 20px; --glass-saturation: 180%; /* THE REFRACTION — what the glass does when it is reached for. Resting glass BLURS (20px), so the page behind it is a wash; refracting glass CLEARS (6px), so the shape behind it reads, and it pushes the colour hard (420%) so the field arrives as colour rather than as grey. The distance between the two states IS the effect, which is why the values sit side by side here instead of one being buried in a button rule. Raised from blur(9px) saturate(300%) contrast(1.04) on 7 Sep 2026 (user: "kırılımı yükselt"); all six glass controls read this one line. */ --glass-refract: blur(6px) saturate(420%) contrast(1.08) brightness(.94); /* THE RIM — what makes the glass read WHERE THERE IS NO COLOUR TO BEND. `saturate()` is powerless on white: white has no chroma to push, so over a white card or a white photograph the refraction was invisible and the control looked flat (user, 7 Sep 2026: "arka planın beyaz olduğu noktalarda da kırılım olmalı"). Two things fix that, and neither depends on the backdrop having colour: · brightness(.96) above — white is pushed off pure white, so the pill separates from the paper it sits on; · this rim — a lit top edge and a shaded bottom lip, i.e. the thickness of the glass drawn on the element itself. Every hovering glass surface takes it, so the effect is the same on a photograph, on the page field and on plain white. */ --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -12px 18px -12px rgba(10, 14, 24, .2), inset 0 0 0 1px rgba(10, 14, 24, .06); /* The light variant: glass over a light ground rather than over a dark image. Two consumers, and they share one property — every word on them is --ink, so none of them pays the --muted penalty the reading surface pays: · the sticky HEADER once it is filled (7 Sep 2026; it was on --glass-bg-reading and the user asked for a more transparent bar) · the price accent card on the product page Measured over a black product photo, which is what scrolls under the header: .55 + --ink -> 6.04:1 passes AA .55 + --ink-soft -> 3.64:1 below AA .46 + --ink -> 4.43:1 the floor even with black ink So this ground is legal ONLY while its surfaces stay all-ink; the header redefines --muted to --ink for its one exception (.logo small). Guard: AccessibilityTest::test_the_header_trades_opacity_for_ink. */ --glass-bg-light: rgba(251, 250, 247, .55); /* THE READING-SURFACE glass — .92 DOWN TO .65. The user was right that .92 was not glass but a frosted white slab. But .92 was not arbitrary either; it was measured against dark denim (#33415c) behind: .55 → --muted 1.92:1 (below AA) .92 → --muted 4.69:1 (passes AA) THE ROOT CAUSE WAS THE TEXT COLOUR, NOT THE OPACITY. --muted (#666) is already weak ink and anything behind the glass finished it off. Raising the opacity masked the symptom — by killing the glass. THE FIX: on a glass surface, secondary text becomes --ink-soft (#333). That is done by REDEFINING --muted in place inside the .glass--reading rule below: one line that automatically catches every var(--muted) consumer on that surface, today's and tomorrow's. THE NEW MEASUREMENT — worst case, a BLACK product photo (darker than denim): .65 + --ink-soft → 4.83:1 passes AA ✅ .65 + --muted → 2.26:1 below AA ❌ (hence the override) .60 + --ink-soft → 4.15:1 below AA ❌ (the threshold sits here) So .65 is not a coincidence: it is the LOWEST round opacity that passes AA with --ink-soft. If more transparency is wanted, the text has to go to --ink (#000); the opacity cannot drop on its own. Guard: test_glass_reading_surfaces_are_at_high_opacity. */ --glass-bg-reading: rgba(251, 250, 247, .65); /* CLEAR GLASS — the reading surface's lower step, taken by the note above at its word: the opacity drops only because the secondary ink rises with it. Only a surface that sits on a SCRIM may use it: the popup's .pop-backdrop pins the worst-case ground at rgb(2,4,5) even over a black photo, which the header and the filter panel (floating straight over the page) cannot do. Measured, worst case, secondary text: .65 + --ink-soft → 5.05:1 (the reading surface today) .50 + --ink → 5.22:1 passes AA, and the backdrop shows through 50% instead of 35% .50 + --ink-soft → 3.14:1 below AA — hence the ink rises TOGETHER Guard: test_clear_glass_trades_opacity_for_ink. */ --glass-bg-clear: rgba(251, 250, 247, .50); /* --- CORNER RADIUS — previously untokenised and hard-coded everywhere -- Without a soft corner a glass surface reads as a "blurry rectangle" rather than as glass. */ --r-md: 14px; --r-lg: 24px; --r-pill: 999px; /* --- TYPOGRAPHY: TWO VOICES ------------------------------------------- The brand is black and white, so one expressive tool is left and the storefront was not using it: TYPOGRAPHY. SANS NARRATES, MONO MEASURES. Narrative (heading, product name, description, button, label) stays in the sans stack. Anything carrying a MEASURABLE VALUE — SKU, the LOT series, price, quantity, MOQ, Σ, date, order number — moves to the mono stack. This is not decoration: it is the language of a denim maker's own paperwork (spec sheet, measurement table, wash label). Zara does not do this because a consumer does not read data; a wholesale buyer reads exactly that. The system was already halfway there — font-variant-numeric:tabular-nums was in use in 21 places, and mono completes it. THE TEST: does the element carry a measurable VALUE? mono. Does it NARRATE? sans. NO EXTRA REQUESTS: both are system stacks. The mono stack matches the admin's --p-data, so panel and storefront show data in the same voice, and the §19.1 first-screen budget does not change. THE STACK: Helvetica Neue → Helvetica → Segoe UI → Arial. NO webfont: a system stack is both fast (0 requests) and complete for Polish and Turkish characters. */ --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; --font-data: ui-monospace, SFMono-Regular, Consolas, "SF Mono", Menlo, monospace; --fs-micro: 10px; /* |01| VIEW ALL · NEW · labels — caps plus tracking carry their own legibility */ /* 11px was NOT on the scale but had been hand-written in 30 places across the storefront: menu, footer, attribute lines, form hints. That is a pattern, not a coincidence — the step between the micro label (10px, caps+tracking) and the body (12px). Rounding to 12 risked a visual regression in 30 places, so it earned its own name on the scale. */ --fs-label: 11px; --fs-small: 12px; /* product name, menu */ --fs-base: 14px; /* body — B2B: a professional buyer reading long paragraphs */ --fs-medium: 16px; --fs-large: 20px; /* section / panel heading */ /* The range between 20 and 34 was empty, and that is where page headings belong: on 11 of 14 pages the largest text was 16px, so a heading was no bigger than a label. --fs-heading is the page heading's own step. */ --fs-heading: 28px; --fs-display: 34px; /* editorial heading — homepage sections */ /* LETTER SPACING — measured: 111 declarations across the storefront with 19 DIFFERENT values, only 10% of them going through a token. The scale came down to 6 steps, each with a job. No intermediate value is added just to make something "sit a little wider": --ls-micro .22 micro label (10px, caps) — this is where its character comes from --ls-label .18 label, button, table header --ls-medium .06 small heading and meta line (was .04/.05/.06/.08) --ls-name .02 product name --ls-heading -.015 LARGE heading (20px+) The negative value is not an accident: as the size grows the letters drift apart optically, and tightening the tracking pulls them back. At small sizes the opposite is needed — which is why one "heading tracking" is not enough. */ --ls-micro: 0.22em; --ls-label: 0.18em; --ls-medium: 0.06em; --ls-name: 0.02em; --ls-heading: -0.015em; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; /* VALUES DELIBERATELY LEFT OFF THE SCALE — a DECISION, not debt: 7.5px .logo small — the signature under the logo, optically locked 9px .badge — the framed micro stamp 9.5/10.5/11.5/12.5px — glass chips and micro labels; caps plus wide tracking carry their own legibility 13/15/17/18/22/26px — one-off heading and icon sizes with no pattern clamp(...) — fluid headings, which cannot bind to a fixed step ROUNDING these to a nearby token does not enrich the scale, it produces a visual regression. Adding a new step is a separate, deliberate decision — --fs-label (11px) earned it with 30 usages; these do not. */ /* --lh-normal lives with the density tokens further down; declaring it here too left a dead 1.5 that anyone reading this scale would have computed with. */ --lh-loose: 1.7; /* --- SPACING: on a 4px base ---------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* --- DENSITY (the default is editorial) ----------------------------- */ --density-cell-y: var(--s3); --density-cell-x: var(--s4); --density-body: var(--fs-base); /* Four in-page section gaps (the homepage blocks, the detail page's "similar products") now use this token. It had 0 usages before; pages wrote the same gap by hand as var(--s9). The difference: it is now tied to the DENSITY system, so a page taking .density-tight (today only the admin) also tightens its section gaps to 32px with nothing edited by hand. */ --density-section: var(--s9); --density-grid: 22px; /* --- PAGE LAYOUT ------------------------------------------------------- Measured: the top spacing carried 8 different values (24/32/40/48/56/72/ 88px), the content width 11 different limits, and the sticky offset 3 different values (76/84/96) under the same 68px header. None of it was accidental — each page had set its own rhythm — but together the site read as "14 different buildings on one skeleton". TOP SPACING — two kinds of page, two values: --page-top 64px — single column, forms that breathe (login, password-*, apply, production, checkout-pending) --page-top-tight 48px — grid/table pages whose content starts straight away with a sticky element (listing, detail, cart, checkout, account, order) The detail page went 24→48 (it was flagged as the tightest page top on the site); cart 32→48, checkout 40→48. The listing was already at 48. CONTENT WIDTH — four roles: --container-narrow 380px — authentication (reading one field deep) --container-form 520px — multi-field forms (apply, production, popup) --container-medium 860px — account/order: list plus table content --container-wide 1100px — checkout: form plus side summary, two columns produkcja went 560→520 (a structural copy of apply, with no reason to sit at a different width); order 760→860 (the same "my account" flow and row rhythm as account). --max-width (1680, the shell) stays outside this — it is the site skeleton, not a page container. STICKY OFFSET — the 68px header (sticky, .hd-in height) plus one breath: */ --page-top: var(--s8); --page-top-tight: var(--s7); --container-narrow: 380px; --container-form: 520px; --container-medium: 860px; --container-wide: 1100px; --sticky-top: calc(68px + var(--s4)); /* --- OTHER ---------------------------------------------------------- */ --card-ratio: 3 / 4; /* product card image */ /* --- MOTION: TRAVEL SETTLES, TINT CROSSES ---------------------------- Typography was given a thesis (sans narrates, mono measures) and colour was given a rule (signal only). Motion had neither: every one of the storefront's transitions ran on the bare `ease` keyword, i.e. the browser default, so every gesture on the page was generically web-shaped. Two curves, because there are two kinds of change and they read differently: --ease-travel anything that MOVES — a pill lifting, a panel drifting in, a photograph pushing forward. Leaves quickly and takes its time arriving (.2,.7,.3,1): weight settling, not a spring. Cloth falls this way; a rubber band does not, which is why there is no overshoot past 1. --ease-tint anything that only CHANGES COLOUR OR OPACITY — a link, a ground, a poster handing over. Nothing travels, so there is nothing to settle: symmetric in, symmetric out (.4,0,.2,1). THE TOKENS ARE THE CURVE ONLY, not the duration: the two duration tokens below already carry that, and a consumer needs to combine them freely (the header runs .3s, the photographs 1.2s). Reduced motion is unaffected — the blanket reset zeroes the duration and an easing curve on a .01ms transition is unobservable, so nothing new has to be written for that preference. */ --ease-travel: cubic-bezier(.2, .7, .3, 1); --ease-tint: cubic-bezier(.4, 0, .2, 1); --transition: .25s var(--ease-tint); --transition-slow: .55s var(--ease-tint); --max-width: 1680px; --z-top: 40; --z-layer: 100; } /* Admin: same language, tight density. A warehouse operator sees 20 rows on screen, not 6. */ .density-tight { --density-cell-y: var(--s2); --density-cell-x: var(--s3); --density-body: 12px; --density-section: var(--s6); --density-grid: 12px; --lh-normal: 1.35; } /* Accessibility §25.5 — never ASSUMED out of scope; the basics apply regardless */ *:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================= BASE COMPONENT CLASSES ========================================================================= */ /* .micro/.label/.divider were DELETED: defined here but with zero storefront usage. The same names exist separately in admin.css with real usage, and they do not collide because the admin does not load this file. The storefront's own uppercase/letter-spacing consolidation already happened at token level (--ls-micro/--ls-label), so no class-level copy was needed. If a new measurement ever shows one is, it comes back. */ /* THE DATA VOICE — every piece of text carrying a measurable value. Mono and tabular-nums come together: digits line up in columns, and SKU and LOT series do not shift from row to row. Use the class inline, or var(--font-data) directly inside a component. */ .data { font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* Full width, outlined, uppercase — the ADD button from the reference */ .btn { display: block; width: 100%; padding: var(--s4); border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-small); letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer; transition: background var(--transition), color var(--transition); } .btn:hover { background: var(--ink); color: var(--bg); } /* THE PRIMARY BUTTON IS DARK GLASS. All 12 primary actions in the storefront are fed from here — no markup was touched, the recipe changed in one place. A second "filled glass" variant was DELETED once this became the standard: adding a variant where nothing needs substituting is ceremony, not architecture. One recipe, one name. OPACITY .88 — .60 WAS TRIED ON SCREEN AND REJECTED (it turned into a grey smudge on a white card and read fainter than the step circles beside it). White-text contrast: flat #000 (before) : 21:1 .88 glass (now) : 14.15:1 — twice the AAA (7:1) threshold .60 glass (rejected): 5.07:1 So the "glass" decision costs nothing in AA/AAA here; it only softens the perceived hardness. RADIUS --r-pill: .btn alone was square-cornered, but the WHOLE glass family (hero CTA, chips, filter pills, pagination) is a pill. A square primary button would leave two button geometries on one page. HOVER: the colour used to invert (white ground, black text). On a glass surface an inversion reads as "the glass disappearing", so instead the glass DARKENS — same material, more of it. .btn (outlined, secondary) KEEPS its inversion: it is not glass, it is a line on paper. 🔴 THE SKIN BELOW IS NO LONGER WHAT EITHER SURFACE RENDERS (15 Sep 2026): the storefront reads `body:not(.density-tight) .btn--primary` further down (solid ink) and the panel reads admin.css. What this rule still supplies to both is the GEOMETRY — `border-radius` — so it is not dead code; the paragraph above is the history of the ground, not of today's. */ .btn--primary { background: rgba(10, 14, 24, .88); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border-color: var(--glass-border); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--bg); } .btn--primary:hover { background: rgba(10, 14, 24, .96); color: var(--bg); } .btn--quiet { border-color: var(--hairline); color: var(--muted); } .btn--quiet:hover { border-color: var(--ink); background: var(--bg); color: var(--ink); } .btn:disabled { border-color: var(--hairline); color: var(--faint); cursor: not-allowed; background: var(--bg); } /* Status badge — colour is functional ONLY here */ .badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px var(--s2); font-size: 9px; letter-spacing: var(--ls-label); text-transform: uppercase; border: 1px solid currentColor; } .badge--signal { color: var(--signal); background: var(--signal-soft); } .badge--warning { color: var(--caution); background: var(--caution-soft); } .badge--positive { color: var(--ok); background: var(--ok-soft); } .badge--quiet { color: var(--muted); background: transparent; border-color: var(--hairline); } /* Glass (liquid glass) — the central surface. The homepage's proven recipe (blur + saturate + inset highlight), bound to global tokens and respectful of the reduced-transparency preference. MEASURED: this class was defined but had 0 markup usages, while the same 5-line recipe (background + backdrop-filter + border + radius + shadow) had been copied by hand into 12 places with three DIFFERENT ground opacities: --glass-bg (dark, .30) — the homepage's 6 button surfaces --glass-bg-light (.55) — the header after scroll, the price card --glass-bg-reading (.65) — mobile menu, filter panel, cart summary, mega panel (fixed/sticky surfaces with content scrolling behind them) A fourth ground, --glass-bg-clear (.50), was added later for the one surface that sits on a scrim and can therefore afford it: the welcome popup. Apart from the ground they are IDENTICAL: same blur, same saturate, same border, same inner highlight. Three modifiers keep that in one definition — the ground changes, the physics do not. */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: 0 10px 34px rgba(0, 0, 0, .34), inset 0 1px 0 var(--glass-highlight); } .glass--light { background: var(--glass-bg-light); } /* Reading glass plus THE INK THAT BELONGS TO THAT SURFACE. --muted is redefined HERE: because custom properties cascade, EVERY `color: var(--muted)` consumer inside this surface is automatically lifted to --ink-soft (#333) — filter panel headings, the cart summary note, the popup text, the close button. One line, no file sweep, and anything added to this surface tomorrow gets the right ink on its own. WHY THIS RATHER THAN EDITING EVERY FILE: --muted itself is not wrong — at 5.74:1 on white paper it is a correct secondary tone. What is wrong is using it on a TRANSLUCENT surface. The rule belongs to the context, not the element, so it is defined in the context. */ .glass--reading { background: var(--glass-bg-reading); --muted: var(--ink-soft); } /* The same trade one step further: less ground, more ink. It is a FAMILY MEMBER rather than two hand-written lines on .pop-card because layout.css loads AFTER this file — a background written there would win on source order and silently defeat the prefers-reduced-transparency fallback below, which nothing measures. */ .glass--clear { background: var(--glass-bg-clear); --muted: var(--ink); } /* Glass that exists ONLY while the surface is the active one. A product card is IN the flow — it floats over nothing — so permanent glass would be a physics lie, and 20 backdrop-filters on one scrolling grid is the most expensive paint a browser does; on hover exactly ONE is painted. The hairline is drawn with an inset shadow rather than a border so the resting box has no extra pixel. */ .glass--onhover { transition: background var(--transition), box-shadow var(--transition); } /* THE CARD REFRACTS LIKE EVERYTHING ELSE (user decision, 7 Sep 2026: "kartlar tam olmadı"). It used to answer the pointer with the RESTING recipe — 20px of blur and 180% saturation — which is a frosted pane, not a lens: the card went milky instead of bending the page behind it. It now reads the same two tokens the buttons do, over the clear ground so there is something to see through. The ink lift stays: --muted on a translucent surface measures 2.26:1 (AccessibilityTest). */ /* `:focus-within` joined the pair on 15 Sep 2026: the catalogue tile became a
wrapping the link and the quick-add form, and a div cannot take focus — so a keyboard reader lost the lift the mouse still got. The other two grids draw the tile as an and are unaffected. */ .glass--onhover:hover, .glass--onhover:focus-visible, .glass--onhover:focus-within { background: var(--glass-bg-clear); backdrop-filter: var(--glass-refract); -webkit-backdrop-filter: var(--glass-refract); box-shadow: var(--glass-rim); --muted: var(--ink-soft); } /* The reduced-transparency preference. Every consumer used to write its OWN fallback block (repeated in 5 places); it is centralised now. A single fallback colour would NOT do: dropping the homepage's over-image buttons to --bg (white) would leave bare white boxes on the photo, so the measured real fallbacks (rgba(12,14,18,.72) / #fff) are kept rather than guessed. */ @media (prefers-reduced-transparency: reduce) { .glass { background: rgba(12, 14, 18, .72); backdrop-filter: none; -webkit-backdrop-filter: none; } .glass--light { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .glass--reading { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .glass--clear { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .glass--onhover:hover, .glass--onhover:focus-visible { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ========================================================================= THE BUTTON FAMILY Measured: .btn was used in 13 places, against 18 SEPARATE hand-written button/link/pill styles, each inventing its own size/tracking/padding combination. Four variants collect them; none is a new visual language, they are extensions of the existing .btn: .btn--auto frees .btn from full width (inline, automatic width) .btn--text a borderless text link .btn--glass a large glass CTA (dark glass, white text) .btn--glass-clear its clear twin (ink text) — the secondary action beside it .btn--glass-sm a SMALL glass pill (the decorative badge-button over an image) .btn--circle WAS DELETED. It was the hero arrows and the pause circle; the arrows went with the banner slideshow the film replaced, and the pause control had already gone by the user's decision. Zero consumers measured in the storefront markup, so it is dead code, not a spare part. ========================================================================= */ .btn--auto { display: inline-block; width: auto; padding: var(--s3) var(--s6); } .btn--text { display: inline-block; background: 0; border: 0; padding: 0 0 2px; font: inherit; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--hairline); transition: color var(--transition), border-color var(--transition); } .btn--text:hover { color: var(--ink); border-color: var(--ink); } /* Only .btn carried a disabled state, so these three answered the attribute with no visible change at all — a control that cannot be pressed and does not say so is a trap. */ .btn--text:disabled { color: var(--faint); border-color: var(--hairline); cursor: not-allowed; } .btn--text:disabled:hover { color: var(--faint); border-color: var(--hairline); } /* THE LARGE GLASS CTA IS BACK, AND IT IS NOW THE ONLY CTA THE HOMEPAGE HAS (user decision, 6 Sep 2026: "no black button, the components are glass"). Two members, one geometry: the pair sits side by side in the hero, so a square corner beside a pill would read as two kinds of control. .btn--glass dark glass, white text — the primary action .btn--glass-clear clear glass, ink text — the secondary action MEASURED on the hero's own ground (--surface #f4f4f4), which is the worst case because it is the lightest ground either button sits on: dark glass .60 -> effective #686A6F -> white text 5.38:1 passes AA clear glass .50 -> effective #F7F7F6 -> --ink 19.9:1 passes AAA The clear member needs a DARK hairline: --glass-border is white at .48, which is invisible on paper, and a glass button with no visible edge is not a button. Its shadow is lighter than the family's for the same reason — it lies on the page, it does not float over a photograph. */ .btn--glass, .btn--glass-clear { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--s4) var(--s7); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; cursor: pointer; width: auto; transition: transform .3s var(--ease-travel), background .3s var(--ease-tint), backdrop-filter .3s var(--ease-tint), -webkit-backdrop-filter .3s var(--ease-tint), box-shadow var(--transition); } /* THE DARK MEMBER LOST MOST OF ITS BLACK — user decision, 7 Sep 2026: "soldaki butonu da siyah rengi oldukça düşür ama tam düşürme çok hafif alacalı olmasını istiyorum". The ground went .60 -> .34, which is not a tint change but a CONTRAST one, and the consequence is not optional: MEASURED over the field's lightest stop, white type on .34 is 2.68:1 — unreadable — while ink on it is 7.8:1. So the label turned to ink. White type is only legal down to about .55 (4.9:1), and that was shown on screen as variant A and rejected as not light enough. THE MOTTLE IS THE `background-image`, not a texture file: one diagonal gradient with four stops, none stronger than .22, so the pill reads as glass of uneven thickness rather than as a flat slab of tint. It sits ON the translucent fill, so the field still shows through underneath. NO DROP SHADOW: the family's .34 shadow is sized for glass floating over a photograph; on the page's own field it pooled under the pill and made it read opaque. The `.glass` family sets one, so this declaration must OVERRIDE it — deleting the line brings it back. What stays is the INSET highlight: the lit top edge, i.e. the glass itself. */ .btn--glass { color: var(--ink); background: rgba(10, 14, 24, .34); background-image: linear-gradient(118deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 36%, rgba(10, 14, 24, .07) 70%, rgba(255, 255, 255, .16)); border-color: rgba(10, 14, 24, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); } /* HOVER REFRACTS THE PAGE INSTEAD OF HIDING IT (user decision, 7 Sep 2026). The pair used to answer the pointer by adding MORE of its own ground — the dark member to .74, the clear one from .50 to .72 white — i.e. the glass got more opaque the moment you reached for it, which is why it read as colourless. Glass does the opposite: it thins, and the colour behind it comes through bent and brighter. The mechanism is the backdrop filter, not the fill: LESS blur so the field's shape reads through, MORE saturation so its blue arrives as colour rather than as grey. The dark member's FILL DOES NOT MOVE — measured, white text on .60 over the page's lightest stop is 5.6:1, and .50 would drop it to 4.23:1, below AA. So the dark one refracts without thinning; only the clear one, which carries ink, can also thin. */ .btn--glass:hover, .btn--glass:focus-visible, .btn--glass-clear:hover, .btn--glass-clear:focus-visible { backdrop-filter: var(--glass-refract); -webkit-backdrop-filter: var(--glass-refract); box-shadow: var(--glass-rim); transform: translateY(-2px); } .btn--glass:hover { background: rgba(10, 14, 24, .26); } /* PRESSED AND FOCUSED, NOT ONLY HOVERED (7 Sep 2026). MEASURED: the storefront carried no `:active` rule at all — not one, in any css file or blade. On a phone `:hover` never fires, so the two controls the whole page is built around acknowledged nothing between the tap and the navigation; on a slow connection that is the moment a buyer taps twice. The press SINKS the pill (back to 0, shadow tightened) rather than lifting it: the glass is being pushed into the page, which is the one gesture a translucent surface can make honestly. `:focus-visible` gets the hover state so a keyboard reader sees the same button a mouse reader sees, not only the global outline ring. Both grounds step AWAY from their paper, so contrast rises rather than falls. */ .btn--glass:focus-visible { background: rgba(10, 14, 24, .26); } .btn--glass-clear:focus-visible { background: rgba(255, 255, 255, .3); } .btn--glass:active, .btn--glass-clear:active { /* The press is the ground stepping deeper plus the lift coming back down. The clear member's own lift tightens with it; the dark member has none to tighten. */ transform: translateY(0); } .btn--glass-clear:active { box-shadow: 0 2px 8px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .8); } /* The press still steps AWAY from the paper — deeper ink, higher contrast, never a fade. */ .btn--glass:active { background: rgba(10, 14, 24, .46); } .btn--glass-clear:active { background: rgba(255, 255, 255, .86); } /* NO `:disabled` FOR THE GLASS FAMILY, and that is a measurement rather than an omission: every consumer is an , an or a (hero's pair, the steps CTA, the two collage badges), and `:disabled` matches none of those — it is a form-control pseudo-class. A rule written here in this round was deleted the same day: six selectors that could not match anything, defending a state the family cannot enter. If one of these ever becomes a