diff --git a/creativecloud/blocks/firefly-carousel/firefly-carousel.css b/creativecloud/blocks/firefly-carousel/firefly-carousel.css index 60245e759..9dd7a2046 100644 --- a/creativecloud/blocks/firefly-carousel/firefly-carousel.css +++ b/creativecloud/blocks/firefly-carousel/firefly-carousel.css @@ -5,11 +5,9 @@ --ff-nav-size: 40px; --ff-control-gap: 8px; --ff-card-border-radius: 16px; + padding: 0; position: relative; -} - -.firefly-carousel { width: 100%; } @@ -136,11 +134,12 @@ z-index: 1; border-radius: 90.909px; background: #010101; - backdrop-filter: blur(13.63636302947998px); + backdrop-filter: blur(12px); border: none; cursor: pointer; } +.firefly-carousel .firefly-carousel-nav-btn:hover::after, .firefly-carousel .firefly-carousel-nav-btn:focus-visible::after { content: ''; position: absolute; @@ -220,4 +219,9 @@ font-size: 22px; letter-spacing: -0.22px; } + + .firefly-carousel .firefly-carousel-nav-btn svg { + width: 16px; + height: 16px; + } } diff --git a/creativecloud/blocks/firefly-carousel/firefly-carousel.js b/creativecloud/blocks/firefly-carousel/firefly-carousel.js index 3e25cc0c1..663d3138c 100644 --- a/creativecloud/blocks/firefly-carousel/firefly-carousel.js +++ b/creativecloud/blocks/firefly-carousel/firefly-carousel.js @@ -33,10 +33,10 @@ const ICONS = { `, - navPrev: ` + navPrev: ``, - navNext: ` + navNext: ``, }; diff --git a/creativecloud/blocks/firefly-howto/firefly-howto.js b/creativecloud/blocks/firefly-howto/firefly-howto.js index 6f360564b..3501ed5f3 100644 --- a/creativecloud/blocks/firefly-howto/firefly-howto.js +++ b/creativecloud/blocks/firefly-howto/firefly-howto.js @@ -171,7 +171,7 @@ function createAccordionItem(data) { itemWrapper.addEventListener('click', handleItemClick); const header = createTag('h3', { class: 'firefly-howto-header' }); - const btn = createTag('button', { class: 'firefly-howto-trigger', id: `btn-${headingId}`, 'aria-expanded': isOpen, type: 'button', 'aria-controls': `panel-${headingId}` }); + const btn = createTag('button', { class: 'firefly-howto-trigger', id: `btn-${headingId}`, 'aria-expanded': 'false', type: 'button', 'aria-controls': `panel-${headingId}` }); const titleSpan = createTag('span', { class: 'firefly-howto-title' }); titleSpan.textContent = title; @@ -187,7 +187,7 @@ function createAccordionItem(data) { btn.appendChild(iconSpan); header.appendChild(btn); - const panel = createTag('div', { class: 'firefly-howto-panel', id: `panel-${headingId}`, role: 'region', 'aria-labelledby': `btn-${headingId}` }); + const panel = createTag('div', { class: 'firefly-howto-panel', id: `panel-${headingId}` }); const panelInner = createTag('div', { class: 'firefly-howto-panel-inner' }); const contentWrapper = createTag('div', { class: 'firefly-howto-content' }); diff --git a/creativecloud/blocks/firefly-share/firefly-share.css b/creativecloud/blocks/firefly-share/firefly-share.css index d6a739932..5ac5b4ed5 100644 --- a/creativecloud/blocks/firefly-share/firefly-share.css +++ b/creativecloud/blocks/firefly-share/firefly-share.css @@ -1,7 +1,8 @@ .firefly-share { --svg-icon-dimension: 24px; - --list-gap: 28px; + --list-gap: 26px; --copy-tooltip-background-color: #6D6D6D; + margin-left: auto; margin-right: auto; text-align: center; @@ -10,12 +11,19 @@ .firefly-share.inline { overflow: unset; + margin: 0 auto; + text-align: center; + padding: 8px 0 16px; } .firefly-share.dark { background-color: #1E1E1E; } +.firefly-share :is(a, .copy-to-clipboard) svg.icon:hover { + filter: brightness(0.7); +} + .firefly-share svg.icon { height: var(--svg-icon-dimension); transition: filter 0.3s; @@ -47,9 +55,16 @@ margin-bottom: 2.75rem; } +.firefly-share .icon-container li > :is(a, button) { + outline-offset: 1px; +} + +.firefly-share ul.icon-container svg { + color: #222; +} .firefly-share.xxl-heading :is([role="heading"], h1, h2, h3, h4, h5, h6) { - font-size: 1.5rem; + font-size: 22px; font-weight: 900; letter-spacing: -4.5%; } @@ -59,10 +74,6 @@ color: var(--color-white); } -.firefly-share ul.icon-container svg { - color: #222; -} - .firefly-share li:has(.copy-to-clipboard) { position: relative; } @@ -87,14 +98,6 @@ margin-left: -2px; } -.firefly-share .icon-container li > :is(a, button) { - outline-offset: 1px; -} - -.firefly-share :is(a, .copy-to-clipboard) svg.icon:hover { - filter: brightness(0.7); -} - .firefly-share .copy-to-clipboard::before, .firefly-share .copy-to-clipboard::after { display: block; @@ -165,17 +168,18 @@ content: attr(data-copied); } -.firefly-share.inline { - margin: 0 auto; - text-align: center; - padding: 8px 0 16px; -} - .firefly-share.inline ul.icon-container { justify-content: flex-start; margin: 0; } +.firefly-share.left-mobile ul.icon-container { + max-width: var(--grid-container-width); + margin-left : auto; + margin-right: auto; + justify-content: start; + } + main > .section > firefly-share.inline { margin: 0 auto; } @@ -190,25 +194,22 @@ main > .section.center firefly-share.inline ul.icon-container { justify-content: center; } -@media screen and (min-width: 360px) { - .firefly-share.left-mobile .tracking-header { +.firefly-share.left-mobile .tracking-header { max-width: var(--grid-container-width); margin: 0 auto; } - .firefly-share.left-mobile :is([role="heading"], h1, h2, h3, h4, h5, h6) { +.firefly-share.left-mobile :is([role="heading"], h1, h2, h3, h4, h5, h6) { text-align: start; } - - .firefly-share.left-mobile ul.icon-container { - max-width: calc(var(--grid-container-width) - 2px); - margin-left : auto; - margin-right: auto; - justify-content: space-around; - } -} + @media screen and (min-width: 600px) { + .firefly-share :is([role="heading"], h1, h2, h3, h4, h5, h6) { + margin-top: 1.25rem; + margin-bottom: 1.25rem; + } + .firefly-share.left-mobile .tracking-header { max-width: 100%; margin: 0; @@ -223,11 +224,6 @@ main > .section.center firefly-share.inline ul.icon-container { justify-content: center; } - .firefly-share :is([role="heading"], h1, h2, h3, h4, h5, h6) { - margin-top: 1.25rem; - margin-bottom: 1.25rem; - } - .firefly-share .copy-to-clipboard::before, [dir="rtl"] firefly-share .copy-to-clipboard::before { left: 50%; @@ -243,7 +239,7 @@ main > .section.center firefly-share.inline ul.icon-container { @media (min-width: 900px){ .firefly-share { - --svg-icon-dimension: 40px; + --svg-icon-dimension: 30px; --list-gap: 56px; } @@ -267,7 +263,6 @@ main > .section.center firefly-share.inline ul.icon-container { .firefly-share.xxl-heading :is([role="heading"], h1, h2, h3, h4, h5, h6) { font-size: 40px; - font-weight: 900; } .firefly-share ul.icon-container { diff --git a/creativecloud/blocks/upload-marquee/upload-marquee.css b/creativecloud/blocks/upload-marquee/upload-marquee.css index fe7a94e0f..91ce13e64 100644 --- a/creativecloud/blocks/upload-marquee/upload-marquee.css +++ b/creativecloud/blocks/upload-marquee/upload-marquee.css @@ -15,7 +15,7 @@ --um-shadow-layout: 0 4px 24px rgb(0 0 0 / 12%); --um-text-shadow: 0 4px 39px rgb(0 0 0 / 25%); --um-drop-zone-border: 2px dashed rgb(255 255 255 / 50%); - --um-cta-border: 2px solid rgb(255 255 255 / 35%); + --um-cta-border: 2px solid var(--um-white); position: relative; overflow: hidden; @@ -29,6 +29,7 @@ } .upload-marquee-block .action-button { + font-family: var(--body-font-family); border-radius: var(--um-radius-pill); border: 0; background: var(--um-accent-strong); @@ -38,7 +39,6 @@ display: flex; align-items: center; justify-content: center; - min-height: 50px; padding: 12px 24px 14px; font-size: 19px; font-weight: 700; @@ -211,7 +211,7 @@ border: var(--um-cta-border); border-radius: var(--um-radius-pill); box-sizing: border-box; - font-size: 17px; + font-size: 21px; font-weight: 700; line-height: 21px; text-decoration: none; @@ -253,13 +253,14 @@ padding: 0; margin: 0; max-width: none; + text-align: center; } .upload-marquee-block .drop-zone { border: var(--um-drop-zone-border); border-radius: var(--um-radius-sm); padding: 34px 24px; - margin: 0; + margin-top: 24px; position: relative; display: flex; flex-direction: column; @@ -407,16 +408,20 @@ min-height: auto; height: 100%; align-self: stretch; - align-items: stretch; - padding: 24px 24px 24px 0; + display: flex; + align-items: center; + justify-content: center; + padding: 0px clamp(0px, calc(5vw - 45px), 56px) 0px 0; + box-sizing: border-box; } .upload-marquee-block .upload-marquee-media { - height: 100%; + height: auto; + width: 100%; } .upload-marquee-block .upload-marquee-right .media-container { - min-height: 100%; + width: 100%; max-height: 100%; } diff --git a/creativecloud/blocks/upload-marquee/upload-marquee.js b/creativecloud/blocks/upload-marquee/upload-marquee.js index 160b8512d..d4636b9ea 100644 --- a/creativecloud/blocks/upload-marquee/upload-marquee.js +++ b/creativecloud/blocks/upload-marquee/upload-marquee.js @@ -1,4 +1,4 @@ -import { createTag, getConfig, getLibs } from '../../scripts/utils.js'; +import { createTag, getConfig, getLibs, getScreenSizeCategory } from '../../scripts/utils.js'; // ===== CONFIG ===== const miloLibs = getLibs('/libs'); @@ -6,23 +6,104 @@ const VIEWPORTS = ['mobile-up', 'tablet-up', 'desktop-up']; const DEFAULT_DROPZONE_ICON = '/cc-shared/assets/svg/s2-icon-upload-20-n.svg'; const ARIA_PLACEHOLDER_KEYS = { dropZoneAriaLabel: 'upload-marquee-drop-zone-aria-label', - layoutAriaLabel: 'upload-marquee-layout-aria-label', filePickerAriaSuffix: 'file-picker', + brandingAltFirst: 'adobe-firefly-gen-ai', + brandingAltSecond: 'adobe-firefly', }; const ARIA_LABEL_DEFAULTS = { dropZoneAriaLabel: - 'Upload your asset. Drag and drop a file, or press Enter to browse.', - layoutAriaLabel: - 'Asset upload area. Drag and drop files anywhere in this section.', + 'Upload your asset. Or drag and drop here.', filePickerAriaSuffix: 'file picker', + brandingAltFirst: 'Adobe Firefly generative AI', + brandingAltSecond: 'Adobe Firefly', }; const AnalyticsKeys = { uploadAssetCTA: 'Upload asset CTA|UnityWidget', editPhotosCTA: 'Edit Photos CTA|UnityWidget', }; +const BRANDING_ALT_KEYS = ['brandingAltFirst', 'brandingAltSecond']; let uploadColumnCounter = 0; +// ===== LCP / MEDIA PRIORITY ===== +const LCP_IMAGE_PARAMS = { + webpLarge: 'width=1000&format=webply&optimize=medium', + webpSmall: 'width=500&format=webply&optimize=medium', + jpgLarge: 'width=1000&format=jpg&optimize=medium', + jpgSmall: 'width=500&format=jpg&optimize=medium', +}; + +function getBaseImageUrlFromPicture(picture) { + if (!picture) return null; + + const img = picture.querySelector('img'); + const imgSrc = img?.src; + if (imgSrc) { + return { baseUrl: imgSrc.split('?')[0], img }; + } + + const srcset = picture.querySelector('source[srcset]')?.srcset; + if (!srcset) return null; + + const url = srcset.split(',')[0].trim().split(/\s+/)[0]; + const baseUrl = url ? url.split('?')[0] : null; + return baseUrl && img ? { baseUrl, img } : null; +} + +function rewritePictureToOurSizes(picture) { + const result = getBaseImageUrlFromPicture(picture); + if (!result?.baseUrl || !result.img) return null; + + const { baseUrl, img } = result; + + picture.textContent = ''; + picture.append( + createTag('source', { + type: 'image/webp', + srcset: `${baseUrl}?${LCP_IMAGE_PARAMS.webpLarge}`, + media: '(min-width: 600px)', + }), + createTag('source', { + type: 'image/webp', + srcset: `${baseUrl}?${LCP_IMAGE_PARAMS.webpSmall}`, + }), + createTag('source', { + type: 'image/jpeg', + srcset: `${baseUrl}?${LCP_IMAGE_PARAMS.jpgLarge}`, + media: '(min-width: 600px)', + }), + ); + + img.setAttribute('src', `${baseUrl}?${LCP_IMAGE_PARAMS.jpgSmall}`); + img.removeAttribute('loading'); + img.removeAttribute('fetchpriority'); + picture.append(img); + return img; +} + +function setUploadRowMediaPriority(uploadRow) { + const screenCategory = getScreenSizeCategory({ mobile: 599, tablet: 1199 }); + const activeColumnIndex = { mobile: 0, tablet: 1, desktop: 2 }[screenCategory]; + + [...uploadRow.children].forEach((column, index) => { + const isActive = index === activeColumnIndex; + const picture = column.querySelector('picture'); + + if (picture) { + const img = rewritePictureToOurSizes(picture); + if (img) { + img.setAttribute('loading', isActive ? 'eager' : 'lazy'); + if (isActive) img.setAttribute('fetchpriority', 'high'); + } + } + + const video = column.querySelector('video'); + if (video) { + video.setAttribute('preload', isActive ? 'auto' : 'metadata'); + } + }); +} + // ===== LOGGING ===== function logUploadMarqueeInfo(message, errorType = 'i') { window.lana?.log(message, { tags: 'upload-marquee', errorType }); @@ -156,19 +237,26 @@ function assignDropZoneTextIds(headingPara, bodyPara, columnId) { return describedByIds; } +function makeDecorativeMediaNonFocusable(container) { + container.querySelectorAll('picture, picture img').forEach((el) => { + el.setAttribute('tabindex', '-1'); + el.setAttribute('role', 'presentation'); + }); +} + async function buildUploadActionControls(para, columnId, getAriaLabels) { const buttonLabel = para.textContent.trim().split('|')[0].trim() || 'Upload your image'; const { filePickerAriaSuffix } = await getAriaLabels(); const button = createTag( - 'button', + 'span', { - type: 'button', class: 'con-button blue action-button button-xl no-track', 'daa-ll': AnalyticsKeys.uploadAssetCTA, - 'aria-label': buttonLabel, + 'aria-hidden': 'true', }, para.innerHTML, ); + makeDecorativeMediaNonFocusable(button); const input = createTag('input', { type: 'file', name: 'file-upload', @@ -254,7 +342,8 @@ function replaceUploadColumnContent( } } -function buildMarqueeContent(marqueeCell) { +async function buildMarqueeContent(marqueeCell, getAriaLabels) { + const ariaLabels = await getAriaLabels(); const marqueeContent = createTag('div', { class: 'upload-marquee-content' }); [...marqueeCell.children].forEach((child) => marqueeContent.append(child.cloneNode(true))); @@ -273,6 +362,14 @@ function buildMarqueeContent(marqueeCell) { brandingPara.textContent = ''; brandingPara.classList.add('upload-marquee-branding'); brandingPara.append(brandingRow); + brandingRow.querySelectorAll('picture img, img').forEach((img, index) => { + img.setAttribute('loading', 'eager'); + const altKey = BRANDING_ALT_KEYS[index]; + const placeholderAlt = ariaLabels[altKey]; + if (placeholderAlt && (!img.getAttribute('alt') || img.getAttribute('alt').trim() === '')) { + img.setAttribute('alt', placeholderAlt); + } + }); } const ctaLink = marqueeContent.querySelector( @@ -287,12 +384,8 @@ function buildMarqueeContent(marqueeCell) { return marqueeContent; } -function buildLayout(layoutAriaLabel) { - const layout = createTag('div', { - class: 'upload-marquee-layout', - role: 'region', - 'aria-label': layoutAriaLabel, - }); +function buildLayout() { + const layout = createTag('div', { class: 'upload-marquee-layout' }); const leftCol = createTag('div', { class: 'upload-marquee-left' }); const rightCol = createTag('div', { class: 'upload-marquee-right' }); const uploadsWrapper = createTag('div', { class: 'upload-marquee-uploads' }); @@ -446,19 +539,19 @@ export default async function init(el) { uploadRow.classList.add('foreground'); applyViewportClasses(uploadRow); + setUploadRowMediaPriority(uploadRow); for (let i = 0; i < uploadRow.children.length; i += 1) { // eslint-disable-next-line no-await-in-loop await decorateUploadColumn(uploadRow.children[i], getAriaLabels); } - const { layoutAriaLabel } = await getAriaLabels(); - const { layout, leftCol, rightCol, uploadsWrapper, mediaWrapper } = buildLayout(layoutAriaLabel); + const { layout, leftCol, rightCol, uploadsWrapper, mediaWrapper } = buildLayout(); const marqueeCell = marqueeRow.querySelector(':scope > div'); if (!marqueeCell) return; - leftCol.append(buildMarqueeContent(marqueeCell)); + leftCol.append(await buildMarqueeContent(marqueeCell, getAriaLabels)); appendColumns( collectViewportContent(uploadRow), uploadsWrapper, diff --git a/creativecloud/styles/doodlebug.css b/creativecloud/styles/doodlebug.css index eda3e7c23..af5485fe8 100644 --- a/creativecloud/styles/doodlebug.css +++ b/creativecloud/styles/doodlebug.css @@ -21,6 +21,9 @@ border-radius: 16px; background: #F0F0F7; border: 1px solid #fff; + font-size: 18px; + font-weight: 700; + line-height: 125%; } .descr-list.accordion { @@ -32,6 +35,21 @@ content: none; } + @media (min-width: 1200px) { + .accordion .descr-term button { + font-size: 24px; + font-weight: 700; + line-height: 125%; + } + + .accordion .descr-details { + font-size: 20px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0.4px; + } + } + /* ---- Aside ---- */ .aside .foreground.container { display: grid; @@ -58,7 +76,7 @@ border: var(--glass-border); } - @media (max-width: 1200px) { + @media (max-width: 1199px) { .aside .foreground.container { display: grid; align-items: center; @@ -116,6 +134,17 @@ visibility: hidden; } + .carousel.hinting-mobile .carousel-slide.reference-slide { + min-width: unset; + } + + @media (min-width: 360px) and (max-width: 600px) { + .carousel.hinting-mobile .carousel-slide { + flex-basis: 80%; + min-width: 300px; + } + } + @media (min-width: 600px) and (max-width: 1199px) { .carousel.hinting-tablet { --tablet-card-width: calc(300 / 768 * 100vw); @@ -199,6 +228,16 @@ transform: translateX(calc(var(--tablet-margin) - var(--tablet-gap))); } + .carousel.hinting-tablet:has(.carousel-slides.is-reversing .carousel-slide:first-child.active) .carousel-slides.is-reversing, + .carousel.hinting-tablet:has(.carousel-slides.is-reversing .carousel-slide:first-child.active) .carousel-slides.is-ready.is-reversing { + transform: translateX(var(--tablet-card-width)); + } + + .carousel.disable-nav.hinting-tablet:has(.carousel-slides.is-reversing .carousel-slide:first-child.active) .carousel-slides.is-reversing, + .carousel.disable-nav.hinting-tablet:has(.carousel-slides.is-reversing .carousel-slide:first-child.active) .carousel-slides.is-ready.is-reversing { + transform: translateX(calc(var(--tablet-card-width) + var(--tablet-margin))); + } + .carousel.hinting-tablet .editorial-card { --card-height-default: calc(var(--tablet-card-width) * 225 / 300); } @@ -217,17 +256,31 @@ box-shadow: 0 5px 20px 10px #0000000F; } + .editorial-card.h-shadow { + transition: box-shadow .3s ease-in-out; + } + + .editorial-card.h-shadow:hover { + box-shadow: 0 1px 4px 0 #0000000C, 0 8px 8px 0 #00000013, 0 20px 12px 0 #00000018, 0 40px 24px 0 #0000001D; + } + .editorial-card h3 { letter-spacing: -3%; font-weight: 800; } - .editorial-card.s-padding-media .media-area>div { + @media (max-width: 1199px) { + .editorial-card h3 { + font-size: 20px; + } + } + + .editorial-card.s-padding-media .media-area > div { padding: var(--spacing-xxs); } - .editorial-card.s-padding-media.m-rounded-corners-image .media-area>div img { + .editorial-card.s-padding-media.m-rounded-corners-image .media-area > div img { border-radius: var(--m-rounded-corners); } @@ -239,12 +292,32 @@ aspect-ratio: 284 / 269; } + .editorial-card.h-shadow .media-area :is(img, video) { + transition: filter .3s ease-in-out; + } + + .editorial-card.h-shadow:hover .media-area :is(img, video) { + filter: brightness(.65); + } + .editorial-card .foreground .body-l { font-size: 1rem; line-height: 135%; letter-spacing: 1%; } + .editorial-card.footer-align-bottom .foreground { + flex: 1; + } + + .editorial-card.footer-align-bottom .foreground > div { + height: 100%; + } + + .editorial-card.footer-align-bottom .foreground > div > p:not(.action-area) { + flex: 1; + } + .section.show-4-desktop { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); @@ -281,7 +354,7 @@ .show-2-desktop .editorial-card .media-area :is(img, video) { height: auto; max-height: unset; - aspect-ratio: 410/336; + aspect-ratio: 823 / 490; } .show-2-desktop .editorial-card { @@ -311,7 +384,7 @@ row-gap: 24px; } - .show-2-desktop .editorial-card.s-padding-media .media-area>div { + .show-2-desktop .editorial-card.s-padding-media .media-area > div { padding: 0; } @@ -378,6 +451,7 @@ line-height: 98%; } + /* ---- Text Block (Typography) ---- */ .section:not(.dark) .text-block:not(.dark) [class*="heading-"] { color: var(--color-black); } @@ -393,6 +467,7 @@ line-height: 130%; } + /* ---- Text Block (Grid CTA) ---- */ .text-block.grid-cta .foreground { --cell-width: 300px;