/* Alder Vacation Rentals — brand tokens & shared components. Palette + typography from the July 2026 brand guide (Kaisei Decol headline, Inter as the working substitute for Proxima Nova + TT Chocolates). Load in each page's AFTER the Google Fonts tag. */ :root { /* Brand palette */ --brand-navy: #335C67; /* primary */ --brand-navy-dark: #274853; /* hover / pressed */ --brand-green: #72A276; /* secondary accent */ --brand-ice: #DBE4EE; /* soft background / callouts */ --brand-sand: #D7CDCC; /* warm accents / dividers */ --brand-ink: #183136; /* body text */ --brand-white: #FCFCFC; /* main background */ /* Semantic aliases used throughout the site's CSS */ --bg: var(--brand-white); --ink: var(--brand-ink); --muted: #6B7A80; /* desaturated ink for secondary text */ --line: #E4EBEE; /* very light navy-tinted border */ --accent: var(--brand-navy); --accent-soft: var(--brand-ice); --accent-hover: var(--brand-navy-dark); --secondary: var(--brand-green); --highlight: #FFF3A8; /* yellow for [YOUR INPUT] editor markers */ /* Signal colors (audit / interview checklist) */ --signal-green: #4F7F52; --signal-yellow: #B78314; --signal-red: #A84040; --signal-red-soft: #F5E3E3; --signal-green-soft: #E3EDE4; } /* Base body defaults — pages that opt in inherit these. */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Kaisei Decol', Georgia, serif; font-weight: 500; letter-spacing: -0.005em; line-height: 1.15; color: var(--ink); } /* ---------- Sticky top nav ---------- */ nav.top { position: sticky; top: 0; z-index: 50; background: rgba(252, 252, 252, 0.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } nav.top .row { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 16px 24px; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand img { display: block; height: 40px; width: auto; } .brand .brand-text { /* Accessible fallback — hidden visually but present for screen readers */ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .nav-links { display: flex; gap: 32px; font-size: 14px; } .nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; } .nav-links a:hover { color: var(--ink); } /* Buttons */ .cta-btn { display: inline-block; padding: 11px 20px; background: var(--accent); color: #fff !important; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background 0.15s; text-decoration: none; border: 1px solid var(--accent); } .cta-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .cta-btn.outline { background: transparent; color: var(--accent) !important; border: 1px solid var(--accent); } .cta-btn.outline:hover { background: var(--accent-soft); } /* ---------- Footer ---------- */ footer { background: var(--brand-ink); color: rgba(252, 252, 252, 0.7); padding: 48px 0; font-size: 14px; } footer .row { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } footer .brand img { height: 32px; } footer a { color: rgba(252, 252, 252, 0.9); } /* Mobile nav */ @media (max-width: 720px) { .nav-links { display: none; } .brand img { height: 32px; } }