/* * RTL overrides for naturetech-magazine. * * The theme was forked from a layout designed left-to-right (Water Cultures). * Many sections use physical CSS properties (margin-left, padding-right, * text-align: left/right, fixed grid orderings, absolute positioning with * left:/right:) that don't auto-flip when WP switches to RTL via * . This stylesheet patches those without touching the * source files, so the LTR look stays correct on hypothetical LTR pages * and pulling upstream WC changes stays low-friction. * * Theme Name: Naturetech Magazine */ /* ---------- HERO ---------- */ /* Caption sits in the bottom-LEFT in LTR; bottom-RIGHT in RTL. */ .hero-image-wrap .caption { left: auto; right: 20px; } /* Hero CTA row reverse: the CTA pill is on the row's "end" — in RTL that's the visual left. flex-direction: row already auto-flips, so this is mostly text-align fixes for the pull-quote on the right side. */ .hero-cta-right { text-align: left; /* "From the editors" pull-quote: in LTR right-aligns near the right edge; in RTL we want it near the left edge. */ } /* "Read the full story" CTA arrow flip — the arrow points right in LTR, should point left in RTL. */ .btn-primary svg, .btn-primary .nt-icon { transform: scaleX(-1); } /* ---------- WORTH ---------- */ /* head subtitle ".label" — italic kicker that in LTR sits on the right of the head; the flex auto-flips, but the label still has a small italic right-aligned vibe we want to keep. No override needed. The h2 with em — also no physical issues. */ /* ---------- SECTION RAIL HEAD (shared) ---------- */ /* In components.css the subtitle is text-align:right (LTR-friendly). In RTL we want it text-align:left so it hugs the visual-left edge near the stacked layout's start. Same logic for the homepage.css mobile breakpoint. */ .rail-head .subtitle { text-align: left; } /* The "→ See all in X" link uses an arrow glyph in our copy. The Hebrew version should already use ← in source text — no transform needed. But just in case the rendered arrow comes from CSS pseudo, flip: no-op for now — rely on Hebrew copy. */ /* ---------- BOOKLET TILES (decoration leaf positioned with `right:`) ---------- */ /* Booklets are skipped in our front-page until content lands, but if/when they do: the leaf decoration sits at the bottom-right in LTR; flip to bottom-left. */ .booklet .bk-leaf { right: auto; left: -24px; } .booklet .bk-bottom .arrow { margin-left: 0; margin-right: 3px; transform: scaleX(-1); } /* ---------- VIDEO FEATURE (skipped in front-page) ---------- */ .vf-screen .disc .nt-icon { margin-left: 0; margin-right: 3px; } .vf-row:hover { padding-left: 0; padding-right: 4px; } /* ---------- BRICK (latest) — pull-quote variant has a quotemark border ---------- */ .brick--quote { border-left: 0; border-right: 2px solid var(--green); padding: 4px 18px 4px 0; } /* ---------- NEWSLETTER STAMP (skipped — would be in nl-art) ---------- */ .nl-art .stamp { right: auto; left: 18px; } /* ---------- HERO RESPONSIVE BREAKPOINT ---------- */ @media (max-width: 1100px) { .hero-folio { text-align: right; /* was: left */ } .hero-cta-right { text-align: right; /* was: left at this breakpoint (small flip) */ } } /* ---------- RAIL RESPONSIVE STACK ---------- */ @media (max-width: 900px) { .rail-head .subtitle { text-align: right; /* when stacked vertically, hug the start (right) edge */ } /* Mobile rail-grid horizontal scroll: the negative margin-right and padding-right that bleed into the gutter need to flip to -left/left. */ .rail-grid { margin-right: 0; margin-left: calc(-1 * var(--gutter)); padding-right: 0; padding-left: var(--gutter); } } /* ---------- GENERIC: flip arrow/chevron icons ---------- Most "→" arrows in CTAs should point ← in RTL. SVG-based icons that use the right-arrow symbol from the sprite need horizontal flip. */ .nt-icon[class*="arrow-right"], svg.nt-icon use[*|href$="#icon-arrow-right"] { transform: scaleX(-1); } /* ---------- HERO-TOP GRID: ensure folio doesn't get squeezed ---------- */ /* In LTR: text col 1fr | folio col auto. In RTL flexbox auto-flips, but we want to make sure the folio column (right in LTR = left in RTL) stays readable. No physical-prop override needed; logic above is informational. */ /* ---------- IMAGES: prevent natural-width overflow on rail cards ---------- */ /* Defensive: when a card's image isn't constrained by .ph aspect-ratio (e.g., featured-card variant), force max-width. */ .rail-grid img, .worth-card img, .brick img { max-width: 100%; height: auto; } /* ============ HERO RESTRAINT ============ */ /* The forked WC hero used a 24/9 aspect-ratio full-bleed image which reads as "magazine cover" on a wide screen but feels overdramatic for this site. Constrain the image to a more reasonable aspect on naturetech.co.il so the hero feels like a section opener, not a cover sheet. */ .hero-image-wrap { aspect-ratio: 16/9; max-height: 480px; border-radius: 8px; } /* Hero CTA arrow flip works fine in both directions; keep RTL flip from earlier. */