/* ============================================================ CRAIG STEWART — GLOBAL DESIGN SYSTEM craigedwardstewart.com ============================================================ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, video { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } /* ── FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Outfit:wght@300;400;500;600&family=Space+Mono:ital@0;1&display=swap'); /* ── ROOT / GLOBAL TOKENS ── */ :root { /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Outfit', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Global neutrals */ --white: #ffffff; --off-white: #f7f6f3; --ink: #0e0e0e; --ink-mid: #3a3a3a; --ink-light: #888888; --ink-faint: #cccccc; --border: rgba(14,14,14,0.1); /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 120px; --sp-11: 160px; --sp-12: 200px; /* Radii */ --r-sm: 2px; --r-md: 4px; /* Transitions */ --ease: cubic-bezier(.16,1,.3,1); --t-fast: 0.2s; --t-mid: 0.35s; --t-slow: 0.7s; /* Section colour scheme — defaults to home (overridden per section) */ --accent: #b8860b; --accent-light: #d4a017; --accent-dim: rgba(184,134,11,0.12); --section-bg: #ffffff; --section-dark: #0e0e0e; --hero-gradient: linear-gradient(135deg, #0e0e0e 0%, #1a1a2e 100%); } /* ============================================================ SECTION COLOUR SCHEMES Applied via ============================================================ */ /* HOME — gold */ body.scheme-home { --accent: #b8860b; --accent-light: #d4a017; --accent-dim: rgba(184,134,11,0.12); --section-dark: #0e0e0e; } /* REAL ESTATE — warm gold / deep navy */ body.scheme-realestate { --accent: #c9a84c; --accent-light: #e8c86a; --accent-dim: rgba(201,168,76,0.12); --section-dark: #0d1b2a; --hero-gradient: linear-gradient(135deg, #0d1b2a 0%, #1a2f47 100%); } /* HEALTH — forest green + purple accent for CH content */ body.scheme-health { --accent: #2d6a4f; --accent-light: #40916c; --accent-dim: rgba(45,106,79,0.12); --accent-ch: #6b3fa0; /* cluster headache purple */ --accent-ch-light: #8b5fc0; --section-dark: #0d1f12; --hero-gradient: linear-gradient(135deg, #0d1f12 0%, #1a3d26 100%); } /* SPEAKING — deep violet */ body.scheme-speaking { --accent: #6b3fa0; --accent-light: #8b5fc0; --accent-dim: rgba(107,63,160,0.12); --section-dark: #120a1e; --hero-gradient: linear-gradient(135deg, #120a1e 0%, #1e1040 100%); } /* DIGITAL — electric blue */ body.scheme-digital { --accent: #1a5fa8; --accent-light: #2979cc; --accent-dim: rgba(26,95,168,0.12); --section-dark: #060d1a; --hero-gradient: linear-gradient(135deg, #060d1a 0%, #0d1f3c 100%); } /* ============================================================ BASE STYLES ============================================================ */ html { scroll-behavior: smooth; font-size: 18px; } body { background: var(--white); color: var(--ink); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; } h1 { font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 900; } h2 { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 700; } h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; } h4 { font-size: 1.2rem; font-weight: 600; font-family: var(--font-body); } h5 { font-size: 0.95rem; font-weight: 600; font-family: var(--font-body); } p { font-weight: 300; line-height: 1.75; color: var(--ink-mid); } p strong { font-weight: 600; color: var(--ink); } .display-italic { font-style: italic; font-weight: 400; color: var(--ink-mid); } .eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-5); } .eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); flex-shrink: 0; } /* ── LAYOUT ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); } .container--narrow { max-width: 800px; } .container--wide { max-width: 1440px; } .section { padding: var(--sp-10) 0; } .section--dark { background: var(--section-dark); color: var(--white); } .section--dark p { color: rgba(255,255,255,0.6); } .section--dark h2, .section--dark h3 { color: var(--white); } .section--off { background: var(--off-white); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 13px 28px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--r-sm); transition: all var(--t-fast) var(--ease); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--white); border: 1.5px solid var(--accent); } .btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); } .btn-ink { background: var(--ink); color: var(--white); border: 1.5px solid var(--ink); } .btn-ink:hover { background: var(--section-dark); border-color: var(--section-dark); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .btn-outline:hover { background: var(--ink); color: var(--white); } .btn-outline-white { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.4); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); } .btn-accent { background: var(--accent-dim); color: var(--accent); border: 1.5px solid var(--accent); } .btn-accent:hover { background: var(--accent); color: var(--white); } /* ── CARDS ── */ .card { background: var(--white); border: 1.5px solid var(--border); padding: var(--sp-7); transition: all var(--t-mid) var(--ease); position: relative; } .card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 40px var(--accent-dim); } .card--dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .card--dark:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } /* ── GRID HELPERS ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); } /* ── DIVIDER ── */ .divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent); margin: var(--sp-7) 0; } .divider--accent { background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity: 0.3; } /* ── TAGS / PILLS ── */ .pill { display: inline-block; padding: 4px 12px; border: 1px solid var(--ink-faint); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); border-radius: var(--r-sm); } .pill--accent { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } /* ── FORMS ── */ .form-group { margin-bottom: var(--sp-5); } .form-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: var(--sp-2); } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); background: var(--white); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); border-radius: var(--r-sm); transition: border-color var(--t-fast); appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-textarea { resize: vertical; min-height: 120px; } .form-input--dark, .form-textarea--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--white); } .form-input--dark::placeholder, .form-textarea--dark::placeholder { color: rgba(255,255,255,0.3); } .form-input--dark:focus, .form-textarea--dark:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .form-msg { margin-top: var(--sp-3); padding: 12px 16px; font-size: 0.85rem; border-radius: var(--r-sm); display: none; } .form-msg.success { display: block; background: rgba(45,106,79,0.1); color: #2d6a4f; border: 1px solid #2d6a4f; } .form-msg.error { display: block; background: rgba(192,57,43,0.1); color: #c0392b; border: 1px solid #c0392b; } /* ── NEWSLETTER BAR ── */ .newsletter-bar { background: var(--section-dark); color: var(--white); padding: var(--sp-8) 0; } .newsletter-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); } .newsletter-bar__copy h3 { color: var(--white); font-size: 1.6rem; margin-bottom: var(--sp-2); } .newsletter-bar__copy p { color: rgba(255,255,255,0.55); font-size: 0.9rem; } .newsletter-bar__form { display: flex; gap: var(--sp-3); flex-shrink: 0; min-width: 360px; } /* ── SCROLL REVEAL ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .reveal.in { opacity: 1; transform: none; } .rd1 { transition-delay: 0.1s; } .rd2 { transition-delay: 0.2s; } .rd3 { transition-delay: 0.3s; } .rd4 { transition-delay: 0.4s; } /* ── BREADCRUMB ── */ .breadcrumb { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); } .breadcrumb a { color: var(--ink-light); transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span { color: var(--accent); } /* ── SECTION HEADER ── */ .section-header { margin-bottom: var(--sp-8); } .section-header h2 { margin-bottom: var(--sp-3); } .section-header p { max-width: 560px; font-size: 1rem; } .section-header--center { text-align: center; } .section-header--center p { margin: 0 auto; } .section-header--center .eyebrow { justify-content: center; } /* ── HERO (shared across section pages) ── */ .page-hero { background: var(--hero-gradient); color: var(--white); padding: 160px 0 100px; position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; } .page-hero__content { position: relative; z-index: 2; } .page-hero h1 { color: var(--white); margin-bottom: var(--sp-5); } .page-hero h1 em { color: var(--accent); font-style: italic; font-weight: 400; } .page-hero p { color: rgba(255,255,255,0.65); font-size: 1.1rem; max-width: 560px; margin-bottom: var(--sp-7); } .page-hero__rule { width: 60px; height: 3px; background: var(--accent); margin: var(--sp-6) 0; } .page-hero__cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; } /* ── ACCENT LINE (bottom of hero) ── */ .accent-line { height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light), transparent); } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; padding: 20px 0; transition: all 0.4s var(--ease); } .site-nav.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 14px 0; box-shadow: 0 2px 24px rgba(0,0,0,0.06); } .site-nav--dark { /* used on dark hero pages before scrolling */ } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); } .nav-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; transition: color var(--t-fast); } .nav-logo span { color: var(--accent); } .site-nav:not(.scrolled) .nav-logo { color: var(--white); } .site-nav:not(.scrolled) .nav-logo span { color: var(--accent-light); } .nav-links { display: flex; align-items: center; gap: var(--sp-7); } .nav-links a { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid); transition: color var(--t-fast); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast); } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { transform: scaleX(1); } .site-nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.7); } .site-nav:not(.scrolled) .nav-links a:hover { color: var(--white); } .nav-cta { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 20px; border: 1.5px solid var(--accent); color: var(--accent); border-radius: var(--r-sm); transition: all var(--t-fast); } .nav-cta:hover { background: var(--accent); color: var(--white); } .site-nav:not(.scrolled) .nav-cta { border-color: rgba(255,255,255,0.4); color: var(--white); } .site-nav:not(.scrolled) .nav-cta:hover { background: rgba(255,255,255,0.15); border-color: var(--white); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: all var(--t-fast); } .site-nav:not(.scrolled) .nav-hamburger span { background: var(--white); } /* Mobile nav drawer */ .nav-drawer { display: none; position: fixed; inset: 0; background: var(--white); z-index: 499; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-6); transform: translateX(100%); transition: transform 0.4s var(--ease); } .nav-drawer.open { transform: none; } .nav-drawer a { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); } .nav-drawer a:hover { color: var(--accent); } .nav-drawer-close { position: absolute; top: 24px; right: 24px; font-size: 1.5rem; color: var(--ink); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--ink); color: var(--white); padding: var(--sp-10) 0 var(--sp-6); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-8); } .footer-brand .nav-logo { color: var(--white); display: inline-block; margin-bottom: var(--sp-4); font-size: 1.4rem; } .footer-brand p { color: rgba(255,255,255,0.45); font-size: 0.88rem; line-height: 1.65; max-width: 280px; } .footer-col h5 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-5); } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-col a { font-size: 0.88rem; color: rgba(255,255,255,0.5); transition: color var(--t-fast); } .footer-col a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--sp-6); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .footer-bottom p { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.25); } .footer-social { display: flex; gap: var(--sp-4); } .footer-social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 0.8rem; transition: all var(--t-fast); } .footer-social a:hover { border-color: var(--accent); color: var(--accent); } /* ============================================================ BIRDS CANVAS (global) ============================================================ */ #birdsCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 10; } /* ============================================================ UTILITY CLASSES ============================================================ */ .text-center { text-align: center; } .text-accent { color: var(--accent); } .text-muted { color: var(--ink-light); } .text-white { color: var(--white); } .mt-auto { margin-top: auto; } .mb-0 { margin-bottom: 0; } .gap-sm { gap: var(--sp-3); } .gap-md { gap: var(--sp-5); } .gap-lg { gap: var(--sp-7); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .hidden { display: none; } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* Tablet */ @media (max-width: 1024px) { .container { padding: 0 var(--sp-7); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .newsletter-bar__inner { flex-direction: column; align-items: flex-start; } .newsletter-bar__form { min-width: unset; width: 100%; } } /* Mobile */ @media (max-width: 768px) { :root { --sp-10: 80px; --sp-9: 60px; } .container { padding: 0 var(--sp-5); } .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } .nav-drawer { display: flex; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .page-hero { padding: 120px 0 80px; } h1 { font-size: clamp(2.6rem, 10vw, 4rem); } h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); } .newsletter-bar__form { flex-direction: column; } } /* Small mobile */ @media (max-width: 480px) { .container { padding: 0 var(--sp-4); } .btn { padding: 11px 20px; font-size: 0.62rem; } }