/** * wyg-css-global * * WHAT: The small set of styles Elementor has no control for and that must be * true on every page -- the focus ring, the skip link's visible state, the * reduced-motion honoring, and an opt-in prose measure. * * WHY IT IS THIS SHORT: layout, spacing and typography are Elementor's job on * this project, and Elementor mirrors them for RTL on its own. Hand-written CSS * is only for the residue Elementor exposes no control for. Everything below is * in that residue, and the logical-property rule applies to it. * * .screen-reader-text is deliberately NOT redefined here. Hello Elementor * defines it, and its :focus state, in assets/css/theme.css -- verified loading * on a publication single 2026-08-10. Two definitions of the same visually-hidden * class is how one of them quietly stops matching. */ /* -------------------------------------------------------------------------- 0. Type tokens The only font the site names in CSS. Everything else is Elementor's, set in Site Settings, and must stay there. -------------------------------------------------------------------------- */ /* * The monospace face, as one token rather than a stack repeated per component. * * The design uses monospace in 92 distinct components -- eyebrows, section * labels, figure and hero captions, publication metadata, quote kickers and * citations -- so this will be referenced from many component snippets. Naming * the family in each of them is how a type change becomes a search-and-replace. * * Elementor's font control cannot express a stack, and its Google Fonts loader * fetches every weight of a family; the face itself is therefore loaded by * wyg-fonts-mono at 400 and 600 only. The fallbacks below are what render * during the swap and if Google Fonts is unreachable. None of them covers * Hebrew or Arabic, and neither does the Latin subset being loaded, so mono is * a Latin-only texture on this site -- see wyg-fonts-mono. */ :root { --wyg-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } /* -------------------------------------------------------------------------- 1. Focus ring Dark Red at 3px with 3px of offset, on everything interactive. :focus-visible rather than :focus so a mouse click does not draw a ring, but every keyboard arrival does. The second rule stops browsers that support both from drawing the ring twice. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 3px solid #925038; outline-offset: 3px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 2. Skip link The link itself is emitted by wyg-skip-link. Hidden until focused, then it becomes the first visible thing on the page. Positioned with logical properties so it lands top-right in Hebrew and Arabic rather than top-left. -------------------------------------------------------------------------- */ .skip-link:focus { background-color: #325163; color: #F4F1EC; clip: auto !important; clip-path: none; display: block; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; block-size: auto; inline-size: auto; inset-inline-end: auto; font-size: 1rem; line-height: normal; padding: 0.75rem 1.25rem; text-decoration: none; z-index: 100000; } /* -------------------------------------------------------------------------- 2c. Anchor scrolling [wyg-anchor-scroll] Elementor core ships @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} in its own custom-frontend stylesheet. Smooth scrolling was never chosen for this design, and on this build it did not merely animate the jump -- it prevented it. Every in-page anchor on the site was dead: the URL changed and :target matched, but the page never moved. Measured 2026-08-19 on publications 286 and 304, and on the skip link, which is an accessibility control and must work. :root rather than html -- same element, 0,1,0 against Elementor's 0,0,1, so this wins on specificity rather than on stylesheet load order. Section 3 below does NOT cover this: it sets scroll-behavior only inside prefers-reduced-motion: reduce, which is the opposite media query to Elementor's. -------------------------------------------------------------------------- */ :root { scroll-behavior: auto; } /* -------------------------------------------------------------------------- 3. Reduced motion The approved design has no scroll-triggered fades and none are to be added. This covers whatever Elementor, Unlimited Elements or a plugin brings with it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 4. Prose measure Opt-in, not automatic. Add the class wyg-measure to an Elementor container or text widget to cap its line length at 60 characters against the 1400px shell. Deliberately not applied to body copy site-wide: the approved mockups set their own column widths, and a blanket cap would fight them. -------------------------------------------------------------------------- */ .wyg-measure, .wyg-measure > .elementor-widget-container { max-inline-size: 60ch; } .wyg-measure-center { margin-inline: auto; } /* -------------------------------------------------------------------------- Form fields: restore the focus ring Elementor Pro removes Added 2026-08-19 (HO-34). Sitewide, not per form, at Todd's call. -------------------------------------------------------------------------- */ /* Elementor Pro's frontend stylesheet ships .elementor-field-group .elementor-field-textual:focus { outline: 0 } which beats the general :focus-visible ring above it in this file and removes it outright -- so before this rule existed, a keyboard user tabbing through the contact form got no visible focus indicator on any field at all. That is an accessibility regression the plugin introduces, not a styling choice, and it applies to every Elementor form on the site rather than to one page. Specificity: Elementor's rule is 0,3,0 counting the pseudo-class. Adding the widget class takes this to 0,4,0, so it wins on specificity rather than on load order -- which matters because the plugin's stylesheet is enqueued after the snippet stylesheets and would otherwise take a tie. :focus-visible rather than :focus, deliberately: a mouse click on a field should not paint a 3px ring, a keyboard arrival should. */ .elementor-widget-form .elementor-field-group .elementor-field-textual:focus-visible { outline: 3px solid var( --e-global-color-accent ); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 5. Hebrew and Arabic type substitution Added 2026-08-19 (HO-38). THIS IS THE MECHANISM architecture.md §3b refers to. It was documented as living in §8 of that file and had never actually been built -- /he/ and /ar/ rendered in Nunito Sans, which has no coverage for either script, so both languages fell through to whatever font the reader's operating system happened to supply. WHY IT IS ALL CUSTOM PROPERTIES AND ONE BLANKET RULE, and not a pile of component overrides: Every font-family Elementor emits -- the kit, the per-post stylesheets and the per-element rules alike -- is written as `font-family: var( --e-global-typography--font-family ), Sans-serif`. Verified 2026-08-19 by reading uploads/elementor/css/post-6.css: there is not one literal family name in the generated CSS. Redefining those custom properties under a language selector therefore switches the entire system at once, at every specificity level, with no cascade fight -- including the 0,6,0 per-element rules that would otherwise be unreachable (page-build-conventions.md §5a). The same is true of `--wyg-mono` in §0 above, which is what all 92 mono components read. The language axis is `lang`, not `dir`. Both are RTL, and they need DIFFERENT faces; a `[dir="rtl"]` selector would give Hebrew the Arabic font. Layout mirroring is the `dir` axis and lives with the components. Measured on the rendered pages 2026-08-19: WPML emits `lang="he-IL"` on Hebrew and `lang="ar"` on Arabic -- one carries a region subtag and the other does not, which is why these are prefix matches and not `=`. -------------------------------------------------------------------------- */ /* 5a. Hebrew -- Heebo, with Nunito Sans behind it. Heebo ships here as the HEBREW SUBSET ONLY (wyg-fonts-hebrew), so any Latin run inside Hebrew text -- an author's name, a citation, a numeral -- finds no glyph in Heebo and falls through to Nunito Sans, the site's own face. That is deliberate: Heebo's own Latin is Roboto's Latin, which this site does not use anywhere else. */ html[lang^="he"] body { --e-global-typography-primary-font-family: "Heebo", "Nunito Sans"; --e-global-typography-secondary-font-family: "Heebo", "Nunito Sans"; --e-global-typography-text-font-family: "Heebo", "Nunito Sans"; --e-global-typography-accent-font-family: "Heebo", "Nunito Sans"; --e-global-typography-1c3ea07a-font-family: "Heebo", "Nunito Sans"; --e-global-typography-fd54d4a4-font-family: "Heebo", "Nunito Sans"; --e-global-typography-a66c1ed1-font-family: "Heebo", "Nunito Sans"; --e-global-typography-95a228b0-font-family: "Heebo", "Nunito Sans"; --e-global-typography-e3bb4445-font-family: "Heebo", "Nunito Sans"; --e-global-typography-922575d2-font-family: "Heebo", "Nunito Sans"; --e-global-typography-26bf3228-font-family: "Heebo", "Nunito Sans"; } /* 5b. Arabic -- Noto Sans Arabic, with Nunito Sans behind it, same reasoning. */ html[lang^="ar"] body { --e-global-typography-primary-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-secondary-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-text-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-accent-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-1c3ea07a-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-fd54d4a4-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-a66c1ed1-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-95a228b0-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-e3bb4445-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-922575d2-font-family: "Noto Sans Arabic", "Nunito Sans"; --e-global-typography-26bf3228-font-family: "Noto Sans Arabic", "Nunito Sans"; } /* 5c. Mono is a Latin-only texture. Todd's decision, 2026-08-19 -- Option 2 of the three put to Gabi and David in mockups/rtl-type-decisions.html. IBM Plex Mono has no Hebrew or Arabic coverage, and neither does any face in its fallback stack, so before this rule the byline, the theme list, the metadata chips and every section label on /he/ rendered in a generic monospace fallback at 0.08-0.12em tracking. In Hebrew that reads like a telex; `text-transform: uppercase` also does nothing in either script, so half the treatment was already inert. Redefining the token rather than the 92 components that read it is the whole reason §0 defines it as a token. If the client comes back choosing Option 1, deleting these two rules restores the previous behaviour exactly. */ html[lang^="he"] { --wyg-mono: "Heebo", "Nunito Sans", sans-serif; } html[lang^="ar"] { --wyg-mono: "Noto Sans Arabic", "Nunito Sans", sans-serif; } /* 5d. No letter-spacing in Hebrew or Arabic, anywhere. Todd's call 2026-08-19, widening Option 2's "tracking reset to 0" from the mono components to the whole document. Two separate problems, one answer: - POSITIVE tracking, 0.03em to 0.14em, on the mono components. Hebrew does not letter-space for emphasis; the convention does not exist in the script, and spaced Hebrew reads as damage rather than as emphasis. - NEGATIVE tracking, -0.018em from WYG / Heading and -0.02em from WYG / Display, plus -0.005em to -0.012em set locally on the homepage. Measured on /ar/ 2026-08-19: the h1 computed -1.08px and the cursive joins visibly compressed. Arabic is a joining script -- any tracking, in either direction, works against the connections between letters rather than against the space around them. `!important` is deliberate and is the honest tool here. The two typography globals that carry tracking are reachable by redefining their custom properties (done immediately below, so the value is correct in the cascade and not merely overridden). What is NOT reachable that way is the tracking hardcoded in six component snippets at 0,3,0 and, worse, set locally on widgets in eight live documents -- homepage 116/376/380, Contact 120, footer 332 and publication card 370/382/384 -- which Elementor emits as per-element rules at up to 0,6,0. Reaching those from a language selector on `html` without `!important` would mean a universal selector repeated to 0,7,0, which would win the same argument while being unreadable. There is no legitimate letter-spacing in these two languages for this to trample. */ html[lang^="he"] body, html[lang^="ar"] body { --e-global-typography-922575d2-letter-spacing: normal; --e-global-typography-26bf3228-letter-spacing: normal; } html[lang^="he"] body, html[lang^="he"] body *, html[lang^="he"] body *::before, html[lang^="he"] body *::after, html[lang^="ar"] body, html[lang^="ar"] body *, html[lang^="ar"] body *::before, html[lang^="ar"] body *::after { letter-spacing: normal !important; } /* -------------------------------------------------------------------------- 5e. Weight carries the emphasis. Added 2026-08-19 (HO-39), client-approved 19 August against the options put in mockups/rtl-type-decisions.html. Option 2's own wording was "emphasis is carried by weight instead" -- HO-38 built the mono-is-Latin-only half and flagged this half rather than deciding it (its section 4a): bumping a weight is a design call, not a mechanical substitution like sections 5a-5d above. ONE token, read by the component rules that already carry --wyg-mono -- section labels, bylines, metadata chips, the theme list, form labels -- the same five categories in the mockup's own "accent typeface" table. Each of those rules writes `font-weight: var( --wyg-label-weight, )`. Undefined here for English (and any future language), so the fallback -- each component's own weight, unchanged -- is what renders there. Only he/ar redefine the token, which is why this is a small edit spread across five files rather than a rewrite of any of them. THE VALUE, measured rather than assumed: at this component's shared 13px, Hebrew and Arabic already compute the SAME numeric weight as English today -- 600 -- because that number comes from a site-wide default (the Primary typography global's font-weight, or a component's own hardcoded 600) that applies regardless of language. The gap HO-38 flagged is not a missing number, it is that IBM Plex Mono at 600 -- monospaced, formerly uppercase, formerly tracked -- reads far more emphatic than Heebo or Noto Sans Arabic at the same 600 now that the mono texture, case and tracking are gone. Screenshots at 600 (the do-nothing baseline), 700, 800 and 900, both scripts, on the rendered `/he/` and `/ar/` homepage: 600 reads visibly lighter than the rest; 700 reads clearly bolder and is not distinguishable from 800 or 900 at this size in either script -- Heebo and Noto Sans Arabic both appear to resolve to the same rendered instance above roughly 700 at 13px. 700 is therefore the minimum that does the job, not an assumption. */ html[lang^="he"] body, html[lang^="ar"] body { --wyg-label-weight: 700; /* HO-40: see section 5g below. Same fallback pattern as the weight token -- consuming rules read var( --wyg-label-size-scale, 1 ), so English (and any future language) is unaffected by construction. */ --wyg-label-size-scale: 1.15; } /* -------------------------------------------------------------------------- 5f. A little tracking back, for the same five categories as 5e -- section labels, bylines, metadata chips, the theme list, form labels. Added HO-40, 2026-08-19, on Todd's direct review of the HO-39 screenshots. 5d above is deliberately blanket and !important: no letter-spacing anywhere in Hebrew or Arabic, full stop, because the general case -- headings, body copy -- has no legitimate use for it. This is the narrow, targeted exception Todd asked for, scoped to the same components 5e already lists and reached the same way 5e reaches them: a selector list at higher specificity than 5d's blanket rule, so it wins within the !important layer rather than fighting it. Hebrew and Arabic get different values, not one shared number. 5d's own warning about Arabic stands: it is a joining script, and letter-spacing can visibly break the connection between letters, worse than it compresses them. Screenshotted both at a few candidate values on the rendered /he/ and /ar/ homepage before choosing -- Hebrew tolerates more before it stops reading as one word; Arabic does not. */ html[lang^="he"] .wyg-sec-label.wyg-sec-label .elementor-heading-title, html[lang^="he"] .wyg-quote__kicker.wyg-quote__kicker .elementor-heading-title, html[lang^="he"] .wyg-quote__cite.wyg-quote__cite .elementor-heading-title, html[lang^="he"] .wyg-masthead__eyebrow.wyg-masthead__eyebrow .elementor-heading-title, html[lang^="he"] .wyg-card__label.wyg-card__label .elementor-heading-title, html[lang^="he"] .wyg-contact__form.wyg-contact__form .elementor-field-label, html[lang^="he"] .wyg-plate-essay__chip.wyg-plate-essay__chip .elementor-heading-title, html[lang^="he"] .wyg-plate-essay__by.wyg-plate-essay__by .elementor-heading-title, html[lang^="he"] .wyg-plate-essay__themes.wyg-plate-essay__themes .elementor-heading-title { letter-spacing: 0.03em !important; } html[lang^="ar"] .wyg-sec-label.wyg-sec-label .elementor-heading-title, html[lang^="ar"] .wyg-quote__kicker.wyg-quote__kicker .elementor-heading-title, html[lang^="ar"] .wyg-quote__cite.wyg-quote__cite .elementor-heading-title, html[lang^="ar"] .wyg-masthead__eyebrow.wyg-masthead__eyebrow .elementor-heading-title, html[lang^="ar"] .wyg-card__label.wyg-card__label .elementor-heading-title, html[lang^="ar"] .wyg-contact__form.wyg-contact__form .elementor-field-label, html[lang^="ar"] .wyg-plate-essay__chip.wyg-plate-essay__chip .elementor-heading-title, html[lang^="ar"] .wyg-plate-essay__by.wyg-plate-essay__by .elementor-heading-title, html[lang^="ar"] .wyg-plate-essay__themes.wyg-plate-essay__themes .elementor-heading-title { letter-spacing: 0.015em !important; } /* -------------------------------------------------------------------------- 5g. And a little more size, same five categories, same reasoning. Added HO-40, 2026-08-19. --wyg-label-size-scale (defined above, section 5e) is a multiplier, not a replacement value, because the nine components read from two different size tokens (WYG / Micro and WYG / Small) and a multiplier is the only form that scales both correctly from one number. Consuming rules wrap their existing font-size in calc(): `calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) )`. Undefined here for English, so calc( x * 1 ) is exactly x -- unchanged, same construction as 5e and 5f. */ /* -------------------------------------------------------------------------- 6. Chrome offset -- HO-46, 2026-08-21. The fixed header's bottom edge, for anything that needs to clear it: a sticky element's `top`, a fragment target's `scroll-margin-top`. ONE definition, consumed by wyg-css-publication-single and wyg-css-publication. Do not redefine this token in another snippet -- see wyg-css-page's own `--wyg-page-chrome`, flagged in the HO-46 build log as a duplicate that should migrate to this one instead of carrying a second measurement. MEASURED, not derived from a formula: `.wyg-header`'s own rendered height at each of its two responsive breakpoints -- 1024px and 767px, wyg-css-header's OWN breakpoints, reused here rather than invented, so this can never drift from the real header. Anonymous viewer, no admin bar, on a live essay, 21 August 2026: viewport header alone (launch) + review-gate bar (current staging) >1024px 130px +40px = 170px <=1024px 110px +40px = 150px <=767px 102px +46px = 148px wyg-review-gate (38) already carries `--wyg-review-gate-top` and `--wyg-review-gate-h` as live custom properties on `:root` / `body.admin-bar` -- 0 for an anonymous visitor, 32/46/0px for a logged-in admin depending on width, because WordPress's own admin bar has its own breakpoints. Composing THOSE into this token, rather than a second hardcoded 170, is what HO-46 fixes: the previous value in wyg-css-publication-single was right for an anonymous desktop visitor and silently wrong the moment an admin bar was present -- measured 202px total at 1718px while logged in (130 header + 32 admin-bar top + 40 gate bar), against the file's hardcoded 170, an 8px sticky-under-header defect. That is very likely what HO-43 saw and HO-46 was opened to fix. THE LAUNCH VALUE is the top row above, once the review-gate bar is gone: 130 / 110 / 102px at the three breakpoints. Nothing to edit when that day comes -- `body:has( .wyg-review-gate )` simply stops matching and the base values below take over on their own. */ :root { --wyg-chrome-bottom: 130px; } @media ( max-width: 1024px ) { :root { --wyg-chrome-bottom: 110px; } } @media ( max-width: 767px ) { :root { --wyg-chrome-bottom: 102px; } } body:has( .wyg-review-gate ) { --wyg-chrome-bottom: calc( 130px + var( --wyg-review-gate-top, 0px ) + var( --wyg-review-gate-h, 40px ) ); } @media ( max-width: 1024px ) { body:has( .wyg-review-gate ) { --wyg-chrome-bottom: calc( 110px + var( --wyg-review-gate-top, 0px ) + var( --wyg-review-gate-h, 40px ) ); } } @media ( max-width: 767px ) { body:has( .wyg-review-gate ) { --wyg-chrome-bottom: calc( 102px + var( --wyg-review-gate-top, 0px ) + var( --wyg-review-gate-h, 46px ) ); } } /* ================================================================== * Hero background WebP delivery -- HO-99, 31 August 2026 * * WHY: the six page heroes are Elementor CSS background-images, not * tags. ShortPixel's PICTURE-tag delivery only ever rewrites , so these * -- the largest images on the site -- were still served as JPEG to every * visitor. image-set() is the CSS-native equivalent: the browser picks the * format it supports, and because every visitor receives byte-identical CSS, * Fastly caches one copy safely. * * DO NOT replace this with an .htaccess Accept-header rewrite. That would * let the CDN cache one format and serve it to everybody regardless of * browser support -- the exact trap the PICTURE-tag method exists to avoid. * * FALLBACK: a browser without image-set() drops the whole declaration and * keeps Elementor's own background-image, which is the .jpg. Nothing breaks. * * SPECIFICITY: Elementor's per-post rule is * .elementor- .elementor-element.elementor-element-:not( ... ) * = 0,4,0, and post-.css loads last. The element-id class is therefore * tripled and prefixed with `body` to reach 0,4,1 and win outright -- the * same load-order device already used in wyg-css-shared. * * URLs are ROOT-RELATIVE on purpose so they survive the Pressidium migration * and the move to withinyourgates.org. Do not make them absolute. * * The six element ids are shared across all three languages -- WPML keeps * them on translation -- so one rule per hero covers en, he and ar. * * MAINTENANCE: if a hero image is changed in Elementor, the matching rule * here goes stale and will keep painting the OLD webp. Update both together, * or delete the rule and let Elementor's own background take over. * ================================================================== */ body .elementor-element.elementor-element-1f249ec.elementor-element-1f249ec.elementor-element-1f249ec { background-image: image-set( url( "/wp-content/uploads/2026/08/wyg-hero-homepage.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/wyg-hero-homepage.jpg" ) type( "image/jpeg" ) ); } body .elementor-element.elementor-element-wygabm01.elementor-element-wygabm01.elementor-element-wygabm01 { background-image: image-set( url( "/wp-content/uploads/2026/08/wyg-about-hero.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/wyg-about-hero.jpg" ) type( "image/jpeg" ) ); } body .elementor-element.elementor-element-d437b7d.elementor-element-d437b7d.elementor-element-d437b7d { background-image: image-set( url( "/wp-content/uploads/2026/08/wyg-hero-research-publications.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/wyg-hero-research-publications.jpg" ) type( "image/jpeg" ) ); } body .elementor-element.elementor-element-nm10001.elementor-element-nm10001.elementor-element-nm10001 { background-image: image-set( url( "/wp-content/uploads/2026/08/wyg-hero-news-media.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/wyg-hero-news-media.jpg" ) type( "image/jpeg" ) ); } body .elementor-element.elementor-element-pwmast01.elementor-element-pwmast01.elementor-element-pwmast01 { background-image: image-set( url( "/wp-content/uploads/2026/08/hero-programs-workshops-v2.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/hero-programs-workshops-v2.jpg" ) type( "image/jpeg" ) ); } body .elementor-element.elementor-element-wygcthro.elementor-element-wygcthro.elementor-element-wygcthro { background-image: image-set( url( "/wp-content/uploads/2026/08/wyg-hero-contact.webp" ) type( "image/webp" ), url( "/wp-content/uploads/2026/08/wyg-hero-contact.jpg" ) type( "image/jpeg" ) ); }