/* =============================================================================
Metro Heights Residents' Club — DIRECTION A, "Blue Hour"
Chosen 2026-09-03. This file is the design-system floor for the MHRC site.
Every color below was sampled from a pixel in brand/metro-heights/prepped/.
Reasoning, provenance and the rejected directions: BRAND.md next to this file.
NAMING, settled 2026-09-03 — applies to every word on every surface:
MHRC = the organization (residents' volunteer club)
the clubhouse = the building (what the developer markets as "The Club")
Never "the Club" unqualified. Not in copy, headings, button labels, alt
text, or bot output. The two things are different and residents cannot
tell them apart from context.
Fonts (Google Fonts is the one host the Artifact CSP admits):
Jost is NOT loaded above on purpose. It sets the wordmark only, and once the
lockup is outlined the page needs no third font at all. If you are building
before that happens, add &family=Jost:wght@500 and use --mh-font-wordmark.
============================================================================= */
:root {
/* --- the six roles ------------------------------------------------------ */
--mh-ground: #071A2B; /* the field of the MHRC mini-app card */
--mh-surface: #0E2C45; /* logo navy, lifted one step */
--mh-line: #1E4360; /* clubhouse glass at dusk, 01_The_Club */
--mh-text-muted: #8FA8BC; /* marine-layer haze over the basin 7.13:1 */
--mh-text: #E7EEF4; /* the wordmark white in the logo 15.05:1 */
--mh-deep: #03101C; /* night sky above the Club, IMG_9670 */
/* --- the one accent ----------------------------------------------------- */
--mh-accent: #4FB8B4; /* the pool. #63B8B8 at noon, #558E96 at dusk
7.42:1 on ground — safe for links and labels */
/* --- derived from the above, not sampled -------------------------------- */
--mh-surface-2: #143A57; /* nested panel inside a surface */
--mh-line-strong: #2C5A7C; /* a rule that has to be seen, not felt */
--mh-accent-hover:#6FCFCB; /* 9.62:1 on ground */
--mh-accent-press:#3FA5A1; /* 5.96:1 on ground */
--mh-on-accent: #071A2B; /* ink on an accent fill — literally the ground */
--mh-focus: #8FE3E0; /* focus ring, 11.94:1 on ground */
/* --- status: LOAD-BEARING, not decorative ------------------------------- */
/* red = error/refusal, yellow = caution/partial, green = success.
Convention is fixed by AGENTS.md in the bot repo. Do not restyle these to
fit a layout; they mean something. Telegram equivalents: ❌/🔴 ⚠️/🟡 ✅/🟢 */
--mh-error: #FF6B5E; /* 6.31:1 on ground, 5.13:1 on surface */
--mh-caution: #F2B441; /* 9.55:1 on ground, 7.77:1 on surface */
--mh-success: #6FCF6A; /* 9.07:1 on ground, 7.38:1 on surface
hue 117 — 61° clear of the accent's hue 178 */
/* --- brass: LOGO ONLY --------------------------------------------------- */
/* ⚠️ The logo brass (hue 33) sits eight degrees from --mh-caution (hue 41).
As two chips side by side they are the same color. The rule that keeps
them apart is absolute:
BRASS IS NEVER A DOT, PILL, CHIP, BADGE, BUTTON OR FILL.
It is a line weight inside the mark, and nothing else.
Buttons, links, rules and icons are --mh-accent or nothing. If you find
yourself reaching for brass in the interface, you have picked the wrong
direction, not the wrong shade. */
--mh-brass: #C9924E; /* flat working mid of the logo's gradient */
--mh-brass-dark: #8A5F2A; /* only for the mark on a light ground */
/* --- type --------------------------------------------------------------- */
--mh-font-display: "Instrument Serif", "Iowan Old Style", Georgia,
"Times New Roman", serif;
--mh-font-text: Inter, "SF Pro Text", -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Wordmark only — never body, never headings. Jost 500, a Futura revival
matching the original's closed C, geometric R and splayed M. Temporary:
the lockup gets outlined, after which this token can be deleted. */
--mh-font-wordmark: Jost, Questrial, "Century Gothic", Futura,
"Trebuchet MS", sans-serif;
/* Body copy is English — Turrit translates it for each reader.
Button labels and command descriptions ship ALREADY TRANSLATED, because
Turrit cannot translate them. An English body with Chinese buttons is
correct. See "the language contract" in the bot's AGENTS.md.
CJK falls through to the system face on purpose; do not add a webfont
for it without testing button-label wrapping first. */
--mh-step--1: 0.8125rem; /* 13px — button labels, captions */
--mh-step-0: 0.9375rem; /* 15px — body on a phone */
--mh-step-1: 1.0625rem; /* 17px — body on desktop */
--mh-step-2: 1.375rem; /* 22px — sub-head */
--mh-step-3: clamp(1.75rem, 3vw, 2.25rem);
--mh-step-4: clamp(2.25rem, 5vw, 3.5rem);
--mh-step-5: clamp(3rem, 8vw, 5.5rem); /* display only, serif */
--mh-leading-tight: 1.08; /* display */
--mh-leading-body: 1.62; /* running text */
--mh-tracking-label: 0.16em; /* uppercase labels only */
/* --- space & shape ------------------------------------------------------ */
--mh-space-1: 0.5rem;
--mh-space-2: 0.875rem;
--mh-space-3: 1.375rem;
--mh-space-4: 2.25rem;
--mh-space-5: 3.5rem;
--mh-space-6: 5.5rem;
--mh-radius: 3px; /* dusk is soft; the geometry is not */
--mh-measure: 66ch; /* running-text column */
}
/* -----------------------------------------------------------------------------
Direction A is single-theme on purpose. It is a dark page because the
photographs are dark; a light variant would be a different direction, not a
mode. Paint the ground explicitly so the page never borrows a host's.
-------------------------------------------------------------------------- */
body {
background: var(--mh-ground);
color: var(--mh-text);
font-family: var(--mh-font-text);
font-size: var(--mh-step-1);
line-height: var(--mh-leading-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--mh-font-display);
font-weight: 400;
line-height: var(--mh-leading-tight);
text-wrap: balance;
color: var(--mh-text);
}
a { color: var(--mh-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--mh-accent-hover); }
a:active { color: var(--mh-accent-press); }
:focus-visible {
outline: 2px solid var(--mh-focus);
outline-offset: 2px;
}
::selection { background: var(--mh-accent); color: var(--mh-on-accent); }
/* -----------------------------------------------------------------------------
IMAGERY — decided 2026-09-03, and it is a rule, not a preference.
EXACTLY ONE PHOTOGRAPH ON THIS SITE HAS FACES IN IT:
/assets/ridge-sunset-family.jpg — Sonny's wife Susan holding their daughter
at sunset on the ridge. Everything else follows from that.
1. That photograph is the only one. Not "few" — one. Scarcity is what
makes it read as a statement instead of a brochure. A second face
photograph costs the first one its whole effect.
2. It earns the slot because it is unfakeable and because it holds the
entire Blue Hour thesis in one frame: the ridge, the trail, the sunset
over the basin, and the neighborhood on the hill behind. No stock
library has this picture. That is the point.
3. ⚠️ NOT the og:image / social share card. That frame gets scraped,
cached by third parties and shown in other people's link previews out
of context — and a face buys nothing at thumbnail size anyway. Use a
dusk frame with no people there (IMG_9929, the contrail, reads best
small).
4. Every other image shows the EVIDENCE of people, never people. Lit
windows. Chairs left out. The pool twenty minutes after everyone went
in. A street of parked cars at dusk.
5. Human presence otherwise lives in the COPY — real resident questions,
volunteer names, the numbers (1,200 homes, roughly 545 sold).
6. ⚠️ NO STOCK PHOTOGRAPHY OF PEOPLE. Ever. A stock family on a
residents' club page reads more like a developer than an empty street
could, and it would make the one real photograph look staged.
⚠️ METADATA — applies to every photograph that ships, without exception.
The original of the family photograph carried GPS to within five meters of
where they were standing, plus the exact timestamp. /assets/ridge-sunset-
family.jpg is the cleaned master: rotation baked into the pixels, all EXIF
stripped, verified zero. Never ship a file straight out of prepped/ or
source/ — strip it first, and check.
The filename deliberately does not contain the child's name, because a
filename becomes a public URL.
Developer photography (och_*, *_The_Club_*) is cleared for use as of
2026-09-03. It is still daylight, so under Direction A it is supporting
material, not hero material.
-------------------------------------------------------------------------- */
/* The mark. One color, driven by `color`, from logo/01-mark.svg.
On this ground it needs no plate, no border and no box — the ground is
within four percent of the logo's own field. That is true of Direction A
and of nothing else.
⚠️ The mark reads as the numeral 4 at small sizes. That is INTENTIONAL —
confirmed 2026-09-03. Three strokes make it: the long rake, the ⅓ vertical,
and the crossbar at .571 of the height. Any future simplification of the
mark must keep all three. logo/03-mark-small.svg already does; dropping the
crossbar to "clean up" an icon would delete the numeral. */
.mh-mark { color: var(--mh-brass); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}