/* ============================================================ Mazier Realty — Shared Brand Tokens Link this FIRST in any page's . All other stylesheets should reference these variables. © Ron Mazier / Mazier Realty, LLC ============================================================ */ :root { /* ── Brand Colors ─────────────────────────────────────────── */ --blue: #004080; /* primary navy */ --navy-dark: #002147; /* nav/header deep navy */ --gold: #D4AF37; /* accent gold */ --orange: #F15A29; /* CTA / call-to-action */ --coral: #F28C6A; /* soft secondary accent */ --charcoal: #2E2E2E; /* body text */ --white: #FFFFFF; /* ── Neutral Scale ────────────────────────────────────────── */ --bg: #f7f7f5; --surface: #ffffff; --border: #e0e0e0; --muted: #64748b; --light-gray: #f0f0f0; /* ── Legacy Aliases (keep old pages working) ─────────────── */ --primary-color: #f5f5f5; --secondary-color: #333333; --accent-color: var(--gold); --nav-color: var(--navy-dark); --nav-text-color: var(--white); --text-color: var(--charcoal); --hover-border-color: rgba(0,0,0,1); --hover-shadow-color: rgba(0,0,0,0.5); --border-color: rgba(0,0,0,0.25); --input-bg-color: #ffefef; --values-color: var(--blue); --header-bgcolor: var(--blue); --headerbg: none; --bg-color: var(--surface); /* ── Typography ───────────────────────────────────────────── */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-size-base: 16px; --line-height: 1.6; /* ── Spacing ──────────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; /* ── Layout ───────────────────────────────────────────────── */ --max-width: 1100px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 6px 20px rgba(0,0,0,0.12); } /* ── Global resets & base ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--charcoal); background: var(--bg); } img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Utility classes ──────────────────────────────────────── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; } .btn-primary { background: var(--orange); color: var(--white); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(241,90,41,.3); text-decoration: none; } .btn-secondary { background: var(--blue); color: var(--white); } .btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,64,128,.25); text-decoration: none; } .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); } .btn-ghost:hover { background: rgba(255,255,255,.12); text-decoration: none; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm); } /* ── Site nav (used by header.php) ───────────────────────── */ .site-header { background: var(--navy-dark); border-bottom: 4px solid var(--gold); position: sticky; top: 0; z-index: 100; } .site-header .inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); height: 62px; } .site-header .brand { font-weight: 800; font-size: 17px; color: var(--white); text-decoration: none; white-space: nowrap; letter-spacing: .02em; } .site-header .brand span { color: var(--gold); } .site-header nav { display: flex; gap: 4px; margin-left: auto; } .site-header nav a { color: rgba(255,255,255,.85); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; transition: background .15s; text-decoration: none; } .site-header nav a:hover { background: rgba(255,255,255,.12); color: var(--white); text-decoration: none; } .site-header nav a.active { color: var(--gold); } .site-header .nav-cta { background: var(--orange); color: var(--white) !important; border-radius: 999px; padding: 6px 14px !important; } .site-header .nav-cta:hover { background: #d44f22; } /* Mobile nav */ .nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 22px; cursor: pointer; margin-left: auto; } @media (max-width: 700px) { .site-header nav { display: none; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0; background: var(--navy-dark); padding: 12px 16px 16px; border-bottom: 3px solid var(--gold); gap: 2px; } .site-header nav.open { display: flex; } .nav-toggle { display: block; } .site-header .inner { flex-wrap: wrap; height: auto; padding: 12px var(--space-lg); } } /* ── Site footer (used by footer.php) ────────────────────── */ .site-footer { background: var(--navy-dark); border-top: 4px solid var(--gold); color: rgba(255,255,255,.75); font-size: 13px; padding: var(--space-xl) var(--space-lg) var(--space-lg); margin-top: var(--space-xl); } .site-footer .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); } .site-footer h4 { color: var(--gold); margin: 0 0 var(--space-sm); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } .site-footer a { color: rgba(255,255,255,.7); } .site-footer a:hover { color: var(--white); } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .site-footer .footer-bottom { max-width: var(--max-width); margin: var(--space-lg) auto 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--space-md); font-size: 12px; color: rgba(255,255,255,.5); } @media (max-width: 700px) { .site-footer .footer-inner { grid-template-columns: 1fr; gap: var(--space-lg); } }