/** * Shared layout for service landing pages (YouTube Ads, etc.) * Link in : css/service-pages.css * Add class "service-page" to and semantic classes below. */ :root { --sp-hero-offset: calc(var(--site-header-height, 76px) + var(--hero-top-gap, 48px)); --sp-hero-gutter-mobile: 24px; --sp-hero-bottom-mobile: 50px; --sp-hero-content-gap: 20px; --sp-hero-title-mobile: clamp(1.625rem, 1.45rem + 1vw, 2rem); --sp-hero-body-mobile: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --sp-hero-badge-icon-height: 17px; --sp-service-icon-size: 140px; --sp-service-icon-size-tablet: 128px; --sp-service-icon-size-mobile: 112px; --sp-icon-text-gap: 28px; --sp-section-header-gap: 40px; --sp-grid-gap: 48px 36px; --sp-section-padding-y: 0px; --sp-section-inner-gap: 36px; } /* Hero — clear sticky nav (offset on container, not section) */ .breakdance.service-page .service-page-hero { padding-top: 0; box-sizing: border-box; } .breakdance.service-page .service-page-hero .section-container { padding-top: var(--sp-hero-offset) !important; padding-bottom: var(--hss-s) !important; min-height: min(78svh, 800px) !important; height: auto !important; box-sizing: border-box; justify-content: flex-start !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] { width: 100% !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; align-items: stretch !important; padding-top: 0 !important; box-sizing: border-box !important; } .breakdance.service-page .service-page-hero .service-page-hero__badge { cursor: default; } .breakdance.service-page .service-page-hero__badge-icon { width: auto !important; height: var(--sp-hero-badge-icon-height) !important; max-width: none !important; flex-shrink: 0; } /* Section vertical rhythm */ .breakdance.service-page .service-page-section .section-container { padding-top: var(--bde-section-vertical-padding, 48px) !important; padding-bottom: var(--bde-section-vertical-padding, 48px) !important; } /* Services grid block */ .breakdance.service-page .service-page-services .section-container { gap: var(--sp-section-inner-gap); } .breakdance.service-page .service-page-services__header { margin-bottom: var(--sp-section-header-gap); } .breakdance.service-page .service-page-services .service-page-services__grid { gap: var(--sp-grid-gap) !important; } /* Service cards — icon + copy spacing */ .breakdance.service-page .service-page-service-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-icon-text-gap) !important; } .breakdance.service-page .service-page-service-icon { width: var(--sp-service-icon-size) !important; height: var(--sp-service-icon-size) !important; max-width: none !important; block-size: auto; flex-shrink: 0; } @media (max-width: 1119px) { :root { --sp-hero-offset: calc(var(--site-header-height, 68px) + var(--hero-top-gap, 30px)); } .breakdance.service-page .service-page-hero .section-container { min-height: 0 !important; padding-bottom: var(--hss-xxs) !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] { gap: var(--hsp-m) !important; padding-left: clamp(28px, 5vw, 48px) !important; padding-right: clamp(28px, 5vw, 48px) !important; box-sizing: border-box !important; } .breakdance.service-page .service-page-service-icon { width: var(--sp-service-icon-size-tablet) !important; height: var(--sp-service-icon-size-tablet) !important; } .breakdance.service-page .service-page-services .service-page-services__grid { gap: 36px 28px !important; } .breakdance.service-page .service-page-services__header { margin-bottom: 32px; } .breakdance.service-page .service-page-section .section-container { padding-left: clamp(28px, 5vw, 48px) !important; padding-right: clamp(28px, 5vw, 48px) !important; } } @media (min-width: 768px) and (max-width: 1119px) { .breakdance.service-page .service-page-hero [class*="dan-particles"] h2.bde-heading { font-size: clamp(2rem, 4vw, 2.75rem) !important; line-height: 1.08 !important; } } /* ── Mobile hero (≤767px) ── */ @media (max-width: 767px) { .breakdance.service-page .service-page-hero .section-container { padding-top: calc(var(--site-header-height, 42px) + var(--hero-top-gap, 40px)) !important; padding-left: var(--sp-hero-gutter-mobile) !important; padding-right: var(--sp-hero-gutter-mobile) !important; padding-bottom: var(--sp-hero-bottom-mobile) !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; box-sizing: border-box !important; } .breakdance.service-page .bde-header-builder .bde-header-builder__container, .breakdance.service-page .bde-header-builder-529-111 .bde-header-builder__container { padding-left: var(--sp-hero-gutter-mobile) !important; padding-right: var(--sp-hero-gutter-mobile) !important; } /* Breakdance inline CSS: 80vh height + flex-end */ .breakdance.service-page .service-page-hero [class*="dan-particles"] { width: 100% !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; align-items: stretch !important; gap: var(--sp-hero-content-gap) !important; padding: 0 !important; box-sizing: border-box !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] [class*="bde-fancy-container"] { width: 100% !important; max-width: 100% !important; gap: var(--sp-hero-content-gap) !important; box-sizing: border-box !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] [class*="bde-fancy-container"] > [class*="bde-div"] { width: 100% !important; max-width: 100% !important; gap: var(--sp-hero-content-gap) !important; box-sizing: border-box !important; } .breakdance.service-page .service-page-hero .service-page-hero__badge { margin: 0 !important; } .breakdance.service-page .service-page-hero .service-page-hero__badge .bde-heading { margin: 0 !important; font-size: var(--sp-hero-body-mobile) !important; font-weight: 400 !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] h2.bde-heading { font-size: var(--sp-hero-title-mobile) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; margin: 0 !important; margin-bottom: 0 !important; max-width: 100% !important; } .breakdance.service-page .service-page-hero [class*="dan-particles"] .bde-text { font-size: var(--sp-hero-body-mobile) !important; line-height: 1.5 !important; margin: 0 !important; max-width: 100% !important; } .breakdance.service-page .service-page-service-icon { width: var(--sp-service-icon-size-mobile) !important; height: var(--sp-service-icon-size-mobile) !important; } .breakdance.service-page .service-page-services__header { margin-bottom: 24px; } .breakdance.service-page .service-page-service-card { gap: 20px !important; } .breakdance.service-page .service-page-services .section-container { gap: 28px; } } @media (max-width: 479px) { :root { --sp-hero-gutter-mobile: 20px; --sp-hero-title-mobile: clamp(1.5rem, 1.375rem + 0.8vw, 1.75rem); } }