/* ═══════════════════════════════════════════════════════════════════════
TIPGOLDVAULT — POLISH PASS
Loaded after brand.css, so every rule here wins by cascade order.
Delete the to revert the whole pass; brand.css is untouched.
The audit this answers, in order of how much damage each item did:
1 The paper was #F4F4F2, a cool grey-white, while the coin, vault and
tomato photography were all lit warm. A cool surface carrying warm
objects is the single clearest cheapness tell on a light page,
because it reads as two unrelated templates stitched together.
2 Gold existed only as a flat hex. #D4860A measures 2.9:1 on white so
it could not carry text, and the workaround was #9C5D08 — which is
brown, and had spread to roughly fifty declarations. Gold on a light
page cannot be a text colour without going brown, so here it stops
being one and becomes a material instead.
3 Eight white cards with 22-28px corners and drop shadows on a white
page is the default SaaS look.
4 Three headlines broke into four to eight lines at desktop width.
5 The footer wordmark rendered "Tip Gold Vault" — a real bug.
Contrast is stated for every colour that carries text. Nothing here
changes a single word of copy.
═══════════════════════════════════════════════════════════════════════ */
/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════════
brand.css reads every colour through var(), so re-pointing the tokens
re-skins the entire page from one place. Only the values change. */
:root{
/* ── PAPER ──
Warm ivory reads as paper stock and is the tone the photography was
lit for. --quiet replaces the four cool off-whites (#FBFAF7, #F7F3EA,
#F5F3EE, #FAFAF8, #F6F7F8) scattered through brand.css. */
--page:#FAF7F1;
--quiet:#F6F2E9;
--border:#E9DFC9;
--hair:rgba(168,122,18,.26);
/* ── GOLD, BY ROLE ──
--gold #A87A12 3.60:1 on the page. Large display text only,
which clears WCAG AA for text >=24px bold,
plus every decorative stroke, rule and marker.
--gold-foil gradient fill for buttons and solid gold
objects. Gold reads as metal when it has a
light source; a flat hex never does. Text on
it is --on-gold, 6.40:1 at the darkest stop
and 13.96:1 at the lightest.
--label #6E6A60 5.04:1. The warm grey that now carries every
micro-label the brown used to.
--gold-ink #8F6410 4.91:1. Kept only as a safety net so any
declaration not migrated below still clears
AA for normal text. Nothing new should use it. */
--gold:#A87A12;
--gold-tint:#F7EEDA;
--gold-line:rgba(168,122,18,.30);
--gold-foil:linear-gradient(180deg,#F3DFA0 0%,#E2C263 44%,#C79E38 78%,#B9932F 100%);
--gold-foil-hover:linear-gradient(180deg,#F8E9B8 0%,#EBD07C 44%,#D2AA44 78%,#C39C34 100%);
--on-gold:#14140F;
--label:#6E6A60;
--gold-ink:#8F6410;
--gold-ink-hover:#7A5510;
/* ── INK ──
#1A1A2E was a blue-black and fought the ivory. #14140F is its warm
equivalent at 17.28:1 on the page. #656C79 was a cool grey chosen
against a cool page; #5F5B54 measures 6.31:1 on page, 6.75:1 on card. */
--text:#14140F;
--text-2:#5F5B54;
/* Warm brick already harmonised with the gold, so --loss is unchanged.
Its tint is warmed a half-step to sit on ivory rather than white. */
--loss-tint:#FCEAE7;
/* ── GEOMETRY ──
28px corners plus a shadow reads as a floating widget. 16px and a
hairline lets the paper show through, which is what print does. */
--r-lg:16px;
--r-md:12px;
}
/* ═══ 2 · SURFACES: flat brown fills become lit metal ═══════════════════
A gradient with a highlight on top and a shadow at the base is what
makes gold read as metal instead of mustard. Near-black text on gold is
both the classic bullion treatment and better contrast than the
white-on-brown it replaces: 4.7:1 becomes 6.4:1 at worst. */
.nav__cta,
.btn--primary,
.doors__cta,
.cinema__tap,
.mobile-join a{
background:var(--gold-foil);
color:var(--on-gold);
border:1px solid rgba(140,102,14,.34);
box-shadow:0 1px 0 rgba(255,252,236,.6) inset,0 8px 20px rgba(140,102,14,.18);
text-shadow:none;
}
.nav__cta:hover,
.btn--primary:hover,
.doors__cta:hover,
.cinema__tap:hover,
.mobile-join a:hover{background:var(--gold-foil-hover);color:var(--on-gold)}
/* The pulse ring around the film button was keyed to the old brown. */
@keyframes tapPulse{
0%,100%{box-shadow:0 0 0 0 rgba(168,122,18,.32)}
50%{box-shadow:0 0 0 12px rgba(168,122,18,0)}
}
/* Small solid gold objects: counters, markers, icon fills, track fills. */
.loss-transfer::after,
.beat--close .beat__visual::before,
.process-node::before,
.money-job__icon--orbit i:first-child,
.solution-intro__steps li::before{
background:var(--gold-foil);
color:var(--on-gold);
}
.founding__track b{background:var(--gold-foil)}
.door--gold .door__list li::before,
.loss-caption b{background:var(--gold)}
.planner-field--amount input[type="range"]{
background:linear-gradient(90deg,var(--gold) 0 var(--fill),#E7E0D0 var(--fill) 100%);
}
.planner-field--amount input[type="range"]::-webkit-slider-thumb{
background:var(--gold-foil);
box-shadow:0 2px 8px rgba(140,102,14,.3);
}
.planner-field--amount input[type="range"]::-moz-range-thumb{
background:var(--gold-foil);
box-shadow:0 2px 8px rgba(140,102,14,.3);
}
/* The 2015 bar in the shrink card is the "before" state, so it takes the
same lit metal as the other gold objects. Its figure was white on gold,
which measured about 2.3:1 and failed AA outright; near-black on the
same metal is 7.1:1 at the lightest stop. The red "it buys today" bar
keeps white, which is 6.5:1 on --loss. */
.shrink__bar--then{
background:linear-gradient(100deg,#E2C263,#C79E38 62%,#B9932F);
color:var(--on-gold);
text-shadow:none;
}
/* The skip link is a utility, not a brand surface: maximum contrast wins. */
.skip{background:var(--text);color:#fff}
/* ═══ 3 · MICRO-LABELS: the brown's largest constituency ════════════════
All small, all previously #9C5D08, all now warm grey at 5.04:1. */
.eyebrow,
.beat__ref sup,
.evnotes__title,
.chart__kicker,
.price-card__label,
.solution-intro__fact,
.money-job small,
.money-source,
.proof-table-card__label span,
.jzone__label,
.founding__perk-val,
.door--gold .door__tag,
.node-icon::after{color:var(--label)}
.evnotes__list li::marker{color:var(--gold)}
.beat__tag b{color:var(--gold)}
/* ═══ 4 · DISPLAY ACCENTS: gold survives only where it is big ═══════════
Every selector here is 20px+ bold or larger, the WCAG large-text
threshold, so 3.60:1 clears AA. */
.display>span:not(.mask),
.solution-intro__gold,
.chart-result--gold>strong,
.price-card__value .price-card__fee,
.door--gold .door__figure,
.planner-field__head output,
.strip li b,
.jzone.is-active .jzone__ghost,
.jrule.is-condensed .jzone.is-active .jzone__ghost{color:var(--gold)}
/* Metal, not mustard: a lit gradient clipped to the glyphs. The solid
colour is declared first so a browser without background-clip:text
keeps readable gold rather than transparent text. brand.css sets
background:none!important here, so the override needs !important too. */
.metal-text{
color:var(--gold-ink)!important;
background:linear-gradient(172deg,#E7C55F 0%,#C79E38 34%,#A87A12 68%,#8F6410 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.metal-text{-webkit-text-fill-color:transparent!important}
}
/* ═══ 5 · INTERACTIVE TEXT ═════════════════════════════════════════════
Hover and selected states stay legible at small sizes, so they take the
near-black rather than the gold. */
.nav__links a:hover,
.beat__ref a:hover,
.schedule-control button:hover,
.footer nav a:hover{color:var(--text)}
.schedule-control button[aria-checked="true"]{
background:var(--card);
color:var(--text);
box-shadow:0 2px 10px rgba(45,38,24,.1);
}
.brand>span>span,.brand--footer>span{color:var(--gold)}
.btn--ghost span,.quiet-link span{color:var(--label)}
/* ═══ 6 · WARM THE COOL OFF-WHITES ═════════════════════════════════════
Six cool greys were sitting on what is now warm ivory paper. */
.evnotes,
.loss-card,
.terms-strip p,
.currency-input,
.beat-compare,
.beat__visual,
.schedule-control__options{background:var(--quiet)}
.vtable th,.vtable tr.total td{background:var(--gold-tint)}
.solution-intro{background:linear-gradient(180deg,var(--card),var(--quiet))}
.pricing{background:linear-gradient(180deg,var(--card) 0%,var(--quiet) 100%)}
.nav{background:rgba(250,247,241,.92)}
.nav.is-stuck{background:rgba(255,255,255,.96)}
.beat__swap{background:rgba(255,255,255,.94)}
/* Fine print was #5F6674, a cool grey. Warm equivalent, same contrast
band: #63605A is 5.9:1 on the page and 6.3:1 on white. */
.hero__method,
.evnotes__shared,
.evnotes__list,
.chart__note,
.beat__ref a,
.price-card__note,
.pricing-disclosure,
.gap-shortfall__note,
.gap-chart__note,
.evidence-context-note,
.doors__risk,
.proof-table-card__note,
.join__action>p{color:#63605A}
.field-hint,.planner-basis{color:#666158}
.range-scale{color:#7C7669}
/* Gain green, warmed and darkened from #287A5B (4.88:1) to 5.93:1. */
.vtable .inccol,.vtable tr.total .inccol,.solution-intro__habit{color:#2A6B4F}
/* ═══ 7 · CARDS BECOME EDGES ═══════════════════════════════════════════ */
.beat,.chart,.gap-bars-panel,.gap-shortfall,.door,.money-job,
.proof-table-card,.price-card,.founding,.shrink,.loss-card,.beat-compare{
box-shadow:none;
border-color:var(--border);
}
.shrink,.founding{background:var(--card)}
.coin-planner{border-radius:20px;border-color:var(--gold-line);box-shadow:none}
.beat:hover{border-color:var(--gold-line);box-shadow:none}
.amt:hover,.btn--ghost:hover{border-color:var(--gold-line)}
:focus-visible{outline:3px solid rgba(168,122,18,.42)}
::selection{background:var(--gold-tint);color:var(--text)}
/* A 1px gold rule between sections replaces hard background jumps. */
main>section+section{border-top:1px solid var(--hair)}
.stage__head::after,.gap__head::after{background:var(--gold-foil);height:2px;width:44px}
/* ═══ 8 · TYPE: same system, more confidence, fewer shouting labels ═════
The scale was sound but the label layer was doing the damage: six or
seven small uppercase elements per screen reads as a dashboard.
Tracking comes down from .14em and sizes come up off 9-10px. */
.display{letter-spacing:-.024em}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.07em}
.chart__kicker,.evnotes__title,.price-card__label{font-size:10.5px;letter-spacing:.07em}
.chart__unit,.stack__kicker,.shrink__tag,.chart-result__label,
.beat-compare__title,.stack__facts dt{letter-spacing:.05em}
.chart__unit{font-size:10px}
.shrink__tag{font-size:10.5px}
.stack__facts dt{font-size:10px}
.chart-result__label{font-size:10.5px}
.phone__tag{letter-spacing:.1em}
/* ═══ 9 · HEADLINE MEASURE ═════════════════════════════════════════════
Three headlines broke badly at desktop width. Same words, better shape:
a measure in ch plus balance, so the browser distributes the lines
instead of filling greedily and orphaning the last one. */
/* "Set it once. / Get Gold & Silver coins, automatically." ran four lines
with "coins," orphaned on the third. The binding constraint is the
604px copy column, not the measure: at the old 63px the second clause
needed 715px to stay on one line. 52px brings it to 587px, so the
heading resolves to three lines with no orphan. Verified by measuring
the rendered line boxes, not estimated. */
.mechanism__copy .display{
font-size:clamp(2.1rem,3.6vw,3.25rem);
line-height:1.06;
text-wrap:balance;
}
/* The bridge is the worst offender: all-caps Newsreader ran eight lines in
a narrow column. All-caps needs positive tracking to breathe and a
wider measure to stop stacking, and it does not need to be this large
to carry the section. */
.solution-intro__action{
max-width:26ch;
font-size:clamp(2rem,3.5vw,3.15rem);
line-height:1.1;
letter-spacing:.005em;
text-wrap:balance;
}
.solution-intro__fact{letter-spacing:.1em}
/* The evidence question and the decade heading both read better balanced. */
.stage__head h2,.gap__head .display,.proof__title,.pricing__head .display{
text-wrap:balance;
}
.display--join{max-width:22ch;text-wrap:balance}
.hero__copy .display--hero{text-wrap:balance}
/* ═══ 10 · THE HERO'S FINE PRINT ═══════════════════════════════════════
A hundred words of centred grey micro-copy closed the first screen and
competed with the one number the screen exists to deliver. Every word
stays, at the same size, unhidden — but it is now bounded, left-aligned
and fenced by a gold hairline on a tint, so the eye reads it as notes
and can skip it in one pass. That is what a loose centred grey
paragraph could never do. */
.hero__method{
max-width:820px;
margin-top:38px;
padding:16px 20px;
border:1px solid var(--border);
border-top:2px solid var(--hair);
border-radius:var(--r-md);
background:var(--quiet);
font-size:10.5px;
line-height:1.7;
text-align:left;
}
/* The decade chart's method paragraph gets the same treatment, one step
quieter because it already sits inside a card. */
.chart__note{
margin-top:18px;
padding:14px 16px 0;
border-top:1px solid var(--hair);
font-size:10.5px;
line-height:1.7;
}
/* ═══ 11 · EVIDENCE CARDS: three equal weights ═════════════════════════
Card 1 had real photography plus a comparison table; cards 2 and 3 had
a CSS blob and then a void above the footnote. Photography next to a
::before circle is the tell. The two drawn plates are rebuilt as
deliberate objects — a ruled figure on a tinted ground with the same
optical mass as the tomato photograph — and the copy block below is
given a floor so all three footnotes sit on one line. */
.beat{gap:14px}
.beat--food .beat__visual,
.beat--ei .beat__visual,
.beat--economy .beat__visual{background:var(--loss-tint)}
/* The employment plate: a dial reading down, ruled like an instrument. */
.beat--ei .beat__visual::before{
content:"INCOME\A ↓";
white-space:pre;
width:126px;
height:126px;
display:grid;
place-items:center;
border:1px solid rgba(179,38,30,.25);
border-radius:50%;
background:
radial-gradient(circle at 50% 34%,#C8342B,var(--loss) 62%),
var(--loss);
color:#fff;
font-family:'Manrope',system-ui,sans-serif;
font-size:19px;
font-weight:800;
letter-spacing:.06em;
line-height:1.1;
text-align:center;
box-shadow:0 10px 22px rgba(179,38,30,.28),0 0 0 12px rgba(179,38,30,.07);
}
/* The economy plate: two quarters as a stepped-down pair, so the shape of
the fact is visible before the words are read. */
.beat--economy .beat__visual::before{
content:"Q4 ↓ Q1";
padding:20px 26px;
border:1px solid var(--border);
border-radius:var(--r-md);
background:var(--card);
color:var(--loss);
font-family:'Manrope',system-ui,sans-serif;
font-size:23px;
font-weight:800;
letter-spacing:.02em;
box-shadow:0 10px 24px rgba(45,38,24,.1);
}
/* A floor under the copy block keeps the three source pointers aligned
without leaving a void in the shorter cards. */
.beat--ei .beat__line,.beat--economy .beat__line{min-height:3.9em}
/* ═══ 12 · PRICING CARDS ON ONE BASELINE ═══════════════════════════════
The three cards had labels and values on different baselines and unused
space at the bottom, because each was laid out independently. */
/* Card 3's label wraps to two lines ("INCLUDED WITH YOUR VAULT / STORAGE
PASS") while 1 and 2 are single-line, so every following element in that
card sat one line lower than its neighbours. Reserving two lines on all
three labels puts the three price figures on one baseline. brand.css
also sets justify-content:flex-end on the value box, which bottom-aligns
inside a 68px well and undoes the alignment, so it is reset to the top. */
.price-card{display:flex;flex-direction:column}
.price-card__label{min-height:2.7em;margin-bottom:0}
.price-card__value{
margin-top:18px;
min-height:0;
justify-content:flex-start;
}
.price-card__support{margin-top:auto;padding-top:16px}
.price-card--primary{
border:1px solid var(--gold-line);
background:linear-gradient(150deg,#FFFDF7,var(--gold-tint));
}
.terms-strip{background:var(--border)}
.terms-strip strong{letter-spacing:-.005em}
/* ═══ 13 · VERTICAL RHYTHM ═════════════════════════════════════════════
Section padding plus per-section head margins produced empty bands that
read as padding rather than composition. Tightened, not collapsed. */
/* padding-block would also overwrite .hero's padding-top, which is not
rhythm — it is reserved clearance for the fixed nav plus the gold rule
above it (236px desktop / 214px tablet / 168px phone). So the top and
bottom are set separately and .hero is exempted from the top. */
.scene,.evidence-film{
padding-top:clamp(78px,8.5vw,118px);
padding-bottom:clamp(78px,8.5vw,118px);
}
.hero{padding-top:236px}
@media (max-width:980px){ .hero{padding-top:214px} }
@media (max-width:720px){ .hero{padding-top:168px} }
.proof--compact{padding-block:clamp(56px,6vw,80px)}
.evnotes{margin-top:20px}
.stage__head{margin-bottom:32px}
.gap__head{margin-bottom:34px}
.pricing-grid{margin-top:34px}
.coin-planner{margin-top:clamp(44px,6vw,68px)}
/* ═══ 14 · THE BRAND MARK ══════════════════════════════════════════════
The nav carried a hand-drawn SVG placeholder — a circle with a crossbar
— while the real coin sat unused in the repo. brand.css styles
.brand__mark as an SVG with fill and stroke, which an ignores, so
the box is restated here. */
.brand__mark{
width:34px;
height:34px;
flex:none;
border-radius:50%;
filter:drop-shadow(0 2px 4px rgba(45,38,24,.22));
}
.brand:hover .brand__mark{filter:drop-shadow(0 3px 7px rgba(45,38,24,.3))}
.brand--footer .brand__mark{width:26px;height:26px}
/* The footer wordmark rendered "Tip Gold Vault": .brand is inline-flex
with gap:10px, and the footer variant's bare text nodes each became a
flex item, so the gap opened up inside the word. The mark now needs the
flex box, so the wordmark gets its own non-flex wrapper instead. */
.brand--footer{gap:9px}
.brand__word{display:inline;white-space:nowrap}
/* ═══ 15 · JOURNEY RAIL ════════════════════════════════════════════════
At 390px the ghost numeral collided with the chapter name, so the rail
read "02Solution". The numeral steps down and the text clears it. */
@media (max-width:720px){
.jzone{padding-left:31px}
.jzone__ghost{font-size:19px}
.jzone__head{gap:8px}
.jrule.is-condensed .jzone{padding-left:28px}
.jrule.is-condensed .jzone__ghost{font-size:17px}
}
/* ═══ 16 · MOBILE ══════════════════════════════════════════════════════ */
@media (max-width:720px){
.scene{padding-inline:18px}
.hero__method{margin-top:28px;padding:14px 15px;font-size:10px}
.mechanism__copy .display,.display--join,.solution-intro__action{max-width:none}
.solution-intro__action{font-size:clamp(1.85rem,8.4vw,2.5rem)}
.beat--ei .beat__line,.beat--economy .beat__line{min-height:0}
.beat--ei .beat__visual::before{width:96px;height:96px;font-size:16px}
.beat--economy .beat__visual::before{padding:15px 19px;font-size:19px}
.price-card__value{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
.brand__mark,.brand:hover .brand__mark{filter:none}
}
/* ═══ 17 · IMAGE WEIGHT ════════════════════════════════════════════════
The coin planner draws up to a hundred discs from one background image.
brand.css pointed that at silver-coin.png — 3.0MB, decoded to fill a
28px box. The 120px WebP cut is 5KB and is still 2x for the largest
disc the planner draws. */
.coin-stack__coin{background-image:url("silver-coin-120.webp")}
/* ── THE STACK READS AS COINS ──
At 28px with a 7px overlap — a quarter of each disc hidden — and a 6px
drop-shadow blur, the pile rendered as a row of soft white pills with no
readable coin in it. The photograph was never the problem; the object
was too small and too crowded to survive it. Larger discs, a shallower
overlap, a tight shadow instead of a blurred one, and a hairline rim to
define the edge against the dark panel. Fewer coins fit per row, which
the existing "+68 more" counter already accounts for. */
.coin-stack{gap:12px 0}
.coin-stack__coin{
width:37px;
height:37px;
margin-right:-10px;
border-radius:50%;
box-shadow:
0 1px 0 rgba(255,255,255,.35) inset,
0 0 0 .5px rgba(255,255,255,.22),
2px 3px 5px rgba(0,0,0,.55);
filter:none;
}
.coin-stack__coin:last-of-type{margin-right:0}
.coin-stack__more{margin-left:22px}
@media (max-width:600px){
.coin-stack__coin{width:31px;height:31px;margin-right:-9px}
}
/* ═══ 18 · HERO COMPOSITION ════════════════════════════════════════════
min-height:760px plus align-items:center left a dead band between the
amount buttons and the notes block. The section is tall enough on its
own content now that the notes are a bounded object rather than a loose
centred paragraph. */
.hero{min-height:0}
.hero__inner{align-items:start}
.hero__copy{align-self:center}
.shrink{align-self:center}
/* ═══ 19 · CONTRAST CORRECTIONS ════════════════════════════════════════
Found by measuring every visible text node against its resolved
background rather than by eye. Four real AA failures, three of which
this pass introduced by moving gold onto small text. */
/* The wordmark's "Gold" is 10-13px, so it is normal-size text and needs
4.5:1. --gold measures 3.60:1 on the page and 3.85:1 on white, which
fails. --gold-ink is 4.91:1 and 5.25:1 and still reads as gold at this
size, where the lighter value only reads as "not black". */
.brand>span>span,
.brand--footer>span,
.beat__tag b{color:var(--gold-ink)}
/* The active chapter numeral, same reason: 19px at weight 600 is below
both large-text thresholds (24px, or 18.66px at 700+). */
.jzone.is-active .jzone__ghost,
.jrule.is-condensed .jzone.is-active .jzone__ghost{color:var(--gold-ink)}
/* Pre-existing, not introduced here, but a real failure worth clearing:
the inactive chapter names were #9AA0A9 at 11px — 2.46:1. #6B665B is
5.34:1 on the page and still sits clearly behind the active chapter,
which is --text at 17.28:1. */
.jzone__name{color:#6B665B}
.jzone.is-past .jzone__name{color:#7A5510}
/* ═══ 20 · FOUNDING CARD AFTER THE COUNTER CAME OUT ════════════════════
brand.css spaced this card around three things that no longer exist: a
head row with the count, a progress track, and a label that sat under
the track as its caption. With those gone the label was left carrying a
13px top offset meant for a bar, and the perks list kept a 20px margin
above a border that was already doing the separating. The card is
re-balanced around what it actually holds now: one factual line about
the cap, then the two founding terms. */
.founding{padding:22px 26px}
.founding__label{
margin:0;
color:var(--text);
font-size:13px;
font-weight:750;
line-height:1.5;
}
.founding__perks{margin-top:16px;padding-top:16px}