/* * Symbol Consulting — UAE edition ("Regulatory dossier / advisory desk"). * Namespace: sae-. Logical properties ONLY (RTL-safe, since /ar/ is a first- * class edition of this site). Palette: Dubai-premium navy + brass, on paper. * No numbered-index, KPI-banner, ticker or founder-portrait patterns (deliberately * footprint rules) — this file intentionally never adopts them. */ :root { --sae-navy: #12293F; --sae-navy-2: #1B3A5B; --sae-brass: #B08945; --sae-brass-dark: #8C6B33; --sae-paper: #F7F4EE; --sae-paper-2: #EFE9DB; --sae-ink: #16202B; --sae-ink-soft: #4B5563; --sae-line: #D9D0BC; --sae-space-3xs: 0.25rem; --sae-space-2xs: 0.5rem; --sae-space-xs: 0.75rem; --sae-space-sm: 1rem; --sae-space-md: 1.5rem; --sae-space-lg: 2.25rem; --sae-space-xl: 3.5rem; --sae-space-2xl: 5rem; --sae-font-serif: Georgia, "Times New Roman", "PT Serif", serif; --sae-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* The brand class lands on itself (body_class filter), so it must be compounded — a descendant selector here would never match and the page would silently fall back to the base stylesheet's palette. */ body.brand-sym-ae { background: var(--sae-paper); color: var(--sae-ink); font-family: var(--sae-font-sans); } /* REMOVED 2026-07-20 (SYM-N2d): the RTL skip-link neutraliser. It compensated for the inlined family critical CSS parking the skip-link with a PHYSICAL left:-9999px while base.css used inset-inline-start — under dir="rtl" those resolved to opposite edges and stretched the link ~20000px. Core now parks it logically on all three branches (inc/brand.php 215/237/249), so the compensation is dead. Verified, not assumed: with the rules disabled via CSSOM on the live /ar/ page at 390px the overflow stayed 0 (it was 9999 before the core fix) and the skip-link measured 128px, not ~20000px. Deleted rather than left in place — a dead compensation rule reads as intent to whoever edits this skin next. */ .brand-sym-ae .wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--sae-space-md); } .brand-sym-ae a { color: inherit; } .brand-sym-ae :focus-visible { outline: 2px solid var(--sae-brass); outline-offset: 2px; } .brand-sym-ae [role="list"] { list-style: none; margin: 0; padding: 0; } /* --------------------------------------------------------------------- * Header: registry topbar + masthead + dossier nav * ------------------------------------------------------------------- */ .sae-topbar { background: var(--sae-navy); color: #C9D2DC; font-size: 0.75rem; letter-spacing: 0.04em; } .sae-topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 2.25rem; gap: var(--sae-space-sm); } .sae-topbar__lang { display: flex; gap: var(--sae-space-xs); } .sae-topbar__lang a, .sae-topbar__lang span { padding-inline: 2px; } .sae-topbar__lang [aria-current="true"] { color: var(--sae-brass); font-weight: 700; } .sae-masthead { background: var(--sae-paper); border-block-end: 1px solid var(--sae-line); } .sae-masthead__row { display: flex; align-items: center; gap: var(--sae-space-md); min-height: 4.5rem; padding-block: var(--sae-space-sm); flex-wrap: wrap; } .sae-wordmark { display: flex; align-items: center; gap: var(--sae-space-xs); text-decoration: none; } .sae-wordmark__text { font-family: var(--sae-font-serif); font-size: 1.25rem; font-weight: 700; color: var(--sae-navy); } .sae-masthead__tag { margin: 0; font-size: 0.85rem; color: var(--sae-ink-soft); padding-inline-start: var(--sae-space-md); border-inline-start: 1px solid var(--sae-line); flex: 1 1 auto; } .sae-masthead__cta { margin-inline-start: auto; } .sae-btn { display: inline-block; padding: 0.6em 1.2em; font-size: 0.9rem; font-weight: 600; border-radius: 2px; text-decoration: none; border: 1px solid transparent; } .sae-btn--primary { background: var(--sae-navy); color: #fff; border-color: var(--sae-navy); } .sae-btn--primary:hover { background: var(--sae-navy-2); } .sae-btn--secondary { background: transparent; color: var(--sae-navy); border-color: var(--sae-navy-2); } .sae-btn--secondary:hover { background: var(--sae-paper-2); } .sae-nav { background: var(--sae-navy); border-block-end: 3px solid var(--sae-brass); } .sae-nav .wrap { position: relative; } .sae-nav__items { display: flex; flex-wrap: wrap; gap: 0; } .sae-nav__items a { display: block; padding: 0.85em 1em; font-size: 0.85rem; color: #DDE3EA; text-decoration: none; white-space: nowrap; } .sae-nav__items a:hover, .sae-nav__items a[aria-current="page"] { color: var(--sae-brass); } .sae-nav__burger { display: none; } /* Visually hidden but focusable: display:none would drop the checkbox out of the tab order and leave the mobile menu unreachable without a mouse. */ .sae-nav__toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .sae-nav__toggle-label { display: none; } @media (max-width: 720px) { .sae-nav__toggle-label { display: flex; align-items: center; gap: var(--sae-space-2xs); padding: 0.75em 0; color: #DDE3EA; font-size: 0.85rem; cursor: pointer; } .sae-nav__toggle:focus-visible ~ .sae-nav__toggle-label { outline: 2px solid var(--sae-brass); outline-offset: 2px; } .sae-nav__items a { white-space: normal; } .sae-nav__burger { display: inline-block; width: 18px; height: 2px; background: var(--sae-brass); position: relative; } .sae-nav__burger::before, .sae-nav__burger::after { content: ""; position: absolute; inset-inline-start: 0; width: 18px; height: 2px; background: var(--sae-brass); } .sae-nav__burger::before { top: -6px; } .sae-nav__burger::after { top: 6px; } .sae-nav__items { display: none; flex-direction: column; padding-block-end: var(--sae-space-xs); } .sae-nav__toggle:checked ~ .sae-nav__items { display: flex; } } /* --------------------------------------------------------------------- * Hero + dossier card * ------------------------------------------------------------------- */ .sae-hero { background: linear-gradient(180deg, var(--sae-navy-2), var(--sae-navy)); color: #EEF2F6; padding-block: var(--sae-space-2xl); } .sae-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sae-space-xl); align-items: start; } .sae-eyebrow { margin: 0 0 var(--sae-space-2xs); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sae-brass); } /* base.css sets `h1,h2,h3,h4 { color: var(--nn-indigo) }` as an element rule, which beats the light colour inherited from a dark section — the headline ended up navy-on-navy at 1:1 contrast, i.e. invisible. Headings on the DARK bands (hero, method) must state their own colour; the contact band is paper, so it deliberately keeps the dark default. */ .sae-hero__headline, .sae-method h2 { color: #EEF2F6; } /* `.brand-sym-ae a { color: inherit }` (0-1-1) outranks the button rules (0-1-0), so filled buttons inherited the dark ink colour and rendered near-invisible on their navy fill. Same for the skip link, which is white text on navy only if the rule actually wins. */ .brand-sym-ae .sae-btn--primary, .brand-sym-ae .skip-link { color: #fff; } .brand-sym-ae .sae-btn--secondary { color: var(--sae-navy); } .brand-sym-ae .sae-hero .sae-btn--secondary { color: #EEF2F6; } .sae-hero__headline { margin: 0 0 var(--sae-space-md); font-family: var(--sae-font-serif); font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.2; font-weight: 700; } .sae-hero__sub { margin: 0 0 var(--sae-space-lg); max-width: 46ch; color: #C9D2DC; line-height: 1.6; } .sae-hero__actions { display: flex; gap: var(--sae-space-sm); flex-wrap: wrap; } .sae-hero .sae-btn--secondary { color: #EEF2F6; border-color: rgba(238, 242, 246, 0.5); } .sae-hero .sae-btn--secondary:hover { background: rgba(238, 242, 246, 0.08); } .sae-dossier { background: var(--sae-paper); color: var(--sae-ink); border: 1px solid var(--sae-brass); border-radius: 2px; padding: var(--sae-space-lg); } .sae-dossier__label { margin: 0 0 var(--sae-space-md); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sae-brass-dark); border-block-end: 1px solid var(--sae-line); padding-block-end: var(--sae-space-xs); } .sae-dossier__list { display: flex; flex-direction: column; gap: var(--sae-space-md); } .sae-dossier__row { padding-block-start: var(--sae-space-xs); border-block-start: 1px solid var(--sae-line); } .sae-dossier__row:first-child { border-block-start: none; padding-block-start: 0; } .sae-dossier__row dt { font-family: var(--sae-font-serif); font-weight: 700; font-size: 1rem; margin-block-end: var(--sae-space-3xs); } .sae-dossier__row dd { margin: 0; font-size: 0.9rem; color: var(--sae-ink-soft); line-height: 1.55; } @media (max-width: 900px) { .sae-hero__grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- * Section head, kicker, headline, meta — shared micro-typography * ------------------------------------------------------------------- */ .sae-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: var(--sae-space-md); border-block-end: 2px solid var(--sae-ink); padding-block-end: var(--sae-space-2xs); } .sae-section-head h2 { font-family: var(--sae-font-serif); font-size: 1.5rem; margin: 0; } .sae-kicker { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sae-brass-dark); margin-block-end: var(--sae-space-3xs); } .sae-headline { display: block; font-family: var(--sae-font-serif); font-weight: 700; line-height: 1.3; } .sae-headline--sm { font-size: 0.98rem; } .sae-dek { color: var(--sae-ink-soft); line-height: 1.6; } .sae-meta { display: block; font-size: 0.75rem; color: var(--sae-ink-soft); margin-block-start: var(--sae-space-3xs); } .sae-byline { font-size: 0.78rem; color: var(--sae-ink-soft); margin-block-start: var(--sae-space-xs); } /* --------------------------------------------------------------------- * Brief: lead + list front * ------------------------------------------------------------------- */ .sae-brief { padding-block: var(--sae-space-xl); } .sae-brief__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--sae-space-xl); } .sae-brief__lead a { text-decoration: none; display: block; } .sae-brief__figure { margin-block-end: var(--sae-space-sm); overflow: hidden; border-radius: 2px; aspect-ratio: 16 / 9; background: var(--sae-paper-2); } .sae-brief__figure img { width: 100%; height: 100%; object-fit: cover; } .sae-brief__lead .sae-headline { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-block-end: var(--sae-space-xs); } .sae-brief__list { display: flex; flex-direction: column; } .sae-brief__item { border-block-start: 1px solid var(--sae-line); } .sae-brief__item:first-child { border-block-start: none; } .sae-brief__item a { display: block; padding-block: var(--sae-space-sm); text-decoration: none; } @media (max-width: 900px) { .sae-brief__grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- * Lines: 4 horizontal advisory bands (SAE signature — not a grid/rooms) * ------------------------------------------------------------------- */ .sae-lines { border-block-start: 1px solid var(--sae-line); } .sae-line { border-block-end: 1px solid var(--sae-line); padding-block: var(--sae-space-lg); } .sae-line--alt { background: var(--sae-paper-2); } .sae-line__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sae-space-xl); align-items: start; } .sae-line__copy h3 { font-family: var(--sae-font-serif); font-size: 1.3rem; margin: 0 0 var(--sae-space-xs); } .sae-line__copy p { color: var(--sae-ink-soft); line-height: 1.6; margin: 0 0 var(--sae-space-sm); max-width: 42ch; } .sae-line__more { font-size: 0.85rem; font-weight: 600; color: var(--sae-navy-2); text-decoration: none; border-block-end: 1px solid var(--sae-brass); } .sae-line__posts { display: flex; flex-direction: column; gap: var(--sae-space-sm); } .sae-line__posts li { border-inline-start: 3px solid var(--sae-brass); padding-inline-start: var(--sae-space-sm); } .sae-line__posts a { display: block; text-decoration: none; } @media (max-width: 900px) { .sae-line__grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- * Method + Contact * ------------------------------------------------------------------- */ .sae-method { background: var(--sae-navy); color: #EEF2F6; padding-block: var(--sae-space-xl); } .sae-method__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sae-space-xl); } .sae-method h2 { font-family: var(--sae-font-serif); font-size: 1.4rem; margin: 0 0 var(--sae-space-sm); } .sae-method__lead { color: #C9D2DC; line-height: 1.6; max-width: 46ch; } .sae-method__sources { border-inline-start: 1px solid rgba(238, 242, 246, 0.25); padding-inline-start: var(--sae-space-lg); } .sae-method__list { color: var(--sae-brass); font-size: 0.9rem; line-height: 1.7; margin: 0 0 var(--sae-space-sm); } .sae-method__links { display: flex; gap: var(--sae-space-md); flex-wrap: wrap; } .sae-method__links a { font-size: 0.85rem; text-decoration: none; color: #EEF2F6; border-block-end: 1px solid var(--sae-brass); } @media (max-width: 800px) { .sae-method__grid { grid-template-columns: 1fr; } .sae-method__sources { border-inline-start: none; padding-inline-start: 0; border-block-start: 1px solid rgba(238, 242, 246, 0.25); padding-block-start: var(--sae-space-md); } } .sae-contact { background: var(--sae-paper-2); padding-block: var(--sae-space-xl); } .sae-contact__grid { display: flex; align-items: center; justify-content: space-between; gap: var(--sae-space-md); flex-wrap: wrap; } .sae-contact h2 { font-family: var(--sae-font-serif); font-size: 1.5rem; margin: 0; max-width: 32ch; } /* --------------------------------------------------------------------- * Footer * ------------------------------------------------------------------- */ .sae-trust { background: var(--sae-navy-2); color: var(--sae-brass); font-size: 0.78rem; } .sae-trust .wrap { min-height: 2.25rem; display: flex; align-items: center; } .sae-footer { background: var(--sae-navy); color: #C9D2DC; padding-block-start: var(--sae-space-xl); } .sae-footer__grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: var(--sae-space-xl); padding-block-end: var(--sae-space-lg); border-block-end: 1px solid rgba(238, 242, 246, 0.15); } .sae-foot-logo { height: 2rem; width: auto; color: #EEF2F6; margin-block-end: var(--sae-space-sm); } .sae-footer__desc { max-width: 44ch; line-height: 1.6; color: #C9D2DC; } .sae-footer__pub { font-size: 0.8rem; color: #93A0AE; } .sae-footer__label { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sae-brass); margin-block-end: var(--sae-space-sm); } .sae-footer__col ul { display: flex; flex-direction: column; gap: var(--sae-space-xs); } .sae-footer__col a { text-decoration: none; color: #DDE3EA; font-size: 0.9rem; } .sae-footer__col a:hover { color: var(--sae-brass); } .sae-footer__colophon { display: flex; justify-content: space-between; gap: var(--sae-space-md); flex-wrap: wrap; padding-block: var(--sae-space-md); font-size: 0.78rem; color: #93A0AE; } .sae-footer__disclaimer { max-width: 60ch; } @media (max-width: 900px) { .sae-footer__grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- * Mobile 390px baseline * ------------------------------------------------------------------- */ @media (max-width: 480px) { .brand-sym-ae .wrap { padding-inline: var(--sae-space-sm); } .sae-masthead__row { min-height: auto; } .sae-masthead__tag { border-inline-start: none; padding-inline-start: 0; flex-basis: 100%; order: 3; } .sae-masthead__cta { margin-inline-start: 0; } .sae-hero { padding-block: var(--sae-space-lg); } } /* --------------------------------------------------------------------- * RTL / Arabic tuning * ------------------------------------------------------------------- */ .brand-sym-ae:lang(ar), [dir="rtl"].brand-sym-ae { font-family: "IBM Plex Sans Arabic", var(--sae-font-sans); } :lang(ar) .sae-hero__headline, :lang(ar) .sae-headline, :lang(ar) .sae-dossier__row dt, :lang(ar) .sae-line__copy h3, :lang(ar) .sae-footer__label, :lang(ar) .sae-masthead__tag, :lang(ar) .sae-eyebrow { font-family: "IBM Plex Sans Arabic", var(--sae-font-sans); } :lang(ar) .sae-hero__sub, :lang(ar) .sae-dek, :lang(ar) .sae-dossier__row dd, :lang(ar) .sae-line__copy p, :lang(ar) .sae-method__lead, :lang(ar) .sae-footer__desc { line-height: 1.85; } :lang(ar) .sae-kicker, :lang(ar) .sae-meta, :lang(ar) .sae-byline { line-height: 1.7; } /* No directional overrides for RTL: every rule above is written with logical properties, which already resolve to the correct edge under dir="rtl". Re-flipping them here would push borders and padding back to the visual left on the Arabic half of the site. */ /* --------------------------------------------------------------------- * Article reshape (layout-b) — dossier-margin rail, brand classes only. * Core partial (single-layout-b.php) is not touched; only the shared * .article-* / .rail-* hooks it emits are restyled here for this brand. * ------------------------------------------------------------------- */ .brand-sym-ae.layout-b .article-title, .brand-sym-ae .layout-b .article-title { font-family: var(--sae-font-serif); color: var(--sae-navy); } .brand-sym-ae .article-head--rail .sae-kicker, .brand-sym-ae .article-head--rail .kicker { color: var(--sae-brass-dark); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .brand-sym-ae .article-rail { border-inline-start: 1px solid var(--sae-line); padding-inline-start: var(--sae-space-md); } .brand-sym-ae .rail-block { margin-block-end: var(--sae-space-lg); } .brand-sym-ae .rail-section .kicker { background: var(--sae-paper-2); border: 1px solid var(--sae-brass); display: inline-block; padding: 0.3em 0.7em; font-size: 0.7rem; } .brand-sym-ae .rail-related__head { font-family: var(--sae-font-serif); font-size: 1rem; border-block-end: 2px solid var(--sae-ink); padding-block-end: var(--sae-space-2xs); } .brand-sym-ae .rail-related__item { border-block-start: 1px solid var(--sae-line); padding-block: var(--sae-space-xs); } .brand-sym-ae .article-body a { color: var(--sae-navy-2); text-decoration-color: var(--sae-brass); } /* ============================================================================ * Contact form — sy-contact (shared Symbol DOM, SAE corporate skin) * ---------------------------------------------------------------------------- * Markup: template-parts/contact-form-symbol.php (gated in via * template-parts/page-extras-symbol.php). The SAME DOM is painted by the SSK * stylesheet in its own idiom; here it is the SAE brass-on-navy idiom. This skin * shares only the POST contract to inc/contact.php with the other editions of the * network. All selectors scoped under .brand-sym-ae; logical properties * throughout so the ar/RTL edition mirrors correctly. * ========================================================================== */ .brand-sym-ae .sy-contact { margin-block-start: var(--sae-space-xl); border-block-start: 1px solid var(--sae-line); padding-block-start: var(--sae-space-lg); } /* Pure PRG scroll target (handler hard-codes #rk-contact-form): zero-box, no ink. */ .brand-sym-ae .sy-contact__anchor { display: block; block-size: 0; overflow: hidden; } .brand-sym-ae .sy-contact__inner { max-inline-size: 62ch; } .brand-sym-ae .sy-contact__title { font-family: var(--sae-font-serif); font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--sae-space-xs); color: var(--sae-navy); } .brand-sym-ae .sy-contact__intro { color: var(--sae-ink-soft); margin: 0 0 var(--sae-space-md); } /* Status banner (aria-live). */ .brand-sym-ae .sy-contact__status { background: var(--sae-paper-2); border: 1px solid var(--sae-line); border-inline-start-width: 3px; padding: var(--sae-space-xs) var(--sae-space-sm); margin-block-end: var(--sae-space-md); } .brand-sym-ae .sy-contact__status p { margin: 0; } .brand-sym-ae .sy-contact__status--ok { border-inline-start-color: var(--sae-brass); } .brand-sym-ae .sy-contact__status--error { border-inline-start-color: #B22C1F; } /* Fields */ .brand-sym-ae .sy-field { margin-block-end: var(--sae-space-sm); } .brand-sym-ae .sy-field__label { display: block; font-family: var(--sae-font-sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sae-ink-soft); margin-block-end: var(--sae-space-2xs); } .brand-sym-ae .sy-field__control { inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; font-family: var(--sae-font-serif); font-size: 1rem; color: var(--sae-ink); background: #fff; border: 1px solid var(--sae-line); border-radius: 2px; padding: var(--sae-space-2xs) var(--sae-space-xs); } .brand-sym-ae .sy-field__control:focus-visible { outline: 2px solid var(--sae-brass); outline-offset: 1px; border-color: var(--sae-brass-dark); } .brand-sym-ae textarea.sy-field__control { resize: vertical; min-block-size: 8rem; } .brand-sym-ae .sy-field--check { display: flex; align-items: flex-start; gap: var(--sae-space-2xs); } .brand-sym-ae .sy-field--check label { font-size: 0.9375rem; color: var(--sae-ink-soft); } .brand-sym-ae .sy-field__check { margin-block-start: 0.2em; flex: 0 0 auto; } .brand-sym-ae .sy-req { color: #B22C1F; } .brand-sym-ae .sy-field__err { display: block; color: #B22C1F; font-size: 0.8125rem; margin-block-start: var(--sae-space-3xs); } .brand-sym-ae .sy-field__control[aria-invalid="true"] { border-color: #B22C1F; } /* Honeypot: out of view + a11y tree + tab order (bots fill it -> silent drop). Clip technique, NOT left:-9999px — the latter scrolls RTL (the ar edition). */ .brand-sym-ae .sy-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .brand-sym-ae .sy-contact__actions { margin-block-start: var(--sae-space-md); } .brand-sym-ae .sy-contact__submit { font-family: var(--sae-font-sans); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--sae-navy); border: 1px solid var(--sae-navy); border-radius: 2px; padding: var(--sae-space-xs) var(--sae-space-lg); cursor: pointer; } .brand-sym-ae .sy-contact__submit:hover { background: var(--sae-navy-2); border-color: var(--sae-navy-2); } .brand-sym-ae .sy-contact__submit:focus-visible { outline: 2px solid var(--sae-brass); outline-offset: 2px; }