/* Theme Name: Seamless Theme URI: https://seamlesssolutionsbd.com Description: Seamless Solutions storefront. A standalone theme — no parent, no framework, nothing inherited. Design system: "Signal" (see seamless-solutions/design/README.md). Author: Seamless Solutions Version: 1.12.0 Text Domain: seamless */ /* ═══════════════════════════════════════════════════════════════════════ ⚠️ THE HISTORICAL NOTE BELOW IS NO LONGER TRUE, and is kept because it explains why the file is shaped this way. Phase A ended: chrome.css, signal.css and home.css all consume these tokens, the font faces are all referenced, and `seamless_enqueue_chrome()` loads this file FIRST on every page precisely because everything else depends on it. PHASE A — SKELETON. This file deliberately renders NOTHING yet. It declares design tokens and font faces only. Custom properties applied to nothing, and @font-face declarations nothing references, produce zero visual change and download zero bytes — browsers fetch a webfont only when a rule actually uses it. That is what makes the first deploy a true no-op: activate this theme on live and the site looks identical, which proves the deploy path before anything is riding on it. Bump the Version header above on EVERY css change or browsers serve a stale ?ver=. ═══════════════════════════════════════════════════════════════════════ */ /* ── Signal design system ─────────────────────────────────────────────── Locked 2026-08-14. Full rationale in design/README.md. GROUND RETUNED 2026-08-31 [FOUNDER]: #FBF7EC -> #FAF8F2, cream to Paper. The cream read "a little too creamy". Warmth — how far red sits above blue — drops 15 -> 8, which halves the tint while keeping the ground perceptibly off-white. Why not go further to a near-neutral (#F8F8F6 was the other candidate): that sits dE 2.67 from pure white, which is the "just noticeable" threshold on a calibrated screen and will not survive a cheap Android at half brightness in daylight. The BD reference teardown found all four competitors on white backgrounds — "nobody has a palette worth remembering" — so a neutral ground would have spent the one differentiator to fix a problem it barely addresses. #FAF8F2 sits dE 3.96 from white. PANEL AND RULE FOLLOWED IT, 2026-08-31 [FOUNDER]: #F2EBD9 -> #F1EFE7 and #E5DCC5 -> #E3E0D5. Warmth 25 -> 10 and 32 -> 14, the same proportion the ground moved, so the tonal steps between the three surfaces are unchanged. THE PANEL IS NOT A DECORATIVE SURFACE — IT IS THE BACKGROUND OF EVERY PRODUCT PHOTOGRAPH. Gallery and rail images carry `mix-blend-mode: multiply` so that supplier artwork shot on white melts into the page instead of leaving a bright rectangle. Multiply means a white photo background resolves to exactly the panel colour — so the panel IS what every product appears to be photographed on. At warmth 25 it tinted all of them; the Solar Fan's photography is white-background and made that unmissable. Leaving the ground alone would have fixed about a third of "too creamy". In Lab chroma the set is now paper 3.13, panel 3.9, rule 5.6 — against 9.59 and 12.43 before. */ :root { /* surfaces */ --sig-paper: #FAF8F2; /* page ground — warm, never pure white */ --sig-panel: #F1EFE7; /* image panels, thumbnails — see note below */ --sig-card: #FFFFFC; /* rows and chips that sit on paper */ --sig-rule: #E3E0D5; /* hairlines */ /* ink */ --sig-ink: #14120E; /* text, and the ground for anything reversed */ --sig-muted: #6A6255; /* secondary text */ --sig-ok: #1B6B4A; /* in stock */ --sig-warn: #A8341B; /* not stocked */ /* accent — the logo yellow, sampled from Seamless's own artwork */ --sig-yellow: #FAD02C; /* type */ --sig-display: 'Young Serif', Georgia, serif; --sig-body: 'Barlow', system-ui, -apple-system, sans-serif; /* Bengali prose. Barlow is kept ahead of it so Latin inside a Bengali sentence — "bKash", "Pathao", a price, a product name, all of which the governing rule keeps in English — still sets in Barlow rather than in Hind Siliguri's Latin. The unicode-range on the @font-face makes that split automatic per character. */ --sig-body-bn: 'Barlow', 'Hind Siliguri', system-ui, sans-serif; /* ── The chrome measure ──────────────────────────────────────────── `--sig-gut` was declared on `.sig-home` and hardcoded, character for character, twice more in chrome.css — once for the header and once for the footer. Three copies of one number is how the header and the hero drift apart at a viewport nobody tested. It lives here now; `.sig-home` inherits it. `--sig-shell` was here and is gone again, same day. It capped the chrome at 1600px to stop the navigation running away on a wide screen. Measuring the result showed the cap was treating a symptom: the chrome was on the homepage's full-bleed gutter while four of the five surfaces centre a 1180px column, so it staggered 32px from page content at 1280 and 182px at 1600. The chrome now takes `.sig-main`'s own measure instead, which cannot run away at any width. See the note in chrome.css. */ --sig-gut: clamp(18px, 3vw, 52px); /* ── The site measure ────────────────────────────────────────────── `--sig-shell` came back, under a name that says what it is. chrome.css settled on max-width 1180 with 20px of padding on 09-02 and four surfaces already use it; the homepage joined them on 09-03 and needed the same two numbers to bleed its plate photograph out of. That is the third and fourth copy of a pair of literals — exactly the drift the `--sig-gut` note above was written about. chrome.css still spells them out and can adopt these whenever it is next opened. */ --sig-meas: 1180px; --sig-pad: 20px; /* ── The hairline that survives the panel ────────────────────────── `--sig-rule` (#E3E0D5) on `--sig-panel` (#F1EFE7) is **1.14:1**. That is not a faint line, it is no line: the footer's own top border has never actually been visible. #CBC8BE is 1.46:1 on the panel and 1.60:1 on paper — still a whisper, but a drawn one. Used only where the chrome needs to read as ruled; `--sig-rule` stays correct on paper-ground surfaces, where it has always worked. */ --sig-hair: #CBC8BE; /* spacing — 4pt scale */ --sig-1: 4px; --sig-2: 8px; --sig-3: 12px; --sig-4: 16px; --sig-5: 24px; --sig-6: 32px; --sig-7: 48px; --sig-8: 64px; /* ── radii ─────────────────────────────────────────────────────────── ⚠️ `--sig-r-chip` WAS `999px` AND IT WAS THE WRONG SHAPE FOR THIS SYSTEM. `[FOUNDER 2026-09-03]` — "this blob thing UI ALL OVER THE WEBSITE … anything resembling it looks like shit." One token drove every button on the site — add-to-cart, Select options, the Order now CTA, the quantity field, the category chips, the sale badge and the checkout buttons — into a stadium. A fully-rounded pill is a soft-UI convention, and it is the one shape that contradicts everything else Signal does: this site's vernacular is the TECHNICAL DRAWING, and a drawing has ruled edges, keyed fields and title blocks. Nothing on a drawing is stadium-shaped. The radius was quietly arguing with the design system on every surface at once. 8px, not 0. Zero-radius plus hairline rules is a recognisable AI-default look in its own right, and Signal already spends its hairlines elsewhere; 8px reads as drawn rather than as either extreme, and it is the radius the thumbnails and panels in this theme had already settled on by hand. NOT LOCKED, so this is not an override. design/README.md's locked table covers the ground, panel, ink, accent, rule, the two typefaces, the two signatures and the yellow rule. Radius was never in it. */ --sig-r-chip: 8px; --sig-r-row: 12px; --sig-r-img: 10px; } /* ── Yellow usage rule (decided 2026-08-14) ───────────────────────────── Yellow FILLS shapes; ink WRITES words. Never set yellow type on a dark ground — at small sizes it halates and reads as hazard tape. And yellow only fills against paper or white, never against --sig-panel, where it loses contrast. Selected states use treatment "C": ink on paper with a yellow underline, so yellow stays a mark rather than a fill and remains rare enough to mean something. Reserved fills: the primary CTA and the "best value" tab. ───────────────────────────────────────────────────────────────────── */ /* ── Self-hosted faces. Declared, not yet used — see the note above. ──── */ @font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/young-serif-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/barlow-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-600.woff2') format('woff2'); } /* ── Bengali body face. ONE weight, prose only. ──────────────────────── Hind Siliguri 400, Google's `bengali` unicode-range subset, self-hosted byte-for-byte as downloaded. DO NOT RUN THIS THROUGH A SUBSETTER. Bengali conjuncts (যুক্তাক্ষর) are produced by OpenType GSUB substitution into glyphs that correspond to NO character in the source text. A subsetter told to "keep only the characters used" therefore discards them and the script renders as broken, decomposed letterforms — a failure nobody who reads English will notice in review. 71 KB against Barlow's 22 KB. Accepted: it is one file, one weight, and `display: none` on the inactive language means English-only readers never download it at all (a glyph that never renders never triggers a fetch). No 600. Emphasis inside a Bengali paragraph is carried by the English heading above it, which is already in Young Serif — a second Bengali weight would be another 70 KB to say something the layout already says. */ @font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/hind-siliguri-400.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } /* ── Bengali prose blocks ────────────────────────────────────────────── Scoped to [lang="bn"], which the markup sets on the Bengali half of every prose block. That attribute is not decoration: it switches the font here, tells a screen reader to change voice, and lets the browser pick the Bengali face instead of substituting glyphs. All three from one hook. WHY THIS READS AS DELIBERATE RATHER THAN AS A BROKEN FONT A single Bengali paragraph among English ones looks like a webfont that failed. A whole page of Bengali prose under English headings looks bilingual. The toggle therefore flips EVERY prose block on the page at once — the consistency is what carries the intent, not any marker added to the blocks themselves. Nothing decorative is needed here, and adding any would be the wrong instinct. The headings above these blocks stay Young Serif and stay English. That is the governing rule, and it is also why no Bengali display face was bought: see site/bilingual-plan.md. */ [lang="bn"] { font-family: var(--sig-body-bn); /* Bengali sets denser than Latin at the same nominal size — the matra headstroke closes the top of every letter and conjuncts stack below the baseline. Without both bumps it reads cramped next to the English. These are a starting point derived from the script's metrics, NOT a measurement; check them on a real 390px phone before shipping. */ font-size: 1.05em; line-height: 1.75; } /* ── On measure: the `ch` units were left alone, and that is the finding ── An override block sat here pinning .sig-hero__sub, .sig-facts span and .sig-about__body to explicit rem values, on the reasoning that `ch` resolves against the current font's zero glyph and would therefore drift once the block set in Hind Siliguri. MEASURED, AND THE REASONING WAS WRONG. `[VERIFIED 2026-09-03 — Puppeteer, both faces actually loaded]` Barlow and Hind Siliguri have effectively identical zero-widths. The same 46ch resolves to 422.1px in Barlow and 443.1px in Hind Siliguri, and ALL of that 5.0% is the font-size bump declared above — none of it is the change of face. And that 5% is correct behaviour rather than drift: `ch` scales with font-size, so a 5% larger Bengali measure holds the same number of characters per line. Pinning rem values would have FROZEN the measure while the type grew, which is the real bug. Two of the four hand-derived numbers were wrong as well — `.sig-facts span` was 14% too wide. So there is nothing to override. The existing `ch` measures are already right for both languages. This note stays because the wrong version is an easy thing to reinvent. */