/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════
Hermoso — marketing design system · v19 "GOLDEN HOUR", re-tempered to PORCELAIN 2026-08-06
Reference: Getharvest (styles.refero.design/style/1eee9aa2-1e23-4675-9f6e-fb98c93969bd), read live 2026-08-05.
Their sentence, verbatim: "Golden hour workbench — warm cream canvas, white floating cards, and one vivid
orange flame." That is the whole brief — a warm canvas (never #ffffff), white cards that float on it
by shadow rather than by contrast, 16px/20px soft radii, and one vivid orange that carries every CTA, link
and active state.
══ PORCELAIN — THE NEUTRAL RAMP IS NO LONGER PARCHMENT (2026-08-06) ═══════════════════════════════════════
Dave, on this page and on the app's Connectors screen the same morning: "i dont love this background
yellowish color … i think the orange/brownish hues are what im not liking, it looks like old faded paper."
The GOLDEN HOUR *structure* is untouched and still right — warm canvas, white cards floating on shadow, one
flame. What is wrong is the TEMPERATURE of the neutrals, and it is measurable. "Aged paper" in a near-white
is the signature G-B > R-G: blue falls away while green holds, which is the definition of yellow. The old
chip #f7ecdd was R-G 11 / G-B 15 at OKLCh hue 76°, and --bg-2 / --line / --hair were the same shape.
THE TRANSFORM, in OKLCh: HOLD L · C × 0.55 · h → 48°. Holding L means contrast is a pure function of
luminance, so every ratio quoted in this file survives to within ±0.05 — a re-skin is exactly when controls
go invisible, and this one structurally cannot move a ratio (tools/interactive-contrast-check.mjs measures
it on painted pixels rather than trusting this paragraph). 48° is chosen, not arbitrary: the flame itself is
OKLCh h=41°, so the neutrals become a heavily desaturated TINT OF THE BRAND rather than an unrelated beige —
ddna's "a single temperature of pigment" (refero, warm museum vitrine on raw linen: Linen Cream #efe3dc
h53, Warm Sand #dacabf h57). Chroma halves rather than vanishing, so the result is porcelain/plaster, not
grey: Bang & Olufsen's canvas is literally #ffffff and Poly's #f4f4f4 is achromatic, and both were rejected
as the sterile end of the same axis, which is the half of the brief that says "warm, not white".
THE ATMOSPHERE MOVED WITH IT, and it had to. The marigold wash #fee3b5 is hue 81° — a butter yellow — and
at full-bleed hero scale it IS a "background yellowish colour" no token change would have fixed. It and the
amber card glow rotate to the flame's own hue at reduced chroma (peach #ffdecd / rgba(237,167,137)), and
the sepia elevation shadows rgba(146,94,20) / rgba(120,78,20) — a tea stain under every card — become warm
stone at identical alphas, so elevation strength is byte-for-byte what it was.
WHAT IS DELIBERATELY UNTOUCHED: --coral / --cta / --ember / --coral-line and every radius, type and spacing
value. The complaint was the background family; the flame is settled ([[cta-green-not-coral]]) and gets
HOTTER for free, because a quieter canvas is what a single accent needs. --coral-text is the one accent
that moved, and only by one step (#bb4600 → #b84400): it measured 4.49 on the new deepest chip and had
already been sitting on the 4.5 line at 4.51 before this pass — a token that passes by rounding is a defect
waiting for the next re-skin.
WHY THIS REPLACES v18 "DARKROOM". v18 was ORYZO — a warm near-black canvas — and Dave's verdict was "It's
so dark, and I don't love all the brown." The pass before it (Apple España) failed the opposite way:
near-monochrome, "it doesn't look like you redesigned the website at all." Getharvest sits between them by
construction: it KEEPS the warmth of the darkroom and DROPS the darkness, and cream + white + a hot orange
cannot be mistaken for an un-redesigned page.
WHY THIS IS STILL A LAYER AND NOT A REWRITE. The site ships FOUR generation stylesheets — site.v12 (404),
v13 (128 blog pages), v15 (271 landers/pricing/tools/mcp) and v17 (the 32 homepages) — and all four declare
the SAME :root token names. One file appended after whichever version a page already loads re-skins all 446
pages at once. v18 proved the mechanism; this file inherits it, keeps its section order, and changes values
rather than structure. The type scale, spacing, dashed-rule motif and the flow/console/video devices are
untouched.
THE ONE STRUCTURAL INVERSION, and it is deliberate: v18 zeroed elevation (`--el-1: none`) because ORYZO
rejects shadows and builds depth from a luminance step. Getharvest is the opposite and says so — their
feature card is "fill #fff8f1, same as canvas — depth comes from shadow not contrast", with a warm
rgba(250,166,0,.25) glow — THEIR values, quoted, and deliberately left at their originals here even though
ours have since moved (a vendor quotation rewritten to our numbers stops being evidence of anything).
A white card on cream is a 1.05:1 step, so on THIS system the shadow is not
decoration, it IS the card boundary. Elevation comes back, warm-tinted, and their "never use cool
blue-tinted shadows" rule is why every shadow here carries an amber hue instead of grey.
WHAT WAS DELIBERATELY NOT TAKEN FROM GETHARVEST — each a documented refusal, not an omission:
· Their brand LINK colour, #fa5d00 on cream. MEASURED at 3.01:1 — it fails AA for body text on their own
canvas. Links here take --coral-text #b84400 (5.16:1), the same hue deepened. The vivid flame is kept
for FILLS and large display moments, where 3:1 is the right floor.
· Their CTA spec, which CONTRADICTS ITSELF: the Components section says "Fill #fa5d00, Text #ffffff"
(3.17:1 — under AA for the 16px/600 label they specify) while their Agent Prompt Guide says
"#fa5d00 background, #1d1e1c text" (5.28:1). We take the ink, i.e. the half of their own doc that is
accessible.
· Their input border "Bone" #c0bbb6 — 1.81:1, far under the 3:1 WCAG 1.4.11 asks of a control outline.
--line-2 is #8e8784 instead.
· MuotoWeb + Monarch. We keep Fraunces + Hanken Grotesk: they are self-hosted, already preloaded, and a
new font host would need a CSP change. Their TRACKING rule is adopted (positive 0.015em on UI text,
which is the opposite of the negative display tracking v17 shipped).
· Their "one peach card per page" scarcity rule for the marigold wash is kept in spirit — the wash is
atmosphere here and never a text surface, because ink is the only thing readable on it.
· Uppercase. NOT extended, exactly as in v18: we ship 32 locales, and uppercasing breaks Greek
final-sigma and Turkish dotted/dotless i, is meaningless in ja/zh/ko/th, and inflates German ~30%.
Uppercase survives ONLY where it already lived — mono eyebrows, plaques, labels, the film slate.
EVERY RATIO BELOW IS COMPUTED (WCAG 2.x), against the WORST surface each token actually lands on, and the
light mid-tones are where this palette fails if you trust the reference: three of Getharvest's own published
neutrals (Ash #777571, Driftwood #8e8b87, Bone #c0bbb6) do not reach AA on their own cream.
═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
/* ── the surface stack. Getharvest's own is only two deep (cream canvas, white card) because a marketing
page has no dense chrome; a lander has cards inside bands inside a page, so this keeps v18's four
steps and re-points them upward. Each is one small WARM step — the hue never leaves the cream family. */
--bg: #fdf8f6; /* Porcelain Canvas — Getharvest cream, de-yellowed (was #fff8f1). "the warmth IS the system identity", and it survives the rotation. NEVER #fff. */
--bg-2: #faf1ec; /* the alternating band — one step down the porcelain ramp. */
--surface: #ffffff; /* Paper White — Getharvest exact. The card that floats. */
--surface-2: #fcf6f3; /* card hover / inset. */
--surface-3: #f5ebe6; /* chips, filled controls, the deepest step. */
--ink-well: #ffffff; /* v13/v15 alias for a card fill. */
/* ── hairlines. The DASHED motif is v18's and it survives the inversion intact — it is the one structural
move that stops a page reading as a generic SaaS template, and it reads on cream exactly as it read on
walnut. Only the hue moves. --driftwood is the line that has to READ (3.34:1, over the 1.4.11 floor). */
--line: #e9dfda; /* the quiet dashed edge. Decorative — always paired with a step or a shadow. */
--line-2: #8e8784; /* a control's own edge, and any line that must be SEEN: 3.35:1 on the canvas. */
--hair: #f2e9e4; /* barely-there. */
--hairline: #e9dfda; /* v15 alias — .ui-frame/.tease/.mcpw name this one. */
--cork: #e9dfda;
--driftwood: #8e8784; /* STRUCTURAL ONLY: dividers, diagram strokes. NOT TEXT (Getharvest's own #8e8b87
measures 3.22:1 on cream and would fail as body copy). */
/* ── ink. Ratios quoted against the four surfaces above, worst last:
--text 15.90 / 15.05 / 16.74 / 14.34 (canvas / band / card / deepest chip)
--muted 8.01 / 7.59 / 8.43 / 7.22
--faint 5.04 / 4.77 / 5.30 / 4.54 ← the worst pair on the site, and still AA at any size. */
--text: #1d1e1c; /* Ink Black — Getharvest exact. Warm near-black, never #000. */
--muted: #4f4d49;
--faint: #6e6b67;
--ink: #1d1e1c; /* v15 alias. */
--cream: #1d1e1c; /* STILL INVERTED, and for the same reason v18 inverted it: in v13/v15/v17 --cream meant
"the ink that sits ON a filled accent control". On the flame that ink is Ink Black
(5.28:1); white on the same fill is 3.17:1 and misses. Every rule that says
color:var(--cream) keeps working and comes out correct. */
/* ── THE ACCENT. Getharvest: "Use #fa5d00 exclusively for primary actions, active states, and brand moments
— never for body text", and "don't introduce a second accent colour — the system's discipline is one
orange against warm neutrals." That is a stricter rule than ORYZO's and it is followed literally: the
flame is the ONLY chromatic decision on the page.
THE SPLIT IS A MEASUREMENT, not a preference. The flame is 3.01:1 on cream — correct for a FILL or a
large display word (3:1 floor for a UI object / large text), wrong for a 16px link (4.5). So:
--coral #fa5d00 fills, active surfaces, display emphasis, the bloom
--coral-text #b84400 links and any text under 24px — 5.00 / 4.73 / 5.26 / 4.51
--coral-line #d24e00 focus rings and strokes — 3.73:1 at worst, with margin for the wash */
--coral: #fa5d00;
--coral-text: #b84400;
--coral-line: #d24e00;
--coral-hot: #d24e00; /* hover on a text link — deeper, not lighter, because the page is light now. */
--coral-deep: #a33d00; /* pressed. */
--coral-solid: #fa5d00; /* fill, when a fill is genuinely the flame (the "most popular" tag). */
--ember: #fa5d00;
--marigold: #ffdecd; /* Marigold Glow, rotated off butter-yellow to the flame's hue. ATMOSPHERIC ONLY, never a text surface. */
--plum: #7a4d63;
--gold: #8a5a00;
/* ── THE PRIMARY CTA, AND THE DIVERGENCE THAT JUST DISAPPEARED.
v18 had to make the site's CTA CREAM, because ORYZO's rule is that the accent never touches a button
and their own Bark-Brown fill measured 1.35:1 on the walnut canvas. That forced the site and the app
to disagree about what a primary button looks like, and v18 called the divergence out as a compromise.
Getharvest's accent IS the button — their primary CTA is a filled flame pill — so the compromise is
gone and both surfaces now say the same thing: a flame fill with Ink Black on it, 5.28:1.
This does not reopen [[cta-green-not-coral]]. That rule settled MEANING — green = go, red =
destructive, coral/orange = BRAND — and Dave chose "the CTA is the brand colour" on 2026-07-25. The
brand colour moved; the CTA follows it. The site has no destructive actions to stay distinct from. */
--cta: #fa5d00;
--cta-hot: #e05300;
--cta-ink: #1d1e1c;
/* ELEVATION IS BACK — see the header note. Getharvest's own two shadows, hue-matched to the cream base
("the shadow hue is not neutral gray but matches the cream base" — kept, but matched to the PORCELAIN base rather than to their parchment, so the halo is warm stone and not a tea stain). */
--el-1: 0 1px 2px rgba(123,101,92,.08), 0 6px 16px -8px rgba(123,101,92,.14);
--el-2: 0 2px 5px rgba(123,101,92,.10), 0 18px 40px -18px rgba(102,84,76,.22);
--el-glow: 0 10px 40px -18px rgba(237,167,137,.35);
/* Getharvest's shape vocabulary, near-whole: "Apply 16px radius to all buttons and inputs, 20px to all
cards — these two values are the system", and "don't use sharp 0-4px corner radii". */
--r-sm: 12px;
--r: 16px;
--r-lg: 20px;
--r-xl: 24px;
--pill: 999px;
--glow: rgba(250,93,0,.16);
--glow-2: rgba(255,222,205,.55);
/* ── THE ORPHANED ALIASES FROM THE OLDER SHEETS. v13 and v15 declare four colour tokens that appear nowhere
in the list above, so a token override alone never reaches them — v18 found this by DIFFING every `--x:`
declared in v12/v13/v15/v17 against the set it declared, not by looking, and two of them are BACKGROUNDS,
which do not announce themselves in a token file. They are re-pointed again here rather than given new
values, so they move with the stack from now on.
--ink-muted is the BODY COPY colour on 28 rules across v13+v15 — hero leads, paragraphs, tooltips, the
model row, pull quotes, the MCP wizard's tabs and its copy button.
--paper / --paper-2 are FILLS: .filmstrip, .ui-frame .ui-bar, .agentdemo, .mcpw-tabs, .mcpw-code.
(--cinema / --cinema-ink are deliberately NOT touched: they are a matched dark-surface + light-ink pair,
and the film-strip device stays a dark plate on purpose — it is a cinema screen, not a page surface.) */
--ink-muted: #4f4d49; /* = --muted. 8.01:1 on the canvas, 7.22:1 on the deepest chip. */
--paper: #faf1ec; /* = --bg-2, the alternating band. */
--paper-2: #ffffff; /* = --surface, a card plane. */
}
/* ── 1 · THE CANVAS ──────────────────────────────────────────────────────────────────────────────────────
Getharvest's hero sits on a "decorative flowing gradient wash of #fa5d00, #ffdecd and warm peach tones …
that suggest movement without ever competing with content", and their own guard-rail is "don't apply
saturated colours to large background fills". So: a marigold pool entering from the top-right like light
through a window, one whisper of flame at the far left, and the fine grain kept so cream has a surface
rather than reading as a flat fill. The `!important` is inherited from v18 and is not a specificity fight —
v17's gallery layer explicitly disabled these with `display:none !important`. */
html{ background:var(--bg); color-scheme:light; }
body{ background:var(--bg); color:var(--text); }
body::before{
content:"" !important; display:block !important; position:fixed; inset:0; z-index:0; pointer-events:none;
opacity:.5; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
}
body::after{
content:"" !important; display:block !important; position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(58% 42% at 88% -6%, rgba(255,222,205,.62), transparent 66%),
radial-gradient(46% 34% at 4% 2%, rgba(250,93,0,.05), transparent 62%);
}
::selection{ background:rgba(250,93,0,.22); color:var(--text); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#dfd0bd; border-radius:999px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#c9b79f; }
/* ── 2 · BANDS. Two adjacent bands are never the same value, so the divider between them is redundant —
except that the dashed rule is a MOTIF, so it comes back in §4 where it separates ideas rather than
colours. The direction inverts from v18: on darkness a card was LIGHTER than its band; on cream a card
is WHITER, which is the same "one step toward the light source" rule seen from the other side. ────── */
main > section{ background:var(--bg); }
main > section:nth-child(even){ background:var(--bg-2); }
.hero{ background:transparent; }
.cinema, .formats, .trust{ background:var(--bg-2); border-top:0; border-bottom:0; }
.footer{ background:var(--bg-2); border-top:1px dashed var(--line); }
.page-hero, .page-hero-in{ background:transparent; }
/* ── 3 · TYPE. Getharvest's typographic law is the opposite of v17's and the same as v18's in sign but not in
size: "use 0.015em POSITIVE letter-spacing on all text — this tracks-wide feel softens the geometric
sans". v17 had pushed display type to -.028em to make a near-white page feel tight; v18 relaxed it to
-.006em for cream-on-black. On cream-with-black ink the reference's own answer applies directly. ──── */
h1,h2,h3,.tt,.h1,.h2,.h3,.display,.pullq,.big-quote{ letter-spacing:-.004em; }
.hero h1{ letter-spacing:-.006em; }
h1,h2,h3,.tt{ color:var(--text); }
h2 i,.tt i,h1 em,.pullq i,.serif-i{ color:var(--coral-text); font-style:italic; font-weight:400; }
/* the gradient wordplay survives. On cream a warm gradient must DARKEN rather than lighten, or the word
disappears — the stops run flame → deep flame → gold, all of which are ≥3:1 at display size. */
h1 em.key, .closer h2 em.key, .hero h1 em.key .rotw-in{
background:linear-gradient(100deg, var(--coral), #d24e00 52%, #8a5a00) !important;
-webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
}
p,.lead{ color:var(--muted); }
.dim,.faint,.meta,.updated,.price-note{ color:var(--faint); }
.eyebrow,.eyebrow13,.mono,.slate,.fstep-n,.install-lbl,.rail-kind,.plaque,.t-name,.fmt-name,.foot-col h3,
.trust-label,.fs-label,.ftool-lab{ color:var(--faint); }
.eyebrow,.eyebrow13{ color:var(--coral-text); }
.mono .dot{ background:var(--coral); box-shadow:0 0 14px 2px var(--glow); opacity:1; animation:pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .mono .dot{ animation:none; } }
.slate::before{ background:var(--coral); box-shadow:0 0 12px var(--glow); }
.stat b,.num,.big,.amt,.price,.t-amt{ color:var(--text); }
.stat:nth-child(2) b{ color:var(--coral-text); }
code,kbd,.kbd{ color:var(--muted); }
a{ color:inherit; }
.prose a,.post-dek a,.callout a,.flow-note a,.cc-msg a{ color:var(--coral-text); }
.prose a:hover,.flow-note a:hover{ color:var(--coral-deep); }
.flow-note a{ border-bottom-color:rgba(250,93,0,.42); }
.flow-note a:hover{ border-bottom-color:var(--coral); }
/* ── 4 · THE DASHED HAIRLINE. Kept exactly as v18 built it — this is the structural motif the redesign
carries forward, and it belongs to Hermoso now rather than to ORYZO. A control's own edge stays SOLID,
because a dashed button outline reads as a dropzone. ──────────────────────────────────────────────── */
.move + .move,
.install-row + .install-row,
.install-foot,
.toolfam > code,
.qa,
.foot-bottom,
.post-card + .post-card,
.compare-row,
.credits-row,
.checklist li + li,
.steps .step + .step,
.blog-list li + li{
border-top:0; border-bottom:0;
border-block-start:1px dashed var(--line);
}
.qa{ border-block-start:0; border-block-end:1px dashed var(--line); }
.foot-bottom{ border-block-start:1px dashed var(--line); }
.ticker{ border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
main > section + section{ position:relative; }
main > section:nth-child(even) + section:not(:nth-child(even))::before,
main > section:not(:nth-child(even)) + section:nth-child(even)::before{ content:none; }
/* ── 5 · SURFACES. Every card in every one of the four stylesheets, resolved to one plane vocabulary.
THE DEPTH MODEL INVERTS HERE and it is the heart of the reference: a white card on cream is a 1.05:1
luminance step, so the SHADOW is the card boundary, not the fill difference. Getharvest are explicit
("depth comes from shadow not contrast") and their shadow is amber, not grey. ────────────────────── */
.toolfam,.tease,.fmt-mini,.install,.promptcard,.ad-log,.ui-frame,.langmenu,.fstep,.rail,.flow-entry,.pcard,
.tile,.plan,.post-card,.card,.mcpw,.band,.cta-band,.ftool-card,.ftool-stage,.callout,.model-chip,.feature,
.shot,.stage-wrap,.media-frame,.gallery,.bento,.split,.compare,.credits,.chan-tools,.ftool{
background:var(--surface);
border-color:var(--line);
box-shadow:var(--el-1);
}
/* inside an already-tinted band a card stays WHITE — the step is always toward the light, in one direction,
exactly as v18 kept it always toward the dark. */
main > section:nth-child(even) :is(.toolfam,.tease,.fmt-mini,.install,.promptcard,.ad-log,.fstep,.rail,
.flow-entry,.pcard,.tile,.plan,.post-card,.card,.mcpw,.ftool-card,.callout,.model-chip){
background:var(--surface);
}
.toolfam:hover,.fmt-mini:hover,.tile:hover,.post-card:hover,.model-chip:hover{ background:var(--surface); box-shadow:var(--el-2); }
main > section:nth-child(even) :is(.toolfam,.fmt-mini,.tile,.post-card,.model-chip):hover{ background:var(--surface); }
.surface,.surface-2,.chrome{ background:var(--surface); }
.copyline,.ftool-seg,.mcpw-tabs,.ftool-drop{ background:var(--surface-3); border-color:var(--line); }
main > section:nth-child(even) .copyline{ background:var(--surface-3); }
.copyline{ color:var(--text); }
.copyline-x{ background:var(--surface); color:var(--muted); }
.copyline:hover{ border-color:var(--coral); }
.copyline:hover .copyline-x{ background:var(--coral); color:var(--cta-ink); }
.copyline.copied .copyline-x{ background:#146c3a; color:#fff; }
.copyline-pre{ color:var(--coral-text); }
.ui-bar{ background:var(--surface-3); border-bottom:1px dashed var(--line); }
.ui-bar i{ background:var(--line-2); }
.ui-bar i:first-child{ background:var(--coral); }
.ui-frame{ border:1px solid var(--line); }
img.pshield{ background:var(--surface-3); }
.hero-float,.reel-card,.fmt-media,.shot,.ad-out .th,.tile-media,.stage{
background:var(--surface); border:1px solid var(--line); box-shadow:var(--el-1);
}
/* the framed print floating on the workbench — a warm glow, which on cream is the amber shadow the reference
specifies rather than the light source v18 used it as. */
.hero-float{ box-shadow:var(--el-2), 0 0 90px -30px rgba(237,167,137,.45); }
.reel-card:hover,.fmt-card:hover .fmt-media,.ad-out .th:hover{ border-color:var(--coral); }
/* ── 6 · CONTROLS. One filled flame pill, one outlined ghost, one bare underline link — and Getharvest's
restraint rule, which matches ORYZO's: only one filled button per section. ──────────────────────── */
.btn{ border-radius:var(--r); letter-spacing:.015em; }
.btn-primary,.cc-accept,.btn.primary,.plan .btn-primary{
background:var(--cta); color:var(--cta-ink);
border:1px solid transparent;
box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.btn-primary:hover,.cc-accept:hover,.btn.primary:hover{
background:var(--cta-hot); color:var(--cta-ink); transform:translateY(-1px);
box-shadow:0 6px 20px -6px rgba(250,93,0,.5);
}
.btn-primary:active,.cc-accept:active{ background:var(--coral-deep); color:#fff; transform:none; box-shadow:none; }
.btn-ghost,.btn-text,.cc-btn,.btn.ghost{
background:transparent; color:var(--text); border:1px solid var(--line-2);
}
.btn-ghost:hover,.cc-btn:hover,.btn.ghost:hover{ background:transparent; color:var(--text); border-color:var(--text); }
.nav-cta .btn-ghost{ border-color:var(--line-2); }
/* the focus ring is --coral-line, not --coral: the vivid flame is 3.01:1 on cream and DROPS below 3 on every
other surface, so a ring painted in the accent itself fails 1.4.11 on exactly the filled controls that most
need a visible focus state. */
:focus-visible{ outline:2px solid var(--coral-line); outline-offset:3px; }
/* THE ELEMENT-SPECIFIC FOCUS RULES IN THE OLDER SHEETS MUST BE NAMED, NOT INHERITED. v12/v13/v15 each carry
their own `.nav-toggle:focus-visible`, `.mcpw-code:focus-visible` and `.ftool-*:focus-visible` painted in
--coral, and those are (0,2,0) — they OUTRANK the (0,1,0) default above, so re-pointing only the default
leaves them on the vivid flame. Measured on the composited pixel, the mobile Menu button's ring came out at
2.98:1 — under the 1.4.11 floor by two hundredths, on the one control a phone user needs most, and on the
~400 pages that are NOT the homepage. Same selector, later sheet, so source order settles it without
!important. */
.btn:focus-visible{ outline:2px solid var(--coral-line); outline-offset:3px; }
.nav-toggle:focus-visible{ outline:2px solid var(--coral-line); outline-offset:2px; }
.mcpw-code:focus-visible{ outline:2px solid var(--coral-line); outline-offset:2px; }
.ftool-field select:focus-visible,.ftool-field input:focus-visible,.ftool textarea:focus-visible{
outline:2px solid var(--coral-line); outline-offset:1px; }
.skip{ background:var(--cta); color:var(--cta-ink); }
.move-link,.t-go,.pc-more,.fmt-mini--cta,.post-cta,.fk-go,.btn-text{ color:var(--coral-text); }
.move-link:hover,.t-go:hover,.post-cta:hover{ color:var(--coral-deep); }
.tease:hover .t-go{ color:var(--coral-deep); }
/* form controls (the free-tools pages are 40+ of the 446) */
.ftool-field select,.ftool-field input[type=text],.ftool textarea,.ftool input.ftool-line,
.hero-form input,.field input,.field textarea,input[type=email],input[type=url]{
background:var(--surface); color:var(--text); border:1px solid var(--line-2); border-radius:var(--r);
}
.ftool-field select:focus,.ftool textarea:focus,.ftool input.ftool-line:focus,
.field input:focus,input[type=email]:focus{ border-color:var(--coral); outline:none; box-shadow:0 0 0 3px rgba(250,93,0,.18); }
::placeholder{ color:var(--faint); opacity:1; }
.ftool-seg button.on,.mcpw-tabs button.on{ background:var(--surface); color:var(--text); box-shadow:var(--el-1); }
.ftool-cell .fc-d{ background:var(--surface-3); color:var(--text); border-color:var(--line-2); }
.ftool-out,.ftool-rows,.ftool-line{ color:var(--muted); }
/* ── 7 · NAV. Transparent over the cream; on scroll a warm frosted pane, not a grey bar.
THE RESTING STATE IS DECLARED EXPLICITLY, and that is not tidiness — v18's own note records that it forgot
to, so v15's `.nav{ background:rgba(250,248,243,.72) }` survived at desktop width un-scrolled and the whole
top navigation of ~275 pages measured 1.12:1. It is the ONE state a screenshot of a scrolled page never
shows. Both states are written here, in both directions. ─────────────────────────────────────────────── */
.nav{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid transparent; }
.nav.scrolled{
background:rgba(253,248,246,.82);
-webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
border-bottom:1px dashed var(--line);
}
.nav-links a{ color:var(--muted); }
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{ background:var(--coral); }
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{ background:var(--text); }
.nav-toggle{ background:transparent; border-color:var(--line-2); }
.brand,.brand b{ color:var(--text); }
.bloom{ filter:none; }
@media (max-width:860px){
.nav{ background:rgba(253,248,246,.90); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
}
/* ── THE MOBILE MENU CONTAINING-BLOCK FIX, carried forward verbatim in intent. `backdrop-filter` — like
`transform`, `filter` and `perspective` — makes an element the containing block for fixed-position
descendants, so `.mobile-menu`'s `inset:0` resolved against the 73px header instead of the viewport and
the panel opened UNDER the page. While the menu is open the nav is not a glass pane (an opaque panel
covers it anyway), so it stops being a containing block. `body.menu-open .nav` is (0,2,0) so it outranks
the (0,1,0) @media rule above without !important. ────────────────────────────────────────────────── */
body.menu-open .nav{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.mobile-menu{ background:#fdf8f6; }
.mobile-menu.open{ top:0; left:0; width:100vw; height:100vh; height:100dvh; }
/* `:not(.btn)` IS LOAD-BEARING and is the site's permanent contrast fixture. The menu's last row is the real
Login / Sign-up pair, and a bare `.mobile-menu a` is (0,2,0) — it outranks `.btn-primary` (0,1,0) and
repainted the CTA's ink to match the panel, i.e. an INVISIBLE Sign-up button on every phone (1.00:1).
Caught by measuring, never by looking: the panel is opacity:0 until it opens. */
.mobile-menu a:not(.btn){ border-bottom:1px dashed var(--line); color:var(--text); }
/* ── THE CTA INK MOVED AND `--cream` DID NOT FOLLOW IT (found 2026-08-06 by the contrast sweep; PRE-EXISTING
on origin/marketing-site, and verified there byte-for-byte before being fixed here rather than assumed
to be collateral from the porcelain pass).
v13/v15/v17 spell "the ink that sits ON a filled accent control" as `--cream`, and three of their rules
use it to rescue a `.btn-primary` whose colour a higher-specificity ancestor selector had captured:
v15 496 .prose a.btn-primary
v15 615 .mobile-menu .m-actions .btn-primary (inside its @media, so it only ever fired on phones)
v15 1085 .prose .ftool a.btn-primary
When the CTA flipped to WHITE-on-#c74800 on 2026-08-05, only `--cta-ink` was updated. `--cream` stayed
inverted at #1d1e1c, so those three rules kept painting INK on the deepened flame: 3.47:1, under AA, on
the pricing page's mobile Sign-up and on /mcp's "Start free →" at every width.
`--cream` is deliberately NOT redefined: `.fmt-mini.is-new` (v15 978) uses it as a BACKGROUND, so moving
it to white would silently flip that chip from a dark plate to a light one — a second, invisible change
riding on a contrast fix. The three ink rules are re-pointed at `--cta-ink` instead, which is the token
that actually means what they want. Equal specificity, later sheet, so each wins on order. ────────── */
.prose a.btn-primary,
.prose .ftool a.btn-primary,
.mobile-menu .m-actions .btn-primary,
.mobile-menu .m-actions .btn-primary:hover,
.mobile-menu .m-actions .btn-primary:active{ color:var(--cta-ink); }
/* ── 8 · THE HERO. v17 scrimmed the montage to .14 and washed it out with near-white gradients so type could
win on paper; v18 let it breathe on darkness at .30. On cream we are back to needing a scrim, but a WARM
one — the montage sits under cream veils rather than black ones, so the page still reads as one
temperature. The five-act hero video is untouched; only what is painted over it changes. ──────────── */
.hero-stage video,.hero-stage img{ opacity:.22; }
.hero-stage::after{
background:
radial-gradient(88% 68% at 50% 42%, transparent 26%, rgba(253,248,246,.88) 78%),
linear-gradient(180deg, rgba(253,248,246,.66), rgba(253,248,246,.32) 34%, rgba(253,248,246,.97) 90%);
}
.hero-stage::before{ background:radial-gradient(46% 36% at 50% 2%, rgba(255,222,205,.45), transparent 72%); }
.rc-brand{ background:rgba(255,255,255,.82); color:var(--text);
-webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.hero-note{ color:var(--faint); }
/* ── 9 · PRICING. v17 inverted the featured plan to an ink fill so it would read on white; v18 made it the
LIT one on darkness. On cream it becomes the WARM one — a marigold wash inside a flame border, which is
the only place the reference's Marigold Glow appears at any size. Ink on that wash is 13.44:1. ────── */
.tease.feat, .tease.feat:hover,
main > section:nth-child(even) .tease.feat,
main > section:nth-child(even) .tease.feat:hover,
.plan.pop{
background:linear-gradient(180deg, rgba(255,222,205,.55), rgba(255,222,205,.14) 58%), var(--surface);
border:1px solid var(--coral);
box-shadow:var(--el-2);
}
.tease.feat .t-amt,.tease.feat .t-go,.plan.pop .price{ color:var(--text); }
.tease.feat p,.tease.feat .t-name,.tease.feat .t-ads,.tease.feat .t-credits,.tease.feat .t-amt small{ color:var(--muted); }
.tease.feat .t-ads b{ color:var(--text); }
/* The featured plan's ribbon. v17 inverted it to white-on-ink, v18 to coral-on-walnut; either way the rule
that matters is that the badge on the ONE card we most want read must not inherit the page's own ink onto
the page's own fill. Flame fill, Ink Black on it: 5.28:1. */
.t-tag,.ribbon,.tease .t-tag,
.tease.feat .t-tag,
main > section:nth-child(even) .tease.feat .t-tag{ background:var(--coral); color:var(--cta-ink); }
.t-credits{ color:var(--coral-text); }
.tease.feat .t-credits{ color:var(--coral-deep); }
/* ── 10 · THE FLOW DEVICE. Its strokes are "a graphical object required to understand the content"
(WCAG 1.4.11, 3:1). On cream the line must be INK-side rather than light-side: --line-2 measures
3.34:1 on the canvas, comfortably over. ─────────────────────────────────────────────────────────── */
.flowgraph{ --flow-line: #8e8784; }
.flowgraph .fl-spark{ stroke:var(--coral); opacity:1; }
.rail-list .ch{ background:var(--surface); box-shadow:var(--el-1); }
main > section:nth-child(even) .rail-list .ch{ background:var(--surface); }
.rail-list .ch span{ color:var(--muted); }
.rail-list .ch svg{ opacity:1; }
.rail-kind{ color:var(--text); }
.rail-what,.flow-note{ color:var(--faint); }
.flow-say,.flow-return span{ color:var(--muted); }
.flow-say b,.flow-say strong{ color:var(--text); }
.pcard-solo{ color:var(--muted); }
.pcard-solo b{ color:var(--coral-text); }
.pcard code,.toolfam > code{ color:var(--faint); background:none; }
/* ── 11 · MISCELLANEA that would otherwise stay dark. Each of these hard-codes a value in v13/v15/v17 or was
hard-coded by v18 for darkness, so a token override alone cannot reach them. ─────────────────────── */
.trust{ border-block:1px dashed var(--line); background:var(--bg-2); }
/* v18 inverted the partner logos to make dark marks readable on a dark page. On cream they go back to a plain
grayscale, which is also Getharvest's own rule: "place trust/partner logos in grayscale so the orange accent
remains the only chromatic focus". */
.trust-logos img,.prov-logo{ filter:grayscale(1) contrast(1.05); opacity:.62; }
.trust-logos img:hover,.prov-logo:hover{ opacity:.95; }
.langpick > summary,.langpick summary{ background:var(--surface); color:var(--muted); border-color:var(--line); }
.langpick summary:hover{ color:var(--text); border-color:var(--line-2); }
.langmenu{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--el-2); }
.langmenu a{ color:var(--muted); }
.langmenu a:hover{ background:var(--surface-3); color:var(--text); }
.langmenu a.on{ color:var(--coral-text); }
.langmenu .lc{ color:var(--faint); }
.social a{ background:transparent; border:1px solid var(--line-2); color:var(--muted); }
.social a:hover{ color:var(--coral-text); border-color:var(--coral); }
.foot-col a{ color:var(--muted); }
.foot-col a:hover{ color:var(--coral-text); }
.foot-col h3{ color:var(--faint); }
#cookieSettingsLink{ color:var(--faint); }
#cookieSettingsLink:hover{ color:var(--coral-text); }
.cookie-consent{ background:rgba(255,255,255,.97); border:1px solid var(--line-2); box-shadow:var(--el-2);
-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.cc-msg{ color:var(--muted); }
.cc-btn{ color:var(--muted); border-color:var(--line-2); }
/* a toast is a deliberate INVERSION — it is a transient overlay, not a page surface, and it reads as one
because it is the only dark object on a cream page. Warm ink, not a cool grey. */
.toast{ background:#2b2721; color:#f8f4ea; }
.qa-q{ color:var(--text); }
.qa-q:hover{ color:var(--coral-text); }
.qa .pm::before,.qa .pm::after{ background:var(--coral); }
.qa-a-in{ color:var(--muted); }
.models-row span{ border:1px solid var(--line-2); color:var(--faint); }
.models-row span:hover{ color:var(--coral-text); border-color:var(--coral); }
.plaque{ color:var(--faint); }
.plaque b{ color:var(--muted); }
.plaque .ai{ color:var(--coral-text); }
.promptline{ border-left:2px solid var(--coral); color:var(--text); }
.promptnote,.mcp-safety,.install-foot,.price-solo{ color:var(--muted); }
/* An INLINE tool name is a chip. The BLOCK-level `> code` at the foot of a family card is a hairline-ruled
list, not a box (v17 was explicit about that), so the inline rule must exclude the block one or it wins on
source order and paints a tinted panel across every card. */
.promptnote code,.toolfam code,.act-tool code,.install-foot code,.mcpw-code{
color:var(--coral-text); background:rgba(250,93,0,.09); }
.toolfam > code,.pcard > code{ background:none; color:var(--faint); }
.ad-log{ color:var(--muted); }
.ad-log b,.ad-log .hl{ color:var(--coral-text); }
.ticker-set span{ color:var(--faint); }
.ticker-set span b{ color:var(--coral-text); }
.fmt-mini--cta{ background:rgba(250,93,0,.08); border-color:var(--coral); color:var(--coral-text); }
.fmt-mini--cta:hover{ background:rgba(250,93,0,.15); color:var(--coral-deep); }
.fmt-mini.is-new{ border-color:rgba(250,93,0,.38); }
.fmt-mini-tag{ color:var(--coral-text); }
.fmt-name{ color:var(--muted); }
.fmt-desc{ color:var(--faint); }
.cinema .reel-card{ border:1px solid var(--line); }
/* the filmstrip stays a dark cinema plate — see the --cinema note in the token block — so its overlaid
controls keep light ink on a dark base. */
.stage .adc-cta{ background:rgba(29,30,28,.92); color:#fdf8f6; }
.shot .play span{ background:rgba(255,255,255,.96); color:#1d1e1c; }
.ok,.yes{ color:#146c3a; } .no,.bad{ color:#b3172d; } .warn{ color:var(--gold); }
.h-hermoso,.col-hermoso{ color:var(--coral-text); }
.coral-ink{ color:var(--coral-text); } .cream-ink{ color:var(--text); }
.hair-light,.hair-soft{ border-color:var(--hair); }
.field-err{ color:#b3172d; }
.glow,.glow-1,.glow-2,.glow-c,.glow-coral,.glow-plum,.glow-tile,.grad{ opacity:.4; }
.big-quote,.pullq{ color:var(--text); }
.prose{ color:var(--muted); }
.prose h1,.prose h2,.prose h3,.prose h4,.prose strong,.prose b{ color:var(--text); }
.prose blockquote{ border-inline-start:2px solid var(--coral); color:var(--muted); }
.prose hr{ border:0; border-top:1px dashed var(--line); }
.prose code{ background:rgba(250,93,0,.09); color:var(--coral-text); }
.prose pre{ background:var(--surface-3); border:1px solid var(--line); color:var(--muted); }
.post-head,.post-meta,.pc-meta{ color:var(--faint); }
.post-dek{ color:var(--muted); }
.compare-head,.credits-head{ color:var(--faint); border-block-end:1px dashed var(--line); }
.ftool-badge,.fs-tag,.fk-tag,.tag{ background:var(--surface-3); color:var(--muted); }
.ftool-priv,.ftool-hint,.ftool-empty,.ftool-notes,.ftool-meta,.ftool-index{ color:var(--faint); }
.ftool-err{ color:#b3172d; }
/* ── 12 · AIR. Getharvest's rhythm is "64-80px between sections, 32-40px card padding, comfortable density".
That is TIGHTER than v18's darkroom (which needed the object alone in the frame) and looser than v15's
original. A lander with fourteen sections cannot use ORYZO's 100vh gaps, and on a light page it does not
need to — cream gives separation that darkness had to buy with space. ─────────────────────────────── */
.section{ padding:clamp(76px,10vw,120px) 0; }
.section.tight{ padding:clamp(62px,8vw,96px) 0; }
.flowsec{ padding:clamp(76px,10vw,120px) 0; }
.statstrip{ padding:clamp(58px,7vw,92px) 0; }
.cinema{ padding:clamp(74px,9vw,112px) 0; }
.closer{ padding:clamp(92px,13vw,168px) 0; }
.closer .scrim{ display:block; background:radial-gradient(64% 58% at 50% 118%, rgba(255,222,205,.6), transparent 66%); }
/* ── 13 · RESPONSIVE. Nothing structural changes on a phone — the palette does not need a breakpoint. The one
thing that does: the hero montage must recede further, because a 402px column has no room to lose.
MUST STAY LAST in this file (the app's own [[ux-batch-2026-07-20]] lesson). ──────────────────────── */
@media (max-width:640px){
.hero-stage video,.hero-stage img{ opacity:.14; }
.section{ padding:clamp(60px,12vw,92px) 0; }
.section.tight{ padding:clamp(50px,10vw,78px) 0; }
.closer{ padding:clamp(74px,17vw,116px) 0; }
}
@media (prefers-reduced-motion: reduce){
.mono .dot{ animation:none; }
.flowgraph .fl-spark{ display:none; }
}
/* ── HERO H1: TWO BALANCED LINES, NO RESERVED SLOT (WIDE VIEWPORTS ONLY) ────────────────────────────────────
Dave, 2026-08-05: "get rid of the gap its very ugly, you can just make the text 2 lines with a line break" →
"add the line break before 'marketing' so the 2nd line is 'marketing in X'".
THE GAP WAS THE ROTATOR'S WIDTH RESERVATION. `.rotw::after{content:"OpenClaw"}` held the widest word so a swap
could never move the line break — that took mobile CLS from 0.2058 to 0.0009 — and `text-align:end` parked the
slack BEFORE the word so the trailing tail stayed welded. Correct, and ugly.
THE MEDIA QUERY IS LOAD-BEARING, and it is here because a check caught the first attempt. Deleting the slot at
ALL widths regressed exactly what the slot existed to prevent: at 320-430px "marketing in OpenClaw." wraps to a
third line while "marketing in Claude." does not, so the h1 grew 79.88px -> 119.81px and shoved the page down
40px — the CLS failure, reintroduced. site-hero-slot-check measured it across every locale x 6 words x 6 widths
and named it. Above the breakpoint the line has room to stay on one line for every word, so the slot is
redundant and the gap goes; below it, the slot is still the only thing keeping the height stable, so it stays.
A gap on a 400px phone is a far smaller cost than a 40px content jump.
SCOPED TO .h1-2line, added only where the lead is >=2 space-separated words AND >=10 characters. ja/th/zh are
one unspaced token, and ko's 7-character lead made line 2 long enough to wrap variably even at 1440px — all
four keep the slot and never see this block. */
@media (min-width: 700px){
/* The width transition is what makes the re-centre glide instead of snap; the JS sets an explicit px width
for the incoming word at the same moment the outgoing one starts fading. Safe here and ONLY here: inside
this media query the slot is gone and the fixes the line count, so width moves ink sideways within
one line and can never move the paragraph below. */
.hero h1.h1-2line em.key .rotw{ text-align:start; transition:width .34s cubic-bezier(.4,0,.2,1); }
.hero h1.h1-2line em.key .rotw::after{ content:none; }
/* inline-BLOCK, not inline: `transform` does not apply to a non-replaced inline box, so `display:inline`
silently killed the rotator's translateY and the swap became a hard cut. The transition is restated here
because the base sheet turns it off (`.rotw, .rotw-in{transition:none}`) for the absolutely-positioned
variant; this selector is more specific, so the fade comes back only on the lane that can animate. */
.hero h1.h1-2line em.key .rotw-in{ position:static; display:inline-block;
transition:opacity .24s ease, transform .24s ease; }
.hero h1.h1-2line em.key{ white-space:nowrap; }
}
/* The break is a layout device, not content. */
.hero h1.h1-2line .h1br{ line-height:0; }
/* ── CTA: WHITE INK ON A DEEPER FLAME ───────────────────────────────────────────────────────────────────────
Dave, 2026-08-05: "i dont totally love the black text on the orange button, can we make it white? or does that
go against the theme guidelines?"
It does go against them ON THE ORIGINAL FLAME, and by a measured margin rather than a stylistic one: white on
#fa5d00 is 3.17:1, under the 4.5:1 AA floor for normal-size text. That is exactly why the reference's own
Components page (which specifies white) was overruled by its Agent Prompt Guide (which specifies ink) when this
palette shipped — the two halves of their doc disagree and only one of them is accessible.
But the constraint is the PAIRING, not the ink. Deepening the fill buys the ratio back and keeps white:
white on #fa5d00 3.17 fails
white on #d24e00 4.35 still short
white on #c74800 4.82 PASSES — the shallowest step that does
white on #b04200 5.79 hover
white on #a33d00 6.45 active (already白 in the base sheet)
#c74800 is one step deeper, still unmistakably flame rather than the brown Dave rejected in the ORYZO pass.
Do not lighten these back toward #fa5d00 without re-measuring: the button is the one place on the site where
the brand colour carries text. */
:root{
--cta: #c74800;
--cta-ink: #ffffff;
--cta-hot: #b04200;
}
/* ── CHANNEL PROOF ROW, above the fold (2026-08-05) ─────────────────────────────────────────────
Dave: the two floating AI clips "make it seem like all we do is generated AI content". The fix is
not to hide the clips — it is to put the OTHER half of the product next to them. Every ad in our
category that has run for months leads with breadth, not with a pretty render: ElevenLabs' Meta ad
(live 2026-02 → 2026-08, six months) opens "generate ads & social media posts with AI. Veo, Sora,
Kling, Wan, Seedance & more—all in one editor", and Postiz puts 30 channel logos above the fold.
Nobody in the category advertises the output on its own.
The marks are the SAME inline SVGs the app's connector tiles use, so the logo a visitor sees here
is the logo they see after signing in. Four of them (TikTok, X, Threads, ChatGPT) are currentColor
black marks — hence the explicit `color` below; the other eight carry their own brand hexes. */
.chanrow { margin: 22px auto 0; max-width: 680px; text-align: center; }
.chanrow-l {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 14px 18px; color: var(--ink, #1a1712);
}
.chan-l { display: inline-flex; line-height: 0; opacity: .92; transition: transform .18s ease, opacity .18s ease; }
.chan-l svg { display: block; width: 20px; height: 20px; }
@media (hover: hover) { .chan-l:hover { opacity: 1; transform: translateY(-2px); } }
.chanrow-c {
margin: 12px 0 0; font-size: 13.5px; line-height: 1.5;
color: var(--ink-muted, #6B645C); text-wrap: balance;
}
.chanrow-c b { color: var(--ink, #1a1712); font-weight: 600; }
/* Phones: the row is the proof, so it must never become a scrollbar or a ragged third line. */
@media (max-width: 560px) {
.chanrow { margin-top: 18px; }
.chanrow-l { gap: 12px 14px; }
.chan-l svg { width: 18px; height: 18px; }
.chanrow-c { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .chan-l { transition: none; } }
/* The hero fine print balances onto two lines on desktop: the agent-client list, then the commercial terms.
Hidden below 700px because the text already wraps there naturally and a forced break lands mid-phrase — and
the break point differs per language, so this must never be a hard split of the string itself. The separator
sits at the END of line one, so with the hidden the sentence still reads "…any MCP client · No credit…". */
.hn-br { display: none; }
@media (min-width: 700px) { .hn-br { display: inline; } }