diff --git a/404.html b/404.html index 314a436a3..551d3cead 100644 --- a/404.html +++ b/404.html @@ -13,7 +13,8 @@ const redirectMap = new Map( [ - ['ae_ar', '/'], + ['ara' ,'/' ], + ['ae_ar', '/ara/'], ['ae_en', '/'], ['africa', '/'], ['ar', '/es/'], @@ -40,7 +41,7 @@ ['de-DE','/de/'], ['ec', '/es/'], ['ee', '/'], - ['eg_ar', '/'], + ['eg_ar', '/ara/'], ['eg_en', '/'], ['es-ES', '/es/'], ['fi-FI', '/fi/'], @@ -61,7 +62,7 @@ ['it-IT', '/it/'], ['ja-JP', '/jp/'], ['ko-KR', '/kr/'], - ['kw_ar', '/'], + ['kw_ar', '/ara/'], ['kw_en', '/'], ['la', '/es/'], ['lt', '/'], @@ -69,7 +70,7 @@ ['lu_de', '/de/'], ['lu_fr', '/fr/'], ['lv', '/'], - ['mena_ar', '/'], + ['mena_ar', '/ara/'], ['mena_en', '/'], ['mt', '/'], ['mx', '/es/'], @@ -86,11 +87,11 @@ ['pr', '/es/'], ['pt', '/br/'], ['pt-BR', '/br/'], - ['qa_ar', '/'], + ['qa_ar', '/ara/'], ['qa_en', '/'], ['ro', '/'], ['ru', '/'], - ['sa_ar', '/'], + ['sa_ar', '/ara/'], ['sa_en', '/'], ['sea', '/'], ['sg', '/'], diff --git a/express/code/blocks/ax-columns/ax-columns.css b/express/code/blocks/ax-columns/ax-columns.css index bca7533ee..e36547bc9 100644 --- a/express/code/blocks/ax-columns/ax-columns.css +++ b/express/code/blocks/ax-columns/ax-columns.css @@ -117,7 +117,7 @@ main .section .ax-columns.enterprise .column h2 { } .section:not(:first-child):not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing, -.l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing) .ax-columns:first-child { +.l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing) .ax-columns:first-child:not(.v2) { padding-top: 60px; } @@ -132,6 +132,36 @@ main .section .ax-columns.enterprise .column h2 { padding-top: 0; } +/* Authorable variant: equal top & bottom vertical spacing. + 32px (--spacing-500) on mobile/tablet, 64px (--spacing-800) on desktop (>=1200px). + Opt-in via the `v2` block class — self-contained so it does not rely on the + section spacing-variant override chain above. */ +.ax-columns.v2 { + --ax-columns-v2-spacing: var(--spacing-500); + max-width: 599px; + padding-top: var(--ax-columns-v2-spacing); + padding-bottom: var(--ax-columns-v2-spacing); +} + +.ax-columns.v2 > div { + gap : 16px; +} + +.ax-columns.v2 .column { + padding-left: 0; + padding-right: 0; +} + +.ax-columns.v2 .column, +.ax-columns.v2 .column.column-picture { + padding-left: 0; + padding-right: 0; +} + +.ax-columns.v2 .column-picture img { + border-radius: 16px; +} + .ax-columns.top.center, .ax-columns.fullsize.center, .ax-columns.light, @@ -141,7 +171,7 @@ main .section .ax-columns.enterprise .column h2 { padding-right: 0; } -.section:has(.ax-columns:not(.top.center, .fullsize, .light, .dark, .numbered, .centered, .color)):not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing, +.section:has(.ax-columns:not(.top.center, .fullsize, .light, .dark, .numbered, .centered, .color, .v2)):not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing, .l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing)>.ax-columns:last-child, .section:has(.ax-columns:not(.top.center, .fullsize, .light, .dark, .numbered, .centered, .color)):not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing, .l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing)>.content:last-child { @@ -390,9 +420,12 @@ main .section .ax-columns.enterprise .column h2 { display: flex; flex-direction: column; justify-content: center; +} +.section .ax-columns:not(.v2)>div { padding: var(--spacing-600) 0; } + .section .ax-columns.marquee>div { gap: var(--spacing-500); padding: 0; @@ -546,7 +579,7 @@ main .section .ax-columns.enterprise .column h2 { .ax-columns .column h4, .ax-columns .column h5, .ax-columns .column h6 { - text-align: left; + text-align: start; } .ax-columns.center .column, @@ -1198,7 +1231,7 @@ main .ax-columns.highlight.dark .columns-video:last-of-type { .section .ax-columns>div { flex-direction: row; - text-align: left; + text-align: start; align-items: center; } @@ -1465,6 +1498,11 @@ main .ax-columns.highlight.dark .columns-video:last-of-type { max-width: var(--block-lg-max-width); } + .ax-columns.v2 { + --ax-columns-v2-spacing: var(--spacing-800); + + } + .ax-columns.marquee .button-container.free-plan-container { display: flex; align-items: start; @@ -1950,3 +1988,16 @@ main .ax-columns .express-logo.icon.marquee-eyebrow-logo-large { margin-top: var(--spacing-500); } } + +main .ax-columns a.button.fill { + background-color: var(--Background-Primary-Default); + border-color: var(--Background-Primary-Default); + border-radius: 999px; + color: var(--color-white); +} + +main .ax-columns a.button.fill:any-link:hover, +main .ax-columns a.button.fill:any-link:active { + background-color: var(--color-info-accent-hover); + border-color: var(--color-info-accent-hover); +} diff --git a/express/code/blocks/banner-bg/banner-bg.css b/express/code/blocks/banner-bg/banner-bg.css index e2380406e..58f5498d3 100644 --- a/express/code/blocks/banner-bg/banner-bg.css +++ b/express/code/blocks/banner-bg/banner-bg.css @@ -152,7 +152,7 @@ font-size: var(--body-font-size-l); line-height: 1; padding: 13px var(--spacing-400); - border-radius: var(--spacing-400); + border-radius: var(--border-radius-max); background-color: var(--color-content-neutral); border: var(--border-width-2) solid var(--color-content-neutral); color: var(--color-white); diff --git a/express/code/blocks/discover-cards/discover-cards.css b/express/code/blocks/discover-cards/discover-cards.css index 44cbfb815..73d01bb51 100644 --- a/express/code/blocks/discover-cards/discover-cards.css +++ b/express/code/blocks/discover-cards/discover-cards.css @@ -135,6 +135,7 @@ main .section .discover-cards { justify-content: flex-end; gap: var(--spacing-100); align-items: center; + max-width: 1700px; } .discover-cards.flip .gallery-control { padding-top: var(--spacing-600); @@ -143,10 +144,10 @@ main .section .discover-cards { display: none; } .discover-cards .cards-container .card .text-content { - text-align: left; + text-align: start; } .discover-cards .cards-container .card .text-content .header { - text-align: left; + text-align: start; font-size: var(--ax-heading-l-size); font-weight: var(--heading-font-weight); margin-top: 17px; @@ -161,27 +162,28 @@ main .section .discover-cards { height: 147px; margin-top: var(--spacing-80); } -.discover-cards .card .button-container { - text-align: left; -} -.section .discover-cards .card .button-container a { + .discover-cards .card :is(.button-container, .action-area) { + text-align: start; + } + + .section .discover-cards .card :is(.button-container, .action-area) a { background-color: var(--color-gray-800-variant); color: var(--color-white); border: none; margin-top: var(--spacing-500); - margin-left: 0; + margin-inline-start: 0; } .discover-cards .cards-container.gallery { - scroll-padding-left: var(--spacing-350); + scroll-padding-inline-start: var(--spacing-350); } .discover-cards .cards-container .card:first-child { - margin-left: var(--spacing-350); + margin-inline-start: var(--spacing-350); } @media (min-width: 600px) { .discover-cards .center-title { - padding-bottom: var(--spacing-100); + padding-bottom: var(--spacing-500); font-size: var(--heading-font-size-l); } @@ -204,7 +206,7 @@ main .section .discover-cards { width: auto; } .discover-cards .cards-container .card .text-content { - text-align: left; + text-align: start; width: 351px; margin-left: auto; margin-right: auto; @@ -217,10 +219,10 @@ main .section .discover-cards { height: 198px; } .discover-cards .cards-container.gallery { - scroll-padding-left: 60px; + scroll-padding-inline-start: 60px; } .discover-cards .cards-container .card:first-child { - margin-left: 60px; + margin-inline-start: var(--spacing-300); } .discover-cards.flip .center-title { font-size: var(--heading-font-size-m); @@ -230,10 +232,8 @@ main .section .discover-cards { padding-bottom: var(--spacing-800); } .discover-cards.flip .cards-container.gallery { - padding-left: var(--spacing-500); - padding-right: var(--spacing-500); - scroll-padding-left: var(--spacing-500); - scroll-padding-right: var(--spacing-500); + padding-inline: var(--spacing-500); + scroll-padding-inline: var(--spacing-500); justify-content: center; } .section:has(.discover-cards.v2) { @@ -252,11 +252,14 @@ main .section .discover-cards { .discover-cards .cards-container { margin: auto; } + .discover-cards .gallery-control { + margin: 0 auto; + } .discover-cards .cards-container.gallery { - scroll-padding-left: 100px; + scroll-padding-inline-start: 100px; } .discover-cards .cards-container .card:first-child { - margin-left: 100px; + margin-inline-start: 100px; } } @@ -339,6 +342,10 @@ main .section .discover-cards { stroke: var(--color-gray-300); } +html[dir="rtl"] .discover-cards .gallery-control button { + transform: scaleX(-1); +} + .discover-cards.flip .flip-card-inner { position: relative; width: 100%; diff --git a/express/code/blocks/discover-cards/discover-cards.js b/express/code/blocks/discover-cards/discover-cards.js index 1f9066902..6172599a9 100644 --- a/express/code/blocks/discover-cards/discover-cards.js +++ b/express/code/blocks/discover-cards/discover-cards.js @@ -205,7 +205,7 @@ export default async function decorate(block) { } else { cardDivs.forEach((element) => { const img = element.querySelector('picture img'); - const textHeader = element.querySelector('h4'); + const textHeader = element.querySelector('h1, h2, h3, h4, h5, h6'); const textBody = element.querySelector('p'); if (textHeader && textBody) { textHeader.classList.add('header'); diff --git a/express/code/blocks/gen-ai-cards/gen-ai-cards.css b/express/code/blocks/gen-ai-cards/gen-ai-cards.css index 66ea4fcca..e1d5e6b13 100644 --- a/express/code/blocks/gen-ai-cards/gen-ai-cards.css +++ b/express/code/blocks/gen-ai-cards/gen-ai-cards.css @@ -81,7 +81,7 @@ .gen-ai-cards .gen-ai-cards-heading-section h2 { - text-align: left; + text-align: start; margin-bottom: var(--spacing-100); font-size: var(--heading-font-size-m); line-height: 130%; @@ -89,7 +89,7 @@ } .gen-ai-cards .gen-ai-cards-heading-section p { - text-align: left; + text-align: start; margin: 0; } @@ -129,6 +129,11 @@ scroll-padding-left: var(--spacing-350); } +html[dir="rtl"] .gen-ai-cards.homepage .carousel-container { + scroll-padding-left: unset; + scroll-padding-right: var(--spacing-350); +} + .gen-ai-cards .card { height: 415px; box-sizing: border-box; @@ -166,7 +171,7 @@ } .gen-ai-cards .card .text-wrapper { - text-align: left; + text-align: start; } .gen-ai-cards .card .text-wrapper p { @@ -317,11 +322,19 @@ main .gen-ai-cards.homepage .card .media-wrapper { } .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-child(2) { - margin-left: 20px; + margin-inline-start: 20px; +} + +.gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-last-child(2) { + margin-inline-end: 20px; } .gen-ai-cards.homepage.v2 .carousel-container .carousel-element.card:nth-child(2) { - margin-left: 16px; + margin-inline-start: 16px; +} + +.gen-ai-cards.homepage.v2 .carousel-container .carousel-element.card:nth-last-child(2) { + margin-inline-end: 16px; } .gen-ai-cards .card .gen-ai-input-form .gen-ai-submit { @@ -398,10 +411,6 @@ main .gen-ai-cards.homepage .carousel-container .carousel-platform.right-fader:n mask-image: none; } -main .gen-ai-cards.homepage .carousel-container .carousel-platform.left-fader { - padding-right: var(--spacing-350); -} - main .gen-ai-cards.homepage .carousel-container .carousel-fader-left { align-items: end; top: 45px; @@ -417,6 +426,28 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right { pointer-events: none; } +/* RTL: the widget's float/absolute-position math for the arrow icon assumes + ltr, so force it regardless of page direction to keep the icon centered + in its circle, then mirror the pair to the left (reading end). carousel-fader-left + always scrolls physically left and carousel-fader-right always scrolls physically + right (their names track scroll direction, not screen side), so carousel-fader-left + must stay the leftmost of the pair to keep its "<" pointing further left, away + from carousel-fader-right, instead of back toward it. */ +html[dir="rtl"] .gen-ai-cards .carousel-fader-left, +html[dir="rtl"] .gen-ai-cards .carousel-fader-right { + direction: ltr; +} + +html[dir="rtl"] main .gen-ai-cards.homepage .carousel-container .carousel-fader-left { + right: auto; + left: 15px; +} + +html[dir="rtl"] main .gen-ai-cards.homepage .carousel-container .carousel-fader-right { + right: auto; + left: 42px; +} + .gen-ai-cards.homepage .gen-ai-cards-heading-section p { font-size: var(--ax-body-s-size); } @@ -432,7 +463,7 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right { .gen-ai-cards .gen-ai-cards-heading-section h2, .gen-ai-cards .gen-ai-cards-heading-section p { - text-align: left; + text-align: start; max-width: none; } @@ -449,7 +480,7 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right { .gen-ai-cards.homepage.spotlight .gen-ai-cards-heading-section h2, .gen-ai-cards.homepage.spotlight .gen-ai-cards-heading-section p { - text-align: left; + text-align: start; max-width: none; } @@ -498,6 +529,12 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd margin: 0px; } +/* RTL: the prev/next chevrons point a fixed physical direction, but scrolling + forward moves toward the left instead of the right, so flip them to match. */ +html[dir="rtl"] .gen-ai-cards .gallery-control svg { + transform: rotate(180deg); +} + .gen-ai-cards .card .beta-tag { color: var(--Content-Accent-default, #5258E4); font-size: var(--font-size-beta); @@ -526,7 +563,7 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd .gen-ai-cards .gen-ai-cards-heading-section h3, .gen-ai-cards .gen-ai-cards-heading-section p { - text-align: left; + text-align: start; } .gen-ai-cards .gen-ai-cards-heading-section .gen-ai-cards-link { @@ -556,16 +593,25 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd --heading-max-width: 600px; } - .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-child(2) { - margin-left: var(--spacing-350); + .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-child(2) { + margin-inline-start: var(--spacing-350); + } + + .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-last-child(2) { + margin-inline-end: var(--spacing-350); } .section:has(.gen-ai-cards.homepage.v2) { padding-top: var(--spacing-500); padding-bottom: var(--spacing-500); } + .gen-ai-cards.homepage.v2 .carousel-container .carousel-element.card:nth-child(2) { - margin-left: var(--spacing-500); + margin-inline-start: var(--spacing-500); + } + + .gen-ai-cards.homepage.v2 .carousel-container .carousel-element.card:nth-last-child(2) { + margin-inline-end: var(--spacing-500); } } @@ -606,7 +652,11 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd } .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-child(2) { - margin-left: var(--spacing-300); + margin-inline-start: var(--spacing-300); + } + + .gen-ai-cards.homepage .carousel-container .carousel-element.card:nth-last-child(2) { + margin-inline-end: var(--spacing-300); } .gen-ai-cards .carousel-container .carousel-fader-left, @@ -627,7 +677,7 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd } .gen-ai-cards.homepage .card .text-wrapper { - text-align: left; + text-align: start; } main .gen-ai-cards.homepage .gen-ai-cards-heading { diff --git a/express/code/blocks/grid-marquee/grid-marquee.css b/express/code/blocks/grid-marquee/grid-marquee.css index ced53e020..109d6b2b7 100644 --- a/express/code/blocks/grid-marquee/grid-marquee.css +++ b/express/code/blocks/grid-marquee/grid-marquee.css @@ -6,6 +6,16 @@ text-align: center; } +/* Anti-FOUC: hide only the raw, un-decorated video source authored under each + card face (mp4 link, or MEP-inlined