/** * wyg-css-footer * * WHAT: The residue of footer styling Elementor has no control for -- the two * link columns and the language list, which are our own markup emitted by * wyg-footer-menu and wyg-language-switcher, the column labels, the logo's * intrinsic sizing, and the focus ring on a dark surface. Everything Elementor * does expose -- the background, the boxed width, the padding, the flex row, * the gap, the wrap, the per-breakpoint direction, the copyright's typography * -- is set on the containers and widgets, not here. * * WHY: architecture.md section 6, and the same reasoning as wyg-css-header. * Elementor mirrors its own controls for RTL; hand-written CSS does not, so * every line written by hand is a line that has to be checked in Hebrew and * Arabic. Two of three launch languages are RTL, so every property here that * has a side is a logical property -- padding-block, border-block-start, * text-align: start. There is not one left or right in this file, and there * must not be. * * REJECTED: styling the column links through Elementor's Nav Menu widget * instead. The widget cannot start a menu at a submenu, so the two columns * would render as one list with a dropdown, and the two column parents -- whose * URL is "#" -- would render as anchors a keyboard user has to tab through. * See wyg-footer-menu for the measurement. * * REJECTED: leaving the focus ring to wyg-css-global. That ring is Dark Red * #925038, chosen against the site's cream and white surfaces. Against the * footer's Dark Blue #325163 the two colors are near-identical in luminance * and the ring effectively disappears, so a keyboard user loses their place the * moment they enter the footer. Section 5 replaces it with Tan for this * component only. No compliance claim is made; this is a legibility fix. * * GOTCHAS: * - EVERY SELECTOR HERE IS AT LEAST TWO CLASSES DEEP, for the same reason as * wyg-css-header: Elementor's kit stylesheet emits `.elementor-kit-6 img`, * `.elementor-kit-6 a` and `.elementor-kit-6 h2` at specificity 0,1,1 and the * body carries `elementor-kit-6`, so a single-class rule loses to it silently. * The label rule repeats its own class deliberately -- see section 2. * - The logo rule is the one that matters most. Both final SVGs carry a * `viewBox` and NO width or height attribute, so an SVG with only a height * set stretches to its container's full width and letterboxes the artwork * inside it -- that is exactly what caught the footer mockup on 2026-08-17. * `inline-size: auto` plus `max-inline-size: none` is what prevents it. * - Loaded as a real stylesheet, not inline: this snippet must keep * load_as_file set to yes, which wyg-css-file-lock re-applies if it is lost. */ /* -------------------------------------------------------------------------- 1. The logo Sized by height, in rem so it grows with a reader who has raised their browser's default size, and explicitly released from the kit's max-width: 100% so the viewBox cannot stretch it. -------------------------------------------------------------------------- */ /* * The doubled class is not decoration. Elementor core ships * `.elementor-widget-image a img[src$=".svg"] { width: 48px; }` at specificity * 0,2,2, and this logo is a linked SVG, so it matches. Measured 2026-08-18: with * the single-class selector the mark rendered 48px wide by 88px tall -- ratio * 0.55 against the artwork's own 1.96 -- and the same rule silently squashed the * header the moment its PNG was swapped for the SVG. 0,3,1 clears it. */ .wyg-footer .wyg-footer__logo.wyg-footer__logo img { block-size: 5.5rem; inline-size: auto; max-inline-size: none; } /* -------------------------------------------------------------------------- 2. The column labels Three labels, one rule. Two of them are emitted by wyg-footer-menu from the Footer menu's top-level items, so their design cannot live on an Elementor widget; putting the third one's design on its Heading widget instead would split one visual decision across two places. The class is repeated in the selector to reach 0,3,0, which outranks Elementor's own `.elementor-widget-heading .elementor-heading-title` at 0,2,0 without depending on stylesheet order. -------------------------------------------------------------------------- */ /* * Two selectors because the two menu labels ARE the element carrying the class * (wyg-footer-menu emits it on the heading itself), while the Language label * gets the class on Elementor's widget wrapper, one level above its own * heading. Styling only the first would leave the third label unstyled -- * measured 2026-08-18, it rendered at the kit's h2 size in the kit's color. */ .wyg-footer .wyg-footer__label.wyg-footer__label, .wyg-footer .wyg-footer__label .elementor-heading-title { margin-block: 0 1.125rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.11em; text-transform: uppercase; text-align: start; color: #E1C29A; } /* -------------------------------------------------------------------------- 2b. The copyright's monospace The one thing on this component Elementor's font control cannot express. -------------------------------------------------------------------------- */ /* * A system stack, not a webfont, and this is a correction rather than a * preference. * * The mockups declare --mono as * "IBM Plex Mono", "SFMono-Regular", Consolas, monospace and use it 242 times * across 11 files -- eyebrows, figure credits, captions, metadata, this * copyright. But the only family any mockup ever loads is Nunito Sans, so IBM * Plex Mono never resolved: every one of those 242 places has been rendering in * whatever monospace the reader's OS supplies, which on the machine the design * was approved on is SF Mono. Measured 2026-08-18 across every file in * /mockups. * * The first WordPress build of this component set the family on the widget, * which made Elementor enqueue the real IBM Plex Mono from Google Fonts -- every * weight 100 to 700 plus italics. That added a webfont the approved design never * used and did not look like the approved design either. Dropping the family * from the widget and naming the stack here restores what was actually signed * off, at zero download. * * Elementor's font control offers Google families and a short list of Latin * system faces; there is no generic monospace among them and no way to enter a * stack. That is why this is the one piece of the copyright's typography that * lives in CSS while its size, weight, spacing and color stay on the widget. * * GOTCHA for whoever builds the eyebrows and captions: none of these faces * covers Hebrew or Arabic, so on /he/ and /ar/ mono text falls back to the * system UI font. Monospace is effectively a Latin-only texture on this site. * Decide that deliberately per component rather than discovering it per page. */ .wyg-footer .wyg-footer__copyright, .wyg-footer .wyg-footer__copyright p { font-family: var( --wyg-mono ); } /* -------------------------------------------------------------------------- 3. The link columns -------------------------------------------------------------------------- */ .wyg-footer .wyg-footer-menu__list, .wyg-footer .wyg-ls-stacked { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .wyg-footer .wyg-footer-menu__item, .wyg-footer .wyg-ls-stacked__item { margin: 0; list-style: none; } .wyg-footer .wyg-footer-menu__link, .wyg-footer .wyg-ls-stacked__link { display: inline-flex; align-items: center; padding-block: 0.12rem; font-size: 0.9375rem; line-height: 1.3; color: #DFE7E9; text-decoration: none; transition: color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 ); } .wyg-footer .wyg-footer-menu__link:hover, .wyg-footer .wyg-footer-menu__link:focus, .wyg-footer .wyg-ls-stacked__link:hover, .wyg-footer .wyg-ls-stacked__link:focus { color: #E1C29A; text-decoration: underline; text-underline-offset: 3px; } /* * The language currently being viewed. Weight rather than color: Tan is * already this component's hover color, so coloring the current language would * read as a hovered link rather than as a state. Settled in the mockup * 2026-08-17 and carried across unchanged. */ .wyg-footer .wyg-ls-stacked__link.is-current { font-weight: 700; } /* * A column whose links WPML has filtered away collapses instead of holding a * share of the row. wyg-footer-menu already returns nothing for such a column * (see its own comment), but the Elementor container it sat in is still a flex * child and still grows -- measured 2026-08-18 on the Hebrew publication * single, where two 256px gaps sat between the logo and the language list. * * :has() is doing real work here and there is no pre-:has() equivalent: the * condition is about the container's descendants, which no other selector can * express. Where it is unsupported the column simply does not collapse, which * is the state that shipped a minute ago rather than a broken layout, and it * stops mattering entirely once the pages are translated and the links return. */ .wyg-footer .wyg-footer__col:not(:has(a)) { display: none; } /* -------------------------------------------------------------------------- 4. Motion The color transition above is decorative. wyg-css-global already honors reduced motion for the site; this restates it for the one property this component animates, so the component is correct on its own. -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .wyg-footer .wyg-footer-menu__link, .wyg-footer .wyg-ls-stacked__link { transition: none; } } /* -------------------------------------------------------------------------- 5. Focus on a dark surface See REJECTED in the header block. Tan against the footer's Dark Blue is a legible ring; the sitewide Dark Red is not. -------------------------------------------------------------------------- */ .wyg-footer a:focus-visible, .wyg-footer button:focus-visible { outline: 3px solid #E1C29A; outline-offset: 3px; }