/* ============================================================ Settles Finance: Complete Design System www.settles.com.au ───────────────────────────────────────────────────────────── Table of contents 1. Google Fonts import 2. Design tokens (CSS custom properties) 3. Reset & base 4. Typography scale 5. Layout utilities 6. Components 6a. Buttons 6b. Divider 7. Navigation 8. Hero section 9. Scroll-entry animations 10. Footer 11. Responsive (768px / 480px breakpoints) ============================================================ */ /* ============================================================ 1. Google Fonts import Metamorphous: display / brand name only (weight 400) DM Sans : all body copy, nav, UI (weights 300 400 500) ============================================================ */ /* Fonts loaded via tags in for faster parallel fetch. @import removed to avoid duplicate request. */ /* ============================================================ 2. Design tokens All colour, type, space and motion values live here so they can be overridden per-section without touching component rules. ============================================================ */ :root { /* ── Brand colours ── */ --color-moss: #1f4d3a; --color-moss-light: #285945; --color-beige: #f9f6ed; --color-white: #ffffff; --color-text-dark: #1a1a1a; --color-text-mid: #4a4a4a; --color-text-light: #8a8a8a; /* ── Type families ── */ --font-brand: 'Metamorphous', 'Cormorant Garamond', serif; --font-body: 'DM Sans', system-ui, sans-serif; /* ── Type scale ── */ --text-xs: 0.7rem; /* 11.2px */ --text-sm: 0.8rem; /* 12.8px */ --text-base: 1rem; /* 16px */ --text-lead: 1.2rem; /* 19.2px */ --text-h3: 1.3rem; /* 20.8px */ --text-h2: 2.2rem; /* 35.2px */ --text-h1: 3.5rem; /* 56px */ /* ── Spacing scale ── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* ── Layout ── */ --container-max: 1100px; --nav-height: 72px; /* ── Motion ── */ --ease-base: 0.3s ease; --ease-entry: 0.7s ease; /* ── Shadows ── */ --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-nav: 0 2px 20px rgba(0, 0, 0, 0.15); } /* ============================================================ 3. Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Prevent iOS auto-zoom on orientation change */ -webkit-text-size-adjust: 100%; } body { background-color: var(--color-beige); font-family: var(--font-body); font-weight: 300; color: var(--color-text-dark); line-height: 1.7; /* Crisp subpixel rendering on macOS/iOS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sensible media defaults */ img, video, iframe, svg { display: block; max-width: 100%; } /* Remove default list chrome */ ul, ol { list-style: none; } /* Anchors inherit colour by default: individual components add colour */ a { color: inherit; text-decoration: none; } /* Buttons inherit the body font so they don't fall back to system-ui */ button, input, select, textarea { font-family: inherit; } /* ============================================================ 4. Typography scale ============================================================ */ /* Utility class: apply Metamorphous to any element (normally only the logo wordmark and hero h1 use this). */ .font-brand { font-family: var(--font-brand); } /* ── Headings ── */ h1 { font-family: var(--font-brand); font-size: var(--text-h1); font-weight: 400; /* Metamorphous has no bold: keep 400 */ color: var(--color-moss); line-height: 1.12; letter-spacing: 0.02em; } h2 { font-family: var(--font-brand); font-size: var(--text-h2); font-weight: 400; color: var(--color-moss); line-height: 1.2; letter-spacing: 0.02em; } h3 { font-family: var(--font-body); font-size: var(--text-h3); font-weight: 500; color: var(--color-text-dark); line-height: 1.4; } /* ── Body copy ── */ p { font-size: var(--text-base); font-weight: 300; line-height: 1.8; } /* Larger intro paragraph: e.g. section openers */ .lead { font-size: var(--text-lead); font-weight: 300; color: var(--color-text-mid); line-height: 1.75; } /* Caps label: small uppercase tag above a heading */ .eyebrow { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-moss); } /* Overline rule used inside moss sections */ .section--moss .eyebrow { color: rgba(249, 246, 237, 0.6); } /* Heading colour overrides inside moss sections */ .section--moss h1, .section--moss h2, .section--moss h3 { color: var(--color-beige); } .section--moss p, .section--moss .lead { color: rgba(249, 246, 237, 0.8); } /* ============================================================ 5. Layout utilities ============================================================ */ /* Centred content column */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; } /* Standard section vertical rhythm */ .section { padding: var(--space-xl) 0; } /* Background variants */ .section--moss { background-color: var(--color-moss); color: var(--color-beige); } .section--beige { background-color: var(--color-beige); } .section--white { background-color: var(--color-white); } /* Two-column grid: left text, right visual */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } /* Three-column card row */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } /* Vertical stack with consistent gap */ .stack { display: flex; flex-direction: column; gap: 1.5rem; } /* Horizontal cluster */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } /* ============================================================ 6a. Buttons All share .btn base + a modifier class. ============================================================ */ .btn { display: inline-block; padding: 0.9rem 2.2rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; border: none; border-radius: 0; /* sharp corners are on-brand */ cursor: pointer; text-decoration: none; transition: background-color var(--ease-base), color var(--ease-base), border-color var(--ease-base); /* Prevent text wrapping on small buttons */ white-space: nowrap; } /* Primary: solid moss fill */ .btn--primary { background-color: var(--color-moss); color: var(--color-white); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-moss-light); } /* Outline: transparent with moss border */ .btn--outline { background-color: transparent; border: 1.5px solid var(--color-moss); color: var(--color-moss); } .btn--outline:hover, .btn--outline:focus-visible { background-color: var(--color-moss); color: var(--color-white); } /* Outline-light: for use on dark (moss) backgrounds */ .btn--outline-light { background-color: transparent; border: 1.5px solid var(--color-beige); color: var(--color-beige); } .btn--outline-light:hover, .btn--outline-light:focus-visible { background-color: var(--color-beige); color: var(--color-moss); } /* Focus ring: accessible keyboard indicator */ .btn:focus-visible { outline: 2px solid var(--color-beige); outline-offset: 3px; } /* ============================================================ 6b. Divider Short decorative rule below an eyebrow or above a CTA. ============================================================ */ .divider { width: 48px; height: 2px; background-color: var(--color-moss); border: none; margin: 1.5rem 0; } /* Beige variant for use inside moss sections */ .divider--light { background-color: var(--color-beige); } /* ============================================================ 7. Navigation Fixed top bar: transparent over the hero, transitions to solid moss once the page scrolls. JS adds .scrolled when window.scrollY > 10. ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; /* Both colour and shadow animate on scroll */ transition: background-color 0.4s ease, box-shadow 0.4s ease; } /* Transparent default: the hero animation shows through */ .nav:not(.scrolled) { background-color: transparent; } /* Solid nav once user leaves the hero zone */ .nav.scrolled { background-color: var(--color-moss); box-shadow: var(--shadow-nav); } /* Inner flexbox */ .nav__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; } /* ── Logo ── */ .nav__logo { display: flex; align-items: center; text-decoration: none; /* Prevent logo from shrinking on narrow viewports */ flex-shrink: 0; } /* Full wordmark PNG: cream on transparent; always shows on dark nav bg */ .nav__logo-img { display: block; height: 34px; width: auto; } /* ── Desktop nav links ── */ .nav__links { display: flex; align-items: center; gap: 2.5rem; list-style: none; } .nav__link { font-size: var(--text-sm); font-weight: 400; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: opacity var(--ease-base); position: relative; } /* Underline reveal on hover */ .nav__link::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background-color: var(--color-beige); transform: scaleX(0); transform-origin: left; transition: transform var(--ease-base); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } /* ── Hamburger toggle (mobile) ── */ .nav__hamburger { display: none; /* hidden on desktop */ flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; /* Sits above the mobile menu overlay during open/close */ z-index: 200; } .nav__hamburger span { display: block; width: 24px; height: 1.5px; background-color: var(--color-white); transform-origin: center; transition: transform 0.35s ease, opacity 0.35s ease; } /* Three bars collapse into an × when menu is open */ .nav__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Full-screen mobile menu overlay ── */ .nav__mobile-menu { /* Hidden by default; JS toggles .is-open */ display: none; position: fixed; inset: 0; z-index: 150; background-color: var(--color-moss); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .nav__mobile-menu.is-open { display: flex; opacity: 1; pointer-events: auto; } /* Large display links inside the mobile menu */ .nav__mobile-link { font-family: var(--font-brand); font-size: 2.4rem; font-weight: 400; color: var(--color-beige); text-decoration: none; letter-spacing: 0.06em; transition: opacity var(--ease-base); } .nav__mobile-link:hover { opacity: 0.65; } /* ============================================================ 8. Hero section Full-viewport canvas. The hero animation iframe sits behind all content at position absolute; a gradient overlay bleeds the green down toward the next section. ============================================================ */ .hero { position: relative; width: 100%; height: 100vh; /* Minimum sensible height for very short viewports */ min-height: 560px; overflow: hidden; /* Solid fallback (also shows through the photo's green scrim) */ background-color: var(--color-moss); /* Canberra skyline underlay: Kingston Foreshore at dawn. The green scrim that keeps it on-brand and the text legible lives on .hero__gradient, which paints above this layer. */ background-image: url('../assets/images/cbr-buildings-hero.jpg'); background-size: cover; background-position: center 40%; background-repeat: no-repeat; } /* ── Animation iframe (or