/* ================================================ AMOTZ WIDGETS — shared base ================================================ Rules every section relies on. Section-specific styling lives in its own file next to this one; nothing here should describe a single section. Depends on amotz-tokens.css for the variables. ================================================ */ /* ------------------------------------------------ RTL — READ THIS BEFORE TOUCHING ANY LAYOUT RULE ------------------------------------------------ The site's WordPress language is en_US, so carries lang="en-US" and NO dir. That means core, Elementor and WooCommerce do not load their RTL stylesheets, and nothing above these widgets establishes right-to-left. So each widget declares `dir="rtl"` on its own
and the direction is inherited from there down. That is a deliberate decision, not a workaround for a missing setting: these sections are self-contained bands that must render correctly whatever the host page does, including inside the Elementor editor's LTR chrome. WHAT THIS BUYS, AND WHAT IT DOES NOT: ✓ text direction, punctuation and number/bidi ordering inside the section ✓ flex/grid row order — `flex-direction: row` fills right-to-left, matching the design ✓ every LOGICAL property below (margin-inline, padding-inline, inset-inline, text-align start/end) resolves mirrored, for free ✗ Elementor's own widget CSS, WooCommerce templates and core blocks — those still lay out LTR, because they sit outside our sections THE TRAP, and it is the one that bites hardest on this kind of design: Figma's canvas is LTR. A row that reads left-to-right in the design file lays out RIGHT-to-left once it is inside dir="rtl". So when you transcribe a row of cards, icons or columns from Figma, the FIRST child in the Figma tree is the RIGHTMOST on screen. Do not "fix" a mirrored row by reversing the markup — check the design's own reading order first, because in Hebrew the rightmost item usually IS the first one. Use LOGICAL properties (margin-inline-start, padding-inline-end, inset-inline-start) for anything that should mirror, and PHYSICAL ones (left/right, `to right`) only where the design's asymmetry is tied to the canvas rather than to the reading direction — the gold gradient in amotz-tokens.css is the standing example. */ .az-section { box-sizing: border-box; width: 100%; max-width: 100%; margin-inline: auto; font-family: var(--az-font-body); /* Belt to the dir="rtl" attribute's braces. The attribute is what browsers and assistive tech read for bidi; this makes the same statement to the cascade so a parent theme rule setting `direction: ltr` cannot silently win. */ direction: rtl; text-align: start; } /* Latin runs inside Hebrew copy — a URL, "PhD", "Stanford", a price — must not be dragged out of place by the bidi algorithm. Wrapping them in .az-ltr isolates them so they read correctly without flipping the sentence around them. */ .az-section .az-ltr { direction: ltr; unicode-bidi: isolate; } .az-section *, .az-section *::before, .az-section *::after { box-sizing: inherit; } /* Hello Elementor sets no margin reset on headings inside widgets. Each section positions its own type, so zero them once here rather than in every section file. */ .az-section h1, .az-section h2, .az-section h3, .az-section h4, .az-section p { margin: 0; } /* ------------------------------------------------ WHY EVERY IMAGE RULE IS PREFIXED WITH `.az-section` ------------------------------------------------ DO NOT "TIDY" `.az-section .az-hero__author-avatar` BACK DOWN TO `.az-hero__author-avatar`. The prefix is load-bearing. Elementor's frontend stylesheet carries a blanket image reset: .elementor img { border:none; border-radius:0; box-shadow:none; height:auto; max-width:100% } That selector is specificity (0,1,1) — one class plus one element. Every rule of ours that targets an image by its own class is (0,1,0), so Elementor wins on specificity AND, because its sheet loads after ours, on document order too. The result is silent and looks like a design error rather than a cascade one: · `border-radius: 50%` on an avatar is discarded, and the circle renders SQUARE · `height: 100%` becomes `height: auto`, so an image inside a fixed-height box collapses to its own aspect ratio and leaves a gap under it Both of those shipped in the first build and were caught from screenshots, not from code. Adding `.az-section ` takes each rule to (0,2,0) or (0,2,1), which outranks Elementor's reset without a single `!important`. Any NEW rule that styles an needs the same prefix — `object-fit` and `max-width` survive on their own, but `height`, `border-radius`, `border` and `box-shadow` do not. An image positioned `absolute` with `inset: 0` is immune to the height half of this, since top and bottom both being 0 resolves the height regardless — which is why some sections looked fine and others did not, and why the bug was easy to misread as isolated. */ /* ------------------------------------------------ THE CONTENT COLUMN — --az-edge ------------------------------------------------ The design is a 1440px frame with 60px gutters, i.e. a 1320px content column. Those two descriptions are the SAME THING at 1440 and completely different anywhere else, which is how the page came apart on a wide monitor: · sections that centred a `max-width: 1320px` column stayed in the middle · sections that just used `padding-inline: 60px` pushed their content to the SCREEN edge So the research headline flew to the far right of a 2560px display while its card stayed centred a few hundred pixels away — in the comp they share one right edge. `--az-edge` is the gutter that keeps both descriptions true at every width: 60px until the viewport exceeds 1440, then whatever is needed to centre a 1320 column. Use it as the horizontal padding on any band whose content is aligned to a GUTTER rather than centred in a max-width wrapper. `100%` resolves against the element the variable is USED on, so only apply it to elements that span the full band. */ .az-section { --az-edge: max(60px, calc((100% - 1320px) / 2)); } /* ------------------------------------------------ FOCUS RING FOR THE CAROUSEL BUTTONS ------------------------------------------------ Every paging button carries `data-az-carousel`, so one rule covers the curriculum, research and bonus navs without repeating it per section. Without this the browser draws its OWN ring, which on some engines is a red/crimson outline — it looked like a design error on the white button and is not a colour that appears anywhere in this palette. Overriding it makes the focused state intentional and on-brand. `:focus-visible`, not `:focus` — a mouse click should not leave a ring behind, but keyboard users still need to see where they are. */ /* STRIP THE NATIVE BUTTON CHROME. These are