@charset "UTF-8";
/*!
Main Stylesheet Manifest
This file imports all SCSS partials in the correct order.
DO NOT add styles here — use the appropriate partial instead.
Compile: sass --watch css:css
Import order:
1. Fonts & Variables (design tokens)
2. Helpers (mixins & utilities)
3. Utility classes (colors, typography)
4. Base element styles
5. Components (reusable patterns)
6. Sections (ACF flexible content)
7. Page-specific overrides
@author development@bronte.co.nz
*/
/*
Design Tokens (Variables)
Central source of truth for all design values.
ALWAYS check here before adding new values elsewhere.
How to use:
1. Import in your partial: @use 'variables' as *;
2. Use variables: color: $color-primary;
Naming conventions:
$color-{name} -- colours
$spacing-{size} -- spacing (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
$font-size-{size} -- font sizes
$font-weight-{name} -- font weights
$screen-{size} -- breakpoints
$border-radius-{size} -- border radius
*/
/*
Font Loading & FOUT Prevention
Fonts are loaded via Typekit JS (kit wph3vhr).
Typekit adds .wf-loading to during font load,
then switches to .wf-active when fonts are ready.
This file controls the transition between fallback and loaded fonts
to prevent FOUT flash and minimise CLS.
*/
.wf-loading body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
letter-spacing: 0.02em;
}
.wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6 {
font-family: Georgia, "Times New Roman", serif;
letter-spacing: -0.01em;
}
.wf-active body,
body {
font-family: neue-haas-grotesk-text, sans-serif;
}
.wf-active h1,
.wf-active h2,
.wf-active h3,
.wf-active h4,
.wf-active h5,
.wf-active h6,
h1, h2, h3, h4, h5, h6 {
font-family: new-spirit, sans-serif;
}
/*
Helper Utilities
Layout, positioning, and display utilities.
For typography utilities, see _typography.scss.
For colour utilities, see _colors.scss.
Usage:
Content above image
*/
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.pos-relative {
position: relative;
}
.pos-absolute {
position: absolute;
}
.z-below {
z-index: 1;
}
.z-base {
z-index: 10;
}
.z-above {
z-index: 100;
}
.mb-0 {
margin-bottom: 0;
}
.last-child-mb-0 > :last-child {
margin-bottom: 0;
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.overflow-hidden {
overflow: hidden;
}
/*
Webflow-Matched CSS Reset
Mirrors Webflow's exact base defaults so computed design tokens
from the Phase 0 audit render identically.
Source: audit/design-tokens.json computed values.
Applied BEFORE any section or component styles.
*/
*, *::before, *::after {
box-sizing: border-box;
}
html {
line-height: 1;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0;
font-weight: inherit;
}
p {
margin-top: 0;
margin-bottom: 0;
}
a {
color: inherit;
text-decoration: inherit;
}
img, svg, video {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
Per-Page Colour Themes
Re-skins the ENTIRE page chrome (header pills, side nav, buttons, footer,
section text) from one palette to another via a single body class.
How it works:
1. `:root` declares the theme contract — every custom property defaults
to the CURRENT light-site value, so un-themed pages render exactly as
before (the chrome partials read `var(--theme-*, $fallback)`).
2. A `body.theme-{name}` block overrides only the values that change.
3. PHP adds the body class — see bronte_get_page_theme() in custom.php
(driven by the page's "Page Theme" ACF select, with a slug fallback).
Adding a new themed page (e.g. /awards) is just a new `body.theme-awards`
block here plus setting that page's Page Theme — no chrome edits needed.
Section bodies inherit their colours through the existing --section-fg /
--heading-fg custom properties, wired per page in css/_page_matariki.scss.
*/
:root {
--theme-bg: #F3F8ED;
--theme-text: #333333;
--theme-accent: #E63946;
--theme-pill-bg: #F3F8ED;
--theme-pill-fg: #1E232D;
--theme-pill-border: #1E232D;
--theme-pill-hover-bg: #1E232D;
--theme-pill-hover-fg: #F3F8ED;
--theme-overlay-bg: #E63946;
--theme-overlay-fg: #F3F8ED;
--side-nav-fg: #E63946;
--side-nav-bg: #F3F8ED;
--side-nav-border: #E63946;
--side-nav-hover-bg: #E63946;
--side-nav-hover-fg: #FFFFFF;
--theme-btn-bg: transparent;
--theme-btn-fg: #E63946;
--theme-btn-border: #E63946;
--theme-btn-hover-bg: #E63946;
--theme-btn-hover-fg: #FFFFFF;
--theme-footer-bg: #F3F8ED;
--theme-footer-fg: #333333;
--theme-footer-heading: #1E232D;
--theme-footer-accent: #E63946;
--theme-footer-muted: #959a9e;
--theme-footer-btn-bg: #F3F8ED;
--theme-footer-btn-fg: #E63946;
}
/* ── Matariki (dark navy + gold) ───────────────────────────────────────── */
body.theme-matariki {
--theme-bg: #1E232D;
--theme-text: #F3F8ED;
--theme-accent: #e2b354;
--theme-pill-bg: transparent;
--theme-pill-fg: #F3F8ED;
--theme-pill-border: #F3F8ED;
--theme-pill-hover-bg: #F3F8ED;
--theme-pill-hover-fg: #1E232D;
--theme-overlay-bg: #1E232D;
--theme-overlay-fg: #F3F8ED;
--side-nav-fg: #e2b354;
--side-nav-bg: transparent;
--side-nav-border: #e2b354;
--side-nav-hover-bg: #e2b354;
--side-nav-hover-fg: #1E232D;
--theme-btn-fg: #e2b354;
--theme-btn-border: #e2b354;
--theme-btn-hover-bg: #e2b354;
--theme-btn-hover-fg: #1E232D;
--theme-footer-bg: #1E232D;
--theme-footer-fg: #F3F8ED;
--theme-footer-heading: #F3F8ED;
--theme-footer-accent: #e2b354;
--theme-footer-muted: #e2b354;
--theme-footer-btn-bg: #1E232D;
--theme-footer-btn-fg: #e2b354;
}
/* ── Awards (dark navy + gold) ─────────────────────────────────────────────
The live /awards + /award-winners pages use the same dark navy + gold
palette as Matariki, so this block mirrors body.theme-matariki. Section
bodies are wired in _page_awards.scss; the chrome reads these tokens. */
body.theme-awards {
--theme-bg: #1E232D;
--theme-text: #F3F8ED;
--theme-accent: #e2b354;
--theme-pill-bg: transparent;
--theme-pill-fg: #F3F8ED;
--theme-pill-border: #F3F8ED;
--theme-pill-hover-bg: #F3F8ED;
--theme-pill-hover-fg: #1E232D;
--theme-overlay-bg: #1E232D;
--theme-overlay-fg: #F3F8ED;
--side-nav-fg: #e2b354;
--side-nav-bg: transparent;
--side-nav-border: #e2b354;
--side-nav-hover-bg: #e2b354;
--side-nav-hover-fg: #1E232D;
--theme-btn-fg: #e2b354;
--theme-btn-border: #e2b354;
--theme-btn-hover-bg: #e2b354;
--theme-btn-hover-fg: #1E232D;
--theme-footer-bg: #1E232D;
--theme-footer-fg: #F3F8ED;
--theme-footer-heading: #F3F8ED;
--theme-footer-accent: #e2b354;
--theme-footer-muted: #e2b354;
--theme-footer-btn-bg: #1E232D;
--theme-footer-btn-fg: #e2b354;
}
/*
Colour Utility Classes
Background and text colour utilities generated from $colors map.
All colours are defined in _variables.scss.
Usage:
Primary background
Secondary text
Available classes:
.bg-{color} -- background colour
.text-{color} -- text colour
Where {color} is: primary, cream, dark, text, white, black, muted, error, success
*/
.bg-primary {
background-color: #E63946;
}
.text-primary {
color: #E63946;
}
.bg-cream {
background-color: #F3F8ED;
}
.text-cream {
color: #F3F8ED;
}
.bg-dark {
background-color: #1E232D;
}
.text-dark {
color: #1E232D;
}
.bg-text {
background-color: #333333;
}
.text-text {
color: #333333;
}
.bg-white {
background-color: #FFFFFF;
}
.text-white {
color: #FFFFFF;
}
.bg-black {
background-color: #000000;
}
.text-black {
color: #000000;
}
.bg-muted {
background-color: #959a9e;
}
.text-muted {
color: #959a9e;
}
.bg-gold {
background-color: #e2b354;
}
.text-gold {
color: #e2b354;
}
.bg-error {
background-color: #DC3545;
}
.text-error {
color: #DC3545;
}
.bg-success {
background-color: #28a745;
}
.text-success {
color: #28a745;
}
.bg-secondary {
background-color: #F3F8ED;
}
.bg-light {
background-color: #F3F8ED;
}
.text-secondary {
color: #F3F8ED;
}
.text-light {
color: #F3F8ED;
}
/*
Typography Utility Classes
Apply these classes directly in HTML to control text appearance.
All values come from _variables.scss for consistency.
Usage:
Large bold text
Small muted caption
Display font heading
*/
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text--display {
font-family: new-spirit, sans-serif;
}
.text--body {
font-family: neue-haas-grotesk-text, sans-serif;
}
.text-xs {
font-size: 12px;
}
.text-sm {
font-size: 14px;
}
.text-base {
font-size: 16px;
}
.text-lg {
font-size: 18px;
}
.text-xl {
font-size: 24px;
}
.text-2xl {
font-size: 32px;
}
.text-3xl {
font-size: 48px;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.leading-tight {
line-height: 1.2;
}
.leading-base {
line-height: 1.5;
}
.leading-loose {
line-height: 1.8;
}
.font-primary {
font-family: new-spirit, sans-serif;
}
.font-secondary {
font-family: neue-haas-grotesk-text, sans-serif;
}
/*
Button Styles
Base button styles and variants.
Applied to .btn class,