/** * Integra EDU v13 — overlay only. * Source: v13/V13/00 - Jason Trello List.md + mockups/v13.css * Loads after v12.css. Do not edit v11/v12 sheets for these items. */ html body.integra-edu.redesign { --v13-ink: #2a2d3a; --v13-orange: #F77908; --v13-gutter: 6vw; --v13-soft: #f6f6f6; --v13-hairline: #e3e3e6; --v13-muted: #c9cad0; } /* -------------------------------------------------------------------------- */ /* [A] Headings that disappear — ink on light rows */ /* Header colour-code injects white onto .fl-rich-text h3 span span etc. */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-module.LargeHeader .fl-heading-text, html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-module.LargeHeader .fl-heading-text *, html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-module.LargeHeader h2 .fl-heading-text, html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-module.LargeHeader h3 .fl-heading-text, html body.integra-edu.home.redesign .IntroBand .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .IntroBand .LargeHeader .fl-heading-text *, html body.integra-edu.home.redesign .IntroBand .fl-node-izw039axg728 .fl-heading-text, html body.integra-edu.home.redesign .SaidBand .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .SaidBand .LargeHeader .fl-heading-text *, html body.integra-edu.home.redesign .SaidBand .fl-node-btwgj7sim4u9 .fl-heading-text, html body.integra-edu.home.redesign .LHSBulletPointsImageRow .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .fl-node-qb2zj6l1skm4 .fl-heading-text, html body.integra-edu.home.redesign .ChooseYourJourneySection .fl-heading-text, html body.integra-edu.redesign .fl-row:has(.IntegraTestimonialsSliderPT) .LargeHeader .fl-heading-text, html body.integra-edu.redesign .fl-row:has(.IntegraTestimonialsSliderPT) .LargeHeader .fl-heading-text *, html body.exercise-mechanics-lab.redesign .fl-node-re2dgtqownb7 .fl-heading-text, html body.exercise-mechanics-lab.redesign .fl-node-re2dgtqownb7 .fl-heading-text *, html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-rich-text h3 span span, html body.integra-edu.redesign .IntroBand .fl-rich-text h3 span span, html body.integra-edu.redesign .SaidBand .fl-rich-text h3 span span, html body.integra-edu.redesign .ChooseYourJourneySection .fl-rich-text h3 span span { color: var(--v13-ink) !important; } /* Keep white headings on dark photo / newsletter bands */ html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .LargeHeader .fl-heading-text *, html body.integra-edu.redesign .MadeToMeasure .LargeHeader .fl-heading-text, html body.integra-edu.redesign .MadeToMeasure .LargeHeader .fl-heading-text *, html body.integra-edu.redesign .NewsletterSection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .NewsletterSection .LargeHeader .fl-heading-text *, html body.integra-edu.home.redesign .fl-node-90jumd73yakn .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .fl-node-54wiz0c8nxly .fl-heading-text, html body.integra-edu.home.redesign .fl-node-hlga0r9wux54 .fl-heading-text, html body.exercise-mechanics-lab.redesign .fl-node-yht5mxf2vdi1 .fl-heading-text, html body.exercise-mechanics-lab.redesign .fl-node-cj9kgadf537r .LargeHeader .fl-heading-text { color: #fff !important; } /* -------------------------------------------------------------------------- */ /* [K] Centre button arrows on the label */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign a.fl-button::after, html body.integra-edu.redesign .Black a.fl-button::after, html body.integra-edu.redesign .v11-ink-btn::after, html body.integra-edu.redesign #desktopContainer .ButtonContainer a:not(#headerLink)::after, html body.integra-edu.redesign header#customHeader .ButtonContainer a:not(#headerLink)::after, html body.integra-edu.redesign .v11-modal__cta::after, html body.integra-edu.redesign .v11-ft__news-form #gform_wrapper_68 .gform_button::after, html body.integra-edu.redesign .HowWeWorkBoxesSection button.edd-add-to-cart::after { position: relative !important; top: -0.06em !important; } /* -------------------------------------------------------------------------- */ /* [L] Centre slider arrows + dots */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .IntegraTestimonialsSliderPT .slick-dots, html body.integra-edu.redesign .IntegraTestimonialsSliderPT .slick-arrow, html body.integra-edu.redesign .SaidBand .slick-dots, html body.integra-edu.redesign .fl-row:has(.IntegraTestimonialsSliderPT) .slick-dots { margin-left: auto !important; margin-right: auto !important; } html body.integra-edu.redesign .IntegraTestimonialsSliderPT .slick-dots, html body.integra-edu.redesign .SaidBand .slick-dots, html body.integra-edu.redesign .fl-row:has(.IntegraTestimonialsSliderPT) .slick-dots { display: flex !important; justify-content: center !important; width: 100% !important; padding-left: 0 !important; text-align: center !important; } html body.integra-edu.redesign .IntegraTestimonialsSliderPT .InnerContainer + .slick-navigation, html body.integra-edu.redesign .IntegraTestimonialsSliderPT .slick-navigation, html body.integra-edu.redesign .fl-row:has(.IntegraTestimonialsSliderPT) .slick-dots { justify-content: center !important; } /* Wrapper often used under the slider */ html body.integra-edu.redesign .IntegraTestimonialsSliderPT { text-align: center; } html body.integra-edu.redesign .IntegraTestimonialsSliderPT .InnerContainer, html body.integra-edu.redesign .IntegraTestimonialsSliderPT .TextContainer { text-align: left; } /* -------------------------------------------------------------------------- */ /* [N] Booking buttons — orange (override white colour-code labels) */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.integra-edu.redesign .HowWeWorkBoxesSection button.edd-submit, html body.integra-edu.redesign .HowWeWorkBoxesSection .edd-add-to-cart, html body.integra-edu.redesign .HowWeWorkBoxesSection a.edd-add-to-cart, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer button.edd-add-to-cart, html body.integra-edu.redesign .HowWeWorkBoxesSection .integra_download_shortcode button.edd-add-to-cart, html body.integra-edu.intro.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.integra-edu.private-tutoring.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.integra-edu.project.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.private-tutoring.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.project.redesign .HowWeWorkBoxesSection button.edd-add-to-cart { background: var(--v13-orange) !important; background-color: var(--v13-orange) !important; border: 0 !important; color: #fff !important; } html body.integra-edu.redesign .HowWeWorkBoxesSection .edd-add-to-cart-label, html body.integra-edu.redesign .HowWeWorkBoxesSection button.edd-add-to-cart .edd-add-to-cart-label, html body.integra-edu.redesign .HowWeWorkBoxesSection .integra_download_shortcode .edd-add-to-cart-label { color: #fff !important; } /* -------------------------------------------------------------------------- */ /* [O][S] Booking box — early-bird order + type sizes */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .HowWeWorkBoxesSection .integra_custom_title h3, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer h3 { font-size: 24px !important; line-height: 1.2 !important; font-weight: 800 !important; } html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer .big, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer .SoldOut, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer .price, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-price-section h3 { font-size: 50px !important; line-height: 1.05 !important; font-weight: 800 !important; } html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer .wp, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer .wp b, html body.integra-edu.redesign .HowWeWorkBoxesSection .BlogNewContainer small, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-course-type-buttons button, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-price-type-buttons button, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-course-type-buttons a, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-price-type-buttons a, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-course-type-buttons em, html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-price-type-buttons em { font-size: 20px !important; line-height: 1.3 !important; } /* Unselected switch label — muted */ html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-course-type-buttons button:not(.selected):not(.active):not([aria-pressed="true"]), html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-price-type-buttons button:not(.selected):not(.active):not([aria-pressed="true"]), html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-course-type-buttons a:not(.selected):not(.active), html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-enrol-price-type-buttons a:not(.selected):not(.active) { color: #9a9ca5 !important; opacity: 1 !important; } html body.integra-edu.redesign .HowWeWorkBoxesSection p.early_bird_disc, html body.integra-edu.redesign .HowWeWorkBoxesSection .early_bird_disc, html body.integra-edu.redesign .HowWeWorkBoxesSection .integra_download_shortcode p.early_bird_disc { font-size: 14px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 800 !important; color: var(--v13-orange) !important; } html body.integra-edu.redesign .HowWeWorkBoxesSection .was, html body.integra-edu.redesign .HowWeWorkBoxesSection del, html body.integra-edu.redesign .HowWeWorkBoxesSection .standard-price, html body.integra-edu.redesign .HowWeWorkBoxesSection .v11-was { font-size: 20px !important; line-height: 26px !important; color: var(--v13-muted) !important; } /* -------------------------------------------------------------------------- */ /* [Q] Remove white band between card row and booking row */ /* -------------------------------------------------------------------------- */ html body.integra-edu.intro.redesign .fl-row.HowWeWorkBoxesSection, html body.integra-edu.exercise-mechanics-lab.redesign .fl-row.HowWeWorkBoxesSection, html body.exercise-mechanics-lab.redesign .fl-row.HowWeWorkBoxesSection, html body.integra-edu.private-tutoring.redesign .fl-row.HowWeWorkBoxesSection, html body.private-tutoring.redesign .fl-row.HowWeWorkBoxesSection { margin-top: 0 !important; } html body.integra-edu.intro.redesign .fl-row.HowWeWorkBoxesSection > .fl-row-content-wrap, html body.exercise-mechanics-lab.redesign .fl-row.HowWeWorkBoxesSection > .fl-row-content-wrap, html body.private-tutoring.redesign .fl-row.HowWeWorkBoxesSection > .fl-row-content-wrap, html body.integra-edu.private-tutoring.redesign .fl-row.HowWeWorkBoxesSection > .fl-row-content-wrap { margin-top: 0 !important; } /* Collapse empty spacer rows sitting above the booking band */ html body.integra-edu.intro.redesign .fl-row.HowWeWorkBoxesSection + .fl-row > .fl-row-content-wrap:empty, html body.private-tutoring.redesign .fl-row.HowWeWorkBoxesSection ~ .fl-row > .fl-row-content-wrap:empty { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* -------------------------------------------------------------------------- */ /* [X] Footer Subscribe — 20px */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .v11-ft__news-form #gform_wrapper_68 #gform_submit_button_68, html body.integra-edu.redesign .v11-ft__news-form #gform_wrapper_68 .gform_button, html body.integra-edu.redesign .v11-ft__news-form #gform_68 .gform_button { font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; } /* -------------------------------------------------------------------------- */ /* [AA] Pop-up body text 20px */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .uabb-modal-content, html body.integra-edu.redesign .uabb-modal-content p, html body.integra-edu.redesign .uabb-modal-content li, html body.integra-edu.redesign .uabb-modal-content dd, html body.integra-edu.redesign .uabb-modal-content .fl-rich-text, html body.integra-edu.redesign .uabb-modal-content .fl-rich-text p, html body.integra-edu.redesign .uabb-modal-content .v11-faq__list, html body.integra-edu.redesign .uabb-modal-content .v11-faq__list p, html body.integra-edu.redesign .uabb-modal-content details p, html body.integra-edu.redesign .uabb-modal-content details .fl-rich-text, html body.integra-edu.redesign .v11-modal, html body.integra-edu.redesign .v11-modal p, html body.integra-edu.redesign .v11-modal li, html body.integra-edu.redesign .v11-modal dd { font-size: 20px !important; line-height: 1.5 !important; } html body.integra-edu.redesign .uabb-modal-content details summary, html body.integra-edu.redesign .uabb-modal-content .v11-faq__list summary { font-size: 20px !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- */ /* [AD] Waitlist pop-up — stack fields on phones */ /* -------------------------------------------------------------------------- */ @media (max-width: 700px) { html body.integra-edu.redesign .uabb-modal-content .gform_fields, html body.integra-edu.redesign .uabb-modal-content .gform_body .gform_fields { display: flex !important; flex-direction: column !important; gap: 16px !important; } html body.integra-edu.redesign .uabb-modal-content .gfield, html body.integra-edu.redesign .uabb-modal-content li.gfield { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding-right: 0 !important; } html body.integra-edu.redesign .uabb-modal-content .gfield_label, html body.integra-edu.redesign .uabb-modal-content input[type="text"], html body.integra-edu.redesign .uabb-modal-content input[type="email"] { font-size: 20px !important; line-height: 1.4 !important; } } /* -------------------------------------------------------------------------- */ /* [AJ] Course logo — lower right of hero on desktop */ /* -------------------------------------------------------------------------- */ @media (min-width: 901px) { html body.integra-edu.redesign header#customHeader { position: relative !important; } html body.integra-edu.redesign header#customHeader .Emblem { position: absolute !important; right: 0!important; bottom: 0!important; margin: 0 !important; width: 100px !important; height: 100px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: right bottom !important; z-index: 3 !important; pointer-events: none; } } /* -------------------------------------------------------------------------- */ /* [D] Pathway level labels — size + gap to logo */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .ChooseYourJourneySection .fl-col .fl-module-rich-text:first-child .fl-rich-text > p, html body.integra-edu.redesign .ChooseYourJourneySection .fl-node-d8i536h1v9rt .fl-rich-text > p, html body.integra-edu.redesign .ChooseYourJourneySection .fl-node-w1qheo72l4r3 .fl-rich-text > p, html body.integra-edu.redesign .ChooseYourJourneySection .fl-node-08p2wxbltaoz .fl-rich-text > p, html body.integra-edu.about.redesign .ChooseYourJourneySection .fl-node-63pq8zbodvhx .fl-rich-text > p, html body.integra-edu.about.redesign .ChooseYourJourneySection .fl-node-bx9m3vti4fsq .fl-rich-text > p, html body.integra-edu.about.redesign .ChooseYourJourneySection .fl-node-2xyfiazbp56l .fl-rich-text > p, html body.about.redesign .ChooseYourJourneySection .fl-col .fl-module-rich-text:first-child .fl-rich-text > p { font-size: 20px !important; line-height: 26px !important; padding-bottom: 24px !important; margin-bottom: 0 !important; } /* Whole pathway card clickable affordance (links already present) */ html body.integra-edu.redesign .ChooseYourJourneySection .fl-col a.more { display: inline-block; } /* -------------------------------------------------------------------------- */ /* [D] How tutoring / How a workshop works — match V13 mockup cards */ /* Rebuilt as EmblemTitleSection.Timeline (old node-ID rules no longer hit). */ /* -------------------------------------------------------------------------- */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline > .fl-row-content-wrap, html body.private-workshops.redesign .EmblemTitleSection.Timeline > .fl-row-content-wrap, html body.private-tutoring.redesign #integraTimelineClone > .fl-row-content-wrap, html body.private-workshops.redesign #integraTimelineClone > .fl-row-content-wrap { background: var(--v13-soft, #f6f6f6) !important; padding: clamp(60px, 7vw, 110px) var(--v13-gutter, 6vw) !important; margin: 0 !important; } html body.private-tutoring.redesign .EmblemTitleSection.Timeline .LargeHeader .fl-heading-text, html body.private-workshops.redesign .EmblemTitleSection.Timeline .LargeHeader .fl-heading-text, html body.private-tutoring.redesign #integraTimelineClone .LargeHeader .fl-heading-text, html body.private-workshops.redesign #integraTimelineClone .LargeHeader .fl-heading-text { color: var(--v13-ink, #2a2d3a) !important; font-weight: 800 !important; font-size: clamp(38px, 4.8vw, 72px) !important; line-height: 1 !important; letter-spacing: -0.02em !important; margin-bottom: 22px !important; } /* Lead under the heading — keep v12 [AK] 20px; only spacing/colour here */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:first-of-type .fl-rich-text > p, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:first-of-type .fl-rich-text > p, html body.private-tutoring.redesign #integraTimelineClone .fl-row-content > .fl-col-group:first-of-type .fl-rich-text > p, html body.private-workshops.redesign #integraTimelineClone .fl-row-content > .fl-col-group:first-of-type .fl-rich-text > p { color: #4a4d5a !important; max-width: 900px; margin-bottom: 40px !important; } /* Three cards — mockup .three .grid5 */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2), html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) { display: flex !important; flex-wrap: nowrap !important; column-gap: 18px !important; gap: 18px !important; } /* Desktop cards (original row, not the clone): border + fill on the column */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col, html body.private-workshops.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col { background: #fff !important; border-top: 4px solid var(--v13-orange, #F77908) !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; } html body.private-tutoring.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col > .fl-col-content, html body.private-workshops.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col > .fl-col-content { padding: 26px 22px 30px !important; background: #fff !important; box-sizing: border-box !important; height: 100% !important; } /* Orange label (span.Weekday) — size left to existing Timeline / v11 rules */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline .Weekday, html body.private-workshops.redesign .EmblemTitleSection.Timeline .Weekday, html body.private-tutoring.redesign #integraTimelineClone .Weekday, html body.private-workshops.redesign #integraTimelineClone .Weekday, html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text span, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text span { display: block !important; font-style: normal !important; color: var(--v13-orange, #F77908) !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } /* Card title/body sizes: leave to v12 [AK] (strong 20 / body 18) — layout only */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text strong, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text strong, html body.private-tutoring.redesign #integraTimelineClone .fl-rich-text strong, html body.private-workshops.redesign #integraTimelineClone .fl-rich-text strong { display: block !important; margin-bottom: 12px !important; color: var(--v13-ink, #2a2d3a) !important; } html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text > p, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text > p, html body.private-tutoring.redesign #integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text > p, html body.private-workshops.redesign #integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text > p, html body.private-tutoring.redesign #integraTimelineClone .slick-slide .fl-rich-text > p, html body.private-workshops.redesign #integraTimelineClone .slick-slide .fl-rich-text > p { color: #4a4d5a !important; margin: 0 !important; } @media (max-width: 900px) { html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2), html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) { flex-wrap: wrap !important; } html body.private-tutoring.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col, html body.private-workshops.redesign .EmblemTitleSection.Timeline .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col { flex: 1 1 calc(50% - 9px) !important; } } /* -------------------------------------------------------------------------- */ /* [D] #integraTimelineClone — equal-height slides on phones */ /* -------------------------------------------------------------------------- */ /* Kill the v11 .fl-col top border on the clone so only your .slick-slide > .fl-col-content border remains (no double line). */ html body.redesign #integraTimelineClone .slick-slide, html body.redesign #integraTimelineClone .slick-slide.fl-col, html body.redesign #integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col { border-top: 0 !important; background: transparent !important; } @media (max-width: 700px) { html body.redesign #integraTimelineClone .slick-track { display: flex !important; align-items: stretch !important; } html body.redesign #integraTimelineClone .slick-slide { height: auto !important; display: flex !important; float: none !important; } html body.redesign #integraTimelineClone .slick-slide > div, html body.redesign #integraTimelineClone .slick-slide.fl-col, html body.redesign #integraTimelineClone .slick-slide .fl-col, html body.redesign #integraTimelineClone .slick-slide .fl-col-content { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 100% !important; box-sizing: border-box !important; } html body.redesign #integraTimelineClone .slick-slide .fl-module, html body.redesign #integraTimelineClone .slick-slide .fl-module-content, html body.redesign #integraTimelineClone .slick-slide .fl-rich-text { flex: 1 1 auto !important; height: 100% !important; } /* Padding only — border-top stays on .fl-col-content from your rules */ html body.private-tutoring.redesign #integraTimelineClone .slick-slide .fl-col-content, html body.private-workshops.redesign #integraTimelineClone .slick-slide .fl-col-content { padding: 26px 22px 30px !important; } /* One card wide when the original (non-clone) row is still visible */ html body.private-tutoring.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col, html body.private-workshops.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone) .fl-row-content > .fl-col-group:nth-of-type(2) > .fl-col { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------------------------- */ /* [AG] About biography timeline — space year columns */ /* -------------------------------------------------------------------------- */ html body.integra-edu.about.redesign .uabb-modal-content .timeline, html body.about.redesign .uabb-modal-content .timeline, html body.integra-edu.about.redesign .uabb-modal-content dl.timeline, html body.integra-edu.redesign .uabb-modal-content .v11-timeline { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: 20px 28px !important; } html body.integra-edu.about.redesign .uabb-modal-content .timeline > div, html body.about.redesign .uabb-modal-content .timeline > div, html body.integra-edu.redesign .uabb-modal-content .v11-timeline > div { min-width: 0 !important; } /* -------------------------------------------------------------------------- */ /* [AB][AC] Pop-up header / close cross */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .uabb-modal-content .uabb-modal-close, html body.integra-edu.redesign .uabb-modal .uabb-modal-close, html body.integra-edu.redesign .uabb-modal-parent-wrapper .uabb-modal-close { position: absolute !important; top: 18px !important; right: 18px !important; left: auto !important; z-index: 5 !important; } html body.integra-edu.redesign .uabb-modal-content, html body.integra-edu.redesign .uabb-modal .uabb-modal-content { position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html body.integra-edu.redesign .uabb-modal-content .uabb-modal-title, html body.integra-edu.redesign .uabb-modal-content .v11-modal__head, html body.integra-edu.intro.redesign .uabb-modal-content > .fl-row:first-child > .fl-row-content-wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- */ /* Project testimonials row — match 6vw gutters ([prev] / consistency) */ /* -------------------------------------------------------------------------- */ html body.project.redesign .fl-node-7eld43k8rp9w > .fl-row-content-wrap, html body.integra-edu.project.redesign .fl-row:has(.IntegraTestimonialsSliderPT) > .fl-row-content-wrap { padding-left: var(--v13-gutter) !important; padding-right: var(--v13-gutter) !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* -------------------------------------------------------------------------- */ /* [Y] Shared form card style (contact + site forms) */ /* -------------------------------------------------------------------------- */ html body.integra-edu.redesign .gform_wrapper .gfield_label, html body.integra-edu.redesign .gform_wrapper legend, html body.contact .gform_wrapper .gfield_label { font-size: 20px !important; line-height: 26px !important; font-weight: 700 !important; color: var(--v13-ink) !important; } html body.integra-edu.redesign .gform_wrapper .gfield_required, html body.contact .gform_wrapper .gfield_required { color: var(--v13-orange) !important; } html body.integra-edu.redesign .gform_wrapper input[type="text"], html body.integra-edu.redesign .gform_wrapper input[type="email"], html body.integra-edu.redesign .gform_wrapper input[type="tel"], html body.integra-edu.redesign .gform_wrapper select, html body.integra-edu.redesign .gform_wrapper textarea, html body.contact .gform_wrapper input[type="text"], html body.contact .gform_wrapper input[type="email"], html body.contact .gform_wrapper input[type="tel"], html body.contact .gform_wrapper select, html body.contact .gform_wrapper textarea { font-size: 20px !important; line-height: 1.4 !important; padding: 13px 16px !important; border: 2px solid #d9dadf !important; border-radius: 0 !important; background: #fff !important; color: var(--v13-ink) !important; box-sizing: border-box !important; } html body.integra-edu.redesign .gform_wrapper input:focus, html body.integra-edu.redesign .gform_wrapper select:focus, html body.integra-edu.redesign .gform_wrapper textarea:focus, html body.contact .gform_wrapper input:focus, html body.contact .gform_wrapper select:focus, html body.contact .gform_wrapper textarea:focus { outline: none !important; border-color: var(--v13-ink) !important; } html body.integra-edu.redesign .gform_wrapper .gform_button, html body.integra-edu.redesign .gform_wrapper input[type="submit"], html body.contact .gform_wrapper .gform_button, html body.contact .gform_wrapper input[type="submit"] { background: var(--v13-orange) !important; color: #fff !important; border: 0 !important; font-size: 20px !important; line-height: 24px !important; font-weight: 800 !important; padding: 16px 22px !important; } /* Don't restyle the footer newsletter form as a white card */ html body.integra-edu.redesign .v11-ft__news-form .gform_wrapper, html body.integra-edu.redesign .v11-ft .gform_wrapper { background: transparent !important; border: 0 !important; padding: 0 !important; } /* -------------------------------------------------------------------------- */ /* Phones ≤700px — [C] gutters, full-width buttons; [E] 40px headings; [D] */ /* -------------------------------------------------------------------------- */ @media (max-width: 700px) { html body.integra-edu.redesign .fl-row > .fl-row-content-wrap, html body.integra-edu.redesign .PromoSection > .fl-row-content-wrap, html body.integra-edu.redesign .IntroBand > .fl-row-content-wrap, html body.integra-edu.redesign .SaidBand > .fl-row-content-wrap, html body.integra-edu.redesign .ChooseYourJourneySection > .fl-row-content-wrap, html body.integra-edu.redesign .IntegraTrustedBy > .fl-row-content-wrap, html body.integra-edu.redesign .HowWeWorkBoxesSection > .fl-row-content-wrap, html body.integra-edu.redesign .StartYourJourneyWithIntegraSection > .fl-row-content-wrap, html body.integra-edu.redesign .NewsletterSection > .fl-row-content-wrap, html body.integra-edu.redesign .LHSBulletPointsImageRow .fl-col:first-child > .fl-col-content, html body.integra-edu.redesign .v11-ft { padding-left: 20px !important; padding-right: 20px !important; } /* Split photo rows: keep photo flush; text col still 20px */ html body.integra-edu.redesign .LHSBulletPointsImageRow > .fl-row-content-wrap { padding-left: 0 !important; padding-right: 0 !important; } /* [C] Buttons full width; label left; arrow 12px after last word */ html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .Black a.fl-button, html body.integra-edu.redesign .MadeToMeasure .Black a.fl-button, html body.integra-edu.redesign .IntroBand a.v11-ink-btn, html body.integra-edu.redesign .v11-ink-btn, html body.integra-edu.redesign .HowWeWorkBoxesSection button.edd-add-to-cart, html body.integra-edu.redesign .HowWeWorkBoxesSection a.fl-button { display: flex !important; max-width: 100% !important; box-sizing: border-box !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } html body.integra-edu.redesign #desktopContainer .ButtonContainer a:not(#headerLink)::after, html body.integra-edu.redesign header#customHeader .ButtonContainer a:not(#headerLink)::after, html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .Black a.fl-button::after, html body.integra-edu.redesign .MadeToMeasure .Black a.fl-button::after, html body.integra-edu.redesign .v11-ink-btn::after, html body.integra-edu.redesign .IntroBand a.v11-ink-btn::after { display: inline !important; margin-left: 12px !important; margin-right: 0 !important; } html body.integra-edu.redesign #desktopContainer .ButtonContainer, html body.integra-edu.redesign header#customHeader .ButtonContainer { align-items: stretch !important; width: 100% !important; } /* [E] Section headings 40px (not hero / statement / hours) */ html body.integra-edu.redesign .fl-module.LargeHeader .fl-heading-text, html body.integra-edu.redesign .fl-module.LargeHeader h2 .fl-heading-text, html body.integra-edu.redesign .fl-module.LargeHeader h3 .fl-heading-text, html body.integra-edu.redesign .ChooseYourJourneySection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .SaidBand .LargeHeader .fl-heading-text, html body.integra-edu.redesign .IntroBand .LargeHeader .fl-heading-text, html body.integra-edu.redesign .IntegraTrustedBy .LargeHeader .fl-heading-text, html body.integra-edu.redesign .HowWeWorkBoxesSection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .WhoIsInTheRoom .LargeHeader .fl-heading-text, html body.integra-edu.redesign .EmblemTitleSection .LargeHeader .fl-heading-text { font-size: 40px !important; line-height: 1.02 !important; } /* Exceptions: statement / closing photo / hours stay larger or as set */ html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .MadeToMeasure .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .fl-node-54wiz0c8nxly .fl-heading-text, html body.integra-edu.home.redesign .HoursBand .v11-hours-num, html body.integra-edu.home.redesign .v11-hours-num { font-size: revert !important; } html body.integra-edu.home.redesign .HoursBand .v11-hours-num, html body.integra-edu.home.redesign .v11-hours-num { font-size: clamp(54px, 17vw, 120px) !important; } html body.integra-edu.redesign .StartYourJourneyWithIntegraSection .LargeHeader .fl-heading-text, html body.integra-edu.redesign .MadeToMeasure .LargeHeader .fl-heading-text, html body.integra-edu.home.redesign .fl-node-54wiz0c8nxly .fl-heading-text { font-size: clamp(38px, 10vw, 72px) !important; line-height: 1 !important; } /* [D] Level label gap on phones */ html body.integra-edu.redesign .ChooseYourJourneySection .fl-col .fl-module-rich-text:first-child .fl-rich-text > p, html body.about.redesign .ChooseYourJourneySection .fl-col .fl-module-rich-text:first-child .fl-rich-text > p { padding-bottom: 16px !important; font-size: 20px !important; } /* [D] Pathway / card rows — one card per view (scroll-snap) */ html body.integra-edu.redesign .ChooseYourJourneySection .fl-col-group, html body.integra-edu.home.redesign .ChooseYourJourneySection .fl-col-group.fl-node-taixdmvbgn9h, html body.about.redesign .ChooseYourJourneySection .fl-col-group, html body.integra-edu.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type, html body.integra-edu.intro.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type, html body.exercise-mechanics-lab.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type, html body.rts.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type, html body.private-tutoring.redesign .EmblemTitleSection .fl-col-group:last-of-type, html body.private-workshops.redesign .EmblemTitleSection .fl-col-group:last-of-type { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html body.integra-edu.redesign .ChooseYourJourneySection .fl-col-group::-webkit-scrollbar, html body.integra-edu.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type::-webkit-scrollbar { display: none; } html body.integra-edu.redesign .ChooseYourJourneySection .fl-col-group > .fl-col, html body.integra-edu.redesign .EmblemTitleSection.Timeline .fl-col-group:last-of-type > .fl-col, html body.private-tutoring.redesign .EmblemTitleSection .fl-col-group:last-of-type > .fl-col, html body.private-workshops.redesign .EmblemTitleSection .fl-col-group:last-of-type > .fl-col { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; } /* Form card padding on phones */ html body.integra-edu.redesign .gform_wrapper.gravity-theme, html body.integra-edu.redesign .gform_wrapper, html body.contact .gform_wrapper { padding: 24px 20px 26px !important; } html body.integra-edu.redesign .gform_wrapper .gform_button, html body.contact .gform_wrapper .gform_button, html body.contact .gform_wrapper input[type="submit"] { width: 100% !important; justify-content: flex-start !important; } } html body.integra-edu.redesign .fl-row:not(.StartYourJourneyWithIntegraSection):not(.MadeToMeasure):not(.NewsletterSection) .fl-module.LargeHeader .fl-heading-text span{ color:#9a9ca5!important } .EmblemTitleSection.Timeline#integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2){ flex-direction: column-reverse; display:flex!important; } body.redesign .EmblemTitleSection.Timeline .slick-slide{ max-width: calc(88vw - 0px); margin-left:20px; margin-right: 20px; } body.redesign .EmblemTitleSection.Timeline .slick-slide > .fl-col-content{ background-color: #fff; border-top: 4px solid #F77908; } body.redesign.intro .EmblemTitleSection.Timeline .slick-slide > .fl-col-content{ border-top-color: #f9c12a; } body.redesign.rts .EmblemTitleSection.Timeline .slick-slide > .fl-col-content{ border-top-color: #0f70b7ff; } @media(min-width: 901px){ body.redesign .EmblemTitleSection.Timeline#integraTimelineClone{ display:none!important; } } @media(max-width: 900px){ body.redesign .EmblemTitleSection.Timeline:not(#integraTimelineClone){ display:none!important; } } html body.contact.redesign.integra-edu #gform_wrapper_62 #field_62_2 .gfield_checkbox .gchoice:has(input:checked) label{ background:#fff7f0!important; border-color: #F77908!important; } html body.contact.redesign.integra-edu #gform_wrapper_62 .gfield#field_62_13{ padding:20px!important; } html body.contact.redesign.integra-edu .courses-row > a, html body.contact.redesign.integra-edu .fl-builder-content .ContactEnrolCopy.fl-rich-text a{ color:#F77908!important; } body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) .Weekday { display: block !important; font-style: normal !important; color: var(--v11-orange, #F77908) !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text strong { display: block !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.25 !important; margin-bottom: 12px !important; color: var(--v11-ink, #2a2d3a) !important; } body.redesign .EmblemTitleSection.Timeline#integraTimelineClone .fl-row-content > .fl-col-group:nth-of-type(2) .fl-rich-text p { font-size: 15.5px !important; line-height: 1.6 !important; color: #4a4d5a !important; } body.redesign .EmblemTitleSection.Timeline .slick-slider, body.redesign .EmblemTitleSection.Timeline .slick-navigation{ max-width: 100%; } @media (max-width: 900px){ html body.integra-edu.redesign header#customHeader #headerButtonContainer{ position: absolute!important; } .InnerContainer.slick-dotted > .slick-dots{ display:none!important; } } body.redesign #gform_62_validation_container{display:none!important} body.redesign #gform_submit_button_62:has( #gform_ajax_spinner_62), body.redesign #gform_submit_button_68:has( #gform_ajax_spinner_68), body.integra-edu.redesign .v11-ft__news-form:has( #gform_ajax_spinner_68) #gform_wrapper_68 #gform_submit_button_68, body.integra-edu.redesign .v11-ft__news-form:has( #gform_ajax_spinner_68) #gform_wrapper_68 .gform_button{ background-color: transparent!important; color:transparent!important; } body:has(#dashboardLoginContainer) footer{margin-top:120px!important} body.redesign .edd-discount-code-field-wrap{ flex-wrap: nowrap!important; } body.redesign .v11-ft__news-form .validation_message{ margin-bottom: 0!important; } body.integra-edu.redesign .ChooseYourJourneySection .fl-col-group.fl-node-km5y8h0be76x{ border-top: 1px solid #2a2d3a; } @media (min-width: 1440px){ .fl-node-izw039axg728 > .fl-module-content, .fl-node-kpof4a96hew5 > .fl-module-content, html body.integra-edu.redesign .HoursBand .fl-col-content > .fl-module:last-child, .fl-node-btwgj7sim4u9 > .fl-module-content, .fl-node-elfouabm6d1q, .fl-node-54wiz0c8nxly > .fl-module-content, .fl-node-zg3bk0cn2vds > .fl-module-content, .fl-node-bjk4e18xf9nz > .fl-module-content{ margin-left:0!important; margin-right: 0!important; } } html body.integra-edu.redesign .EmblemTitleSection .fl-col-group.fl-node-lusy304ctivj .fl-col-content > .fl-module:first-child{ margin-top:20px!important; } html body.integra-edu.redesign .HowWeWorkBoxesSection .redesign-price-section > h3.Price{ align-items: center; }