/* ========================================================================== AOV Demo Tool — Design Tokens Nguồn: Figma "AOV Free Gift" › node 26780:3433 (Demo 2) + design/aov.ai/brand-guideline/brand-guideline.md Đây là NGUỒN SỰ THẬT DÙNG CHUNG. Mọi file css khác chỉ đọc var(), không được khai hex/px thô. ========================================================================== */ :root { /* --- Brand palette (brand-guideline.md) ------------------------------- */ --c-turquoise: #00cdae; /* brand primary — dùng cho wash/gradient */ --c-sky: #2575f0; --c-yellow: #ffad01; --c-navy-dark: #070d27; --c-navy: #1f2643; --c-gray-light: #f8f7fc; --c-white: #ffffff; --grad-brand: linear-gradient(90deg, var(--c-turquoise), var(--c-sky)); /* --- Palette của trang này (đo từ Figma) ------------------------------ Lưu ý: trang dùng teal ĐẬM #00927c cho text/CTA (tương phản tốt hơn brand turquoise), còn #00cdae chỉ xuất hiện ở lớp wash mờ phía sau. */ --c-accent: #00927c; --c-accent-soft: rgba(0, 146, 124, 0.1); --c-ink: #333333; --c-border: #cecece; --c-placeholder: #b6b6b6; --c-glow-warm: #fffbe3; /* --- Typography ------------------------------------------------------- */ --font-display: "Origin", "Ubuntu", system-ui, sans-serif; --font-ui: "Origin", "Ubuntu", system-ui, sans-serif; /* Origin chỉ có Light / Bold / Heavy — KHÔNG có Regular. Figma khai "Origin Regular" → map sang Light (300). */ --fw-light: 300; --fw-bold: 700; --fw-heavy: 900; /* Type scale — fluid, neo ở 1920px của design gốc */ --fs-h1: clamp(1.625rem, 3.13vw, 3.75rem); /* 60px @1920 */ --fs-lead: clamp(0.875rem, 0.94vw, 1.125rem); /* 18px @1920 */ --fs-control: clamp(0.875rem, 0.94vw, 1.125rem); /* 18px @1920 */ --fs-nav: clamp(1rem, 0.94vw, 1.125rem); /* 18px @1920 */ --fs-badge: 0.8125rem; /* 13px */ --lh-h1: 1.03; --lh-lead: 1.065; --lh-control: 1.3; --lh-tight: 1.2; --ls-h1: -0.045em; /* -3.25px @72px */ --ls-lead: -0.0295em; /* -0.648px @22px */ --ls-control: -0.036em; /* -0.648px @18px */ --ls-nav: -0.0144em; /* -0.26px @18px */ --ls-badge: -0.02em; /* -0.26px @13px */ /* --- Spacing (Figma variables + thang của trang) ---------------------- */ --sp-100: 9px; /* spacing/small-200 */ --sp-200: 10px; --sp-300: 12px; --sp-400: 14px; /* spacing/base */ --sp-500: 20px; /* --p-sapce-500 */ --sp-600: 24px; /* --p-sapce-600 */ /* Nhịp dọc của hero phải co theo CHIỀU CAO màn, nếu không thì màn thấp bị tràn → sinh scroll. */ --sp-stack: clamp(10px, 2.2vh, 24px); --sp-800: 32px; /* --- Layout ----------------------------------------------------------- */ --container-max: 1400px; /* 1920 − 2×260 */ /* Lề bên. 7vw cho ra đúng 260px @1920 (= 13.5% như Figma) và co theo màn ở kích thước nhỏ hơn thay vì kẹt ở một số px cố định. */ --gutter: clamp(1.25rem, 7vw, 260px); /* Figma: Container ở y=132 tính từ đỉnh artboard. Nav nay position:absolute nên KHÔNG chiếm chỗ nữa → dùng thẳng 132. */ --hero-top: clamp(2.75rem, 12.2vh, 132px); /* --- Shape ------------------------------------------------------------ */ --r-control: 11px; --r-pill: 28px; --r-card: 8px; --r-chip: 1px; --bw-hair: 1px; --bw-card: 4px; /* --- Elevation -------------------------------------------------------- */ --sh-card: 0 0.695px 1.042px rgba(0, 0, 0, 0.15), -2.779px 4.168px 13.894px rgba(0, 0, 0, 0.14); --sh-btn: 0 1px 2px rgba(0, 146, 124, 0.24); /* --- Chuyển động ------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 180ms; /* Thang thời lượng 4 nấc. --dur (180ms) cố ý nhanh, dành cho vi tương tác; nhịp lớn hơn phải có token RIÊNG chứ không kéo dãn --dur — nó đang nối vào 13 transition sẵn có, kéo dãn một chỗ là cả 13 chỗ chậm theo. */ --dur-2: 260ms; /* content enter: hàng danh sách, tier, dock, coach */ --dur-3: 420ms; /* panel width, thẻ modal, nét vẽ dấu tích */ --dur-4: 760ms; /* trọn chuỗi dấu tích + pháo hoa */ /* Hai đường cong xương sống của trang. Không mang xuất xứ của thư viện nào — `--ease-out` là đường ra mặc định (nhanh lúc đầu, tắt dần), `--ease-in` là đường thoát (đi nhanh, dứt khoát). Giữ nguyên giá trị vì 20+ chỗ đang neo vào chúng; đổi ở đây là đổi nhịp của cả trang. */ --ease-out: cubic-bezier(.25, .1, .35, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); /* ── Vốn từ chuyển động: animate-ui ─────────────────────────────────────── Nướng từ hằng số THẬT trong source của họ, lấy mẫu 22 điểm: animate-ui.com/r/primitives-radix-{dialog,popover}.json KHÔNG kéo thư viện về — họ phát component React chạy trên một runtime animation bằng JS, còn trang này thuần CSS. Nhưng đường cong thì bê nguyên được, và họ cùng gốc shadcn với lớp token bên dưới nên không phải ghép hai hệ. Đo lại bằng chính phương trình lò xo (m=1): sai số lớn nhất so với nghiệm giải tích là 0.0007 — đây là bản nướng đúng, không phải curve vẽ tay. ⚠️ `linear()` chở HÌNH DẠNG, không chở THỜI GIAN. Hai curve dưới có nhịp tự nhiên 690ms và 425ms; nén vào `--dur-2`/`--dur-3` là cố ý (thang thời lượng của trang mới là chỗ quyết định nhanh chậm). */ /* Hộp thoại của họ: k150/d25 → zeta 1.021, QUÁ TẮT nên vọt 0%. Không nảy là CỐ Ý, và đó chính là chỗ khác biệt: trôi vào rồi dừng, thay vì vọt qua rồi lùi lại. Dành cho vật TO — thẻ popup, bề ngang panel: vật càng to thì cú vọt càng đọc thành rung chứ không thành sức sống. */ --ease-soft: linear(0, 0.062, 0.191, 0.336, 0.472, 0.59, 0.686, 0.762, 0.822, 0.868, 0.902, 0.928, 0.947, 0.961, 0.972, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 1); /* Popover / điều khiển nhỏ của họ: k300/d25 → zeta 0.722, vọt 3.8%. Đủ để cảm thấy có lực, chưa tới mức thành nhún nhảy. Dành cho vật NHỎ — núm gạt, chấm chọn, mũi tên, thẻ nhỏ góc màn. */ --ease-spring: linear(0, 0.052, 0.173, 0.326, 0.482, 0.626, 0.748, 0.846, 0.919, 0.972, 1.006, 1.026, 1.035, 1.038, 1.036, 1.031, 1.025, 1.019, 1.014, 1.009, 1.006, 1); --ease-inout: cubic-bezier(.42, 0, .58, 1); /* easeInOut — nhịp của lớp blur */ /* Chữ ký của animate-ui, và là thứ tạo ra cảm giác "nhẹ nhàng": nội dung vào/ra bằng `filter: blur()` chạy SONG SONG với `opacity`, nên nó hiện ra TỪ CHỖ MỜ chứ không bật lên. Nguyên văn từ source của họ: initial { opacity: 0, filter: blur(4px) } → animate { 1, blur(0) } transition { duration: 0.2, ease: 'easeInOut' } HAI bán kính vì hai cỡ chủ thể — cùng lý lẽ với quãng trồi 6px/4px: thẻ 420px thì 4px mới đọc ra, còn một dòng chữ 12px thì 4px là nhoè thành vệt. ⚠️ `filter` tạo containing block cho con `position: fixed` và tạo stacking context → kiểm cây DOM TRƯỚC KHI đặt. Cấm tuyệt đối trên `.hud` (ở ≤900px chính nó là fixed) và trên `#stage`/`#frame` (blur cả iframe store). */ --dur-blur: 200ms; /* duration: 0.2 trong source của họ */ --blur-in: 4px; /* thẻ popup, lớp phủ */ --blur-text: 3px; /* chữ, hàng danh sách */ --stagger: 46ms; /* panel chỉ rộng 320px nên bậc phải ngắn hơn thang danh sách thường (~100ms) — bậc dài trên quãng ngắn thì bốn khối đọc thành bốn lượt rời, không thành một loạt. */ /* HAI nhịp, không phải một. `--stagger` ở trên là nhịp giữa các DÒNG trong cùng một nhóm; token này là nhịp giữa các NHÓM. Vì sao phải tách: một bậc duy nhất 46ms trải trên 10 phần của popup thì tại mọi thời điểm có ~6 phần đang chạy cùng lúc (260ms ÷ 46ms), nên mắt đọc thành MỘT MẢNG trôi lên chứ không thành "từng phần hiện ra" — đúng thứ đã hỏng ở đó. Nhịp nhóm 150ms hạ số phần chạy đồng thời xuống ~1.7, đủ để mỗi nhóm có khoảnh khắc riêng mà chưa thành giật cục. Bám thang có thật của animate-ui (`primitives-texts-splitting`: 50ms/ký tự · 200ms/từ · 300ms/dòng): nhóm nằm giữa "từ" và "dòng". */ --stagger-block: 150ms; /* Nhịp NỀN — cố ý đứng NGOÀI thang --dur-* ở trên, và chính vì thế mới phải có token riêng: thang kia đo thời gian TRẢ LỜI một thao tác, hai cái dưới đây không trả lời ai cả nên đo bằng thang khác. "Đứng ngoài thang" là lý do để đẻ thang thứ hai, KHÔNG phải giấy phép đóng đinh con số vào file dùng nó — số nằm trong demo.css thì không ai chỉnh được nhịp của cả trang từ một chỗ. */ --dur-ambient: 2.4s; /* hơi thở của chấm "đang chạy" — lặp vô hạn */ --dur-nudge: .55s; /* một cú hích gọi mắt về thẻ nhỏ — chạy 2 lượt rồi thôi */ /* --- Collage card (kích thước gốc trong Figma) ------------------------ */ /* Dải collage = 1 ảnh 1920×486 (Figma 26794:3963). Cao 486/984 = 49.4% chiều cao khung thiết kế → khoá theo CHIỀU CAO, bề rộng tự suy ra theo tỉ lệ. Khoá theo bề rộng thì màn 16:9 (thấp hơn khung Figma 1.95:1) làm thẻ co lại, dải mỏng dính, mất sức nặng. */ --strip-ratio: 3.9588; /* 1920/485 — khung collage mới */ --strip-natural-w: 1920px; /* bề rộng gốc của file ảnh */ --collage-h: min(485px, 46dvh); --strip-w: calc(var(--collage-h) * var(--strip-ratio)); /* Neo riêng cho 2 ngôi sao nền. TRƯỚC đây chúng tính theo --collage-h, nên mỗi lần chỉnh dải collage là sao nền trôi theo — hai thứ không liên quan gì nhau. Giữ đúng giá trị --collage-h cũ (min(532px,49.3vh) × 1.1278) để nền đứng nguyên chỗ đã canh với Figma. */ --sparks-anchor-h: min(600px, 55.6vh); } /* ========================================================================== shadcn/ui — lớp token tương thích (https://ui.shadcn.com) Giữ nguyên bảng màu AOV ở trên, chỉ đổi TÊN sang bộ tên của shadcn để phần vỏ công cụ (topbar, panel, coach mark) dựng theo đúng hệ đó. shadcn dùng neutral + 1 primary + bo góc thống nhất qua --radius. ========================================================================== */ :root { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --popover: #ffffff; --popover-foreground: #0a0a0a; /* primary = accent AOV, không mượn màu mặc định của shadcn */ --primary: var(--c-accent); --primary-foreground: #ffffff; --secondary: #f5f5f5; --secondary-foreground:#171717; --muted: #f5f5f5; --muted-foreground: #737373; --sh-accent: #f5f5f5; /* tránh trùng tên với --c-accent của AOV */ --sh-accent-foreground:#171717; --destructive: #e7000b; --border: #e5e5e5; --input: #e5e5e5; --ring: var(--c-accent); --radius: 0.625rem; /* 10px — mặc định shadcn */ --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* thang bóng của shadcn */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }