.page-root.page-innovation-collaboration { scroll-snap-type: none; } .innovation-collaboration-main { background: #ffffff; } .page-root.page-innovation-collaboration.innovation-motion-ready [data-innovation-reveal] { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1), transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } .page-root.page-innovation-collaboration.innovation-motion-ready [data-innovation-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-header[data-innovation-reveal] { transition-delay: 0ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(1) { transition-delay: 80ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(2) { transition-delay: 140ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(3) { transition-delay: 200ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(4) { transition-delay: 260ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(5) { transition-delay: 320ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(6) { transition-delay: 380ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(7) { transition-delay: 440ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(8) { transition-delay: 500ms; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-grid > .innovation-collaboration-card[data-innovation-reveal]:nth-child(9) { transition-delay: 560ms; } .innovation-collaboration-section { padding: clamp(3.4rem, 5vw, 4.75rem) 0 clamp(5rem, 7vw, 6.75rem); overflow-x: hidden; overflow-x: clip; } .innovation-collaboration-shell { width: min(100rem, calc(100% - 2rem)); margin-inline: auto; } .innovation-collaboration-header { margin-bottom: clamp(1.8rem, 2.8vw, 2.8rem); } .innovation-collaboration-title { margin: 0; font-family: var(--font-display-sans); font-size: clamp(1.8rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 700; color: #0051ae; } .innovation-collaboration-title::after { content: ""; display: block; width: clamp(3.25rem, 4.6vw, 4.8rem); height: 0.2rem; margin-top: 0.72rem; border-radius: 999px; background: linear-gradient(90deg, #0051ae 0%, #39b7ff 100%); transform: scaleX(0); transform-origin: left center; opacity: 0.35; transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.58s ease; } .innovation-collaboration-header.is-visible .innovation-collaboration-title::after { transform: scaleX(1); opacity: 1; display: none; } .innovation-collaboration-grid { /* display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 1.8vw, 2rem); row-gap: clamp(2rem, 3vw, 3.25rem); align-items: start; */ font-size: 0; } .innovation-collaboration-card { width: 31.625%; display: inline-block; font-size: 0; margin: 0 2.5% 6rem 0; } .innovation-collaboration-card:nth-of-type(3n) { margin-right: 0; } .innovation-collaboration-card-media { margin: 0; overflow: hidden; border-radius: 1rem; background: #dce6f3; position: relative; } .innovation-collaboration-card-title { position: absolute; width: 100%; height: 4.5rem; left: 0; bottom: 0; border-radius: 0 0 1rem 1rem; background: rgba(0, 0, 0, 0.40); color: #fff; font-size: 1.25rem; line-height: 4.5rem; z-index: 999; padding: 0 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .innovation-collaboration-card-image { display: block; width: 100%; aspect-ratio: 506 / 336; object-fit: cover; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal] .innovation-collaboration-card-image { transform: scale(1.06); filter: saturate(0.92) brightness(0.94); transition: transform 1.02s cubic-bezier(0.22, 1, 0.36, 1), filter 1.02s cubic-bezier(0.22, 1, 0.36, 1); } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal].is-visible .innovation-collaboration-card-image { transform: scale(1); filter: saturate(1) brightness(1); } .innovation-collaboration-card-desc { margin: 1rem 0 0; color: #555555; font-size: 0.95rem; line-height: 2; } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal] .innovation-collaboration-card-desc { opacity: 0; transform: translate3d(0, 1.2rem, 0); transition: opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1), transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); } .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal].is-visible .innovation-collaboration-card-desc { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .page-root.page-innovation-collaboration.innovation-motion-ready [data-innovation-reveal], .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal] .innovation-collaboration-card-image, .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal] .innovation-collaboration-card-desc, .innovation-collaboration-title::after { transition: none; } } @media (any-hover: hover) { .page-root.page-innovation-collaboration.innovation-motion-ready .innovation-collaboration-card[data-innovation-reveal].is-visible:hover .innovation-collaboration-card-image, .page-root.page-innovation-collaboration .innovation-collaboration-card:hover .innovation-collaboration-card-image, .page-root.page-innovation-collaboration .innovation-collaboration-card-media:hover .innovation-collaboration-card-image { transform: scale(1.05); } } @media (max-width: 1023px) { .innovation-collaboration-section { padding: 2.4rem 0 3.6rem; } .innovation-collaboration-shell { width: calc(100% - 2rem); } .innovation-collaboration-title { font-size: 1.6rem; } .innovation-collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } .innovation-collaboration-card { width: 100%; margin: 0 0 2rem 0; } .innovation-collaboration-card-title{ height: 3rem; line-height: 3rem; font-size: 1.1rem; } .innovation-collaboration-card-desc { margin-top: 0.85rem; /* font-size: 0.92rem; */ font-size: 1rem; line-height: 1.9; } } @media (max-width: 750px) { .innovation-collaboration-section { padding: 1.7rem 0 2.8rem; } .innovation-collaboration-shell { width: calc(100% - 1.25rem); } .innovation-collaboration-header { margin-bottom: 1.25rem; } .innovation-collaboration-title { font-size: 1.45rem; } .innovation-collaboration-grid { grid-template-columns: 1fr; gap: 1.5rem; } .innovation-collaboration-card { width: 100%; margin: 0 0 2rem 0; } .innovation-collaboration-card-desc { margin-top: 0.72rem; font-size: 1rem; line-height: 1.82; } }