/* ========================================================================== Exterior renovation contractor — Seattle landing page Scoped to .fx-landing. Other templates keep the Linework styling. ========================================================================== */ /* Linework makes the scroll container (html{overflow:hidden} plus a fixed-height, inset body) and drives it with its own JS. This template loads neither, so document scrolling is restored explicitly here. Kept !important so it holds regardless of stylesheet order or a cached page that still references the theme stylesheet. */ html { overflow: visible !important; height: auto !important; } .fx-landing { /* Undo Linework's inset scroll box if its stylesheet is still applied. */ height: auto !important; max-width: none !important; margin: 0 !important; --concrete: #efece7; --concrete-2: #e2ddd5; --white: #ffffff; --slate: #34445a; --slate-2: #435672; --slate-deep: #222d3d; --rust: #b5542f; --rust-2: #9c4526; --rust-soft: #f6e5dd; --ink: #1d242e; --muted: #66707d; --rule: #d8d2c8; --rule-light: rgba(239, 236, 231, 0.16); --display: "Oswald", "Helvetica Neue", Arial, sans-serif; --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r: 4px; --wrap: 1220px; --gutter: 24px; background: var(--concrete); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.64; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Fallback for browsers without overflow:clip — hidden still prevents sideways drift, and the html rule above keeps vertical scrolling working. */ @supports not (overflow: clip) { .fx-landing { overflow-x: hidden; } } .fx-landing *, .fx-landing *::before, .fx-landing *::after { box-sizing: border-box; } .fx-landing img { max-width: 100%; height: auto; display: block; } .fx-landing p { margin: 0; } .fx-landing h1, .fx-landing h2, .fx-landing h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; text-transform: uppercase; margin: 0; color: var(--slate-deep); } .fx-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .fx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); } .fx-eyebrow::before { content: ""; width: 24px; height: 3px; background: currentColor; flex: none; } .fx-eyebrow--light { color: #e0906f; } /* ---------- Buttons ---------- */ .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 32px; font-family: var(--body); font-size: 14.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: var(--r); cursor: pointer; transition: background-color .17s ease, color .17s ease, border-color .17s ease; } .fx-btn--rust { background: var(--rust); color: #fff; } .fx-btn--rust:hover { background: var(--rust-2); color: #fff; } .fx-btn--slate { background: var(--slate); color: var(--concrete); } .fx-btn--slate:hover { background: var(--slate-deep); color: var(--concrete); } .fx-btn--concrete { background: var(--concrete); color: var(--slate-deep); } .fx-btn--concrete:hover { background: #fff; color: var(--slate-deep); } .fx-btn--line { border-color: var(--rule); color: var(--slate-deep); } .fx-btn--line:hover { border-color: var(--slate); } .fx-btn--line-light { border-color: var(--rule-light); color: var(--concrete); } .fx-btn--line-light:hover { border-color: var(--concrete); } .fx-btn--sm { padding: 12px 22px; font-size: 13px; } /* ---------- Utility bar ---------- */ .fx-util { background: var(--slate-deep); color: rgba(239, 236, 231, .82); font-size: 13px; padding: 10px 0; } .fx-util__inner { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: center; } .fx-util span { display: inline-flex; align-items: center; gap: 7px; } .fx-util a { color: #fff; font-weight: 700; text-decoration: none; } .fx-util a:hover { text-decoration: underline; } /* ---------- Header ---------- */ .fx-header { position: sticky; top: 0; z-index: 60; background: rgba(239, 236, 231, .95); backdrop-filter: saturate(150%) blur(8px); border-bottom: 2px solid var(--slate-deep); } .fx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; height: 78px; } .fx-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .fx-logo__mark { width: 40px; height: 40px; flex: none; border-radius: var(--r); background: var(--slate-deep); color: var(--rust); display: grid; place-items: center; } .fx-logo__name { font-family: var(--display); font-size: 23px; font-weight: 600; text-transform: uppercase; color: var(--slate-deep); line-height: 1; } .fx-logo__sub { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } .fx-nav { display: flex; gap: 28px; } .fx-nav a { font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .fx-nav a:hover { color: var(--rust); } /* ---------- Hero ---------- */ .fx-hero { background: var(--slate); color: rgba(239, 236, 231, .8); } .fx-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: stretch; } .fx-hero__copy { padding: 86px 60px 86px 0; display: flex; flex-direction: column; justify-content: center; } .fx-hero h1 { color: var(--concrete); font-size: clamp(2.6rem, 5.6vw, 4.3rem); margin: 24px 0 0; max-width: 16ch; } .fx-hero h1 span { color: var(--rust); } .fx-hero__lede { font-size: 18.5px; color: rgba(239, 236, 231, .76); max-width: 46ch; margin-top: 24px; } .fx-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; } .fx-badges { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule-light); font-size: 13px; color: rgba(239, 236, 231, .7); } .fx-badges strong { color: var(--concrete); font-weight: 700; } .fx-hero__media { position: relative; min-height: 420px; } .fx-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- Trust strip ---------- */ .fx-strip { background: var(--slate-deep); } .fx-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); } .fx-strip__item { padding: 30px 28px; border-left: 1px solid rgba(239,236,231,.12); } .fx-strip__item:first-child { border-left: 0; padding-left: 0; } .fx-strip__v { font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--rust); line-height: 1; } .fx-strip__l { margin-top: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(239,236,231,.62); } /* ---------- Sections ---------- */ .fx-section { padding: 100px 0; } .fx-section--white { background: var(--white); } .fx-section--tint { background: var(--concrete-2); } .fx-section--slate { background: var(--slate); color: rgba(239, 236, 231, .74); } .fx-section--slate h2, .fx-section--slate h3 { color: var(--concrete); } .fx-head { max-width: 740px; margin-bottom: 58px; } .fx-head--center { margin-left: auto; margin-right: auto; text-align: center; } .fx-head--center .fx-eyebrow::before { display: none; } .fx-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); margin: 18px 0 16px; } .fx-head p { font-size: 18px; color: var(--muted); } .fx-section--slate .fx-head p { color: rgba(239, 236, 231, .68); } /* ---------- Services: alternating photo rows ---------- */ .fx-trades { display: grid; gap: 22px; } .fx-trade { display: grid; grid-template-columns: .95fr 1.05fr; background: var(--white); border: 2px solid var(--slate-deep); overflow: hidden; } .fx-trade:nth-child(even) .fx-trade__img { order: 2; } .fx-trade__img { position: relative; min-height: 300px; } .fx-trade__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fx-trade__body { padding: 44px 42px; } .fx-trade__n { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--rust); margin-bottom: 14px; } .fx-trade h3 { font-size: 30px; margin-bottom: 14px; } .fx-trade p { color: var(--muted); font-size: 16px; } .fx-trade ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } .fx-trade li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--ink); } .fx-trade li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 3px; background: var(--rust); } /* ---------- Rain / PNW band ---------- */ .fx-rain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .fx-rain__item { border-top: 3px solid var(--rust); padding-top: 22px; } .fx-rain__item h3 { font-size: 20px; margin-bottom: 10px; } .fx-rain__item p { color: rgba(239, 236, 231, .72); font-size: 15px; } /* ---------- Cost table ---------- */ .fx-table-wrap { border: 2px solid var(--slate-deep); overflow: hidden; background: var(--white); } .fx-table { width: 100%; border-collapse: collapse; font-size: 15.5px; } .fx-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fx-table th, .fx-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--rule); } .fx-table thead th { background: var(--slate-deep); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--concrete); } .fx-table tbody th { font-weight: 700; color: var(--ink); } .fx-table td { color: var(--muted); } .fx-table td.fx-cost { color: var(--rust-2); font-weight: 700; white-space: nowrap; } .fx-table tr:last-child th, .fx-table tr:last-child td { border-bottom: 0; } .fx-table__note { margin-top: 22px; font-size: 14.5px; color: var(--muted); text-align: center; } /* ---------- Process ---------- */ .fx-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .fx-step { background: var(--white); border: 2px solid var(--slate-deep); padding: 26px 22px; } .fx-step__n { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--rust); line-height: 1; margin-bottom: 14px; } .fx-step h3 { font-size: 17px; margin-bottom: 8px; } .fx-step p { color: var(--muted); font-size: 14.5px; line-height: 1.5; } /* ---------- Areas ---------- */ .fx-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .fx-areas img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .fx-hoods { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .fx-hoods li { border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--ink); background: var(--white); } /* ---------- FAQ ---------- */ .fx-faq { max-width: 880px; margin: 0 auto; } .fx-faq details { border-bottom: 2px solid var(--rule); } .fx-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--display); font-size: 20px; font-weight: 500; text-transform: uppercase; color: var(--slate-deep); } .fx-faq summary::-webkit-details-marker { display: none; } .fx-faq summary::after { content: "+"; font-family: var(--body); font-size: 26px; font-weight: 400; color: var(--rust); flex: none; transition: transform .2s ease; } .fx-faq details[open] summary::after { transform: rotate(45deg); } .fx-faq details p { padding: 0 0 24px; color: var(--muted); font-size: 16px; max-width: 70ch; } /* ---------- CTA ---------- */ .fx-cta { background: var(--rust); padding: 92px 0; } .fx-cta__box { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; } .fx-cta h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 16px; } .fx-cta p { color: rgba(255,255,255,.85); font-size: 18px; max-width: 44ch; } .fx-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .fx-contact { display: grid; gap: 18px; } .fx-contact__row { display: flex; gap: 14px; align-items: flex-start; } .fx-contact__row svg { flex: none; margin-top: 3px; color: rgba(255,255,255,.85); } .fx-contact__row span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 3px; } .fx-contact__row a, .fx-contact__row strong { color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; } .fx-contact__row a:hover { text-decoration: underline; } /* ---------- Footer ---------- */ .fx-footer { background: var(--slate-deep); color: rgba(239, 236, 231, .58); padding: 56px 0 30px; font-size: 15px; } .fx-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid var(--rule-light); } .fx-footer .fx-logo__name { color: var(--concrete); } .fx-footer h4 { font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); margin-bottom: 16px; } .fx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fx-footer a { color: rgba(239, 236, 231, .66); text-decoration: none; } .fx-footer a:hover { color: var(--rust); } .fx-footer__blurb { margin-top: 16px; max-width: 32ch; font-size: 14.5px; } .fx-footer__base { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; } .fx-footer__legal { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: rgba(239, 236, 231, .4); max-width: 98ch; } .fx-footer__credit { margin-top: 12px; font-size: 12px; color: rgba(239, 236, 231, .32); } .fx-footer__credit a { color: rgba(239, 236, 231, .46); text-decoration: underline; } /* ---------- Responsive ---------- */ @media (max-width: 1060px) { .fx-hero__grid { grid-template-columns: 1fr; } .fx-hero__copy { padding: 64px 0; } .fx-hero__media { min-height: 320px; } .fx-strip__inner { grid-template-columns: repeat(2, 1fr); } .fx-strip__item:nth-child(3) { border-left: 0; padding-left: 0; } .fx-trade { grid-template-columns: 1fr; } .fx-trade:nth-child(even) .fx-trade__img { order: 0; } .fx-rain { grid-template-columns: repeat(2, 1fr); } .fx-steps { grid-template-columns: repeat(2, 1fr); } .fx-areas, .fx-cta__box { grid-template-columns: 1fr; gap: 40px; } .fx-footer__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .fx-nav { display: none; } .fx-header__inner { height: 68px; } .fx-section, .fx-cta { padding: 70px 0; } .fx-strip__inner { grid-template-columns: 1fr; } .fx-strip__item { border-left: 0; padding: 22px 0; border-bottom: 1px solid rgba(239,236,231,.12); } .fx-strip__item:last-child { border-bottom: 0; } .fx-rain, .fx-steps { grid-template-columns: 1fr; } .fx-trade__body { padding: 30px 24px; } .fx-footer__cols { grid-template-columns: 1fr; } .fx-hero__actions .fx-btn, .fx-cta__actions .fx-btn { flex: 1 1 100%; } .fx-table thead { display: none; } .fx-table, .fx-table tbody, .fx-table tr, .fx-table th, .fx-table td { display: block; width: 100%; } .fx-table tr { border-bottom: 2px solid var(--rule); padding: 8px 0; } .fx-table tr:last-child { border-bottom: 0; } .fx-table th, .fx-table td { border-bottom: 0; padding: 6px 20px; } .fx-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa2ad; margin-bottom: 3px; } } @media (prefers-reduced-motion: reduce) { .fx-landing * { transition: none !important; } }