/** * Global responsive layout & spacing for all Breakdance pages. * Link in after Breakdance CSS: css/site-responsive.css */ /* ── Tighter spacing scale (desktop through mobile) ── */ :root { --hss-xxl: clamp(4.5rem, 3.8rem + 2vw, 6.5rem); --hss-xl: clamp(3rem, 2.6rem + 1.4vw, 4.5rem); --hss-l: clamp(2.25rem, 2rem + 0.9vw, 3.25rem); --hss-m: clamp(1.75rem, 1.55rem + 0.6vw, 2.5rem); --hss-s: clamp(1.375rem, 1.2rem + 0.45vw, 1.875rem); --hss-xs: clamp(1rem, 0.9rem + 0.35vw, 1.375rem); --hss-xxs: clamp(0.75rem, 0.68rem + 0.2vw, 1rem); --hsp-xxl: clamp(1.75rem, 1.5rem + 0.7vw, 2.5rem); --hsp-xl: clamp(1.375rem, 1.2rem + 0.5vw, 2rem); --hsp-l: clamp(1.125rem, 1rem + 0.35vw, 1.5rem); --hsp-m: clamp(0.9375rem, 0.85rem + 0.25vw, 1.25rem); --hsp-s: clamp(0.8125rem, 0.75rem + 0.2vw, 1rem); --hsp-xs: clamp(0.6875rem, 0.64rem + 0.15vw, 0.875rem); --bde-section-vertical-padding: var(--hss-s); --bde-column-gap: var(--hsp-s); --bde-section-horizontal-padding: clamp(16px, 3vw, 24px); --bde-section-width: min(1280px, 100%); --site-header-height: 76px; --hero-top-gap: 48px; } /* Prevent horizontal overflow */ html, body { overflow-x: clip; max-width: 100%; } .breakdance { overflow-x: clip; max-width: 100%; } .breakdance img, .breakdance video, .breakdance svg, .breakdance iframe { max-width: 100%; height: auto; } /* Section containers */ .breakdance .bde-section .section-container { width: 100%; max-width: min(var(--bde-section-width, 1280px), 100%); box-sizing: border-box; } /* Header logo */ .breakdance .bde-header-builder-529-111 img.bde-image2-529-221, .breakdance .bde-header-builder__container img.bde-image2 { width: 68px; height: 68px; max-height: 68px; object-fit: contain; } /* Header — tighter padding */ .breakdance .bde-header-builder-529-111 .bde-header-builder__container { padding-top: 6px; padding-bottom: 6px; padding-left: clamp(20px, 3vw, 32px); padding-right: clamp(20px, 3vw, 32px); gap: 16px; } /* Inner page heroes (about, contact, blog, services, etc.) */ .breakdance .hero_about .section-container, .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) .section-container { position: relative; } .breakdance .hero_about [class*="dan-particles"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) [class*="dan-particles"] { width: 100%; box-sizing: border-box; } .breakdance .hero_about [class*="bde-fancy-container"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) [class*="bde-fancy-container"] { box-sizing: border-box; } /* Hero sections — header clearance + content starts near top (never flex-end) */ .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) .section-container { min-height: min(78svh, 800px) !important; height: auto !important; padding-top: calc(var(--site-header-height) + var(--hero-top-gap)) !important; padding-bottom: var(--hss-s) !important; justify-content: flex-start !important; box-sizing: border-box; } .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.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; } .breakdance .dan-spotlight-v2-wrapper[class*="dan-spotlight-v2-wrapper"] { min-height: 100% !important; height: 100% !important; } /* Homepage full-viewport hero */ .breakdance .bde-section-6-100 { min-height: min(92svh, 900px) !important; } .breakdance .bde-section-6-100 .section-container { min-height: inherit !important; height: auto !important; padding-top: calc(var(--site-header-height) + var(--hero-top-gap)) !important; box-sizing: border-box; } /* Contact page tiles hero */ .breakdance .dan-tiles[class*="-101"] { min-height: min(78svh, 800px) !important; height: auto !important; padding-top: calc(var(--site-header-height) + var(--hero-top-gap)) !important; box-sizing: border-box; } /* Grids & columns — fluid gaps */ .breakdance .bde-grid { width: 100%; max-width: 100%; } .breakdance .bde-columns { width: 100%; max-width: 100%; } /* ── Desktop (≥1120px) — balanced page gutters ── */ @media (min-width: 1120px) { :root { --bde-section-horizontal-padding: clamp(24px, 2.5vw, 32px); } .breakdance .bde-section:not([class*="-100"]):not(.bde-section-6-100):not(.bde-section-61-100) .section-container { padding-left: var(--bde-section-horizontal-padding); padding-right: var(--bde-section-horizontal-padding); } } /* ── iPad / tablet (768px – 1119px) ── */ @media (max-width: 1119px) { :root { --bde-section-vertical-padding: var(--hss-xs); --bde-column-gap: var(--hsp-s); --bde-section-horizontal-padding: clamp(28px, 5vw, 48px); --site-header-height: 68px; --hero-top-gap: 30px; } .breakdance .bde-header-builder-529-111 .bde-header-builder__container { padding-left: var(--bde-section-horizontal-padding) !important; padding-right: var(--bde-section-horizontal-padding) !important; } .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) .section-container { min-height: 0 !important; height: auto !important; padding-bottom: var(--hss-xxs) !important; } .breakdance .hero_about [class*="dan-particles"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) [class*="dan-particles"] { height: auto !important; min-height: 0 !important; justify-content: flex-start !important; align-items: stretch !important; padding-bottom: var(--hss-xxs) !important; gap: var(--hsp-m) !important; } .breakdance .hero_about [class*="bde-fancy-container"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) [class*="bde-fancy-container"] { width: 100% !important; max-width: min(680px, 100%) !important; padding-left: var(--bde-section-horizontal-padding) !important; padding-right: var(--bde-section-horizontal-padding) !important; margin-left: 0 !important; margin-right: auto !important; } .breakdance [class*="dan-interactive-lines-v4"] { padding-top: var(--hss-s) !important; padding-bottom: var(--hss-s) !important; } .breakdance .hero_about [class*="dan-spotlight-v2-wrapper"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) [class*="dan-spotlight-v2-wrapper"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; } .breakdance .bde-section-6-100 { min-height: min(72svh, 680px) !important; } .breakdance .dan-tiles[class*="-101"] { min-height: 0 !important; height: auto !important; padding-bottom: var(--hss-xs) !important; } .breakdance .bde-section:not([class*="-100"]):not(.bde-section-6-100):not(.bde-section-61-100) .section-container { padding-top: var(--hss-xs) !important; padding-bottom: var(--hss-xs) !important; padding-left: var(--bde-section-horizontal-padding); padding-right: var(--bde-section-horizontal-padding); } } @media (max-width: 1023px) and (min-width: 768px) { .breakdance .bde-grid { --bde-grid-gap: var(--hsp-s); } .breakdance .hero_about .dan-looping-lines[class*="dan-looping-lines"] { --line-height: clamp(52px, 8vw, 68px); } } /* ── Mobile (≤767px) ── */ @media (max-width: 767px) { :root { --bde-section-vertical-padding: var(--hss-xxs); --bde-section-horizontal-padding: 16px; --bde-column-gap: var(--hsp-xs); --site-header-height: 42px; --hero-top-gap: 40px; } .breakdance h1 { letter-spacing: -1px; line-height: 1.05; } .breakdance h2 { letter-spacing: -0.5px; line-height: 1.1; } .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) .section-container { min-height: 0 !important; height: auto !important; padding-bottom: var(--hss-xs) !important; } .breakdance .hero_about [class*="dan-particles"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero):not(.hero_blog_insights) [class*="dan-particles"] { min-height: 0 !important; padding-bottom: var(--hss-xs) !important; align-items: stretch !important; gap: var(--hsp-s) !important; } .breakdance .hero_about [class*="bde-fancy-container"], .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero):not(.hero_blog_insights) [class*="bde-fancy-container"] { width: 100% !important; max-width: 100% !important; padding-left: var(--bde-section-horizontal-padding) !important; padding-right: var(--bde-section-horizontal-padding) !important; margin-left: 0 !important; margin-right: auto !important; } .breakdance .bde-section-6-100 { min-height: min(82svh, 720px) !important; } .breakdance .dan-tiles[class*="-101"] { min-height: min(68svh, 620px) !important; height: auto !important; } .breakdance .bde-header-builder .bde-header-builder__container, .breakdance .bde-header-builder-529-111 .bde-header-builder__container { padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 12px !important; padding-right: 12px !important; gap: 10px !important; } .breakdance .bde-header-builder__container img.bde-image2 { width: 38px !important; height: 38px !important; max-height: 38px !important; } .breakdance .bde-header-builder .dan-burger.hamburger { --burguer-dimensions: 30px; --hamburger-layer-spacing: 4px; --hamburger-layer-height: 2px; } .breakdance .dan-anyside-button .dan-anyside-button__anchor, .breakdance .bde-button { max-width: 100%; } .breakdance-form input, .breakdance-form textarea, .breakdance-form select { max-width: 100%; box-sizing: border-box; } .breakdance .bde-text, .breakdance .bde-heading { word-wrap: break-word; overflow-wrap: break-word; } } /* ── Small phones (≤479px) ── */ @media (max-width: 479px) { :root { --bde-section-horizontal-padding: 14px; --site-header-height: 38px; --hero-top-gap: 36px; } .breakdance .bde-header-builder .bde-header-builder__container, .breakdance .bde-header-builder-529-111 .bde-header-builder__container { padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 10px !important; padding-right: 10px !important; } .breakdance .bde-header-builder__container img.bde-image2 { width: 34px !important; height: 34px !important; max-height: 34px !important; } .breakdance .bde-section[class*="-100"]:not(.bde-section-6-100):not(.bde-section-61-100):not(.service-page-hero) .section-container { min-height: 0 !important; } .breakdance .bde-section-6-100 { min-height: min(78svh, 680px) !important; } .breakdance .dan-tiles[class*="-101"] { min-height: min(64svh, 560px) !important; } } /* Footer — compact bottom spacing (exclude from hero min-height rules above) */ .breakdance .dh_footer.bde-section-61-100 .section-container { min-height: 0 !important; height: auto !important; padding-top: var(--hss-s) !important; padding-bottom: var(--hss-xxs) !important; } .breakdance .dh_footer .bde-div-61-132 { margin-top: var(--hsp-m); margin-bottom: 0; }