/* * ╔══════════════════════════════════════════════════════════════╗ * ║ SafePetal — config/brand.css ║ * ║ THE SINGLE FILE TO EDIT FOR ALL VISUAL CHANGES ║ * ║ ║ * ║ To change any colour, font, or size across the entire ║ * ║ website: edit the value here and save. Every page updates ║ * ║ instantly. Never edit colours in the HTML files. ║ * ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ─── COLOURS ───────────────────────────────────────────────── Earthen palette — Court Green · Dusty Sage · Terracotta · Cocoa. Variable names are preserved so all HTML pages update automatically. Semantic roles noted beside each value. */ /* Core brand — earthy green family */ --color-forest: #4A5F40; /* Court Green — nav, hero, dark section backgrounds */ --color-canopy: #3A5232; /* Deep Court Green — hover, secondary dark elements */ --color-leaf: #7A9468; /* Mid sage — eyebrows, icons, dot accents */ --color-sprout: #ABAE9B; /* Dusty Sage — text on dark backgrounds */ /* Extended palette — Terracotta Blush as brand accent */ --color-petal: #CB7254; /* Terracotta Blush — primary accent, links, eyebrows */ --color-petal-dk: #A55C3E; /* Deep terracotta — heavy fills, hover states */ --color-petal-lt: #F0D0BC; /* Light terracotta — badge fills, tag backgrounds */ --color-petal-mist: #FAF2EC; /* Near-white terracotta — soft section backgrounds */ --color-sage-dk: #3A5232; /* Deep Court Green — heavy sage accents */ --color-sage-lt: #ABAE9B; /* Dusty Sage — text on dark, partner section */ --color-sage-mist: #EDEEEA; /* Near-white sage — subtle section tints */ --color-lavender: #8A8070; /* Warm mid-brown — tertiary accents, value dots */ --color-lavender-lt:#EDE8E0; /* Light warm — badge backgrounds */ /* Danger — UNCHANGED (safety anchor of the brand) */ --color-danger: #E24B4A; /* RED — emergency, warnings, fatal badges ONLY */ --color-danger-dk: #A32D2D; /* Dark red — warning text on light backgrounds */ /* Neutral surfaces */ --color-parch: #F8F4EE; /* Page background — warm cream */ --color-parch-dk: #EEE8DF; /* Slightly darker — cards, insets */ --color-char: #1C1410; /* Body text — warm near-black */ --color-muted: #573627; /* Cocoa Dust — secondary text */ --color-light: #8A7060; /* Warm medium brown — captions, labels */ --color-white: #FFFFFF; /* ─── TYPOGRAPHY ────────────────────────────────────────────── To change a font: edit the font-family value here. Google Fonts are loaded in each HTML page's . */ --font-display: 'Fraunces', Georgia, serif; /* Headlines, brand name */ --font-body: 'DM Sans', system-ui, sans-serif; /* All body text */ --font-mono: 'DM Mono', 'Courier New', monospace; /* Labels, codes, dates */ /* ─── FONT SIZES ────────────────────────────────────────────── To scale the whole site: adjust these values. All sizes are used consistently across every page. */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-hero: clamp(44px, 7vw, 80px); --text-name: clamp(72px, 12vw, 120px); /* Used on Datil page only */ /* ─── LINE HEIGHT ───────────────────────────────────────────── */ --leading-tight: 1.05; --leading-snug: 1.3; --leading-base: 1.7; --leading-loose: 1.9; /* ─── SPACING ───────────────────────────────────────────────── Used for padding and margin throughout the site. */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; /* ─── BORDERS & RADIUS ──────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --border: 1px solid rgba(74, 95, 64, 0.12); /* ─── SHADOWS ────────────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(74, 95, 64, 0.06); --shadow-md: 0 4px 20px rgba(74, 95, 64, 0.08); --shadow-lg: 0 8px 40px rgba(74, 95, 64, 0.12); /* ─── LOGO PATHS ────────────────────────────────────────────── To swap the logo: replace the file in assets/images/ then update the path below. All pages update instantly. */ --logo-light: url('../assets/images/logo.svg'); /* For light backgrounds */ --logo-white: url('../assets/images/logo-white.svg'); /* For dark backgrounds */ /* ─── TRANSITIONS ───────────────────────────────────────────── */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.4s ease; /* ─── NAV HEIGHT ────────────────────────────────────────────── Changing this updates the sticky nav height across all pages. */ --nav-height: 60px; /* ─── MAX CONTENT WIDTH ─────────────────────────────────────── */ --max-width: 1100px; --prose-width: 720px; } /* ─── DARK MODE ───────────────────────────────────────────────── These values override the ones above when the user's device is set to dark mode. Edit here to control the dark appearance. The rose/red brand colours stay the same in dark mode. */ @media (prefers-color-scheme: dark) { :root { --color-parch: #120E0A; --color-parch-dk: #1C1610; --color-char: #F0EAE0; --color-muted: #C4B4A0; --color-light: #8A7868; --border: 1px solid rgba(74, 95, 64, 0.18); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45); } } /* ═══════════════════════════════════════════════════════════════ GLOBAL RESET & BASE STYLES These apply to every page. Do not edit unless you know CSS. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--color-parch); color: var(--color-char); line-height: var(--leading-base); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: var(--font-body); cursor: pointer; border: none; background: none; } input, textarea, select { font-family: var(--font-body); } /* ─── SHARED UTILITY CLASSES ─────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Fade-up scroll animation — applied by content-injector.js */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ─── SHARED BUTTON STYLES ───────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-danger); color: var(--color-white); padding: 14px 28px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: opacity var(--transition-fast), transform var(--transition-fast); border: none; cursor: pointer; white-space: nowrap; } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(203, 114, 84, 0.08); color: var(--color-petal); padding: 14px 28px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none; border: 1px solid rgba(203, 114, 84, 0.22); transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); white-space: nowrap; } .btn-secondary:hover { background: rgba(203, 114, 84, 0.14); border-color: rgba(203, 114, 84, 0.4); transform: translateY(-1px); } /* btn-secondary on dark section backgrounds */ .hero .btn-secondary { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); } .hero .btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; } .btn-outline { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-white); color: var(--color-canopy); padding: 12px 24px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none; border: var(--border); transition: border-color var(--transition-fast), transform var(--transition-fast); white-space: nowrap; } .btn-outline:hover { border-color: var(--color-petal); transform: translateY(-1px); } @media (prefers-color-scheme: dark) { .btn-outline { background: #1C1A16; color: var(--color-petal-lt); border-color: rgba(203, 114, 84, 0.2); } } /* ─── SHARED NAV ─────────────────────────────────────────────── */ #main-nav { position: sticky; top: 0; z-index: 200; background: rgba(248, 244, 238, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); height: var(--nav-height); display: flex; align-items: center; padding: 0 var(--space-lg); justify-content: space-between; border-bottom: 1px solid rgba(74, 95, 64, 0.12); } .nav-logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-char); text-decoration: none; letter-spacing: -0.02em; flex-shrink: 0; } .nav-logo .danger { color: var(--color-danger); } .nav-logo .petal { color: var(--color-petal); } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); transition: color var(--transition-fast); } .nav-links a:hover { color: var(--color-petal); } .nav-cta { background: var(--color-danger) !important; color: var(--color-white) !important; border-radius: var(--radius-sm) !important; padding: 7px 16px !important; font-weight: 500 !important; transition: opacity var(--transition-fast) !important; } .nav-cta:hover { opacity: 0.85 !important; } .hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 4px; } .hamburger span { width: 22px; height: 2px; background: var(--color-char); display: block; transition: all var(--transition-base); border-radius: 2px; } @media (prefers-color-scheme: dark) { #main-nav { background: rgba(18, 14, 10, 0.94); border-bottom-color: rgba(74, 95, 64, 0.2); } .hamburger span { background: var(--color-white); } .nav-links.open { background: var(--color-parch); } } @media (max-width: 768px) { #main-nav { padding: 0 var(--space-md); } .nav-links { display: none; } .hamburger { display: flex; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-parch); padding: var(--space-sm) var(--space-md) var(--space-md); gap: 2px; border-bottom: 1px solid rgba(74, 95, 64, 0.12); } } /* ─── SHARED FOOTER ──────────────────────────────────────────── */ #main-footer { background: var(--color-char); } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 60px var(--space-lg) 40px; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); } .footer-brand { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-white); letter-spacing: -0.02em; margin-bottom: var(--space-xs); } .footer-brand .danger { color: var(--color-danger); } .footer-brand .petal { color: var(--color-petal); } .footer-desc { font-size: var(--text-sm); color: rgba(255,255,255,0.4); line-height: var(--leading-base); max-width: 280px; margin-bottom: var(--space-sm); } .footer-social { display: flex; gap: var(--space-xs); } .social-btn { width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: rgba(255,255,255,0.5); transition: background var(--transition-fast), color var(--transition-fast); } .social-btn:hover { background: rgba(203, 114, 84, 0.2); color: var(--color-petal-lt); } .footer-col-title { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: var(--space-sm); } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--transition-fast); } .footer-links a:hover { color: var(--color-petal-lt); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } .footer-legal { font-size: 12px; color: rgba(255,255,255,0.22); } .footer-legal a { color: rgba(255,255,255,0.32); } @media (max-width: 768px) { .footer-inner { padding: 48px var(--space-md) 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-md); } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ─── SHARED SECTION STRUCTURE ───────────────────────────────── */ .section { padding: var(--space-xl) var(--space-lg); } .section-inner { max-width: var(--max-width); margin: 0 auto; } .section-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-petal); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .section-eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--color-petal); flex-shrink: 0; } .section-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 700; color: var(--color-char); line-height: var(--leading-tight); letter-spacing: -0.02em; margin-bottom: 16px; } .section-body { font-size: 16px; font-weight: 300; color: var(--color-muted); line-height: var(--leading-loose); max-width: 600px; } @media (prefers-color-scheme: dark) { .section-title { color: #F0ECF0; } .section-body { color: var(--color-muted); } } @media (max-width: 768px) { .section { padding: 64px var(--space-md); } } /* ─── SHARED CARD ────────────────────────────────────────────── */ .card { background: var(--color-white); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { border-color: rgba(74, 95, 64, 0.22); box-shadow: var(--shadow-sm); } .card-dark { background: var(--color-forest); border-color: transparent; } @media (prefers-color-scheme: dark) { .card { background: #1C1A16; border-color: rgba(74, 95, 64, 0.14); } .card:hover { border-color: rgba(74, 95, 64, 0.28); } .card-dark { background: #141210; border-color: rgba(74, 95, 64, 0.2); } } /* ─── BADGE / TAG ────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 10px; } .badge-danger { background: #FCEBEB; color: var(--color-danger-dk); } .badge-green { background: #E8EEE4; color: #3A5232; } .badge-rose { background: var(--color-petal-lt); color: var(--color-petal-dk); } .badge-lavender { background: var(--color-lavender-lt); color: #573627; } .badge-blue { background: #E6F1FB; color: #0C447C; } .badge-gray { background: #EDEEEA; color: #444441; } .badge-dark { background: var(--color-forest); color: var(--color-sprout); } @media (prefers-color-scheme: dark) { .badge-danger { background: #2A0A0A; color: #F09595; } .badge-green { background: #0E1410; color: var(--color-sprout); } .badge-rose { background: #2A1610; color: var(--color-petal-lt); } .badge-lavender { background: #1C1610; color: #C4B4A0; } .badge-blue { background: #0A1A2A; color: #85B7EB; } .badge-gray { background: #282620; color: var(--color-muted); } } /* ─── KEYFRAME ANIMATIONS ────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }