) Navbar and the page's

are siblings inside , and nothing makes the document fill the viewport. On a short page — e.g. class-registration when Stripe is not configured and the form is replaced by a one-line notice — the footer stopped ~370px down a ~790px viewport and left blank white below. Scoping the flex container to `body:has(main.page-fill)` means only pages that opt in are affected, and because BODY is the flex container the navbar's height is subtracted automatically — no calc() against a hardcoded nav height that would drift per breakpoint. =========================== */ body:has(main.page-fill) { display: flex; flex-direction: column; min-height: 100svh; } body:has(main.page-fill) main.page-fill { display: flex; flex: 1 0 auto; flex-direction: column; } /* The section that absorbs the slack; the footer after it keeps its own size. Centring matters as much as stretching: pinning the footer down without it left the short "payment not configured" notice clinging to the top with a tall void underneath. Centred, the leftover space sits above and below the message and reads as deliberate whitespace. `flex: 1 0 auto` (grow, never shrink) means the section can't end up smaller than its content, so when the real Stripe form renders and overflows, the centring is a no-op and nothing is clipped. */ body:has(main.page-fill) main.page-fill > .page-fill-grow { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; } /* =========================== TESTIMONIAL QUOTE SCROLLBAR The quote's scroll indicator is drawn by ScrollableQuote in TestimonialSlider.tsx as a real element, because the NATIVE bar cannot be made persistent: iOS Safari and Chrome's device emulation both use overlay scrollbars that only appear mid-gesture and ignore ::-webkit-scrollbar sizing. Hide the native bar at every width so the custom one is the single indicator and mobile, tablet and desktop all look the same. =========================== */ .testimonial-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .testimonial-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } /* =========================== NAV DROPDOWN EASING Used by the Programs / Workshops dropdown in Navbar.tsx. Defined here rather than as `ease-[cubic-bezier(...)]` because Tailwind was not emitting a rule for that arbitrary value — the class landed in the HTML with no CSS behind it, so the panel fell back to the browser default ease and looked abrupt. This curve decelerates hard at the end, which is what makes the open read as "settling" rather than just sliding. =========================== */ .nav-ease { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* =========================== MOBILE NAV SUBMENU ACCORDION Used by the Programs / Workshops submenus in the mobile menu. `grid-template-rows: 0fr -> 1fr` animates to the list's ACTUAL height. The previous approach transitioned max-height between 0 and 24rem, but the list is only ~230px: opening therefore reached full height in ~60% of the duration and then sat still, while closing spent its first ~40% collapsing empty space before anything appeared to move. That dead time is what made it feel jerky. It also clipped the list outright once a franchisee had enough programs to exceed 384px. Written as a plain class rather than `grid-rows-[0fr]` because Tailwind was not emitting a rule for that arbitrary value — the class reached the HTML with no CSS behind it, so nothing animated at all. =========================== */ .nav-accordion { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-accordion.is-open { grid-template-rows: 1fr; opacity: 1; } /* The 0fr row only collapses if the child hides its own overflow. */ .nav-accordion > * { overflow: hidden; } /* =========================== DESKTOP NAV DROPDOWN (Programs / Workshops card) Written as plain CSS because Tailwind in this project does not emit its arbitrary utilities — duration-[300ms], scale-[0.97], ease-[cubic-bezier(..)] and transition-[a,b,c] all reached the markup with no rule behind them, so transition-duration resolved to 0s and the card snapped open and shut. Only the stock steps (duration-150/200/300) exist. `visibility` is transitioned on purpose: per spec it holds the element visible for the whole fade-out and only then hides it, which also keeps the links out of the tab order while the card is closed. Open is slower than close (300ms vs 150ms) — a menu that lingers on the way out feels unresponsive. =========================== */ .nav-dropdown { transform-origin: top; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); /* The card itself unrolls downward. A fade plus a 0.97 scale was too small a move to read as the panel opening — only the staggered items looked animated, and the card behind them just appeared. clip-path reveals the real box without distorting the text the way scaleY would, and costs no layout change. The `round` matches rounded-bl/br-[20px] so the corners stay curved for the whole sweep instead of squaring off mid-animation. */ clip-path: inset(0 0 100% 0 round 0 0 20px 20px); pointer-events: none; will-change: opacity, transform, clip-path; transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1), /* Gentler curve than the fade's near-expo easing, which finished ~86% of the sweep in its first 60ms and so read as an instant pop. Ease-out cubic spreads the reveal across the full run so the card is actually seen opening — and closing. */ clip-path 220ms cubic-bezier(0.33, 1, 0.68, 1), visibility 150ms; } .nav-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 0 0 20px 20px); pointer-events: auto; transition-duration: 300ms; top: -30px; padding-top: 70px; } /* The visible card. It sits on a pseudo-element rather than on .nav-dropdown itself because the panel is pulled 30px up into the header (above) so its box bridges the gap between the trigger and the list — without that strip the pointer leaves .menu-item on the way down and the menu shuts. The strip has to keep taking pointer events but must not paint: a white box drawn across the header bar reads as a rectangle sitting under the next nav link, which is what it was doing to WORKSHOPS. Insetting the card by the same 60px as the open state's padding-top starts it exactly at the header's bottom edge. z-index is negative so it stays behind the list; .nav-dropdown's own z-index keeps the whole thing above the page either way. */ .nav-dropdown::before { content: ""; position: absolute; inset: 60px 0 0 0; background: #fff; border-radius: 20px; box-shadow: 0px 14px 14px #0000001f; z-index: -1; pointer-events: none; } .workshop-Coding.Camps .work-inner-content .gradient-bg { background: linear-gradient(79deg, #3b7e21, #95c11f) !important; } /* Someone who asked for less motion gets the panel with no sweep at all. */ @media (prefers-reduced-motion: reduce) { .nav-dropdown, .nav-dropdown.is-open { clip-path: none; transition-duration: 1ms; } } /* Each entry fades up behind the panel; the per-item delay is set inline. */ .nav-dropdown-item { opacity: 0; transform: translateY(-4px); transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-dropdown.is-open .nav-dropdown-item { opacity: 1; transform: translateY(0); } /* =========================== CLASS REGISTRATION - POLICY ROW ALIGNMENT The "I agree with the Privacy Policy and Terms of Use" row normally sits left-aligned so its checkbox shares a left edge with "Save my card details" in StripePaymentFields. When payer_id is "2" the whole coupon + payment block is hidden, so there is no second checkbox to line up with and the row was left stranded against the edge below a centred button. Centring it from md up makes it read as part of the button group. Mobile keeps the left edge: the label wraps to two lines there and centring would leave it ragged. Written as a plain class rather than `md:justify-center` because Tailwind in this project has repeatedly failed to emit utilities that are not already used elsewhere, leaving the class in the markup with no rule behind it. =========================== */ @media (min-width: 768px) { .policy-row-centered { justify-content: center; } } /* =========================== PAYMENT METHOD RADIOS The radios had no accent-color, so they rendered in the browser/OS default (green on the reporter's machine) instead of the brand blue. accent-color restyles the native control without replacing it, so keyboard focus, :checked semantics and screen-reader behaviour are all preserved. Scoped to .payment-box, which already wraps every payment radio. =========================== */ .payment-box input[type="radio"] { accent-color: #0097DC; } /* ========================================= PROGRAM FOOTER SLIDER ========================================= */ button:focus-visible, a:focus-visible { outline: none !important; } main.workshop-detail.workshop-Mechanics.Camps nav[aria-label="Back navigation"] a { color: #226b20 !important; } .workshop-detail.workshop-Golden.Age .bg-work { background: linear-gradient(15deg, #633f1e 37%, #ddbd48) !important; } @media (max-width: 767px) { .program-around-slider .swiper { padding-left: 0 !important; } .program-around-slider .swiper-wrapper { margin-left: 0 !important; } } /* ========================================= DESKTOP ANIMATION KEEPING YOUR EXISTING ANIMATION ========================================= */ @media (max-width: 767px) { @keyframes programSliderFade { from { opacity: 0;} to { opacity: 1;} } @keyframes programSliderImageZoom { from { opacity: 0.7; transform: scale(0.9);} to { opacity: 1; transform: scale(1);} } /* Main slide fade */ .program-slider-animation { animation: programSliderFade 0.9s ease-in-out; } /* Main robot/image zoom */ .program-slider-animation .program-main-image { animation: programSliderImageZoom 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes programSliderMobileNext { from { opacity: 0.8; transform: translateX(60px) scale(0.8); } 55% { opacity: 1; transform: translateX(12px) scale(0.94); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes programSliderMobilePrev { from { opacity: 0.8; transform: translateX(-60px) scale(0.8);} 55% { opacity: 1; transform: translateX(-12px) scale(0.94); } to { opacity: 1; transform: translateX(0) scale(1); } } /* Mobile slide transition */ @keyframes programSliderMobileNext { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes programSliderMobilePrev { from { transform: translateX(-100%); } to { transform: translateX(0); } } } @media (max-width: 767px) { .program-slider-animation.program-slider-next { animation: programSliderMobileNext 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .program-slider-animation.program-slider-prev { animation: programSliderMobilePrev 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* Remove the desktop fade and image zoom on mobile */ .program-slider-animation { opacity: 1; } .program-slider-animation .program-main-image { animation: none; } } /* ========================================= ACTIVITY SLIDER - SMALL → BIG ========================================= */ @media (max-width: 767px) { .activity-slide .activity-card, .testimonial-slide .testimonial-card { transform: scale(0.92); opacity: 0.8; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; will-change: transform; } .activity-slide.swiper-slide-active .activity-card, .testimonial-slide.swiper-slide-active .testimonial-card { transform: scale(1); opacity: 1; } } /* Mobile */ @media (max-width: 599px) { .activity-slide .activity-card, .testimonial-slide .testimonial-card { transform: scale(0.88); opacity: 0.75; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; } .activity-slide.swiper-slide-active .activity-card, .testimonial-slide.swiper-slide-active .testimonial-card { transform: scale(1); opacity: 1; } } /*=====================Program -page-slider============================*/ @media (max-width: 767px) { .mobile-slide-animation { width: 100%; height: 100%; will-change: transform, opacity; } .mobile-slide-next { animation: mobileSlideNext 500ms cubic-bezier(0.22, 1, 0.36, 1); } .mobile-slide-prev { animation: mobileSlidePrev 500ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes mobileSlideNext { 0% { transform: translateX(35%) scale(0.78); opacity: 0; } 25% { transform: translateX(20%) scale(0.84); opacity: 0.45; } 55% { transform: translateX(7%) scale(0.93); opacity: 0.8;} 80% { transform: translateX(1%) scale(0.98); opacity: 0.95; } 100% { transform: translateX(0) scale(1); opacity: 1;} } @keyframes mobileSlidePrev { 0% { transform: translateX(-35%) scale(0.78); opacity: 0; } 25% { transform: translateX(-20%) scale(0.84); opacity: 0.45;} 55% { transform: translateX(-7%) scale(0.93); opacity: 0.8;} 80% { transform: translateX(-1%) scale(0.98); opacity: 0.95;} 100% { transform: translateX(0) scale(1); opacity: 1; } } } /*-----------teacher slider-------------*/ @media (max-width: 767px) { .teacher-mobile-slide { overflow: visible; } .teacher-mobile-slide.swiper-slide-active { animation: teacherSlideIn 500ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center center; } @keyframes teacherSlideIn { 0% { transform: translateX(35%) scale(0.78); opacity: 0;} 25% { transform: translateX(20%) scale(0.84); opacity: 0.45; } 55% { transform: translateX(7%) scale(0.93); opacity: 0.8; } 80% { transform: translateX(1%) scale(0.98); opacity: 0.95; } 100% { transform: translateX(0) scale(1); opacity: 1; } } } /*===============Program-page-slider===============*/ @media (max-width: 767px) { .all-programs-swiper .swiper-slide { overflow: visible; } /* Let Swiper handle horizontal movement; animate only the card. */ .all-programs-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; } .all-programs-swiper .program-article { transform: scale(0.96); opacity: 0.85; transition: transform 500ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 500ms ease; will-change: transform, opacity; } .all-programs-swiper .swiper-slide-active .program-article { transform: scale(1); opacity: 1; } } @media (max-width: 1650px) { .teacher-lightbox .lightbox-image-container img { object-position: center 20%; } } /*-------------------------*/ @media (max-width: 767px) { .workshop-mobile-animation { will-change: transform, opacity; transform-origin: center center; } .workshop-mobile-next { animation: workshopSlideNext 500ms cubic-bezier(0.22, 1, 0.36, 1); } .workshop-mobile-prev { animation: workshopSlidePrev 500ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes workshopSlideNext { 0% { transform: translateX(35%) scale(0.78); opacity: 0;} 25% { transform: translateX(20%) scale(0.84); opacity: 0.45; } 55% { transform: translateX(7%) scale(0.93); opacity: 0.8;} 80% { transform: translateX(1%) scale(0.98); opacity: 0.95;} 100% { transform: translateX(0) scale(1); opacity: 1;} } @keyframes workshopSlidePrev { 0% { transform: translateX(-35%) scale(0.78); opacity: 0;} 25% { transform: translateX(-20%) scale(0.84); opacity: 0.45;} 55% {transform: translateX(-7%) scale(0.93); opacity: 0.8;} 80% { transform: translateX(-1%) scale(0.98); opacity: 0.95;} 100% { transform: translateX(0) scale(1); opacity: 1;} } } /*-----------All workshop-------------*/ /*=============== Workshop & Program mobile slider animation ===============*/ @media (max-width: 767px) { .all-programs-swiper { overflow: visible !important; } .all-programs-swiper .swiper-wrapper { align-items: flex-start; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; } .all-programs-swiper .swiper-slide { overflow: visible; } /* Animate the card content, not the Swiper slide position. */ .all-programs-swiper .workshop-animation-inner { width: 100%; transform: scale(0.96); opacity: 0.85; transform-origin: center center; transition: transform 500ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 500ms ease; will-change: transform, opacity; } .all-programs-swiper .swiper-slide-active .workshop-animation-inner { transform: scale(1); opacity: 1; } .all-programs-swiper .program-article { transform: scale(0.96); opacity: 0.85; transition: transform 500ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 500ms ease; will-change: transform, opacity; } .all-programs-swiper .swiper-slide-active .program-article { transform: scale(1); opacity: 1; } } /*================program card css==================*/ img.icon-logo { object-fit: cover; } .slider-card { position: relative; width: 100%; height: 210px; display: flex; align-items: center; justify-content: center; overflow: visible; } /* Keep the original card width */ .slider-card > .program-card-inner { width: 100%; flex-shrink: 0; } /* Mobile */ @media (max-width: 767px) { .slider-card { height: 210px; } .program-around-slider img.program-toy { width: 100%; height: 180px; object-fit: contain; } .program-around-slider img.program-toy[alt="Algoc"] { transform: scale(1.5); } } /* Tablet */ @media only screen and (min-width: 767px) and (max-width:998px) { .card_footer { padding: 6px 10px; } } @media (min-width: 768px) { .slider-card { width: 250px; height: 150px; } } /* Desktop */ @media (min-width: 1024px) { .slider-card { width: 295px; height: 215px; } } /* Large desktop */ @media (min-width: 1280px) { .slider-card { width: 320px; } } /*============workshop tab===================*/ .workshop-slide-viewport { position: relative; width: 100%; overflow: hidden; } .workshop-slide-track { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; overflow: hidden; } .workshop-slide-layer { grid-area: 1 / 1; width: 100%; min-width: 0; animation-duration: 500ms; animation-timing-function: ease-in-out; animation-fill-mode: both; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .workshop-slide-static { transform: translateX(0); } /* NEXT ARROW*/ .workshop-slide-out-next { animation-name: workshopExitLeft; } .workshop-slide-in-next { animation-name: workshopEnterRight; } /* PREVIOUS ARROW */ .workshop-slide-out-prev { animation-name: workshopExitRight; } .workshop-slide-in-prev { animation-name: workshopEnterLeft; } /* KEYFRAMES */ .workshop-slide-layer { grid-area: 1 / 1; width: 100%; min-width: 0; animation-duration: 600ms; animation-timing-function: ease-in-out; animation-fill-mode: both; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: center center; } .workshop-slide-static { transform: translateX(0) scale(1); } .workshop-slide-out-next { animation-name: workshopExitLeft; } .workshop-slide-in-next { animation-name: workshopEnterRight; } .workshop-slide-out-prev { animation-name: workshopExitRight; } .workshop-slide-in-prev { animation-name: workshopEnterLeft; } /* NEXT ANIMATION*/ @keyframes workshopExitLeft { from { transform: translateX(0) scale(1);} to { transform: translateX(-100%) scale(0.90);} } @keyframes workshopEnterRight { from { transform: translateX(100%) scale(0.90);} to { transform: translateX(0) scale(1); } } /* PREVIOUS ANIMATION */ @keyframes workshopExitRight { from {transform: translateX(0) scale(1);} to {transform: translateX(100%) scale(0.90);} } @keyframes workshopEnterLeft { from { transform: translateX(-100%) scale(0.90);} to {transform: translateX(0) scale(1);} } @media (min-width: 1023px) and (max-width: 1289px) { .teacher-block { margin-top: -180px; padding-top: 10px; } } @media only screen and (min-width: 1023px) and (max-width: 1090px) { .lang-translated .i-box { gap: 4px; width: 109px; } .lang-translated .i-heading { font-size: 20px; } .lang-translated .i-box:last-child p.i-text { width: 121px; } } /*==============lang=es=================*/ @media (min-width: 1200px) { .lang-translated .slider-card { width: 350px; } .lang-translated .card_footer span { font-size: 10px; } .lang-translated .card_footer>div { max-width: 190px; } .lang-translated .discover-card-left a span { font-size: 21px; line-height: 2; } .lang-translated .activity-card h3 { font-size: 32px; line-height: 40px; } .lang-translated .activity-content{ min-height: 210px; } .lang-translated .program-btn { width: max-content; } .lang-translated .wrksp-logo-box img { transform: none; } } @media only screen and (min-width: 640px) and (max-width: 767px) { .ws-why-section { padding-bottom: 0; } .all-workshop-section { padding-top: 90px; } .pro-objectives { margin-top: -170px; padding-top: 0; } .program-banner { min-height: 1040px; } .young-content-wrapper { margin-top: 60px; } .program-block img[alt="Robot"] { width: 30rem; } .robot-image { right: -90px; } h1.discover-title { margin-top: 80px; } .description-content { min-height: 60px; } .single-program-slide { width: 400px!important; max-width: 400px; } .inspire-young img[alt="Curved background for mobile"] { margin-top: 30px; } .young-content-wrapper { margin-top: 40px; } .young-content-wrapper p { min-height: auto; } .inspire-young img { transform: scale(1.1); } .subtitle-index { width: 100%; max-width: 100%; } .discover-slider-box { width: 100%; height: 290px; } .we-wre-section .slider-inner, .we-wre-section .slider-inner img { height: 320px;; } .thumbnail-gal { padding-top: 20px; } .main-slider-pro { height: 300px; } .discover-content h2 { position: absolute; } .content-objective-list { padding-top: 60px; } .discover { padding-bottom: 0; } .program-highlight-mob { right: 0; width: 380px; } div#AI-BRICKS_CHALLENGE .btn-AI { width: 340px; } .main-slider-pro img[alt="fan moving robot"], .main-slider-pro img[alt="Goal runner"], .main-slider-pro img[alt="Illustrator"] { transform: scale(1.2); } .main-slider-pro img[alt="Trash collector"], .main-slider-pro img[alt="Fun coding"] { transform: scale(1.4); } main#program-SMARTIVO .main-slider-pro img { transform: scale(1.4); } .main-slider-pro img[alt="Smartivo Sketching"] { transform: none; } main#program-BRICKS_CHALLENGE .main-slider-pro img { transform: scale(1.2); } .main-slider-pro img[alt="Cards Dealer"] { transform: scale(1.3); } } @media only screen and (min-width: 700px) and (max-width: 767px) { .young-content-wrapper { margin-top: 70px; } h1.discover-title { margin-top: 100px; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .activity-slide .activity-card, .testimonial-slide .testimonial-card { opacity: 1; transform: none; } .testimonial-card { min-width:90%!important } .testimonial-outer-wrapper h2 { margin-bottom: 20px; } .we-wre-section a, .globe-content a, .our-approch a, .program-btn a { max-width: fit-content !important; } .globe-content { padding-top: 20px; } .approch-img { width: 471px; } .mobile-main-img img[alt="Card shuffler"], .mobile-main-img img[alt="Bird's Migration"], .mobile-main-img img[alt="Zombie"],.mobile-main-img img[alt="Accordion Robot"] { transform: none; } .program-banner-mob h1 { display: flex; gap: 10px; } section#program-all button { padding: 10px 40px; width: fit-content; } section#program-all { min-height: 960px; } .inspiring-block button { width: fit-content; } .program-discription { height: 100%; min-height: 110px; } .Footer button { width: 250px; } } @media only screen and (min-width: 540px) and (max-width: 640px) { .pro-objectives { margin-top: -113px; } } @media only screen and (min-width:500px) and (max-width: 640px) { .inspire-young img[alt="Curved background for mobile"] { margin-top: 30px; } .young-content-wrapper { margin-top: 40px; } .young-content-wrapper p { min-height: auto; } .inspire-young img { transform: scale(1.1); } .subtitle-index { width: 100%; max-width: 100%; } .join-box button { margin-top: 10px; } .discover-slider-box { width: 100%; height: 300px; } h1.discover-title { margin-top: 0; } .testimonial-outer-wrapper, .testimonial-outer-wrapper > section { min-height: 1090px !important; } .Footer button { width: 250px; } .description-content { min-height: 100px; } .single-program-slide { width: 360px!important; max-width: 360px; } .we-wre-section a, .globe-content a, .our-approch a, .program-btn a { max-width: fit-content; } } @media only screen and (min-width: 500px) and (max-width: 580px) { .testimonial-outer-wrapper, .testimonial-outer-wrapper > section { min-height: 1180px!important; } } @media only screen and (min-width: 460px) and (max-width: 500px) { .testimonial-outer-wrapper, .testimonial-outer-wrapper > section { min-height: 1300px !important; } div#home-from div#registration-form { margin-top: -400px; } } @media (max-width: 340px) { .program-around-slider .swiper { padding-left: 0 !important; padding-right: 0!important; } .card_footer span { line-height: 12px; font-size: 10px; } .content-slider-left { padding-left: 0; } .gain-box h3 { font-size: 16px!important; } .gain-box h3 { font-size: 16px!important; } } /* ========================================================================= 640-767px - workshops list and workshop detail ========================================================================= This is Tailwind's `sm` range, which on this project carries layout meant for small TABLETS held upright: a -120px section pull to tuck a tall card under a wave, a -600px pull on the workshop list, 12-column grids, 480/500px text caps, 100%-wide buttons. A phone turned sideways is about 740px wide, so it gets all of it, and on a short wide viewport those rules overlap, stretch and clip. Every rule below is driven by WIDTH, not height - each one undoes an `sm:` or `min-width: 638px` declaration. The block was first written as `orientation: landscape` with `max-height: 540px`, which meant a browser window 740px wide but 560px tall fell straight back to the broken layout. Keyed to the width band alone, it holds at any height and in either orientation; below 640px and from `md` up nothing here applies. ========================================================================= */ @media (min-width: 640px) and (max-width: 767px) { .programs-detail .xlider { margin-top: 100px; } /* Hero card sat straight on the next section's pattern, leaving two blue stubs beside it. The portrait value leaves the blue band intact. */ .ws-why-section { margin-top: -90px; } /* `sm:-mt-150` pulled the workshop list 600px up, over the tab image. */ .all-workshop-section { margin-top: 0; } /* Below `md` these are `w-full`, which is fine on a 390px phone and reads as a stretched bar at 740px. */ .workshop-learn-more { width: 200px; } .btn-work-shop { width: auto; } /* Both card photos ran to the card's edge, losing the white margin the rounded corners need. */ .workshop-image, .work-inner-image { width: 98%; margin-left: auto; margin-right: auto; right: 0; margin-bottom: 7px; } /* 6 of 12 columns is ~350px here - one character short of fitting "WORKSHOP OBJECTIVES" on a line, so every heading wrapped. */ .objective-text { grid-column: span 7 / span 7; } .xlider { grid-column: span 5 / span 5; } .workshop-cta-row { margin-top: 64px; } /* The heading landed on the wave in the background image. */ .kid-discover-section { padding-top: 160px; padding-bottom: 80px; } /* 220px above is set for 638-768px tablets; at this height it is a gap. */ .work-form { margin-top: 120px; } /* `sm:pt-[140px]` clears a tablet's taller background art above the Q&A heading; portrait phones use 0 and landscape needs the same. */ .head-wrapper-top { padding-top: 0; } /* 90px in a ribbon that is 250px tall here reads as a badge rather than the brand mark. 140px is what the programs detail page already gives its ribbon icon at these widths (.logo-wrap-mobile, min-width 525px); both pages share the .mob-ribbon panel, so they now match. */ .mob-ribbon-logo { width: 140px; height: 140px; } /* Same cap on the workshop list cards: `max-w-[480px]` against a 658px column, so the text stopped well short of the card's edge. */ .workshop-description { max-width: none; } /* `max-w-[500px]` only bites in this band: a portrait phone's card is narrower than the cap and from `md` up the card reserves its right side for the photo. Here the card is ~670px, so the text stopped 170px short of its own edge. */ .work-desc { max-width: none; } /* The band between the hero photo and "Workshop objectives" showed two stacked waves with a grey strip between them. Below 768px this section is pulled 85px up over the hero and painted with Program-Objectives-bg-1.png (`0 0 / cover`), a tall portrait artwork whose curved top is meant to sit over the hero's own curve. On a phone `cover` scales it by height and the two curves coincide; at 640-767px it scales by width, its curve grows and drifts below the hero's, and both show. Dropping the artwork here leaves the hero's single curve - what a portrait phone shows - and 80px of overlap with 24px of padding puts the heading 95px under the photo, against 94px in portrait. */ .work-objectives { margin-top: -140px; padding-top: 100px; } .workshop-banner { padding-bottom: 96px; } /* The robot sat 200px wide in a ~295px column, leaving a bare rectangle between it and the page edge. Filling the column uses that space and balances the taller ribbon logo. */ .workshop-highlight-mob, .workshop-highlight-mob img { width: 240px; height: 170px; } .workshop-highlight-mob { margin-left: auto; margin-right: 0; } /* Several of these are portrait artwork (658x810, 739x859), so object-contain letterboxes them and centres the result, putting white back at the right edge. Anchoring right removes it. */ .workshop-highlight-mob img { object-position: right center; } /* "BOOK MECHANICS CAMP!" broke onto two lines inside a 45px-tall pill. The column is 289px and the button spends 105px of it on the icon, the gap and 30px of padding either side, leaving 184px for a label that needs ~220px at 16px. Trimming the chrome and the type gives the longest label on this page ("BOOK BIRTHDAY PARTIES!") about 30px to spare, and nowrap keeps it on one line. */ .workshop-action-btn { font-size: 14px; gap: 6px; padding-left: 16px; padding-right: 16px; white-space: nowrap; } .workshop-action-btn img { height: 24px; } /* `max-[767px]:pt-[360px]` leaves an empty band between the last accordion row and the teacher photo: the form pulls its own content up less here (`sm:mt-[-160px]`) than on a portrait phone (`mt-[-300px]`), so the padding is no longer cancelled out. 240px closes the band without the form's background art riding up over the accordion. */ #footerForm { padding-top: 240px; } } /* "Discover workshops" in the Why-Workshops section. A `max-width: 767px` rule above gives .work-btn `width: 100%`. On a 390px phone that is a normal full-width CTA, but the same rule runs up to 767px, where the button becomes a 700px bar across the column - the label is only 263px wide, which is what every size from `md` up already renders. Phones keep the full-width button; from 500px it hugs its label, so the handover to the `md` layout is seamless instead of jumping from 708px to 263px. */ @media (min-width: 500px) and (max-width: 767px) { .work-btn { width: fit-content; } } /* iOS-friendly mobile program slider */ @media (max-width: 767px) { .all-programs-swiper { width: 100%; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .all-programs-swiper .swiper-wrapper { align-items: stretch; will-change: transform; } .all-programs-swiper .swiper-slide { box-sizing: border-box; min-width: 0; height: auto; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .all-programs-swiper .program-article { width: 100%; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .all-programs-swiper img { -webkit-user-drag: none; } } /*==========lightbox-image============*/ @media only screen and (min-width: 500px) and (max-width: 767px) { .lightbox-image-container { width: 420px; margin: 0 auto; } .lightbox-image-container img { width: 100%; object-fit: cover; } } @media (max-width: 500px) { .lightbox-image-container { width: 100%; height: 220px; } .lightbox-image-container img { width: 100%; object-fit: cover; } } @media only screen and (min-width: 400px) and (max-width: 500px) { .about-content-right { margin-bottom: 0; min-height: 108px; } article#Algoc { margin-bottom: 50px; } } /*==============Lang="arabic"================*/ .lang-arabic .nav-view { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } .lang-arabic .program-robot-image { right: auto; left: -100px; transform: scaleX(-1); } .lang-arabic .program-txt { text-align: right; } .lang-arabic img[alt="Join Free Class background (desktop)"] { transform: scaleX(-1); } .lang-arabic .join-box p { text-align: right; } .lang-arabic .join-free-class-section { height: 900px; } .lang-arabic .discover-navigaton { margin-left: auto; margin-right: 0; right: 0; flex-direction: row-reverse; justify-content: flex-end; } .lang-arabic .client-c1 h2 { text-align:right; } .lang-arabic .testimonial-track { margin-inline: 0; } .lang-arabic .program-card-top { position: relative; background-image: none !important; } .lang-arabic .program-card-top:before { content: ""; position: absolute; inset: 0px; background-image: url("https://yefranchisees.b-cdn.net/frontend/mask_group.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; transform: scaleX(-1); z-index: 0; right: -68px; bottom: -7px; } .lang-arabic .around-logo:before { display: none; } .lang-arabic .slider-card.is-inactive .program-card-top:before { inset: 0 -105px -7px 0; } .lang-arabic .program-card-top.Algoc{ background-image: linear-gradient(rgb(220, 75, 99) 0%, rgb(232, 145, 99) 100%)!important; } .lang-arabic .discover-carousel { flex-direction: row-reverse; } .lang-arabic .workshop-home-slider { flex-direction: row-reverse; } .lang-arabic .testimonial-left-arrow { width: 30px; } .lang-arabic .testimonial-icons-row { padding: 0; } .lang-arabic .footer-slider-arrows { flex-direction: row-reverse; } .lang-arabic .contact-info h3 { text-align: right; } .lang-arabic .testimonial { flex-direction: row-reverse; } .lang-arabic .program-age-range { flex-direction: row-reverse; } .lang-arabic input[type="tel"] { text-align: right; } .lang-arabic .globe-container { right: auto; left: -27%; } .lang-arabic .approch-img { right: unset; left: 0; transform: scaleX(-1); } .lang-arabic .our-approch p { margin-right: 0; margin-left: 50px; } .lang-arabic .gain-box .thumbnail-slider { margin-left: 30px; margin-right: auto; } .lang-arabic .about-slider-arrow { flex-direction: row-reverse; } .lang-arabic .a-sliders .thumbnail-slider::after { background: linear-gradient(97deg, rgb(0 61 99), rgba(0, 0, 0, 0)); } .lang-arabic .a-sliders .thumbnail-slider::before { background: linear-gradient(272deg, rgb(0 91 145), rgba(0, 0, 0, 0)); } .lang-arabic .globe-container { right: auto; left: -27%; } .lang-arabic .approch-img { right: unset; left: 0; transform: scaleX(-1); } .lang-arabic .our-approch p { margin-right: 0; margin-left: 50px; } .lang-arabic .gain-box .thumbnail-slider { margin-left: 30px; margin-right: auto; } .lang-arabic .about-slider-arrow { flex-direction: row-reverse; } .lang-arabic .a-sliders .thumbnail-slider::after { background: linear-gradient(97deg, rgb(0 61 99), rgba(0, 0, 0, 0)); } .lang-arabic .a-sliders .thumbnail-slider::before { background: linear-gradient(272deg, rgb(0 91 145), rgba(0, 0, 0, 0)); } .lang-arabic .Experience-badge { right: 0; } .lang-arabic .Experience-badge img { transform: scale(-1); } .lang-arabic .Experience-badge>div { flex-direction: row-reverse; } .lang-arabic .teacher-slider-container { flex-direction: row-reverse; } .lang-arabic .card-image { right: auto; left: 20px; } .lang-arabic .ribbon-container>div { right: 20px; left: auto; } @media (min-width: 96rem) { .lang-arabic .all-programs-content-box { padding-right: 0; padding-left: 550px; } } /* Workshop detail "Book ..." button, every language except English. It is `md:w-max` with a fixed h-[45px] / lg:h-[60px], sized for English labels. Translated labels are longer: "¡RESERVA UN CAMPAMENTO DE MECÁNICA!" ran 66-134px off the right edge of the screen on desktop, and on phones wrapped to two lines inside the fixed 45px pill. Here the button stays inside its column and grows taller instead; the minimum heights match the fixed ones, so a label that fits on one line looks exactly as before. Also overrides the 640-767px `white-space: nowrap` above, which assumes English lengths. */ html:not(:lang(en)) .workshop-action-btn { height: auto; min-height: 45px; max-width: 100%; white-space: normal; padding-top: 8px; padding-bottom: 8px; } @media (min-width: 1024px) { html:not(:lang(en)) .workshop-action-btn { min-height: 60px; } } /* Same button, every language except English: keep it BESIDE the text, as in English, but give a translated label room to stay on one line. The right column is only 287-407px, and "¡RESERVA UN CAMPAMENTO DE MECÁNICA!" needs ~640px at English sizes, so it wrapped into a 3-line pill. From 1024px the row splits 6/6 instead of 8/4, the icon gap and side padding are trimmed, and the label is one step smaller (16px / 22px instead of 18px / 24px). Checked one line at 820-1920px in Spanish and French; anything longer still falls back to wrapping inside the pill via the rule above. */ html:not(:lang(en)) .workshop-action-btn { gap: 12px; padding-left: 24px; padding-right: 24px; } @media (min-width: 1024px) { html:not(:lang(en)) .workshop-cta-row > div:first-child, html:not(:lang(en)) .workshop-cta-row > div:last-child { grid-column: span 6 / span 6; } html:not(:lang(en)) .workshop-action-btn { font-size: 16px; } } @media (min-width: 1280px) { html:not(:lang(en)) .workshop-action-btn { font-size: 22px; } } /* Same button on phones, every language except English: it is full width, so one line depends on the label size. 14px (the size English already uses on wide phones) with tighter padding keeps French on one line from 360px and Spanish from 390px; on the narrowest phones one more step (13px) brings "¡RESERVA UN CAMPAMENTO DE MECÁNICA!" onto one line too. */ @media (max-width: 767px) { html:not(:lang(en)) .workshop-action-btn { font-size: 14px; gap: 8px; padding-left: 16px; padding-right: 16px; } html:not(:lang(en)) .workshop-action-btn img { height: 22px; } } @media (max-width: 389px) { html:not(:lang(en)) .workshop-action-btn { font-size: 13px; gap: 6px; padding-left: 12px; padding-right: 12px; } } /* Workshop detail, phone, "Created for / Duration" row, every language except English. English stacks "4 hours per day" under the number through rules keyed to its own title (.workshop-Mechanics.Camps .mob-durations), which a translated title switches off - so in French "4 heures par jour" squeezed in beside "6 jours" and wrapped into "6 jours jour". And a translated label such as "Conçu pour les enfants" takes two lines where "Durée" takes one, so the two values started at different heights. Here the per-day text drops below the number only when it doesn't fit, and both columns share the label row (subgrid), so the longer label sets the height and the values line up. */ @media (max-width: 767px) { html:not(:lang(en)) .mob-durations { flex-wrap: wrap; row-gap: 2px; } html:not(:lang(en)) .grid:has(> .wokshop-left) { row-gap: 0; } html:not(:lang(en)) .wokshop-left, html:not(:lang(en)) .wokshop-right { grid-row: span 2; display: grid; grid-template-rows: subgrid; align-content: start; } html:not(:lang(en)) .wokshop-left > div, html:not(:lang(en)) .wokshop-right > div { align-self: start; } } /* ========================================================================= Workshops list - every language except English ========================================================================= */ /* Per-day text: stack it under the number only when it is long (the duration-long class, set in AllWorkshop.tsx for text over 10 characters). This replaces a `.lang-translated .desk-duration` rule that stacked EVERY card, which put "min" under "120" on the Birthday, Pro and Golden Age ribbons. English keeps its own title-based stacking rules. */ html:not(:lang(en)) .desk-duration.duration-long, html:not(:lang(en)) .mob-duration.duration-long { flex-direction: column; align-items: flex-start; gap: 0; } /* Hero stats ("Reconocimiento", "Reconnaissance"): a single long word can't wrap, so it ran 10-86px past its box and the white card from 768px up. The text column may now shrink and break the word, and the size steps down a little below 1440px. */ html:not(:lang(en)) .ws-icon-box > div { min-width: 0; } html:not(:lang(en)) .ws-icon-box h3 { hyphens: auto; overflow-wrap: anywhere; } @media (min-width: 768px) and (max-width: 1023px) { html:not(:lang(en)) .ws-icon-box h3 { font-size: 16px; } /* "VER TODOS LOS TALLERES" made the button 256px, and the stats row is right-aligned at a fixed width, so the first stat icon sat 11px on top of the button. One size smaller keeps them apart. */ html:not(:lang(en)) div:has(> .workshop-right-icon) > a, html:not(:lang(en)) div:has(> .workshop-right-icon) > a span { font-size: 14px; } /* "CAMPAMENTOS DE PROGRAMACIÓN" took 3 lines in a 239px column. Scoped to the title by class: a plain `.workshop-content h3` also caught the subtitle (also an h3) and enlarged it, which pushed the title above the card. The subtitle steps down instead, so the stack fits. */ html:not(:lang(en)) .workshop-content h3.workshop-card-title { font-size: 22px; } html:not(:lang(en)) .workshop-content h3.workshop-card-subtitle { font-size: 15px; } } @media (min-width: 1024px) and (max-width: 1279px) { html:not(:lang(en)) .ws-icon-box h3 { font-size: 16px; } html:not(:lang(en)) .workshop-content h3.workshop-card-subtitle { font-size: 16px; } } @media (min-width: 1280px) and (max-width: 1439px) { html:not(:lang(en)) .ws-icon-box h3 { font-size: 17px; } } /* Phone cards: "Conçu pour les enfants" / "Creado Para Niños" wrapped to two lines in a fixed 40% column while "Durée" took one. The label stays on one line and the column sizes to it; the per-day text under the number is one step smaller so it still fits beside on 360px phones. */ @media (max-width: 767px) { html:not(:lang(en)) .left-box { width: auto; flex: 0 0 auto; margin-right: 0; } html:not(:lang(en)) .left-box > p { white-space: nowrap; font-size: 14px; } html:not(:lang(en)) .mob-duration.duration-long .time2 { font-size: 14px; white-space: nowrap; } } /*=======================*/ .lang-translated .about-content-right { margin-bottom: 40px; min-height: 130px; } .lang-translated .inspiring-block button { font-size: 22px; } .lang-translated .ribbon_bg >div { gap: 6px; } .lang-translated .ribbon_bg >div p { white-space: normal!important; } .lang-translated span.lessons { font-size: 13px; } .lang-translated .btn-AI { width: 100%; } .lang-translated .registration-form h4 { font-size: 16px; } @media (min-width:1280px) { .lang-translated .teacher-block { margin-top: -400px; } } @media (min-width: 767px) and (max-width: 1030px) { .lang-translated .discover-card-left { gap: 16px; } .lang-translated .features-tabs>div { min-width: 170px; } .lang-translated .inspire-young .nav-view { padding-bottom: 40px; } .lang-translated .btn-AI { width: 100%; font-size: 15px; } .lang-translated .discription-program { font-size: 13px; line-height: 23px; margin-top: 10px; } .lang-translated .hero-heading { max-width: 460px!important; } .lang-translated .home-hero { height: 570px; padding-top: 40px; } .lang-translated p.text-xl.subtitle-index { font-size: 20px !important; } } @media (min-width: 767px) and (max-width: 900px) { .lang-translated .teacher-block { margin-top: -100px; } } @media (min-width: 767px) and (max-width: 800px) { .lang-translated .program-article h3 span { font-size: 15px; line-height: 20px; } .lang-translated article#Algoc { margin-bottom: 50px; } .lang-translated .about-slider-arrow { margin-bottom: 0; margin-top: 0; } .lang-translated div#form-heading h2 { font-size: 29px!important; } .lang-translated .inspiring-block { height: 640px; } } @media (max-width: 767px) { .lang-translated .our-approch a { gap: 4px; } .lang-translated .our-approch a span { font-size: 15px; } .lang-translated .program-banner-mob h1 { display: flex; column-gap: 10px; flex-wrap: wrap; } .lang-translated .about-content-right { min-height: 120px !important; margin-bottom: 0 !important; } .lang-translated .features-tabs>div { min-width: 140px; } .lang-translated .discover-tab-btn button { text-transform: capitalize!important; min-width: 140px!important; } } @media (min-width: 420px) and (max-width: 600px) { .lang-translated .gain-box { min-height: 840px; } } @media (max-width:430px) { .lang-code-fr .our-approch a span { font-size: 12.5px; } .lang-code-fr img[alt="Gear"] { width: 17px; height: 17px; } .lang-translated .Descover-container a { padding-left: 10px !important; padding-right: 10px !important; } .lang-translated .Descover-container a span { font-size: 15px; } } @media (max-width: 390px) { .lang-translated .all-program-btn span { font-size: 15px!important; } .lang-translated .about-content-right { min-height: 130px !important; margin-bottom: 0 !important; } .lang-translated .inspiring-block button { font-size: 15px!important; } .lang-translated .programe-all-block .all-program-btn { padding: 16px 10px; } .lang-translated .programe-all-block .all-program-btn span { padding-left: 30px; position: relative; font-size: 16px; } .lang-translated .btn-AI { gap: 6px; font-size: 13px; } .lang-translated .mobile-main-img img[alt="robot ventilador"] { transform: scale(0.9); } .lang-translated .pro-grid-inner > div { white-space: normal; width: 116px; } .lang-translated .pro-grid-inner img[alt=Recognition], .lang-translated .pro-grid-inner img { width: 25px; height: 25px; } .lang-translated .pro-objectives a { padding-left: 10px; padding-right: 10px; } } @media (max-width: 370px) { .lang-translated .our-approch a span { font-size: 14px; } } /*=======================*/ .lang-translated .about-content-right { min-height: 150px; margin-bottom: 24px; } .lang-translated .inspiring-block button { font-size: 22px; } .lang-translated .ribbon_bg >div { gap: 6px; } .lang-translated .ribbon_bg >div p { white-space: normal!important; } .lang-translated span.lessons { font-size: 13px; } .lang-translated .btn-AI { width: 100%; } .lang-translated .registration-form h4 { font-size: 16px; } .lang-translated main.workshop-detail.workshop-Campamentos.de.Mecánica nav[aria-label="Back navigation"] a, .lang-translated main.workshop-detail.workshop-Camps.de.mécanique nav[aria-label="Back navigation"] a { color: rgb(34, 107, 32) !important; } @media (min-width: 1200px) { .lang-code-fr section#program-all { min-height: 1060px; } } @media (min-width: 1100px) and (max-width: 1200px) { .lang-translated .teacher-block { margin-top: -150px; } } @media (min-width: 767px) and (max-width: 1200px) { .lang-translated article:last-child { margin-bottom: 50px; } } @media (min-width: 900px) and (max-width: 1100px) { .lang-translated .teacher-block { margin-top: -100px; } } @media (min-width: 1024px) and (max-width: 1080px) { section#program-all { min-height: 1060px; } } @media (min-width: 1040px) and (max-width: 1160px) { .lang-translated .i-box { width: 128px; } .lang-translated .i-box:last-child p.i-text { width: 100%; } } @media (min-width: 960px) and (max-width: 1030px) { .lang-translated .i-box { width: 110px; } } @media (min-width: 767px) and (max-width: 900px) { .lang-translated .teacher-block { margin-top: -100px; } .lang-translated .inspiring-block button { font-size: 15px; } .lang-translated .inspiring-block { height: 600px; } .lang-translated .i-box:last-child { width: 110px; } .lang-translated .program-btn a span { font-size: 13px; } } @media (min-width: 767px) and (max-width: 800px) { .lang-translated .banner-bottom-content { gap: 8px; } .lang-translated .inspiring-block button { font-size: 14px; } .lang-translated .program-article h3 span { font-size: 15px; line-height: 20px; } .lang-translated article#Algoc { margin-bottom: 50px; } } @media (max-width: 767px) { .lang-translated .our-approch a { gap: 4px; } .lang-translated .our-approch a span { font-size: 15px; } .lang-translated .program-banner-mob h1 { display: flex; column-gap: 10px; flex-wrap: wrap; } .lang-translated .inspiring-block button { font-size: 16px; } } @media (min-width: 420px) and (max-width: 600px) { .lang-translated .gain-box { min-height: 840px; } } @media (max-width:430px) { .lang-translated .program-discription { min-height: 270px !important; } .lang-code-fr .our-approch a span { font-size: 12.5px; } .lang-code-fr img[alt="Gear"] { width: 17px; height: 17px; } } @media (max-width: 390px) { .lang-translated .inspiring-block button { font-size: 14px!important; } .lang-translated .programe-all-block .all-program-btn { padding: 16px 10px; } .lang-translated .programe-all-block .all-program-btn span { padding-left: 30px; position: relative; font-size: 16px; } .lang-translated .btn-AI { gap: 6px; font-size: 13px; } } @media (max-width: 370px) { .lang-translated .our-approch a span { font-size: 14px; } } /* Phone card header: the 120px ribbon is `overflow-hidden` with no flex-shrink: 0, so a long unbreakable title word ("PROGRAMACIÓN", "D'ANNIVERSAIRE") squeezed it to as little as 73px and the white logo circle touched both edges. The ribbon now keeps its width, and the title steps down to 22px (breaking a word only if it still can't fit). */ @media (max-width: 767px) { html:not(:lang(en)) .workshop-mob-ribbon { flex-shrink: 0; } html:not(:lang(en)) .workshop-mob-title { font-size: 22px; hyphens: auto; overflow-wrap: anywhere; } } /* Workshops list logo, 1024-1199px: English scales the Mechanics Camps logo to 1.05 (the others 1.2) via its alt text, which is the English title. A translated title misses that rule, so the logo got 1.2 and its wording was cut by the circle. Matching on the logo FILE works in any language. (From 1200px an existing .lang-translated rule turns the scaling off.) */ @media (min-width: 1024px) and (max-width: 1199px) { html:not(:lang(en)) .wrksp-logo-box img[src*="logo_mechanics_camps"] { transform: scale(1.05); } } /* Workshop detail hero, tablet: the card is a fixed 320px tall and a translated "Book" label needs two lines, so the button ran 7-29px past the bottom of the card. The subtitle steps down a size and the description's scroll box is a little shorter (its text still scrolls), which makes room. */ @media (min-width: 768px) and (max-width: 1199px) { html:not(:lang(en)) .content-div > h1 + p { font-size: 15px; } html:not(:lang(en)) .work-desc { height: 72px; } } /* Home "join a free trial class": the heading, subtitle and button sit on the white part of a background photo. Translated headings are longer than "JOIN A FREE TRIAL CLASS", so at 1024px+ they ran 11-128px into the photo (English keeps ~50px clear). Every language except English: the heading gets a narrower cap, plus a smaller size and button label at 1024-1279px, where the white area is narrowest. */ @media (min-width: 1024px) and (max-width: 1279px) { html:not(:lang(en)) h1.hh { font-size: 40px; max-width: 470px; } html:not(:lang(en)) .join-box button span { font-size: 20px; } } @media (min-width: 1280px) { html:not(:lang(en)) h1.hh { max-width: 600px; } } @media (min-width: 1280px) and (max-width: 1439px) { html:not(:lang(en)) h1.hh { max-width: 560px; } } /* Phones, every language except English: - Workshops list: with the one-line "Creado Para Niños" label, the row's `max-[364px]:gap-1` (4px) let the two columns run together at 360px. - Workshop detail: long per-day text ("4 horas al día") goes under the number, as English does with its title-based rules (duration-long is set in workshops/[id]/page.tsx for text over 10 characters). - Workshop detail: a long title word ("PROGRAMACIÓN") ran past the card at 30px in the 7/12 column beside the ribbon. */ @media (max-width: 767px) { html:not(:lang(en)) div:has(> .left-box) { gap: 12px; } html:not(:lang(en)) .mob-durations.duration-long { flex-direction: column; align-items: flex-start; gap: 0; } html:not(:lang(en)) [id^="Mobile-ribbon-"] .col-span-7 > p:first-child { font-size: 22px; hyphens: auto; overflow-wrap: anywhere; } } /* Program cards (home slider, programs page), every language except English: the grey bar fits two skill labels (each capped at 100px) beside a "More info" button that never wraps. Translated labels and button text are longer ("Fundamentos de Programación", "MÁS INFORMACIÓN"), so the second label slid up to 22px under the button and text spilled up to 20px past the card. Here the labels share the space left of the button and break long words with a hyphen, and the button may wrap to two lines - nothing overlaps or spills. Icons and text keep their English size. */ html:not(:lang(en)) .card_footer { gap: 6px; } html:not(:lang(en)) .card_footer > div:first-child { flex: 1 1 auto; min-width: 0; max-width: none; } html:not(:lang(en)) .card_footer > div:first-child > div { flex: 1 1 0; min-width: 0; max-width: none; } html:not(:lang(en)) .card_footer > div:first-child span { hyphens: auto; overflow-wrap: break-word; min-width: 0; } html:not(:lang(en)) .card_footer > a, html:not(:lang(en)) .card_footer > button { flex-shrink: 0; white-space: normal; max-width: 92px; text-align: center; line-height: 1.15; }