/* ========================================================================== BTA33KAR - UI-P3-H4-B / H4-R2 (2026-09-18) - v1.2 Homepage section "View all" links. 1.0 -> 1.1: the RTL arrow-mirror selector was anchored on the wrong element and matched zero nodes. 1.0 bytes are published and immutable, so the fix shipped under a new filename. No other declaration differed. 1.1 -> 1.2 (UI-P3-H4-R2): adds section 5, the EN-only chat-widget clearance. Every 1.1 declaration is carried over byte-for-byte; section 5 is additive. Scope ----- Every selector is rooted at `body#page-home`, which the theme emits on `/` and `/ar` only (see functions/fixes-assets.php). Nothing here can reach the listing pages, the detail pages, the agents or news archives, the wishlist, or the header and footer. Ownership --------- This sheet styles exactly one new component, `.bta-section-more`, which exists only in the five homepage section partials edited in H4-B: featured-projects, properties-for-sale, properties-for-rent, featured-agents and latest-news. The recently-viewed section has NO link by design - there is no page that lists a visitor's recently viewed properties, and pointing the link at all properties would mislabel the destination. Tokens ------ Only tokens that actually exist in public/css/bta-visual.css are used. `--bta-text-strong` and `--bta-accent` DO NOT EXIST in this codebase; the real names are `--bta-text-primary` and `--bta-brand`. Contrast (WCAG) --------------- --bta-brand #08519B on --bta-surface-raised #FFFFFF = 7.89:1 - 1.4.3 text contrast (needs 4.5:1) PASS - 1.4.11 component boundary (needs 3:1) PASS --bta-border-strong (--bta-n-400 #A8ABA4) is deliberately NOT used for the boundary: it measures 2.33:1 against white and would fail 1.4.11. Focus ----- No :focus-visible rule is declared here on purpose. public/css/ bta-tokens.css:47 already gives every `a:focus-visible` a 3px #063A5D outline at 2px offset with a white 2px box-shadow, plus a `@supports not selector(:focus-visible)` fallback. A second declaration would only risk diverging from the site-wide ring. !important ---------- None. The legacy anchor rules in style.css are all scoped to `.item .description a`, `.fr-grid-thumb a`, `.fr-can-name a`, `.agent-email a` and `.projecthome h2 a`; none of them matches `.bta-section-more__link`, so no override is required. Immutability ------------ Published 1.0 bytes never change. A correction ships as bta-home-viewall-1.1.css under a new filename and a new registration. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROW The wrapper is the grid's next sibling, so it inherits the section's content box and needs no gutter of its own. `flex-end` is direction-relative: it resolves to the right edge in LTR and the left edge in RTL, which is what "inline-end" means in both locales. -------------------------------------------------------------------------- */ body#page-home .bta-section-more { display: flex; justify-content: flex-end; margin-block-start: var(--bta-space-6); } /* -------------------------------------------------------------------------- 2. LINK `min-block-size` uses the site's own control height so the target matches every other 44px control shipped in P1/P2. The measured widest label (EN "View all properties for rent", 277px) fits the 360px content box (360 - 2 x 16px gutter = 328px) on a single line, so no wrapping rule is needed; `max-inline-size: 100%` is a guard against a future longer translation overflowing rather than wrapping. -------------------------------------------------------------------------- */ body#page-home .bta-section-more__link { display: inline-flex; align-items: center; gap: 8px; min-block-size: var(--bta-control-height); max-inline-size: 100%; padding-block: 10px; padding-inline: 20px; border: 1px solid var(--bta-brand); border-radius: var(--bta-radius-md); background-color: var(--bta-surface-raised); box-shadow: none; color: var(--bta-brand); font-size: var(--bta-fs-body); font-weight: 600; line-height: var(--bta-lh-tight); text-decoration: none; transition: background-color var(--bta-motion-fast) var(--bta-ease), color var(--bta-motion-fast) var(--bta-ease), border-color var(--bta-motion-fast) var(--bta-ease); } /* -------------------------------------------------------------------------- 3. ARROW Decorative only, and generated content - it never enters the DOM, so it can never leak into the link's accessible name. `scaleX(-1)` mirrors it for Arabic, where reading runs right to left; the mirror is applied on the `dir` attribute the theme already sets on . -------------------------------------------------------------------------- */ body#page-home .bta-section-more__link::after { content: "\2192"; display: inline-block; font-size: 1.125em; line-height: 1; } /* The theme puts `dir="rtl"` on , not on (verified live: carries no dir attribute). A descendant selector of the form `[dir="rtl"] body#page-home ...` therefore matches NOTHING, because it asks for a body nested inside an rtl element. 1.0 shipped that form and the arrow stayed unmirrored in Arabic; 1.1 anchors the attribute on the body itself. The descendant form is kept as a second selector so the rule still works if the attribute ever moves up to . */ body#page-home[dir="rtl"] .bta-section-more__link::after, [dir="rtl"] body#page-home .bta-section-more__link::after { transform: scaleX(-1); } /* -------------------------------------------------------------------------- 4. HOVER Filled brand on hover. #FFFFFF on #08519B is the same 7.89:1 pair inverted, so the hover state is as legible as the rest state. Hover is gated on a real hover pointer so a touch tap does not leave the button stuck in the filled state. -------------------------------------------------------------------------- */ @media (hover: hover) { body#page-home .bta-section-more__link:hover { background-color: var(--bta-brand); border-color: var(--bta-brand); color: var(--bta-brand-contrast); } } body#page-home .bta-section-more__link:active { background-color: var(--bta-brand-hover); border-color: var(--bta-brand-hover); color: var(--bta-brand-contrast); } @media (prefers-reduced-motion: reduce) { body#page-home .bta-section-more__link { transition: none; } } /* -------------------------------------------------------------------------- 5. FLOATING-WIDGET CLEARANCE (UI-P3-H4-R2, owner-approved Option A) WHAT THIS AVOIDS. The fob-live-chat button is position:fixed with `top:50%; transform:translateY(-50%); right:var(--fob-offset-x)` and z-index 999999 (fob_live_chat_position = center_right, offsets 20/20). It therefore sits permanently in the vertical MIDDLE of the viewport - exactly where a reader parks content to click it - and its left edge is always `clientWidth - 80px` (20px offset + 60px width). Measured against the live 1.1 build it covered 48-60px of each View-All link's inline-end corner and blocked 5-20 hit points per width. WHY EN ONLY. In RTL the section row's inline-end is the physical LEFT, so the AR links sit at x 31-226 while the widget sits at the physical right. Measured: ZERO chat intersection in all 12 AR cells, base and prototype alike. AR is therefore left completely untouched - no padding, no selector. `:not([dir="rtl"])` is anchored on the BODY because that is where this theme puts the dir attribute (see section 3). WHY IT STARTS AT 575px. The widget is hidden at <=480px (`@media(max-width:480px){.fob-hidden-on-mobile{display:none!important}}` plus fob_live_chat_display_on_mobile = hide), so below that there is nothing to clear. An earlier 481px candidate was measured and REJECTED: it moved the link into the bottom action_footer at 481-574 and turned 0 blocked points into 6. Widths 481-574 are deliberately left unchanged. HOW THE VALUES WERE DERIVED - not guessed. For each gutter tier: required inset = linkRight - (widgetLeft - focusRing - gap) with widgetLeft = clientWidth - 80, focusRing = 5px (bta-tokens.css draws a 3px outline at 2px offset) and gap = 8px. Measured per tier: tier right gutter chat overlap required shipped 575-767 16 60px 77px 80px 768-1023 24 56px 69px 72px 1024-1365 32 48px 61px 64px 1366-1439 68 13px 26px 32px >=1440 >=105 0px 0px 0px Each shipped value is the required minimum rounded up to the next multiple of 8. At >=1440 the container is narrow enough that the row already clears the widget, so no inset is applied. WHAT THIS DOES NOT FIX. `div.action_footer` (the tel: CTA plus the .cd-top back-to-top, z-index 9) is anchored to the BOTTOM of the viewport and occupies its last ~53px. It blocks any element - these links, and the card links far more often - at roughly 2 scroll offsets out of ~157, and at 360px no horizontal rule can clear it at all: every label is wider than the 154px available beside it. That residual is an owner-accepted, separately deferred site-wide limitation. This sheet does not attempt to address it and must not be extended to try. -------------------------------------------------------------------------- */ @media (min-width: 575px) { body#page-home:not([dir="rtl"]) .bta-section-more { padding-inline-end: 80px; } } @media (min-width: 768px) { body#page-home:not([dir="rtl"]) .bta-section-more { padding-inline-end: 72px; } } @media (min-width: 1024px) { body#page-home:not([dir="rtl"]) .bta-section-more { padding-inline-end: 64px; } } @media (min-width: 1366px) { body#page-home:not([dir="rtl"]) .bta-section-more { padding-inline-end: 32px; } } @media (min-width: 1440px) { body#page-home:not([dir="rtl"]) .bta-section-more { padding-inline-end: 0; } }