/* Generated by tools/build_frontend_css.py. Do not edit directly. */ /* Ownership output: v2-front-page-sections */ /* Source 1: assets/src/v2/front-page-legacy.css | media: all */ /* ------------------------------------------------------------ Front Page (Stylish Portfolio alignment) Scope: front page only ------------------------------------------------------------- */ @media (max-width: 576px) { body.home .content-section { padding-top: 5rem; padding-bottom: 5rem; } } /* Match the Stylish Portfolio heading rhythm */ body.home .content-section-heading h3, body.home .content-section-heading .vh-section-eyebrow { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.home .content-section-heading h2 { font-weight: 700; line-height: 1.15; } /* ------------------------------------------------------------ Masthead polish (keeps your gradient fallback) Your theme already sets a readable background for .masthead. ------------------------------------------------------------- */ /* Modern-business hero layout (text left, media right) */ body.home .masthead { color: #fff; padding-top: 6rem; padding-bottom: 6rem; } .footer.masthead { color: #fff; padding-top:0; padding-bottom: 0; } @media (min-width: 992px) { body.home .masthead { padding-top: 8rem; padding-bottom: 8rem; } .footer.masthead { color: #fff; padding-top:0; padding-bottom: 0; } } body.home .vh-hero-title { font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(2.25rem, 2.8vw, 4.25rem); } body.home .vh-hero-lead { color: rgba(255, 255, 255, 0.82); font-size: 1.125rem; line-height: 1.55; max-width: 38rem; } body.home .vh-hero-media { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); } body.home .vh-hero-media img { width: 100%; height: auto; display: block; } body.home .vh-hero-placeholder { min-height: 320px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.22); font-weight: 700; font-size: 3.5rem; letter-spacing: 0.08em; } @media (max-width: 576px) { body.home .vh-hero-placeholder { min-height: 220px; font-size: 2.5rem; } } body.home .masthead .vh-c-button.btn-xl { border-radius: 0.5rem; } body.home .masthead .vh-c-button.vh-c-button--dark { background-color: #212529; border-color: #212529; } body.home .masthead .vh-c-button.vh-c-button--primary { background-color: #9fa90b; border-color: #9fa90b; } body.home .masthead .vh-c-button.vh-c-button--primary:hover, body.home .masthead .vh-c-button.vh-c-button--primary:focus { background-color: #155d74; border-color: #155d74; } /* ------------------------------------------------------------ Services section front-page.php uses:
and inside: .vh-c-card (white) + .vh-c-button--dark (requested) ------------------------------------------------------------- */ body.home #services.bg-primary { background-color: #9fa90b; } /* Icon above the image (Stylish Portfolio inspired, but modernized) */ body.home #services .service-icon { width: 4.5rem; height: 4.5rem; background-color: #9fa90b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2); } body.home #services .vh-c-card { border: 0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; } body.home #services .vh-c-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); } body.home #services .vh-c-card__body { padding: 1rem 1rem 1.5rem; } body.home #services .vh-c-card img { width: 100%; height: auto; } body.home #services .vh-c-card h3 a { color: #0f172a; text-decoration: none; } body.home #services .vh-c-card h3 a:hover { text-decoration: underline; } /* Keep the Learn more button black, but make it feel intentional */ body.home #services .vh-c-card .vh-c-button.vh-c-button--dark { background-color: #111827; border-color: #111827; } body.home #services .vh-c-card .vh-c-button.vh-c-button--dark:hover, body.home #services .vh-c-card .vh-c-button.vh-c-button--dark:focus { background-color: #0b1220; border-color: #0b1220; } /* ------------------------------------------------------------ FAQ section front-page.php wraps accordion with inline max-width + margin auto. We'll style the accordion items to match the template’s clean look. ------------------------------------------------------------- */ /* ------------------------------------------------------------ Portfolio section front-page.php uses Stylish Portfolio .portfolio-item grid. ------------------------------------------------------------- */ #front-portfolio { } /* Light section background (repeatable pattern) */ .vh-section--light { background-image:linear-gradient(to bottom, #11182721 0%, #F6F7F3 60%), url(/wp-content/uploads/2026/02/vh-pattern-speckle.png); background-repeat: no-repeat, repeat; background-size: 100% 100%, 240px 240px; background-blend-mode: normal; } /* Transition band between dark hero and light section */ .vh-section--transition { background-color: #F8FAFC; background-image: linear-gradient(to bottom, #0F172A 0%, rgba(15,23,42,0.0) 55%), url("/wp-content/uploads/vh-pattern-dots.svg"); background-repeat: no-repeat, repeat; background-size: 100% 100%, 240px 240px; } .vh-front-portfolio-grid { border-radius: 1rem; overflow: hidden; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.16); } .vh-front-portfolio-grid > [class*="col-"] { padding: 0; } /* Consistent tile height; image is cropped intentionally for a clean grid */ .portfolio-item { height: 18rem; } @media (min-width: 992px) { .portfolio-item { height: 24rem; } } @media (max-width: 576px) { .portfolio-item { height: 15rem; } } /* Section-level ratio control for Front Page → Portfolio / What's Included grid. */ .vh-front-portfolio-grid--ratio-controlled .portfolio-item { height: auto; aspect-ratio: var(--vh-front-portfolio-ratio-mobile, 1 / 1); } @media (min-width: 768px) { .vh-front-portfolio-grid--ratio-controlled .portfolio-item { aspect-ratio: var(--vh-front-portfolio-ratio-tablet, var(--vh-front-portfolio-ratio-desktop, 1 / 1)); } } @media (min-width: 992px) { .vh-front-portfolio-grid--ratio-controlled .portfolio-item { aspect-ratio: var(--vh-front-portfolio-ratio-desktop, 1 / 1); } } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Make the overlay content fit the smaller tile height */ .portfolio-item .caption .caption-content { margin: auto 1.75rem 1.75rem; } @media (min-width: 992px) { .portfolio-item .caption .caption-content { margin-left: 2.5rem; margin-right: 2.5rem; margin-bottom: 2.5rem; } } .vh-portfolio-kicker { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.95; margin-bottom: 0.5rem; } /* ------------------------------------------------------------ Testimonials front-page.php outputs a grid of testimonial cards. ------------------------------------------------------------- */ body.home #front-testimonials .vh-row { max-width: 920px; /* matches your inline intent */ margin-left: auto; margin-right: auto; } body.home #front-testimonials .vh-c-card { border: 0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.10); } body.home #front-testimonials .vh-c-card img { width: 100%; height: auto; display: block; } /* Carousel indicators (mobile) */ body.home #front-testimonials .vh-c-carousel__indicators { position: static; margin-top: 1rem; } body.home #front-testimonials .vh-c-carousel__indicators [data-vh-target] { width: 0.75rem; height: 0.75rem; border-radius: 999px; background-color: rgba(29, 128, 159, 0.45); } body.home #front-testimonials .vh-c-carousel__indicators .active { background-color: #9fa90b; } /* ------------------------------------------------------------ Above-fold social proof strip ------------------------------------------------------------- */ body.home .vh-hero-proof { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 0.75rem; max-width: 40rem; } body.home .vh-avatar-stack { display: flex; align-items: center; } body.home .vh-avatar-stack .vh-avatar { width: 34px; height: 34px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.9); object-fit: cover; margin-left: -10px; } body.home .vh-avatar-stack .vh-avatar:first-child { margin-left: 0; } body.home .vh-proof-text .vh-rating { font-weight: 700; line-height: 1.1; } body.home .vh-proof-text .vh-proof-line { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; } /* ------------------------------------------------------------ Value anchors strip ------------------------------------------------------------- */ body.home .vh-anchors { background: #fff; padding: 1.25rem 0; } body.home .vh-anchor { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid rgba(17, 24, 39, 0.10); border-radius: 0.75rem; background: #fff; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); height: 100%; } body.home .vh-anchor i { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.65rem; background: rgba(29, 128, 159, 0.10); color: #9fa90b; } body.home .vh-anchor span { font-weight: 600; color: #111827; } /* ------------------------------------------------------------ Features + objections ------------------------------------------------------------- */ body.home .vh-feature { gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 0.75rem; background: #fff; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); } body.home .vh-feature + .vh-feature { margin-top: 0.9rem; } body.home .vh-feature-icon { width: 1rem; height: 1rem; border-radius: 0.9rem; background: rgba(29, 128, 159, 0.10); color: #9fa90b; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } body.home .vh-feature-title { font-weight: 700; color: #111827; } body.home .vh-feature-text { color: #4b5563; } body.home .vh-objection { padding: 0.9rem 1rem; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 0.75rem; background: #fff; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); } body.home .vh-objection + .vh-objection { margin-top: 0.9rem; } body.home .vh-objection-q { font-weight: 700; color: #111827; margin-bottom: 0.25rem; } body.home .vh-objection-a { color: #4b5563; } /* ------------------------------------------------------------ Second CTA + Founder note ------------------------------------------------------------- */ body.home .vh-cta2 { padding: 4rem 0; background: #0b1220; color: #fff; } body.home .vh-cta2-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1rem; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.28); padding: 2rem; max-width: 920px; margin: 0 auto; text-align: center; } body.home .vh-cta2-title { font-weight: 800; margin-bottom: 0.75rem; } body.home .vh-cta2-text { color: rgba(255, 255, 255, 0.82); margin-bottom: 1.25rem; } body.home .vh-founder-card { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 1rem; border: 1px solid rgba(17, 24, 39, 0.08); box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.10); padding: 2rem; display: flex; gap: 1.25rem; align-items: flex-start; } @media (max-width: 576px) { body.home .vh-founder-card { flex-direction: column; align-items: center; text-align: left; } } body.home .vh-founder-photo { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(17, 24, 39, 0.12); } body.home .vh-founder-text { color: #374151; } body.home .vh-founder-signature { margin-top: 0.75rem; font-weight: 700; color: #111827; } /* ------------------------------------------------------------ Footer social dots (if you’re using Stylish Portfolio footer markup) ------------------------------------------------------------- */ body.home footer.footer .social-link { border-radius: 999px; } .home #services { } /* ------------------------------------------------------------ Features strip (Dedicated Support) Goals: - Stronger hierarchy (title > subtitle > grid) - Taller tiles with consistent padding - Fixed icon container so icons align - Support line stays short (2-line clamp) ------------------------------------------------------------- */ body.home .vh-features-strip .vh-features-head{ margin-bottom: 2.25rem; } body.home .vh-features-strip .vh-features-title{ font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.75rem, 1.8vw, 2.35rem); } body.home .vh-features-strip .vh-features-subtitle{ max-width: 44rem; margin-left: auto; margin-right: auto; font-size: 0.95rem; line-height: 1.45; opacity: 0.82; } body.home .vh-features-strip .vh-feature-card{ border-radius: 0.9rem; overflow: hidden; } /* Make tiles feel intentional: taller, more padding, aligned icon + copy */ body.home .vh-features-strip .vh-feature-card .vh-c-card__body{ padding: 0.75rem; display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; align-content: start; } @media (min-width: 992px){ body.home .vh-features-strip .vh-feature-card .vh-c-card__body{ display: flex; align-content: center; align-items: center; position: relative; flex-direction: row; flex-wrap: wrap; } } /* The first child is the icon wrapper in your markup (it uses .vh-mb-2). */ body.home .vh-features-strip .vh-feature-card .vh-c-card__body > .vh-mb-2{ width: 36px; height: 36px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; grid-row: 1 / span 2; } body.home .vh-features-strip.vh-features--dark .vh-feature-card .vh-c-card__body > .vh-mb-2{ background: rgba(255,255,255,0.08); } body.home .vh-features-strip.vh-features--light .vh-feature-card .vh-c-card__body > .vh-mb-2{ background: rgba(15,23,42,0.06); } body.home .vh-features-strip .vh-feature-icon{ font-size: 1.6rem; line-height: 1; } body.home .vh-features-strip .vh-feature-card h3{ margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; } body.home .vh-features-strip .vh-feature-card p{ margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.35; max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Small hover feedback (only when the feature tiles are links) */ body.home .vh-features-strip a.vh-feature-card:hover{ transform: translateY(-2px); } /* ------------------------------------------------------------ Sales-flow sections added for reordered homepage ------------------------------------------------------------- */ body.home .vh-sales-section { position: relative; } body.home .vh-sales-card { height: 100%; background: #fff; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06); padding: 1.4rem; } body.home .vh-sales-card h3 { font-weight: 800; letter-spacing: -0.01em; color: #111827; } body.home .vh-sales-card p { color: #4b5563; line-height: 1.55; } body.home .vh-sales-card--problem { color: inherit; } body.home .vh-sales-card__icon { display: inline-flex; align-items: center; justify-content: center; color: #9fa90b; font-size: 1.25rem; } body.home .vh-sales-card--step { padding-top: 1.1rem; } body.home .vh-step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 999px; background: rgba(159, 169, 11, 0.14); color: #8b9408; font-weight: 800; letter-spacing: 0.08em; } body.home .vh-cta-panel { background: linear-gradient(135deg, #0f172a 0%, #111827 100%); color: #fff; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18); } body.home .vh-cta-panel__eyebrow { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.9rem; font-weight: 700; } body.home .vh-checklist { list-style: none; padding: 0; } body.home .vh-checklist li { position: relative; padding-left: 1.5rem; color: rgba(255, 255, 255, 0.9); } body.home .vh-checklist li + li { margin-top: 0.85rem; } body.home .vh-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #9fa90b; font-weight: 800; } body.home .vh-checklist--no-icons li { padding-left: 0; } body.home .vh-checklist--no-icons li::before { content: none; display: none; } body.home .vh-check-card { height: 100%; display: flex; align-items: flex-start; gap: 0.65rem; background: #fff; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 1rem; box-shadow: 0 0.4rem 1.2rem rgba(15, 23, 42, 0.05); padding: 1rem 1.1rem; color: #111827; font-weight: 600; } body.home .vh-check-card i { color: #9fa90b; margin-top: 0.2rem; } body.home #audit-offer .vh-c-button.btn-xl, body.home #lead-magnet .vh-c-button.vh-c-button--lg, body.home #final-cta .vh-c-button.vh-c-button--lg { border-radius: 0.65rem; } body.home #solution .vh-container > .vh-row:first-child { max-width: 920px; margin-left: auto; margin-right: auto; } @media (max-width: 991.98px) { body.home #offer-ladder .vh-container, body.home .vh-services-band .service-body { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ------------------------------------------------------------ 2026-03 homepage refinements: audit CTA, support cards, who-it's-for cards, clickable service cards, process image cards ------------------------------------------------------------- */ body.home .vh-support-strip { background: #d4b53f; } body.home .vh-support-card, body.home .vh-check-card { display: flex; align-items: center; gap: 0.95rem; padding: 1rem 1.15rem; border-radius: 1rem; background: #fff; border: 1px solid rgba(17, 24, 39, 0.08); box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08); } body.home .vh-support-card span, body.home .vh-check-card span { color: #111827; font-weight: 600; line-height: 1.4; } body.home .vh-icon-pill { flex: 0 0 2.9rem; width: 2.9rem; height: 2.9rem; border-radius: 0.85rem; background: #f1f2f4; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #111827; } body.home .vh-icon-pill img { width: 1.5rem; height: 1.5rem; object-fit: contain; } body.home .vh-icon-pill i { font-size: 1rem; line-height: 1; } body.home .vh-check-card { align-items: flex-start; min-height: 100%; } body.home .vh-check-card .vh-icon-pill { margin-top: 0.05rem; } body.home .vh-process-card { position: relative; min-height: 22rem; border: 0; isolation: isolate; } body.home .vh-process-card .vh-tile-bg, body.home .vh-process-card .vh-process-card__bg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.01); } body.home .vh-process-card .vh-process-card__bg { background: linear-gradient(135deg, #102245 0%, #0f172a 50%, #1f2937 100%); } body.home .vh-process-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0.76) 68%, rgba(2, 6, 23, 0.92) 100%); z-index: 0; } body.home .vh-process-card .vh-relative { z-index: 1; } body.home .vh-process-card__num { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #8b9408; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 0.5rem 1rem rgba(2, 6, 23, 0.12); } body.home .vh-process-card p { color: rgba(255, 255, 255, 0.92); line-height: 1.5; } body.home .service-card a { transition: transform 0.16s ease; } body.home .service-card:hover a { transform: translateY(-2px); } body.home .vh-service-card__hint { display: inline-flex; align-items: center; font-size: 0.95rem; font-weight: 700; color: #111827; } @media (max-width: 991.98px) { body.home .vh-process-card { min-height: 19rem; } } /* ------------------------------------------------------------ Homepage media cards / metrics ------------------------------------------------------------- */ body.home .vh-media-card { position: relative; display: flex; min-height: 320px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #0f172a, #172554); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18); } body.home .vh-media-card__bg, body.home .vh-media-card__overlay, body.home .vh-media-card__content { position: absolute; inset: 0; } body.home .vh-media-card__bg { background-position: center; background-size: cover; transform: scale(1.02); } body.home .vh-media-card__overlay { background: linear-gradient( 180deg, rgba(2, 6, 23, 0.28) 0%, rgba(2, 6, 23, var(--vh-card-overlay, 0.62)) 52%, rgba(2, 6, 23, 0.90) 100% ); } body.home .vh-media-card__content { z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: #fff; } body.home .vh-media-card__eyebrow, body.home .vh-media-card__step { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: 0.9rem; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(6px); } body.home .vh-media-card__title { display: block; margin-bottom: 0.6rem; color: #fff; font-size: clamp(1.25rem, 1vw, 1.75rem); font-weight: 800; line-height: 1.15; } body.home .vh-media-card__body { display: block; color: rgba(255, 255, 255, 0.92); font-size: 0.9rem; line-height: 1.6; max-width: 42ch; } body.home .vh-media-card__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } body.home .vh-media-chip { display: inline-flex; align-items: center; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.78rem; line-height: 1.25; } body.home .vh-media-card--compact { min-height: 210px; } body.home .vh-media-card--info, body.home .vh-media-card--included, body.home .vh-media-card--process, body.home .vh-media-card--service { min-height: 360px; } body.home .vh-media-card--service .vh-media-card__content { justify-content: flex-end; } body.home .vh-media-card--service .vh-media-card__title { font-size: clamp(1.35rem, 2.2vw, 1.9rem); } body.home .vh-metric-card { height: 100%; padding: 1.75rem; border-radius: 24px; border: 1px solid rgba(15, 23, 42, 0.08); background: #fff; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08); } body.home .vh-metric-card__value { display: flex; align-items: flex-end; gap: 0.1rem; margin-bottom: 1rem; color: #0f172a; line-height: 1; } body.home .vh-metric-card__prefix, body.home .vh-metric-card__suffix { font-size: 1.5rem; font-weight: 700; } body.home .vh-metric-card__number { font-size: clamp(2.3rem, 4vw, 3.25rem); font-weight: 900; } body.home .vh-metric-card__label { margin-bottom: 0.55rem; color: #0f172a; font-size: 1.15rem; font-weight: 800; } body.home .vh-metric-card__body { color: #475569; line-height: 1.65; } body.home #offer-ladder + .vh-services-band .vh-row.vh-row-cols-md-4 { row-gap: 1rem; } body.home .vh-services-band .vh-col.vh-mb-5.vh-h-full { margin-bottom: 0; } @media (max-width: 991.98px) { body.home .vh-media-card, body.home .vh-media-card--info, body.home .vh-media-card--included, body.home .vh-media-card--process, body.home .vh-media-card--service { min-height: 300px; } } @media (max-width: 767.98px) { body.home .vh-media-card, body.home .vh-media-card--info, body.home .vh-media-card--included, body.home .vh-media-card--process, body.home .vh-media-card--service, body.home .vh-media-card--compact { min-height: 260px; } body.home .vh-media-card__content { padding: 1.15rem; } body.home .vh-metric-card { padding: 1.35rem; } } /* ------------------------------------------------------------ 2026-03 patch: cleaner metric counters + service screenshot cards Keeps the user's front-page.php service markup while improving polish. ------------------------------------------------------------- */ body.home .vh-metric-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.35rem; } body.home .vh-metric-card__value { display: inline-flex; align-items: flex-end; flex-wrap: nowrap; gap: 0.14em; margin-bottom: 0.45rem; color: #0f172a; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.04em; } body.home .vh-metric-card__prefix, body.home .vh-metric-card__suffix { display: inline-flex; line-height: 1; font-weight: 800; color: #334155; } body.home .vh-metric-card__prefix { align-self: flex-start; margin-top: 0.48rem; font-size: clamp(1rem, 3vw, 3.28rem); } body.home .vh-metric-card__number { line-height: 0.9; font-size: clamp(3rem, 4.9vw, 4.2rem); font-weight: 900; color: #0f172a; } body.home .vh-metric-card__suffix { align-self: flex-end; margin-bottom: 0.38rem; font-size: clamp(0.98rem, 1.3vw, 1.18rem); letter-spacing: -0.01em; } body.home .vh-metric-card__label { margin-bottom: 0.35rem; color: #0f172a; font-size: 1.12rem; font-weight: 800; line-height: 1.32; } body.home .vh-metric-card__body { margin-bottom: 0; color: #475569; line-height: 1.68; } body.home .vh-services-band .service-card { height: 100%; border: 0; border-radius: 1.5rem; overflow: hidden; background: #ffffff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease; } body.home .vh-services-band .service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16); } body.home .vh-services-band .service-card a { display: flex; flex-direction: column; height: 100%; } body.home .vh-services-band .service-card .image-frame { position: relative; width: 100%; max-width: none; max-height: none; min-height: 0; aspect-ratio: 16 / 10; padding: 0; display: block; background: #d7d1c5; box-shadow: none; overflow: hidden; } body.home .vh-services-band .service-card .image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; } body.home .vh-services-band .service-card .vh-c-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.25rem; } body.home .vh-services-band .service-card .service-card-subtitle { margin-bottom: 0.55rem; color: #64748b; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; } body.home .vh-services-band .service-card .vh-c-card__title { color: #0f172a; font-size: 1.55rem; font-weight: 800; line-height: 1.2; } body.home .vh-services-band .service-card .vh-c-card__text { margin-bottom: 0.95rem; color: #334155; font-size: 0.98rem; line-height: 1.65; } body.home .vh-services-band .service-card .highlights { gap: 0.45rem 0.75rem; margin-top: auto; border-top-color: rgba(15, 23, 42, 0.08); } body.home .vh-services-band .service-card .highlights span { display: inline-flex; align-items: flex-start; color: #0f172a; font-size: 0.86rem; font-weight: 600; line-height: 1.45; } /* Service cards sit on white backgrounds even when the service row is dark. Keep card checklist text dark so Bootstrap text-light/text-white utilities from the surrounding dark section cannot make it white-on-white. */ body.home .vh-services-band .service-card .highlights span.text-light, body.home .vh-services-band .service-card .highlights span.vh-text-white, body.home .vh-services-band .service-card .highlights span.vh-service-card__highlight { color: #0f172a; } body.home .vh-services-band .service-card .highlights i { margin-top: 0.18rem; } body.home .vh-services-band .vh-service-card__hint { display: inline-flex; align-items: center; gap: 0.35rem; padding-top: 0.2rem; color: #0f172a; font-size: 0.95rem; font-weight: 800; } body.home .vh-services-band .vh-service-card__hint i { transition: transform 0.18s ease; } body.home .vh-services-band .service-card:hover .vh-service-card__hint i { transform: translateX(3px); } @media (max-width: 767.98px) { body.home .vh-metric-card__value { gap: 0.12em; } body.home .vh-metric-card__prefix { margin-top: 0.35rem; } body.home .vh-metric-card__suffix { margin-bottom: 0.22rem; } body.home .vh-services-band .service-card .image-frame { padding: 1rem; aspect-ratio: 16 / 11; } } /* Weekly support cards: split image/content layout */ body.home .vh-features-strip .vh-features-head--sidebar { text-align: left; margin-bottom: 0; max-width: 320px; } body.home .vh-features-strip .vh-media-card--feature { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: stretch; min-height: 110px; border-radius: 20px; overflow: hidden; background: var(--vh-features-card-bg, #ffffff); color: var(--vh-features-card-text, #111827); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10); } body.home .vh-features-strip .vh-media-card--feature:hover { color: var(--vh-features-card-text, #111827); } body.home .vh-features-strip.vh-features--dark .vh-media-card--feature { // border: 1px solid rgba(255,255,255,.10); } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__thumb { display: block; max-height: 120px; aspect-ratio: 1 / 1; background-position: center; background-size: cover; background-repeat: no-repeat; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__content { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.1rem; color: inherit; gap: 0.35rem; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__title { margin-bottom: 0; color: inherit; font-size: clamp(1rem, 1vw, 1.2rem); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__body { max-width: none; color: inherit; line-height: 1.45; font-size: 0.98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.home .vh-features-strip.vh-features-text--custom .vh-media-card--feature, body.home .vh-features-strip.vh-features-text--custom .vh-media-card--feature .vh-media-card__content, body.home .vh-features-strip.vh-features-text--custom .vh-media-card--feature .vh-media-card__title, body.home .vh-features-strip.vh-features-text--custom .vh-media-card--feature .vh-media-card__body { color: var(--vh-features-card-text, #111827); } body.home .vh-features-strip .vh-media-card--feature.vh-media-card--feature-noimage { grid-template-columns: 1fr; } body.home .vh-features-strip .vh-media-card--feature.vh-media-card--feature-noimage .vh-media-card__content { padding-left: 1.1rem; } @media (max-width: 991.98px) { body.home .vh-features-strip .vh-features-head--sidebar { text-align: center; margin-bottom: 2rem; max-width: none; margin-left: 0; } body.home .vh-features-strip .vh-media-card--feature { grid-template-columns: 124px minmax(0, 1fr); min-height: 144px; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__thumb { min-height: 144px; } } @media (max-width: 767.98px) { body.home .vh-features-strip .vh-media-card--feature { grid-template-columns: 116px minmax(0, 1fr); min-height: 140px; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__thumb { min-height: 140px; } body.home .vh-features-strip .vh-media-card--feature .vh-media-card__content { padding: 0.9rem 1rem; } } /* Globalized front-page button tokens from Customizer */ body.home .vh-btn-primary, body.home .vh-c-button.vh-btn-primary, body.home .vh-c-button.vh-c-button--primary, body.home .vh-c-button.bg-brandgreen { background-color: var(--vh-btn-primary-bg, #9fa90b); border-color: var(--vh-btn-primary-border, #9fa90b); color: var(--vh-btn-primary-text, #ffffff); } body.home .vh-btn-primary:hover, body.home .vh-btn-primary:focus, body.home .vh-c-button.vh-btn-primary:hover, body.home .vh-c-button.vh-btn-primary:focus, body.home .vh-c-button.vh-c-button--primary:hover, body.home .vh-c-button.vh-c-button--primary:focus, body.home .vh-c-button.bg-brandgreen:hover, body.home .vh-c-button.bg-brandgreen:focus { background-color: var(--vh-btn-primary-hover-bg, #155d74); border-color: var(--vh-btn-primary-hover-border, #155d74); color: var(--vh-btn-primary-hover-text, #ffffff); } body.home .vh-btn-dark, body.home .vh-c-button.vh-btn-dark, body.home .vh-c-button.vh-c-button--dark { background-color: var(--vh-btn-dark-bg, #212529); border-color: var(--vh-btn-dark-border, #212529); color: var(--vh-btn-dark-text, #ffffff); } body.home .vh-btn-dark:hover, body.home .vh-btn-dark:focus, body.home .vh-c-button.vh-btn-dark:hover, body.home .vh-c-button.vh-btn-dark:focus, body.home .vh-c-button.vh-c-button--dark:hover, body.home .vh-c-button.vh-c-button--dark:focus { background-color: var(--vh-btn-dark-hover-bg, #111827); border-color: var(--vh-btn-dark-hover-border, #111827); color: var(--vh-btn-dark-hover-text, #ffffff); } body.home .vh-btn-outline, body.home .vh-c-button.vh-btn-outline, body.home .vh-c-button.vh-c-button--outline-dark, body.home .vh-c-button.vh-c-button--outline-secondary, body.home .vh-c-button.vh-c-button--outline-primary { background-color: var(--vh-btn-outline-bg, transparent); border-color: var(--vh-btn-outline-border, #212529); color: var(--vh-btn-outline-text, #212529); } body.home .vh-btn-outline:hover, body.home .vh-btn-outline:focus, body.home .vh-c-button.vh-btn-outline:hover, body.home .vh-c-button.vh-btn-outline:focus, body.home .vh-c-button.vh-c-button--outline-dark:hover, body.home .vh-c-button.vh-c-button--outline-dark:focus, body.home .vh-c-button.vh-c-button--outline-secondary:hover, body.home .vh-c-button.vh-c-button--outline-secondary:focus, body.home .vh-c-button.vh-c-button--outline-primary:hover, body.home .vh-c-button.vh-c-button--outline-primary:focus { background-color: var(--vh-btn-outline-hover-bg, #212529); border-color: var(--vh-btn-outline-hover-border, #212529); color: var(--vh-btn-outline-hover-text, #ffffff); } /* Universal hero layout homepage overrides/fixes */ body.home .vh-layout-hero .vh-hero-title{ font-size: clamp(2.35rem, 4.4vw, 4.85rem); line-height: 1.06; max-width: min(100%, 34ch); overflow-wrap: normal; word-break: normal; text-wrap: balance; } body.home .vh-layout-hero .vh-hero-copy--center .vh-hero-title, body.home .vh-layout-hero .vh-hero-copy--minimal .vh-hero-title{ max-width: min(100%, 34ch); } body.home .vh-layout-hero .vh-hero-lead{ color: var(--vh-hero-muted, #d1d5db); max-width: 48rem; } body.home .vh-layout-hero.masthead{ background-color: var(--vh-hero-bg, #070b15); color: var(--vh-hero-text, #ffffff); } body.home .vh-hero-collage-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; } body.home .vh-hero-floating-card{ position:static; max-width:none; width:100%; min-height:6.5rem; margin:0; } @media (max-width: 575.98px){ body.home .vh-layout-hero .vh-hero-title{ font-size: clamp(2.05rem, 11vw, 3.3rem); max-width: min(100%, 20ch); } body.home .vh-hero-collage-cards{grid-template-columns:1fr;} } /* Universal hero layout homepage polish v5 */ body.home .vh-hero-before-after-card{ padding: 0; overflow: hidden; justify-content: flex-start; border-radius: 1.2rem; } body.home .vh-hero-before-after-image{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: 1.2rem 1.2rem 0 0; margin: 0; } body.home .vh-hero-before-after-body{ padding: 1.35rem; text-align: left; } body.home .vh-hero-layout-search_finder .vh-hero-finder-form{ display: flex; flex-direction: row; gap: 0; width: min(100%, 900px); max-width: 900px; } body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"]{ flex: 1 1 auto; min-width: 0; min-height: 3.75rem; border-radius: .95rem 0 0 .95rem; border-right: 0; } body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{ flex: 0 0 auto; width: auto; min-width: 9.5rem; min-height: 3.75rem; border-radius: 0 .95rem .95rem 0; justify-self: auto; } @media (max-width: 575.98px){ body.home .vh-hero-layout-search_finder .vh-hero-finder-form{ flex-direction: column; gap: .75rem; } body.home .vh-hero-layout-search_finder .vh-hero-finder-form input[type="search"], body.home .vh-hero-layout-search_finder .vh-hero-finder-form button{ width: 100%; border-radius: .95rem; border-right: 1px solid rgba(255,255,255,.22); } } /* Service front-page cards: images should fill the media well edge-to-edge. */ body.home .vh-services-band .service-card .image-frame, body.home .vh-services-band .service-card .image-frame.vh-hover-tile { padding: 0; border-radius: 0; } body.home .vh-services-band .service-card .image-frame img, body.home .vh-services-band .service-card .image-frame.vh-hover-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Audit Offer: optional three-column media layout */ body.home #audit-offer .vh-audit-offer-grid--has-image { align-items: stretch; } body.home #audit-offer .vh-audit-offer-image-card { height: 100%; min-height: 320px; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18); background: rgba(15, 23, 42, 0.08); } body.home #audit-offer .vh-audit-offer-image-card img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; } @media (max-width: 991.98px) { body.home #audit-offer .vh-audit-offer-image-card, body.home #audit-offer .vh-audit-offer-image-card img { min-height: 260px; } } /* Audit offer localized button color controls */ body.home #audit-offer .vh-audit-button--primary { background-color: var(--vh-audit-primary-bg, var(--vh-btn-dark-bg, #212529)); border-color: var(--vh-audit-primary-border, var(--vh-btn-dark-border, #212529)); color: var(--vh-audit-primary-text, var(--vh-btn-dark-text, #ffffff)); } body.home #audit-offer .vh-audit-button--primary:hover, body.home #audit-offer .vh-audit-button--primary:focus { background-color: var(--vh-audit-primary-hover-bg, var(--vh-btn-dark-hover-bg, #111827)); border-color: var(--vh-audit-primary-hover-border, var(--vh-btn-dark-hover-border, #111827)); color: var(--vh-audit-primary-hover-text, var(--vh-btn-dark-hover-text, #ffffff)); } body.home #audit-offer .vh-audit-button--secondary { background-color: var(--vh-audit-secondary-bg, var(--vh-btn-outline-bg, transparent)); border-color: var(--vh-audit-secondary-border, var(--vh-btn-outline-border, #212529)); color: var(--vh-audit-secondary-text, var(--vh-btn-outline-text, #212529)); } body.home #audit-offer .vh-audit-button--secondary:hover, body.home #audit-offer .vh-audit-button--secondary:focus { background-color: var(--vh-audit-secondary-hover-bg, var(--vh-btn-outline-hover-bg, #212529)); border-color: var(--vh-audit-secondary-hover-border, var(--vh-btn-outline-hover-border, #212529)); color: var(--vh-audit-secondary-hover-text, var(--vh-btn-outline-hover-text, #ffffff)); } /* Velocity Hub 1.4.40: Front Page → Portfolio / What's Included grid layout wiring. */ .vh-front-portfolio-grid--layout-controlled { display: grid; grid-template-columns: repeat(var(--vh-front-portfolio-cols-mobile, 1), minmax(0, 1fr)); width: min(100%, var(--vh-front-portfolio-max-mobile, 100%)); max-width: var(--vh-front-portfolio-max-mobile, 100%); margin-left: auto; margin-right: auto; } .vh-front-portfolio-grid--layout-controlled > [class*="col-"] { width: auto; max-width: none; flex: initial; padding: 0; } @media (min-width: 768px) { .vh-front-portfolio-grid--layout-controlled { grid-template-columns: repeat(var(--vh-front-portfolio-cols-tablet, var(--vh-front-portfolio-cols-desktop, 2)), minmax(0, 1fr)); width: min(100%, var(--vh-front-portfolio-max-tablet, var(--vh-front-portfolio-max-desktop, 72rem))); max-width: var(--vh-front-portfolio-max-tablet, var(--vh-front-portfolio-max-desktop, 72rem)); } } @media (min-width: 992px) { .vh-front-portfolio-grid--layout-controlled { grid-template-columns: repeat(var(--vh-front-portfolio-cols-desktop, 2), minmax(0, 1fr)); width: min(100%, var(--vh-front-portfolio-max-desktop, 72rem)); max-width: var(--vh-front-portfolio-max-desktop, 72rem); } } /* 1.4.76: Services / Offer Ladder row-1 shell The intro band and first service row share one background/transition target. Child sections stay transparent so the wrapper color/image is visible as one unit. */ body.home #services-offer-row-1 { position: relative; } body.home #services-offer-row-1 > #offer-ladder, body.home #services-offer-row-1 > #services { background: transparent; } /* WO20: portfolio gap wiring only. Do not override ratio/image height here. */ body.home .vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-mobile, clamp(1rem, 2vw, 1.5rem)); } @media (min-width: 768px) { body.home .vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-tablet, var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem))); } } @media (min-width: 992px) { body.home .vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem)); } } /* ------------------------------------------------------------ Velocity Hub 1.5.8 WO23: homepage testimonial + portfolio contract - homepage testimonials now reuse shared testimonial-slide structure - homepage portfolio uses CSS grid, responsive image sources, and top/bottom radius vars ------------------------------------------------------------- */ body.home #front-testimonials.vh-front-testimonials-slider { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; } body.home #front-testimonials .vh-c-carousel { position: relative; padding: 0 3.25rem 2.4rem; } body.home #front-testimonials .vh-c-carousel__inner { overflow: hidden; } body.home #front-testimonials .vh-front-testimonial-slide-link { display: block; color: inherit; text-decoration: none; padding: clamp(.75rem, 2vw, 1.25rem) 0; border-radius: 1rem; } body.home #front-testimonials .vh-front-testimonial-slide-link:hover, body.home #front-testimonials .vh-front-testimonial-slide-link:focus-visible { color: inherit; text-decoration: none; outline: none; } body.home #front-testimonials .vh-testimonial-slide__quote { font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.55; } body.home #front-testimonials .vh-testimonial-slide__avatar img { width: 44px; height: 44px; object-fit: cover; } body.home #front-testimonials .vh-front-testimonials-arrow { width: 3rem; opacity: 1; color: var(--vh-testimonial-arrow-color, var(--vh-accent, var(--vh-primary, #1d809f))); font-size: 3.5rem; font-weight: 300; line-height: 1; text-shadow: none; } body.home #front-testimonials .vh-front-testimonials-arrow:hover, body.home #front-testimonials .vh-front-testimonials-arrow:focus { color: var(--vh-accent-hover, var(--vh-testimonial-arrow-color, var(--vh-accent, var(--vh-primary, #1d809f)))); opacity: 1; } body.home #front-testimonials .vh-front-testimonials-arrow span[aria-hidden="true"] { display: block; transform: translateY(-.1rem); } body.home #front-testimonials .vh-c-carousel__indicators { position: static; margin-top: 1.2rem; margin-bottom: 0; } body.home #front-testimonials .vh-c-carousel__indicators [data-vh-target] { width: .72rem; height: .72rem; border: 0; border-radius: 999px; background-color: rgba(29, 128, 159, .28); } body.home #front-testimonials .vh-c-carousel__indicators .active { background-color: var(--vh-accent, var(--vh-primary, #1d809f)); } @media (max-width: 767.98px) { body.home #front-testimonials .vh-c-carousel { padding-left: 0; padding-right: 0; } body.home #front-testimonials .vh-front-testimonials-arrow { display: none; } } body.home .vh-front-portfolio-grid--layout-controlled { display: grid; grid-template-columns: repeat(var(--vh-front-portfolio-cols-mobile, 1), minmax(0, 1fr)); width: 100%; max-width: var(--vh-front-portfolio-max-mobile, 64rem); margin-left: auto; margin-right: auto; border-radius: 0; overflow: visible; box-shadow: none; gap: var(--vh-front-portfolio-gap-mobile, clamp(1rem, 2vw, 1.5rem)); } body.home .vh-front-portfolio-grid--layout-controlled > [class*="col-"], body.home .vh-front-portfolio-grid--layout-controlled > .vh-front-portfolio-cell { width: auto; max-width: none; padding: 0; min-width: 0; } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item { display: block; position: relative; width: 100%; max-width: none; height: auto; margin: 0; aspect-ratio: var(--vh-front-portfolio-ratio-mobile, 1 / 1); border-top-left-radius: var(--vh-front-portfolio-card-radius-top, var(--vh-front-portfolio-card-radius, 1.25rem)); border-top-right-radius: var(--vh-front-portfolio-card-radius-top, var(--vh-front-portfolio-card-radius, 1.25rem)); border-bottom-left-radius: var(--vh-front-portfolio-card-radius-bottom, var(--vh-front-portfolio-card-radius, 1.25rem)); border-bottom-right-radius: var(--vh-front-portfolio-card-radius-bottom, var(--vh-front-portfolio-card-radius, 1.25rem)); overflow: hidden; background: #0f172a; box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.14); } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item picture, body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item img { width: 100%; height: 100%; min-height: 0; display: block; } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item img { object-fit: cover; border-radius: inherit; clip-path: none; -webkit-clip-path: none; } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item .caption { inset: 0; border-radius: inherit; overflow: hidden; clip-path: none; -webkit-clip-path: none; } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item:hover img, body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item:focus img, body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item:hover .caption, body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item:focus .caption { clip-path: none; -webkit-clip-path: none; } @media (min-width: 768px) { body.home .vh-front-portfolio-grid--layout-controlled { grid-template-columns: repeat(var(--vh-front-portfolio-cols-tablet, var(--vh-front-portfolio-cols-desktop, 2)), minmax(0, 1fr)); max-width: var(--vh-front-portfolio-max-tablet, var(--vh-front-portfolio-max-desktop, 64rem)); gap: var(--vh-front-portfolio-gap-tablet, var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem))); } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item { aspect-ratio: var(--vh-front-portfolio-ratio-tablet, var(--vh-front-portfolio-ratio-desktop, 1 / 1)); } } @media (min-width: 992px) { body.home .vh-front-portfolio-grid--layout-controlled { grid-template-columns: repeat(var(--vh-front-portfolio-cols-desktop, 2), minmax(0, 1fr)); max-width: var(--vh-front-portfolio-max-desktop, 64rem); gap: var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem)); } body.home .vh-front-portfolio-grid--layout-controlled .portfolio-item { aspect-ratio: var(--vh-front-portfolio-ratio-desktop, 1 / 1); } } /* 1.5.9: homepage portfolio Customizer contract hardening. Section-level gap/radius controls must beat global card defaults, including 0 values. */ body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-mobile, clamp(1rem, 2vw, 1.5rem)); row-gap: var(--vh-front-portfolio-gap-mobile, clamp(1rem, 2vw, 1.5rem)); column-gap: var(--vh-front-portfolio-gap-mobile, clamp(1rem, 2vw, 1.5rem)); } body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled .portfolio-item { border-top-left-radius: var(--vh-front-portfolio-card-radius-top, var(--vh-front-portfolio-card-radius, 1.25rem)); border-top-right-radius: var(--vh-front-portfolio-card-radius-top, var(--vh-front-portfolio-card-radius, 1.25rem)); border-bottom-left-radius: var(--vh-front-portfolio-card-radius-bottom, var(--vh-front-portfolio-card-radius, 1.25rem)); border-bottom-right-radius: var(--vh-front-portfolio-card-radius-bottom, var(--vh-front-portfolio-card-radius, 1.25rem)); overflow: hidden; } body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled .portfolio-item picture, body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled .portfolio-item img, body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled .portfolio-item .caption { border-radius: inherit; overflow: hidden; } @media (min-width: 768px) { body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-tablet, var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem))); row-gap: var(--vh-front-portfolio-gap-tablet, var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem))); column-gap: var(--vh-front-portfolio-gap-tablet, var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem))); } } @media (min-width: 992px) { body.home #whats-included .vh-front-portfolio-grid.vh-front-portfolio-grid--layout-controlled { gap: var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem)); row-gap: var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem)); column-gap: var(--vh-front-portfolio-gap-desktop, clamp(1rem, 2vw, 1.5rem)); } } /* V2 R2: section contrast is resolved dynamically from saved/effective section backgrounds; no unconditional light-text override lives here. */ /* R4.2: Final CTA and Lead Magnet media geometry moved to front-page-presentation-owner.css. */ /* Source 2: assets/src/v2/front-page-section-contract.css | media: all */ /* WO211 canonical Front Page Section Shell contracts. */ .vh-fp-section{position:relative;isolation:isolate} .vh-fp-container{width:min(100% - 2rem,var(--wp--custom--velocity-hub--layout--wide,1200px));margin-inline:auto;position:relative;z-index:2} .vh-fp-container--wide{width:min(100% - 2rem,1440px)}.vh-fp-container--padded-y{padding-block:3rem} .vh-fp-section-head{max-width:860px;margin-inline:auto;margin-bottom:3rem;text-align:center}.vh-fp-section-head--compact{margin-bottom:1.5rem} .vh-fp-section-head__eyebrow{margin:0 0 .5rem;text-transform:uppercase;font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--vh-muted-text,#6c757d)} .vh-fp-section-head__title{margin:0 0 1rem;font-weight:800}.vh-fp-section-head__body{margin:0;font-size:1.25rem;line-height:1.6;color:var(--vh-muted-text,#6c757d)} .vh-fp-grid{display:grid;gap:1.5rem}.vh-fp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.vh-fp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .vh-fp-strip{padding-block:1.5rem}.vh-fp-strip-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;align-items:center;text-align:center} .vh-fp-strip-grid__item{min-width:0}.vh-strip-item{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none}.vh-strip-item__text{font-weight:600} .vh-fp-section-empty{max-width:900px;margin:1rem auto;padding:1rem 1.25rem;border:1px dashed currentColor;border-radius:.75rem;background:rgba(255,255,255,.75);color:#5f6368;font-size:.9rem;text-align:center} @media (max-width:991.98px){.vh-fp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.vh-fp-strip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:599.98px){.vh-fp-grid--4,.vh-fp-grid--2{grid-template-columns:1fr}.vh-fp-strip-grid{grid-template-columns:1fr}.vh-fp-container{width:min(100% - 1.5rem,var(--wp--custom--velocity-hub--layout--wide,1200px))}} /* Source 3: assets/src/v2/front-page-presentation-owner.css | media: all */ /* Batch E R4.2 — canonical Front Page presentation owner. * Reference behavior: clear value-led section hierarchy, consistent centered * heading rhythm, readable FAQ cards, and paired CTA cards that preserve their * hierarchy at every breakpoint. Ordinary presentation uses no forced-priority declarations. */ body.home [data-vh-fp-section] { --vh-fp-eyebrow-color: var(--vh-muted-text, #64748b); --vh-fp-heading-color: var(--vh-body-text, #0f172a); --vh-fp-body-color: var(--vh-muted-text, #475569); } /* Main section hierarchy: one centered visual rhythm rather than Bootstrap-era * column widths inside an already bounded heading wrapper. */ body.home .vh-fp-section-head > [class*="vh-col"], body.home .content-section-heading.vh-fp-section-head > [class*="vh-col"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin-inline: auto; } body.home [data-vh-fp-section] .vh-fp-section-head__eyebrow, body.home [data-vh-fp-section] .vh-fp-section-head .vh-section-eyebrow, body.home [data-vh-fp-section] .vh-final-cta__eyebrow, body.home [data-vh-fp-section] .vh-features-head > .vh-section-eyebrow { color: var(--vh-fp-eyebrow-color); } body.home [data-vh-fp-section] .vh-fp-section-head__title, body.home [data-vh-fp-section] .vh-fp-section-head > :where(h1,h2,h3), body.home [data-vh-fp-section] .vh-fp-section-head > [class*="vh-col"] > :where(h1,h2,h3), body.home [data-vh-fp-section] .content-section-heading.vh-fp-section-head > :where(h1,h2,h3), body.home [data-vh-fp-section] .vh-features-title, body.home [data-vh-fp-section] .vh-services-intro__title, body.home [data-vh-fp-section] .vh-final-cta__title, body.home [data-vh-fp-section] .vh-front-blog-heading__title { color: var(--vh-fp-heading-color); text-wrap: balance; overflow-wrap: anywhere; } body.home [data-vh-fp-section] .vh-fp-section-head__body, body.home [data-vh-fp-section] .vh-fp-section-head > p:not(.vh-section-eyebrow), body.home [data-vh-fp-section] .vh-fp-section-head > [class*="vh-col"] > p:not(.vh-section-eyebrow), body.home [data-vh-fp-section] .content-section-heading.vh-fp-section-head > p:not(.vh-section-eyebrow), body.home [data-vh-fp-section] .vh-features-subtitle, body.home [data-vh-fp-section] .vh-final-cta__body, body.home [data-vh-fp-section] .vh-front-blog-heading__body { color: var(--vh-fp-body-color); overflow-wrap: anywhere; } body.home .vh-fp-section-head__body, body.home .vh-fp-section-head > [class*="vh-col"] > .vh-fp-section-head__body { max-width: 64ch; margin-inline: auto; } /* Services rows 2–4 use historical row ids instead of data-vh-fp-section. * Their saved presentation values still flow through the R4.2 variable owner. */ body.home :is(#services-offer-row-1, #services-2, #services-3, #services-4) .vh-section-eyebrow { color: var(--vh-fp-eyebrow-color); } body.home :is(#services-offer-row-1, #services-2, #services-3, #services-4) .vh-services-intro__title { color: var(--vh-fp-heading-color); text-wrap: balance; overflow-wrap: anywhere; } body.home :is(#services-offer-row-1, #services-2, #services-3, #services-4) .vh-services-intro p:not(.vh-section-eyebrow) { color: var(--vh-fp-body-color); } /* FAQ — intro is first in document order, visually right on desktop, while the * accordion owns the larger content column. Questions remain readable at long * real-world lengths and category badges may never compress the question. */ body.home #front-faq .vh-fp-faq-intro { min-width: 0; } body.home #front-faq .vh-fp-faq-intro__eyebrow { color: var(--vh-fp-eyebrow-color); } body.home #front-faq .vh-fp-faq-intro__title { color: var(--vh-fp-heading-color); text-wrap: balance; overflow-wrap: anywhere; } body.home #front-faq .vh-fp-faq-intro__body { color: var(--vh-fp-body-color); max-width: 34ch; margin-left: auto; overflow-wrap: anywhere; } body.home #front-faq .vh-fp-faq-list { min-width: 0; } body.home #front-faq .vh-c-accordion { width: 100%; max-width: 920px; margin-inline: auto; } body.home #front-faq .vh-c-accordion__item { background: var(--vh-fp-faq-card-bg); border: 1px solid var(--vh-fp-faq-border); color: var(--vh-fp-faq-card-text); border-radius: .75rem; overflow: hidden; box-shadow: 0 .35rem 1rem rgba(15,23,42,.06); } body.home #front-faq .vh-c-accordion__item + .vh-c-accordion__item { margin-top: .75rem; } body.home #front-faq .vh-c-accordion__heading { margin: 0; max-width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: normal; } body.home #front-faq .vh-c-accordion__button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-width: 0; padding: 1rem 1.25rem; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--vh-fp-faq-card-text); background: var(--vh-fp-faq-card-bg); font-weight: 650; } body.home #front-faq .vh-c-accordion__button:not(.is-collapsed) { color: var(--vh-fp-faq-active-text); background: var(--vh-fp-faq-active-bg); } body.home #front-faq .vh-c-accordion__button:not(.is-collapsed) > :not(.vh-c-badge) { color: inherit; } body.home #front-faq .vh-c-accordion__button .vh-c-badge { min-width: 0; max-width: min(15rem, 38vw); margin: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; color: var(--vh-fp-faq-badge-text); background: var(--vh-fp-faq-badge-bg); border-color: var(--vh-fp-faq-badge-bg); } body.home #front-faq .vh-c-accordion__body { color: var(--vh-fp-faq-card-text); background: var(--vh-fp-faq-card-bg); overflow-wrap: anywhere; } body.home #front-faq .vh-c-accordion__body a { color: var(--vh-fp-faq-link); } body.home #front-faq .vh-c-accordion__body a:hover, body.home #front-faq .vh-c-accordion__body a:focus-visible { text-decoration: underline; } /* Lead Magnet + Final CTA — one card component, one media contract, canonical * Button variables. The outer section may be dark; the card remains readable. */ body.home .vh-final-cta__card { --vh-c-button-bg: var(--vh-fp-cta-button-bg, var(--vh-primary, #0f172a)); --vh-c-button-text: var(--vh-fp-cta-button-text, #fff); --vh-c-button-border: var(--vh-fp-cta-button-border, var(--vh-c-button-bg)); --vh-c-button-hover-bg: var(--vh-fp-cta-button-hover-bg, var(--vh-c-button-bg)); --vh-c-button-hover-text: var(--vh-fp-cta-button-hover-text, var(--vh-c-button-text)); --vh-c-button-hover-border: var(--vh-fp-cta-button-hover-border, var(--vh-c-button-border)); margin-inline: 0; --vh-gutter-x: 0; align-items: stretch; background: var(--vh-fp-cta-card-bg, var(--vh-card-surface, #fff)); border-radius: var(--vh-fp-cta-card-radius, 1.25rem); box-shadow: var(--vh-fp-cta-card-shadow, 0 1.25rem 3rem rgba(15,23,42,.16)); } body.home .vh-final-cta__content { min-width: 0; } body.home .vh-final-cta__title { color: var(--vh-fp-heading-color); line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; } body.home .vh-final-cta__body { max-width: 54ch; color: var(--vh-fp-body-color); overflow-wrap: anywhere; } /* The historical global button bridge still owns direct properties elsewhere. * Inside the two migrated CTA cards, canonical Button variables are the value * source so saved per-section colors can win without priority escalation. */ body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--primary, body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--outline-secondary { background: var(--vh-c-button-bg, transparent); border-color: var(--vh-c-button-border, currentColor); color: var(--vh-c-button-text, currentColor); } body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--primary:hover, body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--primary:focus-visible, body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--outline-secondary:hover, body.home :is(#lead-magnet, #final-cta) .vh-c-button.vh-c-button--outline-secondary:focus-visible { background: var(--vh-c-button-hover-bg, var(--vh-c-button-bg, transparent)); border-color: var(--vh-c-button-hover-border, var(--vh-c-button-border, currentColor)); color: var(--vh-c-button-hover-text, var(--vh-c-button-text, currentColor)); } body.home .vh-final-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } body.home .vh-final-cta__media { min-width: 0; overflow: hidden; } body.home .vh-final-cta__media > picture, body.home .vh-final-cta__media > a { display: flex; width: 100%; height: 100%; min-height: 100%; } body.home .vh-final-cta__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } body.home .vh-final-cta__image--placeholder { min-height: 320px; background: linear-gradient(135deg, rgba(159,169,11,.16), rgba(15,23,42,.10)); } /* Blog heading uses the same visual hierarchy as the reference page but keeps * its action visible without crowding the heading on narrow screens. */ body.home .vh-front-blog-heading { min-width: 0; } body.home .vh-front-blog-heading__body { max-width: 64ch; } @media (min-width: 992px) { body.home #front-faq .vh-fp-faq-intro { text-align: right; } body.home .vh-final-cta__media { display: flex; align-self: stretch; min-height: 100%; aspect-ratio: auto; } body.home .vh-final-cta__image { min-height: clamp(320px, 32vw, 520px); aspect-ratio: auto; } } @media (max-width: 991.98px) { body.home #front-faq .vh-fp-faq-intro { text-align: center; } body.home #front-faq .vh-fp-faq-intro__body { margin-inline: auto; } body.home #front-faq .vh-c-accordion__button { grid-template-columns: minmax(0, 1fr); align-items: start; } body.home #front-faq .vh-c-accordion__button .vh-c-badge { justify-self: start; max-width: 100%; } body.home .vh-final-cta__media { display: block; aspect-ratio: var(--vh-final-cta-image-ratio, 4 / 3); } body.home .vh-final-cta__media > picture, body.home .vh-final-cta__media > a { display: block; height: 100%; } body.home .vh-final-cta__image { min-height: 0; aspect-ratio: inherit; } body.home .vh-front-blog-heading { align-items: flex-start; flex-direction: column; } }