/* ========================================================= TrueOpen · brand layer (English site) Two things: the fonts, and the four hero value points. Additive — load LAST. No copy changes, no DOM changes. ========================================================= */ /* ========================================================= 1 · FONTS — the site declared three and loaded none ========================================================= styles.css body font-family: Inter, … brand-logo.css .brand-lockup "Avenir Next", …, Arial brand-logo.css .brand-word "Avenir Next", …, Arial ← nav + footer (various) .kicker/.mono "JetBrains Mono", … There is no @font-face anywhere in the package and no Google Fonts link, so none of those files were ever fetched. Every visitor saw whatever their own machine substituted: Segoe UI on Windows, 苹方 on macOS, Liberation Sans on Linux. Three people, three different-looking websites. It is also why the wordmark looked thin. "Avenir Next" ships only with macOS, so everyone else fell through to Arial — and Arial has no weight 500, so `font-weight: 500` on a 96px display wordmark drew Arial REGULAR. That was never a design choice, it was a missing file. Fixed by self-hosting the woff2 next to the page: no Google request, no third-party dependency, nothing about a visitor leaves this origin. Both families are VARIABLE — one file covers weight 100-900, so the wordmark at 700 and the body at 400 cost a single download between them. Total added weight: 86 KB. --------------------------------------------------------- */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; /* copy is readable immediately */ src: url("assets/fonts/geist-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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("assets/fonts/jetbrains-mono-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; } /* Body. Geist goes in front of Inter in the one place the cascade starts, rather than editing the dozens of selectors that name Inter individually. */ html[lang="en"] body, html[lang="en"] body.template-home, html[lang="en"] body.detail-page { font-family: "Geist", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* The hero wordmark. A display wordmark needs a display weight: 500 in a face that has no 500 is exactly what produced the thin fallback, and 700 in a variable font is a real instance. */ html[lang="en"] body .brand-lockup, html[lang="en"] body.template-home .hero h1.brand-lockup { font-family: "Geist", Inter, -apple-system, sans-serif !important; font-weight: 700 !important; letter-spacing: -.018em !important; } /* The header and footer wordmark. This is `.brand-word`, a DIFFERENT element from the hero's `.brand-lockup-text` — it is the third place "Avenir Next" was declared, and fixing only the hero left the nav still drawing in the Arial fallback. 600 rather than 700 on purpose: at 20px a mark needs less weight than at 96px to read as the same thing. */ html[lang="en"] body .brand-word, html[lang="en"] body.template-home .brand-word, html[lang="en"] body.detail-page .brand-word { font-family: "Geist", Inter, -apple-system, sans-serif !important; font-weight: 600 !important; letter-spacing: -.012em !important; } /* Numbers that sit in a column or a ladder need fixed-width digits; proportional ones make a list of dates and "35B-A3B" wobble. */ html[lang="en"] body .mono, html[lang="en"] body .chain, html[lang="en"] body .kicker, html[lang="en"] body .evidence-code, html[lang="en"] body table { font-variant-numeric: tabular-nums; } /* ========================================================= 2 · THE FOUR HERO VALUE POINTS ========================================================= english-hero.css:90-93 gives them four separate colours: #b3a2d8 dull violet #d4b785 dull tan #9acbc5 grey-green #91cba8 grey-mint All four are desaturated pastels on a near-black field. Measured against the hero background (#05070d) they come out at 8.7, 10.5, 11.2 and 10.8 to 1 — against 16.1:1 for the strapline sitting directly above them. So they are the dimmest thing on the first screen, and they are dim by 40-45%, which is what "有点暗" is. Four washed-out hues for what is one statement is the other half: low chroma plus low contrast is the combination that reads dated. One family now, and brighter: #eaf4f8 measures 18.0:1, so the four points are finally at least as present as the line above them. The accent moves into the dot, where a small amount of saturated cyan (12.0:1) does more work than four washed-out tints ever did. --------------------------------------------------------- */ html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(n) { font-weight: 500 !important; font-size: 16px !important; letter-spacing: -.004em !important; } /* --- ACTIVE: one hue, four values, all of them bright --------------- White into cyan, top to bottom. It is colour — the four points are visibly four different colours — but they are four steps of ONE colour, so the row still reads as a single statement instead of four unrelated labels. Every step is picked from the bright end of the family on purpose. The brand cyan #22cad6 measures 10.1:1 here, which is DARKER than three of the four pastels it replaces — so using it as text would have walked straight back into "有点暗". These four are 18.0 / 14.6 / 13.7 / 11.8, against 16.1:1 for the strapline above. */ html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(1) { color: #eaf4f8 !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(2) { color: #9be9f2 !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(3) { color: #6fe6ef !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(4) { color: #45d9e4 !important; } /* --- ALTERNATIVE: 青三 + 金一, gold on the lead claim ----------------- Swap the four lines above for these four to bring 金 in. Gold sits on "Cost-Efficient Verification" because that is the claim the business leads with, and because gold appears nowhere else on this page — one gold per screen is what keeps it an accent. 14.6 / 13.7 / 12.8 / 11.8. html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(1) { color: #f7d97f !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(2) { color: #6fe6ef !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(3) { color: #9bd7ee !important; } html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(4) { color: #45d9e4 !important; } --------------------------------------------------------------------- */ /* The dot takes its colour from the text, one notch more saturated, with a small glow. `currentColor` keeps the two in step whichever of the two sets above is active. */ html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(n)::before { color: currentColor !important; opacity: 1 !important; width: 5px !important; height: 5px !important; flex: 0 0 5px !important; filter: saturate(1.5); } @media (max-width: 760px) { html[lang="en"] .template-home .hero .hero-statement.hero-five > span:nth-child(n) { font-size: 14px !important; } }