/* ===========================================================================
EMAAR — About EMAAR / Corporate ecosystem
about.css — the editorial layer for the sixteen corporate pages.
LOAD ORDER (every About page, without exception):
places.css tokens, reset, chrome, buttons, breadcrumb, motion
site-nav.css the shared mega menu
site-footer.css the shared footer
about.css THIS FILE — the corporate editorial system
about.css adds; it never restyles a .em-* component. Where an About page
needs a primitive that already exists (.em-btn, .em-crumb, .em-eyebrow,
.em-faq, .em-ph, [data-em-reveal]) it uses that primitive unchanged, so the
corporate pages and the property pages stay one product.
WHY THIS IS NOT THE PROPERTY-PAGE LANGUAGE
------------------------------------------
The property pages sell a place: the picture leads, the words follow. These
pages substantiate a company, and their content is overwhelmingly text,
number and document. Photography here is evidence, not atmosphere, so:
· no page opens on a banner. Every page opens on a MASTHEAD — a ruled,
two-column typographic block that answers "where am I / what is this /
what can I do" above the fold without a single pixel of image.
· large type never sits on a photograph anywhere in this ecosystem.
· chronological and documentary content (reports, jobs, glossary) is a
RULED ROW, not a card. A card grid turns a 40-item archive into 40
boxes to scan; a ruled ledger reads in one vertical sweep.
· cards are for the places where the image genuinely carries the content:
the blog, and — since the newsroom was rebuilt — the press releases.
Press moved because the RECORD moved: EMAAR publishes a hero image with
every release in its CMS and leads with it on emaar.com, so withholding
it here would have been an editing decision this build is not entitled
to make. See press.css.
Namespace: .ab-* and --ab-*
=========================================================================== */
/* ————————————————————————— 1 · Tokens ————————————————————————— */
/* Carried on the element, not on :root. A custom property is substituted
where it is DECLARED, so an alias written on :root would bake in the root
value and stop tracking the page's own ground. */
body[data-ab] {
/* THE EDITORIAL REGISTER.
The ground, the measure, the band rhythm, the body size and the three
heading steps used to be declared here as --ab-* literals — a second
type system living inside one page family's stylesheet. They are now the
site's EDITORIAL register, declared once in assets/ds/01-tokens.css and
switched on by this same [data-ab] scope. Same rendering, one source.
Carried on the element, not on :root. A custom property is substituted
where it is DECLARED, so an alias written on :root would bake in the root
value and stop tracking the page's own ground. */
/* --- names this file uses. Each one is now a view of a system token. --- */
--ab-ground: var(--em-bg-primary);
--ab-paper: var(--em-surface-primary);
--ab-sunk: var(--em-surface-sunk);
--ab-measure: var(--em-container-text);
--ab-measure-sm: var(--p-container-prose-sm);
--ab-band: var(--space-band);
--ab-band-sm: var(--space-band-tight);
/* the left spine column. Below 1024 it collapses and this is unused.
Genuinely this family's own — one consumer, so not a system token. */
--ab-rail: clamp(150px, 19vw, 232px);
/* the anchor offset: header + the sticky section index that sits under it
on small screens. Sections must clear BOTH or a jump link lands behind
the index it was clicked from. */
--ab-anchor: calc(var(--em-header-height) + 64px);
background: var(--em-bg-primary);
font-size: var(--em-text-body-md);
}
@media (min-width: 1024px) {
/* on desktop the index is a left rail, not a bar, so only the header
overlaps the anchor */
body[data-ab] { --ab-anchor: calc(var(--em-header-height) + 20px); }
}
body[data-ab] section[id],
body[data-ab] [id].ab-anchor { scroll-margin-top: var(--ab-anchor); }
/* ————————————————————————— 2 · Type ————————————————————————— */
/* One display face, one text face, four sizes, and no fifth. Restraint is
the whole luxury argument: the hierarchy is carried by SPACE and RULE,
with weight used once (600) and only on small uppercase labels. */
.ab-h1 {
font-family: var(--em-display);
font-size: var(--em-text-h1);
line-height: 1.03;
letter-spacing: -.012em;
max-width: 15em;
text-wrap: pretty;
margin: 0;
}
.ab-h1--long { font-size: clamp(29px, 3.6vw, 46px); max-width: 17em; }
.ab-h2 {
font-family: var(--em-display);
font-size: var(--em-text-h2);
line-height: 1.1;
letter-spacing: -.008em;
max-width: 18em;
text-wrap: pretty;
margin: 0;
}
.ab-h3 {
font-family: var(--em-display);
font-size: var(--em-text-h3);
line-height: 1.22;
max-width: 24em;
text-wrap: pretty;
margin: 0;
}
/* The lede is the only place body text is allowed to grow. It is a single
paragraph directly under an h1 and never appears twice on a page. */
.ab-lede {
font-size: var(--em-text-lede);
line-height: 1.5;
color: var(--em-ink-body);
max-width: 30em;
text-wrap: pretty;
margin: 0;
}
/* ——— The masthead's floor ———————————————————————————————————————————
Twenty-seven pages share .ab-mast, and every one of them has an IDENTICAL
frame: the same header clearance (112px), the same breadcrumb (44px + 44px
of air), the same one-line H1. Measured across all of them, the only thing
that moved was how long the standfirst ran — one to four lines — and the
pages opened at twelve different heights across a 162px band. A reader
never learns where a page begins if it begins somewhere new each time.
The floor goes on the LEDE, not on .ab-mast itself. A min-height on the
mast would be a number to maintain, and would say nothing about why. A
reserve of three lines here lands every one-, two- and three-line
standfirst on exactly one height, and a genuinely longer one steps down by
a whole line — a step the eye reads as deliberate, not as drift. No copy
is clipped, no page carries a modifier, and an editor rewriting a
standfirst cannot break the alignment by accident.
3 lines × line-height 1.5 = 4.5em of the lede's own size, so it holds
through the font-size clamp at every width. */
.ab-mast .ab-lede { min-height: 4.5em; }
/* The five masts that also carry a running paragraph under the standfirst
formed their own cluster at 592/592/592/592/620 — the same drift one tier
down. The same reserve, on the same principle: four lines lands them all
on one height. Scoped to the mast, since .ab-prose is the page body's own
running-text container everywhere else and must stay content-sized there. */
/* Not em: .ab-prose declares its type on `> p`, not on itself, so an em here
would resolve against the inherited body size, not the paragraph's. */
.ab-mast__body .ab-prose { min-height: calc(4 * 1.68 * 16.5px); }
/* Running prose. */
/* The container carries the type as well as the measure. Declaring it only
on `> p` means a .ab-prose holding bare text (or a span) silently renders
at heading ink on the page ground — a failure that looks like a design
choice rather than a bug. */
.ab-prose { max-width: var(--ab-measure);
font-size: 16.5px; line-height: 1.68; color: var(--em-ink-body); }
.ab-prose > p,
.ab-prose > ul > li,
.ab-prose > ol > li {
font-size: 16.5px;
line-height: 1.68;
color: var(--em-ink-body);
text-wrap: pretty;
}
.ab-prose > * + * { margin-top: 1.1em; }
.ab-prose > h3 + * { margin-top: .6em; }
.ab-prose strong { font-weight: 600; color: var(--em-ink); }
.ab-prose a {
color: var(--em-ink);
border-bottom: 1px solid var(--em-line-ctl);
transition: border-color var(--em-t) ease;
}
.ab-prose a:hover { border-bottom-color: var(--em-ink); color: var(--em-ink); }
.ab-prose--wide { max-width: 42em; }
/* A bulleted list inside prose. The marker is a rule, not a disc: it lines
the list up with the hairlines that organise the rest of the page. */
.ab-prose ul { display: flex; flex-direction: column; gap: .62em; }
.ab-prose ul > li { position: relative; padding-left: 26px; }
.ab-prose ul > li::before {
content: ''; position: absolute; left: 0; top: .72em;
width: 13px; height: 1px; background: var(--em-accent);
}
.ab-prose ol { display: flex; flex-direction: column; gap: .62em; counter-reset: ab; }
.ab-prose ol > li { position: relative; padding-left: 34px; counter-increment: ab; }
.ab-prose ol > li::before {
content: counter(ab, decimal-leading-zero);
position: absolute; left: 0; top: .18em;
font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
color: var(--em-accent);
}
/* A small uppercase label. The ONLY place weight 600 and tracking are used. */
.ab-label {
font-size: 10.5px; font-weight: 600; letter-spacing: .24em; line-height: 1.4;
text-transform: uppercase; color: var(--em-text-eyebrow-neutral);
margin: 0;
}
.ab-label--mute { color: var(--em-ink-mute); letter-spacing: .2em; }
/* inside prose, `.ab-prose p` outranks the label and repainted it in body ink */
.ab-prose .ab-label { color: var(--em-text-eyebrow-neutral); }
.ab-meta { font-size: 13px; line-height: 1.5; color: var(--em-ink-mute); margin: 0; }
.ab-fine { font-size: 12.5px; line-height: 1.55; color: var(--em-ink-mute); margin: 0; }
/* ————————————————————————— 3 · Shell ————————————————————————— */
.ab-wrap { max-width: var(--em-max); margin: 0 auto; padding: 0 var(--em-gut); }
.ab-wrap--narrow { max-width: 980px; }
.ab-band { padding-block: var(--ab-band); }
.ab-band--sm { padding-block: var(--ab-band-sm); }
.ab-band--top { padding-top: 0; }
.ab-band--paper { background: var(--ab-paper); }
.ab-band--sunk { background: var(--ab-sunk); }
/* A hairline that spans the measure of the page, used to separate bands that
share a ground. Never two rules within one screen height. */
.ab-rule { height: 1px; background: var(--em-line-rule); border: 0; margin: 0; }
/* A 1fr grid track floors at max-content, so anything unbreakable in a spine
column widens the whole spine and the page with it. The content columns need
this for a long unbroken string; .ab-index needs it because BELOW 1024 it is
a horizontally scrolling chip rail whose max-content is the sum of every
chip — measured at 712px on Who We Are, which scrolled a 390px phone
sideways by 322px. overflow-x on the inner list cannot save it: the track is
already sized by the time the list is asked to scroll. */
.ab-spine__body, .ab-mast__body, .ab-index { min-width: 0; }
/* the footnote marker; a link, so the note is reachable, not just printed */
.ab-sup { font-size: .7em; vertical-align: super; line-height: 0;
color: var(--em-accent); border-bottom: 0; }
.ab-sup:hover { color: var(--em-ink); }
/* visually hidden, but read. Named separately from .em-vh so a change here
cannot reach the property pages. */
/* left/top 0, not the static position: with no positioned ancestor this
resolves against the initial containing block, and inside a wide nowrap
strip its static position lands beyond the viewport — a 1px clipped span
at x=954 that widened the document to 955 on a 430px phone. Anchoring it
changes nothing visually (it has no visible area) and nothing for a screen
reader (order is the DOM's, not the box's). */
.ab-vh { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ————————————————————— 4 · The masthead ——————————————————————
Every one of the sixteen pages opens with this and nothing above it but the
breadcrumb. It is deliberately NOT a hero: no image, no scrim, no white
type over a photograph. It answers the five questions of §22 of the brief
in one ruled block —
breadcrumb .......... where am I
label + h1 .......... what is this page
lede ................ why should I care
actions ............. what can I do here
facts ............... what is the shape of what follows
On >=1024 it is two columns: a left rail carrying the label and the page's
standing facts, and a right column carrying the words. Below 1024 the rail
drops UNDER the words, because on a phone the first thing on screen must be
the page's name, not its metadata.
------------------------------------------------------------------------- */
.ab-mast { padding-top: calc(var(--em-hdr) + clamp(22px, 3.4vw, 40px)); }
.ab-mast__crumb { margin-bottom: clamp(26px, 3.4vw, 44px); }
.ab-mast__grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: clamp(30px, 4vw, 54px);
padding-top: clamp(26px, 3.2vw, 40px);
}
/* The page's own opening rule, drawn as a pseudo-element rather than as this
element's border.
WHY: the rule is the thing that animates in, and the only way to draw a
line on is to scale it. Putting that animation on .ab-mast__grid scaled the
GRID — every heading, paragraph and button inside it — and because the
animation carries `both`, the element rests at scaleX(0) until the
animation actually runs. A backgrounded tab does not advance animations, so
the masthead measured 0px wide and was invisible and unclickable: the h1,
the lede and both calls to action. Content must never be the thing that
gets scaled; only this 1px line is. */
.ab-mast__grid::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: var(--em-ink); transform-origin: left center;
}
.ab-mast__body > * + * { margin-top: clamp(16px, 1.8vw, 22px); }
.ab-mast__acts {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: clamp(24px, 2.6vw, 32px);
}
/* The standing facts: a short label/value ledger that tells the reader the
shape of the page before they scroll it. Two to four rows, never more. */
.ab-mast__facts { display: flex; flex-direction: column; }
.ab-mast__fact {
padding: 13px 0;
border-bottom: 1px solid var(--em-line-faint);
}
.ab-mast__fact:first-child { padding-top: 0; }
.ab-mast__fact:last-child { border-bottom: 0; }
.ab-mast__fact dt {
font-size: 9.5px; font-weight: 600; letter-spacing: .2em; line-height: 1.3;
text-transform: uppercase; color: var(--em-ink-mute);
}
.ab-mast__fact dd { font-size: 14px; line-height: 1.45; color: var(--em-ink); margin-top: 6px; }
@media (min-width: 1024px) {
.ab-mast__grid { grid-template-columns: var(--ab-rail) 1fr; gap: clamp(34px, 4vw, 70px); }
.ab-mast__rail { order: 0; }
.ab-mast__body { order: 1; }
.ab-mast__rail > * + * { margin-top: 26px; }
}
@media (max-width: 1023px) {
/* the words first, the metadata after */
.ab-mast__rail { order: 2; }
.ab-mast__body { order: 1; }
.ab-mast__grid { display: flex; flex-direction: column; }
.ab-mast__rail > .ab-label { margin-bottom: 18px; }
}
/* ————————————————————— 5 · The spine ——————————————————————
The long-read layout: a persistent section index beside the content.
Used by Who We Are, Sustainability, the three Investor Relations pages and
the Glossary — every page long enough that a reader can get lost in it.
------------------------------------------------------------------------- */
.ab-spine { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1024px) {
.ab-spine { grid-template-columns: var(--ab-rail) 1fr; gap: clamp(34px, 4vw, 70px); }
}
/* Below 1024 .ab-index is a sticky chip bar, not a rail heading, so it reads
as navigation chrome rather than a new editorial block. --ab-band's full
56-116px rhythm above it (right, correct, for the bottom of the spine and
for every .ab-sec) left a bare gap between the masthead's last line and
the tabs on every long-read page — Who We Are included — that read as a
layout glitch once the reader had scrolled the masthead out of view. */
@media (max-width: 1023px) {
.ab-spine.ab-band { padding-top: clamp(20px, 4vw, 32px); }
}
.ab-index__list { display: flex; flex-direction: column; gap: 2px; }
.ab-index__link {
display: block; padding: 8px 0; min-height: 44px;
display: flex; align-items: center; gap: 12px;
font-size: 12.5px; line-height: 1.35; color: var(--em-ink-mute);
border-bottom: 1px solid var(--em-line-faint);
transition: color var(--em-t) ease;
}
.ab-index__link:last-child { border-bottom: 0; }
.ab-index__link::before {
content: ''; width: 0; height: 1px; flex: none; background: var(--em-accent);
transition: width var(--em-t-mid) var(--em-e-soft);
}
.ab-index__link:hover { color: var(--em-ink); }
.ab-index__link[aria-current="true"] { color: var(--em-ink); }
.ab-index__link[aria-current="true"]::before { width: 18px; }
@media (min-width: 1024px) {
.ab-index {
position: sticky; top: calc(var(--em-hdr) + 28px);
/* a sticky column takes the ground of its own plane, and its own height */
max-height: calc(100vh - var(--em-hdr) - 56px);
overflow: auto; overscroll-behavior: contain;
}
}
/* Below 1024 the index is a horizontally scrolling rail pinned under the
header — the mobile pattern for a long document, not a stacked list of
twelve links the reader has to scroll past to reach paragraph one. */
@media (max-width: 1023px) {
.ab-index {
position: sticky; top: var(--em-hdr); z-index: var(--z-sticky);
margin: 0 calc(var(--em-gut) * -1);
padding: 0 var(--em-gut);
background: color-mix(in srgb, var(--ab-ground) 94%, transparent);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
border-bottom: 1px solid var(--em-line-bar);
}
.ab-index__list {
flex-direction: row; gap: 0;
overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -ms-overflow-style: none;
/* the trailing gutter must be PADDING on the scroller: a margin on the
last child is collapsed away and the last chip cannot reach the edge */
padding-right: var(--em-gut);
}
.ab-index__list::-webkit-scrollbar { display: none; }
.ab-index__link {
border-bottom: 2px solid transparent; white-space: nowrap;
padding: 0 16px 0 0; margin-right: 16px; min-height: 48px;
}
.ab-index__link:last-child { margin-right: 0; border-bottom: 2px solid transparent; }
.ab-index__link::before { display: none; }
.ab-index__link[aria-current="true"] { border-bottom-color: var(--em-ink); }
.ab-index__t { display: block; }
}
.ab-index__n {
font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--em-ink-mute);
}
@media (max-width: 1023px) { .ab-index__n { display: none; } }
/* ————————————————————— 6 · Sections ——————————————————————— */
.ab-sec { padding-block: var(--ab-band); border-top: 1px solid var(--em-line-rule); }
.ab-sec:first-child { border-top: 0; }
.ab-sec--sm { padding-block: var(--ab-band-sm); }
.ab-sec--open { border-top: 0; padding-top: 0; }
.ab-sec__head { margin-bottom: clamp(24px, 3vw, 38px); }
.ab-sec__head > * + * { margin-top: 14px; }
.ab-sec__body > * + * { margin-top: clamp(22px, 2.6vw, 34px); }
/* ————————————————————— 7 · The ledger ——————————————————————
Statistics. A ruled ledger, never a row of bordered boxes: the figures are
a RECORD and read as a column of evidence. The value is display type at
reading size — large enough to register, never so large it becomes decor.
------------------------------------------------------------------------- */
.ab-ledger { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--em-line-rule); }
.ab-ledger__row {
display: grid; grid-template-columns: 1fr; gap: 6px;
padding: clamp(20px, 2.2vw, 26px) 0;
border-bottom: 1px solid var(--em-line-faint);
}
.ab-ledger__v {
font-family: var(--em-display);
font-size: clamp(27px, 3vw, 40px); line-height: 1; letter-spacing: -.01em;
color: var(--em-ink);
font-variant-numeric: tabular-nums;
}
.ab-ledger__k { font-size: 13.5px; line-height: 1.5; color: var(--em-ink-body); max-width: 30em; }
.ab-ledger__src { font-size: 11.5px; line-height: 1.45; color: var(--em-ink-mute); margin-top: 4px; }
@media (min-width: 768px) {
.ab-ledger__row { grid-template-columns: minmax(180px, 30%) 1fr; gap: clamp(20px, 3vw, 44px); align-items: baseline; }
}
/* The compact variant: a horizontal band of figures for a page opening.
auto-fit + a min() floor, so it needs no breakpoint and cannot overflow 320. */
.ab-figs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: clamp(22px, 2.6vw, 38px);
padding-top: clamp(24px, 2.6vw, 32px);
border-top: 1px solid var(--em-line-rule);
}
.ab-fig__v {
font-family: var(--em-display); font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.02; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ab-fig__k { font-size: 12.5px; line-height: 1.5; color: var(--em-ink-mute); margin-top: 9px; max-width: 18em; }
/* ————————————————————— 8 · The pull quote ——————————————————————
One per page at most. A statement attributable to a named person, set in
display type against a left rule — never centred, never in quotation-mark
decoration, never over a portrait.
------------------------------------------------------------------------- */
.ab-quote { border-left: 1px solid var(--em-accent); padding-left: clamp(20px, 3vw, 40px); }
.ab-quote__t {
/* blockquote carries a UA margin of 1em 40px. Left in, it insets the
quotation from the byline under it and drops it below the top of
whatever sits beside it — three different left edges in one column. */
margin: 0;
font-family: var(--em-display);
font-size: clamp(22px, 2.5vw, 33px); line-height: 1.22; letter-spacing: -.005em;
color: var(--em-ink); max-width: 20em; text-wrap: pretty;
}
/* Hangs an opening quotation mark into the margin so the first line's words
start on the same edge as every line under it. Opt-in, because a pull quote
set without the mark (the IR vision statements) must not be pulled left. */
.ab-quote__t--hang { text-indent: -.44em; }
.ab-quote__by { margin-top: clamp(18px, 2vw, 24px); }
/* An action under a quotation takes the quotation's text edge, not the rule's. */
.ab-quote__act { margin-top: 28px; padding-left: calc(1px + clamp(20px, 3vw, 40px)); }
.ab-quote__n { font-size: 14.5px; color: var(--em-ink); }
.ab-quote__r { font-size: 12.5px; color: var(--em-ink-mute); margin-top: 3px; }
/* ————————————————————— 9 · The ruled row ——————————————————————
Press releases, reports, downloads, job posts, disclosures. A chronological
or documentary list reads down a single ledger; 40 cards do not.
The whole row is the link. The arrow is the only moving part on hover, and
the title takes the ink — no background wash, no lift, no shadow.
------------------------------------------------------------------------- */
.ab-rows { border-top: 1px solid var(--em-line-rule); }
.ab-row {
position: relative; display: grid; grid-template-columns: 1fr auto;
align-items: start; gap: 14px clamp(18px, 3vw, 44px);
padding: clamp(20px, 2.2vw, 28px) 0;
border-bottom: 1px solid var(--em-line-faint);
color: var(--em-ink);
}
a.ab-row:hover { color: var(--em-ink); }
.ab-row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.ab-row__date {
font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--em-ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ab-row__tag {
font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-accent);
}
.ab-row__t {
font-family: var(--em-display); font-size: clamp(19px, 1.7vw, 24px);
line-height: 1.24; margin-top: 10px; max-width: 26em; text-wrap: pretty;
transition: color var(--em-t) ease;
}
.ab-row__d { font-size: 14.5px; line-height: 1.6; color: var(--em-ink-body); margin-top: 9px; max-width: var(--ab-measure); }
/* the trailing cell: an arrow, or a file stamp for a download */
.ab-row__end {
grid-column: 2; grid-row: 1 / -1; align-self: center;
display: flex; align-items: center; gap: 12px;
font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--em-ink-mute); white-space: nowrap;
}
.ab-row__arrow {
width: 34px; height: 34px; flex: none; border-radius: 50%;
border: 1px solid var(--em-line-ctl);
display: grid; place-items: center; color: var(--em-ink);
transition: transform var(--em-t-mid) var(--em-e-soft),
border-color var(--em-t) ease, background var(--em-t) ease;
}
.ab-row__arrow svg { width: 13px; height: 13px; display: block; }
a.ab-row:hover .ab-row__arrow,
.ab-row:focus-within .ab-row__arrow {
transform: translateX(4px); border-color: var(--em-ink); background: rgba(var(--em-rgb-ink), .04);
}
/* External rows (opens another site in a new tab): a diagonal arrow reads as
"leaving", so it moves up-right on hover instead of sideways. */
a.ab-row:hover .ab-row__arrow--ext,
.ab-row:focus-within .ab-row__arrow--ext {
transform: translate(3px, -3px);
}
/* The file glyph on a document row. Everything else about such a row is the
ledger above; this is the one thing it says that a press release does not —
that following it fetches a PDF. Kept under its original .su-doc name
because six sustainability pages already ship the class in their markup;
a class name is an interface. */
.su-doc__i {
display: inline-flex; align-items: center; gap: 7px;
font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-accent);
}
.su-doc__i svg { width: 11px; height: 13px; display: block; }
a.ab-row:hover .ab-row__t { color: var(--em-ink-2); }
@media (max-width: 599px) {
/* on a phone the arrow moves under the title rather than squeezing it into
a 60% column; the row stays one tap target either way */
.ab-row { grid-template-columns: 1fr; }
.ab-row__end { grid-column: 1; grid-row: auto; align-self: start; margin-top: 4px; }
.ab-row__t { font-size: 19px; }
}
/* ————————————————————— 10 · The post card ——————————————————————
The ONE card in this ecosystem, and only where the image is the content:
the blog, and the newsroom. It reuses the property-page card's geometry so
the two halves of the site stay one product, and adds nothing but its own
proportions.
press.css adds .ab-post--link to it — the whole-card target and the read
affordance a card that LEADS SOMEWHERE needs, which a blog post with no
detail page never did. That is a modifier on this component, not a second
card: anything changed here reaches both.
------------------------------------------------------------------------- */
.ab-posts { display: grid; gap: clamp(22px, 2.6vw, 34px);
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.ab-post { display: flex; flex-direction: column; color: var(--em-ink); }
.ab-post:hover { color: var(--em-ink); }
.ab-post__shot {
position: relative; overflow: hidden; background: var(--em-well);
border-radius: var(--em-r); aspect-ratio: 3 / 2;
}
.ab-post__shot img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; }
/* A post whose art has not been supplied. The frame drops its fixed ratio and
its loading ground so the .em-ph slot sizes to its own words instead of
being cropped into an image box. A modifier, NOT an inline style: a style
attribute outranks every class, so an inline override here could never be
corrected from this file afterwards. */
.ab-post__shot--ph { aspect-ratio: auto; background: none; }
.ab-post__b { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }
.ab-post__t {
font-family: var(--em-display); font-size: clamp(20px, 1.7vw, 23px);
line-height: 1.22; margin-top: 10px; text-wrap: pretty;
transition: color var(--em-t) ease;
}
.ab-post__d { font-size: 14px; line-height: 1.58; color: var(--em-ink-body); margin-top: 9px; }
.ab-post__f { margin-top: auto; padding-top: 16px; }
.ab-post:hover .ab-post__t { color: var(--em-ink-2); }
/* The lead post: the first item at double width on a wide screen. */
@media (min-width: 900px) {
.ab-posts--lead > .ab-post:first-child { grid-column: span 2; }
.ab-posts--lead > .ab-post:first-child .ab-post__shot { aspect-ratio: 16 / 9; }
.ab-posts--lead > .ab-post:first-child .ab-post__t { font-size: clamp(26px, 2.4vw, 34px); }
/* The lead rule above is (0,4,0) and .ab-post__shot--ph is (0,1,0), so the
modifier alone loses and a lead post with no art was held in a 445px-tall
empty 16/9 box. Restated here at matching weight, AFTER the rule it has
to beat — a media query adds no specificity, so source order is the only
other lever and both are needed. */
.ab-posts--lead > .ab-post:first-child .ab-post__shot--ph { aspect-ratio: auto; }
}
/* ————————————————————— 11 · Filters ——————————————————————— */
/* AN AUTHOR display DEFEATS [hidden]. about.js hides a filtered-out item by
setting el.hidden, which relies on the UA's `[hidden]{display:none}` — and
that rule loses to ANY author display on the same element, with no
specificity contest. .ab-row is display:grid, .ab-post and .su-story are
display:flex, so every chip filter on this site (press, blog, careers, the
IR disclosures, the sustainability reports and stories) was updating its
count and its pressed state over a grid that never actually filtered.
Written against the FILTER CONTRACT rather than against each component, so
it holds for whatever gets filtered next; at (0,2,0) it out-ranks a class
without needing !important.
Search hides whole groups as well as terms, so those are named too.
The same trap had also caught the CONTROL: the "Clear search" button ships
hidden and is meant to appear only once something has been typed, but it is
an .em-btn-o and that is display:inline-flex — so it stood there on the
glossary, the FAQ and the newsroom offering to clear a search nobody had
made. Same contract, same one-line answer. */
[data-ab-item][hidden],
[data-ab-term][hidden],
[data-ab-clear][hidden],
[data-ab-set][hidden] { display: none; }
.ab-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding-bottom: clamp(20px, 2.4vw, 28px);
}
/* Square, at the build's one radius. A chip is DETACHED because the set is
variable-length and wraps (4 categories on press, 8 on the stories index);
a joined track cannot wrap without breaking its own edge. The segmented
track is for a short, fixed set — see .ab-switch and .ll-seg. */
.ab-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
padding: 10px 18px; border-radius: var(--em-r);
border: 1px solid var(--em-line-ctl); background: transparent; color: var(--em-ink);
font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
transition: background var(--em-t) ease, border-color var(--em-t) ease, color var(--em-t) ease;
}
.ab-chip:hover { border-color: var(--em-ink); background: rgba(var(--em-rgb-ink), .04); }
.ab-chip[aria-pressed="true"] {
background: var(--em-ink); border-color: var(--em-ink); color: var(--em-on-ink);
}
.ab-chip__n { font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; }
/* the count line that follows a filter change; it is also the live region */
.ab-count { font-size: 12.5px; color: var(--em-ink-mute); }
/* An empty state is a designed state, never an absence. */
.ab-empty {
padding: clamp(40px, 6vw, 72px) 0; text-align: center; border-top: 1px solid var(--em-line-rule);
}
.ab-empty__t { font-family: var(--em-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }
.ab-empty__b { font-size: 14.5px; line-height: 1.6; color: var(--em-ink-body);
margin: 12px auto 0; max-width: 32em; }
.ab-empty__a { margin-top: 22px; }
/* ————————————————————— 11b · The FAQ ——————————————————————
The accordion itself is places.css's .em-faq, unchanged — one accordion for
the whole site. What is added here is only what an ANSWER needs that a
property page's FAQ never did: procedural lists, a labelled set of cases
(single owner / joint owners / company), and a caveat.
------------------------------------------------------------------------- */
.ab-faq__search { max-width: 520px; }
.ab-faq__search .ab-count { margin-top: 12px; }
.ab-faq__search button { margin-top: 14px; }
/* A document checklist is a list, not a paragraph with semicolons in it. */
.em-faq__a .ab-faq__ul {
margin-top: 12px; display: flex; flex-direction: column; gap: .5em;
}
.em-faq__a .ab-faq__ul > li {
position: relative; padding-left: 24px;
font-size: 14.5px; line-height: 1.6; color: var(--em-ink-body);
}
.em-faq__a .ab-faq__ul > li::before {
content: ''; position: absolute; left: 0; top: .68em;
width: 12px; height: 1px; background: var(--em-accent);
}
/* The case ledger: "if you are X, bring Y". The term is the reader finding
themselves, so it takes the ink and the definition takes the body colour. */
.em-faq__a .ab-faq__dl { margin-top: 14px; border-top: 1px solid var(--em-line-faint); }
.em-faq__a .ab-faq__dl dt {
padding-top: 13px;
font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--em-ink);
}
.em-faq__a .ab-faq__dl dd {
padding: 6px 0 13px; border-bottom: 1px solid var(--em-line-faint);
font-size: 14.5px; line-height: 1.6; color: var(--em-ink-body);
}
.em-faq__a .ab-faq__dl dd:last-child { border-bottom: 0; }
/* A caveat is not an answer, so it must not read like one: it sits apart,
at fine-print size, against the accent rule that marks every advisory on
this site. It is visible — a note nobody sees is a note nobody acts on. */
.ab-faq__note {
margin-top: 16px; padding: 12px 0 12px 14px;
border-left: 2px solid var(--em-accent);
font-size: 12.5px; line-height: 1.55; color: var(--em-ink-mute);
}
/* ————————————————————— 11c · The entity switcher ——————————————————————
Three investor relations pages for three Emaar entities. A reader who lands
on one must be able to see that the other two exist and move between them
without going back up to the menu — so the switcher is a peer row directly
under the masthead, not a link buried in the body.
It reads as a row of tabs but is built from links, because each one is a
different PAGE: the current entity is a carrying aria-current, not a
link to where the reader already is.
------------------------------------------------------------------------- */
/* Three entities, exactly one of which is the page you are on — the same
one-of-N shape as the launches views (.ll-seg) and the community property
segments (.em-pf__segs), so it is built as the same control: ONE bordered
track, hairline dividers, no gaps, no radius beyond the build's 2px. The
detached chip shape is reserved for filters, which is what stops a reader
reading this row as "narrow the list" when it in fact leaves the page.
Only the shape is shared; these are links, and the current entity is the
carrying aria-current. */
.ab-switch {
display: flex; flex-wrap: wrap; gap: 0;
width: fit-content; max-width: 100%;
border: 1px solid var(--em-line-ctl); border-radius: var(--em-r);
background: var(--em-surface);
margin-bottom: clamp(6px, 1vw, 10px);
}
.ab-switch__l {
display: inline-flex; align-items: center; justify-content: center;
min-height: 46px; padding: 12px clamp(14px, 2vw, 26px);
border-right: 1px solid var(--em-line);
font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-ink-eyebrow); white-space: nowrap;
transition: background var(--em-t) ease, color var(--em-t) ease;
}
.ab-switch__l:last-child { border-right: 0; }
a.ab-switch__l:hover { background: rgba(var(--em-rgb-ink), .04); color: var(--em-ink); }
.ab-switch__l[aria-current="page"] {
background: var(--em-ink); color: var(--em-on-ink); cursor: default;
}
/* Below 700 the three entity names want more width than a phone column has —
"Emaar Malls Management" alone is 22 characters at .18em tracking. The
control becomes what .ll-seg becomes at the same width: an index, one
full-width row each, the divider moving from the right edge to the bottom.
The names are EMAAR's own and are kept whole. */
@media (max-width: 699px) {
.ab-switch { display: grid; width: 100%; }
.ab-switch__l {
justify-content: flex-start; text-align: left;
padding-left: 16px; padding-right: 16px;
border-right: 0; border-bottom: 1px solid var(--em-line);
white-space: normal;
}
.ab-switch__l:last-child { border-bottom: 0; }
}
/* ————————————————————— 11d · The section rail ——————————————————————
A strip of sibling PAGES under the masthead: the seven sustainability
topics, and each investor relations entity's sections. Written for
sustainability (and still named for it — see sustainability.css §1) and
moved here when investor relations became its second family: one rail,
one script (su-rail.js), two families. DESIGN-STANDARDS §17 is the rule
this component answers to; read it before changing a measure below.
Its original notes follow unchanged.
------------------------------------------------------------------------- */
/* The topic rail (as written for sustainability) ——————————————
The contextual navigation the brief asks for: every one of the eight pages
can reach the other seven without going back to the landing page.
It is a RULED INDEX, not a row of buttons — the same ledger logic the rest
of this ecosystem uses for anything enumerable. Under 900px it becomes one
horizontal scroller, because seven stacked full-width links push the page's
first real sentence a screen and a half down on a phone.
Its BEHAVIOUR is su-rail.js — one component, one script. That file is in
the rather than at the foot of the body, because one of the two
things it does has to happen before the first paint; it says why.
------------------------------------------------------------------------- */
/* THE RAIL CARRIES ITS OWN CLEARANCE, and the number is measured.
.ab-mast has no floor: its content box bottom IS its last element. On the
twenty-six other About pages what follows is an .ab-band, whose 108px of
top padding supplies the air, so nobody ever noticed. This rail is not a
band — it is a RULE — and on these seven pages the masthead landed on it:
measured at 1440, 1600 and 1920 the "Sustainability overview" button's box
bottom and this border-top were THE SAME PIXEL, and at 390 the last
standing fact cleared it by 13px.
The clearance is carried here, whole, rather than added to .ab-mast: the
masthead is shared by twenty-seven pages and only these seven abut a rule,
and DESIGN-STANDARDS §9 already says a gap between two blocks is carried
whole by one of them, never split. The value is the masthead's own
block-boundary measure — the same clamp its breadcrumb spends clearing the
opening rule — so the rail sits off the mast by exactly as much as the
mast's own parts sit off each other. */
.su-rail {
margin-top: clamp(26px, 3.4vw, 44px);
border-top: 1px solid var(--em-line-rule); border-bottom: 1px solid var(--em-line-rule);
}
.su-rail__h {
margin: 0; padding-top: clamp(16px, 1.8vw, 20px);
font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--em-ink-mute);
}
.su-rail__l {
display: flex; gap: clamp(18px, 2.4vw, 34px);
padding: clamp(12px, 1.4vw, 16px) 0 clamp(14px, 1.6vw, 18px);
overflow-x: auto; scroll-snap-type: x proximity;
/* hides the scrollbar without hiding the overflow: the rail is also
keyboard- and wheel-scrollable, and a visible bar under seven links
reads as a second rule. */
scrollbar-width: none;
}
.su-rail__l::-webkit-scrollbar { display: none; }
/* A scroll container's padding clears only the END of the scroll, so the
last link needs its own trailing room or it can never reach a snap point
flush with the gutter. */
.su-rail__l::after { content: ""; flex: 0 0 clamp(8px, 4vw, 24px); }
.su-rail__i {
flex: 0 0 auto; scroll-snap-align: start;
display: flex; align-items: baseline; gap: 9px;
min-height: 44px; padding-top: 11px; /* 44px hit area without a box */
color: var(--em-ink-body); text-decoration: none;
font-size: 13px; line-height: 1.3; white-space: nowrap;
border-top: 2px solid transparent;
transition: color var(--em-t) ease, border-color var(--em-t) ease;
}
.su-rail__i:hover { color: var(--em-ink); border-top-color: var(--em-line-ctl); }
.su-rail__n {
font-size: 10px; font-weight: 600; letter-spacing: .12em;
font-variant-numeric: tabular-nums; color: var(--em-ink-mute);
}
/* The current page. Three signals, not one: a solid rule above it, the ink
weight of a heading, and a name the screen reader is given in words
(.ab-vh "You are here") — never the colour on its own. */
.su-rail__i[aria-current="page"] {
color: var(--em-ink); font-weight: 600;
border-top-color: var(--em-ink); cursor: default;
}
.su-rail__i[aria-current="page"] .su-rail__n { color: var(--em-accent); }
/* The click is answered before the document is.
Each of these seven is a separate page, so pressing one is a navigation,
and between the press and the new document's first paint the rail shows the
reader nothing at all. su-rail.js moves the mark into that gap, so a strip
that looks like a set of tabs behaves like one.
Colour and the rule only — NEVER the weight. The current item is 600 where
its neighbours are 400, so re-weighting on press would re-measure the whole
strip under the reader's cursor, and an item one word from the wrap could
change rows as they clicked it. The weight arrives with the new page, where
it costs at most 2px (measured across all seven). Both states ride the
transition .su-rail__i already declares, so the mark crosses rather than
cuts. */
.su-rail__l.is-going .su-rail__i[aria-current="page"] {
color: var(--em-ink-body); border-top-color: transparent;
}
.su-rail__l.is-going .su-rail__i[aria-current="page"] .su-rail__n { color: var(--em-ink-mute); }
.su-rail__i.is-going { color: var(--em-ink); border-top-color: var(--em-ink); }
.su-rail__i.is-going .su-rail__n { color: var(--em-accent); }
@media (min-width: 900px) {
/* SEVEN LABELS DO NOT FIT ON ONE LINE AT ANY WIDTH — and that is a fact
about the words, not about the viewport. The seven items and their six
gaps measure 1230px; .ab-wrap's measure tops out at 1192px, so the rail
wraps at 1920 exactly as it wraps at 960, always 6 + 1.
It was wrapping at `row-gap: 0`, which left the seventh item's 2px "you
are here" rule 14px under the sixth item's label and 11px over its own.
The mark was nearer the row it did not belong to than the one it did, and
read as an underline drawn beneath row one — which is the glitch this
strip was reported for. A row gap larger than the item's own 11px of
head-room settles it, and two rows parted on purpose read as an index
rather than as a line that overflowed. */
.su-rail__l { flex-wrap: wrap; overflow: visible; row-gap: clamp(16px, 1.6vw, 22px); }
.su-rail__l::after { content: none; }
}
/* ————————————————————— 11e · The data table ——————————————————————
Added 2026-09-30 for investor relations: dividend history, analyst
coverage, rating history and share data. Those are genuinely TABULAR —
every row answers the same three to five questions, and the reader
compares down a column — so neither the ledger (one figure, one line of
explanation) nor the ruled row (one document) can carry them. No table
existed anywhere in the build, so this is new, and it is the one.
It is the ledger's language set in columns: a rule above, faint rules
between, no fills, no zebra, no boxes. Head cells speak in the label
voice; figures are tabular numerals and sit right, so a column of
dividends reads as a column.
Below 600 it does NOT scroll sideways. A table a phone has to pan is a
table nobody compares. Each row becomes a short ruled record: the row
header (| ) is its title and every other cell prints its
column's name beside it from data-label — which the builder writes from
the same | the desktop head shows, so the two cannot disagree.
------------------------------------------------------------------------- */
.ab-table { margin: 0; }
.ab-table__cap {
caption-side: top; text-align: left;
padding-bottom: var(--space-14);
font-size: var(--em-text-meta); line-height: 1.5; color: var(--em-ink-mute);
}
.ab-table__t {
width: 100%; border-collapse: collapse;
border-top: 1px solid var(--em-line-rule);
font-variant-numeric: tabular-nums;
}
.ab-table__t th,
.ab-table__t td {
padding: var(--space-16) var(--space-18) var(--space-16) 0;
border-bottom: 1px solid var(--em-line-faint);
text-align: left; vertical-align: top;
font-size: var(--em-text-body-sm); line-height: 1.5; color: var(--em-ink-body);
}
.ab-table__t th:last-child,
.ab-table__t td:last-child { padding-right: 0; }
.ab-table__t thead th {
padding-top: var(--space-14); padding-bottom: var(--space-14);
font-size: var(--em-text-label); font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--em-ink-eyebrow);
border-bottom-color: var(--em-line-rule); white-space: nowrap;
}
.ab-table__t tbody th {
font-weight: 600; color: var(--em-ink);
}
.ab-table__t .ab-table__num { text-align: right; white-space: nowrap; }
.ab-table__t a { color: var(--em-ink); text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: var(--em-line-ctl); }
.ab-table__t a:hover { text-decoration-color: var(--em-ink); }
.ab-table__t .ab-table__em { font-family: var(--em-display); font-size: var(--em-text-h5);
font-weight: 400; color: var(--em-ink); }
@media (max-width: 599px) {
.ab-table__t, .ab-table__t tbody, .ab-table__t tr,
.ab-table__t th, .ab-table__t td { display: block; }
.ab-table__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.ab-table__t tr { padding: var(--space-16) 0; border-bottom: 1px solid var(--em-line-faint); }
.ab-table__t th,
.ab-table__t td { padding: var(--space-4) 0; border-bottom: 0; }
.ab-table__t tbody th { padding-bottom: var(--space-8); font-size: var(--em-text-body-md); }
.ab-table__t td[data-label] {
display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: var(--space-12);
}
.ab-table__t td[data-label]::before {
content: attr(data-label);
font-size: var(--em-text-label-sm); font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--em-ink-mute); padding-top: 3px;
}
.ab-table__t .ab-table__num { text-align: left; white-space: normal; }
/* a caption left as table-caption inside a block table shrinks to the
width of its longest word — measured at 390, one word to a line */
.ab-table__cap { display: block; }
}
/* THE RECORD. A table of one row and many columns — Emaar Malls' single
dividend has ten fields — is a record, and at every width it is set the
way every table is set on a phone: the row header as its title, each field
labelled from its column. Declared here rather than by widening the table,
because ten columns measured 1,175px against an 880px column at 1440. From
600 the fields sit two to a line. */
.ab-table--record .ab-table__t,
.ab-table--record .ab-table__t tbody,
.ab-table--record .ab-table__t th,
.ab-table--record .ab-table__t td { display: block; }
.ab-table--record .ab-table__cap { display: block; }
.ab-table--record .ab-table__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.ab-table--record .ab-table__t tr {
display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px);
padding: var(--space-16) 0; border-bottom: 1px solid var(--em-line-faint);
}
.ab-table--record .ab-table__t tbody th {
grid-column: 1 / -1; padding: 0 0 var(--space-8); border-bottom: 0;
font-family: var(--em-display); font-size: var(--em-text-h4); font-weight: 400;
}
.ab-table--record .ab-table__t td {
display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: var(--space-12);
padding: var(--space-10) 0; border-bottom: 1px solid var(--em-line-faint);
text-align: left; white-space: normal;
}
.ab-table--record .ab-table__t td::before {
content: attr(data-label);
font-size: var(--em-text-label-sm); font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--em-ink-mute); padding-top: 3px;
}
@media (min-width: 600px) {
.ab-table--record .ab-table__t tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
.ab-table__t tr { break-inside: avoid; }
}
/* ————————————————————— 11f · The live-data embed ——————————————————————
Investor relations publishes most of its numbers through Euroland's IR
tools — the share graph, historical prices, dividends, analyst consensus,
the factsheet — and emaar.com shows them as framed widgets. Copying those
figures into this build would freeze a share price into a static page, so
the widgets are framed here too (they send no frame-ancestors or
X-Frame-Options, checked 2026-09-30).
The frame is quoted as evidence, like a photograph: a caption above it
naming what it is and whose data it is, and a way out to the same tool in
its own tab — which is also the fallback if the frame never paints (an
offline reviewer, a blocked third-party frame). Under the frame sits a
"Loading" line on the sunk ground, so an empty frame is a designed state
rather than a white hole. The height is the TOOL'S, not the layout's, so
it is a size modifier per tool, never an inline style.
------------------------------------------------------------------------- */
.ab-embed { margin: 0; }
.ab-embed + .ab-embed { margin-top: clamp(34px, 4vw, 54px); }
.ab-embed__head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: var(--space-8) var(--space-20);
padding-bottom: var(--space-14); border-bottom: 1px solid var(--em-line-rule);
}
.ab-embed__t { font-family: var(--em-display); font-size: var(--em-text-h4); line-height: 1.2; }
.ab-embed__src {
display: block; margin-top: var(--space-6);
font-size: var(--em-text-label-sm); font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--em-ink-mute);
}
.ab-embed__out {
display: inline-flex; align-items: center; gap: var(--space-8);
min-height: var(--em-control-min);
font-size: var(--em-text-label); font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--em-ink);
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--em-line-ctl);
}
.ab-embed__out:hover { text-decoration-color: var(--em-ink); }
.ab-embed__out svg { width: 11px; height: 11px; display: block; }
.ab-embed__frame {
position: relative; margin-top: var(--space-18);
height: var(--ab-embed-h, 560px);
background: var(--ab-sunk); border-radius: var(--em-r); overflow: hidden;
}
.ab-embed__frame::before {
content: "Loading live data…"; position: absolute; inset: 0;
display: grid; place-items: center;
font-size: var(--em-text-meta); color: var(--em-ink-mute);
}
.ab-embed__frame iframe {
position: relative; display: block; width: 100%; height: 100%; border: 0;
background: transparent;
}
/* One height per TOOL, at three widths. The frame cannot measure a
cross-origin document, so each tool was opened on its own at the frame's
width — 880 (the spine at 1440), 700 (a tablet, and the narrower spine
between 1024 and 1439) and 358 (a 390 phone) — its scrollHeight read, and
~32px of headroom added. Measured 2026-09-30. A tool that outgrows its
figure scrolls inside the frame rather than losing content; re-measure if
Euroland changes a layout. Every tool reflows TALLER as it narrows. */
.ab-embed--quote { --ab-embed-h: 120px; }
.ab-embed--graph { --ab-embed-h: 1490px; }
.ab-embed--prices { --ab-embed-h: 700px; }
.ab-embed--calc { --ab-embed-h: 600px; }
.ab-embed--overview { --ab-embed-h: 1210px; }
.ab-embed--alerts { --ab-embed-h: 1350px; }
.ab-embed--tsr { --ab-embed-h: 1175px; }
.ab-embed--factsheet { --ab-embed-h: 3800px; }
.ab-embed--ia { --ab-embed-h: 1265px; }
.ab-embed--analysts { --ab-embed-h: 1100px; }
.ab-embed--consensus { --ab-embed-h: 2100px; }
.ab-embed--news { --ab-embed-h: 545px; }
.ab-embed--calendar { --ab-embed-h: 530px; }
@media (max-width: 1439px) {
.ab-embed--quote { --ab-embed-h: 120px; }
.ab-embed--graph { --ab-embed-h: 2360px; }
.ab-embed--prices { --ab-embed-h: 700px; }
.ab-embed--calc { --ab-embed-h: 600px; }
.ab-embed--overview { --ab-embed-h: 1490px; }
.ab-embed--alerts { --ab-embed-h: 1600px; }
.ab-embed--tsr { --ab-embed-h: 1175px; }
.ab-embed--factsheet { --ab-embed-h: 4910px; }
.ab-embed--ia { --ab-embed-h: 1290px; }
.ab-embed--analysts { --ab-embed-h: 1160px; }
.ab-embed--consensus { --ab-embed-h: 2140px; }
.ab-embed--news { --ab-embed-h: 545px; }
.ab-embed--calendar { --ab-embed-h: 530px; }
}
@media (max-width: 599px) {
.ab-embed--quote { --ab-embed-h: 120px; }
.ab-embed--graph { --ab-embed-h: 3450px; }
.ab-embed--prices { --ab-embed-h: 590px; }
.ab-embed--calc { --ab-embed-h: 740px; }
.ab-embed--overview { --ab-embed-h: 1430px; }
.ab-embed--alerts { --ab-embed-h: 2000px; }
.ab-embed--tsr { --ab-embed-h: 1710px; }
.ab-embed--factsheet { --ab-embed-h: 5260px; }
.ab-embed--ia { --ab-embed-h: 1465px; }
.ab-embed--analysts { --ab-embed-h: 1650px; }
.ab-embed--consensus { --ab-embed-h: 2540px; }
.ab-embed--news { --ab-embed-h: 660px; }
.ab-embed--calendar { --ab-embed-h: 530px; }
}
@media print {
.ab-embed__frame { display: none; }
}
/* ————————————————————— 11g · The document archive ——————————————————————
Investor relations archives run to 217 documents on one page. At the
ruled row's full size (a display-face title, 28px of air) that is thirty
screens; so an archive uses the same row at its COMPACT size, the
.ab-row--doc modifier — body-face title, tighter rhythm, the same PDF
stamp and the same arrow — and groups the rows the way Emaar files them:
by year, then by quarter or by section.
.ab-qgrid lays a year's quarters side by side from 1024 up (they are
parallel — Q1 to Q4 hold the same three documents), and stacks them
below it. The year itself is an .ab-arch, which the year chips filter
through the existing [data-ab-filter] contract.
------------------------------------------------------------------------- */
.ab-arch + .ab-arch { margin-top: clamp(34px, 4vw, 52px); }
.ab-arch__y {
font-family: var(--em-display); font-size: var(--em-text-h3); line-height: 1.1;
padding-bottom: var(--space-12);
}
.ab-arch__g + .ab-arch__g { margin-top: var(--space-24); }
.ab-arch__h {
font-size: var(--em-text-label); font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--em-ink-eyebrow);
padding: var(--space-12) 0 var(--space-10);
border-top: 1px solid var(--em-line-rule);
}
.ab-arch__g .ab-rows { border-top: 1px solid var(--em-line-faint); }
.ab-row--doc { padding: var(--space-12) 0; gap: var(--space-8) var(--space-16); align-items: center; }
.ab-row--doc .ab-row__t {
font-family: var(--em-font-body); font-size: var(--em-text-body-md); line-height: 1.4;
margin-top: var(--space-4); max-width: none;
}
.ab-row--doc .ab-row__arrow { width: 30px; height: 30px; }
.ab-row--doc .ab-row__arrow svg { width: 11px; height: 11px; }
/* A document Emaar lists and does not publish: a row, not a link, and it
says so in words beside the title — never a dimmed title on its own. */
.ab-row--none .ab-row__t { color: var(--em-ink-body); }
.ab-row--none .ab-row__end { font-weight: 400; letter-spacing: 0; text-transform: none;
font-size: var(--em-text-meta); white-space: normal; }
.ab-qgrid { display: grid; grid-template-columns: 1fr; gap: var(--space-24) clamp(20px, 2.4vw, 34px); }
@media (min-width: 1024px) {
.ab-qgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-qgrid--4 .ab-arch__g + .ab-arch__g { margin-top: 0; }
/* four columns are narrow, so the arrow goes under the title, the same
move the ruled row makes on a phone */
.ab-qgrid--4 .ab-row--doc { grid-template-columns: 1fr; }
.ab-qgrid--4 .ab-row--doc .ab-row__end { grid-column: 1; grid-row: auto; }
.ab-qgrid--4 .ab-row--doc .ab-row__arrow { display: none; }
}
@media (max-width: 599px) {
.ab-row--doc { grid-template-columns: 1fr auto; }
.ab-row--doc .ab-row__end { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }
.ab-row--doc .ab-row__t { font-size: var(--em-text-body-md); }
}
/* ————————————————————— 12 · The A–Z index ——————————————————————
The glossary's navigation. A letter with no terms is present but inert —
removing it would make the alphabet jump, and a jumping alphabet is harder
to aim at than a complete one.
------------------------------------------------------------------------- */
.ab-az { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-az__l {
display: grid; place-items: center; width: 40px; height: 40px;
border: 1px solid transparent; border-radius: var(--em-r);
font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--em-ink);
transition: background var(--em-t) ease, border-color var(--em-t) ease;
}
.ab-az__l:hover { background: var(--em-sunk); border-color: var(--em-line-ctl); color: var(--em-ink); }
.ab-az__l[aria-disabled="true"] { color: var(--em-ink-mute); opacity: .42; pointer-events: none; }
.ab-az__l[aria-current="true"] { background: var(--em-ink); color: var(--em-on-ink); border-color: var(--em-ink); }
.ab-term { padding: clamp(20px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--em-line-faint); }
.ab-term__t { font-family: var(--em-display); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; }
.ab-term__d { font-size: 15.5px; line-height: 1.62; color: var(--em-ink-body);
margin-top: 9px; max-width: var(--ab-measure); }
.ab-set__l {
font-family: var(--em-display); font-size: clamp(38px, 4.4vw, 58px); line-height: 1;
color: var(--em-ink); padding-bottom: 14px; border-bottom: 1px solid var(--em-ink);
}
.ab-set + .ab-set { margin-top: clamp(38px, 5vw, 64px); }
.ab-set__rows { border-top: 0; }
@media (min-width: 768px) {
.ab-term { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: clamp(20px, 3vw, 44px); align-items: baseline; }
.ab-term__d { margin-top: 0; }
}
/* ————————————————————— 12b · The directory list ——————————————————————
The sitemap's groups. Ninety-seven destinations in ten groups, and the
page's whole job is that a reader can find one of them by eye.
WHY IT IS NOT .ab-rows. The ruled row is the ledger: a press release, a
report, a job post — one thing per line, with a date, a description and a
34px arrow, at 20-28px of padding each. Ninety-seven of those is a page
four screens longer than the site it describes, and every row would be
carrying furniture for a payload of three words. A directory entry is a
LABEL. It gets a line, a rule under it and nothing else.
WHY IT IS NOT .ab-prose ul. Same reason in the other direction: one column
of ninety-seven bullets reads as prose the reader is expected to go
through, and a sitemap is not read, it is scanned. The columns are the
component — auto-fill against a 210px minimum, so the count falls out of
the width instead of being declared per breakpoint, and the group with
four links draws four columns of one at desktop and one column of four on
a phone without either being written down.
The rule is on the LINK, not between the columns: a vertical divider
between two columns of a wrapped grid lands in a different place in every
group, and the eye reads it as a boundary that means something.
------------------------------------------------------------------------- */
.ab-map {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
gap: 0 clamp(20px, 3vw, 44px);
border-top: 1px solid var(--em-line-rule);
}
.ab-map__l {
display: flex; align-items: center; gap: 8px;
min-height: var(--em-control-min);
padding: 11px 0;
border-bottom: 1px solid var(--em-line-faint);
font-size: var(--em-text-body-sm);
line-height: 1.45;
color: var(--em-ink-body);
text-wrap: pretty;
transition: color var(--em-t) ease;
}
a.ab-map__l:hover { color: var(--em-ink); }
/* The page you are already on is stated, not linked — it is the one entry on
a sitemap that cannot take you anywhere. It keeps the row so the group
still reads as a complete list. */
.ab-map__l[aria-current="page"] { color: var(--em-ink); }
.ab-map__l[aria-current="page"]::after {
content: ''; width: 18px; height: 1px; flex: none; background: var(--em-accent);
}
/* A destination that leaves the site says so before it is pressed, in the
mark and in the accessible name — not only in a new tab the reader did not
ask for. */
.ab-map__ext { flex: none; display: inline-flex; color: var(--em-ink-mute); }
.ab-map__ext svg { width: 10px; height: 10px; display: block; }
a.ab-map__l:hover .ab-map__ext { color: var(--em-ink); }
/* ————————————————————— 13 · Advisory panel ——————————————————————
Scam alerts and the whistleblower line. The panel's job is to be believed:
a left accent bar, a plain white ground, no illustration, no colour wash
that would read as marketing.
------------------------------------------------------------------------- */
.ab-adv {
background: var(--ab-paper);
border: 1px solid var(--em-line);
border-left: 3px solid var(--em-accent);
border-radius: var(--em-r);
padding: clamp(22px, 2.8vw, 34px);
}
.ab-adv--warn { border-left-color: var(--em-danger); }
.ab-adv__t { font-family: var(--em-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; }
.ab-adv__b { font-size: 15.5px; line-height: 1.65; color: var(--em-ink-body);
margin-top: 12px; max-width: var(--ab-measure); }
.ab-adv__b p + p { margin-top: 12px; }
.ab-adv__a { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
/* the do / don't pair, side by side on a wide screen */
.ab-pair { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 28px); }
@media (min-width: 860px) { .ab-pair { grid-template-columns: 1fr 1fr; } }
/* Two lists of very different length. Each card takes its own height instead of
the taller one's, so the shorter column ends where its content does. */
.ab-pair--top { align-items: start; }
.ab-pair__col { background: var(--ab-paper); border: 1px solid var(--em-line);
border-radius: var(--em-r); padding: clamp(20px, 2.4vw, 30px); }
.ab-pair__h { display: flex; align-items: center; gap: 11px; padding-bottom: 14px;
border-bottom: 1px solid var(--em-line); }
.ab-pair__mark { width: 22px; height: 22px; flex: none; border-radius: 50%;
display: grid; place-items: center; }
.ab-pair__mark svg { width: 11px; height: 11px; display: block; }
.ab-pair__mark--yes { background: rgba(127,101,53,.12); color: var(--em-accent); }
.ab-pair__mark--no { background: rgba(154,59,46,.11); color: var(--em-danger); }
.ab-pair__t { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ab-pair ul { margin-top: 16px; display: flex; flex-direction: column; }
.ab-pair li { font-size: 14.5px; line-height: 1.55; color: var(--em-ink-body);
padding: 11px 0; border-bottom: 1px solid var(--em-line-faint); }
.ab-pair li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ————————————————————— 14 · Forms ——————————————————————
Label above field, always. A placeholder is never a label: it disappears
the moment the field is used, and it fails contrast at the size a label
needs to be read at.
------------------------------------------------------------------------- */
.ab-form { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 1.8vw, 20px); }
@media (min-width: 720px) {
.ab-form--2 { grid-template-columns: 1fr 1fr; }
.ab-f--full { grid-column: 1 / -1; }
}
.ab-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab-f__l {
font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-ink-eyebrow);
}
.ab-f__l .req { color: var(--em-danger); margin-left: 4px; }
.ab-f__c {
width: 100%; min-height: 50px; padding: 13px 15px;
background: var(--ab-paper); color: var(--em-ink);
border: 1px solid var(--em-line-ctl); border-radius: var(--em-r);
font-size: 15.5px; line-height: 1.4;
transition: border-color var(--em-t) ease, box-shadow var(--em-t) ease;
appearance: none; -webkit-appearance: none;
}
textarea.ab-f__c { min-height: 132px; resize: vertical; }
select.ab-f__c {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111112' stroke-width='1.3'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 15px center; background-size: 10px 6px;
padding-right: 40px;
}
.ab-f__c::placeholder { color: var(--em-ink-mute); opacity: 1; }
.ab-f__c:hover { border-color: var(--em-line-strong); }
.ab-f__c:focus { outline: none; border-color: var(--em-ink); box-shadow: 0 0 0 3px rgba(var(--em-rgb-ink), .10); }
.ab-f__c:focus-visible { outline: none; }
.ab-f__h { font-size: 12px; line-height: 1.5; color: var(--em-ink-mute); }
/* Error is never colour alone: the field takes a heavier border, the message
carries an icon, and aria-describedby ties the two together. */
.ab-f__e { display: none; align-items: center; gap: 7px; font-size: 12.5px;
line-height: 1.45; color: var(--em-danger); }
.ab-f__e svg { width: 13px; height: 13px; flex: none; }
.ab-f.is-bad .ab-f__c { border-color: var(--em-danger); border-width: 1.5px; }
.ab-f.is-bad .ab-f__e { display: flex; }
/* consent / checkbox */
.ab-check { display: flex; align-items: flex-start; gap: 12px; }
.ab-check input { width: 20px; height: 20px; flex: none; margin: 2px 0 0;
accent-color: var(--em-ink); }
.ab-check span { font-size: 13.5px; line-height: 1.55; color: var(--em-ink-body); }
.ab-check a { border-bottom: 1px solid var(--em-line-ctl); }
.ab-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
margin-top: clamp(8px, 1vw, 12px); }
/* the sent state replaces the form; it never appears above a still-live form */
.ab-sent { background: var(--ab-paper); border: 1px solid var(--em-line);
border-radius: var(--em-r); padding: clamp(26px, 3.4vw, 44px); }
.ab-sent__t { font-family: var(--em-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.ab-sent__b { font-size: 15.5px; line-height: 1.62; color: var(--em-ink-body);
margin-top: 12px; max-width: var(--ab-measure); }
/* ————————————————————— 15 · Contact tiles ——————————————————————
A contact route is an ACTION, so it is a control, not a paragraph. Each
tile is the whole target and states its own channel, its hours and its
destination before it is tapped.
------------------------------------------------------------------------- */
.ab-routes { display: grid; gap: clamp(16px, 2vw, 22px);
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.ab-route {
display: flex; flex-direction: column; gap: 9px;
background: var(--ab-paper); border: 1px solid var(--em-line); border-radius: var(--em-r);
padding: clamp(20px, 2.4vw, 28px); color: var(--em-ink); min-height: 100%;
transition: border-color var(--em-t) ease, box-shadow var(--em-t-slow) ease,
transform var(--em-t-slow) ease;
}
.ab-route:hover { color: var(--em-ink); border-color: var(--em-line-hover);
box-shadow: var(--em-sh-card); transform: translateY(-2px); }
.ab-route__i { width: 22px; height: 22px; color: var(--em-accent); }
.ab-route__i svg { width: 100%; height: 100%; display: block; }
.ab-route__k { font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--em-text-eyebrow-neutral); margin-top: 4px; }
.ab-route__v { font-family: var(--em-display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.25; }
.ab-route__m { font-size: 12.5px; line-height: 1.5; color: var(--em-ink-mute); margin-top: auto; padding-top: 10px; }
/* ————————————————————— 15b · The phone link ——————————————————————
On a phone a telephone number is not text, it is a control: tapping it
dials. Set as running text it is an 18px target — well under the 44px
floor — so every number offered as an ACTION carries this.
The target is grown with a pseudo-element rather than with padding or a
min-height, because those would drag the underline away from the digits
and leave the number looking unmoored in the row.
------------------------------------------------------------------------- */
.ab-tel {
position: relative; display: inline-block;
color: var(--em-ink); border-bottom: 1px solid var(--em-line-ctl);
font-variant-numeric: tabular-nums; white-space: nowrap;
transition: border-color var(--em-t) ease;
}
.ab-tel:hover { color: var(--em-ink); border-bottom-color: var(--em-ink); }
.ab-tel::after {
content: ''; position: absolute; left: 0; right: 0;
top: 50%; height: 44px; transform: translateY(-50%);
}
/* ————————————————————— 16 · Split figure ——————————————————————
Words beside a picture, never on it. The picture is one column and the
words the other; at narrow widths the picture goes above the words.
------------------------------------------------------------------------- */
.ab-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.2vw, 52px); align-items: start; }
.ab-split__b > * + * { margin-top: 18px; }
.ab-split__shot { position: relative; overflow: hidden; border-radius: var(--em-r);
background: var(--em-well); }
.ab-split__shot img { display: block; width: 100%; height: auto; }
.ab-split__cap { font-size: 12px; line-height: 1.5; color: var(--em-ink-mute); margin-top: 12px; }
/* A portrait crop of the same sitter. Left as a modifier rather than a change
to .ab-split__shot because brand.html and founders-message.html share that
class and are composed around a landscape plate. The width is capped so a
4:5 frame cannot outgrow the quotation beside it — at full column width a
portrait reads as a poster, not as a figure. */
.ab-split__shot--portrait { max-width: 26rem; aspect-ratio: 4 / 5; }
.ab-split__shot--portrait img { height: 100%; object-fit: cover; object-position: 50% 22%; }
.ab-split__shot--portrait + .ab-split__cap { max-width: 26rem; }
@media (min-width: 900px) {
.ab-split { grid-template-columns: 1.02fr 1fr; gap: clamp(34px, 4.4vw, 76px); }
.ab-split--flip .ab-split__media { order: 2; }
.ab-split__b { padding-top: 6px; }
/* A picture beside a document that is much taller than it: the picture
holds while the words run. Only valid because .ab-split sets
align-items:start — a stretched grid item has no room to move in. */
.ab-split__media--stick { position: sticky; top: calc(var(--em-hdr) + 28px); }
}
/* ————————————————————— 17 · The closing band ——————————————————————
Related content. Every page ends by offering the next page rather than
returning the reader to the footer.
------------------------------------------------------------------------- */
/* The ground, not the darkness. This band was --em-night (#0a0a0a) sitting
directly on the footer's own near-black: 1.03:1 against each other, so the
two read as one continuous black slab and the page ended on a void. The
other 39 pages already close on SAND (places.css §24, .em-close) — cream →
sand → footer, one soft edge then one decisive one. These 27 pages were the
last ones still closing on black; they now close the same way. Any change
here belongs in .em-close too: same band, two families. */
.ab-next { background: var(--em-sand-band); color: var(--em-ink);
border-top: 1px solid rgba(var(--em-rgb-ink), .12); }
/* the hand-over needs room on the near side of the edge, as .em-close has */
.ab-next.ab-band { padding-bottom: calc(var(--ab-band) * 1.18); }
.ab-next .ab-label { color: var(--em-text-eyebrow-neutral); }
.ab-next__grid { display: grid; gap: 0; border-top: 1px solid var(--em-line-rule);
margin-top: clamp(26px, 3vw, 38px); }
.ab-next__l {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
padding: clamp(20px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--em-line-rule);
color: var(--em-ink);
}
/* Both are s inside the link's first cell, so both need display:block:
left inline, the description's first line sets beside the tail of the title
and its margin-top does nothing, which is what all 27 pages were rendering. */
.ab-next__t { display: block;
font-family: var(--em-display); font-size: clamp(20px, 2vw, 27px); line-height: 1.2; }
.ab-next__d { display: block;
font-size: 13.5px; line-height: 1.5; color: var(--em-ink-sand); margin-top: 7px; max-width: 34em; }
.ab-next__arrow { width: 36px; height: 36px; flex: none; border-radius: 50%;
border: 1px solid var(--em-line-hover); display: grid; place-items: center;
transition: transform var(--em-t-mid) var(--em-e-soft),
background var(--em-t) ease, border-color var(--em-t) ease, color var(--em-t) ease; }
.ab-next__arrow svg { width: 13px; height: 13px; display: block; }
/* On the dark band the hover was a lift to #fff. On sand the ink is already
the darkest thing here, so the cue is the arrow taking the filled-control
plate instead — the same plate every button on this build hovers to. */
.ab-next__l:hover .ab-next__arrow { transform: translateX(4px);
background: var(--em-ink); border-color: var(--em-ink); color: var(--em-on-ink); }
@media (min-width: 860px) {
.ab-next__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(34px, 4vw, 70px); }
}
/* ————————————————————— 17b · The explore-all dialog ——————————————————————
Moved out. "Explore all of Emaar" is one directory for the whole site
now, built by explore-all.js and styled by explore-all.css; this page
family's smaller .ab-dir copy of it is gone.
------------------------------------------------------------------------- */
/* ————————————————————— 17c · The roster ——————————————————————
Governance pages: boards of directors and principal officers. A person is
documentary content, so a person is a RULED ROW — a portrait beside a
name, a role and a biography — never a card in a grid of cards. A card
grid of faces reads as a product catalogue; a ruled roster reads as a
register, which is what a board actually is.
The portrait is a square frame and the words sit BESIDE it, never on it
(§0's rule holds for portraits above all: a name set over a face is the
one composition that always looks cheap).
Long biographies are disclosed, not dumped. The opening paragraph always
shows — enough to know who the person is — and the rest is behind a
, which needs no script and is correct with none.
------------------------------------------------------------------------- */
.ab-roster { border-top: 1px solid var(--em-line-rule); }
.ab-figure {
display: grid; grid-template-columns: 1fr;
gap: clamp(18px, 2.2vw, 28px);
padding: clamp(26px, 3vw, 46px) 0;
border-bottom: 1px solid var(--em-line-faint);
align-items: start;
}
/* The frame keeps its ratio whether or not the file loads, so a missing
portrait leaves a considered empty square rather than collapsing the row
and shifting every name under it. */
.ab-figure__shot {
position: relative; overflow: hidden; border-radius: var(--em-r);
background: var(--em-well); aspect-ratio: 1 / 1; max-width: 100%;
}
.ab-figure__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No portrait supplied. Marked, not faked — the initial is a placeholder and
reads as one; it is never presented as a likeness. */
.ab-figure__shot--none { display: grid; place-items: center; background: var(--ab-sunk); }
.ab-figure__mono {
font-family: var(--em-display); font-size: clamp(30px, 4vw, 44px);
line-height: 1; color: var(--em-ink-mute); opacity: .55;
}
.ab-figure__b > * + * { margin-top: 12px; }
.ab-figure__r {
font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-text-eyebrow-neutral); margin: 0;
}
.ab-figure__n {
font-family: var(--em-display); font-size: clamp(21px, 2vw, 28px);
line-height: 1.2; letter-spacing: -.005em; color: var(--em-ink);
margin: 0; text-wrap: pretty;
}
.ab-figure__r + .ab-figure__n { margin-top: 9px; }
.ab-figure__hold {
font-size: 13px; line-height: 1.55; color: var(--em-ink-mute); margin: 0;
}
@media (min-width: 720px) {
.ab-figure { grid-template-columns: clamp(164px, 20vw, 236px) 1fr;
gap: clamp(26px, 3.4vw, 54px); }
}
/* the disclosure: a rule, a label and a mark — the same vocabulary as a link,
not a button, because it reveals words rather than performing an action */
.ab-more { margin-top: 16px; }
.ab-more > summary {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
list-style: none; min-height: 44px; /* the site's touch floor */
font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--em-ink); transition: color var(--em-t) ease;
}
.ab-more > summary::-webkit-details-marker { display: none; }
.ab-more > summary::after {
content: ""; width: 7px; height: 7px; flex: none;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--em-t-mid) var(--em-e-soft);
}
.ab-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ab-more > summary:hover { color: var(--em-ink-2); }
.ab-more > summary:focus-visible { outline: 2px solid var(--em-ink); outline-offset: 3px; }
.ab-more__b { padding-top: 16px; }
.ab-more__b > * + * { margin-top: 13px; }
/* A subheading inside a biography (Experience / Education). Small, ruled off
the text above it, and never competing with the person's name. */
.ab-figure__sub {
font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--em-ink-mute); margin: 0; padding-top: 6px;
}
/* ————————————————————— 17d · The letter ——————————————————————
One long signed statement. It is set as a document: a single measure, an
opening paragraph at lede size, and a signature that is a ledger line
rather than a scanned squiggle.
------------------------------------------------------------------------- */
.ab-letter { max-width: var(--ab-measure); }
.ab-letter > p + p { margin-top: clamp(14px, 1.5vw, 19px); }
.ab-letter > p {
font-size: 16.5px; line-height: 1.68; color: var(--em-ink-body); margin: 0;
}
.ab-letter > p:first-child {
font-family: var(--em-display); font-size: clamp(19px, 1.9vw, 25px);
line-height: 1.38; color: var(--em-ink); letter-spacing: -.004em;
}
.ab-sign {
margin-top: clamp(30px, 3.4vw, 46px); padding-top: clamp(18px, 2vw, 24px);
border-top: 1px solid var(--em-line-rule); max-width: var(--ab-measure);
}
.ab-sign__n { font-family: var(--em-display); font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.2; color: var(--em-ink); margin: 0; }
.ab-sign__r { font-size: 12.5px; color: var(--em-ink-mute); margin-top: 6px; }
/* ————————————————————— 18 · Motion ——————————————————————
Content does not fade, rise or blur in — on load or on scroll (Brand
Growth, 2026-10-01; motion.css). What is left here is the masthead's
struck rule and the blog card's hover. Declared INSIDE the negative query,
so under `reduce` there is nothing to override.
------------------------------------------------------------------------- */
@media not all and (prefers-reduced-motion: reduce) {
/* The masthead's words are painted as they are — no opacity, rise or blur
on load (Brand Growth, 2026-10-01; see motion.css). The .ab-in-1…4
classes stay in the markup as inert hooks. Only the opening RULE is still
drawn: it is a 1px line being struck, not content fading in. */
@keyframes abRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* A TAB CHANGE IS NOT A PAGE OPENING.
The struck rule below is an opening gesture. (Until 2026-10-01 the
masthead's words cascaded in with it — invisible at 0ms and settled at
1430ms; they now simply stand there, and only the rule is drawn.) That is
right for arriving at a page. It is wrong for the seven sustainability topics,
which a reader moves between through a strip that looks and behaves like
tabs — there, every press made an identical masthead, at identical
coordinates, dismantle itself and rebuild, and the reported symptom was
exactly that: "once the tabs are changing it is jerking". Measured off
the report's own screen recording, the arriving masthead was EMPTY for
~200ms and still assembling at 900ms.
So the motion is declared for a page that was opened, not for one that
was tabbed to. Written as :not() on the positive rule rather than as an
`animation: none` override after it, for the reason motion.css gives at
the top of the file: an override written to cancel motion is a race, and
this one would resolve to a snap.
[data-em-arrive] is set by su-rail.js, from the , before the first
paint — nothing sets it on the other twenty-six pages, so their opening
is untouched. If the script never runs the attribute is never there, the
selector matches, and the page opens exactly as it always did.
`html` and not `:root`, deliberately: ds_check reads a line opening with
`:root` outside assets/ds/ as a forked token block, which is the right
thing for it to read it as. This is a scope on the root ELEMENT's state,
not a declaration of anything, so it is written as the element it is. */
html:not([data-em-arrive="tab"]) .ab-mast__grid::before { animation: abRule 1.1s var(--em-e-panel) backwards; }
.ab-post__shot img { transition: transform var(--em-t-image) var(--em-e-image), filter var(--em-t-image) ease; }
.ab-post:hover .ab-post__shot img { transform: scale(1.05); filter: brightness(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.ab-post__shot img { transition: none; }
.ab-post:hover .ab-post__shot img { transform: none; filter: none; }
}
/* The opening rule's origin is declared on .ab-mast__grid::before above,
outside the motion query, so the static line is correct whether or not the
animation ever runs. */
/* ————————————————————— 19 · Print ——————————————————————— */
@media print {
body[data-ab] { background: var(--p-brand-white); }
.ab-index, .ab-next, .ab-filters, .ab-mast__acts, .su-rail { display: none !important; }
.ab-row, .ab-term, .ab-figure { break-inside: avoid; }
/* A biography that is closed on screen must still print. A closed
hides its content with content-visibility, not display, so
display alone does not open it — both have to be answered. */
.ab-more > summary { display: none; }
.ab-more > .ab-more__b {
display: block !important; content-visibility: visible !important;
padding-top: 8px;
}
.ab-spine { display: block; }
}
/* ———— 20 · In-page navigation ——————————————————————— */
/* The ab-index rail's #links used to rely on `html { scroll-behavior: smooth }`
declared right here — a stopgap, because these pages load places.css +
about.css only and never inherited the rule styles.css sets on index.html.
It is gone, and anchor-scroll.js carries every fragment link on the site
instead: one curve, interruptible, on all 39 pages.
Removing it also fixes something this rule broke silently. The property is
global to every scroll the DOCUMENT performs, and lockScroll restores a
locked reading position with window.scrollTo(0, lockY) — under a smooth
document that restore was an animated glide back to where the reader
already was. A scroll that is a restore is not a journey. */
|