/* ============================================================ ROOF WRANGLERS — FIGMA REDESIGN LAYER (2026-07) Loaded LAST. Implements the Figma homepage design language (file TNvq6Ebw2c35WTb8zRLoFU): black #231f20 + yellow #f9ec31, center-hung badge nav, dark storytelling hero, arrow-circle pill buttons, roofline dividers, topo footer. Interior pages inherit chrome + button + section restyles. ============================================================ */ /* off-canvas drawer must never create page h-scroll (FORGE F3) */ html { overflow-x: clip; } /* ============= ARROW-CIRCLE PILL BUTTONS ============= */ /* Markup: Labelsvg */ .btn-fig { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 24px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; text-transform: capitalize; letter-spacing: 0; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .btn-fig:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-fig .arr { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out); } .btn-fig:hover .arr { transform: rotate(45deg); } .btn-fig .arr svg { width: 15px; height: 15px; transform: rotate(-45deg); } .btn-fig-yellow { background: var(--color-rust); color: var(--color-ink); } .btn-fig-yellow:hover { background: var(--color-rust-deep); color: var(--color-ink); } .btn-fig-yellow .arr { background: var(--color-paper); color: var(--color-ink); } .btn-fig-outline { background: transparent; color: #fff; border-color: #fff; } .btn-fig-outline:hover { background: rgba(255,255,255,0.08); color: #fff; } .btn-fig-outline .arr { background: var(--color-paper); color: var(--color-gold-ink); } .btn-fig-white { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-sm); } .btn-fig-white:hover { color: var(--color-ink); } .btn-fig-white .arr { background: var(--color-ink); color: var(--color-rust); } .btn-fig-dark { background: var(--color-ink); color: #fff; } .btn-fig-dark:hover { color: #fff; } .btn-fig-dark .arr { background: var(--color-rust); color: var(--color-ink); } /* ============= HEADER: ANNOUNCEMENT + YELLOW NAV + HUNG BADGE ============= */ .fig-top { background: var(--color-navy); color: #fff; font-size: 0.9375rem; font-weight: 300; padding: 8px 0; } .fig-top .container-wide { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); } .fig-top a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .fig-top a:hover { color: var(--color-rust); } @media (max-width: 760px) { .fig-top .ft-left, .fig-top .ft-srv { display: none; } .fig-top .container-wide { justify-content: flex-end; } } .fig-nav { position: relative; z-index: 100; background: var(--color-rust); padding: 12px 0; transition: box-shadow var(--dur-base) var(--ease-out); } /* nav.js swaps to fixed once the announcement bar scrolls off (sticky would have zero stick-range inside the short .site-header) and pads */ .fig-nav.is-scrolled { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 8px 28px rgba(35,31,32,0.28); } .fig-nav .container-wide { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .fig-nav-l, .fig-nav-r { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); } /* reserve room around the center-hung badge */ .fig-nav-l { padding-right: 120px; } .fig-nav-r { padding-left: 120px; } .fig-nav a.nl { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; color: var(--color-ink); padding: 4px 0; position: relative; } .fig-nav a.nl:hover { color: var(--color-ink); } .fig-nav a.nl::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--color-ink); transition: right var(--dur-base) var(--ease-out); } .fig-nav a.nl:hover::after, .fig-nav a.nl[aria-current="page"]::after { right: 0; } .fig-nav .btn-nav-cta { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; padding: 9px 26px; border-radius: 3px; box-shadow: 3px 3px 0 var(--color-ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn-nav-cta:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--color-ink); color: var(--color-ink); } /* services dropdown */ .has-sub { position: relative; } .has-sub > a.nl { display: inline-flex; align-items: center; gap: 6px; } .has-sub .caret { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .sub { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 230px; background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--s-3); list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: all var(--dur-fast) var(--ease-out); } .sub::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* hover bridge */ .has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .sub li { margin: 0; } .sub a { display: block; padding: 9px 14px; border-radius: var(--radius-sm); color: var(--color-ink); font-weight: 500; font-size: 1rem; } .sub a:hover { background: var(--color-cream); color: var(--color-ink); } /* the badge, hung from the very top, centered; shrinks once the nav sticks */ .fig-badge { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 172px; height: 118px; z-index: 5; display: flex; align-items: flex-start; justify-content: center; filter: drop-shadow(0 10px 18px rgba(35,31,32,0.28)); transform-origin: top center; transition: transform var(--dur-base) var(--ease-out); } .fig-nav.is-scrolled .fig-badge { transform: translateX(-50%) scale(0.62); } .fig-badge .shape { position: absolute; inset: 0; } .fig-badge img.lg { position: relative; width: 92px; height: auto; margin-top: 8px; background: none; } .fig-badge:hover img.lg { transform: scale(1.03); transition: transform var(--dur-base) var(--ease-out); } /* mobile header */ .fig-nav .nav-toggle { display: none; background: none; border: none; color: var(--color-ink); cursor: pointer; padding: 4px; } .fig-nav .nav-toggle svg { width: 30px; height: 30px; } @media (max-width: 1080px) { .fig-nav-l, .fig-nav-r a.nl, .has-sub { display: none; } .fig-nav-r { padding-left: 0; margin-left: auto; } .fig-nav .nav-toggle { display: inline-flex; } .fig-nav .container-wide { min-height: 44px; } .fig-badge { left: var(--s-5); transform: none; transform-origin: top left; width: 128px; height: 88px; } .fig-badge img.lg { width: 68px; margin-top: 6px; } .fig-nav.is-scrolled .fig-badge { transform: scale(0.7); } } @media (max-width: 480px) { .fig-nav .btn-nav-cta { display: none; } } /* ============= HOME HERO ============= */ .hero-fig { position: relative; background: var(--color-navy); overflow: hidden; padding: clamp(150px, 16vw, 200px) 0 clamp(280px, 23vw, 350px); } .hero-fig .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; opacity: 0.42; /* the branded truck IS the trust signal — it must read (photo is already dark/moody) */ } .hero-fig .bgfade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,31,32,0.62) 0%, rgba(35,31,32,0.08) 36%, rgba(35,31,32,0.18) 100%); } .hero-fig .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .hero-fig .hero-head { order: 1; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(3.4rem, 7.4vw, 6.75rem); line-height: 1.08; color: #fff; max-width: 1080px; text-wrap: balance; text-shadow: 0 2px 30px rgba(23,19,20,0.45); } .hero-fig h1.hero-ribbon { order: 2; margin: 0; position: relative; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: 1.0625rem; line-height: 1.2; text-transform: none; color: var(--color-ink); background: var(--color-paper); border-top: 3px solid var(--color-rust); border-bottom: 3px solid var(--color-rust); padding: 9px 44px; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%); filter: drop-shadow(0 6px 14px rgba(23,19,20,0.3)); } .hero-fig .hero-bullets { order: 3; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } .hero-fig .hero-bullets span { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 1.0625rem; } .hero-fig .hero-bullets svg { width: 20px; height: 20px; color: var(--color-rust); flex-shrink: 0; } .hero-fig .hero-ctas { order: 4; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 0; } .hero-edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; pointer-events: none; } .hero-edge svg { width: 100%; height: clamp(48px, 6vw, 96px); display: block; } /* overlapping service cards — sit DEEP over the dark hero (Figma composition): the yellow sweep crosses behind the cards' lower third, not above them */ .hero-cards { position: relative; z-index: 3; margin-top: clamp(-250px, -16vw, -190px); padding-bottom: var(--s-8); } .hero-cards .hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; } .hc-card { background: var(--color-paper); border-radius: 14px; box-shadow: 0 24px 48px rgba(35,31,32,0.18); padding: 48px 44px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hc-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px rgba(35,31,32,0.24); } .hc-card.hc-mid:hover { transform: translateY(-56px) translateY(-6px); } .hc-card img.ic { width: 96px; height: 96px; background: none; margin-bottom: var(--s-5); } .hc-card h3 { font-size: 1.75rem; font-weight: 600; margin-bottom: var(--s-3); } .hc-card p { font-size: 0.9375rem; color: var(--color-muted); margin-bottom: var(--s-4); } .hc-card .more { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--color-ink); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; } .hc-card .more::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease-out); } .hc-card .more:hover::after { transform: translateX(4px); } .hc-card .btn-fig { margin-top: var(--s-4); } .hc-mid { transform: translateY(-56px); padding-bottom: 56px; } @media (max-width: 980px) { .hero-fig { padding-bottom: 210px; } .hero-cards { margin-top: -160px; } .hero-cards .hc-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .hc-mid { transform: none; order: -1; } .hero-fig .container { align-items: flex-start; text-align: left; } .hero-fig .hero-bullets { flex-direction: column; gap: 10px; align-items: flex-start; } .hero-fig .hero-ctas { justify-content: flex-start; } .hero-fig h1.hero-ribbon { font-size: 0.9375rem; padding: 8px 22px; } } /* ============= SECTION HEAD HELPERS ============= */ .sec-eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-gold-ink); margin-bottom: var(--s-3); } .sec-head-c { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); } .sec-head-c .lead { margin: 0 auto; max-width: 56ch; } .sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); flex-wrap: wrap; } .sec-head-row h2 { margin: 0; max-width: 22ch; } .bg-navy .sec-eyebrow, .standard .sec-eyebrow, .materials .sec-eyebrow, .consult .sec-eyebrow { color: var(--color-rust); } /* ============= CERT WALL (real logos) ============= */ .certwall { background: var(--color-paper); padding: var(--s-8) 0; } .certwall h2 { text-align: center; font-size: 1.75rem; font-weight: 400; text-transform: capitalize; margin-bottom: var(--s-6); } .certwall .row { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; } .certwall .row img { height: 40px; width: auto; background: none; filter: grayscale(0); opacity: 0.92; transition: opacity var(--dur-fast) var(--ease-out); } .certwall .row img:hover { opacity: 1; } .certwall .sep { width: 1px; height: 26px; background: var(--color-line); } .certwall .englert { font-family: var(--font-body); font-weight: 800; font-size: 1.375rem; letter-spacing: 0.02em; color: #1d1d1b; display: inline-flex; align-items: center; gap: 8px; } .certwall .englert::before { content: ""; width: 22px; height: 22px; background: #c8102e; clip-path: polygon(0 30%, 55% 0, 100% 22%, 100% 78%, 45% 100%, 0 70%); } .certwall .marq { display: flex; justify-content: center; } .certwall .marq .row[aria-hidden] { display: none; } @media (max-width: 700px) { /* credential marquee: nowrap rows auto-scroll, duplicate row makes the loop seamless */ .certwall .marq { justify-content: flex-start; overflow: hidden; gap: clamp(24px, 4vw, 48px); } .certwall .marq .row { flex-wrap: nowrap; flex-shrink: 0; animation: certmarq 22s linear infinite; } .certwall .marq .row[aria-hidden] { display: flex; } .certwall .marq:hover .row { animation-play-state: paused; } .certwall .row img { height: 30px; } .certwall .row img[style] { height: 34px !important; } @keyframes certmarq { to { transform: translateX(calc(-100% - clamp(24px, 4vw, 48px))); } } } /* ============= WHAT WE DO (staggered photo grid) ============= */ .wwd { background: var(--color-cream); } .wwd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } .wwd-col { display: flex; flex-direction: column; gap: var(--s-7); } .wwd-col:nth-child(1) { margin-top: 64px; } .wwd-col:nth-child(2) { margin-top: 32px; } .wwd-card img { border-radius: 12px; width: 100%; object-fit: cover; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .wwd-card:hover img { transform: translateY(-4px); box-shadow: var(--shadow-md); } .wwd-card.tall img { aspect-ratio: 4/4.4; } .wwd-card.wide img { aspect-ratio: 4/3; } .wwd-card h3 { font-size: 1.625rem; margin: var(--s-4) 0 var(--s-2); } .wwd-card p { font-size: 0.9375rem; color: var(--color-muted); margin-bottom: var(--s-3); } .wwd-card .more { font-weight: 600; font-size: 1rem; color: var(--color-gold-ink); display: inline-flex; align-items: center; gap: 8px; } .wwd-card .more::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease-out); } .wwd-card .more:hover::after { transform: translateX(4px); } @media (max-width: 900px) { .wwd-grid { grid-template-columns: 1fr 1fr; } .wwd-col:nth-child(3) { margin-top: 0; padding-top: 0; } } @media (max-width: 620px) { .wwd-grid { grid-template-columns: 1fr; } .wwd-col { margin-top: 0 !important; padding-top: 0 !important; } } /* ============= HOW WE WORK (numbered timeline) ============= */ .howwork { background: var(--color-cream); } .hw-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-7); counter-reset: hw; } .hw-steps::before { content: ""; position: absolute; top: 18px; left: 18px; right: 12.5%; height: 1.5px; background: var(--color-line); } .hw-step { position: relative; counter-increment: hw; text-align: left; padding-top: 58px; } .hw-step .dot { position: absolute; top: 0; left: 0; width: 37px; height: 37px; border-radius: 50%; background: var(--color-cream); border: 1.5px solid var(--color-line); display: grid; place-items: center; font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; color: var(--color-ink); } .hw-step.hot .dot { background: var(--color-gold-ink); border-color: var(--color-gold-ink); color: #fff; } .hw-step h3 { font-size: 1.375rem; margin-bottom: var(--s-2); } .hw-step p { font-size: 0.9375rem; color: var(--color-muted); margin: 0; } .hw-cta { text-align: center; margin-top: var(--s-7); } @media (max-width: 900px) { .hw-steps { grid-template-columns: 1fr 1fr; } .hw-steps::before { display: none; } } @media (max-width: 560px) { .hw-steps { grid-template-columns: 1fr; } } /* ============= ROOFLINE DIVIDERS ============= */ .roofline { line-height: 0; display: block; } .roofline svg { width: 100%; height: clamp(36px, 6vw, 72px); display: block; } /* ============= THE STANDARD (dark) ============= */ .standard { background: var(--color-navy); color: #fff; padding: var(--s-9) 0; } .standard h2 { color: #fff; max-width: 16ch; } .standard .lead { color: rgba(255,255,255,0.85); } .std-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-7); align-items: center; margin-top: var(--s-6); } .std-cards { display: flex; flex-direction: column; gap: var(--s-4); } .std-card { background: var(--color-paper); border: 2px solid var(--color-rust); border-radius: 10px; padding: var(--s-5) var(--s-6); box-shadow: 4px 4px 0 rgba(249,236,49,0.55); } .std-card h3 { font-size: 1.25rem; margin-bottom: var(--s-2); color: var(--color-ink); } .std-card p { margin: 0; font-size: 0.9375rem; color: var(--color-muted); } .std-photo { position: relative; } .std-photo img { border-radius: 10px; width: 100%; aspect-ratio: 8/9; object-fit: cover; border: 3px solid var(--color-rust); box-shadow: 12px 12px 0 var(--color-ember); } @media (max-width: 900px) { .std-grid { grid-template-columns: 1fr; } .std-photo { order: -1; max-width: 520px; } .std-photo img { aspect-ratio: 4/3; box-shadow: 8px 8px 0 var(--color-ember); } } /* ============= OWNER QUOTE ============= */ .owner-quote { display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--s-6); align-items: stretch; } .owner-quote .photo-wrap { position: relative; } .owner-quote img.photo { border-radius: 14px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5/5.3; } .owner-quote .photo-cta { position: absolute; right: -14px; bottom: 28px; } .oq-card { background: var(--color-rust); border-radius: 14px; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; } .oq-card .sec-eyebrow { color: var(--color-ink); opacity: 0.75; } .oq-card .qmark { font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 0.6; color: var(--color-ink); margin: var(--s-3) 0 var(--s-2); } .oq-card blockquote { margin: 0 0 var(--s-5); font-family: var(--font-body); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.5; color: var(--color-ink); font-style: normal; padding: 0; } .oq-card blockquote::before { content: none; } .oq-card .sig strong { display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.125rem; color: var(--color-ink); } .oq-card .sig span { font-size: 0.9375rem; color: rgba(35,31,32,0.72); } @media (max-width: 860px) { .owner-quote { grid-template-columns: 1fr; } .owner-quote img.photo { aspect-ratio: 4/3; } .owner-quote .photo-cta { right: var(--s-4); } } /* ============= SELECTED WORK (gallery) ============= */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-2); } .gallery-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform var(--dur-slow) var(--ease-out); } .gallery-item:hover img { transform: scale(1.04); } .gallery-item figcaption { position: absolute; inset: auto 0 0 0; padding: 48px var(--s-5) var(--s-4); background: linear-gradient(180deg, rgba(35,31,32,0) 0%, rgba(35,31,32,0.82) 100%); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; } .gallery-item figcaption span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; color: var(--color-rust); text-transform: capitalize; letter-spacing: 0.02em; margin-bottom: 2px; } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } } /* ============= MATERIALS (dark band + cream cards) ============= */ .materials { position: relative; background: var(--color-navy); color: #fff; overflow: hidden; padding: var(--s-9) 0; } .materials .bgimg { position: absolute; inset: 0 0 40% 0; background-size: cover; background-position: center 30%; opacity: 0.35; } .materials .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,31,32,0.25) 0%, var(--color-navy) 96%); } .materials .container { position: relative; z-index: 1; } .materials h2 { color: #fff; } .materials .lead { color: rgba(255,255,255,0.85); } .mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-7); } .mat-card { background: var(--color-cream); border-radius: 12px; padding: var(--s-6) var(--s-5); text-align: center; transition: transform var(--dur-base) var(--ease-out); } .mat-card:hover { transform: translateY(-4px); } .mat-card .mic { width: 64px; height: 64px; border-radius: 50%; background: var(--color-rust); display: grid; place-items: center; margin: 0 auto var(--s-4); } .mat-card .mic svg { width: 30px; height: 30px; color: var(--color-ink); } .mat-card h3 { font-size: 1.25rem; margin-bottom: var(--s-2); color: var(--color-ink); } .mat-card p { margin: 0; font-size: 0.875rem; color: var(--color-muted); } @media (max-width: 980px) { .mat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mat-grid { grid-template-columns: 1fr; } } /* ============= WHERE WE WORK (chips + map) ============= */ .where { background: var(--color-paper); } .where-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-7); align-items: center; } .chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--s-5) 0; } .chip { display: inline-flex; align-items: center; padding: 9px 22px; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; color: var(--color-ink); transition: all var(--dur-fast) var(--ease-out); } .chip:hover, .chip.on { background: var(--color-ink); border-color: var(--color-ink); color: #fff; transform: translateY(-1px); } .where .map { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-line); } .where .map svg, .where .map img { width: 100%; display: block; } .where .map .pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--color-ink); text-shadow: 0 1px 0 #fff, 0 0 6px #fff; pointer-events: none; } .where .map .pin i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--color-rust); border: 3.5px solid var(--color-ink); box-shadow: 0 2px 8px rgba(35,31,32,0.35); } .where .map .map-attr { position: absolute; right: 8px; bottom: 6px; font-size: 0.625rem; color: var(--color-muted); background: rgba(255,255,255,0.75); padding: 1px 6px; border-radius: 4px; } @media (max-width: 880px) { .where-grid { grid-template-columns: 1fr; } } /* ============= HONEST REVIEWS ============= */ .honest { background: var(--color-cream); } .honest-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-5); align-items: stretch; } .hr-photo { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; background: var(--color-paper); } .hr-photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; flex: 1; } .hr-photo .band { background: var(--color-rust); text-align: center; padding: var(--s-4) var(--s-4); } .hr-photo .band strong { display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.125rem; color: var(--color-ink); } .hr-photo .band span { font-size: 0.8125rem; color: rgba(35,31,32,0.72); } .hr-card { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 12px; padding: var(--s-6); display: flex; flex-direction: column; } .hr-card .stars { color: var(--color-gold-ink); letter-spacing: 3px; font-size: 1rem; margin-bottom: var(--s-3); } .hr-card p { font-size: 0.9375rem; color: var(--color-muted); flex: 1; } .hr-card .who strong { display: block; color: var(--color-ink); font-size: 1rem; } .hr-card .who span { font-size: 0.8125rem; color: var(--color-muted); } .hr-card .btn-fig { align-self: flex-start; margin-top: var(--s-4); } @media (max-width: 900px) { .honest-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } /* ============= CONSULTATION FORM BAND ============= */ .consult { position: relative; background: var(--color-navy); overflow: hidden; padding: var(--s-9) 0; } .consult .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center 70%; opacity: 0.85; } .consult .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35,31,32,0.28) 0%, rgba(35,31,32,0.06) 55%); } .consult .container { position: relative; z-index: 1; display: flex; justify-content: flex-end; } .consult .lead-form-wrap { width: min(520px, 100%); } .consult .lead-form { border-top: none; border-radius: 16px; padding: var(--s-7) var(--s-6); box-shadow: 0 32px 64px rgba(23,19,20,0.35); } .consult .lead-form h2 { font-size: 2rem; } .consult .lead-form .btn-fig { width: 100%; justify-content: center; } @media (max-width: 760px) { .consult .container { justify-content: center; } } /* ============= FAQ (Figma restyle) ============= */ .faq-list { max-width: 880px; gap: 0; } .faq-item { background: transparent; border: none; border-bottom: 1px solid var(--color-line); border-radius: 0; overflow: visible; } .faq-item:first-child { border-top: 1px solid var(--color-line); } .faq-item.is-open { box-shadow: none; border-color: var(--color-line); } .faq-q { padding: var(--s-5) var(--s-2); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); } .faq-a { padding: 0 var(--s-2) var(--s-5); } .faq-a p { position: relative; padding-left: var(--s-4); } .faq-a p::before { content: "\2022"; position: absolute; left: 2px; color: var(--color-gold-ink); } /* ============= FOOTER (topo + roofline + CTA row) ============= */ .footer { background: var(--color-navy); padding: 0; } .footer .topo { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%232e292a' stroke-width='1.4'%3E%3Cpath d='M60 560c-40-90 20-160 90-180s130-90 110-170S330 60 420 40s120 30 140 90'/%3E%3Cpath d='M20 560c-30-110 40-190 120-210s110-80 90-160S310 30 410 10'/%3E%3Cpath d='M110 560c-40-70 10-130 80-150s150-100 130-190S390 90 480 70s70 20 80 60'/%3E%3Cpath d='M170 560c-30-50 0-100 70-120s170-110 150-210'/%3E%3Cpath d='M0 480c60-10 110-60 100-130S150 220 240 190s90-90 80-150'/%3E%3Cpath d='M0 400c50-10 80-50 70-110S120 180 200 150 290 70 280 0'/%3E%3C/g%3E%3C/svg%3E"); } .footer-cta { position: relative; z-index: 1; padding: var(--s-8) 0 var(--s-6); } .footer-cta .container-wide { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; } .footer-cta h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--s-2); max-width: 24ch; } .footer-cta p { color: rgba(255,255,255,0.75); margin: 0; max-width: 52ch; font-size: 0.9375rem; } .footer-cta .btns { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; } .footer-cta .btns .btn-fig { justify-content: space-between; } .footer-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.15fr; gap: var(--s-6); padding: var(--s-7) 0; border-top: 1px solid rgba(255,255,255,0.09); } .footer-brand-col img.blogo { width: 120px; height: auto; background: none; margin-bottom: var(--s-4); } .footer-tag { color: rgba(255,255,255,0.72); font-size: 0.9375rem; } .footer .lic { color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 600; } .footer h4 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; margin-bottom: var(--s-4); } .footer-links-col ul { list-style: none; margin: 0; padding: 0; } .footer-links-col li { margin: 0 0 10px; } .footer a { color: rgba(255,255,255,0.72); } .footer a:hover { color: var(--color-rust); } .footer .fc-row { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,0.72); font-size: 0.9375rem; margin-bottom: 12px; } .footer .fc-row svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--color-rust); } .footer .social { display: flex; gap: var(--s-3); margin-top: var(--s-4); } .footer .social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: grid; place-items: center; } .footer .social a:hover { background: var(--color-rust); color: var(--color-ink); } .footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.09); padding: var(--s-4) 0 var(--s-5); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; color: rgba(255,255,255,0.55); font-size: 0.8125rem; } .footer > .container-wide { position: relative; z-index: 1; } @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .footer-cta .btns { width: 100%; } } /* ============= INNER HERO (interior pages) ============= */ .hero-inner { padding: clamp(120px, 13vw, 150px) 0 var(--s-8); background: var(--color-navy); } .hero-inner::before { background: var(--hero-inner-img, none); background-size: cover; background-position: center; opacity: 0.2; } .hero-inner .eyebrow { color: var(--color-rust); font-family: var(--font-script); letter-spacing: 0.01em; font-size: 1.625rem; text-transform: none; } .hero-inner h1 { font-weight: 500; font-size: clamp(2.5rem, 4.6vw, 4rem); } .breadcrumbs { color: rgba(255,255,255,0.65); } .breadcrumbs a { color: rgba(255,255,255,0.65); } .breadcrumbs a:hover { color: var(--color-rust); } /* ============= LEGACY CHROME NEUTRALIZED ============= */ .topbar, .nav:not(.fig-nav) { display: none; } /* replaced by .fig-top / .fig-nav */ .fab-cta { display: none; } /* redundant with sticky mobile bar + hero CTAs */ .footer-roofline { display: none; } /* replaced by inline .roofline divider */ /* old .btn still used on interior pages — align to Figma feel */ .btn { font-family: var(--font-body); text-transform: capitalize; letter-spacing: 0; font-weight: 500; } .btn-primary { background: var(--color-rust); color: var(--color-ink); } .btn-secondary { border-color: var(--color-ink); color: var(--color-ink); } /* eyebrow global restyle to Figma treatment */ .eyebrow { font-family: var(--font-body); letter-spacing: 0.24em; font-size: 0.875rem; color: var(--color-gold-ink); } .bg-navy .eyebrow, .bridge-section .eyebrow, .hero-photo .eyebrow { color: var(--color-rust); } /* mobile sticky CTA (kept — playbook guardrail) */ .mobile-cta { background: var(--color-navy); } .mobile-cta a.call { background: var(--color-rust); color: var(--color-ink); } /* ============================================================ TYPOGRAPHY v3 — match the hand-painted logo (2026-07-03) Sign-painter system: brush-script accents (like the wordmark) + bold slab display headings + Oswald workhorse subheads. ============================================================ */ h1, h2 { font-family: var(--font-slab); font-weight: 400; letter-spacing: 0.004em; line-height: 1.16; } h2 { font-size: 2.35rem; } h1 { font-size: 2.9rem; } .hero-fig .hero-head { font-family: var(--font-slab); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.14; letter-spacing: 0.004em; } .hero-inner h1 { font-family: var(--font-slab); font-weight: 400; font-size: clamp(2.1rem, 3.8vw, 3.3rem); } .certwall h2 { font-family: var(--font-display); font-weight: 500; } /* utility strip stays quiet */ .oq-card .qmark { font-family: var(--font-slab); font-weight: 400; } @media (max-width: 768px) { h2 { font-size: 1.9rem; } } /* script eyebrows — the logo's lettering, echoed */ .sec-eyebrow, .eyebrow { font-family: var(--font-script); font-size: 1.625rem; font-weight: 400; text-transform: none; letter-spacing: 0.01em; line-height: 1.1; color: var(--color-gold-ink); margin-bottom: var(--s-2); } .oq-card .sec-eyebrow { opacity: 1; color: var(--color-ink); } /* ============================================================ BUTTONS v3 — retro sign style: squared, ink border, hard offset shadow, pressed-down hover (matches badge + nav CTA) ============================================================ */ .btn-fig { border-radius: 8px; border: 2px solid var(--color-ink); padding: 11px 20px 11px 22px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; gap: 10px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .btn-fig .arr, .btn-fig .arr[class] { width: auto; height: auto; border-radius: 0; background: none; color: inherit; transition: transform var(--dur-fast) var(--ease-out); } .btn-fig .arr svg { width: 17px; height: 17px; transform: none; } .btn-fig:hover { transform: translate(2px, 2px); } .btn-fig:hover .arr { transform: translateX(3px) rotate(0); } .btn-fig-yellow { background: var(--color-rust); color: var(--color-ink); box-shadow: 3px 3px 0 var(--color-ink); } .btn-fig-yellow:hover { background: var(--color-rust-deep); box-shadow: 1px 1px 0 var(--color-ink); } .btn-fig-yellow .arr { background: none; color: var(--color-ink); } .btn-fig-white { background: var(--color-paper); color: var(--color-ink); box-shadow: 3px 3px 0 var(--color-ink); } .btn-fig-white:hover { box-shadow: 1px 1px 0 var(--color-ink); } .btn-fig-white .arr { background: none; color: var(--color-ink); } .btn-fig-outline { background: transparent; color: #fff; border-color: #fff; box-shadow: 3px 3px 0 rgba(249,236,49,0.85); } .btn-fig-outline:hover { background: rgba(255,255,255,0.08); box-shadow: 1px 1px 0 rgba(249,236,49,0.85); } .btn-fig-outline .arr { background: none; color: var(--color-rust); } .btn-fig-dark { background: var(--color-ink); color: var(--color-rust); border-color: var(--color-ink); box-shadow: 3px 3px 0 rgba(35,31,32,0.3); } .btn-fig-dark:hover { box-shadow: 1px 1px 0 rgba(35,31,32,0.3); } .btn-fig-dark .arr { background: none; color: var(--color-rust); } /* yellow + white buttons sitting ON dark sections: ember offset reads (ink doesn't) */ .hero-fig .btn-fig-yellow, .standard .btn-fig-yellow, .materials .btn-fig-yellow, .footer-cta .btn-fig-yellow { box-shadow: 3px 3px 0 var(--color-ember); } .hero-fig .btn-fig-yellow:hover, .standard .btn-fig-yellow:hover, .materials .btn-fig-yellow:hover, .footer-cta .btn-fig-yellow:hover { box-shadow: 1px 1px 0 var(--color-ember); } .footer-cta .btn-fig-white { box-shadow: 3px 3px 0 var(--color-ember); } .footer-cta .btn-fig-white:hover { box-shadow: 1px 1px 0 var(--color-ember); } /* nav CTA joins the same system */ .fig-nav .btn-nav-cta { border: 2px solid var(--color-ink); border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 20px; } /* legacy .btn (interior pages) aligned */ .btn { border-radius: 8px; border-width: 2px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9375rem; } .btn-primary { border-color: var(--color-ink); box-shadow: 3px 3px 0 var(--color-ink); } .btn-primary:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--color-ink); } .mobile-cta a { border-radius: 8px; font-family: var(--font-display); } /* ============================================================ INTERIOR HERO LEAD FORM (round 5) — every money page captures above the fold: copy left, compact form card right. ============================================================ */ .hero-inner.has-form { padding-bottom: var(--s-7); } .hero-inner .hi-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4vw, 64px); align-items: center; } .hero-inner .hi-form .lead-form-wrap { max-width: 460px; margin-left: auto; } .hero-inner .hi-form .lead-form { border-radius: 14px; border-top: none; border: 2px solid var(--color-ink); box-shadow: 5px 5px 0 var(--color-rust), 0 28px 56px rgba(23,19,20,0.4); padding: var(--s-6); } .hero-inner .hi-form .lead-form h2 { font-size: 1.5rem; margin-bottom: var(--s-2); } .hero-inner .hi-form .lead-form p.small { margin-bottom: var(--s-4); } .hero-inner .hi-form .field { margin-bottom: var(--s-3); } .hero-inner .hi-form .field input { padding: 9px var(--s-4); } .hero-inner .hi-form .field textarea { min-height: 60px; } .hero-inner .hi-form .btn-fig { width: 100%; justify-content: center; } .hero-inner .hi-form .privacy-note { margin-top: var(--s-2); } .hero-inner .hi-form .form-success { background: var(--color-paper); border-radius: 14px; border: 2px solid var(--color-ink); padding: var(--s-6); } @media (max-width: 920px) { .hero-inner .hi-grid { grid-template-columns: 1fr; } .hero-inner .hi-form .lead-form-wrap { margin: var(--s-2) auto 0; } } /* ============================================================ FLYOUT DRAWER v2 (round 6, tightened 6b) — one screen, no scrolling: compact badge, 2-column tap-target grid, CTAs pinned. ============================================================ */ .nav-drawer { background: var(--color-rust); color: var(--color-ink); display: flex; flex-direction: column; padding: var(--s-4) var(--s-5) var(--s-5); overflow-y: auto; } .nav-drawer .nd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); } .nav-drawer .nd-logo img { width: 72px; height: auto; background: none; } .nav-drawer button.close { position: static; width: 42px; height: 42px; border-radius: 8px; background: var(--color-ink); color: var(--color-rust); border: none; font-size: 1.375rem; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 rgba(35,31,32,0.25); } .nav-drawer .nd-lbl { display: block; font-family: var(--font-script); font-size: 1.375rem; color: rgba(35,31,32,0.75); margin: var(--s-3) 0 var(--s-2); } .nav-drawer ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nav-drawer li { border: none; margin: 0; } .nav-drawer ul a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 8px; background: rgba(35,31,32,0.07); color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.15; } .nav-drawer ul a::after { content: "\2192"; font-family: var(--font-body); opacity: 0.4; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav-drawer ul a:hover { background: rgba(35,31,32,0.12); color: var(--color-ink); } .nav-drawer ul a:hover::after { transform: translateX(3px); opacity: 1; } .nav-drawer .nd-ctas { margin-top: auto; padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .nav-drawer .nd-ctas .btn-fig { justify-content: space-between; } .nav-drawer .nd-ctas .btn-fig-dark { box-shadow: 3px 3px 0 var(--color-paper); } .nav-drawer .nd-ctas .btn-fig-dark:hover { box-shadow: 1px 1px 0 var(--color-paper); } @media (max-width: 340px) { .nav-drawer ul { grid-template-columns: 1fr; } } /* legacy `.nav-drawer a` (components.css) out-specifies .btn-fig — pin the CTAs back */ .nav-drawer .nd-ctas a.btn-fig { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px 11px 22px; font-size: 0.9375rem; font-family: var(--font-display); } .nav-drawer .nd-ctas a.btn-fig-white { color: var(--color-ink); } .nav-drawer .nd-ctas a.btn-fig-white .arr { color: var(--color-ink); } .nav-drawer .nd-ctas a.btn-fig-dark { color: var(--color-rust); } .nav-drawer .nd-ctas a.btn-fig-dark .arr { color: var(--color-rust); } /* ============= SERVICES DROPDOWN v2 (round 6c) — retro card ============= */ .sub { min-width: 252px; border-radius: 8px; border: 2px solid var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); padding: var(--s-3); display: flex; flex-direction: column; } .sub::after { content: "Our services"; display: block; order: -1; font-family: var(--font-script); font-size: 1.25rem; color: var(--color-gold-ink); padding: 2px 12px 8px; } .sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 6px; background: rgba(35,31,32,0.05); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 6px; } .sub li:last-child a { margin-bottom: 0; } .sub a::after { content: "\2192"; font-family: var(--font-body); opacity: 0.35; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .sub a:hover { background: var(--color-rust); color: var(--color-ink); } .sub a:hover::after { transform: translateX(3px); opacity: 1; } /* ============= HIDDEN STATES v2 (round 6d) ============= */ /* form success — the only green on the site was here; now on-brand */ .form-success .check-big { background: var(--color-rust); color: var(--color-ink); border: 2px solid var(--color-ink); box-shadow: 3px 3px 0 rgba(35,31,32,0.25); font-weight: 700; } /* focus ring still carried v1 yellow (#f0e430) — retoken */ .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(249,236,49,0.55); } /* brand text selection */ ::selection { background: var(--color-rust); color: var(--color-ink); } /* ============= WHY US (round 7 — restored from v1, v2-styled) ============= */ .whyus-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4vw, 64px); align-items: center; } .whyus-photo img { border-radius: 14px; width: 100%; aspect-ratio: 4/3.4; object-fit: cover; box-shadow: 10px 10px 0 var(--color-rust); border: 2px solid var(--color-ink); } .whyus-copy .lead, .whyus-copy p { color: var(--color-muted); } .whyus-copy p { margin-bottom: var(--s-4); } @media (max-width: 860px) { .whyus-grid { grid-template-columns: 1fr; } .whyus-photo { max-width: 520px; } .whyus-photo img { aspect-ratio: 4/3; box-shadow: 8px 8px 0 var(--color-rust); } }