/* Theme Name: Beard | MET Railroad Theme URI: https://beardland.com Author: Arranca + MHD Author URI: https://arranca.io Description: An Elementor-ready WordPress theme for Beard Land & Investment Company and Modesto & Empire Traction Company (MET Railroad). Full-bleed imagery with text overlays, image/text split blocks, stat bands, accordions and a rail-history timeline. Built to be edited with Elementor (free or Pro) while shipping native PHP templates and a Properties custom post type. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: beard-met Tags: business, real-estate, elementor, custom-colors, custom-menu, custom-logo, featured-images, full-width-template */ /* ============================================================= BEARD | MET RAILROAD — DESIGN SYSTEM Brand: Beard (deep forest green) + MET (railroad red) ============================================================= */ :root{ /* Brand palette */ --beard-green: #1B3A28; --beard-green-dark: #122A1C; --beard-green-soft: #2A4D38; --met-red: #C42032; --met-red-dark: #A0182A; /* Neutrals */ --ink: #4E3737; --ink-soft: #4E3737; --muted: #6B6B66; --cream: #F4F2EC; --cream-2: #ECE9E1; --line: #D8D6CE; --white: #FFFFFF; /* ----------------------------------------------------------------- SEMANTIC BRAND TOKENS — the brand toggle works off these. Defaults reproduce the current mixed identity exactly: accent (eyebrows, dividers, stat numbers, links) = MET red solid (full-colour section / band backgrounds) = Beard green Apply .brand-beard or .brand-met on the , a section, or any element to re-map them for everything inside. ----------------------------------------------------------------- */ --accent: var(--met-red); --accent-dark: var(--met-red-dark); --solid: var(--beard-green); --solid-dark: var(--beard-green-dark); /* Typography */ --font-head: "EB Garamond", Georgia, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Rhythm */ --container: 1200px; --container-wide: 1400px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(56px, 8vw, 120px); --radius: 4px; } /* ============================================================= BRAND VARIANTS — green (Beard) vs red (MET) Usable at any scope: , a section, or a single component. Everything inside inherits the re-mapped accent and solid colours via the cascade. ============================================================= */ .brand-beard{ --accent: var(--beard-green); --accent-dark: var(--beard-green-dark); --solid: var(--beard-green); --solid-dark: var(--beard-green-dark); } .brand-met{ --accent: var(--met-red); --accent-dark: var(--met-red-dark); --solid: var(--met-red); --solid-dark: var(--met-red-dark); } /* ---------- Reset-ish ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* Contain the off-canvas mobile nav (position:fixed, parked at translateX(100%) off the right edge). A fixed element is positioned against the viewport, so body overflow can't clip it — only the root can. `clip` rather than `hidden` because clip does NOT create a scroll container, so the sticky site header keeps working. */ overflow-x:clip; } body{ margin:0; font-family:var(--font-body); font-size:17px; line-height:1.65; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Belt-and-braces with the root clip above; harmless on its own. */ overflow-x:clip; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--accent); text-decoration:none; transition:color .2s ease, opacity .2s ease; } a:hover{ color:var(--accent-dark); } /* ---------- Typography ---------- */ h1{ font-family:var(--font-head); font-weight:400; line-height:1.12; color:var(--ink); margin:0 0 .5em; letter-spacing:-0.01em; } h2,h3,h4,h5,h6{ font-family:var(--font-body); font-weight:500; line-height:1.12; color:var(--ink); margin:0 0 .5em; letter-spacing:-0.01em; } h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); } h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); } h3{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); } h4{ font-size:1.25rem; } p{ margin:0 0 1.2em; } p:last-child{ margin-bottom:0; } .eyebrow, .pre-header{ font-family:var(--font-body); font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem; display:block; } .eyebrow--green{ color:var(--beard-green); } .eyebrow--red{ color:var(--met-red); } /* ---------- Layout helpers ---------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .container--wide{ max-width:var(--container-wide); } .container--narrow{ max-width:820px; } .section{ padding-block:var(--section-y); } .section--cream{ background:var(--cream); } /* Full-colour band — follows the active --solid (green by default, red under .brand-met) */ .section--green, .section--solid{ background:var(--solid); color:var(--white); } .section--tight{ padding-block:clamp(32px,5vw,64px); } .text-center{ text-align:center; } .lede{ font-size:1.15rem; color:var(--ink-soft); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-body); font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.95em 1.8em; border-radius:40px; border:2px solid transparent; cursor:pointer; transition:all .2s ease; line-height:1; } .btn .arrow{ transition:transform .2s ease; } .btn:hover .arrow{ transform:translateX(4px); } .btn--primary{ background:var(--beard-green); color:var(--white); } .btn--primary:hover{ background:var(--beard-green-dark); color:var(--white); } .btn--red{ background:var(--met-red); color:var(--white); } .btn--red:hover{ background:var(--met-red-dark); color:var(--white); } /* Brand-aware button — follows the active --accent (green or red) */ .btn--accent{ background:var(--accent); color:var(--white); } .btn--accent:hover{ background:var(--accent-dark); color:var(--white); } .btn--outline{ background:transparent; border-color:currentColor; color:inherit; } .btn--outline:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); } .btn--ghost-light{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; } .btn--ghost-light:hover{ background:#fff; color:var(--ink); } .link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body); font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .link-arrow:hover .arrow{ transform:translateX(4px); } .link-arrow .arrow{ transition:transform .2s ease; } /* Primary dark green variant — used for "Explore more" on a property page, where the default MET-red accent competes with the red CTA button above it. */ .link-arrow--green{ color:var(--beard-green); } .link-arrow--green:hover{ color:var(--beard-green-dark); } /* Downloadable flyer, sits between the small address and the spec table. */ .property-flyer{ margin:0 0 1.2rem; } /* ---------- Tertiary button: brand logo + arrow, always on one row ---------- The mark is an inline . Height = --bm-logo-h. */ .site-brand img, .site-brand svg{ height:var(--bm-logo-h, 34px); width:auto; display:block; } .site-brand svg{ fill:currentColor; color:inherit; } .site-brand .bm-logo-svg--met{ height:calc(var(--bm-logo-h, 34px) * 1.2); } /* stacked mark reads small at parity */ /* On phones the full brand mark (BEARD wordmark + stacked MET) is wider than the screen, which pushed the whole header — and the document — past the viewport and made native templates scroll sideways. Shrink to 20px here. Higher specificity than `.site-brand svg` (and set directly, not via --bm-logo-h) so it beats the Customizer's inline :root value, which loads after the stylesheet and would otherwise win. */ @media (max-width:560px){ .site-header .site-brand svg, .site-header .site-brand img{ height:20px; } .site-header .site-brand .bm-logo-svg--met{ height:24px; } /* keep the 1.2x ratio */ .site-brand{ gap:.6rem; } } .bm-wordmark__beard{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; letter-spacing:.22em; text-transform:uppercase; color:inherit; } .brand-divider{ width:1px; height:26px; background:currentColor; opacity:.45; } .bm-wordmark__met{ line-height:1; } .bm-wordmark__met .met{ font-family:var(--font-head); font-style:italic; font-weight:700; font-size:1.2rem; color:inherit; } .bm-wordmark__met .rr{ display:block; font-size:.52rem; font-weight:700; letter-spacing:.32em; color:inherit; margin-top:2px; } /* Primary nav */ .main-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.6rem; } .main-nav li{ position:relative; } .main-nav a{ color:#fff; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding-block:1.4rem; display:inline-block; } .main-nav a:hover, .main-nav .current-menu-item > a{ color:#fff; opacity:.7; } .main-nav .menu-item-has-children > a::after{ content:"▾"; margin-left:.4em; font-size:.7em; opacity:.8; } .main-nav .sub-menu{ position:absolute; top:100%; left:0; min-width:240px; background:var(--beard-green-dark); padding:0; display:none; flex-direction:column; gap:0; align-items:stretch; /* items fill width so hover reaches the edges */ box-shadow:0 18px 40px rgba(0,0,0,.25); /* No top border. The panel previously carried a 3px MET-red bar (then white); both were dropped — the dropdown reads as a plain dark panel. */ overflow:hidden; /* clip the hover fill to the panel's box */ } .main-nav li:hover > .sub-menu{ display:flex; } .main-nav .sub-menu a{ display:block; width:100%; padding:.75rem 1.4rem; letter-spacing:.08em; } .main-nav .sub-menu a:hover{ background:var(--beard-green-soft); opacity:1; } .nav-toggle{ display:none; background:none; border:0; color:#fff; cursor:pointer; padding:.4rem; } .nav-toggle svg{ width:28px; height:28px; } /* ============================================================= HERO — full image w/ text overlay ============================================================= */ .hero{ position:relative; min-height:100vh; /* full viewport */ min-height:100svh; /* small-viewport unit — avoids mobile address-bar jump */ display:flex; align-items:center; color:#fff; overflow:hidden; /* Pull up by the exact header height so the hero sits behind the (transparent on the home page) sticky header. --bm-header-h is measured in JS; the fallback is the natural desktop header height. */ margin-top:calc(-1 * var(--bm-header-h, 6.4rem)); } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media img{ width:100%; height:100%; object-fit:cover; } .hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,28,20,.78) 0%, rgba(15,28,20,.45) 45%, rgba(15,28,20,.05) 80%); } .hero__inner{ position:relative; z-index:1; width:100%; padding-block:clamp(120px,16vh,180px) clamp(48px,8vh,80px); } .hero__panel{ max-width:620px; } .hero h1{ color:#fff; } .hero p{ font-size:1.1rem; color:rgba(255,255,255,.92); max-width:54ch; } .hero .btn{ margin-top:1.8rem; } .scroll-cue{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.8); } /* ============================================================= SPLIT BLOCK — image one side / text the other ============================================================= */ .split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; } .split__media img{ width:100%; height:100%; min-height:320px; object-fit:cover; } .split__body{ padding:clamp(32px,6vw,90px); } .split--text-left .split__media{ order:2; } .split--text-left .split__body{ order:1; } .split--contained{ gap:clamp(32px,5vw,72px); align-items:center; } .split--contained .split__media img{ border-radius:var(--radius); } .split h2{ margin-bottom:.6em; } /* ============================================================= OVERLAY BLOCK — full bleed image w/ left text card ============================================================= */ .overlay-block{ position:relative; color:#fff; display:flex; align-items:center; min-height:clamp(420px,60vh,620px); overflow:hidden; } .overlay-block__media{ position:absolute; inset:0; z-index:0; } .overlay-block__media img{ width:100%; height:100%; object-fit:cover; } .overlay-block__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,28,20,.82) 0%, rgba(15,28,20,.5) 50%, rgba(15,28,20,.08) 90%); } .overlay-block__inner{ position:relative; z-index:1; width:100%; } .overlay-block__panel{ max-width:560px; } .overlay-block h2{ color:#fff; } .overlay-block p{ color:rgba(255,255,255,.92); } .overlay-block .btn{ margin-top:1.5rem; } /* ============================================================= STATS BAND ============================================================= */ .stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; text-align:center; } .stat__num{ font-family:var(--font-head); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:600; color:var(--accent); line-height:1; } .stat__label{ font-size:.85rem; color:var(--ink-soft); margin-top:.7rem; max-width:18ch; margin-inline:auto; } /* On a full-colour band, numbers go white so they stay legible whether the band is green or red */ .section--green .stat__num, .section--solid .stat__num{ color:var(--white); } .section--green .stat__label, .section--solid .stat__label{ color:rgba(255,255,255,.82); } /* ============================================================= THREE COLUMN (services) ============================================================= */ .cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); } .col-item h3{ margin-bottom:.5em; } .col-divider{ width:46px; height:3px; background:var(--accent); margin-bottom:1.1rem; } /* ============================================================= PROPERTY CARDS ============================================================= */ .property-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .property-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; } /* flex-shrink:0 is load-bearing — the card is a flex column, so without it the media box gets squeezed when a card is stretched to match a taller sibling (grid align-items:stretch) and cards with fewer specs end up with shorter images. */ .property-card__media{ aspect-ratio:16/10; overflow:hidden; flex-shrink:0; } /* Doubled class (0,2,1) on purpose: Elementor's frontend.min.css ships `.elementor img{height:auto;max-width:100%}` at the SAME specificity (0,1,1) as a plain `.property-card__media img`, and loads after the theme — so on any Elementor-built page it won height:auto, collapsing the 16/10 box and making every card image a different height. */ .property-card .property-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .property-card:hover .property-card__media img{ transform:scale(1.05); } .property-card__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; } .property-card__title{ font-family:var(--font-body); font-size:1.15rem; font-weight:500; margin:0 0 .9rem; } .property-card__title span{ display:block; font-size:.92rem; color:var(--muted); font-weight:400; } .property-specs{ list-style:none; margin:0 0 1rem; padding:0; font-size:.86rem; border-top:1px solid var(--line); } .property-specs li{ display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--line); color:var(--ink-soft); } .property-specs li strong{ color:var(--ink); font-weight:600; } /* Uppercased in CSS, not in the data: _bm_status stays readable as "Available" in the admin field and in exports. Matches .eyebrow / .btn / .link-arrow, and covers every render point — the card, the single-property page and the blog index all share this class. */ .property-card__status{ margin-top:auto; font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; } .property-card__status .available{ color:var(--beard-green); } .property-card__status .unavailable{ color:var(--muted); } /* The address repeats below the gallery on a single property, under the H1 that already carries it. Kept as an

for the document outline but dropped to roughly h4 scale so it reads as a section label rather than competing with the page title. / / --------------------------------------------------------------------------- Property templates — responsive layout. These grids used to live in inline style="" attributes, which a media query cannot override, so they stayed multi-column on phones. Moved to classes so they can collapse. Breakpoints match the rest of the theme (980 / 560). --------------------------------------------------------------------------- / .property-detailgrid{ display:grid; grid-template-columns:1.6fr 1fr; / content + contact sidebar / gap:clamp(24px,5vw,64px); align-items:start; } .property-specs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem 2rem; font-size:.95rem; } .property-archiveintro{ display:grid; grid-template-columns:1fr 1fr; / "Find your fit." + lede / gap:2rem; align-items:start; } @media (max-width:980px){ / Sidebar drops beneath the content; intro stacks. / .property-detailgrid{ grid-template-columns:1fr; } .property-archiveintro{ grid-template-columns:1fr; gap:1rem; } .property-specs-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .property-specs-grid{ grid-template-columns:1fr; } } .property-detailtitle{ font-size:clamp(1.2rem, 2vw, 1.5rem); margin-bottom:.3rem; } .contact-card{ background:var(--beard-green); color:#fff; border-radius:var(--radius); padding:1.8rem; } .contact-card h3{ color:#fff; } .contact-card a{ color:#fff; text-decoration:underline; } .contact-cardperson{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; } .contact-cardperson img{ width:64px; height:64px; border-radius:50%; object-fit:cover; } .contact-card .btn{ margin-top:1.3rem; } / ============================================================= PULL QUOTE ============================================================= / .pullquote{ text-align:center; } .pullquote blockquote{ font-family:var(--font-head); font-weight:500; font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.3; max-width:22ch; margin:0 auto 1.6rem; color:inherit; } .section--green .pullquote blockquote, .section--solid .pullquote blockquote{ color:#fff; } / ============================================================= FEATURE LIST (transload specs) ============================================================= / .feature-list{ list-style:none; margin:1.4rem 0 0; padding:0; columns:2; column-gap:2.5rem; } .feature-list li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; break-inside:avoid; font-size:.96rem; } .feature-list li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; background:var(--accent); border-radius:1px; transform:rotate(45deg); } / ============================================================= ACCORDION ============================================================= / .accordionitem{ border-top:1px solid var(--line); } .accordionitem:last-child{ border-bottom:1px solid var(--line); } .accordiontrigger{ width:100%; text-align:left; background:none; border:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.6rem 0; font-family:var(--font-head); font-size:1.4rem; color:var(--ink); } .accordiontrigger .icon{ flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:transform .25s ease; } .accordionitem.is-open .accordiontrigger .icon{ transform:rotate(180deg); border-color:var(--accent); color:var(--accent); } .accordionpanel{ display:none; padding:0 0 2rem; max-width:78ch; } .accordionitem.is-open .accordionpanel{ display:block; } .accordionpanel h4{ margin-top:1.4rem; } .accordionpanel .pre-header{ margin-bottom:.4rem; } / ============================================================= TIMELINE (company history) ============================================================= / .timeline{ position:relative; max-width:980px; margin-inline:auto; } .timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%); } .timelinerow{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); margin-bottom:3rem; } .timelinemarker{ position:absolute; left:50%; top:6px; width:16px; height:16px; background:var(--accent); border-radius:50%; transform:translateX(-50%); border:3px solid #fff; box-shadow:0 0 0 2px var(--accent); } .timelineyear{ font-family:var(--font-head); font-size:1.6rem; color:var(--solid); font-weight:700; } .timelineera{ display:block; font-family:var(--font-body); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:.2rem; } .timelinecard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .timelinecard img{ width:100%; aspect-ratio:16/10; object-fit:cover; } .timelinecard-body{ padding:1.1rem 1.3rem 1.3rem; } .timelinecard h4{ margin:0 0 .4rem; } .timelinecard p{ font-size:.92rem; color:var(--ink-soft); margin:0; } .timelinerow:nth-child(odd) .timelinemeta{ text-align:right; } .timelinerow:nth-child(even) .timelinemeta{ order:2; } .timelinerow:nth-child(even) .timelinecard{ order:1; } / ============================================================= CONTACT ============================================================= / .contact-form{ background:var(--cream); padding:clamp(28px,5vw,56px); border-radius:var(--radius); } .contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .contact-form input, .contact-form textarea{ width:100%; padding:1rem 1.1rem; border:1px solid var(--line); background:#fff; font-family:var(--font-body); font-size:1rem; margin-bottom:1rem; border-radius:var(--radius); } .contact-form textarea{ min-height:160px; resize:vertical; } .contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--beard-green); border-color:var(--beard-green); } .emergency-numbers strong{ color:var(--ink); } .contact-emails{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .contact-emails h4{ color:var(--met-red); font-family:var(--font-body); font-size:1rem; } .contact-emails ul{ list-style:none; padding:0; margin:.6rem 0 0; font-size:.92rem; color:var(--ink-soft); } .contact-emails li{ margin-bottom:.4rem; } / ============================================================= SITE FOOTER ============================================================= / .site-footer{ background:var(--beard-green); color:rgba(255,255,255,.85); padding-block:clamp(48px,7vw,80px) 2.5rem; } .site-footer .bm-wordmarkbeard, .site-footer .bm-wordmarkmet .met, .site-footer .bm-wordmarkmet .rr{ color:#fff; } .footer-grid{ display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.15); } .footer-col h5{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1rem; } .footer-col ul{ list-style:none; margin:0; padding:0; } .footer-col li{ margin-bottom:.6rem; } .footer-col a{ color:rgba(255,255,255,.78); font-size:.92rem; } .footer-col a:hover{ color:#fff; } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.8rem; font-size:.82rem; color:rgba(255,255,255,.6); } / ============================================================= PAGE / POST CONTENT (native fallback) ============================================================= / .page-hero{ background:var(--beard-green); color:#fff; padding-block:clamp(120px,16vh,170px) clamp(40px,6vw,70px); } .page-hero h1{ color:#fff; margin:0; } .entry-content{ font-size:1.05rem; } .entry-content h2{ margin-top:1.6em; } .entry-content img{ border-radius:var(--radius); margin-block:1.5em; } .entry-content ul,.entry-content ol{ padding-left:1.4em; } .entry-content blockquote{ border-left:4px solid var(--accent); padding-left:1.4em; font-family:var(--font-head); font-style:italic; color:var(--ink-soft); } / WordPress core alignment & caption / .alignleft{ float:left; margin:0 1.5em 1em 0; } .alignright{ float:right; margin:0 0 1em 1.5em; } .aligncenter{ margin-inline:auto; } .wp-caption-text{ font-size:.85rem; color:var(--muted); text-align:center; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); } / ============================================================= RESPONSIVE ============================================================= / @media (max-width: 980px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } .cols-3,.property-grid,.contact-emails{ grid-template-columns:1fr; } .property-grid{ gap:1.4rem; } .property-grid{ grid-template-columns:repeat(2,1fr); } .split{ grid-template-columns:1fr; } .split--text-left .splitmedia, .split--text-left .splitbody{ order:initial; } .feature-list{ columns:1; } .timeline::before{ left:18px; } .timelinerow{ grid-template-columns:1fr; padding-left:48px; } .timelinemarker{ left:18px; } .timelinerow:nth-child(odd) .timelinemeta{ text-align:left; } .timelinerow:nth-child(even) .timelinemeta, .timelinerow:nth-child(even) .timelinecard{ order:initial; } .timeline__meta{ margin-bottom:1rem; } } / Nav collapses to the hamburger at 1080px, not 820px. The brand mark is ~318px wide (Beard wordmark 199px + stacked MET 90px + divider/gaps) and the five top-level items need ~552px, so with gutters the bar needs ~1030px to sit comfortably. Between 820 and 1030 the items crowd the logo and wrap. / @media (max-width: 1080px){ .nav-toggle{ display:block; } .main-nav{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--beard-green-dark); transform:translateX(100%); transition:transform .3s ease; padding:5rem 1.6rem 2rem; overflow-y:auto; z-index:200; } .main-nav.is-open{ transform:translateX(0); } .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; } .main-nav a{ padding-block:.9rem; border-bottom:1px solid rgba(255,255,255,.1); } .main-nav .sub-menu{ position:static; display:flex; box-shadow:none; border-top:0; padding-left:1rem; background:transparent; } .nav-open{ overflow:hidden; } .nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s; } .nav-scrim.is-open{ opacity:1; pointer-events:auto; } } @media (max-width: 560px){ .stats{ grid-template-columns:1fr; } .property-grid{ grid-template-columns:1fr; } .contact-form .row{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } } / ============================================================= DEBUG — layout grid (column) overlay Gated to admins / WP_DEBUG via inc/debug-grid.php. Inert until toggled (Ctrl/Cmd+Shift+G). See README → "Debugging layout". ============================================================= / .bm-grid-overlay{ position:fixed; inset:0; z-index:99998; pointer-events:none; display:none; } .bm-grid-overlay.is-active{ display:block; } .bm-grid-overlayinner{ position:relative; height:100%; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); display:grid; gap:var(--bm-grid-gap, 24px); grid-template-columns:repeat(var(--bm-grid-cols, 12), 1fr); / show the container edges / box-shadow:0 0 0 1px rgba(196,32,50,.25) inset; } .bm-grid-overlay.is-wide .bm-grid-overlayinner{ max-width:var(--container-wide); } .bm-grid-overlaycol{ background:rgba(196,32,50,.10); border-left:1px solid rgba(196,32,50,.30); border-right:1px solid rgba(196,32,50,.30); } / HUD toggle pill / .bm-grid-toggle{ position:fixed; left:16px; bottom:16px; z-index:99999; display:none; align-items:center; gap:.5rem; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.04em; color:#fff; background:rgba(18,42,28,.92); border:1px solid rgba(255,255,255,.18); border-radius:40px; padding:.5rem .85rem; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.28); } body.bm-grid-available .bm-grid-toggle{ display:inline-flex; } .bm-grid-toggledot{ width:9px; height:9px; border-radius:50%; background:#6b6b66; transition:background .2s; } .bm-grid-toggle.is-on .bm-grid-toggledot{ background:var(--met-red); box-shadow:0 0 0 3px rgba(196,32,50,.3); } .bm-grid-togglereadout{ opacity:.7; font-variant-numeric:tabular-nums; } .bm-grid-toggle:hover{ border-color:rgba(255,255,255,.4); } / --------------------------------------------------------------------------- Property carousel — horizontal scroll-snap track. Column width is a fraction of the TRACK's own width, not a fixed 300px min, so the number of visible cards is fixed regardless of how wide the container resolves to. The previous inline `minmax(300px,1fr)` let the count drift with container width — a full-width Elementor section yielded 5 cards. Count and breakpoints deliberately mirror the static `.property-grid` above (3 columns, breaking at 980px then 560px) so the carousel on the homepage and the grid on the properties archive show the same number of cards at every width. Change the count here and change .property-grid to match. Selector is doubled (.property-grid.property-grid--carousel) so it outranks the single-class .property-grid responsive rules above without !important. --------------------------------------------------------------------------- / .property-grid.property-grid--carousel{ grid-template-columns:none; grid-auto-flow:column; gap:1.6rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:1rem; / 3 up: 2 gaps of 1.6rem spread across 3 columns = 1.0667rem off each. / grid-auto-columns:calc(33.3333% - 1.0667rem); } .property-grid.property-grid--carousel > { scroll-snap-align:start; } /* 2 up: gap drops to 1.4rem here, matching .property-grid. 1 gap / 2 = .7rem. / @media (max-width:980px){ .property-grid.property-grid--carousel{ gap:1.4rem; grid-auto-columns:calc(50% - .7rem); } } @media (max-width:560px){ .property-grid.property-grid--carousel{ grid-auto-columns:100%; } } / --------------------------------------------------------------------------- Property media gallery — video + photographs, one slide per view. Shares the [data-carousel] prev/next handler with the properties carousel: the buttons must stay siblings of .bm-gallerytrack for that handler to find them. Column width is a flat 100% (not the 3-up calc used there), so each slide fills the frame and scroll-snap lands cleanly. --------------------------------------------------------------------------- / .bm-gallery{ position:relative; } .bm-gallerytrack{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; border-radius:var(--radius); background:var(--cream); scrollbar-width:none; } .bm-gallerytrack::-webkit-scrollbar{ display:none; } .bm-galleryslide{ scroll-snap-align:start; margin:0; aspect-ratio:16/9; position:relative; display:grid; place-items:center; overflow:hidden; } / Doubled class so it beats the global img reset and Elementor's `.elementor img{height:auto}` — same collision as the property cards. */ .bm-gallery .bm-galleryslide img{ width:100%; height:100%; object-fit:cover; display:block; } .bm-galleryslide iframe{ width:100%; height:100%; border:0; display:block; } .bm-galleryplay{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.6rem; background:rgba(0,0,0,.28); } .bm-galleryplay span[aria-hidden]{ width:84px; height:84px; border:3px solid #fff; border-radius:50%; display:grid; place-items:center; } .bm-gallerynav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center; font-size:1.1rem; box-shadow:0 2px 10px rgba(0,0,0,.18); transition:background .2s ease; } .bm-gallerynav:hover{ background:#fff; } .bm-gallerynav--prev{ left:14px; } .bm-gallerynav--next{ right:14px; } .bm-gallerycount{ position:absolute; right:14px; bottom:14px; margin:0; background:rgba(0,0,0,.6); color:#fff; font-size:.78rem; letter-spacing:.06em; padding:.3em .7em; border-radius:40px; font-variant-numeric:tabular-nums; } .bm-gallery.is-single .bm-gallerytrack{ scroll-snap-type:none; } @media (max-width:560px){ .bm-gallerynav{ width:36px; height:36px; } .bm-gallerynav--prev{ left:8px; } .bm-gallery__nav--next{ right:8px; } }