/* ────────────────────────────────────────────────────────────────────── Styx Mill — Design Tokens NRL brand-correct per NorthRidge Brand Style Guide v Sept 2021. Brand identity (page 8 of the brand guide): Primary — Deep teal / navy #003344 (CMYK 95/56/38/62) Secondary — Copper / burnt orange #C06D3B (CMYK 20/62/80/9) White used for reversed colour-ways. Typography (page 9 of the brand guide): Headlines, subheads, CTAs — Lexend (Bold + Semibold) Body / tagline / disclaimers — Cera Pro Regular / Bold (Cera Pro is paid; the brand guide explicitly allows Arial as a substitute. Arial is web-safe and ships with all OSes.) Wordmark "NORTHRIDGE.NZ" — Cera Pro Bold, tracking 60 Brand hierarchy: Styx Mill is a development under the single NRL parent brand — the same parent brand that carries the sister development Elmbridge Mews. There is no Styx Mill sub-brand palette; the NRL colour system carries across all four developments. The location's key amenity (the adjacent Styx Mill Conservation Reserve) is expressed through photography and copy, not a bespoke palette. Token names mirror the elmbridge-mews site so base.css + components.css carry across unchanged across the NRL portfolio. ────────────────────────────────────────────────────────────────────── */ /* Typography — the NRL brand faces, per Brand Style Guide (Sept 2021) p.9. • Lexend headlines, subheadings, calls to action • Cera Pro Regular tagline, product lists, disclaimers — "can be substituted for Arial" (guide, p.9) • Cera Pro Bold the website line, tracking +60 The site previously used Fraunces for headings — an editorial serif that appears nowhere in the brand guide. It looked good, but it was not the brand. Lexend is free on Google Fonts, so there is no licensing reason not to be correct here. Cera Pro is commercial and NRL does not currently hold the web licence, so the stack falls through to Arial exactly as the guide sanctions. If the licence is bought later, self-host the woff2 and the stack picks it up with no other change. NOTE: a comment in an earlier version of this file said Lexend had given trouble as a web font. Loading it as a variable font with display=swap and a preconnect (see each page ) is the robust form — worth eyeballing on a real handset before launch. */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap'); :root { /* ── Colour tokens ───────────────────────────────────────────────── */ /* Surfaces — clean off-white so brand colours read crisp */ --colour-surface: #fbfaf7; /* page background — off-white */ --colour-surface-elev: #ffffff; /* cards / elevated surfaces */ --colour-surface-tint: #f1ede4; /* subtle section divider */ /* Text — deep brand navy for body; softens to charcoal at lower hierarchy */ --colour-text: #1a242b; /* body text — near-black with navy undertone */ --colour-text-muted: #4a5860; --colour-text-soft: #7d8a92; /* Primary brand — deep teal/navy (Page 8) */ --colour-brand: #003344; --colour-brand-hover: #00222e; --colour-brand-soft: #d6e0e4; /* tint for subtle backgrounds */ /* Accent — copper/burnt orange (Page 8) — CTAs, links, hover states */ --colour-accent: #C06D3B; --colour-accent-hover: #a85a2c; --colour-accent-soft: #f3ddcd; /* Alias — preserve the shared name "accent" for shared components. Components default to NRL accent (copper) for CTAs; brand navy is used for headers/footers via --colour-brand directly. */ /* Functional */ --colour-border: #e3ddd0; --colour-border-strong: #c6bda1; --colour-success: #2f7a4d; --colour-warning: #C06D3B; --colour-on-accent: #ffffff; /* white on copper */ --colour-on-brand: #ffffff; /* white on navy */ /* ── Type tokens ─────────────────────────────────────────────────── */ --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; /* Headlines, subheadings, CTAs (guide p.9). base.css maps h1–h6 here. */ --font-display: "Lexend", var(--font-system); /* Tagline, product lists, disclaimers. Arial is the guide's own sanctioned substitute for Cera Pro; naming Cera Pro first means a future licence needs no code change. */ --font-body: "Cera Pro", Arial, Helvetica, var(--font-system); --font-sans: var(--font-body); /* The wordmark is now the supplied logo artwork, not set type. This token remains for the text fallback used before the SVG loads. */ --font-wordmark: var(--font-display); /* Back-compat alias: components.css still references --font-serif in a few places. Pointed at the brand display face so nothing renders off-brand. */ --font-serif: var(--font-display); --text-xs: 0.875rem; --text-sm: 1rem; --text-base: 1.125rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 2rem; /* Display sizes were set for Fraunces, an optical serif that stays elegant at 60px. Lexend is a geometric sans with a large x-height and it turns blunt at that scale — and the brand's own execution examples (guide pp.11-14) never do it: headlines there are short, Bold, and modest against the canvas, with the logo carrying the visual weight. Scaled back to match. */ --text-2xl: 2.125rem; --text-3xl: 2.75rem; --line-tight: 1.15; --line-snug: 1.3; --line-normal: 1.55; --line-relaxed: 1.75; /* ── Spacing scale ───────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ── Layout tokens ───────────────────────────────────────────────── */ --layout-max: 1200px; --layout-narrow: 720px; --layout-gutter: var(--space-5); /* ── Radius / shadows / motion ───────────────────────────────────── */ /* Hard 90° edges throughout — crisp, squared boxes / buttons / photos. */ --radius-sm: 0; --radius: 0; --radius-lg: 0; --shadow-sm: 0 1px 2px rgba(0, 51, 68, 0.05), 0 1px 3px rgba(0, 51, 68, 0.07); --shadow: 0 4px 12px rgba(0, 51, 68, 0.07), 0 2px 4px rgba(0, 51, 68, 0.05); --shadow-lg: 0 12px 32px rgba(0, 51, 68, 0.10); --motion-fast: 120ms; --motion: 220ms; --motion-slow: 360ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ────────────────────────────────────────────────────────────────────── Header wordmark / logo slot — brand-sanctioned typography. When NRL supplies the official logo files (PDF vector for print, SVG/PNG for web; full-colour + reversed + white variants per brand guide p.4-7 and p.15), drop them in /assets/brand/ and uncomment the img tag in each page header. The text wordmark below acts as the brand-compliant placeholder in the meantime. ────────────────────────────────────────────────────────────────────── */ .site-header__brand { display: flex; flex-direction: column; text-decoration: none; color: var(--colour-brand); line-height: 1.1; } /* Supplied artwork, used as-is. The tertiary lockup (emblem + NORTH RIDGE, no "Living" subline) is the guide's own choice for smaller sizes, p.6. Aspect ratio is 456:68, so 36px tall renders ~242px wide and 22px tall renders ~148px — both comfortably above the 85px tertiary minimum on p.7. */ .site-header__logo { height: 36px; width: auto; display: block; /* Clear space, guide p.7: the height of the capital L in "Living". This lockup has no subline to measure, so it is taken proportionally from the logotype cap height — about a third of the mark. */ padding-right: 12px; } @media (max-width: 860px) { .site-header__logo { height: 26px; padding-right: 9px; } } @media (max-width: 400px) { /* 22px -> ~148px wide. Still 74% clear of the 85px floor. */ .site-header__logo { height: 22px; padding-right: 7px; } } /* Footer sits on brand navy, so the reversed colour-way applies. Selector is deliberately specific: components.css sets .site-footer__col h3 and loads after this file, so a lone .site-footer__brand would lose. */ .site-footer__col h3.site-footer__brand { margin: 0 0 var(--space-4); line-height: 0; } .site-footer__logo { height: 30px; width: auto; display: block; padding-right: 10px; } .site-header__brand .brand-parent { font-family: var(--font-wordmark); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; /* tracking 60 per brand guide p.9 */ color: var(--colour-brand); text-transform: uppercase; } .site-header__brand .brand-dev { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: var(--colour-accent); text-transform: uppercase; margin-top: 2px; } /* CTA accent override — NRL brand uses copper for primary CTAs. Base components.css uses --colour-accent which we've mapped to copper. */ /* ────────────────────────────────────────────────────────────────────── Inline page imagery — patterns layered on shared components. - .page-hero-band tall photo band below a subpage h1 (~340-420px) - .room-photo photo above a room-by-room article - .split-photo half-photo / half-text two-col layout Designed to break up wall-of-text pages without restyling base.css or components.css. All photo treatments use the brand-navy overlay gradient family for consistency. ────────────────────────────────────────────────────────────────────── */ .page-hero-band { position: relative; overflow: hidden; margin-block: var(--space-7); border-radius: var(--radius); } .page-hero-band img { width: 100%; height: clamp(280px, 36vw, 460px); object-fit: cover; display: block; } .page-hero-band__caption { position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--space-6); background: linear-gradient(180deg, transparent, rgba(0, 30, 40, 0.75)); color: var(--colour-on-brand); font-family: var(--font-sans); font-weight: 500; font-size: var(--text-md); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .room-photo { width: 100%; height: clamp(220px, 32vw, 360px); object-fit: cover; display: block; border-radius: var(--radius); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); } .split-photo { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; margin-block: var(--space-7); } .split-photo img { width: 100%; height: clamp(240px, 40vw, 380px); object-fit: cover; display: block; border-radius: var(--radius); box-shadow: var(--shadow-sm); } @media (min-width: 720px) { .split-photo { grid-template-columns: 1fr 1fr; gap: var(--space-7); } .split-photo--reverse img { order: 2; } } /* ────────────────────────────────────────────────────────────────────── Layout patterns — desktop-aware composition. Default stacks single-column on mobile (per existing convention). Above 720px viewports, sections use horizontal composition so widescreen reading doesn't degrade to wall-of-text. Patterns: - .split two equal columns (text + photo) - .split--40-60 asymmetric (sidebar : main) - .split--60-40 asymmetric (main : sidebar) - .split--reverse swaps order at desktop - .stats-band 4-up number strip across full width - .cards-3up responsive 3-column card grid - .cards-4up responsive 4-column card grid - .panel elevated content block (white card) - .container--wide 1320px max width for layouts needing breath ────────────────────────────────────────────────────────────────────── */ .container--wide { max-width: 1320px; margin-inline: auto; padding-inline: var(--layout-gutter); } /* Split — alternating text/photo on desktop */ .split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; } .split__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .split__media img { display: block; width: 100%; height: clamp(260px, 36vw, 480px); object-fit: cover; } .split__text > :first-child { margin-top: 0; } .split__text > :last-child { margin-bottom: 0; } @media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .split--40-60 { grid-template-columns: 5fr 7fr; } .split--60-40 { grid-template-columns: 7fr 5fr; } .split--reverse .split__media { order: 2; } } /* Stats band — 4-up numbers strip */ .stats-band { background: var(--colour-brand); color: var(--colour-on-brand); padding-block: var(--space-7); } .stats-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); text-align: center; } @media (min-width: 720px) { .stats-band__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } } .stats-band__item dt { font-family: var(--font-sans); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: var(--space-2); } .stats-band__item dd { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; margin: 0; } /* Cards grids — responsive 3-up / 4-up */ .cards-3up, .cards-4up { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 600px) { .cards-3up, .cards-4up { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cards-3up { grid-template-columns: repeat(3, 1fr); } .cards-4up { grid-template-columns: repeat(4, 1fr); } } /* Reusable elevated panel */ .panel { background: var(--colour-surface-elev); border: 1px solid var(--colour-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .panel__media { display: block; width: 100%; height: clamp(160px, 22vw, 240px); object-fit: cover; } .panel__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .panel__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--colour-accent); margin: 0; } .panel__title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 400; color: var(--colour-brand); margin: 0; } .panel__desc { font-size: var(--text-sm); line-height: 1.55; color: var(--colour-text-muted); margin: 0; flex: 1; } .panel__cta { font-size: var(--text-sm); font-weight: 500; color: var(--colour-accent); text-decoration: none; margin-top: var(--space-2); } .panel__cta:hover { color: var(--colour-accent-hover); } /* 2x2 grid — for paired/quadrant content (FAQ 2x2, ownership pillars) */ .cards-2x2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 720px) { .cards-2x2 { grid-template-columns: repeat(2, 1fr); } } /* ────────────────────────────────────────────────────────────────────── Lot table — mobile-friendly responsive table. Desktop: standard 6-column table. Mobile (<720px): horizontal scroll wrapper so the full table is accessible without breaking layout, with a visual cue (gradient fade on the right edge) showing more content scrolls into view. ────────────────────────────────────────────────────────────────────── */ .lot-table { width: 100%; border-collapse: collapse; background: var(--colour-surface-elev); border: 1px solid var(--colour-border); border-radius: var(--radius); overflow: hidden; } .lot-table th, .lot-table td { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-sm); border-bottom: 1px solid var(--colour-border); vertical-align: middle; } .lot-table th { background: var(--colour-brand); color: var(--colour-on-brand); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border-bottom: 1px solid var(--colour-brand); } .lot-table tbody tr:last-child td { border-bottom: none; } .lot-table tbody tr:hover { background: var(--colour-surface-tint); } .lot-status { display: inline-block; padding: 2px 8px; border-radius: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .lot-status--available { background: var(--colour-accent-soft); color: var(--colour-accent-hover); } .lot-status--sold { background: var(--colour-border); color: var(--colour-text-muted); text-decoration: line-through; } .lot-table--sold td:not(:last-child) { opacity: 0.55; } /* Mobile: horizontal scroll the whole table */ @media (max-width: 720px) { .lot-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); /* Keep the table laying out as a table inside the scroll container */ white-space: nowrap; } .lot-table thead, .lot-table tbody { display: table; width: max-content; min-width: 100%; } .lot-table th, .lot-table td { padding: var(--space-3); font-size: var(--text-xs); } } /* Proposition-strip — small photo banner inside each tile */ .proposition-strip__item img { width: 100%; height: clamp(120px, 16vw, 160px); object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-3); display: block; box-shadow: var(--shadow-sm); }