/* ========================================================================== Liquid Gold Exchange — Amber brand theme (canonical) -------------------------------------------------------------------------- The site-wide palette, built on the 周六福 Brand VI in "Share to Jacky/周六福/Brand VI". Every page carries data-theme="brand-amber" on and links this file after site.css. The sibling exploration themes (ink / slate / molten) and their variant pages were removed once amber was adopted. HOW IT WORKS The design system is fully token-driven: every semantic token in tokens.css resolves to a raw ramp value (--lgx-*), and site.css / styles.css hold no hard-coded colours at all. So one ramp remap per theme re-tints header, nav, cover, hero, buttons, cards, borders and footer coherently, with no component rules touched. Two consequences worth knowing: - The ramp NAMES stay (--lgx-navy-900 may hold an amber). Renaming them would mean editing the whole design system, which is the opposite of a theme override. Read "navy" as "the zoning colour" throughout. - Three semantic tokens are hard-coded rather than ramp-derived (--text-on-inverse-mut, and --text-muted/--text-disabled inside [data-zone="navy"]). Those are set on the zone element itself, so inheritance cannot reach them — each theme restates them under a descendant selector. BRAND VI SOURCE VALUES (exact, not approximated) Amber Orange "CHENG" #D05017 Pantone 7579 C CMYK 23/81/99/0 on-primary / surface #FFFFFF — tokens.css, tokens.json, branding_data.json, guideline page A-002 Supporting values recovered from the device-colour operators inside 周六福VI形象-琥珀橙-色值.pdf: rich warm black #231815 · neutral grey #595757 · slate #45545A light warm grey #F0EFEE · pale cream #F7F3DF · white #FFFFFF ONE DERIVED VALUE, AND WHY #D05017 carries white at 4.31:1. That clears AA for large/display type (3:1) — which is all the Brand VI itself uses it for, logo and headings — but not the 4.5:1 that small UI text needs. Text-bearing fills therefore use #C64A14, the same hue deepened until white reaches 4.72:1. The exact Pantone value is kept for display type, rules, borders and decoration, where it already passes. Steps between ramp stops are interpolated along the brand hue, the same way tokens.css derives its own (derived) stops. ========================================================================== */ /* -------------------------------------------------------------------------- AMBER ORANGE — guideline page 2 sets white type on a solid amber field. That becomes the zoning colour, deepened so body copy clears AA, with the exact Pantone kept for accents. Pale cream carries the light surfaces. -------------------------------------------------------------------------- */ html[data-theme="brand-amber"] { --lgx-ivory-50: #FFFFFF; --lgx-ivory-100: #F7F3DF; /* Brand VI pale cream */ --lgx-ivory-200: #EFE6CD; --lgx-ivory-300: #DCCFAE; --lgx-ivory-400: #C3B48E; --lgx-gold-300: #F6D9AC; --lgx-gold-400: #EDBC78; --lgx-gold-500: #E39A3C; /* amber-gold: the accent/fill */ --lgx-gold-600: #C64A14; /* derived UI step of the brand orange */ --lgx-gold-700: #A03D0C; /* darkened: the lockup wordmark sits on ivory-200 */ --lgx-gold-800: #93380E; /* AA-safe brand-hue text on cream */ --lgx-navy-700: #A64010; --lgx-navy-800: #93380E; --lgx-navy-900: #8A3410; /* the amber field, deepened for body copy */ --lgx-navy-950: #5A2109; /* deep enough to label the gold button */ --lgx-charcoal-500: #6B5B52; --lgx-charcoal-700: #4A362C; --lgx-charcoal-900: #231815; /* Brand VI rich warm black */ --text-on-inverse-mut: #F0D2BC; /* Exact Pantone 7579 C. Decorative/large use only — see the note above. */ --zlf-primary: #D05017; } html[data-theme="brand-amber"] [data-zone="navy"] { --text-muted: #E6BFA6; --text-disabled: #A9714F; /* Accent and field share a hue here, so the mid gold reads at only 3.5:1 on the amber. The pale honey tint is the same accent one ramp step up. */ --text-accent: var(--lgx-gold-300); } /* ========================================================================== EXEMPTIONS — the two places the amber theme deliberately does not reach ========================================================================== 1 · THE OPENING COVER The cover keeps the pre-amber ivory/champagne treatment; amber starts at the hero below it. Restated as semantic tokens rather than ramp values on purpose: tokens.css resolves --surface-sunken and friends against :root, so what descends to .cover is the already-substituted colour. Overriding --lgx-ivory-200 here would be inert; overriding --surface-sunken is not. These are the pre-amber :root values, copied verbatim from tokens.css. The header takes the same set only while it is in cover mode, so the two read as one field exactly as before, and it turns amber on scroll. :not([data-zone="navy"]) matches how site.css already scopes its own light-cover rules, and keeps this off the Chinese homepage, whose cover is deliberately a dark field — that one just re-tints to amber like the rest of the site rather than being forced light. */ html[data-theme="brand-amber"] .cover:not([data-zone="navy"]), html[data-theme="brand-amber"] .site-header[data-cover="true"]:not([data-zone="navy"]) { --surface-page: #F3EFE5; /* ivory-100 */ --surface-sunken: #EAE3D6; /* ivory-200 */ --surface-raised: #FAF8F3; /* ivory-50 */ --text-primary: #292722; /* charcoal-900 */ --text-secondary: #4A463E; /* charcoal-700 */ --text-muted: #66625A; /* charcoal-500 */ --text-accent: #775A29; /* gold-800 */ --brand-mark: #8D6D38; /* gold-700 */ --border-subtle: #DDD3C0; /* ivory-300 */ --border-gold: #B39457; /* gold-500 — the ::after glow reads this */ } /* 2 · THE TWO HEADER ACTIONS Client Platform and Return Directory keep their champagne-gold treatment in every header state, cover or scrolled. site.css already scopes these tokens to .site-header__actions; this pins them to the pre-amber ramp values so the theme cannot re-tint them. Fill, label, hover, focus ring and the 1px edge are all restated, so no interaction state slips through. */ html[data-theme="brand-amber"] .site-header__actions .lgx-btn--primary { --action-primary-bg: #B39457; /* gold-500 */ --action-primary-bg-hover: #C9AE7A; /* gold-400 */ --action-primary-fg: #292722; /* charcoal-900 */ --focus-ring: #292722; border-color: #9A793E; /* gold-600 */ } /* ========================================================================== LANDING GATEWAY (landing.css) -------------------------------------------------------------------------- landing.css predates the design system and carries its own :root vars plus a handful of literal rgba()/hex values that no variable reaches. The var remap below covers most of it; the rules after it are the specific literals in the split-gateway layout that landing1.html actually uses. Scoped by [data-theme] so landing.css itself stays untouched. ========================================================================== */ html[data-theme="brand-amber"] body { --ivory: #F7F3DF; --ivory-hi: #FFFFFF; --ivory-low: #EFE6CD; --navy: #8A3410; --navy-deep: #5A2109; --navy-mid: #A64010; --gold: #E39A3C; --gold-dark: #93380E; --ink: #231815; --muted: #6B5B52; --line: #DCCFAE; } /* The literals landing.css hard-codes in the split gateway. Same rules, same opacities, same gradient stops — only the channel values move, so the scrim strength and legibility behave exactly as they do now. */ html[data-theme] .split-choice::after { background: linear-gradient(0deg, color-mix(in srgb, var(--navy-deep) 94%, transparent), color-mix(in srgb, var(--navy-deep) 12%, transparent)); } html[data-theme] .split-copy p { color: color-mix(in srgb, var(--ivory) 82%, var(--navy-mid)); } html[data-theme] .split-choice + .split-choice { border-left-color: color-mix(in srgb, var(--gold) 65%, transparent); } html[data-theme] .lang-nav a { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--navy-deep) 82%, transparent); } html[data-theme] .lang-nav a:hover { background: var(--gold-dark); } html[data-theme] .skip { background: var(--ivory-hi); color: var(--navy); } @media (max-width: 850px) { html[data-theme] .split-choice + .split-choice { border-left-color: transparent; border-top-color: color-mix(in srgb, var(--gold) 65%, transparent); } }