/* * member theme — portal-local. Owned by /build-theme. * * Changelog: * v1.0.1 - 2026-07-29 - 51EDGE REBRAND (values-only on the canonical schema + one new * non-canon --e51-* extension block). Source of truth: the "Website redesign for * 51edge.com" export (12 self-contained pages). That export carries NO token CSS — * every value below was read off the design's inline styles, so this file is the * first place those hex values become tokens. * * Canonical token NAMES are unchanged (kept pages/head consume ~20 of them), only * values were remapped: * brand blue #01277D -> --primary-color, --tertiary-color, --tertiary-text-color, * --fifth-text-color, --btn-primary-bg-color, --hyperlink-text-color, * --color-brand-primary, --color-text-brand, --color-text-link, --signin-btn-bg-color * nav plum #1E0040 -> --secondary-color, --header-bg-color * ink #180B32 -> --primary-text-color, --default-primary-*, --footer-text-color * page bg #EDECF5 -> --secondary-bg-color, --footer-bg-color (footer is LIGHT * in this design — it was dark #2A2820 under Mr Flower) * border #E0DFEC -> --primary-border-color, --default-border * muted #5C5670 -> --fourth-text-color, --color-text-muted * --font-scale is 1 (was 1.12): the design specifies exact px sizes, so scaling * every size would break fidelity against the export. * --btn-border-radius 30px -> 2px (design uses near-square CTAs). * * The Mr Flower --color-* mirror (blush / pink-* / chip-* / bg-otp) was re-authored * for 51edge — those slots had ZERO consumers left after the portal strip-down * (verified by grep before rewriting). --color-brand-primary was the only --color-* * token still referenced and is preserved. * * Functional triad (--error-color / --warning-color / --success-color) deliberately * LEFT AT THE MR FLOWER VALUES: the 51edge design never shows an error, warning or * success state, so there is nothing to derive them from. Revisit when those states * get designed. * * v1.0.0 - (Mr Flower) superseded — see theme_v1.0.0.css for that lineage. */ /* ── Fonts (self-hosted, latin + latin-ext) ───────────────────────────────────── Extracted from the design export's embedded woff2 payloads. The export ALSO linked fonts.googleapis.com; self-hosting drops that third-party request and matches the portal's existing css/fonts/ convention. Cyrillic / Vietnamese subsets from the export are intentionally NOT shipped — this is a latin-script site (en / ms). Re-add if a locale needs them. Instrument Sans and Playfair Display are VARIABLE fonts: one file each covers the whole weight range, declared with a weight range below. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/51edge/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/51edge/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/51edge/instrument-serif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/51edge/instrument-serif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/51edge/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/51edge/instrument-serif-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600 800; font-display: swap; src: url(fonts/51edge/playfair-display-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600 800; font-display: swap; src: url(fonts/51edge/playfair-display-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/51edge/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/51edge/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/51edge/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/51edge/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ /* Portal-wide font scale. The 51edge design specifies exact px sizes, so this is 1 — raising it rescales every --*-text-size / --fs-* below and will drift the pages away from the export. */ --font-scale: 1; --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 : #01277D; --secondary-color: #1E0040; --tertiary-color: #01277D; --fourth-color: #180B32; --fifth-color: #EDECF5; --sixth-color: #F3F1FA; /* Functional triad — NOT from the 51edge design (it has no error/warning/success state). Carried over from theme_v1.0.0 rather than invented. */ --error-color: #FD397A; --warning-color: #E0A800; --success-color: #00B900; --hyperlink-text-color: #01277D; /*webpage*/ --default-border: 1px solid #E0DFEC; --default-bg-color: #fff; --default-primary-bg-color: #180B32; --default-secondary-bg-color: #FCFCFE; --default-primary-text-color: #180B32; --default-secondary-text-color: #fff; --primary-border-color: #E0DFEC; --primary-bg-color : #fff; --secondary-bg-color: #EDECF5; --primary-text-color:#180B32; --secondary-text-color : #fff; --tertiary-text-color : #01277D; --fourth-text-color : #5C5670; --fifth-text-color : #01277D; --onhover-text-color: #01205F; --default-border-radius: 14px; --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: 2px; --border-radius-md: 14px; --border-radius-lg: 22px; --js-header-height: 96px; /* 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 : #01277D; --btn-secondary-bg-color : #FCFCFE; --btn-tertiary-bg-color : #fff; --btn-disabled-bg-color : #E0DFEC; --btn-onHover-primary-bg-color : #04349E; --btn-onHover-secondary-bg-color : #F3F1FA; --btn-onHover-tertiary-bg-color : #F3F1FA; --btn-primary-text-color: #ffffff; --btn-secondary-text-color: #180B32; --btn-tertiary-text-color: #01277D; --btn-disabled-text-color: #9A93AC; --btn-onHover-primary-text-color : #ffffff; --btn-onHover-secondary-text-color : #180B32; --btn-onHover-tertiary-text-color : #01205F; --btn-width-long: 200px; --btn-width-short: 120px; --btn-border-radius: 2px; --button-border: 1px solid #E0DFEC; --btn-font-size : 13px; /*input*/ --input-label-size: 13px; --input-text-size: calc(15px * var(--font-scale)); --input-border-radius: 2px; --input-border : 1px solid #E0DFEC; --input-bg-color :#FCFCFE; --input-width-long: ''; --input-width-short: ''; --input-placeholder-size: 15px; --input-placeholder-color: #9A93AC; --input-disabled-bg-color: #EDECF5; --input-onfocus-border-color: #01277D; /*header*/ --header-bg-color: #1E0040; --header-text-size: calc(13px * var(--font-scale)); --header-text-color: #ffffff; --header-onHover-color: #9FB4EE; /*footer — LIGHT in the 51edge design (was dark under Mr Flower)*/ --footer-bg-color: #EDECF5; --footer-text-size: calc(13px * var(--font-scale)); --footer-text-color: #180B32; --footer-onHover-color: #01205F; /*listing*/ --listing-header-color: #F3F1FA; --listing-row-primary-color: #FCFCFE; --listing-row-secondary-color: #fff; --listing-header-child-color: #5C5670; --listing-row-child-primary-color: #F3F1FA; --listing-row-child-secondary-color: #E4E4F8; --listing-header-text-size: calc(11px * var(--font-scale)); --listing-row-text-size: calc(15px * var(--font-scale)); --listing-header-child-text-size: calc(15px * var(--font-scale)); --listing-row-child-text-size: calc(15px * var(--font-scale)); /* ── Non-canonical extension — prefix: --signin-* ─────────────────────────── Still consumed by head_v1.0.11+ (the canvas modal's primary button). Remapped onto the 51edge brand blue + its hover. */ --signin-btn-bg-color: #01277D; --signin-btn-hover-bg-color: #04349E; /* ── --color-* mirror, re-authored for 51edge ─────────────────────────────── Non-canonical extension under the --color-* prefix. The Mr Flower version of this block (blush / pink-* / chip-* / bg-otp) had zero consumers left after the portal strip-down and was replaced rather than carried. Consumed by pages via bg-[color:var(--color-bg-light)] etc. */ /* Brand */ --color-brand-primary: #01277D; --color-brand-primary-dark: #01205F; --color-brand-primary-light: #04349E; --color-brand-accent: #9FB4EE; /* Backgrounds */ --color-bg-white: #FFFFFF; --color-bg-card: #FCFCFE; --color-bg-light: #EDECF5; --color-bg-tint: #F3F1FA; --color-bg-tint-strong: #E4E4F8; --color-bg-dark: #1E0040; --color-bg-dark-mid: #180B32; --color-bg-dark-deep: #150438; /* Borders */ --color-border-default: #E0DFEC; --color-border-strong: #E5E3F0; /* Text */ --color-text-primary: #180B32; --color-text-secondary: #FFFFFF; --color-text-muted: #5C5670; --color-text-muted-soft: #7B7590; --color-text-muted-softer: #9A93AC; --color-text-brand: #01277D; --color-text-link: #01277D; --color-text-error: #FD397A; --color-text-success: #00B900; --color-text-disabled: #9A93AC; /* Typography scale */ --default-text-size: calc(14px * var(--font-scale)); /* Status-badge pairs — generic, carried forward unchanged from v1.0.0. */ --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; /* ── Non-canonical extension — prefix: --e51-* (51edge design system) ─────── Added 2026-07-29. Design values that have no home in the canonical schema: the dark nav/dropdown stack, the accent, the alpha ladders the export uses for hairlines and secondary text on dark, and the four type families. Pages consume these via arbitrary-value Tailwind, e.g. bg-[color:var(--e51-nav-bg)] / font-[family-name:var(--e51-font-mono)]. */ --e51-nav-bg: #1E0040; --e51-surface-deep: #180B32; --e51-surface-deepest: #150438; --e51-accent: #9FB4EE; --e51-primary: #01277D; --e51-primary-hover: #04349E; --e51-primary-dark: #01205F; --e51-page-bg: #EDECF5; --e51-card-bg: #FCFCFE; --e51-border: #E0DFEC; --e51-ink: #180B32; --e51-muted: #5C5670; --e51-muted-soft: #7B7590; --e51-muted-softer: #9A93AC; --e51-tint: #F3F1FA; --e51-tint-strong: #E4E4F8; --e51-tint-alt: #E5E3F0; --e51-nav-h: 96px; --e51-nav-h-sm: 78px; /* Alpha ladders — the export uses these rgba() values repeatedly for hairline borders, dividers and secondary text on the dark surfaces. */ --e51-on-dark-hairline: rgba(255,255,255,.14); --e51-on-dark-divider: rgba(255,255,255,.10); --e51-on-dark-border: rgba(255,255,255,.22); --e51-on-dark-text: rgba(255,255,255,.82); --e51-on-dark-text-strong: rgba(255,255,255,.85); --e51-on-dark-text-soft: rgba(255,255,255,.70); --e51-on-dark-text-dim: rgba(255,255,255,.60); --e51-on-dark-wash: rgba(255,255,255,.08); --e51-on-dark-chip: rgba(255,255,255,.16); --e51-on-dark-rule: rgba(255,255,255,.18); --e51-brand-wash: rgba(1,39,125,.075); --e51-brand-wash-soft: rgba(1,39,125,.03); /* Composite backgrounds. The export repeats these three verbatim across pages; tokenising them keeps the (long, comma-and-space-heavy) gradient stacks out of Tailwind arbitrary values. Consumed as bg-[image:var(--e51-card-texture)] layered over bg-[color:var(--e51-card-bg)]. */ --e51-hero-gradient: linear-gradient(150deg, #1E0040 0%, #01277D 70%); --e51-band-gradient: linear-gradient(152deg, #1E0040 0%, #01277D 62%, #150438 100%); --e51-card-texture: radial-gradient(130% 110% at 100% 0%, rgba(1,39,125,.09) 0%, rgba(1,39,125,0) 58%), repeating-linear-gradient(135deg, rgba(1,39,125,.03) 0 1px, rgba(1,39,125,0) 1px 10px); --e51-dark-texture: radial-gradient(120% 120% at 0% 0%, rgba(159,180,238,.16) 0%, rgba(159,180,238,0) 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 10px); /* Type families */ --e51-font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; --e51-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --e51-font-serif: 'Instrument Serif', Georgia, serif; --e51-font-display: 'Playfair Display', Georgia, serif; }