/* ============================================================================ Noir — one-pager layer. Loads AFTER noir.css and only adds what a single scrolling page needs: anchor offsets, the oversized category features, scroll reveals and the scrollspy states. Every token and component below comes from noir.css. ========================================================================== */ /* ---------- 1. Anchor offset -------------------------------------------- */ /* The masthead is sticky at 84px, so every anchor target has to clear it or the section heading lands underneath the nav. */ :root { --head-h: 92px; } /* Reveal transforms (translateX, scale) briefly push elements past the viewport edge before they settle. `clip` contains that without creating a scroll container, so the sticky feature media keeps working — `hidden` would break it. */ html, body { overflow-x: clip; } [id] { scroll-margin-top: var(--head-h); } @media (max-width: 880px) { :root { --head-h: 76px; } } /* ---------- 2. Scroll reveal -------------------------------------------- */ /* Progressive enhancement: without JS nothing is hidden, because `.js-reveal` is only added to once the observer is actually wired up. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js-reveal [data-reveal="fade"] { transform: none; } .js-reveal [data-reveal="left"] { transform: translateX(-26px); } .js-reveal [data-reveal="right"] { transform: translateX(26px); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* Image reveals get a slow settle rather than a slide — it reads as photography arriving, not as a UI element flying in. */ .js-reveal [data-reveal="zoom"] { opacity: 0; transform: none; } .js-reveal [data-reveal="zoom"] > img, .js-reveal [data-reveal="zoom"] > .ph { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); } .js-reveal [data-reveal="zoom"].is-in { opacity: 1; } .js-reveal [data-reveal="zoom"].is-in > img, .js-reveal [data-reveal="zoom"].is-in > .ph { transform: none; } /* Counting numbers in the stats band */ .stat__n[data-count] { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal], .js-reveal [data-reveal] > img, .js-reveal [data-reveal] > .ph { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 3. Scrollspy ------------------------------------------------- */ .nav__link.is-active, .utility__nav a.is-active { color: var(--gold); } .utility__nav a.is-active { color: var(--gold-lift); } /* Thin progress rule under the masthead — reads as a reading indicator, not as a loading bar. */ .readbar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--gold); z-index: 70; pointer-events: none; } /* ---------- 4. Oversized category features ------------------------------ */ /* The brief: "huge sections, especially on the image side". Media column is the dominant one and runs to the viewport edge on the outer side. */ .feature { position: relative; background: var(--paper); } .feature--cream { background: var(--cream); } .feature--ink { background: var(--ink); } .feature--ink h2, .feature--ink h3 { color: #fff; } .feature--ink p, .feature--ink li { color: rgba(255,255,255,.78); } .feature--ink .eyebrow { color: var(--gold-lift); } .feature--ink .rows, .feature--ink .rows__item { border-color: var(--line-dark); } .feature--ink .rows__item > a { color: #fff; } .feature--ink .rows__item > a:hover { color: var(--gold-lift); } .feature__inner { display: grid; grid-template-columns: 1.12fr .88fr; /* image side wins */ align-items: stretch; min-height: min(88vh, 860px); } .feature--flip .feature__inner { grid-template-columns: .88fr 1.12fr; } .feature--flip .feature__media { order: 2; } /* The media column sticks for the life of the section: the photograph holds at full viewport height while the copy and the sub-service list scroll past it. Without this the image would stretch to the copy height (2,000px+) and crop to a letterbox sliver — and the placeholder sections would be a vast blank. */ .feature__media { position: sticky; top: var(--head-h); align-self: start; height: calc(100vh - var(--head-h)); min-height: 520px; overflow: hidden; overflow: clip; background: var(--cream-deep); } .feature__media > img, .feature__media > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Slow drift while the section is in view. Purely decorative. */ @media (prefers-reduced-motion: no-preference) { .feature__media > img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); } .feature:hover .feature__media > img { transform: scale(1.035); } } /* Price flag sitting on the image, SoBo's overhanging-box trick reused. */ .feature__flag { position: absolute; left: 0; bottom: clamp(1.5rem, 4vw, 3rem); /* Anchored to whichever edge of the media is the outer edge of the page. */ background: var(--ink); color: #fff; padding: 1rem clamp(1.2rem, 2vw, 1.8rem); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 18px 40px -22px rgba(21,20,15,.6); max-width: 22rem; } .feature__flag strong { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; } .feature__flag span { display: block; margin-top: .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lift); } .feature--flip .feature__flag { left: auto; right: 0; border-radius: var(--radius) 0 0 var(--radius); } .feature__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.25rem, .55rem + 2.8vw, 3.5rem); max-width: 46rem; } .feature:not(.feature--flip) .feature__copy { padding-right: max(var(--shell-pad), (100vw - var(--shell)) / 2); } .feature--flip .feature__copy { padding-left: max(var(--shell-pad), (100vw - var(--shell)) / 2); } .feature__copy > .lede { margin-top: 1.1rem; } .feature__copy .prose { margin-top: 1.5rem; } .feature__copy .prose p { font-size: .97rem; } .feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-top: 2rem; } /* Sub-service list inside a feature. Each row is its own anchor target so the mega-menu links land on the exact service, not just the section. */ .subs { margin-top: 2.2rem; border-top: 1px solid var(--line); } .feature--ink .subs { border-color: var(--line-dark); } .subs__item { border-bottom: 1px solid var(--line); } .feature--ink .subs__item { border-color: var(--line-dark); } .subs__item > * { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; padding: .95rem 0; } .subs__label { grid-column: 1 / -1; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--ink); } .feature--ink .subs__label { color: #fff; } .subs__blurb { grid-column: 1 / -1; font-size: .875rem; color: var(--body-light); margin: 0; } .feature--ink .subs__blurb { color: rgba(255,255,255,.62); } .subs__item:target .subs__label { color: var(--gold); } /* Supporting 3-up image strip under each feature */ .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .strip figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; overflow: clip; background: var(--cream-deep); } .strip img, .strip .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.2rem .9rem .8rem; background: linear-gradient(transparent, rgba(21,20,15,.72)); color: #fff; font-size: .78rem; letter-spacing: .05em; } /* ---------- 5. Placeholder blocks --------------------------------------- */ /* Deliberately look like a photo slot waiting for a photo, not like a bug. */ .ph--shot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; background: repeating-linear-gradient(135deg, rgba(163,131,63,.05) 0 12px, transparent 12px 24px), var(--cream-deep); color: var(--body-light); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .ph--shot svg { width: 34px; height: 34px; color: var(--gold); opacity: .65; } .ph--shot em { font-style: normal; font-size: .72rem; letter-spacing: .04em; text-transform: none; opacity: .75; } /* ---------- 6. Inline CTA bands ----------------------------------------- */ /* Short, repeated conversion prompts between sections. The full form band (cta-band) is used once at the end; these push to it. */ .cta-slim { background: var(--ink); color: rgba(255,255,255,.78); } .cta-slim .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-block: clamp(2rem, 1.4rem + 1.8vw, 3rem); } .cta-slim h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); max-width: 26ch; } .cta-slim p { margin-top: .5rem; max-width: 52ch; font-size: .92rem; } .cta-slim__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; max-width: 100%; } .cta-slim--cream { background: var(--cream); color: var(--body); border-block: 1px solid var(--line); } .cta-slim--cream h2 { color: var(--ink); } /* Phone shown as a real, tappable, oversized number — the primary action for a remodeling lead is still a call. */ .phone-big { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); font-weight: 600; color: #fff; letter-spacing: -.01em; } .phone-big svg { width: 22px; height: 22px; color: var(--gold-lift); flex: none; } .phone-big:hover { color: var(--gold-lift); } .cta-slim--cream .phone-big { color: var(--ink); } .cta-slim--cream .phone-big svg { color: var(--gold); } .cta-slim--cream .phone-big:hover { color: var(--gold); } /* ---------- 7. Pricing table band --------------------------------------- */ .pricing__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } /* Grid items default to min-content width, so a wide table would push the column past the viewport instead of scrolling inside its own .table-wrap. */ .pricing__grid > * { min-width: 0; } .pricing__note { margin-top: 1.6rem; font-size: .82rem; color: var(--body-light); max-width: 70ch; } /* ---------- 8. Detail accordions inside a feature ----------------------- */ .detail { margin-top: 2.4rem; } .detail > .eyebrow { display: block; margin-bottom: .8rem; } .detail .faq { border-top: 1px solid var(--line); } .feature--ink .detail .faq, .feature--ink .detail .faq__item { border-color: var(--line-dark); } .feature--ink .detail .faq__q { color: #fff; } .detail .faq__q { font-size: .95rem; padding-block: 1rem; } .detail .faq__a { font-size: .9rem; } .detail .faq__a table { font-size: .85rem; } /* ---------- 9. FAQ groups ------------------------------------------------ */ .faq-groups { display: grid; gap: 2.8rem; } .faq-group > h3 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; } /* ---------- 10. Estimate band ------------------------------------------- */ /* Dark band: noir.css only recolours headings inside .section--ink, so the estimate band has to opt in explicitly or the h2 renders black on black. */ .estimate { background: var(--ink); } .estimate h2, .estimate h3 { color: #fff; } .estimate > .shell > .estimate__grid > div > p { color: rgba(255,255,255,.78); } .estimate .eyebrow { color: var(--gold-lift); } .estimate .quote h3 { color: var(--ink); } .estimate__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } .estimate__points { margin: 1.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; } .estimate__points li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255,255,255,.78); font-size: .93rem; } .estimate__points svg { flex: none; width: 20px; height: 20px; color: var(--gold-lift); margin-top: .15rem; } .estimate__nap { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); font-style: normal; font-size: .9rem; line-height: 1.9; color: rgba(255,255,255,.7); } .estimate__nap a { color: #fff; font-weight: 700; } .estimate .quote { background: var(--paper); border-color: transparent; } /* ---------- 11. Responsive ---------------------------------------------- */ @media (max-width: 1024px) { .feature__inner, .feature--flip .feature__inner { grid-template-columns: 1fr; min-height: 0; } .feature--flip .feature__media { order: 0; } /* Stacked layout: the image sits above the copy, so sticky would trap it. */ .feature__media { position: relative; top: auto; height: clamp(340px, 52vw, 560px); min-height: 0; } .feature__copy, .feature:not(.feature--flip) .feature__copy, .feature--flip .feature__copy { padding-inline: var(--shell-pad); max-width: none; } .pricing__grid { grid-template-columns: 1fr; } .estimate__grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .areas-all__list { columns: 2 !important; } .strip { grid-template-columns: 1fr 1fr; } .strip figure:nth-child(3) { display: none; } /* nowrap matters: a wrapping *column* flexbox spills into a second column once the content is taller than the box, which pushed the buttons off-canvas to the right. */ .cta-slim .shell { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .cta-slim__actions { flex-direction: column; align-items: flex-start; gap: 1rem; } .cta-slim__actions .btn { width: 100%; text-align: center; justify-content: center; } } @media (max-width: 560px) { .areas-all__list { columns: 1 !important; } .strip { grid-template-columns: 1fr; } .strip figure:nth-child(3) { display: block; } /* Flag stays on the photo but drops to the bottom edge, so it reads as a caption on the image rather than a banner under the header. */ .feature__flag, .feature--flip .feature__flag { left: 0; right: auto; bottom: 0; max-width: none; padding: .85rem 1.1rem; border-radius: 0 var(--radius) 0 0; } .feature__flag strong { font-size: 1.3rem; } .feature__media { height: clamp(260px, 62vw, 400px); } }