/** * Section: a creator — Figma 4002:1693 (desktop) / 4002:2190 (mobile) * * Desktop * creator HORIZONTAL gap 40 (var-40), height 902.333 (FIXED trong Figma) * col "see" 900px, VERTICAL gap 64, padding-bottom 20 (var-20) * label 25px / 600 / lh 115% (h5) * image 900 x 550 (scale FIT) * list gap 4 (var-4), item 32px / 600 / lh 115% (h4), item 2-3 opacity .3 * col "don't see" fill (460px), label opacity .6, image + list LAYER_BLUR 20 * * Mobile/tablet * creator VERTICAL gap 48 — chỉ hiển thị cột "see" * block VERTICAL gap 20 (var-20) * label 20px / 600 / lh 115% (h5 mobile) * scroller HORIZONTAL gap 20, card 300px * image 300 x 183.333 * label 16px / 400 / lh 140% (description) * progress 350 x 2, radius 10, track #fff1f / indicator 100px #fffcc */ #cd-creator .cd-creator { display: flex; gap: var(--var-40); background: var(--color-1st-bg); } #cd-creator .cd-creator__col { display: flex; flex-direction: column; gap: 64px; padding-bottom: var(--var-20); } /* Figma: expand/collapse là ĐỔI CHIỀU RỘNG cột. Sizing của Figma: cột đang mở = FIXED 900, cột đang đóng = FILL phần còn lại. desktop 1400 → 900 + gap 40 + 460 laptop 1336 → 900 + gap 40 + 332 (content-wrapper 1272) Vì vậy KHÔNG dùng tỉ lệ cố định 900:458 — sẽ sai ở laptop. */ #cd-creator .cd-creator__col { min-width: 0; } @media (min-width: 1025px) { /* Figma: cột mở 900, cột thu 460, gap 40 → tổng 1400 = bề rộng container. Viết theo TỈ LỆ của (100% − gap) để đúng ở mọi bề rộng container, không hard-code 900/460 (màn 1336 container hẹp hơn). QUAN TRỌNG — cả hai cột phải giữ `flex-grow: 0` MỌI LÚC. Bản trước để `flex: 1 1 0` (thu) và `flex: 0 0 900px` (mở): khi .is-expanded nhảy từ cột này sang cột kia thì `flex-grow` đổi 0→1 TỨC THÌ (chỉ flex-basis nằm trong transition). Giữa lúc animation, cột vừa bị thu là cột DUY NHẤT còn grow:1 nên nuốt hết chỗ trống → đo được nó phình lên 991px, rộng hơn cả kích thước mở 900, rồi mới co về 460. Đó là cú giật ở đoạn chuyển giữa "What you see" và "What you don't see", xảy ra ở CẢ HAI CHIỀU. */ #cd-creator .cd-creator__col { flex: 0 0 calc((100% - var(--var-40)) * 460 / 1360); /* .6s hơi gấp: bề rộng cột nhảy 900↔460 cùng lúc với blur + crossfade ảnh nên nhìn giật. .9s cho cả 3 chạy cùng nhịp, mượt hơn hẳn. */ transition: flex-basis .9s var(--cd-ease-out, ease); } #cd-creator .cd-creator__col.is-expanded { flex-basis: calc((100% - var(--var-40)) * 900 / 1360); } } /* label — headings/heading-5 */ #cd-creator .cd-creator__label { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--color-1st-fg); } /* Figma: khung ảnh luôn cao 550, rộng bằng cột, scale FIT. Figma 4002:8076 cho thấy MỖI BƯỚC có một ảnh riêng trong khung này, nên cả 3 ảnh được chồng lên nhau và crossfade — ảnh của bước đang chọn nhận .is-on. Cột "What you don't see" có thêm một ảnh riêng cho lúc thu gọn (ref khác trong Figma). */ #cd-creator .cd-creator__media { position: relative; height: 550px; } #cd-creator .cd-creator__media img { width: 100%; height: 550px; object-fit: contain; object-position: left center; } #cd-creator .cd-creator__media-img { position: absolute; inset: 0; opacity: 0; /* .38s chứ KHÔNG phải .9s như transition của cột. .9s là cho `flex-basis` lúc ĐỔI CỘT — chuyện chỉ xảy ra một lần ở bước 2→3, và là con số đã cố ý tăng lên cho đỡ nháy. Còn crossfade ảnh chạy MỖI BƯỚC: cuộn thong thả đã là ~450ms/bước, để .9s thì ảnh chưa mờ xong đã bị ảnh sau chồng lên — nhìn ra thành "nhanh quá / rối". .38s kịp trọn trong một bước. */ transition: opacity .38s var(--cd-ease-out, ease); } #cd-creator .cd-creator__media-img.is-on { opacity: 1; } /* Lúc thu gọn: - Cột "What you don't see" CÓ ảnh preview riêng (ref khác trong Figma) → hiện ảnh đó và ẩn các ảnh theo bước. Ảnh preview là con ĐẦU TIÊN nên `~` chọn đúng phần còn lại. - Cột "What you see" KHÔNG có ảnh preview (Figma tái dùng ảnh của bước cuối) → không có rule nào khớp, ảnh `.is-on` giữ nguyên. Trước đây rule ẩn áp cho MỌI cột nên khi "What you see" thu lại thì cột trống trơn — đó chính là cái nháy khi chuyển mode. */ #cd-creator .cd-creator__col:not(.is-expanded) .cd-creator__media-img--collapsed { opacity: 1; } #cd-creator .cd-creator__col:not(.is-expanded) .cd-creator__media-img--collapsed ~ .cd-creator__media-img { opacity: 0; } #cd-creator .cd-creator__col.is-expanded .cd-creator__media-img--collapsed { opacity: 0; } /* list — headings/heading-4, gap 4 */ #cd-creator .cd-creator__list { display: flex; flex-direction: column; gap: var(--var-4); } #cd-creator .cd-creator__item { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--color-1st-fg); } #cd-creator .cd-creator__item.is-dim { opacity: .3; } /* ---------- Desktop ---------- */ @media (min-width: 1025px) { /* Figma: component "creator" cao cố định 902.333 trong khi 2 cột HUG 846 */ #cd-creator .cd-creator { min-height: 902.333px; } #cd-creator .cd-creator__scroller, #cd-creator .cd-creator__progress { display: none; } } /* ---------- Mobile + tablet ---------- */ @media (max-width: 1024px) { #cd-creator .cd-creator { flex-direction: column; gap: var(--var-48, 48px); } /* Figma mobile (4002:2190): CẢ HAI cột đều là scroller ngang 3 card → chỉ ẩn phần media/list của desktop, giữ nguyên 2 cột. */ #cd-creator .cd-creator__media, #cd-creator .cd-creator__list { display: none; } #cd-creator .cd-creator__col { width: 100%; gap: var(--var-20); padding-bottom: 0; overflow: visible; } #cd-creator .cd-creator__scroller { display: flex; gap: var(--var-20); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } #cd-creator .cd-creator__scroller::-webkit-scrollbar { display: none; } #cd-creator .cd-creator__card { flex: none; width: 300px; display: flex; flex-direction: column; gap: var(--var-12); scroll-snap-align: start; } #cd-creator .cd-creator__card-image { width: 300px; height: 183.333px; object-fit: contain; } #cd-creator .cd-creator__card-label { font-size: var(--description); font-weight: var(--fw-regular); line-height: var(--lh-description); color: var(--color-1st-fg); } #cd-creator .cd-creator__progress { position: relative; width: 100%; height: 2px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; } #cd-creator .cd-creator__progress-bar { position: absolute; inset-block: 0; left: 0; display: block; width: 100px; border-radius: 10px; background: var(--color-2nd-fg); } } /* ============================================================ Effect "Change content" (spec PDF — Perfect creator story) 6 bước: 3 dòng của "What you see" → 3 dòng của "What you don't see". Trạng thái theo Figma 4002:8076 (6 biến thể 4002:8911…8916): cột ĐANG MỞ rộng 900 · label opacity 1 · ảnh + list KHÔNG blur dòng đang chọn opacity 1, 2 dòng còn lại 0.3 cột ĐANG ĐÓNG rộng 458 · label opacity 0.6 · ảnh + list LAYER_BLUR 20 (CSS blur 10px) cả 3 dòng đều 0.3 ============================================================ */ #cd-creator .cd-creator__label, #cd-creator .cd-creator__item-btn { color: inherit; text-align: left; background: none; cursor: pointer; } /* .cd-creator__label là