/**
* UMG Ecosystem Design System — The /pricing Language (Estate Voice)
* Version: 1.0.0
* Owner: UMG Creative Director (Katib)
*
* EXTRACTION ONLY — source of truth is ummahpass.io/pricing (v5
* editorial) as it actually renders at desktop 1440px and mobile 390px.
* Do not diverge from that.
*
* Import AFTER tokens.css + components.css:
*
*
*
*
* This is an OPT-IN VOICE, not a replacement for components.css. Apply
* data-umg-voice="estate" on a container (or ) alongside the
* existing data-umg-theme (normally "ummah") to inherit the editorial/
* ledger register documented here. A page may use components.css's
* .umg-card / .umg-btn-primary everywhere EXCEPT the sections it
* deliberately re-skins into this voice.
*
* Everything below reads its values from tokens.css custom properties —
* both the master set and the new [data-umg-voice="estate"] additive
* block (--font-editorial-*, --rule, --rule-soft, --surface-tint,
* --void-tint, --radius-editorial-sm/lg). Zero raw hex in this file.
*
* DO NOT re-skin any product surface with this file yet. Slice 1 ships
* the spec only; Slice 2+ applies it page by page, per the adoption
* checklist in README § "The /pricing language (estate voice)".
*/
/* ─────────────────────────────────────────────────────────────────────────
FONTS — Fraunces (display) + Instrument Sans (body), via Bunny Fonts.
Scoped to this file, not the shared tokens.css @import block — only
surfaces that opt into the estate voice need to pay for these fonts.
───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.bunny.net/css?family=fraunces:400,400i,500,500i,600&display=swap');
@import url('https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700&display=swap');
[data-umg-voice="estate"] {
font-family: var(--font-editorial-body);
}
/* ─────────────────────────────────────────────────────────────────────────
1. MASTHEAD — the newspaper nameplate that opens the page
───────────────────────────────────────────────────────────────────────── */
.umg-estate-flag {
border-bottom: 1.5px solid var(--ink);
background: var(--cream);
}
.umg-estate-flag-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-4) var(--space-10) var(--space-3);
max-width: 1180px;
margin: 0 auto;
}
.umg-estate-flag-name {
font-family: var(--font-editorial-display);
font-weight: 600;
font-size: 20px;
letter-spacing: 0.01em;
color: var(--ink);
}
.umg-estate-flag-name b { color: var(--forest); font-weight: 700; }
.umg-estate-flag-tag {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--forest);
font-weight: 600;
}
/* Sub-flag index bar — section labels under the masthead */
.umg-estate-subflag {
border-bottom: 1px solid var(--rule);
background: var(--cream);
}
.umg-estate-subflag-inner {
display: flex;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-editorial);
padding: var(--space-2) var(--space-10);
max-width: 1180px;
margin: 0 auto;
}
/* ─────────────────────────────────────────────────────────────────────────
2. EYEBROW — gold hairline + uppercase label, the estate's scarcity/
provenance marker (seat counts, hijri stamps, sabiqun copy). Uses
--gold-text (the AA-safe canonical glyph color), NEVER raw --gold.
───────────────────────────────────────────────────────────────────────── */
.umg-estate-eyebrow {
display: flex;
align-items: center;
gap: var(--space-3); /* 12px — live page uses 13px; snapped to the 4px grid */
max-width: 40ch;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-text);
}
.umg-estate-eyebrow-rule {
flex: 0 0 34px;
height: 1.5px;
background: var(--gold);
display: inline-block;
}
/* ─────────────────────────────────────────────────────────────────────────
3. DISPLAY TREATMENT — the editorial hero headline
Face: Fraunces · Weight 400 (500/italic for the emphasis line)
Scale: clamp(48px, 7.2vw, 96px) · Line-height: 0.96 · Tracking: -0.02em
Staggered per-line reveal (opacity 0 -> 1, translateY 16px -> 0).
───────────────────────────────────────────────────────────────────────── */
.umg-estate-display {
font-family: var(--font-editorial-display);
font-weight: 400;
font-size: clamp(48px, 7.2vw, 96px);
line-height: 0.96;
letter-spacing: -0.02em;
}
.umg-estate-display-line {
display: block;
}
.umg-estate-display-line--muted {
color: var(--ink-editorial-strong);
}
.umg-estate-display-line--accent {
font-style: italic;
font-weight: 500;
color: var(--forest);
}
.umg-estate-display-rise {
opacity: 0;
transform: translateY(16px);
animation: umg-estate-rise 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards;
}
.umg-estate-display-rise:nth-child(1) { animation-delay: 0.05s; }
.umg-estate-display-rise:nth-child(2) { animation-delay: 0.19s; }
.umg-estate-display-rise:nth-child(3) { animation-delay: 0.33s; }
@keyframes umg-estate-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.umg-estate-display-rise { animation: none; opacity: 1; transform: none; }
}
/* Body copy under the display headline */
.umg-estate-lede {
margin-top: var(--space-8);
max-width: 48ch;
font-family: var(--font-editorial-body);
font-size: 18.5px;
line-height: 1.58;
color: var(--ink-editorial-strong);
}
/* Section head — Fraunces h2 + Roman-numeral or label aside */
.umg-estate-section-head {
display: flex;
align-items: baseline;
gap: var(--space-5);
padding: 44px 0 var(--space-1);
border-top: 1.5px solid var(--ink);
flex-wrap: wrap;
}
.umg-estate-section-head h2 {
font-family: var(--font-editorial-display);
font-weight: 500;
font-size: 26px;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.umg-estate-section-num {
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 700;
}
.umg-estate-section-aside {
margin-left: auto;
font-size: 13px;
color: var(--ink-editorial);
max-width: 34ch;
text-align: right;
}
@media (max-width: 860px) {
.umg-estate-section-aside { display: none; }
}
/* ─────────────────────────────────────────────────────────────────────────
4. STAR-PATTERN CREAM SURFACE — full-bleed tessellation background
Uses the CANONICAL khatim polygon (0.414 inner/outer ratio) from
star.svg at 5-10% opacity, per the Geometry Grammar "Tessellation" mode.
GAP FIX APPLIED HERE (see README gap list): the live /pricing page
hand-draws a simplified relative-delta star path at 18% opacity, not
the canonical polygon — this spec corrects it to the real khatim.
───────────────────────────────────────────────────────────────────────── */
.umg-estate-surface {
background-color: var(--cream);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon fill='none' stroke='%23166534' stroke-opacity='0.08' stroke-width='2.5' points='100,10 114.27,65.56 163.64,36.36 134.44,85.73 190,100 134.44,114.27 163.64,163.64 114.27,134.44 100,190 85.73,134.44 36.36,163.64 65.56,114.27 10,100 65.56,85.73 36.36,36.36 85.73,65.56'/%3E%3C/svg%3E");
background-size: 110px 110px;
background-repeat: repeat;
}
/* Tessellation opacity is baked into the SVG via stroke-opacity (0.08 —
within the 5-10% Geometry Grammar range for tessellation mode), not a
CSS opacity on the whole element, so page content layered on top never
gets dimmed with it. Tile size is 110px (vs. the live page's 80px) —
at the canonical star's larger silhouette, 80px reads dense/busy; 110px
gives it room to breathe while staying a background texture, not a
focal pattern. If a property needs a different accent (e.g. MuslimReach
cool register), swap '%23166534' for the property's PRISM hex and keep
stroke-width/opacity/viewBox untouched. */
/* ─────────────────────────────────────────────────────────────────────────
5. THE KHATIM SEAL / PRICE PANEL — bordered, no-radius identity panel
───────────────────────────────────────────────────────────────────────── */
.umg-estate-panel {
border: 1.5px solid var(--ink);
/* live page: 30px 26px 24px — snapped to the 4px grid (32/24/24) */
padding: var(--space-8) var(--space-6) var(--space-6);
background: linear-gradient(180deg, var(--surface-tint), color-mix(in srgb, var(--surface-tint) 0%, transparent));
}
.umg-estate-panel-seal {
display: flex;
justify-content: center;
margin-bottom: var(--space-4);
}
.umg-estate-panel-label {
text-align: center;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--forest);
font-weight: 600;
}
.umg-estate-panel-price {
text-align: center;
font-family: var(--font-editorial-display);
font-weight: 500;
font-size: 56px;
line-height: 1;
margin: var(--space-2) 0 var(--space-1);
color: var(--ink);
}
.umg-estate-panel-price small {
font-size: 21px;
color: var(--ink-editorial);
font-style: italic;
}
.umg-estate-panel-caption {
text-align: center;
font-size: 12.5px;
color: var(--ink-editorial);
margin-bottom: var(--space-5);
line-height: 1.5;
}
.umg-estate-panel hr {
border: 0;
border-top: 1px solid var(--rule);
margin: var(--space-4) 0;
}
.umg-estate-panel-row {
display: flex;
justify-content: space-between;
font-size: 13.5px;
padding: var(--space-1) 0;
}
.umg-estate-panel-row-value { color: var(--forest); font-weight: 600; }
.umg-estate-panel-row-value--gold { color: var(--gold-text); font-weight: 600; }
/* ─────────────────────────────────────────────────────────────────────────
6. LEDGER CARD — the comparison/value-stack card. THE ONE card for
this voice (do not invent a second card recipe). Radius is the
editorial-sharp scale's large size (20px), not the master --radius-lg.
───────────────────────────────────────────────────────────────────────── */
.umg-estate-card {
background: var(--surface-raised, #FFFFFF);
border-radius: var(--radius-editorial-lg);
padding: var(--space-6) var(--space-8);
box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
.umg-estate-card { padding: var(--space-6); }
}
.umg-estate-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--rule-soft);
font-size: 14px;
}
.umg-estate-row:last-child { border-bottom: none; }
.umg-estate-row-value {
font-weight: 700;
font-size: 13px;
color: var(--ink-editorial-faint);
text-align: right;
flex-shrink: 1;
min-width: 0;
}
.umg-estate-row-value--included { color: var(--forest); font-weight: 700; }
/* Total row — the ledger's closing rule, double weight against the
otherwise-hairline row dividers */
.umg-estate-row--total {
border-top: 2px solid var(--ink);
border-bottom: none;
padding-top: var(--space-3);
margin-top: var(--space-1);
}
@media (max-width: 560px) {
/* Long comparison strings stack under the label rather than force
horizontal scroll or overlap at narrow widths. */
.umg-estate-row:has(.umg-estate-row-value) {
flex-direction: column;
align-items: flex-start;
gap: 3px; /* intentional sub-grid micro-gap, mobile label/price stack only */
}
.umg-estate-row:has(.umg-estate-row-value) .umg-estate-row-value {
text-align: left;
white-space: normal;
}
}
/* ─────────────────────────────────────────────────────────────────────────
7. BUTTON SPEC — the ONE primary/secondary pair for this voice.
SHARP corners (--radius-editorial-sm, 2px) — the deliberate deviation
from components.css's soft --umg-btn radius. Day = forest/ghost-link
per the master grammar. Night = gold-bright on void per the Jul 19
Night Primary Mandate (tokens.css) — /pricing has NO live example of
this; it is specified here from the mandate, see the README gap list.
───────────────────────────────────────────────────────────────────────── */
.umg-estate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: var(--space-4) var(--space-6) var(--space-4);
font-family: var(--font-editorial-body);
font-weight: 600;
font-size: 15.5px;
text-decoration: none;
border-radius: var(--radius-editorial-sm);
border: 1.5px solid transparent;
cursor: pointer;
transition: background-color var(--duration-base) var(--ease),
border-color var(--duration-base) var(--ease),
color var(--duration-base) var(--ease);
}
.umg-estate-btn:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 2px;
}
/* Day primary — forest fill, on --cream / --surface-tint */
.umg-estate-btn-primary {
background: var(--forest);
color: var(--cream);
border-color: var(--forest);
}
.umg-estate-btn-primary:hover {
background: var(--forest-deep);
border-color: var(--forest-deep);
}
/* Night primary — gold-bright fill, VOID SURFACES ONLY, per the Night
Primary Mandate. Apply data-umg-theme="void" (or nest inside a
.theme-void ancestor) alongside data-umg-voice="estate" to activate.
Do NOT use this on --cream/--surface-tint — gold is never a button
fill on a light surface, day or night. */
[data-umg-theme="void"] .umg-estate-btn-primary,
.theme-void .umg-estate-btn-primary {
background: var(--gold-bright);
color: var(--ink);
border-color: var(--gold-bright);
}
[data-umg-theme="void"] .umg-estate-btn-primary:hover,
.theme-void .umg-estate-btn-primary:hover {
background: var(--action-primary-hover);
border-color: var(--action-primary-hover);
}
/* Secondary — a quiet underlined text link, NOT a bordered ghost button.
This is the estate voice's own secondary pattern; it is intentionally
different from components.css's .umg-btn-secondary (which IS a
bordered ghost button) — editorial surfaces prefer restraint here. */
.umg-estate-btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-editorial-body);
font-weight: 500;
font-size: 14px;
text-decoration: none;
color: var(--ink-editorial);
border-bottom: 1px solid var(--rule);
padding-bottom: 2px;
transition: color var(--duration-base) var(--ease),
border-color var(--duration-base) var(--ease);
}
.umg-estate-btn-secondary:hover {
color: var(--forest);
border-color: var(--gold);
}
[data-umg-theme="void"] .umg-estate-btn-secondary,
.theme-void .umg-estate-btn-secondary {
color: var(--text-secondary);
border-color: var(--border-strong);
}
[data-umg-theme="void"] .umg-estate-btn-secondary:hover,
.theme-void .umg-estate-btn-secondary:hover {
color: var(--gold-bright);
border-color: var(--gold-bright);
}
/* ─────────────────────────────────────────────────────────────────────────
8. ACCORDION + CRESCENT GLYPH — the FAQ pattern
───────────────────────────────────────────────────────────────────────── */
.umg-estate-accordion-item {
border-top: 1px solid var(--rule);
}
.umg-estate-accordion-item:last-child {
border-bottom: 1px solid var(--rule);
}
.umg-estate-accordion-trigger {
width: 100%;
text-align: left;
padding: var(--space-5) 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
background: none;
border: none;
cursor: pointer;
font-family: var(--font-editorial-display);
font-weight: 500;
font-size: 16.5px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.3;
}
.umg-estate-accordion-panel {
padding-bottom: var(--space-5);
padding-right: var(--space-6); /* live page: 28px, exactly between space-6/24 and space-8/32 — rounded down */
font-size: 14px;
line-height: 1.6;
color: var(--ink-editorial-strong);
}
/* Crescent glyph — uses --gold-text (canonical AA glyph color), replacing
the three different ad-hoc golds the live page used for this same job
(see README gap list). currentColor so it inherits from this rule. */
.umg-estate-crescent {
display: inline-block;
flex-shrink: 0;
margin-top: 3px;
color: var(--gold-text);
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.umg-estate-crescent.is-open { transform: rotate(180deg); }
/* ─────────────────────────────────────────────────────────────────────────
9. SECTION RHYTHM — vertical spacing between the page's major beats.
All values are 4px-grid multiples (see README gap list for the handful
of live /pricing values — 15px, 22px, 26px, 30px, 38px — that are NOT).
───────────────────────────────────────────────────────────────────────── */
.umg-estate-section {
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--space-10);
}
@media (max-width: 860px) {
.umg-estate-section { padding: 0 var(--space-6); }
}
/* Pull-quote block — Fraunces italic, gold quote-mark ornament (large
decorative glyph; --gold at full brand saturation is acceptable here
because it is a >60px ornamental mark, not body text — see README
for the AA reasoning on when raw --gold vs --gold-text applies) */
.umg-estate-quote {
padding: var(--space-12) 0;
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--space-6); /* live page: 28px — no --space-7 token exists; rounded down */
align-items: start;
border-bottom: 1.5px solid var(--ink);
}
.umg-estate-quote-mark {
font-family: var(--font-editorial-display);
font-size: 84px;
line-height: 0.66;
color: var(--gold);
opacity: 0.55;
}
.umg-estate-quote p {
font-family: var(--font-editorial-display);
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 3vw, 32px);
line-height: 1.42;
max-width: 28ch;
color: var(--ink);
margin: 0;
}
.umg-estate-quote p b {
font-style: normal;
font-weight: 600;
color: var(--forest);
}
.umg-estate-quote-src {
margin-top: var(--space-4);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-editorial);
font-family: var(--font-editorial-body);
}
@media (max-width: 860px) {
.umg-estate-quote { grid-template-columns: 1fr; }
.umg-estate-quote-mark { display: none; }
}