/* Address-first instant-quote entry points (conversion-2.0 BUILD-NOW #1): the .iq-cta page section plus the blog directive components (::iq-banner, ::iq-card). Namespaced apw-iq-*; house rules: radius ≤6px, no pills, subtle shadows. Family accent is the estimate blue (finance = green stays distinct); the full flow's own styles live in instant-quote.css. */ :root { --iqe-ink: #0f172a; --iqe-navy: #0b1522; --iqe-blue: #006afe; --iqe-blue-dk: #0055d6; --iqe-chip: #e7f0ff; --iqe-line: #dbe3ee; --iqe-muted: #64748b; } .apw-iq, .post-content .apw-iq, .iq-cta { box-sizing: border-box; } .apw-iq *, .apw-iq *::before, .apw-iq *::after, .iq-cta *, .iq-cta *::before, .iq-cta *::after { box-sizing: border-box; } .apw-iq a, .post-content .apw-iq a { text-decoration: none; } /* ── shared: the address form ── */ .apw-iq-form { margin: 0; } .apw-iq-row { display: flex; gap: 8px; } .apw-iq-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--iqe-line); border-radius: 6px; font-size: .95rem; color: var(--iqe-ink); background: #fff; } .apw-iq-input::placeholder { color: #8a94a6; } .apw-iq-input:focus { outline: 2px solid var(--iqe-blue); outline-offset: 0; border-color: var(--iqe-blue); } .apw-iq-form.is-error .apw-iq-input { border-color: #d64545; outline-color: #d64545; } .apw-iq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 6px; font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap; cursor: pointer; color: #fff; background: var(--iqe-blue); transition: background-color .15s ease, box-shadow .15s ease, scale .12s ease; } .apw-iq-btn:hover { background: var(--iqe-blue-dk); color: #fff; box-shadow: 0 4px 14px rgba(0, 90, 220, .28); } .apw-iq-btn:active { scale: .96; } .apw-iq-btn i { font-size: .8rem; } .apw-iq-btn:disabled { opacity: .75; cursor: default; box-shadow: none; } .apw-iq-note { font-size: .74rem; margin: 8px 0 2px; color: var(--iqe-muted); } /* ── shared: address typeahead (portaled to by iq-entry.js, which pins position/top/left/width inline to the input's page coordinates) ── */ .apw-iq-suggestions { position: absolute; z-index: 1200; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); display: none; max-height: 320px; overflow-y: auto; } .apw-iq-suggestions.is-open { display: block; } .apw-iq-suggestion { display: flex; flex-direction: column; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid rgba(15, 23, 42, .04); } .apw-iq-suggestion:last-child { border-bottom: 0; } .apw-iq-suggestion:hover, .apw-iq-suggestion.is-active { background: #f1f5f9; } .apw-iq-suggestion-label { font-size: .95rem; color: var(--iqe-ink); font-weight: 600; } .apw-iq-suggestion-sub { font-size: .8rem; color: var(--iqe-muted); } /* ── shared: the estimate mark (house + price dot) ── */ .apw-iq-mark { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--iqe-chip); display: inline-flex; align-items: center; justify-content: center; } .apw-iq-mark svg { width: 24px; height: 24px; display: block; } .apw-iq-mark--sm { width: 26px; height: 26px; } .apw-iq-mark--sm svg { width: 18px; height: 18px; } /* ── dark-surface variant (page band + blog banner) ── */ .apw-iq--dark .apw-iq-input { border-color: rgba(255, 255, 255, .28); } .apw-iq--dark .apw-iq-input:focus { outline-color: #6aa6ff; border-color: #6aa6ff; } .apw-iq--dark .apw-iq-btn { background: linear-gradient(180deg, #2b86ff 0%, #0a5fe6 100%); box-shadow: 0 6px 20px rgba(10, 80, 220, .45), inset 0 1px 0 rgba(255, 255, 255, .22); } .apw-iq--dark .apw-iq-btn:hover { background: linear-gradient(180deg, #1c79ff 0%, #0954d4 100%); box-shadow: 0 8px 26px rgba(10, 80, 220, .55); } .apw-iq--dark .apw-iq-note { color: rgba(255, 255, 255, .68); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } /* ── page section: thin full-width band, photo behind a navy scrim ── The scrim runs opaque at the left (headline) and right (form) edges and clears in the middle so the photo reads through the centre gap — the finance-band / pdp-features treatment. Photo set per-include via the --iq-photo custom property on the section. */ .iq-cta { position: relative; overflow: hidden; background-color: var(--iqe-navy); isolation: isolate; padding: 34px 0; } .iq-cta::before { /* the photo, filtered to harmonise with the navy */ content: ""; position: absolute; inset: 0; z-index: -2; background: var(--iq-photo, url(/img/coastal-palm-beach-house-windows-cost-1920c600.webp)) center 42% / cover no-repeat; filter: saturate(.82) brightness(.72) contrast(1.03); } .iq-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 150% at 6% -20%, rgba(46, 76, 112, .45), transparent 55%), linear-gradient(100deg, rgba(11, 21, 34, .96) 0%, rgba(11, 21, 34, .85) 30%, rgba(11, 21, 34, .36) 55%, rgba(11, 21, 34, .58) 76%, rgba(11, 21, 34, .93) 100%); } .iq-cta-row { display: flex; align-items: center; gap: 30px; } .iq-cta-main { flex: 1 1 auto; min-width: 0; max-width: 50%; } .iq-cta-head { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.22; letter-spacing: -.01em; margin: 0; text-wrap: balance; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); } .iq-cta-sub { font-size: .92rem; color: rgba(255, 255, 255, .9); line-height: 1.5; margin: 7px 0 0; text-wrap: pretty; text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 16px rgba(0, 0, 0, .5); } .iq-cta-action { flex: 0 1 470px; margin-left: auto; } /* ── blog banner (::iq-banner): thin in-article strip on solid navy ── Deliberately photo-less so a post carrying both this and the finance band doesn't read as two copies of the same component. */ .apw-iq-banner { position: relative; overflow: hidden; border-radius: 6px; margin: 1.75rem 0; padding: 20px 22px; background-color: var(--iqe-navy); isolation: isolate; display: flex; align-items: center; gap: 24px; } .apw-iq-banner::before { /* quiet top-left glow so the navy doesn't sit flat */ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 170% at 8% -30%, rgba(43, 108, 176, .5), transparent 55%), radial-gradient(90% 140% at 100% 130%, rgba(10, 95, 230, .22), transparent 60%); } .apw-iq-banner-main { flex: 1 1 44%; min-width: 0; } /* scoped under the component so they beat the theme's .post-content p (0-1-1) */ .apw-iq-banner .apw-iq-banner-head { font-size: 1.12rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -.01em; margin: 0; text-wrap: balance; } .apw-iq-banner .apw-iq-banner-sub { font-size: .86rem; color: #c5d0dc; line-height: 1.45; margin: 5px 0 0; text-wrap: pretty; } .apw-iq-banner-action { flex: 1 1 56%; min-width: 0; } .apw-iq-banner .apw-iq-note { margin-bottom: 0; } /* ── blog card (::iq-card): floated white card, article text wraps around ── */ .apw-iq-card { background: #fff; border: 1px solid var(--iqe-line); border-radius: 6px; padding: 18px; width: 320px; max-width: 100%; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px rgba(15, 23, 42, .06); display: flex; flex-direction: column; gap: 11px; } .apw-iq-float { float: right; margin: 6px 0 18px 26px; } .apw-iq-card-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--iqe-blue-dk); } .apw-iq-card .apw-iq-card-head { font-size: 1.08rem; font-weight: 800; color: var(--iqe-ink); line-height: 1.25; letter-spacing: -.01em; margin: 0; text-wrap: balance; } .apw-iq-card .apw-iq-card-sub { font-size: .84rem; color: var(--iqe-muted); line-height: 1.45; margin: -4px 0 0; text-wrap: pretty; } .apw-iq-card .apw-iq-row { flex-direction: column; } .apw-iq-card .apw-iq-btn { width: 100%; } .apw-iq-card .apw-iq-note { margin: -2px 0 0; } .apw-iq-facts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #edf1f7; display: flex; flex-direction: column; gap: 6px; } .apw-iq-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--iqe-ink); line-height: 1.35; } .apw-iq-facts li i { color: var(--iqe-blue); margin-top: 3px; font-size: .76rem; } .apw-iq-card .apw-iq-foot { font-size: .7rem; color: var(--iqe-muted); line-height: 1.45; margin: 0; } /* ── responsive ── */ @media (max-width: 860px) { .iq-cta-row { flex-direction: column; align-items: stretch; gap: 16px; } .iq-cta-main { max-width: none; } .iq-cta-action { flex: 1 1 auto; margin-left: 0; } .iq-cta::after { background: rgba(11, 21, 34, .88); } /* uniform dark under stacked text */ } @media (max-width: 760px) { .apw-iq-banner { flex-direction: column; align-items: stretch; gap: 13px; } .apw-iq-card.apw-iq-float { float: none; width: auto; margin: 1.5rem 0; } } @media (max-width: 480px) { .apw-iq-row { flex-direction: column; } .apw-iq-btn { width: 100%; } }