/* ============================================================================ * AFDAL HOME CHILD — SINGLE PROPERTY / SINGLE AGENT * ---------------------------------------------------------------------------- * Loads only on is_singular(['property','agent']) — see functions.php. * * This stylesheet is written against the child theme's OWN markup * (ere-templates/content-single-property.php and content-single-agent.php), * not against Essential Real Estate's stock output. Everything structural * hangs off .afdx* classes this theme controls, so nothing here depends on * guessing a plugin class name. Plugin classes still appear, but only for * the inner widgets ERE renders itself (gallery, price, overview list, map). * * LAYER — enqueued after afdal-core / afdal-chrome / afdal-adapters and the * plugin CSS, i.e. afdal-core.css's documented "7 · page/template CSS" slot. * It consumes the --afd-* tokens rather than redefining a second palette; * every var() carries a literal fallback so the page still renders correctly * if afdal-suite's design system is ever switched off. * * RTL — logical properties throughout (inset-inline-*, margin-inline, * padding-inline, border-inline-*), so the site's fa_IR direction is handled * without a mirrored stylesheet. * * PERFORMANCE * · no @import, no web font, no icon font of its own * · aspect-ratio on every image box → zero layout shift (CLS) * · motion is CSS-only and gated behind @supports (animation-timeline) * · prefers-reduced-motion is handled globally by afdal-core.css * · content-visibility is deliberately NOT used — see the note in §3 * ========================================================================= */ /* ========================================================================== 0 · LOCAL TOKENS ========================================================================== */ .afdx{ /* Sticky offset. The site header is not fixed, so a small gap is enough; raise this to the header height if a sticky header is ever enabled. */ --afdx-sticky-top:20px; --afdx-rail:370px; /* Wider than the 1300px site container: these pages carry a 370px rail that the marketing pages do not, so the reading column would otherwise be squeezed. Still bounded, and every breakpoint below is unaffected. */ --afdx-max:1460px; --afdx-gap:clamp(20px,2.4vw,34px); --afdx-pad:clamp(18px,2.2vw,28px); --afdx-radius:var(--afd-r,18px); --afdx-line:var(--line,rgba(5,71,119,.12)); --afdx-navy:var(--afd-navy,#054777); --afdx-gold:var(--afd-gold,#A48A61); --afdx-ink:var(--afd-ink-900,#333); --afdx-ink2:var(--afd-ink-600,#5A6472); --afdx-card:var(--afd-white,#fff); color:var(--afdx-ink); } /* ========================================================================== 1 · PAGE SHELL + TWO-COLUMN GRID ========================================================================== */ .afdx{ box-sizing:border-box; inline-size:100%; max-inline-size:var(--afdx-max); margin-inline:auto; /* The spacing complaint: the stock page began flush against the header. This is the outer breathing room for the whole document. */ padding:clamp(20px,3vw,40px) var(--afd-gutter,clamp(16px,4vw,44px)) clamp(40px,6vw,80px); /* The site is fa_IR so already applies, but Elementor's Theme Builder wrapper and some plugin markup re-declare direction on their own containers. Stating it here means the whole document body of these two pages is right-to-left regardless of what wraps it, and text-align:start then follows the direction instead of being pinned. */ direction:rtl; text-align:start; } .afdx *, .afdx *::before, .afdx *::after{ box-sizing:border-box; } /* Latin islands inside RTL copy — phone numbers, emails, URLs. `isolate` keeps them from dragging neighbouring punctuation to the wrong side. */ .afdx .afdx-ltr{ direction:ltr; unicode-bidi:isolate; text-align:start; } .afdx__layout{ display:grid; grid-template-columns:1fr; gap:var(--afdx-gap); align-items:start; } @media (min-width:1024px){ .afdx__layout{ grid-template-columns:minmax(0,1fr) var(--afdx-rail); } } .afdx__main{ min-inline-size:0; } /* STICKY RAIL. position:sticky must live on the GRID ITEM, not on a wrapper inside it. A sticky box can only travel inside its containing block: `.afdx__side-inner` sits in `.afdx__side`, whose height equals its own content, so it had zero travel distance and never moved — that was the "sidebar is not sticky" bug. The grid ITEM, by contrast, is laid into a grid area as tall as the whole row (the main column), and `align-self:start` keeps the box itself at its content height, so the difference between the two becomes the travel range. No max-height and no overflow here: an internally scrolling rail was the second reported problem, and it is not needed once the rail is short. */ .afdx__side{ min-inline-size:0; } @media (min-width:1024px){ .afdx__side{ position:sticky; inset-block-start:var(--afdx-sticky-top); align-self:start; } } .afdx__side-inner{ display:flex; flex-direction:column; gap:16px; } .afdx__bottom{ margin-block-start:clamp(28px,4vw,48px); } /* ========================================================================== 2 · TOP — breadcrumb, title, price, action bar ========================================================================== */ .afdx__crumbs{ margin-block-end:12px; color:var(--afdx-ink2); font-size:13px; line-height:1.9; } .afdx__crumbs a{ color:var(--afdx-navy); text-decoration:none; } .afdx__crumbs a:hover{ text-decoration:underline; } .afdx__top{ margin-block-end:var(--afdx-gap); } .afdx__titlerow{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px clamp(16px,3vw,32px); } .afdx__titlecol{ flex:1 1 min(100%,420px); min-inline-size:0; } .afdx__title{ margin:0 0 10px; color:var(--afdx-navy); font-size:clamp(23px,3.2vw,36px); font-weight:800; line-height:1.45; text-wrap:balance; } .afdx__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } /* STATUS TAGS. The real markup is
The previous rules styled the WRAPPER, so the spans kept the plugin's own flat grey box — which is what the tags looked like in the header. These style the span, and read the per-term colour the admin picked in Property Status → colour, falling back to brand navy. */ .afdx__meta .ere__loop-property-status{ display:inline-flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; } .afdx__meta .ere__loop-property-status-item{ display:inline-flex; align-items:center; padding:5px 15px; border-radius:var(--afd-r-pill,999px); background-color:var(--ere-loop-property-status-bg-color,var(--afdx-navy)); background-image:none; color:#fff; font-size:12.5px; font-weight:700; line-height:1.9; letter-spacing:.01em; white-space:nowrap; box-shadow:0 4px 12px -4px rgba(2,31,56,.35); } /* The plugin's little triangular tail belongs to the old ribbon look. */ .afdx__meta .property-arrow{ display:none; } .afdx__meta .ere__single-property-location, .afdx__meta .property-location{ display:inline-flex; align-items:center; gap:6px; margin:0; color:var(--afdx-ink2); font-size:14px; line-height:1.9; } .afdx__meta .property-location i{ color:var(--afdx-gold); } .afdx__pricecol{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .afdx__price-label{ color:var(--afdx-ink2); font-size:13px; } /* PRICE. The markup is شروع از ۷۹۹٬۰۰۰ درهم The prefix is PERSIAN, so forcing direction:ltr on the wrapper (as the first version did) pushed "شروع از" to the left of the number and broke the reading order. The wrapper stays RTL and Unicode's own bidi algorithm renders the numerals left-to-right inside it, which is the correct result. */ .afdx__pricecol .ere__single-property-price, .afdx__pricecol .ere-property-price, .afdx__pricecol .property-price{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:0; color:var(--afdx-navy); font-size:clamp(22px,2.8vw,31px); font-weight:800; line-height:1.35; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .afdx__pricecol .property-price-prefix{ color:var(--afdx-ink2); font-size:14px; font-weight:600; } /* ---- action bar: key facts + share/save actions -------------------------- */ .afdx__actionbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-block-start:18px; padding-block:16px; border-block:1px solid var(--afdx-line); } .afdx__actionbar .ere__single-property-info, .afdx__actionbar .property-info{ margin:0; padding:0; border:0; } .afdx__actionbar .property-info-inner{ display:flex; flex-wrap:wrap; gap:12px clamp(16px,3vw,34px); justify-content:flex-start; } .afdx__actionbar .ere__loop-property-info-item{ display:flex; align-items:center; gap:10px; } .afdx__actionbar .ere__loop-property-info-item i{ display:inline-grid; place-items:center; flex:0 0 auto; inline-size:40px; block-size:40px; margin:0; border-radius:12px; background-color:rgba(164,138,97,.14); color:var(--afdx-gold); font-size:16px; } .afdx__actionbar .ere__lpi-content{ display:flex; flex-direction:column; line-height:1.4; } .afdx__actionbar .ere__lpi-value{ color:var(--afdx-navy); font-size:16px; font-weight:800; } .afdx__actionbar .ere__lpi-label{ color:var(--afdx-ink2); font-size:12px; } .afdx__actionbar .ere__single-property-action{ display:flex; align-items:center; gap:8px; } .afdx__actionbar .ere__single-property-action a, .afdx__actionbar .ere__single-property-action .ere-compare, .afdx__actionbar .ere__single-property-action .ere-favorite{ display:inline-grid; place-items:center; inline-size:40px; block-size:40px; border:1px solid var(--afdx-line); border-radius:50%; background-color:var(--afdx-card); color:var(--afdx-navy); font-size:14px; text-decoration:none; transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease; } .afdx__actionbar .ere__single-property-action a:hover{ background-color:var(--afdx-navy); border-color:var(--afdx-navy); color:#fff; transform:translateY(-2px); } /* ========================================================================== 3 · SECTION SHELL ========================================================================== */ .afdx-sec{ margin-block-end:var(--afdx-gap); padding:var(--afdx-pad); border:1px solid var(--afdx-line); border-radius:var(--afdx-radius); background-color:var(--afdx-card); box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } .afdx-sec:last-child{ margin-block-end:0; } /* Sections whose child brings its own frame (gallery, reviews, FAQ). */ .afdx-sec--flush, .afdx-sec--faq{ padding:0; border:0; background:transparent; box-shadow:none; } /* The spec table draws its own outer border, and the section card draws another one 24px outside it — two nested frames around the same content. Dropping the inner one leaves a single, cleaner edge. */ .afdx-sec--overview .ere__list-2-col{ border-inline:0; border-block-start:0; border-radius:0; } .afdx-sec__head{ margin-block-end:18px; } .afdx-sec__title{ position:relative; margin:0; padding-inline-start:16px; color:var(--afdx-navy); font-size:clamp(19px,2.1vw,25px); font-weight:800; line-height:1.55; } .afdx-sec__title::before{ content:""; position:absolute; inset-inline-start:0; inset-block:4px; inline-size:4px; border-radius:var(--afd-r-pill,999px); background-image:var(--afd-grad-gold,linear-gradient(135deg,#A48A61 0%,#5E7A9A 100%)); } /* NOTE — `content-visibility:auto` was here in the previous revision and has been removed on purpose. It defers layout of off-screen sections, which means the MAIN column's height changes as you scroll past each one. The sticky rail's travel range is derived from that height, so the sidebar visibly jumped while scrolling. A rail that stays put is worth more than the few milliseconds this saved; the page keeps its other performance work (aspect-ratio boxes, lazy images, deferred JS, no extra fonts). */ /* Dark rhythm-breaking sections. Re-declares the same surface contract afdal-core.css defines for .afd-sec--navy, so descendants stay legible. */ .afdx-sec--dark{ --ink:rgba(255,255,255,.88); --ink-2:rgba(255,255,255,.72); --afdx-ink:rgba(255,255,255,.88); --afdx-ink2:rgba(255,255,255,.72); --afdx-line:rgba(255,255,255,.2); border-color:transparent; background-color:var(--afd-navy-deep,#03355A); background-image:var(--afd-grad-navy,linear-gradient(160deg,#054777 0%,#021F38 100%)); color:var(--afdx-ink); } .afdx-sec--dark .afdx-sec__title{ color:#fff; } .afdx-sec--dark .afdx-sec__title::before{ background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); } .afdx-sec--dark a{ color:var(--afd-gold-light,#C9AF83); } /* ========================================================================== 4 · GALLERY ========================================================================== */ .afdx .ere__single-property-gallery{ margin:0; } .afdx .single-property-image-main .property-gallery-item{ position:relative; overflow:hidden; border-radius:var(--afd-r-lg,26px); /* Reserved before the carousel script measures anything — this is the single biggest CLS win on the page. */ aspect-ratio:16/9; background-color:rgba(5,71,119,.06); box-shadow:var(--afd-sh,0 18px 40px -22px rgba(5,71,119,.45)); } .afdx .single-property-image-main .property-gallery-item img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; } .afdx .single-property-image-main .zoomGallery{ position:absolute; inset-block-end:14px; inset-inline-end:14px; display:inline-grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; background-color:rgba(2,31,56,.55); color:#fff; text-decoration:none; transition:background-color .22s ease,transform .22s ease; } .afdx .single-property-image-main .zoomGallery:hover{ background-color:var(--afdx-gold); transform:scale(1.06); } .afdx .single-property-image-thumb{ margin-block-start:12px; } .afdx .single-property-image-thumb .property-gallery-item{ overflow:hidden; border:2px solid transparent; border-radius:var(--afd-r-sm,12px); aspect-ratio:16/10; opacity:.68; cursor:pointer; transition:opacity .22s ease,border-color .22s ease; } .afdx .single-property-image-thumb .property-gallery-item img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; } .afdx .single-property-image-thumb .property-gallery-item:hover, .afdx .single-property-image-thumb .owl-item.current .property-gallery-item, .afdx .single-property-image-thumb .property-gallery-item.active{ opacity:1; border-color:var(--afdx-gold); } /* Carousel arrows — ERE ships owl-carousel; keep them visible but quiet. */ .afdx .owl-nav button.owl-prev, .afdx .owl-nav button.owl-next{ inline-size:42px; block-size:42px; border-radius:50%; background-color:rgba(255,255,255,.9) !important; color:var(--afdx-navy) !important; box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } /* ========================================================================== 5 · OVERVIEW TABLE ---------------------------------------------------------------------------- ERE prints
    with
  • label value
    • . Rebuilt as a real two-column definition grid: label and value align down the page instead of running together as one sentence. ========================================================================== */ .afdx .ere__single-property-overview{ padding:0; border:0; background:transparent; box-shadow:none; margin:0; } .afdx .ere__single-property-overview .ere-heading-style2{ display:none; } /* section head already prints it */ .afdx .ere__list-2-col{ display:grid; grid-template-columns:1fr; gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--afdx-line); border-radius:var(--afd-r,18px); overflow:hidden; background-color:var(--afdx-card); } @media (min-width:700px){ .afdx .ere__list-2-col{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .afdx .ere__list-2-col > li{ display:grid; /* Fixed label column so every value starts on the same line down the table. Narrowed from 11.5em to 9em and both type sizes stepped down: the goal is that a value like "از ۱٬۱۰۰٬۰۰۰ تا ۱٬۳۵۰٬۰۰۰ درهم" fits on ONE line, which is what makes the table compact. Nothing is forced with white-space:nowrap — an unusually long value must still be allowed to wrap rather than overflow its cell. */ grid-template-columns:minmax(0,9em) minmax(0,1fr); gap:3px 12px; align-items:baseline; min-inline-size:0; margin:0; padding:10px 16px; border-block-end:1px solid var(--afdx-line); background-color:transparent; color:var(--afdx-ink); font-size:13.5px; line-height:1.8; transition:background-color .18s ease; } .afdx .ere__list-2-col > li:hover{ background-color:rgba(164,138,97,.07); } @media (min-width:700px){ /* Vertical rule between the two columns, without a wrapper element. */ .afdx .ere__list-2-col > li:nth-child(odd){ border-inline-end:1px solid var(--afdx-line); } /* Zebra by visual ROW, not by cell: with two columns, items 1-2 are row 1, 3-4 are row 2, so every other PAIR is tinted. */ .afdx .ere__list-2-col > li:nth-child(4n+1), .afdx .ere__list-2-col > li:nth-child(4n+2){ background-color:rgba(5,71,119,.032); } .afdx .ere__list-2-col > li:nth-child(4n+1):hover, .afdx .ere__list-2-col > li:nth-child(4n+2):hover{ background-color:rgba(164,138,97,.07); } /* Last row of a full two-column table needs no bottom rule. */ .afdx .ere__list-2-col > li:nth-last-child(-n+2){ border-block-end:0; } } @media (max-width:699px){ .afdx .ere__list-2-col > li{ grid-template-columns:1fr; gap:2px; padding:12px 15px; } .afdx .ere__list-2-col > li:nth-child(even){ background-color:rgba(5,71,119,.032); } .afdx .ere__list-2-col > li:last-child{ border-block-end:0; } } .afdx .ere__list-2-col > li strong{ color:var(--afdx-ink2); font-size:12.5px; font-weight:600; line-height:1.7; text-wrap:balance; /* two-word labels split evenly instead of 3+1 */ } .afdx .ere__list-2-col > li span, .afdx .ere__list-2-col > li a{ color:var(--afdx-navy); font-weight:700; /* `anywhere` used to break mid-number; only break at real boundaries so a price stays whole and simply moves to the next line if it truly cannot fit. */ overflow-wrap:break-word; word-break:normal; } /* Numeric values (prices, areas) line up column-wise. */ .afdx .ere__list-2-col > li span{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; text-wrap:pretty; } /* Some overview rows are rendered by the plugin's icon partials rather than a plain ; strip their card chrome so they sit in the table cleanly. */ .afdx .ere__list-2-col .ere__loop-property-info-item{ display:inline-flex; align-items:center; gap:7px; margin:0; padding:0; background:none; border:0; } .afdx .ere__list-2-col .ere__loop-property-info-item i{ inline-size:auto; block-size:auto; background:none; color:var(--afdx-gold); font-size:13px; } .afdx .ere__list-2-col .ere__lpi-label{ display:none; } /* ========================================================================== 6 · PROSE (description / agent bio) ========================================================================== */ .afdx-sec--prose .afdx-sec__body{ color:var(--afdx-ink); font-size:16px; line-height:2.15; } .afdx-sec--prose .afdx-sec__body > :first-child{ margin-block-start:0; } .afdx-sec--prose .afdx-sec__body > :last-child{ margin-block-end:0; } .afdx-sec--prose p{ margin-block:0 1.15em; } .afdx-sec--prose :is(h2,h3,h4){ margin-block:1.6em .7em; color:var(--afdx-navy); font-weight:800; line-height:1.6; } .afdx-sec--prose h2{ font-size:clamp(19px,2.1vw,24px); } .afdx-sec--prose h3{ font-size:clamp(17px,1.9vw,21px); } .afdx-sec--prose h4{ font-size:16px; } .afdx-sec--prose a{ color:var(--afdx-navy); font-weight:600; text-underline-offset:3px; text-decoration-color:var(--afdx-gold); } .afdx-sec--prose :is(ul,ol){ margin-block:0 1.2em; padding-inline-start:1.4em; } .afdx-sec--prose li{ margin-block-end:.45em; } .afdx-sec--prose li::marker{ color:var(--afdx-gold); } .afdx-sec--prose img{ max-inline-size:100%; height:auto; border-radius:var(--afd-r-sm,12px); } .afdx-sec--prose blockquote{ margin:1.4em 0; padding:14px 18px; border-inline-start:4px solid var(--afdx-gold); border-radius:var(--afd-r-sm,12px); background-color:rgba(164,138,97,.08); } /* Editor-placed CTA buttons inside the prose keep their own look but get a sane minimum tap target. */ .afdx-sec--prose .elementor-button, .afdx-sec--prose .wp-block-button__link{ min-block-size:44px; } /* Tables authored inside the description scroll instead of breaking out. */ .afdx-sec--prose table{ display:block; inline-size:100%; max-inline-size:100%; overflow-x:auto; border-collapse:collapse; } /* ========================================================================== 7 · FEATURES / AMENITIES (dark section) ========================================================================== */ .afdx .ere__single-property-feature{ margin:0; padding:0; border:0; background:transparent; box-shadow:none; } .afdx .ere__single-property-feature .ere-heading-style2{ display:none; } .afdx .ere__single-property-feature .ere-property-element > .row, .afdx .ere__single-property-feature .row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:0; } .afdx .property-feature-wrap{ max-inline-size:100%; flex:none; margin:0; padding:0; } .afdx .property-feature-wrap a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); background-color:rgba(255,255,255,.06); color:var(--afdx-ink); font-size:14px; text-decoration:none; transition:background-color .22s ease,border-color .22s ease,transform .22s ease; } .afdx .property-feature-wrap a:hover{ background-color:rgba(255,255,255,.12); border-color:var(--afd-gold-light,#C9AF83); transform:translateY(-2px); } .afdx .property-feature-wrap a.feature-checked i{ color:var(--afd-gold-light,#C9AF83); } .afdx .property-feature-wrap a.feature-unchecked{ opacity:.4; } .afdx-sec--dark h4{ margin:18px 0 10px; color:#fff; font-size:15px; font-weight:700; } .afdx-sec--dark h4:first-child{ margin-block-start:0; } /* ========================================================================== 8 · FLOOR PLANS + ATTACHMENTS ========================================================================== */ .afdx .property-floors-tab{ margin:0; padding:0; border:0; background:transparent; box-shadow:none; } .afdx .property-floors-tab .nav-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; border:0; list-style:none; } .afdx .property-floors-tab .nav-item{ margin:0; } .afdx .property-floors-tab .nav-link{ display:inline-flex; align-items:center; min-block-size:40px; padding:8px 18px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-pill,999px); background-color:transparent; color:var(--afdx-ink); font-size:14px; font-weight:600; text-decoration:none; transition:background-color .2s ease,color .2s ease,border-color .2s ease; } .afdx .property-floors-tab .nav-link.active{ background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); border-color:transparent; color:var(--afd-onGold,#1B1206); } .afdx .property-floors-tab img{ max-inline-size:100%; height:auto; border-radius:var(--afd-r-sm,12px); } .afdx .ere__single-property-attachments{ margin:0; padding:0; border:0; background:transparent; box-shadow:none; } .afdx .ere__single-property-attachments .ere-heading-style2{ display:none; } .afdx .ere__single-property-attachments .ere-property-element{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin:0; } .afdx .ere__property-attachment{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-inline-size:100%; flex:none; margin:0 !important; padding:12px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); transition:border-color .2s ease,box-shadow .2s ease; } .afdx .ere__property-attachment:hover{ border-color:var(--afdx-gold); box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } .afdx .ere__property-attachment img{ inline-size:100%; aspect-ratio:4/3; object-fit:cover; margin:0 !important; border-radius:10px; } .afdx .ere__property-attachment-title{ margin:0; color:var(--afdx-navy); font-size:14px; font-weight:700; } /* ========================================================================== 9 · ADDRESS + MAP ========================================================================== */ .afdx .ere__single-property-address, .afdx .ere__single-property-map{ margin:0; padding:0; border:0; background:transparent; box-shadow:none; } .afdx .ere__single-property-address .ere-heading-style2, .afdx .ere__single-property-map .ere-heading-style2{ display:none; } .afdx .ere__property-address-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); overflow:hidden; } .afdx .ere__property-address-list > li{ max-inline-size:100%; flex:none; margin:0; padding:12px 16px; border-block-end:1px solid var(--afdx-line); } .afdx .ere__property-location-item{ display:flex; flex-wrap:wrap; gap:8px; font-size:14.5px; } .afdx .ere__property-location-item strong{ color:var(--afdx-ink2); font-weight:600; } .afdx .open-on-google-maps{ display:inline-flex; align-items:center; gap:8px; min-block-size:44px; margin-block-start:14px; padding:10px 20px; border:1.5px solid var(--afdx-line); border-radius:var(--afd-r-pill,999px); color:var(--afdx-navy); font-weight:700; font-size:14px; text-decoration:none; transition:background-color .2s ease,color .2s ease,border-color .2s ease; } .afdx .open-on-google-maps:hover{ background-color:var(--afdx-navy); border-color:var(--afdx-navy); color:#fff; } .afdx .ere__map-canvas{ min-block-size:min(60vh,420px); border:1px solid rgba(255,255,255,.18); border-radius:var(--afd-r-sm,12px); overflow:hidden; } .afdx .ere__single-property-map-directions{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px; } .afdx .ere__single-property-map-directions .form-control{ flex:1 1 220px; min-inline-size:0; padding:11px 14px; border:1px solid rgba(255,255,255,.25); border-radius:var(--afd-r-sm,12px); background-color:rgba(255,255,255,.1); color:#fff; font-family:inherit; font-size:14px; } .afdx .ere__single-property-map-directions .form-control::placeholder{ color:rgba(255,255,255,.6); } .afdx .ere__spmd-btn{ min-inline-size:48px; min-block-size:44px; border:0; border-radius:var(--afd-r-sm,12px); background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206); cursor:pointer; } /* ========================================================================== 10 · FAQ ========================================================================== */ .afdx .afd-faq__title{ margin:0 0 16px; color:var(--afdx-navy); font-size:clamp(19px,2.1vw,25px); font-weight:800; } .afdx .afd-faq__item{ background-color:var(--afdx-card); } /* ========================================================================== 11 · SIDEBAR CARDS ========================================================================== */ .afdx-card{ padding:18px; border:1px solid var(--afdx-line); border-radius:var(--afdx-radius); background-color:var(--afdx-card); box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } .afdx-card__title{ margin:0 0 14px; color:var(--afdx-navy); font-size:16px; font-weight:800; line-height:1.6; } /* ---- price card ---------------------------------------------------------- */ .afdx-card--price{ border-color:var(--gold-line,rgba(164,138,97,.38)); background-image:linear-gradient(180deg,rgba(164,138,97,.08) 0%,rgba(255,255,255,0) 62%); } .afdx-card__pricerow{ display:flex; flex-direction:column; gap:2px; padding-block-end:14px; border-block-end:1px solid var(--afdx-line); } .afdx-card__pricelabel{ color:var(--afdx-ink2); font-size:13px; } .afdx-card--price .ere__single-property-price, .afdx-card--price .ere-property-price, .afdx-card--price .property-price{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:0; color:var(--afdx-navy); font-size:26px; font-weight:800; line-height:1.35; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .afdx-card--price .property-price-prefix{ color:var(--afdx-ink2); font-size:13px; font-weight:600; } /* ---- spec list ----------------------------------------------------------- */ .afdx-spec{ margin:14px 0 0; } .afdx-spec__row{ display:grid; /* Narrow, fixed label column for the same reason as the main table: it buys the value enough width to stay on one line inside a 370px rail. */ grid-template-columns:minmax(0,7.5em) minmax(0,1fr); gap:4px 10px; align-items:baseline; padding-block:8px; border-block-end:1px dashed var(--afdx-line); font-size:13.5px; line-height:1.75; } .afdx-spec__row:last-child{ border-block-end:0; } .afdx-spec dt{ display:flex; align-items:center; gap:7px; margin:0; color:var(--afdx-ink2); font-size:13px; font-weight:600; } .afdx-spec dt i{ color:var(--afdx-gold); font-size:13px; } .afdx-spec dd{ margin:0; color:var(--afdx-navy); font-weight:700; overflow-wrap:anywhere; } .afdx-spec dd a{ color:inherit; text-decoration:none; } .afdx-spec dd a:hover{ text-decoration:underline; } .afdx-spec dd{ font-variant-numeric:tabular-nums; } /* ---- buttons ------------------------------------------------------------- */ .afdx-cta{ display:grid; grid-template-columns:1fr; gap:9px; margin-block-start:16px; } .afdx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-block-size:46px; padding:11px 20px; border:0; border-radius:var(--afd-r-pill,999px); font-family:inherit; font-size:14.5px; font-weight:800; line-height:1.5; text-align:center; text-decoration:none; cursor:pointer; transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease; } .afdx-btn:hover{ transform:translateY(-2px); } /* afdal-core.css defines a global :focus-visible ring, but this stylesheet must not depend on that plugin being switched on — these are the page's primary actions and they have to stay keyboard-visible on their own. */ .afdx-btn:focus-visible{ outline:2px solid var(--ring,var(--afd-gold-dark,#877152)); outline-offset:3px; } .afdx-btn--navy{ background-color:var(--afdx-navy); color:#fff !important; } .afdx-btn--navy:hover{ background-color:var(--afd-navy-deep,#03355A); } .afdx-btn--gold{ background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206) !important; box-shadow:var(--afd-sh-gold,0 18px 40px -20px rgba(164,138,97,.55)); } .afdx-btn--wa{ background-color:var(--afd-wa,#12803F); color:#fff !important; } .afdx-btn--wa:hover{ background-color:#0D6B34; } /* ---- agent mini card ----------------------------------------------------- */ .afdx-card--agent{ display:flex; align-items:center; gap:12px; } .afdx-agent__avatar{ flex:0 0 auto; inline-size:56px; block-size:56px; border-radius:50%; object-fit:cover; border:2px solid var(--afd-gold-pale,#E6D3AE); } .afdx-agent__body{ display:flex; flex-direction:column; gap:1px; min-inline-size:0; } .afdx-agent__role{ color:var(--afdx-ink2); font-size:12px; } .afdx-agent__name{ color:var(--afdx-navy); font-size:15px; font-weight:800; text-decoration:none; } .afdx-agent__name:hover{ text-decoration:underline; } .afdx-agent__pos{ color:var(--afdx-ink2); font-size:12.5px; } /* ========================================================================== 12 · FORMS — one look for CF7 and ERE's own form ========================================================================== */ .afdx-card--form{ border-color:var(--gold-line,rgba(164,138,97,.38)); background-image:linear-gradient(180deg,rgba(5,71,119,.04) 0%,rgba(255,255,255,0) 55%); } .afdx-form :is(p){ margin:0 0 11px; } .afdx-form label{ display:block; margin-block-end:6px; color:var(--afdx-ink); font-size:13px; font-weight:600; } .afdx-form :is( input[type=text],input[type=email],input[type=tel],input[type=url], input[type=number],input[type=date],select,textarea ), .afdx-form .wpcf7-form-control:not([type=submit]):not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):not(.wpcf7-checkbox){ inline-size:100%; min-block-size:44px; padding:11px 14px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); background-color:#fff; color:var(--afdx-ink); font-family:inherit; font-size:14px; line-height:1.8; transition:border-color .2s ease,box-shadow .2s ease; } .afdx-form textarea, .afdx-form textarea.wpcf7-form-control{ min-block-size:96px; resize:vertical; } .afdx-form :is(input,select,textarea)::placeholder{ color:var(--afdx-ink2); opacity:1; } .afdx-form :is(input,select,textarea):focus{ outline:none; border-color:var(--afdx-gold); box-shadow:0 0 0 4px rgba(164,138,97,.22); } .afdx-form select{ appearance:none; padding-inline-end:34px; } .afdx-form :is(input[type=submit],button[type=submit],.wpcf7-submit,.ere__btn-submit-contact-form){ inline-size:100%; min-block-size:48px; padding:12px 22px; border:0; border-radius:var(--afd-r-pill,999px); background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206); font-family:inherit; font-size:15px; font-weight:800; box-shadow:var(--afd-sh-gold,0 18px 40px -20px rgba(164,138,97,.55)); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; } .afdx-form :is(input[type=submit],button[type=submit],.wpcf7-submit):hover{ transform:translateY(-2px); box-shadow:0 22px 46px -18px rgba(164,138,97,.72); } /* CF7 status messages */ .afdx-form .wpcf7-response-output{ margin:12px 0 0 !important; padding:10px 14px !important; border:0 !important; border-inline-start:4px solid var(--afdx-navy) !important; border-radius:var(--afd-r-sm,12px); background-color:rgba(5,71,119,.06); font-size:13.5px; line-height:1.9; } .afdx-form .wpcf7-not-valid-tip{ color:var(--afd-danger,#B3261E); font-size:12.5px; } .afdx-form .wpcf7-spinner{ margin-inline:8px; } /* CF7 wraps fields in

    ; kill the doubled bottom gap it creates. */ .afdx-form .wpcf7-form > p:last-child{ margin-block-end:0; } /* ========================================================================== 13 · AGENT HERO ========================================================================== */ .afdx-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,32px); padding:clamp(22px,3vw,34px); border:1px solid var(--afdx-line); border-radius:var(--afd-r-lg,26px); background-color:var(--afdx-card); background-image:radial-gradient(circle 420px at 92% -20%,rgba(164,138,97,.16),rgba(164,138,97,0) 70%); box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } .afdx-hero__media{ flex:0 0 auto; } .afdx-hero__media img{ /* Substantially larger than the first pass: on this site an "agent" is almost always a DEVELOPER, and the logo is the brand signal people scan for. object-fit:contain (not cover) because a logo cropped to a square loses its wordmark — see the README if you switch these to photographs of individual consultants. */ inline-size:clamp(150px,20vw,240px); block-size:clamp(150px,20vw,240px); padding:16px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-lg,26px); object-fit:contain; background-color:#fff; box-shadow:0 10px 30px -18px rgba(5,71,119,.5); } .afdx-hero__body{ flex:1 1 320px; min-inline-size:0; } .afdx-hero__pos{ display:inline-flex; margin-block-end:12px; padding:5px 14px; border:1px solid var(--gold-line,rgba(164,138,97,.38)); border-radius:var(--afd-r-pill,999px); color:var(--afd-gold-dark,#877152); font-size:13px; font-weight:700; } .afdx-hero__stats{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-block:4px 14px; } .afdx-stat{ display:flex; flex-direction:column; } .afdx-stat__num{ color:var(--afdx-navy); font-size:22px; font-weight:800; line-height:1.4; } /* The agency value is a phrase ("سازندگان املاک در دبی"), not a number, so it gets prose sizing and room to wrap onto a second line. */ .afdx-stat--agency{ max-inline-size:22ch; } .afdx-stat--agency .afdx-stat__num{ font-size:14.5px; font-weight:700; line-height:1.7; } .afdx-stat--agency .afdx-stat__num a{ color:inherit; text-decoration:none; } .afdx-stat--agency .afdx-stat__num a:hover{ text-decoration:underline; } .afdx-stat__label{ color:var(--afdx-ink2); font-size:12.5px; } .afdx-hero__social{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:16px; } .afdx-hero__social a{ display:inline-grid; place-items:center; inline-size:38px; block-size:38px; border-radius:50%; background-color:rgba(5,71,119,.07); color:var(--afdx-navy); font-size:15px; text-decoration:none; transition:background-color .2s ease,color .2s ease,transform .2s ease; } .afdx-hero__social a:hover{ background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206); transform:translateY(-2px); } .afdx-hero__cta{ inline-size:auto; } /* ========================================================================== 14 · BOTTOM — listings grids, page footer meta ========================================================================== */ .afdx .ere__single-agent-property, .afdx .ere__single-agent-other-agent{ margin-block-start:clamp(28px,4vw,44px); } .afdx .ere-heading h2{ position:relative; margin:0 0 20px; padding-inline-start:16px; color:var(--afdx-navy); font-size:clamp(19px,2.1vw,25px); font-weight:800; } .afdx .ere-heading h2::before{ content:""; position:absolute; inset-inline-start:0; inset-block:4px; inline-size:4px; border-radius:var(--afd-r-pill,999px); background-image:var(--afd-grad-gold,linear-gradient(135deg,#A48A61 0%,#5E7A9A 100%)); } .afdx .ere-heading sub{ color:var(--afdx-ink2); font-weight:600; } .afdx-similar{ margin-block-start:clamp(28px,4vw,44px); } /* -------------------------------------------------------------------------- 14.1 · PROPERTY CARDS — full redesign -------------------------------------------------------------------------- Used by both "پروژه‌های مشابه" on a property page and the developer's own project grid on an agent page. ERE's markup, for reference: .ere-item-wrap.property-item .property-inner .property-image img .property-action gallery / favourite / compare .ere__loop-property-badge featured + labels .ere__loop-property-badge.ere__lpb-status status terms a.property-link EMPTY, covers the whole image .property-item-content .property-heading > .property-title, .property-price .property-location .property-element-inline type · developer · date .property-info > .property-info-inner size · beds · baths The two badge groups are separate siblings, which is why they previously collided in opposite corners. They are pinned to opposite EDGES here — labels top, statuses bottom over the scrim — so they can never overlap however many terms a listing carries. -------------------------------------------------------------------------- */ /* The shortcode grids use ERE's own float/row markup; give them a real grid so cards stay equal height and never straddle the rail column. */ .afdx .ere-property .property-content{ display:grid; /* 260px, not 285px. The developer's project grid lives INSIDE the main column, which at the 1024px breakpoint is only ~560px wide once the 370px rail is subtracted — at 285px that collapsed to a single column right where two still fit. 260px yields 2 columns at 1024px and 3 on a full-width row, which is what the shortcode asks for. */ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(16px,1.8vw,26px); margin:0; } .afdx .ere-property .ere-item-wrap{ inline-size:100%; max-inline-size:100%; flex:none; float:none; margin:0; padding:0; } .afdx .property-item{ block-size:100%; overflow:hidden; border:1px solid var(--afdx-line); border-radius:var(--afd-r,18px); background-color:var(--afdx-card); box-shadow:0 2px 10px rgba(5,71,119,.07); transition:transform .3s var(--afd-ease,cubic-bezier(.4,0,.2,1)), box-shadow .3s ease, border-color .3s ease; } .afdx .property-item:hover{ transform:translateY(-6px); border-color:var(--gold-line,rgba(164,138,97,.38)); box-shadow:0 24px 44px -22px rgba(5,71,119,.45); } /* The whole card is a link target; ring the CARD, never the inner anchor. */ .afdx .property-item:focus-within{ border-color:var(--afdx-gold); box-shadow:0 0 0 3px rgba(164,138,97,.4); } .afdx .property-item a:focus-visible{ outline:none; } .afdx .property-item .property-title a:focus-visible{ text-decoration:underline; } .afdx .property-inner{ display:flex; flex-direction:column; block-size:100%; } /* ---- media --------------------------------------------------------------- */ .afdx .property-image{ position:relative; overflow:hidden; /* Bigger, less letterboxed than the plugin's 330x180 default. The PHP side now requests 640x460 so the served file matches this box. */ aspect-ratio:4/3; background-color:rgba(5,71,119,.06); } .afdx .property-image img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; transition:transform .55s var(--afd-ease,cubic-bezier(.4,0,.2,1)); } .afdx .property-item:hover .property-image img{ transform:scale(1.06); } /* Scrim so bottom badges stay legible on any photo. */ .afdx .property-image::after{ content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:42%; pointer-events:none; background-image:linear-gradient(to top,rgba(2,31,56,.62),rgba(2,31,56,0)); } /* The overlay link is a hit area, not a surface — it must stay invisible. */ .afdx .property-link{ position:absolute; inset:0; z-index:3; display:block; background-color:transparent; border-radius:0; } /* ---- badges -------------------------------------------------------------- */ .afdx .ere__loop-property-badge{ position:absolute; z-index:4; inset-block-start:11px; inset-inline-start:11px; display:flex; flex-wrap:wrap; gap:5px; max-inline-size:calc(100% - 22px); margin:0; padding:0; } /* Status terms go to the opposite edge, over the scrim. */ .afdx .ere__loop-property-badge.ere__lpb-status{ inset-block-start:auto; inset-block-end:11px; } .afdx .ere__loop-property-badge-item{ display:inline-flex; align-items:center; margin:0; padding:0; border:0; border-radius:var(--afd-r-pill,999px); background-color:var(--ere-loop-property-badge-bg-color,rgba(2,31,56,.80)); background-image:none; color:#fff; font-size:11.5px; font-weight:700; line-height:1.85; letter-spacing:.01em; white-space:nowrap; box-shadow:0 2px 8px rgba(2,31,56,.32); } .afdx .ere__loop-property-badge-item .ere__lpbi-inner{ padding:4px 12px; } .afdx .ere__loop-property-badge-item.ere__featured{ background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206); } /* ERE's ribbon tail belongs to the old badge shape. */ .afdx .property-arrow, .afdx .property-label-arrow{ display:none; } /* ---- card actions -------------------------------------------------------- */ .afdx .property-item .property-action{ position:absolute; z-index:4; inset-block-start:11px; inset-inline-end:11px; display:flex; gap:6px; opacity:0; transform:translateY(-4px); transition:opacity .25s ease,transform .25s ease; } .afdx .property-item:hover .property-action, .afdx .property-item:focus-within .property-action{ opacity:1; transform:none; } .afdx .property-item .property-view-gallery, .afdx .property-item .ere-favorite, .afdx .property-item .ere-compare{ display:inline-grid; place-items:center; inline-size:34px; block-size:34px; border-radius:50%; background-color:rgba(255,255,255,.94); color:var(--afdx-navy); font-size:13px; box-shadow:0 2px 8px rgba(2,31,56,.25); } .afdx .property-item .property-view-gallery:hover, .afdx .property-item .ere-favorite:hover, .afdx .property-item .ere-compare:hover{ background-color:var(--afdx-gold); color:#fff; } @media (hover:none){ /* Touch devices never get :hover — keep the actions permanently visible. */ .afdx .property-item .property-action{ opacity:1; transform:none; } } /* ---- card body ----------------------------------------------------------- */ .afdx .property-item-content{ display:flex; flex:1 1 auto; flex-direction:column; gap:9px; padding:15px 17px 17px; } .afdx .property-heading{ display:flex; flex-direction:column; gap:7px; margin:0; } .afdx .property-title{ margin:0; font-size:16px; font-weight:800; line-height:1.65; } .afdx .property-title a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--afdx-navy); text-decoration:none; transition:color .2s ease; } .afdx .property-title a:hover{ color:var(--afd-gold-dark,#877152); } .afdx .property-item .property-price{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:0; padding:0; border:0; background:none; color:var(--afd-gold-dark,#877152); font-size:17px; font-weight:800; line-height:1.5; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .afdx .property-item .property-price-prefix{ color:var(--afdx-ink2); font-size:12px; font-weight:600; } .afdx .property-location, .afdx .property-element-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; margin:0; color:var(--afdx-ink2); font-size:12.5px; line-height:1.9; } .afdx .property-location i, .afdx .property-element-inline i{ color:var(--afdx-gold); margin-inline-end:4px; } .afdx .property-element-inline a{ color:var(--afdx-ink2); text-decoration:none; } .afdx .property-element-inline a:hover{ color:var(--afdx-navy); text-decoration:underline; } .afdx .property-excerpt{ display:none; } /* the grid is for scanning, not reading */ /* Hide the listing date ("۸ ماه قبل"). It ages the listing in the reader's mind without helping them choose, and off-plan projects are sold for years. */ .afdx .property-item .property-date{ display:none; } /* THE GOLD BAR. Not ours. The PARENT THEME paints it, in style-rtl.css around line 486: it sets `background-color: #c3a157 !important` on .property-info for the grid, list and carousel layouts. That selector is (0,2,0) and carries !important, so it can only be undone by a longer selector that is also !important — which is what the block below is. Scoped to .afdx, so the archive and homepage grids keep the theme's existing look. */ .afdx .property-item .property-info, .afdx .ere-property.property-grid .property-info, .afdx .ere-property.property-list .property-info, .afdx .ere-property.property-carousel .owl-item:nth-child(2n-1) .property-info{ background-color:transparent !important; background-image:none !important; } /* size · beds · baths, pinned to the bottom so every card ends alike */ .afdx .property-item .property-info{ margin-block-start:auto; padding-block-start:11px; border-block-start:1px solid var(--afdx-line); } .afdx .property-item .property-info-inner{ display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:flex-start; } .afdx .property-item .ere__loop-property-info-item{ display:inline-flex; align-items:center; gap:6px; color:var(--afdx-ink); font-size:12.5px; } .afdx .property-item .ere__loop-property-info-item i{ inline-size:auto; block-size:auto; margin:0; padding:0; background:none; border-radius:0; color:var(--afdx-gold); font-size:13px; } .afdx .property-item .ere__lpi-content{ display:inline-flex; align-items:baseline; gap:4px; } .afdx .property-item .ere__lpi-value{ font-weight:700; color:var(--afdx-navy); } .afdx .property-item .ere__lpi-label{ color:var(--afdx-ink2); font-size:11.5px; } /* THE BROKEN "AREA" ICON. ERE's size partial prints . That name existed in Font Awesome 4 but was renamed in FA6 (fa-arrows-up-down-left-right), so on any page served the newer build the glyph resolves to nothing and the browser paints a missing-character box — the garbled icon in the cards. Rather than bet on which FA build wins on a given route, the glyph is switched off and replaced with a drawn square, which reads as "area" and cannot break. Applies in the cards, the spec table and the action bar. */ .afdx i.fa-arrows{ position:relative; display:inline-block; inline-size:1em; block-size:1em; font-size:13px; line-height:1; vertical-align:-1px; } .afdx i.fa-arrows::before{ content:""; position:absolute; inset:1px; border:1.5px solid currentColor; border-radius:2px; } /* In the header action bar the icon sits inside a filled tile, so it needs to be a touch larger to stay balanced. */ .afdx__actionbar i.fa-arrows{ font-size:16px; } .afdx .ere__single-property-info-footer{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; padding:14px 0 0; border:0; border-block-start:1px solid var(--afdx-line); background:transparent; box-shadow:none; color:var(--afdx-ink2); font-size:13.5px; } .afdx .ere__single-property-info-footer i{ color:var(--afdx-gold); margin-inline-end:5px; } /* Reviews / comments */ .afdx #comments, .afdx .ere__single-property-review{ padding:var(--afdx-pad); margin:0; border:1px solid var(--afdx-line); border-radius:var(--afdx-radius); background-color:var(--afdx-card); box-shadow:var(--afd-sh-sm,0 2px 10px rgba(5,71,119,.08)); } .afdx .comment-reply-title, .afdx .comments-title{ margin:0 0 16px; color:var(--afdx-navy); font-size:clamp(18px,2vw,22px); font-weight:800; } .afdx .comment-list{ margin:0 0 20px; padding:0; list-style:none; } .afdx .comment-list .comment{ padding:14px 16px; margin-block-end:12px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); background-color:var(--afd-bg,#F5F5F5); } .afdx .comment-form :is(input,textarea){ inline-size:100%; min-block-size:44px; padding:11px 14px; margin-block-end:12px; border:1px solid var(--afdx-line); border-radius:var(--afd-r-sm,12px); font-family:inherit; font-size:14px; } .afdx .comment-form :is(input,textarea):focus{ outline:none; border-color:var(--afdx-gold); box-shadow:0 0 0 4px rgba(164,138,97,.22); } .afdx .comment-form input[type=submit]{ inline-size:auto; min-block-size:48px; padding:12px 30px; border:0; border-radius:var(--afd-r-pill,999px); background-image:var(--afd-grad-gold-2,linear-gradient(135deg,#A48A61,#9D8375)); color:var(--afd-onGold,#1B1206); font-weight:800; cursor:pointer; } /* ========================================================================== 15 · MOBILE STICKY ACTION BAR (built by ere-single.js) ---------------------------------------------------------------------------- Below 1024px the rail un-sticks and drops to the end of the document, so the primary action would otherwise be ~4000px down the page. The bar re-surfaces it. It clones values already on the page; it never invents a number, and it is not rendered at all when no phone number exists. ========================================================================== */ .afdx-bar{ position:fixed; inset-inline:0; inset-block-end:0; z-index:9000; display:flex; gap:9px; padding:9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background-color:rgba(255,255,255,.97); border-block-start:1px solid var(--line,rgba(5,71,119,.12)); box-shadow:0 -8px 24px rgba(2,31,56,.13); transform:translateY(110%); transition:transform .28s ease; } .afdx-bar.is-visible{ transform:translateY(0); } .afdx-bar a{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-block-size:46px; border-radius:var(--afd-r-pill,999px); font-size:14px; font-weight:800; text-decoration:none; } .afdx-bar__call{ background-color:var(--afd-navy,#054777); color:#fff !important; } .afdx-bar__wa{ background-color:var(--afd-wa,#12803F); color:#fff !important; } .afdx-bar__form{ border:1.5px solid var(--afd-gold,#A48A61); color:var(--afd-navy,#054777) !important; background-color:transparent; } @media (min-width:1024px){ .afdx-bar{ display:none; } } body.afdx-has-bar{ padding-block-end:70px; } @media (min-width:1024px){ body.afdx-has-bar{ padding-block-end:0; } } /* ========================================================================== 16 · MOTION — CSS only, never gates content on JS ========================================================================== */ /* Toned down from the previous revision. The old keyframe started at opacity:0 and ran until `cover 18%`, which meant a section was still partly transparent well after it had entered the viewport — read as the whole page body being washed out or blurry while scrolling. Now it starts at 0.72 and finishes during the entry phase, so it registers as a gentle settle rather than a fade-in. Cards are no longer animated at all: a grid of them fading at slightly different times was the most exaggerated part. */ @keyframes afdx-rise{ from{ opacity:.72; transform:translateY(8px); } } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .afdx-sec{ animation:afdx-rise linear both; animation-timeline:view(); animation-range:entry 0% entry 65%; } } } /* ========================================================================== 17 · RESPONSIVE FINE-TUNING ========================================================================== */ @media (max-width:1023px){ /* Rail content is still valuable on tablet/phone — show it as normal flow cards directly under the gallery region rather than at the very end. */ .afdx__side-inner{ gap:14px; } .afdx__layout{ gap:20px; } } @media (max-width:640px){ .afdx__titlerow{ gap:12px; } .afdx__pricecol{ inline-size:100%; } .afdx__actionbar{ align-items:flex-start; flex-direction:column; gap:14px; } .afdx__actionbar .property-info-inner{ gap:12px 20px; } .afdx__actionbar .ere__loop-property-info-item i{ inline-size:36px; block-size:36px; font-size:14px; } .afdx-sec{ padding:16px; } .afdx-hero{ text-align:start; } .afdx-hero__stats{ gap:10px 20px; } .afdx-hero__cta{ inline-size:100%; } } /* Nothing on these pages may cause a sideways scroll. */ .afdx img, .afdx iframe, .afdx video{ max-inline-size:100%; }