:root { /* Primary brand */ --navivate-navy: #1A2B5C; --navivate-blue: #3B5BDB; --navivate-light-blue: #5B8DEF; /* Gradients (from logo) */ --navivate-gradient: linear-gradient(135deg, #1A2B5C 0%, #3B5BDB 50%, #5B8DEF 100%); --navivate-gradient-hero: linear-gradient(135deg, #0F1B3D 0%, #1A2B5C 50%, #3B5BDB 100%); /* Neutrals */ --white: #FFFFFF; --off-white: #F8F9FC; --light-gray: #E2E8F0; --slate: #64748B; --charcoal: #2D3748; --near-black: #0F172A; /* Status colors (match occupancy API thresholds — DO NOT change on subdomains) */ --status-open: #10B981; --status-filling: #F59E0B; --status-full: #EF4444; /* Typography */ --font-brand: 'Montserrat', 'Poppins', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; /* Default partner accent falls back to Navivate blue (for navivate.com root) */ --partner-accent: var(--navivate-blue); --partner-accent-dark: var(--navivate-navy); } /* Partner accent overrides by subdomain — applied via */ body.partner-alabama { --partner-accent: #9E1B32; /* Crimson */ --partner-accent-dark: #6B0F22; } body.partner-smu { --partner-accent: #0033A0; /* SMU Blue */ --partner-accent-dark: #002266; } body.partner-portsmouth { --partner-accent: #2C5F7C; /* Portsmouth municipal blue */ --partner-accent-dark: #1A3E52; } /* Typography defaults */ body { font-family: var(--font-body); color: var(--charcoal); } h1, h2, h3, h4, .brand-text { font-family: var(--font-brand); color: var(--navivate-navy); font-weight: 600; } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.02em; } .tagline { font-family: var(--font-brand); letter-spacing: 0.15em; text-transform: uppercase; color: var(--navivate-light-blue); font-size: 0.875rem; } /* Hero section */ .hero { background: var(--navivate-gradient-hero); color: var(--white); padding: 6rem 2rem; } .hero h1, .hero h2 { color: var(--white); } /* Buttons — primary uses partner accent on subdomains, Navivate navy on root */ .btn-primary { background: var(--partner-accent); color: var(--white); padding: 0.875rem 2rem; border-radius: 8px; font-family: var(--font-brand); font-weight: 600; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s; } .btn-primary:hover { background: var(--partner-accent-dark); } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background: var(--white); color: var(--navivate-navy); border: 2px solid var(--navivate-navy); /* same padding/radius/font as primary */ padding: 0.75rem 2rem; border-radius: 8px; font-family: var(--font-brand); font-weight: 600; } .btn-secondary:hover { background: var(--navivate-navy); color: var(--white); } .btn-gradient { background: var(--navivate-gradient); color: var(--white); padding: 0.875rem 2rem; border-radius: 8px; font-family: var(--font-brand); font-weight: 600; border: none; cursor: pointer; } /* Navigation bar */ .navbar { background: var(--white); border-bottom: 1px solid var(--light-gray); padding: 1rem 2rem; } .navbar a { color: var(--navivate-navy); font-family: var(--font-brand); font-weight: 500; text-decoration: none; } .navbar a:hover, .navbar a.active { color: var(--partner-accent); } /* Cards and containers */ .card { background: var(--white); border: 1px solid var(--light-gray); border-radius: 12px; padding: 1.5rem; } /* Status pills (keep semantic colors regardless of partner) */ .status-open { background: var(--status-open); color: var(--white); } .status-filling { background: var(--status-filling); color: var(--white); } .status-full { background: var(--status-full); color: var(--white); }