/* ========================================================= FallZone 2026 — main stylesheet Re-skin of the legacy Divi-based design. Palette and layout pulled from reference/theme/style.css and reference screenshots. ========================================================= */ :root { --fz-blue: #1d00d0; --fz-blue-alt: #0000ff; --fz-red: #fa0000; --fz-red-alt: #e02b20; --fz-text: #333333; --fz-footer-bg: #d3d3d3; --fz-border: rgba(0, 0, 0, 0.2); --fz-max-width: 1240px; --fz-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fz-font); font-size: 16px; font-weight: 400; color: var(--fz-text); line-height: 1.65; background: #ffffff; } img { max-width: 100%; height: auto; } a { color: var(--fz-blue); text-decoration: none; } a:hover { color: var(--fz-red); } .container { max-width: var(--fz-max-width); margin: 0 auto; padding: 0 20px; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; margin: 0 0 20px; color: var(--fz-blue); } h1 { font-size: 28px; } h2 { font-size: 22px; } h4 { font-size: 18px; } p { margin: 0 0 24px; } .entry-content > :last-child { margin-bottom: 0; } ul, ol { margin: 0 0 24px; padding-left: 24px; } li { margin-bottom: 4px; } blockquote { margin: 20px 0 30px; padding-left: 20px; border-left: 5px solid var(--fz-blue); font-size: 14px; font-weight: 500; color: #666666; } blockquote p { margin: 0; } blockquote strong { font-size: 24px; font-weight: 700; color: var(--fz-blue-alt); } .skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--fz-blue); padding: 10px 16px; z-index: 10000; } .skip-link:focus { left: 10px; top: 10px; } /* =Header ------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #ffffff; border-bottom: 1px solid var(--fz-border); padding: 12px 0 10px; } /* WP core's #wpadminbar is fixed at the true viewport top when logged in (32px desktop, 46px at its own <783px breakpoint) and pushes normal document flow down via a margin-top on — but position:fixed elements like .site-header ignore that margin and stay glued to viewport top:0, so without this the header renders 32/46px too high and #page-content's padding-top (which only clears the header's own height) leaves that same gap empty above the content. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* Push page content down by the fixed header's actual height (set via JS, see main.js) so nothing sits underneath it — avoids a hardcoded value that would drift if header content/wrapping changes. */ #page-content { padding-top: var( --fz-header-height, 164px ); } .site-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; } .site-header__contact { text-align: right; margin-left: auto; } .site-header__contact h2 { font-size: 22px; margin: 0 0 8px; color: var(--fz-text); } .site-header__contact a { color: var(--fz-red); font-weight: 700; } .site-header__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: flex-end; } .site-header__social li { line-height: 0; } .site-header__social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 3px; color: #fff; } .site-header__social a.icon-facebook { background: #3b5998; } .site-header__social a.icon-twitter { background: #00aced; } .site-header__social a.icon-youtube { background: #a82400; } .site-header__social a.icon-instagram { background: #ffc838; } .site-branding__logo img { max-height: 70px; max-width: 100%; height: auto; display: block; } .site-branding__logo { font-size: 22px; font-weight: 700; color: var(--fz-blue); } /* =Primary Nav ------------------------------------------------------- */ .primary-navigation { width: 100%; margin-top: 14px; padding-top: 8px; } .primary-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; justify-content: center; } .primary-navigation li { position: relative; } .primary-navigation a { display: block; padding: 8px 6px; color: var(--fz-red); font-weight: 700; font-size: 15px; white-space: nowrap; } .primary-navigation a:hover, .primary-navigation .current-menu-item > a { color: var(--fz-blue); } .menu-toggle { display: none; margin-left: auto; background: var(--fz-blue); color: #fff; border: none; padding: 10px 14px; font-size: 16px; cursor: pointer; border-radius: 3px; } @media (max-width: 782px) { .site-header { padding: 10px 0 8px; } .site-header__row { align-items: center; justify-content: space-between; text-align: center; gap: 8px 14px; } .site-branding__logo { order: 1; display: flex; align-items: center; flex: 1 1 auto; max-width: calc(100% - 58px); } .site-branding__logo img { max-height: 48px; } .menu-toggle { display: block; order: 2; flex: 0 0 auto; margin-left: 0; width: 44px; height: 40px; padding: 0; font-size: 20px; line-height: 1; } .primary-navigation { display: none; order: 4; margin-top: 8px; } .primary-navigation.is-open { display: block; } .primary-navigation ul { flex-direction: column; text-align: center; } .site-header__contact { order: 3; width: 100%; text-align: center; } .site-header__contact h2 { font-size: 20px; margin-bottom: 6px; } .site-header__social { justify-content: center; } .entry-content .alignleft, .entry-content .alignright { float: none; display: block; max-width: 100%; margin: 0 auto 20px; } } /* =Layout ------------------------------------------------------- */ .site-main { padding: 30px 0 50px; min-height: 40vh; } .home .site-main { padding-top: 25px; } .content-area-with-sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; } @media (max-width: 782px) { .content-area-with-sidebar { grid-template-columns: 1fr; } } .entry-title { color: var(--fz-blue); margin-bottom: 6px; } /* Single blog posts only — matches live's title/meta spacing there (30px below title, 21px below the author/date/category meta line). */ .single-post .entry-title { margin-bottom: 30px; } .single-post .post-meta { margin-bottom: 21px; } .entry-content h1:first-child, .entry-content > h1:first-of-type { margin-top: 0; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 26px; margin-bottom: 14px; } .entry-content > h1:first-child, .entry-content > h2:first-child, .entry-content > h3:first-child, .entry-content > h4:first-child { margin-top: 0; } .entry-content h2, .entry-content h3 { clear: both; } .page-template-page-location .entry-content > h2:first-child { font-size: 18px; margin-bottom: 10px; } .page-template-page-location .entry-content h2:not(.gform_title), .page-template-page-location .entry-content h3 { font-size: 16px; line-height: 1.35; margin: 18px 0 8px; } .page-template-page-location .entry-content h3 { color: var(--fz-text); } .entry-content img { border-radius: 3px; } .entry-content figure { margin-top: 0; margin-bottom: 24px; } /* The legacy [caption] shortcode wraps images in
with an inline `style="width: px"` on the figure itself. That fixed pixel width doesn't shrink at narrow viewports, so it overflows and forces the whole image out past the viewport edge even though the image's own max-width:100% is technically being honored (100% of an oversized, unconstrained parent). Affects the large majority of migrated content — 61 of 75 pages. */ .wp-caption { max-width: 100%; margin-bottom: 24px; text-align: center; background: #f7f7f7; border: 1px solid #dddddd; padding: 0; } .wp-caption img { display: block; width: 100%; height: auto; } .wp-caption-text, .entry-content figcaption { font-size: 12px; line-height: 1.4; color: #666666; margin: 0; padding: 8px 10px; text-align: center; background: #f7f7f7; } .entry-content figure.wp-block-image img { display: block; } .entry-content figure.wp-block-image figcaption { border: 1px solid #dddddd; border-top: 0; width: 100%; } /* Legacy [embed] shortcode output has no wrapper div/class to hang add_theme_support('responsive-embeds') styling on (that only covers the Gutenberg wp:embed block), so make any raw YouTube/Vimeo iframe in content responsive directly. */ .entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 auto 24px; } .entry-content .alignleft { float: left; margin: 0 28px 24px 0; } .entry-content .alignright { float: right; margin: 0 0 24px 28px; } .entry-content .aligncenter { display: block; margin: 0 auto 24px; } .entry-content > .wp-block-image > figure.aligncenter.is-resized { display: table; width: auto; max-width: 100%; margin: 0 auto 24px; } .entry-content > .wp-block-image > figure.aligncenter.is-resized img { display: block; } .entry-content .alignleft, .entry-content .alignright { max-width: 48%; } /* =Buttons ------------------------------------------------------- */ .btn, .wp-block-button__link, .entry-content .wp-block-button__link { display: inline-block; background: var(--fz-blue-alt); color: #fff !important; font-weight: 600; padding: 12px 24px; border-radius: 4px; border: none; } .btn:hover, .wp-block-button__link:hover { background: var(--fz-red); color: #fff !important; } /* =Hero slider (reusable — see fallzone_hero_slider() in template-tags.php) ------------------------------------------------------- */ .home-native-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr); gap: 22px; align-items: stretch; margin-bottom: 28px; } /* Full-bleed variant: the contact form moves out of the hero into the split section below the service cards, so the hero is visual-only and breaks out of .container using the standard 100vw + negative-margin technique. overflow-x:hidden on body is required with this technique — 100vw includes the scrollbar's own reserved width, which .container's narrower measured width does not, so the hero renders a scrollbar's-width too wide without it. */ body { overflow-x: hidden; } .home-native-hero--full { display: block; width: 100vw; margin-top: -25px; /* cancels .home .site-main's 25px padding-top so this full-bleed hero sits flush under the fixed header, with no gap. */ margin-left: calc(50% - 50vw); margin-bottom: 60px; } .home-native-hero--full .home-native-hero__visual { min-height: 660px; } .home-native-hero--full .home-native-hero__visual .fz-hero-slider { min-height: 660px; } @media (max-width: 782px) { .home-native-hero--full .home-native-hero__visual, .home-native-hero--full .home-native-hero__visual .fz-hero-slider { min-height: 520px; } } .home-native-hero__visual { position: relative; min-height: 100%; } .home-native-hero__visual .fz-hero-slider { height: 100%; min-height: 390px; margin-bottom: 0; } .home-native-hero__copy { position: absolute; left: 18px; right: 18px; top: auto; bottom: 22px; z-index: 3; max-width: 680px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .home-native-hero__copy h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.12; color: #fff; } .home-native-hero__copy p { margin-bottom: 10px; font-size: 18px; line-height: 1.45; } .home-native-hero__trust { margin: 0 0 12px; padding-left: 19px; font-size: 14px; line-height: 1.45; } .home-native-hero__services { display: flex; flex-wrap: wrap; gap: 7px; } .home-native-hero__services a { display: inline-block; background: rgba(255, 255, 255, 0.94); color: var(--fz-blue-alt); border: 1px solid rgba(0, 68, 204, 0.25); border-radius: 3px; padding: 5px 8px; font-size: 13px; font-weight: 700; text-shadow: none; } .home-native-hero__form { position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 255, 0.22); border-top: 6px solid var(--fz-red); border-radius: 4px; padding: 18px 18px 16px; background: linear-gradient(180deg, #ffffff, #f6f8ff); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .home-native-hero__form .gform_wrapper .gform_title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 255, 0.14); font-size: 18px; font-weight: 700; line-height: 1.22; } .home-native-hero__form .gform_fields { display: grid !important; grid-template-columns: 1fr !important; column-gap: 10px; row-gap: 10px; } .home-native-hero__form .gfield { grid-column: 1 / -1 !important; margin-bottom: 0; } .home-native-hero__form .gform_wrapper label { margin-bottom: 5px; font-size: 14px; line-height: 1.25; color: var(--fz-text); } .home-native-hero__form .gform_wrapper input, .home-native-hero__form .ginput_recaptcha { min-height: 38px; border-color: rgba(0, 0, 0, 0.16); border-radius: 2px; background: #fff; } .home-native-hero__form .gform_wrapper .gform_button { width: 100%; margin-top: 6px; padding: 11px 18px; background: var(--fz-blue-alt); border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); font-weight: 700; letter-spacing: 0; text-transform: none; } .home-native-hero__form .gform_wrapper .gform_button:hover { background: var(--fz-red); } @media (max-width: 960px) { .home-native-hero { grid-template-columns: 1fr; } .home-native-hero__visual .fz-hero-slider { min-height: 330px; } } @media (max-width: 600px) { .site-header__contact { width: 100%; } .site-branding__logo img { max-height: 44px; } .site-header__contact { text-align: center; } .primary-navigation a { font-size: 13px; white-space: normal; } .home-native-hero { overflow: hidden; } .home-native-hero, .home-native-hero__visual, .home-native-hero__form { box-sizing: border-box; min-width: 0; max-width: 100%; } .home-native-hero__visual .fz-hero-slider { max-width: 100%; min-height: 455px; } .home-native-hero__copy { left: 10px; right: 10px; top: auto; bottom: 12px; width: auto; max-width: none; padding: 14px 13px 15px; background: rgba(0, 0, 0, 0.52); border-top: 3px solid var(--fz-red); border-radius: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); } .home-native-hero__copy h1 { max-width: none; font-size: 22px; overflow-wrap: anywhere; } .home-native-hero__copy p { max-width: none; font-size: 14px; } .home-native-hero__trust { max-width: none; font-size: 12px; } .home-native-hero__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; } .home-native-hero__services a { padding: 5px 6px; font-size: 12px; line-height: 1.2; text-align: center; white-space: normal; } .home-native-hero__form { overflow: hidden; width: 100%; padding: 16px 14px; } .home-native-hero__form * { max-width: 100%; } .home-native-hero__form .gform_wrapper .gform_title { width: auto; max-width: 290px; font-size: 16px; overflow-wrap: anywhere; white-space: normal; } .home-native-hero__form .gform_fields { grid-template-columns: 1fr !important; } .home-native-hero__form .gfield { grid-column: 1 / -1 !important; } } .fz-hero-slider { position: relative; width: 100%; aspect-ratio: 2.37 / 1; overflow: hidden; border-radius: 4px; margin-bottom: 30px; } .fz-hero-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .fz-hero-slider__slide.is-active { opacity: 1; } .fz-hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Single-image hero (no JS rotation needed) just needs normal flow. */ .fz-hero-slider:not(.fz-hero-slider--multi) .fz-hero-slider__slide { position: relative; opacity: 1; } .fz-hero-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; opacity: 0; cursor: pointer; z-index: 2; transition: opacity 0.2s ease; } .fz-hero-slider__arrow svg { width: 40px; height: 40px; } .fz-hero-slider:hover .fz-hero-slider__arrow { opacity: 0.85; } .fz-hero-slider__arrow:hover { opacity: 1 !important; } .fz-hero-slider__arrow--prev { left: 8px; } /* Touch devices have no :hover — show arrows at reduced opacity by default so they're actually usable, not permanently invisible. */ @media (hover: none) { .fz-hero-slider__arrow { opacity: 0.7; } } @media (max-width: 600px) { .fz-hero-slider__arrow { width: 40px; height: 40px; } .fz-hero-slider__arrow svg { width: 26px; height: 26px; } } .fz-hero-slider__arrow--next { right: 8px; } .feature-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0 45px; } @media (max-width: 900px) { .feature-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); row-gap: 38px; } } @media (max-width: 500px) { .feature-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; row-gap: 46px; } } .feature-grid__item { display: flex; flex-direction: column; } .feature-grid__item figure.wp-block-image { margin: 0 0 10px; } .feature-grid__item img { width: 100%; height: 170px; object-fit: cover; border-radius: 4px; } .feature-grid__item h4 { margin-bottom: 8px; } .feature-grid__item p { line-height: 1.6; } /* Reusable text-formatting utilities — the live site's original Divi content used inline red/blue spans throughout for brand emphasis and lead-in statements. These classes replace that inline styling. */ .fz-brand { color: var(--fz-red); } .fz-lead { color: var(--fz-blue-alt); } .feature-grid__item .wp-block-buttons { margin-top: auto; padding-top: 12px; } /* =Below-hero intro (title + trust copy + service quick links) ------------------------------------------------------- */ .home-below-hero { margin: 55px 0 60px; } .home-below-hero h2 { margin: 0 0 18px; font-size: 28px; line-height: 1.2; } .home-below-hero p { margin-bottom: 18px; font-size: 17px; line-height: 1.5; } .home-below-hero ul { margin: 0 0 26px; padding-left: 20px; font-size: 15px; line-height: 1.8; } .home-below-hero ul li { margin-bottom: 6px; } .home-below-hero__services { display: flex; flex-wrap: wrap; gap: 10px; } .home-below-hero__services a { display: inline-block; background: #f2f2f2; color: var(--fz-blue-alt); border: 1px solid rgba(0, 68, 204, 0.2); border-radius: 3px; padding: 6px 10px; font-size: 13px; font-weight: 700; } .home-below-hero__services a:hover { background: var(--fz-blue-alt); color: #fff; } /* =Homepage split sections (contact form / why-choose video) ------------------------------------------------------- */ .home-adj-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 32px; align-items: start; margin: 70px 0; } @media (max-width: 782px) { .home-adj-split { grid-template-columns: 1fr; } } .home-adj-video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 4px; overflow: hidden; background: #000; } .home-adj-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .home-adj-centered { max-width: 900px; margin: 70px auto 0; text-align: center; font-size: 19px; } .home-adj-testimonials { margin: 40px 0 0; } .home-adj-testimonial { max-width: 900px; margin: 0 auto 36px; text-align: center; } .home-adj-testimonial:last-child { margin-bottom: 0; } .home-adj-after { margin-top: 70px; } .feature-grid__item h4 a { color: inherit; } /* =Partner logo strip ------------------------------------------------------- */ figure.logo-links.wp-block-gallery { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin: 30px 0; } figure.logo-links .wp-block-image, figure.logo-links.wp-block-gallery > figure { margin: 0; width: auto !important; flex-grow: 0 !important; flex-basis: auto !important; } figure.logo-links img { width: 110px !important; height: auto !important; max-width: 110px; object-fit: contain; } /* =States list ------------------------------------------------------- */ .states-list { text-align: left; } .states-list a { } /* =Sidebar ------------------------------------------------------- */ .widget-area .widget { margin-bottom: 30px; } .widget-area .widget-title, .widget-area h4.widgettitle { font-size: 18px; margin-bottom: 12px; color: var(--fz-blue); } .widget-area .menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fz-border); } .widget-area .menu li { border-bottom: 1px solid var(--fz-border); } .widget-area .menu a { display: block; padding: 6px 0; font-size: 14px; color: var(--fz-text); } .widget-area .menu a:hover { color: var(--fz-blue); } /* =Gravity Forms tweaks ------------------------------------------------------- */ .gform_required_legend { display: none; } .gform_wrapper .gform_title { margin-bottom: 14px; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--fz-text); } .gform_wrapper .gform_fields { row-gap: 12px !important; } .gform_wrapper .gfield { margin-bottom: 0; } .gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea { background: #fff; border: 1px solid #ddd; border-radius: 2px; font-family: var(--fz-font); font-size: 14px; font-weight: 300; line-height: 1.35; color: #000; } .gform_wrapper input, .gform_wrapper select { min-height: 38px; padding: 7px 10px !important; } .gform_wrapper textarea { padding: 9px 10px !important; } .gform_wrapper label { margin-bottom: 4px; font-weight: 700; line-height: 1.25; } .gform_wrapper .gform_button, .gform-theme-button { background: var(--fz-blue-alt); color: #fff; border: none; border-radius: 3px; padding: 11px 28px; font-weight: 600; line-height: 1.2; cursor: pointer; } .gform_wrapper .gform_button:hover { background: var(--fz-red); } .side-form .gform_wrapper input, .side-form .gform_wrapper select, .side-form .gform_wrapper textarea { width: 100%; } .side-form .gform_wrapper .gform_button { width: 100%; text-align: center; } /* =Blog / archive ------------------------------------------------------- */ .post-list { display: flex; flex-wrap: wrap; column-gap: 30px; } .post-summary { margin-bottom: 30px; border: 1px solid var(--fz-border); width: calc(33.333% - 20px); padding: 20px; } @media (max-width: 900px) { .post-summary { width: calc(50% - 15px); } } @media (max-width: 600px) { .post-summary { width: 100%; } } .post-summary__thumb img { width: 100%; border-radius: 4px; margin-bottom: 15px; } .post-summary__meta { font-size: 13px; color: #777; margin-bottom: 10px; } .post-summary h2 { margin-bottom: 10px; } .read-more { font-weight: 700; } .pagination { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-block; padding: 8px 14px; border: 1px solid var(--fz-border); border-radius: 3px; } .pagination .current { background: var(--fz-blue); color: #fff; border-color: var(--fz-blue); } /* =Footer ------------------------------------------------------- */ .site-footer { background: var(--fz-footer-bg); padding: 28px 0 10px; margin-top: 40px; font-size: 13px; } .site-footer__nav ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; } .site-footer__nav a { color: var(--fz-text); } .site-footer__bottom { text-align: center; } .site-footer__bottom .site-header__social { margin: 0 0 15px; justify-content: center; } /* =404 ------------------------------------------------------- */ .error-404 { text-align: center; padding: 60px 0; } /* =Utility ------------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* =Homepage V2 preview ------------------------------------------------------- */ .home-v2-preview { padding-top: 0; background: #ffffff; } .home-v2-preview #page-content { display: none; } .home-v2-preview .site-header, .home-v2-preview .site-footer { display: none; } .home-v2-preview .skip-link { position: absolute; z-index: 1000; } .home-v2-shell { max-width: 1440px; margin: 0 auto; padding-right: 58px; padding-left: 58px; } .home-v2-header { background: #ffffff; border-bottom: 1px solid #d6d6d6; } .home-v2-header__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 30px; padding-bottom: 0; } .home-v2-logo img { display: block; width: min(575px, 46vw); height: auto; } .home-v2-header__actions { display: flex; align-items: flex-start; gap: 30px; margin-left: auto; } .home-v2-contact-chip { display: inline-flex; align-items: center; gap: 10px; color: var(--fz-blue); font-size: 14px; font-weight: 700; line-height: 1.15; } .home-v2-contact-chip strong { display: block; color: var(--fz-red); font-size: 19px; font-weight: 800; text-decoration: underline; } .home-v2-contact-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--fz-blue); color: #fff; font-size: 20px; line-height: 1; } .home-v2-social-bar { background: linear-gradient(135deg, transparent 0 68%, var(--fz-blue) 68% 100%); margin-top: -4px; } .home-v2-social-bar .home-v2-shell { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 45px; } .home-v2-follow-label { color: #fff; font-size: 16px; font-weight: 800; } .home-v2-social-bar .site-header__social a { width: 28px; height: 28px; border-radius: 0; } .home-v2-nav { background: #f4f4f4; border-top: 1px solid #dedede; border-bottom: 1px solid #cfcfcf; } .home-v2-menu { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; } .home-v2-menu li { display: flex; align-items: center; } .home-v2-menu li + li::before { content: ""; width: 1px; height: 18px; margin: 0 15px; background: #888; } .home-v2-menu a { display: block; padding: 13px 0 12px; color: var(--fz-red); font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; } .home-v2-menu .current-menu-item > a, .home-v2-menu a:hover { color: var(--fz-blue); } .home-v2-main { background: #fff; } .home-v2-hero { height: clamp(390px, 35vw, 525px); overflow: hidden; background: #e9e9e9; } .home-v2-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; } .home-v2-services { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; margin-top: -36px; margin-bottom: 52px; } .home-v2-card { display: flex; flex-direction: column; min-height: 532px; padding: 40px 26px 24px; background: #ffffff; border: 1px solid #999; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); text-align: center; } .home-v2-card__image { display: block; margin-bottom: 26px; } .home-v2-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; } .home-v2-card h2 { margin: 0 0 17px; border: 0; padding: 0; font-size: 19px; font-weight: 800; line-height: 1.25; text-align: center; } .home-v2-card p { margin: 0 0 20px; font-size: 13px; line-height: 1.32; text-align: center; } .home-v2-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 220px; min-height: 43px; margin: auto auto 0; border-radius: 999px; background: var(--fz-blue-alt); color: #fff !important; font-size: 16px; font-weight: 800; line-height: 1; } .home-v2-button:hover { background: var(--fz-red); } .home-v2-intro-contact { display: grid; grid-template-columns: 1fr 1.04fr; padding-top: 0; padding-bottom: 68px; } .home-v2-intro { background: #f6f4f4; padding: 51px 66px 48px; } .home-v2-intro h1, .home-v2-locations h2 { margin: 0; border: 0; padding: 0; font-size: 24px; font-weight: 800; line-height: 1.2; } .home-v2-rule { width: 100%; height: 5px; margin: 14px 0 30px; background: linear-gradient(90deg, var(--fz-red) 0 24%, var(--fz-blue-alt) 24% 100%); } .home-v2-intro p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; } .home-v2-intro ul { list-style: none; margin: 22px 0 0; padding: 0; } .home-v2-intro li { position: relative; margin: 0 0 14px; padding-left: 34px; font-size: 13.5px; line-height: 1.4; } .home-v2-intro li::before { content: "\2713"; position: absolute; top: -2px; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: var(--fz-blue-alt); color: #fff; font-size: 14px; font-weight: 800; } .home-v2-contact-panel { display: flex; align-items: center; justify-content: center; min-height: 548px; padding: 58px 62px 52px; background: linear-gradient(rgba(0, 65, 195, 0.1), rgba(0, 65, 195, 0.1)), url("../images/home-v2-contact-texture.jpg") center / cover, var(--fz-blue); } .home-v2-contact-panel__inner { width: min(100%, 530px); } .home-v2-contact-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 38px; } .home-v2-contact-title span { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--fz-red); color: #fff; font-size: 31px; } .home-v2-contact-title h2 { margin: 0; color: #fff; font-size: 32px; font-weight: 800; line-height: 1.15; } .home-v2-contact-panel .gform_wrapper .gform_fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 19px 22px !important; } .home-v2-contact-panel .gfield { grid-column: auto !important; } .home-v2-contact-panel .gfield--type-captcha, .home-v2-contact-panel .gform_footer { grid-column: span 1 !important; } .home-v2-contact-panel .gfield--type-captcha { overflow: visible; } .home-v2-contact-panel .ginput_recaptcha { transform: scale(0.86); transform-origin: left top; } .home-v2-contact-panel .gform_footer { width: calc(50% - 11px); align-self: center; margin: 19px 0 0 auto !important; padding: 0 !important; } .home-v2-contact-panel label, .home-v2-contact-panel .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .home-v2-contact-panel input { width: 100% !important; min-height: 42px; border: 0 !important; border-radius: 0 !important; padding: 10px 16px !important; font-size: 14px !important; } .home-v2-contact-panel .gform_button { width: 100%; min-height: 46px; border-radius: 999px; background: var(--fz-red) !important; font-size: 16px; font-weight: 800; } .home-v2-reviews { position: relative; display: grid; grid-template-columns: 170px repeat(3, minmax(0, 1fr)); align-items: center; gap: 42px; padding-bottom: 66px; } .home-v2-reviews::before, .home-v2-reviews::after { position: absolute; top: 50%; transform: translateY(-50%); color: #8c8c8c; font-size: 38px; font-weight: 300; line-height: 1; } .home-v2-reviews::before { content: "\2039"; left: -34px; } .home-v2-reviews::after { content: "\203a"; right: -34px; } .home-v2-google-score { text-align: center; } .home-v2-google-word { display: block; font-size: 38px; line-height: 1; background: linear-gradient(90deg, #4285f4, #db4437, #f4b400, #0f9d58); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-v2-google-score strong { display: block; margin-top: 8px; font-size: 30px; font-weight: 400; line-height: 1; } .home-v2-stars { color: #f6b400; letter-spacing: 1px; } .home-v2-google-score small { display: block; color: #333; font-size: 12px; } .home-v2-review-card { min-height: 126px; padding: 17px 20px 15px; background: #fff; border: 1px solid #ededed; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .home-v2-review-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .home-v2-review-card__head strong, .home-v2-review-card__head small { display: block; font-size: 12px; line-height: 1.25; } .home-v2-review-card__head small { color: #777; } .home-v2-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: #76544a; color: #fff; font-size: 15px; font-weight: 700; } .home-v2-g { margin-left: auto; color: #4285f4; font-weight: 800; } .home-v2-review-card p, .home-v2-review-card a { font-size: 12px; line-height: 1.35; } .home-v2-review-card p { margin: 4px 0 2px; } .home-v2-video-locations { display: grid; grid-template-columns: 1.34fr 1fr; gap: 26px; padding-bottom: 72px; } .home-v2-video-box { padding: 62px 62px 56px; background: #f90528; } .home-v2-video-frame { position: relative; display: block; aspect-ratio: 669 / 408; background: #111; overflow: hidden; } .home-v2-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .home-v2-video-frame::after { content: none; position: absolute; right: 16px; bottom: 16px; color: var(--fz-red); font-size: clamp(22px, 4vw, 54px); font-style: italic; font-weight: 800; line-height: 0.95; text-shadow: 2px 2px 0 var(--fz-blue), 0 2px 8px rgba(255, 255, 255, 0.8); } .home-v2-play { display: none; position: absolute; top: 50%; left: 50%; width: 72px; height: 50px; border-radius: 12px; background: rgba(255, 0, 0, 0.88); transform: translate(-50%, -50%); } .home-v2-play::after { content: ""; position: absolute; top: 50%; left: 52%; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #fff; transform: translate(-50%, -50%); } .home-v2-locations { padding: 38px 18px 0 36px; } .home-v2-locations p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; } .home-v2-locations ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; list-style: none; margin: 10px 0 0; padding: 0; } .home-v2-locations li, .home-v2-locations a { font-size: 13px; line-height: 1.35; } .home-v2-logo-row { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 48px; padding-bottom: 62px; } .home-v2-logo-row img { display: block; max-width: 100%; max-height: 72px; margin: 0 auto; object-fit: contain; } .home-v2-footer { background: #e7e7e7; } .home-v2-footer__stripe { height: 8px; background: var(--fz-red); } .home-v2-footer__main { display: grid; grid-template-columns: minmax(280px, 1fr) 220px minmax(360px, 1.4fr); align-items: center; gap: 46px; padding-top: 44px; padding-bottom: 28px; } .home-v2-footer__brand img { max-width: 390px; width: 100%; height: auto; } .home-v2-footer__phone { display: block; color: var(--fz-blue); font-weight: 700; line-height: 1.2; } .home-v2-footer__phone strong { display: block; color: var(--fz-red); font-size: 20px; font-weight: 800; } .home-v2-footer-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 30px; list-style: none; margin: 0; padding: 0; } .home-v2-footer-menu a { color: #222; font-size: 14px; font-weight: 700; } .home-v2-footer__copyright { padding: 8px 20px 9px; background: var(--fz-blue-alt); color: #fff; font-size: 12px; font-weight: 700; text-align: center; } @media (max-width: 1120px) { .home-v2-shell { padding-right: 30px; padding-left: 30px; } .home-v2-header__top, .home-v2-header__actions { flex-wrap: wrap; } .home-v2-services { gap: 22px; } .home-v2-card { padding-right: 18px; padding-left: 18px; } .home-v2-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .home-v2-logo img { width: min(460px, 100%); } .home-v2-header__top, .home-v2-header__actions { justify-content: center; text-align: center; } .home-v2-social-bar { background: var(--fz-blue); } .home-v2-menu { flex-wrap: wrap; row-gap: 4px; } .home-v2-menu li + li::before { margin: 0 8px; } .home-v2-services, .home-v2-intro-contact, .home-v2-video-locations, .home-v2-footer__main { grid-template-columns: 1fr 1fr; } .home-v2-services { margin-top: 28px; } .home-v2-intro, .home-v2-contact-panel { padding: 34px 28px; } .home-v2-footer__main { text-align: center; } .home-v2-footer__brand, .home-v2-footer__phone, .home-v2-footer-menu { grid-column: 1 / -1; } } @media (max-width: 640px) { .home-v2-shell { padding-right: 18px; padding-left: 18px; } .home-v2-header__actions, .home-v2-contact-chip, .home-v2-social-bar .home-v2-shell { flex-direction: column; align-items: center; } .home-v2-hero { height: 260px; } .home-v2-services, .home-v2-intro-contact, .home-v2-reviews, .home-v2-video-locations, .home-v2-logo-row { grid-template-columns: 1fr; } .home-v2-card { min-height: auto; } .home-v2-contact-panel .gform_wrapper .gform_fields, .home-v2-locations ul, .home-v2-footer-menu { grid-template-columns: 1fr !important; } .home-v2-contact-panel .gfield--type-captcha, .home-v2-contact-panel .gform_footer, .home-v2-contact-panel .gfield--type-email { grid-column: 1 / -1 !important; } .home-v2-contact-panel .ginput_recaptcha { transform: scale(0.82); } .home-v2-locations { padding: 0; } .home-v2-video-box { padding: 22px; } }