/* =========================================================================== EMAAR — Sustainability sustainability.css — the eight-page ESG ecosystem. LOAD ORDER (the eight sustainability pages only): places.css · motion.css · site-nav.css · search.css · site-footer.css about.css the corporate editorial system lang.css · explore-all.css sustainability.css THIS FILE WHY A SEPARATE FILE ------------------- about.css is loaded by twenty-seven pages. Six of the components below — the topic rail, the topic module, the story grid, the story reader, the accountability chain and the stage ladder — exist on eight pages and nowhere else. Putting them in about.css would make twenty-seven pages download a component only eight of them can render. WHAT IT DOES NOT DO ------------------- It adds; it never restyles an .ab-* or .em-* component. Where a page needs a primitive that exists — .ab-rows for a document ledger, .ab-chip for a filter, .ab-prose for running copy, .em-faq for a question, .ab-next for a closing band, [data-em-reveal] for motion — it uses that primitive unchanged, so these pages and the other nineteen About pages stay one product. A shared class is an interface, not a starting point. AND IT IS NOT GREEN ------------------- Nothing here introduces a colour. The palette is the brand's: paper, ink and the one metal accent, used only as a rule or a mark. An ESG section turned green is a category badge, not a brand. Namespace: .su-* =========================================================================== */ /* ————————————————————— 1 · The topic rail —————————————————————— Moved to about.css §11d on 2026-09-30, beside the entity switcher. It was defined here while only the eight sustainability pages carried it; the investor relations pages now use the same rail for their own sections (Overview, Factsheet, Share information, …) and do not load this file. The .su-rail name is kept because eight bodies already ship it — a class name is an interface, the same reason .su-doc__i kept its name. ------------------------------------------------------------------------- */ /* ————————————————————— 2 · The topic module —————————————————————— The landing page's gateway into the seven areas. An image leads here for the same reason it leads on the blog card and nowhere else in this ecosystem: the picture IS the content of the link — it is how a reader tells "Employees" from "Health & Safety" at a glance. Nothing is written over the photograph. The words sit under it. ------------------------------------------------------------------------- */ .su-topics { display: grid; gap: clamp(26px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .su-topic { display: flex; flex-direction: column; color: var(--em-ink); text-decoration: none; } .su-topic:hover { color: var(--em-ink); } .su-topic__shot { position: relative; overflow: hidden; border-radius: var(--em-r); background: var(--em-well); aspect-ratio: 4 / 3; } .su-topic__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--em-ease-image); } .su-topic:hover .su-topic__shot img, .su-topic:focus-visible .su-topic__shot img { transform: scale(1.045); } .su-topic__b { display: flex; flex-direction: column; flex: 1; padding-top: 16px; } .su-topic__n { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--em-ink-mute); font-variant-numeric: tabular-nums; } .su-topic__t { font-family: var(--em-display); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; margin-top: 9px; text-wrap: pretty; transition: color var(--em-t) ease; } .su-topic__d { font-size: 14px; line-height: 1.58; color: var(--em-ink-body); margin-top: 10px; } .su-topic__f { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; } .su-topic__p { font-size: 11px; letter-spacing: .04em; color: var(--em-ink-mute); border-left: 2px solid var(--em-accent); padding-left: 9px; max-width: 18em; } .su-topic__arrow { flex: none; color: var(--em-ink-mute); transition: transform var(--em-t) ease; } .su-topic__arrow svg { width: 15px; height: 13px; display: block; } .su-topic:hover .su-topic__t { color: var(--em-ink-2); } .su-topic:hover .su-topic__arrow { transform: translateX(5px); } /* The first module opens the section at double width. Seven items in a two-column grid otherwise end on a lone orphan card, and a gateway into an ecosystem should have a way in rather than seven equal doors. 1 + 2 + 2 + 2 fills the grid exactly. */ @media (min-width: 900px) { .su-topics--lead > .su-topic:first-child { grid-column: span 2; } .su-topics--lead > .su-topic:first-child .su-topic__shot { aspect-ratio: 21 / 9; } .su-topics--lead > .su-topic:first-child .su-topic__t { font-size: clamp(25px, 2.3vw, 31px); } .su-topics--lead > .su-topic:first-child .su-topic__d { font-size: 15px; max-width: 40em; } } /* ————————————————————— 3 · The pillar —————————————————————— Three of them, and they are a STRUCTURE rather than three statistics — so they take a numbered ruled block, not the .ab-ledger (whose left column is sized for a figure) and not three bordered cards. ------------------------------------------------------------------------- */ .su-pillars { border-top: 1px solid var(--em-line-rule); } .su-pillar { display: grid; grid-template-columns: 1fr; gap: 10px; padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--em-line-faint); } .su-pillar__n { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--em-text-eyebrow-neutral); font-variant-numeric: tabular-nums; } .su-pillar__t { font-family: var(--em-display); font-size: clamp(21px, 2vw, 27px); line-height: 1.2; letter-spacing: -.005em; margin: 0; text-wrap: pretty; } .su-pillar__d { font-size: 13.5px; line-height: 1.55; color: var(--em-ink-body); margin: 0; max-width: 34em; } .su-pillar__a { margin: 0; } /* The one "and there is more this way" mark in this file: an uppercase micro label with a rule that grows. Used by the pillar's link to its area and by the story card. It is INK, and the rule is there whatever the colour — a control must not be announced by hue alone. */ .su-more { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--em-ink); text-decoration: none; } .su-more::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width var(--em-t) ease; } a.su-more:hover { color: var(--em-ink-2); } a.su-more:hover::after, .su-story:hover .su-more::after { width: 26px; } @media (min-width: 860px) { .su-pillar { grid-template-columns: minmax(110px, 12%) minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; } .su-pillar__n { padding-top: 7px; } .su-pillar__a { grid-column: 3; } } /* ————————————————————— 4 · The accountability chain —————————————————————— Who answers to whom. Four links of one chain, so they are drawn as a chain: a continuous rule down the left with a mark at each step. An org chart would claim reporting lines the source does not publish. ------------------------------------------------------------------------- */ .su-chain { list-style: none; margin: 0; padding: 0; position: relative; } .su-chain__i { position: relative; padding: 0 0 clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 38px); } .su-chain__i::before { /* the rule */ content: ""; position: absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: var(--em-line-rule); } .su-chain__i:last-child { padding-bottom: 0; } .su-chain__i:last-child::before { display: none; } .su-chain__i::after { /* the mark */ content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--em-accent); background: var(--ab-ground); } .su-chain__i:first-child::after { background: var(--em-accent); } .su-chain__t { font-family: var(--em-display); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.25; margin: 0; } .su-chain__d { font-size: 13.5px; line-height: 1.55; color: var(--em-ink-body); margin: 7px 0 0; max-width: 36em; } /* ————————————————————— 5 · The stage ladder —————————————————————— The Innovation Challenge's four published stages. Numbered, ruled, and horizontal above 760px so the sequence reads left to right the way the process runs. ------------------------------------------------------------------------- */ .su-steps { display: grid; gap: clamp(20px, 2.4vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } .su-step { border-top: 1px solid var(--em-ink); padding-top: 14px; } .su-step__n { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--em-text-eyebrow-neutral); font-variant-numeric: tabular-nums; } .su-step__t { font-family: var(--em-display); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.22; margin: 9px 0 0; } .su-step__d { font-size: 13px; line-height: 1.55; color: var(--em-ink-body); margin: 8px 0 0; } /* ————————————————————— 6 · The plate —————————————————————— A photograph used as evidence inside a section: full column width, its own caption under it, never a headline over it. The ratio lives on the picture rather than on the wrapper, so a width cap can never fight a fixed height. ------------------------------------------------------------------------- */ .su-plate { margin: 0; } .su-plate__f { position: relative; overflow: hidden; border-radius: var(--em-r); background: var(--em-well); aspect-ratio: 16 / 7; } .su-plate--tall .su-plate__f { aspect-ratio: 5 / 4; } .su-plate__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .su-plate__c { font-size: 12px; line-height: 1.5; color: var(--em-ink-mute); margin: 12px 0 0; max-width: 40em; } @media (max-width: 700px) { .su-plate__f { aspect-ratio: 4 / 3; } } /* ————————————————————— 7 · The list of measures —————————————————————— Four named measures from the decarbonisation strategy. A marked list, with the mark drawn rather than bulleted, so it cannot be mistaken for prose. ------------------------------------------------------------------------- */ .su-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--em-line-rule); } .su-marks li { position: relative; padding: 15px 0 15px 26px; border-bottom: 1px solid var(--em-line-faint); font-size: 14.5px; line-height: 1.5; color: var(--em-ink); } .su-marks li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 1px; background: var(--em-accent); } /* ————————————————————— 8 · The document row —————————————————————— A .ab-row carrying a file. Everything but the glyph is the ledger already in about.css; this adds the one thing a document row says that a press release does not — that following it downloads a PDF. ------------------------------------------------------------------------- */ /* Moved to about.css, beside the .ab-row it decorates. It was defined here while only the sustainability pages carried document rows; the brand page now carries one too and does not load this stylesheet. Six pages load both files, so the class keeps working where it already was. */ /* ————————————————————— 9 · The story grid —————————————————————— Thirty-four stories. Each opens a reader rather than a page of its own, because each is two to six paragraphs — a page per story would be thirty-four near-empty documents. The card is a