/* ========================================================= PIXPA: Full-bleed YouTube cover hero + mobile whitespace fixes Target banner: #cover-section-3114019 ========================================================= */ /* Prevent horizontal scroll from full-bleed */ html, body { overflow-x: hidden; } /* FULL BLEED outer Pixpa banner section */ .is-section.is-section-banner.is-section-fit2width-container { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Remove inner width constraints within the banner section */ .is-section.is-section-banner.is-section-fit2width-container>.is-boxes-fit2width-container, .is-section.is-section-banner.is-section-fit2width-container .is-boxes, .is-section.is-section-banner.is-section-fit2width-container .is-box-centered, .is-section.is-section-banner.is-section-fit2width-container .is-container.container, .is-section.is-section-banner.is-section-fit2width-container .row, .is-section.is-section-banner.is-section-fit2width-container .content-margin { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Slider stack: full width + clipped */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { position: relative !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Remove any background “bar” color from slide layers */ #cover-section-3114019 .swiper-slide, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .cast-layer { background: transparent !important; } /* Desktop hero height */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { height: 60vh !important; } /* Force Swiper slide width (overrides inline px widths) */ #cover-section-3114019 .swiper-slide { width: 100% !important; flex: 0 0 100% !important; } /* TRUE cover sizing using viewport math (16:9) */ #cover-section-3114019 iframe.slide_iframes { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: max(100vw, 106.667vh) !important; /* 60vh * 16/9 */ height: max(60vh, 56.25vw) !important; /* 100vw * 9/16 */ max-width: none !important; max-height: none !important; border: 0 !important; background: transparent !important; z-index: 1 !important; /* ADDED: keep iframe below overlay */ } /* ========================================================= GRADIENT OVERLAY (ON TOP OF VIDEO) ========================================================= */ #cover-section-3114019 .swiper-slide::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; pointer-events: none !important; z-index: 5 !important; background: rgba(0, 0, 0, 0.4) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* Set mobile hero height (pick your favorite) */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { height: 38vh !important; /* adjust 30–45vh */ min-height: 240px !important; max-height: 420px !important; } /* Override Pixpa inline “height: 100vh” on the slider */ #cover-section-3114019 .slider-big-cover[style], #cover-section-3114019 .swiper[style], #cover-section-3114019 .swiper-slide[style] { height: 38vh !important; } /* Mobile cover math (16:9) */ #cover-section-3114019 iframe.slide_iframes { width: max(100vw, 67.556vh) !important; /* 38vh * 16/9 */ height: max(38vh, 56.25vw) !important; } /* Hide empty overlay text container (causes white space) */ #cover-section-3114019 .overwrite-text, #cover-section-3114019 .slider-box-container, #cover-section-3114019 .slider-box-content, #cover-section-3114019 .slider-box-content-width, #cover-section-3114019 .slider-box-content-width_large { display: none !important; } /* Hide stray spacer tool block */ #dynamic-banner-3114019 .is-section-tool_visibility { display: none !important; height: 0 !important; } /* Hide known duplicate banner instance (if it exists) */ #dynamic_compnent1408620 { display: none !important; } /* Hide any duplicate/empty dynamic components creating whitespace */ .js-dyanmic-component-container:empty { display: none !important; } /* Collapse empty swipers (no slides) */ .js-dyanmic-component-container .swiper-wrapper:empty { display: none !important; } /* Modern browsers: hide containers that have an empty swiper */ .js-dyanmic-component-container:has(.swiper-wrapper:empty), .js-dyanmic-component-container:has(.swiper):not(:has(.swiper-slide)) { display: none !important; } /* Fallback: if a swiper wrapper has no slides, collapse it */ .swiper-wrapper:empty { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .swiper-wrapper:empty+.swiper-notification { display: none !important; } .is-wrapper>div.is-section-fullwidth_inset.is-section-basic, .is-wrapper>div.is-section-fullwidth_inset.is-bg-has-color, .is-wrapper>div.is-section-fullwidth_inset.is-bg-has-image { margin: 0 !important; } } /* Force sticky header */ .header-spacing.u54435-header-bg-color { position: sticky !important; top: 0 !important; z-index: 99999 !important; } /* Make sure the actual header stays above content */ .header-spacing.u54435-header-bg-color .header-common { position: sticky !important; top: 0 !important; z-index: 99999 !important; } /* Sticky can break if ancestors have overflow/transform */ .column-container, .fixed-width-container, .photo-gallery-container { overflow: visible !important; transform: none !important; } /* Fixed header fallback */ .header-spacing.u54435-header-bg-color { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; } /* Push page content down so it doesn't hide under the fixed header */ .column-container.fixed-width-container { padding-top: 200px !important; /* adjust to match your header height */ } @media (max-width: 768px) { .column-container.fixed-width-container { padding-top: 140px !important; /* adjust for mobile header height */ } } /* CHOOSE YOUR SPACE — make the whole section full bleed */ .dynamic-component-container.desktop:has(#builder-list-container-6545577) { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } .dynamic-component-container.desktop:has(#builder-list-container-6545577)>.is-boxes-fit2width-container, .dynamic-component-container.desktop:has(#builder-list-container-6545577) .is-boxes, .dynamic-component-container.desktop:has(#builder-list-container-6545577) .is-box-centered, .dynamic-component-container.desktop:has(#builder-list-container-6545577) .is-container.container, .dynamic-component-container.desktop:has(#builder-list-container-6545577) .row, .dynamic-component-container.desktop:has(#builder-list-container-6545577) .content-margin { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* full-width inner builder */ #builder-list-container-6545577, #builder-list-container-6545577 .faqs-grid-container, #builder-list-container-6545577 .js-grid-list-padding { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* override Pixpa masonry/absolute positioning */ #builder-list-container-6545577 .grid-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; position: static !important; height: auto !important; margin: 0 !important; padding: 0 24px !important; /* remove this line if you want true edge-to-edge */ } #builder-list-container-6545577 .grid-list .grid-list-item { width: auto !important; height: 311px !important; position: relative !important; left: auto !important; top: auto !important; margin: 0 !important; } #builder-list-container-6545577 .grid-list-sizer, #builder-list-container-6545577 .clearfix { display: none !important; } /* mobile */ @media (max-width: 767px) { #builder-list-container-6545577 .grid-list { grid-template-columns: 1fr !important; padding: 0 16px !important; } #builder-list-container-6545577 .grid-list { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 16px !important; } #builder-list-container-6545577 .grid-list .grid-list-item { height: 260px !important; } #builder-list-container-6545577 .items-image, #builder-list-container-6545577 .items-image img { height: 100% !important; } } /* WEDDING GALLERY — make the whole section full bleed */ .dynamic-photo-gallery-container:has(#photo-gallery-6557093) { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } .dynamic-photo-gallery-container:has(#photo-gallery-6557093)>.is-boxes-fit2width-container, .dynamic-photo-gallery-container:has(#photo-gallery-6557093) .is-boxes, .dynamic-photo-gallery-container:has(#photo-gallery-6557093) .is-box-centered, .dynamic-photo-gallery-container:has(#photo-gallery-6557093) .is-container.container, .dynamic-photo-gallery-container:has(#photo-gallery-6557093) .row, .dynamic-photo-gallery-container:has(#photo-gallery-6557093) .content-margin { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Full-width inner gallery */ #photo-gallery-6557093, #photo-gallery-6557093 .js-grid-padding, #photo-gallery-6557093 .js-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Keep Pixpa gutter but let gallery span full width */ #photo-gallery-6557093 .js-grid-padding { padding-left: 20px !important; padding-right: 20px !important; } #photo-gallery-6557093 .js-grid { padding-top: 20px !important; } /* Mobile */ @media (max-width: 767px) { #photo-gallery-6557093 .js-grid-padding { padding-left: 10px !important; padding-right: 10px !important; } #photo-gallery-6557093 .js-grid { padding-top: 10px !important; } } /* Reduce space under "Imagine Your Day..." */ #builder-list-container-6557144 .pxp-block { padding-bottom: 0px !important; } #builder-list-container-6557144 .section-headline-wrapper { margin-bottom: 0 !important; } #builder-list-container-6557144 .faqs-grid-container { margin-top: 0 !important; padding-top: 0 !important; } /* WHY COUPLES CHOOSE CELEBRATION FARM — full width */ .dynamic-component-container.desktop:has(#builder-list-container-6557281) { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } .dynamic-component-container.desktop:has(#builder-list-container-6557281)>.is-boxes-fit2width-container, .dynamic-component-container.desktop:has(#builder-list-container-6557281) .is-boxes, .dynamic-component-container.desktop:has(#builder-list-container-6557281) .is-box-centered, .dynamic-component-container.desktop:has(#builder-list-container-6557281) .is-container.container, .dynamic-component-container.desktop:has(#builder-list-container-6557281) .row, .dynamic-component-container.desktop:has(#builder-list-container-6557281) .content-margin { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Full-width inner builder */ #builder-list-container-6557281, #builder-list-container-6557281 .faqs-grid-container, #builder-list-container-6557281 .js-grid-list-padding, #builder-list-container-6557281 .grid-list { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } /* Add breathing room left/right */ #builder-list-container-6557281 .js-grid-list-padding { padding-left: 48px !important; padding-right: 48px !important; margin-right: 0 !important; } /* Center the section content */ #builder-list-container-6557281 #builder-with_text-items, #builder-list-container-6557281 .section-headline-wrapper, #builder-list-container-6557281 .grid-list { text-align: center !important; justify-content: center !important; } /* Keep each text block centered */ #builder-list-container-6557281 .grid-list-item, #builder-list-container-6557281 .pxp-block, #builder-list-container-6557281 .text_content { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Mobile */ @media (max-width: 767px) { #builder-list-container-6557281 .js-grid-list-padding { padding-left: 20px !important; padding-right: 20px !important; } } /* Center the 4 cards properly */ #builder-list-container-6557281 .grid-list { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 60px !important; justify-content: center !important; position: static !important; height: auto !important; padding-left: 60px !important; padding-right: 60px !important; } #builder-list-container-6557281 .grid-list-item { position: relative !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 auto !important; } /* remove Pixpa masonry helpers */ #builder-list-container-6557281 .grid-list-sizer, #builder-list-container-6557281 .clearfix { display: none !important; } /* Mobile */ @media (max-width: 767px) { #builder-list-container-6557281 .grid-list { grid-template-columns: 1fr !important; gap: 30px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* Fixed header + bottom border */ .header-spacing.u54435-header-bg-color { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; border-bottom: 3px solid #7F252E !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important; } @media only screen and (max-width: 768px) { #cover-section-3114019 .overwrite-text, #cover-section-3114019 .slider-box-container, #cover-section-3114019 .slider-box-content, #cover-section-3114019 .slider-box-content-width, #cover-section-3114019 .slider-box-content-width_large { display: block !important; /* Ensure the content is visible on mobile */ } } /* Default styling for larger screens */ .slider-box-content-width h1 { font-size: 64px; letter-spacing: 3px; font-family: Josefin Slab, serif; margin: 0; color: #fff; font-weight: 900; line-height: 1.4; text-align: center; } .slider-box-content-width h2 { font-size: 30px; letter-spacing: 3px; font-family: Josefin Slab, serif; margin: 0; color: #fff; font-weight: 500; line-height: 1.4; text-align: center; } .slider-box-content-width p img { max-width: 100%; height: auto; } /* Media Queries for Mobile */ @media only screen and (max-width: 768px) { /* Adjust font sizes for mobile */ .slider-box-content-width h1 { font-size: 40px; /* Smaller font size on mobile */ } .slider-box-content-width h2 { font-size: 24px; /* Smaller font size for h2 on mobile */ } /* Adjust padding for mobile */ .slider-box-content-width { padding: 10px 20px; /* Reduced padding on mobile */ } /* Ensure image scales properly */ .slider-box-content-width p img { max-width: 100%; height: auto; } /* Allow text to wrap properly and prevent overflow */ .slider-box-content-width h1, .slider-box-content-width h2 { white-space: normal; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; /* Optional: truncate text if it overflows */ } /* Center the content vertically and horizontally */ .slider-box-content-width { display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; } /* Optional: Add a semi-transparent background overlay for better text visibility */ .slider-box-content-width { position: relative; } .slider-box-content-width::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */ z-index: -1; } } /* FULL BLEED outer Pixpa banner section */ .is-section.is-section-banner.is-section-fit2width-container { position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Remove inner width constraints within the banner section */ .is-section.is-section-banner.is-section-fit2width-container>.is-boxes-fit2width-container, .is-section.is-section-banner.is-section-fit2width-container .is-boxes, .is-section.is-section-banner.is-section-fit2width-container .is-box-centered, .is-section.is-section-banner.is-section-fit2width-container .is-container.container, .is-section.is-section-banner.is-section-fit2width-container .row, .is-section.is-section-banner.is-section-fit2width-container .content-margin { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Slider stack: full width + clipped */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { position: relative !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Remove any background “bar” color from slide layers */ #cover-section-3114019 .swiper-slide, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .cast-layer { background: transparent !important; } /* Desktop hero height */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { height: 60vh !important; } /* Force Swiper slide width (overrides inline px widths) */ #cover-section-3114019 .swiper-slide { width: 100% !important; flex: 0 0 100% !important; } /* TRUE cover sizing using viewport math (16:9) */ #cover-section-3114019 iframe.slide_iframes { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: max(100vw, 106.667vh) !important; /* 60vh * 16/9 */ height: max(60vh, 56.25vw) !important; /* 100vw * 9/16 */ max-width: none !important; max-height: none !important; border: 0 !important; background: transparent !important; z-index: 1 !important; /* Keep iframe below overlay */ } /* ========================================================= GRADIENT OVERLAY (ON TOP OF VIDEO) ========================================================= */ #cover-section-3114019 .swiper-slide::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; pointer-events: none !important; z-index: 2 !important; /* Ensure overlay is on top */ background: rgba(0, 0, 0, 0.4) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* Set mobile hero height */ #cover-section-3114019, #cover-section-3114019 .slider-big-cover, #cover-section-3114019 .swiper, #cover-section-3114019 .swiper-wrapper, #cover-section-3114019 .swiper-slide { height: 38vh !important; /* adjust 30–45vh */ min-height: 240px !important; max-height: 420px !important; } /* Mobile cover math (16:9) */ #cover-section-3114019 iframe.slide_iframes { width: max(100vw, 67.556vh) !important; /* 38vh * 16/9 */ height: max(38vh, 56.25vw) !important; } /* Keep content visible on mobile */ #cover-section-3114019 .overwrite-text, #cover-section-3114019 .slider-box-container, #cover-section-3114019 .slider-box-content, #cover-section-3114019 .slider-box-content-width { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 10 !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; /* Vertically center text */ } /* Actual content wrapper */ #cover-section-3114019 .slider-box-content-width { width: 100% !important; max-width: 100% !important; padding: 0 18px !important; box-sizing: border-box !important; } /* Headline */ #cover-section-3114019 .slider-box-content-width h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.05 !important; letter-spacing: 1px !important; word-spacing: normal !important; margin: 0 0 8px 0 !important; text-align: center !important; } /* Subheadline */ #cover-section-3114019 .slider-box-content-width h2 { font-size: clamp(14px, 4vw, 20px) !important; line-height: 1.25 !important; letter-spacing: 1px !important; word-spacing: normal !important; margin: 0 !important; text-align: center !important; } /* Image under text - make it bigger */ #cover-section-3114019 .slider-box-content-width p { margin: 10px 0 0 0 !important; } #cover-section-3114019 .slider-box-content-width p img { display: block !important; max-width: 288px !important; /* Increased image size */ width: 100% !important; /* Increased image width */ height: auto !important; margin: 0 auto !important; } /* Optional: if still too tight, hide the image on very small screens */ @media (max-width: 380px) { #cover-section-3114019 .slider-box-content-width p { display: none !important; } #cover-section-3114019 .slider-box-content-width h1 { font-size: clamp(24px, 7vw, 32px) !important; } #cover-section-3114019 .slider-box-content-width h2 { font-size: 13px !important; } } } /* Fixed header + bottom border */ .header-spacing.u54435-header-bg-color { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; border-bottom: 3px solid #7F252E !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important; } @media only screen and (max-width: 768px) { .column-container.fixed-width-container { padding-top: 140px !important; /* adjust for mobile header height */ } } /* ========================================================= Update Gallery Section Height for Mobile ========================================================= */ /* For desktop, keep the 75vh height */ .is-section.is-section-galleries.is-section-everywhere.is-section-fit2width-container.is-bg-background.is-bg-has-color.is-bordercolor-accent.is-separatorcolor-background.is-align-left.is-section-padding-0.is-section-margin-0.is-section-fullwidth.is-section-75 { height: 75vh !important; } /* For mobile (max-width: 767px), set a more appropriate height */ @media (max-width: 767px) { .is-section.is-section-galleries.is-section-everywhere.is-section-fit2width-container.is-bg-background.is-bg-has-color.is-bordercolor-accent.is-separatorcolor-background.is-align-left.is-section-padding-0.is-section-margin-0.is-section-fullwidth.is-section-75 { height: auto !important; /* Adjust height to auto on mobile for better flexibility */ min-height: 250px !important; /* Set a reasonable minimum height */ padding-top: 10px !important; /* Add some padding if necessary */ padding-bottom: 10px !important; /* Add padding for consistency */ } .is-wrapper .is-box .is-container {margin-top:0px !important;margin-bottom:0px !important} }