/* ============================================================================ * /landing-pages/town.css * * Shared styles for /roof-replacement// and /siding-replacement// * Google Ads landing pages. Layers on top of /free-roof-estimate/v2.css so * pages inherit the v2 design system (DM Serif Display + Inter, navy/cream/ * terra-cotta tokens, header/footer styling, hero pattern A, section pattern * B). This file owns the form, sign-cards grid, process steps, materials/GAF * section, FAQ accordion, and the local-trust strip. * * Scoped to body.town-v2. Pages will use both classes: * * ============================================================================ */ body.town-v2 { background: var(--rv2-cream); } /* ── Hero — form sits next to the headline above the fold ───────────────── */ body.town-v2 .rv2-hero { min-height: auto; padding-top: clamp(110px, 14vh, 170px); padding-bottom: clamp(56px, 8vw, 90px); align-items: flex-start; } body.town-v2 .town-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; width: 100%; } body.town-v2 .town-hero-copy { max-width: 560px; } body.town-v2 .town-hero-copy .rv2-hero-headline { font-size: clamp(38px, 5vw, 64px); margin-bottom: 16px; line-height: 1.04; } body.town-v2 .town-hero-copy .rv2-hero-sub { font-size: clamp(16px, 1.3vw, 18px); margin-bottom: 22px; max-width: 540px; } body.town-v2 .town-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } body.town-v2 .town-trust-row { display: flex; flex-wrap: wrap; gap: 16px 24px; list-style: none; padding: 0; margin: 16px 0 0; font-size: 13px; color: rgba(255,255,255,0.86) !important; } body.town-v2 .town-trust-row li { display: flex; align-items: center; gap: 6px; white-space: nowrap; } body.town-v2 .town-trust-row li::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background-color: var(--rv2-orange); border-radius: 999px; -webkit-mask: url("data:image/svg+xml;utf8,") center / 10px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 10px no-repeat; } /* ── The estimate form card ─────────────────────────────────────────────── */ body.town-v2 .town-form-card { background: var(--rv2-cream); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 30px 60px -20px rgba(8, 17, 31, 0.45), 0 8px 20px -8px rgba(8, 17, 31, 0.30); color: var(--rv2-ink); } body.town-v2 .town-form-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--rv2-accent) !important; margin-bottom: 8px; } body.town-v2 .town-form-title { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--rv2-ink) !important; margin: 0 0 6px; } body.town-v2 .town-form-sub { font-size: 14px; line-height: 1.5; color: var(--rv2-ink-soft) !important; margin: 0 0 18px; } body.town-v2 .town-field { display: block; margin-bottom: 12px; } body.town-v2 .town-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.town-v2 .town-field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } body.town-v2 .town-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--rv2-ink) !important; margin: 0 0 6px; } body.town-v2 .town-input, body.town-v2 .town-select, body.town-v2 .town-textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; border: 1.5px solid rgba(10, 23, 51, 0.14); border-radius: 10px; background: #fff; color: var(--rv2-ink) !important; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } body.town-v2 .town-textarea { resize: vertical; min-height: 80px; line-height: 1.45; } body.town-v2 .town-input:focus, body.town-v2 .town-select:focus, body.town-v2 .town-textarea:focus { outline: none; border-color: var(--rv2-accent); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15); } body.town-v2 .town-select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } body.town-v2 .town-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--rv2-ink-soft) !important; margin: 4px 0 14px; } body.town-v2 .town-consent input[type="checkbox"] { margin: 3px 0 0; flex-shrink: 0; accent-color: var(--rv2-accent); } body.town-v2 .town-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; border: none; border-radius: 999px; background: linear-gradient(90deg, var(--rv2-accent) 0%, var(--rv2-orange) 100%); color: #fff !important; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; box-shadow: 0 10px 24px -10px rgba(194, 65, 12, 0.55); } body.town-v2 .town-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(194, 65, 12, 0.65); } body.town-v2 .town-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } body.town-v2 .town-form-trust { margin-top: 14px; padding: 12px 14px; background: var(--rv2-warm); border: 1px solid rgba(194, 65, 12, 0.20); border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--rv2-ink) !important; } body.town-v2 .town-form-error { display: none; margin-top: 10px; padding: 10px 12px; background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.30); border-radius: 10px; font-size: 13px; color: #B91C1C !important; } body.town-v2 .town-form-error.is-shown { display: block; } /* Success state */ body.town-v2 .town-success { display: none; text-align: center; padding: 24px 8px 12px; } body.town-v2 .town-success.is-shown { display: block; } body.town-v2 .town-success-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--rv2-accent), var(--rv2-orange)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #fff !important; box-shadow: 0 12px 24px -10px rgba(194, 65, 12, 0.50); } body.town-v2 .town-success-icon svg { width: 32px; height: 32px; } body.town-v2 .town-success h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; margin: 0 0 8px; color: var(--rv2-ink) !important; } body.town-v2 .town-success p { font-size: 15px; line-height: 1.55; color: var(--rv2-ink-soft) !important; margin: 0 auto 6px; max-width: 380px; } body.town-v2 .town-success-ref { display: inline-block; margin-top: 12px; padding: 6px 12px; font-size: 12px; letter-spacing: 0.1em; font-weight: 600; background: rgba(10, 23, 51, 0.06); border-radius: 999px; color: var(--rv2-ink-soft) !important; } /* ── Local-problem section ──────────────────────────────────────────────── */ body.town-v2 .town-local { background: var(--rv2-cream-2); } body.town-v2 .town-local-inner { max-width: 820px; margin: 0 auto; } body.town-v2 .town-local-body { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--rv2-ink) !important; margin: 0; } /* ── "Is It Time" sign cards ────────────────────────────────────────────── */ body.town-v2 .town-signs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; } body.town-v2 .town-sign-card { background: #fff; border: 1px solid var(--rv2-line); border-radius: 14px; padding: 20px 18px; display: flex; align-items: flex-start; gap: 12px; } body.town-v2 .town-sign-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--rv2-warm); color: var(--rv2-accent) !important; display: flex; align-items: center; justify-content: center; } body.town-v2 .town-sign-icon svg { width: 18px; height: 18px; } body.town-v2 .town-sign-card p { font-size: 14px; line-height: 1.45; color: var(--rv2-ink) !important; font-weight: 500; margin: 4px 0 0; } /* ── 3-step process ─────────────────────────────────────────────────────── */ body.town-v2 .town-process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } body.town-v2 .town-process-card { background: #fff; border: 1px solid var(--rv2-line); border-radius: 16px; padding: 28px 24px; position: relative; } body.town-v2 .town-process-num { position: absolute; top: -16px; left: 24px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--rv2-accent), var(--rv2-orange)); color: #fff !important; font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(194, 65, 12, 0.55); } body.town-v2 .town-process-card h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; line-height: 1.2; margin: 0 0 8px; color: var(--rv2-ink) !important; } body.town-v2 .town-process-card p { font-size: 15px; line-height: 1.55; color: var(--rv2-ink-soft) !important; margin: 0; } /* ── Materials / GAF section ────────────────────────────────────────────── */ body.town-v2 .town-materials { background: var(--rv2-cream-2); } body.town-v2 .town-materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; align-items: start; } body.town-v2 .town-materials-copy h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; line-height: 1.2; margin: 0 0 14px; color: var(--rv2-ink) !important; } body.town-v2 .town-materials-copy p { font-size: 15px; line-height: 1.6; color: var(--rv2-ink-soft) !important; margin: 0 0 14px; } body.town-v2 .town-materials-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.town-v2 .town-materials-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; padding: 14px 16px; background: #fff; border: 1px solid var(--rv2-line); border-radius: 12px; color: var(--rv2-ink) !important; font-weight: 500; } body.town-v2 .town-materials-list li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; background-color: var(--rv2-accent); border-radius: 999px; -webkit-mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; } /* ── Financing band ─────────────────────────────────────────────────────── */ body.town-v2 .town-financing { background: linear-gradient(135deg, var(--rv2-warm) 0%, var(--rv2-warm-2) 100%); padding: clamp(56px, 8vw, 80px) 0; } body.town-v2 .town-financing-inner { text-align: center; max-width: 720px; margin: 0 auto; } body.town-v2 .town-financing h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; margin: 0 0 14px; color: var(--rv2-ink) !important; } body.town-v2 .town-financing p { font-size: 17px; line-height: 1.6; color: var(--rv2-ink-soft) !important; margin: 0 0 24px; } /* ── Local trust band ───────────────────────────────────────────────────── */ body.town-v2 .town-trust-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 28px; padding: 14px 20px; background: #fff; border: 1px solid var(--rv2-line); border-radius: 999px; max-width: 880px; margin-left: auto; margin-right: auto; font-size: 13px; font-weight: 600; color: var(--rv2-ink) !important; } body.town-v2 .town-trust-band span { display: inline-flex; align-items: center; gap: 6px; } body.town-v2 .town-trust-band span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv2-accent); } /* ── FAQ ────────────────────────────────────────────────────────────────── */ body.town-v2 .town-faq { margin-top: 32px; max-width: 760px; margin-left: auto; margin-right: auto; } body.town-v2 .town-faq details { border-top: 1px solid var(--rv2-line); padding: 18px 0; } body.town-v2 .town-faq details:last-of-type { border-bottom: 1px solid var(--rv2-line); } body.town-v2 .town-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; line-height: 1.3; color: var(--rv2-ink) !important; } body.town-v2 .town-faq summary::-webkit-details-marker { display: none; } body.town-v2 .town-faq summary::after { content: "+"; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 26px; color: var(--rv2-accent) !important; transition: transform 0.25s; } body.town-v2 .town-faq details[open] summary::after { content: "–"; } body.town-v2 .town-faq details p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--rv2-ink-soft) !important; } /* ── Brand kicker (above hero H1) ───────────────────────────────────────── */ body.town-v2 .rv2-kicker { display: inline-block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 14px; } /* ── Breadcrumb nav ─────────────────────────────────────────────────────── */ body.town-v2 .rv2-breadcrumbs { margin: 0 0 22px; position: relative; z-index: 2; } body.town-v2 .rv2-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: rgba(255,255,255,0.62); } body.town-v2 .rv2-breadcrumbs li.rv2-crumb { display: inline-flex; align-items: center; } body.town-v2 .rv2-breadcrumbs li.rv2-crumb + li.rv2-crumb::before { content: "/"; margin-right: 10px; color: rgba(255,255,255,0.32); } body.town-v2 .rv2-breadcrumbs li.rv2-crumb a { color: rgba(255,255,255,0.78); text-decoration: none; } body.town-v2 .rv2-breadcrumbs li.rv2-crumb a:hover { color: #fff; text-decoration: underline; } body.town-v2 .rv2-breadcrumbs li.is-current { color: rgba(255,255,255,0.92); font-weight: 500; } /* ── Cost card section ──────────────────────────────────────────────────── */ body.town-v2 .town-cost { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(40px, 6vw, 70px); } body.town-v2 .town-cost-card { max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 44px); background: #fff; border: 1px solid rgba(13,23,42,0.08); border-radius: 22px; box-shadow: 0 14px 40px rgba(13,23,42,0.06); text-align: left; } body.town-v2 .town-cost-card .rv2-eyebrow { margin-bottom: 10px; } body.town-v2 .town-cost-card .rv2-h2 { font-size: clamp(28px, 3vw, 38px); margin: 6px 0 16px; } body.town-v2 .town-cost-body { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; color: var(--rv2-ink) !important; margin: 0 0 12px; } body.town-v2 .town-cost-note { font-size: 14px; color: var(--rv2-ink-soft) !important; margin: 0 0 22px; } /* ── Why [Town] homeowners choose Nova ──────────────────────────────────── */ body.town-v2 .town-why { background: var(--rv2-cream-2); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } body.town-v2 .town-why-inner { max-width: 820px; margin: 0 auto; text-align: center; } body.town-v2 .town-why-inner .rv2-eyebrow { justify-content: center; } body.town-v2 .town-why-inner .rv2-h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 10px 0 18px; } body.town-v2 .town-why-body { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--rv2-ink) !important; margin: 0; } /* ── Related / Internal-link cards ──────────────────────────────────────── */ body.town-v2 .town-related { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } body.town-v2 .town-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; } body.town-v2 .town-related-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: #fff; border: 1px solid rgba(13,23,42,0.08); border-radius: 16px; text-decoration: none; color: var(--rv2-ink) !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } body.town-v2 .town-related-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,23,42,0.10); border-color: rgba(13,23,42,0.18); } body.town-v2 .town-related-card .town-related-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv2-ink-muted) !important; } body.town-v2 .town-related-card .town-related-title { font-family: 'DM Serif Display', serif; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; color: var(--rv2-ink) !important; } body.town-v2 .town-related-card .town-related-cta { margin-top: 4px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--rv2-accent) !important; } body.town-v2 .town-related-card-primary { background: var(--rv2-ink, #0D1B2A); border-color: var(--rv2-ink, #0D1B2A); } body.town-v2 .town-related-card-primary .town-related-eyebrow, body.town-v2 .town-related-card-primary .town-related-title { color: #fff !important; } body.town-v2 .town-related-card-primary .town-related-cta { color: var(--rv2-accent, #E25E3E) !important; } body.town-v2 .town-related-card-estimate { background: linear-gradient(135deg, var(--rv2-accent, #E25E3E) 0%, #c4421f 100%); border-color: var(--rv2-accent, #E25E3E); } body.town-v2 .town-related-card-estimate .town-related-eyebrow, body.town-v2 .town-related-card-estimate .town-related-title, body.town-v2 .town-related-card-estimate .town-related-cta { color: #fff !important; } /* ── Mobile ─────────────────────────────────────────────────────────────── */ @media (max-width: 980px) { body.town-v2 .town-hero-grid { grid-template-columns: 1fr; gap: 28px; } body.town-v2 .town-hero-copy { max-width: 100%; } body.town-v2 .rv2-hero { min-height: auto; padding-top: clamp(100px, 14vh, 140px); } body.town-v2 .town-signs-grid { grid-template-columns: 1fr 1fr; gap: 12px; } body.town-v2 .town-process-row { grid-template-columns: 1fr; gap: 18px; } body.town-v2 .town-materials-grid { grid-template-columns: 1fr; gap: 24px; } body.town-v2 .town-materials-list { grid-template-columns: 1fr; } body.town-v2 .town-related-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { body.town-v2 .town-signs-grid { grid-template-columns: 1fr; } body.town-v2 .town-field-row, body.town-v2 .town-field-row-3 { grid-template-columns: 1fr; } body.town-v2 .town-trust-band { border-radius: 18px; gap: 10px 18px; font-size: 12px; } body.town-v2 .town-related-grid { grid-template-columns: 1fr; } body.town-v2 .rv2-breadcrumbs { display: none; } }