/* * member theme — portal-local (legacy generic-named). Owned by /build-theme. * Changelog: * 2026-08-17 — v1.0.2 (dead-code removal only — ZERO token/value changes vs v1.0.1; 130 tokens on * both sides, same values, same selector blocks). Deleted 13 @font-face declarations that nothing * applies: MainFont/Heebo (7 weights, .ttf) and HelveticaNeue (6 weights, .otf). Montserrat and * Quinstory are untouched — they are the two faces this portal actually renders. * - A @font-face only downloads when a rule matches an element, so these cost visitors nothing * and the removal changes no byte on the wire. What they cost is 2.8MB of .ttf/.otf that * shipped on every deploy, which is why they are going. * - The only rules naming those families live in css/general_v1.0.0.css (six of them: .datepicker * table tr th, .daterangepicker, .btnPrimaryModal, and a bare `header` element selector). That * stylesheet is NOT LOADED by anything — head_v1.0.11's own changelog says "Not using bootstrap, * custom_v1.0.0.css and general_v1.0.0.css", and the four CSS links a page actually emits are * style.css, main_v1.0.0.css, main_v1.0.0.css (noscript) and this file. * - Verified in the browser, not by reading: across index/blog/track-order/shop/contact-us/sign-up, * zero elements compute to MainFont/HelveticaNeue/Konnect and zero Heebo or HelveticaNeue files * are requested. The four selectors above were then INJECTED into a live page — the datepicker * and modal ones matter because that markup is built by JS and a static scan cannot see it — * and all four resolved to Montserrat, confirming the general_v1.0.0 rules are unreachable * rather than merely unused on the pages sampled. * - The .ttf/.otf files themselves are deleted in the same commit. theme_v1.0.0.css still names * them, and its src URLs are now dangling — inert, because no head has referenced v1.0.0 since * 404_v1.0.8 moved off it and every legacy head has zero page callers. * 2026-08-13 — ASSET-ONLY note, no edit to any rule below: Quinstory.woff2 re-subset in place, * finishing what the Montserrat entry below started. Same filename, same URL, so the @font-face * block for it is untouched. 20,704 -> 12,036 bytes (-42%). * - This is NOT the same operation as Montserrat, and the difference is the point. Montserrat * had two levers: 969 codepoints to trim (Cyrillic + Greek) and a pile of OpenType features * to drop. Quinstory has NEITHER. Its coverage was already Latin-only (218 codepoints, no * Cyrillic, no Greek, no CJK), and its ONLY features are kern/liga/clig/calt — proven, not * assumed: subsetting with `--layout-features=kern,liga,clig,calt` produces a file BYTE-EQUAL * to subsetting with the features left alone. There was nothing extra in there to remove. * - So the only lever was glyph coverage: 218 -> 104 codepoints, 219 -> 115 glyphs. * - KERNING IS DELIBERATELY KEPT. Dropping GPOS as well would reach 8,588 bytes, another 3.4KB. * Refused: GPOS is 12.4KB of this font's uncompressed weight because it IS the kerning, and * Quinstory is a display face that only ever renders headings — the h1 here is 34-46px, which * is exactly the size where bad letter-fit is visible. Wrong 3.4KB to take. * - THE KEEP-LIST WAS SCANNED, NOT GUESSED, because the failure mode is silent: any codepoint * that renders in Quinstory but is missing from the subset falls back to Georgia mid-heading. * Every codepoint appearing anywhere in the portal's page and lang PHP files was intersected * with the font's cmap; outside printable ASCII that yielded exactly six — À, ÿ, ’, “, ” and • * (glob paths are spelled out here on purpose: a slash-star inside a CSS comment is inert but * makes every comment-balance check and minifier misread the file) * and all six are kept, along with the neighbouring quote range and NBSP as cheap insurance. * Re-run that intersection before trimming further, and note it says nothing about zh-cn: * Quinstory has no CJK, so Chinese headings already fell back before any of this. * - Verified by rendering, not by inspection: the four elements this portal actually draws in * Quinstory (the sign-in h1 and the three footer headings) were screenshotted at 2x before * and after and pixel-compared. * Untouched next door: Quinstory.otf (36KB) is still listed as the second src below. It is never * downloaded — WOFF2 comes first and support is >98% — but it does still ship on every deploy. * 2026-08-13 — ASSET-ONLY note, no edit to any rule below: the four Montserrat .woff2 files these * @font-face blocks point at were re-subset in place. Same filenames, same URLs, so nothing in * this file (or in the 17 consumers of it) changed — but the FILES are no longer the stock * Google builds, and that matters to whoever touches them next: * - 61.5-62.5KB each -> 19.0-19.3KB each. 248KB -> 76KB across the four weights. * - Coverage kept: Latin + Latin-Ext + Vietnamese (969 -> 645 codepoints). What was dropped is * Cyrillic and Greek, which this portal cannot produce (locales are en + zh-cn, and Montserrat * never carried CJK — Chinese already falls back to a system face). * - The saving is NOT mostly glyph coverage. Coverage-only subsetting gets 61.5KB -> 38.8KB; * the other half is OpenType layout features. Kept kern/liga/clig/calt, dropped the rest after * checking that nothing in the portal asks for them (no tabular-nums, no small-caps, no * stylistic sets; the only font-feature-settings in the repo is 'liga', on the icon font). * - Verified before install: every codepoint appearing in this portal's own sources AND drawable * by the old font is still drawable by the new one (0 missing), and hhea ascender/descender/ * lineGap + unitsPerEm are byte-identical, so nothing reflows. * - RE-SUBSET FROM THE .ttf SIDECARS, never from a .woff2 — Montserrat-.ttf sits next to * each .woff2, is already in git, and carries the identical 969-codepoint cmap (checked, not * assumed). No separate backup copy is kept precisely because those .ttf ARE the backup; * adding one would have put 262KB of duplicate binaries in git history and on every deploy. * If you ever replace a face with a fresh build, re-run the subset or this portal quietly * goes back to paying 248KB. Recipe: * python3 -m fontTools.subset Montserrat-.ttf \ * --unicodes= \ * --layout-features=kern,liga,clig,calt --flavor=woff2 \ * --output-file=Montserrat-.woff2 * 2026-08-06 — v1.0.1 (perf, font delivery only — ZERO token/value changes vs v1.0.0). * Lighthouse on the production homepage scored Performance 56 with FCP 8.0s / LCP 13.6s * while TBT was 100ms and CLS was 0 — i.e. not a script or layout problem, a bytes-on-the- * critical-path problem. Fonts were 1.08MB of a 3.33MB page. * * (1) font-display: swap added to the 4 Montserrat faces and to Quinstory. They previously * declared NO font-display at all, which means `auto` — browsers treat that as `block`, * so body text stayed INVISIBLE until the webfont arrived. Waiting on a 193KB TTF over * throttled mobile is the direct cause of the 8s first paint. `swap` paints immediately * in the fallback face and re-renders when the webfont lands. * NOT applied to the Material Symbols icon font — that one is font-display: block by a * deliberate, documented decision (main_v1.0.0.css: swap flashes the ligature text, e.g. * the literal word "check_circle", before the glyph resolves). * * (2) Montserrat 400/500/600/700 + Quinstory now load WOFF2, with the original TTF/OTF kept * as a second src for any client that cannot take WOFF2 (support is >98%, so in practice * nothing fetches it — browsers pick the first format they understand and never request * the other). Measured on these exact files: * Montserrat-Regular 193.0KB -> 60.1KB (69% smaller) * Montserrat-Medium 193.1KB -> 60.3KB (69%) * Montserrat-SemiBold 193.3KB -> 60.5KB (69%) * Montserrat-Bold 193.5KB -> 61.1KB (68%) * Quinstory 35.3KB -> 20.2KB (43%) * TOTAL 808.2KB -> 262.2KB = 546KB off the critical path * Same outlines, same rendering — WOFF2 is a compression container, not a re-draw. * * Heebo / HelveticaNeue / LineAwesome faces are left on TTF/OTF untouched: the homepage does * not request them (a @font-face only downloads when something uses it), so converting them * would be churn with no measured win. Convert if a page that does use them is optimised. * * Referenced by head_v1.0.11.php (the homepage head) only — every other head_v* still points * at v1.0.0 by design, per the repo's gradual-rollout rule. * * 2026-07-08 — Update (non-canon, values-only): BRAND RE-ALIGN to the official * "brand logo-MrFlower-Mar2025.docx" brand book (operator decision — reverses the * 2026-06-08 "handoff bundle is authoritative" call; brand book now wins). 4 brand * colours restored/mapped onto brand-bearing slots — functional palette (error/ * warning/success, pink product accents, neutrals — not covered by the brand book) * left untouched: * PRIMARY sage #68796B -> --primary-color, --tertiary-color, --tertiary-text-color, * --fifth-text-color, --btn-primary-bg-color (was #4A5740), --color-brand-primary, * --color-text-brand, --color-text-link. Derived shades: --color-brand-primary-dark * #4E4A28->#4E5B51, --color-brand-primary-light #8C8450->#8B978C, --signin-btn-bg * #4A5740->#4E5B51 + hover #3A4732->#3C4740 (sage-dark). White-on-sage passes AA (~4.65:1). * SECONDARY yellow-green #F7FAE8 -> --secondary-bg-color (was #F6F6F4); also already * at --sixth-color. * TERTIARY grayish-yellow #B0AF9C -> --color-border-warm (was #C7C4A4, nearest slot). * ACCENT strong-green #37B14C -> --color-brand-accent (was #FFC154 gold). NOTE: white * text on this accent is only ~2.3:1 — do NOT place text directly on --color-brand-accent. * Live prod (www.mrflower.com.my) still shows the June handoff design; portal now * diverges from live until the live site is re-synced. * 2026-07-03 — Correction: removed a duplicate --btn-primary-bg-color/--btn-primary-text-color * declaration that had been added earlier the same day under a mistaken belief the token was * undefined (a grep search missed the pre-existing `--btn-primary-bg-color :` — space before * the colon — at its real declaration further up this :root block, alongside every other * --btn-* token). Since CSS uses the LAST declaration when a custom property repeats in the * same scope, the duplicate had been silently overriding the real, intentionally-set value * (#4A5740, "unified to match --signin-btn-bg-color" per that declaration's own comment) with * #6B6437 for every consumer (homepageHeader avatar circle + cart badge, products.php, * product-detail.php, verify-link.php, the account-page Save buttons). Reverted; single * source of truth restored. * 2026-06-23 — Update (non-canon, values-only): --warning-color #ffe139 -> #E0A800 * (vivid yellow -> warm gold/amber). Reads as amber on warning UI (cart "cart updated" * notice border/icon + showMessage warning modal icon) per the design. Token-only; * no page touched, no hardcoded value on the banner. * 2026-06-08 — Extend (non-canon, prefix --signin-*): added --signin-btn-bg-color * #4A5740 + --signin-btn-hover-bg-color #3A4732 (Mr Flower "Sign In.html" auth * button — a darker green than the brand --btn-primary-bg-color #6B6437; sign-in * page scope only). Additive; no existing token changed. For /reskin-page sign-in.php. * 2026-06-08 — Brand sync to the Mr Flower design handoff bundle (latest link * _6CSNL6Ra... ; operator: bundle is now authoritative, overwrite prior live-synced * values). Values-only, 11 tokens: --primary-color #5E5A34->#6B6437, --tertiary-color * #68796B->#6B6437, --btn-primary-bg-color #68796B->#6B6437 (sage->olive/bronze), * --btn-border-radius 0px->30px (square->pill), --primary-text-color #5E5A34->#2C2A22 * (olive->warm-dark body text), --default-secondary-bg-color #fff->#FAFAF7 (warm page bg), * --secondary-bg-color #f7f7f7->#F6F6F4, --fourth-text-color #545454->#767470 (muted), * --error-color #fb403a->#FD397A, --success-color #2CAA0D->#00B900, --input-bg-color * #FFFFFF->#F3F3F3. Text-size scale kept (member uses 17px; bundle 14px would regress). * Footer #2A2820 already synced (2026-06-08 prior entry). Portal-wide. * 2026-06-08 — Follow-exactly extension (operator: match the bundle's :root precisely). * Text scale: xs 12->11, sm 15->13, md 17->15, lg 24->18, xl 37->24. Font-weights: * medium 400->500, thick 500->600. Buttons: secondary-bg #FFF->#F6F6F4, secondary-text * #fff->#2C2A22, disabled-bg #d3d3d3->#CDCDCD, width-short 100->120px, font-size 17->14px, * button-border 2px #C1BFA9 -> 1px #CDCDCD. Text: tertiary-text #000->#6B6437, fifth-text * #89855D->#6B6437. Borders: --default-border #ddd->#E6E6E6, --primary-border-color * #DEDEDE->#E6E6E6. Listing: header-text-size 17->13px, header-child-color #000->#767470. * NOT in bundle (left as-is, flagged): --input-label/text/placeholder-size (17px), * --footer-text-size (15px), --header-bg/text-color, --warning-color, --secondary-color. * 2026-06-08 — Values-only: --footer-bg-color #68796B (sage) -> #2A2820 (dark warm * charcoal). Matches the Mr Flower Homepage.html design (Claude Design handoff * bundle: --color-bg-dark, used for footer + announcement bar). Footer bg now dark * portal-wide; --footer-text-color stays #FFFFFF. Upstream of /build-footer * homepageFooter_v1.0.3. * 2026-06-04 — Values-only: --btn-primary-text-color #5E5A34 -> #ffffff. The sage * primary button (--btn-primary-bg-color #68796B) needs white text to match live * (white-on-sage) and pass WCAG AA (olive-on-sage was ~1.4:1; white-on-sage ~4.65:1). * Surfaced by wf-ai-review-runner color-contrast on member/sign-in.php. Portal-wide. * 2026-06-04 — Brand refresh to production www.mrflower.com.my (source: live * :root tokens via Playwright). Values-only sync of 16 tokens: red (#E21E25) * -> sage/olive florist palette (primary-text + btn-primary -> #5E5A34 / * #68796B), square buttons (btn-border-radius 0px), sage footer (#68796B), * fixed text sizes (clamp() -> px), input label/text/placeholder 15 -> 17px, * input-border #DEDEDE -> #aaa. No tokens added/removed; filename kept. */ /* Montserrat — body/UI font (MrFlower design system). * 2026-06-13: fixed mislabeled weights (400 was → Medium.ttf, 500 → SemiBold.ttf) * and added 600/700; added Regular+SemiBold files from the design handoff bundle. * Weight → file now correct so Montserrat 400/500/600/700 render as intended. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Montserrat/Montserrat-Regular.woff2) format('woff2'), url(fonts/Montserrat/Montserrat-Regular.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/Montserrat/Montserrat-Medium.woff2) format('woff2'), url(fonts/Montserrat/Montserrat-Medium.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/Montserrat/Montserrat-SemiBold.woff2) format('woff2'), url(fonts/Montserrat/Montserrat-SemiBold.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Montserrat/Montserrat-Bold.woff2) format('woff2'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); } /* Quinstory — display/heading font (single-file). 2026-06-13: weight range * 100–900 so any heading weight (design uses 400) maps to the one .otf. */ @font-face { font-family: 'Quinstory'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Quinstory/Quinstory.woff2) format('woff2'), url(fonts/Quinstory/Quinstory.otf) format('opentype'); } :root{ /* 2026-06-14: portal-wide font scale. Edit --font-scale to resize ALL text. Every --*-text-size + --fs-* below is calc(basepx * --font-scale). */ --font-scale: 1.12; --fs-10: calc(10px * var(--font-scale)); --fs-16: calc(16px * var(--font-scale)); --fs-17: calc(17px * var(--font-scale)); --fs-20: calc(20px * var(--font-scale)); --fs-22: calc(22px * var(--font-scale)); --fs-26: calc(26px * var(--font-scale)); --fs-28: calc(28px * var(--font-scale)); --fs-30: calc(30px * var(--font-scale)); --fs-34: calc(34px * var(--font-scale)); --fs-38: calc(38px * var(--font-scale)); --fs-40: calc(40px * var(--font-scale)); --fs-44: calc(44px * var(--font-scale)); --fs-46: calc(46px * var(--font-scale)); --fs-52: calc(52px * var(--font-scale)); /* NEW STANDARD ROOT CSS */ /*theme-color*/ --primary-color : #68796B; --secondary-color: #1C2232; --tertiary-color: #68796B; --fourth-color: #1D253B; --fifth-color: #F6F6F4; --sixth-color: #f7fae8; --error-color: #FD397A; --warning-color: #E0A800; --success-color: #00B900; --hyperlink-text-color: #0000EE; /*webpage*/ --default-border: 1px solid #E6E6E6; --default-bg-color: #fff; --default-primary-bg-color: #000; --default-secondary-bg-color: #FAFAF7; --default-primary-text-color: #000; --default-secondary-text-color: #fff; --primary-border-color: #E6E6E6; --primary-bg-color : #fff; --secondary-bg-color: #F7FAE8; --primary-text-color:#2C2A22; --secondary-text-color : #fff; --tertiary-text-color : #68796B; --fourth-text-color : #767470; --fifth-text-color : #68796B; --onhover-text-color: #000; --default-border-radius: 10px; --xl-text-size: calc(24px * var(--font-scale)); --lg-text-size: calc(18px * var(--font-scale)); --md-text-size: calc(15px * var(--font-scale)); --sm-text-size: calc(13px * var(--font-scale)); --xs-text-size: calc(11px * var(--font-scale)); --header-height: auto; --border-radius-xs: 5px; --border-radius-md: 10px; --border-radius-lg: 15px; --js-header-height: 80px; /* font-weight */ --default-font-weight-thin: 300; --default-font-weight-medium: 500; --default-font-weight-thick: 600; --default-font-weight-bold: 700; --default-font-weight-max: 900; /*button*/ --btn-primary-bg-color : #68796B; /* 2026-07-08 brand re-align: back to brand-book primary sage #68796B (Mar-2025 brand doc). Was #4A5740, before that #6B6437 olive. White text passes AA (~4.65:1). */ --btn-secondary-bg-color : #F6F6F4; --btn-tertiary-bg-color : #fff; --btn-disabled-bg-color : #CDCDCD; --btn-onHover-primary-bg-color : ''; --btn-onHover-secondary-bg-color : ''; --btn-onHover-tertiary-bg-color : ''; --btn-primary-text-color: #ffffff; --btn-secondary-text-color: #2C2A22; --btn-tertiary-text-color: #000; --btn-disabled-text-color: #9d9d9d; --btn-onHover-primary-text-color : ''; --btn-onHover-secondary-text-color : ''; --btn-onHover-tertiary-text-color : ''; --btn-width-long: 200px; --btn-width-short: 120px; --btn-border-radius: 30px; --button-border: 1px solid #CDCDCD; --btn-font-size : 14px; /*input*/ --input-label-size: 17px; --input-text-size: calc(17px * var(--font-scale)); --input-border-radius: 5px; --input-border : 1px solid #aaa; --input-bg-color :#F3F3F3; --input-width-long: ''; --input-width-short: ''; --input-placeholder-size: 17px; --input-placeholder-color: #d6d6d6; --input-disabled-bg-color: #d6d6d6; --input-onfocus-border-color: ''; /*header*/ --header-bg-color: #fff3e3; --header-text-size: calc(17px * var(--font-scale)); --header-text-color: #000; --header-onHover-color: ''; /*footer*/ --footer-bg-color: #2A2820; --footer-text-size: calc(15px * var(--font-scale)); --footer-text-color: #FFFFFF; --footer-onHover-color: ''; /*listing*/ --listing-header-color: #ffdcad; --listing-row-primary-color: #f8f8f8; --listing-row-secondary-color: #fff; --listing-header-child-color: #767470; --listing-row-child-primary-color: #fff3e3; --listing-row-child-secondary-color: #fff3e3; --listing-header-text-size: calc(13px * var(--font-scale)); --listing-row-text-size: calc(17px * var(--font-scale)); --listing-header-child-text-size: calc(17px * var(--font-scale)); --listing-row-child-text-size: calc(17px * var(--font-scale)); /* ── Non-canonical extension — prefix: --signin-* (sign-in page scope) ── Added 2026-06-08 (see changelog). The Mr Flower "Sign In.html" design (Claude Design bundle) hardcodes a DARKER auth-button green than the brand button (--btn-primary-bg-color #6B6437). Scoped to the sign-in page so the portal-wide button is unaffected. Consumed by member/sign-in.php via bg-[color:var(--signin-btn-bg-color)]. */ --signin-btn-bg-color: #4E5B51; --signin-btn-hover-bg-color: #3C4740; /* ── Mr Flower design-system primitives (--color-* mirror) ────────────────── Added 2026-06-10 via /build-theme (Extend path). Source: the MrFlower design system colors_and_type.css (Claude Design bundle). ADDITIVE ONLY — no existing token above was changed; the legacy semantic aliases already equal these values. Non-canonical extension under the explicit --color-* prefix (the design system's own namespace), NOT the locked 126-token canonical schema. Consumed by pages via bg-[color:var(--color-bg-warm)] etc. Lets about-us / terms / privacy / the modal re-point their inlined one-off hex to real tokens. */ /* Brand */ --color-brand-primary: #68796B; --color-brand-primary-dark: #4E5B51; --color-brand-primary-light: #8B978C; --color-brand-accent: #37B14C; --color-brand-blush: #F9E9E2; /* design token — subtle accents (subcategory border-left, etc.) */ --color-brand-blush-deep: #FFDDE0; /* 2026-06-14: deeper pink — MrFlower design hardcodes this on the product card image frame (distinct from the --color-brand-blush token) */ /* Backgrounds */ --color-bg-white: #FFFFFF; --color-bg-warm: #FAFAF7; --color-bg-light: #F6F6F4; --color-bg-pink-subtle: #FFF9F9; --color-bg-cream-subtle: #FFF9E8; --color-bg-dark: #2A2820; --color-bg-dark-mid: #474747; /* Borders */ --color-border-default: #E6E6E6; --color-border-warm: #B0AF9C; --color-border-product: #F9E9E2; /* Text */ --color-text-primary: #2C2A22; --color-text-secondary: #FFFFFF; --color-text-muted: #767470; --color-text-brand: #68796B; --color-text-link: #68796B; --color-text-error: #FD397A; --color-text-success: #00B900; --color-text-disabled: #9D9D9D; /* Typography scale (design default; member theme had sm/md but not default) */ --default-text-size: calc(14px * var(--font-scale)); /* Status-badge pairs — centralizes colors that were previously hardcoded hex, repeated across my-orders.php (order-status pills) and addresses.php ("not deliverable" badge). Added 2026-07-03 (design-consistency audit). Values match what was already live — this is a rename/centralize, not a re-color. */ --badge-warning-bg: #FEF3C7; --badge-warning-text: #B45309; --badge-warning-border: #FDE68A; --badge-info-bg: #E8F0FE; --badge-info-text: #1A56DB; --badge-purple-bg: #E0E7FF; --badge-purple-text: #3730A3; --badge-success-bg: #D4EDDA; --badge-success-text: #155724; --badge-danger-bg: #F8D7DA; --badge-danger-text: #721C24; /* Design-token audit 2026-07-06 — centralize colors that were hardcoded (repeated) across member pages. Values match what was already live (rename/centralize, not re-color). - OTP verify box bg: reset-password.php + verify-otp.php (7 hits) - Pink accents: product-detail sale pills + about-us/privacy/terms callouts - Grey chips: product-detail size/variant selector chips */ --color-bg-otp: #F0EDD0; --color-pink-soft: #F2C4C8; --color-pink-soft-deep: #ECB1B7; --color-pink-dark: #6B2737; --color-pink-vivid: #E74C6F; --color-chip-bg: #F0F0F0; --color-chip-bg-active: #E0E0E0; --color-chip-border: #C8C8C8; --color-chip-text: #555555; }