/** * Integra EDU v13 — [C] Phones: one 20px side margin, equal L/R. * Loads last on integra5 only. * * Uneven gutters come from stacked insets: * row padding + col-group padding + col margin/padding + module margin * Mockups use a single 20px inset. Verify with Chromium @ 390px across pages. */ @media (max-width: 900px) { html body.integra-edu.redesign, html body.integra-edu.home.redesign, html body.integra-edu.about.redesign, html body.exercise-mechanics-lab.redesign, html body.rts.redesign, html body.project.redesign, html body.integra-edu.intro.redesign, html body.intro.redesign, html body.private-tutoring.redesign, html body.private-workshops.redesign { --v11-gutter: 20px; --v13-gutter: 20px; } /* ---- 1) One gutter on content row wraps -------------------------------- */ html body.integra-edu.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.integra-edu.home.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.integra-edu.about.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.exercise-mechanics-lab.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.rts.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.project.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.integra-edu.intro.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.intro.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.private-tutoring.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.private-workshops.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.integra-edu.home.redesign .TransformYourDailyLife > .fl-row-content-wrap, html body.integra-edu.home.redesign .fl-node-iekjglbs47hc > .fl-row-content-wrap, html body.integra-edu.home.redesign .IntroBand > .fl-row-content-wrap, html body.integra-edu.home.redesign .fl-node-p6hs02aegzq5 > .fl-row-content-wrap, html body.integra-edu.home.redesign .PromoSection > .fl-row-content-wrap, html body.integra-edu.redesign .PromoSection > .fl-row-content-wrap, html body.integra-edu.home.redesign .ChooseYourJourneySection > .fl-row-content-wrap, html body.integra-edu.home.redesign .SaidBand > .fl-row-content-wrap, html body.integra-edu.home.redesign .HoursBand > .fl-row-content-wrap, html body.integra-edu.home.redesign .NewsletterSection > .fl-row-content-wrap, html body.integra-edu.home.redesign .StartYourJourneyWithIntegraSection > .fl-row-content-wrap, html body.integra-edu.home.redesign .IntegraTrustedBy > .fl-row-content-wrap, html body.integra-edu.home.redesign .HowWeWorkBoxesSection > .fl-row-content-wrap, html body.intro.redesign .HowWeWorkBoxesSection > .fl-row-content-wrap, html body.intro.redesign .NewsletterSection > .fl-row-content-wrap, html body.intro.redesign .MadeToMeasure > .fl-row-content-wrap, html body.intro.redesign .EmblemTitleSection > .fl-row-content-wrap { padding-left: 20px !important; padding-right: 20px !important; } /* * Header: one 20px gutter on header#customHeader (v12 already sets this). * Stacking the same 20px on #desktopContainer put the logo / hero copy * at 40px while page content sat at 20px. Menu is absolute to the * inner section, so it already lines up with the header padding. */ html body.integra-edu.redesign header#customHeader { padding-left: 20px !important; padding-right: 20px !important; } html body.integra-edu.redesign header#customHeader #desktopContainer, html body.integra-edu.redesign #desktopContainer, html body.integra-edu.redesign header#customHeader > section > section.TextContainer, html body.integra-edu.redesign header#customHeader > section > section > div { padding-left: 0 !important; padding-right: 0 !important; } /* Footer: gutter only on .v11-ft — NOT also on the wrapping BB row */ html body.integra-edu.redesign footer.ast-custom-footer .v11-ft-row > .fl-row-content-wrap, html body.integra-edu.redesign footer.ast-custom-footer .fl-row.v11-ft-row > .fl-row-content-wrap, html body.integra-edu.redesign .fl-row.v11-ft-row > .fl-row-content-wrap { padding-left: 0 !important; padding-right: 0 !important; } html body.integra-edu.redesign .v11-ft, html body.integra-edu.redesign footer.v11-ft, html body.integra-edu.redesign footer .v11-ft { padding-left: 20px !important; padding-right: 20px !important; } /* ---- 2) Kill stacked BB col-group / column insets ---------------------- */ html body.integra-edu.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group, html body.integra-edu.redesign .fl-builder-content .fl-row:not(.v11-ft-row) .fl-col-group { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } html body.integra-edu.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.integra-edu.home.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.intro.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.exercise-mechanics-lab.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.rts.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.project.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.integra-edu.about.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.private-tutoring.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.private-workshops.redesign .fl-builder-content .fl-row:not(.v11-ft-row) > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content, html body.integra-edu.redesign .HowWeWorkBoxesSection .fl-col > .fl-col-content, html body.intro.redesign .HowWeWorkBoxesSection .fl-col > .fl-col-content { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* ---- 3) Kill stacked BB module margins (on the module AND content) ---- */ html body.integra-edu.redesign .fl-builder-content .fl-module, html body.integra-edu.redesign .fl-builder-content .fl-module > .fl-module-content, html body.intro.redesign .fl-builder-content .fl-module, html body.intro.redesign .fl-builder-content .fl-module > .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; } /* ---- 4) Exceptions — full-bleed photo / card chrome ------------------- */ html body.integra-edu.redesign .LHSBulletPointsImageRow > .fl-row-content-wrap, html body.integra-edu.home.redesign .LHSBulletPointsImageRow > .fl-row-content-wrap { padding-left: 0 !important; padding-right: 0 !important; } html body.integra-edu.redesign .LHSBulletPointsImageRow .fl-col:first-child > .fl-col-content, html body.integra-edu.home.redesign .LHSBulletPointsImageRow .fl-col:first-child > .fl-col-content, html body.integra-edu.home.redesign .fl-node-dsynj1bepfch > .fl-col-content { padding-left: 20px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; } html body.integra-edu.redesign .LHSBulletPointsImageRow .fl-col:last-child > .fl-col-content, html body.integra-edu.home.redesign .LHSBulletPointsImageRow .fl-col:last-child > .fl-col-content { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Card inner padding (not page gutter) */ html body.integra-edu.redesign .WhoIsInTheRoom .fl-col > .fl-col-content, html body.project.redesign .WhoIsInTheRoom .fl-col > .fl-col-content, html body.integra-edu.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col > .fl-col-content, html body.integra-edu.redesign .EmblemTitleSection.Timeline .slick-slide > .fl-col-content, html body.integra-edu.redesign #integraTimelineClone .slick-slide .fl-col-content, html body.intro.redesign .EmblemTitleSection.Timeline .slick-slide > .fl-col-content, html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col > .fl-col-content, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col > .fl-col-content { padding-left: 22px !important; padding-right: 22px !important; } /* ---- 5) Timeline / “How the day runs” slick cards ---------------------- */ /* * v13.css gives slides margin 20px + max-width 88vw (meant as the page gutter * when the row had none). With the row wrap now at 20px, that double-insets * and variableWidth blow the card past the column. Keep wrap gutter; make * each card fill the content column with a small peek gap. */ html body.redesign #integraTimelineClone > .fl-row-content-wrap, html body.integra-edu.redesign #integraTimelineClone > .fl-row-content-wrap, html body.intro.redesign #integraTimelineClone > .fl-row-content-wrap { padding-left: 20px !important; padding-right: 20px !important; } html body.redesign #integraTimelineClone .slick-list, html body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .slick-list { margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; } /* * Use vw, not % — slick’s track is thousands of px wide, so max-width:100% * resolves against the track and the card blows out (was ~5000px). * 40px = page gutters; 14px = peek gap to the next card. */ html body.redesign #integraTimelineClone .slick-slide, html body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .slick-slide, html body.redesign .EmblemTitleSection.Timeline .slick-slide { margin-left: 0 !important; margin-right: 14px !important; width: calc(100vw - 54px) !important; max-width: calc(100vw - 54px) !important; min-width: 0 !important; box-sizing: border-box !important; flex: 0 0 calc(100vw - 54px) !important; } html body.redesign #integraTimelineClone .slick-slide > .fl-col-content, html body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .slick-slide > .fl-col-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 900px){ html body.rts.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.rts.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.exercise-mechanics-lab.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.exercise-mechanics-lab.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.intro.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.integra-edu.intro.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap, html body.intro.redesign .uabb-modal .fl-row:not(.v11-ft-row) > .fl-row-content-wrap{ padding-left:0!important; padding-right: 0!important; } .uamodal-jj3a2wtezstk .uabb-content, .uamodal-g8s682ico3yn .uabb-content, .uamodal-v0r1wylqxu63 .uabb-content{ width:98%; } } .fl-node-x34cma190svk .v11-modal__cta{ display: none!important; }