/* ========================================================================== Zamorins — tenant stylesheet (#2260) -------------------------------------------------------------------------- Served to this client's storefronts ALONE, from /cms/assets/theme.css → /api/public/storefront/{slug}/assets/theme.css, and imported into BOTH branch tenants (zamorins-whitley-bay, zamorins-huddersfield) because the two branches are one design. WHAT THIS FILE IS FOR. The full-document pages are CMS-rendered from this client's own templates. The basket, the checkout, the auth screens and the account area are SHARED React surfaces: they draw their buttons, fields, labels and chips from the `lm-*` classes in the storefront's `app/globals.css`, whose neutral platform defaults are a rounded, sentence- case, slate-accented control set. This client's prototype (`templates/zamorin/Zamorins v3.dc.html`) is none of those things — every CTA is a 52px uppercase PARALLELOGRAM at .26em tracking, every field is a bottom rule with no box, every corner is square, and the type is Marcellus / Cormorant Garamond / Mulish. SO THIS OVERRIDES THE RULES, NOT ONLY THE TOKENS. A custom property can only change a value a rule already reads; it cannot change one the rule hard-codes. `.lm-btn` hard-codes `border-radius: 999px` and `font-weight: 500`, so re-pointing tokens alone would ship this client's colours on somebody else's shapes — the exact failure the platform's standing rule exists to prevent. ISOLATION. Nothing here reaches another storefront: `globals.css` is untouched, and this sheet is fetched per slug. Every other tenant renders byte-identically to before. PROVENANCE. Every value below is measured from this client's own prototype, and each rule cites where. Nothing is borrowed from another client's sheet; where the prototype draws no such control (the account tabs, the branch pill's open menu) the shape is derived from THIS client's own tokens and says so. FONTS are loaded by this tenant's own chrome (`site-layout`), whose links the storefront hoists onto the React routes too. No @import here: it would be a second, render-blocking hop for a file the chrome already has. DELIBERATELY NOT DECLARED — each one would be dead CSS or an outranked accessibility guard: • `.lm-card`, `.lm-divider`, `.lm-spinner`, `.lm-mono` and every `.lm-btn-*` colour variant — all resolve entirely through tokens this file already re-points (`--lm-surface`, `--lm-line`, `--lm-radius`, `--lm-saffron`), so a rule here would change nothing. • `border-radius` on the fields — `.lm-input` reads `var(--lm-radius-sm)`, which is 0 below. • `font-size` on the fields under 760px — `globals.css` pins 16px there with `!important` so iOS does not zoom the viewport on focus. Matching the prototype's 15px there would mean out-importanting an accessibility guard to win a pixel. • `.lm-serif { font-weight }` — Marcellus ships one weight (400), which is what the shared rule already sets and what every heading in the prototype uses. ========================================================================== */ :root { /* ── This client's palette, as its prototype writes it ────────────────── bone the page (body background, prototype:17) ink body copy and filled CTAs (#171512) terracotta the primary accent (links, rules, the progress bar) saffron the secondary accent (prices, counts on dark) gold the micro-caps label colour (every `Order type` / `Name` label) sage commit + success (the Pay button, the check ring) */ --zm-bone: #F2EFE6; --zm-ink: #171512; --zm-terracotta: #B3401E; --zm-terracotta-deep: #8A2E12; --zm-saffron: #D89216; --zm-gold: #A98D4B; --zm-sage: #5B6B4A; --zm-sage-deep: #4A583C; /* Rules and washes, all derived from the ink so the polarity can never disagree with the page. The three weights are the prototype's own: .16 for a divider, .25 for a control boundary, .35 for a field's bottom rule. */ --zm-rule-soft: rgba(23, 21, 18, .16); --zm-rule: rgba(23, 21, 18, .25); --zm-rule-strong: rgba(23, 21, 18, .35); --zm-wash: rgba(23, 21, 18, .06); --zm-display: Marcellus, 'Times New Roman', Times, serif; --zm-accent-face: 'Cormorant Garamond', Georgia, serif; --zm-sans: Mulish, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* The parallelogram. One declaration, quoted by every CTA below, so the shape is stated once and cannot drift between two buttons. */ --zm-cut: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); /* ── Bridge: the shared `--lm-*` slots, in this client's palette ──────── Every token a shared rule reads is declared here. One left behind would resolve to the platform's neutral slate ON THIS CLIENT'S STOREFRONT — which is how a live shop ends up with a stray grey-blue button. */ --lm-bg: var(--zm-bone); --lm-bg-1: #EBE7DB; /* raised band — bone, one step down */ --lm-bg-2: #E4DFD1; --lm-surface: var(--zm-bone); /* the prototype's cards are ruled, not filled */ --lm-surface-hi: #EBE7DB; --lm-ink: var(--zm-ink); --lm-ink-dim: rgba(23, 21, 18, .72); /* the prototype's own body copy */ --lm-ink-faint: rgba(23, 21, 18, .55); /* and its own captions */ --lm-line: var(--zm-rule-soft); --lm-line-strong: var(--zm-rule-strong); /* The accent slot is historically named after another client's colour; the NAME is load-bearing across the shared CSS, so it stays and the VALUE is this client's terracotta. */ --lm-saffron: var(--zm-terracotta); --lm-saffron-soft: var(--zm-terracotta-deep); --lm-accent-tint: rgba(179, 64, 30, .08); --lm-on-accent: var(--zm-bone); --lm-spinner-track: rgba(179, 64, 30, .18); --lm-hover-wash: var(--zm-wash); /* Destructive stays terracotta, which is what the prototype's own error line uses (`co.error`, v3:911). `--lm-danger` is stated rather than left to the shared `var(--lm-ember)` default so a future re-point of one cannot silently move the other. */ --lm-ember: var(--zm-terracotta); --lm-danger: var(--zm-terracotta); --lm-leaf: var(--zm-sage); --lm-gold: var(--zm-gold); --lm-cream: var(--zm-bone); --lm-paper: var(--zm-bone); --lm-paper-ink: var(--zm-ink); /* Square, everywhere. The prototype rounds exactly two things — the check ring on the confirmation and the 5px location dot — and both are circles drawn by their own rules, not by these tokens. */ --lm-radius: 0; --lm-radius-sm: 0; --lm-radius-lg: 0; --lm-sans: var(--zm-sans); --lm-serif: var(--zm-display); /* This client licenses no mono face. Its micro-caps ARE Mulish, tracked. */ --lm-mono: var(--zm-sans); --lm-shadow-sm: 0 1px 2px rgba(23, 21, 18, .08); --lm-shadow: 0 10px 30px rgba(23, 21, 18, .10); --lm-shadow-lg: 0 24px 64px rgba(23, 21, 18, .14); } /* ========================================================================== React surface layer — the `lm-*` primitives, in this client's shapes ========================================================================== */ /* Buttons. The prototype's CTA, counted across every button in it: a parallelogram cut 9px off each end, 52px tall, 11px/600 Mulish uppercase at .26em, filled ink with bone type (v3:133, 911, 1023). `min-height` IS declared here, unlike on other tenants' sheets, and the reason is arithmetic rather than taste: `globals.css` raises `.lm-btn` to 48px below 760px for the tap target, and 52px clears that — this sheet loads later, so the larger value is what a phone renders. Anything under 48 would have to stay out of this file. */ .lm-btn { clip-path: var(--zm-cut); border-radius: 0; min-height: 52px; padding: 0 32px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .26em; } /* The prototype's compact action (v3:261) — same cut, 44px, .24em. Still above the 44px minimum target, and above the 40px `globals.css` gives `-sm` on a phone. */ .lm-btn-sm { min-height: 44px; padding: 0 20px; font-size: 10.5px; letter-spacing: .24em; } /* Its commit button (v3:911) — 54px, .28em. */ .lm-btn-lg { min-height: 54px; padding: 0 40px; font-size: 11px; letter-spacing: .28em; } /* Fields. The prototype has no boxed input anywhere: every one of its 20 text controls is a bottom rule on transparent, 15px Mulish, 46px tall, padded `8px 2px` (v3:626-639, 833-856, 943-952). Written as LONGHANDS on purpose. A `var()` inside a `border` SHORTHAND leaves pending-substitution longhands that outlive a later `border-color`, which is why the platform's own `.lm-input:focus { border-color }` has always been inert. Longhands keep the focus rule below actually reaching the element. */ .lm-input, .lm-select, .lm-textarea { border: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--zm-rule-strong); background: transparent; min-height: 46px; padding: 8px 2px; font-size: 15px; font-weight: 400; /* The UA gives