/* Theme Name: We Level Homes Description: Custom lightweight theme for We Level Homes Foundation Repair. One theme, two design directions (data-theme a / b). Version: 1.0.0 Requires PHP: 8.0 Text Domain: welevelhomes */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: "Chivo"; src: url(assets/fonts/chivo-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url(assets/fonts/manrope-var.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Geologica"; src: url(assets/fonts/geologica-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url(assets/fonts/sourcesans3-var.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url(assets/fonts/sourcesans3-italic-var.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ----------------------------------------------------------- shared tokens */ :root { --container: 1200px; --gutter: clamp(16px, 4vw, 24px); --section-y: clamp(56px, 8vw, 112px); --radius: 10px; /* cards, photos, panels */ --radius-ctl: 8px; /* buttons, inputs */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --tap: 48px; --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17 -> 18 */ --fs-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 -> 20 */ --fs-small: 0.9375rem; /* 15 */ --warn: #A33A2B; --ok: #2E7D4F; } /* Version A: Night Shift. Client black, logo green and yellow as accents only. */ [data-theme="a"] { --font-display: "Chivo", "Arial Black", system-ui, sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --w-h1: 800; --w-h: 700; --track-h1: -0.025em; --track-h: -0.015em; --track-kicker: 0.06em; --lh-display: 1.08; --fs-h1: clamp(2.375rem, 1.55rem + 2.75vw, 4.25rem); /* 38 -> 68 */ --fs-h2: clamp(1.875rem, 1.62rem + 0.85vw, 2.25rem); /* 30 -> 36 */ --fs-h3: clamp(1.375rem, 1.31rem + 0.2vw, 1.5rem); /* 22 -> 24 */ --green: #02FF00; --green-dim: #1FB51E; --yellow: #FEF210; --yellow-deep: #E3D80A; --ink: #0B0B0B; --page: #0B0B0B; color-scheme: dark; scrollbar-color: #3a3a3a #0B0B0B; } /* Version B: Limestone & Live Oak. */ [data-theme="b"] { --font-display: "Geologica", system-ui, sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --w-h1: 700; --w-h: 600; --track-h1: -0.02em; --track-h: -0.01em; --track-kicker: 0.08em; --lh-display: 1.1; --fs-h1: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); /* 36 -> 64 */ --fs-h2: clamp(1.75rem, 1.53rem + 0.75vw, 2.125rem); /* 28 -> 34 */ --fs-h3: clamp(1.3125rem, 1.22rem + 0.3vw, 1.5rem); /* 21 -> 24 */ --limestone: #F4F1EA; --caliche: #E8E2D4; --caliche-deep: #D3CBB8; --oak: #1F4D3A; --oak-deep: #143527; --oak-tint: #DCE8DF; --honey: #E0A528; --honey-deep: #B8831A; --honey-tint: #FBF1DA; --ink: #161A18; --cream: #F7F3EA; --page: #F4F1EA; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); color-scheme: light; scrollbar-color: #C9C0AB #F4F1EA; } /* ------------------------------------------------------- tones, version A */ [data-theme="a"] [data-a="dark"], [data-theme="a"] [data-a="dark2"] { --bg: #0B0B0B; --fg: #F4F4F2; --mute: #B8B8B4; --head: #F4F4F2; --line: #2A2A2A; --card: #141414; --card-line: #2A2A2A; --link: #F4F4F2; --icon: var(--green); --num: var(--green); --kicker: var(--green); --btn-bg: var(--yellow); --btn-fg: #0B0B0B; --btn-hover: var(--yellow-deep); --btn2-fg: #F4F4F2; --btn2-line: rgba(244, 244, 242, 0.7); --btn2-hover: rgba(244, 244, 242, 0.08); --solid-bg: #F4F4F2; --solid-fg: #0B0B0B; --focus: var(--green); --frame: rgba(2, 255, 0, 0.6); --input-bg: #1E1E1E; --input-line: #4A4A48; --accent-input: var(--green); } [data-theme="a"] [data-a="dark2"] { --bg: #141414; --card: #1E1E1E; --line: #2E2E2E; --input-bg: #0B0B0B; } [data-theme="a"] [data-a="white"], [data-theme="a"] [data-a="paper"] { --bg: #FEFEFE; --fg: #0B0B0B; --mute: #4A4A48; --head: #0B0B0B; --line: #DCDCD7; --card: #FFFFFF; --card-line: #DCDCD7; --link: #0B0B0B; --icon: #0B0B0B; --num: #0B0B0B; --kicker: #4A4A48; --btn-bg: #0B0B0B; --btn-fg: #FEFEFE; --btn-hover: #2A2A2A; --btn2-fg: #0B0B0B; --btn2-line: #0B0B0B; --btn2-hover: rgba(11, 11, 11, 0.05); --solid-bg: #0B0B0B; --solid-fg: #FEFEFE; --focus: #0B0B0B; --frame: transparent; --input-bg: #FFFFFF; --input-line: #8A8A85; --accent-input: #0B0B0B; } [data-theme="a"] [data-a="paper"] { --bg: #F2F2EF; --card-line: #D8D8D2; } [data-theme="a"] [data-a="white"], [data-theme="a"] [data-a="paper"], [data-theme="a"] [data-a="yellow"] { color-scheme: light; } [data-theme="a"] [data-a="yellow"] { --bg: var(--yellow); --fg: #0B0B0B; --mute: #2A2A28; --head: #0B0B0B; --line: rgba(11, 11, 11, 0.2); --icon: #0B0B0B; --link: #0B0B0B; --solid-bg: #0B0B0B; --solid-fg: #FEFEFE; --btn2-fg: #0B0B0B; --btn2-line: #0B0B0B; --btn2-hover: rgba(11, 11, 11, 0.08); --focus: #0B0B0B; } /* ------------------------------------------------------- tones, version B */ [data-theme="b"] [data-b="limestone"], [data-theme="b"] [data-b="caliche"], [data-theme="b"] [data-b="paper"] { --bg: var(--limestone); --fg: var(--ink); --mute: #4E5651; --head: var(--oak); --line: var(--caliche-deep); --card: #FFFFFF; --card-line: var(--caliche); --link: var(--oak); --icon: var(--oak); --num: var(--oak); --kicker: var(--oak); --btn-bg: var(--honey); --btn-fg: var(--ink); --btn-hover: var(--honey-deep); --btn2-fg: var(--oak); --btn2-line: var(--oak); --btn2-hover: rgba(31, 77, 58, 0.07); --solid-bg: var(--oak); --solid-fg: var(--cream); --focus: var(--oak); --frame: var(--caliche-deep); --input-bg: #FFFFFF; --input-line: #9C9480; --accent-input: var(--oak); } [data-theme="b"] [data-b="limestone"] { background-image: var(--grain); } [data-theme="b"] [data-b="caliche"] { --bg: var(--caliche); --card-line: var(--caliche-deep); } [data-theme="b"] [data-b="paper"] { --bg: #FFFFFF; } [data-theme="b"] [data-b="oak"] { --bg: var(--oak-deep); --fg: var(--cream); --mute: #C9CFC6; --head: var(--cream); --line: rgba(247, 243, 234, 0.16); --card: var(--oak); --card-line: rgba(247, 243, 234, 0.14); --link: var(--cream); --icon: var(--honey); --num: var(--honey); --kicker: var(--honey); --btn-bg: var(--honey); --btn-fg: var(--ink); --btn-hover: #EDB848; --btn2-fg: var(--cream); --btn2-line: rgba(247, 243, 234, 0.75); --btn2-hover: rgba(247, 243, 234, 0.08); --solid-bg: var(--cream); --solid-fg: var(--oak-deep); --focus: var(--honey); --frame: rgba(247, 243, 234, 0.2); --input-bg: #FFFFFF; --input-line: #9C9480; --accent-input: var(--oak); } [data-theme="b"] [data-b="honey"] { --bg: var(--honey); --fg: var(--ink); --mute: #2E2A20; --head: var(--ink); --line: rgba(22, 26, 24, 0.2); --icon: var(--ink); --link: var(--ink); --solid-bg: var(--oak); --solid-fg: var(--cream); --btn2-fg: var(--ink); --btn2-line: var(--ink); --btn2-hover: rgba(22, 26, 24, 0.08); --focus: var(--ink); } [data-a], [data-b] { background-color: var(--bg); color: var(--fg); } /* -------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 120px; } body { margin: 0; background: var(--page); color: var(--fg, #161A18); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; } .tnum { font-variant-numeric: tabular-nums; } .icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; } .icon--sm { width: 0.9em; height: 0.9em; } :focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; } [data-theme="a"] ::selection { background: var(--green); color: #0B0B0B; } [data-theme="b"] ::selection { background: var(--oak-tint); color: var(--ink); } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: #fff; color: #000; border-radius: var(--radius-ctl); font-weight: 700; } .skip-link:focus { top: 12px; } main:focus { outline: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* -------------------------------------------------------------- typography */ .h1, .h2, .h3, h1, h2, h3 { font-family: var(--font-display); color: var(--head); text-wrap: balance; } .h1 { font-size: var(--fs-h1); font-weight: var(--w-h1); line-height: var(--lh-display); letter-spacing: var(--track-h1); } .h2 { font-size: var(--fs-h2); font-weight: var(--w-h); line-height: 1.15; letter-spacing: var(--track-h); } .h3 { font-size: var(--fs-h3); font-weight: var(--w-h); line-height: 1.25; letter-spacing: -0.005em; } .lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--fg); max-width: 64ch; text-wrap: pretty; } p { text-wrap: pretty; } /* ------------------------------------------------------------------ layout */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 860px; } .photo { position: relative; } .photo img { width: 100%; border-radius: var(--radius); object-fit: cover; } .photo figcaption, figure figcaption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--mute); } [data-theme="a"] [data-a="dark"] .photo img, [data-theme="a"] [data-a="dark2"] .photo img { outline: 1px solid var(--frame); outline-offset: -1px; } [data-theme="b"] .photo img { box-shadow: 0 0 0 2px var(--frame); } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: var(--radius-ctl); border: 2px solid transparent; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); touch-action: manipulation; } .btn:active { transform: scale(0.97); } .btn .icon { width: 20px; height: 20px; } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); } .btn--ghost { background: transparent; color: var(--btn2-fg); border-color: var(--btn2-line); } .btn--solid { background: var(--solid-bg); color: var(--solid-fg); } .btn--sm { min-height: 48px; padding: 10px 18px; font-size: 1rem; } .btn--block { width: 100%; } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--btn-hover); } .btn--ghost:hover { background: var(--btn2-hover); } .btn--solid:hover { opacity: 0.9; } } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 700; color: var(--link); text-decoration: none; } .text-link .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); } .text-link span, .text-link { text-decoration-line: none; } @media (hover: hover) and (pointer: fine) { .text-link:hover { text-decoration: underline; } .text-link:hover .icon { transform: translateX(3px); } } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-small); font-weight: 600; line-height: 1.2; } .chips .icon { width: 18px; height: 18px; color: var(--icon); } .checks { display: grid; gap: 10px; } .checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; } .checks .icon { width: 22px; height: 22px; margin-top: 3px; color: var(--icon); } /* ---------------------------------------------------------- event banner */ .event-banner { font-size: var(--fs-small); font-weight: 600; } [data-theme="a"] .event-banner { background: #141414; color: var(--yellow); } [data-theme="b"] .event-banner { background: var(--honey-tint); color: var(--ink); } .event-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; } .event-banner__link { color: inherit; text-decoration: none; padding-block: 10px; } .event-banner__link:hover { text-decoration: underline; } .event-banner__close { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -12px; background: none; border: 0; } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow 200ms ease; } .site-header.is-stuck { box-shadow: 0 1px 0 var(--line); } .utility { display: none; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--mute); } .utility__inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 24px; } .utility__meta { display: flex; gap: 24px; } .utility__meta > * { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .utility__meta .icon { width: 16px; height: 16px; color: var(--icon); } .utility__links { display: flex; gap: 20px; } .utility__links a { color: inherit; text-decoration: none; } .utility__links a:hover, .utility__meta a:hover { color: var(--fg); text-decoration: underline; } .masthead { display: flex; align-items: center; gap: 12px; min-height: 68px; } .brand { display: block; flex: none; } .brand img { width: 128px; height: auto; } .nav { display: none; margin-inline: auto; } .nav__list { display: flex; align-items: center; gap: 2px; } .nav__list > li > a, .nav__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 11px; font-size: 1rem; font-weight: 700; color: var(--fg); text-decoration: none; background: none; border: 0; border-radius: var(--radius-ctl); position: relative; white-space: nowrap; } [data-theme="b"] .site-header .nav__list > li > a, [data-theme="b"] .site-header .nav__toggle { color: var(--oak); } .nav__list > li > a::after, .nav__toggle::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 8px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); } [data-theme="a"] .nav__list > li > a::after, [data-theme="a"] .nav__toggle::after { background: var(--green); } .nav__list > li > a[aria-current="page"]::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .nav__list > li > a:hover::after, .nav__toggle:hover::after { transform: scaleX(1); } } .nav__toggle .icon { transition: transform 200ms var(--ease-out); } .nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .nav__has-menu { position: relative; } .nav__menu { position: absolute; top: calc(100% + 6px); left: -8px; width: 330px; padding: 10px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(-4px); transform-origin: top left; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms; } .nav__toggle[aria-expanded="true"] + .nav__menu, .nav__has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { .nav__has-menu:hover .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } } .nav__menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; font-weight: 600; color: var(--fg); text-decoration: none; } .nav__menu a:hover { background: var(--btn2-hover); } .nav__menu-secondary { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .masthead__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .phone-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 700; font-size: 1.0625rem; color: var(--fg); text-decoration: none; white-space: nowrap; } .phone-link .icon { width: 22px; height: 22px; color: var(--icon); } .masthead__cta { display: none; } .menu-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); min-width: var(--tap); justify-content: center; padding: 0 10px; background: none; border: 1px solid var(--line); border-radius: var(--radius-ctl); font-weight: 700; font-size: var(--fs-small); } .menu-toggle .icon { width: 24px; height: 24px; } .menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; } .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; } body.menu-open { overflow: hidden; } @media (min-width: 400px) { .brand img { width: 140px; } } @media (min-width: 720px) { .masthead__cta { display: inline-flex; } } @media (min-width: 1024px) { .utility { display: block; } } @media (min-width: 1180px) { .masthead { min-height: 76px; } .brand img { width: 150px; } .nav { display: block; } .menu-toggle { display: none; } } @media (max-width: 479px) { .menu-toggle__label { display: none; } .masthead__actions { gap: 6px; } .phone-link { font-size: 1rem; } } @media (max-width: 359px) { .phone-link span { display: none; } } @media (min-width: 1180px) and (max-width: 1379px) { .nav__list > li > a, .nav__toggle { padding: 0 8px; font-size: 0.96875rem; } .nav__list > li > a::after, .nav__toggle::after { left: 8px; right: 8px; } .masthead__actions .phone-link { font-size: 1rem; } } /* -------------------------------------------------------------------- hero */ .hero { padding-block: clamp(16px, 3vw, 40px) clamp(40px, 6vw, 80px); } .hero__grid { display: grid; gap: 20px; } .hero__plate { border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 22px; justify-content: center; } .hero__kicker { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--kicker); line-height: 1.4; } .hero__title { max-width: 14ch; } [data-theme="b"] .hero__title::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--honey); } .hero__sub { font-size: var(--fs-lede); line-height: 1.6; max-width: 58ch; } .hero__plate .chips { margin-top: 4px; } .hero__plate .btn { padding-inline: 20px; } @media (max-width: 479px) { .hero__plate .btn { width: 100%; } } .hero__media { display: flex; flex-direction: column; } .hero__media img { aspect-ratio: 4 / 3; object-position: 50% 35%; } @media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .hero__media img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; } } /* --------------------------------------------------------------- trust bar */ .trust { padding-block: clamp(40px, 5vw, 64px); } .trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .trust__cell { display: grid; align-content: start; gap: 6px; padding: 20px; } .trust__big { font-family: var(--font-display); font-weight: var(--w-h1); font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.625rem); line-height: 1.05; letter-spacing: var(--track-h1); color: var(--num); } .trust__small { font-size: 1.0625rem; line-height: 1.45; color: var(--mute); align-self: start; } .trust__big { align-self: end; } .trust__line { margin-top: 20px; font-weight: 600; } [data-theme="a"] .trust__cell { border-top: 2px solid var(--fg); padding-inline: 0 16px; } [data-theme="b"] .trust__cell { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } @media (min-width: 900px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 20px; } .trust__cell { grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; } } /* ---------------------------------------------------------------- problems */ .problems__grid { display: grid; gap: 12px; } .problems__grid > li { display: flex; } .problem, .problems__unsure { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); color: var(--fg); text-decoration: none; transition: border-color 200ms ease; } .problem__icon { width: 34px; height: 34px; color: var(--icon); } .problem__title { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; color: var(--fg); } .problem__text { color: var(--mute); font-size: 1.0625rem; line-height: 1.55; } .problem__more { margin-top: auto; padding-top: 6px; color: var(--icon); } .problem__more .icon { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .problem:hover { border-color: var(--fg); } [data-theme="b"] .problem:hover { border-color: var(--honey); } [data-theme="b"] .problem:hover .problem__icon { color: var(--honey-deep); } .problem:hover .problem__more .icon { transform: translateX(4px); } } .problems__unsure { justify-content: space-between; } .problems__unsure .problem__title { font-family: var(--font-display); font-weight: var(--w-h); font-size: 1.3125rem; color: var(--head); } .problems__unsure .btn { align-self: flex-start; } @media (max-width: 639px) { .problem { display: grid; grid-template-columns: 34px 1fr 22px; gap: 4px 14px; padding: 18px; align-items: start; } .problem__icon { grid-row: span 2; width: 30px; height: 30px; } .problem__text { grid-column: 2; } .problem__more { grid-column: 3; grid-row: 1; padding-top: 2px; margin: 0; } .problems__grid { gap: 10px; } } @media (min-width: 640px) { .problems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .problems__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* ---------------------------------------------------------------- services */ .services__grid { display: grid; gap: 16px; } .services__grid > li { display: flex; } .svc { flex: 1; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); color: var(--fg); text-decoration: none; overflow: hidden; } .svc__media { display: block; overflow: hidden; } .svc__media img { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none !important; outline: 0 !important; transition: transform 400ms var(--ease-out); } .svc__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; flex: 1; } .svc__title { color: var(--head); } .svc__text { color: var(--mute); } .svc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--link); } [data-theme="a"] .svc__more .icon { color: var(--green); } .svc__more .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .svc:hover .svc__media img { transform: scale(1.03); } .svc:hover .svc__more .icon { transform: translateX(4px); } .svc:hover { border-color: var(--line); } } .services__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 28px; } .services__more span { color: var(--mute); } .services__more a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; } @media (max-width: 639px) { .svc { flex-direction: row; } .svc__media { flex: 0 0 36%; position: relative; min-height: 150px; } .svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .svc__body { padding: 16px; gap: 6px; } .svc__title { font-size: 1.1875rem; } .svc__text { font-size: 1.0625rem; line-height: 1.5; } .services__grid { gap: 12px; } } @media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } /* ------------------------------------------------------------------ why us */ .why__grid { display: grid; gap: 28px; counter-reset: why; } .why__item { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); } .why__num { font-family: var(--font-display); font-weight: var(--w-h1); font-size: 2.25rem; line-height: 1; color: var(--num); } .why__title { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; color: var(--head); } .why__figures { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px); } .why__photo img { aspect-ratio: 4 / 3; object-position: 50% 40%; } @media (min-width: 768px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } } @media (min-width: 1024px) { .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; } .why__figures { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; } .why__figures { align-items: start; } .why__photo img { aspect-ratio: 4 / 3.08; object-position: 50% 28%; } } /* ------------------------------------------------------------- pier figure */ .pier-figure { display: flex; flex-direction: column; } .pier-figure__art { position: relative; border-radius: var(--radius); background: #FFFFFF; overflow: hidden; border: 1px solid var(--card-line); } .pier-figure__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; } .pier-figure__labels li { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); border: 1px solid #D8D2C4; font-size: clamp(0.75rem, 0.6rem + 0.5vw, 0.9375rem); font-weight: 700; line-height: 1.25; color: #161A18; white-space: nowrap; } .pier-figure__callout { left: auto !important; right: 3%; border-color: #161A18 !important; } @media (max-width: 639px) { .pier-figure__labels li { padding: 2px 6px; font-size: 0.6875rem; } } [data-theme="b"] .pier-figure__callout { background: var(--honey-tint) !important; } .pier-figure--small { max-width: 360px; } .pier-figure figcaption { color: var(--mute); } .reveal-ready [data-reveal="pier"] img { clip-path: inset(0 0 100% 0); } .reveal-ready [data-reveal="pier"] .pier-figure__labels li { opacity: 0; } .reveal-ready [data-reveal="pier"].is-in img { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out); } .reveal-ready [data-reveal="pier"].is-in .pier-figure__labels li { opacity: 1; transition: opacity 240ms ease-out; transition-delay: calc(700ms + var(--i, 0) * 60ms); } .pier-figure__labels li:nth-child(2) { --i: 1; } .pier-figure__labels li:nth-child(3) { --i: 2; } .pier-figure__labels li:nth-child(4) { --i: 3; } .pier-figure__labels li:nth-child(5) { --i: 4; } /* ----------------------------------------------------------------- process */ .process__grid { display: grid; gap: 40px; } .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; position: relative; padding-bottom: 28px; } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; background: var(--line); } .step:last-child::before { display: none; } .step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--num); font-family: var(--font-display); font-weight: var(--w-h); font-size: 1.25rem; color: var(--num); background: var(--bg); } [data-theme="b"] [data-b="limestone"] .step__num, [data-theme="b"] [data-b="caliche"] .step__num { background: var(--oak); color: var(--cream); border-color: var(--oak); } .step__title { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; margin: 10px 0 4px; color: var(--head); } .process__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; } .process__media img { aspect-ratio: 4 / 3; } .process__link { grid-column: 1 / -1; } @media (min-width: 1024px) { .process__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } .process__media { position: sticky; top: 140px; } } /* ------------------------------------------------------------------- lanes */ .lanes__grid { display: grid; gap: 40px; } .lane { display: grid; gap: 14px; align-content: start; } .lane__media img { aspect-ratio: 3 / 2; } .lane .h3 { margin-top: 8px; } @media (min-width: 900px) { .lanes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } } /* ---------------------------------------------------------------- warranty */ .warranty__grid { display: grid; gap: 20px; } .warranty__card { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); } [data-theme="a"] .warranty__card { border: 1px solid var(--yellow); } [data-theme="b"] .warranty__card { background: var(--oak); border: 1px solid var(--card-line); } .warranty__label { font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; color: var(--mute); } .warranty__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--font-display); font-weight: var(--w-h1); line-height: 0.95; } .warranty__big .tnum { font-size: clamp(3.25rem, 2rem + 4.5vw, 6rem); letter-spacing: -0.03em; color: var(--fg); } [data-theme="b"] .warranty__big .tnum { color: var(--honey); } .warranty__unit { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); font-weight: var(--w-h); color: var(--fg); } .warranty__line { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: var(--fs-lede); } @media (min-width: 900px) { .warranty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } /* ---------------------------------------------------------------- referral */ .referral { padding-block: calc(var(--section-y) * 0.6); } .referral__panel { display: grid; gap: 22px; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius); } .referral__icon { width: 56px; height: 56px; color: var(--icon); } .referral__copy { display: grid; gap: 12px; } .referral__copy p { font-size: var(--fs-lede); max-width: 60ch; } @media (min-width: 1024px) { .referral__panel { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 36px; } .referral__actions { flex-direction: column; } } /* ------------------------------------------------------------------- about */ .about__grid { display: grid; gap: 32px; align-items: center; } .about__media img { aspect-ratio: 4 / 5; object-position: 50% 30%; max-height: 640px; } .about__copy { display: grid; gap: 18px; } .about__sign { font-family: var(--font-display); font-weight: var(--w-h); font-size: 1.25rem; color: var(--head); } @media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } } /* -------------------------------------------------------------------- area */ .area__grid { display: grid; gap: 40px; } .sa-map { margin: 0; } .sa-map__svg { width: 100%; height: auto; border-radius: var(--radius); } .sa-map .county { stroke-width: 1.2; stroke-linejoin: round; } .sa-map .county-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; } .sa-map .city-label { font-family: var(--font-body); font-weight: 700; font-size: 15px; paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; } .sa-map .city-label--t0 { font-size: 19px; } .sa-map .loop-ring, .sa-map .dist-ring { fill: none; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; } .sa-map .dist-ring { stroke-dasharray: 2 6; opacity: 0.8; } .sa-map .ring-note, .sa-map .ring-label { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; font-size: 12px; } .sa-map .ring-label { font-size: 14px; } [data-theme="a"] .sa-map .loop-ring, [data-theme="a"] .sa-map .dist-ring { stroke: #F4F4F2; } [data-theme="a"] .sa-map .ring-note, [data-theme="a"] .sa-map .ring-label { fill: #B8B8B4; } [data-theme="b"] .sa-map .loop-ring { stroke: var(--honey); } [data-theme="b"] .sa-map .dist-ring { stroke: #5E584A; } [data-theme="b"] .sa-map .ring-note, [data-theme="b"] .sa-map .ring-label { fill: #5E584A; } @media (max-width: 639px) { .sa-map .city-label--t1, .sa-map .city-leader { display: none; } .sa-map .city-label--t0 { font-size: 34px; } .sa-map .ring-note, .sa-map .ring-label { font-size: 26px; } .sa-map .loop-ring, .sa-map .dist-ring { stroke-width: 2; } } .sa-map .city-leader { fill: none; stroke-width: 1.5; stroke: currentColor; opacity: 0.7; } [data-theme="a"] .sa-map .city-leader { stroke: #F4F4F2; } [data-theme="b"] .sa-map .city-leader { stroke: var(--ink); } [data-theme="a"] .sa-map__svg { background: #0B0B0B; } [data-theme="a"] .sa-map .county { fill: #1A1A1A; stroke: #3A3A3A; } [data-theme="a"] .sa-map .county--bexar { fill: rgba(2, 255, 0, 0.14); stroke: var(--green); stroke-width: 2; } [data-theme="a"] .sa-map .county-label { fill: #8C8C88; } [data-theme="a"] .sa-map .city-label { fill: #F4F4F2; stroke: #0B0B0B; } [data-theme="a"] .sa-map .city--t0 { fill: #F4F4F2; stroke: #0B0B0B; stroke-width: 2; } [data-theme="a"] .sa-map .city--t1 { fill: var(--green); } [data-theme="a"] .sa-map .city--t2 { fill: #B8B8B4; } [data-theme="b"] .sa-map__svg { background: #FFFFFF; box-shadow: 0 0 0 1px var(--caliche-deep); } [data-theme="b"] .sa-map .county { fill: var(--limestone); stroke: var(--caliche-deep); } [data-theme="b"] .sa-map .county--bexar { fill: var(--oak); stroke: var(--oak-deep); stroke-width: 2; } [data-theme="b"] .sa-map .county-label { fill: #7A7466; } [data-theme="b"] .sa-map .city-label { fill: var(--ink); stroke: rgba(255, 255, 255, 0.92); } [data-theme="b"] .sa-map .city--t0 { fill: var(--honey); stroke: var(--ink); stroke-width: 2; } [data-theme="b"] .sa-map .city--t1 { fill: var(--honey); stroke: var(--oak-deep); stroke-width: 1.5; } [data-theme="b"] .sa-map .city--t2 { fill: var(--oak); } .sa-map__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; } .sa-map__legend span { display: inline-flex; align-items: center; gap: 8px; } .sa-map__key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; } .sa-map__key--county { border-radius: 3px; } .sa-map__key--loop { width: 22px; height: 0; border-radius: 0; border-top: 2px dashed currentColor; } [data-theme="a"] .sa-map__key--county { background: rgba(2, 255, 0, 0.3); border: 1px solid var(--green); } [data-theme="a"] .sa-map__key--t1 { background: var(--green); } [data-theme="a"] .sa-map__key--t2 { background: #B8B8B4; width: 9px; height: 9px; } [data-theme="b"] .sa-map__key--county { background: var(--oak); } [data-theme="b"] .sa-map__key--t1 { background: var(--honey); border: 1.5px solid var(--oak-deep); } [data-theme="b"] .sa-map__key--t2 { background: var(--oak); width: 9px; height: 9px; } .area__lists { display: grid; gap: 24px; align-content: start; } .area__ring-title { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; color: var(--head); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .area__cities { display: flex; flex-wrap: wrap; gap: 0 18px; } .area__cities a { display: inline-flex; align-items: center; min-height: 40px; color: var(--fg); } @media (min-width: 1024px) { .area__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } } /* ----------------------------------------------------------------- reviews */ .reviews__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-lede); font-weight: 700; } .reviews__stars { display: inline-flex; gap: 2px; color: var(--fg); } [data-theme="b"] .reviews__stars { color: var(--honey); } .reviews__stars .icon { width: 22px; height: 22px; } .review-slot { border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-line); padding: clamp(24px, 4vw, 40px); } .review-slot__fallback { display: grid; gap: 16px; justify-items: start; } .review-slot__g { width: 36px; height: 36px; color: var(--icon); } .review-slot__fallback p { font-size: var(--fs-lede); max-width: 52ch; } .reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 16px; color: var(--mute); } /* --------------------------------------------------------------------- faq */ .faq__grid { display: grid; gap: 8px; } .accordion { border-top: 1px solid var(--line); } .acc { border-bottom: 1px solid var(--line); } .acc__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; line-height: 1.4; color: var(--head); } .acc__q::-webkit-details-marker { display: none; } .acc__icon { width: 24px; height: 24px; color: var(--icon); transition: transform 200ms var(--ease-out); } .acc[open] .acc__icon { transform: rotate(180deg); } .acc__a { display: grid; gap: 8px; padding: 0 0 22px; max-width: 70ch; } .acc[open] .acc__a { animation: acc-in 220ms var(--ease-out); } @keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (min-width: 1024px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } .faq .section-head { position: sticky; top: 140px; align-self: start; } } /* --------------------------------------------------------------- final cta */ .final__grid { display: grid; gap: 40px; align-items: start; } .final__copy { display: grid; gap: 20px; } .final__hours { color: var(--mute); } .final__checks { font-size: var(--fs-lede); } .nowrap { white-space: nowrap; } .form-panel { border-radius: var(--radius); padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 16px; } [data-theme="b"] .form-panel { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); border: 1px solid var(--caliche); } .form-panel__note { color: var(--mute); font-size: var(--fs-small); } @media (min-width: 1024px) { .final__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } .final__copy { position: sticky; top: 140px; } } .cta-band__inner { display: grid; gap: 24px; align-items: center; } @media (min-width: 1024px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } } /* -------------------------------------------------------------- fluent forms */ .wlh-form .ff-el-group { margin-bottom: 18px; } .wlh-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .wlh-form .ff-el-input--content { position: relative; } .wlh-form .ff-el-tooltip { display: none; } .wlh-form .ff-el-input--label { margin-bottom: 8px; } .wlh-form .ff-el-input--label label { font-weight: 700; font-size: 1.0625rem; color: var(--fg); } .wlh-form .ff-el-is-required.asterisk-right label::after { content: " *"; color: var(--warn); } .wlh-form .ff-el-form-control { display: block; width: 100%; min-height: 52px; padding: 12px 14px; font-size: 1.0625rem; line-height: 1.4; color: var(--fg); background: var(--input-bg); border: 1.5px solid var(--input-line); border-radius: var(--radius-ctl); transition: border-color 160ms ease, box-shadow 160ms ease; } .wlh-form textarea.ff-el-form-control { min-height: 120px; resize: vertical; } .wlh-form select.ff-el-form-control { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .wlh-form .ff-el-form-control:focus { outline: none; border-color: var(--accent-input); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-input) 30%, transparent); } .wlh-form .ff-el-form-control::placeholder { color: var(--mute); opacity: 1; } .wlh-form .ff-el-form-check { margin-bottom: 4px; } .wlh-form .ff-el-form-check-label { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; } .wlh-form .ff-el-form-check-input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent-input); } .wlh-form .ff_list_inline .ff-el-form-check, .wlh-form .ff-el-form-check.ff-el-form-check-inline { display: inline-block; margin-right: 18px; } .wlh-form .ff-el-help-message { margin-top: 6px; font-size: var(--fs-small); color: var(--mute); } .wlh-form .error, .wlh-form .text-danger { margin-top: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--warn); } .wlh-form .ff-el-is-error .ff-el-form-control { border-color: var(--warn); } .wlh-form .ff-t-container { display: grid; gap: 0 16px; } @media (min-width: 640px) { .wlh-form .ff-t-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wlh-form .ff-btn-submit { width: 100%; min-height: 56px; padding: 14px 24px; border: 0; border-radius: var(--radius-ctl); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--ease-out); } .wlh-form .ff-btn-submit:active { transform: scale(0.98); } @media (hover: hover) and (pointer: fine) { .wlh-form .ff-btn-submit:hover { background: var(--btn-hover); } } .wlh-form .ff-btn-submit[disabled], .wlh-form .ff-working .ff-btn-submit { opacity: 0.6; cursor: progress; } .wlh-form .ff-message-success { padding: 18px; border-radius: var(--radius-ctl); border: 1px solid var(--ok); font-weight: 600; } .wlh-form .ff-errors-in-stack { color: var(--warn); font-weight: 600; } .wlh-form .ff_upload_btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border: 2px solid var(--btn2-line); border-radius: var(--radius-ctl); font-weight: 700; color: var(--btn2-fg); cursor: pointer; } .wlh-form .ff-uploaded-list { font-size: var(--fs-small); } .wlh-form [class*="ff_hpsf"], .wlh-form .ff-hpsf-container, .wlh-form input[name^="item__"][type="text"]:not(.ff-el-form-control) { position: absolute !important; left: -9999px !important; } .wlh-form .ff-el-progress, .wlh-form .ff_screen_reader_title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .form-missing { padding: 16px; border-radius: var(--radius-ctl); border: 1px dashed var(--line); } /* ------------------------------------------------------------------ footer */ .site-footer { padding-top: clamp(56px, 7vw, 88px); font-size: 1rem; } [data-theme="a"] .site-footer { border-top: 1px solid rgba(2, 255, 0, 0.45); } .footer__grid { display: grid; gap: 40px; } .footer__brand { display: grid; gap: 10px; align-content: start; } .footer__logo { width: 150px; height: auto; margin-bottom: 8px; } .footer__tagline { font-family: var(--font-display); font-weight: var(--w-h); font-size: 1.25rem; color: var(--head); } .footer__phone { font-family: var(--font-display); font-weight: var(--w-h1); font-size: 1.5rem; color: var(--fg); text-decoration: none; } .footer__hours, .footer__note { color: var(--mute); } .footer__heading { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; color: var(--head); padding-bottom: 12px; margin-bottom: 8px; position: relative; } .footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; } [data-theme="a"] .footer__heading::after { background: var(--green); } [data-theme="b"] .footer__heading::after { background: var(--honey); } .footer__col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--mute); text-decoration: none; } .footer__col a:hover { color: var(--fg); text-decoration: underline; } .footer__social { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; } .footer__social a { gap: 8px; } .footer__social .icon { width: 22px; height: 22px; } .footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; padding-block: 24px; border-top: 1px solid var(--line); color: var(--mute); font-size: var(--fs-small); } .footer__bottom a { color: inherit; } .footer__sign { margin-left: auto; font-weight: 700; color: var(--fg); } @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 48px; } } /* -------------------------------------------------------------- sticky bar */ .sticky-bar { display: none; } @media (max-width: 1023px) { .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform 260ms var(--ease-out); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); } .show-sticky-bar .sticky-bar { transform: none; } .menu-open .sticky-bar { transform: translateY(110%); } .sticky-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; } .sticky-bar .icon { width: 22px; height: 22px; } [data-theme="a"] .sticky-bar__call { background: #141414; color: #F4F4F2; } [data-theme="a"] .sticky-bar__estimate { background: var(--yellow); color: #0B0B0B; } [data-theme="b"] .sticky-bar__call { background: var(--oak); color: var(--cream); } [data-theme="b"] .sticky-bar__estimate { background: var(--honey); color: var(--ink); } body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } } /* ------------------------------------------------------------ inner pages */ .page-hero { padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 20px; font-size: var(--fs-small); color: var(--mute); } .crumbs li:not(:last-child)::after { content: "›"; margin: 0 10px; } .crumbs a { color: inherit; } .prose { max-width: 72ch; display: grid; gap: 18px; } .prose .h2 { margin-top: 28px; } .prose .h2:first-child { margin-top: 0; } .prose-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .prose-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; } .fe-aside { position: sticky; top: 140px; align-self: start; } } .info-card { border-radius: var(--radius); padding: 28px; display: grid; gap: 12px; border: 1px solid var(--card-line); } .info-card a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; } .info-card .icon { width: 22px; height: 22px; color: var(--icon); } .info-card__phone { font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; } .info-card__area { display: flex; gap: 10px; color: var(--mute); } .fe__grid { display: grid; gap: 32px; } .fe__intro { display: grid; gap: 20px; align-content: start; } .fe__call a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .fe__call .icon { width: 20px; height: 20px; color: var(--icon); } @media (min-width: 1024px) { .fe__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; } .fe__intro { position: sticky; top: 140px; } } .fe-steps__grid { display: grid; gap: 40px; } .fe-steps__grid .h2 { margin-bottom: 32px; } .fe-steps__figure img { aspect-ratio: 3 / 2; } @media (min-width: 1024px) { .fe-steps__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; } } .ty__inner { display: grid; gap: 18px; justify-items: start; padding-block: 24px; } .ty__icon { width: 56px; height: 56px; color: var(--icon); } .ty__more { display: grid; gap: 20px; } @media (min-width: 900px) { .ty__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .nf { display: grid; gap: 20px; } .nf__search label { display: block; font-weight: 700; margin-bottom: 8px; } .nf__row { display: flex; gap: 10px; max-width: 560px; } .nf__row input { flex: 1; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-ctl); border: 1.5px solid var(--input-line, #888); background: var(--input-bg, #fff); color: var(--fg); } /* ----------------------------------------------------------- design review */ .dr { background: #ECECEA; color: #1C1C1B; padding-bottom: 80px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .dr a { color: #1C1C1B; } .dr__head { padding-block: 48px 24px; display: grid; gap: 14px; max-width: 900px; margin-left: max(var(--gutter), calc((100% - var(--container)) / 2)); } .dr__h1 { font-family: inherit; color: #1C1C1B; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; } .dr__lede { font-size: 1.1875rem; max-width: 70ch; } .dr__same { color: #4A4A48; } .dr__compare { display: grid; gap: 40px; } .dr__col { display: grid; gap: 14px; align-content: start; } .dr__name { font-family: inherit; color: #1C1C1B; font-size: 1.5rem; font-weight: 700; } .dr__frames { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: start; } .dr__desktop, .dr__phone { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #CFCFCB, 0 8px 24px rgba(0, 0, 0, 0.08); } .dr__desktop { aspect-ratio: 1440 / 2000; } .dr__phone { aspect-ratio: 390 / 844; border-radius: 18px; } .dr__desktop iframe, .dr__phone iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; transform: scale(var(--s, 0.3)); } .dr__desktop iframe { width: 1440px; height: 2000px; } .dr__phone iframe { width: 390px; height: 844px; } .dr__actions { display: flex; flex-wrap: wrap; gap: 10px; } .dr__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 8px; background: #1C1C1B; color: #fff !important; font-weight: 700; text-decoration: none; } .dr__btn--quiet { background: transparent; color: #1C1C1B !important; box-shadow: inset 0 0 0 2px #1C1C1B; } .dr__btn .icon { width: 18px; height: 18px; } .dr__logos { margin-top: 64px; display: grid; gap: 14px; } .dr__logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 8px; } .dr__logo { display: grid; place-items: center; gap: 12px; min-height: 220px; padding: 28px; border-radius: 10px; } .dr__logo img { max-height: 150px; width: auto; } .dr__logo figcaption { font-size: 0.9375rem; } .dr__logo--ink { background: #0B0B0B; } .dr__logo--ink figcaption { color: #B8B8B4; } .dr__logo--lime { background: #F4F1EA; box-shadow: inset 0 0 0 1px #D3CBB8; } .dr__logo--lime figcaption { color: #4E5651; } .dr__logo--oak { background: #143527; } .dr__logo--oak figcaption { color: #C9CFC6; } .dr__ask { margin-top: 48px; font-size: 1.1875rem; font-weight: 600; max-width: 70ch; margin-left: max(var(--gutter), calc((100% - var(--container)) / 2)); } @media (min-width: 1100px) { .dr__compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ motion */ [data-reveal] { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } .reveal-ready [data-reveal]:not(.is-in):not([data-reveal="pier"]) { opacity: 0; transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------- print */ @media print { .site-header, .sticky-bar, .event-banner, .mobile-menu { display: none !important; } [data-a], [data-b] { background: #fff !important; color: #000 !important; } } /* Free estimate page, phones: the form follows the lead directly (brief 06). */ @media (max-width: 1023px) { .fe__intro { display: contents; } .fe__grid { gap: 20px; } .fe__intro .h1 { order: 1; } .fe__intro .lede { order: 2; } .fe__form { order: 3; } .fe__intro .chips { order: 4; } .fe__call { order: 5; } } @media (min-width: 900px) { .dr__logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Review slot: Trustindex widget sits in the theme panel; give it room, no extra frame. */ .review-slot:has(.ti-widget) { padding: clamp(16px, 2.5vw, 28px); } .review-slot .ti-widget { margin: 0 !important; } /* =================================================================== VERSION C: Modern. Sora + Inter Tight, near-black and white, the logo green as the one accent, 24px cards, pill buttons with an arrow dot. =================================================================== */ @font-face { font-family: "Sora"; src: url(assets/fonts/sora-var.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url(assets/fonts/intertight-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } [data-layout="modern"] { --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --w-h1: 700; --w-h: 600; --track-h1: -0.04em; --track-h: -0.03em; --track-kicker: 0.02em; --lh-display: 1.02; --fs-h1: clamp(2.5rem, 1.35rem + 4.3vw, 5.25rem); --fs-h2: clamp(2rem, 1.45rem + 2vw, 3.25rem); --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); --c-r: 24px; --c-r-lg: 32px; --radius: 24px; --radius-ctl: 999px; --page: #FFFFFF; color-scheme: light; scrollbar-color: var(--c-input-line) #FFFFFF; } /* C palette: client logo green on near-black */ [data-theme="c"] { --font-display: "Sora", system-ui, sans-serif; --ink: #0E100E; --c-ink: #0E100E; --c-ink-2: #171A17; --c-ink-3: #1F241F; --c-paper: #F2F4EF; --c-line: #E1E4DD; --c-green: #02FF00; --c-green-hover: #4CFF3E; --c-yellow: #FEF210; --c-green-rgb: 2, 255, 0; --c-shade-rgb: 8, 10, 8; --c-ink-rgb: 14, 16, 14; --c-mega: #1B1F1B; --c-text: #262A26; --c-on-dark: #F4F6F2; --c-on-dark-2: #D9DED7; --c-on-dark-mute: #A9B0A8; --c-mute: #565D56; --c-map-line: #CDD2C9; --c-input-line: #C5CBC2; --c-input-line-d: #9AA299; --c-on-accent-mute: #1D3318; } [data-layout="modern"] ::selection { background: var(--c-green); color: var(--c-ink); } [data-layout="modern"] [data-c="ink"] { --bg: var(--c-ink); --fg: var(--c-on-dark); --mute: var(--c-on-dark-mute); --head: #FFFFFF; --line: rgba(255, 255, 255, 0.12); --card: var(--c-ink-2); --card-line: rgba(255, 255, 255, 0.08); --link: var(--c-on-dark); --icon: var(--c-green); --num: var(--c-green); --kicker: var(--c-green); --btn-bg: var(--c-green); --btn-fg: var(--c-ink); --btn-hover: var(--c-green-hover); --btn2-fg: #FFFFFF; --btn2-line: rgba(255, 255, 255, 0.4); --btn2-hover: rgba(255, 255, 255, 0.08); --solid-bg: var(--c-green); --solid-fg: var(--c-ink); --focus: var(--c-green); --input-bg: #FFFFFF; --input-line: var(--c-input-line-d); --accent-input: var(--c-ink); color-scheme: dark; } [data-layout="modern"] [data-c="white"], [data-layout="modern"] [data-c="paper"] { --bg: #FFFFFF; --fg: var(--c-ink); --mute: var(--c-mute); --head: var(--c-ink); --line: var(--c-line); --card: var(--c-paper); --card-line: var(--c-line); --link: var(--c-ink); --icon: var(--c-ink); --num: var(--c-ink); --kicker: var(--c-ink); --btn-bg: var(--c-green); --btn-fg: var(--c-ink); --btn-hover: var(--c-green-hover); --btn2-fg: var(--c-ink); --btn2-line: var(--c-ink); --btn2-hover: rgba(var(--c-ink-rgb), 0.05); --solid-bg: var(--c-ink); --solid-fg: #FFFFFF; --focus: var(--c-ink); --input-bg: var(--c-paper); --input-line: var(--c-input-line); --accent-input: var(--c-ink); } [data-layout="modern"] [data-c="paper"] { --bg: var(--c-paper); --card: #FFFFFF; } [data-layout="modern"] [data-c="green"] { --bg: var(--c-green); --fg: var(--c-ink); --mute: var(--c-on-accent-mute); --head: var(--c-ink); --line: rgba(var(--c-ink-rgb), 0.2); --icon: var(--c-ink); --link: var(--c-ink); --solid-bg: var(--c-ink); --solid-fg: #FFFFFF; --focus: var(--c-ink); } [data-layout="modern"] [data-c] { background-color: var(--bg); color: var(--fg); } [data-layout="modern"] body { font-size: 1.125rem; } /* header + footer in C */ [data-layout="modern"] .site-header { background: var(--c-ink); } [data-layout="modern"] .utility { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-layout="modern"] .nav__list > li > a::after, [data-layout="modern"] .nav__toggle::after { background: var(--c-green); } [data-layout="modern"] .nav__list > li > a, [data-layout="modern"] .nav__toggle { font-weight: 600; } [data-layout="modern"] .masthead__cta { background: var(--c-green); color: var(--c-ink); } [data-layout="modern"] .menu-toggle { border-radius: 999px; } [data-layout="modern"] .site-footer { border-top: 0; } [data-layout="modern"] .footer__heading::after { background: var(--c-green); } .footer__mega { display: none; } [data-layout="modern"] .footer__mega { display: block; margin: 56px 0 0; padding-inline: 12px; text-align: center; white-space: nowrap; overflow: hidden; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.05em; line-height: 0.85; font-size: clamp(2.5rem, 10.6vw, 11.25rem); color: var(--c-mega); } [data-layout="modern"] .sticky-bar__call { background: var(--c-ink-2); color: #fff; } [data-layout="modern"] .sticky-bar__estimate { background: var(--c-green); color: var(--c-ink); } [data-layout="modern"] .dr__compare { gap: 32px; } @media (min-width: 1280px) { .dr__compare { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* layout primitives */ .c-wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(20px, 3.5vw, 40px); } .c-sec { padding-block: clamp(64px, 8vw, 120px); } .c-sec--round { margin-inline: clamp(8px, 1vw, 12px); border-radius: var(--c-r-lg); } .c-head { display: grid; gap: 16px; max-width: 820px; margin-bottom: clamp(36px, 4.5vw, 56px); } .c-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; } @media (min-width: 900px) { .c-head--split { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } .c-head--split > div { display: grid; gap: 16px; max-width: 780px; } } .c-h1, .c-h2, .c-h3 { font-family: var(--font-display); color: var(--head); text-wrap: balance; margin: 0; } .c-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; } .c-h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; } .c-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .c-lede { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--fg); max-width: 62ch; } .c-chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: max-content; max-width: 100%; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--fg); background: var(--bg); } .c-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px rgba(var(--c-green-rgb), 0.18); } .c-chip .icon { width: 18px; height: 18px; } .c-chip:has(.icon)::before { display: none; } .c-chip--on-dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .c-chip--on-dark .icon { color: var(--c-green); } .c-chip--on-green { background: transparent; border-color: rgba(var(--c-ink-rgb), 0.35); color: var(--c-ink); } .c-chip--on-green::before { background: var(--c-ink); box-shadow: none; } /* buttons: pill + arrow dot */ .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .c-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 6px 6px 6px 26px; border-radius: 999px; border: 0; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, transform 160ms var(--ease-out); touch-action: manipulation; } .c-btn:active { transform: scale(0.97); } @media (max-width: 559px) { .c-btn { white-space: normal; max-width: 100%; text-align: left; } .c-actions .c-btn--green, .c-lane .c-btn, .c-cta .c-btn--green { width: 100%; justify-content: space-between; } } .c-btn__dot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none; transition: transform 260ms var(--ease-out); } .c-btn__dot .icon { width: 20px; height: 20px; } .c-btn--green { background: var(--c-green); color: var(--c-ink); } .c-btn--green .c-btn__dot { background: var(--c-ink); color: #fff; } .c-btn--ink { background: var(--c-ink); color: #fff; } .c-btn--ink .c-btn__dot { background: var(--c-green); color: var(--c-ink); } [data-c="green"] .c-btn--ink .c-btn__dot { background: #fff; } .c-btn--glass { padding: 6px 24px; gap: 10px; color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .c-btn--glass .icon { width: 20px; height: 20px; color: var(--c-green); } @media (hover: hover) and (pointer: fine) { .c-btn:hover .c-btn__dot { transform: rotate(45deg); } .c-btn--green:hover { background: var(--c-green-hover); } .c-btn--ink:hover { background: var(--c-ink-3); } .c-btn--glass:hover { background: rgba(255, 255, 255, 0.18); } } .c-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .c-link .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .c-link:hover .icon { transform: translateX(3px); } } .c-checks { display: grid; gap: 12px; } .c-checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; } .c-checks .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--c-green); color: var(--c-ink); } /* hero */ .c-hero-wrap { padding: clamp(8px, 1vw, 12px); } .c-hero { position: relative; border-radius: var(--c-r-lg); overflow: hidden; background: var(--c-ink); color: #fff; isolation: isolate; } .c-hero__bg { position: absolute; inset: 0; z-index: -2; } .c-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } .c-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--c-shade-rgb), 0.9) 0%, rgba(var(--c-shade-rgb), 0.7) 38%, rgba(var(--c-shade-rgb), 0.12) 68%, rgba(var(--c-shade-rgb), 0) 100%), linear-gradient(0deg, rgba(var(--c-shade-rgb), 0.45) 0%, rgba(var(--c-shade-rgb), 0) 35%); } .c-hero__grid { display: grid; gap: 28px; padding-block: clamp(48px, 7vw, 104px) clamp(28px, 4vw, 56px); } .c-hero__copy { display: grid; gap: 24px; align-content: center; } .c-hero .c-h1 { color: #fff; max-width: 12ch; } .c-hero__sub { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 54ch; } .c-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); } .c-hero__facts li { display: inline-flex; align-items: center; gap: 8px; } .c-hero__facts .icon { width: 20px; height: 20px; color: var(--c-green); } .c-hero__form { border-radius: var(--c-r); padding: clamp(22px, 2.5vw, 32px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); align-self: center; } .c-form-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--c-ink); } .c-form-note { margin-top: 10px; font-size: 0.9375rem; color: var(--mute); } @media (min-width: 1100px) { .c-hero { min-height: clamp(680px, 86vh, 860px); display: flex; align-items: center; } .c-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: 56px; align-items: center; } } @media (max-width: 1099px) { .c-hero__bg img { object-position: 60% 50%; } .c-hero::after { background: linear-gradient(180deg, rgba(var(--c-shade-rgb), 0.75) 0%, rgba(var(--c-shade-rgb), 0.9) 60%, rgba(var(--c-shade-rgb), 0.96) 100%); } } /* marquee (the one moving band; static under reduced motion) */ .c-marquee { overflow: hidden; background: var(--c-green); color: var(--c-ink); margin: clamp(8px, 1vw, 12px); border-radius: 999px; } .c-marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; padding-block: 18px; animation: c-marquee 48s linear infinite; } .c-marquee__track span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; white-space: nowrap; } .c-marquee__sep { width: 32px; height: 32px; } @keyframes c-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .c-marquee__track { animation: none; } } /* about */ .c-about { display: grid; gap: 56px; align-items: center; } .c-about__media { position: relative; padding: 0 12% 14% 0; } .c-about__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--c-r); } .c-about__second { position: absolute; right: 0; bottom: 0; width: 46%; } .c-about__second img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--c-r); border: 8px solid #fff; } .c-about__badge { position: absolute; left: -8px; top: 28px; display: grid; gap: 4px; max-width: 220px; padding: 18px 20px; border-radius: 20px; background: var(--c-green); color: var(--c-ink); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); } .c-about__badge strong { font-family: var(--font-display); font-size: 3.25rem; line-height: 1; letter-spacing: -0.04em; } .c-about__badge span { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; } .c-about__copy { display: grid; gap: 22px; } .c-callout { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; } .c-callout__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-paper); } .c-callout__icon .icon { width: 22px; height: 22px; } .c-callout small { display: block; font-size: 0.9375rem; color: var(--mute); } .c-callout strong { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; } @media (min-width: 1000px) { .c-about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; } } /* services bento */ .c-services { display: grid; gap: 16px; } .c-services > li { display: flex; } .c-svc { position: relative; flex: 1; display: flex; align-items: flex-end; min-height: 320px; border-radius: var(--c-r); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--c-ink); } .c-svc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--ease-out); } .c-svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--c-shade-rgb), 0) 25%, rgba(var(--c-shade-rgb), 0.88) 78%); } .c-svc__dot { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--c-ink); transition: background-color 200ms ease, transform 260ms var(--ease-out); } .c-svc__dot .icon { width: 22px; height: 22px; } .c-svc__body { display: grid; gap: 8px; padding: 26px; } .c-svc__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; margin: 0; } .c-svc__text { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } @media (hover: hover) and (pointer: fine) { .c-svc:hover .c-svc__img { transform: scale(1.05); } .c-svc:hover .c-svc__dot { background: var(--c-green); transform: rotate(45deg); } } .c-services__more { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 28px; } .c-services__more a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; } @media (min-width: 640px) { .c-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .c-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .c-svc { min-height: 460px; } } /* signs */ .c-signs { display: grid; gap: 14px; } .c-signs > li { display: flex; } .c-sign { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--c-r); background: #fff; color: var(--fg); text-decoration: none; border: 1px solid var(--c-line); transition: transform 240ms var(--ease-out), box-shadow 240ms ease; } .c-sign__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-green); color: var(--c-ink); margin-bottom: 6px; } .c-sign__icon .icon { width: 26px; height: 26px; } .c-sign__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0; color: var(--head); } .c-sign__text { font-size: 1.0625rem; line-height: 1.55; color: var(--mute); } .c-sign--cta { justify-content: space-between; border: 0; } .c-sign--cta .c-sign__title { font-size: 1.5rem; color: #fff; } .c-sign--cta .c-btn { align-self: flex-start; } @media (hover: hover) and (pointer: fine) { a.c-sign:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(var(--c-ink-rgb), 0.08); } } @media (min-width: 640px) { .c-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .c-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } /* at a glance (answer-first) */ .c-glance { display: grid; gap: 48px; } .c-glance__facts { display: grid; gap: 18px; align-content: start; } .c-byline { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--mute); } .c-byline .icon { width: 20px; height: 20px; color: var(--c-ink); } .c-facts { margin-top: 8px; border: 1px solid var(--c-line); border-radius: var(--c-r); overflow: hidden; } .c-facts > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 22px; border-top: 1px solid var(--c-line); } .c-facts > div:first-child { border-top: 0; } .c-facts > div:nth-child(even) { background: var(--c-paper); } .c-facts dt { font-weight: 700; font-size: 1rem; } .c-facts dd { font-size: 1.0625rem; line-height: 1.55; color: var(--c-text); } .c-answers { display: grid; gap: 14px; align-content: start; } .c-answer { display: grid; gap: 10px; padding: 28px; border-radius: var(--c-r); background: var(--c-paper); } .c-answer__q { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; } .c-answer__a { font-size: 1.0625rem; line-height: 1.6; } @media (min-width: 640px) { .c-facts > div { grid-template-columns: 150px 1fr; gap: 18px; } } @media (min-width: 1100px) { .c-glance { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } } /* process + reel */ .c-process { display: grid; gap: 40px; align-items: start; } .c-video { position: relative; border-radius: var(--c-r); overflow: hidden; aspect-ratio: 16 / 10; background: #000; } .c-video__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; } .c-video__play img { width: 100%; height: 100%; object-fit: cover; } .c-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--c-shade-rgb), 0.75) 0%, rgba(var(--c-shade-rgb), 0.1) 55%); } .c-video__btn { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--c-green); color: var(--c-ink); box-shadow: 0 0 0 12px rgba(var(--c-green-rgb), 0.2); transition: transform 220ms var(--ease-out); } .c-video__btn svg { width: 34px; height: 34px; margin-left: 4px; } .c-video__meta { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: grid; gap: 2px; text-align: left; } .c-video__meta strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; } .c-video__meta span { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); } .c-video__el { width: 100%; height: 100%; object-fit: cover; display: block; } @media (hover: hover) and (pointer: fine) { .c-video__play:hover .c-video__btn { transform: scale(1.06); } } .c-steps { display: grid; } .c-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); } .c-step:first-child { border-top: 0; padding-top: 0; } .c-step__num { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--c-green); padding-top: 3px; } .c-step__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; color: #fff; } .c-step p { color: var(--mute); font-size: 1.0625rem; } @media (min-width: 1100px) { .c-process { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } .c-video { position: sticky; top: 140px; } } /* comparison */ .c-compare { display: grid; gap: 48px; align-items: start; } .c-compare__copy { display: grid; gap: 18px; } .c-compare .pier-figure { margin-top: 12px; } .c-compare .pier-figure__art { border-radius: var(--c-r); border-color: var(--c-line); } .c-table-wrap { display: grid; gap: 14px; } .c-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--c-r); overflow: hidden; border: 1px solid var(--c-line); font-size: 1.0625rem; line-height: 1.5; } .c-table th, .c-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); } .c-table thead th { border-top: 0; background: var(--c-ink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; } .c-table thead th:nth-child(2) { background: var(--c-ink-2); } .c-table thead th:nth-child(3) { background: var(--c-ink); box-shadow: inset 0 -4px 0 var(--c-green); } .c-table tbody th { font-weight: 700; width: 26%; background: var(--c-paper); } @media (max-width: 639px) { .c-table thead { display: none; } .c-table, .c-table tbody, .c-table tr, .c-table th, .c-table td { display: block; width: 100%; } .c-table tr { border-top: 1px solid var(--c-line); } .c-table tbody th { border-top: 0; } .c-table td { border-top: 0; padding-top: 6px; } .c-table tbody th { width: auto; padding-bottom: 10px; } .c-table td::before { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--mute); } .c-table td:nth-child(2)::before { content: "Concrete pressed piers"; } .c-table td:nth-child(3)::before { content: "Steel piers"; } } @media (min-width: 1100px) { .c-compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } } /* lanes */ .c-lanes { display: grid; gap: 20px; } .c-lane { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 50vw, 560px); border-radius: var(--c-r); overflow: hidden; isolation: isolate; color: #fff; background: var(--c-ink); } .c-lane__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .c-lane::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--c-shade-rgb), 0.05) 20%, rgba(var(--c-shade-rgb), 0.92) 85%); } .c-lane__body { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); } .c-lane .c-h3 { color: #fff; } .c-lane p { color: rgba(255, 255, 255, 0.88); max-width: 52ch; } .c-lane .c-btn { justify-self: start; } @media (min-width: 900px) { .c-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* warranty band */ .c-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .c-stats > div { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--c-ink); } .c-stats dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 5rem); line-height: 1; letter-spacing: -0.05em; color: var(--c-ink); } .c-stats dd { font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); } .c-warranty__line { margin-top: 32px; font-size: 1.125rem; font-weight: 600; } @media (min-width: 900px) { .c-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } /* reviews */ .c-reviews { display: grid; gap: 20px; align-items: start; } .c-reviews__widget { padding: 0 !important; border: 0 !important; background: none !important; min-width: 0; } .c-referral { display: grid; gap: 10px; align-content: start; padding: 32px; border-radius: var(--c-r); text-decoration: none; color: #fff; } .c-referral__icon { width: 44px; height: 44px; color: var(--c-green); } .c-referral strong { font-family: var(--font-display); font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); line-height: 1; letter-spacing: -0.05em; color: var(--c-green); } .c-referral span { font-size: 1.125rem; color: var(--c-on-dark); } .c-referral .c-link { color: #fff; margin-top: 6px; } @media (min-width: 1100px) { .c-reviews { grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr); gap: 24px; } } /* area */ .c-area { display: grid; gap: 48px; align-items: start; } .c-area > div:first-child { display: grid; gap: 14px; } .c-area__ring { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin: 14px 0 0; } .c-pills { display: flex; flex-wrap: wrap; gap: 8px; } .c-pills a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); color: var(--c-ink); font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .c-pills a:hover { background: var(--c-green); border-color: var(--c-green); } } .c-area__map .sa-map__svg { background: #fff; border-radius: var(--c-r); box-shadow: 0 0 0 1px var(--c-line); } [data-layout="modern"] .sa-map .county { fill: var(--c-paper); stroke: var(--c-map-line); } [data-layout="modern"] .sa-map .county--bexar { fill: var(--c-ink); stroke: var(--c-ink); stroke-width: 2; } [data-layout="modern"] .sa-map .city-label { fill: var(--c-ink); stroke: rgba(255, 255, 255, 0.95); } [data-layout="modern"] .sa-map .city--t0 { fill: var(--c-green); stroke: var(--c-ink); stroke-width: 2.5; } [data-layout="modern"] .sa-map .city--t1 { fill: var(--c-green); stroke: var(--c-ink); stroke-width: 1.5; } [data-layout="modern"] .sa-map .city--t2 { fill: var(--c-ink); } [data-layout="modern"] .sa-map .loop-ring { stroke: var(--c-green); } [data-layout="modern"] .sa-map .dist-ring, [data-layout="modern"] .sa-map .city-leader { stroke: var(--c-ink); } [data-layout="modern"] .sa-map .ring-note, [data-layout="modern"] .sa-map .ring-label { fill: var(--c-mute); } [data-layout="modern"] .sa-map__key--county { background: var(--c-ink); } [data-layout="modern"] .sa-map__key--t1 { background: var(--c-green); border: 1.5px solid var(--c-ink); } [data-layout="modern"] .sa-map__key--t2 { background: var(--c-ink); width: 9px; height: 9px; } @media (min-width: 1100px) { .c-area { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } .c-area__map { position: sticky; top: 140px; } } /* faq */ .c-faq { display: grid; gap: 40px; align-items: start; } .c-faq__side { display: grid; gap: 18px; } .c-help { display: grid; gap: 12px; justify-items: start; padding: 30px; border-radius: var(--c-r); margin-top: 12px; } .c-help__icon { width: 40px; height: 40px; color: var(--c-green); } .c-help .c-h3 { color: #fff; } .c-help p { color: var(--c-on-dark-2); } .c-acc { display: grid; gap: 12px; } .c-acc__item { border-radius: 20px; background: var(--c-paper); transition: background-color 200ms ease; } .c-acc__item[open] { background: #fff; box-shadow: 0 0 0 1px var(--c-line), 0 14px 32px rgba(var(--c-ink-rgb), 0.06); } .c-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 20px 18px 26px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; } .c-acc__item summary::-webkit-details-marker { display: none; } .c-acc__plus { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-ink); transition: background-color 200ms ease, transform 260ms var(--ease-out); } .c-acc__plus::before, .c-acc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #fff; border-radius: 2px; } .c-acc__plus::after { transform: rotate(90deg); } .c-acc__item[open] .c-acc__plus { background: var(--c-green); transform: rotate(45deg); } .c-acc__item[open] .c-acc__plus::before, .c-acc__item[open] .c-acc__plus::after { background: var(--c-ink); } .c-acc__body { display: grid; gap: 8px; padding: 0 26px 24px; max-width: 72ch; } .c-acc__item[open] .c-acc__body { animation: acc-in 240ms var(--ease-out); } @media (min-width: 1100px) { .c-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .c-faq__side { position: sticky; top: 140px; } } /* closing cta */ .c-cta-wrap { padding-top: 0; } .c-cta { display: grid; border-radius: var(--c-r-lg); overflow: hidden; } .c-cta__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .c-cta__copy { display: grid; gap: 22px; align-content: center; padding: clamp(28px, 5vw, 64px); } .c-cta .c-h2 { color: #fff; } .c-cta__hours { color: var(--mute); font-size: 1rem; } @media (min-width: 1000px) { .c-cta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } } /* Fluent form in C */ [data-layout="modern"] .wlh-form .ff-el-form-control { border-radius: 14px; border: 1.5px solid transparent; background: var(--c-paper); min-height: 54px; } [data-layout="modern"] .wlh-form .ff-el-form-control:focus { border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(var(--c-green-rgb), 0.35); } [data-layout="modern"] .wlh-form .ff-btn-submit { border-radius: 999px; background: var(--c-green); color: var(--c-ink); font-family: var(--font-body); font-weight: 700; } [data-layout="modern"] .wlh-form .ff-btn-submit:hover { background: var(--c-green-hover); } [data-layout="modern"] .c-hero__form .wlh-form .ff-el-group { margin-bottom: 14px; } [data-layout="modern"] .c-hero__form .ff-el-form-check-label { min-height: 36px; font-size: 1rem; } [data-layout="modern"] .c-hero__form .ff-el-input--content:has(.ff-el-form-check) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } /* =================================================================== VERSION D: Pine & Chartreuse. Our recommendation: the C layout in a warmer, more professional palette. Chartreuse is the client's logo green and logo yellow mixed; pine-black gives weight without going neon. =================================================================== */ @font-face { font-family: "Bricolage Grotesque"; src: url(assets/fonts/bricolage-var.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; } [data-theme="d"] { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --ink: #10211A; --c-ink: #10211A; --c-ink-2: #173027; --c-ink-3: #20392F; --c-paper: #F4F2EB; --c-line: #E3DFD3; --c-green: #C6EE4A; --c-green-hover: #D4F56E; --c-yellow: #F2C94C; --c-green-rgb: 198, 238, 74; --c-shade-rgb: 9, 22, 16; --c-ink-rgb: 16, 33, 26; --c-mega: #183229; --c-text: #2A2E28; --c-on-dark: #F3F1EA; --c-on-dark-2: #D6DCCF; --c-on-dark-mute: #ADB8AE; --c-mute: #575C52; --c-map-line: #D3CEC1; --c-input-line: #CFC9BB; --c-input-line-d: #9AA096; --c-on-accent-mute: #2B3A12; --w-h1: 700; --w-h: 650; } [data-theme="d"] .c-h1, [data-theme="d"] .c-h2, [data-theme="d"] .c-h3, [data-theme="d"] .c-svc__title, [data-theme="d"] .c-sign__title, [data-theme="d"] .c-answer__q, [data-theme="d"] .c-step__title, [data-theme="d"] .c-stats dt, [data-theme="d"] .c-acc__item summary, [data-theme="d"] .c-marquee__track span, [data-theme="d"] .footer__mega, [data-theme="d"] .c-form-title { font-variation-settings: "opsz" 96; } [data-theme="d"] .c-h1 { letter-spacing: -0.022em; font-weight: 700; } [data-theme="d"] .c-h2 { letter-spacing: -0.02em; } [data-theme="d"] .c-stats dt { letter-spacing: -0.035em; } [data-theme="d"] .c-marquee { background: var(--c-green); } [data-theme="d"] .c-hero__bg img { filter: saturate(0.92) sepia(0.06); } .dr__logo--pine { background: #10211A; } .dr__logo--pine figcaption { color: #ADB8AE; } .dr__logo--bone { background: #F4F2EB; box-shadow: inset 0 0 0 1px #E3DFD3; } .dr__logo--bone figcaption { color: #575C52; } @media (min-width: 1280px) { .dr__compare { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* =================================================================== Modern layout (C and D): header, full-bleed hero, collage, facts, contact card, comparison. Round 2 after owner feedback. =================================================================== */ .masthead__dot { display: none; } [data-layout="modern"] .site-header { background: var(--c-ink); transition: background-color 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease; } [data-layout="modern"] .utility { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-layout="modern"] .masthead { min-height: 84px; gap: 16px; } [data-layout="modern"] .nav__list { gap: 2px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } [data-layout="modern"] .nav__list > li > a, [data-layout="modern"] .nav__toggle { min-height: 44px; padding: 0 16px; border-radius: 999px; color: #fff; font-weight: 600; transition: background-color 160ms ease; } [data-layout="modern"] .nav__list > li > a::after, [data-layout="modern"] .nav__toggle::after { display: none; } @media (hover: hover) and (pointer: fine) { [data-layout="modern"] .nav__list > li > a:hover, [data-layout="modern"] .nav__toggle:hover { background: rgba(255, 255, 255, 0.1); } } [data-layout="modern"] .nav__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); } [data-layout="modern"] .nav__menu { border-radius: 20px; padding: 12px; top: calc(100% + 12px); } [data-layout="modern"] .nav__menu a { border-radius: 12px; } [data-layout="modern"] .phone-link { gap: 10px; color: #fff; } [data-layout="modern"] .phone-link__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } [data-layout="modern"] .phone-link .icon { width: 20px; height: 20px; color: var(--c-green); } [data-layout="modern"] .masthead__cta { gap: 12px; min-height: 52px; padding: 5px 5px 5px 20px; border-radius: 999px; background: var(--c-green); color: var(--c-ink); font-weight: 700; } [data-layout="modern"] .masthead__dot { display: grid; width: 42px; height: 42px; background: var(--c-ink); color: #fff; } [data-layout="modern"] .masthead__dot .icon { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { [data-layout="modern"] .masthead__cta:hover .masthead__dot { transform: rotate(45deg); } [data-layout="modern"] .masthead__cta:hover { background: var(--c-green-hover); } } [data-layout="modern"] .menu-toggle { border-color: rgba(255, 255, 255, 0.2); color: #fff; } [data-layout="modern"] .site-header .container { max-width: calc(1360px + var(--gutter) * 2); } @media (min-width: 1180px) and (max-width: 1559px) { [data-layout="modern"] .nav__list > li > a, [data-layout="modern"] .nav__toggle { padding: 0 12px; } [data-layout="modern"] .phone-link span.tnum { display: none; } } @media (min-width: 1180px) and (max-width: 1299px) { [data-layout="modern"] .nav__list > li > a, [data-layout="modern"] .nav__toggle { padding: 0 9px; font-size: 0.9375rem; } [data-layout="modern"] .brand img { width: 132px; } } /* transparent over the hero on the modern home, solid once scrolled */ .modern-home .site-header:not(.is-stuck) { background: transparent; } .modern-home .site-header:not(.is-stuck) .utility { border-bottom-color: rgba(255, 255, 255, 0.14); } .modern-home .site-header.is-stuck { background: rgba(var(--c-ink-rgb), 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } /* full-bleed hero under the header */ [data-layout="modern"] .c-hero-wrap { padding: 0; margin-top: calc(var(--hh, 124px) * -1); } [data-layout="modern"] .c-hero { border-radius: 0; } [data-layout="modern"] .c-hero__grid { padding-top: calc(var(--hh, 124px) + clamp(40px, 6vw, 88px)); padding-bottom: clamp(48px, 6vw, 96px); } @media (min-width: 1100px) { [data-layout="modern"] .c-hero { min-height: min(100dvh, 940px); } } [data-layout="modern"] .c-hero::after { background: linear-gradient(90deg, rgba(var(--c-shade-rgb), 0.92) 0%, rgba(var(--c-shade-rgb), 0.72) 38%, rgba(var(--c-shade-rgb), 0.15) 70%, rgba(var(--c-shade-rgb), 0.05) 100%), linear-gradient(180deg, rgba(var(--c-shade-rgb), 0.7) 0%, rgba(var(--c-shade-rgb), 0) 22%), linear-gradient(0deg, rgba(var(--c-shade-rgb), 0.45) 0%, rgba(var(--c-shade-rgb), 0) 35%); } @media (max-width: 1099px) { [data-layout="modern"] .c-hero::after { background: linear-gradient(180deg, rgba(var(--c-shade-rgb), 0.82) 0%, rgba(var(--c-shade-rgb), 0.86) 55%, rgba(var(--c-shade-rgb), 0.95) 100%); } } [data-layout="modern"] .c-marquee { margin: 0; border-radius: 0; } /* about collage: the small photo deliberately breaks out of the main one */ [data-layout="modern"] .c-about__media { padding: 0 22% 18% 0; } [data-layout="modern"] .c-about__main img { aspect-ratio: 4 / 4.6; } [data-layout="modern"] .c-about__second { width: 52%; right: 0; bottom: 0; } [data-layout="modern"] .c-about__second img { aspect-ratio: 4 / 3.4; border-width: 10px; box-shadow: 0 24px 48px rgba(var(--c-ink-rgb), 0.18); } [data-layout="modern"] .c-about__badge { left: -28px; top: 36px; } @media (max-width: 640px) { [data-layout="modern"] .c-about__badge { left: -6px; top: 16px; max-width: 180px; padding: 14px 16px; } [data-layout="modern"] .c-about__badge strong { font-size: 2.5rem; } } /* at a glance: facts table + contact card */ [data-layout="modern"] .c-glance { display: grid; gap: 24px; align-items: stretch; } [data-layout="modern"] .c-facts { margin: 0; } .c-contact { display: flex; flex-direction: column; border-radius: var(--c-r); overflow: hidden; } .c-contact__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .c-contact__body { display: grid; gap: 14px; padding: clamp(24px, 3vw, 32px); } .c-contact .c-h3 { color: #fff; } .c-contact p { color: var(--c-on-dark-2); } .c-contact__list { display: grid; gap: 4px; margin: 4px 0 8px; } .c-contact__list a, .c-contact__row { display: flex; align-items: center; gap: 14px; min-height: 56px; color: #fff; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; } .c-contact__ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(var(--c-green-rgb), 0.16); color: var(--c-green); } .c-contact__ic .icon { width: 20px; height: 20px; } .c-contact small { display: block; font-size: 0.875rem; color: var(--c-on-dark-mute); } .c-contact strong { font-weight: 600; font-size: 1.0625rem; word-break: break-word; } .c-contact .c-btn { justify-self: start; } @media (hover: hover) and (pointer: fine) { .c-contact__list a:hover strong { text-decoration: underline; } } @media (min-width: 1100px) { [data-layout="modern"] .c-glance { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: 24px; } } /* comparison: diagram and table side by side, same top, same height */ [data-layout="modern"] .c-compare { display: grid; gap: 24px; align-items: start; } .c-compare__figure .pier-figure { margin: 0; } .c-compare__figure .pier-figure__art { background: #fff; } [data-layout="modern"] .c-table-wrap { align-content: start; } @media (min-width: 1100px) { [data-layout="modern"] .c-compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } @media (max-width: 479px) { [data-layout="modern"] .masthead { gap: 8px; } [data-layout="modern"] .brand img { width: 118px; } [data-layout="modern"] .phone-link { gap: 6px; font-size: 0.9688rem; } [data-layout="modern"] .phone-link__icon { width: 36px; height: 36px; } [data-layout="modern"] .menu-toggle { min-width: 46px; padding: 0 8px; } } /* Pier diagram, labelled properly: a label column on the left with leader lines to each soil layer; the pier callout on the right. All versions. */ .pier-figure__art { padding-left: 30%; } .pier-figure__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; } .pier-figure__labels li { position: absolute; left: 3%; top: var(--y); width: 40%; transform: translateY(-50%); display: flex; align-items: center; gap: 0; padding: 0; border: 0 !important; background: none !important; white-space: nowrap; font-size: clamp(0.6875rem, 0.55rem + 0.45vw, 0.9375rem); font-weight: 700; line-height: 1.2; color: #161A18; } .pier-figure__labels li span { padding: 4px 9px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #D6D1C4; } .pier-figure__labels li:not(.pier-figure__callout)::after { content: ""; flex: 1; height: 0; border-top: 1.5px solid #8C8676; margin-left: 6px; min-width: 12px; } .pier-figure__labels li:not(.pier-figure__callout)::before { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #161A18; } .pier-figure__labels .pier-figure__callout { left: auto !important; right: 2%; width: auto; } .pier-figure__labels .pier-figure__callout span { background: #161A18; color: #fff; box-shadow: none; } [data-theme="b"] .pier-figure__labels .pier-figure__callout span { background: var(--oak); } [data-layout="modern"] .pier-figure__labels .pier-figure__callout span { background: var(--c-ink); color: var(--c-green); } @media (max-width: 639px) { .pier-figure__labels li span { padding: 2px 6px; } .pier-figure__art { padding-left: 32%; } .pier-figure__labels li { width: 38%; } } /* Modern header over the hero: readable utility row and nav. */ .modern-home .site-header:not(.is-stuck) .utility { background: rgba(var(--c-ink-rgb), 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.1); } [data-layout="modern"] .utility { color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; font-weight: 500; } [data-layout="modern"] .utility__links a, [data-layout="modern"] .utility__meta > * { color: rgba(255, 255, 255, 0.9); } [data-layout="modern"] .utility__links a:hover, [data-layout="modern"] .utility__meta a:hover { color: #fff; } [data-layout="modern"] .utility__meta .icon { color: var(--c-green); } .modern-home .site-header:not(.is-stuck) .nav__list { background: rgba(var(--c-ink-rgb), 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.18); } .modern-home .site-header:not(.is-stuck) .phone-link__icon, .modern-home .site-header:not(.is-stuck) .menu-toggle { background: rgba(var(--c-ink-rgb), 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-layout="modern"] .nav__list > li > a, [data-layout="modern"] .nav__toggle { font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; } [data-layout="modern"] .phone-link { font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } [data-theme] .pier-figure__labels .pier-figure__callout { background: none !important; } /* Comparison, final: copy left + labelled diagram right; full-width table below. */ .c-compare-top { display: grid; gap: 32px; align-items: center; margin-bottom: clamp(32px, 4vw, 48px); } .c-compare__copy { display: grid; gap: 18px; justify-items: start; } @media (min-width: 1000px) { .c-compare-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } } @media (min-width: 640px) { [data-layout="modern"] .c-table tbody th { width: 22%; } } /* Mobile menu (all versions): navigation first, actions pinned at the bottom. */ .mobile-menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding-top: var(--hh, 72px); } .mobile-menu[hidden] { display: none; } .mobile-menu:not([hidden]) { animation: menu-in 220ms var(--ease-out); } @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .mobile-menu__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 12px 24px; } .mobile-menu__primary > li { border-bottom: 1px solid var(--line); } .mobile-menu__primary > li > a, .mobile-menu__group > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--w-h); letter-spacing: -0.02em; color: var(--head); text-decoration: none; cursor: pointer; list-style: none; } .mobile-menu__group > summary::-webkit-details-marker { display: none; } .mobile-menu__primary .icon { width: 22px; height: 22px; color: var(--icon); transition: transform 200ms var(--ease-out); } .mobile-menu__group[open] > summary .icon { transform: rotate(180deg); } .mobile-menu__sub { display: grid; gap: 2px; padding: 0 0 14px; } .mobile-menu__sub a { display: flex; align-items: center; min-height: 46px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 1.0625rem; font-weight: 600; color: var(--fg); text-decoration: none; } .mobile-menu__sub a:hover { border-left-color: var(--icon); } .mobile-menu__secondary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .mobile-menu__secondary a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; font-weight: 600; color: var(--fg); text-decoration: none; } .mobile-menu__hours { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: 0.9375rem; color: var(--mute); } .mobile-menu__hours .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--icon); flex: none; } .mobile-menu__foot { border-top: 1px solid var(--line); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: var(--bg); } .mobile-menu__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; } .mobile-menu__actions .btn { min-height: 56px; } .mobile-menu__cta { justify-content: space-between; } .mobile-menu__cta .masthead__dot { display: none; } [data-layout="modern"] .mobile-menu__cta { display: inline-flex; padding: 5px 5px 5px 22px; border-radius: 999px; background: var(--c-green); color: var(--c-ink); } [data-layout="modern"] .mobile-menu__cta .masthead__dot { display: grid; width: 46px; height: 46px; background: var(--c-ink); color: #fff; } [data-layout="modern"] .mobile-menu__call { border-radius: 999px; padding-inline: 18px; } [data-layout="modern"] .mobile-menu__sub a:hover { border-left-color: var(--c-green); } @media (max-width: 359px) { .mobile-menu__actions { grid-template-columns: 1fr; } } /* the header stays solid while the menu is open */ .menu-open .site-header { background: var(--bg) !important; backdrop-filter: none !important; } [data-layout="modern"].menu-open .site-header, .menu-open [data-layout="modern"] .site-header { background: var(--c-ink) !important; } /* Modern layout: responsive polish */ .c-head--split > div { display: grid; gap: 16px; justify-items: start; } .c-head { justify-items: start; } .c-head--split > .c-btn { justify-self: start; } @media (max-width: 559px) { .c-btn { width: auto; } .c-hero .c-actions .c-btn--green, .c-cta .c-actions .c-btn--green, .c-lane .c-btn { width: 100%; justify-content: space-between; } .c-actions .c-btn--glass { width: 100%; justify-content: center; } .c-head--split { gap: 20px; } .c-h2 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem); letter-spacing: -0.03em; } } .mobile-menu__actions { grid-template-columns: 56px minmax(0, 1fr); } .mobile-menu__call { width: 56px; padding: 0 !important; justify-content: center; } .mobile-menu__call .tnum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mobile-menu__cta { min-width: 0; white-space: nowrap; } .mobile-menu__cta span:first-child { overflow: hidden; text-overflow: ellipsis; } .mobile-menu__actions { overflow: hidden; } @media (max-width: 359px) { .mobile-menu__actions { grid-template-columns: 56px minmax(0, 1fr); } } @media (max-width: 999px) { [data-layout="modern"] .c-about__badge { left: 0; } [data-layout="modern"] .c-about__media { max-width: 560px; } } /* Menu panel starts below the header so nothing can scroll under it. */ .mobile-menu { top: var(--hh, 72px); padding-top: 0; } .mobile-menu:not([hidden]) { border-top: 1px solid var(--line); } body.menu-open .site-header.site-header, .site-header.menu-solid { background: var(--c-ink, var(--bg)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none; } body.menu-open .site-header .phone-link__icon, body.menu-open .site-header .menu-toggle { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Scroll lock on the root, not the body (a body lock breaks sticky headers in Safari). */ body.menu-open { overflow: visible; } html.menu-lock { overflow: hidden; } .mobile-menu { z-index: 49; } /* Design switch (review aid) */ .design-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(14, 16, 14, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-family: var(--font-body); } .design-toggle__label { padding: 0 8px 0 10px; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); } .design-toggle__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background-color 160ms ease; } .design-toggle__opt:hover { background: rgba(255, 255, 255, 0.1); } .design-toggle__opt[aria-current="true"] { background: #fff; color: #0E100E; } .design-toggle__sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); } .design-toggle__sw--c { background: linear-gradient(135deg, #0E100E 50%, #02FF00 50%); } .design-toggle__sw--d { background: linear-gradient(135deg, #10211A 50%, #C6EE4A 50%); } @media (max-width: 1023px) { .design-toggle { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; } } .menu-open .design-toggle { display: none; } /* Footer social: icon buttons */ .footer__social { gap: 10px; margin-top: 20px; } .footer__social a { display: grid; place-items: center; width: 48px; height: 48px; min-height: 0; border-radius: 50%; color: var(--fg); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out); } .footer__social .icon { width: 22px; height: 22px; } .footer__social a:active { transform: scale(0.95); } @media (hover: hover) and (pointer: fine) { .footer__social a:hover { background: var(--c-green, #02FF00); color: var(--c-ink, #0E100E); text-decoration: none; } } /* Real job media (client photos and videos, Oct 21) */ .c-sign--photo { padding-top: 0; overflow: hidden; } .c-sign__photo { width: calc(100% + 56px); max-width: none; margin: 0 -28px 4px; aspect-ratio: 16 / 10; object-fit: cover; } .c-sign--photo .c-sign__icon { margin-top: -40px; position: relative; box-shadow: 0 0 0 5px #fff; } .c-video__el { object-fit: contain; background: #000; } [data-layout="modern"] .c-process .c-video { aspect-ratio: 4 / 5; max-height: 680px; } @media (min-width: 1100px) { [data-layout="modern"] .c-process { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .c-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .c-gallery__item figure { margin: 0; display: grid; gap: 8px; } .c-gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; } .c-gallery__item figcaption { font-size: 0.9375rem; line-height: 1.4; color: var(--mute); } .c-gallery__item--video { grid-row: span 2; } .c-video--tile { aspect-ratio: auto; height: 100%; min-height: 360px; border-radius: 18px; } .c-video--tile .c-video__btn { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .c-video--tile .c-video__btn svg { width: 26px; height: 26px; } @media (min-width: 768px) { .c-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1100px) { .c-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .c-gallery__item--video { grid-row: span 2; } } /* 123FormBuilder estimate form inside theme panels */ .wlh-form--123 { width: 100%; min-height: 420px; } .wlh-form--123 iframe { width: 100% !important; max-width: 100% !important; border: 0; display: block; } /* Panels holding the 123FormBuilder form take the form's yellow so they read as one piece. */ .c-hero__form:has(.wlh-form--123), .form-panel:has(.wlh-form--123) { --bg: #F3CC02; --fg: #161A18; --head: #161A18; --mute: #3D3410; background: #F3CC02 !important; border-color: #F3CC02 !important; color: #161A18; } .c-hero__form:has(.wlh-form--123) .c-form-title, .form-panel:has(.wlh-form--123) .h3 { color: #161A18; } .c-hero__form:has(.wlh-form--123) .c-form-note, .form-panel:has(.wlh-form--123) .form-panel__note { color: #3D3410; } .form-panel:has(.wlh-form--123) .form-panel__note a { color: #161A18; } .wlh-form--123 { background: #F3CC02; } /* Services dropdown and phone menu grouped: main, then more */ .nav__menu { width: 360px; } .nav__menu-label { margin: 6px 12px 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .nav__menu-label + .nav__menu-secondary { margin-top: 0; } .nav__menu ul + .nav__menu-label { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .nav__menu-secondary { border-top: 0 !important; padding-top: 0 !important; } .nav__menu-secondary a { font-weight: 500; font-size: 0.9688rem; min-height: 40px; } .mobile-menu__sublabel { margin: 12px 0 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .c-link--on-dark { color: #fff; } /* "More services" row: label and links on one line, links as pills */ [data-layout="modern"] .c-services__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; } [data-layout="modern"] .c-services__more > span { display: inline-flex; align-items: center; min-height: 44px; margin-right: 6px; font-weight: 600; color: var(--c-on-dark-mute); } [data-layout="modern"] .c-services__more a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } @media (hover: hover) and (pointer: fine) { [data-layout="modern"] .c-services__more a:hover { background: var(--c-green); color: var(--c-ink); box-shadow: none; } } @media (max-width: 639px) { [data-layout="modern"] .c-services__more > span { flex-basis: 100%; min-height: 0; margin: 0 0 2px; } } /* ===== Owner review round (Oct 29) ===== */ /* Bigger logo (Rosie): header and footer */ [data-layout="modern"] .brand img { width: 168px; } @media (min-width: 400px) { [data-layout="modern"] .brand img { width: 176px; } } @media (min-width: 1180px) { [data-layout="modern"] .brand img { width: 196px; } [data-layout="modern"] .masthead { min-height: 96px; } } @media (min-width: 1400px) { [data-layout="modern"] .brand img { width: 220px; } } @media (min-width: 1180px) and (max-width: 1299px) { [data-layout="modern"] .brand img { width: 176px; } } @media (max-width: 479px) { [data-layout="modern"] .brand img { width: 160px; } [data-layout="modern"] .phone-link span.tnum { display: none; } } .footer__logo { width: 260px; max-width: 100%; } /* Hero slogan */ .c-hero__slogan { margin-top: -6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--c-green); } /* Service cards: photo on top, text below (owner copy is longer) */ [data-layout="modern"] .c-svc { flex-direction: column; align-items: stretch; min-height: 0; background: var(--c-ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } [data-layout="modern"] .c-svc::after { display: none; } [data-layout="modern"] .c-svc__img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; z-index: auto; border-radius: 0; } [data-layout="modern"] .c-svc--diagram .c-svc__img { object-fit: contain; background: #fff; padding: 10px; } [data-layout="modern"] .c-svc__body { flex: 1; gap: 10px; padding: 22px 24px 26px; align-content: start; } [data-layout="modern"] .c-svc__text { font-size: 1.0625rem; line-height: 1.6; color: var(--c-on-dark-2); } [data-layout="modern"] .c-svc__dot { top: 14px; right: 14px; } @media (max-width: 639px) { [data-layout="modern"] .c-svc { flex-direction: column; } [data-layout="modern"] .c-svc__media, [data-layout="modern"] .c-svc__img { position: static; flex: none; min-height: 0; } } @media (hover: hover) and (pointer: fine) { [data-layout="modern"] .c-svc:hover .c-svc__img { transform: none; } [data-layout="modern"] .c-svc:hover { box-shadow: inset 0 0 0 1px var(--c-green); } } /* Logo again lower on the page: closing estimate section */ .c-cta__logo { width: 240px; height: auto; margin-bottom: 4px; } [data-layout="modern"] .c-cta__img { object-position: 50% 30%; } /* About: Matt and Rosie truck photo is landscape; keep the door logo and both owners in frame */ [data-layout="modern"] .c-about__main img { aspect-ratio: 4 / 3; object-position: 42% 40%; } [data-layout="modern"] .c-about__media { padding: 0 14% 22% 0; } [data-layout="modern"] .c-about__second { width: 44%; } [data-layout="modern"] .c-about__badge { left: auto; right: 4%; top: -22px; } @media (max-width: 640px) { [data-layout="modern"] .c-about__badge { right: 2%; top: -14px; max-width: 150px; padding: 10px 12px; } [data-layout="modern"] .c-about__badge strong { font-size: 2rem; } [data-layout="modern"] .c-about__badge span { font-size: 0.8125rem; } } /* Homepage-only launch: internal links are "#" and inert; estimate buttons land on the hero form. */ a[href="#"] { pointer-events: none; cursor: default; } #estimate { scroll-margin-top: calc(var(--hh, 96px) + 16px); }