:root { --color-bg: #F4F4F1; --color-primary: #B68150; --color-primary-ink: #23201C; --color-border: #C9BEA5; --color-accent: #6D816A; --color-ink: #23201C; --color-ink-soft: #5A5349; /* Swap to Canela Light / Neue Haas Unica later by changing just these two lines (self-hosted via @font-face once licensed; Google Fonts link in index.html can then be removed). */ --font-heading: 'Fraunces', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2 { font-family: var(--font-heading); font-variation-settings: "SOFT" 0, "WONK" 1; margin: 0; } .wrap-wide { max-width: 1312px; margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { padding: 16px 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; } .wordmark { display: flex; flex-direction: column; gap: 3px; } .wordmark-name { font-family: var(--font-heading); font-variation-settings: "SOFT" 0, "WONK" 1; font-size: 23px; letter-spacing: 3.68px; color: var(--color-ink); margin: 0; white-space: nowrap; } .wordmark-tag { font-size: 9px; font-weight: 500; letter-spacing: 2.88px; color: var(--color-primary); margin: 0; white-space: nowrap; } .header-cta { display: none; align-items: center; padding: 10px 18px; border: 1.2px solid var(--color-accent); border-radius: 24px; font-size: 13px; font-weight: 500; color: var(--color-accent); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .header-cta:hover { background-color: rgba(109, 129, 106, 0.08); } .hairline { height: 1px; width: 100%; background: rgba(201, 190, 165, 0.5); } /* Hero */ .hero { display: flex; flex-direction: column; gap: 32px; padding: 40px 24px 8px; } .hero-message { display: flex; flex-direction: column; gap: 18px; } .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 2.42px; color: var(--color-primary); margin: 0; } h1 { font-weight: 300; font-size: 35px; line-height: 43px; color: var(--color-ink); } .subhead { font-size: 15px; line-height: 23px; color: var(--color-ink-soft); margin: 0; } .offer-line { display: flex; gap: 14px; align-items: stretch; } .offer-line .accent-bar { flex-shrink: 0; width: 3px; background: var(--color-primary); } .offer-line p { margin: 0; font-size: 14px; line-height: 21px; color: var(--color-ink-soft); } .trust-line { font-size: 11px; line-height: 17px; letter-spacing: 0.22px; color: var(--color-ink-soft); margin: 0; } .trust-line--desktop { display: none; } /* Form card column */ .form-card-col { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 36px; } .form-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 32px 0 rgba(33, 31, 26, 0.1); padding: 28px 22px; } .form-card form { display: flex; flex-direction: column; gap: 16px; } .form-card h2 { font-size: 26px; line-height: 32px; font-weight: 400; color: var(--color-ink); } .form-card-subhead { font-size: 14px; line-height: 21px; color: var(--color-ink-soft); margin: 0; } .prefer-to-talk { font-size: 13px; color: var(--color-ink-soft); text-align: center; margin: 16px 0 0; } .success-state { display: flex; flex-direction: column; gap: 16px; } .success-state p { margin: 0; font-size: 14px; line-height: 21px; color: var(--color-ink-soft); } /* Fields */ .field { display: flex; flex-direction: column; gap: 6px; } label { font-size: 13px; font-weight: 500; letter-spacing: 0.13px; color: var(--color-ink); } input[type="text"], input[type="tel"], input[type="email"], select { width: 100%; height: 48px; padding: 0 14px; font-size: 15px; font-family: var(--font-body); color: var(--color-ink); background: #fff; border: 1px solid var(--color-border); border-radius: 8px; appearance: none; -webkit-appearance: none; } input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder { color: var(--color-ink-soft); opacity: 1; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235A5349'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%235A5349' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } input:focus, select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* Consent */ .consent { flex-direction: row; align-items: flex-start; gap: 10px; } input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0.15rem 0 0; flex-shrink: 0; border: 1.2px solid var(--color-border); border-radius: 4px; background: #fff; cursor: pointer; } input[type="checkbox"]:checked { background-color: var(--color-primary); border-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='%2323201C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .consent label { font-size: 13px; font-weight: 400; line-height: 19px; letter-spacing: normal; } .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Form message */ .form-message { padding: 12px 14px; border-radius: 6px; font-size: 14px; background: rgba(109, 129, 106, 0.14); color: #3d4a3b; } .form-message.is-error { background: #FBEAE5; color: #8B3A1A; } /* Buttons */ button[type="submit"] { width: 100%; height: 52px; font-size: 16px; font-weight: 600; font-family: var(--font-body); color: var(--color-primary-ink); background: var(--color-primary); border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.15s ease; } button[type="submit"]:hover { opacity: 0.92; } button[type="submit"]:disabled { opacity: 0.7; cursor: default; } .btn-whatsapp-outline { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 1.5px solid var(--color-accent); border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--color-accent); text-decoration: none; transition: background-color 0.15s ease; box-sizing: border-box; } .btn-whatsapp-outline:hover { background-color: rgba(109, 129, 106, 0.08); } /* Photo band */ .photo-band { --photo-url: none; position: relative; width: 100%; display: flex; justify-content: center; padding: 40px 24px 30px; background-color: rgba(201, 190, 165, 0.28); background-image: var(--photo-url); background-size: cover; background-position: center; } .photo-band.has-photo .photo-band-fallback { display: none; } .arches { display: flex; align-items: flex-end; gap: 16px; } .arch { width: 78px; border-radius: 39px 39px 0 0; } .arch--1 { height: 129px; background: rgba(182, 129, 80, 0.32); } .arch--2 { height: 105px; background: rgba(109, 129, 106, 0.3); } .arch--3 { height: 150px; background: rgba(182, 129, 80, 0.5); } .arch--4 { height: 117px; background: rgba(201, 190, 165, 0.95); } /* Footer */ .site-footer { padding: 26px 24px 34px; text-align: center; font-size: 12px; line-height: 18px; color: var(--color-ink-soft); } .site-footer p { margin: 0 0 6px; } .site-footer p:last-child { margin-bottom: 0; } /* Desktop (Figma "Desktop 1440" frame governs from here up) */ @media (min-width: 768px) { .wrap-wide { padding: 0 64px; } .site-header { padding: 22px 0; } .header-cta { display: inline-flex; } .hero { flex-direction: row; align-items: flex-start; gap: 72px; padding: 76px 64px 84px; } .hero-message { flex: 1 1 640px; min-width: 0; max-width: 640px; } .eyebrow { font-size: 12px; letter-spacing: 2.88px; } h1 { font-size: 58px; line-height: 68px; } .subhead { font-size: 17px; line-height: 27px; } .offer-line p { font-size: 15px; line-height: 24px; } .trust-line--desktop { display: block; } .trust-line--mobile { display: none; } .form-card-col { flex: 0 1 480px; min-width: 340px; padding: 0; } .form-card { padding: 36px; } .form-card form { gap: 18px; } .prefer-to-talk { margin-top: 18px; } .success-state { gap: 18px; } .photo-band { padding: 56px 64px 40px; gap: 22px; } .arches { gap: 30px; } .arch { width: 150px; border-radius: 75px 75px 0 0; } .arch--1 { height: 215px; } .arch--2 { height: 175px; } .arch--3 { height: 250px; } .arch--4 { height: 195px; } .site-footer { padding: 26px 64px 34px; } }