/* Fusion Relocations — Design Tokens (extracted from live site fusionrelocations.ae, 2026-07-07) Source of truth: --fr-* custom properties found in production CSS. TYPE UPDATE (2026-07-08): brand type is Bricolage Grotesque (display) + Onest (body), replacing the site's Cormorant Garamond + Outfit. @font-face declarations below. */ :root { /* Brand color */ --fr-navy-deep: #1a2740; --fr-navy: #2B3B59; --fr-navy-light: #3a4f74; --fr-gold: #B88A48; --fr-gold-light: #d4a85c; /* #8D5C33, was #996338 — 4.45:1 on the warm cream tint missed AA. */ --fr-gold-dark: #8D5C33; --fr-cream: #EFE8DA; --fr-cream-light: #f8f4ee; --fr-white: #ffffff; --fr-blue: #4CA6E1; /* #667080, was #8A94A3 — 3.06:1 on white (breadcrumbs, eyebrows). */ --fr-grey: #667080; /* #5F6774, was #6b7280 — 4.41:1 on the cream ground failed WCAG AA by a hair; this keeps the tone and clears 5.2:1. */ --fr-body-text: #5F6774; /* Type */ --fr-font-display: "Hanken Grotesk", system-ui, sans-serif; --fr-font-body: "Onest", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --fr-container: 1560px; /* Spacing */ --fr-space-xs: 8px; --fr-space-sm: 16px; --fr-space-md: 32px; --fr-space-lg: 64px; --fr-space-xl: 100px; /* Radius */ --fr-radius-xs: 2px; --fr-radius-sm: 3px; --fr-radius-md: 6px; --fr-radius-lg: 12px; /* Elevation */ --fr-shadow-navy: 0 8px 28px rgba(43,59,89,.15); --fr-shadow-lg: 0 20px 60px rgba(43,59,89,.2); --fr-shadow-gold: 0 8px 28px rgba(184,138,72,.35); --fr-shadow-gold-lg: 0 14px 40px rgba(184,138,72,.5); /* Motion */ --fr-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --fr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --fr-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* Z-index */ --fr-z-base: 1; /* @kind other */ --fr-z-raised: 5; /* @kind other */ --fr-z-overlay: 10; /* @kind other */ --fr-z-modal: 100; /* @kind other */ --fr-z-nav: 200; /* @kind other */ } /* ── Brand webfonts ────────────────────────────────────────────────────────── Brand type updated 2026-07-08: Bricolage Grotesque (display, variable 200–800) + Onest (body, variable 100–900), replacing Cormorant Garamond + Outfit. SELF-HOSTED (2026-07-27): both variable woff2 files are served from assets/fonts/ and preloaded in by functions.php. No request ever leaves for fonts.googleapis.com or fonts.gstatic.com — that removes two third-party connections from the critical path and keeps visitor IPs off Google's CDN. */ @font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Onest"; src: url("fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── theme runtime rules ── */ fr-if { display: contents; } fr-if[hidden] { display: none !important; } html { scroll-behavior: smooth; } body.fr-page { margin: 0; } /* keep the WP admin bar from overlapping the fixed header on dev */ body.admin-bar #fr-header { top: 32px; } /* ── Mobile menu + overlay layout fixes (theme additions) ── */ #fr-mobilemenu { position: fixed; inset: 0; z-index: 9999; background: var(--fr-white); padding: 92px 22px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #fr-mobilemenu details { border-bottom: 1px solid rgba(43,59,89,.12); } #fr-mobilemenu summary { font: 600 17px/1 var(--fr-font-body); color: var(--fr-navy-deep); padding: 16px 0; display: flex; justify-content: space-between; align-items: center; } #fr-mobilemenu summary::after { content: "+"; color: var(--fr-gold); font-size: 20px; } #fr-mobilemenu details[open] summary::after { content: "–"; } .fr-mm-links { display: flex; flex-direction: column; padding: 0 0 14px; } .fr-mm-links a { font: 400 15px/1.4 var(--fr-font-body); color: var(--fr-navy); text-decoration: none; padding: 9px 0 9px 14px; } .fr-mm-flat { border-bottom: 1px solid rgba(43,59,89,.12); padding: 10px 0 14px; } .fr-mm-flat a { padding-left: 0; font-weight: 500; color: var(--fr-navy-deep); } .fr-mm-cta { display: flex; gap: 10px; margin-top: 20px; } .fr-mm-cta a { flex: 1; text-align: center; padding: 14px 8px; border-radius: var(--fr-radius-md); font: 600 13px/1 var(--fr-font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--fr-navy); color: var(--fr-navy-deep); } .fr-mm-cta .fr-mm-quote { border: 0; background: linear-gradient(135deg, var(--fr-gold-light), var(--fr-gold)); color: var(--fr-navy-deep); box-shadow: var(--fr-shadow-gold); } /* Sub-384px header fit. The logo (136px) plus the CTA-and-burger cluster (202px) plus gutters overflow a 360px viewport by ~26px — every page gained a horizontal scroll on small Androids. Targets the stable ids, not the generated frs-* classes, which differ per template. */ @media (max-width: 384px) { #fr-mainrow { gap: 8px; } #fr-logo { height: 38px !important; } #fr-mainrow > div:last-child { gap: 8px; } #fr-mainrow > div:last-child > a:first-child { padding: 10px 12px; font-size: 11.5px; letter-spacing: .04em; } #fr-mainrow > div:last-child > a:first-child svg { display: none; } } @media (max-width: 782px) { /* overlay policy: nothing may cover the sticky action bar or each other */ body.fr-page { padding-bottom: 66px; } #fr-consent { bottom: 78px !important; left: 12px !important; width: min(300px, calc(100vw - 96px)) !important; font-size: 12.5px !important; padding: 12px 14px !important; } #fr-wa-bubble { bottom: 78px !important; right: 12px !important; width: 48px !important; height: 48px !important; } } /* ── Consent + form feedback ────────────────────────────────────────────── The consent control is injected by the converter (the design system has no equivalent yet — see convert-ds-to-theme.py). Styled from DS tokens only. */ .fr-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font: 400 12.5px/1.5 var(--fr-font-body); color: var(--fr-body-text); cursor: pointer; } .fr-consent input { margin-top: 2px; accent-color: var(--fr-gold); flex: none; } .fr-consent a { color: var(--fr-gold-dark); font-weight: 600; } .fr-form-error { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--fr-radius-md); background: #FDEAEA; color: #B30000; font: 500 13px/1.45 var(--fr-font-body); } /* Keyboard focus. The design system's style-focus rules are compiled into fusion-generated.css; this is the site-wide default for anything without one. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--fr-gold); outline-offset: 2px; border-radius: var(--fr-radius-xs); } /* ── Image slots ────────────────────────────────────────────────────────── fr_image_slot() renders these. They must cover their frame exactly as the design system's own slot markup did — without this the hero photo renders at its intrinsic width and leaves a gap at wide viewports. */ .fr-slot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Gold accent on the second half of a hero headline — the design system's two-tone H1, preserved now that the text itself is dynamic. */ .fr-h1-accent { color: var(--fr-gold-dark); font-style: normal; } /* ── Breadcrumbs ────────────────────────────────────────────────────────── inc/seo.php emits a