/* ============================================================ Maria Rojas Real Estate — global styles Design tokens mirror Tailwind config in each HTML . ============================================================ */ :root { --navy: #0A2540; --gold: #C9A96E; --gold-soft: #E8D9B4; --gold-deep: #8B6F33; --gold-light: #E0C48C; --gradient-gold-metallic: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, var(--gold-deep) 100%); --orange: #FF8A01; --ivory: #FAF7F2; --white: #FFFFFF; --charcoal: #1A1A1A; --gray: #6B7280; --font-display: 'Playfair Display', ui-serif, Georgia, serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06); --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.10); --shadow-lg: 0 16px 48px rgba(10, 37, 64, 0.14); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--charcoal); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.6rem; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-md); transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart), background 0.25s var(--ease-out-quart); cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-gold { background: var(--gold); color: var(--navy); } .btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #d4b67a; } .btn-outline-ivory { border-color: var(--ivory); color: var(--ivory); background: transparent; } .btn-outline-ivory:hover { background: var(--ivory); color: var(--navy); } .btn-navy { background: var(--navy); color: var(--ivory); } .btn-navy:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Gold underline animation for links */ .link-gold { position: relative; display: inline-block; color: var(--navy); font-weight: 600; } .link-gold::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: var(--gradient-gold-metallic); transform-origin: left; transform: scaleX(0); transition: transform 0.35s var(--ease-out-quart); } .link-gold:hover::after { transform: scaleX(1); } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Gold-ringed portrait frame */ .portrait-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin-inline: auto; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-lg); overflow: hidden; border: 2px solid var(--gold); } .portrait-frame::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--gold-soft); pointer-events: none; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; } /* Card baseline */ .card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Forms */ .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-field label { font-size: 0.85rem; font-weight: 600; color: var(--charcoal); } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 1rem; padding: 0.85rem 1rem; border: 1px solid #D9D9D9; border-radius: var(--radius-sm); background: var(--white); color: var(--charcoal); transition: border-color 0.2s, box-shadow 0.2s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.25); } .form-field textarea { min-height: 120px; resize: vertical; } /* Honeypot (never visible, always hidden) */ .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Section spacing */ .section { padding-block: clamp(4rem, 8vw, 8rem); } /* Focus visibility */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ Brand-color decorative utilities ============================================================ */ /* Decorative gold underline under section titles */ .title-underline { display: inline-block; position: relative; padding-bottom: 0.6rem; } .title-underline::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 56px; height: 2px; background: var(--gradient-gold-metallic); border-radius: 2px; } .title-underline.title-underline-left::after { left: 0; transform: none; } /* Gold top-border accent for cards */ .card-accent-top { position: relative; } .card-accent-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-gold-metallic); z-index: 1; } /* Thin gold vertical divider (decorative) */ .divider-gold-v { width: 1px; height: 32px; background: var(--gold); opacity: 0.6; } /* Thin gold horizontal rule (decorative) */ .rule-gold { border: 0; height: 2px; background: var(--gradient-gold-metallic); margin: 0; width: 96px; border-radius: 2px; } /* Stronger gold icon chip (replaces subtle gold/15 background) */ .icon-chip-gold { width: 3rem; height: 3rem; border-radius: 9999px; background: linear-gradient(135deg, var(--gold) 0%, #d4b67a 100%); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(201, 169, 110, 0.35); } /* Ivory section with gold bottom border accent (for soft section separators) */ .section-ivory-bordered { background: var(--ivory); border-bottom: 1px solid rgba(201, 169, 110, 0.18); } /* Back-to-top button */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 48px; height: 48px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1.5px solid var(--gold); color: var(--gold); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart), background 0.2s, color 0.2s, visibility 0s linear 0.3s; z-index: 40; cursor: pointer; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart), background 0.2s, color 0.2s, visibility 0s; } .back-to-top:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); } .back-to-top svg { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.01ms, visibility 0s linear 0.01ms; } .back-to-top.is-visible { transition: opacity 0.01ms, visibility 0s; } } /* ============================================================ Logo halo for dark backgrounds ============================================================ */ .logo-dark-halo { /* Double drop-shadow creates a soft ivory outline around the logo's pixels, making dark text readable on navy without a filled chip. */ filter: drop-shadow(0 0 1px rgba(250, 247, 242, 0.95)) drop-shadow(0 0 4px rgba(250, 247, 242, 0.55)) drop-shadow(0 0 10px rgba(250, 247, 242, 0.22)); } /* ============================================================ Texture: SVG noise / grain overlay ============================================================ */ .noise-overlay { position: relative; } .noise-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; z-index: 0; } /* Ensure noise-overlay direct children render above the grain */ .noise-overlay > * { position: relative; z-index: 1; } /* ============================================================ Texture: radial glow spotlights ============================================================ */ .glow-gold-tr { position: relative; } .glow-gold-tr::before { content: ''; position: absolute; top: -140px; right: -140px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(201, 169, 110, 0.18) 0%, rgba(201, 169, 110, 0) 65%); pointer-events: none; z-index: 0; } .glow-gold-bl { position: relative; } .glow-gold-bl::before { content: ''; position: absolute; bottom: -160px; left: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(201, 169, 110, 0.16) 0%, rgba(201, 169, 110, 0) 65%); pointer-events: none; z-index: 0; } .glow-ivory-center { position: relative; } .glow-ivory-center::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 480px; background: radial-gradient(ellipse, rgba(250, 247, 242, 0.08) 0%, rgba(250, 247, 242, 0) 70%); pointer-events: none; z-index: 0; } /* ============================================================ Texture: gold-soft diagonal pattern band ============================================================ */ .pattern-diagonal-gold { background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 22px, rgba(201, 169, 110, 0.06) 22px, rgba(201, 169, 110, 0.06) 23px ); } /* ============================================================ Ornamental section divider ============================================================ */ .ornament-divider { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--gold); font-size: 0.8rem; letter-spacing: 0.3em; padding-block: 2.5rem; } .ornament-divider::before, .ornament-divider::after { content: ''; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 20%, var(--gold-light) 50%, var(--gold-deep) 80%, transparent 100%); } .ornament-divider .ornament-mark { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.75; } /* Compact version for tighter spots */ .ornament-divider-sm { padding-block: 1.5rem; } .ornament-divider-sm::before, .ornament-divider-sm::after { flex-basis: 60px; } /* Logo with a thin ornamental gold frame (replaces .logo-dark-halo) */ .logo-frame-gold { border: 1px solid var(--gold); border-radius: 6px; background: var(--white); padding: 4px 8px; transition: border-color 0.25s, box-shadow 0.25s; } .logo-frame-gold:hover { border-color: var(--gold-light, #E0C48C); box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.12); } /* ============================================================ Parallax for the "Why clients choose Maria" section. Uses real layer divs (not pseudo-elements) to avoid collisions with other classes on the same section (noise-overlay, glow). ============================================================ */ .why-maria-parallax { position: relative; isolation: isolate; } .why-maria-parallax .parallax-image-layer { position: absolute; inset: 0; background-image: url('/assets/images/parallax/why-maria.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; z-index: 0; pointer-events: none; } .why-maria-parallax .parallax-navy-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, 0.72) 0%, rgba(10, 37, 64, 0.85) 100%); z-index: 1; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .why-maria-parallax .parallax-image-layer { background-attachment: scroll; } } /* ============================================================ Logo radial-fade backdrop Soft ivory glow behind the logo that fades to transparent at the edges — more elegant than a framed chip on navy surfaces. ============================================================ */ .logo-fade { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; background: radial-gradient( ellipse at center, rgba(250, 247, 242, 0.95) 0%, rgba(250, 247, 242, 0.85) 35%, rgba(250, 247, 242, 0.45) 70%, rgba(250, 247, 242, 0.1) 90%, rgba(250, 247, 242, 0) 100% ); transition: background 0.35s var(--ease-out-quart); } .logo-fade:hover { background: radial-gradient( ellipse at center, rgba(250, 247, 242, 1) 0%, rgba(250, 247, 242, 0.92) 40%, rgba(250, 247, 242, 0.55) 75%, rgba(250, 247, 242, 0.15) 90%, rgba(250, 247, 242, 0) 100% ); } /* Footer logo variant — larger, more breathing room */ .logo-fade--lg { padding: 16px 40px; } /* ============================================================ Subtle drop-shadow for the logo on dark backgrounds. Intentionally minimal — a barely-perceptible ivory outline that makes the dark wordmark legible on navy without any visible backdrop or glow. ============================================================ */ .logo-subtle-shadow { filter: drop-shadow(0 0 1.5px rgba(250, 247, 242, 0.55)); }