/* ============================================================ Fuller Developments - PREVIEW stylesheet Faithful to deliverables/01-design-system.md. Review mockup only. CLASS VOCABULARY (reuse these on every page) Layout: .wrap .section .bg-cream .bg-white .bg-navy Eyebrow: .eyebrow (+ .is-cream / .is-navy / .is-hero) .rule Head: .serif .t-hero .t-hero-home .t-contact .h2 .h2-lg .h3-card Buttons: .btn .btn-primary .btn-dark .btn-outline-cream .btn-outline-navy .btn-text .btn-ghost Hero: .hero (+ .hero-home .hero-interior .hero-portfolio .hero-contact) .hero-inner Grids: .two-col .card-grid .card-grid-3 .path-grid .why-grid .feature-grid Cards: .card .card-img .card-body .tier .price .enq .status Path: .path-card .path-tag .path-kicker .bullets Misc: .lead-2col .stat-row .stat .costline .costline-big .section-note .process-row .proc-num .placeholder-tile .filter-row .filter .flag ============================================================ */ /* ---- FONTS (self-hosted) ---- These were on fonts.googleapis.com, which cost a whole extra round trip: HTML -> Google's CSS -> the woff2 files. The fonts landed after first paint and reflowed the page, which was ~98% of the site's layout shift. Serving them from our own domain removes that hop, and the preloads in each page's get them in flight immediately. Latin subset only. Montserrat is a variable font, so the single file below covers every weight from 400 to 700 - do not change 100 900 to a single number or the browser will fake the bolder weights instead of using the real ones. To update a font, replace the .woff2 in fonts/ and keep the name. */ @font-face{font-family:'Montserrat';src:url('fonts/montserrat-400-normal.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Bodoni Moda';src:url('fonts/bodoni-moda-400-normal.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Bodoni Moda';src:url('fonts/bodoni-moda-400-italic.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Bebas Neue';src:url('fonts/bebas-neue-400-normal.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} :root{ --navy:#191a26; --cream:#faf7f2; --brass:#b79c6f; --body:#3f3f4a; /* --gold-cream was #8a6f3d, which measured 4.44:1 on the cream ground against the 4.5:1 WCAG AA minimum for normal text. Two shades darker clears it at 4.57:1 with no perceptible change to the colour. */ --gold-cream:#886d3c; --gold-navy:#cbb083; --price:#d9bf90; --warm:#eadfc8; --on-navy:#f2efe9; --hero-eyebrow:#eee7da; --card-border:#ded5c6; --divider:#e4dbcc; --footer:#101119; --navy-card:#23252f; --navy-border:#383a48; --muted-cream:#6b6558; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--body);font-family:'Montserrat',Helvetica,sans-serif;font-size:19px;line-height:1.66;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{max-width:1400px;margin:0 auto;padding:0 48px} .section{padding:120px 0} .bg-cream{background:var(--cream)} .bg-white{background:#fff} .bg-navy{background:var(--navy);color:var(--on-navy)} /* ---- eyebrow / rules / headings ---- */ .serif{font-family:'Bodoni Moda',Didot,serif;font-weight:400;color:var(--navy)} .eyebrow{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.22em;text-transform:uppercase;display:inline-block} .eyebrow.is-cream{color:var(--gold-cream)} .eyebrow.is-navy{color:var(--gold-navy)} .eyebrow.is-hero{color:var(--hero-eyebrow)} .rule{width:60px;height:2px;background:var(--brass);margin-bottom:22px} .label{font-family:'Montserrat';font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase} .t-hero-home{font-size:88px;line-height:1.05;letter-spacing:-.015em} .t-hero{font-size:82px;line-height:1.06;letter-spacing:-.015em} .t-contact{font-size:76px;line-height:1.06;letter-spacing:-.015em} .h2{font-size:56px;line-height:1.1} .h2-lg{font-size:58px;line-height:1.1} .h3-card{font-size:40px;line-height:1.15} em{font-style:italic} .on-navy em{color:var(--warm)} /* ---- buttons ---- */ .btn{display:inline-block;font-family:'Bebas Neue';font-size:22px;letter-spacing:.12em;text-transform:uppercase;padding:20px 40px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:.28s ease;line-height:1} .btn-primary{background:var(--brass);color:var(--navy)} .btn-primary:hover{background:#fff} .btn-dark{background:var(--navy);color:#fff} .btn-dark:hover{background:var(--brass);color:var(--navy)} .btn-outline-cream{background:transparent;border-color:#cbbfa9;color:var(--navy)} .btn-outline-cream:hover{border-color:var(--brass)} .btn-outline-navy{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .btn-outline-navy:hover{border-color:var(--brass);color:var(--warm)} .btn-text{display:inline-block;font-family:'Bebas Neue';font-size:22px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:5px 0 12px;border-bottom:2px solid var(--gold-cream);color:var(--navy)} .btn-text.on-navy{border-color:#5a5c6c;color:#fff} .btn-text:hover{border-color:var(--brass)} .btn-ghost{background:rgba(16,17,25,.55);border:2px solid var(--brass);color:#fff} .btn-ghost:hover{background:var(--brass);color:var(--navy)} /* ---- HEADER (injected by site.js) ---- */ .site-header{position:fixed;top:0;left:0;width:100%;height:104px;z-index:100;display:flex;align-items:center;transition:background .35s ease} .site-header:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,25,.72),rgba(16,17,25,0));z-index:-1} .site-header.solid{background:var(--navy)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .logo{font-family:'Bodoni Moda',serif;color:#fff;font-size:26px;letter-spacing:.02em;text-decoration:none;line-height:1} .logo small{display:block;font-family:'Bebas Neue';font-size:12px;letter-spacing:.35em;color:var(--gold-navy);margin-top:2px} .nav{display:flex;align-items:center;gap:26px} .nav a.navlink{font-family:'Montserrat';font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;padding:8px 0;position:relative;white-space:nowrap} .nav a.navlink:hover{color:var(--warm)} .has-dd{position:relative} .dd{position:absolute;top:100%;left:-16px;min-width:280px;background:#fff;border-top:3px solid var(--brass);box-shadow:0 26px 60px rgba(25,26,38,.28);padding:8px 0;display:none} .has-dd:hover .dd,.has-dd.fd-open .dd{display:block} .dd a{display:block;font-family:'Montserrat';font-weight:500;font-size:18px;color:var(--navy);text-decoration:none;padding:14px 26px} .dd a:hover{background:#f2ede4} .enquire{white-space:nowrap;font-family:'Bebas Neue';font-size:20px;letter-spacing:.12em;text-transform:uppercase;background:var(--brass);color:var(--navy);padding:16px 30px;text-decoration:none;transition:.25s} .enquire:hover{background:#fff} .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:14px;min-width:48px;min-height:48px} .burger span{width:26px;height:2px;background:#fff;display:block} /* ---- HERO ---- */ /* min-height (not height) so a hero grows with its copy instead of overflowing, and padding-top clears the 104px fixed header so text can never slide under it */ .hero{position:relative;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center;padding-top:124px} /* ---- hero background images ---- These live here rather than in an inline style="" so the media query below can swap in the smaller -m.webp copies on phones. A hero
takes one .hb-* class. To add a hero image: drop the file in images/, make an 820px-wide -m copy, and add a pair of lines here. .hb-interior has no -m copy - its source is only 800px wide already. */ .hb-lakefront{background-image:url('images/fuller-lakefront-home.webp')} .hb-deerhurst{background-image:url('images/deerhurst-hero.webp')} .hb-framing{background-image:url('images/fuller-framing-build.webp')} .hb-waterfront{background-image:url('images/fuller-waterfront-build.webp')} .hb-interior{background-image:url('images/fuller-interior.webp')} .hb-townhome{background-image:url('images/townhome-rear.webp')} .hb-lot-17{background-image:url('images/lot-17-hero.webp')} .hb-lot-8{background-image:url('images/lot-8-hero.webp')} .hb-lot-21{background-image:url('images/lot-21-hero.webp')} .hb-lot-23{background-image:url('images/lot-23-hero.webp')} .hb-pf-hemlock{background-image:url('images/pf-hemlock-hero.webp')} .hb-pf-dwight{background-image:url('images/pf-dwight-hero.webp')} .hb-pf-stgeorges{background-image:url('images/pf-stgeorges-hero.webp')} .hb-portfolio{background-image:url('images/portfolio-hero.webp')} @media (max-width:820px){ .hb-townhome{background-image:url('images/townhome-rear-m.webp')} .hb-lakefront{background-image:url('images/fuller-lakefront-home-m.webp')} .hb-deerhurst{background-image:url('images/deerhurst-hero-m.webp')} .hb-framing{background-image:url('images/fuller-framing-build-m.webp')} .hb-waterfront{background-image:url('images/fuller-waterfront-build-m.webp')} .hb-lot-17{background-image:url('images/lot-17-hero-m.webp')} .hb-lot-8{background-image:url('images/lot-8-hero-m.webp')} .hb-lot-21{background-image:url('images/lot-21-hero-m.webp')} .hb-lot-23{background-image:url('images/lot-23-hero-m.webp')} .hb-pf-hemlock{background-image:url('images/pf-hemlock-hero-m.webp')} .hb-pf-dwight{background-image:url('images/pf-dwight-hero-m.webp')} .hb-pf-stgeorges{background-image:url('images/pf-stgeorges-hero-m.webp')} .hb-portfolio{background-image:url('images/portfolio-hero-m.webp')} } .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,25,.25),rgba(16,17,25,.85));} .hero-home{min-height:800px} .hero-interior{min-height:660px} .hero-portfolio{min-height:620px} .hero-contact{min-height:560px} .hero-inner{position:relative;padding-bottom:92px;max-width:820px} .hero .t-hero,.hero .t-hero-home,.hero .t-contact{color:#fff;margin:18px 0 20px} .hero p{font-size:21px;line-height:1.65;color:var(--on-navy);max-width:680px} .hero .btn{margin-top:30px} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px} /* ---- generic intro / two column ---- */ .two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} .lead p{font-size:20px;max-width:820px} .mt-s{margin-top:14px}.mt-m{margin-top:22px}.mt-l{margin-top:34px} h2.h2,h2.h2-lg{margin:16px 0 20px} /* ---- path cards (homepage two doors) ---- */ .path-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:52px} .path-card{background:#fff;border:1px solid var(--card-border);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .path-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(25,26,38,.14)} .path-card .card-img{height:340px} .path-card-body{padding:48px;display:flex;flex-direction:column;flex:1} .path-tag{font-family:'Bebas Neue';font-size:20px;letter-spacing:.18em;color:var(--brass)} .path-kicker{font-family:'Montserrat';font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--gold-cream);margin:12px 0 8px;text-transform:uppercase} .path-card h3{margin:6px 0 14px} .bullets{list-style:none;margin:18px 0 26px} .bullets li{position:relative;padding:8px 0 8px 24px;font-size:18px} .bullets li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--brass)} .path-card .btn{margin-top:auto;align-self:flex-start} /* ---- inventory / card grids (lots, homes, portfolio) ---- */ .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px} .card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:52px} .card{background:#fff;border:1px solid var(--card-border);display:flex;flex-direction:column;overflow:hidden} .bg-navy .card{background:var(--navy-card);border-color:var(--navy-border)} /* .card-img is used on both (lazy-loaded, preferred) and on
where the tile is a plain colour block. object-fit covers the first, background-size the second, so one rule serves both. */ .card-img{background-size:cover;background-position:center;height:230px;width:100%;object-fit:cover} /* team cards: taller portrait area so the full bust and polo branding show */ /* headshots crop from the top so the whole bust stays in frame, not just the head */ .team-grid .card-img{height:430px;background-position:center top;object-position:center top} .card-grid-3 .card-img{height:320px} .card-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1} .tier{font-family:'Montserrat';font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-cream)} .bg-navy .tier{color:var(--gold-navy)} .card h3.cardname{font-family:'Montserrat';font-weight:600;font-size:24px;color:var(--navy);margin:10px 0 6px} .bg-navy .card h3.cardname{color:#fff} .card .size{font-size:16px;color:var(--muted-cream)} .price{font-family:'Bebas Neue';font-size:32px;letter-spacing:.03em;color:var(--navy);margin:16px 0 18px} /* The "plus HST" qualifier that sits beside a price. It needs a background-aware colour like everything else here: the same lot cards render on white on /build-at-deerhurst-highlands but on a navy card on the homepage, where --muted-cream only manages 2.63:1. */ .price-tax{font-size:16px;letter-spacing:.02em;color:var(--muted-cream)} .bg-navy .price-tax{color:#a8a294} .bg-navy .price{color:var(--price)} .enq{font-family:'Bebas Neue';font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);text-decoration:none;padding-bottom:8px;border-bottom:2px solid var(--gold-cream);align-self:flex-start;margin-top:auto} .bg-navy .enq{color:var(--gold-navy);border-color:#5a5c6c} .enq:hover{border-color:var(--brass)} .status{font-family:'Montserrat';font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)} /* ---- stat row ---- */ .stat-row{display:flex;gap:40px;margin-top:32px} .stat b{font-family:'Bebas Neue';font-size:46px;color:var(--brass);display:block;line-height:1} .stat span{font-size:15px} /* ---- build cost line ---- */ .costline{margin-top:44px;padding-top:30px;border-top:1px solid var(--divider);display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap} .bg-navy .costline{border-color:var(--navy-border)} .costline-big{font-family:'Bebas Neue';font-size:46px;letter-spacing:.02em;color:var(--brass);line-height:1;white-space:nowrap} .costline p{max-width:560px} .selfperform{font-weight:600;color:var(--navy)} .section-note{margin-top:20px;font-size:15px;color:var(--muted-cream)} /* ---- feature / why grid ---- */ .why-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;margin-top:44px} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px} .fcard{background:#fff;border:1px solid var(--card-border);padding:44px} .bg-navy .fcard{background:var(--navy-card);border-color:var(--navy-border)} .fcard-num{font-family:'Bebas Neue';font-size:44px;letter-spacing:.03em;color:var(--brass);line-height:1} /* --brass reads well on navy (6.6:1) but fails on the light grounds: 2.46 on cream and 2.63 on white, against a 3.0 minimum for large text. The design system already has a darker accent for light backgrounds, --gold-cream, and these two rules simply never used it. Same light/dark split as .eyebrow.is-cream vs .is-navy. Do not "restore" the brass here: these are the biggest, most decision-relevant numbers on the site. Scoped by section background so brass is kept where it works: .proc-num and .costline-big still render brass inside .bg-navy. */ .bg-cream .stat b,.bg-white .stat b, .bg-cream .fcard-num,.bg-white .fcard-num, .bg-cream .path-tag,.bg-white .path-tag, .bg-cream .costline-big,.bg-white .costline-big, .bg-cream .proc-num,.bg-white .proc-num{color:var(--gold-cream)} .fcard h3{font-family:'Montserrat';font-weight:600;font-size:30px;color:var(--navy);margin:12px 0 10px} .bg-navy .fcard h3{color:#fff} .inset{margin-top:26px;background:var(--cream);border:1px solid var(--card-border);padding:24px;display:flex;gap:18px;align-items:center} .inset img{width:120px;height:90px;object-fit:cover} /* ---- process rows ---- */ .process-row{display:grid;grid-template-columns:120px 1fr 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--divider);align-items:start} .bg-navy .process-row{border-color:var(--navy-border)} .proc-num{font-family:'Bebas Neue';font-size:78px;color:var(--brass);line-height:.85} .process-row h3{font-family:'Bodoni Moda',serif;font-weight:400;font-size:44px;color:var(--navy)} .bg-navy .process-row h3{color:#fff} /* ---- placeholders (portfolio/about not-yet-supplied) ---- */ .placeholder-tile{background:repeating-linear-gradient(45deg,#efe7d8,#efe7d8 12px,#f2ead9 12px,#f2ead9 24px);color:#6b5a37;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';letter-spacing:.14em;font-size:18px;height:230px} .card-grid-3 .placeholder-tile{height:320px} /* ---- portfolio project cards ---- One card per project. To add a project, copy a .proj-card block in portfolio.html and change the image, location, title and description. */ .proj-card{display:flex;flex-direction:column} .proj-card-img{width:100%;height:280px;object-fit:cover;display:block} .proj-card .card-body{display:flex;flex-direction:column;flex:1} /* The thumb strip is pinned to the bottom of the card (margin-top:auto) so every card in a row lines up regardless of how long its description runs. Height is fixed rather than aspect-ratio driven for the same reason: a card with two thumbs and a card with one still finish at the same point. */ .proj-card-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:auto;padding-top:24px} .proj-card-thumbs img{width:100%;height:210px;object-fit:cover;display:block} /* A lone thumb spans the full card, so it can afford to be shallower and wider than the paired ones without looking letterboxed. */ .proj-card-thumbs img:only-child{height:230px} /* ---- portfolio filter (non-interactive labels - CRO fix) ---- */ .filter-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px} .filter{font-family:'Bebas Neue';font-size:18px;letter-spacing:.1em;text-transform:uppercase;border:2px solid #cbbfa9;color:var(--navy);padding:12px 26px;background:transparent} .filter.active{background:var(--navy);color:#fff;border-color:var(--navy)} /* ---- empty state (CRO fix) ---- */ .empty-state{margin-top:52px;background:#fff;border:1px dashed var(--card-border);padding:56px;text-align:center} .empty-state h3{font-family:'Bodoni Moda',serif;font-weight:400;font-size:34px;color:var(--navy);margin-bottom:14px} /* ---- contact form placeholder ---- */ .form-card{background:#fff;border:1px solid var(--card-border);padding:48px} .step-chip{display:inline-block;font-family:'Bebas Neue';letter-spacing:.14em;background:var(--warm);color:#5a4a25;padding:8px 16px;font-size:16px;margin-bottom:18px} .opt-btn{display:block;width:100%;text-align:left;font-family:'Montserrat';font-weight:600;font-size:20px;color:var(--navy);background:var(--cream);border:2px solid var(--card-border);padding:22px 26px;margin-bottom:14px;cursor:pointer} .opt-btn:hover{border-color:var(--brass)} .field{margin-bottom:16px} .field label{display:block;font-family:'Montserrat';font-weight:600;font-size:14px;letter-spacing:.04em;margin-bottom:6px;color:var(--navy)} .field input,.field textarea,.field select{width:100%;border:2px solid var(--card-border);background:var(--cream);padding:14px 16px;font-family:'Montserrat';font-size:17px} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass)} /* A visible keyboard focus ring. The rule above kills the browser default, which left keyboard users with no indicator at all on plain links. :focus-visible fires only for keyboard/AT focus, so mouse clicks stay clean. */ :focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-color:var(--brass)} .hidden{display:none!important} .side-card{background:var(--navy);color:var(--on-navy);padding:36px;margin-bottom:24px} .side-card.white{background:#fff;color:var(--body)} /* ---- FOOTER (injected by site.js) ---- */ .site-footer{background:var(--footer);color:var(--on-navy);padding:104px 0 46px;font-size:18px} .foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:60px;padding-bottom:72px;border-bottom:1px solid #2c2e40} .foot-grid h2{font-family:'Montserrat';font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-navy);margin-bottom:18px} .foot-grid a{display:block;color:var(--on-navy);text-decoration:none;padding:8px 0} .foot-grid a:hover{color:var(--price)} .foot-logo{font-family:'Bodoni Moda',serif;font-size:26px;color:#fff} .foot-logo small{display:block;font-family:'Bebas Neue';font-size:12px;letter-spacing:.35em;color:var(--gold-navy)} .foot-bottom{display:flex;justify-content:space-between;padding-top:40px;color:#a6a3ad;font-size:16px;flex-wrap:wrap;gap:12px} /* ---- preview flag ---- */ .flag{background:#eadfc8;color:#5a4a25;font-family:'Montserrat';font-size:13px;letter-spacing:.03em;text-align:center;padding:9px 16px;position:relative;z-index:200} /* ---- testimonials ---- Two shapes only. .quote-band is the full review as its own section; .pullquote is a single verbatim sentence set inside an existing section. Both quote the same review, so keep the citation identical everywhere: one client reading as one client is honest, and reads better than the same voice pretending to be several. Never paraphrase a review to fit a slot. Cut with an ellipsis or pick a different sentence. */ .quote-mark{font-family:'Bodoni Moda',serif;font-size:76px;line-height:.42;color:var(--brass);display:block;margin:0 0 6px} .quote-lg{font-family:'Bodoni Moda',Didot,serif;font-weight:400;font-size:29px;line-height:1.5;color:#fff;max-width:1000px;font-style:normal} .quote-cite{display:block;margin-top:28px;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-navy);font-style:normal} .bg-cream .quote-lg,.bg-white .quote-lg{color:var(--navy)} .bg-cream .quote-cite,.bg-white .quote-cite{color:var(--gold-cream)} /* Two reviews side by side. Used on the homepage only: everywhere else a page carries at most one testimonial, so the same voice never repeats down a visitor's path. Collapses to one column under 1000px. */ .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:26px} .quote-grid blockquote{margin:0} .quote-grid .quote-lg{font-size:21px;line-height:1.6;max-width:none} .quote-grid .quote-mark{font-size:54px;margin-bottom:2px} .quote-grid .quote-cite{margin-top:22px;font-size:17px} .pullquote{border-left:3px solid var(--brass);padding:6px 0 6px 28px;margin:52px 0 0;max-width:860px} .pullquote p{font-family:'Bodoni Moda',Didot,serif;font-size:25px;line-height:1.5;color:var(--navy);font-style:normal;margin:0} .pullquote cite{display:block;margin-top:16px;font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-cream);font-style:normal} .bg-navy .pullquote p{color:#fff} .bg-navy .pullquote cite{color:var(--gold-navy)} /* ---- price table (Deerhurst townhomes) ---- Prices live on the page rather than in a downloadable PDF: no download friction, Google can read them, and there is only one copy to keep current. The @media print block near the bottom of this file makes the page print as a clean price sheet, which is what the PDF was for. On phones the table switches to stacked rows using the data-label attributes in the markup, so nothing gets squeezed into unreadable columns. */ .price-table{width:100%;max-width:1040px;border-collapse:collapse;margin-top:42px;font-size:18px} /* action column hugs the right edge of the table rather than the page */ .price-table th:last-child,.price-table td:last-child{text-align:right;padding-right:0} .price-table th{font-family:'Bebas Neue';font-size:19px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-cream);text-align:left;padding:0 20px 14px 0;border-bottom:2px solid var(--brass);white-space:nowrap} .price-table td{padding:20px 20px 20px 0;border-bottom:1px solid var(--divider);vertical-align:middle} .price-table tr:last-child td{border-bottom:0} .price-lot{font-family:'Bebas Neue';font-size:30px;color:var(--navy);line-height:1} .price-amount{font-family:'Bebas Neue';font-size:28px;color:var(--gold-cream);line-height:1;white-space:nowrap} .unit-dot{display:inline-block;width:13px;height:13px;margin-right:10px;vertical-align:baseline;flex:none} .dot-ext{background:#576770} .dot-int{background:#af9656} /* .enq is normally a text link pinned to the bottom of a flex card body. In a table cell its margin-top:auto and trailing underline read as a stray rule, so inside the price table it becomes a proper outlined button. */ .price-table .enq{display:inline-block;white-space:nowrap;font-size:17px; border:2px solid #cbbfa9;border-radius:0;padding:11px 24px;margin:0; align-self:auto;transition:background .25s,border-color .25s,color .25s} .price-table .enq:hover{background:var(--navy);border-color:var(--navy);color:#fff} /* site-plan legend, rebuilt in HTML so it matches the site rather than the legend baked into the drawing */ .plan-legend{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;align-items:center} .plan-legend span{display:flex;align-items:center;font-size:17px} /* One floor-plan drawing plus its caption. The two unit types have genuinely different proportions: the interior unit is a narrower townhome, so its plan is about 2.2:1 where the exterior is 1.7:1. Fixed box height plus object-fit:contain lets both sit in a matching frame so the two cards line up, and the narrower plan simply reads narrower, which is honest. Each drawing links to the full-resolution file for pinch-zooming. */ .plan-card{background:#fff;border:1px solid var(--card-border);padding:26px;align-self:start} .plan-fig{margin:30px 0 0} /* Draw each plan at its natural aspect and the full width of the card. An earlier version used a fixed-height box with object-fit:contain so the two cards would line up, but that shrank the narrow interior plan to 369px inside a 580px box, left it floating in white space with its caption detached, and scaled the two plans differently so rooms looked comparable when they are not. Alignment is handled instead by putting the specs table above the drawings, where both cards have identical structure. */ .plan-fig img{width:100%;height:auto;display:block;background:#fff} .plan-fig figcaption{font-family:'Bebas Neue';font-size:17px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted-cream);margin-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .plan-fig figcaption a{color:var(--gold-cream);text-decoration:none;border-bottom:1px solid var(--divider)} .plan-fig figcaption a:hover{border-color:var(--brass)} .plan-specs{list-style:none;margin-top:20px} .plan-specs li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--divider);font-size:17px} .plan-specs li:last-child{border-bottom:0} .plan-specs b{font-weight:600;color:var(--navy);text-align:right} /* ---- lot pages ---- Questions are Montserrat semibold rather than .serif: they are read as labels, not as headings, and the serif at this size competes with the h2. */ .faq{max-width:900px;margin-top:34px} .faq-item{padding:26px 0;border-bottom:1px solid var(--divider)} .faq-item:last-child{border-bottom:0} .faq-item h3{font-family:'Montserrat',Helvetica,sans-serif;font-weight:600;font-size:20px; line-height:1.45;color:var(--navy);margin-bottom:12px} .lot-diagram{width:100%;height:auto;background:#fff;border:1px solid var(--card-border);padding:14px} .footnote{font-size:13px;color:var(--muted-cream);line-height:1.6;max-width:900px} /* ---- portfolio property galleries ---- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px} .gallery-grid img{width:100%;height:300px;object-fit:cover;display:block} @media (max-width:1000px){ .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px} .gallery-grid img{height:250px} } @media (max-width:640px){ .gallery-grid{grid-template-columns:1fr} .gallery-grid img{height:260px} } /* ============ RESPONSIVE ============ */ /* horizontal-overflow guard */ html,body{overflow-x:hidden} h1,h2,h3,h4{overflow-wrap:break-word} /* The horizontal nav needs about 1170px of room once the logo and the Enquire button are accounted for. It used to switch to the burger only below 1000px, which meant it silently overflowed on any 1024 to 1250px window - a 1280x800 laptop, for example. The burger now takes over below 1220px. Only the nav rules moved; every other rule in the 1000px block below is layout and stays where it was. If you add a nav item, re-measure: nav width + logo + 96px of .wrap padding must stay under the breakpoint. Measured need after removing the Model Home item: 1175px, so 1220 leaves 45px of slack. */ @media(max-width:1220px){ .nav{display:none} .nav.open{display:flex;position:fixed;top:104px;left:0;width:100%;background:var(--navy);flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;max-height:calc(100vh - 104px);overflow-y:auto} .nav.open a.navlink,.nav.open .dd a{width:100%;padding:16px 48px} .nav.open .dd{display:block;position:static;box-shadow:none;border-top:0;background:transparent;min-width:0} .nav.open .dd a{color:var(--gold-navy);font-size:16px} .nav.open .enquire{margin:14px 48px} .burger{display:flex} } @media(max-width:1000px){ .two-col,.why-grid,.feature-grid{grid-template-columns:1fr;gap:36px} .path-grid{grid-template-columns:1fr} .card-grid{grid-template-columns:1fr 1fr} /* process rows stack cleanly: number above title above text (works with or without .proc-body) */ .process-row{display:block;padding:30px 0} .process-row .proc-num{font-size:56px;margin-bottom:10px} .process-row h3{margin-bottom:10px} .process-row p{margin:0} .t-hero-home{font-size:52px}.t-hero{font-size:46px}.t-contact{font-size:40px} .h2,.h2-lg{font-size:38px}.h3-card{font-size:30px} .wrap{padding:0 24px} .section{padding:80px 0} .foot-grid{grid-template-columns:1fr 1fr} /* inline-styled grids that must collapse */ .contact-grid{grid-template-columns:1fr !important} .showcase-2up{grid-template-columns:1fr !important} .showcase-2up img{height:340px !important} .team-grid{grid-template-columns:1fr !important} .quote-grid{grid-template-columns:1fr;gap:52px} .card-grid-3{grid-template-columns:1fr 1fr} .proj-card-img{height:240px} .proj-card-thumbs img{height:180px} .proj-card-thumbs img:only-child{height:200px} } @media(max-width:640px){ body{font-size:18px} /* display headings: force below inline styles so nothing overflows */ h1.serif{font-size:44px !important;line-height:1.08} h2.serif{font-size:31px !important;line-height:1.18} h3.serif{font-size:26px !important;line-height:1.22} .eyebrow{font-size:16px;letter-spacing:.18em} .hero p{font-size:17px} /* hero heights sized for phones */ .hero{padding-top:132px} .hero-home{min-height:560px} .hero-interior{min-height:480px} .hero-portfolio{min-height:460px} .hero-contact{min-height:440px} .hero-inner{padding-bottom:56px} /* spacing: keep breathing room without endless scroll */ .section{padding:60px 0} .fcard{padding:26px} .path-card-body{padding:28px 24px} .form-card{padding:26px 20px} .card-body{padding:22px 20px 26px} /* grids to single column */ .card-grid,.card-grid-3{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .stat-row{flex-wrap:wrap;gap:24px} .costline{gap:24px} .costline-big{font-size:36px} /* images: bold but bounded (overrides inline heights) */ .card-img{height:220px} .team-grid .card-img{height:400px} .two-col .card-img{height:320px !important} /* Single column here, so cards no longer have to match each other's height. Stack the thumbs full width instead of squeezing two into a 137px column. */ .proj-card-thumbs{grid-auto-flow:row;gap:14px} .proj-card-thumbs img,.proj-card-thumbs img:only-child{height:215px} /* price table collapses to stacked rows; each cell shows its own label from the data-label attribute, so no column gets crushed */ .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .price-table tr{display:block;border:1px solid var(--card-border);background:#fff;padding:18px 20px;margin-bottom:16px} .price-table td{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:9px 0;border-bottom:1px solid var(--divider);text-align:right} .price-table td:last-child{border-bottom:0;padding-bottom:0} .price-table td:before{content:attr(data-label);font-family:'Bebas Neue';font-size:16px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted-cream);text-align:left;flex:none} .price-table td:empty{display:none} .plan-card{padding:18px} /* testimonials: step the display sizes down so a long quote stays readable */ .quote-lg{font-size:21px;line-height:1.55} .quote-mark{font-size:58px} .quote-cite{font-size:16px;margin-top:22px} .pullquote{padding-left:20px;margin-top:38px} .pullquote p{font-size:20px} .fcard > img{height:400px !important} .process-row .proc-num{font-size:44px} /* tap comfort: full-width buttons, bigger link targets */ .btn{display:block;width:100%;text-align:center;font-size:20px;padding:18px 24px} .hero-cta{width:100%} .enq{font-size:19px;padding:10px 0 12px} .btn-text{font-size:20px;padding-bottom:12px} .foot-grid a{padding:12px 0} .section-note{font-size:15px} /* small uppercase labels legible for older eyes */ .tier,.path-kicker,.label{font-size:15px} .stat span{font-size:16px} } /* ============ PRINT ============ Makes /deerhurst-townhomes print as a clean price sheet, which is what the separate PDF price list was for. One source of truth: edit the table, and the web page and the printed sheet both update. Ctrl+P, or Save as PDF. Written generically so any page prints sensibly. */ @media print{ *{background:transparent !important;color:#000 !important;box-shadow:none !important} .site-header,.site-footer,.hero-cta,.enq,.btn,.btn-text,.burger,.nav{display:none !important} .hero{min-height:0 !important;padding:0 0 18px !important;display:block;color:#000 !important} .hero:before{display:none} .hero-inner{padding:0 !important;max-width:none} .hero .t-hero,.hero .hero-sub,.hero p{color:#000 !important} .section{padding:18px 0 !important;page-break-inside:avoid} .wrap{padding:0 !important;max-width:none} h1.serif{font-size:26pt !important} h2.serif{font-size:17pt !important} h3{font-size:12pt !important} body{font-size:10pt} .price-table{margin-top:14px;font-size:10pt} .price-table th{color:#000 !important;border-bottom:1.5pt solid #000} .price-table td{padding:7pt 10pt 7pt 0;border-bottom:.5pt solid #999} .price-lot,.price-amount{font-size:13pt;color:#000 !important} .unit-dot{border:.5pt solid #000} .dot-ext{background:#8d8d8d !important} .dot-int{background:#cfcfcf !important} /* renderings and plans are the bulk of the ink; keep the site plan and the two floor plans, drop the photographic elevations */ .plan-card{border:.5pt solid #999;padding:10pt;page-break-inside:avoid} img{max-width:100% !important} a[href^=/]:after{content:} } /* ---- fixes from the 7 Aug accessibility and UX pass ---- */ /* The hero subhead shipped with only .serif, which sets navy, so it rendered navy-on-photo at between 1.12:1 and 1.73:1. Unreadable. White measures 10:1 to 15:1 against the same composited backgrounds. */ .hero-sub{font-size:38px;line-height:1.22;margin-top:6px;font-weight:400;color:#fff;max-width:680px} /* No mobile font-size here on purpose: the existing h2.serif rule below carries !important and already drops every serif h2 to 31px on small screens, which is the right size for this line too. A .hero-sub rule would be dead weight. */ @media (max-width:1000px){.hero-sub{max-width:none}} /* Card actions. The single .enq link was uppercase Bebas carrying up to 55 characters of descriptive anchor text, which is unreadable at that size, and its underline was invisible. Descriptive text stays for SEO but reads as sentence-case Montserrat with an arrow, and the enquiry CTA comes back alongside it rather than being replaced by it. */ .card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:auto;padding-top:24px} .btn-card{display:inline-block;font-family:'Bebas Neue';font-size:18px;letter-spacing:.12em; text-transform:uppercase;padding:15px 26px;border:2px solid transparent;text-decoration:none; line-height:1;background:var(--navy);color:#fff;transition:.28s ease} .btn-card:hover{background:var(--brass);color:var(--navy)} .card-enq{font-family:'Bebas Neue';font-size:17px;letter-spacing:.12em;text-transform:uppercase; color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold-cream);padding:9px 0 11px} .card-enq:hover{border-color:var(--navy)} .card-note{font-size:16px;line-height:1.5;color:var(--muted-cream);margin-top:4px} /* Gallery frames open full size in a new tab, matching the "view full size" pattern already used for the townhome floor plans. */ .gallery-grid a{display:block;position:relative;cursor:zoom-in} .gallery-grid a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--brass);transition:.2s ease} .gallery-grid a:hover::after{box-shadow:inset 0 0 0 3px var(--brass)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } .lead a,.faq-item a{color:var(--gold-cream);text-underline-offset:3px} .lead a:hover,.faq-item a:hover{color:var(--navy)} /* Skip link: off-screen until it takes keyboard focus. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:var(--navy); font-family:'Bebas Neue';font-size:18px;letter-spacing:.12em;text-transform:uppercase; padding:16px 24px;text-decoration:none} .skip:focus{left:16px;top:16px} /* Visible breadcrumb in the hero. The trail was schema-only, so a visitor landing on a deep page had no idea where in the site they were. */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 22px; font-family:'Montserrat',Helvetica,sans-serif;font-size:14px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;line-height:1.5} .crumbs a{color:var(--hero-eyebrow);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px} .crumbs a:hover{color:#fff;border-color:var(--brass)} .crumbs span[aria-current]{color:#fff} .crumbs .sep{color:rgba(255,255,255,.55)} @media (max-width:640px){.crumbs{font-size:12px;gap:7px;margin:18px 0 16px}} @media print{.crumbs{display:none}} /* ---- lot cost stack ---- */ .cost-stack{margin-top:40px;border:1px solid var(--card-border);background:var(--cream);padding:30px 32px} .cost-stack h3{font-family:'Bebas Neue';font-size:23px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-cream);margin:0} .cost-list{list-style:none;margin-top:16px} .cost-list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:13px 0; border-bottom:1px solid var(--divider);font-size:17px;line-height:1.4} .cost-list li:last-child{border-bottom:0} .cost-list b{font-weight:600;color:var(--navy);text-align:right;white-space:nowrap} .cost-list .is-sub{border-top:2px solid var(--divider);margin-top:4px} .cost-list .is-total{border-top:2px solid var(--brass);border-bottom:0;margin-top:4px;padding-top:18px} .cost-list .is-total b{font-family:'Bebas Neue';font-size:29px;letter-spacing:.02em} .cost-note{font-size:13px;color:var(--muted-cream);line-height:1.6;margin-top:18px} @media (max-width:640px){ .cost-stack{padding:24px 20px} .cost-list li{font-size:16px;gap:14px} .cost-list .is-total b{font-size:25px} } /* Footnote band. It previously reused .section with padding-top:0, which was written for a footnote following a cream section. On the lot and portfolio pages it follows a navy one, so the small print sat hard against the colour change with 120px of empty cream underneath it. Balanced padding instead. */ .section-footnote{padding:56px 0 64px} @media (max-width:1000px){.section-footnote{padding:44px 0 48px}} @media (max-width:640px){.section-footnote{padding:36px 0 40px}} .section-footnote .footnote{max-width:820px} /* A section that continues the one above it rather than starting a new beat. Overrides only the top padding, so the block no longer butts the colour change while the normal rhythm below it is untouched. */ .section-tight{padding-top:44px} @media (max-width:1000px){.section-tight{padding-top:32px}} /* Card actions on a navy section. These were styled for the cream cards on the overview and lot pages, where the card field is white. On the homepage the same cards sit on --navy-card, where the navy Enquire link measured 1.13:1 and the note 2.63:1. Measured replacements: note 13.29:1, Enquire 15.25:1, brass button 5.81:1 against the card with 6.57:1 navy text on it. */ .bg-navy .card-note{color:var(--on-navy)} .bg-navy .card-enq{color:#fff;border-bottom-color:var(--gold-navy)} .bg-navy .card-enq:hover{border-color:var(--brass)} .bg-navy .btn-card{background:var(--brass);color:var(--navy)} .bg-navy .btn-card:hover{background:#fff;color:var(--navy)}