/* =========================================== BELLO HOMES — DESIGN SYSTEM =========================================== */ :root { /* Deep, slightly-warm navy (hierarchy + contrast with cream) */ --navy-950: #0a1520; --navy-900: #101f30; --navy-800: #172d47; --navy-700: #1e3d62; /* Warm gold — toned to sit calmly with the beige brand bg */ --gold-500: #c9a06a; --gold-400: #d9b684; --gold-300: #e8d0ab; /* Brand canvas — matches the logo's warm beige background */ --canvas: #ece1c9; /* Cream scale: light → deep (cards, alt sections, dividers) */ --cream-50: #faf5eb; /* near-white for elevated cards/forms */ --cream-100: #f4ead6; /* alt section bg (testimonials, etc) */ --cream-200: #e2d5b8; --sand-300: #c9ba9b; /* Warm ink — slightly softer than pure black, pairs with beige */ --ink-900: #1c1812; --ink-600: #4a443a; --ink-400: #7a7368; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.06); --shadow-md: 0 8px 24px rgba(10, 22, 40, 0.08); --shadow-lg: 0 20px 60px rgba(10, 22, 40, 0.12); --shadow-xl: 0 30px 80px rgba(10, 22, 40, 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink-900); background: var(--canvas); line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x: clip keeps horizontal scrollbars from appearing without breaking position: sticky inside descendant ancestors (as "hidden" would). Matters for .faq-aside on packages.html + contact.html. */ overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--navy-900); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease-out); } .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* =========================================== NAVBAR =========================================== */ .navbar { /* Always visible, anchored to viewport top, follows the user as they scroll. `position: fixed` is the right tool for this job — it doesn't take layout space (so heroes still start at y=0) and doesn't depend on a sticky parent. The translate3d/will-change incantations below force the navbar onto its own GPU layer, which is what keeps iOS Safari from glitching it during URL-bar collapse. */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem 0; transition: background-color 0.4s var(--ease-out), padding 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); background: transparent; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .navbar.scrolled { background: rgba(236, 225, 201, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); } /* Pages with a light-colored top section (e.g. estimator, 404) opt into a permanently-solid navbar by adding class="nav-solid" on . Without this the cream-on-cream text is invisible until the scroll handler kicks in. Scroll toggling of .scrolled continues to work — it just becomes visually idempotent here. */ body.nav-solid .navbar { background: rgba(236, 225, 201, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); } body.nav-solid .navbar .nav-links a { color: var(--navy-900); } body.nav-solid .navbar .nav-toggle { color: var(--navy-900); } .nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; } .logo { display: inline-flex; align-items: center; /* Fixed box keeps the navbar logo at exactly the same visual size whether we're showing the light variant (over hero) or the dark variant (over cream). Both child imgs use object-fit: contain so their differing internal aspect ratios fit identically inside this box. */ width: 106px; height: 60px; font-size: 0; line-height: 0; justify-self: start; } .logo-img { position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity 0.25s var(--ease-out); } .logo { position: relative; } /* Default state (top of page, dark hero behind) → light logo visible */ .logo-img--dark { opacity: 0; } /* Scrolled past hero, or pages with light top sections → swap to dark logo */ .navbar.scrolled .logo-img--light, body.nav-solid .navbar .logo-img--light { opacity: 0; } .navbar.scrolled .logo-img--dark, body.nav-solid .navbar .logo-img--dark { opacity: 1; } @media (max-width: 860px) { .logo { width: 78px; height: 44px; } } .nav-links { display: flex; gap: 2.25rem; list-style: none; align-items: center; margin: 0; padding: 0; justify-self: center; } .nav-links a { color: var(--cream-50); font-size: 0.95rem; font-weight: 500; position: relative; padding: 0.5rem 0; transition: color 0.3s var(--ease-out); } .navbar.scrolled .nav-links a { color: var(--navy-900); } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold-500); transition: width 0.3s var(--ease-out); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:hover { color: var(--gold-500); } /* ===== Premium CTA ===== */ .nav-cta { display: inline-flex !important; align-items: center; gap: 0.55rem; padding: 0.72rem 1.35rem 0.72rem 1.55rem !important; background: linear-gradient(135deg, #e4c78e 0%, #c9a06a 55%, #a5834f 100%) !important; color: var(--navy-950, #0a1520) !important; font: 600 0.88rem/1 var(--font-body) !important; letter-spacing: 0.025em !important; border: 1px solid rgba(255,255,255,.22); border-radius: 999px !important; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 6px 18px -8px rgba(201,160,106,.8); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out); justify-self: end; text-decoration: none; } .nav-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 55%); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; z-index: -1; } .nav-cta:hover { background: linear-gradient(135deg, #f1d9a4 0%, #d9b684 55%, #b48a50 100%) !important; transform: translateY(-1.5px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 12px 28px -6px rgba(201,160,106,.9); } .nav-cta:hover::before { opacity: 1; } .nav-cta::after { display: none !important; } .navbar.scrolled .nav-cta, body.nav-solid .navbar .nav-cta { color: var(--navy-950, #0a1520) !important; } .nav-cta-arrow { display: inline-block; transition: transform .35s var(--ease-out); flex-shrink: 0; } .nav-cta:hover .nav-cta-arrow { transform: translateX(3px); } /* =========================================== NAV TOGGLE (mobile hamburger) The button is hidden on desktop. On mobile it morphs from a three-bar hamburger into an X using only CSS — see the `.nav-toggle__bars` rules below. The bars element is injected into the button by main.js on init so we don't have to edit every page's