pushes
658 down into every | and | , and an inherited variation setting
beats a descendant's font-weight — so the green header (700) and the
total row (800) would both have silently flattened to 658, erasing the
weight contrast that makes a table readable. Both are restated here at
their own weights. This is a repair, not a preference. */
table.data{font-weight:658;
font-variation-settings:'wght' 658,'CNTR' 0}
table.data thead th{font-variation-settings:'wght' 700,'CNTR' 0}
table.data tbody tr.total,table.data tbody tr.total td{
font-variation-settings:'wght' 800,'CNTR' 0}
/* ---- charts & timeline ---- */
/* ---- establishing shot ---- */
.estab .txt h2{font-size:52px;line-height:1.3}
.estab .estats b{font-size:35px}
/* =====================================================================
DENSITY TIERS — v6.2
The deck is a fixed 1440x810 canvas, so a page with a lot on it has to
give somewhere. Until now the only mechanism was autofit(), which scaled
the whole .slide-inner with transform. Two problems with that:
* it floors at 0.7 and then simply CLIPS — the achievements page lost
its last row off the bottom edge;
* scaling the container shrinks the page margin along with the type, so
a dense page ends up with MORE white space around less readable text,
which is backwards.
A designer handling a dense page does not photograph it smaller. They set
it in a smaller, tighter spec and keep the margins. That is what these
tiers do: one multiplier, --tk, applied to the roles that actually carry
bulk, plus the paddings and gaps that go with them. The margin never
moves. autofit() now steps d1 → d4 first and only falls back to transform
if a page is still over after d4, so nothing can clip.
Selectors are prefixed .slide so they beat the bare-role rules in the
typography pass above (0,2,1 vs 0,1,1) without !important.
THIS BLOCK IS THE ONLY PLACE A CONTENT SIZE IS WRITTEN.
The typography pass above used to repeat every one of these numbers, so a
size lived in two places and the two drifted the moment either was edited.
It now carries weight, contrast, leading and tracking only — the size for
anything a reader reads at length is here, once. Roles NOT listed here
(cover, dividers, establishing shot, hero figures) keep their size up
there, because they are display type on pages that cannot overflow.
===================================================================== */
.slide{--tk:1}
.slide.d1{--tk:.94} .slide.d2{--tk:.88}
.slide.d3{--tk:.82} .slide.d4{--tk:.76}
/* headings give up the least — hierarchy has to survive the squeeze */
.slide h2.title{font-size:calc(42px * max(var(--tk), .86))}
.slide h2.title.sm{font-size:calc(32px * max(var(--tk), .86))}
.slide .kicker{font-size:calc(15px * max(var(--tk), .8))}
.slide h3.sub{font-size:calc(22px * var(--tk))}
/* body and lists give up the most — this is where the bulk is */
.slide p.lead{font-size:calc(18px * var(--tk))}
.slide p.body{font-size:calc(15.6px * var(--tk))}
.slide ul.bul{gap:calc(9px * var(--tk))} /* the list is a grid; gap, not margin */
.slide ul.bul li{font-size:calc(14.5px * var(--tk));gap:calc(11px * var(--tk))}
.slide ul.bul.tight li{font-size:calc(12.2px * var(--tk))}
/* tabular matter */
.slide table.data{font-size:calc(14px * var(--tk))}
.slide table.data thead th{font-size:calc(13px * var(--tk));
padding:calc(11px * var(--tk)) calc(12px * var(--tk))}
.slide table.data tbody td{padding:calc(8.5px * var(--tk)) calc(12px * var(--tk))}
.slide table.facts td{font-size:calc(14px * var(--tk));
padding:calc(8.5px * var(--tk)) 0}
/* A key-facts value that is a LIST rather than a figure — «مسیر
سرمایهگذاری» names five channels — runs to three lines. Set at the same
size as «۶۰ همت» it out-shouts the numbers it sits under, purely because
there is more of it. app.js tags any value past 42 characters .long and
it steps down. Length is measured, not hand-tagged, because the same row
is a different length across ten funds and two languages. */
.slide table.facts tr.long td:last-child{font-size:calc(12.2px * var(--tk));
line-height:1.7;font-weight:600}
/* cards, timeline, charts, section labels */
.slide .ph{font-size:calc(17px * max(var(--tk), .8))}
.slide .grp-label{font-size:calc(11.5px * var(--tk))}
.slide .card .ct{font-size:calc(22px * var(--tk))}
.slide .card .cd{font-size:calc(14.5px * var(--tk))}
.slide .card .num{font-size:calc(16px * var(--tk))}
.slide .tl .y{font-size:calc(15px * var(--tk))}
.slide .tl .t{font-size:calc(14.5px * var(--tk))}
.slide .bars .nm{font-size:calc(14px * var(--tk))}
.slide .bars .vl{font-size:calc(15px * var(--tk))}
.slide .legend .li{font-size:calc(13px * var(--tk))}
.slide .fcard .fn{font-size:calc(12.4px * var(--tk))}
.slide .stats .s .v{font-size:calc(34px * var(--tk))}
.slide .stats .s .l{font-size:calc(12.2px * var(--tk))}
/* the tier is a type change, so the surrounding rhythm moves with it.
These scale DOWN with --tk — an earlier draft set a flat 10px here, which
was larger than the 9px it was meant to tighten. */
.slide .tl .it{padding:calc(9px * var(--tk)) 0;gap:calc(14px * var(--tk))}
.slide .acts{gap:calc(12px * var(--tk))}
.slide .card{padding:calc(22px * var(--tk)) calc(24px * var(--tk))}
/* the year gutter has to narrow too, or a 100px column holds 22px numerals */
.slide .tl .it{grid-template-columns:calc(100px * var(--tk)) 1fr}
.slide .minirows{gap:calc(9px * var(--tk))}
/* =====================================================================
REVIEW ROUND 1 — Kian, 2026-08-18
===================================================================== */
/* 2 — table of contents. The row label now says صفحه rather than اسلاید
(app.js), and the count was too quiet to read as a count. */
/* the row is built with inline styles in app.js, which no stylesheet rule
can outrank, so the size/weight/colour change lives there. */
/* 5 — the opening paragraph is the one block a reader actually reads at
length on that page; 1.39 was set for compactness it does not need. */
.slide p.lead{line-height:1.75}
/* 6 — a short parenthetical travels as one unit (see nbParens in app.js) */
.nbp{white-space:nowrap;display:inline-block}
/* 7 — column headings like «رتبهها و نشانها» are the only thing telling you
which list you are in, so they get to be bigger than the rows. */
.slide .grp-label{font-size:calc(14px * var(--tk))}
/* 8 — the year on the financing-firsts cards was 11px against a 22px title,
which read as a caption rather than the anchor of the card. */
.card .cyear{font-weight:800;color:var(--gold-deep);letter-spacing:.06em;
margin-bottom:9px;font-variant-numeric:tabular-nums}
.slide .card .cyear{font-size:calc(18px * var(--tk))}
/* 10 — service cards. The ordinal was on the far side from where reading
starts and the sign was loose in the corner; they swap, so the number sits
at the reading edge and the sign closes the opposite one. The extra
bottom margin answers "cards too close to the bottom margin". */
.card.svc{position:relative}
.card.svc .num{inset-inline-start:auto;inset-inline-end:auto;
inset-inline-start:calc(24px * var(--tk));top:calc(18px * var(--tk))}
.card.svc .csign{position:absolute;top:calc(18px * var(--tk));
inset-inline-end:calc(24px * var(--tk));opacity:.9}
.slide .card.svc{padding-bottom:calc(24px * var(--tk))}
.slide-inner>.mt-a{padding-bottom:14px}
/* =====================================================================
REVIEW ROUND 2 — شیما, 2026-08-18
===================================================================== */
/* A closing note under a list: it qualifies everything above it, so it is
set apart by a rule and a step down rather than by being another bullet.
margin-top:auto pins it to the foot of the page, which is where a
qualification belongs — read last, after the claims it conditions. */
.pnote{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
color:#33423D;max-width:1080px}
.slide .pnote{font-size:calc(15px * var(--tk));line-height:1.85}
.slide.dark .pnote,.msec.dark .pnote{color:#CCDAD7;
border-top-color:rgba(255,255,255,.22)}
/* A flex or grid child defaults to min-height:auto and therefore refuses to
shrink below its content, overflowing its parent instead. The renderers
set min-height:0 where it matters, but any column built with an inline
style is easy to miss, so this is the safety net: inside a slide, a direct
child of a grid or flex track may always shrink. Without it a single
forgotten declaration puts type under the footer, which is exactly what
happened on the overview page. */
.slide-inner>div>div{min-height:0}
.slide-inner .stats,.slide-inner ul.bul{min-height:0}
/* ---- ?fit diagnostic overlay (never shown without the query flag) ---- */
.fitbadge{display:none}
body.fitdbg .fitbadge{display:block;position:absolute;top:8px;inset-inline-start:8px;
z-index:60;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;
border-radius:2px;background:rgba(0,69,56,.82);color:#fff;direction:ltr;
pointer-events:none}
body.fitdbg .fitbadge.tier{background:#005740;color:#F6CE3E}
body.fitdbg .fitbadge.warn{background:#D0AF2B;color:#00291F}
body.fitdbg .fitbadge.bad{background:#B3261E;color:#fff}
/* ===================== end typography pass v6.1 ====================== */
|