/* Theme Name: JLRE Theme URI: https://jasonlange.co.nz Author: Jason Lange Author URI: https://jasonlange.co.nz Description: jasonlange.co.nz. Ported from design/mockup-v2.html per the handover of 9 September 2026. No page builder, no linked fonts, no cards, no shadows, no rounded corners. Version: 0.39.0 Requires at least: 6.5 Tested up to: 6.9 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jlre */ /* ---- Plus Jakarta Sans, shipped inside the theme. Never a Google Fonts link. ---- */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/PlusJakartaSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/PlusJakartaSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:block;src:url(assets/fonts/PlusJakartaSans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:block;src:url(assets/fonts/PlusJakartaSans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:block;src:url(assets/fonts/PlusJakartaSans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:block;src:url(assets/fonts/PlusJakartaSans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:block;src:url(assets/fonts/PlusJakartaSans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:block;src:url(assets/fonts/PlusJakartaSans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:block;src:url(assets/fonts/PlusJakartaSans-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:block;src:url(assets/fonts/PlusJakartaSans-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---- design system, ported from tokens-and-components.css ---- */ /* jasonlange.co.nz design system, extracted from mockup v2 (9 Sept 2026). Fonts: see fonts/fonts.css. Colours and type roles are the locked JLRE / Tommy's standard. */ :root{ --forest:#14301F; --cream:#FFFEF2; --green:#43B649; --deep:#276934; --blue:#1C4A9F; --pink:#E10982; --r-img:12px; /* Jason, 11 Sept 2026: one corner radius for every image on the site, except the header images (hero, parallax bands, guide illustrations) which stay square */ --ink:#14301F; --ink-70:rgba(20,48,31,.70); --ink-45:rgba(20,48,31,.65) /* was .45 = 2.66:1 on cream, failed AA. .65 = 4.64:1. Name kept so nothing else moves. 11 Sep 2026 */; --ink-16:rgba(20,48,31,.16); --ink-08:rgba(20,48,31,.08); --cream-72:rgba(255,254,242,.72); --cream-50:rgba(255,254,242,.50); --cream-18:rgba(255,254,242,.18); /* --chrome was the mockup's own browser surround, not a site colour. Removed on port. */ --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--cream); color:var(--ink); font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased} button{font:inherit; cursor:pointer} img{display:block; max-width:100%} :focus-visible{outline:2px solid var(--green); outline-offset:3px} /* ===== site ===== */ .mk{color:var(--forest); position:relative} .pad{padding-left:56px; padding-right:56px} @media screen and (max-width:820px){ .pad{padding-left:22px; padding-right:22px} } .wordmark{font-size:24px; font-weight:700; letter-spacing:.30em; text-transform:uppercase; margin-left:.30em; line-height:1} .wordsub{font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; margin-top:7px} .eyebrow{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase} /* 10px until 11 Sep 2026: "these get lost throughout the website" */ /* Jason, 11 Sept 2026: the green hairline before every eyebrow is gone, site-wide. The label stands on its own. */ .util{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase} .h2{font-size:clamp(28px,4.4vw,44px); font-weight:800; letter-spacing:-.030em; line-height:1.08; margin:0; text-wrap:balance} .body{font-size:16px; line-height:1.62; max-width:64ch} .cap{font-size:11.5px; font-weight:500; letter-spacing:.02em} /* ruled link with growing underline */ .rl{position:relative; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding-bottom:9px; color:inherit; text-decoration:none} .rl::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); transform:scaleX(1); transform-origin:left; transition:transform .5s var(--ease)} .rl::before{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; opacity:.25} .rl:hover::after{transform:scaleX(0); transform-origin:right} .rl:hover::after{animation:regrow .9s var(--ease) forwards} @keyframes regrow{0%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}} .rl .arr{display:inline-block; margin-left:8px; transition:transform .4s var(--ease)} .rl:hover .arr{transform:translateX(5px)} .rl.deep::after{background:var(--deep)} /* photo frame */ .ph{position:relative; overflow:hidden; background:#1b2a22; border-radius:var(--r-img)} .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)} .ph:hover img{transform:scale(1.03)} .ph .brief{position:absolute; left:0; right:0; bottom:0; padding:9px 14px; display:flex; gap:8px; align-items:baseline; border-top:1px solid rgba(255,254,242,.18); background:rgba(14,33,22,.66)} .ph .brief .k{font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--green); flex:none} .ph .brief .v{font-size:11px; color:var(--cream-72); line-height:1.4} /* ===== hero ===== */ .hero{position:relative; min-height:640px; display:flex; flex-direction:column; overflow:hidden; background:var(--forest)} .hero .bg{position:absolute; inset:0; z-index:1; background-size:cover; background-position:center 60%; transform:scale(1.06); animation:kenburns 16s var(--ease) forwards} @keyframes kenburns{from{transform:scale(1.10) translateY(6px)}to{transform:scale(1.0) translateY(0)}} .hero .scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(20,48,31,.74) 0%,rgba(20,48,31,.22) 36%,rgba(20,48,31,.22) 60%,rgba(20,48,31,.88) 100%)} .sitehead{position:relative; z-index:3; padding-top:30px; text-align:center; color:var(--cream)} .sitehead .wordmark,.sitehead .wordsub,.sitehead .nav{opacity:0; transform:translateY(10px); animation:up .9s var(--ease) forwards} .sitehead .wordsub{animation-delay:.15s} .sitehead .nav{animation-delay:.3s} @keyframes up{to{opacity:1; transform:none}} /* !! .util already sets 11px on this nav, so the size lives on .nav.util and not on .nav, which would lose the cascade to it and silently do nothing. Tracking comes down as the size goes up: .16em was set for 11px and looks gappy at 13px. */ .nav{margin-top:26px; display:flex; gap:30px; justify-content:center; flex-wrap:wrap} .nav.util a{font-size:13px; letter-spacing:.12em} @media screen and (max-width:1100px){ .nav.util a{font-size:12px} .nav{gap:24px} } .nav a{color:var(--cream); text-decoration:none; opacity:.88; position:relative; padding-bottom:4px} .nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)} .nav a:hover::after,.nav a.here::after{transform:scaleX(1)} @media screen and (max-width:820px){ .nav{gap:16px} } .hero .spacer{flex:1} .hfoot{position:relative; z-index:3; padding-bottom:34px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; color:var(--cream); flex-wrap:wrap; opacity:0; animation:up 1s var(--ease) .6s forwards} .hfoot .mark img{display:block; width:auto; height:44px} /* 26px until 11 Sep 2026: "a bigger logo of Tommy's on the home page" */ .hfoot .briefline{font-size:10.5px; color:var(--cream-50); letter-spacing:.02em; max-width:52ch; text-align:right} .scrollcue{position:absolute; left:50%; bottom:14px; z-index:3; width:1px; height:34px; background:var(--cream-50); transform-origin:top; animation:cue 2.2s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* sticky compact header after hero */ .stickywrap{position:sticky; top:0; z-index:40; height:0; overflow:visible} .sticky{position:absolute; left:0; right:0; top:0; background:var(--forest); color:var(--cream); display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 56px; transform:translateY(-110%); opacity:0; transition:transform .5s var(--ease), opacity .4s var(--ease); pointer-events:none} .sticky.show{transform:none; opacity:1; pointer-events:auto} .sticky .wm{font-size:13px; font-weight:700; letter-spacing:.28em; text-transform:uppercase} .sticky .nav{margin:0; gap:22px} .sticky .nav a{font-size:10px} @media screen and (max-width:820px){ .sticky{padding:11px 22px} .sticky .nav{display:none} } /* ===== two doors ===== */ .doors{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink-16)} @media screen and (max-width:820px){ .doors{grid-template-columns:1fr} } .door{padding:52px 0 48px} .door:first-child{border-right:1px solid var(--ink-16)} @media screen and (max-width:820px){ .door:first-child{border-right:0; border-bottom:1px solid var(--ink-16)} } .door .inner{padding:0 56px} @media screen and (max-width:820px){ .door .inner{padding:0 22px} } .door .offer{margin:20px 0 0; font-size:21px; font-weight:600; line-height:1.45; letter-spacing:-.012em; max-width:34ch} .door .offer em{font-style:normal; color:var(--deep); font-weight:700} /* the selling page: a numbered journey with a sticky rail (option A, 11 Sep 2026), then the two doors */ .journey .jgrid{display:grid; grid-template-columns:250px minmax(0,1fr); gap:48px; align-items:start} .jrail{position:sticky; top:70px} .jrail ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--ink-16)} .jrail a{display:block; padding:10px 0 10px 18px; font-size:13.5px; font-weight:600; color:var(--ink-45); text-decoration:none; position:relative; transition:color .3s var(--ease)} .jrail a i{display:block; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--deep); margin-bottom:2px} .jrail a.on{color:var(--ink); font-weight:700} .jrail a.on::before{content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:2px; background:var(--green)} .jrail a:hover{color:var(--ink)} .jstage{display:grid; grid-template-columns:84px minmax(0,1fr); gap:20px; padding:34px 0; border-top:1px solid var(--ink-16); scroll-margin-top:70px} .jstage:first-child{border-top:0; padding-top:0} .jstage .jn{font-size:48px; font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--deep); font-variant-numeric:tabular-nums} .jstage .h2{margin:2px 0 12px} .jstage .prose p{margin:0} .jtools{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px} .jtools span{font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:6px 11px; border-radius:999px; border:1px solid var(--ink-16); color:var(--ink)} @media screen and (max-width:900px){ .journey .jgrid{grid-template-columns:1fr; gap:22px} .jrail{position:sticky; top:46px; background:var(--cream); padding:10px 0; z-index:20} .jrail ol{display:flex; gap:6px; overflow-x:auto; border:0; scrollbar-width:none} .jrail ol::-webkit-scrollbar{display:none} .jrail a{padding:8px 12px; border:1px solid var(--ink-16); border-radius:999px; white-space:nowrap; font-size:12px} .jrail a i{display:inline; margin:0 6px 0 0} .jrail a.on{background:var(--forest); color:var(--cream); border-color:var(--forest)} .jrail a.on i{color:var(--green)} .jrail a.on::before{display:none} .jstage{grid-template-columns:1fr; gap:6px; padding:26px 0; scroll-margin-top:110px} .jstage .jn{font-size:34px} } .sell-doors{border-top:1px solid var(--ink-16); border-bottom:0} .door.dark{background:var(--forest); color:var(--cream)} .door.dark .offer em{color:var(--green)} .door.dark .eyebrow{color:var(--cream)} .door.dark .fine{color:var(--cream-72)} .door.dark:first-child{border-right:0} /* the core-green door: forest type throughout, because cream (2.6:1) and deep green (2.5:1) both fail on #43B649 */ .door.green{background:var(--green); color:var(--forest)} .door.green .eyebrow{color:var(--forest)} .door.green .offer em{color:var(--forest); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px} .door.green .fine{color:rgba(20,48,31,.78)} .door.green .jform .field{border-bottom-color:rgba(20,48,31,.35)} .door.green .jform .field input,.door.green .jform .field textarea{color:var(--forest)} .door.green .jform .field input::placeholder{color:rgba(20,48,31,.62)} .door.green .jform .field .go{color:var(--forest); border-bottom-color:var(--forest)} .door.green .jform .jform-msg{color:var(--forest)} .field{margin-top:26px; display:flex; align-items:center; border-bottom:1px solid var(--ink-16); padding-bottom:9px; position:relative} .field::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--deep); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)} .field:hover::after{transform:scaleX(1)} .field .fake{flex:1; font-size:14px; color:var(--ink-45)} .field .go{font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--deep); white-space:nowrap; padding-bottom:3px; border-bottom:2px solid var(--deep)} /* 11px and bare until 11 Sep 2026: "send it and join seem to get lost" */ .door .fine{margin-top:14px; font-size:11.5px; color:var(--ink-45)} /* ===== credibility ===== */ .creds{background:var(--forest); color:var(--cream); padding:60px 0} .credgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px} /* Four tiles from 13 Sept 2026: years, count, value, rating. Two by two on a phone. */ .credgrid.four{grid-template-columns:repeat(4,1fr); gap:32px} .credgrid.four .cred .n{font-size:clamp(44px,5.6vw,72px)} @media screen and (max-width:820px){ .credgrid,.credgrid.four{grid-template-columns:1fr 1fr; gap:30px} } @media screen and (max-width:520px){ .credgrid,.credgrid.four{grid-template-columns:1fr; gap:28px} } .cred .n{font-size:clamp(52px,8vw,86px); font-weight:800; letter-spacing:-.045em; line-height:.88; font-variant-numeric:tabular-nums; display:flex; align-items:baseline} .cred .n .pre,.cred .n .suf{font-size:.42em; letter-spacing:-.02em; opacity:.85} .cred .n .pre{margin-right:.06em} .cred .n .suf{margin-left:.04em} .cred .n .star{width:.46em; height:.46em; fill:var(--green); margin-left:.14em; align-self:center; flex:none} .cred .l{margin-top:14px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-72); max-width:20ch; line-height:1.55} .cred .src{margin-top:8px; font-size:11px; color:var(--cream-50); max-width:30ch; line-height:1.5} /* ===== sections + reveal ===== */ .sec{padding:76px 0; border-bottom:1px solid var(--ink-16)} .sec .head{margin-bottom:34px} .sec .head .h2{margin-top:14px} .js .reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)} .js .reveal.in{opacity:1; transform:none} .js .reveal.d1{transition-delay:.08s} .js .reveal.d2{transition-delay:.16s} .js .reveal.d3{transition-delay:.24s} .js .reveal.d4{transition-delay:.32s} /* meet */ .meet{display:grid; grid-template-columns:0.92fr 1.08fr; gap:52px; align-items:center} @media screen and (max-width:820px){ .meet{grid-template-columns:1fr; gap:30px} } .meet .plate{position:relative; z-index:0} .meet .plate .ph{height:400px; position:relative; z-index:1} .meet .plate .ph.portrait{height:auto; aspect-ratio:1/1; max-width:340px} /* the plate takes the photograph's own shape, so nothing is cropped; Jason, 13 Sept: smaller */ .meet.compact{grid-template-columns:340px 1fr; align-items:start} @media screen and (max-width:820px){ .meet.compact{grid-template-columns:1fr} } /* The offset outline that used to sit behind this photo is gone. It was inset at the top left and hung 18px past the bottom right, so the image covered two of its sides and the reader saw a stray hairline running down the right and under the picture rather than a frame. Jason, 10 September 2026: "a weird kind of border and box". */ .meet .h2{font-size:clamp(34px,5.4vw,62px); letter-spacing:-.036em; line-height:1.02} .meet .sig{margin-top:26px; font-size:22px; font-weight:700; letter-spacing:-.02em} /* listing rows with thumbnails */ .rows{border-top:1px solid var(--ink-16)} .row{display:grid; grid-template-columns:120px minmax(0,1fr) auto auto; gap:22px; align-items:center; padding:16px 0; border-bottom:1px solid var(--ink-08); text-decoration:none; color:inherit; transition:background .4s var(--ease)} .row:hover{background:rgba(20,48,31,.03)} .row .th{width:120px; height:78px; overflow:hidden; background:var(--ink-08); border-radius:var(--r-img)} .row .th img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)} .row:hover .th img{transform:scale(1.06)} @media screen and (max-width:820px){ .row{grid-template-columns:96px minmax(0,1fr) auto} .row .fig{grid-column:2; } .row .st{grid-column:3; grid-row:1} .row .th{width:96px; height:66px} } /* ⚠️ minmax(0,1fr) above, not 1fr. A bare `1fr` is minmax(AUTO,1fr), so the column can never shrink below its longest word — and "29 Winchester Street, Kaiwharawhara" pushed /results/ 17px sideways at 320px, one row out of 154. Wellington is full of names that long, so break-word is the pair to it: the column can shrink, and the word can wrap rather than hang off the edge. */ .row .addr{font-size:17px; font-weight:600; letter-spacing:-.012em; overflow-wrap:break-word} .row .sub{overflow-wrap:break-word} .row .sub{font-size:12px; color:var(--ink-45); letter-spacing:.02em; margin-top:2px} .row .fig{font-size:13.5px; color:var(--ink-70); font-variant-numeric:tabular-nums; white-space:nowrap} .chip{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; white-space:nowrap} .chip.sold{background:var(--pink); color:#fff} /* No .chip.live. A "FOR SALE" chip appeared on all twenty-three rows of a page headed "What I am selling right now", and on the home teaser, and on every suburb guide — it never once told anyone anything. Dropping it is also what makes the pink SOLD chip mean something: it is now the only chip on the site. */ /* The feature row: /for-sale/ only. Jason, 10 September 2026. The compact row above is right for the 154 sold — a historical list you scan. It was wrong for the 23 he is actually selling, where the photograph is the product and it was getting 120x78, about a tenth of the page. Same hairline language, three times the picture. */ .rows.feature{border-top:0} .row.feature{grid-template-columns:300px minmax(0,1fr); gap:32px; padding:26px 0; align-items:center; border-bottom:1px solid var(--ink-16)} .row.feature .th{width:300px; height:auto; aspect-ratio:3/2} .row.feature .addr{font-size:25px; font-weight:650; letter-spacing:-.018em; line-height:1.16} .row .devname{color:var(--green); margin-bottom:2px} .row.feature .sub{font-size:13px; margin-top:8px} /* Under the address, in the same block, left-aligned with it. The compact row's right-aligned column is right for 154 sold read as a ledger; here it left the figure stranded across a 200px gap from the property it belongs to. */ .row.feature .fig{font-size:16px; color:var(--ink-70); margin-top:14px; white-space:normal} /* No published price is not a blank column. Four of the twenty-three have none, and an empty cell reads as a fault rather than as the answer. */ .row.feature .fig.ask{color:var(--deep); font-weight:600} @media screen and (max-width:820px){ .row.feature{grid-template-columns:1fr; gap:0; padding:20px 0} .row.feature .th{width:100%; aspect-ratio:16/10} .row.feature .addr{font-size:21px; margin-top:16px} .row.feature .fig{margin-top:10px} } /* One heading per area, so a buyer in Island Bay is not scrolling past Paraparaumu to find the third Wellington house. */ .areaband{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:54px 0 6px; padding-bottom:10px; border-bottom:1px solid var(--ink-16)} .areaband:first-child{margin-top:0} .areaband .n{font-size:19px; font-weight:600; letter-spacing:-.01em} .areaband .c{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45)} /* suburbs */ .subs{columns:3; column-gap:44px} @media screen and (max-width:820px){ .subs{columns:2; column-gap:26px} } .subs a{display:block; break-inside:avoid; padding:9px 0; border-bottom:1px solid var(--ink-08); color:var(--forest); text-decoration:none; font-size:14.5px; transition:padding-left .35s var(--ease)} .subs a:hover{padding-left:8px} .subs a span{float:right; color:var(--ink-45); font-size:12px; font-variant-numeric:tabular-nums} /* ===== reviews + case studies ===== */ .revhead{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:end; margin-bottom:36px} @media screen and (max-width:820px){ .revhead{grid-template-columns:1fr; gap:14px} } .stars{display:flex; gap:4px; margin-top:12px} .stars svg{width:18px; height:18px; fill:var(--deep)} .revhead .big{font-size:clamp(52px,8vw,86px); font-weight:800; letter-spacing:-.045em; line-height:.88} .revhead .rsrc{font-size:11px; color:var(--ink-45); margin-top:10px; max-width:28ch; line-height:1.5} /* Reviews as a wall of cards. Columns, not a grid, so a 1,100 character review and a 77 character one sit naturally instead of forcing every row to the tallest card. */ .rwall{columns:3; column-gap:22px; margin-top:8px} .rcard{break-inside:avoid; display:block; margin:0 0 22px; padding:26px 26px 22px; background:#fff; border:1px solid var(--ink-16); border-radius:14px} .rcard .rstars{font-size:12px; letter-spacing:.14em; color:var(--green); margin-bottom:12px} .rcard .rh{margin:0 0 10px; font-size:18px; font-weight:700; letter-spacing:-.014em; line-height:1.3} .rcard .rq{margin:0; font-size:15px; line-height:1.6; color:var(--ink-70)} .rcard .rfoot{margin-top:18px; padding-top:14px; border-top:1px solid var(--ink-08); display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap} .rcard .rwho{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45)} .rcard .rlink{font-size:12px; font-weight:700; color:var(--deep); text-decoration:none; white-space:nowrap} .rcard .rlink .arr{margin-left:6px; display:inline-block; transition:transform .3s var(--ease)} .rcard .rlink:hover .arr{transform:translateX(4px)} @media screen and (max-width:1000px){ .rwall{columns:2} } @media screen and (max-width:640px){ .rwall{columns:1} .rcard{padding:22px 20px 18px} } /* Home, Selling Now: two large photo cards then three (option B, 11 Sep 2026). */ .hgrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:26px 22px} .hcard{display:block; text-decoration:none; color:inherit; grid-column:span 2} .hcard.big{grid-column:span 3} .hcard .hph{position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--r-img); background:var(--forest)} .hcard .hph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease)} .hcard:hover .hph img{transform:scale(1.03)} .hcard .hph .saddr{position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px; color:var(--cream); font-size:22px; font-weight:800; letter-spacing:-.025em; line-height:1.1} .hcard .hb{padding:12px 2px 0} .hcard .addr{font-size:16px; font-weight:700; letter-spacing:-.014em; line-height:1.25} .hcard.big .addr{font-size:20px} .hcard .sub{margin-top:3px; font-size:12.5px; color:var(--ink-45)} .hcard .hprice{margin-top:6px; font-size:13.5px; font-weight:600; color:var(--deep)} @media screen and (max-width:900px){ .hcard,.hcard.big{grid-column:span 3} } @media screen and (max-width:560px){ .hcard,.hcard.big{grid-column:span 6} } /* Results as photo cards, two across, the tommys.co.nz pattern (option A, 11 Sep 2026). */ /* The suburbs index as illustration cards, three across (13 Sept 2026). The card is the illustration, the name and a line of the lede; the forest tile with an initial is the no-illustration state. */ .ggrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px} .gcard{display:block; color:inherit; text-decoration:none} .gcard .art{aspect-ratio:16/9; border-radius:var(--r-img); overflow:hidden; background:var(--forest); margin-bottom:12px} .gcard .art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease)} .gcard:hover .art img{transform:scale(1.03)} .gcard .art.none{display:grid; place-items:center} .gcard .art.none span{color:var(--green); font-size:34px; font-weight:800} .gcard .nm{font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.25} .gcard .ld{margin-top:3px; font-size:13px; color:var(--ink-45); line-height:1.5} @media screen and (max-width:900px){ .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media screen and (max-width:520px){ .ggrid{grid-template-columns:1fr; gap:24px} } /* Results: four across since 13 Sept 2026 ("the results page is too big, especially on desktop"), two on a tablet, one on a phone. */ .sgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px} @media screen and (max-width:1000px){ .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } .scard{display:block} .scard[hidden]{display:none} .scard .sph{position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--r-img); background:var(--forest)} .scard .sph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease)} .scard:hover .sph img{transform:scale(1.03)} .scard .sph .chip{position:absolute; left:14px; top:14px} .scard .saddr{position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; color:var(--cream); font-size:16px; font-weight:800; letter-spacing:-.02em; line-height:1.15} .scard .sbody{padding:11px 2px 0} .scard .addr{font-size:15.5px; font-weight:700; letter-spacing:-.014em; line-height:1.25} .scard .sub{margin-top:4px; font-size:13px; color:var(--ink-45)} .scard .snote{margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--deep)} .smore{display:flex; gap:26px; align-items:center; margin-top:34px; flex-wrap:wrap} @media screen and (max-width:640px){ .sgrid{grid-template-columns:1fr; gap:26px} } .quote{position:relative; padding:34px 0 30px; border-top:1px solid var(--ink-16); border-bottom:1px solid var(--ink-16)} .quote .q{font-size:clamp(20px,2.6vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.38; max-width:34ch; min-height:3.9em; margin:0} .quote .who{margin-top:16px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45)} .quote .prog{position:absolute; left:0; bottom:-1px; height:2px; background:var(--deep); width:0} .quote.run .prog{animation:prog 8s linear infinite} @keyframes prog{from{width:0}to{width:100%}} .quote .qin{transition:opacity .5s var(--ease), transform .5s var(--ease)} .quote .qin.out{opacity:0; transform:translateY(8px)} .cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; margin-top:34px; border-top:1px solid var(--ink-16)} @media screen and (max-width:820px){ .cases{grid-template-columns:1fr} } .case{padding:26px 26px 26px 0; text-decoration:none; color:inherit; display:block} /* the hairline between cards came out 11 Sep 2026 */ .case:last-child{border-right:0} @media screen and (max-width:820px){ .case{border-right:0; border-bottom:1px solid var(--ink-08); padding-right:0} } .case .k{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--deep)} .case .t{margin-top:10px; font-size:20px; font-weight:700; letter-spacing:-.018em; line-height:1.28} .case .d{margin-top:10px; font-size:14px; color:var(--ink-70); line-height:1.55} .case .m{margin-top:14px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45)} .case .t{font-size:24px} .case .ph img{transition:transform 1.1s var(--ease)} .case:hover .ph img{transform:scale(1.05)} /* CTA */ .cta{background:var(--forest); color:var(--cream); padding:80px 0; position:relative; overflow:hidden} .cta .line{font-size:clamp(24px,3.9vw,38px); font-weight:700; letter-spacing:-.026em; line-height:1.32; max-width:22ch; margin:20px 0 0} .cta .line em{font-style:normal; color:var(--green)} .cta .row2{margin-top:34px; display:flex; gap:34px; align-items:center; flex-wrap:wrap} .cta .rl{color:var(--cream)} .cta .ph2{font-size:13px; color:var(--cream-72)} /* footer */ .foot2{background:var(--cream); padding:52px 0 44px} .foot2 .top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start} .foot2 .nm{font-size:15px; font-weight:800} .foot2 .br{margin-top:5px; font-size:13px; color:var(--ink-70)} .foot2 .lk{display:flex; gap:26px; flex-wrap:wrap} .foot2 .lk a{color:var(--ink-70); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase} .foot2 .legal{margin-top:34px; padding-top:20px; border-top:1px solid var(--ink-16); font-size:11.5px; color:var(--ink-45); max-width:78ch; line-height:1.65} .foot2 .legal b{color:var(--ink-70); font-weight:600} /* These were the one set of unstyled anchors on the site, so they rendered as default browser blue with a full underline in the middle of an eggshell footer. */ .foot2 .legal a{color:var(--deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(39,105,52,.35); transition:text-decoration-color .3s var(--ease)} .foot2 .legal a:hover{text-decoration-color:var(--deep)} .foot2 .lock{margin-top:26px} .foot2 .lock img{display:block; width:auto; height:30px} /* interior */ .ihead{background:var(--forest); color:var(--cream); padding-top:30px} .ihead .crumb{margin-top:52px; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-50)} .ihead h1{margin:16px 0 0; font-size:clamp(38px,7vw,72px); font-weight:800; letter-spacing:-.042em; line-height:.98} .ihead .stand{margin:20px 0 0; font-size:17px; color:var(--cream-72); max-width:52ch} .ihead .pad{padding-bottom:52px} /* the secondary area nav under an inner header: Wellington · Hutt Valley · Kāpiti Coast */ .areanav{position:sticky; top:46px; z-index:30; background:var(--cream); border-bottom:1px solid var(--ink-16)} /* below the sticky main nav, which is ~46px once shown */ @media screen and (max-width:820px){ .areanav{top:44px} } .areanav .pad{display:flex; gap:6px; padding-top:12px; padding-bottom:12px; overflow-x:auto; scrollbar-width:none} .areanav .pad::-webkit-scrollbar{display:none} .areanav a{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--ink-16); border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-decoration:none; color:var(--ink); white-space:nowrap; transition:background .25s var(--ease), border-color .25s var(--ease)} .areanav a span{font-size:10.5px; font-weight:800; color:var(--deep); font-variant-numeric:tabular-nums} .areanav a:hover{background:var(--forest); color:var(--cream); border-color:var(--forest)} .areanav a:hover span{color:var(--green)} [id^="area-"]{scroll-margin-top:112px} .ihead .ihgrid{display:flex; justify-content:space-between; align-items:flex-end; gap:24px} .ihead .ihmark img{display:block; width:auto; height:36px; flex:none} @media screen and (max-width:640px){ .ihead .ihgrid{flex-direction:column; align-items:flex-start} .ihead .ihmark img{height:28px} } .sticky .stright{display:flex; align-items:center; gap:22px} .sticky .stmark{display:block; width:auto; height:20px} .parallax{height:360px; overflow:hidden; position:relative; background:var(--forest)} /* forest behind the photo, so a sub-pixel gap can never read as a white line */ .parallax img{width:100%; height:130%; object-fit:cover; will-change:transform; transform:translateY(-15%)} /* the same centring for no-JS and reduced motion */ .parallax.fit{width:100%; height:auto; aspect-ratio:16/9; max-height:640px} /* width:100% is load bearing, same as .ghero .art: without it the cap shrinks the WIDTH and the band floats with eggshell either side */ /* a suburb hero: the photograph's own shape, no strip crop (13 Sept 2026) */ .parallax.fit img{height:100%; transform:none; will-change:auto; object-position:center} @media screen and (max-width:560px){ .parallax.fit{aspect-ratio:4/3} } /* Listing page: the secondary sticky bar (address, beds, baths, jump icons) under the main sticky nav */ .lbar{position:sticky; top:46px; z-index:30; background:var(--cream); border-bottom:1px solid var(--ink-16)} .lbar .pad{display:flex; align-items:center; gap:22px; padding-top:10px; padding-bottom:10px} .lbar .lba{font-size:14px; font-weight:700; letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lbar .lbs{display:flex; gap:14px; font-size:12.5px; color:var(--ink-45); white-space:nowrap} .lbar .lbs b{color:var(--ink); font-weight:700} .lbar .lbp{color:var(--deep); font-weight:600} .lbar .lbi{margin-left:auto; display:flex; gap:6px} .lbar .lbi a{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--ink-16); border-radius:999px; color:var(--ink); transition:background .25s var(--ease), color .25s var(--ease)} .lbar .lbi a:hover{background:var(--forest); color:var(--cream); border-color:var(--forest)} .lbar .lbi svg{width:18px; height:18px} @media screen and (max-width:820px){ .lbar{top:44px} .lbar .lbs{display:none} } .sec.noline{border-bottom:0} .blurb p{max-width:68ch} .mapwrap{border-radius:var(--r-img); overflow:hidden; background:var(--ink-08); aspect-ratio:21/9; min-height:320px} .mapwrap iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.85)} @media screen and (max-width:640px){ .mapwrap{aspect-ratio:4/3} } #map,#photos{scroll-margin-top:110px} /* the proof block in the CTA: rating, count, one review */ .cta .ctagrid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center} .proof{display:block; text-decoration:none; color:var(--cream); padding:26px 28px; border:1px solid var(--cream-18); border-radius:14px; transition:border-color .3s var(--ease), background .3s var(--ease)} .proof:hover{border-color:var(--green); background:rgba(255,254,242,.04)} .proof .prtop{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .proof .prn{font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1} .proof .prs{color:var(--green); font-size:14px; letter-spacing:.12em} .proof .prc{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-72)} .proof .prh{margin-top:16px; font-size:17px; font-weight:700; letter-spacing:-.014em} .proof .prq{margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--cream-72); max-width:46ch} .proof .prw{margin-top:14px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--green)} .proof .prw .arr{margin-left:6px; display:inline-block; transition:transform .3s var(--ease)} .proof:hover .prw .arr{transform:translateX(4px)} @media screen and (max-width:900px){ .cta .ctagrid{grid-template-columns:1fr; gap:28px} } .photojump{position:absolute; right:26px; bottom:22px; z-index:2; display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; background:rgba(14,33,22,.72); color:var(--cream); text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s var(--ease)} .photojump:hover{background:var(--forest)} .photojump svg{width:18px; height:18px; flex:none} #photos{scroll-margin-top:60px} @media screen and (max-width:640px){ .photojump{right:16px; bottom:14px; padding:9px 12px} } .prose p{font-size:16.5px; line-height:1.68; max-width:64ch; margin:0 0 20px} .prose p:last-child{margin-bottom:0} .pull{margin:40px 0; padding-left:24px; border-left:2px solid var(--green); font-size:24px; font-weight:700; letter-spacing:-.022em; line-height:1.34; max-width:22ch} .faq .q{padding:20px 0; border-bottom:1px solid var(--ink-08)} .faq .q .qq{font-size:17px; font-weight:600; letter-spacing:-.012em} .faq .q .aa{margin-top:8px; font-size:15px; color:var(--ink-70); max-width:62ch} .steps{border-top:1px solid var(--ink-16)} .step{display:grid; grid-template-columns:56px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--ink-08)} .step .i{font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--ink-45); font-variant-numeric:tabular-nums; padding-top:5px} .step .t{font-size:19px; font-weight:600; letter-spacing:-.014em} .step .d{margin-top:7px; font-size:15px; color:var(--ink-70); max-width:60ch} @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .sitehead .wordmark,.sitehead .wordsub,.sitehead .nav,.hfoot{opacity:1; transform:none} .js .reveal{opacity:1; transform:none} } /* ---- added on the interior-page port, 9 September 2026 ---- */ /* The carried-over guide copy keeps its four subheadings; the mockup's prose block had none, so they need a size of their own. Sub head role from the type table: 19px, 600. */ .prose h3{margin:34px 0 12px; font-size:19px; font-weight:600; letter-spacing:-.014em} .prose h3:first-child{margin-top:0} .prose a{color:var(--deep); text-decoration:none; border-bottom:1px solid var(--ink-16)} .prose a:hover{border-bottom-color:var(--deep)} /* the footer nav is a plain row of ruled links, not the hero's centred nav */ .foot2 .lk-nav{display:flex; gap:26px; flex-wrap:wrap} .foot2 .lk-nav a{color:var(--ink-70); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase} .foot2 .lk-nav a:hover{color:var(--ink)} /* real inputs, styled to match the mockup's fake ones */ .field input,.field select,.field textarea{flex:1; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:transparent; border:0; padding:0} .field input::placeholder,.field textarea::placeholder{color:var(--ink-45)} .field input:focus,.field select:focus,.field textarea:focus{outline:none} .field:focus-within::after{transform:scaleX(1)} .field button.go{background:none; border:0; cursor:pointer; padding:0} .screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap} /* the forest header on an interior page carries the nav's current item */ .ihead .nav a.here{color:var(--green)} /* ---- forms, wired 9 September 2026 ---- */ /* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields. */ .hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden} .jform .field + .field{margin-top:20px} .jform .step2{margin-top:20px} .jform .step2[hidden]{display:none} .jform .field select{appearance:none; -webkit-appearance:none} .jform .field textarea{min-height:96px} .jform-msg{margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-70)} /* Core blue is the one colour that interrupts: it means this needs a human. An error does. */ .jform-msg.bad{color:var(--blue)} .jform.on-dark .jform-msg{color:var(--cream-72)} .jform.on-dark .jform-msg.bad{color:var(--green)} .jform.on-dark .field{border-bottom-color:var(--cream-18)} .jform.on-dark .field input,.jform.on-dark .field textarea{color:var(--cream)} .jform.on-dark .field input::placeholder{color:var(--cream-50)} .jform.on-dark .field .go{color:var(--green); border-bottom-color:var(--green)} .jform.step2-open > .field > .go{display:none} /* ---- the property gallery, 9 September 2026 ---- */ /* The gallery is a run, not a contact sheet. Twenty-two photographs at one size, two pixels apart, gave a harbour view the same 371px box as a bathroom cabinet. The cover leads full width, the rest fall into a two-up rhythm, and every fifth photograph takes the full width as a band, so the eye has somewhere to rest. Jason's call, 10 September 2026. */ .gal{display:grid; grid-template-columns:1fr 1fr; gap:12px} .gal .ph{margin:0; aspect-ratio:3/2; cursor:zoom-in} .gal .ph img{width:100%; height:100%; object-fit:cover} .gal .ph.full{grid-column:1/-1; aspect-ratio:16/9} .gal .ph.band{grid-column:1/-1; aspect-ratio:21/9} .gal .ph .num{position:absolute; right:10px; bottom:8px; font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--cream-72); background:rgba(14,33,22,.6); padding:3px 7px; border-radius:2px; opacity:0; transition:opacity .3s var(--ease)} .gal .ph:hover .num, .gal .ph:focus-visible .num{opacity:1} @media screen and (max-width:640px){ .gal{grid-template-columns:1fr; gap:8px} .gal .ph, .gal .ph.full, .gal .ph.band{aspect-ratio:3/2} } /* The lightbox. A photograph on a property page has to be able to get big; the grid was not clickable at all. Native , so Escape and the backdrop come for free. */ /* Solid, not 95%: five per cent of an eggshell page with near-black type reads as ghost text across the photograph. A lightbox should be a room with the lights off. */ .lb{border:0; padding:0; max-width:100vw; max-height:100vh; width:100vw; height:100vh; background:#0b1a11} .lb::backdrop{background:#0b1a11} .lb figure{margin:0; height:100%; display:grid; place-items:center; padding:52px 16px} .lb img{max-width:100%; max-height:100%; object-fit:contain} .lb .lbbar{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; color:var(--cream-72); font-size:11px; letter-spacing:.14em; text-transform:uppercase} .lb button{background:none; border:1px solid rgba(255,254,242,.28); color:var(--cream); border-radius:2px; width:44px; height:44px; font-size:18px; line-height:1; cursor:pointer} .lb button:hover{border-color:var(--green)} .lb .lbnav{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 14px; pointer-events:none} .lb .lbnav button{pointer-events:auto} /* the home page's wordmark doubles as its h1, so it must not inherit h1 margins */ h1.wordmark{margin:0; font-size:24px; font-weight:700} @media screen and (max-width:820px){ h1.wordmark{font-size:17px} } /* ============================================================ touch and small screens Audited 10 September 2026 at 375 / 768 / 1024 / 1440, every page, by loading each into a sized iframe and measuring the real boxes. Desktop and tablet came back clean; nothing scrolls sideways at any width. The phone did not: nav link 22px the seven items, wrapped to two rows arrow link .rl 27px every "Send me my report", every section link form input 22px and at 14px type, which makes iOS ZOOM the page submit .go 18px the smallest thing on the site you have to hit footer nav link 18px suburb index link 24px thirty-one of them, two columns, on /suburbs/ wordmark link 30px the home link on every interior page 44px is the Apple and Android floor and WCAG 2.5.8's is 24px; several of these were under both. The rule applies from 820px down, not 480px: a tablet is a touch device too, and a bigger target is never worse with a mouse. Three things the audit flagged that are CORRECT and deliberately unchanged: the hero's .bg overflows because scale(1.06) is the Ken Burns effect and its parent clips it; the 21px input in .hp is the spam honeypot; and the lightbox figure's image reserves no space because the dialog is not in the initial layout, so it cannot shift anything. */ @media screen and (max-width:820px) { /* Grow the box, not the text: the type stays exactly as designed. */ .nav a{min-height:44px; display:inline-flex; align-items:center} .foot2 .lk-nav a{min-height:44px; display:inline-flex; align-items:center} .sitehead .wordmark a{min-height:44px; display:inline-flex; align-items:center} /* .rl grows UPWARD. Its underline is an ::after pinned to bottom:0, so padding the bottom would drag the rule away from the words; flex-end keeps the text and its underline together and puts the extra hit area above them. */ .rl{min-height:44px; display:inline-flex; align-items:flex-end} /* 16px is not a style choice. Safari zooms the whole page when a focused field is under 16px, and the visitor is then stranded at 1.3x with no way back. */ .field input,.field select,.field textarea,.field .fake{font-size:16px} .field input,.field select,.field textarea{padding:11px 0} .field textarea{padding:11px 0} .field button.go{min-height:44px; padding:11px 0} .subs a{padding:12px 0} /* The suburb INDEX is not .subs — it is a .steps list with the link inline inside .t, which measured 24px across all thirty-one guides. .subs covers the home page, the 404 and the suburb guides, and needed the padding above; this is the other one. */ .step .t a{display:inline-flex; align-items:center; min-height:44px} /* 8.5px is not a size anyone reads on a phone. The 10px labels stay: letterspaced uppercase at 10px is legible and it is the register the brand is built on. */ .wordsub{font-size:10.5px} .chip{font-size:10.5px} } /* ==== Suburb guides. SUBURB-GUIDES.md sections 3 and 5. ==================== */ /* The hero. Site header on forest, then the illustration UNOBSTRUCTED, then the title block beneath it. !! NO SCRIM OVER .ghero .art, EVER. Section 3 is explicit: a dark wash over flat vector art destroys the only reason it is there. This is a poster, not a photo hero, so nothing overlays it and the type sits below it instead. */ .ghero{background:var(--forest); overflow:hidden} /* Two things here are load bearing and both were got wrong first. width:100%, because with width left to auto, aspect-ratio plus max-height resolves the WIDTH down to match the capped height and the illustration stops being full bleed: at 1521px it rendered 723px wide with eggshell either side of it. !! And the cap is a PIXEL value, not a vh one. Capped at 58vh the box became roughly 4:1 on a laptop and object-position:bottom kept only the village: the bay, the island and the fishing boats were all cropped away, on an illustration whose whole job is to say "this is Island Bay", and whose alt text describes those things. The artwork is drawn 900x600 and section 5 wants it shown as 900x460 from the bottom, so the box has to stay near that ratio. 560px keeps the whole scene readable at every width checked, and the H1 sitting just below the fold on a short laptop window is what a poster hero does. */ .ghero .art{position:relative; width:100%; aspect-ratio:16/9; max-height:min(720px,78vh); overflow:hidden} /* 13 Sept 2026: the landmark illustrations (turbine, Cable Car, wharf) are 16:9 and composed to the centre with the sky at the top, so the box is 16:9, capped, and the crop favours the top (the turbine's blades) over the foreground. The .svg box keeps the poster rule below. */ .ghero .art.svg{aspect-ratio:900/460; max-height:560px} /* object-position bottom IS the brief's preserveAspectRatio="xMidYMax slice": the artwork is cropped from the sides and the top, never from the bottom, so the shoreline and the shopfronts survive every breakpoint. */ .ghero .art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block} .ghero .art.svg img{object-position:center bottom} /* A photograph in the hero (the page's featured image, 13 Sept 2026) is centred, not bottom-anchored: the house is mid-frame and bottom-anchoring keeps driveway and cuts sky. */ .ghero .art.photo img{object-position:center} @media screen and (max-width:820px){ .ghero .art{aspect-ratio:3/2} } @media screen and (max-width:560px){ .ghero .art{aspect-ratio:4/3} } .gfoot{padding-top:36px; padding-bottom:44px; color:var(--cream)} .gfoot .eyebrow{color:var(--cream)} .gfoot h1{font-size:clamp(38px,7vw,74px); font-weight:800; letter-spacing:-.042em; line-height:.96; margin:16px 0 0; color:var(--cream)} .gfoot .lede{margin:18px 0 0; font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:var(--cream-72); max-width:46ch} .sec.dark{background:var(--forest); color:var(--cream); border-bottom:0} .sec.dark .h2{color:var(--cream)} .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px} .split h4{margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--deep)} .split.dark h4{color:var(--green)} .split p{margin:0 0 16px; font-size:15.5px; line-height:1.62; color:var(--ink-70)} .split p:last-child{margin-bottom:0} .split.dark p{color:var(--cream-72)} @media screen and (max-width:820px){ .split{grid-template-columns:minmax(0,1fr); gap:30px} } /* The picks. Section 3 calls this the heart of the page and section 9 makes it the highest-value content on it for search, so it is real text in a two-column flow. */ .picks{columns:2; column-gap:44px} .pick{break-inside:avoid; display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--ink-08)} .pick .n{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--deep); padding-top:3px} .pick b{display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; overflow-wrap:break-word} .pick span{font-size:13px; color:var(--ink-45); line-height:1.5} @media screen and (max-width:820px){ .picks{columns:1} } /* The suburb in numbers (Stats NZ) and the questions, 13 Sept 2026: the answer-engine surface. Four figures in the About-page voice, then plain question headings with a one-paragraph answer each, real text so it can be lifted verbatim. */ .gstats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px} .gstat .v{font-size:clamp(40px,5.6vw,64px); font-weight:800; letter-spacing:-.045em; line-height:.9; color:var(--deep); font-variant-numeric:tabular-nums} .gstat .l{margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-70)} .gstat .b{margin-top:6px; font-size:11px; color:var(--ink-45)} .sec .src{margin-top:26px; font-size:12.5px; color:var(--ink-45); line-height:1.55; max-width:70ch} .sec .src a{color:inherit; text-decoration:underline; text-underline-offset:2px} @media screen and (max-width:820px){ .gstats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px} } .qa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 44px} .qa .q{border-top:1px solid var(--ink-16); padding-top:16px} .qa .q h3{font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin:0 0 8px} .qa .q p{font-size:15px; line-height:1.6; color:var(--ink-70); margin:0} .qa .q p a{color:var(--deep); font-weight:600; text-decoration:none; white-space:nowrap} @media screen and (max-width:820px){ .qa{grid-template-columns:minmax(0,1fr)} } .hphoto{width:100%; margin:0 0 34px; border-radius:var(--r-img); overflow:hidden; aspect-ratio:2/1; max-height:520px} /* width:100% is load bearing with aspect-ratio + max-height, third time this trap has bitten */ /* a home he sold here, over the housing section (13 Sept 2026) */ .hphoto img{width:100%; height:100%; object-fit:cover; display:block} @media screen and (max-width:560px){ .hphoto{aspect-ratio:3/2} } .stock{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px} .stock .ph{aspect-ratio:3/2} .stock .ph img{width:100%; height:100%; object-fit:cover} .stock .nophoto{border-top:1px solid var(--ink-16); padding-top:14px} .stock .nophoto h4{margin-top:0} .stock h4{margin:16px 0 6px; font-size:17px; font-weight:700; letter-spacing:-.014em; overflow-wrap:break-word} .stock p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-70)} @media screen and (max-width:820px){ .stock{grid-template-columns:minmax(0,1fr); gap:22px} } /* Getting around. Every row measured, so there is no "pending" style here: an unmeasured row is dropped by tools/build_guides.py and never reaches the page. */ .mins{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 44px} .mins div{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--ink-08); font-size:14.5px; color:var(--ink-70)} .mins b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap} @media screen and (max-width:820px){ .mins{grid-template-columns:minmax(0,1fr)} } .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px} .card{text-decoration:none; color:inherit; display:block} .card .art{overflow:hidden; border:1px solid var(--ink-16); aspect-ratio:3/2} .card .art img{width:100%; height:100%; object-fit:cover; object-position:center bottom; transition:transform 1s var(--ease); display:block} .card:hover .art img{transform:scale(1.04)} .card .nm{margin-top:13px; font-size:19px; font-weight:700; letter-spacing:-.02em; overflow-wrap:break-word} .card .mt{font-size:12.5px; color:var(--ink-45); margin-top:2px} @media screen and (max-width:820px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px} } @media screen and (max-width:560px){ .cards{grid-template-columns:minmax(0,1fr); gap:18px} } /* The logo has always linked home. Nothing signalled that it was a link, so a visitor on any inner page had no visible way back except the browser's own back button. Jason, 10 September 2026: "need a way to get back to home page, may miss clicking back on my name." Same underline-sweep the primary nav already uses on hover. */ .wordmark a.home-link{position:relative; padding-bottom:3px} /* Jason, 11 Sept 2026: no hover line under the wordmark. It is still the link home. */ /* "Everything on the market" and "What I have sold", the pair under the home page's own listings row, made bigger on Jason's ask. Scoped to .big rather than raised on .rl generally: every other .rl.deep on the site (the suburb guide's "Everything I have sold", the reviews link, "All 31 suburbs") stays the small caps link it is everywhere else, so this is the one place that changed rather than a site-wide type-scale shift nobody asked for. */ .rl.big{font-size:15px; letter-spacing:.05em; padding-bottom:11px} .rl.big .arr{margin-left:10px} @media screen and (max-width:560px){ .rl.big{font-size:14px} } /* The Contact page's own Send button is a real