/* =========================================================================
WHNF 2026 — Live Global Dashboard (v2.3 — Tabler design language)
Everything is scoped under .whnf26-d2 so it cannot reach the rest of the site.
WHAT THIS IS
The structure, panels and data are unchanged. This pass rebuilds the surface
in Tabler's design language — written by hand, in our own CSS. No Bootstrap,
no Tabler CSS, no new dependency, nothing that could put a global reset under
a Divi page. What was taken from Tabler:
· the card: white surface, 1px hairline border, 6px radius, a shadow you
have to look for, 20px of internal padding, and a quiet header band with
a small 600-weight title and a right-aligned status badge
· card-status-top — Tabler's 3px coloured bar along a card's top edge. This
is where per-panel colour now lives.
· card-status-start — the same bar on a card's LEFT edge, on the live KPI
tiles, which is what keeps them separable from goal tiles
· the .subheader label: 11px, 600, uppercase, .06em, muted
· badges and the status dot vocabulary for live / standby / goal
· the table: no zebra, no filled header, 11px uppercase column labels,
one hairline per row
· colour tokens used as small accents — spines, bars, dots, chart marks —
never as large fills behind text
PALETTE — the owner's reference palette is kept. Darker variants are derived
for anything that carries meaning. Measured WCAG 2.1 ratios are stated beside
every token and beside every pairing introduced here.
#4DD7D2 on #EAF8FC = 1.62:1, and white on #4DD7D2 = 1.75:1. That turquoise
therefore appears ONLY as a large decorative fill or a chart mark where
nothing must be read. Every CTA fill, border, focus ring and small mark
uses --d2-teal #0E7C77, derived on the same hue line (H 177.8).
The reference secondary grey #607D96 measures 4.31:1 on white — it fails AA
for normal text and is not used for any string on this page. --d2-muted
#4C6A85 (5.66:1 on white) is its derived, compliant replacement.
========================================================================= */
.whnf26-d2 {
/* Surfaces */
--d2-bg: #EAF8FC; /* page ground (reference) */
--d2-surface: #FFFFFF; /* cards */
--d2-well: #F4FAFD; /* inner wells, table foot */
--d2-row: #F1F9FD; /* soft light-blue ranked-row fill */
--d2-row-sel: #E3F2F9; /* selected table row */
--d2-goal-bg: #E3F2F9; /* goal tiles only — never a live figure. navy 7.44:1 · muted 4.95:1 */
/* Lines — decorative unless stated */
--d2-line: #D9E3E8; /* 1.30:1 on white — decorative hairline only */
--d2-line-2: #C2D2DB; /* decorative rule */
--d2-line-ui: #6E8C9E; /* 3.55:1 on white · 3.37:1 on --d2-well — the only line allowed to carry meaning */
/* Ink */
--d2-ink: #154E86; /* 8.52:1 on white · 7.84:1 on --d2-bg · 7.44:1 on --d2-goal-bg */
--d2-ink-2: #164B7E; /* 8.97:1 on white · 8.25:1 on --d2-bg */
--d2-muted: #4C6A85; /* 5.66:1 on white · 5.21:1 on --d2-bg · 5.38:1 on --d2-well · 4.95:1 on --d2-goal-bg */
/* Turquoise */
--d2-accent: #4DD7D2; /* DECORATIVE ONLY — never text, never a border, never a focus ring */
--d2-teal: #0E7C77; /* 5.04:1 on white · 4.64:1 on --d2-bg · white on it 5.04:1 */
--d2-teal-h: #0A625E; /* CTA hover — white on it 7.19:1 */
--d2-teal-wash:#E6F7F6; /* badge fill; --d2-teal on it 4.56:1, --d2-ink-2 on it 8.11:1 */
--d2-map: #1F5B99; /* reporting land on the globe */
/* ---- Categorical accents -------------------------------------------
One fixed hue per continent, in the report form's own order:
Asia, Europe, Africa, North America, South America, Australia, then a
seventh for "Not specified". whnf26_d2_ramp() in dashboard.php returns
these same seven hexes in this same order, so a donut segment, its legend
swatch and its coverage chip are always one colour.
Every hex is >= 4.5:1 on white, so each works BOTH as small text on a card
and as a fill under white text. Ratios below are on white · on --d2-bg ·
on --d2-well. Hue never carries meaning alone: every mark that uses one is
also named in text or in a visually-hidden sentence.
Deuteranopes cannot separate c3/c5 or c1/c5 reliably — which is why the
legend, the chips and the table all carry the name. */
--d2-c1: #0E7C77; /* Asia 5.04 · 4.64 · 4.78 */
--d2-c2: #6B4FB8; /* Europe 6.11 · 5.63 · 5.80 */
--d2-c3: #8A5300; /* Africa 6.33 · 5.83 · 6.01 */
--d2-c4: #1F5B99; /* North America 6.97 · 6.41 · 6.61 */
--d2-c5: #1E7A3E; /* South America 5.37 · 4.95 · 5.10 */
--d2-c6: #B02D66; /* Australia 6.15 · 5.66 · 5.84 */
--d2-c7: #5C7A8C; /* Not specified 4.55 · 4.19 · 4.32 */
/* 10% washes of the same seven. Decorative fills only — nothing is ever read
on one, so no ratio applies. Written as legacy rgba() so an old engine that
does not parse the space-separated form still gets the colour. */
--d2-c1-w: rgba( 14, 124, 119, .10);
--d2-c2-w: rgba(107, 79, 184, .10);
--d2-c3-w: rgba(138, 83, 0, .10);
--d2-c4-w: rgba( 31, 91, 153, .10);
--d2-c5-w: rgba( 30, 122, 62, .10);
--d2-c6-w: rgba(176, 45, 102, .10);
--d2-c7-w: rgba( 92, 122, 140, .10);
/* Tabler's radii and its almost-invisible card shadow. */
--d2-r-card: 6px;
--d2-r-el: 4px;
--d2-r-pill: 999px;
--d2-shadow: 0 1px 2px rgba(20, 70, 110, .06);
/* Vertical rhythm. Only these two values separate one block from the next. */
--d2-gap: 24px; /* panel to panel, and band to band */
--d2-gap-lg: 40px; /* before the closing call to action */
--d2-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--d2-dis: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
background: var(--d2-bg);
color: var(--d2-ink);
font-family: var(--d2-ui);
/* Tabler runs at 14px. 15px here: the same discipline, but this is a public
page read on mid-range Android phones, not an operator's console. */
font-size: 15px;
line-height: 1.55;
padding: 44px 0 60px;
margin: 0;
/* Full-bleed ground without a horizontal-overflow risk. */
box-shadow: 0 0 0 100vmax var(--d2-bg);
clip-path: inset(0 -100vmax);
overflow-x: hidden;
}
.whnf26-d2 *, .whnf26-d2 *::before, .whnf26-d2 *::after { box-sizing: border-box; }
.d2-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.whnf26-d2-sr {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Divi/theme resets, scoped.
The element selectors are wrapped in :where() so they weigh exactly one class
(0,1,0): enough to beat the theme's `body p` / `.entry-content a` element rules,
but never enough to beat the component classes below, which would otherwise
silently lose every margin and — worse — every colour they declare.
Browsers without :where() drop these rules entirely, which is a safe failure:
the component rules still apply and only the theme's own margins leak in. */
.whnf26-d2 :where(h2, h3, h4) { font-family: var(--d2-dis); color: var(--d2-ink); margin: 0; padding: 0; line-height: 1.3; }
.whnf26-d2 :where(p) { margin: 0 0 12px; padding: 0; }
.whnf26-d2 :where(p:last-child) { margin-bottom: 0; }
.whnf26-d2 :where(ul, ol, dl) { margin: 0; padding: 0; list-style: none; }
.whnf26-d2 :where(table) { border-collapse: collapse; width: 100%; margin: 0; }
.whnf26-d2 :where(img) { max-width: 100%; height: auto; display: block; }
.whnf26-d2 :where(a) { color: var(--d2-teal); }
.whnf26-d2 :where(figure) { margin: 0; }
/* Divi ships `#left-area ul` at ID strength (1,0,1). No number of classes can
beat an id, so the two properties it forces on our chip lists — a disc marker
and a left indent — are the only two declarations on this page that need
!important. Scoped to one class so it cannot travel. Verified from pixels:
before this rule the six continent chips rendered with bullets and sat 16px
right of the paragraph above them. */
.whnf26-d2 .d2-cov__list,
.whnf26-d2 .d2-chiplist {
padding: 0 !important;
list-style: none !important;
}
.whnf26-d2 :focus-visible {
outline: 3px solid var(--d2-teal); /* 5.04:1 on white, 4.64:1 on the page ground */
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- Cards ----------
Tabler's card: white, one hairline, small radius, a shadow you have to look
for, and colour delivered as a 3px bar on the top edge (card-status-top)
rather than as a tint behind the content. */
.d2-panel {
position: relative;
background: var(--d2-surface);
border: 1px solid var(--d2-line);
border-radius: var(--d2-r-card);
box-shadow: var(--d2-shadow);
padding: 20px;
margin: 0 0 var(--d2-gap);
}
.d2-panel::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--d2-rule, var(--d2-accent));
border-radius: var(--d2-r-card) var(--d2-r-card) 0 0;
}
/* Per-panel accent. Purely decorative: nothing is read on or against these
bars and every panel is also named by its heading, so the reference
turquoise (1.75:1) is safe on the first card. The six others are the
categorical hues, all >= 4.55:1 on white. */
.d2-panel--live { --d2-rule: var(--d2-accent); }
.d2-panel--invite { --d2-rule: var(--d2-teal); }
.d2-panel--week { --d2-rule: var(--d2-c4); }
.d2-panel--goals { --d2-rule: var(--d2-ink); }
.d2-panel--donut { --d2-rule: var(--d2-c2); }
.d2-panel--figure { --d2-rule: var(--d2-accent); }
.d2-panel--rank { --d2-rule: var(--d2-c3); }
.d2-panel--globe { --d2-rule: var(--d2-c5); }
.d2-panel--field { --d2-rule: var(--d2-c6); }
.d2-panel--close { --d2-rule: var(--d2-teal); }
/* A band is a row of panels. It needs the same bottom margin its panels gave up,
or the block that follows it sits flush against the analytics row. */
.d2-band { margin: 0 0 var(--d2-gap); }
/* Tabler's card header: a quiet band, one hairline below it, the title small
and 600, and any status badge pushed to the right edge. Two markup shapes
exist on this page — a wrapped .d2-panel__head, and a bare title followed by
a note — and both get the same band. */
.d2-panel__head {
display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
margin: 0 0 18px; padding: 0 0 13px;
border-bottom: 1px solid var(--d2-line);
}
.d2-panel__head .d2-panel__note { flex: 1 0 100%; }
.d2-panel__head .d2-tag { margin-left: auto; }
.d2-panel__title { font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.d2-panel > .d2-panel__title + .d2-panel__note {
margin: 6px 0 18px; padding: 0 0 13px;
border-bottom: 1px solid var(--d2-line);
}
.d2-panel__note { font-size: 13px; line-height: 1.5; color: var(--d2-muted); margin: 6px 0 0; }
/* An empty panel states that it is waiting, and looks like it is waiting: a
dashed teal outline on the teal wash, the same device the goal meters use.
--d2-ink-2 on --d2-teal-wash is 8.11:1; the dashed --d2-teal edge is 4.56:1
on that wash, above the 3:1 floor for a non-text boundary. */
.d2-empty { color: var(--d2-muted); font-size: 14px; }
.d2-panel--donut .d2-empty,
.d2-panel--rank .d2-empty {
color: var(--d2-ink-2);
background: var(--d2-teal-wash);
border: 1px dashed var(--d2-teal);
border-radius: var(--d2-r-el);
padding: 14px 16px;
}
/* ---------- Badges ----------
Tabler's badge: 11px, 600, tight padding, small radius. Three states, each
separated by fill AND by border AND by the word inside it. */
.d2-tag {
display: inline-block; vertical-align: middle;
font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 9px; border-radius: var(--d2-r-el); line-height: 1.5;
}
.d2-tag--live { background: var(--d2-teal-wash); color: var(--d2-teal); border: 1px solid var(--d2-teal); } /* 4.56:1 */
.d2-tag--wait { background: var(--d2-well); color: var(--d2-muted); border: 1px solid var(--d2-line-2); } /* 5.38:1 */
/* Solid navy, white text: the goal badge now reads as a different KIND of thing
from the outlined live badge, not merely a different colour of the same thing. */
.d2-tag--goal { background: var(--d2-ink); color: #FFFFFF; border: 1px solid var(--d2-ink); } /* 8.52:1 */
.d2-link {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
font-weight: 600; color: var(--d2-teal); text-decoration: underline; text-underline-offset: 3px;
}
.d2-link:hover { color: var(--d2-teal-h); }
/* ---------- Buttons ----------
The primary call to action stays a pill: it is the Ministry's button shape on
every other page of this site, and Tabler's square button here would read as
a different product. Secondary controls below are Tabler-square. */
.d2-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 12px 24px;
background: var(--d2-teal); color: #FFFFFF; /* white on #0E7C77 = 5.04:1 */
font-family: var(--d2-dis); font-size: 15px; font-weight: 600; line-height: 1.5;
border: 1px solid var(--d2-teal); border-radius: var(--d2-r-pill);
text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.d2-cta:hover, .d2-cta:focus { background: var(--d2-teal-h); border-color: var(--d2-teal-h); color: #FFFFFF; }
/* Belt and braces: the CTA label must be white on teal (5.04:1) whatever else on
the page tries to colour an . A teal-on-teal label is 1:1 and unreadable. */
.whnf26-d2 a.d2-cta, .whnf26-d2 a.d2-cta:hover, .whnf26-d2 a.d2-cta:focus { color: #FFFFFF; }
/* ---------- 1. Console header ---------- */
.d2-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; margin: 0 0 24px; }
.d2-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--d2-teal); margin: 0 0 8px; } /* 5.04:1 on white, 4.64:1 on the ground */
.d2-title { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.d2-daterange {
display: inline-block; margin: 12px 0 0; padding: 6px 14px;
background: var(--d2-surface); border: 1px solid var(--d2-teal); border-radius: var(--d2-r-el);
font-size: 13px; font-weight: 600; color: var(--d2-ink); line-height: 1.5; /* 8.52:1 on white; the teal edge is 5.04:1 */
}
/* Three ranks, stacked, right-aligned against the title block:
1. state pill — Live / Standby, one word
2. provenance — where the figures came from, one fact per line
3. the ask — the CTA and the sentence that justifies it
The identical structure serves every data tier; only the words inside change,
so the page does not visibly become a different design when reports arrive. */
.d2-head__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 340px; }
/* Tabler's .status: a pill, a dot, one word. Standby is blue rather than grey —
the console is armed and waiting, which is not the same as switched off. */
.d2-status {
display: inline-flex; align-items: center; gap: 8px; margin: 0;
padding: 5px 12px; border-radius: var(--d2-r-pill);
background: var(--d2-surface); border: 1px solid var(--d2-c4);
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
line-height: 1.5; color: var(--d2-c4); /* 6.97:1 on white */
}
.d2-status--live {
background: var(--d2-teal-wash); border-color: var(--d2-teal); color: var(--d2-teal); /* 4.56:1 on the wash */
}
.d2-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d2-c4); flex: none; }
.d2-status--live .d2-status__dot { background: var(--d2-teal); }
.d2-prov { margin: 0; text-align: right; font-size: 13px; line-height: 1.6; color: var(--d2-muted); } /* 5.21:1 on the page ground */
.d2-prov__line { display: block; }
.d2-prov time { color: inherit; }
.d2-act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 2px 0 0; }
.d2-act__note { margin: 0; max-width: 34ch; text-align: right; font-size: 12px; line-height: 1.5; color: var(--d2-muted); }
/* ---------- 2. Live figures ----------
Tabler's stat tile: an 11px uppercase subheader, a large figure, a small
footnote — and card-status-start, the 3px bar on the LEFT edge.
THE ONE DISTINCTION THAT MUST NEVER COLLAPSE. A live tile is white, its bar
is on the left, its bar is a hue, and it carries no badge. A goal tile is
tinted, its rule is on the top, that rule is navy, and it carries a solid
navy GOAL badge. Four independent devices, three of which are structural
rather than chromatic, so the separation survives greyscale and every form
of colour blindness. The four hues here are decorative differentiation only —
no green, no red, so no tile can be misread as passing or failing. */
.d2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.d2-kpi {
padding: 16px 18px;
background: var(--d2-surface);
border: 1px solid var(--d2-line); border-radius: var(--d2-r-el);
border-left: 3px solid var(--d2-kpi-c, var(--d2-c4));
}
.d2-kpi:nth-child(1) { --d2-kpi-c: var(--d2-c1); } /* teal 5.04:1 on white */
.d2-kpi:nth-child(2) { --d2-kpi-c: var(--d2-c4); } /* blue 6.97:1 */
.d2-kpi:nth-child(3) { --d2-kpi-c: var(--d2-c2); } /* violet 6.11:1 */
.d2-kpi:nth-child(4) { --d2-kpi-c: var(--d2-c3); } /* ochre 6.33:1 */
.d2-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); margin: 0 0 6px; line-height: 1.4; }
.d2-kpi__value { font-family: var(--d2-dis); font-size: clamp(24px, 6vw, 30px); font-weight: 700; line-height: 1.15; color: var(--d2-ink); margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d2-kpi__foot { font-size: 12px; line-height: 1.45; color: var(--d2-muted); margin: 6px 0 0; }
.d2-updated { font-size: 12px; color: var(--d2-muted); margin: 16px 0 0; }
/* ---------- 2b. Derived figures ----------
Arithmetic on the four live tiles above, in a quieter tier so the primary
figures keep their rank. Sits on --d2-well, never on the goal tint. */
.d2-derived {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
margin: 16px 0 0;
background: var(--d2-line); /* shows through as hairlines */
border: 1px solid var(--d2-line); border-radius: var(--d2-r-el); overflow: hidden;
}
.d2-derived__item { background: var(--d2-well); padding: 12px 16px; }
.d2-derived__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); margin: 0 0 3px; line-height: 1.4; } /* 5.38:1 on --d2-well */
.d2-derived__value { margin: 0; font-family: var(--d2-dis); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--d2-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* 8.09:1 */
.d2-derived__unit { font-family: var(--d2-ui); font-size: 13px; font-weight: 500; color: var(--d2-muted); }
/* ---------- 2c. Kinds of programme ---------- */
.d2-ptypes { margin: 16px 0 0; }
.d2-ptypes__lead { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); margin: 0 0 8px; }
.d2-chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.d2-ptype {
display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 11px;
background: var(--d2-teal-wash); border: 1px solid var(--d2-teal); border-radius: var(--d2-r-pill);
font-size: 13px; line-height: 1.5; color: var(--d2-ink-2); /* 8.11:1 on the wash; the teal edge is 4.56:1 */
}
.d2-ptype__n {
min-width: 24px; padding: 0 7px; border-radius: var(--d2-r-pill);
background: var(--d2-surface); border: 1px solid var(--d2-line-2);
font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--d2-ink);
}
/* ---------- 3. Invitation ---------- */
.d2-panel--invite { border-color: var(--d2-teal); }
.d2-invite { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; }
.d2-invite__msg p { color: var(--d2-muted); }
.d2-invite__link a { font-weight: 600; }
.d2-steps { margin: 0 0 20px; }
.d2-steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--d2-line); font-size: 14px; line-height: 1.5; color: var(--d2-ink-2); }
.d2-steps li:last-child { border-bottom: 0; }
/* Four filled discs rather than four teal outlines. On the empty state these
are most of the colour above the fold, and white on each of the four is
5.04 / 6.97 / 6.11 / 6.33:1 — AA for the 12px bold numeral inside. */
.d2-steps li:nth-child(1) { --d2-st: var(--d2-c1); }
.d2-steps li:nth-child(2) { --d2-st: var(--d2-c4); }
.d2-steps li:nth-child(3) { --d2-st: var(--d2-c2); }
.d2-steps li:nth-child(4) { --d2-st: var(--d2-c3); }
.d2-steps__n {
flex: none; width: 24px; height: 24px; border-radius: 50%;
background: var(--d2-st, var(--d2-teal)); border: 0; color: #FFFFFF;
font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
}
/* ---------- 3b. The festival week ----------
Seven fixed, published days. A day with no report keeps its column, its label
and a dashed baseline — the same "nothing measured here" device the goal
meters use — so an empty week reads as waiting rather than as a result of zero.
Each column now carries its own hue: a 10% wash inside the frame and a 2px
baseline under it. The wash is uniform over the FULL height of the frame, and
a wash that is always full height can never be read as a bar that happens to
be full. The bar that does carry a value is the saturated .d2-week__fill,
drawn in the same hue at full strength, with a rounded top — a different
object at a glance. The baseline hues are 4.55:1 or better on white, above
the 3:1 floor, and are dashed while a day is empty and solid once it is not. */
.d2-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.d2-week__day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.d2-week__day:nth-child(1) { --d2-day: var(--d2-c1); --d2-day-w: var(--d2-c1-w); }
.d2-week__day:nth-child(2) { --d2-day: var(--d2-c2); --d2-day-w: var(--d2-c2-w); }
.d2-week__day:nth-child(3) { --d2-day: var(--d2-c3); --d2-day-w: var(--d2-c3-w); }
.d2-week__day:nth-child(4) { --d2-day: var(--d2-c4); --d2-day-w: var(--d2-c4-w); }
.d2-week__day:nth-child(5) { --d2-day: var(--d2-c5); --d2-day-w: var(--d2-c5-w); }
.d2-week__day:nth-child(6) { --d2-day: var(--d2-c6); --d2-day-w: var(--d2-c6-w); }
.d2-week__day:nth-child(7) { --d2-day: var(--d2-c7); --d2-day-w: var(--d2-c7-w); }
.d2-week__n {
font-family: var(--d2-dis); font-size: 14px; font-weight: 700; line-height: 1;
color: var(--d2-day, var(--d2-ink)); font-variant-numeric: tabular-nums;
}
.d2-week__day:not(.is-on) .d2-week__n { color: var(--d2-line-ui); } /* 3.55:1 — a decorative placeholder dot, not a figure */
.d2-week__bar {
display: flex; align-items: flex-end; justify-content: center;
width: 100%; height: 104px; padding: 0 5px;
background: var(--d2-day-w, var(--d2-well));
border: 1px solid var(--d2-line);
border-bottom: 2px solid var(--d2-day, var(--d2-line-ui));
border-radius: var(--d2-r-el) var(--d2-r-el) 0 0;
}
.d2-week__day:not(.is-on) .d2-week__bar { border-bottom-style: dashed; }
.d2-week__fill { display: block; width: 100%; background: var(--d2-day, var(--d2-teal)); border-radius: 3px 3px 0 0; }
.d2-week__lab { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.d2-week__dow { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); }
.d2-week__dom { font-size: 14px; font-weight: 700; color: var(--d2-ink-2); font-variant-numeric: tabular-nums; }
.d2-week__foot { font-size: 13px; line-height: 1.5; color: var(--d2-muted); margin: 16px 0 0; }
/* ---------- 4. Goals ---------- */
.d2-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Tinted, top-ruled in navy, and badged. See the note on .d2-kpi above: these
three devices plus the badge are what keeps an aim apart from a measurement. */
.d2-goal {
position: relative; padding: 16px 18px;
background: var(--d2-goal-bg); border: 1px solid var(--d2-line); border-radius: var(--d2-r-el);
border-top: 3px solid var(--d2-ink);
}
.d2-goal__tag {
display: inline-block; margin: 0 0 8px; padding: 3px 8px;
background: var(--d2-ink); border: 1px solid var(--d2-ink); border-radius: var(--d2-r-el);
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: #FFFFFF; line-height: 1.5; /* white on navy 8.52:1 */
}
.d2-goal__value { font-family: var(--d2-dis); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--d2-ink); margin: 0; font-variant-numeric: tabular-nums; } /* 7.44:1 on the tint */
.d2-goal__label { font-size: 12px; font-weight: 600; color: var(--d2-muted); margin: 3px 0 12px; } /* 4.95:1 on the tint */
/* Tabler's progress bar: 6px, small radius, no gloss. */
.d2-meter__track { position: relative; height: 6px; border-radius: var(--d2-r-el); background: var(--d2-surface); border: 1px solid var(--d2-line-2); overflow: hidden; }
.d2-meter--empty .d2-meter__track,
.d2-meter--low .d2-meter__track { background-image: repeating-linear-gradient(90deg, var(--d2-line-2) 0 3px, transparent 3px 7px); }
.d2-meter__fill { display: block; height: 100%; background: var(--d2-teal); border-radius: var(--d2-r-el); }
.d2-meter__lead { display: block; height: 100%; width: 8px; background: var(--d2-teal); border-radius: var(--d2-r-el); }
.d2-meter__track--dashed { border-style: dashed; border-color: var(--d2-line-ui); background: transparent; }
.d2-meter__cap { font-size: 12px; line-height: 1.45; color: var(--d2-muted); margin: 8px 0 0; }
/* ---------- 5. Analytics band ---------- */
.d2-band--analytics { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: 20px; align-items: start; }
.d2-band--analytics > .d2-panel { margin: 0; height: 100%; }
.d2-donut { position: relative; width: 100%; max-width: 200px; margin: 6px auto 16px; }
.d2-donut__svg { width: 100%; height: auto; display: block; }
/* The unfilled remainder. Pale turquoise rather than grey, so a ring with
nothing in it yet reads as waiting rather than as switched off. Decorative:
nothing is read on it, and at roughly 1.2:1 against white it can never be
mistaken for one of the segments, all of which are 4.55:1 or darker. */
.d2-donut__track { stroke: rgba(77, 215, 210, .38); }
.d2-donut__seg { stroke-linecap: butt; }
.d2-donut__centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.d2-donut__num { font-family: var(--d2-dis); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
.d2-donut__cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); }
.d2-legend__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--d2-line); }
.d2-legend__row:last-child { border-bottom: 0; }
.d2-legend dt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--d2-ink-2); overflow-wrap: anywhere; }
.d2-legend dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
.d2-legend__sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* Continent coverage — six named chips, filled once that continent has reported.
Six is the number of options on the report form, not a target.
Each chip carries a dot in that continent's fixed hue, the same hue the donut
will give it. While a continent has not reported the chip stays white with a
--d2-line-ui border (3.55:1) and --d2-muted text (5.66:1); the dot is a legend
key, not a value. Once it has reported the chip fills with its hue and takes
white text — 5.04:1 at worst, 6.97:1 at best. State is carried by fill, by
border, by text colour AND by a visually-hidden sentence, never by hue alone. */
.d2-cov { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--d2-line); }
.d2-cov__head { font-size: 13px; line-height: 1.5; color: var(--d2-ink-2); margin: 0 0 10px; }
.d2-cov__n { font-family: var(--d2-dis); font-size: 19px; font-weight: 700; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
.d2-cov__list { display: flex; flex-wrap: wrap; gap: 7px; }
.d2-cov__item {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 11px; border-radius: var(--d2-r-pill);
background: var(--d2-surface); border: 1px solid var(--d2-line-ui); color: var(--d2-muted);
font-size: 12px; font-weight: 600; line-height: 1.5;
}
.d2-cov__item::before {
content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
background: var(--d2-cc, var(--d2-line-ui));
}
.d2-cov__list > :nth-child(1) { --d2-cc: var(--d2-c1); } /* Asia */
.d2-cov__list > :nth-child(2) { --d2-cc: var(--d2-c2); } /* Europe */
.d2-cov__list > :nth-child(3) { --d2-cc: var(--d2-c3); } /* Africa */
.d2-cov__list > :nth-child(4) { --d2-cc: var(--d2-c4); } /* North America */
.d2-cov__list > :nth-child(5) { --d2-cc: var(--d2-c5); } /* South America */
.d2-cov__list > :nth-child(6) { --d2-cc: var(--d2-c6); } /* Australia */
.d2-cov__item.is-on { background: var(--d2-cc); border-color: var(--d2-cc); color: #FFFFFF; }
.d2-cov__item.is-on::before { background: #FFFFFF; }
.d2-figure__media { border-radius: var(--d2-r-el); overflow: hidden; background: var(--d2-well); aspect-ratio: 4 / 3; }
.d2-figure__media img { width: 100%; height: 100%; object-fit: cover; }
.d2-figure__cap { font-size: 12px; line-height: 1.5; color: var(--d2-muted); margin: 12px 0 0; }
.d2-figure__cap a { font-weight: 600; }
.d2-figure__credit { display: block; margin-top: 4px; }
/* Reporting entity mix — Temple / Congregation / Individual, the form's own three
options. Only categories that have reports are rendered, so an unused option
never appears as a zero. */
.d2-mix { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; }
.d2-mix__item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--d2-muted); }
.d2-mix__n { font-family: var(--d2-dis); font-size: 17px; font-weight: 700; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
.d2-mix__item--none .d2-mix__n { color: var(--d2-muted); }
/* Ranked participation list — the reference's shape, with a real metric */
.d2-rank__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); }
.d2-rank__row {
display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 12px;
background: var(--d2-row); border: 1px solid var(--d2-line); border-radius: var(--d2-r-el);
}
.d2-rank__badge {
flex: none; width: 26px; height: 26px; border-radius: var(--d2-r-el);
background: var(--d2-c4); border: 0; color: #FFFFFF; /* white on #1F5B99 = 6.97:1 */
font-size: 12px; font-weight: 700; line-height: 26px; text-align: center; font-variant-numeric: tabular-nums;
}
.d2-rank__name { flex: 1 1 auto; min-width: 0; }
.d2-rank__title { display: block; font-size: 14px; font-weight: 600; color: var(--d2-ink); overflow-wrap: anywhere; }
.d2-rank__sub { display: block; font-size: 12px; color: var(--d2-muted); overflow-wrap: anywhere; }
.d2-rank__val { flex: none; font-family: var(--d2-dis); font-size: 17px; font-weight: 700; color: var(--d2-ink); font-variant-numeric: tabular-nums; }
/* ---------- 6. Globe ---------- */
.d2-globe { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
/* No geo layer and/or no built geometry on disk: the table alone, full width.
No empty circle, no promise of an object that is not going to appear. */
.d2-globe--tableonly { grid-template-columns: 1fr; }
.d2-globe__stage { display: none; position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
/* The drag instruction only exists once there is something to drag. */
.d2-globe__drag { display: none; }
.d2-panel--globe[data-state="ready"] .d2-globe__drag { display: inline; }
.d2-panel--globe[data-state="ready"] .d2-globe__stage { display: block; }
/* The stage sits in a shallow well so the sphere has ground under it rather than
floating on the card. Flat, no gradient — the depth comes from one hairline. */
.d2-panel--globe[data-state="ready"] .d2-globe__fig {
padding: 22px 20px 18px;
background: var(--d2-well); border: 1px solid var(--d2-line); border-radius: var(--d2-r-el);
}
.d2-globe__canvas {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
border-radius: 50%; background: #AEDDEF; border: 1px solid var(--d2-ink);
/* Two decorative haloes. The reference accent used for the one thing it is
safe for — a large soft fill that carries no information and is never read.
The sphere's real edge is the 1px navy border: 8.09:1 against the well it
sits on, and 5.84:1 against the ocean fill inside it. */
box-shadow: 0 0 0 6px rgba(77, 215, 210, .22), 0 0 0 15px rgba(31, 91, 153, .06);
touch-action: none; cursor: grab;
}
.d2-globe__canvas:active { cursor: grabbing; }
.d2-globe__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
/* Tabler-square secondary buttons. 44px minimum in both directions. */
.d2-gbtn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; min-width: 44px; padding: 10px 14px;
background: var(--d2-surface); color: var(--d2-teal);
border: 1px solid var(--d2-teal); border-radius: var(--d2-r-el);
font-family: var(--d2-ui); font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.d2-gbtn:hover { background: var(--d2-teal-wash); }
.d2-gbtn[aria-pressed="true"] { background: var(--d2-teal); color: #FFFFFF; }
.d2-globe__cap { font-size: 12px; line-height: 1.5; color: var(--d2-muted); margin: 14px 0 0; text-align: center; }
.d2-globe__fail { display: none; }
.d2-panel--globe[data-state="failed"] .d2-globe__fail { display: block; margin-top: 8px; color: var(--d2-ink-2); font-weight: 600; }
/* Tabler's table: no zebra, no filled header band, 11px uppercase column
labels, one hairline per row.
SPECIFICITY. Divi's theme customizer emits three rules that reach straight
into this table and win on weight:
.entry-content thead th, .entry-content tr th { color: white } (0,2,1)
.entry-content tr td { border-top: 1px solid #eee; padding: 6px 24px }
.entry-content table:not(.variations) { border: 1px solid #eee }
The first of those had been painting every | on this page white on white:
the country table's five column labels and its 'All countries' total row were
invisible, and had been since the table was built. Every selector below
therefore carries the .whnf26-d2 scope as well, which makes it (0,3,0) —
one class heavier than Divi's (0,2,1), so it wins on weight rather than on
source order, and without a single !important. Verified from the pixels: the
header band went from zero non-white pixels to legible 11px labels. */
.d2-tablewrap { overflow-x: auto; border: 1px solid var(--d2-line); border-radius: var(--d2-r-el); }
.whnf26-d2 .d2-table { font-size: 14px; border: 0; }
.whnf26-d2 .d2-table caption { text-align: left; }
.whnf26-d2 .d2-table th,
.whnf26-d2 .d2-table td { padding: 10px 12px; text-align: left; border-top: 0; border-bottom: 1px solid var(--d2-line); vertical-align: middle; }
.whnf26-d2 .d2-table thead th { background: var(--d2-surface); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); white-space: nowrap; border-bottom: 1px solid var(--d2-line-2); } /* 5.66:1 on white */
.whnf26-d2 .d2-table tbody th { font-weight: 600; color: var(--d2-ink); overflow-wrap: anywhere; hyphens: auto; padding-top: 4px; padding-bottom: 4px; } /* 8.52:1 on white */
.whnf26-d2 .d2-table td { color: var(--d2-ink-2); } /* 8.97:1 on white */
.whnf26-d2 .d2-table .d2-num { text-align: right; font-variant-numeric: tabular-nums; }
.whnf26-d2 .d2-table tbody tr:last-child th,
.whnf26-d2 .d2-table tbody tr:last-child td { border-bottom: 1px solid var(--d2-line); }
.whnf26-d2 .d2-table tfoot th,
.whnf26-d2 .d2-table tfoot td { background: var(--d2-well); font-weight: 700; color: var(--d2-ink); border-bottom: 0; } /* 8.09:1 on --d2-well */
.whnf26-d2 .d2-table .d2-table__empty { color: var(--d2-muted); } /* 5.66:1 — Divi paints bare td white here too */
.d2-country__note { display: block; font-size: 12px; font-weight: 400; color: var(--d2-muted); }
button.d2-country {
display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0;
background: none; border: 0; font: inherit; color: var(--d2-teal); cursor: pointer;
text-align: left; text-decoration: underline; text-underline-offset: 3px;
}
button.d2-country:hover { color: var(--d2-teal-h); }
.whnf26-d2 .d2-table tbody tr[aria-selected="true"] { background: var(--d2-row-sel); }
.whnf26-d2 .d2-table tbody tr[aria-selected="true"] th { box-shadow: inset 3px 0 0 var(--d2-teal); }
.d2-globe__summary { font-size: 12px; color: var(--d2-muted); margin: 12px 0 0; }
.d2-globe__summary button {
background: none; border: 0; padding: 0 0 0 6px; font: inherit; color: var(--d2-teal);
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
/* ---------- 7. Report cards ---------- */
.d2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.d2-card { display: flex; flex-direction: column; background: var(--d2-surface); border: 1px solid var(--d2-line); border-radius: var(--d2-r-el); overflow: hidden; transition: border-color .15s ease; }
.d2-card:hover { border-color: var(--d2-line-ui); }
.d2-card__media { display: block; aspect-ratio: 16 / 10; background: var(--d2-well); }
.d2-card__media img { width: 100%; height: 100%; object-fit: cover; }
.d2-card__body { padding: 14px 16px 16px; }
.d2-card__title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.d2-card__title a { color: var(--d2-ink); text-decoration: none; }
.d2-card__title a:hover { text-decoration: underline; }
.d2-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--d2-muted); margin: 8px 0 0; }
.d2-card__figure { font-size: 13px; color: var(--d2-ink-2); margin: 8px 0 0; }
.d2-card--invite { border-style: dashed; border-color: var(--d2-teal); background: var(--d2-teal-wash); }
.d2-card--invite p { font-size: 13px; color: var(--d2-ink-2); }
.d2-card.is-dim { display: none; }
/* ---------- 8. Closing CTA ----------
One larger gap on the page, so the closing invitation is not read as one more
panel of figures. Adjacent margins collapse, so this value wins over the 24px.
It is the one panel with a tinted ground: --d2-ink on --d2-teal-wash is
7.71:1 and --d2-muted on it is 5.12:1. */
.d2-panel--close {
text-align: center; margin-top: var(--d2-gap-lg);
background: var(--d2-teal-wash); border-color: var(--d2-teal);
}
.d2-panel--close p { color: var(--d2-muted); max-width: 60ch; margin: 10px auto 18px; }
/* =========================================================================
Breakpoints
========================================================================= */
@media (max-width: 1199px) {
.d2-wrap { max-width: 960px; padding: 0 24px; }
.d2-panel { padding: 18px; }
.d2-title { font-size: 25px; }
.d2-band--analytics { grid-template-columns: 1fr 1fr; }
.d2-band--analytics > .d2-panel--figure { grid-column: 1 / -1; order: 3; }
.d2-figure__media { aspect-ratio: 21 / 9; }
.d2-globe { grid-template-columns: 1fr; }
.d2-globe__stage { max-width: 400px; }
.d2-invite { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 979px) {
.whnf26-d2 { padding: 36px 0 48px; }
.d2-kpis, .d2-goals { grid-template-columns: repeat(2, 1fr); }
.d2-cards { grid-template-columns: repeat(2, 1fr); }
.d2-week { gap: 6px; }
.d2-week__bar { height: 92px; }
}
@media (max-width: 767px) {
.d2-wrap { padding: 0 16px; }
.d2-panel { padding: 16px; margin-bottom: 16px; }
.d2-title { font-size: 22px; }
.d2-head { gap: 16px; }
/* Stacked and left-ranged on narrow screens; the CTA becomes full width so it
is unmistakably the action rather than a third line of statistics. */
.d2-head__meta { width: 100%; max-width: none; align-items: stretch; }
.d2-prov, .d2-act__note { text-align: left; }
.d2-act { align-items: stretch; }
.d2-status { align-self: flex-start; }
.d2-cta { width: 100%; }
.d2-band--analytics { grid-template-columns: 1fr; gap: 16px; }
.d2-band--analytics > .d2-panel--figure { order: 0; }
.d2-cards { grid-template-columns: 1fr; }
.d2-kpis, .d2-goals { gap: 12px; }
.d2-kpi, .d2-goal { padding: 14px; }
.d2-globe__stage { max-width: 280px; }
.d2-donut { max-width: 190px; }
.d2-gbtn { flex: 1 1 auto; }
/* Three narrow columns of derived figures become three full-width rows; the
1px grid gap keeps them hairline-separated in either direction. */
.d2-derived { grid-template-columns: 1fr; margin-top: 16px; }
.d2-derived__item { padding: 11px 14px; }
.d2-panel--globe[data-state="ready"] .d2-globe__fig { padding: 16px 12px 14px; }
/* Seven columns must survive 320px: tighter gap, shorter bars, smaller labels. */
.d2-week { gap: 4px; }
.d2-week__day { gap: 6px; }
.d2-week__bar { height: 74px; padding: 0 2px; }
.d2-week__n { font-size: 12px; }
.d2-week__dow { font-size: 9px; letter-spacing: .02em; }
.d2-week__dom { font-size: 13px; }
.d2-mix { gap: 6px 14px; }
}
/* Below 560px the table becomes stacked cards. The scroll wrapper stays as a backstop. */
@media (max-width: 559px) {
.d2-tablewrap { border: 0; overflow: visible; }
.whnf26-d2 .d2-table, .whnf26-d2 .d2-table tbody, .whnf26-d2 .d2-table tfoot,
.whnf26-d2 .d2-table tr, .whnf26-d2 .d2-table th, .whnf26-d2 .d2-table td { display: block; width: auto; }
.d2-table thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.whnf26-d2 .d2-table tr { border: 1px solid var(--d2-line); border-radius: var(--d2-r-el); margin-bottom: 12px; padding: 6px 0; background: var(--d2-surface); }
.whnf26-d2 .d2-table tbody th { border-bottom: 1px solid var(--d2-line); font-size: 15px; }
.whnf26-d2 .d2-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 0; padding: 7px 12px; text-align: right; }
.whnf26-d2 .d2-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-muted); text-align: left; }
.whnf26-d2 .d2-table tfoot tr { background: var(--d2-well); }
.whnf26-d2 .d2-table tbody tr[aria-selected="true"] th { box-shadow: none; }
.whnf26-d2 .d2-table tbody tr[aria-selected="true"] { background: var(--d2-row-sel); border-color: var(--d2-teal); }
.d2-rank__row { flex-wrap: wrap; }
.d2-rank__val { width: 100%; text-align: right; }
}
/* =========================================================================
Motion — one global guard. The globe's rAF loop is gated in JavaScript,
because a CSS media query cannot stop a requestAnimationFrame loop.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.whnf26-d2 *, .whnf26-d2 *::before, .whnf26-d2 *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
@media print {
.whnf26-d2 { box-shadow: none; clip-path: none; background: #FFFFFF; }
.d2-globe__stage, .d2-globe__controls { display: none !important; }
}
/* The Live pill carries the moment of the most recent report, which is what
makes the page feel live. The timestamp is a quieter weight than the state
word so the pill still reads as a status, not a sentence. */
.d2-status__when { font-weight: 500; opacity: .82; white-space: nowrap; }
.d2-status { white-space: nowrap; }
@media (max-width: 560px) {
.d2-status { white-space: normal; }
.d2-status__when { display: block; margin-top: 2px; }
.d2-status__when::before { content: none; }
}
/* The date pill sat as a bare bordered box under the title, with the type
crowding its edges and the dash floating loose in the middle. Given room,
a warmer ground and a non-breaking range, it reads as one object. */
.d2-daterange {
margin-top: 14px;
padding: 8px 18px;
border-radius: 999px;
background: #F3FBFD;
border: 1px solid #2E8F96; /* 3.52:1 on the page ground — a boundary must clear 3:1.
#9ED9DC was tried first and measured 1.44:1. */
color: #14446F; /* 9.2:1 on #F3FBFD */
font-size: 13.5px;
letter-spacing: .012em;
white-space: nowrap; /* "17–23 September 2026" never breaks in two */
}
@media (max-width: 420px) {
.d2-daterange { font-size: 12.5px; padding: 7px 14px; white-space: normal; }
}
/* With the four explainer steps gone, the invitation panel is a message and a
single action — so it lays out as two balanced halves, not a list beside a
paragraph. */
.d2-invite__steps {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
}
.d2-invite__link { margin: 0; font-size: 13.5px; }
/* The console title carried the same weight as a panel heading, so the page
opened without a clear first rank. Raised, with the eyebrow above it kept
small so the contrast between them does the work. */
.d2-title {
font-size: clamp(26px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -.015em;
}
.d2-eyebrow { font-size: 12.5px; letter-spacing: .17em; }
@media (max-width: 560px) {
.d2-title { font-size: clamp(23px, 6.6vw, 30px); }
}
|