/* Invest Realty - the suburb report, shared by the standalone page * (/suburb-report.html) and the Suburb Profiles page, which renders the * same report inline under its search box. One file so the two cannot * drift apart. */ /* ── The printed suburb report, stacked ──────────────────────────────────── The three A4 landscape pages keep their layouts. What goes is the page furniture: the fixed 297x210mm boxes, the "Page 1 of 3" markers, and the credit line that was repeated in every page footer. Those collect once at the bottom. A visitor should recognise the PDF Brian sends them. */ .rp-page, .rp-stock, .rp-foot { width: min(1180px, calc(100% - 72px)); margin: 0 auto; } .rp-page { padding: 62px 0; border-bottom: 1px solid #e8e8e8; } .rp-page:first-child { padding-top: 44px; } .rp-eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: #955323; margin: 0 0 16px; } .rp-lab { font-size: .625rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; color: #9a9a9a; margin: 0 0 14px; } .rp-h1 { font-family: Manrope, Arial, sans-serif; font-size: clamp(2.9rem, 5.6vw, 4.2rem); letter-spacing: -.05em; line-height: .98; font-weight: 300; margin: 0; color: #1c1c1c; } .rp-dot { color: #955323; } .rp-loc { font-family: Manrope, Arial, sans-serif; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.012em; color: #6a6a6a; margin: 10px 0 0; } .rp-tag { font-family: Manrope, Arial, sans-serif; font-size: .9375rem; font-weight: 600; color: #955323; margin: 6px 0 0; } .rp-rule { width: 96px; height: 2px; background: #955323; margin: 18px 0 0; } .rp-h2 { font-family: Manrope, Arial, sans-serif; font-size: clamp(1.7rem, 3vw, 2.1rem); letter-spacing: -.04em; font-weight: 500; margin: 0 0 34px; color: #1c1c1c; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; } .rp-sub { font-family: 'DM Sans', Arial, sans-serif; font-size: .875rem; font-weight: 400; letter-spacing: 0; color: #9a9a9a; } .rp-h2b, .rp-h2c { font-family: Manrope, Arial, sans-serif; font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.04em; font-weight: 400; margin: 0 0 26px; } .rp-accent { color: #955323 !important; } .rp-note { font-size: .75rem; line-height: 1.6; color: #a0a0a0; margin: 16px 0 0; max-width: 62ch; } /* ---- page 1: copy left, map right ---- */ .rp-p1grid { display: flex; flex-wrap: wrap; gap: 54px; align-items: flex-start; } .rp-p1copy { flex: 999 1 460px; min-width: 0; } .rp-p1side { flex: 1 1 360px; min-width: 0; } .rp-story { margin-top: 22px; font-size: .9375rem; line-height: 1.72; color: #5a5a5a; } .rp-story p { margin: 0 0 11px; } .rp-short { margin-top: 26px; } .rp-shortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 9px 30px; } .rp-shortgrid > div { display: flex; gap: 10px; font-size: .875rem; line-height: 1.5; color: #4a4a4a; } .rp-shortgrid i { width: 5px; height: 5px; background: #955323; flex-shrink: 0; margin-top: 8px; display: block; } .rp-p1prices { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #1c1c1c; } .rp-flab { font-size: .625rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: #9a9a9a; margin: 0 0 5px; } .rp-fval { font-family: Manrope, Arial, sans-serif; font-size: 2.1rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; margin: 0; color: #1c1c1c; } .rp-fval2 { font-family: Manrope, Arial, sans-serif; font-size: 1.3rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; margin: 0; color: #1c1c1c; } .rp-fgrow { font-size: .8125rem; font-weight: 700; color: #955323; margin: 7px 0 0; } .rp-fnote { font-size: .75rem; color: #8a8a8a; margin: 7px 0 0; } .rp-mapbox { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #eff3f7; border: 1px solid #e4eaf0; } .rp-mapbox img, .rp-mapbox svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .rp-mapbox img { object-fit: cover; } .rp-bound { fill: #955323; fill-opacity: .15; stroke: #955323; stroke-width: 3.4; stroke-linejoin: round; } .rp-mapcred { position: absolute; left: 9px; bottom: 7px; margin: 0; font-size: .5625rem; color: #4d5a67; background: rgba(255,255,255,.82); padding: 2px 6px; } .rp-services { margin-top: 20px; } .rp-slist > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: .8125rem; color: #4a5664; } .rp-slist b { font-weight: 700; white-space: nowrap; } /* ---- shared panels ---- */ .rp-rows { margin: 0; } .rp-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .rp-rows dt { color: #5e5e5e; font-size: .875rem; } .rp-rows dd { margin: 0; font-weight: 700; font-size: .875rem; color: #1c1c1c; white-space: nowrap; } /* ---- page 2 ---- */ .rp-p2top { display: grid; grid-template-columns: 270px 1fr; gap: 44px; margin-bottom: 40px; padding-bottom: 34px; border-bottom: 1px solid #e8e8e8; } .rp-spinebody { display: flex; gap: 18px; position: relative; } .rp-spineline { width: 2px; background: #955323; flex-shrink: 0; margin: 8px 0; } .rp-spinesteps { flex-grow: 1; display: flex; flex-direction: column; gap: 26px; } .rp-syear { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #955323; margin: 0 0 2px; } .rp-sval { font-family: Manrope, Arial, sans-serif; font-size: 1.35rem; font-weight: 300; letter-spacing: -.035em; line-height: 1.1; margin: 0; color: #1c1c1c; } .rp-slast { font-size: 1.75rem; font-weight: 400; } .rp-snote { font-size: .75rem; color: #8a8a8a; margin: 3px 0 0; } .rp-chart svg, .rp-grow { width: 100%; height: auto; display: block; } .rp-grid { stroke: #f1f1f1; stroke-width: 1; } .rp-axis { stroke: #d8d8d8; stroke-width: 1; } .rp-bar { fill: #e8ddd2; } .rp-bar.on { fill: #955323; } .rp-blab { font-family: 'DM Sans', Arial, sans-serif; font-size: 11px; fill: #9a9a9a; text-anchor: middle; } .rp-p2cols, .rp-p3cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 40px; } .rp-vshead { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; margin-bottom: 5px; } .rp-vshead span { color: #5e5e5e; } .rp-vshead b { font-weight: 700; } .rp-vs { margin-bottom: 14px; } .rp-track { position: relative; height: 14px; background: #f1ede7; } .rp-fill { position: absolute; left: 0; top: 0; height: 14px; background: #955323; display: block; } .rp-mark { position: absolute; top: -3px; width: 2px; height: 20px; background: #1c1c1c; display: block; } /* ---- page 3 ---- */ .rp-ringwrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .rp-ring { width: 128px; height: 128px; flex-shrink: 0; } .rp-segbg { fill: none; stroke: #efe9e2; stroke-width: 22; } .rp-seg { fill: none; stroke-width: 22; } .rp-seg0 { stroke: #955323; } .rp-seg1 { stroke: #b4762f; } .rp-seg2 { stroke: #c89a63; } .rp-seg3 { stroke: #ddbf9a; } .rp-seg4 { stroke: #ece0d2; } .rp-seg5 { stroke: #f2ece4; } i.rp-seg0 { background: #955323; } i.rp-seg1 { background: #b4762f; } i.rp-seg2 { background: #c89a63; } i.rp-seg3 { background: #ddbf9a; } i.rp-seg4 { background: #ece0d2; } i.rp-seg5 { background: #f2ece4; } .rp-rnum { font-family: Manrope, Arial, sans-serif; font-size: 21px; font-weight: 400; fill: #1c1c1c; text-anchor: middle; } .rp-rlab { font-family: 'DM Sans', Arial, sans-serif; font-size: 6.5px; fill: #8a8a8a; text-anchor: middle; letter-spacing: .1em; } .rp-legend { list-style: none; padding: 0; margin: 0; flex: 1 1 180px; min-width: 0; } .rp-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f3f3; font-size: .8125rem; } .rp-legend li span { flex-grow: 1; color: #5e5e5e; } .rp-key { width: 8px; height: 8px; flex-shrink: 0; display: block; border-radius: 2px; } .rp-twofig { display: flex; gap: 26px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #ededed; } .rp-gbar { fill: #955323; } .rp-gbar.soft { fill: #ddbf9a; } .rp-gnum { font-family: Manrope, Arial, sans-serif; font-size: 14px; fill: #1c1c1c; text-anchor: middle; } .rp-glab { font-family: 'DM Sans', Arial, sans-serif; font-size: 10px; fill: #8a8a8a; text-anchor: middle; } .rp-gdash { fill: none; stroke: #955323; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .55; } .rp-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 40px; } .rp-box { background: #fff8f2; border: 1px solid #f0e3d6; padding: 18px 20px; } .rp-boxlab { font-size: .625rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: #955323; margin: 0 0 13px; } .rp-tick { display: flex; gap: 9px; font-size: .8125rem; line-height: 1.5; color: #4a4a4a; margin-bottom: 8px; } .rp-tick i { color: #955323; font-style: normal; font-weight: 700; flex-shrink: 0; } .rp-devs { margin-top: 40px; } .rp-devgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .rp-dev { border-top: 2px solid #d7c7b6; padding-top: 11px; } .rp-dev.on { border-top-color: #955323; } .rp-devname { font-size: .875rem; font-weight: 700; color: #1c1c1c; margin: 0 0 4px; } .rp-devdetail { font-size: .75rem; line-height: 1.45; color: #5a5a5a; margin: 0 0 6px; } .rp-devstatus { font-size: .6875rem; font-weight: 700; color: #955323; margin: 0; } .rp-dev:not(.on) .rp-devstatus { color: #8a7f74; } /* ---- our stock and the ask, side by side ---- */ .rp-close { width: min(1180px, calc(100% - 72px)); margin: 0 auto; padding: 54px 0 58px; } .rp-closegrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: stretch; } .rp-stockcol { background: #fff6ef; border: 1px solid #f0e3d6; padding: 28px 30px; } .rp-stockgrid { display: flex; flex-wrap: wrap; gap: 20px 44px; } .rp-stockgrid .rp-fval { font-size: 1.85rem; } .rp-askcol { background: #252525; color: #fff; padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; } .rp-askcol p { color: #cfcfcf; margin: 0 0 22px; font-size: .9375rem; } .rp-h2c { color: #fff; margin-bottom: 10px; } .rp-stockcol .rp-h2b { margin-bottom: 20px; } /* no stock here: one plain band, not a half-empty row */ .rp-cta { background: #252525; color: #fff; padding: 52px 0; } .rp-ctainner { width: min(1180px, calc(100% - 72px)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; } .rp-ctainner p { color: #cfcfcf; margin: 0; max-width: 52ch; } .rp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; background: #fdb785; color: #252525; border: 0; padding: 16px 26px; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; min-height: 48px; align-self: flex-start; } .rp-btn:hover { background: #ffc79e; } .rp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .rp-btn span { font-size: 1.2rem; } /* ---- every credit and disclaimer, once ---- The site stylesheet paints any bare