/* Nexus overrides, loaded after styles.css. Warm-neutral strips become Ray White dark grey with white copy and yellow CTAs (Jason, 30 Aug 2026). */ :root { --bg-2: #2d2d2d; } .section.home-c-about-section, .section.home-about-section, .section.home-c-property-slider, .included-card, .sales-card, .section-sales-mockups, .image-wrap-member { color: #fff; } .section.home-c-about-section h1, .section.home-c-about-section h2, .section.home-c-about-section h3, .section.home-c-about-section p, .section.home-c-about-section .text-small, .section.home-c-about-section .heading-large, .included-card *, .sales-card * { color: #fff; } .section.home-c-about-section .eyebrow, .section.home-c-about-section .text-eyebrow, .section.home-c-about-section [class*="eyebrow"], .section.home-c-about-section [class*="label"] { color: var(--accent); } .section.home-c-about-section .button-wrap { background-color: var(--accent); } .section.home-c-about-section .button-wrap * { color: var(--black); } /* Testimonial cards and any other warm-neutral card surfaces */ /* Stat labels: the template dims .label with opacity-50, which turns the brand yellow olive on dark grey */ .section.home-c-about-section .label.opacity-50 { opacity: 1; } /* Testimonials: yellow cards, dark grey text (Jason, 30 Aug) */ .testimonial-small-card { background-color: var(--accent); color: var(--dark); } .testimonial-small-card * { color: var(--dark); } .testimonial-small-card .opacity-50, .testimonial-small-card .opacity-70 { opacity: 0.8; } /* Three stats instead of four */ /* ---- Town, team and interior pages (Jason, 30 Aug 2026) ---- */ /* Suburb / area chips */ .nexus-chip-list { display: flex; flex-wrap: wrap; gap: 12px; } .nexus-chip { border: 1px solid var(--border-dark, #02012026); border-radius: var(--radius--big, 100px); padding: 8px 18px; } a.nexus-chip-link { color: inherit; text-decoration: none; transition: background-color .2s, color .2s; } a.nexus-chip-link:hover { background-color: var(--accent); } .nexus-chip-note { margin-top: 32px; max-width: 755px; opacity: .7; } .nexus-measure { max-width: 755px; } /* Numbered / Q and A rows. Modelled on the template .fact-item, but with our own class: main.js sets opacity:0 on .fact-item and only reveals it via a data-w-id scroll trigger. */ .nexus-facts { border-top: 1px solid var(--light); } .nexus-fact { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 24px; border-bottom: 1px solid var(--light); padding-top: 48px; padding-bottom: 48px; align-items: start; } .nexus-fact .text-h5 { margin-bottom: 0; } .nexus-step-number { margin-bottom: 12px; opacity: .5; } /* Team grid: three across, portrait placeholder tiles */ .team-grid.nexus-team-grid { grid-template-columns: 1fr 1fr 1fr; } .nexus-member { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 16px; } .nexus-member-photo { display: flex; align-items: center; justify-content: center; height: 420px; background-color: var(--bg-2); } .nexus-member-photo .nexus-avatar { width: 96px; height: 96px; } .nexus-member:hover .nexus-member-photo { outline: 2px solid var(--accent); outline-offset: -2px; } .nexus-profile-photo { height: 480px; } .nexus-profile-halves .story-right { gap: 24px; } /* Town cards on the property management hub reuse .member-card */ a.member-card.nexus-town-card { color: inherit; text-decoration: none; display: block; } @media screen and (max-width: 991px) { .team-grid.nexus-team-grid { grid-template-columns: 1fr 1fr; } .nexus-member-photo { height: 340px; } } @media screen and (max-width: 767px) { .team-grid.nexus-team-grid { grid-template-columns: 1fr; } .nexus-fact { grid-template-columns: 1fr; } } /* .headline-story is a stretch flex column, so a button placed directly in it spans the container */ .headline-story > .cta-main { align-self: flex-start; } /* Town cards: wrapper loses the .member-card flex row, so pin the image to the card box */ a.member-card.nexus-town-card { height: 500px; align-self: start; } a.member-card.nexus-town-card > .image-cover { width: 100%; height: 100%; object-fit: cover; } a.member-card.nexus-town-card .member-info-tile { z-index: 2; } /* Hero pill: yellow, no icon (Jason, 30 Aug) */ .rating.light { background-color: var(--accent); color: var(--dark); padding-left: 16px; } .rating.light * { color: var(--dark); } .nexus-member-photo img.nexus-avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .nexus-hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ---- Forms, fee table and hub cards (30 Aug 2026) ---- */ .nexus-form { max-width: 755px; display: grid; grid-row-gap: 24px; } .nexus-form-grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 24px; } .nexus-field { display: flex; flex-direction: column; gap: 8px; } .nexus-field label { font-family: Lato, Arial, sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .nexus-input, .nexus-select, .nexus-textarea { font-family: Lato, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--black, #020120); background-color: #fff; border: 1px solid #e6e6e2; border-radius: 8px; padding: 14px 16px; width: 100%; } .nexus-textarea { min-height: 160px; resize: vertical; } .nexus-input:focus, .nexus-select:focus, .nexus-textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); } .nexus-radio-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } .nexus-radio { display: inline-flex; align-items: center; gap: 8px; font-family: Lato, Arial, sans-serif; font-size: 16px; text-transform: none; letter-spacing: 0; opacity: 1; } .nexus-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nexus-submit { font-family: Lato, Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--black, #020120); background-color: var(--accent); border: 0; border-radius: 8px; padding: 16px 32px; cursor: pointer; justify-self: start; } .nexus-submit:hover { opacity: .85; } .nexus-form-note { opacity: .7; margin: 0; } /* Fee table, built on the .nexus-fact row so it matches the FAQ and step rows */ .nexus-table { border-top: 1px solid var(--light); } .nexus-table-row { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 8px; border-bottom: 1px solid var(--light); padding-top: 28px; padding-bottom: 28px; align-items: baseline; } .nexus-table-row .nexus-table-value { opacity: .7; } .nexus-table-head .text-h5, .nexus-table-head .label { margin-bottom: 0; } /* Hub cards: plain bordered tiles for the landlord and tenant hubs */ .nexus-card-grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 24px; } a.nexus-card { display: block; color: inherit; text-decoration: none; border: 1px solid #e6e6e2; border-radius: 8px; padding: 32px; transition: background-color .2s, border-color .2s; } a.nexus-card:hover { border-color: var(--accent); background-color: #fbfbf9; } a.nexus-card .text-h5 { margin-bottom: 12px; } a.nexus-card p { margin: 0; opacity: .75; } @media screen and (max-width: 767px) { .nexus-form-grid, .nexus-card-grid, .nexus-table-row { grid-template-columns: 1fr; } } /* ========================================================================== Section colour rhythm on inner pages (Jason, 30 Aug 2026) The template paints every .section with --light (white). Inner pages were therefore a single flat white run. These two modifiers give them the homepage rhythm: white, stone, dark grey. Padding is untouched so the vertical rhythm still matches .section everywhere. ========================================================================== */ .section.nexus-stone { background-color: #f5f5f3; } .section.nexus-dark { background-color: #2d2d2d; color: #fff; } /* Everything inside a dark band reads white, apart from the yellow eyebrows and buttons below. */ .section.nexus-dark h1, .section.nexus-dark h2, .section.nexus-dark h3, .section.nexus-dark h4, .section.nexus-dark h5, .section.nexus-dark h6, .section.nexus-dark p, .section.nexus-dark li, .section.nexus-dark a, .section.nexus-dark .text-h1, .section.nexus-dark .text-h2, .section.nexus-dark .text-h3, .section.nexus-dark .text-h4, .section.nexus-dark .text-h5, .section.nexus-dark .text-big, .section.nexus-dark .text-body, .section.nexus-dark .text-small, .section.nexus-dark .heading-large { color: #fff; } /* Eyebrows and labels in Ray White yellow, at full opacity (opacity-50 turns the yellow olive) */ .section.nexus-dark .label, .section.nexus-dark .eyebrow, .section.nexus-dark [class*="eyebrow"] { color: var(--accent); } .section.nexus-dark .label.opacity-50, .section.nexus-dark .opacity-50 { opacity: 1; } .section.nexus-dark .nexus-chip-note, .section.nexus-dark .nexus-form-note, .section.nexus-dark .nexus-table-value, .section.nexus-dark a.nexus-card p { opacity: .8; } /* Rules and dividers */ .section.nexus-dark .section-divider { background-color: #ffffff40; } .section.nexus-dark .nexus-facts, .section.nexus-dark .nexus-fact, .section.nexus-dark .nexus-table, .section.nexus-dark .nexus-table-row { border-color: #ffffff2e; } /* Chips: white outline, yellow on hover with dark text */ .section.nexus-dark .nexus-chip { border-color: #ffffff59; } .section.nexus-dark a.nexus-chip-link:hover { background-color: var(--accent); } .section.nexus-dark a.nexus-chip-link:hover .text-body { color: var(--dark); } /* Hub / card tiles */ .section.nexus-dark a.nexus-card { border-color: #ffffff2e; } .section.nexus-dark a.nexus-card:hover { border-color: var(--accent); background-color: #ffffff0f; } /* Buttons stay yellow with dark text; the half-white variant would vanish on dark grey */ .section.nexus-dark .cta-main, .section.nexus-dark .cta-small { background-color: var(--accent); } .section.nexus-dark .cta-main .button-content-tile, .section.nexus-dark .cta-main .button-content-tile div, .section.nexus-dark .cta-small .button-content-tile, .section.nexus-dark .cta-small .button-content-tile div, .section.nexus-dark .nexus-submit { color: var(--dark); } /* Form fields keep a white surface so the input text stays legible */ .section.nexus-dark .nexus-field label { color: #fff; opacity: .75; } .section.nexus-dark .nexus-radio { color: #fff; } /* Stone bands: the bordered hub cards need a lift off the stone, not the same tone */ .section.nexus-stone a.nexus-card { background-color: #fff; border-color: #e2e1dc; } .section.nexus-stone a.nexus-card:hover { border-color: var(--accent); background-color: #fff; } .section.nexus-stone .nexus-chip { border-color: #2d2d2d33; } /* ========================================================================== Logo sizing (Jason, 30 Aug 2026): the template ships a 40px mark, too small for Ray White ========================================================================== */ .brand-link-navbar { height: 68px; } .footer-logo-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .nexus-footer-mark { height: 88px; width: auto; display: block; } /* ========================================================================== Imagery helpers for inner pages ========================================================================== */ .nexus-media { width: 100%; overflow: hidden; } .nexus-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .nexus-media-band { height: 420px; margin-top: 64px; } .nexus-halves { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 32px; grid-row-gap: 32px; align-items: center; } .nexus-halves .nexus-media { height: 460px; } .nexus-side-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .nexus-office-card-image { height: 260px; margin-bottom: 24px; overflow: hidden; } .nexus-office-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media screen and (max-width: 991px) { .brand-link-navbar { height: 52px; } .nexus-footer-mark { height: 64px; } .nexus-halves { grid-template-columns: 1fr; } .nexus-halves .nexus-media, .nexus-media-band { height: 320px; } } @media screen and (max-width: 767px) { .nexus-halves .nexus-media, .nexus-media-band { height: 240px; } .nexus-media-band { margin-top: 40px; } } /* ========================================================================== Nav dropdown vs the header CTA .dropdown-list.w--open is a transparent position:fixed box pinned to the top of the viewport with 50px of top padding, so while the mega menu is open that padding sits over the "Free rental appraisal" button and swallows the click. Lift the right-hand nav column above it (the open menu's content starts well below the header, so nothing is hidden by this). ========================================================================== */ .nav-right { position: relative; z-index: 10050; } /* Same problem, and the fix above only covered the CTA. `.dropdown-list.w--open` is a fixed, transparent, full width box running from just under the nav down past the columns, so with the mega menu open it also covers every top level nav link, including the toggle that opened it. The links then look hoverable but nothing responds. Lift them above their sibling panel too. (Jason, 31 Aug: "when the mega menu is open I can't click the other menu items".) */ .navbar-master .nav-menu a.nav-link, .navbar-master .nav-menu .dropdown-toggle { position: relative; z-index: 10050; } /* ========================================================================== Lenis smooth scroll (see src/scripts/runtime.ts) ========================================================================== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ========================================================================== Hero "Our team" avatar marquee: seamless infinite loop The Webflow interaction (a-241 "Marquee - Logos", loop:true) translates .marquee-text-wrap from 0% to -100% of ITS OWN WIDTH over 20s and then snaps back to 0. The wrap was stretching to the 600px .master-marquees box while one copy of the ten headshots is 720px (10 x 56px + 10 x 16px gap), so -100% was not a whole period and the snap-back jumped. Pinning the wrap to exactly one period makes -100% land copy 2 precisely where copy 1 started, so the reset is invisible. The second copy in 03-hero.html supplies the content that covers the box for the whole cycle. ========================================================================== */ .marquee-text-wrap:has(.agent-marquee-img) { --marquee-item: 56px; /* .agent-marquee-img width */ --marquee-gap: 16px; /* column-gap on the wrap and each copy */ --marquee-count: 10; /* headshots per copy, see src/monolith/03-hero.html */ width: calc(var(--marquee-count) * (var(--marquee-item) + var(--marquee-gap))); flex: none; will-change: transform; } /* ========================================================================== Top-of-page clearance for the fixed nav (Jason, 30 Aug 2026) .navbar-master is position:fixed and paints no background, so the first section on every page runs underneath it. Measured nav height is 108px from 992px up and 92px below that. One pair of tokens sets the clearance everywhere instead of a per-template padding, so the gap under the header is identical on the homepage, the template heroes and /blog/. ========================================================================== */ :root { --nav-h: 108px; /* .navbar-master height, desktop */ --sticky-nav-h: 100px; /* .navbar.navbar-sticky height once it slides in */ --page-top-gap: 56px; /* breathing room between the nav and the first content */ } @media (max-width: 991px) { :root { --nav-h: 92px; --page-top-gap: 48px; } } @media (max-width: 767px) { :root { --page-top-gap: 40px; } } .section.template-hero, .section.nexus-page-top, .section.hero-home-c { padding-top: calc(var(--nav-h) + var(--page-top-gap)); } /* The homepage hero image is a fixed-height grid cell, so it gives back a little of what the new top clearance takes, so the hero still sits inside a laptop viewport. */ .home-c-hero-video { height: 600px; } /* Sticky header: .navbar.navbar-sticky is opaque white with no edge, so on a white page it reads as part of the content once it slides in. A hairline plus a soft drop shadow separates it from whatever is scrolling underneath (Jason, 30 Aug). The top-of-page nav stays flat: it is transparent and sits on the hero, so there is nothing to separate it from. */ .navbar.navbar-sticky { box-shadow: 0 1px 0 rgba(45, 45, 45, 0.08), 0 6px 24px rgba(45, 45, 45, 0.07); } /* Homepage hero: primary + secondary CTA side by side. Two solid yellow buttons would read as equals, so the secondary is the inverse: no fill, a dark grey outline and black text, which keeps the yellow appraisal button as the only filled call to action (Jason, 30 Aug). It still uses .cta-main, so it keeps the template's two-tile hover animation. */ .nexus-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cta-main.nexus-cta-secondary { background-color: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--dark); } .cta-main.nexus-cta-secondary:hover { background-color: var(--dark); color: #fff; } /* "Our team" label and the avatar strip read as one group: the template's 40px marquee padding pushed the headshots away from their own label and pulled the label up to the CTA (Jason, 30 Aug). */ .home-c-partners .master-marquees { padding-top: 12px; padding-bottom: 0; } .home-c-partners { display: flex; flex-flow: column; align-items: flex-start; } /* The rentals headline column pins itself with top:100px, which is exactly the sticky header's height, so it parked flush against the header with no gap (Jason, 30 Aug). Below 992px the template drops it to position:static, so only the desktop offset needs the correction. */ .headline-rent-sticky { top: calc(var(--sticky-nav-h) + 40px); } /* Button weight: Ray White's own .btn (cdn5.ep.dynamics.net/__resources/assets/app-D7lkceUL.css, checked 30 Aug 2026) sets no font-weight at all, so their buttons render at regular. The Monolith template shipped 600, which reads heavier than anything Ray White puts out. 500 keeps the label legible at 16px sentence case without the bold. */ .cta-main, .cta-small, .nexus-submit { font-weight: 500; } /* ========================================================================== Section headings: one pattern everywhere (Jason, 30 Aug) The template shipped three different treatments on the homepage alone - h2 at 44px with an eyebrow, a bare h3 at 38px, and a plain
with no heading element at all - so "What landlords say" read smaller than "Find out what your property could rent for" and only some sections had a kicker. Every top-level section heading is now
Eyebrow
+

, wrapped in .nexus-section-heading. ========================================================================== */ .nexus-section-heading { display: flex; flex-flow: column; align-items: flex-start; gap: 16px; } .nexus-section-heading .label { color: var(--dark); opacity: 0.6; } .section.nexus-dark .nexus-section-heading .label, .section.home-c-about .nexus-section-heading .label { color: var(--accent); opacity: 1; } /* Closing CTA button: the template's .half-white is a white 16% wash over the video, which read as a disabled button. Solid Ray White yellow instead. A translucent yellow was tried (Jason, 30 Aug) and rejected: below about 0.6 alpha the mid grey video behind turns the yellow olive, the same failure as the opacity-50 stat labels, and above it the translucency is not worth having. Solid is the answer here. */ .section.cta-section .cta-main.half-white { background-color: var(--accent); color: var(--black); } /* ========================================================================== Paragraph rhythm (Jason, 30 Aug: "the font is all smushed together") .text-big and .text-body both set margin-top:0 and margin-bottom:0 in styles.css, and .story-text has no rule at all, so any two stacked paragraphs rendered with zero space between them and read as one wall of text. This affects every page that stacks copy, not just /tenants/maintenance-request/. ========================================================================== */ .story-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .nexus-fact > p + p, .nexus-measure:not(.story-text) > p + p { margin-top: 20px; } /* .story-text is already a flex column with a 20px gap, so the margin above was ADDING to it and every stacked paragraph sat 40px apart. 49 blocks across the site carry `class="story-text nexus-measure"`, so this was the sitewide paragraph rhythm, not a one-off. The margin is still needed on .nexus-fact and on the two non-flex .nexus-measure elements. */ /* Form pages: copy on the left, form on the right, instead of a second section below the fold. */ .nexus-form-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .nexus-form-halves .nexus-form { max-width: none; } .nexus-form-card { background-color: #fff; border: 1px solid #e6e6e2; border-radius: 16px; padding: 40px; } .section.nexus-stone .nexus-form-card, .section.nexus-dark .nexus-form-card { background-color: #fff; } .nexus-form-card .nexus-section-heading { margin-bottom: 32px; } @media screen and (max-width: 991px) { .nexus-form-halves { grid-template-columns: 1fr; gap: 48px; } .nexus-form-card { padding: 28px; } } /* Form-page copy column: .headline-story ships a 64px gap, which is right for a full-width section headline but leaves a hole between the h1 and the copy in a two-column layout. */ .nexus-form-halves .headline-story { gap: 32px; } /* The urgent-issues instruction is safety critical, so it gets a callout rather than bold body. */ .nexus-urgent-note { border-left: 4px solid var(--accent); background-color: #fffdf0; padding: 16px 20px; border-radius: 0 8px 8px 0; } /* ========================================================================== Footer (Jason, 30 Aug) The template's footer sub-lists were hover-revealed flyouts: styles.css positions .footer-link-selection absolutely and ix2 writes `display:none; opacity:0` inline, so with a full link set they read as a broken dropdown. Rather than force them open, which made the footer dense and messy, the footer is back to its original simple form: the template's single column of top level links, untouched. The deep pages are carried by the mega menu on every page and by the hub pages. Legal links sit in the bottom bar, which is where people look for them. ========================================================================== */ /* Footer right side is three columns: contact details, pages, legal (Jason, 30 Aug). The template grid was built for two .contact-block columns, so it needs a third track. Legal moved up here out of the bottom bar. */ .footer-grid { grid-template-columns: minmax(0, 1.4fr) 1px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 48px; } @media screen and (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 48px; } .footer-grid .footer-divider { display: none; } } @media screen and (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== Buttons must never stretch (Jason, 30 Aug: "the button is really big right now") .cta-main is display:flex with no width, so as a direct child of a block container it filled the whole content width as a giant yellow bar. Everywhere else on the site it happens to sit inside a flex column with align-items:flex-start, which is why this only showed up on the new pages. width:fit-content is enough on its own: it takes the cross size off auto, so a flex parent's align-items:stretch no longer applies. Do NOT add align-self here, it overrides the closing CTA band's align-items:center and shoves that button off to the left. ========================================================================== */ .cta-main { width: fit-content; max-width: 100%; } /* A heading block followed straight by prose, an accordion or a fact list had the full 80px section-headline gap under it. That is right before a card grid, but when the next block draws its own top rule the heading ends up stranded a long way above it. */ .headline-team:has(+ .story-text), .headline-team:has(+ .nexus-accordion), .headline-team:has(+ .nexus-facts) { margin-bottom: 40px; } /* The divider to heading gap inside the block is 64px, which reads as a hole above a short eyebrow. 32px keeps the rule attached to the heading it introduces. */ .headline-team:has(.nexus-section-heading) { row-gap: 32px; grid-row-gap: 32px; } .story-text + .cta-main { margin-top: 32px; } /* Inside a hero copy column the 24px flex gap is already there, so the 32px stacked on top of it and left the button floating 56px under the last line. 8px brings the total back to 32. */ .nexus-side-copy > .story-text + .cta-main { margin-top: 8px; } /* ========================================================================== Text-only sections read vertically (Jason, 31 Aug) These were briefly heading-left / prose-right. That splits the reading flow: the eye starts on a heading and then has to jump the full gutter to find the first word. Prose belongs under its own heading, on a measure short enough to read. The right hand space is not a problem to solve, and filling it by splitting the text was the wrong fix. ========================================================================== */ .main-container:has(> .headline-team + .story-text) > .story-text { max-width: 68ch; } /* Text section with an image alongside. The copy still stacks vertically, heading above prose, so the reading flow is never split. The image sits in the other column as company for the text, not as part of it. `.nexus-side-left` puts the image on the left, so consecutive sections can alternate and the page does not lean the same way twice. */ .main-container:has(> .nexus-side-media) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* The image spans every row, so content rows must be sized by their own content and the slack pushed into a trailing 1fr. With align-items:center the copy gets distributed down the full image height instead, which opens a hole between the heading and its first paragraph. */ grid-template-rows: auto auto auto auto 1fr; column-gap: 64px; align-items: start; } .main-container:has(> .nexus-side-media) > .headline-team { grid-column: 1; grid-row: 1; margin-bottom: 0; } .main-container:has(> .nexus-side-media) > .story-text { grid-column: 1; grid-row: 2; max-width: 60ch; margin-top: 0; } .main-container:has(> .nexus-side-media) > .cta-main { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 32px; } .main-container:has(> .nexus-side-media) > .nexus-chip-note { grid-column: 1; grid-row: 4; margin-top: 24px; } .main-container:has(> .nexus-side-media) > .nexus-side-media { grid-column: 2; grid-row: 1 / -1; height: 100%; min-height: 380px; max-height: 520px; overflow: hidden; border-radius: 4px; } .main-container:has(> .nexus-side-media) > .nexus-side-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Flip: image left, copy right. */ .main-container.nexus-side-left:has(> .nexus-side-media) > .headline-team, .main-container.nexus-side-left:has(> .nexus-side-media) > .story-text, .main-container.nexus-side-left:has(> .nexus-side-media) > .cta-main, .main-container.nexus-side-left:has(> .nexus-side-media) > .nexus-chip-note { grid-column: 2; } .main-container.nexus-side-left:has(> .nexus-side-media) > .nexus-side-media { grid-column: 1; } @media screen and (max-width: 991px) { .main-container:has(> .nexus-side-media) { grid-template-columns: 1fr; row-gap: 32px; } .main-container:has(> .nexus-side-media) > *, .main-container.nexus-side-left:has(> .nexus-side-media) > * { grid-column: 1; } .main-container:has(> .nexus-side-media) > .nexus-side-media { grid-column: 1; grid-row: auto; min-height: 260px; max-height: 320px; } /* The `> *` rule above is weaker than the desktop column rules, so on phones the photo stayed in column 2 and squeezed the copy into ~150px (found 6 Oct 2026). These repeat the desktop selectors so the single column actually wins. */ .main-container.nexus-side-left:has(> .nexus-side-media) > .headline-team, .main-container.nexus-side-left:has(> .nexus-side-media) > .story-text, .main-container.nexus-side-left:has(> .nexus-side-media) > .cta-main, .main-container.nexus-side-left:has(> .nexus-side-media) > .nexus-chip-note, .main-container.nexus-side-left:has(> .nexus-side-media) > .nexus-side-media { grid-column: 1; } } .main-container:has(> .headline-team + .story-text) > .headline-team { margin-bottom: 32px; } .main-container:has(> .headline-team + .story-text) > .cta-main { margin-top: 32px; } } /* ========================================================================== FAQ accordion (Jason, 30 Aug) Native
/, so it needs no JS, survives view transitions, and is keyboard operable out of the box. Rows follow the template's .faq-block hairline rhythm. The marker is removed cross browser and replaced with a plus that becomes a minus when open. ========================================================================== */ .nexus-accordion { border-top: 1px solid var(--border-dark); } .nexus-accordion-item { border-bottom: 1px solid var(--border-dark); } .nexus-accordion-summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; cursor: pointer; list-style: none; } .nexus-accordion-summary::-webkit-details-marker { display: none; } .nexus-accordion-summary::marker { content: ""; } .nexus-accordion-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .nexus-accordion-summary .text-h5 { transition: opacity .2s; } .nexus-accordion-summary:hover .text-h5 { opacity: .65; } /* Plus / minus, drawn in CSS so there is no icon font or SVG to load per row. */ .nexus-accordion-icon { position: relative; flex: none; width: 16px; height: 16px; } .nexus-accordion-icon::before, .nexus-accordion-icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background-color: currentColor; transform: translateY(-50%); transition: transform .25s ease, opacity .25s ease; } .nexus-accordion-icon::after { transform: translateY(-50%) rotate(90deg); } .nexus-accordion-item[open] .nexus-accordion-icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; } .nexus-accordion-panel { padding: 0 56px 28px 0; max-width: 900px; } /* The panel is height animated by runtime.ts, so it must not have vertical margins that would sit outside the animated box. Padding only. */ .nexus-accordion-panel > * { margin: 0; } /* Dark and stone sections need the rule and the icon to follow the section's own contrast. */ .section.nexus-dark .nexus-accordion, .section.nexus-dark .nexus-accordion-item { border-color: #ffffff40; } @media screen and (max-width: 767px) { .nexus-accordion-summary { gap: 20px; padding: 22px 0; } .nexus-accordion-panel { padding: 0 0 22px 0; } } /* ========================================================================== Footer close-out. This used to carry a full-width "Nexus Property Management" wordmark sized by arithmetic to fill the column; Jason cut it on 14 Sep. What is left is just the Ray White mark linking home, so the 100px of air that balanced a 12rem wordmark is now far too much. The mark is the only thing naming the link, hence the aria-label on the anchor in the markup. ========================================================================== */ .footer-logo-wrap { margin-top: 56px; margin-bottom: 32px; display: inline-block; } .footer-bottom-tile { border-bottom: 1px solid #2d2d2d33; padding-top: 28px; padding-bottom: 28px; } .footer-last-block { gap: 24px 40px; flex-wrap: wrap; } /* The Ray White mark sits above the wordmark and should not dwarf it at small sizes. */ .nexus-footer-mark { height: 72px; } @media screen and (max-width: 991px) { .footer-logo-wrap { margin-top: 44px; margin-bottom: 24px; } .nexus-footer-mark { height: 56px; } } @media screen and (max-width: 600px) { .footer-logo-wrap { margin-top: 36px; } .footer-last-block { flex-flow: column; align-items: flex-start; text-align: left; } } /* ========================================================================== Centred hero (Jason, 30 Aug: the team photo was becoming the default on every page) Used on /team/, where the ten headshots in the grid below already carry the visual weight, so the hero does not need a photo at all. Text is centred on a readable measure with a row of figures underneath. Every number here comes from src/data/site.ts or the existing sitewide "20+ years" claim, so nothing new is asserted. ========================================================================== */ .nexus-hero-centre-inner { display: flex; flex-flow: column; align-items: center; text-align: center; gap: 28px; max-width: 820px; margin: 0 auto; } .nexus-hero-centre-inner .heading-story, .nexus-hero-centre-inner .nexus-section-heading { align-items: center; text-align: center; } .nexus-hero-centre-inner .story-text { align-items: center; text-align: center; } .nexus-hero-centre-inner .story-text p { max-width: 680px; } .nexus-hero-centre-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); padding: 28px 0; margin-top: 8px; width: 100%; } .nexus-hero-stat { display: flex; flex-flow: column; align-items: center; gap: 6px; } .nexus-hero-stat .label { letter-spacing: .14em; } @media screen and (max-width: 600px) { .nexus-hero-centre-meta { gap: 24px 32px; padding: 22px 0; } .nexus-hero-centre-inner { gap: 22px; } } /* ========================================================================== Contact page: phone, email and address as three icon rows (Jason, 30 Aug) They were buried in a sentence of body copy next to the form. Now they are the left column's main content, set larger, with the phone and email as real tel: and mailto: links. ========================================================================== */ .nexus-contact-rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-flow: column; width: 100%; } .nexus-contact-row { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border-dark); } .nexus-contact-row:first-child { border-top: 1px solid var(--border-dark); } .nexus-contact-icon { flex: none; width: 28px; height: 28px; margin-top: 4px; color: var(--dark); } .nexus-contact-icon svg { width: 100%; height: 100%; display: block; } .nexus-contact-body { display: flex; flex-flow: column; gap: 6px; min-width: 0; } .nexus-contact-value { font-family: var(--font--serif); font-size: 26px; line-height: 1.25; color: var(--black); text-decoration: none; word-break: break-word; } a.nexus-contact-value { transition: opacity .2s; } a.nexus-contact-value:hover { opacity: .6; } @media screen and (max-width: 600px) { .nexus-contact-value { font-size: 21px; } .nexus-contact-row { gap: 16px; padding: 18px 0; } } /* ========================================================================== Type scale: Playfair for display sizes only (Jason, 30 Aug) styles.css sets Playfair on h1/h2/h3 AND on .text-h1/.text-h2/.text-h3, while .text-h4/h5/h6 just inherit. That was consistent until the SEO pass turned card titles, FAQ questions, step names and fee rows from
into

: the h3 element selector then won and they all rendered Playfair at a small size. Pin the small display classes to Lato so the semantic level and the visual size stay independent. ========================================================================== */ .text-h4, .text-h5, .text-h6, h3.text-h4, h3.text-h5, h3.text-h6, h4.text-h5, h4.text-h6 { font-family: var(--font--body); } /* In the two column text sections the prose sits beside the heading, so centre it against the heading block rather than hanging off the top. */ .main-container:has(> .headline-team + .story-text) > .story-text { align-self: center; } /* ========================================================================== SECTION LAYOUT VARIATIONS (Jason, 31 Aug: every section looked the same) The site had four body patterns and two of them, .nexus-facts and the two column text block, are both left-heading / right-content stripes, so three of the four long pages ran the exact same eight section sequence. These are alternative layouts for the SAME frontmatter data, so a page can be re-shaped without rewriting a word of copy. ========================================================================== */ /* 1. Numbered steps. Big numeral over the title, two up, no full width stripes. For any `steps` array that carries an `n`. */ .nexus-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; } .nexus-step { display: flex; flex-flow: column; gap: 12px; } .nexus-step-num { /* Lato, not Playfair: Playfair's old-style numerals (a small 0, a descending 3) with a yellow fill and dark outline read as smudged (Jason, 20 Sep). Lining figures, dark with a yellow rule underneath on light sections, plain yellow on dark ones. */ font-family: 'Lato', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: lining-nums; letter-spacing: -0.01em; color: var(--dark); -webkit-text-stroke: 0; display: inline-block; padding-bottom: 8px; box-shadow: inset 0 -5px 0 var(--accent); align-self: flex-start; } .section.nexus-dark .nexus-step-num { color: var(--accent); box-shadow: none; padding-bottom: 0; } .nexus-step h3 { margin: 0; } .nexus-step p { margin: 0; } @media screen and (max-width: 767px) { .nexus-steps { grid-template-columns: 1fr; gap: 36px; } } /* 2. Three up compact list. Same data as .nexus-facts but as columns, not rows. */ .nexus-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; } .nexus-trio > * { display: flex; flex-flow: column; gap: 10px; } /* Defensive: if a .nexus-fact ever survives inside a trio it would bring the two column grid, the border and the padding with it, which half applies the layout. Neutralise it here. */ .nexus-trio > .nexus-fact { display: flex; grid-template-columns: none; border: 0; padding: 0; } .nexus-trio h3 { margin: 0; } .nexus-trio p { margin: 0; } @media screen and (max-width: 991px) { .nexus-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .nexus-trio { grid-template-columns: 1fr; } } /* 3. Statement band. One large line, centred, no rule and no eyebrow. A palate cleanser between two dense sections, and the only place a sentence is allowed to be the whole section. */ .section.nexus-statement { padding-top: 96px; padding-bottom: 96px; } .nexus-statement-text { font-family: var(--font--serif); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.22; text-align: center; max-width: 1100px; margin: 0 auto; letter-spacing: -0.01em; } .nexus-statement-text em { font-style: normal; color: var(--accent); -webkit-text-stroke: 1px var(--dark); } .section.nexus-dark .nexus-statement-text em { -webkit-text-stroke: 0; } @media screen and (max-width: 767px) { .section.nexus-statement { padding-top: 64px; padding-bottom: 64px; } } /* 4. Image side swap, so consecutive image sections do not all lean the same way. */ .nexus-halves.nexus-flip > .nexus-media { order: -1; } @media screen and (max-width: 991px) { .nexus-halves.nexus-flip > .nexus-media { order: 0; } } /* 5. Centred section header, as an alternative to the left aligned rule + eyebrow + heading. */ .nexus-section-heading.nexus-centre { align-items: center; text-align: center; margin: 0 auto; } .headline-team.nexus-centre-head { align-items: center; text-align: center; } .headline-team.nexus-centre-head .section-divider { display: none; } /* 6. Text-section variants, so a run of prose sections does not repeat one shape. .nexus-text-centre : heading and prose centred on a measure, no rule, no side split. .nexus-text-wide : full width heading, prose flowing in two columns beneath it. Both override the :has() two column rule above, which is why they carry their own grid. */ .section.nexus-text-centre .main-container:has(> .headline-team + .story-text) { display: block; } .section.nexus-text-centre .main-container:has(> .headline-team + .story-text)::before { content: none; } .section.nexus-text-centre .main-container:has(> .headline-team + .story-text) > .headline-team { margin-bottom: 32px; } .section.nexus-text-centre .headline-team { align-items: center; text-align: center; } .section.nexus-text-centre .headline-team .section-divider { display: none; } .section.nexus-text-centre .nexus-section-heading { align-items: center; text-align: center; } .section.nexus-text-centre .main-container:has(> .headline-team + .story-text) > .story-text { max-width: 780px; margin: 0 auto; align-items: center; text-align: center; } .section.nexus-text-centre .cta-main { margin: 32px auto 0; } /* ========================================================================== Nav hover underline (Jason, 31 Aug), and mega menu hover tolerance. The underline grows from the left on hover and retracts on the way out. It is drawn on a pseudo element rather than text-decoration so it can animate, and it sits on the link's own baseline so it does not shift the layout. ========================================================================== */ .nav-link, .menu-link, .footer-menu .text-h4, .nexus-footer-legal a { position: relative; } .nav-link::after, a.menu-link::after, .footer-menu > a.text-h4::after, .nexus-footer-legal a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .nav-link:hover::after, a.menu-link:hover::after, .footer-menu > a.text-h4:hover::after, .nexus-footer-legal a:hover::after { transform: scaleX(1); } /* Retract to the right on the way out, so it reads as one continuous motion. */ .nav-link:not(:hover)::after, a.menu-link:not(:hover)::after { transform-origin: right center; } /* The current page keeps a permanent underline so the nav always says where you are. */ .nav-link.w--current::after { transform: scaleX(1); transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .nav-link::after, a.menu-link::after, .footer-menu > a.text-h4::after, .nexus-footer-legal a::after { transition: none; } } /* Mega menu hover tolerance: the open panel is a fixed box pinned to the top of the viewport, so the pointer travels from the toggle down into it. Give the whole nav a small buffer beneath so a fast diagonal move does not pass through dead space on the way. */ .navbar-master .nav-dropdown { padding-bottom: 8px; margin-bottom: -8px; } /* ========================================================================== Sticky nav swap: slides, does not squish (Jason, 31 Aug) The Monolith ix2 interaction animates TRANSFORM_SCALE over 500ms on both .navbar-master elements, so the bar collapsed and stretched vertically as one swapped for the other. main.js is off limits and ix2 writes the transform inline as one matrix, so the scale cannot be picked out of it: the whole transform is neutralised and the swap is driven from runtime.ts by a `nexus-stuck` class on . The replacement animates `top`, NOT `transform`, on purpose. `.dropdown-list.w--open` is position:fixed and expects the viewport as its containing block; any transform on an ancestor would make it position against the nav instead and the mega menu would land in the wrong place. Animating top is not GPU composited, but it is one property on one 100px bar. ========================================================================== */ .navbar-master.normal-navbar, .navbar-master.sticky-navbar { transform: none !important; transition: top .34s cubic-bezier(.22, .61, .36, 1), opacity .22s ease, visibility .34s !important; will-change: top; } .navbar-master.normal-navbar { top: 0; opacity: 1; visibility: visible; } .navbar-master.sticky-navbar { top: -120px; opacity: 0; visibility: hidden; pointer-events: none; } html.nexus-stuck .navbar-master.normal-navbar { top: -120px; opacity: 0; visibility: hidden; pointer-events: none; } html.nexus-stuck .navbar-master.sticky-navbar { top: 0; opacity: 1; visibility: visible; pointer-events: auto; } /* While the mega menu is open the bar must not slide out from under it. */ .navbar-master:has(.dropdown-list.w--open) { transition: none !important; } @media (prefers-reduced-motion: reduce) { .navbar-master.normal-navbar, .navbar-master.sticky-navbar { transition: none !important; } } /* ---- Closing CTA band: boxed, not full bleed ------------------------------- The template runs .cta-video edge to edge. A 1600px wide clip stretched across a 1920px+ viewport visibly loses quality, and the band was the only full-width element on a site that is otherwise contained. It now matches .main-container's content box exactly: max-width 1800px less the 32px side padding, so its edges line up with every other section's content. Jason, 14 Sep 2026. */ .section.cta-section .cta-video { width: min(100% - 48px, 1736px); margin-inline: auto; border-radius: 8px; overflow: hidden; position: relative; } /* Dark scrim so the white heading and label stay readable over the footage. The video is bright (big windows, pale timber) and the copy was sitting straight on it. .main-container inside this block is z-index 2 in styles.css, and .cta-video is z-index 1, so z-index 1 here lands the scrim above the video and below the text without touching either rule. */ .section.cta-section .cta-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.62) 100%); pointer-events: none; } @media screen and (max-width: 479px) { /* .main-container drops to 16px side padding here, so the inset is (16 - 8) * 2 = 16px. */ .section.cta-section .cta-video { width: min(100% - 16px, 1736px); border-radius: 6px; } } /* Appraisal page: FAQ accordion inside the hero's left column, beside the form. The shared .nexus-accordion is built for a full-width section, so it needs a top rule to separate it from the copy above and slightly tighter rows at this width. Questions are h6 here rather than h5 because they sit under an h1 in a narrow column, not as a section of their own. */ .nexus-hero-faq { margin-top: 40px; border-top: 1px solid #2d2d2d1f; } .nexus-hero-faq-label { margin: 24px 0 4px; } .nexus-hero-faq .nexus-accordion-summary { padding: 18px 0; gap: 16px; } .nexus-hero-faq .nexus-accordion-panel { padding-bottom: 18px; } @media screen and (max-width: 991px) { /* The form stacks above the copy at this width, so the accordion closes the page rather than sitting mid-column; it can have its normal breathing room back. */ .nexus-hero-faq { margin-top: 32px; } } /* Team profile page: awards/recognition list, under the bio. Only some team members carry real awards (from the client's own supplied bios, 17 Sep 2026); the block is entirely conditional so nobody without one gets an empty heading. Deliberately plain (a rule, a label, a tight list) rather than styled as achievement badges, since some lists run to ten entries (Mark's). */ .nexus-awards { margin-top: 32px; padding-top: 24px; border-top: 1px solid #2d2d2d1f; } .nexus-awards-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .nexus-awards-list li { padding-left: 18px; position: relative; } .nexus-awards-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Homepage rental cards. Ray White serves every listing image at 4:3 (checked 20 Sep: 900x675 on all cards), but the template frames them in a fixed 360px box, so object-fit:cover cropped them and clipped the property manager badge baked into the composed images. Matching the frame to the source ratio shows the whole image with no crop and no letterboxing. */ .property-image-wrap { height: auto; aspect-ratio: 4 / 3; } .property-image-wrap > .image-cover { object-fit: cover; } /* Scroll motion (runtime.ts initMotion). Everything is gated on html.nexus-motion, which the script only sets when reduced motion is off, so with no JS or reduced motion the page is untouched. 20 Sep 2026: turned up after Mark's "not exciting" review; the first pass (16px, 0.7s) read as nothing on a normal scroll. */ .nexus-motion .nx-reveal { opacity: 0; transform: translate3d(0, 56px, 0) scale(.985); transition: opacity 1s cubic-bezier(.16,1,.3,1) var(--nx-delay, 0ms), transform 1s cubic-bezier(.16,1,.3,1) var(--nx-delay, 0ms); } .nexus-motion .nx-reveal.is-in { opacity: 1; transform: none; } .nexus-motion .section-divider.nx-reveal { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.65,0,.35,1); } .nexus-motion .section-divider.nx-reveal.is-in { transform: scaleX(1); } .nexus-motion .nx-curtain { clip-path: inset(0 0 calc(100% - 2px) 0); /* 2px sliver: a fully clipped element never reports as intersecting */ transition: clip-path 1.3s cubic-bezier(.65,0,.35,1); } .nexus-motion .nx-curtain.nx-from-left { clip-path: inset(0 calc(100% - 2px) 0 0); } .nexus-motion .nx-curtain.is-in { clip-path: inset(0 0 0 0); } .nexus-motion .nx-parallax { overflow: hidden; } .nexus-motion .nx-parallax img { will-change: transform; } /* hover on cards: photo eases in, card lifts */ .property-card, .member-card { transition: transform .4s ease; } .property-card:hover, .member-card:hover { transform: translateY(-6px); } .property-image-wrap .image-cover { transition: transform .7s ease; } .property-card:hover .property-image-wrap .image-cover { transform: scale(1.07); } /* Scroll-linked effects (runtime.ts runParallax). Opacity/transform are written per scroll frame, so no CSS transition on them: it would lag the scrub behind the scrollbar. */ .nx-word { display: inline-block; will-change: opacity; } .nx-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; background: var(--accent, #FFE512); transform-origin: 0 50%; transform: scaleX(0); z-index: 10060; pointer-events: none; } .home-c-hero-video { overflow: hidden; } .home-c-hero-video .nexus-hero-photo { will-change: transform; } /* Load-in for headlines: each word rises from below its own baseline, staggered by --d. */ .nexus-motion h1 .nx-hword { display: inline-block; opacity: 0; transform: translate3d(0, .7em, 0); transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--d, 0ms), transform 1s cubic-bezier(.16,1,.3,1) var(--d, 0ms); } .nexus-motion h1.nx-h1-in .nx-hword { opacity: 1; transform: none; } /* Held for a couple of frames by runtime.ts initMotion so hidden start states apply instantly. */ html.nx-priming *, html.nx-priming *::before, html.nx-priming *::after { transition: none !important; } /* Town page hero variants (see recipes in property-management/[town].astro). */ .story-halves.nx-flip { grid-template-columns: 1fr 2fr; } .story-halves.nx-flip .story-image-wrap { order: -1; } @media screen and (max-width: 991px) { .story-halves.nx-flip { grid-template-columns: 1fr; } .story-halves.nx-flip .story-image-wrap { order: 0; } } .nexus-hero-band { align-items: end; } .nexus-hero-band .story-right { gap: 24px; } /* Landlord guide hero variants (20 Sep 2026): copy on top, wide photo band below. */ .nexus-hero-stack { display: flex; flex-flow: column; gap: 48px; } .nexus-hero-stack .nexus-media { height: 420px; } .nexus-hero-stack-centre .nexus-side-copy { align-items: center; text-align: center; max-width: 820px; margin: 0 auto; } .nexus-hero-stack-centre .nexus-section-heading { align-items: center; text-align: center; } .nexus-hero-stack-centre .story-text { align-items: center; text-align: center; } @media screen and (max-width: 991px) { .nexus-hero-stack .nexus-media { height: 320px; } } @media screen and (max-width: 600px) { .nexus-hero-stack .nexus-media { height: 240px; } .nexus-hero-stack { gap: 32px; } } .nexus-hero-stack-centre .cta-main { align-self: center; } /* heading left, prose right, photo band below (buying-a-rental) */ .nexus-hero-stack-split .nexus-side-copy { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 64px; row-gap: 28px; align-items: start; } .nexus-hero-stack-split .nexus-side-copy > .heading-story { grid-column: 1; grid-row: 1 / span 2; } .nexus-hero-stack-split .nexus-side-copy > .story-text { grid-column: 2; grid-row: 1; max-width: none; } .nexus-hero-stack-split .nexus-side-copy > .cta-main { grid-column: 2; grid-row: 2; justify-self: start; } @media screen and (max-width: 991px) { .nexus-hero-stack-split .nexus-side-copy { grid-template-columns: 1fr; } .nexus-hero-stack-split .nexus-side-copy > * { grid-column: 1 !important; grid-row: auto !important; } } /* Areas we serve (town pages, 20 Sep 2026). Left: heading, a big suburb count taken from the data (site.ts, never typed) and the coverage note. Right: the suburbs as a ruled multi-column list, in the client's order, replacing the loose pill chips. Rules use currentColor so it works on white, stone and dark sections without a variant per tone. */ .nexus-areas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; } .nexus-areas-lead .headline-team { margin-bottom: 32px; } .nexus-areas-count { display: flex; flex-flow: column; gap: 10px; margin-bottom: 28px; } .nexus-areas-num { font-family: 'Lato', sans-serif; font-weight: 800; font-size: clamp(72px, 9vw, 128px); line-height: .9; letter-spacing: -0.03em; } .section.nexus-dark .nexus-areas-num { color: var(--accent); } .nexus-areas-note { max-width: 44ch; margin: 0; opacity: .85; } .nexus-areas-list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; } .nexus-areas-list li { break-inside: avoid; padding: 14px 0; margin: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); display: flex; align-items: center; gap: 12px; } .nexus-areas-list li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); } @media screen and (max-width: 991px) { .nexus-areas { grid-template-columns: 1fr; row-gap: 40px; } .nexus-areas-list { columns: 2; } } @media screen and (max-width: 520px) { .nexus-areas-list { columns: 1; } } /* Town link rows (components/TownLinks.astro). Rules use currentColor so one set serves white, stone and dark sections. Hover wipes a yellow bar in from the left and the text goes dark. */ .nexus-towns { display: flex; flex-flow: column; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); } a.nexus-town-row { position: relative; isolation: isolate; overflow: hidden; color: inherit; text-decoration: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto; column-gap: 40px; align-items: center; padding: 26px 20px; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition: color .3s ease, padding .35s cubic-bezier(.22,.61,.36,1); } a.nexus-town-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.65,0,.35,1); } a.nexus-town-row:hover, a.nexus-town-row:focus-visible { color: var(--dark); padding-left: 32px; } a.nexus-town-row:hover::before, a.nexus-town-row:focus-visible::before { transform: scaleX(1); } .nexus-town-name { font-family: var(--font--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; margin: 0; } .nexus-town-blurb { margin: 0; opacity: .8; } .nexus-town-arrow { display: inline-flex; transition: transform .35s cubic-bezier(.22,.61,.36,1); } a.nexus-town-row:hover .nexus-town-arrow { transform: translateX(6px); } @media screen and (max-width: 767px) { a.nexus-town-row { grid-template-columns: 1fr auto; row-gap: 8px; padding: 22px 8px; } .nexus-town-blurb { grid-column: 1; grid-row: 2; } .nexus-town-arrow { grid-column: 2; grid-row: 1 / span 2; } } /* pulled-out key paragraph and closing call-out */ .nexus-pull { border-left: 4px solid var(--accent); padding-left: 24px; } .nexus-callout { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 48px; padding: 28px 32px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 8px; } .nexus-callout p { margin: 0; max-width: 56ch; } /* Mega menu drop shadow (Jason, 20 Sep: the panel butts straight onto the page content). The white panel is the nav bar itself, which grows to about 500px while a dropdown is open and only carries a 1px hairline, so it needs a real shadow while open. :has() keys it off the open state, so the closed bar keeps its light shadow. */ .navbar:has(.w-dropdown-list.w--open) { box-shadow: 0 1px 0 rgba(45, 45, 45, .08), 0 24px 48px -16px rgba(0, 0, 0, .28), 0 10px 20px -10px rgba(0, 0, 0, .16) !important; } /* Why Nexus band: service points under the intro paragraph, filling the right column beside the photo. */ .nexus-why-list { display: flex; flex-flow: column; margin: 8px 0 8px; } .nexus-why-item { display: flex; flex-flow: column; gap: 8px; padding: 20px 0; border-top: 1px solid #ffffff2e; } .nexus-why-item:last-child { border-bottom: 1px solid #ffffff2e; } .nexus-why-item p { opacity: .82; } .nexus-why-item h3 { font-weight: 500; } /* Whole footer in Lato (Jason approved 20 Sep after a local trial). The contact values and the Landlords / Tenants / Legal links were Playfair (.text-big); the menu and labels already were Lato. The footer is
, not a