/* ============================================================ ARABTECH — DESIGN TOKENS Direction: MODERN CORPORATE B2B (client choice, 2026-08-30). White and a cool tinted neutral carry the page; deep teal is the calm secondary that owns navigation, figures and the footer; the brand red appears as chip dots, rules and the primary button, darkened to #C1141F so white type clears AA. ------------------------------------------------------------ WORDPRESS NOTE. Every token below is defined FROM the matching theme.json preset with the comp's literal as the fallback: --teal: var(--wp--preset--color--teal, #0F4C5C); The token names stay the API that components.css and chrome.css speak, but editing Global Styles now actually moves the design instead of being silently overridden by this file. Where a token has no preset counterpart (the mid-ramp greys, the motion curves, --page-max) the literal stands alone — that is deliberate, not an omission. ============================================================ */ /* ============================================================ SELF-HOSTED FACES Every src below is same-origin; the theme makes no request to the Google font CDN at all. Serving from it would send every visitor's IP to Google, and the cross-site font cache that once justified the trade-off no longer exists. Google publishes these three families as VARIABLE fonts only — the css2 API returns one identical file for wght@700 and wght@800 of Red Hat Display, and likewise for every weight of the other two. So each family ships as one file per unicode-range, declared over the weight range the design actually uses. Shipping a file per weight would mean downloading the same bytes twice. Split by unicode-range so the Arabic file is fetched only when Arabic glyphs are painted. U+200C-200E and U+25CC stay on the ARABIC side: ZWNJ/ZWJ and the dotted circle drive Arabic shaping, and letting the Latin file claim them breaks isolated forms. ============================================================ */ /* ---- Red Hat Display — display/headings, 700 and 800 ---- */ @font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/red-hat-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; } /* ---- Source Sans 3 — body, 400 / 600 / 700 ---- */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; } /* ---- Readex Pro — Arabic + the Latin technical strings inside it ---- An Arabic page is saturated with Latin ratings and standard references, so the Latin file is not optional there; both are preloaded by arabtech_preload_fonts() when is_rtl(). */ @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/readex-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/readex-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+25CC; } :root { /* ---- Brand, sampled from the client's logo guidelines ---- */ --at-red: var(--wp--preset--color--red, #F01B28); /* the marque red — accents, dots, rules */ --at-black: #000000; --at-graphite: #58575C; --at-white: var(--wp--preset--color--white, #FFFFFF); /* ---- Direction palette ---- */ --bg: var(--wp--preset--color--white, #FFFFFF); --bg-2: var(--wp--preset--color--tint, #F3F7F8); /* calm tinted surface */ --bg-3: var(--wp--preset--color--tint-2, #E7EFF1); --line: var(--wp--preset--color--line, #DCE6E9); --teal: var(--wp--preset--color--teal, #0F4C5C); /* calm secondary */ --teal-d: var(--wp--preset--color--teal-deep, #0A3742); --teal-l: var(--wp--preset--color--teal-light, #E3EEF1); --red-d: var(--wp--preset--color--red-deep, #C1141F); /* red as a type or button surface */ /* ---- Neutral ramp ---- The six steps that have a palette entry are wired to it; the in-between steps exist only inside components and stay literal. */ --gr-950:#0A1216; --gr-900: var(--wp--preset--color--ink, #14262C); --gr-850:#1B3038; --gr-800:#24404A; --gr-700: var(--wp--preset--color--body, #3E4C52); --gr-650:#4A585E; --gr-600: var(--wp--preset--color--mute, #5C6B71); --gr-500:#7C8A90; --gr-400:#9BA8AD; --gr-300:#B9CFD6; --gr-200: var(--wp--preset--color--line, #DCE6E9); --gr-150: var(--wp--preset--color--tint-2, #E7EFF1); --gr-100: var(--wp--preset--color--tint, #F3F7F8); --gr-050:#FAFCFC; --red-700:#8E0F17; --red-600: var(--wp--preset--color--red-deep, #C1141F); --red-500: var(--wp--preset--color--red, #F01B28); --red-300:#F98089; --red-100:#FDE1E3; /* ---- Semantic roles ------------------------------------------------ CONTRAST LEDGER (computed, WCAG 2.1): --ink #14262C on white = 15.6:1 AAA --body #3E4C52 on white = 8.9:1 AAA --mute #5C6B71 on white = 5.5:1 AA --teal #0F4C5C on white = 9.5:1 AAA white on --teal #0F4C5C = 9.5:1 AAA white on --red-d #C1141F = 6.2:1 AA <- the button white on --at-red #F01B28 = 4.3:1 FAILS — never used black on --at-red #F01B28 = 4.9:1 AA Global Styles can move these; the ledger is the reason not to. ------------------------------------------------------------------ */ --ground: var(--bg); --sheet: var(--at-white); --sheet-tint: var(--bg-2); --ink: var(--wp--preset--color--ink, #14262C); --ink-secondary: var(--wp--preset--color--body, #3E4C52); --ink-tertiary: var(--wp--preset--color--mute, #5C6B71); /* ---- Rules ---- */ --rule-hair: 1px; --rule-thin: 1px; --rule-med: 1px; --rule-heavy: 2px; --rule-ink: var(--line); --rule-quiet: var(--line); /* ---- Radius — this world is rounded ---- */ --r-lg: var(--wp--preset--radius--lg, 18px); --r-md: var(--wp--preset--radius--md, 12px); --r-sm: var(--wp--preset--radius--sm, 8px); --r-pill: var(--wp--preset--radius--pill, 999px); /* ---- Type ---------------------------------------------------------- Red Hat Display for headings against Source Sans 3 for body — an approachable humanist pairing with open counters. Arabic runs on Readex Pro. There is no monospace in this world: numbers are set in the text face with tabular figures, which is why --font-tech resolves to the same preset as --font-body. ------------------------------------------------------------------ */ --font-display: var(--wp--preset--font-family--display, "Red Hat Display", "Trebuchet MS", Verdana, sans-serif); --font-body: var(--wp--preset--font-family--text, "Source Sans 3", "Segoe UI", Tahoma, Geneva, sans-serif); --font-tech: var(--wp--preset--font-family--text, "Source Sans 3", "Segoe UI", Tahoma, sans-serif); --font-arabic: var(--wp--preset--font-family--arabic, "Readex Pro", system-ui, sans-serif); --t-display-1: var(--wp--preset--font-size--display, clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem)); --t-display-2: clamp(1.875rem, 1.3rem + 2.4vw, 2.85rem); --t-h1: var(--wp--preset--font-size--h1, clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem)); --t-h2: var(--wp--preset--font-size--h2, clamp(1.4rem, 1.15rem + 1.2vw, 1.95rem)); --t-h3: var(--wp--preset--font-size--h3, clamp(1.125rem, 1.05rem + 0.35vw, 1.1875rem)); --t-body-lg: var(--wp--preset--font-size--lede, 1.1875rem); --t-body: var(--wp--preset--font-size--body, 1.0625rem); --t-small: var(--wp--preset--font-size--small, 0.9375rem); --t-micro: var(--wp--preset--font-size--micro, 0.875rem); --t-nano: var(--wp--preset--font-size--nano, 0.75rem); --lh-tight: 1.15; --lh-snug: 1.25; --lh-normal: 1.62; --lh-loose: 1.7; --tr-display: -0.025em; --tr-tight: -0.015em; --tr-normal: 0; --tr-label: 0.09em; --tr-tech: 0; /* ---- Space ---- The eight steps that exist as spacingSizes are wired to them. The half-steps the comps use (0.75rem, 1.25rem, 2.5rem, 5rem and up) have no preset and stay literal. */ --s-1: var(--wp--preset--spacing--10, 0.25rem); --s-2: var(--wp--preset--spacing--20, 0.5rem); --s-3: 0.75rem; --s-4: var(--wp--preset--spacing--30, 1rem); --s-5: 1.25rem; --s-6: var(--wp--preset--spacing--40, 1.5rem); --s-8: var(--wp--preset--spacing--50, 2rem); --s-10: 2.5rem; --s-12: var(--wp--preset--spacing--60, 3rem); --s-16: var(--wp--preset--spacing--70, 4rem); --s-20: 5rem; --s-24: var(--wp--preset--spacing--80, 6rem); --s-32: 8rem; --s-40: 10rem; --sheet-pad: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); --sheet-gutter: clamp(1.125rem, 0.5rem + 2vw, 3rem); --measure: 68ch; --page-max: 78rem; /* the shell; layout.wideSize is 84rem and is a different measurement, so not wired to it */ /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur: 240ms; --dur-slow: 460ms; /* ---- Depth — a soft card shadow, not a hard rule ---- */ --sh: var(--wp--preset--shadow--card, 0 1px 2px rgba(20,38,44,.05), 0 8px 24px -12px rgba(20,38,44,.18)); --lift-sheet: var(--sh); --lift-raise: var(--wp--preset--shadow--raise, 0 2px 6px rgba(20,38,44,.08), 0 18px 40px -16px rgba(20,38,44,.28)); } /* The measure has to be re-declared here rather than on :root. WordPress emits the palette, size and spacing presets on :root, but it emits --wp--style--global--content-size on BODY, and a custom property set on body is invisible to a var() on :root — wiring --measure up there would silently pin it to the 68ch fallback and Global Styles' content width would stop moving the prose. */ body, .editor-styles-wrapper { --measure: var(--wp--style--global--content-size, 68ch); } /* Arabic runs slightly larger with more leading and zero tracking — letter-spacing severs the cursive joins. */ :lang(ar), [dir="rtl"] { --font-display: var(--wp--preset--font-family--arabic, "Readex Pro", system-ui, sans-serif); --font-body: var(--wp--preset--font-family--arabic, "Readex Pro", system-ui, sans-serif); --font-tech: var(--wp--preset--font-family--arabic, "Readex Pro", system-ui, sans-serif); --tr-display: 0; --tr-tight: 0; --tr-label: 0; --tr-tech: 0; --lh-tight: 1.35; --lh-snug: 1.5; --lh-normal: 1.85; }