/* ========================================================================== Sarir Mode — design tokens Two layers, deliberately separated: Layer 1 — PRIMITIVES. Facts from the Brand Book. A primitive changes only when the Brand Book changes. Components never reference these directly. Layer 2 — SEMANTICS. Design decisions ("the CTA is Vin Cuit"). This is the only layer components are allowed to use. Change a decision in layer 2. Change the brand in layer 1. ========================================================================== */ :root { /* --------------------------------------------------------------------- LAYER 1 — BRAND PRIMITIVES (Brand Book FA v02, exact values) --------------------------------------------------------------------- */ --c-black: #111111; /* Midnight Black — core */ --c-stone: #8C8780; /* Stone Gray — core */ --c-brown: #B08F79; /* Bakery Brown — secondary */ --c-white: #FFFFFF; /* White — supporting */ --c-berber: #D8CBB8; /* Berber — supporting */ --c-vincuit: #B27A64; /* Vin Cuit — accent, CTA only */ --c-camping: #67756C; /* Camping Trip — accent, sustainability only */ /* Tints at 80 / 50 / 30 %, computed — never hand-written hex */ --c-black-80: color-mix(in srgb, var(--c-black) 80%, #FFFFFF); --c-black-50: color-mix(in srgb, var(--c-black) 50%, #FFFFFF); --c-black-30: color-mix(in srgb, var(--c-black) 30%, #FFFFFF); --c-stone-80: color-mix(in srgb, var(--c-stone) 80%, #FFFFFF); --c-stone-50: color-mix(in srgb, var(--c-stone) 50%, #FFFFFF); --c-stone-30: color-mix(in srgb, var(--c-stone) 30%, #FFFFFF); --c-brown-80: color-mix(in srgb, var(--c-brown) 80%, #FFFFFF); --c-brown-50: color-mix(in srgb, var(--c-brown) 50%, #FFFFFF); --c-brown-30: color-mix(in srgb, var(--c-brown) 30%, #FFFFFF); --c-berber-80: color-mix(in srgb, var(--c-berber) 80%, #FFFFFF); --c-berber-50: color-mix(in srgb, var(--c-berber) 50%, #FFFFFF); --c-berber-30: color-mix(in srgb, var(--c-berber) 30%, #FFFFFF); --c-vincuit-80: color-mix(in srgb, var(--c-vincuit) 80%, #FFFFFF); --c-vincuit-50: color-mix(in srgb, var(--c-vincuit) 50%, #FFFFFF); --c-vincuit-30: color-mix(in srgb, var(--c-vincuit) 30%, #FFFFFF); --c-camping-80: color-mix(in srgb, var(--c-camping) 80%, #FFFFFF); --c-camping-50: color-mix(in srgb, var(--c-camping) 50%, #FFFFFF); --c-camping-30: color-mix(in srgb, var(--c-camping) 30%, #FFFFFF); /* Type families. Overridden per language further down. */ --font-primary: "Manrope", "Segoe UI", system-ui, sans-serif; --font-editorial: "Cormorant", Georgia, "Times New Roman", serif; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* Yekan Bakh is variable in BOTH weight and width. Its default width is 62.5% (extra condensed), so normal width must be stated explicitly. */ --font-stretch-normal: 100%; /* Type scale — fluid between mobile and desktop */ --fs-2xs: 0.6875rem; /* 11px — kickers, labels */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.05rem + 0.80vw, 1.75rem); --fs-xl: clamp(1.75rem, 1.30rem + 1.80vw, 2.75rem); --fs-2xl: clamp(2.25rem, 1.50rem + 3.00vw, 4.00rem); --fs-3xl: clamp(3.00rem, 1.60rem + 5.60vw, 6.50rem); /* hero only */ /* The statement pair, measured on the reference in phase 7b. Neither lands on the ladder above — --fs-lg tops out at 28px and --fs-xl at 44px — and they are tokens rather than literals for the usual reason: a number that appears in two rules is a number that will disagree with itself. */ --fs-statement: 2rem; /* 32px — the opening statement of a band */ --fs-statement-sm: 1.5rem; /* 24px — the supporting texts under it */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.65; --lh-loose: 1.90; /* 42px on 32px and 30px on 24px, measured. Two different ratios, so they cannot come from one ladder step — but they are kept UNITLESS rather than written as 2.625rem/1.875rem so that Persian and Arabic can open them up below. An absolute line-height would set Persian diacritics into the line above at this size. Same precedent as --lh-snug in phase 6. */ --lh-statement: 1.3125; --lh-statement-sm: 1.25; --tracking-display: -0.015em; --tracking-normal: 0; /* 0.8px at 20px, measured on the reference statement band. Half of -wide and it has to exist: at 0 the statement reads as body copy, at 0.08em it reads as a kicker, and it is neither. */ --tracking-subtle: 0.04em; --tracking-wide: 0.08em; --tracking-kicker: 0.22em; /* Spacing ladder — never invent a value outside this ladder */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: clamp(4rem, 10vw, 12rem); /* between major sections */ /* Layout */ --container-max: 82.5rem; /* 1320px */ --container-narrow: 46rem; /* ~65 characters of running text */ --container-statement: 64rem; /* 1024px — the homepage statement column */ --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 4.5rem; /* The phone header, below 64rem — phase 9j §A. Both are MEASUREMENTS. --header-side is the room reserved on EACH side of the wordmark so it can be centred: the language codes need 78.15px (English; 76.94 in Persian and Arabic) at the tightest spacing that keeps two adjacent links 24px apart, WCAG 2.5.8. A fourth language widens the codes past it, and then the tools column grows and the wordmark goes off-centre rather than being covered. --logo-min is the Latin wordmark's legibility floor, "about 140px" in CLAUDE.md: below it the hairline strokes break up. Where centring and the floor cannot both hold — under 356px — the floor wins; under about 300px the floor gives way as well. The menu button and the codes never do. */ --header-side: 5rem; --logo-min: 8.75rem; /* The inner-page sub-navigation, which sticks directly beneath the header. */ --subnav-h: 3.5rem; /* How far an in-page anchor must clear the top of the viewport: the exact height of the sticky chrome above it. DERIVED, never typed as 8rem — when two numbers depend on each other, write the relationship, or the day the header changes height every anchor on the site silently lands under it. Both terms are also the rendered block-size of their own element, so the token and the pixels cannot drift apart. */ --scroll-offset: calc(var(--header-h) + var(--subnav-h)); /* 160px between every band on the homepage, measured, and deliberately ONE value rather than a clamp. The whole rhythm of the page is that the gap never changes: a fluid gap would make the bands feel differently spaced at different widths, which is the opposite of what was measured. Same one-number-in-one-place rule as --rail-item. */ --band-gap: 10rem; /* 80px between the blocks INSIDE one brand, against 160px between brands. Derived, not typed: the whole point of the pair is that the tighter gap is half the looser one, and the eye reads that difference as "still the same brand". Write the relationship and the two cannot drift. */ --band-gap-tight: calc(var(--band-gap) / 2); /* One rail item, measured at 640px on inditex.com. The translate stride is exactly this — see .sarir-header__track in main.css. */ --rail-item: 40rem; /* Structure — Brand Book: 2px corner radius, hairline rules */ --rule-width: 1px; --radius: 2px; --icon-stroke-corporate: 2; /* Layer 01 */ --icon-stroke-fashion: 1.5; /* Layer 02 */ /* Motion */ --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* The header menu's own pair, both measured on inditex.com: the rail slide, the section fade and the hover colour change all run on these. */ --dur-menu: 500ms; --ease-menu: cubic-bezier(0.17, 0.17, 0.5, 1); /* --------------------------------------------------------------------- LAYER 2 — SEMANTIC TOKENS. Components use only these. --------------------------------------------------------------------- */ --color-bg: var(--c-white); --color-bg-warm: var(--c-berber-30); --color-bg-inverse: var(--c-black); --color-text: var(--c-black); /* SECONDARY TEXT IS MIDNIGHT BLACK AT 60%, NOT STONE GRAY — phase 9. This was var(--c-stone). Stone Gray on White is 3.56:1, and this file's own contrast table allows that pair for LARGE text and rules only. Phase 9 enumerated every colour pair actually painted, from computed styles, and all seven text uses of this token were below their WCAG threshold at the size they are set: the 11px overlay close label and brand straplines, the 12px copyright, the 16px overlay submenu, the architecture lists, and the overlay's own rows at 20px / weight 300 on a phone, which is not "large". 60% alpha over White paints #707070 at 4.94:1 — measured — which passes at every size. It is not a new colour: it is the same Midnight-Black-at- 60% the site already uses for every inactive peer under the 60% rule, so "secondary" and "inactive" now read as one quieter voice rather than two slightly different greys. Stone Gray stays exactly where the table allows it: rules (--color-rule-strong) and structure. THE COST, stated for Sarir: the warm grey of Stone Gray is gone from small text, including the brand straplines. The alternative that keeps the warmth is Stone Gray at 24px or larger, which is not a size a strapline or a copyright line can be. */ --color-text-muted: color-mix(in srgb, var(--c-black) 60%, transparent); --color-text-inverse: var(--c-white); --color-text-on-warm: var(--c-black); /* A hover STATE, not a new brand colour: alpha over whatever ground is behind it, so it works on White, Berber and Midnight Black alike. The Brand Book's 80/50/30 tints are opaque mixes with white and cannot do that. Measured at 60% on inditex.com. */ --color-text-dim: color-mix(in srgb, var(--c-black) 60%, transparent); --color-rule: var(--c-stone-30); --color-rule-strong: var(--c-stone); --color-cta: var(--c-vincuit); --color-cta-hover: var(--c-brown); --color-focus: var(--c-vincuit); --color-graphic: var(--c-brown); /* brand line-and-node system */ --color-sustain: var(--c-camping); /* sustainability content only */ /* TEMPORARY — the ink of the woven placeholder that stands in for photography. Goes with assets/icons/placeholder.svg. It is a custom property rather than currentColor on purpose; the reason is written on the SVG itself. */ /* Full Stone Gray, not a tint. At 50% it measured 1.55:1 against the Berber ground — present in a screenshot, gone at reading distance. Stone on Berber-30 is 3.06:1: clearly a texture, still clearly not a photograph. */ --weave-ink: var(--c-stone); } /* --------------------------------------------------------------------- Language-specific type. Switched on :lang(), never a second stylesheet. --------------------------------------------------------------------- */ :lang(fa) { --font-primary: "Yekan Bakh FaNum", "Yekan Bakh", Tahoma, sans-serif; --font-editorial: "Yekan Bakh FaNum", "Yekan Bakh", Tahoma, sans-serif; --lh-normal: 1.85; /* Persian needs more leading than Latin */ --lh-snug: 1.55; --tracking-kicker: 0.12em; /* Arabic script does not letterspace like Latin */ /* Zero, not merely reduced. A kicker is three words and survives being opened up; a whole paragraph of joined script does not — the tracking lands between letters that are meant to be connected. */ --tracking-subtle: 0; /* The Latin ratios are tight enough that Persian ascenders and diacritics would touch the line above. This is why the statement line-heights are unitless. */ --lh-statement: 1.55; --lh-statement-sm: 1.5; } :lang(ar) { --font-primary: "Yekan Bakh", Tahoma, sans-serif; --font-editorial: "Yekan Bakh", Tahoma, sans-serif; --lh-normal: 1.85; --lh-snug: 1.55; --tracking-kicker: 0.12em; --tracking-subtle: 0; --lh-statement: 1.55; --lh-statement-sm: 1.5; } /* font-family is declared once on , so descendants inherit its RESOLVED string, not the var() reference. Redefining --font-primary above therefore never reaches a Persian or Arabic element inside an otherwise-Latin page, and YekanBakhFaNum is never applied. Re-declaring font-family here forces var() to be re-substituted with each element's own --font-primary. */ :lang(fa), :lang(ar) { font-family: var(--font-primary); }