/* =========================================================================== EMAAR DESIGN SYSTEM · 01 — TOKENS The single source of truth for every shared visual value on this site. THIS FILE IS THE ONLY PLACE A RAW VALUE IS ALLOWED TO BE WRITTEN. Everything else in the build — component stylesheets, page stylesheets, generators — consumes a token from here. If a value belongs on more than one page, it belongs in this file; if it does not, it does not need a token. --------------------------------------------------------------------------- THREE LAYERS, IN ORDER --------------------------------------------------------------------------- 1 · PRIMITIVES --p-* the palette itself. PRIVATE. Never referenced by a component. Renaming or retuning a primitive must not require touching anything but the semantic layer below it. 2 · SEMANTIC --em-* the public API. What a value MEANS, not what it is: --em-text-primary, not --em-black. This is what components and pages use. 3 · COMPONENT --em--* only where a component has a dimension that other components must be able to reason about (header height, button height, input height). Not one token per declaration. --------------------------------------------------------------------------- LOAD ORDER --------------------------------------------------------------------------- This file is linked FIRST on every page, before any other stylesheet, so that every later sheet — shared or page-level — resolves against it. … then component and page stylesheets … --------------------------------------------------------------------------- HISTORY — why this file exists --------------------------------------------------------------------------- Until this batch the token block lived inside `places.css`, a stylesheet named after ONE page family. Forty-five pages linked it and got the system; six did not — the home page, the three booking-journey pages, the search results page and the press options page — and each of those had rewritten the same palette under its own prefix (`--unveil-*`, `--bk-*`, inline values). Three copies of one brand, drifting independently. Those prefixes are now ALIASES declared at the foot of this file. They resolve to the same tokens as everything else, so the six pages inherit every future correction instead of needing six edits. Figma mapping: this file IS Figma File 01 · Foundation Library. Each block below names the Figma variable collection it becomes. `tokens.json` beside it is the machine-readable (DTCG) export of the same values. =========================================================================== */ /* ########################################################################### LAYER 1 · PRIMITIVES (private — do not reference --p-* from a component) ########################################################################### */ :root { /* ═══════════════════════════════════════════════════════════════════════ P.1 · COLOUR — BRAND Authoritative. EMAAR Brand Guidelines p.20, "2.2 CORE ELEMENTS, Colour palette (Print / Digital)". Four primaries and one highlight. These five values are EMAAR's; nothing here may retune them. ═══════════════════════════════════════════════════════════════════════ */ --p-brand-black: #000000; /* BLACK C0 M0 Y0 K100 */ --p-brand-grey-dark: #4d4d4f; /* DARK GREY Pantone Cool Gray 11U, K85 */ --p-brand-grey-light: #f8f8f8; /* LIGHT GREY Pantone Cool Gray 1U, K2 */ --p-brand-white: #ffffff; /* WHITE */ --p-brand-sand: #ebe1d3; /* SAND — Highlight Colour (Web). The January 2025 external deck captions this chip in full: C6 M10 Y16 K0, R237 G224 B209, #EDE0D1. The token stays two steps off that print value — it is the build's screen sand, already ground for every filled control and measured for contrast at that value. The brand value itself is published, as the brand value, on emaar-brand.html §03. */ /* ═══════════════════════════════════════════════════════════════════════ P.2 · COLOUR — INK RAMP (derived for screen, darkest → lightest) Every step carries its measured contrast against the page ground (--p-paper-100, #f6f2ea). A step is not added without that measurement. ═══════════════════════════════════════════════════════════════════════ */ --p-ink-1000: #111112; /* screen-softened BLACK; the build's own ink */ --p-ink-900: #333335; /* the single hover for every filled control */ --p-ink-800: #4d4d4f; /* = brand DARK GREY */ --p-ink-700: #5c5346; /* warm body ink on paper 6.76:1 */ --p-ink-600: #6f6553; /* eyebrows and kickers 5.14:1 DEPARTURE: the source page uses #7a6f5c, which measures 4.42:1 and fails AA at the 11px it is used at. */ --p-ink-550: #655b4a; /* eyebrows ON the sand band 4.92:1 there. --p-ink-600 is 4.44:1 on sand and fails AA at 11px, so the eyebrow gets its own value rather than the band getting a lighter ground. */ --p-ink-500: #6a6a6d; /* captions and metadata 4.83:1 DEPARTURE: the source uses #8a8a8c at 3.09:1 — below AA for text at any size. */ --p-ink-400: #8a8a8c; /* NON-TEXT only, and text on night (5.75:1 there) */ /* ═══════════════════════════════════════════════════════════════════════ P.3 · COLOUR — PAPER RAMP (the light world, lightest → deepest) ═══════════════════════════════════════════════════════════════════════ */ --p-paper-0: #ffffff; --p-paper-25: #fdfcfa; /* card and panel sitting on the ground */ --p-paper-50: #fbfaf7; /* dialog ground */ --p-paper-75: #f7f5f0; /* THE EDITORIAL GROUND — see REGISTERS below. One step cooler and plainer than the sales ground. Both are brand neutrals; the difference is that a record is not a brochure. */ --p-paper-100: #f6f2ea; /* THE SALES GROUND — the site's default */ --p-paper-125: #f0ede5; /* recessed, editorial register */ --p-paper-150: #f1ece2; /* recessed / placeholder ground */ --p-paper-200: #e6e1d8; /* behind every image while it loads */ --p-paper-300: #e7dcca; /* SAND, one step down, as a full-width band. The brand chip (#ebe1d3) sits so close to the ground that a band of it reads as a print artefact rather than a plate; this step is the smallest one that reads as a change of paper. */ --p-paper-cream: #ede1d1; /* the ground of every FILLED control */ --p-paper-cream-lift: #f8f0e3; /* …its hover */ /* ═══════════════════════════════════════════════════════════════════════ P.4 · COLOUR — NIGHT RAMP (the dark world) ═══════════════════════════════════════════════════════════════════════ */ --p-night-1000: #050505; /* the site footer — the last surface on a page */ --p-night-900: #0a0a0a; /* closing band, mobile menu, drawer ground */ --p-night-800: #0f0e0c; /* film-graded photographic ground */ --p-night-700: #16120e; /* the home page's unveil glow */ --p-night-on: #f5f2ec; /* primary text on night */ --p-night-on-2: #b9b4aa; /* secondary text on night */ /* ═══════════════════════════════════════════════════════════════════════ P.5 · COLOUR — METAL The accent that MARKS: rules, hairlines, numerals, bullets, icons, focus rings, accent text. It never FILLS. See DESIGN-STANDARDS.md §1. NEUTRAL SINCE 2026-09-30. Review feedback: the metal "should not look like gold", and must use the SAME alternative as the eyebrows, for one consistent system. So the metal is now exactly the two eyebrow greys (S.2, "EYEBROW · BRAND NEUTRAL"), both brand primaries: on paper / sand Cool Gray 11U #4d4d4f 7.55:1 on ground on dark / film Cool Gray 1U #f8f8f8 at 70% 9.47:1 on black A translucent gold (a line at 55%) becomes the same grey at the same alpha — on dark, alpha x 0.7. The gold values live on in P.5b, for grounds only. ═══════════════════════════════════════════════════════════════════════ */ --p-metal-ink: #4d4d4f; /* ON PAPER (was #7f6535) */ --p-metal-lift: rgba(248, 248, 248, .7); /* ON DARK (was #a98e63) — never let this touch cream. */ --p-metal-soft: rgba(248, 248, 248, .7); /* ON FILM (was #c5b396) */ /* ═══════════════════════════════════════════════════════════════════════ P.5b · COLOUR — GOLD, FOR GROUNDS ONLY The review kept gold where it is a BACKGROUND — a filled button, a hover wash, a glow, the text-selection highlight. These are the three golds P.5 used to be. A component reaches them only through --em-surface-gold-*, and only on a `background` (or the edge of that same filled button). Anything that is a line, a mark or a letter takes P.5 instead. ═══════════════════════════════════════════════════════════════════════ */ --p-gold-ink: #7f6535; --p-gold-lift: #a98e63; --p-gold-soft: #c5b396; /* ═══════════════════════════════════════════════════════════════════════ P.6 · COLOUR — STATUS Muted to the brand. A luxury surface does not signal in primary colour. ═══════════════════════════════════════════════════════════════════════ */ --p-danger: #9a3b2e; --p-success: #3f6b4f; --p-warning: #8a6d3d; --p-info: #4d4d4f; /* ═══════════════════════════════════════════════════════════════════════ P.7 · ALPHA LINES Lines are stated as alpha, never as a solid, so one line value works on the ground, on a card and on the sand band without three variants. ═══════════════════════════════════════════════════════════════════════ */ --p-line-07: rgba(17,17,17,.07); --p-line-10: rgba(17,17,17,.10); --p-line-12: rgba(17,17,17,.12); --p-line-14: rgba(17,17,17,.14); --p-line-22: rgba(17,17,17,.22); --p-line-24: rgba(17,17,17,.24); --p-line-32: rgba(17,17,17,.32); --p-line-46: rgba(17,17,17,.46); --p-line-62: rgba(17,17,17,.62); --p-line-on-14: rgba(245,242,236,.14); --p-line-on-16: rgba(245,242,236,.16); --p-line-on-45: rgba(245,242,236,.45); --p-line-sand-16: rgba(17,17,17,.16); /* Ink ON the night ground, as alpha rather than a solid, so one value works over a photograph, the closing band and the footer alike. */ --p-on-night-70: rgba(245,242,236,.7); --p-on-night-80: rgba(245,242,236,.8); /* ═══════════════════════════════════════════════════════════════════════ P.7b · ALPHA CHANNELS A colour used at many opacities is ONE colour, not twelve. Stated as an RGB triplet so a component writes `rgba(var(--em-rgb-on-inverse), .12)` and the hue still comes from one place. The audit found `rgba(245,242,236,α)` at eight different alphas and `rgba(244,241,234,α)` — the same ink, one point off — at seven more, across four stylesheets. Fifteen declarations, one decision. ═══════════════════════════════════════════════════════════════════════ */ --em-rgb-ink: 17, 17, 17; /* the ink, for lines and washes on paper */ --em-rgb-on-inverse: 245, 242, 236; /* the ink on night, for lines and washes */ --em-rgb-white: 255, 255, 255; /* on a photograph only */ --em-rgb-night: 10, 10, 10; /* a plate over content */ --em-rgb-veil: 6, 6, 5; /* the gradient under a lockup */ --em-rgb-sand: 237, 225, 209; --em-rgb-metal: 197, 179, 150; /* GOLD — glows and washes (grounds) only */ --em-rgb-grey-light: 248, 248, 248; /* = --p-brand-grey-light, Cool Gray 1U */ /* ═══════════════════════════════════════════════════════════════════════ P.8 · TYPEFACES Two families, and no third. Optima is the display and editorial voice — a humanist sans with calligraphic stress, which is what lets a heading be elegant without being a serif. Source Sans 3 carries every working word: body, UI, navigation, labels, figures. Cinzel is NOT a third family — it is the fallback path for the EMAAR wordmark, which is drawn as SVG glyphs wherever the mark appears. ═══════════════════════════════════════════════════════════════════════ */ --p-font-optima: Optima, "Optima Nova", Candara, "Trebuchet MS", sans-serif; --p-font-source: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --p-font-mark: "Cinzel", "Times New Roman", serif; /* Weights. Four, and the build uses three of them. 600 is the UI weight — labels, buttons, eyebrows, navigation. 400 is everything set in Optima: a display face is not emboldened. */ --p-weight-regular: 400; --p-weight-medium: 500; --p-weight-semi: 600; /* ═══════════════════════════════════════════════════════════════════════ P.9 · TYPE SCALE A fine editorial scale. The small end moves in half-points because the tracking these labels carry (.14em–.26em) makes a whole point a visible jump in line length; the large end is fluid and set with clamp(). Naming is by SIZE at the primitive layer and by ROLE at the semantic layer (P.9 → S.4). A component asks for --em-text-label, never --p-14. ═══════════════════════════════════════════════════════════════════════ */ --p-9-5: 9.5px; --p-10: 10px; --p-10-5: 10.5px; --p-11: 11px; --p-11-5: 11.5px; --p-12: 12px; --p-12-5: 12.5px; --p-13: 13px; --p-13-5: 13.5px; --p-14: 14px; --p-14-5: 14.5px; --p-15: 15px; --p-15-5: 15.5px; --p-16: 16px; --p-17: 17px; --p-19: 19px; --p-21: 21px; --p-24: 24px; /* Fluid display sizes. Every one is min → preferred(vw) → max, so a heading is never set by a breakpoint and never needs a mobile override. */ --p-fluid-display-xl: clamp(38px, 6.2vw, 92px); --p-fluid-display-l: clamp(34px, 5.2vw, 72px); --p-fluid-display-m: clamp(30px, 4.0vw, 56px); --p-fluid-h1: clamp(30px, 3.8vw, 52px); --p-fluid-h2: clamp(28px, 3.2vw, 42px); --p-fluid-h3: clamp(23px, 2.3vw, 31px); --p-fluid-h4: clamp(19px, 1.7vw, 24px); /* The EDITORIAL register's own steps. See REGISTERS at the foot of this file: the site speaks in two registers, and this is the second one's scale — a larger title over a narrower measure, and smaller subheads under it, which is how a record reads against a brochure. */ --p-fluid-h1-editorial: clamp(33px, 4.6vw, 60px); --p-fluid-h2-editorial: clamp(25px, 2.8vw, 37px); --p-fluid-h3-editorial: clamp(19px, 1.5vw, 23px); --p-fluid-lede: clamp(17px, 1.35vw, 20.5px); /* Line heights. Display is set tight because Optima's x-height is large; body is set open because it is read, not scanned. */ --p-lh-display: 1.06; --p-lh-tight: 1.08; --p-lh-heading: 1.2; --p-lh-snug: 1.45; --p-lh-body: 1.5; --p-lh-relaxed: 1.62; /* Letter spacing. The tracking IS the brand at small sizes — an EMAAR label is identifiable by its tracking before its colour. */ --p-ls-display: 0; /* Optima at display size is set at its natural tracking. The token exists so a future decision to tighten it is ONE edit, not 40. */ --p-ls-none: 0; --p-ls-ui: 0.14em; --p-ls-label: 0.16em; --p-ls-wide: 0.18em; --p-ls-wider: 0.20em; --p-ls-widest: 0.26em; /* ═══════════════════════════════════════════════════════════════════════ P.10 · SPACE SCALE A 2px grid to 40, then 4px to 48, then 8px. The whole build's rhythm. The audit found 64 distinct pixel spacings in use; the top twenty cover four fifths of every declaration and all of them land on this grid. Named by VALUE so arithmetic stays obvious at the call site: a designer reading `--space-16` knows it is 16px without a lookup, and `--space-3` does not exist, which is the point. ═══════════════════════════════════════════════════════════════════════ */ --space-0: 0; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-30: 30px; --space-32: 32px; --space-34: 34px; --space-36: 36px; --space-38: 38px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px; --space-96: 96px; --space-120: 120px; /* Fluid space — section rhythm. A band's air is a share of the viewport, floored and capped, so a phone is not a squeezed desktop. */ --space-band: clamp(48px, 7vh, 86px); /* between bands */ --space-band-tight: clamp(30px, 4.5vh, 48px); --space-band-tail: clamp(70px, 9vw, 120px); /* under the last column */ --space-section: clamp(56px, 8vw, 110px); /* inside a full-bleed band */ /* The editorial register's rhythm: fewer, longer bands. */ --space-band-editorial: clamp(56px, 8vw, 116px); --space-band-editorial-tight: clamp(34px, 4.5vw, 62px); /* ═══════════════════════════════════════════════════════════════════════ P.11 · LAYOUT — GUTTERS, MEASURES, CONTAINERS ═══════════════════════════════════════════════════════════════════════ */ --p-gutter: clamp(20px, 4vw, 64px); /* standard page gutter */ --p-gutter-wide: clamp(24px, 5vw, 72px); /* wide container / fixed lockup */ --p-container: 1320px; --p-container-wide: 1500px; --p-container-text: 44em; /* the CARD measure — ~72 characters */ --p-container-prose: 34em; /* the EDITORIAL measure — ~64 characters at 16.5px, which is where running prose is most readable */ --p-container-prose-sm: 28em; --p-container-form: 620px; /* ═══════════════════════════════════════════════════════════════════════ P.12 · BREAKPOINTS Custom properties cannot be used inside a @media condition, so these are DOCUMENTATION, not machinery: they name the ladder every stylesheet must write out by hand, and they are the numbers `tokens.json` exports to Figma as grid/frame widths. phone ≤ 599 one column, edge-to-edge tablet 600–1023 two columns; the page still owns the foot of screen desktop 1024–1439 the full chrome appears: header nav, hero bar, rails wide ≥ 1440 container caps; gutters stop growing 1023/1024 IS THE SITE'S ONE STRUCTURAL BREAK. It is the width at which the mobile dock stands down, the header nav appears and the hero search bar is drawn. A component that needs a different number is describing its own content, not the site's structure — say so in a comment. ═══════════════════════════════════════════════════════════════════════ */ --bp-phone: 599px; --bp-tablet: 600px; --bp-desktop: 1024px; --bp-wide: 1440px; /* ═══════════════════════════════════════════════════════════════════════ P.13 · BORDER & RADIUS Radius is a BRAND CONSTANT, not a component decision. 2px, and 50% for a circle. A component that reaches for 999px has opted out of the brand. See DESIGN-STANDARDS.md §8. ═══════════════════════════════════════════════════════════════════════ */ --p-border-hair: 1px; --p-border-mark: 2px; /* a deliberate rule — a section divider, a tab mark */ --p-radius-none: 0; --p-radius: 2px; /* THE radius */ --p-radius-circle: 50%; /* ═══════════════════════════════════════════════════════════════════════ P.14 · ELEVATION Four levels and no fifth. Elevation is used to say "this is in front of the page", never for decoration. A card at rest casts nothing. ═══════════════════════════════════════════════════════════════════════ */ --p-shadow-none: none; --p-shadow-1: 0 10px 28px rgba(40,34,22,.13); /* a lifted card */ --p-shadow-2: 0 34px 80px rgba(60,48,30,.16); /* a panel on paper */ --p-shadow-3: 0 30px 80px rgba(0,0,0,.45); /* a drawer over night */ --p-shadow-4: 0 60px 140px rgba(0,0,0,.55); /* a modal */ /* ═══════════════════════════════════════════════════════════════════════ P.15 · Z-INDEX LADDER Every fixed, sticky or absolutely-positioned surface on this site takes a rung from this ladder. A raw z-index in a component stylesheet is a bug: it is a number chosen without knowing what else is on screen, and the site has already lost a booking CTA underneath the mobile dock that way (DESIGN-STANDARDS.md §9). THE NUMBERS ARE THE BUILD'S OWN. This ladder was not invented and then imposed — it was read off the seventeen surfaces that already exist, in the order they already stack, and given names. Nothing moved. What changed is that the order is now written down in one place, so the next surface is placed by asking "what kind of thing is this?" rather than by reading someone else's number and adding five. Rungs 1–5 are LOCAL stacking inside one component (a caption over an image, a card's own overlay). They have no token and need none: they are scoped to a stacking context and cannot reach another component. ═══════════════════════════════════════════════════════════════════════ */ --z-below: -1; --z-base: 0; --z-raised: 1; /* the floor of local stacking */ --z-sticky: 20; /* an in-page sticky rail, index or dropdown */ --z-sticky-bar: 40; /* a sticky section switcher or sub-nav bar */ --z-ledge: 48; /* a page's own sticky bottom action bar */ --z-header: 50; /* the site header */ --z-menu: 55; /* the full-screen menu it opens */ --z-brand: 60; /* the fixed brand lockup, the language picker — above the header because they sit outside its bar */ --z-scrim: 70; /* a listbox scrim */ --z-popover: 80; /* a listbox panel, a date picker */ --z-overlay: 85; /* a search overlay */ --z-dock: 90; /* the mobile dock — ONE owner of the foot of screen, and the floor-plan drawer that replaces it */ --z-modal: 95; /* a dialog, a bottom sheet and their scrims */ --z-lightbox: 96; /* a photograph opened over a dialog */ --z-drawer: 120; /* the mobile nav drawer */ --z-drawer-top:130; /* the filter drawer and the explore-all panel, which open FROM the nav drawer */ --z-film: 140; /* the film lightbox — the top of the content stack */ --z-toast: 150; --z-skip: 200; /* the skip link, above everything, always */ /* ═══════════════════════════════════════════════════════════════════════ P.16 · MOTION Five curves and no sixth; five durations and no sixth. Every one is named for the job it does, so a new component asks "what is this?" rather than "what looks right?". ═══════════════════════════════════════════════════════════════════════ */ --p-ease-soft: cubic-bezier(.22,.61,.24,1); /* menus, rules, slides */ --p-ease-panel: cubic-bezier(.33,0,.15,1); /* panels, sheets, drawers */ --p-ease-card: cubic-bezier(.33,0,.2,1); /* card entrance only */ --p-ease-image: cubic-bezier(.19,.6,.22,1); /* image zoom only */ --p-ease-exit: cubic-bezier(.22,1,.36,1); /* a long settle out — reveals, curtains, scroll */ --p-dur-fast: .25s; /* a hover, a colour, a border */ --p-dur-base: .3s; /* the default for anything interactive */ --p-dur-mid: .35s; /* a panel opening */ --p-dur-slow: .5s; /* a drawer, a sheet, a menu */ --p-dur-image: 1.6s; /* an editorial image settling — the only long one */ } /* ########################################################################### LAYER 2 · SEMANTIC (the public API — components use THESE) ########################################################################### */ :root { /* ═══════════════════════════════════════════════════════════════════════ S.1 · BACKGROUND & SURFACE BACKGROUND is the page. SURFACE is something drawn on the page. ═══════════════════════════════════════════════════════════════════════ */ --em-bg-primary: var(--p-paper-100); --em-bg-secondary: var(--p-paper-300); /* the sand band */ --em-bg-inverse: var(--p-night-900); --em-bg-footer: var(--p-night-1000); --em-surface-primary: var(--p-paper-25); --em-surface-dialog: var(--p-paper-50); --em-surface-sunk: var(--p-paper-150); /* an input well, a placeholder */ --em-surface-media: var(--p-paper-200); /* behind an image while it loads */ --em-surface-filled: var(--p-paper-cream); /* a SELECTED chip, a tag */ --em-surface-filled-hover: var(--p-paper-cream-lift); /* Gold as a GROUND only — see P.5b. A line, a mark or a letter never takes these; it takes --em-text-accent / --em-accent. */ --em-surface-gold: var(--p-gold-ink); --em-surface-gold-lift: var(--p-gold-lift); --em-surface-gold-soft: var(--p-gold-soft); /* ═══════════════════════════════════════════════════════════════════════ S.2 · TEXT ═══════════════════════════════════════════════════════════════════════ */ --em-text-primary: var(--p-ink-1000); --em-text-secondary: var(--p-ink-800); --em-text-body: var(--p-ink-700); /* running prose on paper */ --em-text-eyebrow: var(--p-ink-600); /* eyebrows and kickers on ground */ --em-text-eyebrow-on-sand: var(--p-ink-550); --em-text-muted: var(--p-ink-500); /* captions, metadata, crumb tail */ --em-text-nontext: var(--p-ink-400); /* icons, rules — NOT for words */ --em-text-inverse: var(--p-brand-grey-light); /* on a filled ink control */ --em-text-on-inverse: var(--p-night-on); /* on the night ground */ --em-text-on-inverse-soft: var(--p-night-on-2); --em-text-on-inverse-70: var(--p-on-night-70); /* a crumb on night */ --em-text-on-inverse-80: var(--p-on-night-80); /* its links */ --em-text-accent: var(--p-metal-ink); --em-text-accent-on-inverse: var(--p-metal-lift); /* EYEBROW · BRAND NEUTRAL (2026-09-30, site-wide). Review feedback: the gold / sand eyebrow read as gold. Every eyebrow — a small uppercase label that sits ABOVE a heading or title — now takes one of these two, drawn from the brand primaries: Cool Gray 11U on paper and sand, Cool Gray 1U at 70% on night. Measured: 7.55:1 on ground, 6.22:1 on the sand band, 8.43:1 on white; 9.47:1 on black, 7.83:1 on #26241f. --em-text-eyebrow above is NOT an eyebrow any more, whatever its name: it still carries form labels, crumbs, data keys and small buttons, which were not part of the change. A new eyebrow uses these, or .em-eyebrow. */ --em-text-eyebrow-neutral: var(--p-brand-grey-dark); --em-text-eyebrow-neutral-on-inverse: rgba(var(--em-rgb-grey-light), .7); /* ═══════════════════════════════════════════════════════════════════════ S.3 · BORDER Four weights of presence, chosen by JOB: faint a hairline that should barely register subtle a divider between rows of the same kind default the edge of a plate or a card control the line that IDENTIFIES an interactive control (≥3:1) strong a control at rest that must read as tappable ═══════════════════════════════════════════════════════════════════════ */ --em-border-faint: var(--p-line-07); --em-border-subtle: var(--p-line-10); --em-border-default: var(--p-line-12); --em-border-rule: var(--p-line-14); --em-border-hover: var(--p-line-24); --em-border-control: var(--p-line-32); --em-border-strong: var(--p-line-46); --em-border-stronger: var(--p-line-62); --em-border-on-inverse: var(--p-line-on-14); --em-border-on-inverse-soft: var(--p-line-on-16); --em-border-on-sand: var(--p-line-sand-16); --em-border-on-inverse-strong: var(--p-line-on-45); /* ═══════════════════════════════════════════════════════════════════════ S.4 · TYPOGRAPHY ROLES Family, size, weight, line height and tracking — by role, so a component never states a raw size. The matching classes are in 03-typography.css. ═══════════════════════════════════════════════════════════════════════ */ --em-font-display: var(--p-font-optima); --em-font-body: var(--p-font-source); --em-font-ui: var(--p-font-source); --em-font-nav: var(--p-font-source); --em-font-brand: var(--p-font-mark); --em-text-display-xl: var(--p-fluid-display-xl); --em-text-display-l: var(--p-fluid-display-l); --em-text-display-m: var(--p-fluid-display-m); --em-text-h1: var(--p-fluid-h1); --em-text-h2: var(--p-fluid-h2); --em-text-h3: var(--p-fluid-h3); --em-text-h4: var(--p-fluid-h4); --em-text-h5: var(--p-17); --em-text-lede: var(--p-fluid-lede); --em-text-body-lg: var(--p-16); --em-text-body-md: var(--p-15); --em-text-body-sm: var(--p-14); --em-text-caption: var(--p-12); --em-text-meta: var(--p-12-5); --em-text-label: var(--p-11); /* eyebrow, crumb, button, nav, tag */ --em-text-label-sm: var(--p-10); /* a figure's unit, a rail index */ --em-text-label-xs: var(--p-9-5); /* the smallest mark on the site */ /* ═══════════════════════════════════════════════════════════════════════ S.5 · ACTION (interactive colour) The primary action is INK, not gold. Gold marks; it never fills. ═══════════════════════════════════════════════════════════════════════ */ --em-action-primary: var(--p-ink-1000); --em-action-primary-hover: var(--p-ink-900); --em-action-primary-text: var(--p-brand-grey-light); --em-action-secondary-border: var(--p-ink-1000); --em-action-tertiary-border: var(--p-line-46); /* One wash for every ghost/outline hover on the site. Grey at 14% because it darkens on paper and lightens on night from the same declaration — one rule, both worlds, no inverse variant. */ --em-action-wash: rgba(128,128,128,.14); --em-action-disabled-opacity: .38; --em-focus-ring: var(--p-ink-1000); --em-focus-ring-inverse: var(--p-brand-white); --em-focus-ring-width: 2px; --em-focus-ring-offset: 3px; /* ═══════════════════════════════════════════════════════════════════════ S.6 · STATUS ═══════════════════════════════════════════════════════════════════════ */ --em-status-error: var(--p-danger); --em-status-error-soft: rgba(154,59,46,.08); --em-status-success: var(--p-success); --em-status-warning: var(--p-warning); --em-status-info: var(--p-info); /* ═══════════════════════════════════════════════════════════════════════ S.7 · IMAGE OVERLAYS Standardised. A page does not write its own gradient over a photograph: the scrim is what makes type legible on an image, and a page-specific one is a page-specific contrast ratio. ═══════════════════════════════════════════════════════════════════════ */ --em-scrim: rgba(7,7,7,.58); /* flat scrim under a lockup */ --em-scrim-badge: rgba(10,10,10,.55); /* a tag sitting on a photograph */ --em-scrim-ledge: rgba(13,12,10,.93); /* the action ledge over content */ --em-veil-bottom: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(6,6,6,.62) 100%); --em-veil-top: linear-gradient(180deg, rgba(6,6,6,.52) 0%, rgba(0,0,0,0) 46%); /* Signature film grade removed — home page media now shows native color. */ --em-film-grade: none; /* ═══════════════════════════════════════════════════════════════════════ S.8 · LAYOUT ═══════════════════════════════════════════════════════════════════════ */ --em-container: var(--p-container); --em-container-wide: var(--p-container-wide); --em-container-text: var(--p-container-text); --em-container-prose: var(--p-container-prose); --em-container-form: var(--p-container-form); --em-gutter: var(--p-gutter); --em-gutter-wide: var(--p-gutter-wide); --em-grid-columns: 12; --em-grid-gap: clamp(16px, 2vw, 28px); /* ═══════════════════════════════════════════════════════════════════════ S.9 · SHAPE, ELEVATION, MOTION ═══════════════════════════════════════════════════════════════════════ */ --em-radius: var(--p-radius); --em-radius-circle: var(--p-radius-circle); --em-border-width: var(--p-border-hair); --em-elevation-card: var(--p-shadow-1); --em-elevation-panel: var(--p-shadow-2); --em-elevation-drawer: var(--p-shadow-3); --em-elevation-modal: var(--p-shadow-4); --em-ease-soft: var(--p-ease-soft); --em-ease-panel: var(--p-ease-panel); --em-ease-card: var(--p-ease-card); --em-ease-image: var(--p-ease-image); --em-ease-exit: var(--p-ease-exit); --em-duration-fast: var(--p-dur-fast); --em-duration-base: var(--p-dur-base); --em-duration-mid: var(--p-dur-mid); --em-duration-slow: var(--p-dur-slow); --em-duration-image: var(--p-dur-image); } /* ########################################################################### LAYER 3 · COMPONENT TOKENS Only dimensions other components must be able to reason about, plus the two or three values that make a component family coherent. Not one token per declaration — a component's private numbers stay in its own stylesheet. ########################################################################### */ :root { /* --- Header. Every page's top clearance is derived from this number, so changing the header height moves 51 mastheads correctly. ----------- */ --em-header-height: 72px; --em-header-clearance: calc(var(--em-header-height) + 32px); /* 104px */ --em-header-bg: rgba(250,249,246,.94); --em-header-blur: blur(14px) saturate(1.1); --em-header-line: rgba(0,0,0,.08); /* --- The mobile dock owns the foot of the screen below 1024. Its height is the number a page's own bottom bar and the footer spacer must both read. DESIGN-STANDARDS.md §9. ------------------------------------- */ --em-dock-height: 3.3rem; /* --- Controls. 44px is the minimum target, everywhere, on every device. It is not a mobile number. ---------------------------------------- */ --em-control-min: 44px; --em-button-height: 44px; --em-button-padding-x: 20px; --em-button-padding-x-lg: 34px; --em-button-gap: 10px; --em-icon-button-size: 44px; --em-input-height: 44px; /* = --em-control-min. A field is typed into, but it is still tapped first. */ --em-input-padding-x: 14px; --em-field-gap: 18px; /* between fields in a form */ --em-field-label-gap: 8px; /* label → control */ /* --- Card ----------------------------------------------------------- */ --em-card-padding: 22px; --em-card-gap: 10px; /* between the rows of words inside a card */ /* --- Icons. Four sizes. An icon that needs a fifth is an illustration. */ --em-icon-xs: 12px; --em-icon-sm: 14px; /* inside a button, beside a label */ --em-icon-md: 18px; /* a standalone control */ --em-icon-lg: 24px; /* a ledger mark */ --em-icon-stroke: 1.2; /* --- Image ratios. SIX, and a component does not invent a seventh. A ratio is a CONTENT decision — what the photograph is OF — so the set is named for the subject, not for the arithmetic. The audit found fourteen in the build: 16/9, 16/10, 16/7, 4/3, 4/5, 3/2, 3/4, 5/4, 1.949/1, 21/9, 1/1, 1.48, 1.3 and two asset-exact ones. Six of those are the same idea spelled three ways. The two asset-exact ratios (1620/600 and 1422/480) are NOT rounded to a token: they are the true proportions of two supplied master images, and snapping them to 16/7 would crop EMAAR's artwork. They stay, documented, as the one permitted exception. */ --em-ratio-banner: 1.949 / 1; /* the wide editorial / hero band */ --em-ratio-hero: 16 / 9; /* a landscape hero or film frame */ --em-ratio-landscape:16 / 10; /* THE default photograph on this site */ --em-ratio-card: 3 / 2; /* a property / project / news card */ --em-ratio-portrait: 4 / 5; /* the phone hero, a person, a tower */ --em-ratio-square: 1 / 1; /* a thumbnail, a logo plate */ /* --- Other surfaces ------------------------------------------------- */ --em-modal-padding: clamp(24px, 3.4vw, 40px); --em-crumb-gap: 10px; --em-nav-gap: clamp(16px, 1.7vw, 27px); } /* ########################################################################### REGISTERS --------------------------------------------------------------------------- EMAAR speaks in TWO typographic registers, and that is a design decision, not drift. The audit found them as two forked stylesheets; they are stated here as two settings of ONE system. SALES the brochure. Communities, launches, projects, places, (default) the home page. Warm ground, wide card measure, a 52px title over 42px subheads. It sells a place. EDITORIAL the record. About EMAAR, Sustainability, Investor Relations, Governance, the Newsroom. A cooler, plainer ground; a NARROWER measure (34em, ~64 characters) because these pages are read rather than scanned; a LARGER title (60px) and SMALLER subheads (37px) over it, because a record announces once and then gets out of the way; 16px body, and a longer band rhythm — fewer, longer sections. A register re-points the SEMANTIC tokens on a scope. It does not add a parallel name: `.em-h1` is still `.em-h1`, and it is 52px in one register and 60px in the other because `--em-text-h1` was re-pointed, not because somebody wrote a second class. THERE IS NO THIRD REGISTER. A page family that wants different type is asking to be in one of these two. Applied as `body[data-ab]` (the attribute the About generator already writes) or `[data-register="editorial"]` on any new page. ########################################################################### */ [data-register="editorial"], body[data-ab] { --em-bg-primary: var(--p-paper-75); --em-surface-primary: var(--p-paper-0); --em-surface-sunk: var(--p-paper-125); --em-text-h1: var(--p-fluid-h1-editorial); --em-text-h2: var(--p-fluid-h2-editorial); --em-text-h3: var(--p-fluid-h3-editorial); --em-text-body-md: var(--p-16); /* the editorial body is one step up */ --em-container-text: var(--p-container-prose); --space-band: var(--space-band-editorial); --space-band-tight: var(--space-band-editorial-tight); } /* ########################################################################### COMPATIBILITY ALIASES --------------------------------------------------------------------------- The names below were the API before this file existed. They are kept — and will be kept — because roughly three thousand declarations across the build are written against them, and a rename that touches three thousand lines is a rename that breaks something. THEY ARE ALIASES, NOT DEFINITIONS. Every one resolves to a semantic token above, so there is still exactly one place a value is decided. Do not add to this block. New work uses the semantic names. ########################################################################### */ :root { /* --- the --em-* set that lived in places.css ------------------------- */ --em-black: var(--p-brand-black); --em-grey-dark: var(--p-brand-grey-dark); --em-grey-light: var(--p-brand-grey-light); --em-white: var(--p-brand-white); --em-sand: var(--p-brand-sand); --em-ink: var(--em-text-primary); --em-ink-hover: var(--em-action-primary-hover); --em-ink-2: var(--em-text-secondary); --em-ink-body: var(--em-text-body); --em-ink-eyebrow: var(--em-text-eyebrow); --em-ink-mute: var(--em-text-muted); --em-ink-caption: var(--em-text-nontext); --em-ink-sand: var(--em-text-eyebrow-on-sand); --em-ground: var(--em-bg-primary); --em-surface: var(--em-surface-primary); --em-surface-warm: var(--em-surface-dialog); --em-sunk: var(--em-surface-sunk); --em-sand-band: var(--em-bg-secondary); --em-well: var(--em-surface-media); --em-accent: var(--em-text-accent); --em-accent-dark: var(--em-text-accent-on-inverse); --em-night: var(--em-bg-inverse); --em-on-night: var(--em-text-on-inverse); --em-on-night-2: var(--em-text-on-inverse-soft); --em-on-ink: var(--em-text-inverse); --em-danger: var(--em-status-error); --em-line: var(--em-border-subtle); --em-line-rule: var(--em-border-rule); --em-line-bar: var(--em-border-default); --em-line-ctl: var(--em-border-control); --em-line-strong: var(--em-border-strong); --em-line-hover: var(--em-border-hover); --em-line-faint: var(--em-border-faint); --em-line-dark: var(--em-border-on-inverse); --em-line-dark-2: var(--em-border-on-inverse-strong); --em-header-bf: var(--em-header-blur); --em-badge: var(--em-scrim-badge); --em-ledge: var(--em-scrim-ledge); --em-r: var(--em-radius); --em-hdr: var(--em-header-height); --em-gut: var(--em-gutter); --em-gut-wide: var(--em-gutter-wide); --em-max: var(--em-container); --em-max-wide: var(--em-container-wide); --em-measure: var(--em-container-text); --em-sh-card: var(--em-elevation-panel); --em-sh-panel: var(--em-elevation-drawer); --em-sh-modal: var(--em-elevation-modal); --em-display: var(--em-font-display); --em-body: var(--em-font-body); --em-e-soft: var(--em-ease-soft); --em-e-panel: var(--em-ease-panel); --em-e-card: var(--em-ease-card); --em-e-image: var(--em-ease-image); --em-t-fast: var(--em-duration-fast); --em-t: var(--em-duration-base); --em-t-mid: var(--em-duration-mid); --em-t-slow: var(--em-duration-slow); --em-t-image: var(--em-duration-image); /* --- the --font-* set that lived in page.css (home page) -------------- */ --font-display: var(--em-font-display); --font-editorial: var(--em-font-display); --font-sans: var(--em-font-body); --font-ui: var(--em-font-ui); --font-nav: var(--em-font-nav); --font-brand: var(--em-font-brand); /* --- the --unveil-* set that lived in page.css (home page) ------------ The home page's film world. Each one now names a token rather than restating a value: the cream it used (#f5f5f0) and the on-night ink the rest of the site uses (#f5f2ec) were two spellings of one idea three points apart, which is the kind of difference nobody can defend and everybody can see when the two meet in a footer. ------ */ --unveil-black: var(--p-brand-black); --unveil-glow: var(--p-night-700); --unveil-cream: var(--em-text-on-inverse); --unveil-gold: var(--p-metal-soft); --unveil-muted: #9a8d78; /* film-world only: 4.6:1 on --unveil-glow */ /* --- the original Next.js export's palette. Its compiled utility classes (.bg-graphite, .text-daylight, .border-[var(--line)] …) are still in the home page's markup, so the names have to resolve; they now resolve to system tokens rather than to a fourth palette. --- */ --night: var(--p-night-900); --charcoal: var(--p-night-800); --ink: var(--em-text-primary); --ink-soft: var(--em-text-secondary); --cream: var(--em-bg-primary); --cream-dim: var(--em-surface-sunk); --gold: var(--em-text-accent); --gold-bright: var(--em-text-accent-on-inverse); --graphite: var(--night); --lagoon: var(--p-night-800); --lagoon-deep: var(--charcoal); --brass: var(--gold); --brass-light: var(--gold-bright); --daylight: var(--cream); --mist: var(--cream-dim); --mute: var(--em-text-muted); --line: var(--em-border-default); --glow: rgba(var(--em-rgb-metal), .16); /* --- the two easings the compiled Next.js sheet declared, kept because page.css and search.css name them. They are the system's curves. --- */ --ease: var(--em-ease-exit); --ease-soft: var(--em-ease-card); /* --- the --bk-* set that lived in booking.css ------------------------ Every value was lifted from the results page by hand so the journey would read as one page. It now reads as one page because it IS one palette. ------------------------------------------------------- */ --bk-ground: var(--em-bg-primary); --bk-panel: var(--em-surface-dialog); --bk-panel-2: var(--em-surface-primary); --bk-sunk: var(--em-surface-sunk); --bk-ink: var(--em-text-primary); --bk-ink-2: var(--em-text-secondary); --bk-warm: var(--em-text-eyebrow); --bk-warm-2: var(--em-text-body); --bk-mute: var(--em-text-muted); --bk-gold: var(--em-text-accent); --bk-gold-soft: rgba(77,77,79,.18); /* focus ring — Cool Gray 11U, was gold */ --bk-danger: var(--em-status-error); --bk-danger-soft: var(--em-status-error-soft); --bk-ok: var(--em-status-success); --bk-line: var(--em-border-default); --bk-line-mid: var(--p-line-22); --bk-line-2: var(--em-border-strong); --bk-line-3: var(--em-border-stronger); --bk-r: var(--em-radius); --bk-shadow: 0 24px 60px rgba(0,0,0,.14); --bk-shadow-lg: 0 30px 80px rgba(0,0,0,.20); --bk-display: var(--em-font-display); --bk-body: var(--em-font-body); --bk-t: var(--em-duration-fast) var(--em-ease-panel); --bk-t-slow: .45s var(--em-ease-panel); --bk-gut: var(--em-gutter-wide); /* the journey keeps the wide gutter */ --bk-hdr: var(--em-header-height); }