/* ═══════════════════════════════════════════════════════════════════════════ JJNRE — Shared UI tokens & normalization layer Loaded LAST in on every public page AND the IDX listing template (listing.html), so it propagates to all generated /homes-for-sale/ pages. Scope: spacing, alignment, containment, component sizing ONLY. Brand colors (#eb1d25 / #003964) and fonts (Bebas Neue / DM Sans) are intentionally NOT redefined here — they remain exactly as each page sets them. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Spacing scale: 4px (0.25rem) base unit ─────────────────────────────── */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:1.75rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-14:3.5rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; /* ── Layout tokens (single source of truth, static + IDX) ───────────────── */ --section-y:2.5rem; /* vertical rhythm between page sections */ --gutter:2rem; /* container side gutter, desktop */ --max-w:1200px; /* content max-width */ --btn-pad:.8rem 2rem; /* standard button padding */ --modal-pad:2rem 1.75rem;/* modal internal padding (snapped from 1.8rem) */ } @media (max-width:768px){ :root{ --gutter:1.25rem; } /* one mobile gutter everywhere */ } /* ── 1. SECTION RHYTHM — identical on static pages and IDX template ─────── Static pages used 6rem (index) vs 5.5rem (all inner pages). Standardized UP to the flagship 6rem pattern. padding-top/bottom only, so any horizontal padding a page sets is untouched. */ .section, .section-alt, .section-pad{ padding-top:var(--section-y); padding-bottom:var(--section-y); } /* ── 2. CONTAINERS — one max-width and one gutter for both page families ── .container (static pages, was 0 2rem → 0 1.25rem mobile) .wrap (IDX template + browse, was 0 1.5rem, no mobile step) Both now share identical gutters at every breakpoint. NOTE: 404.html has its own narrow .wrap card and does NOT load this file. */ .container, .wrap{ max-width:var(--max-w); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); } /* ── 3. COMPONENT NORMALIZATION ──────────────────────────────────────────── Buttons: agents.html (.7rem 1.75rem) and areas.html (.75rem 1.75rem) drift from the site standard (.8rem 2rem). One size for the type. */ .btn{ padding:var(--btn-pad); } /* Modals: identical internal padding everywhere, snapped to scale, plus a small-viewport guard so tall modals scroll instead of clipping. Overlay already provides 1.5rem outer padding and flex centering. */ .contact-modal, .email-modal{ padding:var(--modal-pad); max-height:calc(100vh - 3rem); overflow-y:auto; } /* ── 4. IDX TEMPLATE VALUES SNAPPED TO THE 4px SCALE ────────────────────── (template-level: propagates to every generated listing page) */ .lp-agents{ padding:2.5rem 0 3rem; } /* was 2.6rem 0 2.8rem (off-scale) */ /* ── 5. OVERFLOW & CONTAINMENT HARDENING ────────────────────────────────── index.html already sets overflow-x:hidden; the other pages did not. Media elements may never exceed their container. height intentionally NOT forced to auto, so fixed-size thumbs/avatars keep their dimensions. */ html, body{ overflow-x:hidden; } img, svg, video, iframe, embed{ max-width:100%; } table{ max-width:100%; } /* Dynamic Supabase-fed text (long addresses, remarks, emails) must wrap instead of pushing its container wide. Applied at template level. */ .lp-body, .lp-title, .lp-address, .lp-remarks, .lp-doc, .cp-val{ overflow-wrap:break-word; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE OPTIMIZATION LAYER — appended by the mobile pass. Additive rules only; loaded by all public pages and the IDX template, so every generated listing page inherits these on the next deploy. ═══════════════════════════════════════════════════════════════════════════ */ /* ── M1. iOS zoom-on-focus prevention ───────────────────────────────────── Inputs under 16px make iOS Safari zoom the page when focused. Several inputs run .88–.95rem (14–15px). Forced to 16px on small screens only; desktop sizing untouched. */ @media (max-width:768px){ input, select, textarea{ font-size:16px !important; } } /* ── M2. Footer collapse ────────────────────────────────────────────────── .footer-grid stopped at 2 columns (set at 1024px) all the way down to 320px, cramping small phones. Single column below 480px. */ @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } } /* ── M3. IDX rec-reel arrows: no bleed on mobile ────────────────────────── .lp-rec-arrow.prev/.next sit 10px OUTSIDE the container (left/right:-10px). With narrow viewports they clip at the screen edge. Pulled inside the container on small screens. Template-level: applies to every listing page. */ @media (max-width:768px){ .lp-rec-arrow.prev{ left:4px; } .lp-rec-arrow.next{ right:4px; } } /* ── M4. Touch-target ergonomics (44x44 minimum on touch devices) ───────── Applied only for coarse pointers so desktop visuals are unchanged. - Carousel/nav circle buttons were 38–40px → 44px - Hamburger was ~34px total → padding raised to 44px - Modal close was a bare ~26px glyph → padded to ~44px - 6px pagination dots get an invisible expanded hit area (::after), visual size unchanged. */ @media (pointer:coarse){ .area-nav-btn, .fact-nav-btn, .rm-nav-btn{ width:44px; height:44px; } .nav-burger{ padding:11px; } .contact-modal-close{ padding:.6rem; } .area-dot, .rm-dot{ position:relative; } .area-dot::after, .rm-dot::after{ content:''; position:absolute; inset:-9px; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE PASS 2 — accessibility & width fixes + featured-listings carousel ═══════════════════════════════════════════════════════════════════════════ */ /* ── M5. Homepage featured listings: horizontal swipe on mobile ─────────── Was a vertical grid stack; also its 290px min column overflowed 320px screens. Now a swipeable snap carousel; desktop grid unchanged. */ @media (max-width:900px){ .fl-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; padding:0 0 .9rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .fl-card{ flex:0 0 82%; max-width:330px; scroll-snap-align:center; } /* Subtitle was white-space:nowrap (inline) and overflowed below ~740px */ .fl-subtitle{ white-space:normal !important; } } /* ── M6. Listing template: dynamic values may wrap on small screens ─────── These carried white-space:nowrap with no ellipsis; long Supabase values (prices, quick stats, income figures) forced horizontal overflow. */ @media (max-width:768px){ .lp-price, .lp-qs .v, .lp-qs .l, .lp-income-card .v, .lp-income-card .l, .lp-rec-price{ white-space:normal; } } /* ── M7. Listing address is now an

(was a div; page had no h1). ────── listing.html has no universal margin reset, so pin the UA h1 defaults. */ h1.lp-addr{ margin:.3rem 0 0; font-size:1.15rem; font-weight:600; line-height:1.3; } @media (max-width:768px){ h1.lp-addr{ font-size:1.05rem; } } /* ── M8. Skip link (added to listing.html + browse.html; matches index) ── */ .skip-link{ position:absolute; left:-999px; top:0; z-index:10000; background:#003964; color:#fff; padding:10px 18px; border-radius:0 0 6px 0; font-family:inherit; font-size:.9rem; text-decoration:none; } .skip-link:focus{ left:0; } /* ── M9. MOBILE ONLY: service-page agent marquee forced ~5600px layout width ─ .astrip-track is width:max-content (64 tiles) inside a grid item with no minimum-size guard, so the intro grid, and the whole page, laid out at the track's width on phones. Zeroing the grid item's automatic minimum contains it. Desktop untouched. */ @media (max-width:768px){ .astrip-section{ min-width:0; max-width:100%; overflow:hidden; } } /* ── Sitewide house signature: trailing period on eyebrow labels ── Matches the CRM's UPPERCASE-period style. Labels are already text-transform:uppercase per-page; this adds the period via ::after so no HTML content changes and no layout risk. */ .label::after, .county-label::after{ content:"."; } /* ── Sitewide subtle background art ─────────────────────────────────────── Adds a very faint geometric line motif + soft radial glows behind dark sections. Uses ::before (glows) and ::after (line pattern) so no extra markup is required — just add class "bg-art" to a section. The pattern POSITION is offset per section via nth-of-type so two stacked bg-art sections never tile in alignment (avoids the visible repeat). */ .bg-art{position:relative;overflow:hidden;} .bg-art > *{position:relative;z-index:1;} /* Soft corner glow (::before) + a distinct abstract motif (::after) per section. Each nth-of-type gets a COMPLETELY different pattern so stacked sections never read as one continuous repeat. Patterns are full-bleed, non-tiling (no-repeat), sized to cover so no seam shows. */ .bg-art::before{content:'';position:absolute;pointer-events:none;z-index:0;top:-12rem;right:-10rem;width:34rem;height:34rem;border-radius:50%;filter:blur(2px); background:radial-gradient(circle at center, rgba(235,29,37,.10), rgba(235,29,37,0) 70%);} .bg-art::after{content:'';position:absolute;pointer-events:none;z-index:0;inset:0;opacity:.55;background-repeat:no-repeat;background-size:cover;background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.2'%3E%3Cpath d='M120 250 L280 90 L440 250 L280 410 Z'/%3E%3Cpath d='M360 250 L520 90 L680 250 L520 410 Z'/%3E%3Ccircle cx='280' cy='250' r='120'/%3E%3Ccircle cx='520' cy='250' r='120'/%3E%3C/g%3E%3C/svg%3E");} .bg-art:nth-of-type(2)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.2'%3E%3Ccircle cx='740' cy='60' r='120'/%3E%3Ccircle cx='740' cy='60' r='220'/%3E%3Ccircle cx='740' cy='60' r='320'/%3E%3Ccircle cx='740' cy='60' r='420'/%3E%3Ccircle cx='60' cy='440' r='140'/%3E%3Ccircle cx='60' cy='440' r='240'/%3E%3C/g%3E%3C/svg%3E");} .bg-art:nth-of-type(2)::before{right:auto;left:-10rem;top:auto;bottom:-12rem; background:radial-gradient(circle at center, rgba(120,160,210,.09), rgba(120,160,210,0) 70%);} .bg-art:nth-of-type(3)::after{opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'%3E%3Cpath d='M-100 100 L900 -100 M-100 250 L900 50 M-100 400 L900 200 M-100 550 L900 350'/%3E%3Cpath d='M-100 -50 L900 150 M-100 100 L900 300 M-100 250 L900 450 M-100 400 L900 600'/%3E%3C/g%3E%3C/svg%3E");} .bg-art:nth-of-type(3)::before{ background:radial-gradient(circle at center, rgba(235,29,37,.08), rgba(235,29,37,0) 70%);} .bg-art:nth-of-type(4)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='90' cy='80' r='3'/%3E%3Ccircle cx='210' cy='150' r='2'/%3E%3Ccircle cx='340' cy='70' r='3'/%3E%3Ccircle cx='470' cy='170' r='2'/%3E%3Ccircle cx='600' cy='90' r='3'/%3E%3Ccircle cx='720' cy='180' r='2'/%3E%3Ccircle cx='150' cy='300' r='2'/%3E%3Ccircle cx='300' cy='360' r='3'/%3E%3Ccircle cx='450' cy='320' r='2'/%3E%3Ccircle cx='620' cy='380' r='3'/%3E%3Ccircle cx='730' cy='320' r='2'/%3E%3Ccircle cx='80' cy='430' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.2'%3E%3Ccircle cx='560' cy='300' r='150'/%3E%3Ccircle cx='180' cy='150' r='90'/%3E%3C/g%3E%3C/svg%3E");} .bg-art:nth-of-type(4)::before{right:auto;left:-10rem;top:auto;bottom:-12rem; background:radial-gradient(circle at center, rgba(120,160,210,.08), rgba(120,160,210,0) 70%);} .bg-art:nth-of-type(5)::after{opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.2'%3E%3Cpath d='M-20 120 C160 60 320 180 480 120 S760 60 900 120'/%3E%3Cpath d='M-20 220 C160 160 320 280 480 220 S760 160 900 220'/%3E%3Cpath d='M-20 320 C160 260 320 380 480 320 S760 260 900 320'/%3E%3Cpath d='M-20 420 C160 360 320 480 480 420 S760 360 900 420'/%3E%3C/g%3E%3C/svg%3E");} .bg-art:nth-of-type(5)::before{ background:radial-gradient(circle at center, rgba(235,29,37,.09), rgba(235,29,37,0) 70%);} .bg-art:nth-of-type(6n)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.3'%3E%3Ccircle cx='400' cy='250' r='80'/%3E%3Ccircle cx='400' cy='250' r='170'/%3E%3Ccircle cx='400' cy='250' r='260'/%3E%3Cpath d='M400 -40 L400 540 M110 250 L690 250'/%3E%3C/g%3E%3C/svg%3E");} /* ── LIGHT-SECTION VARIANT ─────────────────────────────────────────────── Same abstract motifs for cream / light sections, but drawn in NAVY instead of white so the art is actually visible on a light background. Add BOTH classes to a light section: class="... bg-art bg-art-light". The navy line opacity is tuned a touch higher than the dark set (navy on cream needs a little more presence) while staying subtle enough to sit behind text. */ .bg-art-light::before{ background:radial-gradient(circle at center, rgba(235,29,37,.06), rgba(235,29,37,0) 70%);} .bg-art-light::after{opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M120 250 L280 90 L440 250 L280 410 Z'/%3E%3Cpath d='M360 250 L520 90 L680 250 L520 410 Z'/%3E%3Ccircle cx='280' cy='250' r='120'/%3E%3Ccircle cx='520' cy='250' r='120'/%3E%3C/g%3E%3C/svg%3E");} .bg-art-light:nth-of-type(2)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.055' stroke-width='1.2'%3E%3Ccircle cx='740' cy='60' r='120'/%3E%3Ccircle cx='740' cy='60' r='220'/%3E%3Ccircle cx='740' cy='60' r='320'/%3E%3Ccircle cx='740' cy='60' r='420'/%3E%3Ccircle cx='60' cy='440' r='140'/%3E%3Ccircle cx='60' cy='440' r='240'/%3E%3C/g%3E%3C/svg%3E");} .bg-art-light:nth-of-type(2)::before{right:auto;left:-10rem;top:auto;bottom:-12rem; background:radial-gradient(circle at center, rgba(0,57,100,.05), rgba(0,57,100,0) 70%);} .bg-art-light:nth-of-type(3)::after{opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M-100 100 L900 -100 M-100 250 L900 50 M-100 400 L900 200 M-100 550 L900 350'/%3E%3Cpath d='M-100 -50 L900 150 M-100 100 L900 300 M-100 250 L900 450 M-100 400 L900 600'/%3E%3C/g%3E%3C/svg%3E");} .bg-art-light:nth-of-type(3)::before{ background:radial-gradient(circle at center, rgba(235,29,37,.05), rgba(235,29,37,0) 70%);} .bg-art-light:nth-of-type(4)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23003964' fill-opacity='0.06'%3E%3Ccircle cx='90' cy='80' r='3'/%3E%3Ccircle cx='210' cy='150' r='2'/%3E%3Ccircle cx='340' cy='70' r='3'/%3E%3Ccircle cx='470' cy='170' r='2'/%3E%3Ccircle cx='600' cy='90' r='3'/%3E%3Ccircle cx='720' cy='180' r='2'/%3E%3Ccircle cx='150' cy='300' r='2'/%3E%3Ccircle cx='300' cy='360' r='3'/%3E%3Ccircle cx='450' cy='320' r='2'/%3E%3Ccircle cx='620' cy='380' r='3'/%3E%3Ccircle cx='730' cy='320' r='2'/%3E%3Ccircle cx='80' cy='430' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.05' stroke-width='1.2'%3E%3Ccircle cx='560' cy='300' r='150'/%3E%3Ccircle cx='180' cy='150' r='90'/%3E%3C/g%3E%3C/svg%3E");} .bg-art-light:nth-of-type(4)::before{right:auto;left:-10rem;top:auto;bottom:-12rem; background:radial-gradient(circle at center, rgba(0,57,100,.045), rgba(0,57,100,0) 70%);} .bg-art-light:nth-of-type(5)::after{opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M-20 120 C160 60 320 180 480 120 S760 60 900 120'/%3E%3Cpath d='M-20 220 C160 160 320 280 480 220 S760 160 900 220'/%3E%3Cpath d='M-20 320 C160 260 320 380 480 320 S760 260 900 320'/%3E%3Cpath d='M-20 420 C160 360 320 480 480 420 S760 360 900 420'/%3E%3C/g%3E%3C/svg%3E");} .bg-art-light:nth-of-type(5)::before{ background:radial-gradient(circle at center, rgba(235,29,37,.05), rgba(235,29,37,0) 70%);} .bg-art-light:nth-of-type(6n)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23003964' stroke-opacity='0.055' stroke-width='1.3'%3E%3Ccircle cx='400' cy='250' r='80'/%3E%3Ccircle cx='400' cy='250' r='170'/%3E%3Ccircle cx='400' cy='250' r='260'/%3E%3Cpath d='M400 -40 L400 540 M110 250 L690 250'/%3E%3C/g%3E%3C/svg%3E");} @media (max-width:700px){.bg-art::before{width:20rem;height:20rem;}} /* ── Canonical compact footer (identical sitewide) ─────────────────────── Overrides per-page footer grids so every page shares one balanced 4-column layout: Brand / Services / Explore / Company. Loaded last, so it wins. */ footer .footer-grid{ display:grid !important; grid-template-columns:1.6fr 1fr 1fr 1fr !important; gap:2.5rem !important; justify-items:center;text-align:center; align-items:start; margin-bottom:2.5rem !important; max-width:var(--max-w);margin-left:auto;margin-right:auto; } footer .footer-col ul{list-style:none;padding:0;margin:0;} footer .footer-col li{margin-bottom:.55rem;} @media (max-width:900px){ footer .footer-grid{grid-template-columns:1fr 1fr !important;gap:2rem !important;} footer .footer-brand{grid-column:1 / -1;} } @media (max-width:560px){ footer .footer-grid{grid-template-columns:1fr !important;} } /* ── Agent bio review carousel (beside the biography) ──────────────────── When an agent has reviews, the bio section becomes a two-column layout: biography on one side, a clickable arrow-navigated review card on the other. Injected by the per-page reviews script; if the agent has no reviews the layout is untouched. */ .agent-bio-section.has-reviews .container{ display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center; max-width:1100px;margin-left:auto;margin-right:auto;text-align:left; } .agent-bio-section.has-reviews .bio-text{min-width:0;} .agent-bio-section.has-reviews .bio-text .label, .agent-bio-section.has-reviews .bio-text h2, .agent-bio-section.has-reviews .bio-text .red-rule{text-align:left !important;margin-left:0 !important;margin-right:0 !important;} .agent-reviews{min-width:0;} .agent-reviews-head{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red,#eb1d25);margin-bottom:.9rem;font-weight:600;text-align:left;} .arev-card{position:relative;background:var(--navy-mid,#002d50);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.7rem 1.6rem;min-height:230px;display:flex;flex-direction:column;} .arev-stars{color:var(--red,#eb1d25);font-size:.9rem;letter-spacing:.14em;margin-bottom:.8rem;} .arev-text{font-size:.84rem;line-height:1.7;color:rgba(245,242,237,.82);font-weight:300;margin-bottom:1rem;flex:1;} .arev-name{font-size:.8rem;font-weight:600;color:#fff;} .arev-meta{font-size:.66rem;color:rgba(245,242,237,.45);margin-top:.3rem;line-height:1.4;} .arev-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;gap:1rem;} .arev-dots{display:flex;gap:.35rem;flex-wrap:wrap;} .arev-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .2s;} .arev-dot.on{background:var(--red,#eb1d25);} .arev-btns{display:flex;gap:.5rem;} .arev-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,transform .2s;} .arev-btn:hover{border-color:var(--red,#eb1d25);background:rgba(235,29,37,.12);} .arev-btn:active{transform:scale(.94);} @media(max-width:820px){ .agent-bio-section.has-reviews .container{grid-template-columns:1fr;gap:2rem;} } /* ══════════════════════════════════════════════════════════════════════════ Mobile audit (Jul 2026): tap-target sizing at phone widths. Verified against live geometry: footer links measured 16px tall, agent contact links 17-18px, category chips 29px, market-insight dots 6px, and Leaflet zoom controls 30px. Fixes below expand hit areas mostly through padding with compensating negative margins so the visual rhythm holds. !important is used only where later inline page styles would otherwise win the cascade at equal specificity. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:768px){ /* Footer link lists and phone number: comfortable one-thumb rows */ .footer-col a{ display:inline-block; padding:.5rem .6rem !important; margin:-.3rem 0; } .footer-phone{ display:inline-block; padding:.5rem .75rem !important; } .social-icon{ width:44px !important; height:44px !important; } /* Agent directory cards and agent page hero: phone and email links */ .agent-card-contacts a, .agent-contact-line a, .aph-contact-val a, .bc-value a{ display:inline-block; padding:.55rem .45rem !important; margin:-.35rem 0; } /* Category chips on agent pages and the listings hub */ .nl-chip{ padding:.7rem 1rem !important; } /* Market insights carousel: larger dots plus a deeper invisible hit area */ .rm-dot{ width:11px !important; height:11px !important; } .rm-dot::after{ inset:-13px !important; } .rm-town-toggle{ padding:.8rem .9rem !important; } /* Mobile nav drawer: pages already set min-height:44px on these links, but anchors are inline by default so min-height never applied. Flex makes the existing rule take effect and vertically centers the label. */ .nav-drawer a{ display:flex; align-items:center; min-height:44px; } /* Leaflet map zoom controls on the listing page */ .leaflet-control-zoom a{ width:40px !important; height:40px !important; line-height:40px !important; } } /* ── Abstract background art removed sitewide (per request) ─────────────── Neutralizes the decorative hero topo SVG, the .bg-art-lines motif divs, and the .bg-art / .bg-art-light glow+pattern pseudo-elements on every page in one place. Layout-neutral rules (position/overflow) are left intact so nothing shifts; only the visuals are hidden. Reversible by deleting this block. */ .hero-topo, .bg-art-lines, .bg-art > .bg-art-lines{ display:none !important; } .bg-art::before, .bg-art::after, .bg-art-light::before, .bg-art-light::after{ display:none !important; content:none !important; background-image:none !important; }