/* ========================================================================== Laura McBride Real Estate — site styles Static rebuild. Fonts are loaded from Google Fonts in for staging; TODO before DNS cutover: self-host Montserrat / Playfair Display / Prata as woff2. ========================================================================== */ :root { --paper: #ffffff; --paper-2: #f5f6f7; --ink: #23272b; --ink-soft: #4b5158; --navy: #1f3346; --navy-deep: #16283a; --blue: #3f6d8e; --green: #4f7a5c; --gold: #b98a3e; --line: #e4e4e7; --white: #ffffff; --shadow-sm: 0 1px 2px rgba(20, 40, 58, .06), 0 4px 14px rgba(20, 40, 58, .05); --shadow-md: 0 2px 6px rgba(20, 40, 58, .07), 0 12px 34px rgba(20, 40, 58, .07); --maxw: 1180px; --gap: clamp(1rem, 4vw, 3rem); --serif: "Playfair Display", Georgia, "Times New Roman", serif; --accent: "Prata", Georgia, serif; --script: "Bon Vivant", "Snell Roundhand", "Apple Chancery", cursive; --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Bon Vivant accent script — self-hosted. Drop the file at the path below. Until it exists the --script stack falls back to Snell Roundhand / Apple Chancery. */ @font-face { font-family: "Bon Vivant"; src: url("/assets/fonts/bon-vivant.woff2") format("woff2"); font-weight: 400; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; } body { margin: 0; font-family: var(--sans); font-size: 1.15rem; line-height: 1.8; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; color: var(--navy-deep); margin: 0 0 .6em; } h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); } h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); } h4 { font-size: 1.1rem; letter-spacing: .01em; } p { margin: 0 0 1.15em; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--navy-deep); } img { max-width: 100%; height: auto; display: block; } .eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 700; color: var(--gold); margin: 0 0 .8em; } .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); } section { padding-block: clamp(3rem, 8vw, 6rem); } section.tint { background: var(--paper-2); border-block: 1px solid var(--line); } section.navy { background: var(--navy-deep); color: #e9e3d8; } section.navy h2, section.navy h3, section.navy h4 { color: #fff; } section.navy a { color: #cfe0ec; } /* Inset colour panels sitting directly in an article (reviews, free guides): keep the text off the coloured edge, with a comfortable gutter on mobile */ .container > section.tint, .container > section.navy { padding-inline: clamp(1.25rem, 5vw, 2.75rem); } .lede { font-size: 1.22rem; line-height: 1.75; max-width: 64ch; color: var(--ink-soft); } .center { text-align: center; } .center .lede { margin-inline: auto; } .rma-badges { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: center; align-items: flex-start; margin-top: 2.2rem; } .rma-badges img { width: clamp(130px, 20vw, 170px); height: auto; display: block; } .press-list__label { max-width: 46rem; margin: 2rem auto .2rem; text-align: left; font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .press-list { list-style: none; padding: 0; margin: .6rem auto 0; max-width: 46rem; display: grid; gap: .9rem; text-align: left; } .press-list a { display: block; border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.25rem; background: var(--white); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; } .press-list a:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .press-list__outlet { display: block; font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .press-list__title { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--navy-deep); margin: .12rem 0; } .press-list__meta { display: block; font-size: .82rem; color: var(--ink-soft); } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; padding: .85em 1.6em; border-radius: 2px; text-decoration: none; cursor: pointer; border: 1.5px solid var(--navy-deep); background: var(--navy-deep); color: #fff; transition: background .15s, color .15s; } .btn:hover { background: transparent; color: var(--navy-deep); } .btn--ghost { background: transparent; color: var(--navy-deep); } .btn--ghost:hover { background: var(--navy-deep); color: #fff; } section.navy .btn, .testimonial-strip .btn { border-color: #fff; background: #fff; color: var(--navy-deep); } section.navy .btn:hover, .testimonial-strip .btn:hover { background: transparent; color: #fff; } /* Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .site-header .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; } .site-header__logo { display: block; } .site-header__logo img { height: 66px; width: auto; } /* Nav is a hamburger menu at every width; Contact stays beside the toggle */ .site-header__actions { display: flex; align-items: center; gap: .75rem; } .nav-toggle { display: block; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--navy-deep); } .site-nav { position: absolute; top: calc(100% + 4px); right: var(--gap); display: none; flex-direction: column; align-items: stretch; gap: .1rem; min-width: 240px; max-width: min(88vw, 340px); background: var(--paper); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-md); padding: .9rem 1.25rem 1.1rem; } .site-nav.open { display: flex; } .site-nav a { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--navy-deep); white-space: nowrap; padding: .62rem .25rem; border-bottom: 1px solid var(--line); } .site-nav a:last-child { border-bottom: 0; } .site-nav a:hover { color: var(--gold); } .site-header__cta { color: #fff; padding: .55rem 1.1rem; font-size: .72rem; } /* Testimonial strip -------------------------------------------------------- */ .testimonial-strip { background: var(--navy-deep); color: #ece5d9; text-align: center; } .testimonial-strip .eyebrow { color: var(--gold); } .testimonial-strip blockquote { margin: 0 auto; max-width: 60ch; font-family: var(--accent); font-size: 1.15rem; line-height: 1.75; } .testimonial-strip cite { display: block; margin-top: 1.2rem; font-style: normal; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #b9c6d2; } /* Reviews grid (testimonials page) --------------------------------------- */ .reviews { display: flex; flex-direction: column; gap: 1.4rem; max-width: 720px; margin: 2rem auto 0; } .review { margin: 0; padding: 1.5rem 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); } .review__stars { margin: 0 0 .55rem; color: var(--gold); font-size: .9rem; letter-spacing: .18em; line-height: 1; } .review__body blockquote { margin: 0 0 .9rem; font-family: var(--accent); font-size: 1.05rem; line-height: 1.75; color: var(--ink); } .review__body blockquote::before { content: "\201C"; color: var(--gold); font-family: var(--serif); font-size: 1.5em; line-height: 0; margin-right: .06em; vertical-align: -.18em; } .review__name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--navy-deep); } .review__meta { display: block; font-family: var(--sans); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .12rem; } /* Photo collage — uniform square frames, subjects centred (object-fit: cover) */ .review-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; max-width: 1000px; margin: 1.8rem auto 0; } .review-collage.is-mid { max-width: 940px; } .review-collage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 28%; display: block; border-radius: 6px; box-shadow: var(--shadow-sm); } @media (max-width: 640px) { .review-collage, .review-collage.is-mid { grid-template-columns: repeat(2, 1fr); gap: .55rem; } } .reviews-hero { max-width: 900px; margin: 1.5rem auto 0; } .reviews-hero img { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-md); display: block; } /* Hero ----------------------------------------------------------------- */ .hero__media { max-width: none; margin: 0 calc(50% - 50vw) 2.5rem; } .hero__media img { border-radius: 0; width: 100%; display: block; } /* Decorative tropical leaf divider between sections. One small image (~36KB), referenced in CSS so it downloads once and is cached for every use across the site. No DOM nodes, no alt text, purely presentational, so it adds nothing for crawlers to index and no layout shift. */ .leaf-divider { height: clamp(42px, 5.5vw, 74px); background-image: url("/assets/img/laura-mcbride-leaf-divider.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; } /* Brand texture layers: decorative SVGs drawn as cached CSS backgrounds behind content. No DOM nodes, no alt text, no layout shift, invisible to crawlers. Each SVG downloads once and is reused from cache. */ .hero { position: relative; isolation: isolate; } .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; transform: translateX(-50%); bottom: 0; width: min(1700px, 100vw); aspect-ratio: 2119 / 1430; background: url("/assets/img/laura-mcbride-blueprint-texture.svg") center bottom / contain no-repeat; opacity: .6; -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 90%); mask-image: linear-gradient(to top, #000 42%, transparent 90%); } .leaf-bg { position: relative; overflow: hidden; } .leaf-bg > .container { position: relative; z-index: 1; } .leaf-bg::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -6%; bottom: -16%; width: clamp(240px, 42vw, 520px); aspect-ratio: 1; background: url("/assets/img/laura-mcbride-leaf-texture-light.svg") center / contain no-repeat; opacity: .13; } .hero__text { max-width: 64ch; margin-inline: auto; } .hero__text h1 { margin-bottom: .5em; } /* Feature grid (listings, guides, etc.) --------------------------------- */ .grid { display: grid; gap: 1.8rem; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } /* Phone / small tablet: stack listing cards one on top of the other */ @media (max-width: 820px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } } /* Recently Sold: compact, stays 3-across like the original site */ .grid--sold { grid-template-columns: repeat(3, 1fr); gap: .9rem; } .grid--sold .card__body { padding: .9rem 1rem 1.1rem; } .grid--sold .card__body h3 { font-size: 1rem; } .grid--sold .card__body p { font-size: .85rem; margin-bottom: .7rem; } @media (max-width: 560px) { .grid--sold .status { font-size: .58rem; } .grid--sold .card__body h3 { font-size: .82rem; } .grid--sold .card__body p { font-size: .72rem; } .grid--sold .btn { font-size: .58rem; padding: .55em .8em; } } .card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow .16s, transform .16s; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .card__body h3 { margin-bottom: .35em; } .card__body p { font-size: .97rem; color: var(--ink-soft); } .card__body .btn { margin-top: auto; align-self: flex-start; } .status { align-self: flex-start; font-family: var(--sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .3em .7em; border-radius: 2px; margin-bottom: .8em; } .status--sale { background: #e4ede4; color: var(--green); } .status--sold { background: #efe3d6; color: var(--gold); } .status--conditional { background: #e5e9ee; color: var(--blue); } /* Quick facts ----------------------------------------------------------- */ .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem 2.5rem; max-width: 62rem; margin: 2rem 0 0; } @media (max-width: 620px) { .facts { grid-template-columns: 1fr; } } .facts > div { border-top: 2px solid var(--gold); padding-top: .55rem; } .facts dt { font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .2rem; } .facts dd { margin: 0; font-size: 1.02rem; line-height: 1.6; } /* FAQ ----------------------------------------------------------------------- */ .faq { max-width: 62rem; margin-top: 2rem; } .faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; } .faq summary { font-family: var(--serif); font-size: 1.18rem; color: var(--navy-deep); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--sans); color: var(--gold); font-weight: 700; flex: none; } .faq details[open] summary::after { content: "\2212"; } .faq details > p { margin: .9rem 0 0; color: var(--ink-soft); font-size: 1.02rem; } /* Steps -------------------------------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 1.4rem; max-width: 62ch; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .step::before { counter-increment: step; content: counter(step); font-family: var(--serif); font-size: 1.1rem; font-weight: 600; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1.5px solid var(--gold); color: var(--gold); border-radius: 50%; } .step h4 { margin: .15em 0 .3em; } .step p { margin: 0; font-size: .97rem; color: var(--ink-soft); } section.navy .step p { color: #cdd6de; } /* Commission tiers ------------------------------------------------------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } @media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } } .tier { border: 1px solid var(--line); background: var(--white); border-radius: 4px; padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm); } .tier__name { font-family: var(--sans); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--ink-soft); } .tier__rate { font-family: var(--serif); font-size: 2rem; color: var(--navy-deep); margin: .2em 0 .1em; } .tier__tag { font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } /* very subtle package tints */ .tier--green { background: #f5f9f5; border-color: #e2ece2; } .tier--gold { background: #fdfaf1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } .tier--blue { background: #f4f7fa; border-color: #e0e8f0; } .fine { font-size: .88rem; color: var(--ink-soft); max-width: 70ch; } /* Split media rows ----------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: center; } .split--flip .split__media { order: 2; } @media (max-width: 820px) { .split, .split--flip { grid-template-columns: 1fr; } .split--flip .split__media { order: 0; } } .ba { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .ba figure { margin: 0; } .ba figcaption { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; } /* Meet Laura lifestyle photo row */ .meet-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .7rem; } .meet-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow-sm); } /* Forms -------------------------------------------------------------------- */ .form { display: grid; gap: 1rem; max-width: 30rem; } .form label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .form input, .form textarea { width: 100%; font: inherit; padding: .75em .9em; border: 1px solid var(--line); border-radius: 2px; background: var(--white); color: var(--ink); } .form textarea { min-height: 7rem; resize: vertical; } section.navy .form input, section.navy .form textarea { background: rgba(255,255,255,.95); } /* Mortgage calculator -------------------------------------------------- */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; max-width: 46rem; } @media (max-width: 620px) { .calc { grid-template-columns: 1fr; } } .calc__field { margin-bottom: 1rem; } .calc__field label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; } .calc__field input { width: 100%; font: inherit; padding: .7em .9em; border: 1px solid var(--line); border-radius: 2px; background: var(--white); } .calc__out { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 1.6rem; box-shadow: var(--shadow-sm); } .calc__payment { font-family: var(--serif); font-size: 2.4rem; color: var(--navy-deep); } .calc__note { font-size: .82rem; color: var(--ink-soft); } /* Instagram grid ----------------------------------------------------------- */ .ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } @media (max-width: 620px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } } .ig-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; } /* Footer -------------------------------------------------------------------- */ .site-footer { background: var(--navy-deep); color: #c9d2da; padding-block: clamp(3rem, 7vw, 5rem) 2rem; } .site-footer h2 { color: #fff; font-size: 1.4rem; } .site-footer p { color: #b9c3cc; font-size: .95rem; max-width: 65ch; } .site-footer a { color: #dbe5ec; } .site-footer__cols { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; } @media (max-width: 720px) { .site-footer__cols { grid-template-columns: 1fr; } } .site-footer__contact div { margin-bottom: .35rem; font-size: .95rem; } .site-footer__revel { width: 168px; height: auto; display: block; margin-bottom: 1rem; } .site-footer__social { display: flex; gap: 1rem; margin-top: 1rem; } .site-footer__social img { height: 30px; width: 30px; } .site-footer__areas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .82rem; } .site-footer__areas a { color: #aeb9c2; text-decoration: none; } .site-footer__areas a:hover { color: #fff; text-decoration: underline; } .site-footer__mark { width: 96px; height: auto; margin: 1.6rem 0 1.5rem; filter: brightness(0) invert(1); opacity: .92; } .site-footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; font-size: .82rem; color: #93a0aa; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Lead form states */ .form-thanks { max-width: 32rem; background: #e7efe7; border-left: 3px solid var(--green); color: var(--ink); padding: 1.2rem 1.4rem; border-radius: 3px; font-size: 1rem; } section.navy .form-thanks { background: rgba(255,255,255,.95); } .form-error { color: #b23b3b; margin-top: .8rem; font-size: .95rem; } /* Sell / Buy lead pages */ .cta-pair { display: flex; flex-wrap: wrap; gap: .8rem; } .center .cta-pair { justify-content: center; } .lead-card { border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); background: var(--white); scroll-margin-top: 100px; } .lead-card h2 { margin-top: 0; } /* ==== Listing pages ===================================================== */ .breadcrumb { font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); padding: 1rem 0 0; } .breadcrumb a { color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--navy-deep); } .breadcrumb [aria-current] { color: var(--navy-deep); } .listing-hero { padding-block: 2rem 0; } .listing-hero__media { position: relative; border-radius: 4px; overflow: hidden; background: var(--paper-2); margin-bottom: 1.6rem; box-shadow: var(--shadow-md); } .listing-hero__media img { width: 100%; display: block; } /* "SOLD" stamp that sits over the "Now On MLS" corner curl of a listing feature graphic */ .listing-hero__media .sold-stamp { position: absolute; top: 1.5%; left: 1.5%; z-index: 2; display: grid; place-items: center; width: clamp(60px, 13%, 122px); aspect-ratio: 1; border-radius: 50%; background: #e2622e; color: #fff; font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; line-height: 1; font-size: clamp(.72rem, 2.1vw, 1.2rem); transform: rotate(-14deg); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e2622e, 0 6px 16px rgba(0,0,0,.35); } .listing-hero__media figcaption { padding: .7rem 1rem; font-size: .82rem; color: var(--ink-soft); background: var(--white); } .listing-hero h1 { margin: 0 0 .5rem; } .listing-hero__sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; } .sold-banner { background: var(--navy-deep); color: #fff; border-radius: 3px; padding: 1.1rem 1.4rem; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; } .sold-banner strong { font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--gold); } .sold-banner a { color: #fff; } .listing-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; } .listing-facts li { border-top: 2px solid var(--gold); padding-top: .5rem; } .listing-facts b { display: block; font-family: var(--sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .15rem; } .prose { max-width: 68ch; } .prose h2 { margin-top: 2.4rem; } .prose h3 { margin-top: 1.8rem; } .prose ul { padding-left: 1.1rem; } .prose li { margin-bottom: .3rem; } /* Key takeaways: a scannable summary block answer engines lift verbatim */ .key-points { max-width: 68ch; margin: 1.8rem 0 0; padding: 1.3rem 1.5rem 1.4rem; background: var(--paper-2); border-left: 3px solid var(--gold); border-radius: 4px; } .key-points h2 { margin: 0 0 .6rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .key-points ul { margin: 0; padding-left: 1.1rem; } .key-points li { margin-bottom: .4rem; color: var(--ink); } .key-points li:last-child { margin-bottom: 0; } /* Byline under a guide/article H1 */ .article-byline { font-size: .9rem; color: var(--ink-soft); margin: .2rem 0 1.1rem; } .article-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Paint swatch chips: crisp CSS colour references, no image weight */ .swatch-grid { list-style: none; margin: 1.4rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem 1.1rem; max-width: 68ch; } .swatch-grid li { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; } .swatch-grid .chip { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid rgba(20,40,58,.14); box-shadow: var(--shadow-sm); } .swatch-grid .name { font-size: .82rem; color: var(--ink); line-height: 1.35; } /* Seasonal plant reference grid for the planting guide */ .plant-grid { list-style: none; margin: 1.4rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.1rem; max-width: 68ch; } .plant-grid figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .plant-grid img { width: 100%; max-width: 150px; height: 150px; object-fit: contain; object-position: bottom center; } .plant-grid figcaption { font-size: .82rem; color: var(--ink); text-align: center; line-height: 1.35; } .plant-grid figcaption em { display: block; color: var(--ink-soft); font-size: .76rem; font-style: normal; } .listing-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .related-listings { margin-top: 1rem; } /* Feature blocks -------------------------------------------------------- */ .feature { padding-block: clamp(2.4rem, 6vw, 4rem); } /* Every image in a cluster stacks full-width at its natural ratio, never cropped. */ .feature__media { display: flex; flex-direction: column; gap: .8rem; max-width: 1000px; margin-inline: auto; } .feature__media img { width: 100%; height: auto; border-radius: 4px; display: block; box-shadow: var(--shadow-sm); } /* opt-in: show a tall photo as a horizontal full-width band */ .feature__media img.crop-landscape { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; } .feature__media--pair { /* kept for markup compatibility */ } .feature__text { max-width: 68ch; margin: 1.8rem auto 0; } /* A feature with a single image sits side-by-side with its text, alternating sides. */ .feature:has(.feature__media img:only-child) { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } .feature:has(.feature__media img:only-child) .feature__media { max-width: none; margin: 0; } .feature:has(.feature__media img:only-child) .feature__text { margin: 0; } .feature--flip:has(.feature__media img:only-child) .feature__media { order: 2; } @media (max-width: 860px) { .feature:has(.feature__media img:only-child) { grid-template-columns: 1fr; gap: 1.4rem; } .feature--flip:has(.feature__media img:only-child) .feature__media { order: 0; } } .feature__label { font-family: var(--script); font-weight: 400; font-size: clamp(1.9rem, 3.8vw, 2.7rem); line-height: 1.05; color: var(--gold); margin: 0 0 .35rem; } .feature__text h3 { margin: 0 0 .5rem; } .feature__text p { max-width: 48ch; } .feature__text p:last-child { margin-bottom: 0; } .feature__text ul { max-width: 48ch; padding-left: 1.1rem; margin: 0; } /* Lead-page support media (seller / buyer pages) */ .lead-portrait { width: 100%; height: auto; border-radius: 4px; box-shadow: var(--shadow-sm); margin-top: 1.6rem; display: block; } .lead-portrait--tall { max-height: 30rem; object-fit: cover; object-position: center 20%; } /* fills the leftover height of the text column so its base lines up with the form, cropping the sides rather than showing more of the photo below the hem */ .split__text .lead-portrait--fill { flex: 1 1 auto; min-height: 20rem; height: auto; width: 100%; object-fit: cover; object-position: center top; } @media (max-width: 820px) { .split__text .lead-portrait--fill { flex: 0 0 auto; max-height: 26rem; } } .stars-strip { display: block; width: 100%; max-width: 210px; height: auto; margin: 1rem 0 0; } .media-grid { display: grid; gap: 1.3rem; margin-top: 1.8rem; } .media-grid.cols-2 { grid-template-columns: 1fr 1fr; } .media-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .media-grid figure { margin: 0; } .media-grid img { width: 100%; height: auto; border-radius: 4px; display: block; box-shadow: var(--shadow-sm); } /* uniform tiles so a mixed set of ratios reads as a balanced row */ .media-grid.cols-2 img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .media-grid.cols-3 img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .media-grid figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: .55rem; line-height: 1.4; } @media (max-width: 820px) { .media-grid.cols-2, .media-grid.cols-3 { grid-template-columns: 1fr; } } /* full-bleed image break */ .bleed { margin: clamp(1.5rem, 5vw, 3rem) calc(-1 * var(--gap)) 0; } .bleed img { width: 100%; max-height: 68vh; object-fit: cover; display: block; } .bleed figcaption { padding: .6rem var(--gap) 0; font-size: .82rem; letter-spacing: .06em; color: var(--ink-soft); } /* graphic panels (floor plans, deets, area features, HoodQ) */ .panel { margin-top: clamp(2rem, 5vw, 3.5rem); } .panel__img { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); } .panel__img img { width: 100%; display: block; } .panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } @media (max-width: 760px) { .panel__grid { grid-template-columns: 1fr; } } .room-sizes { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .92rem; } .room-sizes th, .room-sizes td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); } .room-sizes th { font-weight: 600; color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .room-sizes tbody tr:last-child td { border-bottom: none; } /* full-frame image: shown whole, never cropped (diagrams, lot lines, floor plans, marketing graphics) */ .frame { margin-top: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: 4px; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; } .frame img { width: 100%; height: auto; display: block; object-fit: contain; } .frame figcaption { padding: .6rem 1rem; font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--line); } /* embedded iGUIDE 3D tour */ .iguide { margin-top: clamp(1.4rem, 4vw, 2.4rem); position: relative; padding-bottom: 62%; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-2); } .iguide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* LISTED app callout — full image, then copy (never cropped, never side-by-side) */ .app-callout { margin-top: clamp(2rem, 5vw, 3.5rem); padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow-sm); } .app-callout img { width: 100%; height: auto; border-radius: 3px; display: block; margin-bottom: 1.4rem; } .app-callout p { max-width: 64ch; } /* compact extras strip */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.5rem; } @media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } } .gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; background: var(--paper-2); } /* Free guides grid + request modal ------------------------------------- */ .guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2.4rem 1.8rem; margin-top: 2.6rem; } .guide-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: none; } .guide-card__img { width: 100%; aspect-ratio: 1000 / 1294; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-md); transition: transform .16s ease, box-shadow .16s ease; } .guide-card:hover .guide-card__img, .guide-card:focus-visible .guide-card__img { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(20,40,58,.1), 0 26px 50px rgba(20,40,58,.13); } .guide-card__title { font-family: var(--serif); font-size: 1.1rem; color: var(--navy-deep); margin: .95rem 0 .3rem; } .guide-card__blurb { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 .55rem; } .guide-card__cta { font-family: var(--sans); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .guide-card__preview { display: inline-block; margin-top: .35rem; font-size: .8rem; } .guide-dialog { border: 0; border-radius: 8px; padding: 0; max-width: 460px; width: calc(100% - 2rem); box-shadow: 0 30px 60px rgba(16,24,32,.3); color: var(--ink); background: var(--paper); } .guide-dialog::backdrop { background: rgba(16,24,32,.55); } .guide-dialog__inner { position: relative; padding: clamp(1.6rem, 4vw, 2.3rem); } .guide-dialog__close { position: absolute; top: .55rem; right: .8rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .2rem .4rem; } .guide-dialog h2 { font-size: 1.35rem; margin-bottom: .3em; } .guide-dialog p { font-size: .95rem; color: var(--ink-soft); } /* commercial micro-site cross-page tab nav (3187 Stouffville Rd hub) */ .subnav { margin-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; } .subnav a { font-family: var(--sans); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: .35rem .1rem; border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--navy-deep); } .subnav a[aria-current="page"] { color: var(--navy-deep); border-bottom-color: var(--gold); } .subnav span.subnav__sep { color: var(--line); } .guide-dialog .form-thanks { background: var(--paper-2); border-radius: 6px; padding: 1.2rem; font-size: .97rem; }